@poodle64/ui 2026.10.4 → 2026.10.6

package/dist/components/ui/list-toolbar/icon-action.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+	/** An icon button, or an icon link, named by its tooltip. Inside a `Tooltip.Provider`. */
+	import { mergeProps } from 'bits-ui';
+	import { buttonVariants } from '../button/index.js';
+	import * as Tooltip from '../tooltip/index.js';
+	import type { ListIconAction } from './types.js';
+
+	let { action }: { action: ListIconAction } = $props();
+	const Icon = $derived(action.icon);
+	const klass = buttonVariants({ variant: 'ghost', size: 'icon-sm' });
+
+	/** The trigger's own handlers (a click closes the tooltip) chained with the action's. */
+	const merged = (props: Record<string, unknown>) =>
+		mergeProps(props, { onclick: action.onclick, class: klass, 'aria-label': action.label });
+	/** A link takes no button `type`. */
+	function asLink(props: Record<string, unknown>) {
+		const { type: _type, ...rest } = merged(props);
+		return rest;
+	}
+</script>
+
+<Tooltip.Root>
+	<Tooltip.Trigger>
+		{#snippet child({ props })}
+			{#if action.href && !action.disabled}
+				<a
+					{...asLink(props)}
+					href={action.href}
+					download={action.download === true ? '' : action.download || undefined}
+					data-slot="list-action"
+				>
+					<Icon />
+				</a>
+			{:else}
+				<button {...merged(props)} type="button" disabled={action.disabled} data-slot="list-action">
+					<Icon />
+				</button>
+			{/if}
+		{/snippet}
+	</Tooltip.Trigger>
+	<Tooltip.Content side="bottom">{action.label}</Tooltip.Content>
+</Tooltip.Root>

package/dist/components/ui/list-toolbar/icon-action.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ListIconAction } from './types.js';
+type $$ComponentProps = {
+    action: ListIconAction;
+};
+declare const IconAction: import("svelte").Component<$$ComponentProps, {}, "">;
+type IconAction = ReturnType<typeof IconAction>;
+export default IconAction;

package/dist/components/ui/list-toolbar/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ListToolbar } from './list-toolbar.svelte';
+export { default } from './list-toolbar.svelte';
+export type { ListAction, ListIconAction } from './types.js';

package/dist/components/ui/list-toolbar/index.js

@@ -0,0 +1,2 @@
+export { default as ListToolbar } from './list-toolbar.svelte';
+export { default } from './list-toolbar.svelte';

package/dist/components/ui/list-toolbar/list-toolbar.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+	/**
+	 * The bar above a list, on the page ground: the list's title and count,
+	 * then its icon actions (each named by its tooltip) and its one labelled
+	 * action. The ledger draws its own with this, so every list's bar is the
+	 * same bar.
+	 *
+	 *     <ListToolbar title="Owned properties" meta="3 properties"
+	 *       tools={[{ label: 'Download as CSV', icon: Download, onclick: save }]}
+	 *       action={{ label: 'Add property', icon: Plus, href: '/property/new' }} />
+	 */
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import Button from '../button/button.svelte';
+	import * as Tooltip from '../tooltip/index.js';
+	import IconAction from './icon-action.svelte';
+	import { cn } from '../../../utils.js';
+	import type { ListAction, ListIconAction } from './types.js';
+
+	let {
+		title,
+		meta,
+		leading,
+		children,
+		tools = [],
+		action,
+		label,
+		class: className,
+		...restProps
+	}: Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {
+		title?: string;
+		/** Beside the title, quieter: the count, or what the list is of. */
+		meta?: string;
+		/** Before the title: a switch between views of the same list. */
+		leading?: Snippet;
+		/** The list's own controls, before its icon actions: a menu, a filter. */
+		children?: Snippet;
+		/** Icon actions, each named by its tooltip. */
+		tools?: ListIconAction[];
+		/** The one labelled action, last. */
+		action?: ListAction;
+		/** The toolbar's accessible name. Defaults to the title. */
+		label?: string;
+		class?: string;
+	} = $props();
+
+	const ActionIcon = $derived(action?.icon);
+</script>
+
+<div
+	role="toolbar"
+	aria-label={label ?? title}
+	class={cn('flex min-h-11 flex-none items-center gap-2 px-2 pb-2', className)}
+	data-slot="list-toolbar"
+	{...restProps}
+>
+	{@render leading?.()}
+	<!-- Crowded, the count gives way before the title, and the title ends in an ellipsis. -->
+	<div class="flex min-w-0 items-baseline gap-2.5 whitespace-nowrap">
+		{#if title}<h2 class="text-body min-w-0 truncate font-semibold">{title}</h2>{/if}
+		{#if meta}<span class="text-muted-foreground min-w-0 shrink-[100] truncate text-sm">{meta}</span>{/if}
+	</div>
+	<span class="min-w-0 flex-1"></span>
+	{@render children?.()}
+	{#if tools.length}
+		<Tooltip.Provider delayDuration={150}>
+			{#each tools as tool (tool.label)}
+				<IconAction action={tool} />
+			{/each}
+		</Tooltip.Provider>
+	{/if}
+	{#if action}
+		<Button
+			variant="outline"
+			size="sm"
+			href={action.href}
+			download={action.href ? (action.download === true ? '' : action.download || undefined) : undefined}
+			disabled={action.disabled}
+			onclick={action.onclick}
+			data-slot="list-toolbar-action"
+		>
+			{#if ActionIcon}<ActionIcon />{/if}{action.label}
+		</Button>
+	{/if}
+</div>

package/dist/components/ui/list-toolbar/list-toolbar.svelte.d.ts

@@ -0,0 +1,32 @@
+/**
+     * The bar above a list, on the page ground: the list's title and count,
+     * then its icon actions (each named by its tooltip) and its one labelled
+     * action. The ledger draws its own with this, so every list's bar is the
+     * same bar.
+     *
+     *     <ListToolbar title="Owned properties" meta="3 properties"
+     *       tools={[{ label: 'Download as CSV', icon: Download, onclick: save }]}
+     *       action={{ label: 'Add property', icon: Plus, href: '/property/new' }} />
+     */
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import type { ListAction, ListIconAction } from './types.js';
+type $$ComponentProps = Omit<HTMLAttributes<HTMLDivElement>, 'title'> & {
+    title?: string;
+    /** Beside the title, quieter: the count, or what the list is of. */
+    meta?: string;
+    /** Before the title: a switch between views of the same list. */
+    leading?: Snippet;
+    /** The list's own controls, before its icon actions: a menu, a filter. */
+    children?: Snippet;
+    /** Icon actions, each named by its tooltip. */
+    tools?: ListIconAction[];
+    /** The one labelled action, last. */
+    action?: ListAction;
+    /** The toolbar's accessible name. Defaults to the title. */
+    label?: string;
+    class?: string;
+};
+declare const ListToolbar: import("svelte").Component<$$ComponentProps, {}, "">;
+type ListToolbar = ReturnType<typeof ListToolbar>;
+export default ListToolbar;

package/dist/components/ui/list-toolbar/types.d.ts

@@ -0,0 +1,18 @@
+import type { IconComponent } from '../app-shell/types.js';
+/**
+ * One action a list or a pane offers: a button, or a link when it has `href`.
+ * As an icon action its `label` is the tooltip and the accessible name.
+ */
+export interface ListAction {
+    label: string;
+    icon?: IconComponent;
+    onclick?: (event: MouseEvent) => void;
+    href?: string;
+    /** On a link, saves the target rather than opening it; a string names the file. */
+    download?: boolean | string;
+    disabled?: boolean;
+}
+/** An action drawn as its icon alone. */
+export type ListIconAction = ListAction & {
+    icon: IconComponent;
+};

package/dist/components/ui/list-toolbar/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/ui/panel/panel.svelte

@@ -25,6 +25,7 @@
 		tone = 'default',
 		children,
 		pad = true,
+		scroll = false,
 		class: klass = '',
 		ref = $bindable(null),
 		...restProps
@@ -70,6 +71,12 @@
 		tone?: 'default' | 'destructive';
 		children: Snippet;
 		pad?: boolean;
+		/**
+		 * The body scrolls inside the card, under a header that stays: the card
+		 * is as tall as what it holds up to the height its container gives it,
+		 * and the full height when given one (`h-full`).
+		 */
+		scroll?: boolean;
 	} = $props();
 
 	const destructive = $derived(tone === 'destructive');
@@ -124,7 +131,7 @@
 			{/if}
 		</header>
 	{/if}
-	<div class={pad ? 'p-4' : ''}>
+	<div class={cn(pad && 'p-4', scroll && 'min-h-0 flex-1 overflow-y-auto')} data-slot="panel-body">
 		{@render children()}
 	</div>
 	{#if footer}

package/dist/components/ui/panel/panel.svelte.d.ts

@@ -45,6 +45,12 @@ type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLElement>> & {
     tone?: 'default' | 'destructive';
     children: Snippet;
     pad?: boolean;
+    /**
+     * The body scrolls inside the card, under a header that stays: the card
+     * is as tall as what it holds up to the height its container gives it,
+     * and the full height when given one (`h-full`).
+     */
+    scroll?: boolean;
 };
 declare const Panel: Component<$$ComponentProps, {}, "ref">;
 type Panel = ReturnType<typeof Panel>;

package/dist/components/ui/record-list/index.d.ts

@@ -0,0 +1,3 @@
+export { default as RecordList } from './record-list.svelte';
+export { default } from './record-list.svelte';
+export type { RecordFlag, RecordListColumn, RecordListPreferences, RecordListRow } from './types.js';

package/dist/components/ui/record-list/index.js

@@ -0,0 +1,2 @@
+export { default as RecordList } from './record-list.svelte';
+export { default } from './record-list.svelte';