@classic-homes/theme-svelte 1.37.0 → 1.39.0

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/Select.svelte

@@ -51,6 +51,8 @@
      * renders one once there are at least that many options.
      */
     searchable?: boolean | number;
+    /** With `searchable`: render at most this many matches (see Combobox) */
+    maxResults?: number;
   }
 
   let {
@@ -69,6 +71,7 @@
     'aria-label': ariaLabelProp,
     'aria-labelledby': ariaLabelledby,
     searchable = false,
+    maxResults,
   }: Props = $props();
 
   // Generate unique IDs for accessibility using sequential counter
@@ -291,6 +294,7 @@
     {id}
     {error}
     {hint}
+    {maxResults}
     aria-label={ariaLabelProp}
     aria-labelledby={ariaLabelledby}
     class={className}

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

@@ -41,6 +41,8 @@ interface Props {
      * renders one once there are at least that many options.
      */
     searchable?: boolean | number;
+    /** With `searchable`: render at most this many matches (see Combobox) */
+    maxResults?: number;
 }
 declare const Select: import("svelte").Component<Props, {}, "value">;
 type Select = ReturnType<typeof Select>;

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,14 +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,9 +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.37.0",
+  "version": "1.39.0",
   "description": "Svelte components for the Classic theme system",
   "type": "module",
   "svelte": "./dist/lib/index.js",