@classic-homes/theme-svelte 1.38.0 → 1.39.0

package/dist/lib/components/Collapsible.svelte

@@ -0,0 +1,68 @@
+<!--
+  @component
+  A region that opens and closes from a trigger button (Bits UI Collapsible).
+  Pass `label` for a plain trigger with a chevron, or a `trigger` snippet for
+  custom trigger content (it receives `{ open }`; the button wraps it).
+-->
+<script lang="ts">
+  import { Collapsible as CollapsiblePrimitive } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils.js';
+  import Icon from './Icon.svelte';
+
+  interface Props {
+    /** Whether the content is shown (bindable) */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+    /** Trigger text; ignored when `trigger` is given */
+    label?: string;
+    /** Custom trigger content, rendered inside the trigger button */
+    trigger?: Snippet<[{ open: boolean }]>;
+    /** Show the chevron before the trigger content (default true) */
+    chevron?: boolean;
+    class?: string;
+    triggerClass?: string;
+    contentClass?: string;
+    children: Snippet;
+  }
+
+  let {
+    open = $bindable(false),
+    onOpenChange,
+    disabled = false,
+    label,
+    trigger,
+    chevron = true,
+    class: className,
+    triggerClass,
+    contentClass,
+    children,
+  }: Props = $props();
+</script>
+
+<CollapsiblePrimitive.Root bind:open {onOpenChange} {disabled} class={className}>
+  <CollapsiblePrimitive.Trigger
+    class={cn(
+      'group inline-flex items-center gap-1.5 rounded-md text-sm font-medium text-foreground hover:text-foreground/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+      triggerClass
+    )}
+  >
+    {#if chevron}
+      <Icon
+        name="chevron-right"
+        size={14}
+        class="shrink-0 transition-transform duration-200 group-data-[state=open]:rotate-90 motion-reduce:transition-none"
+      />
+    {/if}
+    {#if trigger}{@render trigger({ open })}{:else}{label}{/if}
+  </CollapsiblePrimitive.Trigger>
+  <CollapsiblePrimitive.Content
+    class={cn(
+      'overflow-hidden data-[state=open]:animate-collapsible-down data-[state=closed]:animate-collapsible-up motion-reduce:animate-none',
+      contentClass
+    )}
+  >
+    {@render children()}
+  </CollapsiblePrimitive.Content>
+</CollapsiblePrimitive.Root>

package/dist/lib/components/Collapsible.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Whether the content is shown (bindable) */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    disabled?: boolean;
+    /** Trigger text; ignored when `trigger` is given */
+    label?: string;
+    /** Custom trigger content, rendered inside the trigger button */
+    trigger?: Snippet<[{
+        open: boolean;
+    }]>;
+    /** Show the chevron before the trigger content (default true) */
+    chevron?: boolean;
+    class?: string;
+    triggerClass?: string;
+    contentClass?: string;
+    children: Snippet;
+}
+/**
+ * A region that opens and closes from a trigger button (Bits UI Collapsible).
+ * Pass `label` for a plain trigger with a chevron, or a `trigger` snippet for
+ * custom trigger content (it receives `{ open }`; the button wraps it).
+ */
+declare const Collapsible: import("svelte").Component<Props, {}, "open">;
+type Collapsible = ReturnType<typeof Collapsible>;
+export default Collapsible;

package/dist/lib/components/CopyButton.svelte

@@ -0,0 +1,101 @@
+<!--
+  @component
+  Copies text to the clipboard and confirms it: the icon turns into a check
+  and screen readers hear "Copied" for `timeout` ms. Icon-only by default
+  (with a tooltip); pass `children` for a labelled button.
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import Button from './Button.svelte';
+  import Icon from './Icon.svelte';
+  import Tooltip from './Tooltip.svelte';
+  import type { ButtonVariants } from './button-variants.js';
+
+  interface Props {
+    /** Text to copy, or a function returning it (read when clicked) */
+    value: string | (() => string | Promise<string>);
+    /** Accessible name and tooltip before copying (default "Copy") */
+    label?: string;
+    /** Accessible name, tooltip and announcement after copying (default "Copied") */
+    copiedLabel?: string;
+    /** How long the copied state lasts, in ms (default 2000) */
+    timeout?: number;
+    variant?: ButtonVariants['variant'];
+    size?: ButtonVariants['size'];
+    /** Show a tooltip on the icon-only button (default true) */
+    tooltip?: boolean;
+    disabled?: boolean;
+    class?: string;
+    /** Called after the text was written to the clipboard */
+    oncopy?: (text: string) => void;
+    /** Called when the clipboard is unavailable or the write was refused */
+    onerror?: (error: unknown) => void;
+    /** Visible label; omit for an icon-only button */
+    children?: Snippet;
+  }
+
+  let {
+    value,
+    label = 'Copy',
+    copiedLabel = 'Copied',
+    timeout = 2000,
+    variant = 'ghost',
+    size,
+    tooltip = true,
+    disabled = false,
+    class: className,
+    oncopy,
+    onerror,
+    children,
+  }: Props = $props();
+
+  let copied = $state(false);
+  let timer: ReturnType<typeof setTimeout> | undefined;
+  $effect(() => () => clearTimeout(timer));
+
+  async function copy() {
+    try {
+      const text = typeof value === 'function' ? await value() : value;
+      if (!navigator.clipboard?.writeText) throw new Error('Clipboard is not available');
+      await navigator.clipboard.writeText(text);
+      copied = true;
+      clearTimeout(timer);
+      timer = setTimeout(() => (copied = false), timeout);
+      oncopy?.(text);
+    } catch (error) {
+      onerror?.(error);
+    }
+  }
+
+  const name = $derived(copied ? copiedLabel : label);
+  const iconSize = $derived(size === 'sm' ? 14 : 16);
+</script>
+
+{#snippet button(props: Record<string, unknown> = {})}
+  <Button
+    {...props}
+    type="button"
+    {variant}
+    size={size ?? (children ? 'sm' : 'icon')}
+    {disabled}
+    class={className}
+    aria-label={children ? undefined : name}
+    data-copied={copied || undefined}
+    onclick={(e: MouseEvent) => {
+      (props.onclick as ((e: MouseEvent) => void) | undefined)?.(e);
+      void copy();
+    }}
+  >
+    <Icon name={copied ? 'check' : 'copy'} size={iconSize} />
+    {#if children}{@render children()}{/if}
+  </Button>
+{/snippet}
+
+{#if tooltip && !children}
+  <Tooltip content={name}>
+    {#snippet children({ props })}{@render button(props)}{/snippet}
+  </Tooltip>
+{:else}
+  {@render button()}
+{/if}
+<span class="sr-only" role="status">{copied ? copiedLabel : ''}</span>

package/dist/lib/components/CopyButton.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { Snippet } from 'svelte';
+import type { ButtonVariants } from './button-variants.js';
+interface Props {
+    /** Text to copy, or a function returning it (read when clicked) */
+    value: string | (() => string | Promise<string>);
+    /** Accessible name and tooltip before copying (default "Copy") */
+    label?: string;
+    /** Accessible name, tooltip and announcement after copying (default "Copied") */
+    copiedLabel?: string;
+    /** How long the copied state lasts, in ms (default 2000) */
+    timeout?: number;
+    variant?: ButtonVariants['variant'];
+    size?: ButtonVariants['size'];
+    /** Show a tooltip on the icon-only button (default true) */
+    tooltip?: boolean;
+    disabled?: boolean;
+    class?: string;
+    /** Called after the text was written to the clipboard */
+    oncopy?: (text: string) => void;
+    /** Called when the clipboard is unavailable or the write was refused */
+    onerror?: (error: unknown) => void;
+    /** Visible label; omit for an icon-only button */
+    children?: Snippet;
+}
+/**
+ * Copies text to the clipboard and confirms it: the icon turns into a check
+ * and screen readers hear "Copied" for `timeout` ms. Icon-only by default
+ * (with a tooltip); pass `children` for a labelled button.
+ */
+declare const CopyButton: import("svelte").Component<Props, {}, "">;
+type CopyButton = ReturnType<typeof CopyButton>;
+export default CopyButton;

package/dist/lib/components/EmptyState.svelte

@@ -0,0 +1,72 @@
+<!--
+  @component
+  A centred placeholder for a view with nothing to show yet: an icon, a
+  title, an optional description and actions (e.g. a "Create" button).
+-->
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils.js';
+  import Icon, { type IconName } from './Icon.svelte';
+
+  interface Props {
+    title: string;
+    description?: string;
+    /** Icon shown above the title in a muted circle */
+    icon?: IconName;
+    /** `sm` for panels and lists, `md` for pages (default) */
+    size?: 'sm' | 'md';
+    /** Heading element for the title (default h3) */
+    headingLevel?: 'h2' | 'h3' | 'h4' | 'p';
+    class?: string;
+    /** Buttons or links under the description */
+    actions?: Snippet;
+    /** Extra content between the description and the actions */
+    children?: Snippet;
+  }
+
+  let {
+    title,
+    description,
+    icon,
+    size = 'md',
+    headingLevel = 'h3',
+    class: className,
+    actions,
+    children,
+  }: Props = $props();
+</script>
+
+<div
+  class={cn(
+    'mx-auto flex w-full flex-col items-center text-center',
+    size === 'sm' ? 'max-w-xs gap-2 px-4 py-6' : 'max-w-md gap-3 px-6 py-12',
+    className
+  )}
+>
+  {#if icon}
+    <div
+      class={cn(
+        'flex items-center justify-center rounded-full bg-muted text-muted-foreground',
+        size === 'sm' ? 'mb-1 h-10 w-10' : 'mb-2 h-12 w-12'
+      )}
+      aria-hidden="true"
+    >
+      <Icon name={icon} size={size === 'sm' ? 20 : 24} />
+    </div>
+  {/if}
+  <svelte:element
+    this={headingLevel}
+    class={cn('font-semibold text-foreground', size === 'sm' ? 'text-sm' : 'text-base')}
+  >
+    {title}
+  </svelte:element>
+  {#if description}
+    <p class={cn('text-muted-foreground', size === 'sm' ? 'text-xs' : 'text-sm')}>
+      {description}
+    </p>
+  {/if}
+  {#if children}{@render children()}{/if}
+  {#if actions}
+    <div class="mt-2 flex flex-wrap items-center justify-center gap-2">{@render actions()}</div>
+  {/if}
+</div>

package/dist/lib/components/EmptyState.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Snippet } from 'svelte';
+import { type IconName } from './Icon.svelte';
+interface Props {
+    title: string;
+    description?: string;
+    /** Icon shown above the title in a muted circle */
+    icon?: IconName;
+    /** `sm` for panels and lists, `md` for pages (default) */
+    size?: 'sm' | 'md';
+    /** Heading element for the title (default h3) */
+    headingLevel?: 'h2' | 'h3' | 'h4' | 'p';
+    class?: string;
+    /** Buttons or links under the description */
+    actions?: Snippet;
+    /** Extra content between the description and the actions */
+    children?: Snippet;
+}
+/**
+ * A centred placeholder for a view with nothing to show yet: an icon, a
+ * title, an optional description and actions (e.g. a "Create" button).
+ */
+declare const EmptyState: import("svelte").Component<Props, {}, "">;
+type EmptyState = ReturnType<typeof EmptyState>;
+export default EmptyState;

package/dist/lib/components/Input.svelte

@@ -24,6 +24,8 @@
     /** Whether the input has an error */
     'aria-invalid'?: boolean | 'true' | 'false';
     onValueChange?: (value: string) => void;
+    /** Native input listener; runs after the value is updated */
+    oninput?: (e: Event & { currentTarget: HTMLInputElement }) => void;
     [key: string]: unknown;
   }
 
@@ -44,6 +46,7 @@
     'aria-describedby': ariaDescribedby,
     'aria-invalid': ariaInvalid,
     onValueChange,
+    oninput,
     ...restProps
   }: Props = $props();
 
@@ -62,6 +65,7 @@
     const target = e.target as HTMLInputElement;
     value = target.value;
     onValueChange?.(target.value);
+    oninput?.(e as Event & { currentTarget: HTMLInputElement });
   }
 </script>
 

package/dist/lib/components/Input.svelte.d.ts

@@ -20,6 +20,10 @@ interface Props {
     /** Whether the input has an error */
     'aria-invalid'?: boolean | 'true' | 'false';
     onValueChange?: (value: string) => void;
+    /** Native input listener; runs after the value is updated */
+    oninput?: (e: Event & {
+        currentTarget: HTMLInputElement;
+    }) => void;
     [key: string]: unknown;
 }
 declare const Input: import("svelte").Component<Props, {}, "value">;

package/dist/lib/components/Kbd.svelte

@@ -0,0 +1,80 @@
+<!--
+  @component
+  A keyboard key or shortcut. Pass `keys` for a combination ("Mod" shows as
+  ⌘ on Apple devices and Ctrl elsewhere), or `children` for a single key.
+-->
+<script lang="ts" module>
+  const SYMBOLS: Record<string, { apple: string; other: string; name: string }> = {
+    mod: { apple: '⌘', other: 'Ctrl', name: 'Command' },
+    ctrl: { apple: '⌃', other: 'Ctrl', name: 'Control' },
+    alt: { apple: '⌥', other: 'Alt', name: 'Option' },
+    shift: { apple: '⇧', other: 'Shift', name: 'Shift' },
+    enter: { apple: '↵', other: 'Enter', name: 'Enter' },
+    escape: { apple: 'Esc', other: 'Esc', name: 'Escape' },
+    esc: { apple: 'Esc', other: 'Esc', name: 'Escape' },
+  };
+
+  /** Whether shortcuts should use Apple modifier symbols (⌘, ⌥, ⇧). */
+  export function isApplePlatform(): boolean {
+    if (typeof navigator === 'undefined') return false;
+    const nav = navigator as Navigator & { userAgentData?: { platform?: string } };
+    const platform = nav.userAgentData?.platform ?? navigator.platform ?? '';
+    return /mac|iphone|ipad|ipod/i.test(platform);
+  }
+
+  /** The text shown for one key, and the name read out for it. */
+  export function formatKey(
+    key: string,
+    apple = isApplePlatform()
+  ): { label: string; name: string } {
+    const known = SYMBOLS[key.toLowerCase()];
+    if (!known) return { label: key.length === 1 ? key.toUpperCase() : key, name: key };
+    const name = key.toLowerCase() === 'mod' && !apple ? 'Control' : known.name;
+    return { label: apple ? known.apple : known.other, name };
+  }
+</script>
+
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils.js';
+
+  interface Props {
+    /** Keys of a combination, e.g. ['Mod', 'K'] */
+    keys?: string[];
+    size?: 'sm' | 'md';
+    class?: string;
+    children?: Snippet;
+  }
+
+  let { keys, size = 'sm', class: className, children }: Props = $props();
+
+  // Resolved after mount so server and client render the same markup
+  let apple = $state(false);
+  $effect(() => {
+    apple = isApplePlatform();
+  });
+
+  const keyClass = $derived(
+    cn(
+      'inline-flex items-center justify-center rounded border border-border bg-muted font-sans font-medium text-muted-foreground shadow-[inset_0_-1px_0_hsl(var(--border))]',
+      size === 'sm' ? 'h-5 min-w-5 px-1 text-[11px]' : 'h-6 min-w-6 px-1.5 text-xs'
+    )
+  );
+  const formatted = $derived((keys ?? []).map((k) => formatKey(k, apple)));
+</script>
+
+{#if keys?.length}
+  <span
+    class={cn('inline-flex items-center gap-0.5', className)}
+    aria-label={formatted.map((k) => k.name).join(' + ')}
+    role="img"
+  >
+    {#each formatted as key, i (i)}
+      <kbd class={keyClass} aria-hidden="true">{key.label}</kbd>
+    {/each}
+  </span>
+{:else}
+  <kbd class={cn(keyClass, className)}
+    >{#if children}{@render children()}{/if}</kbd
+  >
+{/if}

package/dist/lib/components/Kbd.svelte.d.ts

@@ -0,0 +1,22 @@
+/** Whether shortcuts should use Apple modifier symbols (⌘, ⌥, ⇧). */
+export declare function isApplePlatform(): boolean;
+/** The text shown for one key, and the name read out for it. */
+export declare function formatKey(key: string, apple?: boolean): {
+    label: string;
+    name: string;
+};
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Keys of a combination, e.g. ['Mod', 'K'] */
+    keys?: string[];
+    size?: 'sm' | 'md';
+    class?: string;
+    children?: Snippet;
+}
+/**
+ * A keyboard key or shortcut. Pass `keys` for a combination ("Mod" shows as
+ * ⌘ on Apple devices and Ctrl elsewhere), or `children` for a single key.
+ */
+declare const Kbd: import("svelte").Component<Props, {}, "">;
+type Kbd = ReturnType<typeof Kbd>;
+export default Kbd;

package/dist/lib/components/Popover.svelte

@@ -0,0 +1,90 @@
+<!--
+  @component
+  Floating content anchored to a trigger (Bits UI Popover). The `trigger`
+  snippet receives `{ props }`: spread them on your own focusable element
+  (`<Button {...props}>`). Without a trigger, anchor it with `anchor` (an
+  element or selector) and control it through `open`, e.g. a suggestion list
+  under a text field that must keep focus (`autoFocus={false}`).
+-->
+<script lang="ts">
+  import { Popover as PopoverPrimitive } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils.js';
+  import TriggerChild, { type TriggerSnippetProps } from './internal/TriggerChild.svelte';
+
+  interface Props {
+    /** Whether the popover is shown (bindable) */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    align?: 'start' | 'center' | 'end';
+    sideOffset?: number;
+    /** Element (or selector) to position against instead of the trigger */
+    anchor?: HTMLElement | string | null;
+    /**
+     * Move focus into the content when it opens (default true). Set false to
+     * keep focus where it is, e.g. in a text field driving the popover.
+     */
+    autoFocus?: boolean;
+    /** Keep Tab inside the content while open (default false) */
+    trapFocus?: boolean;
+    /** Accessible name for the content when it has no visible heading */
+    'aria-label'?: string;
+    class?: string;
+    trigger?: Snippet<[TriggerSnippetProps]>;
+    children: Snippet;
+  }
+
+  let {
+    open = $bindable(false),
+    onOpenChange,
+    side = 'bottom',
+    align = 'center',
+    sideOffset = 6,
+    anchor = null,
+    autoFocus = true,
+    trapFocus = false,
+    'aria-label': ariaLabel,
+    class: className,
+    trigger,
+    children,
+  }: Props = $props();
+
+  const uid = $props.id();
+  let triggerId = $state(`${uid}-trigger`);
+</script>
+
+<PopoverPrimitive.Root bind:open {onOpenChange}>
+  {#if trigger}
+    <PopoverPrimitive.Trigger id={triggerId}>
+      {#snippet child({ props })}
+        <TriggerChild
+          {props}
+          {trigger}
+          fallbackClass="inline-flex"
+          onfallback={() => (triggerId = `${uid}-trigger-wrap`)}
+        />
+      {/snippet}
+    </PopoverPrimitive.Trigger>
+  {/if}
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      {side}
+      {align}
+      {sideOffset}
+      {trapFocus}
+      customAnchor={anchor}
+      collisionPadding={8}
+      aria-label={ariaLabel}
+      onOpenAutoFocus={(e) => {
+        if (!autoFocus) e.preventDefault();
+      }}
+      class={cn(
+        'z-50 w-72 rounded-lg border border-border bg-popover p-3 text-sm text-popover-foreground shadow-md outline-none animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 motion-reduce:animate-none',
+        className
+      )}
+    >
+      {@render children()}
+    </PopoverPrimitive.Content>
+  </PopoverPrimitive.Portal>
+</PopoverPrimitive.Root>

package/dist/lib/components/Popover.svelte.d.ts

@@ -0,0 +1,34 @@
+import type { Snippet } from 'svelte';
+import { type TriggerSnippetProps } from './internal/TriggerChild.svelte';
+interface Props {
+    /** Whether the popover is shown (bindable) */
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    align?: 'start' | 'center' | 'end';
+    sideOffset?: number;
+    /** Element (or selector) to position against instead of the trigger */
+    anchor?: HTMLElement | string | null;
+    /**
+     * Move focus into the content when it opens (default true). Set false to
+     * keep focus where it is, e.g. in a text field driving the popover.
+     */
+    autoFocus?: boolean;
+    /** Keep Tab inside the content while open (default false) */
+    trapFocus?: boolean;
+    /** Accessible name for the content when it has no visible heading */
+    'aria-label'?: string;
+    class?: string;
+    trigger?: Snippet<[TriggerSnippetProps]>;
+    children: Snippet;
+}
+/**
+ * Floating content anchored to a trigger (Bits UI Popover). The `trigger`
+ * snippet receives `{ props }`: spread them on your own focusable element
+ * (`<Button {...props}>`). Without a trigger, anchor it with `anchor` (an
+ * element or selector) and control it through `open`, e.g. a suggestion list
+ * under a text field that must keep focus (`autoFocus={false}`).
+ */
+declare const Popover: import("svelte").Component<Props, {}, "open">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

package/dist/lib/components/ResizablePanes.svelte

@@ -0,0 +1,185 @@
+<!--
+  @component
+  Two panes split by a draggable handle. `size` is the start pane's share in
+  percent; the end pane takes the rest. The handle is a focusable
+  `separator`: arrow keys move it by `step`, Home/End jump to `min`/`max`.
+  With `persistKey` the size is remembered in localStorage.
+-->
+<script lang="ts" module>
+  const STORAGE_PREFIX = 'classic-theme:resizable:';
+
+  export function clampSize(value: number, min: number, max: number): number {
+    return Math.min(Math.max(value, min), max);
+  }
+</script>
+
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../utils.js';
+
+  interface Props {
+    /** Start pane share in percent (bindable) */
+    size?: number;
+    /** Smallest start share in percent (default 20) */
+    min?: number;
+    /** Largest start share in percent (default 80) */
+    max?: number;
+    /** Keyboard step in percent (default 5) */
+    step?: number;
+    /** `horizontal`: side by side (default); `vertical`: stacked */
+    orientation?: 'horizontal' | 'vertical';
+    /** Remember the size under this key */
+    persistKey?: string;
+    /** Accessible name for the handle (default "Resize panes") */
+    handleLabel?: string;
+    onResize?: (size: number) => void;
+    class?: string;
+    startClass?: string;
+    endClass?: string;
+    start: Snippet;
+    end: Snippet;
+  }
+
+  let {
+    size = $bindable(50),
+    min = 20,
+    max = 80,
+    step = 5,
+    orientation = 'horizontal',
+    persistKey,
+    handleLabel = 'Resize panes',
+    onResize,
+    class: className,
+    startClass,
+    endClass,
+    start,
+    end,
+  }: Props = $props();
+
+  const uid = $props.id();
+  let container = $state<HTMLDivElement | null>(null);
+  let dragging = $state(false);
+  const horizontal = $derived(orientation === 'horizontal');
+
+  // Read the remembered size once, after mount (no storage during SSR)
+  $effect(() => {
+    if (!persistKey) return;
+    try {
+      const stored = Number(localStorage.getItem(STORAGE_PREFIX + persistKey));
+      if (Number.isFinite(stored) && stored > 0) size = clampSize(stored, min, max);
+    } catch {
+      // Storage blocked: keep the default size
+    }
+  });
+
+  function set(next: number, save = true) {
+    const value = Math.round(clampSize(next, min, max) * 10) / 10;
+    if (value === size) return;
+    size = value;
+    onResize?.(value);
+    if (save) persist();
+  }
+
+  function persist() {
+    if (!persistKey) return;
+    try {
+      localStorage.setItem(STORAGE_PREFIX + persistKey, String(size));
+    } catch {
+      // Storage blocked: the size just isn't remembered
+    }
+  }
+
+  function onkeydown(e: KeyboardEvent) {
+    const back = horizontal ? 'ArrowLeft' : 'ArrowUp';
+    const forward = horizontal ? 'ArrowRight' : 'ArrowDown';
+    if (e.key === back) set(size - step);
+    else if (e.key === forward) set(size + step);
+    else if (e.key === 'Home') set(min);
+    else if (e.key === 'End') set(max);
+    else return;
+    e.preventDefault();
+  }
+
+  function fromPointer(e: PointerEvent) {
+    if (!container) return;
+    const rect = container.getBoundingClientRect();
+    const total = horizontal ? rect.width : rect.height;
+    if (total <= 0) return;
+    const offset = horizontal ? e.clientX - rect.left : e.clientY - rect.top;
+    set((offset / total) * 100, false);
+  }
+
+  function onpointerdown(e: PointerEvent) {
+    if (e.button !== 0) return;
+    e.preventDefault();
+    dragging = true;
+    (e.currentTarget as HTMLElement).setPointerCapture?.(e.pointerId);
+  }
+
+  function onpointermove(e: PointerEvent) {
+    if (dragging) fromPointer(e);
+  }
+
+  function onpointerup(e: PointerEvent) {
+    if (!dragging) return;
+    dragging = false;
+    (e.currentTarget as HTMLElement).releasePointerCapture?.(e.pointerId);
+    persist();
+  }
+</script>
+
+<div
+  bind:this={container}
+  class={cn('flex h-full min-h-0 w-full min-w-0', horizontal ? 'flex-row' : 'flex-col', className)}
+  data-dragging={dragging || undefined}
+>
+  <div
+    id={`${uid}-start`}
+    class={cn('min-h-0 min-w-0 shrink-0 overflow-hidden', startClass)}
+    style={`flex-basis:${size}%`}
+  >
+    {@render start()}
+  </div>
+  <!-- A focusable separator is an interactive widget (WAI-ARIA window splitter) -->
+  <!-- svelte-ignore a11y_no_noninteractive_tabindex, a11y_no_noninteractive_element_interactions -->
+  <div
+    role="separator"
+    tabindex="0"
+    aria-label={handleLabel}
+    aria-orientation={horizontal ? 'vertical' : 'horizontal'}
+    aria-controls={`${uid}-start`}
+    aria-valuenow={size}
+    aria-valuemin={min}
+    aria-valuemax={max}
+    class={cn(
+      'group relative z-10 flex shrink-0 touch-none select-none items-center justify-center bg-border outline-none transition-colors hover:bg-primary/40 focus-visible:bg-primary data-[dragging]:bg-primary',
+      horizontal ? 'w-px cursor-col-resize' : 'h-px cursor-row-resize'
+    )}
+    data-dragging={dragging || undefined}
+    {onkeydown}
+    {onpointerdown}
+    {onpointermove}
+    {onpointerup}
+    onpointercancel={onpointerup}
+  >
+    <!-- Wider invisible hit area around the 1px line -->
+    <span
+      class={cn(
+        'absolute',
+        horizontal ? 'inset-y-0 -left-1.5 -right-1.5' : 'inset-x-0 -top-1.5 -bottom-1.5'
+      )}
+      aria-hidden="true"
+    ></span>
+  </div>
+  <div class={cn('min-h-0 min-w-0 flex-1 overflow-hidden', endClass)}>
+    {@render end()}
+  </div>
+</div>
+
+{#if dragging}
+  <!-- Keeps the resize cursor and stops iframes in the panes from swallowing pointer moves -->
+  <div
+    class={cn('fixed inset-0 z-50', horizontal ? 'cursor-col-resize' : 'cursor-row-resize')}
+    aria-hidden="true"
+  ></div>
+{/if}

package/dist/lib/components/ResizablePanes.svelte.d.ts

@@ -0,0 +1,33 @@
+export declare function clampSize(value: number, min: number, max: number): number;
+import type { Snippet } from 'svelte';
+interface Props {
+    /** Start pane share in percent (bindable) */
+    size?: number;
+    /** Smallest start share in percent (default 20) */
+    min?: number;
+    /** Largest start share in percent (default 80) */
+    max?: number;
+    /** Keyboard step in percent (default 5) */
+    step?: number;
+    /** `horizontal`: side by side (default); `vertical`: stacked */
+    orientation?: 'horizontal' | 'vertical';
+    /** Remember the size under this key */
+    persistKey?: string;
+    /** Accessible name for the handle (default "Resize panes") */
+    handleLabel?: string;
+    onResize?: (size: number) => void;
+    class?: string;
+    startClass?: string;
+    endClass?: string;
+    start: Snippet;
+    end: Snippet;
+}
+/**
+ * Two panes split by a draggable handle. `size` is the start pane's share in
+ * percent; the end pane takes the rest. The handle is a focusable
+ * `separator`: arrow keys move it by `step`, Home/End jump to `min`/`max`.
+ * With `persistKey` the size is remembered in localStorage.
+ */
+declare const ResizablePanes: import("svelte").Component<Props, {}, "size">;
+type ResizablePanes = ReturnType<typeof ResizablePanes>;
+export default ResizablePanes;

package/dist/lib/components/Textarea.svelte

@@ -20,6 +20,17 @@
     /** Whether the textarea has an error */
     'aria-invalid'?: boolean | 'true' | 'false';
     onValueChange?: (value: string) => void;
+    /** Native input listener; runs after the value is updated */
+    oninput?: (e: Event & { currentTarget: HTMLTextAreaElement }) => void;
+    /**
+     * Grow with the content instead of showing a resize handle. `rows` is the
+     * minimum height; past `maxRows` the textarea scrolls.
+     */
+    autosize?: boolean;
+    /** Upper bound for `autosize`, in rows (default 8) */
+    maxRows?: number;
+    /** The textarea element (bindable), e.g. to focus it */
+    ref?: HTMLTextAreaElement | null;
     [key: string]: unknown;
   }
 
@@ -38,17 +49,50 @@
     'aria-describedby': ariaDescribedby,
     'aria-invalid': ariaInvalid,
     onValueChange,
+    oninput,
+    autosize = false,
+    maxRows = 8,
+    ref = $bindable(null),
     ...restProps
   }: Props = $props();
 
+  /**
+   * Fit the height to the content: measure at `auto`, then clamp between
+   * `rows` and `maxRows` lines (plus padding and border, read from the
+   * computed style so consumer classes are respected).
+   */
+  function fit(el: HTMLTextAreaElement) {
+    const style = getComputedStyle(el);
+    const lineHeight = parseFloat(style.lineHeight) || parseFloat(style.fontSize) * 1.5 || 20;
+    const chrome =
+      parseFloat(style.paddingTop) +
+      parseFloat(style.paddingBottom) +
+      parseFloat(style.borderTopWidth) +
+      parseFloat(style.borderBottomWidth);
+    const min = rows * lineHeight + chrome;
+    const max = Math.max(rows, maxRows) * lineHeight + chrome;
+    el.style.height = 'auto';
+    const next = Math.min(Math.max(el.scrollHeight, min), max);
+    el.style.height = `${next}px`;
+    el.style.overflowY = el.scrollHeight > max ? 'auto' : 'hidden';
+  }
+
+  $effect(() => {
+    // Re-fit when the value changes from outside too (cleared after send, prefilled)
+    void value;
+    if (autosize && ref) fit(ref);
+  });
+
   function handleInput(e: Event) {
     const target = e.target as HTMLTextAreaElement;
     value = target.value;
     onValueChange?.(target.value);
+    oninput?.(e as Event & { currentTarget: HTMLTextAreaElement });
   }
 </script>
 
 <textarea
+  bind:this={ref}
   {value}
   {placeholder}
   {disabled}
@@ -63,6 +107,7 @@
   aria-invalid={ariaInvalid}
   class={cn(
     'flex min-h-[80px] w-full rounded-md border border-input bg-background text-foreground px-3 py-2 text-base sm:text-sm ring-offset-background placeholder:text-gray-500 dark:placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 resize-y',
+    autosize && 'min-h-0 resize-none',
     ariaInvalid === true || ariaInvalid === 'true'
       ? 'border-destructive focus-visible:ring-destructive'
       : '',

package/dist/lib/components/Textarea.svelte.d.ts

@@ -17,8 +17,21 @@ interface Props {
     /** Whether the textarea has an error */
     'aria-invalid'?: boolean | 'true' | 'false';
     onValueChange?: (value: string) => void;
+    /** Native input listener; runs after the value is updated */
+    oninput?: (e: Event & {
+        currentTarget: HTMLTextAreaElement;
+    }) => void;
+    /**
+     * Grow with the content instead of showing a resize handle. `rows` is the
+     * minimum height; past `maxRows` the textarea scrolls.
+     */
+    autosize?: boolean;
+    /** Upper bound for `autosize`, in rows (default 8) */
+    maxRows?: number;
+    /** The textarea element (bindable), e.g. to focus it */
+    ref?: HTMLTextAreaElement | null;
     [key: string]: unknown;
 }
-declare const Textarea: import("svelte").Component<Props, {}, "value">;
+declare const Textarea: import("svelte").Component<Props, {}, "value" | "ref">;
 type Textarea = ReturnType<typeof Textarea>;
 export default Textarea;

package/dist/lib/index.d.ts

@@ -17,6 +17,8 @@ export { default as Checkbox } from './components/Checkbox.svelte';
 export { default as Switch } from './components/Switch.svelte';
 export { default as Separator } from './components/Separator.svelte';
 export { default as Icon, type IconName } from './components/Icon.svelte';
+export { default as CopyButton } from './components/CopyButton.svelte';
+export { default as Kbd, formatKey, isApplePlatform } from './components/Kbd.svelte';
 export { default as Card } from './components/Card.svelte';
 export { default as CardHeader } from './components/CardHeader.svelte';
 export { default as CardTitle } from './components/CardTitle.svelte';
@@ -35,15 +37,19 @@ export { default as ProgressBar } from './components/ProgressBar.svelte';
 export { default as LoadingOverlay } from './components/LoadingOverlay.svelte';
 export { default as LoadingPage } from './components/LoadingPage.svelte';
 export { default as LoadingSection } from './components/LoadingSection.svelte';
+export { default as EmptyState } from './components/EmptyState.svelte';
 export { default as LiveRegion } from './components/LiveRegion.svelte';
 export { default as SkipLink } from './components/SkipLink.svelte';
 export { default as Dialog } from './components/Dialog.svelte';
 export { default as AlertDialog } from './components/AlertDialog.svelte';
 export { default as Tooltip } from './components/Tooltip.svelte';
+export { default as Popover } from './components/Popover.svelte';
+export { default as Collapsible } from './components/Collapsible.svelte';
 export { default as DropdownMenu } from './components/DropdownMenu.svelte';
 export { default as ContextMenu } from './components/ContextMenu.svelte';
 export { default as AppLauncher, type AppLauncherItem } from './components/AppLauncher.svelte';
 export { default as AppLauncherGrid } from './components/AppLauncherGrid.svelte';
+export { default as ResizablePanes, clampSize } from './components/ResizablePanes.svelte';
 export { default as DataPanel } from './components/DataPanel.svelte';
 export { default as DataPanelHeader } from './components/DataPanelHeader.svelte';
 export { default as DataPanelContent } from './components/DataPanelContent.svelte';

package/dist/lib/index.js

@@ -18,6 +18,8 @@ export { default as Checkbox } from './components/Checkbox.svelte';
 export { default as Switch } from './components/Switch.svelte';
 export { default as Separator } from './components/Separator.svelte';
 export { default as Icon } from './components/Icon.svelte';
+export { default as CopyButton } from './components/CopyButton.svelte';
+export { default as Kbd, formatKey, isApplePlatform } from './components/Kbd.svelte';
 // Card Components
 export { default as Card } from './components/Card.svelte';
 export { default as CardHeader } from './components/CardHeader.svelte';
@@ -41,6 +43,7 @@ export { default as ProgressBar } from './components/ProgressBar.svelte';
 export { default as LoadingOverlay } from './components/LoadingOverlay.svelte';
 export { default as LoadingPage } from './components/LoadingPage.svelte';
 export { default as LoadingSection } from './components/LoadingSection.svelte';
+export { default as EmptyState } from './components/EmptyState.svelte';
 // Accessibility Components
 export { default as LiveRegion } from './components/LiveRegion.svelte';
 export { default as SkipLink } from './components/SkipLink.svelte';
@@ -48,10 +51,14 @@ export { default as SkipLink } from './components/SkipLink.svelte';
 export { default as Dialog } from './components/Dialog.svelte';
 export { default as AlertDialog } from './components/AlertDialog.svelte';
 export { default as Tooltip } from './components/Tooltip.svelte';
+export { default as Popover } from './components/Popover.svelte';
+export { default as Collapsible } from './components/Collapsible.svelte';
 export { default as DropdownMenu } from './components/DropdownMenu.svelte';
 export { default as ContextMenu } from './components/ContextMenu.svelte';
 export { default as AppLauncher } from './components/AppLauncher.svelte';
 export { default as AppLauncherGrid } from './components/AppLauncherGrid.svelte';
+// Layout primitives
+export { default as ResizablePanes, clampSize } from './components/ResizablePanes.svelte';
 // DataPanel Components
 export { default as DataPanel } from './components/DataPanel.svelte';
 export { default as DataPanelHeader } from './components/DataPanelHeader.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/theme-svelte",
-  "version": "1.38.0",
+  "version": "1.39.0",
   "description": "Svelte components for the Classic theme system",
   "type": "module",
   "svelte": "./dist/lib/index.js",