@motion-proto/live-tokens 0.6.2 → 0.7.1

package/src/{component-editor → editor/component-editor}/scaffolding/SaveAsDialog.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { run } from 'svelte/legacy';
 
-  import { sanitizeFileName } from '../../lib/themeService';
+  import { sanitizeFileName } from '../../core/themes/themeService';
   import UIDialog from '../../ui/UIDialog.svelte';
 
   interface Props {
@@ -11,16 +11,35 @@
     currentDisplayName?: string;
     /** Existing files used by the increment helper to find the next available `_NN` suffix.
      *  Only `fileName` is read, so this accepts any shape with that field
-     *  (ComponentConfigMeta, PresetMeta, …). */
+     *  (ComponentConfigMeta, ManifestMeta, …). */
     files?: { fileName: string }[];
     /** Dialog title — defaults to "Save As". Overridable so callers can use
-     *  context-specific framing (e.g. "Save Preset As"). */
+     *  context-specific framing (e.g. "Save Manifest As"). */
     title?: string;
     /** Placeholder shown in the empty input. */
     placeholder?: string;
     /** Error message shown when the user types the reserved "default" name.
-     *  Default copy references components; presets should override. */
+     *  Default copy references components; manifests should override. */
     reservedNameMessage?: string;
+    /** Optional one-line explanation rendered above the name input. Use when
+     *  the dialog opens automatically (e.g. as a recovery prompt) so the user
+     *  understands what's about to be saved and why the prompt appeared. */
+    description?: string;
+    /** Seed value to use when branching off the protected `default` file.
+     *  Without this the dialog falls back to incrementing the default's display
+     *  name (e.g. "Default Theme_01"), which reads as a derivative of the
+     *  reserved name. Pass a fresh, neutral suggestion (e.g. "My Theme") so
+     *  the user's first save isn't named after the slot they can't overwrite. */
+    branchFromDefaultName?: string;
+    /** Active file's basename. Authoritative source for "are we branching from
+     *  the protected default?" — the displayName-based check below fails when
+     *  the default's display name doesn't sanitize to "default" (e.g. themes
+     *  whose default is named "Default Theme" → "default-theme"). */
+    currentFileName?: string;
+    /** Display names that already belong to protected/system files. Blocked
+     *  case-insensitively so a user can't shadow the default by reusing its
+     *  display label even when the sanitized filename would differ. */
+    reservedDisplayNames?: string[];
     onsave?: (payload: { displayName: string; fileName: string }) => void;
   }
 
@@ -31,6 +50,10 @@
     title = 'Save As',
     placeholder = 'Config name…',
     reservedNameMessage = 'The name "default" is reserved for the core component definition.',
+    description = '',
+    branchFromDefaultName = '',
+    currentFileName = '',
+    reservedDisplayNames = [],
     onsave,
   }: Props = $props();
 
@@ -79,10 +102,27 @@
   // ends up focused-and-selected, not the button.
   run(() => {
     if (show) {
-      saveAsName =
-        sanitizeFileName(currentDisplayName) === 'default'
-          ? nextIncrementName(currentDisplayName).displayName
-          : currentDisplayName;
+      const trimmedCurrent = currentDisplayName.trim().toLowerCase();
+      const isReservedDisplay = reservedDisplayNames.some(
+        (n) => n.trim().toLowerCase() === trimmedCurrent,
+      );
+      // Three paths funnel into the branch suggestion:
+      //   1. Active is the literal `default` file.
+      //   2. Current displayName itself sanitizes to "default".
+      //   3. Current displayName collides with a reserved label (e.g. a stray
+      //      user file already named "Default Theme") — re-seeding with their
+      //      old name would trip the validator on submit.
+      const isFromDefault =
+        currentFileName === 'default' ||
+        sanitizeFileName(currentDisplayName) === 'default' ||
+        isReservedDisplay;
+      if (isFromDefault) {
+        saveAsName = branchFromDefaultName
+          ? branchFromDefaultName
+          : nextIncrementName(currentDisplayName).displayName;
+      } else {
+        saveAsName = currentDisplayName;
+      }
       setTimeout(() => saveAsInput?.select(), 0);
     }
   });
@@ -92,6 +132,10 @@
     if (sanitizeFileName(trimmed) === 'default') {
       return reservedNameMessage;
     }
+    const lowered = trimmed.toLowerCase();
+    if (reservedDisplayNames.some((n) => n.trim().toLowerCase() === lowered)) {
+      return reservedNameMessage;
+    }
     return '';
   })());
 </script>
@@ -106,6 +150,9 @@
   width="360px"
 >
   <div class="save-as-dialog">
+    {#if description}
+      <p class="save-as-description">{description}</p>
+    {/if}
     <div class="save-as-row">
       <input
         class="save-as-input"
@@ -149,7 +196,7 @@
     min-width: 0;
     padding: var(--ui-space-8) var(--ui-space-10);
     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);
     color: var(--ui-text-primary);
     font-size: var(--ui-font-size-md);
@@ -163,7 +210,7 @@
     width: 2.25rem;
     padding: 0;
     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);
     color: var(--ui-text-secondary);
     font-size: var(--ui-font-size-md);
@@ -173,12 +220,12 @@
 
   .save-as-increment:hover {
     background: var(--ui-surface);
-    border-color: var(--ui-border-default);
+    border-color: var(--ui-border);
     color: var(--ui-text-primary);
   }
 
   .save-as-input:focus {
-    border-color: var(--ui-border-medium);
+    border-color: var(--ui-border-high);
   }
 
   .save-as-input.invalid,
@@ -195,4 +242,11 @@
     font-size: var(--ui-font-size-xs);
     color: var(--ui-highlight);
   }
+
+  .save-as-description {
+    margin: 0;
+    font-size: var(--ui-font-size-xs);
+    line-height: 1.5;
+    color: var(--ui-text-secondary);
+  }
 </style>

package/src/editor/component-editor/scaffolding/ShadowBackdrop.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import newspaperBg from '../../../system/assets/newspaper.webp';
+
+
+
+  interface Props {
+    mode?: 'default' | 'image' | 'color';
+    /** CSS var name (set by ShadowBackdropControls) the backdrop reads when in color mode. */
+    colorVariable?: string;
+    /** Padding around the slotted preview content. Set to '0' when the slotted component should cover the full backdrop area (e.g. dialog overlay). */
+    padding?: string;
+    children?: import('svelte').Snippet;
+    /** Optional right-rail snippet rendered inside the backdrop as a fixed-width column. Used for canvas-scoped settings (e.g. Background controls). */
+    controls?: import('svelte').Snippet;
+  }
+
+  let {
+    mode = 'default',
+    colorVariable,
+    padding = '4rem',
+    children,
+    controls
+  }: Props = $props();
+
+  let backgroundStyle = $derived.by(() => {
+    if (mode === 'image') {
+      return `background-image: url(${newspaperBg}); background-size: cover; background-position: center; background-repeat: no-repeat;`;
+    }
+    if (mode === 'color' && colorVariable) {
+      return `background: var(${colorVariable}, #1a1a1a);`;
+    }
+    return `background: var(--ui-surface-lowest); border: 1px solid var(--ui-border-low);`;
+  });
+</script>
+
+<div class="shadow-backdrop" class:with-controls={!!controls} style={backgroundStyle}>
+  <div class="shadow-backdrop-content" style="padding: {padding};">
+    {@render children?.()}
+  </div>
+  {#if controls}
+    <div class="shadow-backdrop-controls">
+      {@render controls?.()}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .shadow-backdrop {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    width: 100%;
+    min-width: 0;
+    min-height: 12rem;
+    border-radius: var(--ui-radius-md);
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+
+  .shadow-backdrop.with-controls {
+    grid-template-columns: minmax(0, 1fr) auto;
+  }
+
+  .shadow-backdrop-content {
+    display: grid;
+    place-items: center;
+    min-width: 0;
+  }
+
+  .shadow-backdrop-controls {
+    padding: var(--ui-space-8);
+  }
+</style>

package/src/editor/component-editor/scaffolding/ShadowBackdropControls.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import UIPaletteSelector from '../../ui/UIPaletteSelector.svelte';
+  import { setCssVar } from '../../core/cssVarSync';
+
+  type Mode = 'default' | 'image' | 'color';
+
+  interface Props {
+    mode?: Mode;
+    /** Editor-scoped CSS var the picker writes to (must end with `-surface` to allow gradients). */
+    colorVariable: string;
+    /** Which modes to expose. Defaults to all three. */
+    modes?: ReadonlyArray<Mode>;
+  }
+
+  let { mode = $bindable('default'), colorVariable, modes = ['default', 'image', 'color'] }: Props = $props();
+
+  const ALL_OPTIONS: ReadonlyArray<{ value: Mode; label: string }> = [
+    { value: 'default', label: 'Default' },
+    { value: 'image', label: 'Image' },
+    { value: 'color', label: 'Color' },
+  ];
+  let options = $derived(ALL_OPTIONS.filter((o) => modes.includes(o.value)));
+
+  onMount(() => {
+    if (!document.documentElement.style.getPropertyValue(colorVariable)) {
+      setCssVar(colorVariable, 'var(--surface-canvas)');
+    }
+  });
+</script>
+
+<div class="backdrop-grid" role="radiogroup">
+  {#each options as opt (opt.value)}
+    <div
+      class="backdrop-option"
+      class:checked={mode === opt.value}
+      role="radio"
+      aria-checked={mode === opt.value}
+      aria-label={opt.label}
+      tabindex={mode === opt.value ? 0 : -1}
+      onclick={() => (mode = opt.value)}
+      onkeydown={(e) => {
+        if (e.key === ' ' || e.key === 'Enter') {
+          e.preventDefault();
+          mode = opt.value;
+        }
+      }}
+    >
+      <span class="backdrop-dot" aria-hidden="true"></span>
+      {#if opt.value !== 'color'}
+        <span>{opt.label}</span>
+      {:else}
+        <div class="picker-slot">
+          <UIPaletteSelector variable={colorVariable} />
+        </div>
+      {/if}
+    </div>
+  {/each}
+</div>
+
+<style>
+  .backdrop-grid {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-4);
+  }
+
+  /* Reserve room for the swatch's absolute-positioned token-name caption so it
+     doesn't bleed onto whatever sits below the controls. */
+  .backdrop-grid:has(.picker-slot) {
+    padding-bottom: var(--ui-space-16);
+  }
+
+  /* Each row keeps the same vertical rhythm; the trigger's height defines
+     the line, so the radio-only rows match it via min-height. The whole row
+     is clickable via the onclick handler — selecting on any pointer hit. */
+  .backdrop-option {
+    display: flex;
+    align-items: center;
+    gap: var(--ui-space-6);
+    min-height: 1.75rem;
+    font-size: var(--ui-font-size-sm);
+    color: var(--ui-text-tertiary);
+    cursor: pointer;
+    user-select: none;
+    transition: color var(--ui-transition-fast);
+  }
+  .backdrop-option.checked {
+    color: var(--ui-text-primary);
+  }
+  .backdrop-option:focus-visible {
+    outline: 2px solid currentColor;
+    outline-offset: 2px;
+  }
+
+  /* Custom radio dot replaces native input so the entire row's onclick
+     handler runs without label/input dual-activation quirks. */
+  .backdrop-dot {
+    flex-shrink: 0;
+    width: 12px;
+    height: 12px;
+    border-radius: 50%;
+    border: 1.5px solid currentColor;
+    background: transparent;
+    opacity: 0.6;
+    transition: opacity var(--ui-transition-fast), background var(--ui-transition-fast);
+  }
+  .backdrop-option.checked .backdrop-dot {
+    opacity: 1;
+    background:
+      radial-gradient(circle, currentColor 0 35%, transparent 38%);
+  }
+
+  .picker-slot {
+    position: relative;
+    flex: 1;
+    min-width: 0;
+  }
+  .picker-slot :global(.ui-token-selector) {
+    width: 100%;
+  }
+  /* Hang the token name caption under the swatch trigger so it doesn't
+     stretch the row's height. */
+  .picker-slot :global(.ui-ts-meta-text) {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    margin-top: 2px;
+    white-space: nowrap;
+    pointer-events: none;
+  }
+</style>

package/src/editor/component-editor/scaffolding/StateBlock.svelte

@@ -0,0 +1,257 @@
+<script lang="ts">
+  /**
+   * Shared inner block rendered inside a single state in VariantGroup.
+   *
+   * Both the tabs branch and the list branch of VariantGroup render the same
+   * `<TypeEditor>` (when a state has type groups) followed by `<TokenLayout>`,
+   * differing only in the surrounding chrome (preview placement, toggles,
+   * tab strip). This component owns the duplicated inner block so a per-state
+   * control change happens in exactly one place.
+   */
+  import TokenLayout from './TokenLayout.svelte';
+  import TypeEditor from './TypeEditor.svelte';
+  import type { Token, TypeGroupConfig } from './types';
+
+  
+  
+  
+  
+  
+  interface Props {
+    /** Tokens for this state, fed to `<TokenLayout>`. */
+    tokens: Token[];
+    /** Type groups for this state; rendered as a row of `<TypeEditor>` blocks. */
+    typeGroups?: TypeGroupConfig[];
+    /** Forwarded to TypeEditor and TokenLayout so writes persist through the editor store. */
+    component?: string | undefined;
+    /** Per-variable rank passed through to TokenLayout for linked-block alignment. */
+    linkedOrder?: Map<string, number> | undefined;
+    /** Render the token grid with N visual columns. >1 spreads a long property
+      list horizontally; only meaningful for state-blocks without typeGroups
+      (the two-col flex layout already partitions screen real estate when
+      typeGroups are present). */
+    columns?: number;
+    onchange?: () => void;
+  }
+
+  let {
+    tokens,
+    typeGroups = [],
+    component = undefined,
+    linkedOrder = undefined,
+    columns = 1,
+    onchange,
+  }: Props = $props();
+
+  let hasTypeGroups = $derived(typeGroups.length > 0);
+
+  /** Element-grouped mode: when 2+ distinct element tags appear across tokens
+      and type-groups, partition the panel into labeled subsections (e.g.
+      "Frame", "Header", "Body"). Element order = first-encounter across the
+      combined tokens + type-groups list. */
+  let elementSections = $derived.by(() => {
+    const order: string[] = [];
+    const seen = new Set<string>();
+    for (const t of tokens) {
+      if (t.element && !seen.has(t.element)) {
+        seen.add(t.element);
+        order.push(t.element);
+      }
+    }
+    for (const tg of typeGroups) {
+      if (tg.element && !seen.has(tg.element)) {
+        seen.add(tg.element);
+        order.push(tg.element);
+      }
+    }
+    if (order.length < 2) return null;
+    return order.map((el) => ({
+      element: el,
+      tokens: tokens.filter((t) => t.element === el),
+      typeGroups: typeGroups.filter((tg) => tg.element === el),
+    }));
+  });
+</script>
+
+{#if elementSections}
+  <div class="state-controls element-grouped">
+    {#each elementSections as section}
+      <section class="element-section">
+        <h4 class="element-heading">{section.element}</h4>
+        {#if section.typeGroups.length > 0}
+          <div class="state-type-groups">
+            {#each section.typeGroups as tg}
+              <TypeEditor
+                legend={tg.legend ?? 'type'}
+                colorVariable={tg.colorVariable}
+                colorLabel={tg.colorLabel ?? 'text color'}
+                familyVariable={tg.familyVariable}
+                familyLabel={tg.familyLabel ?? 'font family'}
+                sizeVariable={tg.sizeVariable}
+                sizeLabel={tg.sizeLabel ?? 'font size'}
+                weightVariable={tg.weightVariable}
+                weightLabel={tg.weightLabel ?? 'font weight'}
+                lineHeightVariable={tg.lineHeightVariable}
+                lineHeightLabel={tg.lineHeightLabel ?? 'line height'}
+                outlineWidthVariable={tg.outlineWidthVariable}
+                outlineWidthLabel={tg.outlineWidthLabel ?? 'outline thickness'}
+                outlineColorVariable={tg.outlineColorVariable}
+                outlineColorLabel={tg.outlineColorLabel ?? 'outline color'}
+                {component}
+                {onchange}
+              />
+            {/each}
+          </div>
+        {/if}
+        {#if section.tokens.length > 0}
+          <TokenLayout
+            title=""
+            tokens={section.tokens}
+            {component}
+            {linkedOrder}
+            {columns}
+            {onchange}
+          />
+        {/if}
+      </section>
+    {/each}
+  </div>
+{:else}
+<div class="state-controls" class:two-col={hasTypeGroups}>
+  {#if hasTypeGroups}
+    <div class="state-type-groups">
+      {#each typeGroups as tg}
+        <TypeEditor
+          legend={tg.legend ?? 'type'}
+          colorVariable={tg.colorVariable}
+          colorLabel={tg.colorLabel ?? 'text color'}
+          familyVariable={tg.familyVariable}
+          familyLabel={tg.familyLabel ?? 'font family'}
+          sizeVariable={tg.sizeVariable}
+          sizeLabel={tg.sizeLabel ?? 'font size'}
+          weightVariable={tg.weightVariable}
+          weightLabel={tg.weightLabel ?? 'font weight'}
+          lineHeightVariable={tg.lineHeightVariable}
+          lineHeightLabel={tg.lineHeightLabel ?? 'line height'}
+          outlineWidthVariable={tg.outlineWidthVariable}
+          outlineWidthLabel={tg.outlineWidthLabel ?? 'outline thickness'}
+          outlineColorVariable={tg.outlineColorVariable}
+          outlineColorLabel={tg.outlineColorLabel ?? 'outline color'}
+          {component}
+          {onchange}
+        />
+      {/each}
+    </div>
+  {/if}
+  <TokenLayout
+    title=""
+    {tokens}
+    {component}
+    {linkedOrder}
+    {columns}
+    {onchange}
+  />
+</div>
+{/if}
+
+<style>
+  .state-controls {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: var(--ui-space-12);
+    align-items: start;
+    margin-top: var(--ui-space-4);
+  }
+
+  .state-controls.two-col {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--ui-space-16) var(--ui-space-16);
+    align-items: flex-start;
+    justify-content: flex-start;
+  }
+
+  .state-type-groups {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: var(--ui-space-16);
+    align-items: flex-start;
+  }
+
+  /* Inside a state's two-col layout the fieldset frame is redundant with the
+     surrounding state card. Flatten the border/padding but keep the legend so
+     each block ("title", "body text", …) is identifiable. */
+  .state-controls.two-col .state-type-groups :global(.fieldset-wrapper) {
+    border: none;
+    padding: 0;
+  }
+
+  .state-controls.two-col .state-type-groups :global(.fieldset-wrapper.active) {
+    outline: none;
+  }
+
+  .state-controls.two-col .state-type-groups :global(.fieldset-legend) {
+    padding: 0 var(--ui-space-4) var(--ui-space-4);
+  }
+
+  /* The general-properties column has no legend of its own; pad it down by
+     one legend-line so its first row aligns with the first row of the
+     adjacent type-group. */
+  .state-controls.two-col > :global(.token-group) {
+    padding-top: calc(var(--ui-font-size-xs) + var(--ui-space-4));
+  }
+
+  /* Element-grouped mode: vertical stack of subsections, each labeled by the
+     element it targets (e.g. Frame / Header / Body). Within a section the
+     two-col split (typography fieldsets + property grid) still applies when
+     the section has both. */
+  .state-controls.element-grouped {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-16);
+  }
+
+  /* Each element section stacks typography fieldset(s) above the property
+     grid in a single column, so both share the section's leftmost edge and
+     line up with neighbouring sections that have no typography (e.g. Frame). */
+  .element-section {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ui-space-8);
+    align-items: stretch;
+  }
+
+  .element-section .state-type-groups {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: var(--ui-space-16);
+    align-items: flex-start;
+  }
+
+  /* Type-fieldsets sit chrome-less against the element-section's own
+     boundary — the section heading already frames the block, and an extra
+     fieldset border would double-line the visual. */
+  .element-section .state-type-groups :global(.fieldset-wrapper) {
+    border: none;
+    padding: 0;
+  }
+  .element-section .state-type-groups :global(.fieldset-wrapper.active) {
+    outline: none;
+  }
+  .element-section .state-type-groups :global(.fieldset-legend) {
+    padding: 0 var(--ui-space-4) var(--ui-space-4);
+  }
+
+  .element-heading {
+    margin: 0;
+    font-size: var(--ui-font-size-sm);
+    font-weight: var(--ui-font-weight-semibold);
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    color: var(--ui-text-tertiary);
+    padding-bottom: var(--ui-space-4);
+    border-bottom: 1px solid var(--ui-border-low);
+  }
+</style>

package/src/{component-editor → editor/component-editor}/scaffolding/TokenLayout.svelte

@@ -13,7 +13,7 @@
     getComponentPropertySiblings,
     setComponentAliasLinked,
     clearComponentAliasLinked,
-  } from '../../lib/editorStore';
+  } from '../../core/store/editorStore';
   import { getEditorContext } from './editorContext';
   import type { Token } from './types';
 
@@ -92,7 +92,7 @@
     { kind: 'shadow', matches: (v) => v.endsWith('-shadow') || v.startsWith('--shadow-') },
     { kind: 'padding', matches: (v) => v.endsWith('-padding') || v.endsWith('-margin') },
     { kind: 'gap', matches: (v) => v.endsWith('-gap') },
-    { kind: 'border-width', matches: (v) => v.endsWith('-border-width') || v.startsWith('--border-width-') },
+    { kind: 'border-width', matches: (v) => v.endsWith('-border-width') || v.endsWith('-accent-width') || v.startsWith('--border-width-') },
     { kind: 'border', matches: (v) => v.endsWith('-border') || v.startsWith('--border-') },
     { kind: 'surface', matches: (v) => v.endsWith('-surface') || v.startsWith('--surface-') },
   ];
@@ -139,9 +139,11 @@
     return sides.some((s) => !!document.documentElement.style.getPropertyValue(`${varName}-${s}`).trim());
   }
 
-  function categorize(v: string, comp: string | undefined, state: typeof $editorState): Kind {
-    const k = rawKind(v);
-    if (k === 'padding' && paddingIsSplit(v, comp, state)) return 'padding-split';
+  function categorize(token: Token, comp: string | undefined, state: typeof $editorState): Kind {
+    const k = rawKind(token.variable);
+    if (k === 'padding' && token.splittable !== false && paddingIsSplit(token.variable, comp, state)) {
+      return 'padding-split';
+    }
     return k;
   }
 
@@ -170,7 +172,7 @@
     'divider-height': { component: UIVariantSelector, extra: () => ({ ...DIVIDER_HEIGHT }) },
     'dot-size': { component: UIVariantSelector, extra: () => ({ ...DOT_SIZE }) },
     'radius': { component: UIVariantSelector, extra: () => ({ ...RADIUS }) },
-    'padding': { component: UIPaddingSelector, extra: () => ({ mode: 'single' }) },
+    'padding': { component: UIPaddingSelector, extra: (t) => ({ mode: 'single', splittable: t.splittable !== false }) },
     /* padding-split is NOT standalone: TokenLayout renders the .token-label
        (e.g. "padding") in col 1 and the wrapper provides the [label][trigger][value]
        subgrid. UIPaddingSelector's sides template fills cols 2-3 of row 1 with
@@ -217,7 +219,7 @@
   })();
 
   function buildEntries(list: Token[], order: Map<string, number> | undefined, linked: Set<Kind>, comp: string | undefined, state: typeof $editorState, multiCol: boolean): Entry[] {
-    const indexed = list.map((token, i) => ({ e: { kind: categorize(token.variable, comp, state), token }, i }));
+    const indexed = list.map((token, i) => ({ e: { kind: categorize(token, comp, state), token }, i }));
     const rank = multiCol ? multiColRank : orderRank;
     indexed.sort((a, b) => {
       if (!multiCol) {