@motion-proto/live-tokens 0.6.0 → 0.6.2

package/src/pages/ComponentEditorPage.svelte

@@ -8,6 +8,7 @@
   import { componentRegistryEntries, validateRegistryAgainstServerScan } from '../component-editor/registry';
   import { listComponents } from '../lib/componentConfigService';
   import { selectedComponent } from '../lib/editorViewStore';
+  import { componentDirty } from '../lib/editorStore';
   // Editor chrome + form controls + icon font must be JS imports (not @import
   // inside the style block) so Vite resolves them via the module graph
   // regardless of how the consumer compiles Svelte CSS (external ?lang.css vs
@@ -149,12 +150,16 @@
         <button
           class="nav-item"
           class:active={$selectedComponent === item.id}
+          class:dirty={$componentDirty[item.id]}
           onmouseenter={(e) => showHint(item.label, e.currentTarget)}
           onmouseleave={hideHint}
           onclick={() => selectComponent(item.id)}
         >
           <i class={item.icon}></i>
           <span class="rail-label">{item.label}</span>
+          {#if $componentDirty[item.id]}
+            <span class="dirty-dot" aria-label="Unsaved changes" title="Unsaved changes"></span>
+          {/if}
         </button>
       {/each}
     </div>
@@ -334,6 +339,7 @@
   }
 
   .nav-item {
+    position: relative;
     display: grid;
     grid-template-columns: 48px 1fr;
     align-items: center;
@@ -369,6 +375,25 @@
     opacity: 0.85;
   }
 
+  /* Amber dot indicating unsaved changes. Anchored to the top-right of the
+     icon column so it stays visible whether the rail is collapsed (icon-only)
+     or expanded (icon + label). */
+  .dirty-dot {
+    position: absolute;
+    top: 8px;
+    left: 30px;
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: var(--ui-highlight);
+    box-shadow: 0 0 0 2px black;
+    pointer-events: none;
+  }
+
+  .nav-item.dirty {
+    color: var(--ui-text-secondary);
+  }
+
   .content {
     padding: 0 var(--ui-space-32);
     background: black;

package/src/pages/EditorShell.svelte

@@ -12,6 +12,7 @@
   import { scrollSectionIntoView } from '../lib/scrollSection';
   import { editorState } from '../lib/editorStore';
   import { editorView, sidebarCondensed, selectedComponent } from '../lib/editorViewStore';
+  import { componentDirty } from '../lib/editorStore';
   import { componentRegistryEntries, validateRegistryAgainstServerScan } from '../component-editor/registry';
   import { listComponents } from '../lib/componentConfigService';
 
@@ -170,12 +171,16 @@
           <button
             class="nav-item"
             class:active={$selectedComponent === item.id}
+            class:dirty={$componentDirty[item.id]}
             onmouseenter={(e) => showHint(item.label, e.currentTarget)}
             onmouseleave={hideHint}
             onclick={() => selectComponent(item.id)}
           >
             <i class={item.icon}></i>
             <span class="nav-label">{item.label}</span>
+            {#if $componentDirty[item.id]}
+              <span class="dirty-dot" aria-label="Unsaved changes" title="Unsaved changes"></span>
+            {/if}
           </button>
         {/each}
       </div>
@@ -262,6 +267,7 @@
   }
 
   .nav-item {
+    position: relative;
     display: grid;
     grid-template-columns: 48px 1fr;
     align-items: center;
@@ -286,6 +292,25 @@
     opacity: 0.85;
   }
 
+  /* Amber dot indicating unsaved changes. Anchored to the top-right of the
+     icon column so it stays visible whether the sidebar is condensed
+     (icon-only) or expanded (icon + label). */
+  .dirty-dot {
+    position: absolute;
+    top: 8px;
+    left: 30px;
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: var(--ui-highlight);
+    box-shadow: 0 0 0 2px black;
+    pointer-events: none;
+  }
+
+  .nav-item.dirty {
+    color: var(--ui-text-secondary);
+  }
+
   .nav-label {
     white-space: nowrap;
     overflow: hidden;