@lostgradient/cinder 0.5.0 → 0.6.0

package/src/components/choice-grid/choice-grid.types.ts

@@ -1,152 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-
-/**
- * Feedback state for a choice grid item. Neutral means no feedback applied.
- * Correct / incorrect / pending communicate quiz or assessment results.
- */
-export type ChoiceGridItemState = 'neutral' | 'correct' | 'incorrect' | 'pending';
-
-/**
- * Column layout for the grid. 'responsive' uses auto-fill with a minimum cell
- * width. A number sets a fixed column count.
- */
-export type ChoiceGridColumns = 'responsive' | 1 | 2 | 3 | 4;
-
-/**
- * Shape of the context object provided to ChoiceGridItem children.
- *
- * All members are getter properties on the context object so reads remain
- * reactive inside `$derived` expressions in the children. Destructuring the
- * context breaks reactivity; always access via `context.field`.
- */
-export type ChoiceGridContext = {
-  /**
-   * The currently selected value (single-select mode) or null when nothing
-   * is selected. In multi-select mode this field is unused — children check
-   * `isSelected` instead.
-   */
-  readonly value: string | null;
-
-  /** True when the grid allows multiple simultaneous selections. */
-  readonly multiple: boolean;
-
-  /** True when ALL items are disabled (the grid-level disabled prop). */
-  readonly disabled: boolean;
-
-  /**
-   * True when `candidate` is currently selected (works for both single- and
-   * multi-select modes).
-   */
-  isSelected: (candidate: string) => boolean;
-
-  /**
-   * Select or toggle `candidate`. In single-select mode this sets the value;
-   * in multi-select mode this toggles the candidate in the values set.
-   */
-  select: (candidate: string) => void;
-
-  /**
-   * Register an item element with the parent so the parent can drive roving
-   * tabindex focus. `disabled` is tracked so disabled items are skipped by both
-   * the roving-tabindex computation and arrow-key navigation.
-   */
-  register: (value: string, element: HTMLElement, disabled: boolean) => void;
-
-  /** Update the tracked disabled state for an already-registered item. */
-  setItemDisabled: (value: string, disabled: boolean) => void;
-
-  /** Remove an item from the registry on unmount. */
-  unregister: (value: string) => void;
-
-  /**
-   * Whether `candidate` should hold `tabindex="0"`. Must be called inside
-   * a `$derived` to remain reactive.
-   */
-  isFocusable: (candidate: string) => boolean;
-
-  /** Items forward `keydown` here for shared arrow-key navigation. */
-  handleKeydown: (event: KeyboardEvent) => void;
-};
-
-/**
- * Props for the `<ChoiceGrid>` parent component.
- */
-export type ChoiceGridProps = Omit<
-  HTMLAttributes<HTMLDivElement>,
-  'role' | 'aria-label' | 'aria-labelledby'
-> & {
-  /**
-   * The currently selected value (single-select mode). Bindable.
-   * Pass `null` or omit to start with no selection.
-   */
-  value?: string | null;
-
-  /**
-   * Currently selected values (multi-select mode). Bindable. Only used when
-   * `multiple` is `true` — set `multiple` explicitly to switch modes; binding
-   * `values` alone does NOT enable multi-select.
-   */
-  values?: string[];
-
-  /**
-   * When true the grid allows multiple simultaneous selections and reads/writes
-   * `values` instead of `value`. The ARIA role switches to `group` (items become
-   * `checkbox`); single-select uses `radiogroup` (items become `radio`).
-   */
-  multiple?: boolean;
-
-  /**
-   * Column layout.
-   * - `'responsive'` — `auto-fill` at a minimum cell width (default).
-   * - `1 | 2 | 3 | 4` — fixed number of columns.
-   */
-  columns?: ChoiceGridColumns;
-
-  /**
-   * Minimum cell width for `columns="responsive"`. Accepts any CSS
-   * `<length>` (e.g. `"12rem"`, `"200px"`). Default: `"10rem"`.
-   */
-  minColumnWidth?: string;
-
-  /** Accessible label for the grid (required unless `ariaLabelledby` is set). */
-  ariaLabel?: string;
-
-  /** Id of an external element that labels this grid. */
-  ariaLabelledby?: string;
-
-  /** Disables all items in the grid. */
-  disabled?: boolean;
-
-  /** Additional class names merged with `.cinder-choice-grid`. */
-  class?: string;
-
-  /** `ChoiceGridItem` children. */
-  children: Snippet;
-};
-
-/**
- * Props for the `<ChoiceGridItem>` leaf component.
- */
-export type ChoiceGridItemProps = {
-  /**
-   * The value this item represents. Used as the key for selection state,
-   * roving tabindex registration, and ARIA attributes.
-   */
-  value: string;
-
-  /**
-   * Feedback state for assessment / quiz usage. Defaults to `'neutral'`.
-   * Layout dimensions do NOT change across states (stable cell sizing guarantee).
-   */
-  state?: ChoiceGridItemState;
-
-  /** When true this item cannot be selected or focused. */
-  disabled?: boolean;
-
-  /** Additional class names merged with `.cinder-choice-grid-item`. */
-  class?: string;
-
-  /** Item content — label text, an icon, or richer markup. */
-  children: Snippet;
-};

package/src/components/choice-grid/index.ts

@@ -1,22 +0,0 @@
-import ChoiceGridItem from '../choice-grid-item/choice-grid-item.svelte';
-import './choice-grid.css';
-import ChoiceGridRoot from './choice-grid.svelte';
-
-/**
- * `ChoiceGrid` is the parent compound component. It is also a namespace whose
- * `Item` property exposes the compose-only leaf under its idiomatic name:
- * `ChoiceGrid.Item`. The leaf remains importable individually from
- * `@lostgradient/cinder/choice-grid-item`.
- */
-const ChoiceGrid = Object.assign(ChoiceGridRoot, {
-  Item: ChoiceGridItem,
-});
-
-export default ChoiceGrid;
-export type {
-  ChoiceGridColumns,
-  ChoiceGridContext,
-  ChoiceGridItemState,
-  ChoiceGridProps,
-} from './choice-grid.types.ts';
-export { ChoiceGrid };

package/src/components/choice-grid-item/choice-grid-item.svelte

@@ -1,139 +0,0 @@
-<script lang="ts" module>
-  /**
-   * @cinder
-   * @category form
-   * @status alpha
-   * @purpose Selectable answer tile used inside a ChoiceGrid; carries selected, disabled, correct, incorrect, and pending states without shifting cell dimensions.
-   * @tag form
-   * @tag selection
-   * @tag quiz
-   * @useWhen Composing individual answer choices inside a ChoiceGrid parent.
-   * @avoidWhen Used outside a ChoiceGrid — this leaf requires the parent context.
-   * @related choice-grid
-   */
-  export type {
-    ChoiceGridItemProps,
-    ChoiceGridItemState,
-  } from '../choice-grid/choice-grid.types.ts';
-</script>
-
-<script lang="ts">
-  import type { ChoiceGridItemProps } from './choice-grid-item.types.ts';
-  import { untrack } from 'svelte';
-  import { getChoiceGridContext } from '../choice-grid/choice-grid-context.ts';
-  import { classNames } from '../../utilities/class-names.ts';
-  import { rovingTabIndex } from '../../_internal/collection.ts';
-  import { devWarn } from '../../utilities/dev-warn.ts';
-
-  const ITEM_STATES = ['neutral', 'correct', 'incorrect', 'pending'] as const;
-
-  let {
-    value,
-    // Renamed off `state` to avoid svelte-check treating the bare identifier as
-    // the `$state` rune; the public prop name is still `state`.
-    state: stateProp = 'neutral',
-    disabled = false,
-    class: className,
-    children,
-  }: ChoiceGridItemProps = $props();
-
-  // Validate the public `state` against the allowed union so a plain-JS or
-  // dynamic value can't emit an unsupported `data-cinder-state`. Invalid values
-  // fall back to neutral (no data attribute) with a dev warning.
-  const feedbackState = $derived(
-    (ITEM_STATES as readonly string[]).includes(stateProp) ? stateProp : 'neutral',
-  );
-  $effect(() => {
-    if (!(ITEM_STATES as readonly string[]).includes(stateProp)) {
-      devWarn(
-        `ChoiceGridItem: invalid state "${String(stateProp)}". Expected one of ${ITEM_STATES.join(', ')}. Falling back to "neutral".`,
-      );
-    }
-  });
-
-  const context = getChoiceGridContext();
-
-  // `value` is the registry key and is fixed for the item's lifetime. Captured
-  // via untrack so a runtime mutation does not silently re-key the parent
-  // registry. EVERY ChoiceGrid interaction (selection, focusability, click)
-  // routes through `registeredValue`, never the live `value` prop, so a changing
-  // `value` can't desync the registry key from the selection/focus key. A
-  // changing `value` is unsupported and warned in development.
-  const registeredValue = untrack(() => value);
-  $effect(() => {
-    if (value !== registeredValue) {
-      devWarn(
-        `ChoiceGridItem: \`value\` changed from "${registeredValue}" to "${value}" after mount. ChoiceGridItem.value must be stable — give the item a fixed value (use {#key} to remount if the value must change). The grid keeps using the original value.`,
-      );
-    }
-  });
-
-  const isSelected = $derived(context.isSelected(registeredValue));
-  const isDisabled = $derived(disabled || context.disabled);
-  const isFocusable = $derived(context.isFocusable(registeredValue));
-  const tabIndex = $derived(rovingTabIndex(isFocusable));
-
-  // In single-select mode, the item acts as a radio button (role="radio").
-  // In multi-select mode, the item acts as a checkbox (role="checkbox").
-  const role = $derived(context.multiple ? 'checkbox' : 'radio');
-
-  let elementRef: HTMLElement | null = $state(null);
-
-  // Effect A — mount/unmount registration. Uses untrack to avoid creating a
-  // reactive cycle: register/unregister write to a reactive version counter,
-  // reading that inside an effect would self-trigger an infinite loop.
-  $effect(() => {
-    const el = elementRef;
-    if (!el) return;
-    untrack(() => {
-      context.register(registeredValue, el, isDisabled);
-    });
-    return () => {
-      untrack(() => {
-        context.unregister(registeredValue);
-      });
-    };
-  });
-
-  // Effect B — keep the parent's tracked disabled state in sync when this item's
-  // effective disabled state changes, so roving navigation and the focusable
-  // computation skip it. Reading isDisabled subscribes us; the write is untracked
-  // to stay out of the version-counter cycle.
-  $effect(() => {
-    const nextDisabled = isDisabled;
-    untrack(() => {
-      context.setItemDisabled(registeredValue, nextDisabled);
-    });
-  });
-
-  function handleClick(): void {
-    if (isDisabled) return;
-    context.select(registeredValue);
-  }
-
-  function handleKeydown(event: KeyboardEvent): void {
-    // Always forward to the parent so arrow/Home/End navigation works even when
-    // this tile is disabled (a disabled tile that holds focus must not trap the
-    // keyboard). The parent's `select()` already refuses to activate a disabled
-    // item, so Space/Enter on a disabled tile is a safe no-op.
-    context.handleKeydown(event);
-  }
-</script>
-
-<div
-  bind:this={elementRef}
-  {role}
-  aria-checked={isSelected}
-  aria-disabled={isDisabled || undefined}
-  tabindex={tabIndex}
-  class={classNames('cinder-choice-grid-item', className)}
-  data-cinder-selected={isSelected ? '' : undefined}
-  data-cinder-disabled={isDisabled || undefined}
-  data-cinder-state={feedbackState !== 'neutral' ? feedbackState : undefined}
-  onclick={handleClick}
-  onkeydown={handleKeydown}
->
-  <span class="cinder-choice-grid-item__content">
-    {@render children()}
-  </span>
-</div>

package/src/components/choice-grid-item/choice-grid-item.types.ts

@@ -1,30 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { ChoiceGridItemState } from '../choice-grid/choice-grid.types.ts';
-
-export type { ChoiceGridItemState };
-
-/**
- * Props for the `<ChoiceGridItem>` leaf component.
- */
-export type ChoiceGridItemProps = {
-  /**
-   * The value this item represents. Used as the key for selection state,
-   * roving tabindex registration, and ARIA attributes.
-   */
-  value: string;
-
-  /**
-   * Feedback state for assessment / quiz usage. Defaults to `'neutral'`.
-   * Layout dimensions do NOT change across states (stable cell sizing guarantee).
-   */
-  state?: ChoiceGridItemState;
-
-  /** When true this item cannot be selected or focused. */
-  disabled?: boolean;
-
-  /** Additional class names merged with `.cinder-choice-grid-item`. */
-  class?: string;
-
-  /** Item content — label text, an icon, or richer markup. */
-  children: Snippet;
-};

package/src/components/choice-grid-item/index.ts

@@ -1,6 +0,0 @@
-import './choice-grid-item.css';
-import ChoiceGridItem from './choice-grid-item.svelte';
-
-export default ChoiceGridItem;
-export type { ChoiceGridItemProps, ChoiceGridItemState } from './choice-grid-item.types.ts';
-export { ChoiceGridItem };

package/src/components/click-away-listener/click-away-listener.svelte

@@ -1,76 +0,0 @@
-<script lang="ts" module>
-  /**
-   * @cinder
-   * @category overlay
-   * @status beta
-   * @purpose Headless utility that calls a function when the user clicks or taps outside a subtree.
-   * @tag overlay
-   * @tag utility
-   * @useWhen Building a custom inline-edit field, custom dropdown, or any overlay that should close on outside interaction.
-   * @avoidWhen Using Popover, Dropdown, or Modal — those handle click-away internally.
-   * @related focus-trap, popover, portal
-   */
-  export type { ClickAwayListenerProps } from './click-away-listener.types.ts';
-</script>
-
-<script lang="ts">
-  import { classNames } from '../../utilities/class-names.ts';
-
-  import type { ClickAwayListenerProps } from './click-away-listener.types.ts';
-
-  let {
-    onclickaway,
-    enabled = true,
-    class: className,
-    children,
-    ...rest
-  }: ClickAwayListenerProps = $props();
-
-  let rootElement: HTMLDivElement | undefined = $state();
-
-  $effect(() => {
-    if (!enabled) return;
-
-    // Feature-detect PointerEvent. Falls back to mousedown + touchstart on
-    // browsers that do not implement the Pointer Events API.
-    const supportsPointerEvents =
-      typeof window !== 'undefined' && typeof window.PointerEvent !== 'undefined';
-
-    function handlePointerDown(event: PointerEvent | MouseEvent | TouchEvent) {
-      if (!rootElement) return;
-
-      // Use event.target for all event types. touchstart's event.target already
-      // resolves to the touched element — identical to touches[0].target — so a
-      // separate TouchEvent branch adds nothing and crashes in environments that
-      // support touchstart but lack a global TouchEvent constructor (e.g. legacy
-      // desktop Safari, jsdom, and any browser where PointerEvent is unavailable
-      // but TouchEvent is also not a defined global): `event instanceof undefined`
-      // throws TypeError. Avoid the global entirely.
-      const target = event.target;
-
-      const isInside = target instanceof Node && rootElement.contains(target);
-      if (!isInside) {
-        onclickaway(event);
-      }
-    }
-
-    if (supportsPointerEvents) {
-      document.addEventListener('pointerdown', handlePointerDown as EventListener);
-      return () => {
-        document.removeEventListener('pointerdown', handlePointerDown as EventListener);
-      };
-    }
-
-    // Fallback: listen to both mousedown and touchstart.
-    document.addEventListener('mousedown', handlePointerDown as EventListener);
-    document.addEventListener('touchstart', handlePointerDown as EventListener, { passive: true });
-    return () => {
-      document.removeEventListener('mousedown', handlePointerDown as EventListener);
-      document.removeEventListener('touchstart', handlePointerDown as EventListener);
-    };
-  });
-</script>
-
-<div bind:this={rootElement} class={classNames(className)} {...rest}>
-  {@render children()}
-</div>

package/src/components/click-away-listener/click-away-listener.types.ts

@@ -1,28 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-
-/**
- * Props for the ClickAwayListener component.
- *
- * A headless utility that fires `onclickaway` when the user presses a pointer
- * (mouse or touch) outside the component's root element. Useful for closing
- * inline-edit fields, custom dropdowns, or any overlay that should dismiss on
- * outside interaction without requiring a full Popover or Modal.
- */
-export type ClickAwayListenerProps = Omit<HTMLAttributes<HTMLDivElement>, 'class'> & {
-  /**
-   * Called with the triggering PointerEvent (or MouseEvent/TouchEvent on
-   * browsers that do not support the Pointer Events API) when the user presses
-   * a pointer device outside the root element.
-   */
-  onclickaway: (event: PointerEvent | MouseEvent | TouchEvent) => void;
-  /**
-   * When false the document listener is detached and `onclickaway` is never
-   * called. Defaults to `true`.
-   */
-  enabled?: boolean;
-  /** Content rendered inside the root element. Required. */
-  children: Snippet;
-  /** Additional class names merged with the root element. */
-  class?: string;
-};

package/src/components/click-away-listener/index.ts

@@ -1,5 +0,0 @@
-import ClickAwayListener from './click-away-listener.svelte';
-
-export default ClickAwayListener;
-export type { ClickAwayListenerProps } from './click-away-listener.types.ts';
-export { ClickAwayListener };

package/src/components/code-block/code-block-default-highlighter.ts

@@ -1,63 +0,0 @@
-/**
- * The lazy default-highlighter seam for `<CodeBlock>`.
- *
- * `<CodeBlock>` highlights automatically when a `language` is set and no
- * explicit `highlighter` prop is passed. Rather than statically importing the
- * Shiki adapter (which would pull Shiki into every consumer's entry chunk and
- * break SSR-bundle safety), CodeBlock calls {@link loadDefaultHighlighter}
- * from inside a client-only `$effect`. That defers BOTH the Shiki module
- * import AND this module's `shikiHighlighter()` factory call until a block
- * actually needs highlighting.
- *
- * This is also the single mock seam for CodeBlock's unit tests: tests
- * `mock.module()` THIS exact module specifier, never the public
- * `@lostgradient/cinder/highlighters/shiki` subpath (which CodeBlock does not import
- * directly). Mocking here is what makes the "default import is NOT invoked
- * when an explicit `highlighter` is provided" assertion real instead of
- * false-confidence.
- *
- * Lifecycle:
- *
- *   - The Shiki adapter import is wrapped in `createRetryingLoaderCache`, so
- *     it loads at most once, concurrent callers share one in-flight promise,
- *     and a REJECTED load is evicted so a later highlight retries (a transient
- *     chunk-load failure does not poison the cache forever).
- *   - The `shikiHighlighter()` instance is memoized on first successful load.
- *     The instance itself lazy-imports `shiki` on its first highlight call and
- *     applies the adapter's default dual-theme (`github-light` / `github-dark`),
- *     so the default path re-themes with cinder's light/dark switch.
- */
-
-import type { Highlighter } from '../../utilities/highlighter.ts';
-import { createRetryingLoaderCache } from '../../utilities/retrying-loader-cache.ts';
-
-type ShikiAdapterModule = typeof import('../../highlighters/shiki/index.ts');
-
-/**
- * Dynamically import the Shiki adapter module. Kept as a dedicated arrow so
- * the retrying cache wraps a single specifier, and so the dynamic `import()`
- * is the ONLY reference to the adapter from CodeBlock's import graph — there
- * is no static edge (asserted by `code-block.bundle-boundary.test.ts`).
- */
-const loadShikiAdapterModule = createRetryingLoaderCache<ShikiAdapterModule>(
-  () => import('../../highlighters/shiki/index.ts'),
-);
-
-/** Memoized default highlighter instance, created once on first success. */
-let defaultHighlighter: Highlighter | undefined;
-
-/**
- * Resolve the bundled default highlighter, loading the Shiki adapter lazily
- * on the first call and memoizing the resulting {@link Highlighter} instance.
- *
- * Returns the same instance on every subsequent call. The instance applies
- * the Shiki adapter's default options, whose output escapes the code text
- * (the only safety claim cinder makes for the `{@html}` boundary — see the
- * `@security` note on {@link Highlighter}).
- */
-export async function loadDefaultHighlighter(): Promise<Highlighter> {
-  if (defaultHighlighter !== undefined) return defaultHighlighter;
-  const module_ = await loadShikiAdapterModule();
-  defaultHighlighter ??= module_.shikiHighlighter();
-  return defaultHighlighter;
-}

package/src/components/code-block/code-block.svelte

@@ -1,141 +0,0 @@
-<script lang="ts" module>
-  /**
-   * @cinder
-   * @category data-display
-   * @status stable
-   * @purpose Block container for multi-line source code with automatic syntax highlighting and a copy-to-clipboard control.
-   * @tag code
-   * @tag snippet
-   * @useWhen Displaying a multi-line code sample or terminal transcript inside documentation or chat.
-   * @useWhen Letting the reader copy a snippet to the clipboard via the copyable prop.
-   * @avoidWhen Annotating a single inline keystroke or shortcut — use kbd instead.
-   * @avoidWhen Rendering rich prose that happens to include code — embed it in markdown instead.
-   * @related kbd, copy-button
-   */
-  export type { CodeBlockProps } from './code-block.types.ts';
-</script>
-
-<script lang="ts">
-  import { loadDefaultHighlighter } from './code-block-default-highlighter.ts';
-  import { classNames } from '../../utilities/class-names.ts';
-  import { devWarn } from '../../utilities/dev-warn.ts';
-  import CopyButton from '../copy-button/copy-button.svelte';
-  import type { CodeBlockProps } from './code-block.types.ts';
-
-  let {
-    code,
-    language,
-    highlight,
-    highlighter,
-    copyable = false,
-    class: className,
-  }: CodeBlockProps = $props();
-
-  let highlighted = $state<string | null>(null);
-
-  // Two-phase render contract: the server (and the first client paint) emits
-  // the plain `<pre><code>` fallback because `$effect` never runs during SSR.
-  // The effect below — client-only by definition — enhances the block to the
-  // highlighted HTML once the highlighter resolves. The outer viewport stays
-  // mounted across both phases so syntax colorization cannot move surrounding
-  // layout. Keeping the Shiki boundary a dynamic import inside this effect is
-  // what keeps Shiki out of the SSR bundle and the consumer's entry chunk.
-  $effect(() => {
-    // `highlight={false}` is an absolute off switch: it disables ALL
-    // highlighting — including an explicit `highlighter` prop — and triggers
-    // NO default-highlighter import. The block stays the escaped plain
-    // fallback. (Default when unset: highlight whenever `language` is set.)
-    if (highlight === false || !language) {
-      highlighted = null;
-      return;
-    }
-
-    // Snapshot the inputs this run highlights so a later `code`/`language`/
-    // `highlighter` change can't let a stale (and `{@html}`-trusted) result
-    // overwrite a newer state. The cleanup flips `cancelled`, which gates
-    // EVERY assignment below — including the one after the async default
-    // load resolves.
-    const pendingCode = code;
-    const pendingLanguage = language;
-    const explicitHighlighter = highlighter;
-
-    // Drop any stale highlighted output before starting a new request so a
-    // change can't leave the previous render visible while the new request
-    // is in flight.
-    highlighted = null;
-    let cancelled = false;
-
-    // The highlighter may throw synchronously OR reject, and resolving the
-    // default highlighter is itself async — wrap everything in one async IIFE
-    // so all failure modes hit the same `catch`.
-    void (async () => {
-      try {
-        // An explicit `highlighter` bypasses the default entirely: the default
-        // loader is never imported, so its Shiki load + factory side effects
-        // never fire (asserted in the unit tests).
-        const resolvedHighlighter = explicitHighlighter ?? (await loadDefaultHighlighter());
-        if (cancelled) return;
-        const html = await resolvedHighlighter(pendingCode, pendingLanguage);
-        if (!cancelled) highlighted = html === '' ? null : html;
-      } catch (error) {
-        if (!cancelled) highlighted = null;
-        // Surface to the developer without breaking the graceful fallback.
-        // Never log the code itself — a code block can contain secrets. Log
-        // the language and the error class/message only.
-        const detail = error instanceof Error ? `${error.name}: ${error.message}` : String(error);
-        devWarn(`[cinder/CodeBlock] highlight failed for language "${pendingLanguage}":`, detail);
-      }
-    })();
-
-    return () => {
-      cancelled = true;
-    };
-  });
-</script>
-
-<div class={classNames('cinder-code-block', className)}>
-  {#if language || copyable}
-    <header class="cinder-code-block__header">
-      {#if language}
-        <span class="cinder-code-block__language">{language}</span>
-      {/if}
-      {#if copyable}
-        <CopyButton
-          value={code}
-          class="cinder-code-block__copy"
-          label="Copy code"
-          copiedLabel="Code copied"
-          iconOnly={true}
-        />
-      {/if}
-    </header>
-  {/if}
-  <!-- One stable, focusable scroll viewport is shared by plain, highlighted,
-       and fallback states. Keep tabindex unconditional so overflowing snippets
-       are keyboard-scrollable before measurement. -->
-  <div class="cinder-code-block__viewport" tabindex="0">
-    <!-- The svelte:boundary catches errors thrown during render of {@html highlighted}
-         (e.g. a malformed HTML string that breaks Svelte's reconciliation). Sync/async
-         errors from the highlighter ITSELF are caught above; this is the secondary net. -->
-    <!-- `{@html}` reconciliation across string→string transitions strands the
-         previous DOM nodes when they're emitted as direct children of an
-         `{#if}` branch (Svelte 5: the prior nodes share the same parent and
-         no anchor scopes them). Wrap the `{@html}` output in a stable
-         container `<div>` so the previous render is contained inside an
-         element Svelte can replace in place. -->
-    <svelte:boundary>
-      {#if highlighted !== null}
-        <div class="cinder-code-block__highlighted">
-          {@html highlighted}
-        </div>
-      {:else}
-        <pre class="cinder-code-block__pre"><code class="cinder-code-block__code">{code}</code
-          ></pre>
-      {/if}
-      {#snippet failed()}
-        <pre class="cinder-code-block__pre"><code class="cinder-code-block__code">{code}</code
-          ></pre>
-      {/snippet}
-    </svelte:boundary>
-  </div>
-</div>