@human-synthesis/norns-ui 0.1.0 → 0.2.0

package/src/types/Chart.d.ts

@@ -0,0 +1,21 @@
+import type { Component } from 'svelte';
+
+export type ChartType = 'bar' | 'line' | 'area';
+
+export type ChartProps = {
+	/** Rows to plot — typically a generated Query result. */
+	data?: Record<string, unknown>[];
+	type?: ChartType;
+	/** Field for the x axis / labels. Defaults to the first string field. */
+	x?: string;
+	/** Field for the y axis values. Defaults to the first numeric field. */
+	y?: string;
+	/** Accessible label for the rendered svg. */
+	label?: string;
+	/** Show per-point x labels under the plot. */
+	labels?: boolean;
+	class?: string;
+};
+
+declare const Chart: Component<ChartProps>;
+export default Chart;

package/src/types/ChatThread.d.ts

@@ -0,0 +1,27 @@
+import type { Component, Snippet } from 'svelte';
+
+export type ChatMessage = {
+	text?: string;
+	from?: string;
+	/** True for messages appended locally by this client's composer. */
+	self?: boolean;
+	[key: string]: unknown;
+};
+
+export type ChatThreadProps = {
+	/** Room name — a generated Page binds a `room: true` Worker here. */
+	roomChannel?: string;
+	/** Message type sent by the composer (default 'chat'). */
+	send?: string;
+	/** Message type appended to the thread (defaults to `send`). */
+	receive?: string;
+	placeholder?: string;
+	sendLabel?: string;
+	emptyMessage?: string;
+	/** Message renderer snippet — replaces the default from/text row. */
+	message?: Snippet<[ChatMessage]>;
+	class?: string;
+};
+
+declare const ChatThread: Component<ChatThreadProps>;
+export default ChatThread;

package/src/types/DataTable.d.ts

@@ -1,4 +1,4 @@
-import type { Component } from 'svelte';
+import type { Component, Snippet } from 'svelte';
 
 export type DataTableColumn = {
 	key: string;
@@ -20,6 +20,10 @@ export type DataTableProps = {
 	sortKey?: string;
 	sortDir?: 'asc' | 'desc';
 	onrowclick?: (row: Record<string, unknown>, index: number) => void;
+	/** Cell renderer snippet — receives (row, columnKey, value). */
+	cell?: Snippet<[Record<string, unknown>, string, unknown]>;
+	/** Rendered instead of emptyMessage when there are no rows. */
+	empty?: Snippet;
 	class?: string;
 };
 

package/src/types/Feed.d.ts

@@ -0,0 +1,19 @@
+import type { Component, Snippet } from 'svelte';
+
+export type FeedProps = {
+	/** SSE endpoint URL — frames append as entries. */
+	streamSource?: string;
+	/** Room name — received frames append as entries. */
+	roomChannel?: string;
+	/** Room message type to append ('*' for all, the default). */
+	receive?: string;
+	/** Newest entries kept (default 100). */
+	max?: number | string;
+	emptyMessage?: string;
+	/** Entry renderer snippet — replaces the default text/JSON line. */
+	item?: Snippet<[unknown]>;
+	class?: string;
+};
+
+declare const Feed: Component<FeedProps>;
+export default Feed;

package/src/types/Kanban.d.ts

@@ -0,0 +1,26 @@
+import type { Component, Snippet } from 'svelte';
+
+export type KanbanCard = Record<string, unknown>;
+
+export type KanbanProps = {
+	/** Cards grouped by column key — typically a grouped Query result. */
+	data?: Record<string, KanbanCard[]>;
+	/** Column order/labels: comma-separated keys, key list, or {key,label} list. */
+	columns?: string | Array<string | { key: string; label?: string }>;
+	/** Card field used as the card title. Defaults to the first string field. */
+	title?: string;
+	/** Card field rendered under the title when present. */
+	subtitle?: string;
+	/** Called after a drag between columns; binding an Action enables dragging. */
+	onMove?: (card: KanbanCard, to: string, from: string) => unknown;
+	oncardclick?: (card: KanbanCard) => void;
+	emptyMessage?: string;
+	/** Card renderer snippet — replaces the default title/subtitle block. */
+	card?: Snippet<[KanbanCard]>;
+	/** Rendered instead of emptyMessage in an empty column. */
+	empty?: Snippet;
+	class?: string;
+};
+
+declare const Kanban: Component<KanbanProps>;
+export default Kanban;

package/src/types/Listbox.d.ts

@@ -0,0 +1,19 @@
+import type { Component } from 'svelte';
+
+export type ListboxItem =
+	| string
+	| { value: unknown; label?: string; disabled?: boolean };
+
+export type ListboxProps = {
+	items?: ListboxItem[];
+	/** Selected value (array when `multiple`). Bindable. */
+	value?: unknown;
+	multiple?: boolean;
+	disabled?: boolean;
+	emptyMessage?: string;
+	onchange?: (value: unknown) => void;
+	class?: string;
+};
+
+declare const Listbox: Component<ListboxProps>;
+export default Listbox;

package/src/types/LiveLog.d.ts

@@ -0,0 +1,16 @@
+import type { Component } from 'svelte';
+
+export type LiveLogProps = {
+	/** SSE endpoint URL — each frame becomes a log line. */
+	streamSource?: string;
+	/** Room name — received frames become log lines. */
+	roomChannel?: string;
+	/** Room message type to log ('*' for all, the default). */
+	receive?: string;
+	/** Newest lines kept (default 200). */
+	maxLines?: number | string;
+	class?: string;
+};
+
+declare const LiveLog: Component<LiveLogProps>;
+export default LiveLog;

package/src/types/PresenceAvatars.d.ts

@@ -0,0 +1,17 @@
+import type { Component } from 'svelte';
+
+export type PresenceAvatarsProps = {
+	/** Room name — client count comes from the Room's presence broadcasts. */
+	roomChannel?: string;
+	/** Avatars shown before the +N overflow (default 5). */
+	max?: number | string;
+	size?: 'xs' | 'sm' | 'md' | 'lg';
+	/** Suffix after the count (default 'online'). */
+	label?: string;
+	/** Show the numeric count next to the avatars (default true). */
+	showCount?: boolean;
+	class?: string;
+};
+
+declare const PresenceAvatars: Component<PresenceAvatarsProps>;
+export default PresenceAvatars;

package/src/types/Spinner.d.ts

@@ -0,0 +1,12 @@
+import type { Component } from 'svelte';
+
+export type SpinnerProps = {
+	/** Tailwind size utility for the spinner glyph. */
+	size?: string;
+	/** Accessible label announced to screen readers. */
+	label?: string;
+	class?: string;
+};
+
+declare const Spinner: Component<SpinnerProps>;
+export default Spinner;

package/src/types/StreamText.d.ts

@@ -0,0 +1,18 @@
+import type { Component } from 'svelte';
+
+export type StreamTextProps = {
+	/** SSE endpoint URL — a generated Page binds a `stream:` Endpoint here. */
+	streamSource?: string;
+	/** JSON-able request body; the stream opens with POST when set. */
+	input?: unknown;
+	/** Open the stream on mount (default true). */
+	autostart?: boolean;
+	/** Called with each parsed frame as it arrives. */
+	onframe?: (frame: unknown) => void;
+	/** Called with the full accumulated text when the stream ends. */
+	ondone?: (text: string) => void;
+	class?: string;
+};
+
+declare const StreamText: Component<StreamTextProps>;
+export default StreamText;

package/src/types/Table.d.ts

@@ -1,4 +1,4 @@
-import type { Component } from 'svelte';
+import type { Component, Snippet } from 'svelte';
 import type { DataTableColumn } from './DataTable.js';
 
 export type TableColumn = DataTableColumn;
@@ -18,6 +18,10 @@ export type TableProps = {
 	stickyHeader?: boolean;
 	emptyMessage?: string;
 	onrowclick?: (row: Record<string, unknown>, index: number) => void;
+	/** Cell renderer snippet — receives (row, columnKey, value). */
+	cell?: Snippet<[Record<string, unknown>, string, unknown]>;
+	/** Rendered instead of emptyMessage when there are no rows. */
+	empty?: Snippet;
 	class?: string;
 };
 

package/src/types/Timeline.d.ts

@@ -10,6 +10,8 @@ export type TimelineItem = {
 
 export type TimelineProps = {
 	items?: TimelineItem[];
+	/** Alias for `items` — the prop a generated Page binds a Query result to. */
+	data?: TimelineItem[];
 	class?: string;
 };
 

package/src/types/Tree.d.ts

@@ -9,6 +9,8 @@ export type TreeNode = {
 
 export type TreeProps = {
 	items?: TreeNode[];
+	/** Alias for `items` — the prop a generated Page binds a Query result to. */
+	data?: TreeNode[];
 	/** Array of node ids that are expanded. Bindable. */
 	expanded?: (string | number)[];
 	/** Currently-selected node id. Bindable. */

package/src/types/Window.d.ts

@@ -0,0 +1,17 @@
+import type { Component, Snippet } from 'svelte';
+
+export type WindowProps = {
+	title?: string;
+	hideHeader?: boolean;
+	/** Renders the header close button when supplied. */
+	onClose?: (event: MouseEvent) => void;
+	onHeaderDoubleClick?: (event: MouseEvent) => void;
+	/** Extra header actions, rendered before the close button. */
+	actions?: Snippet;
+	children?: Snippet;
+	class?: string;
+	bodyClass?: string;
+};
+
+declare const Window: Component<WindowProps>;
+export default Window;