@lapismd/design-core 0.2.0 → 0.3.0

package/src/shared/diff/merge-editor/MergeEditor.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { onMount } from "svelte";
+  import { onMount, type Snippet } from "svelte";
   import CheckCheckIcon from "@lucide/svelte/icons/check-check";
   import ChevronDownIcon from "@lucide/svelte/icons/chevron-down";
   import ChevronUpIcon from "@lucide/svelte/icons/chevron-up";
@@ -42,13 +42,15 @@
     baseLabel = "Resolved",
     rightLabel = "Right",
     path,
+    headerCenter,
+    headerActions,
     language,
     readOnly = false,
     editable = false,
     editableSides,
     ignoreWhitespace = false,
     ignoreCase = false,
-    syncHorizontalScroll = false,
+    syncHorizontalScroll = true,
     wrap = false,
     onLeftChange,
     onBaseChange,
@@ -64,6 +66,10 @@
     baseLabel?: string;
     rightLabel?: string;
     path?: string;
+    /** Optional host controls centered between the file path and change pager. */
+    headerCenter?: Snippet;
+    /** Optional host actions after the change pager, such as a settings menu. */
+    headerActions?: Snippet;
     language?: string | null;
     readOnly?: boolean;
     /** When true, visible sides are editable unless `editableSides` narrows them. */
@@ -71,6 +77,7 @@
     editableSides?: readonly MergeSide[];
     ignoreWhitespace?: boolean;
     ignoreCase?: boolean;
+    /** Synchronize pane horizontal offsets; defaults to true. Vertical scroll is always synced. */
     syncHorizontalScroll?: boolean;
     wrap?: boolean;
     onLeftChange?: (content: string) => void;
@@ -84,9 +91,8 @@
     ignoreCase,
     workingCopyCenter: true,
   });
-  const inputKey = $derived(
-    `${mode}\0${left}\0${base}\0${right}\0${ignoreWhitespace}\0${ignoreCase}`,
-  );
+  const inputKey = $derived(`${mode}\0${left}\0${base}\0${right}`);
+  const modelKey = $derived(`${inputKey}\0${ignoreWhitespace}\0${ignoreCase}`);
   const resolvedLanguage = $derived(resolveDiffLanguage(path ?? "", language));
   let draft = $state<{
     key: string;
@@ -101,7 +107,7 @@
     right: draft?.key === inputKey ? draft.right : right,
   });
   const model = $derived(
-    override?.key === inputKey
+    override?.key === modelKey
       ? override.model
       : mode === "one-way"
         ? assembleOneWayMerge(source.left, source.right, mergeOptions)
@@ -290,7 +296,7 @@
 
   function commit(next: MergeModel) {
     const nextBase = serializeMergeCenter(next);
-    override = { key: inputKey, model: next };
+    override = { key: modelKey, model: next };
     draft = {
       key: inputKey,
       left: source.left,
@@ -581,9 +587,15 @@
   data-mode={mode}
   data-path={path}
   data-wrap={wrap ? "true" : undefined}
+  data-header-center={headerCenter ? "true" : undefined}
 >
   <div class="ui-diff-merge-editor__toolbar">
     <span class="ui-diff-merge-editor__title">{path ?? "Merge"}</span>
+    {#if headerCenter}
+      <div class="ui-diff-merge-editor__header-center">
+        {@render headerCenter()}
+      </div>
+    {/if}
     <div class="ui-diff-merge-editor__nav">
       <Button
         variant="ghost"
@@ -608,6 +620,9 @@
       >
         <ChevronDownIcon />
       </Button>
+      {#if headerActions}
+        {@render headerActions()}
+      {/if}
     </div>
   </div>
 

package/src/shared/filter/search-filter-bar/SearchFilterBar.css

@@ -92,6 +92,12 @@
     color-mix(in srgb, var(--ui-form-accent) 14%, transparent);
 }
 
+.cv-search-filter-input[data-focus-appearance="borderless"]
+  .cv-search-filter-bar__search-pill:focus-within {
+  border-color: transparent;
+  box-shadow: none;
+}
+
 .cv-search-filter-bar__search-pill > svg {
   width: 1rem !important;
   height: 1rem !important;
@@ -902,14 +908,18 @@
   }
 }
 
-.cv-search-filter-bar[data-invalid] .cv-search-filter-bar__search-pill {
+.cv-search-filter-input[data-invalid] .cv-search-filter-bar__search-pill {
   border-color: color-mix(
     in srgb,
     var(--destructive, #dc2626) 55%,
     var(--ui-form-border)
   );
-  box-shadow: 0 0 0 1px
-    color-mix(in srgb, var(--destructive, #dc2626) 35%, transparent);
+  background: color-mix(
+    in srgb,
+    var(--destructive, #dc2626) 10%,
+    var(--ui-form-background)
+  );
+  box-shadow: none;
 }
 
 .cv-search-filter-bar__error,
@@ -922,3 +932,9 @@
   line-height: 1.3;
   text-align: center;
 }
+
+.cv-search-filter-input .cv-search-filter-bar__error {
+  margin-block: 0.5rem 0.25rem;
+  padding-inline: 0.5rem;
+  text-align: start;
+}

package/src/shared/filter/search-filter-bar/SearchFilterBar.svelte

@@ -17,6 +17,7 @@
     inputId = undefined,
     /** `filter-query` uses CodeMirror + filter syntax; `plain` is a normal search input. */
     inputMode = "plain",
+    focusAppearance = "ring",
     clearSearchLabel = "Clear search",
     clearAllLabel = "Clear all",
     expandFiltersLabel = "Expand filter options",
@@ -43,7 +44,8 @@
     shortcut?: string;
     disabled?: boolean;
     inputId?: string;
-    inputMode?: "filter-query" | "plain";
+    inputMode?: "filter-query" | "plain" | "custom";
+    focusAppearance?: "ring" | "borderless";
     clearSearchLabel?: string;
     clearAllLabel?: string;
     expandFiltersLabel?: string;
@@ -114,6 +116,7 @@
       {disabled}
       {...inputId === undefined ? {} : { inputId }}
       {inputMode}
+      {focusAppearance}
       {clearSearchLabel}
       {error}
       {editorExtensions}

package/src/shared/filter/search-filter-bar/SearchFilterCustomLanguageHarness.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+  import { autocompletion, completionKeymap } from "@codemirror/autocomplete";
+  import { historyKeymap, undo } from "@codemirror/commands";
+  import {
+    StreamLanguage,
+    syntaxHighlighting,
+    HighlightStyle,
+  } from "@codemirror/language";
+  import { keymap } from "@codemirror/view";
+  import { tags } from "@lezer/highlight";
+  import SearchFilterInput from "./SearchFilterInput.svelte";
+
+  let value = $state('description:"rebase" ');
+  let alternate = $state(false);
+  let input: SearchFilterInput;
+  const language = StreamLanguage.define({
+    token(stream) {
+      if (stream.eatSpace()) return null;
+      if (stream.match(/[a-z_]+/)) return "variableName";
+      stream.next();
+      return null;
+    },
+  });
+  const highlighting = syntaxHighlighting(
+    HighlightStyle.define([
+      { tag: tags.variableName, class: "custom-query-symbol" },
+    ]),
+  );
+  const extensions = $derived([
+    language,
+    highlighting,
+    autocompletion({
+      activateOnTypingDelay: 0,
+      interactionDelay: 0,
+      override: [
+        (context) => ({
+          from: context.pos,
+          options: [
+            { label: alternate ? "parents()" : "trunk()", type: "function" },
+          ],
+        }),
+      ],
+    }),
+    keymap.of(completionKeymap),
+    keymap.of([{ key: "Alt-z", run: undo }, ...historyKeymap]),
+  ]);
+</script>
+
+<div style="width: 24rem; padding: 1rem;">
+  <SearchFilterInput
+    bind:this={input}
+    {value}
+    inputMode="custom"
+    focusAppearance="borderless"
+    error={value.includes("invalid") ? "Invalid custom query" : null}
+    editorExtensions={extensions}
+    ariaLabel="Custom query"
+    onValueChange={(next) => (value = next)}
+    onClearSearch={() => {
+      value = "";
+    }}
+  />
+  <button
+    onclick={() => {
+      alternate = !alternate;
+      input.focus();
+    }}>Change completions</button
+  >
+  <output aria-label="Query value">{value}</output>
+</div>

package/src/shared/filter/search-filter-bar/SearchFilterInput.svelte

@@ -50,6 +50,7 @@
     inputId = undefined,
     inputMode = "plain",
     density = "default",
+    focusAppearance = "ring",
     showSearchIcon = true,
     showClearButton = true,
     clearSearchLabel = "Clear search",
@@ -66,10 +67,12 @@
     shortcut?: string;
     disabled?: boolean;
     inputId?: string;
-    /** `filter-query` uses CodeMirror; `plain` uses a native search input. */
-    inputMode?: "filter-query" | "plain";
+    /** `custom` uses caller extensions without the filter grammar or predicate chips. */
+    inputMode?: "filter-query" | "plain" | "custom";
     /** Compact removes bar-level spacing so the input fits dense form rows. */
     density?: "default" | "compact";
+    /** Borderless focus retains the visible editor caret without a surrounding ring. */
+    focusAppearance?: "ring" | "borderless";
     showSearchIcon?: boolean;
     showClearButton?: boolean;
     clearSearchLabel?: string;
@@ -90,6 +93,8 @@
   const placeholderCompartment = new Compartment();
   const autocompleteCompartment = new Compartment();
   const contentAttributesCompartment = new Compartment();
+  const languageCompartment = new Compartment();
+  const extensionsCompartment = new Compartment();
 
   const hasValue = $derived(value.trim().length > 0);
 
@@ -235,11 +240,23 @@
     return EditorView.contentAttributes.of({
       role: "searchbox",
       "aria-label": ariaLabel,
+      "aria-multiline": "true",
       "aria-invalid": error ? "true" : "false",
       ...(inputId ? { id: inputId } : {}),
     });
   }
 
+  function queryLanguage(): Extension {
+    return inputMode === "filter-query"
+      ? [
+          filterQuery(),
+          syntaxHighlighting(searchFilterHighlightStyle, { fallback: true }),
+          searchFilterPredicateChips(),
+          predicateChipEditHandler.of(openPredicateChipEditor),
+        ]
+      : [];
+  }
+
   function filterQueryEditor(node: HTMLDivElement, source: string) {
     const tooltipLayer = node.ownerDocument.createElement("div");
     tooltipLayer.className = "cv-search-filter-bar__tooltip-layer";
@@ -252,10 +269,8 @@
       state: EditorState.create({
         doc: source,
         extensions: [
-          filterQuery(),
-          syntaxHighlighting(searchFilterHighlightStyle, { fallback: true }),
-          searchFilterPredicateChips(),
-          predicateChipEditHandler.of(openPredicateChipEditor),
+          languageCompartment.of(queryLanguage()),
+          extensionsCompartment.of(editorExtensions),
           history(),
           drawSelection(),
           EditorView.lineWrapping,
@@ -290,7 +305,6 @@
               scheduleAutocomplete(update.view);
             }
           }),
-          ...editorExtensions,
         ],
       }),
       parent: node,
@@ -316,6 +330,19 @@
     };
   }
 
+  $effect(() => {
+    const extensions = editorExtensions;
+    editor?.dispatch({
+      effects: extensionsCompartment.reconfigure(extensions),
+    });
+  });
+
+  $effect(() => {
+    const language = queryLanguage();
+    chipEditSession = null;
+    editor?.dispatch({ effects: languageCompartment.reconfigure(language) });
+  });
+
   $effect(() => {
     editor?.dispatch({
       effects: editableCompartment.reconfigure(
@@ -349,6 +376,7 @@
   class="cv-search-filter-input"
   data-ui-component="search-filter-input"
   data-density={density}
+  data-focus-appearance={focusAppearance}
   data-active={hasValue}
   data-invalid={error ? "" : undefined}
   data-input-mode={inputMode}

package/src/shared/forms/color-picker/color-value.ts

@@ -4,10 +4,10 @@ export type ColorPickerFormat = "hex" | "hex-without-hash";
 export function colorValueForPicker(input: string): string | null {
   const trimmed = input.trim();
   const fullHex = /^#?([0-9a-f]{6})$/i.exec(trimmed);
-  if (fullHex) return `#${fullHex[1].toLowerCase()}`;
+  if (fullHex?.[1]) return `#${fullHex[1].toLowerCase()}`;
 
   const shortHex = /^#?([0-9a-f]{3})$/i.exec(trimmed);
-  if (shortHex) {
+  if (shortHex?.[1]) {
     return `#${shortHex[1]
       .split("")
       .map((part) => part + part)

package/src/shared/forms/core/builders.ts

@@ -170,17 +170,18 @@ export function customViewField<TRoot, TContext = undefined, TValue = TRoot>(
     props,
     ...fieldConfig
   } = config;
+  const renderer: FormRendererDescriptor<TRoot, TContext, TValue> = {
+    component,
+    wrapper,
+    ...(interactive === undefined ? {} : { interactive }),
+    ...(align === undefined ? {} : { align }),
+    ...(as === undefined ? {} : { as }),
+    ...(props === undefined ? {} : { props }),
+  };
   return customField<TRoot, TContext, TValue>({
     ...fieldConfig,
     renderers: {
-      [view]: {
-        component,
-        wrapper,
-        interactive,
-        align,
-        as,
-        props,
-      },
+      [view]: renderer,
     },
   });
 }
@@ -218,8 +219,8 @@ export function reviewedTextField<TRoot>({
   return textField<TRoot, FieldReviewContext>({
     id,
     label,
-    placeholder,
-    inputType,
+    ...(placeholder === undefined ? {} : { placeholder }),
+    ...(inputType === undefined ? {} : { inputType }),
     get,
     set,
     renderers: {
@@ -269,7 +270,7 @@ export function reviewedStringListField<TRoot>({
       id,
       label,
       addLabel,
-      placeholder,
+      ...(placeholder === undefined ? {} : { placeholder }),
       get,
       set,
     }),

package/src/shared/forms/core/date-utils.ts

@@ -47,6 +47,7 @@ export function todayDateOnly() {
 function parseDateOnlyUtc(value: string) {
   if (!DATE_ONLY_RE.test(value)) return null;
   const [year, month, day] = value.split("-").map((part) => Number(part));
+  if (!year || !month || !day) return null;
   return new Date(Date.UTC(year, month - 1, day));
 }
 

package/src/shared/forms/core/form-controller.svelte.ts

@@ -293,7 +293,7 @@ export class FormController<TValues, TContext = undefined> {
     const target = index + direction;
     if (index < 0 || target < 0 || index >= ids.length || target >= ids.length)
       return;
-    [ids[index], ids[target]] = [ids[target], ids[index]];
+    [ids[index], ids[target]] = [ids[target]!, ids[index]!];
     this.#itemIds.set(path, ids);
     this.#moveArrayMetadata(path, index, target);
   }
@@ -346,6 +346,7 @@ export class FormController<TValues, TContext = undefined> {
       if (!value.startsWith(prefix)) return value;
       const remainder = value.slice(prefix.length);
       const [rawIndex, ...tail] = remainder.split(".");
+      if (rawIndex === undefined) return value;
       const itemIndex = Number.parseInt(rawIndex, 10);
       if (!Number.isInteger(itemIndex) || itemIndex <= index) return value;
       return `${prefix}${itemIndex - 1}${tail.length ? `.${tail.join(".")}` : ""}`;

package/src/shared/forms/core/patch-review.ts

@@ -288,10 +288,16 @@ function splitProposalOperations(operations: JsonPatchOperation[]) {
       groups.push([operation]);
       continue;
     }
-    const [firstIndex, ...restIndexes] = relatedIndexes;
-    groups[firstIndex].push(operation);
+    const firstIndex = relatedIndexes[0];
+    if (firstIndex === undefined) continue;
+    const restIndexes = relatedIndexes.slice(1);
+    const firstGroup = groups[firstIndex];
+    if (!firstGroup) continue;
+    firstGroup.push(operation);
     for (const index of restIndexes.reverse()) {
-      groups[firstIndex].push(...groups[index]);
+      const group = groups[index];
+      if (!group) continue;
+      firstGroup.push(...group);
       groups.splice(index, 1);
     }
   }
@@ -461,7 +467,9 @@ export function createOrAppendJsonReview<T>(
       fileId,
       ...(requiredRoot ? { requiredRoot } : {}),
       baseValue,
-      baseValueHash: proposal.base?.sourceHash,
+      ...(proposal.base?.sourceHash
+        ? { baseValueHash: proposal.base.sourceHash }
+        : {}),
       createdAt: timestamp,
       updatedAt: timestamp,
       changes: [],
@@ -487,7 +495,7 @@ export function createOrAppendJsonReview<T>(
             operations: groupOps,
             paths: operationPaths(groupOps),
             status: "pending",
-            base: proposal.base,
+            ...(proposal.base ? { base: proposal.base } : {}),
             createdAt: timestamp,
             updatedAt: timestamp,
           }) satisfies FormReviewChange,

package/src/shared/forms/core/path-config.ts

@@ -1,7 +1,7 @@
 import type { HTMLInputAttributes } from "svelte/elements";
 import type { ColorPickerFormat } from "../color-picker/color-value";
-import type { CyclePickerPreview } from "../cycle-picker/CyclePicker.svelte";
-import type { InlineOptionPickerOption } from "../inline-option-picker/InlineOptionPicker.svelte";
+import type { CyclePickerPreview } from "../cycle-picker/types";
+import type { InlineOptionPickerOption } from "../inline-option-picker/types";
 import type { ReferenceIndex } from "./reference-utils";
 import type {
   FormFieldAlign,

package/src/shared/forms/core/path-utils.ts

@@ -37,7 +37,8 @@ function setFormValueAtParts<TValues>(
   value: unknown,
 ): TValues {
   if (parts.length === 0) return value as TValues;
-  const [head, ...tail] = parts;
+  const head = parts[0]!;
+  const tail = parts.slice(1);
 
   if (typeof head === "number") {
     const next = Array.isArray(root) ? [...root] : [];
@@ -90,7 +91,7 @@ export function moveFormArrayItem<TItem>(
     return items as TItem[];
   }
   const next = [...items];
-  [next[index], next[target]] = [next[target], next[index]];
+  [next[index], next[target]] = [next[target]!, next[index]!];
   return next;
 }
 

package/src/shared/forms/core/reference-utils.ts

@@ -73,6 +73,7 @@ export function parseReferenceRef(value: unknown): ParsedReference | null {
   const match = REFERENCE_MARKER.exec(trimmed);
   if (!match) return null;
   const target = match[1];
+  if (!target) return null;
   const segments = target.split("/");
   if (!validSegments(segments)) return null;
 

package/src/shared/forms/core/review-diff.ts

@@ -60,13 +60,14 @@ function diffSequence(before: readonly string[], after: readonly string[]) {
     beforeIndex -= 1
   ) {
     for (let afterIndex = after.length - 1; afterIndex >= 0; afterIndex -= 1) {
-      table[beforeIndex][afterIndex] =
-        before[beforeIndex] === after[afterIndex]
-          ? table[beforeIndex + 1][afterIndex + 1] + 1
-          : Math.max(
-              table[beforeIndex + 1][afterIndex],
-              table[beforeIndex][afterIndex + 1],
-            );
+      const beforeValue = before[beforeIndex]!;
+      const afterValue = after[afterIndex]!;
+      const row = table[beforeIndex]!;
+      const nextRow = table[beforeIndex + 1]!;
+      row[afterIndex] =
+        beforeValue === afterValue
+          ? nextRow[afterIndex + 1]! + 1
+          : Math.max(nextRow[afterIndex]!, row[afterIndex + 1]!);
     }
   }
 
@@ -74,26 +75,29 @@ function diffSequence(before: readonly string[], after: readonly string[]) {
   let beforeIndex = 0;
   let afterIndex = 0;
   while (beforeIndex < before.length && afterIndex < after.length) {
-    if (before[beforeIndex] === after[afterIndex]) {
-      pushSequencePart(parts, "equal", after[afterIndex]);
+    const beforeValue = before[beforeIndex]!;
+    const afterValue = after[afterIndex]!;
+    if (beforeValue === afterValue) {
+      pushSequencePart(parts, "equal", afterValue);
       beforeIndex += 1;
       afterIndex += 1;
     } else if (
-      table[beforeIndex + 1][afterIndex] >= table[beforeIndex][afterIndex + 1]
+      table[beforeIndex + 1]![afterIndex]! >=
+      table[beforeIndex]![afterIndex + 1]!
     ) {
-      pushSequencePart(parts, "removed", before[beforeIndex]);
+      pushSequencePart(parts, "removed", beforeValue);
       beforeIndex += 1;
     } else {
-      pushSequencePart(parts, "added", after[afterIndex]);
+      pushSequencePart(parts, "added", afterValue);
       afterIndex += 1;
     }
   }
   while (beforeIndex < before.length) {
-    pushSequencePart(parts, "removed", before[beforeIndex]);
+    pushSequencePart(parts, "removed", before[beforeIndex]!);
     beforeIndex += 1;
   }
   while (afterIndex < after.length) {
-    pushSequencePart(parts, "added", after[afterIndex]);
+    pushSequencePart(parts, "added", after[afterIndex]!);
     afterIndex += 1;
   }
   return parts;
@@ -127,8 +131,8 @@ function enrichChangedLines(parts: SequencePart[]) {
   const pairedLength = Math.min(removed.length, added.length);
 
   for (let index = 0; index < pairedLength; index += 1) {
-    const before = removed[index];
-    const after = added[index];
+    const before = removed[index]!;
+    const after = added[index]!;
     const segments = wordSegments(before, after);
     lines.push(
       lineFromSegments(
@@ -176,6 +180,7 @@ export function unifiedDiff(
 
   while (partIndex < parts.length) {
     const part = parts[partIndex];
+    if (!part) break;
     if (part.type === "equal") {
       result.push({
         type: "equal",
@@ -188,8 +193,10 @@ export function unifiedDiff(
     }
 
     const changedParts: SequencePart[] = [];
-    while (partIndex < parts.length && parts[partIndex].type !== "equal") {
-      changedParts.push(parts[partIndex]);
+    while (partIndex < parts.length) {
+      const current = parts[partIndex];
+      if (!current || current.type === "equal") break;
+      changedParts.push(current);
       partIndex += 1;
     }
     const lines = enrichChangedLines(changedParts);

package/src/shared/forms/core/types.ts

@@ -1,8 +1,8 @@
 import type { Component } from "svelte";
 import type { HTMLInputAttributes } from "svelte/elements";
 import type { ColorPickerFormat } from "../color-picker/color-value";
-import type { CyclePickerPreview } from "../cycle-picker/CyclePicker.svelte";
-import type { InlineOptionPickerOption } from "../inline-option-picker/InlineOptionPicker.svelte";
+import type { CyclePickerPreview } from "../cycle-picker/types";
+import type { InlineOptionPickerOption } from "../inline-option-picker/types";
 import type { ReferenceIndex } from "./reference-utils";
 import type { RegisteredFormFieldKind } from "./path-config";
 import type { FieldPath } from "./path-types";

package/src/shared/forms/cycle-picker/index.ts

@@ -1,2 +1,2 @@
 export { default as CyclePicker } from "./CyclePicker.svelte";
-export type { CyclePickerPreview } from "./CyclePicker.svelte";
+export type { CyclePickerPreview } from "./types";

package/src/shared/forms/cycle-picker/types.ts

@@ -0,0 +1 @@
+export type CyclePickerPreview = "plain" | "font";

package/src/shared/forms/index.ts

@@ -126,7 +126,7 @@ export {
   type UnifiedDiffSegment,
   type UnifiedDiffSegmentType,
 } from "./core/review-diff";
-export type { InlineOptionPickerOption } from "./inline-option-picker/InlineOptionPicker.svelte";
+export type { InlineOptionPickerOption } from "./inline-option-picker/types";
 export type { AddSectionOption } from "./add-section-chooser/AddSectionChooser.svelte";
 export * from "./core/core";
 

package/src/shared/forms/inline-option-picker/types.ts

@@ -0,0 +1,8 @@
+import type { Component } from "svelte";
+
+export type InlineOptionPickerOption = {
+  value: string;
+  label: string;
+  icon?: Component;
+  accent?: string;
+};

package/src/shared/forms/patchable-form/field-review-context.ts

@@ -30,7 +30,7 @@ function fieldReviewForChange<T>(
   if (!preview) return null;
   return {
     removedValue: formatReviewValue(preview.before),
-    stale: review.stale,
+    ...(review.stale === undefined ? {} : { stale: review.stale }),
     onKeep: () => onKeep(change.id),
     onUndo: () => onUndo(change.id),
   };

package/src/shared/shadcn/code-block/CodeBlock.svelte

@@ -325,7 +325,7 @@
   >
     {#if useSpans}
       <span data-ui-part="code-block-line-content">
-        {#each buildSpanParts(line, tokenLines[lineIndex] ?? []) as part (part.kind === "token" ? part.key : part.text)}
+        {#each buildSpanParts(line, tokenLines[lineIndex] ?? []) as part, partIndex (partIndex)}
           {#if part.kind === "token"}
             <span class={`ui-code-token-${part.type}`}>{part.text}</span>
           {:else}