@poodle64/ui 2026.8.7

package/dist/components/ui/command-palette/command-palette.svelte.d.ts

@@ -0,0 +1,40 @@
+/**
+     * The ⌘K palette, wired to the same navigation the shell renders.
+     *
+     * It ships beside AppShell because it had the identical coupling: the
+     * reference implementation imported its app's navigation module directly, so
+     * lifting the shell without it would have left the shell's search affordance
+     * pointing at nothing. One nav config now feeds both.
+     *
+     * The shortcut is bound here rather than in the consuming layout — every app
+     * that had a palette had re-typed the same `(metaKey || ctrlKey) && 'k'`
+     * handler, and one of them then needed a synthetic-keydown hack to reach it
+     * from the shell. Owning the binding removes both.
+     *
+     *     let paletteOpen = $state(false);
+     *     <AppShell {nav} onSearch={() => (paletteOpen = true)}>…</AppShell>
+     *     <CommandPalette bind:open={paletteOpen} {nav} onNavigate={goto} />
+     */
+import type { Snippet } from 'svelte';
+import { type NavSource } from '../app-shell/types.js';
+type $$ComponentProps = {
+    open?: boolean;
+    /** The same value passed to AppShell. Filter for permissions first. */
+    nav?: NavSource;
+    /**
+     * How to go somewhere. Apps pass SvelteKit's `goto` for a client-side
+     * transition; the default is a full navigation, so the palette works in an
+     * app with no router rather than silently doing nothing.
+     */
+    onNavigate?: (href: string) => void;
+    placeholder?: string;
+    navHeading?: string;
+    emptyText?: string;
+    /** Bind ⌘K / Ctrl-K to toggle. Turn off to drive `open` yourself. */
+    shortcut?: boolean;
+    /** Extra command groups: app-specific actions beneath the nav group. */
+    children?: Snippet;
+};
+declare const CommandPalette: import("svelte").Component<$$ComponentProps, {}, "open">;
+type CommandPalette = ReturnType<typeof CommandPalette>;
+export default CommandPalette;

package/dist/components/ui/command-palette/index.d.ts

@@ -0,0 +1,3 @@
+export { default as CommandPalette } from './command-palette.svelte';
+export { default } from './command-palette.svelte';
+export type { NavChildItem, NavEntry, NavGroup, NavItem, NavSource } from '../app-shell/types.js';

package/dist/components/ui/command-palette/index.js

@@ -0,0 +1,2 @@
+export { default as CommandPalette } from './command-palette.svelte';
+export { default } from './command-palette.svelte';

package/dist/components/ui/context-column/context-column.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn, type WithElementRef } from '../../../utils.js';
+	import StatList from '../stat-list/stat-list.svelte';
+	import type { StatItem } from '../stat-list/stat-list.svelte';
+
+	// The persistent right-hand context column, identical on every route. It holds
+	// one standing "At a glance" stat card and, on routes with a selectable table,
+	// the selected-row detail beneath it (a DetailPanel passed as the `detail`
+	// snippet). The stat card stays put; the detail flows in on select and leaves
+	// on deselect, so the column never changes shape.
+	//
+	// Width is clamped (shared-design-language §6) so a wide screen earns
+	// information, not emptiness. The column is a flex child of the page body row;
+	// the stat card is shrink-0 and any detail takes the remaining height with its
+	// own inner scroll.
+	//
+	// Below xl (1280px) the column is hidden so the primary pane keeps full width:
+	// a fixed nav rail plus a ~400px column would crush the content on a narrow
+	// screen. The proper narrow-viewport treatment (off-canvas nav, stacking panes)
+	// is a separate workstream; this is the regression guard until it lands.
+	let {
+		stats,
+		statsTitle = 'At a glance',
+		statsInfo,
+		detail,
+		/** The landmark's accessible name. `<aside>` with no name is exposed as
+		    "complementary" alone — set this to identify which one. */
+		ariaLabel,
+		ref = $bindable(null),
+		class: className,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> & {
+		stats: StatItem[];
+		statsTitle?: string;
+		statsInfo?: string;
+		detail?: Snippet;
+		ariaLabel?: string;
+	} = $props();
+</script>
+
+<aside
+	bind:this={ref}
+	aria-label={ariaLabel}
+	class={cn(
+		'hidden max-h-full min-h-0 w-[clamp(360px,28vw,460px)] shrink-0 flex-col gap-5 xl:flex',
+		className
+	)}
+	{...restProps}
+>
+	<StatList items={stats} title={statsTitle} info={statsInfo} />
+	{#if detail}
+		{@render detail()}
+	{/if}
+</aside>

package/dist/components/ui/context-column/context-column.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type WithElementRef } from '../../../utils.js';
+import type { StatItem } from '../stat-list/stat-list.svelte';
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLElement>> & {
+    stats: StatItem[];
+    statsTitle?: string;
+    statsInfo?: string;
+    detail?: Snippet;
+    ariaLabel?: string;
+};
+declare const ContextColumn: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type ContextColumn = ReturnType<typeof ContextColumn>;
+export default ContextColumn;

package/dist/components/ui/context-column/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ContextColumn } from './context-column.svelte';
+export { default } from './context-column.svelte';

package/dist/components/ui/context-column/index.js

@@ -0,0 +1,2 @@
+export { default as ContextColumn } from './context-column.svelte';
+export { default } from './context-column.svelte';

package/dist/components/ui/data-table/data-table.svelte.d.ts

@@ -0,0 +1,40 @@
+import { type RowData, type TableOptions } from '@tanstack/table-core';
+/**
+ * Creates a reactive TanStack table object for Svelte.
+ * @param options Table options to create the table with.
+ * @returns A reactive table object.
+ * @example
+ * ```svelte
+ * <script>
+ *   const table = createSvelteTable({ ... })
+ * </script>
+ *
+ * <table>
+ *   <thead>
+ *     {#each table.getHeaderGroups() as headerGroup}
+ *       <tr>
+ *         {#each headerGroup.headers as header}
+ *           <th colspan={header.colSpan}>
+ *         	   <FlexRender content={header.column.columnDef.header} context={header.getContext()} />
+ *         	 </th>
+ *         {/each}
+ *       </tr>
+ *     {/each}
+ *   </thead>
+ * 	 <!-- ... -->
+ * </table>
+ * ```
+ */
+export declare function createSvelteTable<TData extends RowData>(options: TableOptions<TData>): import("@tanstack/table-core").Table<TData>;
+type MaybeThunk<T extends object> = T | (() => T | null | undefined);
+type Intersection<T extends readonly unknown[]> = (T extends [infer H, ...infer R] ? H & Intersection<R> : unknown) & {};
+/**
+ * Lazily merges several objects (or thunks) while preserving
+ * getter semantics from every source.
+ *
+ * Proxy-based to avoid known WebKit recursion issue.
+ */
+export declare function mergeObjects<Sources extends readonly MaybeThunk<any>[]>(...sources: Sources): Intersection<{
+    [K in keyof Sources]: Sources[K];
+}>;
+export {};

package/dist/components/ui/data-table/data-table.svelte.js

@@ -0,0 +1,110 @@
+import { createTable } from '@tanstack/table-core';
+/**
+ * Creates a reactive TanStack table object for Svelte.
+ * @param options Table options to create the table with.
+ * @returns A reactive table object.
+ * @example
+ * ```svelte
+ * <script>
+ *   const table = createSvelteTable({ ... })
+ * </script>
+ *
+ * <table>
+ *   <thead>
+ *     {#each table.getHeaderGroups() as headerGroup}
+ *       <tr>
+ *         {#each headerGroup.headers as header}
+ *           <th colspan={header.colSpan}>
+ *         	   <FlexRender content={header.column.columnDef.header} context={header.getContext()} />
+ *         	 </th>
+ *         {/each}
+ *       </tr>
+ *     {/each}
+ *   </thead>
+ * 	 <!-- ... -->
+ * </table>
+ * ```
+ */
+export function createSvelteTable(options) {
+    const resolvedOptions = mergeObjects({
+        state: {},
+        onStateChange() { },
+        renderFallbackValue: null,
+        mergeOptions: (defaultOptions, options) => {
+            return mergeObjects(defaultOptions, options);
+        }
+    }, options);
+    const table = createTable(resolvedOptions);
+    let state = $state(table.initialState);
+    function updateOptions() {
+        table.setOptions(() => {
+            return mergeObjects(resolvedOptions, options, {
+                state: mergeObjects(state, options.state || {}),
+                onStateChange: (updater) => {
+                    if (updater instanceof Function)
+                        state = updater(state);
+                    else
+                        state = mergeObjects(state, updater);
+                    options.onStateChange?.(updater);
+                }
+            });
+        });
+    }
+    updateOptions();
+    $effect.pre(() => {
+        updateOptions();
+    });
+    return table;
+}
+/**
+ * Lazily merges several objects (or thunks) while preserving
+ * getter semantics from every source.
+ *
+ * Proxy-based to avoid known WebKit recursion issue.
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function mergeObjects(...sources) {
+    const resolve = (src) => typeof src === 'function' ? (src() ?? undefined) : src;
+    const findSourceWithKey = (key) => {
+        for (let i = sources.length - 1; i >= 0; i--) {
+            const obj = resolve(sources[i]);
+            if (obj && key in obj)
+                return obj;
+        }
+        return undefined;
+    };
+    return new Proxy(Object.create(null), {
+        get(_, key) {
+            const src = findSourceWithKey(key);
+            return src?.[key];
+        },
+        has(_, key) {
+            return !!findSourceWithKey(key);
+        },
+        ownKeys() {
+            // eslint-disable-next-line svelte/prefer-svelte-reactivity
+            const all = new Set();
+            for (const s of sources) {
+                const obj = resolve(s);
+                if (obj) {
+                    for (const k of Reflect.ownKeys(obj)) {
+                        all.add(k);
+                    }
+                }
+            }
+            return [...all];
+        },
+        getOwnPropertyDescriptor(_, key) {
+            const src = findSourceWithKey(key);
+            if (!src)
+                return undefined;
+            return {
+                configurable: true,
+                enumerable: true,
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                value: src[key],
+                writable: true
+            };
+        }
+    });
+}

package/dist/components/ui/data-table/flex-render.svelte

@@ -0,0 +1,40 @@
+<script
+	lang="ts"
+	generics="TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>"
+>
+	import type { CellContext, ColumnDefTemplate, HeaderContext } from '@tanstack/table-core';
+	import { RenderComponentConfig, RenderSnippetConfig } from './render-helpers.js';
+	import type { Attachment } from 'svelte/attachments';
+	type Props = {
+		/** The cell or header field of the current cell's column definition. */
+		content?: TContext extends HeaderContext<TData, TValue>
+			? ColumnDefTemplate<HeaderContext<TData, TValue>>
+			: TContext extends CellContext<TData, TValue>
+				? ColumnDefTemplate<CellContext<TData, TValue>>
+				: never;
+		/** The result of the `getContext()` function of the header or cell */
+		context: TContext;
+
+		/** Used to pass attachments that can't be gotten through context */
+		attach?: Attachment;
+	};
+
+	let { content, context, attach }: Props = $props();
+</script>
+
+{#if typeof content === 'string'}
+	{content}
+{:else if content instanceof Function}
+	<!-- It's unlikely that a CellContext will be passed to a Header -->
+	<!-- eslint-disable-next-line @typescript-eslint/no-explicit-any -->
+	{@const result = content(context as any)}
+	{#if result instanceof RenderComponentConfig}
+		{@const { component: Component, props } = result}
+		<Component {...props} {attach} />
+	{:else if result instanceof RenderSnippetConfig}
+		{@const { snippet, params } = result}
+		{@render snippet({ ...params, attach })}
+	{:else}
+		{result}
+	{/if}
+{/if}

package/dist/components/ui/data-table/flex-render.svelte.d.ts

@@ -0,0 +1,33 @@
+import type { CellContext, ColumnDefTemplate, HeaderContext } from '@tanstack/table-core';
+import type { Attachment } from 'svelte/attachments';
+declare function $$render<TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>>(): {
+    props: {
+        /** The cell or header field of the current cell's column definition. */
+        content?: TContext extends HeaderContext<TData, TValue> ? ColumnDefTemplate<HeaderContext<TData, TValue>> : TContext extends CellContext<TData, TValue> ? ColumnDefTemplate<CellContext<TData, TValue>> : never;
+        /** The result of the `getContext()` function of the header or cell */
+        context: TContext;
+        /** Used to pass attachments that can't be gotten through context */
+        attach?: Attachment;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>> {
+    props(): ReturnType<typeof $$render<TData, TValue, TContext>>['props'];
+    events(): ReturnType<typeof $$render<TData, TValue, TContext>>['events'];
+    slots(): ReturnType<typeof $$render<TData, TValue, TContext>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData, TValue, TContext>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData, TValue, TContext>['props']>, ReturnType<__sveltets_Render<TData, TValue, TContext>['events']>, ReturnType<__sveltets_Render<TData, TValue, TContext>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData, TValue, TContext>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData, TValue, TContext>['exports']>;
+    <TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>>(internal: unknown, props: ReturnType<__sveltets_Render<TData, TValue, TContext>['props']> & {}): ReturnType<__sveltets_Render<TData, TValue, TContext>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
+}
+declare const FlexRender: $$IsomorphicComponent;
+type FlexRender<TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>> = InstanceType<typeof FlexRender<TData, TValue, TContext>>;
+export default FlexRender;

package/dist/components/ui/data-table/index.d.ts

@@ -0,0 +1,3 @@
+export { default as FlexRender } from './flex-render.svelte';
+export { renderComponent, renderSnippet } from './render-helpers.js';
+export { createSvelteTable } from './data-table.svelte.js';

package/dist/components/ui/data-table/index.js

@@ -0,0 +1,3 @@
+export { default as FlexRender } from './flex-render.svelte';
+export { renderComponent, renderSnippet } from './render-helpers.js';
+export { createSvelteTable } from './data-table.svelte.js';

package/dist/components/ui/data-table/render-helpers.d.ts

@@ -0,0 +1,90 @@
+import type { Component, ComponentProps, Snippet } from 'svelte';
+/**
+ * A helper class to make it easy to identify Svelte components in
+ * `columnDef.cell` and `columnDef.header` properties.
+ *
+ * > NOTE: This class should only be used internally by the adapter. If you're
+ * reading this and you don't know what this is for, you probably don't need it.
+ *
+ * @example
+ * ```svelte
+ * {@const result = content(context as any)}
+ * {#if result instanceof RenderComponentConfig}
+ *   {@const { component: Component, props } = result}
+ *   <Component {...props} />
+ * {/if}
+ * ```
+ */
+export declare class RenderComponentConfig<TComponent extends Component> {
+    component: TComponent;
+    props: ComponentProps<TComponent> | Record<string, never>;
+    constructor(component: TComponent, props?: ComponentProps<TComponent> | Record<string, never>);
+}
+/**
+ * A helper class to make it easy to identify Svelte Snippets in `columnDef.cell` and `columnDef.header` properties.
+ *
+ * > NOTE: This class should only be used internally by the adapter. If you're
+ * reading this and you don't know what this is for, you probably don't need it.
+ *
+ * @example
+ * ```svelte
+ * {@const result = content(context as any)}
+ * {#if result instanceof RenderSnippetConfig}
+ *   {@const { snippet, params } = result}
+ *   {@render snippet(params)}
+ * {/if}
+ * ```
+ */
+export declare class RenderSnippetConfig<TProps> {
+    snippet: Snippet<[TProps]>;
+    params: TProps;
+    constructor(snippet: Snippet<[TProps]>, params: TProps);
+}
+/**
+ * A helper function to help create cells from Svelte components through ColumnDef's `cell` and `header` properties.
+ *
+ * This is only to be used with Svelte Components - use `renderSnippet` for Svelte Snippets.
+ *
+ * @param component A Svelte component
+ * @param props The props to pass to `component`
+ * @returns A `RenderComponentConfig` object that helps svelte-table know how to render the header/cell component.
+ * @example
+ * ```ts
+ * // +page.svelte
+ * const defaultColumns = [
+ *   columnHelper.accessor('name', {
+ *     header: header => renderComponent(SortHeader, { label: 'Name', header }),
+ *   }),
+ *   columnHelper.accessor('state', {
+ *     header: header => renderComponent(SortHeader, { label: 'State', header }),
+ *   }),
+ * ]
+ * ```
+ * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
+ */
+export declare function renderComponent<T extends Component<any>, Props extends ComponentProps<T>>(component: T, props?: Props): RenderComponentConfig<T>;
+/**
+ * A helper function to help create cells from Svelte Snippets through ColumnDef's `cell` and `header` properties.
+ *
+ * The snippet must only take one parameter.
+ *
+ * This is only to be used with Snippets - use `renderComponent` for Svelte Components.
+ *
+ * @param snippet
+ * @param params
+ * @returns - A `RenderSnippetConfig` object that helps svelte-table know how to render the header/cell snippet.
+ * @example
+ * ```ts
+ * // +page.svelte
+ * const defaultColumns = [
+ *   columnHelper.accessor('name', {
+ *     cell: cell => renderSnippet(nameSnippet, { name: cell.row.name }),
+ *   }),
+ *   columnHelper.accessor('state', {
+ *     cell: cell => renderSnippet(stateSnippet, { state: cell.row.state }),
+ *   }),
+ * ]
+ * ```
+ * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
+ */
+export declare function renderSnippet<TProps>(snippet: Snippet<[TProps]>, params?: TProps): RenderSnippetConfig<TProps>;

package/dist/components/ui/data-table/render-helpers.js

@@ -0,0 +1,99 @@
+/**
+ * A helper class to make it easy to identify Svelte components in
+ * `columnDef.cell` and `columnDef.header` properties.
+ *
+ * > NOTE: This class should only be used internally by the adapter. If you're
+ * reading this and you don't know what this is for, you probably don't need it.
+ *
+ * @example
+ * ```svelte
+ * {@const result = content(context as any)}
+ * {#if result instanceof RenderComponentConfig}
+ *   {@const { component: Component, props } = result}
+ *   <Component {...props} />
+ * {/if}
+ * ```
+ */
+export class RenderComponentConfig {
+    component;
+    props;
+    constructor(component, props = {}) {
+        this.component = component;
+        this.props = props;
+    }
+}
+/**
+ * A helper class to make it easy to identify Svelte Snippets in `columnDef.cell` and `columnDef.header` properties.
+ *
+ * > NOTE: This class should only be used internally by the adapter. If you're
+ * reading this and you don't know what this is for, you probably don't need it.
+ *
+ * @example
+ * ```svelte
+ * {@const result = content(context as any)}
+ * {#if result instanceof RenderSnippetConfig}
+ *   {@const { snippet, params } = result}
+ *   {@render snippet(params)}
+ * {/if}
+ * ```
+ */
+export class RenderSnippetConfig {
+    snippet;
+    params;
+    constructor(snippet, params) {
+        this.snippet = snippet;
+        this.params = params;
+    }
+}
+/**
+ * A helper function to help create cells from Svelte components through ColumnDef's `cell` and `header` properties.
+ *
+ * This is only to be used with Svelte Components - use `renderSnippet` for Svelte Snippets.
+ *
+ * @param component A Svelte component
+ * @param props The props to pass to `component`
+ * @returns A `RenderComponentConfig` object that helps svelte-table know how to render the header/cell component.
+ * @example
+ * ```ts
+ * // +page.svelte
+ * const defaultColumns = [
+ *   columnHelper.accessor('name', {
+ *     header: header => renderComponent(SortHeader, { label: 'Name', header }),
+ *   }),
+ *   columnHelper.accessor('state', {
+ *     header: header => renderComponent(SortHeader, { label: 'State', header }),
+ *   }),
+ * ]
+ * ```
+ * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
+ */
+export function renderComponent(component, props = {}) {
+    return new RenderComponentConfig(component, props);
+}
+/**
+ * A helper function to help create cells from Svelte Snippets through ColumnDef's `cell` and `header` properties.
+ *
+ * The snippet must only take one parameter.
+ *
+ * This is only to be used with Snippets - use `renderComponent` for Svelte Components.
+ *
+ * @param snippet
+ * @param params
+ * @returns - A `RenderSnippetConfig` object that helps svelte-table know how to render the header/cell snippet.
+ * @example
+ * ```ts
+ * // +page.svelte
+ * const defaultColumns = [
+ *   columnHelper.accessor('name', {
+ *     cell: cell => renderSnippet(nameSnippet, { name: cell.row.name }),
+ *   }),
+ *   columnHelper.accessor('state', {
+ *     cell: cell => renderSnippet(stateSnippet, { state: cell.row.state }),
+ *   }),
+ * ]
+ * ```
+ * @see {@link https://tanstack.com/table/latest/docs/guide/column-defs}
+ */
+export function renderSnippet(snippet, params = {}) {
+    return new RenderSnippetConfig(snippet, params);
+}