feat: add snippet sorting by size and update help section with sorting instructions

.claude/settings.local.json

@@ -5,5 +5,6 @@
     ],
     "deny": [],
     "ask": []
-  }
+  },
+  "outputStyle": "default"
 }

index.html

@@ -73,6 +73,10 @@
                         <span class="sort-text">Name</span>
                         <span class="sort-arrow">⬇</span>
                     </button>
+                    <button class="sort-btn" data-sort="size" title="Sort by snippet size">
+                        <span class="sort-text">Size</span>
+                        <span class="sort-arrow">⬇</span>
+                    </button>
                 </div>
                 <div class="search-controls">
                     <input type="text" id="snippet-search" placeholder="Search snippets..." />
@@ -438,6 +442,7 @@
                     <section class="help-section">
                         <h3 class="help-heading">Tips & Tricks</h3>
                         <ul class="help-list">
+                            <li><strong>Sort snippets</strong> — Use the sort buttons to organize by Modified, Created, Name, or Size. Click a button twice to reverse the sort order (⬇ becomes ⬆).</li>
                             <li><strong>Extract inline data</strong> — When editing a spec with inline data, click "Extract to Dataset" to create a reusable dataset automatically.</li>
                             <li><strong>Dataset references</strong> — Astrolabe resolves dataset references at render time, so you can freely switch between inline and referenced data.</li>
                             <li><strong>Search across specs</strong> — The search box looks inside snippet names, comments, and the spec content itself.</li>

src/js/snippet-manager.js

@@ -225,6 +225,12 @@ const SnippetStorage = {
                 case 'created':
                     comparison = new Date(a.created) - new Date(b.created);
                     break;
+                case 'size':
+                    // Calculate size for both snippets
+                    const sizeA = new Blob([JSON.stringify(a)]).size;
+                    const sizeB = new Blob([JSON.stringify(b)]).size;
+                    comparison = sizeA - sizeB;
+                    break;
                 case 'modified':
                 default:
                     comparison = new Date(a.modified) - new Date(b.modified);