@motion-proto/live-tokens 0.6.1 → 0.7.1

package/src/{ui → editor/ui}/sections/GradientsSection.svelte

@@ -7,7 +7,7 @@
    * direction, kind switch) lives in <GradientEditor>; this section is a
    * thin grid that toggles which gradient is being edited.
    */
-  import { editorState } from '../../lib/editorStore';
+  import { editorState } from '../../core/store/editorStore';
   import GradientEditor from '../GradientEditor.svelte';
 
   interface Props {
@@ -60,12 +60,12 @@
   }
 
   .section-title {
-    font-size: var(--ui-font-size-lg);
+    font-size: var(--ui-font-size-2xl);
     font-weight: var(--ui-font-weight-semibold);
     color: var(--ui-text-primary);
     margin: 0;
     padding-bottom: var(--ui-space-8);
-    border-bottom: 1px solid var(--ui-border-subtle);
+    border-bottom: 2px solid var(--ui-border-high);
   }
 
   .editor-intro {
@@ -103,7 +103,7 @@
     flex-direction: column;
     gap: var(--ui-space-8);
     padding: var(--ui-space-12);
-    border: 1px solid var(--ui-border-faint);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-lg);
     background: var(--ui-surface-lowest);
     min-width: 0;
@@ -124,7 +124,7 @@
   .gradient-edit-btn {
     padding: var(--ui-space-2) var(--ui-space-10);
     background: var(--ui-surface-low);
-    border: 1px solid var(--ui-border-faint);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-sm);
     color: var(--ui-text-secondary);
     font-size: var(--ui-font-size-xs);
@@ -134,13 +134,13 @@
 
   .gradient-edit-btn:hover {
     color: var(--ui-text-primary);
-    border-color: var(--ui-border-default);
+    border-color: var(--ui-border);
   }
 
   .gradient-editor-host {
     margin-top: var(--ui-space-8);
     padding-top: var(--ui-space-12);
-    border-top: 1px dashed var(--ui-border-faint);
+    border-top: 1px dashed var(--ui-border-low);
   }
 
   .gradient-box {

package/src/{ui → editor/ui}/sections/OverlaysSection.svelte

@@ -6,8 +6,8 @@
    * rgba values out to :root, so this component only orchestrates mutations
    * and reads derived display state.
    */
-  import { editorState, mutate, beginSliderGesture } from '../../lib/editorStore';
-  import type { OverlayToken, OverlayChannelGlobals, EditorState } from '../../lib/editorTypes';
+  import { editorState, mutate, beginSliderGesture } from '../../core/store/editorStore';
+  import type { OverlayToken, OverlayChannelGlobals, EditorState } from '../../core/store/editorTypes';
 
   interface Props {
     copiedVar?: string | null;
@@ -341,16 +341,16 @@
   }
 
   .section-title {
-    font-size: var(--ui-font-size-lg);
+    font-size: var(--ui-font-size-2xl);
     font-weight: var(--ui-font-weight-semibold);
     color: var(--ui-text-primary);
     margin: 0;
     padding-bottom: var(--ui-space-8);
-    border-bottom: 1px solid var(--ui-border-subtle);
+    border-bottom: 2px solid var(--ui-border-high);
   }
 
   .group-title {
-    font-size: var(--ui-font-size-md);
+    font-size: var(--ui-font-size-lg);
     font-weight: var(--ui-font-weight-semibold);
     color: var(--ui-text-secondary);
     margin: 0;
@@ -404,7 +404,7 @@
     border-radius: var(--ui-radius-md);
     position: relative;
     overflow: hidden;
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     background-image:
       linear-gradient(45deg, #ccc 25%, transparent 25%),
       linear-gradient(-45deg, #ccc 25%, transparent 25%),
@@ -442,7 +442,7 @@
     gap: var(--ui-space-8);
     padding: var(--ui-space-12);
     background: var(--ui-surface-lowest);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-md);
     margin-top: var(--ui-space-8);
   }
@@ -517,7 +517,7 @@
     text-align: right;
     flex-shrink: 0;
     background: var(--ui-surface-lowest);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-sm);
     padding: var(--ui-space-2) var(--ui-space-4);
     -moz-appearance: textfield;
@@ -532,7 +532,7 @@
 
   .shadow-slider-input:focus {
     outline: none;
-    border-color: var(--ui-border-medium);
+    border-color: var(--ui-border-high);
   }
 
   .shadow-slider-unit {
@@ -564,7 +564,7 @@
     gap: var(--ui-space-8);
     padding: var(--ui-space-12);
     background: var(--ui-surface-lowest);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-md);
     width: 100%;
     min-width: 14rem;
@@ -576,7 +576,7 @@
     gap: var(--ui-space-4);
     margin-top: var(--ui-space-4);
     padding-top: var(--ui-space-8);
-    border-top: 1px solid var(--ui-border-faint);
+    border-top: 1px solid var(--ui-border-low);
   }
 
   .shadow-css-output code {
@@ -592,7 +592,7 @@
     color: var(--ui-text-muted);
     cursor: pointer;
     padding: var(--ui-space-2) var(--ui-space-6);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-sm);
     text-align: center;
     transition: color var(--ui-transition-fast), border-color var(--ui-transition-fast);
@@ -600,7 +600,7 @@
 
   .shadow-copy-btn:hover {
     color: var(--ui-text-primary);
-    border-color: var(--ui-border-medium);
+    border-color: var(--ui-border-high);
   }
 
   .slider-track {
@@ -609,7 +609,7 @@
     position: relative;
     height: 12px;
     border-radius: var(--ui-radius-sm);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
   }
 
   .slider-track input[type="range"] {
@@ -631,7 +631,7 @@
     height: 14px;
     border-radius: 2px;
     background: white;
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     box-shadow: 0 1px 3px rgba(0,0,0,0.4);
     cursor: pointer;
   }
@@ -641,7 +641,7 @@
     height: 14px;
     border-radius: 2px;
     background: white;
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     box-shadow: 0 1px 3px rgba(0,0,0,0.4);
     cursor: pointer;
   }
@@ -661,7 +661,7 @@
     width: 2rem;
     flex-shrink: 0;
     border-radius: var(--ui-radius-sm);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
   }
 
   .global-color-sliders {

package/src/{ui → editor/ui}/sections/ShadowsSection.svelte

@@ -18,8 +18,8 @@
     seedShadowsFromDom, shadowTokenCss, computeShadowXY,
     SCALE_SHADOW_VARIABLES, defaultShadowOverride,
     type Scope,
-  } from '../../lib/editorStore';
-  import type { ShadowToken, ShadowOverrideFlags, EditorState } from '../../lib/editorTypes';
+  } from '../../core/store/editorStore';
+  import type { ShadowToken, ShadowOverrideFlags, EditorState } from '../../core/store/editorTypes';
 
   interface Props {
     copiedVar?: string | null;
@@ -803,12 +803,12 @@
   }
 
   .section-title {
-    font-size: var(--ui-font-size-lg);
+    font-size: var(--ui-font-size-2xl);
     font-weight: var(--ui-font-weight-semibold);
     color: var(--ui-text-primary);
     margin: 0;
     padding-bottom: var(--ui-space-8);
-    border-bottom: 1px solid var(--ui-border-subtle);
+    border-bottom: 2px solid var(--ui-border-high);
   }
 
   .token-info {
@@ -890,7 +890,7 @@
     color: var(--ui-text-muted);
     cursor: pointer;
     padding: var(--ui-space-4) var(--ui-space-8);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-sm);
     text-align: center;
     transition: color var(--ui-transition-fast), border-color var(--ui-transition-fast);
@@ -898,7 +898,7 @@
 
   .reset-btn:hover {
     color: var(--ui-text-primary);
-    border-color: var(--ui-border-medium);
+    border-color: var(--ui-border-high);
   }
 
   .shadow-box {
@@ -945,7 +945,7 @@
     text-align: right;
     flex-shrink: 0;
     background: var(--ui-surface-lowest);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-sm);
     padding: var(--ui-space-2) var(--ui-space-4);
     -moz-appearance: textfield;
@@ -960,7 +960,7 @@
 
   .shadow-slider-input:focus {
     outline: none;
-    border-color: var(--ui-border-medium);
+    border-color: var(--ui-border-high);
   }
 
   .shadow-slider-unit {
@@ -980,7 +980,7 @@
 
   .dial-ring {
     fill: none;
-    stroke: var(--ui-border-subtle);
+    stroke: var(--ui-border-low);
     stroke-width: 1.5;
   }
 
@@ -996,7 +996,7 @@
   }
 
   .angle-dial:hover .dial-ring {
-    stroke: var(--ui-border-medium);
+    stroke: var(--ui-border-high);
   }
 
   .angle-dial:hover .dial-handle {
@@ -1009,7 +1009,7 @@
     gap: var(--ui-space-4);
     margin-top: var(--ui-space-4);
     padding-top: var(--ui-space-8);
-    border-top: 1px solid var(--ui-border-faint);
+    border-top: 1px solid var(--ui-border-low);
   }
 
   .shadow-css-output code {
@@ -1025,7 +1025,7 @@
     color: var(--ui-text-muted);
     cursor: pointer;
     padding: var(--ui-space-2) var(--ui-space-6);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-sm);
     text-align: center;
     transition: color var(--ui-transition-fast), border-color var(--ui-transition-fast);
@@ -1033,7 +1033,7 @@
 
   .shadow-copy-btn:hover {
     color: var(--ui-text-primary);
-    border-color: var(--ui-border-medium);
+    border-color: var(--ui-border-high);
   }
 
   /* Global shadow editor */
@@ -1046,7 +1046,7 @@
     gap: var(--ui-space-6);
     padding: var(--ui-space-12);
     background: var(--ui-surface-lowest);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-md);
     width: 18rem;
   }
@@ -1103,7 +1103,7 @@
     position: relative;
     height: 12px;
     border-radius: var(--ui-radius-sm);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
   }
 
   .slider-track input[type="range"] {
@@ -1125,7 +1125,7 @@
     height: 14px;
     border-radius: 2px;
     background: white;
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     box-shadow: 0 1px 3px rgba(0,0,0,0.4);
     cursor: pointer;
   }
@@ -1135,7 +1135,7 @@
     height: 14px;
     border-radius: 2px;
     background: white;
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     box-shadow: 0 1px 3px rgba(0,0,0,0.4);
     cursor: pointer;
   }
@@ -1155,7 +1155,7 @@
     width: 2rem;
     flex-shrink: 0;
     border-radius: var(--ui-radius-sm);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
   }
 
   .global-color-sliders {
@@ -1172,7 +1172,7 @@
     color: var(--ui-text-muted);
     cursor: pointer;
     padding: var(--ui-space-4) var(--ui-space-8);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-md);
     background: var(--ui-surface-low);
     transition: color var(--ui-transition-fast), border-color var(--ui-transition-fast);
@@ -1180,7 +1180,7 @@
 
   .bg-picker-btn:hover {
     color: var(--ui-text-primary);
-    border-color: var(--ui-border-medium);
+    border-color: var(--ui-border-high);
   }
 
   .bg-picker-menu {
@@ -1192,7 +1192,7 @@
     max-height: 24rem;
     overflow-y: auto;
     background: var(--ui-surface-low);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     border-radius: var(--ui-radius-md);
     padding: var(--ui-space-4);
     display: flex;
@@ -1250,7 +1250,7 @@
     width: 1rem;
     height: 1rem;
     border-radius: var(--ui-radius-sm);
-    border: 1px solid var(--ui-border-subtle);
+    border: 1px solid var(--ui-border-low);
     flex-shrink: 0;
   }
 </style>

package/src/{ui → editor/ui}/sections/TokenScaleTable.svelte

@@ -12,7 +12,7 @@
    * Values are read live via getComputedStyle (passed in by the parent through
    * `tokens`), so tokens.css remains the single source of truth.
    */
-  import { editorState } from '../../lib/editorStore';
+  import { editorState } from '../../core/store/editorStore';
 
   interface TokenItem {
     variable: string;
@@ -263,7 +263,7 @@
     width: 3.5rem;
     height: 3.5rem;
     background: none;
-    border: 2px solid var(--ui-border-medium);
+    border: 2px solid var(--ui-border-high);
   }
 
   /* Font sizes / icon sizes */
@@ -339,7 +339,7 @@
     align-items: baseline;
     gap: var(--ui-space-12);
     padding: var(--ui-space-4) 0;
-    border-bottom: 1px solid var(--ui-border-faint);
+    border-bottom: 1px solid var(--ui-border-low);
   }
 
   .token-row:last-child {

package/src/{components → system/components}/Badge.svelte

@@ -21,14 +21,6 @@
     variant?: BadgeVariant;
     size?: 'default' | 'small';
     icon?: string | undefined;
-    /** When true, badge is absolutely positioned. Requires the parent to be position: relative. */
-    floating?: boolean;
-    /** Corner of the positioned parent to attach to when floating. */
-    anchor?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-    /** CSS length to offset from the anchor edges. Defaults to --space-12 (or --space-8 when size='small'). */
-    offset?: string | undefined;
-    /** When true, badge sits flush in the anchor corner: zero offset and squared corners. */
-    flush?: boolean;
     /** Custom icon content. Falls back to `icon` prop's font-icon class. Renamed from `slot="icon"` in 0.5.0. */
     iconSlot?: Snippet;
     children?: Snippet;
@@ -38,10 +30,6 @@
     variant = 'info',
     size = 'default',
     icon = undefined,
-    floating = false,
-    anchor = 'bottom-right',
-    offset = undefined,
-    flush = false,
     iconSlot,
     children,
   }: Props = $props();
@@ -50,10 +38,6 @@
 <span
   class="badge badge-{variant}"
   class:badge-small={size === 'small'}
-  class:badge-floating={floating}
-  class:badge-flush={flush}
-  data-anchor={floating ? anchor : undefined}
-  style={floating && offset && !flush ? `--badge-offset: ${offset};` : undefined}
 >
   {#if icon}
     <span class="icon"><i class={icon}></i></span>
@@ -228,7 +212,6 @@
   }
 
   .badge {
-    --badge-offset: var(--space-12);
     display: inline-flex;
     align-items: center;
     gap: var(--space-6);
@@ -249,22 +232,9 @@
   }
 
   .badge-small {
-    --badge-offset: var(--space-8);
     gap: var(--space-4);
   }
 
-  .badge-floating {
-    position: absolute;
-    /* Floating badges are decorative overlays over other content — let clicks
-       pass through to whatever owns the underlying surface (links, buttons). */
-    pointer-events: none;
-  }
-
-  .badge-floating[data-anchor='top-left']     { top: var(--badge-offset); left: var(--badge-offset); }
-  .badge-floating[data-anchor='top-right']    { top: var(--badge-offset); right: var(--badge-offset); }
-  .badge-floating[data-anchor='bottom-left']  { bottom: var(--badge-offset); left: var(--badge-offset); }
-  .badge-floating[data-anchor='bottom-right'] { bottom: var(--badge-offset); right: var(--badge-offset); }
-
   @each $v in $variants {
     .badge-#{$v} {
       --badge-icon-size: var(--badge-#{$v}-icon-size);
@@ -281,10 +251,4 @@
       box-shadow: var(--badge-#{$v}-shadow);
     }
   }
-
-  /* Flush wins over per-variant radius via source order — declared after @each. */
-  .badge-flush {
-    --badge-offset: 0;
-    border-radius: 0;
-  }
 </style>

package/src/{components → system/components}/Card.svelte

@@ -39,9 +39,10 @@
   </div>
 </div>
 
-<style>
+<style lang="scss">
+  @use '../styles/padding' as *;
+
   :global(:root) {
-    /* Default */
     --card-default-surface: var(--surface-neutral-high);
     --card-default-border: var(--border-neutral);
     --card-default-border-width: var(--border-width-1);
@@ -66,30 +67,8 @@
     --card-default-body-font-weight: var(--font-weight-normal);
     --card-default-body-line-height: var(--line-height-md);
 
-    /* Hover */
-    --card-hover-surface: var(--surface-neutral-high);
     --card-hover-border: var(--border-neutral-strong);
-    --card-hover-border-width: var(--border-width-1);
-    --card-hover-radius: var(--radius-lg);
-    --card-hover-header-padding: var(--space-16);
-    --card-hover-body-padding: var(--space-16);
     --card-hover-shadow: var(--shadow-md);
-    --card-hover-blur: var(--blur-none);
-    --card-hover-header-surface: var(--color-transparent);
-
-    --card-hover-title: var(--text-primary);
-    --card-hover-title-font-family: var(--font-sans);
-    --card-hover-title-font-size: var(--font-size-lg);
-    --card-hover-title-font-weight: var(--font-weight-normal);
-    --card-hover-title-line-height: var(--line-height-sm);
-
-    --card-hover-icon-size: var(--icon-size-lg);
-
-    --card-hover-body: var(--text-secondary);
-    --card-hover-body-font-family: var(--font-sans);
-    --card-hover-body-font-size: var(--font-size-md);
-    --card-hover-body-font-weight: var(--font-weight-normal);
-    --card-hover-body-line-height: var(--line-height-md);
   }
 
   .card {
@@ -98,35 +77,27 @@
     border-radius: var(--card-default-radius);
     box-shadow: var(--card-default-shadow);
     backdrop-filter: blur(var(--card-default-blur));
-    transition: all var(--duration-150);
+    transition: border-color var(--duration-150), box-shadow var(--duration-150);
     display: flex;
     flex-direction: column;
     overflow: hidden;
+    letter-spacing: normal;
   }
 
   .card:not(.no-hover):hover,
   .card.force-hover {
-    background: var(--card-hover-surface);
-    border: var(--card-hover-border-width) solid var(--card-hover-border);
-    border-radius: var(--card-hover-radius);
+    border-color: var(--card-hover-border);
     box-shadow: var(--card-hover-shadow);
-    backdrop-filter: blur(var(--card-hover-blur));
   }
 
   .card-header {
     display: flex;
     align-items: center;
     gap: var(--space-8);
-    padding: var(--card-default-header-padding);
+    @include themed-padding(--card-default-header-padding);
     background: var(--card-default-header-surface);
   }
 
-  .card:not(.no-hover):hover .card-header,
-  .card.force-hover .card-header {
-    padding: var(--card-hover-header-padding);
-    background: var(--card-hover-header-surface);
-  }
-
   .card.compact .card-header,
   .card.compact .card-body {
     padding: var(--space-8) var(--space-12);
@@ -137,12 +108,6 @@
     color: var(--card-color, var(--card-default-title));
   }
 
-  .card:not(.no-hover):hover .card-icon,
-  .card.force-hover .card-icon {
-    font-size: var(--card-hover-icon-size);
-    color: var(--card-color, var(--card-hover-title));
-  }
-
   .card.compact .card-icon {
     font-size: var(--icon-size-md);
   }
@@ -155,15 +120,6 @@
     line-height: var(--card-default-title-line-height);
   }
 
-  .card:not(.no-hover):hover .card-title,
-  .card.force-hover .card-title {
-    color: var(--card-hover-title);
-    font-family: var(--card-hover-title-font-family);
-    font-size: var(--card-hover-title-font-size);
-    font-weight: var(--card-hover-title-font-weight);
-    line-height: var(--card-hover-title-line-height);
-  }
-
   .card.compact .card-title {
     font-size: var(--font-size-md);
   }
@@ -174,17 +130,7 @@
     font-size: var(--card-default-body-font-size);
     font-weight: var(--card-default-body-font-weight);
     line-height: var(--card-default-body-line-height);
-    padding: var(--card-default-body-padding);
-  }
-
-  .card:not(.no-hover):hover .card-body,
-  .card.force-hover .card-body {
-    color: var(--card-hover-body);
-    font-family: var(--card-hover-body-font-family);
-    font-size: var(--card-hover-body-font-size);
-    font-weight: var(--card-hover-body-font-weight);
-    line-height: var(--card-hover-body-line-height);
-    padding: var(--card-hover-body-padding);
+    @include themed-padding(--card-default-body-padding);
   }
 
   .card.compact .card-body {

package/src/{components → system/components}/CornerBadge.svelte

@@ -11,7 +11,7 @@
     anchor?: CornerAnchor;
     size?: 'default' | 'small';
     icon?: string | undefined;
-    /** Custom icon content. Falls back to `icon` prop's font-icon class. Renamed from `slot="icon"` in 0.5.0. */
+    /** Custom icon content; falls back to `icon` prop's font-icon class. */
     iconSlot?: Snippet;
     children?: Snippet;
   }
@@ -37,23 +37,10 @@
 
   $variants: primary, accent, neutral, alternate, canvas, special, success, warning, danger, info;
 
-  // Per-variant token block kept flat (not collapsed via SCSS @each) so the
-  // Layer-2 token-discovery parser (`extractGlobalRootBody` in
-  // src/lib/parsers/globalRootBlock.ts) can read the .svelte source verbatim;
-  // @each interpolation would make the parser see zero tokens here, even though
-  // the rendered DOM would be identical. Same pattern as Badge.svelte / Notification.svelte.
-  //
-  // Role-based radii: each variable follows the badge's geometry regardless of anchor.
-  //  - outer:  the corner flush with the parent's anchored corner
-  //  - inner:  the diagonally opposite corner (deepest into the parent)
-  //  - h-axis: the on-axis corner along the horizontal edge shared with `outer`
-  //  - v-axis: the on-axis corner along the vertical edge shared with `outer`
-  //
-  // Padding + font props are corner-badge-specific (not inherited from the
-  // sibling Badge variant), so corner-badge instances can carry their own
-  // typography and sizing without dragging the inline Badge along. They default
-  // to the same underlying global tokens Badge uses, so an unconfigured corner
-  // badge still matches its inline badge counterpart visually.
+  // Flat per-variant blocks (no @each) so extractGlobalRootBody can parse them verbatim.
+  // Role-based radii follow badge geometry regardless of anchor:
+  //   outer = flush corner, inner = diagonal, h-axis/v-axis = edges shared with outer.
+  // Padding + font are corner-badge-specific; defaults match Badge so unconfigured looks identical.
   :global(:root) {
     /* Primary */
     --corner-badge-primary-margin: var(--space-0);
@@ -182,11 +169,8 @@
     pointer-events: none;
   }
 
-  // Per-variant: pull the variant's public tokens into private vars so the
-  // anchor-based mappings below can read them without 4 × 10 explicit rules.
-  // Padding + font props are forwarded directly onto the inner Badge so the
-  // corner-badge tokens fully replace Badge's per-variant declarations
-  // (otherwise Badge's own `.badge-#{$v}` rule wins by source order).
+  // Pull public tokens into private vars so anchor mappings below stay generic (avoids 4×10 rules).
+  // Padding + font forwarded onto inner Badge to override Badge's own `.badge-#{$v}` rule.
   @each $v in $variants {
     .corner-badge-#{$v} {
       --_margin: var(--corner-badge-#{$v}-margin);
@@ -210,7 +194,7 @@
   .corner-badge-top-right    { top:    var(--_margin); right: var(--_margin); }
   .corner-badge-top-left     { top:    var(--_margin); left:  var(--_margin); }
 
-  /* Map logical corner roles → physical corners per anchor. */
+  /* Logical roles to physical corners, per anchor. */
   .corner-badge-bottom-right :global(.badge) {
     border-top-left-radius:     var(--_inner-radius);
     border-top-right-radius:    var(--_v-axis-radius);

package/src/{components → system/components}/Dialog.svelte

@@ -2,7 +2,7 @@
   import { createEventDispatcher, tick } from 'svelte';
   import type { Snippet } from 'svelte';
   import Button from './Button.svelte';
-  import { editorState } from '../lib/editorStore';
+  import { editorState } from '../../editor/core/store/editorStore';
   import type { ButtonVariant, DialogButtonSpec } from './types';
 
   const BUTTON_VARIANTS: readonly ButtonVariant[] = ['primary', 'secondary', 'outline', 'success', 'danger', 'warning'];