@heyramzi/ui 2.24.0 → 3.0.0

package/src/work/task-list.svelte.d.ts

@@ -0,0 +1,81 @@
+import type { Snippet } from "svelte";
+import type { KanbanColumn as KanbanColumnDef, KanbanMove, KanbanSortKey } from "./kanban-types.js";
+import type { TaskListGroupContext, TaskListRowContext } from "./task-types.js";
+interface Props<T, C extends KanbanColumnDef> {
+    /** The same shape as board columns, so one config feeds both views. */
+    groups: C[];
+    items: T[];
+    getId: (item: T) => string;
+    /** The group id a row belongs to. */
+    getGroup: (item: T) => string;
+    /**
+     * Nests a group under another by its id, e.g. a project under its client, so it folds with
+     * its parent. Return nothing for a top-level group.
+     */
+    getParent?: (group: C) => string | null | undefined;
+    /** Called on drop with what to persist. Same contract as the board. */
+    onMove: (id: string, move: KanbanMove) => void | Promise<void>;
+    renderRow: Snippet<[T, TaskListRowContext]>;
+    /** Optional sticky header row above every group, e.g. column labels. */
+    head?: Snippet;
+    groupHeader?: Snippet<[C, TaskListGroupContext]>;
+    /** Controls at the end of a group header, shown on hover, focus or a coarse pointer. */
+    actions?: Snippet<[C, TaskListGroupContext]>;
+    /** Rendered under a group's rows, e.g. an add-task row. Folds with the group. */
+    groupFooter?: Snippet<[C, TaskListGroupContext]>;
+    boardOrder?: (item: T) => string | null | undefined;
+    /** Breaks a tie in manual order: two rows with the same key, or both without one. */
+    manualTiebreak?: (a: T, b: T) => number;
+    /**
+     * Rows drag and take Alt plus Up or Down. Turn it off for a list that only groups, where
+     * rows hold their own links and buttons.
+     */
+    draggable?: boolean;
+    /** The screen-reader name of a row. Defaults to the row's own text. */
+    getLabel?: (item: T) => string;
+    /** Read after a draggable row's name, as its description. */
+    moveHint?: string;
+    /** What a screen reader hears after a row moves with the keyboard. */
+    movedLabel?: (group: C) => string;
+    /** Fires when a group is folded or unfolded, with every folded id. */
+    onCollapsedChange?: (ids: string[]) => void;
+    sortKeys?: KanbanSortKey<T>[];
+    sortKey?: string;
+    /** Groups can be folded from their header. Defaults to true. */
+    collapsible?: boolean;
+    /** Group ids that start folded. */
+    collapsed?: string[];
+    emptyLabel?: string;
+    /** Shows a plus in each default group head that adds a row to that group. */
+    onAdd?: (groupId: string) => void;
+    /** The plus button's accessible name, followed by the group label. */
+    addLabel?: string;
+    isDroppable?: (groupId: string) => boolean;
+    /** Drops the card chrome (border, radius, fill) so the list sits flat on the page. Group dividers stay. */
+    flat?: boolean;
+    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;

package/src/work/task-list.svelte.test.ts

@@ -0,0 +1,113 @@
+import { createRawSnippet, flushSync, mount, tick, unmount } from "svelte";
+import { describe, expect, it } from "vite-plus/test";
+import TaskList from "./task-list.svelte";
+import type { KanbanMove } from "./kanban-types.js";
+
+type Task = { id: string; groupId: string; title: string; boardOrder: string };
+
+const groups = [
+  { id: "todo", label: "To do" },
+  { id: "doing", label: "In progress" },
+  { id: "done", label: "Done" },
+];
+
+const renderRow = createRawSnippet((task: () => Task) => ({
+  render: () => `<p>${task().title}</p>`,
+}));
+
+function render(collapsed: string[] = []) {
+  const props = $state({
+    groups,
+    collapsed,
+    items: [
+      { id: "t1", groupId: "todo", title: "Draft notes", boardOrder: "a0" },
+      { id: "t2", groupId: "doing", title: "Ship flow", boardOrder: "a0" },
+      { id: "t3", groupId: "done", title: "Close out", boardOrder: "a0" },
+    ] as Task[],
+    getId: (t: Task) => t.id,
+    getGroup: (t: Task) => t.groupId,
+    boardOrder: (t: Task) => t.boardOrder,
+    renderRow,
+    onMove: (id: string, move: KanbanMove) => {
+      props.items = props.items.map((t) =>
+        t.id === id ? { ...t, groupId: move.columnId, boardOrder: move.boardOrder ?? "" } : t,
+      );
+    },
+  });
+  const target = document.createElement("div");
+  document.body.appendChild(target);
+  const app = mount(TaskList<Task>, { target, props });
+  flushSync();
+  return {
+    target,
+    row: (id: string) => target.querySelector<HTMLElement>(`[data-task-row="${id}"]`),
+    done: () => {
+      void unmount(app);
+      target.remove();
+    },
+  };
+}
+
+// Waits out the list's await of onMove and its tick, then Svelte's flush.
+async function settle() {
+  for (let i = 0; i < 4; i++) await tick();
+  flushSync();
+}
+
+// Svelte sets inert as a property, and jsdom doesn't reflect it to the attribute.
+function insideInert(el: HTMLElement | null): boolean {
+  for (let node = el; node; node = node.parentElement) if (node.inert) return true;
+  return false;
+}
+
+function pressAltDown(el: HTMLElement | null) {
+  el?.dispatchEvent(
+    new KeyboardEvent("keydown", { key: "ArrowDown", altKey: true, bubbles: true }),
+  );
+}
+
+describe("TaskList keyboard move", () => {
+  it("keeps focus on the moved row in its new group and announces the move", async () => {
+    const { target, row, done } = render();
+    row("t1")?.focus();
+    pressAltDown(row("t1"));
+    await settle();
+
+    const moved = row("t1");
+    expect(moved?.closest('section[aria-label="In progress"]')).not.toBeNull();
+    expect(document.activeElement).toBe(moved);
+    expect(target.querySelector('[role="status"]')?.textContent).toBe("Moved to In progress");
+    done();
+  });
+
+  it("opens a folded group a row moves into, so the row keeps focus", async () => {
+    const { row, done } = render(["doing"]);
+    row("t1")?.focus();
+    pressAltDown(row("t1"));
+    await settle();
+
+    const moved = row("t1");
+    expect(insideInert(moved)).toBe(false);
+    expect(document.activeElement).toBe(moved);
+    done();
+  });
+});
+
+describe("TaskList folds and names", () => {
+  it("makes a folded group's rows inert, so Tab skips them", () => {
+    const { row, done } = render(["done"]);
+    expect(insideInert(row("t3"))).toBe(true);
+    expect(insideInert(row("t1"))).toBe(false);
+    done();
+  });
+
+  it("names a row by its own text and describes it with the move hint", () => {
+    const { row, done } = render();
+    const el = row("t1");
+    expect(el?.hasAttribute("aria-label")).toBe(false);
+    expect(el?.getAttribute("aria-labelledby")).toBe(el?.id);
+    const hint = document.getElementById(el?.getAttribute("aria-describedby") ?? "");
+    expect(hint?.textContent).toBe("Press Alt plus Up or Down arrow to move between groups.");
+    done();
+  });
+});

package/src/work/time/time-chip.svelte

@@ -54,10 +54,8 @@
 		{/snippet}
 		<span aria-hidden="true">
 			{formatMinutes(minutes)}{#if estimate}<span
-					class={cn(
-						"font-normal",
-						tone === "neutral" ? "text-muted-foreground/70" : TONE_TEXT[tone],
-					)}>{`\u2009/\u2009${formatMinutes(estimate)}`}</span
+					class={cn("font-normal", tone === "neutral" ? "text-muted-foreground" : TONE_TEXT[tone])}
+					>{`\u2009/\u2009${formatMinutes(estimate)}`}</span
 				>{/if}
 		</span>
 	</StatusPill>

package/src/work/time/time-chip.svelte.d.ts

@@ -0,0 +1,14 @@
+interface Props {
+    /** Minutes logged on the task. */
+    minutes: number;
+    /** Minutes budgeted. Draws a small ring and tints the chip as the budget runs out. */
+    estimate?: number;
+    /** A timer is running on the task. */
+    running?: boolean;
+    /** Replaces the spoken name. Defaults to a sentence built from the numbers. */
+    label?: string;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/work/time/time-dot.svelte

@@ -18,24 +18,37 @@
 ></span>
 
 <style>
-	.time-dot {
-		position: relative;
-		display: inline-block;
-		flex: none;
-		width: var(--time-dot-size);
-		height: var(--time-dot-size);
-		/* A dot, the one round shape DESIGN rule 15 allows for a status. */
-		border-radius: 50%;
-		background: currentColor;
-	}
+	@layer theme, base, components, utilities;
+
+	@layer components {
+		.time-dot {
+			position: relative;
+			display: inline-block;
+			flex: none;
+			width: var(--time-dot-size);
+			height: var(--time-dot-size);
+			/* A dot, the one round shape DESIGN rule 15 allows for a status. */
+			border-radius: 50%;
+			background: currentColor;
+		}
+
+		.time-dot.is-running::after {
+			content: "";
+			position: absolute;
+			inset: 0;
+			border-radius: inherit;
+			background: currentColor;
+			animation: time-dot-pulse var(--time-pulse-duration, 2000ms) var(--ease-out, ease-out)
+				infinite;
+		}
 
-	.time-dot.is-running::after {
-		content: "";
-		position: absolute;
-		inset: 0;
-		border-radius: inherit;
-		background: currentColor;
-		animation: time-dot-pulse var(--time-pulse-duration, 2000ms) var(--ease-out, ease-out) infinite;
+		@media (prefers-reduced-motion: reduce) {
+			.time-dot.is-running::after {
+				animation: none;
+				transform: scale(1.9);
+				opacity: 0.25;
+			}
+		}
 	}
 
 	@keyframes time-dot-pulse {
@@ -48,12 +61,4 @@
 			opacity: 0;
 		}
 	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.time-dot.is-running::after {
-			animation: none;
-			transform: scale(1.9);
-			opacity: 0.25;
-		}
-	}
 </style>

package/src/work/time/time-dot.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    /** Pulses while true. The dot takes its color from the text around it. */
+    running?: boolean;
+    size?: number;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/work/time/time-ring.svelte

@@ -63,19 +63,23 @@
 </span>
 
 <style>
-	.time-ring-arc {
-		transition:
-			stroke-dasharray var(--duration-slow) var(--ease-smooth-out),
-			color var(--duration-fast) var(--ease-smooth-out);
-	}
-
-	.time-ring-arc.is-empty {
-		opacity: 0;
-	}
+	@layer theme, base, components, utilities;
 
-	@media (prefers-reduced-motion: reduce) {
+	@layer components {
 		.time-ring-arc {
-			transition: none;
+			transition:
+				stroke-dasharray var(--duration-slow) var(--ease-smooth-out),
+				color var(--duration-fast) var(--ease-smooth-out);
+		}
+
+		.time-ring-arc.is-empty {
+			opacity: 0;
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.time-ring-arc {
+				transition: none;
+			}
 		}
 	}
 </style>

package/src/work/time/time-ring.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from "svelte";
+interface Props {
+    /** Minutes logged. */
+    value: number;
+    /** Minutes budgeted. The ring turns warning at 90% and destructive past 100%. */
+    max: number;
+    /** Pixels. */
+    size?: number;
+    /** Stroke width in a 36 unit box. */
+    stroke?: number;
+    label?: string;
+    /** Rendered in the middle, e.g. the percentage. */
+    children?: Snippet;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/work/time/time-tracker.svelte

@@ -313,7 +313,7 @@
 				</Button>
 			</form>
 			{#if invalid}
-				<p id="time-invalid" class="text-xs text-destructive" role="alert">{labels.invalid}</p>
+				<p id="time-invalid" class="text-xs text-destructive-ink" role="alert">{labels.invalid}</p>
 			{/if}
 
 			{#if entries.length > 0 || estimate}
@@ -433,50 +433,68 @@
 </section>
 
 <style>
-	/* A running timer tints the whole split button in the accent. */
-	.time-chip {
-		transition: background-color var(--duration-fast) var(--ease-smooth-out);
-	}
-
-	.time-chip.is-running {
-		background: color-mix(in oklab, var(--tone-accent, var(--color-primary)) 10%, transparent);
-	}
+	@layer theme, base, components, utilities;
 
+	/* Unlayered: the ghost button's hover and open text-foreground would otherwise drop the running accent. */
 	.time-chip.is-running :global(.time-open) {
 		color: var(--tone-accent, var(--color-primary));
 	}
 
-	.time-segment {
-		transition: width var(--duration-slow) var(--ease-smooth-out);
-	}
-
-	.time-row :global(.time-delete) {
-		opacity: 0;
-	}
+	@layer components {
+		/* A running timer tints the whole split button in the accent. */
+		.time-chip {
+			transition: background-color var(--duration-fast) var(--ease-smooth-out);
+		}
 
-	.time-row:focus-within :global(.time-delete) {
-		opacity: 1;
-	}
+		.time-chip.is-running {
+			background: color-mix(in oklab, var(--tone-accent, var(--color-primary)) 10%, transparent);
+		}
 
-	@media (hover: hover) and (pointer: fine) {
-		.time-row:hover :global(.time-delete) {
-			opacity: 1;
+		.time-segment {
+			transition: width var(--duration-slow) var(--ease-smooth-out);
 		}
-	}
 
-	@media (hover: none) {
 		.time-row :global(.time-delete) {
+			opacity: 0;
+		}
+
+		.time-row:focus-within :global(.time-delete) {
 			opacity: 1;
 		}
-	}
 
-	.time-pop,
-	.time-preview {
-		animation: time-pop var(--duration-quick) var(--ease-smooth-out) backwards;
-	}
+		@media (hover: hover) and (pointer: fine) {
+			.time-row:hover :global(.time-delete) {
+				opacity: 1;
+			}
+		}
+
+		@media (hover: none) {
+			.time-row :global(.time-delete) {
+				opacity: 1;
+			}
+		}
+
+		.time-pop,
+		.time-preview {
+			animation: time-pop var(--duration-quick) var(--ease-smooth-out) backwards;
+		}
+
+		.time-row.is-new {
+			animation: time-row-in var(--duration-fast) var(--ease-smooth-out) backwards;
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.time-chip,
+			.time-segment {
+				transition: none;
+			}
 
-	.time-row.is-new {
-		animation: time-row-in var(--duration-fast) var(--ease-smooth-out) backwards;
+			.time-pop,
+			.time-preview,
+			.time-row.is-new {
+				animation: none;
+			}
+		}
 	}
 
 	@keyframes time-pop {
@@ -494,17 +512,4 @@
 			filter: blur(var(--blur-small));
 		}
 	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.time-chip,
-		.time-segment {
-			transition: none;
-		}
-
-		.time-pop,
-		.time-preview,
-		.time-row.is-new {
-			animation: none;
-		}
-	}
 </style>

package/src/work/time/time-tracker.svelte.d.ts

@@ -0,0 +1,59 @@
+import type { Snippet } from "svelte";
+import type { TimeLabels, TimeLogInput, TimeRunning, TimeStopInfo } from "./time-types.js";
+interface Props<T> {
+    /** Every entry logged on the task. Order within a day is kept. */
+    entries: T[];
+    getId: (entry: T) => string;
+    getMinutes: (entry: T) => number;
+    /** The day worked, `YYYY-MM-DD`. */
+    getDay: (entry: T) => string;
+    /** The name shown for the person who logged it. */
+    getPerson: (entry: T) => string;
+    /** Groups the split by id when two people share a name. Defaults to the name. */
+    getPersonId?: (entry: T) => string;
+    getNote?: (entry: T) => string | null | undefined;
+    /** The timer in progress, or null. The host stores it, so it survives a reload. */
+    running?: TimeRunning | null;
+    /** Minutes budgeted for the task. Draws the progress ring. */
+    estimate?: number;
+    onStart?: () => void | Promise<void>;
+    /** Called with the elapsed time. Log it, then clear `running`. */
+    onStop?: (info: TimeStopInfo) => void | Promise<void>;
+    /** A manual entry. Return false, or throw, to keep what was typed. */
+    onLog: (input: TimeLogInput) => void | boolean | Promise<void | boolean>;
+    /** Shows a delete button on rows where `canDelete` allows it. */
+    onDelete?: (entry: T) => void | Promise<void>;
+    canDelete?: (entry: T) => boolean;
+    /** Extra text after the note, e.g. the project. */
+    renderMeta?: Snippet<[T]>;
+    /** BCP 47 tag for day names. Defaults to the browser's. */
+    locale?: string;
+    labels?: Partial<TimeLabels>;
+    /** Kept so existing callers compile. The tracker is always the compact chip now, so it does nothing. */
+    flat?: boolean;
+    class?: string;
+}
+declare function $$render<T>(): {
+    props: Props<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const $$Component: $$IsomorphicComponent;
+type $$Component<T> = InstanceType<typeof $$Component<T>>;
+export default $$Component;

package/dist/ai/index.js

@@ -1,40 +0,0 @@
-// =========================
-// TYPING DOTS
-// =========================
-export { TypingDots } from "./typing-dots/index.js";
-// =========================
-// RESPONSE (markdown)
-// =========================
-export { Response } from "./response/index.js";
-// =========================
-// SUGGESTION
-// =========================
-export { Suggestion, Suggestions } from "./suggestion/index.js";
-// =========================
-// PROMPT INPUT
-// =========================
-export { PromptInput, PromptInputBody, PromptInputToolbar, PromptInputTextarea, PromptInputSubmit } from "./prompt-input/index.js";
-// =========================
-// CONFIRMATION
-// =========================
-export { Confirmation, ConfirmationTitle, ConfirmationState, ConfirmationActions, ConfirmationAction } from "./confirmation/index.js";
-// =========================
-// VOICE WAVEFORM
-// =========================
-export { VoiceWaveform } from "./voice-waveform/index.js";
-// =========================
-// REASONING
-// =========================
-export { Reasoning, ReasoningTrigger, ReasoningContent } from "./reasoning/index.js";
-// =========================
-// LOADING STATE
-// =========================
-export { PixelLoader } from "./loading-state/index.js";
-// =========================
-// AI BUTTON
-// =========================
-export { AiButton } from "./ai-button/index.js";
-// =========================
-// GENERATION PROGRESS
-// =========================
-export { GenerationProgress } from "./generation-progress/index.js";

package/dist/index.js

@@ -1,18 +0,0 @@
-export { default as BorderBeam } from "../src/effects/border-beam/BorderBeam.svelte";
-export { sizePresets, sizeThemePresets, themeColors } from "./effects/border-beam/presets.js";
-export { default as ThemeToggle } from "../src/effects/theme-toggle/ThemeToggle.svelte";
-export { default as AnimatedBeam } from "../src/effects/animated-beam/AnimatedBeam.svelte";
-export { default as Spotlight } from "../src/effects/spotlight/Spotlight.svelte";
-export { default as MagicCard } from "../src/effects/magic-card/MagicCard.svelte";
-export { default as Marquee } from "../src/effects/marquee/Marquee.svelte";
-export { default as ImageReveal } from "../src/effects/image-reveal/ImageReveal.svelte";
-export { default as ShaderGradient } from "../src/effects/shader-gradient/ShaderGradient.svelte";
-export { default as InView } from "../src/effects/reveal/InView.svelte";
-export { default as AnimatedGroup } from "../src/effects/reveal/AnimatedGroup.svelte";
-export { default as TextEffect } from "../src/effects/reveal/TextEffect.svelte";
-export { observeInView } from "./effects/reveal/observe.js";
-export { default as ProgressiveBlur } from "../src/effects/progressive-blur/ProgressiveBlur.svelte";
-export { default as InteractiveHoverButton } from "../src/effects/interactive-hover-button/InteractiveHoverButton.svelte";
-export { default as ImageComparison } from "../src/effects/image-comparison/ImageComparison.svelte";
-export { magnetic } from "./effects/magnetic/magnetic.js";
-export { revealTheme } from "./lib/theme-transition.js";