@lapismd/design-core 0.1.0

package/src/shared/shadcn/collapsible/collapsible.tokens.css

@@ -0,0 +1,13 @@
+/**
+ * Default collapsible token bindings → theme tokens.
+ * Override --ui-collapsible-* on :root or any ancestor (forms pattern).
+ * Do not rebind these names on [data-ui-component="collapsible"] hosts — that
+ * blocks ancestor customization.
+ */
+:root {
+  --ui-collapsible-background: transparent;
+  --ui-collapsible-foreground: var(--foreground);
+  --ui-collapsible-border-color: transparent;
+  --ui-collapsible-radius: 0;
+  --ui-collapsible-focus-ring-color: var(--ring);
+}

package/src/shared/shadcn/collapsible/collapsible.tokens.ts

@@ -0,0 +1,10 @@
+export const collapsibleTokenNames = {
+  background: "--ui-collapsible-background",
+  foreground: "--ui-collapsible-foreground",
+  borderColor: "--ui-collapsible-border-color",
+  radius: "--ui-collapsible-radius",
+  focusRingColor: "--ui-collapsible-focus-ring-color",
+} as const;
+
+export type CollapsibleToken =
+  (typeof collapsibleTokenNames)[keyof typeof collapsibleTokenNames];

package/src/shared/shadcn/collapsible/examples/preview.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+  // @generated by ui-generator — do not edit
+
+  import ChevronsUpDownIcon from "@lucide/svelte/icons/chevrons-up-down";
+  import * as Collapsible from "../index.js";
+  import { buttonVariants } from "../../button/index.js";
+</script>
+
+<Collapsible.Root class="w-[350px] space-y-2">
+  <div class="flex items-center justify-between space-x-4 px-4">
+    <h4 class="text-sm font-semibold">@huntabyte starred 3 repositories</h4>
+    <Collapsible.Trigger
+      class={buttonVariants({ variant: "ghost", size: "sm", class: "w-9 p-0" })}
+    >
+      <ChevronsUpDownIcon />
+      <span class="sr-only">Toggle</span>
+    </Collapsible.Trigger>
+  </div>
+  <div class="rounded-md border px-4 py-3 font-mono text-sm">
+    @huntabyte/bits-ui
+  </div>
+  <Collapsible.Content class="space-y-2">
+    <div class="rounded-md border px-4 py-3 font-mono text-sm">
+      @melt-ui/melt-ui
+    </div>
+    <div class="rounded-md border px-4 py-3 font-mono text-sm">
+      @sveltejs/svelte
+    </div>
+  </Collapsible.Content>
+</Collapsible.Root>

package/src/shared/shadcn/collapsible/index.ts

@@ -0,0 +1,18 @@
+import Root from "./collapsible.svelte";
+import Trigger from "./collapsible-trigger.svelte";
+import Content from "./collapsible-content.svelte";
+
+export {
+  Root,
+  Content,
+  Trigger,
+  //
+  Root as Collapsible,
+  Content as CollapsibleContent,
+  Trigger as CollapsibleTrigger,
+};
+
+export {
+  collapsibleTokenNames,
+  type CollapsibleToken,
+} from "./collapsible.tokens.js";

package/src/shared/shadcn/column-canvas/RESPONSIVE_SCROLL_PLAN.md

@@ -0,0 +1,167 @@
+# Responsive Column Canvas scrolling
+
+## Contract
+
+- `Root` accepts `displayMode="auto" | "fixed" | "compact"` and defaults to
+  `auto`.
+- `auto` resolves from the bounded root width. The default
+  `compactBreakpoint` is `960` CSS pixels.
+- The resolved mode is exposed as `data-display-mode="wide|compact|fixed"`.
+- Wide mode transiently gives the newest two rendered columns enough minimum
+  width to share the stage, within their configured maximum widths. Larger
+  durable widths remain authoritative; once deliberately resized in either
+  direction, a column's durable width replaces the responsive default until it
+  is reset. An older rendered column stays visible through
+  `--ui-column-canvas-wide-context-width`. Resize handles, an optional
+  consumer-configured trailing spacer, independent vertical bodies, and
+  proximity snapping remain. The default trailing spacer width is `0`.
+- Compact mode makes each expanded column fill the complete bounded stage with
+  no preceding-column peek. It hides resize handles and the auxiliary
+  horizontal scrollbar, removes the trailing blank tail, and uses mandatory
+  snapping.
+- `fixed` retains the previous fixed-width, free-horizontal-scroll geometry and
+  does not auto-follow columns.
+- The last rendered, non-closed column is active. Auto-follow runs only after a
+  path, visibility, collapse/open, restoration, or resolved-mode transition.
+- Scrollable column bodies retain vertical wheel ownership while they can move.
+  At a boundary—or over a non-scrollable column—vertical input maps to slower,
+  smooth adjacent-column motion with a deliberate ease-in/ease-out trajectory;
+  reduced-motion preferences keep it instant. Repeated events while that
+  transition is active retain the current adjacent target rather than skipping
+  a column. Input at a horizontal edge remains available to the surrounding
+  page.
+- Root-level Arrow Left/Right and Home/End move among compact snap points without
+  changing controller selection or focus.
+- V1 persistence remains widths, collapse, and close state only. Resolved mode,
+  compact geometry, and scroll position remain transient.
+
+## Staged status
+
+| Stage                                 | Status     | Evidence                                                                                            |
+| ------------------------------------- | ---------- | --------------------------------------------------------------------------------------------------- |
+| Contract and progress artifact        | Complete   | Public types/props, resolved data attribute, and this document                                      |
+| Responsive context and geometry       | Complete   | Focused Storybook interactions and Chromium 1280/700/390 assertions                                 |
+| Active following and input routing    | Complete   | Real Chromium wheel, native touch, keyboard, body-boundary, focus, and outer-page tests             |
+| Examples, docs, tokens, and Storybook | Complete   | Adaptive and fixed stories are `visual-pending`; docs and token exports updated                     |
+| Chromium and repository validation    | Complete\* | Focused/full tests, pointer suites, checks, production Storybook, audit, and canonical visuals pass |
+| Compare-only visual inspection        | Complete   | Exact canonical captures inspected; both are `missing-baseline`; no PNG baselines written           |
+
+## Risks and guards
+
+- **Auto-follow fights manual scrolling:** alignment is event-triggered rather
+  than tied to rendering or scroll state.
+- **Wheel hijacking:** vertical-scroller lookup stops at the canvas root so an
+  outer scroll owner cannot mask available horizontal movement. Input is
+  prevented only when the target body cannot move and the canvas can move in
+  the requested direction.
+- **Responsive widths leak into persistence:** CSS derives compact and wide-pair
+  minimum widths from the container; controller widths are never changed during
+  mode transitions. A deliberate resize starts from the presented wide width
+  and remains the only action that updates durable geometry. The responsive
+  minimum yields as soon as that width differs from the controller default.
+- **Small-screen blank tail:** the durable trailing spacer is reduced to the
+  root's end padding and the active column snaps to the content edge.
+- **Motion and focus disruption:** programmatic alignment does not focus a
+  column and uses instant motion when reduced motion is requested.
+
+## Validation evidence
+
+- The signed-in Superlist reference was inspected visually at 1343x997,
+  900x800, and 390x844. Its wide layout keeps the newest two task panels side by
+  side with an older task-panel slice, while the narrower layouts give the
+  newest task panel the complete content stage. Superlist's separate navigation
+  rail remains consumer-owned and is not part of this component contract.
+
+- `pnpm exec vitest run --project unit
+src/shared/shadcn/column-canvas/column-canvas-controller.spec.ts`: 8 passed.
+- `pnpm exec vitest run --project storybook
+src/shared/shadcn/column-canvas/ColumnCanvas.stories.svelte`: 11 passed.
+- `pnpm exec playwright test tests/shadcn/column-canvas-scroll.spec.ts`: 9
+  passed, including full-stage 700px/390px compact geometry and wide newest-pair
+  context geometry.
+- `pnpm test:shadcn:pointer`: 16 passed, including 9 Column Canvas browser
+  scenarios covering wide, 700px/390px compact, fixed, wheel, native touch,
+  keyboard, resize round-trips, close/reopen, collapse/expand, reduced motion,
+  focus retention, and nested vertical-scroll arbitration.
+- The compact wheel scenario places a non-scrollable column inside a scrollable
+  ancestor. It asserts that available motion smoothly changes the canvas
+  `scrollLeft` without changing the ancestor `scrollTop`, and that a scrollable
+  body hands off at both boundaries. The backward boundary regression samples
+  the first 12 animation frames, requires less than 35% of the stage distance
+  to be covered in that opening interval, repeats the same wheel direction to
+  guard against skipped columns, and verifies the exact adjacent snap point.
+  It separately verifies page handoff once the canvas reaches its horizontal
+  edge.
+- `pnpm check`: 0 errors and 0 warnings.
+- `pnpm check:docs-mcp`: both TypeScript configurations passed.
+- `pnpm check:no-tailwind`: passed.
+- `pnpm build-storybook`: passed.
+- `pnpm test:unit`: 80 files and 486 tests passed.
+- `pnpm test:storybook`: 185 files and 529 tests passed after a warmed retry;
+  the first run was interrupted by Vite's dependency optimizer reloading newly
+  discovered `@lezer/common` chunks.
+- `pnpm test:workspace:pointer`: 13 passed.
+- `pnpm test:shell:pointer`: 5 passed.
+- `pnpm test:ai-chat-browser`: 2 passed.
+- `pnpm workspace:visual:audit`: passed with 112 stories, 71 pending, 36
+  approved, 5 skipped, no failed stories, no orphan baselines, and no contract
+  errors.
+- Exact compare-only capture for `responsive-adaptive-canvas` and
+  `product-workspace-showcase`: both completed under the canonical Linux/ARM64 capture
+  profile with `outcome: missing-baseline` and `policyStatus: warning`. The
+  actual captures were inspected; no baseline PNG was created or updated.
+- `pnpm test:visual`: all 415 canonical Chromium captures completed. The result
+  ledger contains 311 passes, 8 changes within tolerance, 30 mismatches, and 66
+  missing baselines under warning policy. Every Column Canvas story is
+  `missing-baseline`; the repo-wide mismatches are outside this component and
+  remain separate from this slice.
+- `pnpm checks` reached `fmt:check` and stopped on six tracked files that were
+  already unformatted before this slice:
+  `column-canvas-controller.svelte.ts`, `WorkspaceAboutDialog.css`,
+  `WorkspaceAboutDialog.stories.svelte`, `app-workspace.ts`, `tree.ts`, and
+  `WorkspaceExplorer.css`. The remaining checks were run individually with the
+  passing results above. Changed-file Prettier validation passes.
+
+### 2026-08-11 trailing-column regression
+
+- The Product workspace pair exposed two fixture-specific conflicts: its
+  responsive minimum continued to win after a pointer resize, and wide-mode
+  proximity snapping cancelled the smaller programmatic delta used for unused
+  vertical-wheel handoff.
+- Responsive pair sizing now yields to any deliberate non-default durable
+  width. Wide sticky canvases suspend proximity snapping during the restrained
+  wheel delta and then ease to the adjacent snap point or canvas edge; fixed
+  canvases retain their free-scrolling behavior.
+- The full showcase Chromium scenario now drags both Task details and Activity
+  in both directions, verifies the rendered and durable widths, confirms both
+  bodies are non-scrollable, and exercises vertical-wheel handoff from each.
+  The earlier tests covered one resizer in a three-column non-sticky fixture,
+  fixed-mode sticky wheel routing without proximity snapping, and showcase
+  visibility/compact geometry—but never this six-column combination.
+- `pnpm test:shadcn:pointer`: 17 passed. The compact touch/wheel scenario was
+  also repeated three times after its existing touch-momentum race was made
+  explicit; all three passed.
+- Focused controller tests (8), focused Storybook tests (11), `pnpm check`,
+  `pnpm check:no-tailwind`, and `pnpm build-storybook` passed. Visual tests and
+  baseline comparisons were deliberately not rerun for this follow-up.
+
+### 2026-08-11 default canvas ending and rail chrome
+
+- The default trailing spacer is now zero and its presentation element is
+  omitted entirely when unused, so the final column ends at the root's normal
+  inline-end padding. Consumers can still opt into extra space with
+  `trailingSpacerWidth` without changing persistence.
+- Floating sticky rails and collapsed-column triggers now share a tokenized
+  hover/focus treatment. Collapsed-column triggers place the expand chevron
+  before the title in both DOM and visual order.
+- Live Chromium acceptance in Product workspace found no trailing-spacer
+  element, a sub-pixel difference between `scrollLeft` and the maximum scroll
+  position, and the expected 12px root end padding after the Activity column.
+- Focused controller tests (9), focused Storybook tests (11), and all 17 pointer
+  browser tests passed. `pnpm check`, `pnpm check:docs-mcp`,
+  `pnpm check:no-tailwind`, and `pnpm build-storybook` also passed. Visual tests
+  and baseline comparisons were skipped as requested.
+
+\* The requested implementation and validation are complete. The aggregate
+`pnpm checks` command remains blocked only by the unrelated pre-existing
+formatting findings listed above.

package/src/shared/shadcn/column-canvas/STICKY_COLUMNS_PLAN.md

@@ -0,0 +1,84 @@
+# Floating sticky Column Canvas rails
+
+## Contract
+
+- `Column` accepts presentation-only `sticky?: boolean`, defaulting to false,
+  plus a named `stickyRail` snippet for consumer-owned return-button contents.
+- Source columns always retain normal flow, durable width, resizers, body
+  scrolling, and scrollbar presentation. Sticky presentation never applies
+  `position: sticky` to the source column.
+- When a leading sticky source moves underneath its rail-width slot, `Root`
+  renders a separate opaque collapsed return rail. Clicking it scrolls back to
+  the source without changing controller selection, collapse, close, or path.
+- Consecutive leading rails stack at the root inline start with no gap. Expanded
+  sources use `--ui-column-canvas-sticky-peek-width` (the collapsed-column
+  `2.75rem` width by default); collapsed sources use their full collapsed width.
+  The opaque stack ignores root padding so it is flush with both the inline
+  start and full block extent.
+- Each rail provides a circular outlined shadcn icon button plus its visible
+  column label. The standard back arrow is the default; `stickyRail` customizes
+  that button's contents.
+- A sticky request after the first rendered non-sticky column stays inactive.
+  Compact mode renders no floating rails and retains its existing peek,
+  snapping, wheel routing, and scrollbar treatment.
+- Requested source columns expose `data-sticky="true"` and active sources expose
+  `data-sticky-state="flowing|stuck"`; floating replacements expose
+  `data-sticky-for` and `data-sticky-state="stuck"`.
+- Sticky configuration and rail visibility remain transient presentation state.
+  The controller and V1 persistence schema are unchanged.
+
+## Staged status
+
+| Stage                                      | Status   | Evidence                                                         |
+| ------------------------------------------ | -------- | ---------------------------------------------------------------- |
+| Corrected public contract and registration | Complete | `stickyRail`, root registration, and this document               |
+| Gapless floating stack and return action   | Complete | Live Storybook inspection and focused story interactions         |
+| Stories, examples, and documentation       | Complete | Adaptive/fixed custom rails and consumer-facing prose            |
+| Chromium regression coverage               | Complete | Native motion, geometry, return, lifecycle, and responsive tests |
+| Repository and compare-only validation     | Complete | Focused checks, build, audit, and visual comparison              |
+
+## Risks and guards
+
+- **Source panels accidentally pin or resize:** browser tests compare source
+  movement directly with `scrollLeft` and assert `position: relative`.
+- **Content shows between stacked rails:** the root renders one opaque stack
+  with zero flex gap, only internal separators, and offsets that cancel the
+  root's inline and block padding.
+- **Return controls mutate domain state:** the click handler writes only the
+  root scroll position; it never calls the controller.
+- **Stale rails after structural changes:** registration and layout refreshes
+  cover visibility, close/open, collapse/expand, resize, mode, root size, and
+  runtime `sticky` or `stickyRail` changes.
+- **Compact behavior regresses:** compact clears both active source state and
+  rendered rail state before its existing layout/input logic runs.
+- **Sticky rails become unreachable with a vertical mouse wheel:** wide and
+  fixed sticky canvases route only otherwise-unused vertical motion into scaled
+  continuous horizontal movement. Scrollable bodies retain priority and
+  non-sticky fixed canvases retain their original wheel behavior.
+- **Presentation leaks into persistence:** registrations and stuck state live
+  only in the root component.
+
+## Validation evidence
+
+- Focused Column Canvas Storybook Vitest: 10 passed after the corrected rail
+  model, compact controls, and custom snippets were added.
+- Live fixed-story inspection measured the stack at the root's exact inline and
+  block start, with a full 460px root height, two 44px rails, no inter-rail gap,
+  visible labels, and 32px circular outlined return buttons.
+- The previous sticky slice passed the full 15-test shadcn pointer suite. The
+  current follow-up passed all 8 Column Canvas cases across its full and focused
+  Chromium runs, covering native motion, unused vertical-wheel routing, the
+  non-sticky fixed boundary, gapless rail geometry, smooth and reduced-motion
+  return, lifecycle changes, and compact suppression. Three unrelated first-page
+  loads timed out only in the final parallel suite while Storybook was under
+  concurrent build load; their isolated reruns passed.
+- Focused controller Vitest: 8 passed. `pnpm check`, `pnpm check:no-tailwind`,
+  `pnpm check:docs-mcp`, the owned-file Prettier check, `pnpm build-storybook`,
+  and `pnpm workspace:visual:audit` passed.
+- Compare-only canonical Linux/ARM64 Chromium execution captured and inspected
+  both sticky stories. Each correctly reported `missing-baseline`; no PNG
+  baseline was created or updated.
+- Final `pnpm checks` stopped at `fmt:check` on six inherited files outside
+  this slice: the Column Canvas controller and five Workspace sources. The
+  owned-file Prettier check remains green; those unrelated files were not
+  modified.

package/src/shared/shadcn/column-canvas/column-canvas-body.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import type { WithElementRef } from "../../../lib/utils.js";
+  import { ScrollArea } from "../scroll-area/index.js";
+  import { useColumnCanvasColumn } from "./column-canvas-column-context.svelte.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    onScrollNearEnd,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    /** Fired when the body scrolls within 180px of the bottom. */
+    onScrollNearEnd?: () => void;
+    children?: Snippet;
+  } = $props();
+
+  useColumnCanvasColumn();
+
+  let viewportRef = $state<HTMLElement | null>(null);
+
+  $effect(() => {
+    const element = viewportRef;
+    const nearEnd = onScrollNearEnd;
+    if (!element || !nearEnd) return;
+
+    function handleScroll(): void {
+      if (
+        element!.scrollHeight - element!.scrollTop - element!.clientHeight <=
+        180
+      ) {
+        nearEnd!();
+      }
+    }
+
+    element.addEventListener("scroll", handleScroll);
+    return () => element.removeEventListener("scroll", handleScroll);
+  });
+</script>
+
+<div
+  bind:this={ref}
+  {...restProps}
+  class={className}
+  data-ui-component="column-canvas"
+  data-ui-part="column-body"
+>
+  <ScrollArea type="auto" orientation="vertical" bind:viewportRef>
+    {@render children?.()}
+  </ScrollArea>
+</div>

package/src/shared/shadcn/column-canvas/column-canvas-close.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import type { ComponentProps } from "svelte";
+  import XIcon from "@lucide/svelte/icons/x";
+  import { Button } from "../button/index.js";
+  import { useColumnCanvasContext } from "./context.svelte.js";
+  import { useColumnCanvasColumn } from "./column-canvas-column-context.svelte.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    onclick,
+    ...restProps
+  }: ComponentProps<typeof Button> & {
+    onclick?: (event: MouseEvent) => void;
+  } = $props();
+
+  const canvas = useColumnCanvasContext();
+  const controller = canvas.controller;
+  const column = useColumnCanvasColumn();
+
+  const closeable = $derived(controller.isCloseable(column.id));
+</script>
+
+{#if closeable}
+  <Button
+    bind:ref
+    variant="ghost"
+    size="icon-sm"
+    class={className}
+    type="button"
+    data-ui-part="column-close"
+    aria-label={`Close ${column.title} column`}
+    title={`Close ${column.title}`}
+    {...restProps}
+    onclick={(event) => {
+      onclick?.(event);
+      controller.close(column.id);
+      canvas.requestAlignment();
+    }}
+  >
+    <XIcon aria-hidden="true" />
+  </Button>
+{/if}

package/src/shared/shadcn/column-canvas/column-canvas-collapsed-column.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import type { HTMLAttributes } from "svelte/elements";
+  import ChevronRight from "@lucide/svelte/icons/chevron-right";
+  import type { WithElementRef } from "../../../lib/utils.js";
+  import { useColumnCanvasContext } from "./context.svelte.js";
+
+  /**
+   * Low-level collapsed rail escape hatch. Prefer `Column` with a collapsible
+   * controller config so collapse/expand stays controller-owned.
+   */
+  let {
+    ref = $bindable(null),
+    label,
+    count,
+    onExpand,
+    class: className,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLElement>, HTMLElement> & {
+    label: string;
+    count?: number;
+    onExpand: () => void;
+  } = $props();
+
+  const canvas = useColumnCanvasContext();
+
+  $effect(() => {
+    canvas.requestAlignment();
+    return canvas.requestAlignment;
+  });
+</script>
+
+<section
+  bind:this={ref}
+  {...restProps}
+  class={className}
+  data-ui-component="column-canvas"
+  data-ui-part="collapsed-column"
+>
+  <button
+    type="button"
+    data-ui-component="column-canvas"
+    data-ui-part="collapsed-trigger"
+    aria-label={`Expand ${label} column`}
+    title={count === undefined ? label : `${label} (${count})`}
+    onclick={onExpand}
+  >
+    <ChevronRight size={14} aria-hidden="true" />
+    <span data-ui-component="column-canvas" data-ui-part="collapsed-label">
+      <span>{label}</span>
+      {#if count !== undefined}
+        <span data-ui-component="column-canvas" data-ui-part="collapsed-count">
+          {count}
+        </span>
+      {/if}
+    </span>
+  </button>
+</section>

package/src/shared/shadcn/column-canvas/column-canvas-column-context.svelte.ts

@@ -0,0 +1,31 @@
+import { getContext, setContext } from "svelte";
+
+const COLUMN_CANVAS_COLUMN_CONTEXT = Symbol("ui-column-canvas-column");
+
+export type ColumnCanvasColumnContext = {
+  id: string;
+  /** Convenience title used for a11y labels and default header. */
+  title: string;
+  count: number | undefined;
+  resizable: boolean;
+  collapsible: boolean;
+  closeable: boolean;
+};
+
+export function setColumnCanvasColumnContext(
+  context: ColumnCanvasColumnContext,
+): ColumnCanvasColumnContext {
+  return setContext(COLUMN_CANVAS_COLUMN_CONTEXT, context);
+}
+
+export function useColumnCanvasColumn(): ColumnCanvasColumnContext {
+  const context = getContext<ColumnCanvasColumnContext | undefined>(
+    COLUMN_CANVAS_COLUMN_CONTEXT,
+  );
+  if (!context) {
+    throw new Error(
+      "ColumnCanvas header/body parts must be rendered inside ColumnCanvas.Column",
+    );
+  }
+  return context;
+}