@urbicon-ui/blocks 6.35.0 → 6.37.0

package/dist/components/TimeInput/time-input.variants.d.ts

@@ -0,0 +1,131 @@
+import { type SlotNames, type VariantProps } from '../../utils/variants.js';
+export declare const timeInputVariants: ((props?: {
+    tier?: "commit" | "modify" | undefined;
+    variant?: "ghost" | "filled" | "outlined" | undefined;
+    size?: "sm" | "md" | "lg" | undefined;
+    intent?: "default" | "success" | "warning" | "danger" | undefined;
+    disabled?: boolean | undefined;
+    readonly?: boolean | undefined;
+    messageType?: "error" | "helper" | undefined;
+    error?: boolean | undefined;
+    required?: boolean | undefined;
+    fullWidth?: boolean | undefined;
+} | undefined) => {
+    wrapper: (props?: ({
+        tier?: "commit" | "modify" | undefined;
+        variant?: "ghost" | "filled" | "outlined" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        intent?: "default" | "success" | "warning" | "danger" | undefined;
+        disabled?: boolean | undefined;
+        readonly?: boolean | undefined;
+        messageType?: "error" | "helper" | undefined;
+        error?: boolean | undefined;
+        required?: boolean | undefined;
+        fullWidth?: boolean | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    label: (props?: ({
+        tier?: "commit" | "modify" | undefined;
+        variant?: "ghost" | "filled" | "outlined" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        intent?: "default" | "success" | "warning" | "danger" | undefined;
+        disabled?: boolean | undefined;
+        readonly?: boolean | undefined;
+        messageType?: "error" | "helper" | undefined;
+        error?: boolean | undefined;
+        required?: boolean | undefined;
+        fullWidth?: boolean | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    field: (props?: ({
+        tier?: "commit" | "modify" | undefined;
+        variant?: "ghost" | "filled" | "outlined" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        intent?: "default" | "success" | "warning" | "danger" | undefined;
+        disabled?: boolean | undefined;
+        readonly?: boolean | undefined;
+        messageType?: "error" | "helper" | undefined;
+        error?: boolean | undefined;
+        required?: boolean | undefined;
+        fullWidth?: boolean | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    icon: (props?: ({
+        tier?: "commit" | "modify" | undefined;
+        variant?: "ghost" | "filled" | "outlined" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        intent?: "default" | "success" | "warning" | "danger" | undefined;
+        disabled?: boolean | undefined;
+        readonly?: boolean | undefined;
+        messageType?: "error" | "helper" | undefined;
+        error?: boolean | undefined;
+        required?: boolean | undefined;
+        fullWidth?: boolean | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    segment: (props?: ({
+        tier?: "commit" | "modify" | undefined;
+        variant?: "ghost" | "filled" | "outlined" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        intent?: "default" | "success" | "warning" | "danger" | undefined;
+        disabled?: boolean | undefined;
+        readonly?: boolean | undefined;
+        messageType?: "error" | "helper" | undefined;
+        error?: boolean | undefined;
+        required?: boolean | undefined;
+        fullWidth?: boolean | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    separator: (props?: ({
+        tier?: "commit" | "modify" | undefined;
+        variant?: "ghost" | "filled" | "outlined" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        intent?: "default" | "success" | "warning" | "danger" | undefined;
+        disabled?: boolean | undefined;
+        readonly?: boolean | undefined;
+        messageType?: "error" | "helper" | undefined;
+        error?: boolean | undefined;
+        required?: boolean | undefined;
+        fullWidth?: boolean | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    meridiem: (props?: ({
+        tier?: "commit" | "modify" | undefined;
+        variant?: "ghost" | "filled" | "outlined" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        intent?: "default" | "success" | "warning" | "danger" | undefined;
+        disabled?: boolean | undefined;
+        readonly?: boolean | undefined;
+        messageType?: "error" | "helper" | undefined;
+        error?: boolean | undefined;
+        required?: boolean | undefined;
+        fullWidth?: boolean | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    message: (props?: ({
+        tier?: "commit" | "modify" | undefined;
+        variant?: "ghost" | "filled" | "outlined" | undefined;
+        size?: "sm" | "md" | "lg" | undefined;
+        intent?: "default" | "success" | "warning" | "danger" | undefined;
+        disabled?: boolean | undefined;
+        readonly?: boolean | undefined;
+        messageType?: "error" | "helper" | undefined;
+        error?: boolean | undefined;
+        required?: boolean | undefined;
+        fullWidth?: boolean | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+}) & {
+    readonly config: import("../../utils/variants.js").TVConfig;
+};
+export type TimeInputVariants = VariantProps<typeof timeInputVariants>;
+/** Slot names derived from the `tv()` config above — single source of truth for `slotClasses`. */
+export type TimeInputSlots = SlotNames<typeof timeInputVariants>;

package/dist/components/TimeInput/time-input.variants.js

@@ -0,0 +1,120 @@
+import { tv } from '../../utils/variants.js';
+export const timeInputVariants = tv({
+    slots: {
+        wrapper: ['flex flex-col gap-1.5 w-full'],
+        label: ['block font-medium text-text-secondary text-sm'],
+        // The bordered container reads as a single field; the segment inputs inside
+        // are borderless. The focus ring lives here via focus-within so tabbing
+        // between segments keeps the whole field lit.
+        field: [
+            'inline-flex items-center box-border w-fit',
+            'border text-text-primary bg-surface-base',
+            'transition-[color,background-color,border-color,box-shadow] duration-[var(--blocks-duration-fast)] ease-out',
+            'hover:border-border-default',
+            'focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20'
+        ],
+        icon: ['pointer-events-none inline-flex items-center justify-center text-text-tertiary'],
+        segment: [
+            'bg-transparent text-center tabular-nums text-text-primary caret-transparent',
+            'border-0 outline-none p-0 rounded-sm',
+            'focus-visible:bg-primary-subtle',
+            'placeholder:text-text-quaternary',
+            'disabled:cursor-not-allowed'
+        ],
+        separator: ['text-text-tertiary select-none'],
+        meridiem: [
+            'ml-1 font-medium text-text-secondary rounded-sm cursor-pointer select-none',
+            'hover:bg-surface-hover focus-visible:outline-none focus-visible:bg-primary-subtle',
+            'disabled:cursor-not-allowed disabled:opacity-50'
+        ],
+        message: ['text-xs']
+    },
+    variants: {
+        // 3-tier semantic radius, default `modify` (soft field). Inherited from a
+        // wrapping <Toolbar tier="commit"> via TierContext.
+        tier: {
+            modify: { field: 'rounded-modify' },
+            commit: { field: 'rounded-commit' }
+        },
+        variant: {
+            outlined: { field: 'border-border-subtle' },
+            filled: {
+                field: 'bg-surface-interactive border-transparent hover:bg-surface-hover focus-within:bg-surface-base'
+            },
+            ghost: {
+                field: 'bg-transparent hover:bg-surface-subtle focus-within:bg-surface-base focus-within:border-border-subtle'
+            }
+        },
+        size: {
+            sm: {
+                // `pointer-coarse:text-base` floors to 16px on touch to avoid iOS zoom.
+                field: 'h-8 px-2 gap-0.5 text-sm pointer-coarse:text-base',
+                segment: 'w-[2ch] text-sm pointer-coarse:text-base',
+                icon: 'mr-1.5 [&_svg]:w-3.5 [&_svg]:h-3.5',
+                meridiem: 'px-1 text-sm pointer-coarse:text-base'
+            },
+            md: {
+                field: 'h-10 px-3 gap-0.5 text-base',
+                segment: 'w-[2ch] text-base',
+                icon: 'mr-2 [&_svg]:w-4 [&_svg]:h-4',
+                meridiem: 'px-1 text-base'
+            },
+            lg: {
+                field: 'h-12 px-4 gap-1 text-lg',
+                segment: 'w-[2ch] text-lg',
+                icon: 'mr-2.5 [&_svg]:w-5 [&_svg]:h-5',
+                meridiem: 'px-1.5 text-lg'
+            }
+        },
+        intent: {
+            default: {},
+            success: { field: 'border-success focus-within:border-success focus-within:ring-success/20' },
+            warning: { field: 'border-warning focus-within:border-warning focus-within:ring-warning/20' },
+            danger: { field: 'border-danger focus-within:border-danger focus-within:ring-danger/20' }
+        },
+        disabled: {
+            true: {
+                field: 'opacity-50 cursor-not-allowed bg-surface-disabled pointer-events-none',
+                label: 'text-text-disabled'
+            }
+        },
+        readonly: {
+            true: { field: 'bg-surface-subtle' }
+        },
+        messageType: {
+            error: { message: 'text-danger' },
+            helper: { message: 'text-text-tertiary' }
+        },
+        error: {
+            true: {
+                field: 'border-danger focus-within:border-danger focus-within:ring-danger/20',
+                message: 'text-danger'
+            }
+        },
+        required: {
+            true: { label: "after:content-['*'] after:ml-1 after:text-danger" }
+        },
+        fullWidth: {
+            true: { field: 'w-full justify-start' }
+        }
+    },
+    compoundVariants: [
+        {
+            variant: 'ghost',
+            error: false,
+            class: { field: 'border-transparent' }
+        }
+    ],
+    defaultVariants: {
+        tier: 'modify',
+        variant: 'outlined',
+        size: 'md',
+        intent: 'default',
+        disabled: false,
+        readonly: false,
+        error: false,
+        required: false,
+        fullWidth: false,
+        messageType: 'helper'
+    }
+});

package/dist/components/index.d.ts

@@ -6,6 +6,7 @@ export * from './BarChart/index.js';
 export type { CalendarContext, CalendarEvent, CalendarEventCategory, CalendarHeaderProps, CalendarProps, CalendarSelection, CalendarSlotName, CalendarViewMode, DateRange, DayCellContext, EventItemContext, HeaderContext } from './Calendar/index.js';
 export * from './Calendar/index.js';
 export * from './ChartFrame/index.js';
+export * from './Chat/index.js';
 export * from './CommandPalette/index.js';
 export type { CompositionBarIntent, CompositionBarProps, CompositionItem } from './CompositionBar/index.js';
 export * from './CompositionBar/index.js';
@@ -20,10 +21,16 @@ export type { LocaleSwitcherProps } from './LocaleSwitcher/index.js';
 export * from './LocaleSwitcher/index.js';
 export type { NumberInputProps } from './NumberInput/index.js';
 export * from './NumberInput/index.js';
+export type { PinInputProps } from './PinInput/index.js';
+export * from './PinInput/index.js';
 export type { PlannerCellContext, PlannerDayContext, PlannerHeaderContext, PlannerProps, PlannerRange, PlannerSlotName, PlannerView } from './Planner/index.js';
 export * from './Planner/index.js';
+export type { QRCodeProps } from './QRCode/index.js';
+export * from './QRCode/index.js';
 export type { SankeyIntent, SankeyLaidOutLinkWithMeta, SankeyLaidOutNodeWithMeta, SankeyLink, SankeyNode, SankeyProps } from './Sankey/index.js';
 export * from './Sankey/index.js';
 export * from './SidebarLayout/index.js';
 export * from './Sparkline/index.js';
 export * from './ThemeSwitcher/index.js';
+export type { TimeInputProps } from './TimeInput/index.js';
+export * from './TimeInput/index.js';

package/dist/components/index.js

@@ -5,6 +5,7 @@ export * from './AreaChart/index.js';
 export * from './BarChart/index.js';
 export * from './Calendar/index.js';
 export * from './ChartFrame/index.js';
+export * from './Chat/index.js';
 export * from './CommandPalette/index.js';
 export * from './CompositionBar/index.js';
 export * from './CurrencyInput/index.js';
@@ -16,8 +17,11 @@ export * from './Guide/index.js';
 export * from './LineChart/index.js';
 export * from './LocaleSwitcher/index.js';
 export * from './NumberInput/index.js';
+export * from './PinInput/index.js';
 export * from './Planner/index.js';
+export * from './QRCode/index.js';
 export * from './Sankey/index.js';
 export * from './SidebarLayout/index.js';
 export * from './Sparkline/index.js';
 export * from './ThemeSwitcher/index.js';
+export * from './TimeInput/index.js';

package/dist/i18n/index.d.ts

@@ -68,8 +68,14 @@ export declare const blocksI18n: import("@urbicon-ui/i18n").PackageI18n<{
         readonly maximum: "Maximum";
         readonly minimum: "Minimum";
         readonly pagination: "Page navigation";
+        readonly pinInputCell: "Character {{index}} of {{total}}";
         readonly progress: "Progress";
+        readonly qrCode: "QR code";
         readonly slider: "Slider";
+        readonly timeHours: "Hours";
+        readonly timeMinutes: "Minutes";
+        readonly timeSeconds: "Seconds";
+        readonly timeMeridiem: "AM or PM";
         readonly toggle: "Toggle";
         readonly toggleOptions: "Toggle options";
         readonly removableBadge: "Removable badge";
@@ -271,8 +277,14 @@ export declare const useBlocksI18n: () => import("@urbicon-ui/i18n").TypedTransl
         readonly maximum: "Maximum";
         readonly minimum: "Minimum";
         readonly pagination: "Page navigation";
+        readonly pinInputCell: "Character {{index}} of {{total}}";
         readonly progress: "Progress";
+        readonly qrCode: "QR code";
         readonly slider: "Slider";
+        readonly timeHours: "Hours";
+        readonly timeMinutes: "Minutes";
+        readonly timeSeconds: "Seconds";
+        readonly timeMeridiem: "AM or PM";
         readonly toggle: "Toggle";
         readonly toggleOptions: "Toggle options";
         readonly removableBadge: "Removable badge";
@@ -483,8 +495,14 @@ declare const blocksTranslations: {
             readonly maximum: "Maximum";
             readonly minimum: "Minimum";
             readonly pagination: "Page navigation";
+            readonly pinInputCell: "Character {{index}} of {{total}}";
             readonly progress: "Progress";
+            readonly qrCode: "QR code";
             readonly slider: "Slider";
+            readonly timeHours: "Hours";
+            readonly timeMinutes: "Minutes";
+            readonly timeSeconds: "Seconds";
+            readonly timeMeridiem: "AM or PM";
             readonly toggle: "Toggle";
             readonly toggleOptions: "Toggle options";
             readonly removableBadge: "Removable badge";

package/dist/primitives/Collapsible/Collapsible.svelte

@@ -109,10 +109,15 @@
     </button>
   {/if}
 
+  <!-- `inert` while collapsed (Popover's pattern): the clipped children stay
+       mounted for the grid-rows animation, so without it a keyboard user tabs
+       into invisible controls (e.g. a CodeBlock copy button inside a collapsed
+       ToolCallCard — WCAG 2.4.3/2.4.7) and the subtree stays in the a11y tree. -->
   <div
     id={contentId}
     role="region"
     aria-labelledby={triggerId}
+    inert={!isOpen}
     class={unstyled
       ? (slotClasses?.content ?? '')
       : styles.content({ class: slotClasses?.content })}

package/dist/primitives/SplitPane/SplitPane.svelte

@@ -0,0 +1,293 @@
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import { mintRegistry } from '../../mint';
+  import { getBlocksConfig, resolveSlotClasses } from '../../provider';
+  import type { SplitPaneProps } from './index';
+  import { clampRatio, parseLimit, ratioFromPointer, resolveDragRatio } from './split-pane.utils';
+  import { splitPaneVariants, type SplitPaneVariants } from './split-pane.variants';
+
+  let {
+    start,
+    end,
+    handle,
+    orientation = 'horizontal',
+    defaultRatio = 0.5,
+    ratio = $bindable(defaultRatio),
+    min = '10%',
+    max = '90%',
+    collapsible = false,
+    collapseThreshold = 48,
+    disabled = false,
+    onRatioChange,
+    onCollapsedChange,
+    handleLabel = 'Resize panes',
+    mint = 'none',
+    class: className = '',
+    unstyled: unstyledProp = false,
+    slotClasses: slotClassesProp = {},
+    preset,
+    ...restProps
+  }: SplitPaneProps = $props();
+
+  const blocksConfig = getBlocksConfig();
+  const unstyled = $derived(unstyledProp || blocksConfig?.unstyled || false);
+
+  // aria-controls needs a stable id for the first pane. `$props.id()` must be a
+  // top-level initializer (compiler rule) — SplitPane has no `id` prop, so the
+  // single-step form is enough.
+  const propsId = $props.id();
+  const startPaneId = `splitpane-${propsId}-start`;
+
+  // Slider performs NO right-to-left inversion in its pointer/keyboard handling
+  // (physical coordinates, ArrowRight = increase). SplitPane mirrors that role
+  // model exactly, so `rtl` stays false here. The geometry util still accepts an
+  // `rtl` flag (and is unit-tested for it) so a future house-wide RTL pass has
+  // one seam to wire — see the primitive's open issues.
+  const rtl = false;
+
+  let rootRef = $state<HTMLDivElement>();
+  let handleRef = $state<HTMLDivElement>();
+  let dragging = $state(false);
+  // Collapsed is DERIVED from the bindable ratio, never tracked separately —
+  // an external `bind:ratio` write must move this flag too, or the Enter
+  // toggle acts on stale state (review finding, P1 wave).
+  const collapsed = $derived(collapsible && ratio <= 0);
+  // Remembers the ratio to restore when re-expanding via Enter. Seeded once
+  // from the initial defaultRatio — `untrack` marks the one-time snapshot so it
+  // does not read as a missed reactive dependency.
+  let lastExpandedRatio = $state(untrack(() => defaultRatio));
+
+  // Keep the restore target fresh from every expanded ratio (interactive or
+  // consumer-driven), and fire onCollapsedChange on actual transitions of the
+  // derived flag — regardless of which side caused them.
+  let lastCollapsed = untrack(() => collapsed);
+  $effect(() => {
+    if (ratio > 0) lastExpandedRatio = ratio;
+  });
+  $effect(() => {
+    if (collapsed !== lastCollapsed) {
+      lastCollapsed = collapsed;
+      onCollapsedChange?.(collapsed);
+    }
+  });
+  // Last measured container size on the active axis — feeds px-limit resolution
+  // and the aria-value* bounds. Kept fresh via a ResizeObserver (no-op in jsdom).
+  let measuredPx = $state(0);
+
+  $effect(() => {
+    const el = rootRef;
+    if (!el) return;
+    const measure = () => {
+      const rect = el.getBoundingClientRect();
+      measuredPx = orientation === 'horizontal' ? rect.width : rect.height;
+    };
+    measure();
+    if (typeof ResizeObserver === 'undefined') return;
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  });
+
+  // mint is wired on the interactive element — the divider — exactly as Slider
+  // applies it to its track ref.
+  $effect(() => {
+    if (handleRef && mint && mint !== 'none' && !disabled) {
+      return mintRegistry.apply(handleRef, mint);
+    }
+  });
+
+  function containerSize(): number {
+    if (!rootRef) return measuredPx;
+    const rect = rootRef.getBoundingClientRect();
+    const px = orientation === 'horizontal' ? rect.width : rect.height;
+    if (px > 0) measuredPx = px;
+    return px > 0 ? px : measuredPx;
+  }
+
+  function emitRatio(next: number) {
+    if (next !== ratio) {
+      ratio = next;
+      onRatioChange?.(next);
+    }
+  }
+
+  // ─── Pointer drag ────────────────────────────────────────────────────────
+  // setPointerCapture routes every subsequent pointer event to the divider, so
+  // move/up listeners live on the divider itself — no window listeners, nothing
+  // to leak. Cancel restores the resting state.
+  function onHandlePointerDown(event: PointerEvent) {
+    if (disabled) return;
+    event.preventDefault();
+    handleRef?.focus();
+    handleRef?.setPointerCapture?.(event.pointerId);
+    dragging = true;
+  }
+
+  function onHandlePointerMove(event: PointerEvent) {
+    if (!dragging || disabled || !rootRef) return;
+    const rect = rootRef.getBoundingClientRect();
+    const px = orientation === 'horizontal' ? rect.width : rect.height;
+    if (px > 0) measuredPx = px;
+    const clientPos = orientation === 'horizontal' ? event.clientX : event.clientY;
+    const raw = ratioFromPointer(clientPos, rect, orientation, rtl);
+    const resolved = resolveDragRatio(
+      raw,
+      px,
+      { min, max, collapsible, collapseThreshold },
+      collapsed
+    );
+    emitRatio(resolved.ratio);
+  }
+
+  function endDrag(event: PointerEvent) {
+    if (!dragging) return;
+    handleRef?.releasePointerCapture?.(event.pointerId);
+    dragging = false;
+  }
+
+  function onHandleDblClick() {
+    if (disabled) return;
+    emitRatio(clampRatio(defaultRatio, min, max, containerSize()));
+  }
+
+  // ─── Keyboard ────────────────────────────────────────────────────────────
+  // Arrow keys map to the layout axis (horizontal → Left/Right, vertical →
+  // Up/Down): the "increase" key grows the first pane. ±2% default, ±10% with
+  // Shift; Home/End jump to the min/max limits. Enter follows the APG window
+  // splitter: with `collapsible` it toggles collapse, otherwise it restores
+  // defaultRatio — which also gives keyboard users the reset that double-click
+  // provides for pointers.
+  function onHandleKeydown(event: KeyboardEvent) {
+    if (disabled) return;
+
+    const px = containerSize();
+    const stepAmount = event.shiftKey ? 0.1 : 0.02;
+    const incKey = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown';
+    const decKey = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp';
+
+    switch (event.key) {
+      case incKey: {
+        event.preventDefault();
+        emitRatio(clampRatio(ratio + stepAmount, min, max, px));
+        return;
+      }
+      case decKey: {
+        event.preventDefault();
+        emitRatio(clampRatio(ratio - stepAmount, min, max, px));
+        return;
+      }
+      case 'Home': {
+        event.preventDefault();
+        emitRatio(parseLimit(min, px) ?? 0);
+        return;
+      }
+      case 'End': {
+        event.preventDefault();
+        emitRatio(parseLimit(max, px) ?? 1);
+        return;
+      }
+      case 'Enter': {
+        event.preventDefault();
+        if (!collapsible) {
+          emitRatio(clampRatio(defaultRatio, min, max, px));
+        } else if (collapsed) {
+          const restore = lastExpandedRatio > 0 ? lastExpandedRatio : defaultRatio;
+          emitRatio(clampRatio(restore, min, max, px));
+        } else {
+          emitRatio(0);
+        }
+        return;
+      }
+      default:
+        return;
+    }
+  }
+
+  const separatorOrientation = $derived(orientation === 'horizontal' ? 'vertical' : 'horizontal');
+
+  // The DISPLAYED ratio is always clamped into [min, max] (collapse being the
+  // one legitimate exception), so an out-of-window initial/controlled value or
+  // a container resize can never render the pane — or report aria-valuenow —
+  // outside the configured bounds. The bound `ratio` itself is left untouched
+  // (no write-backs from render state).
+  const effectiveRatio = $derived.by(() => {
+    const bounded = Math.max(0, Math.min(1, ratio));
+    if (collapsed) return 0;
+    return clampRatio(bounded, min, max, measuredPx);
+  });
+  const startBasisPct = $derived(effectiveRatio * 100);
+
+  const valueNow = $derived(Math.round(effectiveRatio * 100));
+  // With `collapsible`, 0 is a legitimate value of the separator's range —
+  // otherwise a collapsed pane would report valuenow below valuemin.
+  const valueMin = $derived(collapsible ? 0 : Math.round((parseLimit(min, measuredPx) ?? 0) * 100));
+  const valueMax = $derived(Math.round((parseLimit(max, measuredPx) ?? 1) * 100));
+
+  const variantProps: SplitPaneVariants = $derived({
+    orientation,
+    dragging: dragging || undefined,
+    disabled: disabled || undefined
+  });
+
+  const styles = $derived(splitPaneVariants(variantProps));
+  const slotClasses = $derived(
+    resolveSlotClasses(blocksConfig, 'SplitPane', preset, variantProps, slotClassesProp)
+  );
+</script>
+
+<div
+  {...restProps}
+  bind:this={rootRef}
+  class={unstyled
+    ? [slotClasses?.root, className].filter(Boolean).join(' ')
+    : styles.root({ class: [slotClasses?.root, className] })}
+  data-orientation={orientation}
+  data-dragging={dragging || undefined}
+  data-collapsed={collapsed || undefined}
+>
+  <div
+    id={startPaneId}
+    class={unstyled
+      ? (slotClasses?.startPane ?? '')
+      : styles.startPane({ class: slotClasses?.startPane })}
+    style="flex: 0 0 {startBasisPct}%"
+  >
+    {@render start()}
+  </div>
+
+  <!-- The divider is the ARIA "window splitter": role="separator" made focusable
+       (tabindex) with aria-value* + keyboard resize. Svelte's a11y rules treat
+       any separator as non-interactive; this pattern is the sanctioned exception. -->
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
+  <div
+    bind:this={handleRef}
+    role="separator"
+    tabindex={disabled ? -1 : 0}
+    aria-label={handleLabel}
+    aria-controls={startPaneId}
+    aria-orientation={separatorOrientation}
+    aria-valuenow={valueNow}
+    aria-valuemin={valueMin}
+    aria-valuemax={valueMax}
+    aria-disabled={disabled || undefined}
+    data-dragging={dragging || undefined}
+    class={unstyled ? (slotClasses?.handle ?? '') : styles.handle({ class: slotClasses?.handle })}
+    onpointerdown={onHandlePointerDown}
+    onpointermove={onHandlePointerMove}
+    onpointerup={endDrag}
+    onpointercancel={endDrag}
+    ondblclick={onHandleDblClick}
+    onkeydown={onHandleKeydown}
+  >
+    {@render handle?.()}
+  </div>
+
+  <div
+    class={unstyled
+      ? (slotClasses?.endPane ?? '')
+      : styles.endPane({ class: slotClasses?.endPane })}
+    style="flex: 1 1 0%"
+  >
+    {@render end()}
+  </div>
+</div>

package/dist/primitives/SplitPane/SplitPane.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { SplitPaneProps } from './index.js';
+declare const SplitPane: import("svelte").Component<SplitPaneProps, {}, "ratio">;
+type SplitPane = ReturnType<typeof SplitPane>;
+export default SplitPane;