@sepale/components 0.0.0-stage → 0.1.0

package/dist/components/FileExplorer.svelte.d.ts

@@ -0,0 +1,114 @@
+/** What .file-explorer is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015). */
+export declare const PREFIX = "file-explorer";
+export declare const AXES: {
+    readonly size: readonly ["xs", "sm", "md", "lg", "xl"];
+};
+export declare const FLAGS: {};
+export declare const PARTS: readonly ["toolbar", "path", "actions", "views", "view", "main", "tree", "tree-item", "twisty", "content", "table", "grid", "item", "entry", "icon", "thumb", "name", "meta", "empty", "details", "menu"];
+/** A file or a folder. Anything else on it is yours: it travels to the snippets. */
+export interface FileNode {
+    id: string | number;
+    name: string;
+    kind: 'folder' | 'file';
+    /** Bytes. */
+    size?: number;
+    modified?: Date;
+    /** A static tree: a folder's content, known up front. */
+    children?: FileNode[];
+    [key: string]: unknown;
+}
+/** What a drop brings: nodes dragged inside the explorer, or files from the system. */
+export type FileDrop = FileNode[] | File[];
+/**
+     * Files and folders in a hierarchy, Drive-like: the folder tree on the
+     * left, the current folder as a list or a grid, the details of the
+     * selection on the right, under a toolbar with the path and your actions.
+     *
+     * Folders load lazily through `load(folder)` — `null` is the top — or
+     * come from a static `root`. Selection: click, Ctrl/⌘ to add, Shift for a
+     * range; the keyboard walks the content (arrows, Enter, Backspace to go
+     * up). Double-click or Enter opens a folder, or calls `onOpen` on a file.
+     * Right-click shows the `menu` snippet.
+     *
+     * Drag and drop moves nothing by itself: `onDrag` may refuse a drag,
+     * `onDrop(items, target)` says what was dropped where — nodes from inside,
+     * or `File`s from the system — and the app does the work, then calls
+     * `refresh()`.
+     */
+import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type FileIcon } from './file-icons.js';
+declare const FileExplorer: import("svelte").Component<{
+    readonly size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+} & {} & {
+    background?: string;
+} & HTMLAttributes<HTMLDivElement> & {
+    /** A static tree, from its top folder. */
+    root?: FileNode;
+    /** A folder's content, on demand. `null` is the top. Wins over `root`'s children. */
+    load?: (folder: FileNode | null) => FileNode[] | Promise<FileNode[]>;
+    /** The top's name in the path and the tree, when there is no `root`. */
+    rootLabel?: string;
+    /** Show the folder tree. */
+    tree?: boolean;
+    /** The view it starts in. */
+    view?: "list" | "grid";
+    /** Your actions, in the toolbar. */
+    toolbar?: Snippet<[{
+        folder: FileNode | null;
+        selection: FileNode[];
+    }]>;
+    /** The details pane, shown while something is selected. */
+    details?: Snippet<[FileNode[]]>;
+    /** The context menu's content. `close` closes it. */
+    menu?: Snippet<[{
+        items: FileNode[];
+        close: () => void;
+    }]>;
+    /** A node's icon, drawn by you. Wins over `icons` and `preview`. */
+    icon?: Snippet<[FileNode]>;
+    /**
+     * Icons by extension (`{ pdf: { glyph, color } }`), merged over the
+     * default table. `false` turns the table off: every file is a page.
+     */
+    icons?: Record<string, FileIcon> | false;
+    /**
+     * A picture for a file, or nothing. Defaults to the node's `thumbnail`,
+     * else its `url` when the extension is an image's. `false`: never.
+     */
+    preview?: ((node: FileNode) => string | undefined) | false;
+    /** Drawn in an empty folder. */
+    empty?: Snippet<[FileNode | null]>;
+    /** A file was opened (double-click, Enter). */
+    onOpen?: (file: FileNode) => void;
+    /** The selection changed. */
+    onSelect?: (items: FileNode[]) => void;
+    /** Another folder is shown. */
+    onNavigate?: (folder: FileNode | null) => void;
+    /** A drag starts. Return `false` to refuse it. */
+    onDrag?: (items: FileNode[], event: DragEvent) => boolean | void;
+    /** Something was dropped on a folder (`null`: the top). */
+    onDrop?: (items: FileDrop, target: FileNode | null, event: DragEvent) => void;
+    /** The texts it writes. */
+    labels?: Partial<{
+        name: string;
+        modified: string;
+        size: string;
+        list: string;
+        grid: string;
+        empty: string;
+        tree: string;
+        path: string;
+        loading: string;
+    }>;
+    formatSize?: (bytes: number) => string;
+    formatDate?: (date: Date) => string;
+    class?: string;
+}, {
+    refresh: (folder?: FileNode | null) => void;
+    navigate: (chain: FileNode[]) => void;
+    getSelection: () => FileNode[];
+}, "">;
+type FileExplorer = ReturnType<typeof FileExplorer>;
+export default FileExplorer;

package/dist/components/FileInput.svelte

@@ -0,0 +1,125 @@
+<script module lang="ts">
+	/** What .file-input is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015). */
+	export const PREFIX = 'file-input';
+
+	export const AXES = {
+		color: ['primary', 'secondary', 'accent', 'neutral', 'info', 'success', 'warning', 'error'],
+		size: ['xs', 'sm', 'md', 'lg', 'xl'],
+		variant: ['ghost']
+	} as const;
+
+	export const FLAGS = {} as const;
+	export const PARTS = [] as const;
+</script>
+
+<script lang="ts">
+	/**
+	 * A file picker. Validation stays the browser's (`required`, `accept`…);
+	 * the message shown is the browser's own, in the visitor's language, and
+	 * `error` forces one from outside.
+	 */
+	import type { Snippet } from 'svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+
+	// `size` is ours — the HTML attribute of the same name is a character count
+	// our CSS overrides anyway.
+	interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLInputAttributes, 'size' | 'color'> {
+		/**
+		 * Colour the field by its own validity and reveal `hint` once the
+		 * browser marks it invalid. The CSS drives this off `:user-invalid`,
+		 * so it only fires after the visitor has actually had a go.
+		 */
+		validator?: boolean;
+		/**
+		 * Shown under the field when it is invalid. It has to be the field's
+		 * next sibling for the CSS to reach it, which is the whole reason this
+		 * is a prop and not something you write yourself. Without it, the
+		 * message is the browser's own.
+		 */
+		hint?: Snippet;
+		/**
+		 * An error from outside (the server said no): marks the field invalid and
+		 * shows this, for as long as it is given. The parent owns it — it knows
+		 * the value and is the one able to test it — so the field never clears it.
+		 */
+		error?: string | null;
+		/** The message of the last check, `false` when the field passed. Bindable. */
+		invalid?: string | false;
+		/** The `<input>` itself. Bindable. */
+		element?: HTMLInputElement;
+		class?: string;
+		files?: FileList | null;
+	}
+
+	// The axes are deliberately NOT destructured: they travel in `axes` and are
+	// resolved by name, so an axis a family drops changes nothing down here.
+	let {
+		validator = false,
+		hint,
+		error = null,
+		invalid = $bindable(false),
+		element = $bindable(),
+		files = $bindable<FileList | null>(null),
+		class: klass = '',
+		disabled = false,
+		onchange,
+		onblur,
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+
+	/** What is shown under the field. A disabled field shows nothing. */
+	let message = $derived(disabled ? '' : error || (typeof invalid === 'string' ? invalid : ''));
+
+	let classes = $derived(cx(PREFIX, applied.classes, (validator || !!message) && 'validator', klass));
+
+	/** Check the field now and show the browser's message if it fails. */
+	export function isValid(): boolean {
+		if (!element || disabled) return !error;
+		invalid = element.validity.valid ? false : element.validationMessage;
+		return !error && !invalid;
+	}
+
+	/** Drop the chosen files. */
+	export function clear() {
+		if (element) element.value = '';
+		files = null;
+		if (invalid) isValid();
+	}
+
+	function handleChange(e: Event & { currentTarget: EventTarget & HTMLInputElement }) {
+		// A field shown invalid is re-checked once a file is picked.
+		if (invalid) isValid();
+		onchange?.(e);
+	}
+
+	function handleBlur(e: FocusEvent & { currentTarget: EventTarget & HTMLInputElement }) {
+		if (validator) isValid();
+		onblur?.(e);
+	}
+</script>
+
+<!-- Ours first: what the caller writes in the spread still wins. -->
+<input
+	aria-invalid={message ? 'true' : undefined}
+	{...applied.rest}
+	bind:this={element}
+	type="file"
+	class={classes}
+	bind:files
+	{disabled}
+	onchange={handleChange}
+	onblur={handleBlur}
+/>
+<!-- An error from outside first, then the caller's hint, then the browser's
+     own message. -->
+{#if error && !disabled}
+	<p class="validator-hint">{error}</p>
+{:else if hint}
+	<p class="validator-hint">{@render hint()}</p>
+{:else if message}
+	<p class="validator-hint">{message}</p>
+{/if}

package/dist/components/FileInput.svelte.d.ts

@@ -0,0 +1,51 @@
+/** What .file-input is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015). */
+export declare const PREFIX = "file-input";
+export declare const AXES: {
+    readonly color: readonly ["primary", "secondary", "accent", "neutral", "info", "success", "warning", "error"];
+    readonly size: readonly ["xs", "sm", "md", "lg", "xl"];
+    readonly variant: readonly ["ghost"];
+};
+export declare const FLAGS: {};
+export declare const PARTS: readonly [];
+/**
+     * A file picker. Validation stays the browser's (`required`, `accept`…);
+     * the message shown is the browser's own, in the visitor's language, and
+     * `error` forces one from outside.
+     */
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+import { type AxisProps } from '../variants.js';
+interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLInputAttributes, 'size' | 'color'> {
+    /**
+     * Colour the field by its own validity and reveal `hint` once the
+     * browser marks it invalid. The CSS drives this off `:user-invalid`,
+     * so it only fires after the visitor has actually had a go.
+     */
+    validator?: boolean;
+    /**
+     * Shown under the field when it is invalid. It has to be the field's
+     * next sibling for the CSS to reach it, which is the whole reason this
+     * is a prop and not something you write yourself. Without it, the
+     * message is the browser's own.
+     */
+    hint?: Snippet;
+    /**
+     * An error from outside (the server said no): marks the field invalid and
+     * shows this, for as long as it is given. The parent owns it — it knows
+     * the value and is the one able to test it — so the field never clears it.
+     */
+    error?: string | null;
+    /** The message of the last check, `false` when the field passed. Bindable. */
+    invalid?: string | false;
+    /** The `<input>` itself. Bindable. */
+    element?: HTMLInputElement;
+    class?: string;
+    files?: FileList | null;
+}
+declare const FileInput: import("svelte").Component<Props, {
+    isValid: () => boolean;
+    clear: () => void;
+}, "invalid" | "element" | "files">;
+type FileInput = ReturnType<typeof FileInput>;
+export default FileInput;

package/dist/components/FloatingLabel.svelte

@@ -0,0 +1,38 @@
+<script module lang="ts">
+	/** What .floating-label is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015).
+
+	    A container that WRAPS a field, unlike `.label`, which is inline and
+	    lives inside one. Two roles, two components (ADR 0009). The <span> must
+	    come before the field: the CSS reads the field's placeholder state with
+	    `:has()` and paints the span accordingly. */
+	export const PREFIX = 'floating-label';
+
+	export const AXES = {} as const;
+
+	export const FLAGS = {} as const;
+	export const PARTS = [] as const;
+</script>
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLLabelAttributes } from 'svelte/elements';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+
+	interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, HTMLLabelAttributes {
+		/** The text that floats into the field's frame once it has content. */
+		label?: string;
+		class?: string;
+		/** The field itself — an `<input>`, `<select>` or `<textarea>`. */
+		children?: Snippet;
+	}
+
+	let { label, class: klass = '', children, ...axes }: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+</script>
+
+<label {...applied.rest} class={cx(PREFIX, applied.classes, klass)}>
+	<span>{label}</span>
+	{@render children?.()}
+</label>

package/dist/components/FloatingLabel.svelte.d.ts

@@ -0,0 +1,24 @@
+/** What .floating-label is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015).
+
+    A container that WRAPS a field, unlike `.label`, which is inline and
+    lives inside one. Two roles, two components (ADR 0009). The <span> must
+    come before the field: the CSS reads the field's placeholder state with
+    `:has()` and paints the span accordingly. */
+export declare const PREFIX = "floating-label";
+export declare const AXES: {};
+export declare const FLAGS: {};
+export declare const PARTS: readonly [];
+import type { Snippet } from 'svelte';
+import type { HTMLLabelAttributes } from 'svelte/elements';
+import { type AxisProps } from '../variants.js';
+interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, HTMLLabelAttributes {
+    /** The text that floats into the field's frame once it has content. */
+    label?: string;
+    class?: string;
+    /** The field itself — an `<input>`, `<select>` or `<textarea>`. */
+    children?: Snippet;
+}
+declare const FloatingLabel: import("svelte").Component<Props, {}, "">;
+type FloatingLabel = ReturnType<typeof FloatingLabel>;
+export default FloatingLabel;

package/dist/components/Footer.svelte

@@ -0,0 +1,68 @@
+<script module lang="ts">
+	/** What .footer is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015). */
+	export const PREFIX = 'footer';
+
+	export const AXES = {
+		color: ['primary', 'secondary', 'accent', 'neutral', 'info', 'success', 'warning', 'error']
+	} as const;
+
+	export const FLAGS = {
+		center: 'Centre the columns and the bottom row.'
+	} as const;
+	export const PARTS = ['sections', 'section', 'title', 'bottom'] as const;
+
+	export interface FooterSection {
+		title: string;
+		links: { label: string; href: string }[];
+	}
+</script>
+
+<script lang="ts">
+	/**
+	 * The closing block of a page: columns of links, then a bottom row.
+	 *
+	 * `sections` draws the columns from data; for anything else, pass
+	 * children and write `<nav class="footer-section">` yourself.
+	 */
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+
+	interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLAttributes<HTMLElement>, 'color'> {
+		sections?: FooterSection[];
+		/** The last row: copyright, legal links, social icons. */
+		bottom?: Snippet;
+		class?: string;
+		/** Columns of your own, after `sections`. */
+		children?: Snippet;
+	}
+
+	// The axes are deliberately NOT destructured: they travel in `axes` and are
+	// resolved by name, so an axis a family drops changes nothing down here.
+	let {
+		sections = [],
+		bottom,
+		class: klass = '',
+		children,
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+	let classes = $derived(cx(PREFIX, applied.classes, klass));
+</script>
+
+<footer {...applied.rest} class={classes}>
+	{#if sections.length || children}
+		<div class="footer-sections">
+			{#each sections as s (s.title)}
+				<nav class="footer-section" aria-label={s.title}>
+					<h2 class="footer-title">{s.title}</h2>
+					{#each s.links as l (l.href)}<a href={l.href}>{l.label}</a>{/each}
+				</nav>
+			{/each}
+			{@render children?.()}
+		</div>
+	{/if}
+	{#if bottom}<div class="footer-bottom">{@render bottom()}</div>{/if}
+</footer>

package/dist/components/Footer.svelte.d.ts

@@ -0,0 +1,37 @@
+/** What .footer is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015). */
+export declare const PREFIX = "footer";
+export declare const AXES: {
+    readonly color: readonly ["primary", "secondary", "accent", "neutral", "info", "success", "warning", "error"];
+};
+export declare const FLAGS: {
+    readonly center: "Centre the columns and the bottom row.";
+};
+export declare const PARTS: readonly ["sections", "section", "title", "bottom"];
+export interface FooterSection {
+    title: string;
+    links: {
+        label: string;
+        href: string;
+    }[];
+}
+/**
+     * The closing block of a page: columns of links, then a bottom row.
+     *
+     * `sections` draws the columns from data; for anything else, pass
+     * children and write `<nav class="footer-section">` yourself.
+     */
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+import { type AxisProps } from '../variants.js';
+interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, Omit<HTMLAttributes<HTMLElement>, 'color'> {
+    sections?: FooterSection[];
+    /** The last row: copyright, legal links, social icons. */
+    bottom?: Snippet;
+    class?: string;
+    /** Columns of your own, after `sections`. */
+    children?: Snippet;
+}
+declare const Footer: import("svelte").Component<Props, {}, "">;
+type Footer = ReturnType<typeof Footer>;
+export default Footer;

package/dist/components/Grid.svelte

@@ -0,0 +1,122 @@
+<script module lang="ts">
+	/** What .grid is made of, classified. The props follow the
+	    families the project registers (variants.ts, ADR 0015).
+
+	    `masonry` is a PART, not a flag: its prop changes what is drawn (the
+	    lanes), so it is written by hand below. */
+	export const PREFIX = 'grid';
+
+	export const AXES = {
+		size: ['xs', 'sm', 'md', 'lg', 'xl'],
+		/* Space between the items. */
+		gap: ['none', 'tight', 'loose']
+	} as const;
+
+	export const FLAGS = {
+		loading: 'Fade the items while new ones are on their way.'
+	} as const;
+	export const PARTS = ['item', 'item-selected', 'item-dirty', 'lane', 'masonry', 'empty'] as const;
+</script>
+
+<script lang="ts" generics="Item">
+	/**
+	 * Items in as many columns as fit: a column is at least the family's
+	 * minimum wide, so the count follows the width, never a breakpoint. What
+	 * an item looks like is the `item` snippet's — a card, usually.
+	 *
+	 * `masonry` stacks each column on its own instead of lining items up in
+	 * rows: the grid deals the items into its columns in turn, so the reading
+	 * order stays row by row.
+	 */
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { applyAxes, cx, type AxisProps } from '../variants.js';
+
+	interface Props extends AxisProps<typeof AXES, typeof FLAGS, typeof PREFIX>, HTMLAttributes<HTMLDivElement> {
+		/** The items: your data, as is. */
+		items?: Item[];
+		/** How one item is drawn. */
+		item: Snippet<[Item, number]>;
+		/** An item's identity, for `selected`, `dirty` and keyed rendering. Defaults to its index. */
+		key?: (item: Item, index: number) => string;
+		/** Drawn in place of the items when there are none. */
+		empty?: Snippet;
+		/** Keys of the items to draw as selected. */
+		selected?: Iterable<string>;
+		/** Keys of the items to draw as changed and not yet saved. */
+		dirty?: Iterable<string>;
+		/** Stack each column on its own, items of uneven height packed tight. */
+		masonry?: boolean;
+		class?: string;
+	}
+
+	let {
+		items = [],
+		item,
+		key = (_item: Item, i: number) => String(i),
+		empty,
+		selected,
+		dirty,
+		masonry = false,
+		class: klass = '',
+		...axes
+	}: Props = $props();
+
+	let applied = $derived(applyAxes(PREFIX, AXES, FLAGS, axes));
+	let classes = $derived(cx(PREFIX, applied.classes, masonry && `${PREFIX}-masonry`, klass));
+
+	let selectedSet = $derived(new Set(selected ?? []));
+	let dirtySet = $derived(new Set(dirty ?? []));
+
+	/* Masonry: how many columns the browser made, read off the computed
+	   track list — the CSS stays the one place that decides it. */
+	let root: HTMLDivElement | undefined = $state();
+	let count = $state(1);
+
+	$effect(() => {
+		if (!masonry || !root) return;
+		const el = root;
+		const measure = () => {
+			const tracks = getComputedStyle(el).gridTemplateColumns.split(' ').filter(Boolean).length;
+			count = Math.max(1, tracks);
+		};
+		measure();
+		const observer = new ResizeObserver(measure);
+		observer.observe(el);
+		return () => observer.disconnect();
+	});
+
+	/** Item i goes to lane i mod n: row by row, as a reader expects. */
+	let lanes = $derived.by(() => {
+		const out: { item: Item; index: number }[][] = Array.from({ length: count }, () => []);
+		items.forEach((it, index) => out[index % count]!.push({ item: it, index }));
+		return out;
+	});
+
+	function itemClass(it: Item, i: number) {
+		const k = key(it, i);
+		return cx(
+			`${PREFIX}-item`,
+			selectedSet.has(k) && `${PREFIX}-item-selected`,
+			dirtySet.has(k) && `${PREFIX}-item-dirty`
+		);
+	}
+</script>
+
+<div {...applied.rest} bind:this={root} class={classes}>
+	{#if !items.length}
+		{#if empty}<div class={`${PREFIX}-empty`}>{@render empty()}</div>{/if}
+	{:else if masonry}
+		{#each lanes as lane, li (li)}
+			<div class={`${PREFIX}-lane`}>
+				{#each lane as entry (key(entry.item, entry.index))}
+					<div class={itemClass(entry.item, entry.index)}>{@render item(entry.item, entry.index)}</div>
+				{/each}
+			</div>
+		{/each}
+	{:else}
+		{#each items as it, i (key(it, i))}
+			<div class={itemClass(it, i)}>{@render item(it, i)}</div>
+		{/each}
+	{/if}
+</div>

package/dist/components/Grid.svelte.d.ts

@@ -0,0 +1,72 @@
+/** What .grid is made of, classified. The props follow the
+    families the project registers (variants.ts, ADR 0015).
+
+    `masonry` is a PART, not a flag: its prop changes what is drawn (the
+    lanes), so it is written by hand below. */
+export declare const PREFIX = "grid";
+export declare const AXES: {
+    readonly size: readonly ["xs", "sm", "md", "lg", "xl"];
+    readonly gap: readonly ["none", "tight", "loose"];
+};
+export declare const FLAGS: {
+    readonly loading: "Fade the items while new ones are on their way.";
+};
+export declare const PARTS: readonly ["item", "item-selected", "item-dirty", "lane", "masonry", "empty"];
+/**
+     * Items in as many columns as fit: a column is at least the family's
+     * minimum wide, so the count follows the width, never a breakpoint. What
+     * an item looks like is the `item` snippet's — a card, usually.
+     *
+     * `masonry` stacks each column on its own instead of lining items up in
+     * rows: the grid deals the items into its columns in turn, so the reading
+     * order stays row by row.
+     */
+import type { Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+declare function $$render<Item>(): {
+    props: {
+        readonly size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
+        readonly gap?: "none" | "tight" | "loose" | undefined;
+    } & {
+        loading?: boolean | undefined;
+    } & {
+        background?: string;
+    } & HTMLAttributes<HTMLDivElement> & {
+        /** The items: your data, as is. */
+        items?: Item[];
+        /** How one item is drawn. */
+        item: Snippet<[Item, number]>;
+        /** An item's identity, for `selected`, `dirty` and keyed rendering. Defaults to its index. */
+        key?: (item: Item, index: number) => string;
+        /** Drawn in place of the items when there are none. */
+        empty?: Snippet;
+        /** Keys of the items to draw as selected. */
+        selected?: Iterable<string>;
+        /** Keys of the items to draw as changed and not yet saved. */
+        dirty?: Iterable<string>;
+        /** Stack each column on its own, items of uneven height packed tight. */
+        masonry?: boolean;
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Item> {
+    props(): ReturnType<typeof $$render<Item>>['props'];
+    events(): ReturnType<typeof $$render<Item>>['events'];
+    slots(): ReturnType<typeof $$render<Item>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Item>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Item>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Item>['props']>, ReturnType<__sveltets_Render<Item>['events']>, ReturnType<__sveltets_Render<Item>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Item>['bindings']>;
+    } & ReturnType<__sveltets_Render<Item>['exports']>;
+    <Item>(internal: unknown, props: ReturnType<__sveltets_Render<Item>['props']> & {}): ReturnType<__sveltets_Render<Item>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Grid: $$IsomorphicComponent;
+type Grid<Item> = InstanceType<typeof Grid<Item>>;
+export default Grid;