@heyramzi/ui 2.24.0 → 3.0.0

package/src/work/gantt/gantt-grid.svelte

@@ -73,28 +73,40 @@
 </div>
 
 <style>
-	.g-today {
-		transform-origin: top;
-		animation: g-today-in var(--duration-slow) var(--ease-smooth-out) backwards;
-	}
+	@layer theme, base, components, utilities;
 
-	.g-arrow {
-		stroke: color-mix(in oklab, var(--color-muted-foreground, gray) 55%, transparent);
-		transition: stroke var(--duration-quick) var(--ease-smooth-out);
-	}
+	@layer components {
+		.g-today {
+			transform-origin: top;
+			animation: g-today-in var(--duration-slow) var(--ease-smooth-out) backwards;
+		}
 
-	.g-arrow-lit {
-		stroke: var(--color-foreground, currentColor);
-	}
+		.g-arrow {
+			stroke: color-mix(in oklab, var(--color-muted-foreground, gray) 55%, transparent);
+			transition: stroke var(--duration-quick) var(--ease-smooth-out);
+		}
 
-	.g-arrow-line {
-		stroke-dasharray: 1;
-		stroke-dashoffset: 0;
-		animation: g-draw var(--duration-slow) var(--ease-smooth-out) 300ms backwards;
-	}
+		.g-arrow-lit {
+			stroke: var(--color-foreground, currentColor);
+		}
+
+		.g-arrow-line {
+			stroke-dasharray: 1;
+			stroke-dashoffset: 0;
+			animation: g-draw var(--duration-slow) var(--ease-smooth-out) 300ms backwards;
+		}
 
-	.g-arrow-head {
-		animation: g-fade var(--duration-quick) var(--ease-smooth-out) 700ms backwards;
+		.g-arrow-head {
+			animation: g-fade var(--duration-quick) var(--ease-smooth-out) 700ms backwards;
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.g-today,
+			.g-arrow-line,
+			.g-arrow-head {
+				animation: none;
+			}
+		}
 	}
 
 	@keyframes g-today-in {
@@ -114,12 +126,4 @@
 			opacity: 0;
 		}
 	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.g-today,
-		.g-arrow-line,
-		.g-arrow-head {
-			animation: none;
-		}
-	}
 </style>

package/src/work/gantt/gantt-grid.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type Arrow, type GanttDay, type Layout } from "./logic.js";
+interface Props {
+    layout: Layout;
+    days: GanttDay[];
+    arrows: Arrow[];
+    rowCount: number;
+    /** The row id the pointer is over, so its arrows light up. */
+    hoveredId: string | null;
+    /** The id being dragged. */
+    draggingId: string | null;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/work/gantt/gantt-group-row.svelte

@@ -43,16 +43,20 @@
 </div>
 
 <style>
-	.g-summary {
-		background: color-mix(in oklab, var(--g-hue) 45%, transparent);
-		transition:
-			left var(--duration-quick) var(--ease-smooth-out),
-			width var(--duration-quick) var(--ease-smooth-out);
-	}
+	@layer theme, base, components, utilities;
 
-	@media (prefers-reduced-motion: reduce) {
+	@layer components {
 		.g-summary {
-			transition: none;
+			background: color-mix(in oklab, var(--g-hue) 45%, transparent);
+			transition:
+				left var(--duration-quick) var(--ease-smooth-out),
+				width var(--duration-quick) var(--ease-smooth-out);
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.g-summary {
+				transition: none;
+			}
 		}
 	}
 </style>

package/src/work/gantt/gantt-group-row.svelte.d.ts

@@ -0,0 +1,12 @@
+import { type GroupRow, type Layout } from "./logic.js";
+import "./gantt.css";
+interface Props {
+    row: GroupRow;
+    /** The row's position, which sets how late its summary bar enters. */
+    index: number;
+    layout: Layout;
+    staggerCap: number;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/work/gantt/gantt-header.svelte

@@ -50,15 +50,13 @@
 				<div
 					class={cn(
 						"relative flex shrink-0 flex-col items-center justify-center text-[10px] leading-none tabular-nums",
-						d.weekend ? "text-muted-foreground/50" : "text-muted-foreground",
+						d.weekend ? "text-muted-foreground/85" : "text-muted-foreground",
 						layout.dayWidth < 18 && d.wd === 1 && "border-l border-border/60",
 					)}
 					style:width="{layout.dayWidth}px"
 				>
 					{#if layout.dayWidth >= 26}
-						<span class="mb-0.5 opacity-70"
-							>{weekdayFormat.format(new Date(d.day * 86_400_000))}</span
-						>
+						<span class="mb-0.5">{weekdayFormat.format(new Date(d.day * 86_400_000))}</span>
 					{/if}
 					{#if showNumber}
 						<span

package/src/work/gantt/gantt-header.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { GanttDay, Layout } from "./logic.js";
+interface Props {
+    layout: Layout;
+    days: GanttDay[];
+    months: {
+        key: string;
+        label: string;
+        i: number;
+        length: number;
+    }[];
+    labelHeading: string;
+    locale: string;
+    corner?: HTMLDivElement;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "corner">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/work/gantt/gantt-task-row.svelte

@@ -33,10 +33,11 @@
 		tipBelow: boolean;
 		drag: Drag | null;
 		setDrag: (drag: Drag | null) => void;
-		onhover: (id: string, on: boolean) => void;
+		onHover: (id: string, on: boolean) => void;
 		onToggle: (id: string) => void;
-		onChange?: (id: string, change: GanttChange) => void | Promise<void>;
+		onDatesChange?: (id: string, change: GanttChange) => void | Promise<void>;
 		onSelect?: (id: string) => void;
+		onKeyMove?: (id: string, span: Span) => void;
 		renderLabel?: Snippet<[T, GanttLabelContext]>;
 		describe: (span: Span) => string;
 	}
@@ -57,10 +58,11 @@
 		tipBelow,
 		drag,
 		setDrag,
-		onhover,
+		onHover,
 		onToggle,
-		onChange,
+		onDatesChange,
 		onSelect,
+		onKeyMove,
 		renderLabel,
 		describe,
 	}: Props<T> = $props();
@@ -96,7 +98,7 @@
 						class:g-chevron-open={row.open}
 						aria-hidden="true"
 					>
-						<CaretRight weight="bold" />
+						<CaretRight aria-hidden="true" weight="bold" />
 					</span>
 				</Button>
 			{:else}
@@ -112,7 +114,7 @@
 	<div class="relative shrink-0" style:width="{layout.timelineWidth}px">
 		{#if !span}
 			<span
-				class="pointer-events-none absolute top-1/2 -translate-y-1/2 text-xs whitespace-nowrap text-muted-foreground/70"
+				class="pointer-events-none absolute top-1/2 -translate-y-1/2 text-xs whitespace-nowrap text-muted-foreground"
 				style:left="{Math.max(dayX(layout, layout.todayDay) - 40, 0) + 8}px"
 			>
 				{noDatesLabel}
@@ -129,11 +131,11 @@
 				style:--g-hue={hue}
 				style:left="{dayX(layout, span.end) + layout.dayWidth / 2}px"
 				onclick={() => onSelect?.(row.id)}
-				onpointerenter={() => onhover(row.id, true)}
-				onpointerleave={() => onhover(row.id, false)}
+				onpointerenter={() => onHover(row.id, true)}
+				onpointerleave={() => onHover(row.id, false)}
 			>
 				<span class="size-5 [&>svg]:size-full" aria-hidden="true"
-					><FlagPennant weight="fill" /></span
+					><FlagPennant aria-hidden="true" weight="fill" /></span
 				>
 			</button>
 		{:else if !row.own}
@@ -155,8 +157,8 @@
 				onclick={() => onSelect?.(row.id)}
 				onkeydown={(e) =>
 					(e.key === "Enter" || e.key === " ") && (e.preventDefault(), onSelect?.(row.id))}
-				onpointerenter={() => onhover(row.id, true)}
-				onpointerleave={() => onhover(row.id, false)}
+				onpointerenter={() => onHover(row.id, true)}
+				onpointerleave={() => onHover(row.id, false)}
 			></div>
 		{:else}
 			<GanttBar
@@ -172,9 +174,10 @@
 				{tipBelow}
 				{drag}
 				{setDrag}
-				{onhover}
-				{onChange}
+				{onHover}
+				{onDatesChange}
 				{onSelect}
+				{onKeyMove}
 				{describe}
 			/>
 		{/if}
@@ -182,35 +185,39 @@
 </div>
 
 <style>
-	.g-row {
-		transition: background-color var(--duration-quick) var(--ease-smooth-out);
-	}
+	@layer theme, base, components, utilities;
 
-	.g-row-hot {
-		background: color-mix(in oklab, var(--color-foreground, currentColor) 3%, transparent);
-	}
+	@layer components {
+		.g-row {
+			transition: background-color var(--duration-quick) var(--ease-smooth-out);
+		}
 
-	.g-chevron {
-		transition: rotate var(--duration-fast) var(--ease-smooth-out);
-	}
+		.g-row-hot {
+			background: color-mix(in oklab, var(--color-foreground, currentColor) 3%, transparent);
+		}
 
-	.g-chevron-open {
-		rotate: 90deg;
-	}
+		.g-chevron {
+			transition: rotate var(--duration-fast) var(--ease-smooth-out);
+		}
 
-	/* A summary of what is below: an outline, so it never reads as a task you can drag. */
-	.g-derived {
-		background: color-mix(in oklab, var(--g-hue) 10%, transparent);
-		box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--g-hue) 45%, transparent);
-	}
+		.g-chevron-open {
+			rotate: 90deg;
+		}
 
-	.g-flag {
-		color: var(--g-hue);
-	}
+		/* A summary of what is below: an outline, so it never reads as a task you can drag. */
+		.g-derived {
+			background: color-mix(in oklab, var(--g-hue) 10%, transparent);
+			box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--g-hue) 45%, transparent);
+		}
 
-	@media (prefers-reduced-motion: reduce) {
-		.g-chevron {
-			transition: none;
+		.g-flag {
+			color: var(--g-hue);
+		}
+
+		@media (prefers-reduced-motion: reduce) {
+			.g-chevron {
+				transition: none;
+			}
 		}
 	}
 </style>

package/src/work/gantt/gantt-task-row.svelte.d.ts

@@ -0,0 +1,53 @@
+import type { Snippet } from "svelte";
+import type { GanttChange, GanttLabelContext } from "../task-types.js";
+import { type Drag, type Layout, type Span, type TaskRow } from "./logic.js";
+import "./gantt.css";
+interface Props<T> {
+    row: TaskRow<T>;
+    layout: Layout;
+    title: string;
+    hue: string;
+    progress: number;
+    milestone: boolean;
+    /** Set when tasks nest: the label column indents and shows a fold button. */
+    nested: boolean;
+    indent: number;
+    staggerCap: number;
+    inlineTitleMin: number;
+    noDatesLabel: string;
+    hovered: boolean;
+    tipBelow: boolean;
+    drag: Drag | null;
+    setDrag: (drag: Drag | null) => void;
+    onHover: (id: string, on: boolean) => void;
+    onToggle: (id: string) => void;
+    onDatesChange?: (id: string, change: GanttChange) => void | Promise<void>;
+    onSelect?: (id: string) => void;
+    onKeyMove?: (id: string, span: Span) => void;
+    renderLabel?: Snippet<[T, GanttLabelContext]>;
+    describe: (span: Span) => 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/src/work/gantt/gantt.css

@@ -1,7 +1,17 @@
-/* Shared by the bar, the derived bar and the group summary: they all slide in the same way. */
-.g-enter {
-  animation: g-bar-in var(--duration-slow) var(--ease-smooth-out) backwards;
-  animation-delay: calc(var(--g-i, 0) * var(--duration-stagger));
+@layer theme, base, components, utilities;
+
+@layer components {
+  /* Shared by the bar, the derived bar and the group summary: they all slide in the same way. */
+  .g-enter {
+    animation: g-bar-in var(--duration-slow) var(--ease-smooth-out) backwards;
+    animation-delay: calc(var(--g-i, 0) * var(--duration-stagger));
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .g-enter {
+      animation: none;
+    }
+  }
 }
 
 @keyframes g-bar-in {
@@ -14,9 +24,3 @@
     clip-path: inset(0 0 0 0 round var(--radius-lg));
   }
 }
-
-@media (prefers-reduced-motion: reduce) {
-  .g-enter {
-    animation: none;
-  }
-}

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,