@lapismd/design-core 0.2.0 → 0.3.1

package/dist/shared/shadcn/column-canvas/column-canvas-fixed-demo.svelte

@@ -0,0 +1,172 @@
+<script lang="ts">
+  import { onDestroy, untrack } from "svelte";
+  import * as ColumnCanvas from "./index.js";
+  import { Button } from "../button/index.js";
+  import { Input } from "../input/index.js";
+  import { ScrollArea } from "../scroll-area/index.js";
+  import * as Popover from "../popover/index.js";
+  let {
+    external = false,
+    mixed = false,
+    mode = "fixed",
+    previewOnHover = true,
+    previewDelay = 600,
+    previewDismissDelay = 120,
+    stickyOnly = false,
+  }: {
+    previewOnHover?: boolean;
+    previewDelay?: number;
+    previewDismissDelay?: number;
+    stickyOnly?: boolean;
+    external?: boolean;
+    mixed?: boolean;
+    mode?: "fixed" | "auto" | "compact";
+  } = $props();
+  let viewport = $state<HTMLElement | null>(null);
+  let enabled = $state(untrack(() => !stickyOnly));
+  let hoverEnabled = $state(untrack(() => previewOnHover));
+  let direction = $state<"ltr" | "rtl">("ltr");
+  let currentMode = $state(untrack(() => mode));
+  let draft = $state("");
+  let dropped = $state(false);
+  let mounted = $state(true);
+  const columns = ["primary", "secondary", "detail", "activity"];
+  const controller = ColumnCanvas.createColumnCanvasController({
+    columns: Object.fromEntries(
+      columns.map((id) => [
+        id,
+        {
+          defaultWidth: id === "activity" ? 420 : 240,
+          minWidth: 180,
+          maxWidth: 420,
+          collapsible: true,
+          closeable: true,
+          resizable: true,
+        },
+      ]),
+    ),
+    trailingSpacerWidth: 160,
+  });
+  onDestroy(() => {
+    void controller.dispose();
+  });
+</script>
+
+<div class="canvas-pinning-demo" data-testid="fixed-host" dir={direction}>
+  <div class="canvas-pinning-demo__controls">
+    <Button onclick={() => (enabled = !enabled)}>Toggle fixed</Button>
+    <Button onclick={() => (hoverEnabled = !hoverEnabled)}
+      >Toggle hover preview</Button
+    >
+    <Button onclick={() => (direction = direction === "ltr" ? "rtl" : "ltr")}
+      >Toggle direction</Button
+    >
+    <Button
+      onclick={() =>
+        (currentMode = currentMode === "compact" ? mode : "compact")}
+      >Toggle compact</Button
+    >
+    <Button onclick={() => controller.open("primary")}>Reopen primary</Button>
+    <Button onclick={() => (mounted = !mounted)}>Toggle canvas</Button>
+  </div>
+  <output data-testid="durable-layout" hidden
+    >{JSON.stringify(controller.getLayout())}</output
+  >
+  <div class="canvas-pinning-demo__canvas">
+    {#if mounted}
+      {#if external}
+        <ScrollArea
+          style="height: 100%"
+          dir={direction}
+          orientation="horizontal"
+          scrollStrategy="styled"
+          fillContent
+          bind:viewportRef={viewport}
+        >
+          {@render canvas()}
+        </ScrollArea>
+      {:else}
+        {@render canvas()}
+      {/if}
+    {/if}
+  </div>
+</div>
+
+{#snippet canvas()}
+  <ColumnCanvas.Root
+    {controller}
+    displayMode={currentMode}
+    scrollViewport={external ? viewport : null}
+    aria-label="Pinned canvas"
+    compactBreakpoint={600}
+  >
+    {#each columns as id, index (id)}
+      <ColumnCanvas.Column
+        {id}
+        title={id}
+        fixed={enabled && (index === 0 || (!mixed && index === 1))}
+        sticky={index === 0 || (mixed && index === 1)}
+        collapsedRail={index === 1 ? secondaryRail : undefined}
+        revealOnEdgeHover
+        previewOnHover={hoverEnabled}
+        {previewDelay}
+        {previewDismissDelay}
+      >
+        <ColumnCanvas.Body scrollStrategy="styled">
+          {#if index === 0}
+            <Input aria-label="Retained draft" bind:value={draft} />
+            <Popover.Root>
+              <Popover.Trigger>Open column menu</Popover.Trigger>
+              <Popover.Content><Button>Column action</Button></Popover.Content>
+            </Popover.Root>
+            <Button
+              draggable="true"
+              ondragstart={(event) =>
+                event.dataTransfer?.setData("text/plain", "fixed-file")}
+              >Drag pinned file</Button
+            >
+          {:else if index === 3}
+            <Button
+              ondragover={(event) => event.preventDefault()}
+              ondrop={(event) => {
+                event.preventDefault();
+                dropped =
+                  event.dataTransfer?.getData("text/plain") === "fixed-file";
+              }}>Drop file here</Button
+            >
+            {#if dropped}<p role="status">Pinned file received</p>{/if}
+          {/if}
+          {#each Array.from({ length: index === 0 ? 40 : 4 }) as _, row}
+            <ColumnCanvas.Item>{id} item {row + 1}</ColumnCanvas.Item>
+          {/each}
+        </ColumnCanvas.Body>
+      </ColumnCanvas.Column>
+    {/each}
+  </ColumnCanvas.Root>
+{/snippet}
+
+{#snippet secondaryRail({
+  expand,
+}: ColumnCanvas.ColumnCanvasCollapsedRailContext)}
+  <Button onclick={expand}>Expand secondary custom</Button>
+{/snippet}
+
+<style>
+  .canvas-pinning-demo {
+    width: 1040px;
+    max-width: 100%;
+    height: 500px;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  .canvas-pinning-demo__controls {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+  }
+  .canvas-pinning-demo__canvas {
+    min-height: 0;
+    flex: 1;
+  }
+</style>

package/dist/shared/shadcn/column-canvas/column-canvas-fixed-demo.svelte.d.ts

@@ -0,0 +1,12 @@
+type $$ComponentProps = {
+    previewOnHover?: boolean;
+    previewDelay?: number;
+    previewDismissDelay?: number;
+    stickyOnly?: boolean;
+    external?: boolean;
+    mixed?: boolean;
+    mode?: "fixed" | "auto" | "compact";
+};
+declare const ColumnCanvasFixedDemo: import("svelte").Component<$$ComponentProps, {}, "">;
+type ColumnCanvasFixedDemo = ReturnType<typeof ColumnCanvasFixedDemo>;
+export default ColumnCanvasFixedDemo;

package/dist/shared/shadcn/column-canvas/column-canvas-header-actions.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import type { WithElementRef } from "../../../lib/utils.js";
+  import { useColumnCanvasColumn } from "./column-canvas-column-context.svelte.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    children?: Snippet;
+  } = $props();
+
+  useColumnCanvasColumn();
+</script>
+
+<div
+  bind:this={ref}
+  {...restProps}
+  class={className}
+  data-ui-component="column-canvas"
+  data-ui-part="column-header-actions"
+>
+  {@render children?.()}
+</div>

package/dist/shared/shadcn/column-canvas/column-canvas-header-actions.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { WithElementRef } from "../../../lib/utils.js";
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+    children?: Snippet;
+};
+declare const ColumnCanvasHeaderActions: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type ColumnCanvasHeaderActions = ReturnType<typeof ColumnCanvasHeaderActions>;
+export default ColumnCanvasHeaderActions;

package/dist/shared/shadcn/column-canvas/column-canvas-header.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import type { WithElementRef } from "../../../lib/utils.js";
+  import { useColumnCanvasColumn } from "./column-canvas-column-context.svelte.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLElement>, HTMLElement> & {
+    children?: Snippet;
+  } = $props();
+
+  useColumnCanvasColumn();
+</script>
+
+<header
+  bind:this={ref}
+  {...restProps}
+  class={className}
+  data-ui-component="column-canvas"
+  data-ui-part="column-header"
+>
+  {@render children?.()}
+</header>

package/dist/shared/shadcn/column-canvas/column-canvas-header.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import type { WithElementRef } from "../../../lib/utils.js";
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLElement>, HTMLElement> & {
+    children?: Snippet;
+};
+declare const ColumnCanvasHeader: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type ColumnCanvasHeader = ReturnType<typeof ColumnCanvasHeader>;
+export default ColumnCanvasHeader;

package/dist/shared/shadcn/column-canvas/column-canvas-item.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLButtonAttributes } from "svelte/elements";
+  import type { WithElementRef } from "../../../lib/utils.js";
+
+  let {
+    ref = $bindable(null),
+    selected = false,
+    disabled = false,
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLButtonAttributes> & {
+    /** Marks the row as the active selection in this column. */
+    selected?: boolean;
+    children?: Snippet;
+  } = $props();
+</script>
+
+<button
+  bind:this={ref}
+  type="button"
+  {...restProps}
+  class={className}
+  {disabled}
+  data-ui-component="column-canvas"
+  data-ui-part="column-item"
+  data-selected={selected ? "true" : undefined}
+  aria-pressed={selected}
+>
+  {@render children?.()}
+</button>

package/dist/shared/shadcn/column-canvas/column-canvas-item.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+import type { WithElementRef } from "../../../lib/utils.js";
+type $$ComponentProps = WithElementRef<HTMLButtonAttributes> & {
+    /** Marks the row as the active selection in this column. */
+    selected?: boolean;
+    children?: Snippet;
+};
+declare const ColumnCanvasItem: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type ColumnCanvasItem = ReturnType<typeof ColumnCanvasItem>;
+export default ColumnCanvasItem;

package/dist/shared/shadcn/column-canvas/column-canvas-layout.d.ts

@@ -0,0 +1,24 @@
+export type ColumnCanvasWidthBounds = {
+    preferredWidth: number;
+    minWidth: number;
+    /** Maximum width, or `null` when the column is unbounded. */
+    maxWidth: number | null;
+};
+export type ColumnCanvasPairAllocation = {
+    leadingWidth: number;
+    trailingWidth: number;
+    usedWidth: number;
+    /** Width beyond the available stage when minimums cannot fit. */
+    overflow: number;
+    /** Unused stage width when finite maximums cannot fill it. */
+    slack: number;
+    leadingFraction: number;
+};
+/**
+ * Allocate a bounded adjacent pair without changing its shared stage width.
+ * The preferred ratio is used when no persisted ratio exists. Minimum overflow
+ * and finite-maximum slack are intentional and reported to the caller.
+ */
+export declare function allocateColumnCanvasPair(availableWidth: number, leading: ColumnCanvasWidthBounds, trailing: ColumnCanvasWidthBounds, leadingFraction?: number): ColumnCanvasPairAllocation;
+/** Fill a single-member stage while respecting the column's own bounds. */
+export declare function allocateColumnCanvasWidth(availableWidth: number, bounds: ColumnCanvasWidthBounds): number;

package/dist/shared/shadcn/column-canvas/column-canvas-layout.js

@@ -0,0 +1,73 @@
+/**
+ * Allocate a bounded adjacent pair without changing its shared stage width.
+ * The preferred ratio is used when no persisted ratio exists. Minimum overflow
+ * and finite-maximum slack are intentional and reported to the caller.
+ */
+export function allocateColumnCanvasPair(availableWidth, leading, trailing, leadingFraction) {
+    const available = finiteNonNegative(availableWidth);
+    const leadingBounds = normalizeBounds(leading);
+    const trailingBounds = normalizeBounds(trailing);
+    const ratio = normalizeFraction(leadingFraction, preferredFraction(leadingBounds, trailingBounds));
+    const minimumTotal = leadingBounds.minWidth + trailingBounds.minWidth;
+    if (minimumTotal > available) {
+        return allocation(leadingBounds.minWidth, trailingBounds.minWidth, available);
+    }
+    const maximumTotal = addMaximums(leadingBounds.maxWidth, trailingBounds.maxWidth);
+    if (maximumTotal !== null && maximumTotal < available) {
+        return allocation(leadingBounds.maxWidth ?? leadingBounds.minWidth, trailingBounds.maxWidth ?? trailingBounds.minWidth, available);
+    }
+    const lowerLeading = Math.max(leadingBounds.minWidth, trailingBounds.maxWidth === null ? 0 : available - trailingBounds.maxWidth);
+    const upperLeading = Math.min(leadingBounds.maxWidth ?? available, available - trailingBounds.minWidth);
+    const leadingWidth = clamp(available * ratio, lowerLeading, upperLeading);
+    return allocation(leadingWidth, available - leadingWidth, available);
+}
+/** Fill a single-member stage while respecting the column's own bounds. */
+export function allocateColumnCanvasWidth(availableWidth, bounds) {
+    const available = finiteNonNegative(availableWidth);
+    const normalized = normalizeBounds(bounds);
+    return clamp(available, normalized.minWidth, normalized.maxWidth ?? Number.POSITIVE_INFINITY);
+}
+function allocation(leadingWidth, trailingWidth, availableWidth) {
+    const usedWidth = leadingWidth + trailingWidth;
+    return {
+        leadingWidth,
+        trailingWidth,
+        usedWidth,
+        overflow: Math.max(0, usedWidth - availableWidth),
+        slack: Math.max(0, availableWidth - usedWidth),
+        leadingFraction: usedWidth > 0 ? leadingWidth / usedWidth : 0.5,
+    };
+}
+function normalizeBounds(bounds) {
+    const minWidth = finiteNonNegative(bounds.minWidth);
+    const maxWidth = bounds.maxWidth === null
+        ? null
+        : Math.max(minWidth, finiteNonNegative(bounds.maxWidth));
+    return {
+        minWidth,
+        maxWidth,
+        preferredWidth: clamp(finiteNonNegative(bounds.preferredWidth), minWidth, maxWidth ?? Number.POSITIVE_INFINITY),
+    };
+}
+function preferredFraction(leading, trailing) {
+    const total = leading.preferredWidth + trailing.preferredWidth;
+    return total > 0 ? leading.preferredWidth / total : 0.5;
+}
+function normalizeFraction(value, fallback) {
+    if (!Number.isFinite(value) ||
+        value === undefined ||
+        value <= 0 ||
+        value >= 1) {
+        return fallback;
+    }
+    return value;
+}
+function addMaximums(leading, trailing) {
+    return leading === null || trailing === null ? null : leading + trailing;
+}
+function finiteNonNegative(value) {
+    return Number.isFinite(value) ? Math.max(0, value) : 0;
+}
+function clamp(value, minimum, maximum) {
+    return Math.min(maximum, Math.max(minimum, value));
+}

package/dist/shared/shadcn/column-canvas/column-canvas-persistence.d.ts

@@ -0,0 +1,51 @@
+export declare const COLUMN_CANVAS_LAYOUT_VERSION: 2;
+export declare const COLUMN_CANVAS_LAYOUT_V1_VERSION: 1;
+export declare const COLUMN_CANVAS_DEFAULT_STORAGE_KEY = "@lapismd/design-core/column-canvas-layout";
+export interface ColumnCanvasColumnLayout {
+    collapsed: boolean;
+    /** When omitted (older snapshots), treated as open. */
+    closed?: boolean;
+    width?: number;
+}
+export interface ColumnCanvasLayoutV1 {
+    version: typeof COLUMN_CANVAS_LAYOUT_V1_VERSION;
+    columns: Record<string, ColumnCanvasColumnLayout>;
+}
+export interface ColumnCanvasPairSplit {
+    leadingColumnId: string;
+    trailingColumnId: string;
+    /** Leading-column share of the pair's available width, from 0 to 1. */
+    leadingFraction: number;
+}
+export interface ColumnCanvasLayoutV2 {
+    version: typeof COLUMN_CANVAS_LAYOUT_VERSION;
+    columns: Record<string, ColumnCanvasColumnLayout>;
+    pairSplits: ColumnCanvasPairSplit[];
+}
+export type ColumnCanvasLayout = ColumnCanvasLayoutV2;
+export interface NormalizedColumnCanvasLayout {
+    columns: Map<string, ColumnCanvasColumnLayout>;
+    pairSplits: ColumnCanvasPairSplit[];
+}
+export type ColumnCanvasLayoutChangeSource = "collapse" | "close" | "resize" | "resize-pair" | "reset-pair" | "reset-width" | "register" | "ensure";
+export interface ColumnCanvasLayoutChangeEvent {
+    source: ColumnCanvasLayoutChangeSource;
+    columnId: string;
+    /** The other member affected by a paired resize or reset. */
+    relatedColumnId?: string;
+}
+export interface ColumnCanvasLayoutPersistence {
+    load(): Promise<unknown | null>;
+    save(layout: ColumnCanvasLayout, event: ColumnCanvasLayoutChangeEvent): Promise<void>;
+}
+export interface ColumnCanvasPersistenceErrorEvent {
+    operation: "load" | "save";
+    error: unknown;
+}
+/**
+ * Browser storage adapter for Column Canvas layout (widths + collapse).
+ * Pass a Storage implementation in tests or non-window contexts.
+ */
+export declare function createLocalStorageColumnCanvasLayoutPersistence(key?: string, storage?: Storage): ColumnCanvasLayoutPersistence;
+export declare function normalizeColumnCanvasLayout(value: unknown): NormalizedColumnCanvasLayout;
+export declare function pairSplitKey(leadingColumnId: string, trailingColumnId: string): string;

package/dist/shared/shadcn/column-canvas/column-canvas-persistence.js

@@ -0,0 +1,82 @@
+export const COLUMN_CANVAS_LAYOUT_VERSION = 2;
+export const COLUMN_CANVAS_LAYOUT_V1_VERSION = 1;
+export const COLUMN_CANVAS_DEFAULT_STORAGE_KEY = "@lapismd/design-core/column-canvas-layout";
+/**
+ * Browser storage adapter for Column Canvas layout (widths + collapse).
+ * Pass a Storage implementation in tests or non-window contexts.
+ */
+export function createLocalStorageColumnCanvasLayoutPersistence(key = COLUMN_CANVAS_DEFAULT_STORAGE_KEY, storage) {
+    const resolveStorage = () => {
+        const resolved = storage ?? globalThis.localStorage;
+        if (!resolved) {
+            throw new Error("Column Canvas localStorage is not available.");
+        }
+        return resolved;
+    };
+    return {
+        async load() {
+            const value = resolveStorage().getItem(key);
+            return value ? JSON.parse(value) : null;
+        },
+        async save(layout) {
+            resolveStorage().setItem(key, JSON.stringify(layout));
+        },
+    };
+}
+export function normalizeColumnCanvasLayout(value) {
+    const columns = new Map();
+    const pairSplits = [];
+    if (!isRecord(value) ||
+        (value.version !== COLUMN_CANVAS_LAYOUT_VERSION &&
+            value.version !== COLUMN_CANVAS_LAYOUT_V1_VERSION)) {
+        return { columns, pairSplits };
+    }
+    if (!isRecord(value.columns))
+        return { columns, pairSplits };
+    for (const [id, column] of Object.entries(value.columns)) {
+        if (!id || !isRecord(column) || typeof column.collapsed !== "boolean") {
+            continue;
+        }
+        columns.set(id, {
+            collapsed: column.collapsed,
+            ...(typeof column.closed === "boolean" ? { closed: column.closed } : {}),
+            ...(typeof column.width === "number" && Number.isFinite(column.width)
+                ? { width: column.width }
+                : {}),
+        });
+    }
+    if (value.version === COLUMN_CANVAS_LAYOUT_VERSION &&
+        Array.isArray(value.pairSplits)) {
+        const seen = new Set();
+        for (const split of value.pairSplits) {
+            if (!isRecord(split) ||
+                typeof split.leadingColumnId !== "string" ||
+                !split.leadingColumnId ||
+                typeof split.trailingColumnId !== "string" ||
+                !split.trailingColumnId ||
+                split.leadingColumnId === split.trailingColumnId ||
+                typeof split.leadingFraction !== "number" ||
+                !Number.isFinite(split.leadingFraction) ||
+                split.leadingFraction <= 0 ||
+                split.leadingFraction >= 1) {
+                continue;
+            }
+            const key = pairSplitKey(split.leadingColumnId, split.trailingColumnId);
+            if (seen.has(key))
+                continue;
+            seen.add(key);
+            pairSplits.push({
+                leadingColumnId: split.leadingColumnId,
+                trailingColumnId: split.trailingColumnId,
+                leadingFraction: split.leadingFraction,
+            });
+        }
+    }
+    return { columns, pairSplits };
+}
+export function pairSplitKey(leadingColumnId, trailingColumnId) {
+    return JSON.stringify([leadingColumnId, trailingColumnId]);
+}
+function isRecord(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+}

package/dist/shared/shadcn/column-canvas/column-canvas-pinning.d.ts

@@ -0,0 +1,31 @@
+import type { ColumnCanvasResolvedDisplayMode } from "./column-canvas-types.js";
+/** Measured visible columns, in DOM order. Closed/path-hidden columns are omitted. */
+export type PinningColumn = {
+    id: string;
+    kind: "fixed" | "sticky" | null;
+    expanded: boolean;
+    width: number;
+    minWidth: number;
+    marginStart: number;
+    marginEnd: number;
+};
+export type PinningSlot = {
+    id: string;
+    kind: "fixed" | "sticky";
+    offset: number;
+    width: number;
+};
+export type PinningLayout = {
+    slots: PinningSlot[];
+    extent: number;
+    prefixLength: number;
+};
+/** Choose the longest leading pin group that leaves a usable scrolling stage. */
+export declare function resolveColumnCanvasPinning(columns: readonly PinningColumn[], options: {
+    mode: ColumnCanvasResolvedDisplayMode;
+    availableWidth: number;
+    gap: number;
+    railWidth: number;
+    contextWidth: number;
+    activePairLeadingId: string | null;
+}): PinningLayout;

package/dist/shared/shadcn/column-canvas/column-canvas-pinning.js

@@ -0,0 +1,65 @@
+/** Choose the longest leading pin group that leaves a usable scrolling stage. */
+export function resolveColumnCanvasPinning(columns, options) {
+    const empty = { slots: [], extent: 0, prefixLength: 0 };
+    if (options.mode === "compact")
+        return empty;
+    let end = columns.findIndex((column) => column.kind === null);
+    if (end < 0)
+        end = columns.length;
+    while (end > 0) {
+        const slots = [];
+        let extent = 0;
+        for (const [index, column] of columns.slice(0, end).entries()) {
+            const fixed = column.kind === "fixed";
+            if (index && (fixed || slots[index - 1].kind === "fixed"))
+                extent += options.gap;
+            if (fixed)
+                extent += column.marginStart;
+            const width = fixed || !column.expanded
+                ? column.width
+                : Math.min(column.width, options.railWidth);
+            slots.push({ id: column.id, kind: column.kind, offset: extent, width });
+            extent += width + (fixed ? column.marginEnd : 0);
+        }
+        const lastFixed = slots.map((slot) => slot.kind).lastIndexOf("fixed");
+        // Legacy sticky-only canvases keep their existing rail and allocation contract.
+        if (lastFixed < 0)
+            return { slots, extent, prefixLength: end };
+        const remaining = columns.slice(end);
+        const reserve = scrollingMinimum(remaining, options);
+        const separatingGap = remaining.length ? options.gap : 0;
+        if (extent + separatingGap + reserve <= options.availableWidth)
+            return { slots, extent, prefixLength: end };
+        // This fixed column and subsequent pins flow normally until capacity returns.
+        end = lastFixed;
+    }
+    return empty;
+}
+function scrollingMinimum(columns, options) {
+    const outer = (column) => (column.expanded ? column.minWidth : column.width) +
+        column.marginStart +
+        column.marginEnd;
+    if (options.mode === "fixed")
+        return Math.max(0, ...columns.map(outer));
+    const expanded = columns.filter((column) => column.expanded);
+    if (!expanded.length)
+        return (columns.reduce((sum, column) => sum + outer(column), 0) +
+            Math.max(0, columns.length - 1) * options.gap);
+    const requested = expanded.findIndex((column) => column.id === options.activePairLeadingId);
+    const start = requested >= 0 && requested < expanded.length - 1
+        ? requested
+        : Math.max(0, expanded.length - 2);
+    const pair = expanded.slice(start, start + 2);
+    const context = expanded[start - 1];
+    const stage = columns.slice(columns.indexOf(context ?? pair[0]));
+    return (pair.reduce((sum, column) => sum + outer(column), 0) +
+        (context
+            ? Math.min(options.contextWidth, context.width) +
+                context.marginStart +
+                context.marginEnd
+            : 0) +
+        stage
+            .filter((column) => !column.expanded)
+            .reduce((sum, column) => sum + outer(column), 0) +
+        Math.max(0, stage.length - 1) * options.gap);
+}

package/dist/shared/shadcn/column-canvas/column-canvas-title.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import type { WithElementRef } from "../../../lib/utils.js";
+  import { useColumnCanvasColumn } from "./column-canvas-column-context.svelte.js";
+
+  let {
+    ref = $bindable(null),
+    class: className,
+    children,
+    ...restProps
+  }: WithElementRef<HTMLAttributes<HTMLSpanElement>> & {
+    children?: Snippet;
+  } = $props();
+
+  const column = useColumnCanvasColumn();
+</script>
+
+<span
+  bind:this={ref}
+  {...restProps}
+  class={className}
+  data-ui-component="column-canvas"
+  data-ui-part="column-title"
+>
+  {#if children}
+    {@render children()}
+  {:else}
+    {column.title}
+  {/if}
+</span>