@motion-proto/live-tokens 0.7.1 → 0.9.0

package/src/editor/core/themes/themeInit.ts

@@ -1,4 +1,4 @@
-import type { Theme } from './themeTypes';
+import type { AliasDiskValue, Theme } from './themeTypes';
 import { activeFileName } from '../store/editorConfigStore';
 import { migrateThemeFonts } from '../fonts/fontMigration';
 import { applyFontSources, applyFontStacks } from '../fonts/fontLoader';
@@ -52,7 +52,7 @@ export async function initializeTheme(): Promise<void> {
   if (list && Array.isArray(list.components)) {
     const configs: Record<
       string,
-      { activeFile: string; aliases: Record<string, string>; config?: Record<string, unknown>; schemaVersion?: number }
+      { activeFile: string; aliases: Record<string, AliasDiskValue>; config?: Record<string, unknown>; schemaVersion?: number }
     > = {};
     await Promise.all(
       list.components.map(async (c) => {

package/src/editor/core/themes/themeTypes.ts

@@ -27,6 +27,19 @@ export interface PaletteConfig {
   gradientStops?: GradientStop[];
   gradientSize?: 'page' | 'window';
   anchorToBase?: boolean;
+  /**
+   * Set to true by importers when they overlay `cssVariables[--color-{ns}-*]`
+   * without owning the typed-state curves. The storage-layer reconciler uses
+   * it as an opt-in switch: snap `baseColor` (or `tintHue`+`tintChroma` for
+   * gray palettes) to the imported `--color-{ns}-500` anchor and clear the
+   * flag. Editor-authored themes never set this, so the reconciler is a
+   * strict no-op for them.
+   *
+   * Persists on disk for first-load reconciliation. After reconcile strips
+   * the palette-derived keys from `cssVariables`, subsequent reconciles find
+   * no anchor and become idempotent no-ops regardless of the flag's value.
+   */
+  _imported?: boolean;
 }
 
 export type FontSourceKind = 'google' | 'typekit' | 'css-url' | 'font-face';
@@ -92,12 +105,20 @@ export interface ThemeMeta {
   isActive: boolean;
 }
 
+/** On-disk shape of a single alias entry. Plain strings carry the bulk of
+ *  aliases (token refs like `--surface-canvas-low` or literal CSS like `4px`);
+ *  the gradient object shape is the structured payload for component-owned
+ *  gradients that can't compress to a single string. */
+export type AliasDiskValue =
+  | string
+  | { kind: 'gradient'; value: { type: 'linear' | 'radial' | 'solid' | 'none'; angle: number; radius?: number; centerX?: number; aspectX?: number; aspectY?: number; stops: { position: number; color: string; opacity?: number }[] } };
+
 export interface ComponentConfig {
   name: string;
   component: string;
   createdAt: string;
   updatedAt: string;
-  aliases: Record<string, string>;
+  aliases: Record<string, AliasDiskValue>;
   config?: Record<string, unknown>;
   /**
    * Server-attached file-name marker. Same role as `Theme._fileName`. Set by
@@ -139,6 +160,40 @@ export interface Manifest {
   _fileName?: string;
 }
 
+/**
+ * Transport artifact for sharing a manifest with someone else. Self-contained:
+ * the bundle inlines the referenced theme and every non-default component
+ * config so the receiver doesn't need anything else on disk to apply it.
+ *
+ * Bundles are *not* stored under `manifests/` — they're transient downloads /
+ * uploads. Local manifests stay lightweight pointer files; bundles are the
+ * import/export envelope. See temp/manifest-robustness-plan.md §11.
+ *
+ * `componentConfigs` is keyed by `${component}/${configName}` so a single map
+ * carries multiple components. Entries whose manifest value is `"default"`
+ * are deliberately omitted — the receiver's local `default.json` is the
+ * live-tokens package's canonical default, and shipping the sender's default
+ * would risk version-divergence with no clean conflict story.
+ */
+export interface ManifestBundle {
+  /** Discriminator for safe identification of bundle JSON files. */
+  kind: 'manifest-bundle';
+  /** Bumps when the bundle envelope shape changes. Start at 1. */
+  schemaVersion: 1;
+  /** Sender's `@motion-proto/live-tokens` package version. Receiver can
+   *  compare to its own to warn about compatibility drift. */
+  liveTokensVersion: string;
+  /** ISO timestamp of when the bundle was exported. */
+  exportedAt: string;
+  /** Full pointer-form manifest (same shape as on-disk manifest files). */
+  manifest: Manifest;
+  /** Full content of the theme that `manifest.theme` references. */
+  theme: Theme;
+  /** Full content of each non-default component config referenced by
+   *  `manifest.componentConfigs`, keyed by `${component}/${configName}`. */
+  componentConfigs: Record<string, ComponentConfig>;
+}
+
 export interface ManifestMeta {
   name: string;
   fileName: string;

package/src/editor/index.ts

@@ -7,7 +7,13 @@ export { configureEditor, storageKey } from './core/store/editorConfig';
 export { activeFileName } from './core/store/editorConfigStore';
 export { init as initRouter, route, navigate } from './core/routing/router';
 export { init as initCssVarSync } from './core/cssVarSync';
-export { init as initEditorStore } from './core/store/editorStore';
+export {
+  init as initEditorStore,
+  editorState,
+  setComponentAlias,
+  setComponentConfig,
+  registerComponentSchema,
+} from './core/store/editorStore';
 
 export { setCssVar, removeCssVar } from './core/cssVarSync';
 
@@ -67,3 +73,6 @@ export { hexToOklch, oklchToHex, gamutClamp } from './core/palettes/oklch';
 export type { Oklch } from './core/palettes/oklch';
 
 export { initializeTheme } from './core/themes/themeInit';
+
+export { registerComponent } from './component-editor/registry';
+export type { RegisterComponentEntry, RegistryEntry, ComponentId } from './component-editor/registry';

package/src/editor/overlay/ColumnsOverlay.svelte

@@ -118,7 +118,6 @@
     font-family: var(--ui-font-mono, ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace);
     font-size: 10px;
     color: rgba(255, 255, 255, 0.75);
-    letter-spacing: 0.02em;
     white-space: nowrap;
   }
 

package/src/editor/overlay/LiveEditorOverlay.svelte

@@ -422,7 +422,7 @@
 
   .lt-overlay.no-transition,
   .lt-overlay.no-transition .frame-wrap {
-    transition: none !important;
+    transition: none;
   }
 
   .header {
@@ -451,7 +451,6 @@
     font-size: var(--ui-font-size-md, 16px);
     font-weight: var(--ui-font-weight-semibold, 600);
     color: rgba(255, 255, 255, 0.85);
-    letter-spacing: 0.02em;
   }
 
   .spacer { flex: 1; }
@@ -460,7 +459,6 @@
     font-size: var(--ui-font-size-md, 16px);
     font-weight: var(--ui-font-weight-medium, 500);
     color: rgba(255, 255, 255, 0.4);
-    letter-spacing: 0.02em;
     margin-left: var(--ui-space-2, 2px);
     user-select: none;
   }
@@ -523,7 +521,6 @@
   .seg-label {
     font-size: var(--ui-font-size-md, 16px);
     font-weight: var(--ui-font-weight-semibold, 600);
-    letter-spacing: 0.02em;
     color: var(--ui-text-primary, #fff);
   }
 

package/src/editor/pages/ComponentEditorPage.svelte

@@ -5,7 +5,7 @@
   import ComponentsTab from '../component-editor/scaffolding/ComponentsTab.svelte';
   import ManifestFileManager from '../ui/ManifestFileManager.svelte';
   import { navigate } from '../core/routing/router';
-  import { componentRegistryEntries, validateRegistryAgainstServerScan } from '../component-editor/registry';
+  import { getComponentRegistryEntries, validateRegistryAgainstServerScan } from '../component-editor/registry';
   import { listComponents } from '../core/components/componentConfigService';
   import { selectedComponent } from '../core/store/editorViewStore';
   import { componentDirty } from '../core/store/editorStore';
@@ -96,7 +96,9 @@
     window.removeEventListener('keydown', handleKeydown);
   });
 
-  const componentNavItems = componentRegistryEntries.map(({ id, label, icon }) => ({ id, label, icon }));
+  const allComponentNavItems = getComponentRegistryEntries().map(({ id, label, icon, origin }) => ({ id, label, icon, origin }));
+  const systemNavItems = allComponentNavItems.filter((i) => i.origin === 'system');
+  const customNavItems = allComponentNavItems.filter((i) => i.origin === 'custom');
 </script>
 
 <!--
@@ -146,7 +148,7 @@
       {/if}
     </div>
     <div class="nav-items">
-      {#each componentNavItems as item}
+      {#each systemNavItems as item}
         <button
           class="nav-item"
           class:active={$selectedComponent === item.id}
@@ -162,6 +164,27 @@
           {/if}
         </button>
       {/each}
+      {#if customNavItems.length > 0}
+        <div class="nav-divider">
+          <span class="nav-divider-label">Custom</span>
+        </div>
+        {#each customNavItems as item}
+          <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}
+      {/if}
     </div>
     {#if drawerOpen}
       <div class="sidebar-footer">
@@ -331,6 +354,33 @@
     background: black;
   }
 
+  /* Divider between SYSTEM and CUSTOM groups. The horizontal line uses the
+     dimmer border token (sub-element separator), with an uppercase eyebrow
+     label that fades out when the rail is collapsed so the line still reads. */
+  .nav-divider {
+    display: grid;
+    grid-template-columns: 48px 1fr;
+    align-items: center;
+    height: 28px;
+    margin-top: var(--ui-space-8);
+    border-top: 1px solid var(--ui-border-low);
+  }
+
+  .nav-divider-label {
+    grid-column: 2;
+    font-size: var(--ui-font-size-xs);
+    font-weight: var(--ui-font-weight-semibold);
+    color: var(--ui-text-tertiary);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    opacity: 0;
+    transition: opacity 180ms ease;
+  }
+
+  .components-shell.rail-expanded .nav-divider-label {
+    opacity: 1;
+  }
+
   .sidebar-footer {
     flex-shrink: 0;
     margin-top: auto;

package/src/editor/pages/EditorShell.svelte

@@ -13,7 +13,7 @@
   import { editorState } from '../core/store/editorStore';
   import { editorView, sidebarCondensed, selectedComponent } from '../core/store/editorViewStore';
   import { componentDirty } from '../core/store/editorStore';
-  import { componentRegistryEntries, validateRegistryAgainstServerScan } from '../component-editor/registry';
+  import { getComponentRegistryEntries, validateRegistryAgainstServerScan } from '../component-editor/registry';
   import { listComponents } from '../core/components/componentConfigService';
 
   const tokenNavItems = [
@@ -29,7 +29,9 @@
     { id: 'utility-tokens', label: 'Utility Tokens', icon: 'fas fa-sliders' }
   ];
 
-  const componentNavItems = componentRegistryEntries.map(({ id, label, icon }) => ({ id, label, icon }));
+  const allComponentNavItems = getComponentRegistryEntries().map(({ id, label, icon, origin }) => ({ id, label, icon, origin }));
+  const systemNavItems = allComponentNavItems.filter((i) => i.origin === 'system');
+  const customNavItems = allComponentNavItems.filter((i) => i.origin === 'custom');
 
   let selectedTokenSection: string | null = $state(null);
   let saveStatus: 'idle' | 'saving' | 'saved' | 'error' = $state('idle');
@@ -149,7 +151,7 @@
       {/if}
     {:else}
       <div class="nav-items">
-        {#each componentNavItems as item}
+        {#each systemNavItems as item}
           <button
             class="nav-item"
             class:active={$selectedComponent === item.id}
@@ -165,6 +167,27 @@
             {/if}
           </button>
         {/each}
+        {#if customNavItems.length > 0}
+          <div class="nav-divider">
+            <span class="nav-divider-label">Custom</span>
+          </div>
+          {#each customNavItems as item}
+            <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}
+        {/if}
       </div>
       {#if !condensed}
         <div class="sidebar-footer">
@@ -248,6 +271,33 @@
     flex-shrink: 0;
   }
 
+  /* Divider between SYSTEM and CUSTOM groups. The horizontal line uses the
+     dimmer border token (sub-element separator), with an uppercase eyebrow
+     label that fades out when the rail is condensed so the line still reads. */
+  .nav-divider {
+    display: grid;
+    grid-template-columns: 48px 1fr;
+    align-items: center;
+    height: 28px;
+    margin-top: var(--ui-space-8);
+    border-top: 1px solid var(--ui-border-low);
+  }
+
+  .nav-divider-label {
+    grid-column: 2;
+    font-size: var(--ui-font-size-xs);
+    font-weight: var(--ui-font-weight-semibold);
+    color: var(--ui-text-tertiary);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    opacity: 1;
+    transition: opacity 180ms ease;
+  }
+
+  .layout.condensed .nav-divider-label {
+    opacity: 0;
+  }
+
   .nav-item {
     position: relative;
     display: grid;

package/src/editor/styles/ui-editor.css

@@ -96,6 +96,7 @@
   --ui-font-size-3xl: 1.75rem;    /* 28px */
   --ui-font-size-4xl: 2.25rem;    /* 36px */
 
+  --ui-font-weight-light:     200;
   --ui-font-weight-normal:    400;
   --ui-font-weight-medium:    500;
   --ui-font-weight-semibold:  600;

package/src/editor/styles/ui-form-controls.css

@@ -59,11 +59,12 @@
 .ui-form-select {
   /* No vertical padding - let min-height and line-height center text naturally */
   padding: 0 var(--ui-space-16);
+  padding-right: var(--ui-space-32);
   min-height: 2.375rem;  /* ~38px to match button height */
-  background: var(--ui-surface-lowest) !important;
-  border: 1px solid var(--ui-border) !important;
+  background-color: var(--ui-surface-lowest);
+  border: 1px solid var(--ui-border);
   border-radius: var(--ui-radius-md);
-  color: var(--ui-text-primary) !important;
+  color: var(--ui-text-primary);
   font-family: var(--ui-font-sans);
   font-size: var(--ui-font-size-md);
   font-weight: var(--ui-font-weight-normal);
@@ -71,28 +72,26 @@
   vertical-align: middle;
   cursor: pointer;
   transition: all var(--ui-transition-fast);
-  /* Prevent clipping */
-  overflow: visible !important;
-  box-sizing: border-box !important;
+  overflow: visible;
+  box-sizing: border-box;
   /* Reset browser defaults */
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
   /* Custom dropdown arrow */
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
-  background-repeat: no-repeat !important;
-  background-position: right var(--ui-space-12) center !important;
-  padding-right: var(--ui-space-32) !important;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23888' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right var(--ui-space-12) center;
 }
 
 .ui-form-select:hover:not(:disabled) {
-  background-color: var(--ui-surface-low) !important;
-  border-color: var(--ui-border-high) !important;
+  background-color: var(--ui-surface-low);
+  border-color: var(--ui-border-high);
 }
 
 .ui-form-select:focus {
   outline: none;
-  border-color: var(--ui-border-higher) !important;
+  border-color: var(--ui-border-higher);
   box-shadow: 0 0 0 2px hsla(0, 58%, 50%, 0.2);
 }
 
@@ -102,13 +101,13 @@
 }
 
 .ui-form-select:active:not(:disabled) {
-  background-color: var(--ui-surface) !important;
+  background-color: var(--ui-surface);
 }
 
 .ui-form-select:disabled {
-  background-color: var(--ui-surface-lowest) !important;
-  border-color: var(--ui-border-low) !important;
-  color: var(--ui-text-disabled) !important;
+  background-color: var(--ui-surface-lowest);
+  border-color: var(--ui-border-low);
+  color: var(--ui-text-disabled);
   cursor: not-allowed;
 }
 
@@ -116,8 +115,8 @@
 /* Note: Most option styling is controlled by browser/OS and cannot be fully overridden */
 /* These styles apply where browsers allow (limited support in Chrome/Firefox) */
 .ui-form-select option {
-  background-color: var(--ui-surface-lowest) !important;
-  color: var(--ui-text-primary) !important;
+  background-color: var(--ui-surface-lowest);
+  color: var(--ui-text-primary);
   padding: var(--ui-space-8) var(--ui-space-12);
   min-height: 2rem;
   font-size: var(--ui-font-size-md);
@@ -127,7 +126,7 @@
 
 /* Disabled options */
 .ui-form-select option:disabled {
-  color: var(--ui-text-disabled) !important;
+  color: var(--ui-text-disabled);
 }
 
 /* Input Field Styling */

package/src/editor/ui/BezierCurveEditor.svelte

@@ -8,6 +8,7 @@
     evalBezier, buildCurvePath, curveTemplates,
     serializeCurve, deserializeCurve,
   } from './curveEngine';
+  import UIPillButton from './UIPillButton.svelte';
 
   interface Props {
     anchors: CurveAnchor[];
@@ -257,8 +258,31 @@
 <div class="curve-panel">
   <div class="curve-panel-header">
     <span class="curve-panel-label">{cfg.label}</span>
+    <div class="curve-help">
+      <button class="curve-help-badge" type="button" aria-label="Curve editor help">
+        <i class="fas fa-circle-info" aria-hidden="true"></i>
+      </button>
+      <div class="curve-help-popover" role="tooltip">
+        <div><strong>Click</strong> path to add a point</div>
+        <div><strong>&#x2325; Click</strong> a point to remove</div>
+        <div><strong>Double-click</strong> a point to toggle smooth/corner</div>
+      </div>
+    </div>
   </div>
-  <div class="curve-container" style="padding-inline: calc(50% / {stepCount})">
+  <div class="curve-container">
+    <div class="curve-chart-overlay">
+      <UIPillButton
+        size="compact"
+        variant={shiftActive ? 'default' : 'outline'}
+        title="Vertical offset"
+        onclick={() => shiftActive = !shiftActive}
+      >
+        <svg viewBox="0 0 12 20" class="curve-tool-icon">
+          <path d="M6,2 L10,7 L7,7 L7,13 L10,13 L6,18 L2,13 L5,13 L5,7 L2,7 Z" />
+        </svg>
+        <span>Offset{offset !== 0 ? ` ${offset > 0 ? '+' : ''}${offset}` : ''}</span>
+      </UIPillButton>
+    </div>
     <svg
       bind:this={svgEl}
       class="curve-svg"
@@ -383,22 +407,9 @@
     </svg>
   </div>
   <div class="curve-toolbar">
-    <div class="curve-toolbar-left">
-      <button
-        class="curve-tool-btn"
-        class:active={shiftActive}
-        type="button"
-        title="Vertical offset"
-        onclick={() => shiftActive = !shiftActive}
-      >
-        <svg viewBox="0 0 12 20" class="curve-tool-icon">
-          <path d="M6,2 L10,7 L7,7 L7,13 L10,13 L6,18 L2,13 L5,13 L5,7 L2,7 Z" />
-        </svg>
-        <span>Offset{offset !== 0 ? ` ${offset > 0 ? '+' : ''}${offset}` : ''}</span>
-      </button>
-      <span class="curve-hint">&x2325;-click to remove point</span>
-      <button class="curve-tool-btn" type="button" title="Copy curve" onclick={copyToClipboard}>Copy</button>
-      <button class="curve-tool-btn" type="button" title="Paste curve" onclick={pasteFromClipboard}>Paste</button>
+    <div class="curve-toolbar-group">
+      <UIPillButton size="compact" variant="outline" title="Copy curve" onclick={copyToClipboard}>Copy</UIPillButton>
+      <UIPillButton size="compact" variant="outline" title="Paste curve" onclick={pasteFromClipboard}>Paste</UIPillButton>
     </div>
     <div class="curve-templates">
       {#each curveTemplates as tpl}
@@ -413,13 +424,12 @@
           </svg>
         </button>
       {/each}
+    </div>
+    <div class="curve-toolbar-group">
       {#if defaultAnchors}
-        <button
-          class="curve-tool-btn"
-          type="button"
-          title="Reset to default"
-          onclick={resetToDefault}
-        >Reset</button>
+        <UIPillButton size="compact" variant="outline" title="Reset to default" onclick={resetToDefault}>
+          Reset
+        </UIPillButton>
       {/if}
     </div>
   </div>
@@ -435,7 +445,7 @@
   .curve-panel-header {
     display: flex;
     align-items: center;
-    justify-content: space-between;
+    gap: var(--ui-space-6);
   }
 
   .curve-panel-label {
@@ -445,11 +455,89 @@
   }
 
   .curve-container {
+    position: relative;
     width: 100%;
     height: 250px;
     box-sizing: border-box;
   }
 
+  .curve-chart-overlay {
+    position: absolute;
+    inset: var(--ui-space-8);
+    display: flex;
+    align-items: flex-end;
+    pointer-events: none;
+  }
+
+  .curve-chart-overlay > :global(*) {
+    pointer-events: auto;
+  }
+
+  .curve-help {
+    position: relative;
+    margin-left: auto;
+  }
+
+  .curve-help-badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.25rem;
+    height: 1.25rem;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: var(--ui-text-muted);
+    cursor: help;
+    border-radius: var(--ui-radius-full);
+    transition: color var(--ui-transition-fast, 120ms ease);
+  }
+
+  .curve-help-badge:hover,
+  .curve-help-badge:focus-visible {
+    color: var(--ui-text-primary);
+    outline: none;
+  }
+
+  .curve-help-badge i {
+    font-size: var(--ui-font-size-md);
+  }
+
+  .curve-help-popover {
+    position: absolute;
+    top: calc(100% + var(--ui-space-4));
+    right: 0;
+    display: grid;
+    gap: var(--ui-space-4);
+    min-width: 14rem;
+    padding: var(--ui-space-8) var(--ui-space-12);
+    background: var(--ui-surface-highest);
+    border: 1px solid var(--ui-border-low);
+    border-radius: var(--ui-radius-sm);
+    color: var(--ui-text-secondary);
+    font-size: var(--ui-font-size-sm);
+    line-height: 1.4;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
+    opacity: 0;
+    transform: translateY(-2px);
+    pointer-events: none;
+    transition:
+      opacity var(--ui-transition-fast, 120ms ease),
+      transform var(--ui-transition-fast, 120ms ease);
+    z-index: 2;
+  }
+
+  .curve-help-popover strong {
+    color: var(--ui-text-primary);
+    font-weight: var(--ui-font-weight-medium);
+  }
+
+  .curve-help:hover .curve-help-popover,
+  .curve-help:focus-within .curve-help-popover {
+    opacity: 1;
+    transform: translateY(0);
+  }
+
   .curve-svg {
     width: 100%;
     height: 100%;
@@ -565,48 +653,17 @@
     align-items: center;
     justify-content: space-between;
     flex-wrap: wrap;
-    gap: var(--ui-space-2);
+    gap: var(--ui-space-8);
     padding-top: var(--ui-space-2);
   }
 
-  .curve-toolbar-left {
+  .curve-toolbar-group {
     display: flex;
     align-items: center;
     gap: var(--ui-space-4);
     flex-wrap: wrap;
   }
 
-  .curve-tool-btn {
-    display: flex;
-    align-items: center;
-    gap: var(--ui-space-4);
-    padding: var(--ui-space-2) var(--ui-space-6);
-    border: 1px solid var(--ui-border-low);
-    border-radius: var(--ui-radius-sm);
-    background: var(--ui-surface-lowest);
-    cursor: pointer;
-    color: var(--ui-text-muted);
-    font-size: var(--ui-font-size-md);
-  }
-
-  .curve-tool-btn:hover {
-    border-color: var(--ui-border-high);
-    color: var(--ui-text-secondary);
-    background: var(--ui-surface-high);
-  }
-
-  .curve-tool-btn.active {
-    border-color: var(--ui-border-high);
-    background: var(--ui-surface-highest);
-    color: var(--ui-text-primary);
-  }
-
-  .curve-tool-btn:disabled {
-    opacity: 0.35;
-    cursor: default;
-    pointer-events: none;
-  }
-
   .curve-tool-icon {
     width: 0.625rem;
     height: 1rem;
@@ -616,12 +673,6 @@
     fill: currentColor;
   }
 
-  .curve-hint {
-    font-size: var(--ui-font-size-md);
-    color: var(--ui-text-muted);
-    opacity: 0.6;
-  }
-
   .curve-templates {
     display: flex;
     gap: var(--ui-space-2);