@heyramzi/ui 2.24.0 → 3.1.0

package/src/work/gantt/gantt.test.ts

@@ -47,7 +47,9 @@ describe("TaskGantt", () => {
 
   it("moves a bar a day on an arrow key, and grows it on shift plus arrow", async () => {
     const changes: GanttChange[] = [];
-    const root = render({ onChange: (_id: string, change: GanttChange) => changes.push(change) });
+    const root = render({
+      onDatesChange: (_id: string, change: GanttChange) => changes.push(change),
+    });
     const bar = root.querySelector("[data-bar]");
     bar?.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true }));
     bar?.dispatchEvent(
@@ -60,7 +62,17 @@ describe("TaskGantt", () => {
     ]);
   });
 
-  it("selects on Enter and stays read-only without onChange", async () => {
+  it("announces a bar's new dates after an arrow key and keeps focus on it", async () => {
+    const root = render({ onDatesChange: () => {} });
+    const bar = root.querySelector<HTMLElement>('[data-bar="a"]');
+    bar?.focus();
+    bar?.dispatchEvent(new KeyboardEvent("keydown", { key: "ArrowRight", bubbles: true }));
+    for (let i = 0; i < 4; i++) await tick();
+    expect(root.querySelector('[role="status"]')?.textContent).toBe("Now Oct 6 to Oct 10, 5 days");
+    expect(document.activeElement).toBe(root.querySelector('[data-bar="a"]'));
+  });
+
+  it("selects on Enter and stays read-only without onDatesChange", async () => {
     const picked: string[] = [];
     const root = render({ onSelect: (id: string) => picked.push(id) });
     const bar = root.querySelector("[data-bar]");

package/src/work/inbox/inbox-card.svelte

@@ -36,8 +36,8 @@
 		item: InboxItem;
 		/** The keyboard cursor is on this card. */
 		selected?: boolean;
-		onselect?: () => void;
-		onverdict: (verdict: InboxVerdict) => void;
+		onSelect?: () => void;
+		onVerdict: (verdict: InboxVerdict) => void;
 		/** Replaces the summary lines, for a host that renders its own proposal. */
 		renderProposal?: Snippet<[InboxItem]>;
 		/** How the source time reads. Defaults to a relative time, never a raw ISO string. */
@@ -50,8 +50,8 @@
 	let {
 		item,
 		selected = false,
-		onselect,
-		onverdict,
+		onSelect,
+		onVerdict,
 		renderProposal,
 		when = whenOf,
 	}: Props = $props();
@@ -108,7 +108,7 @@
 		if (!open) return;
 		// Sending the decline template closes the item as declined, whichever button sent it.
 		const type = selectedDraft?.outcome === "decline" ? "decline" : "approve";
-		onverdict({ type, id: item.id, draft: current() });
+		onVerdict({ type, id: item.id, draft: current() });
 	}
 
 	export function decline() {
@@ -120,7 +120,7 @@
 			edit();
 			return;
 		}
-		onverdict({ type: "decline", id: item.id });
+		onVerdict({ type: "decline", id: item.id });
 	}
 
 	export function steer() {
@@ -135,13 +135,13 @@
 	}
 
 	export function undo() {
-		if (canUndo(item)) onverdict({ type: "undo", id: item.id });
+		if (canUndo(item)) onVerdict({ type: "undo", id: item.id });
 	}
 
 	function submitSteer() {
 		const text = note.trim();
 		if (!text) return;
-		onverdict({ type: "steer", id: item.id, note: text });
+		onVerdict({ type: "steer", id: item.id, note: text });
 		steering = false;
 		note = "";
 	}
@@ -171,19 +171,16 @@
 	);
 </script>
 
-<!-- WHY a card only while it waits: a decided or automatic item is a line in a log, so it
-     drops to the grey ground and the queue stays scannable. The card step draws its own
-     hairline, so a border on top of it would show a 2px edge. -->
-<!-- WHY a focusable article: j and k move focus card to card, and a screen reader
-     reads the card as one labelled unit. -->
+<!-- Only a waiting item is a card; the card step draws its own hairline, so a border here
+     doubles it. Focusable so j and k move card to card. -->
 <!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <article
 	data-inbox-item={item.id}
 	data-selected={selected || undefined}
 	aria-label={item.title}
 	tabindex={selected ? 0 : -1}
-	onfocusin={onselect}
-	onpointerdown={onselect}
+	onfocusin={onSelect}
+	onpointerdown={onSelect}
 	class={cn(
 		"flex flex-col gap-3 p-3 outline-none transition-[background-color,box-shadow] duration-quick ease-smooth-out motion-reduce:transition-none",
 		"focus-visible:shadow-(--ring-focus)",
@@ -327,7 +324,7 @@
 				selected={selectedDraft.templateId}
 				bind:edits
 				bind:bodyEl
-				onpick={(id) => (pickedDraft = id)}
+				onPick={(id) => (pickedDraft = id)}
 			/>
 		</div>
 	{/if}

package/src/work/inbox/inbox-card.svelte.d.ts

@@ -0,0 +1,22 @@
+import { type Snippet } from "svelte";
+import type { InboxItem, InboxVerdict } from "./inbox-types.js";
+interface Props {
+    item: InboxItem;
+    /** The keyboard cursor is on this card. */
+    selected?: boolean;
+    onSelect?: () => void;
+    onVerdict: (verdict: InboxVerdict) => void;
+    /** Replaces the summary lines, for a host that renders its own proposal. */
+    renderProposal?: Snippet<[InboxItem]>;
+    /** How the source time reads. Defaults to a relative time, never a raw ISO string. */
+    when?: (at: string) => string;
+}
+declare const $$Component: import("svelte").Component<Props, {
+    approve: () => void;
+    decline: () => void;
+    steer: () => void;
+    edit: () => void;
+    undo: () => void;
+}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/work/inbox/inbox-draft.svelte

@@ -14,7 +14,7 @@
 		/** What the person typed, by template. A template with no entry shows the agent's text. */
 		edits: InboxDraftEdits;
 		/** The person picked another template. */
-		onpick: (templateId: string) => void;
+		onPick: (templateId: string) => void;
 		/** The body field, so a shortcut can focus it. */
 		bodyEl?: HTMLTextAreaElement | null;
 		disabled?: boolean;
@@ -25,7 +25,7 @@
 		drafts,
 		recommended,
 		selected,
-		onpick,
+		onPick,
 		edits = $bindable(),
 		bodyEl = $bindable(null),
 		disabled = false,
@@ -48,7 +48,7 @@
 			variant="outline"
 			size="sm"
 			value={selected}
-			onValueChange={(next) => next && onpick(next)}
+			onValueChange={(next) => next && onPick(next)}
 			aria-label="Reply template"
 			class="flex-wrap"
 		>

package/src/work/inbox/inbox-draft.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { InboxDraft, InboxDraftEdits } from "./inbox-types.js";
+interface Props {
+    drafts: InboxDraft[];
+    /** The template the agent picked. Marked in the picker. */
+    recommended?: string;
+    selected: string;
+    /** What the person typed, by template. A template with no entry shows the agent's text. */
+    edits: InboxDraftEdits;
+    /** The person picked another template. */
+    onPick: (templateId: string) => void;
+    /** The body field, so a shortcut can focus it. */
+    bodyEl?: HTMLTextAreaElement | null;
+    disabled?: boolean;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "edits" | "bodyEl">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/work/inbox/inbox-trace.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { InboxTrace } from "./inbox-types.js";
+interface Props {
+    trace: InboxTrace;
+    /** The reasoning no other line of the card says. Empty when the card already shows it. */
+    reasoning?: string;
+    /** The name the card's meta line shows, so the source label doesn't repeat it. */
+    agent?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/work/index.ts

@@ -39,30 +39,6 @@ export {
   parseMinutes,
   personColor,
 } from "./time/duration.js";
-export {
-  confidenceLevel,
-  inboxConfidence,
-  inboxKinds,
-  inboxStates,
-} from "./inbox/index.js";
-export type {
-  InboxAgent,
-  InboxConfidence,
-  InboxDraft,
-  InboxDraftEdit,
-  InboxDraftEdits,
-  InboxEvidence,
-  InboxItem,
-  InboxKind,
-  InboxOutcome,
-  InboxProject,
-  InboxProposal,
-  InboxSourceType,
-  InboxState,
-  InboxTier,
-  InboxTrace,
-  InboxVerdict,
-} from "./inbox/index.js";
 export { DEFAULT_TIME_LABELS } from "./time/time-types.js";
 export type {
   TimeLabels,

package/src/work/kanban-board.svelte

@@ -1,6 +1,8 @@
 <script lang="ts" generics="T, C extends KanbanColumnDef = KanbanColumnDef">
 	import type { Snippet } from "svelte";
 	import { slide } from "svelte/transition";
+	import LiveRegion from "../lib/live-region.svelte";
+	import { focusAfterRender } from "../lib/focus.js";
 	import KanbanColumn from "./kanban-column.svelte";
 	import KanbanColumnHead from "./kanban-column-head.svelte";
 	import KanbanFoldChevron from "./kanban-fold-chevron.svelte";
@@ -51,8 +53,10 @@
 		wrapColumn?: Snippet<[C, Snippet<[Record<string, unknown>]>]>;
 		/** Enter or Space on a focused card. Leave out when the card holds its own links and buttons. */
 		onSelect?: (id: string) => void;
-		/** The screen-reader name of a card. Defaults to a hint about the keyboard move. */
+		/** The screen-reader name of a card. Defaults to the card's own text. */
 		getLabel?: (item: T) => string;
+		/** Read after a card's name, as its description. */
+		moveHint?: string;
 		emptyLabel?: string;
 		/** Shows a plus in each default column head that adds a card to that column. */
 		onAdd?: (columnId: string) => void;
@@ -93,6 +97,8 @@
 		 * preventDefault, so it is not a drop target.
 		 */
 		isDroppable?: (columnId: string) => boolean;
+		/** What a screen reader hears after a card moves with the keyboard. */
+		movedLabel?: (column: C) => string;
 		class?: string;
 	}
 
@@ -111,6 +117,7 @@
 		columnFooter,
 		wrapColumn,
 		getLabel,
+		moveHint = "Press Alt plus Left or Right arrow to move between columns.",
 		onSelect,
 		emptyLabel = "Nothing here yet",
 		onAdd,
@@ -129,6 +136,7 @@
 		hiddenItem,
 		dropAtTop,
 		isDroppable,
+		movedLabel = (column) => `Moved to ${column.label}`,
 		class: className,
 	}: Props<T, C> = $props();
 
@@ -155,6 +163,19 @@
 	const rail = board.rail;
 
 	type ColumnView = KanbanColumnView<T, C>;
+
+	const uid = $props.id();
+	const hintId = `${uid}-hint`;
+	let boardEl: HTMLDivElement | undefined = $state();
+	let live: LiveRegion | undefined = $state();
+
+	async function onCardKeyDown(e: KeyboardEvent, id: string) {
+		const moved = board.onCardKeyDown(e, id);
+		if (!moved) return;
+		await moved.done;
+		void live?.announce(movedLabel(moved.column));
+		await focusAfterRender(boardEl, `[data-kanban-card="${CSS.escape(id)}"]`);
+	}
 </script>
 
 <!-- The slot keeps the drag state where it is, or hovering it would bubble to the column and jump it to the end. -->
@@ -173,6 +194,7 @@
 
 {#snippet card(column: C, item: T, index: number, list: T[])}
 	{@const id = getId(item)}
+	{@const cardId = `${uid}-card-${encodeURIComponent(id)}`}
 	{@const nextId = board.idAt(list, index + 1)}
 	{@const isSource = dnd.isDragSource(id)}
 	<!-- The slot right after the held card is its own spot, so the card's place shows it instead. -->
@@ -186,8 +208,11 @@
 	<div
 		role="listitem"
 		tabindex="0"
-		aria-label={getLabel?.(item) ??
-			"Card. Press Alt plus Left or Right arrow to move between columns."}
+		id={cardId}
+		data-kanban-card={id}
+		aria-label={getLabel?.(item)}
+		aria-labelledby={getLabel ? undefined : cardId}
+		aria-describedby={hintId}
 		aria-keyshortcuts="Alt+ArrowLeft Alt+ArrowRight"
 		draggable="true"
 		ondragstart={(e) => {
@@ -200,7 +225,7 @@
 			rail.dragOverHidden = null;
 		}}
 		ondragover={(e) => dnd.onItemDragOver(e, column.id, id, nextId)}
-		onkeydown={(e) => board.onCardKeyDown(e, id)}
+		onkeydown={(e) => void onCardKeyDown(e, id)}
 		class={cn(
 			"kanban-card cursor-grab outline-none focus-visible:shadow-(--ring-focus) active:cursor-grabbing",
 			workLooks.card,
@@ -244,14 +269,19 @@
 			/>
 		{/snippet}
 
-		{#each head as item, index (getId(item))}
-			{@render card(column, item, index, list)}
-		{/each}
+		<!-- contents: the list owns the cards for screen readers and leaves the column's flex gap alone. -->
+		{#if head.length > 0}
+			<div role="list" class="contents">
+				{#each head as item, index (getId(item))}
+					{@render card(column, item, index, list)}
+				{/each}
+			</div>
+		{/if}
 
 		{#if showTail}
 			<!-- The tail sits shut in a 0fr row, so opening and closing animate its height. -->
 			<div class="kanban-fold" data-open={open} inert={!open}>
-				<div class="kanban-fold-inner">
+				<div class="kanban-fold-inner" role="list">
 					{#each tail as item, index (getId(item))}
 						{@render card(column, item, head.length + index, list)}
 					{/each}
@@ -289,6 +319,7 @@
 {/snippet}
 
 <div
+	bind:this={boardEl}
 	class={cn(
 		"kanban-board @container/kanban-board flex min-h-0 flex-1 items-stretch gap-4 overflow-x-auto pb-2",
 		"max-sm:-mx-4 max-sm:snap-x max-sm:snap-proximity max-sm:scroll-px-4 max-sm:px-4",
@@ -319,75 +350,81 @@
 			{hiddenItem}
 		/>
 	{/if}
+
+	<LiveRegion bind:this={live} />
+	<p id={hintId} hidden>{moveHint}</p>
 </div>
 
 <style>
-	/* A grid row folds the card out of the column smoothly, so the cards below slide up. */
-	.kanban-card {
-		display: grid;
-		grid-template-columns: minmax(0, 1fr);
-		grid-template-rows: 1fr;
-		transition:
-			grid-template-rows var(--duration-quick) var(--ease-smooth-out),
-			margin-top var(--duration-quick) var(--ease-smooth-out);
-	}
+	@layer theme, base, components, utilities;
 
-	.kanban-card > :global(*) {
-		min-height: 0;
-	}
+	@layer components {
+		/* A grid row folds the card out of the column smoothly, so the cards below slide up. */
+		.kanban-card {
+			display: grid;
+			grid-template-columns: minmax(0, 1fr);
+			grid-template-rows: 1fr;
+			transition:
+				grid-template-rows var(--duration-quick) var(--ease-smooth-out),
+				margin-top var(--duration-quick) var(--ease-smooth-out);
+		}
 
-	/* -0.375rem cancels the column's gap-1.5, so a folded card leaves no gap behind. */
-	.kanban-lifted-out {
-		grid-template-rows: 0fr;
-		margin-top: -0.375rem;
-	}
+		.kanban-card > :global(*) {
+			min-height: 0;
+		}
 
-	.kanban-lifted-out > :global(*) {
-		overflow: hidden;
-		visibility: hidden;
-	}
+		/* -0.375rem cancels the column's gap-1.5, so a folded card leaves no gap behind. */
+		.kanban-lifted-out {
+			grid-template-rows: 0fr;
+			margin-top: -0.375rem;
+		}
 
-	/* The fold: height rides grid-template-rows 0fr to 1fr, the fade runs shorter so it leads.
-	   Shut, -0.375rem cancels the well's gap-1.5, so a closed fold leaves no gap behind. */
-	.kanban-fold {
-		display: grid;
-		grid-template-rows: 0fr;
-		margin-top: -0.375rem;
-		opacity: 0;
-		transition:
-			grid-template-rows var(--duration-fast) var(--ease-smooth-out),
-			margin-top var(--duration-fast) var(--ease-smooth-out),
-			opacity var(--duration-quick) var(--ease-smooth-out);
-	}
+		.kanban-lifted-out > :global(*) {
+			overflow: hidden;
+			visibility: hidden;
+		}
 
-	.kanban-fold[data-open="true"] {
-		grid-template-rows: 1fr;
-		margin-top: 0;
-		opacity: 1;
-	}
+		/* The fold: height rides grid-template-rows 0fr to 1fr and the shorter fade leads.
+		   Shut, -0.375rem cancels the well's gap-1.5, so a closed fold leaves no gap. */
+		.kanban-fold {
+			display: grid;
+			grid-template-rows: 0fr;
+			margin-top: -0.375rem;
+			opacity: 0;
+			transition:
+				grid-template-rows var(--duration-fast) var(--ease-smooth-out),
+				margin-top var(--duration-fast) var(--ease-smooth-out),
+				opacity var(--duration-quick) var(--ease-smooth-out);
+		}
 
-	/* clip, not hidden: the margin lets a lifted card's shadow out while the fold stays shut.
-	   relative: a card's sr-only labels are absolute, and clip only cuts what this box contains.
-	   Without it they hang below a shut fold and the page scrolls past its last lane (TSK-1617). */
-	.kanban-fold-inner {
-		position: relative;
-		display: flex;
-		flex-direction: column;
-		gap: 0.375rem;
-		min-height: 0;
-		overflow: clip;
-		overflow-clip-margin: 0.375rem;
-	}
+		.kanban-fold[data-open="true"] {
+			grid-template-rows: 1fr;
+			margin-top: 0;
+			opacity: 1;
+		}
 
-	/* The held card's place keeps its hole, never its content. */
-	.kanban-origin-slot > :global(*) {
-		visibility: hidden;
-	}
+		/* clip, not hidden, lets a lifted card's shadow out. relative keeps cards' absolute
+		   sr-only labels clipped, or they hang below a shut fold and scroll the page (TSK-1617). */
+		.kanban-fold-inner {
+			position: relative;
+			display: flex;
+			flex-direction: column;
+			gap: 0.375rem;
+			min-height: 0;
+			overflow: clip;
+			overflow-clip-margin: 0.375rem;
+		}
 
-	@media (prefers-reduced-motion: reduce) {
-		.kanban-card,
-		.kanban-fold {
-			transition: none;
+		/* The held card's place keeps its hole, never its content. */
+		.kanban-origin-slot > :global(*) {
+			visibility: hidden;
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.kanban-card,
+			.kanban-fold {
+				transition: none;
+			}
 		}
 	}
 </style>

package/src/work/kanban-board.svelte.d.ts

@@ -0,0 +1,107 @@
+import type { Snippet } from "svelte";
+import type { KanbanCardContext, KanbanColumn as KanbanColumnDef, KanbanColumnContext, KanbanMove, KanbanSortKey } from "./kanban-types.js";
+interface Props<T, C extends KanbanColumnDef> {
+    /** Plain column defs, or your own type that extends one. Snippets get it back as you passed it. */
+    columns: C[];
+    items: T[];
+    /** The stable id of a card. Used for keys, drag payloads and move events. */
+    getId: (item: T) => string;
+    /** The column id a card belongs to. */
+    getColumn: (item: T) => string;
+    /** Called on drop with what to persist. Awaited, so the caller can save. */
+    onMove: (id: string, move: KanbanMove) => void | Promise<void>;
+    renderCard: Snippet<[T, KanbanCardContext]>;
+    /** Reads a card's manual order key. Required for `sortKey="manual"` ordering. */
+    boardOrder?: (item: T) => string | null | undefined;
+    /** Breaks a tie in manual order: two cards with the same key, or both without one. */
+    manualTiebreak?: (a: T, b: T) => number;
+    /** Extra named sorts, e.g. by title or owner. `manual` is always available. */
+    sortKeys?: KanbanSortKey<T>[];
+    /** The active sort. `"manual"` (default) orders by `boardOrder`, else by the order of `items`. */
+    sortKey?: string;
+    /** Optional column header. Defaults to the label plus a count. */
+    columnHeader?: Snippet<[C, KanbanColumnContext]>;
+    /** Rendered under a column's cards, e.g. a "Show all 12" or an add button. */
+    columnFooter?: Snippet<[C, KanbanColumnContext]>;
+    /**
+     * Wraps a column for a context menu or tooltip: render `column` once and spread the
+     * `props` it hands you, so the trigger lands on the column.
+     */
+    wrapColumn?: Snippet<[C, Snippet<[Record<string, unknown>]>]>;
+    /** Enter or Space on a focused card. Leave out when the card holds its own links and buttons. */
+    onSelect?: (id: string) => void;
+    /** The screen-reader name of a card. Defaults to the card's own text. */
+    getLabel?: (item: T) => string;
+    /** Read after a card's name, as its description. */
+    moveHint?: string;
+    emptyLabel?: string;
+    /** Shows a plus in each default column head that adds a card to that column. */
+    onAdd?: (columnId: string) => void;
+    /** The plus button's accessible name, followed by the column label. */
+    addLabel?: string;
+    /**
+     * Cards a column shows before the rest fold behind "Show N more": a number for every
+     * column, or per column (undefined for no cap). `Infinity` turns the fold off.
+     */
+    limit?: number | ((columnId: string) => number | undefined);
+    /** The fold's open button, given how many cards it holds. */
+    moreLabel?: (hidden: number) => string;
+    /** The fold's close button. */
+    lessLabel?: string;
+    /** The header caret's open and close names, followed by the column label. */
+    expandColumnLabel?: string;
+    collapseColumnLabel?: string;
+    /**
+     * Column ids the header caret opened. Pass one array to every board in a stack of
+     * swimlanes, so the caret opens that column in each. "Show N more" stays per board.
+     */
+    expanded?: string[];
+    onExpandedChange?: (ids: string[]) => void;
+    /** Column ids folded into the rail on the right. Controlled; leave out to let the board remember. */
+    hidden?: string[];
+    onHiddenChange?: (ids: string[]) => void;
+    /** Heading over the rail of hidden columns. */
+    hiddenLabel?: string;
+    /** The rail's button that brings every hidden column back. */
+    showAllLabel?: string;
+    /** Content of one entry in the hidden rail. Defaults to the label and a count. */
+    hiddenItem?: Snippet<[C, {
+        count: number;
+        active: boolean;
+    }]>;
+    /** A capped column is one whose tail is hidden, so its empty space drops on top. Overrides `limit`. */
+    dropAtTop?: (columnId: string) => boolean;
+    /**
+     * Override per-column drop targets. Defaults to each column's `droppable`
+     * flag (true when unset). A column it returns false for never calls
+     * preventDefault, so it is not a drop target.
+     */
+    isDroppable?: (columnId: string) => boolean;
+    /** What a screen reader hears after a card moves with the keyboard. */
+    movedLabel?: (column: C) => string;
+    class?: string;
+}
+declare function $$render<T, C extends KanbanColumnDef = KanbanColumnDef>(): {
+    props: Props<T, C>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T, C extends KanbanColumnDef = KanbanColumnDef> {
+    props(): ReturnType<typeof $$render<T, C>>['props'];
+    events(): ReturnType<typeof $$render<T, C>>['events'];
+    slots(): ReturnType<typeof $$render<T, C>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T, C extends KanbanColumnDef = KanbanColumnDef>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, C>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, C>['props']>, ReturnType<__sveltets_Render<T, C>['events']>, ReturnType<__sveltets_Render<T, C>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, C>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, C>['exports']>;
+    <T, C extends KanbanColumnDef = KanbanColumnDef>(internal: unknown, props: ReturnType<__sveltets_Render<T, C>['props']> & {}): ReturnType<__sveltets_Render<T, C>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const $$Component: $$IsomorphicComponent;
+type $$Component<T, C extends KanbanColumnDef = KanbanColumnDef> = InstanceType<typeof $$Component<T, C>>;
+export default $$Component;