@heyramzi/ui 2.24.0 → 3.0.0

package/src/work/docs/doc-editor-page.svelte

@@ -20,8 +20,8 @@
 		title: string;
 		/** The body as Tiptap JSON. Read once: wrap the page in `{#key doc.id}` to swap documents. */
 		content?: Record<string, unknown> | null;
-		onchange?: (json: Record<string, unknown>) => void;
-		ontitle?: (title: string) => void;
+		onContentChange?: (json: Record<string, unknown>) => void;
+		onTitleChange?: (title: string) => void;
 		/** Focus the title on open: a doc that was just created. */
 		autofocusTitle?: boolean;
 		/** Parent icon, parent title › this doc. */
@@ -35,7 +35,7 @@
 		/** The tile above the title. Defaults to a document glyph. */
 		icon?: Snippet;
 		/** A heading's link was copied; show the toast here. */
-		oncopylink?: (url: string, id: string) => void;
+		onCopyLink?: (url: string, id: string) => void;
 		labels?: Partial<DocLabels>;
 		/** The live editor, to focus it or read it. */
 		instance?: Editor | null;
@@ -47,15 +47,15 @@
 	let {
 		title = $bindable(""),
 		content = null,
-		onchange,
-		ontitle,
+		onContentChange,
+		onTitleChange,
 		autofocusTitle = false,
 		breadcrumb,
 		menu,
 		meta,
 		actions,
 		icon,
-		oncopylink,
+		onCopyLink,
 		labels: labelOverrides,
 		instance = $bindable(null),
 	}: Props = $props();
@@ -92,7 +92,7 @@
 
 	function handleChange(json: Record<string, unknown>) {
 		outline = outlineOfDoc(json);
-		onchange?.(json);
+		onContentChange?.(json);
 	}
 
 	function onTitleKey(event: KeyboardEvent) {
@@ -129,7 +129,7 @@
 					items={outline}
 					active={spy.active}
 					label={t.outline}
-					onselect={(id) => spy.jump(id)}
+					onSelect={(id) => spy.jump(id)}
 				/>
 			</div>
 			<!-- Narrow: the strip the reading pages use, since a phone has no gutter. -->
@@ -141,7 +141,7 @@
 					items={outline}
 					active={spy.active}
 					label={t.outline}
-					onselect={(id) => spy.jump(id)}
+					onSelect={(id) => spy.jump(id)}
 				/>
 			</div>
 		{/if}
@@ -161,7 +161,7 @@
 				<textarea
 					bind:this={titleField}
 					bind:value={title}
-					oninput={() => ontitle?.(title)}
+					oninput={() => onTitleChange?.(title)}
 					onkeydown={onTitleKey}
 					rows="1"
 					spellcheck="false"
@@ -172,13 +172,13 @@
 
 				<RichEditor
 					{content}
-					onchange={handleChange}
+					onContentChange={handleChange}
 					variant="page"
 					preset="full"
 					placeholder=""
 					minHeight="20rem"
 					copyLinkLabel={t.copyLink}
-					{oncopylink}
+					{onCopyLink}
 					bind:instance
 				/>
 			</div>
@@ -187,9 +187,13 @@
 </div>
 
 <style>
-	/* The title grows with its text, so a long one wraps instead of scrolling sideways. */
-	.doc-title {
-		field-sizing: content;
-		text-wrap: balance;
+	@layer theme, base, components, utilities;
+
+	@layer components {
+		/* The title grows with its text, so a long one wraps instead of scrolling sideways. */
+		.doc-title {
+			field-sizing: content;
+			text-wrap: balance;
+		}
 	}
 </style>

package/src/work/docs/doc-editor-page.svelte.d.ts

@@ -0,0 +1,31 @@
+import type { Editor } from "@tiptap/core";
+import type { Snippet } from "svelte";
+import { type DocLabels } from "./labels.js";
+interface Props {
+    /** The title, edited in place. */
+    title: string;
+    /** The body as Tiptap JSON. Read once: wrap the page in `{#key doc.id}` to swap documents. */
+    content?: Record<string, unknown> | null;
+    onContentChange?: (json: Record<string, unknown>) => void;
+    onTitleChange?: (title: string) => void;
+    /** Focus the title on open: a doc that was just created. */
+    autofocusTitle?: boolean;
+    /** Parent icon, parent title › this doc. */
+    breadcrumb?: Snippet;
+    /** Sits beside the breadcrumb: the star, the `…` menu. */
+    menu?: Snippet;
+    /** Right side of the bar, before the actions: the "Edited" chip. */
+    meta?: Snippet;
+    /** Right side of the bar: copy link, subscribe. */
+    actions?: Snippet;
+    /** The tile above the title. Defaults to a document glyph. */
+    icon?: Snippet;
+    /** A heading's link was copied; show the toast here. */
+    onCopyLink?: (url: string, id: string) => void;
+    labels?: Partial<DocLabels>;
+    /** The live editor, to focus it or read it. */
+    instance?: Editor | null;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "title" | "instance">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/work/docs/doc-menu.svelte

@@ -65,17 +65,17 @@
 		content?: unknown;
 		favorited?: boolean;
 		/** Every item is a callback. One that isn't passed doesn't show. */
-		onmove?: () => void;
-		onduplicate?: () => void;
-		onrename?: () => void;
-		ontemplate?: () => void;
-		onfavorite?: () => void;
+		onMove?: () => void;
+		onDuplicate?: () => void;
+		onRename?: () => void;
+		onTemplate?: () => void;
+		onFavorite?: () => void;
 		/** Passing it shows Copy. It runs after the text is on the clipboard, for a toast. */
-		oncopy?: (kind: CopyKind, text: string) => void;
-		onremind?: () => void;
-		onhistory?: () => void;
+		onCopy?: (kind: CopyKind, text: string) => void;
+		onRemind?: () => void;
+		onHistory?: () => void;
 		/** Passing it shows Delete, behind a confirm that names the doc. */
-		ondelete?: () => void;
+		onDelete?: () => void;
 		/** One line under the confirm title: "and its 3 sub-pages". */
 		deleteDetail?: string;
 		/** Fire items from the keyboard (⇧R) while no field has focus. */
@@ -94,15 +94,15 @@
 		url,
 		content,
 		favorited = false,
-		onmove,
-		onduplicate,
-		onrename,
-		ontemplate,
-		onfavorite,
-		oncopy,
-		onremind,
-		onhistory,
-		ondelete,
+		onMove,
+		onDuplicate,
+		onRename,
+		onTemplate,
+		onFavorite,
+		onCopy,
+		onRemind,
+		onHistory,
+		onDelete,
 		deleteDetail,
 		shortcuts = true,
 		open = $bindable(false),
@@ -124,15 +124,15 @@
 	let all = $derived(
 		menuItems(
 			{
-				move: !!onmove,
-				duplicate: !!onduplicate,
-				rename: !!onrename,
-				template: !!ontemplate,
-				favorite: !!onfavorite,
-				copy: !!oncopy,
-				remind: !!onremind,
-				history: !!onhistory,
-				delete: !!ondelete,
+				move: !!onMove,
+				duplicate: !!onDuplicate,
+				rename: !!onRename,
+				template: !!onTemplate,
+				favorite: !!onFavorite,
+				copy: !!onCopy,
+				remind: !!onRemind,
+				history: !!onHistory,
+				delete: !!onDelete,
 			},
 			t,
 			{ favorited },
@@ -151,7 +151,10 @@
 	);
 	let confirmName = $derived(deleteName(title, t));
 
-	const ICONS: Record<MenuId, Component<{ class?: string }>> = {
+	const ICONS: Record<
+		MenuId,
+		Component<{ class?: string; "aria-hidden"?: boolean | "true" | "false" }>
+	> = {
 		move: ArrowsOutCardinal,
 		duplicate: CopySimple,
 		rename: PencilSimple,
@@ -173,13 +176,13 @@
 
 	function fire(id: MenuId) {
 		const run: Partial<Record<MenuId, (() => void) | undefined>> = {
-			move: onmove,
-			duplicate: onduplicate,
-			rename: onrename,
-			template: ontemplate,
-			favorite: onfavorite,
-			remind: onremind,
-			history: onhistory,
+			move: onMove,
+			duplicate: onDuplicate,
+			rename: onRename,
+			template: onTemplate,
+			favorite: onFavorite,
+			remind: onRemind,
+			history: onHistory,
 		};
 		if (id === "copy") {
 			query = "";
@@ -195,7 +198,7 @@
 		open = false;
 		// A blocked clipboard still reports, so the host can say the copy didn't land.
 		await copyText(text);
-		oncopy?.(kind, text);
+		onCopy?.(kind, text);
 	}
 
 	function onWindowKey(event: KeyboardEvent) {
@@ -264,9 +267,12 @@
 								<CommandItem
 									value={item.id}
 									onSelect={() => fire(item.id)}
-									class={item.danger ? "text-destructive data-selected:text-destructive" : ""}
+									class={item.danger
+										? "text-destructive-ink data-selected:text-destructive-ink"
+										: ""}
 								>
 									<Icon
+										aria-hidden="true"
 										class={item.id === "favorite" && favorited
 											? "text-brand"
 											: item.danger
@@ -330,7 +336,7 @@
 			<AlertDialogCancel>{t.cancel}</AlertDialogCancel>
 			<AlertDialogAction
 				class={buttonVariants({ variant: "destructive" })}
-				onclick={() => ondelete?.()}
+				onclick={() => onDelete?.()}
 			>
 				{t.delete}
 			</AlertDialogAction>

package/src/work/docs/doc-menu.svelte.d.ts

@@ -0,0 +1,35 @@
+import type { Component, Snippet } from "svelte";
+import { type DocLabels } from "./labels.js";
+import { type CopyKind } from "./menu.js";
+interface Props {
+    /** The doc's title. An empty one reads "Untitled" in the delete confirm. */
+    title: string;
+    /** The doc's address; "Copy URL" and "title as link" need it. */
+    url?: string;
+    /** The doc as Tiptap JSON; "Copy content as Markdown" needs it. */
+    content?: unknown;
+    favorited?: boolean;
+    /** Every item is a callback. One that isn't passed doesn't show. */
+    onMove?: () => void;
+    onDuplicate?: () => void;
+    onRename?: () => void;
+    onTemplate?: () => void;
+    onFavorite?: () => void;
+    /** Passing it shows Copy. It runs after the text is on the clipboard, for a toast. */
+    onCopy?: (kind: CopyKind, text: string) => void;
+    onRemind?: () => void;
+    onHistory?: () => void;
+    /** Passing it shows Delete, behind a confirm that names the doc. */
+    onDelete?: () => void;
+    /** One line under the confirm title: "and its 3 sub-pages". */
+    deleteDetail?: string;
+    /** Fire items from the keyboard (⇧R) while no field has focus. */
+    shortcuts?: boolean;
+    open?: boolean;
+    labels?: Partial<DocLabels>;
+    /** Replaces the round `…` button. Spread `props` on the element. */
+    trigger?: Snippet<[Record<string, unknown>]>;
+}
+declare const $$Component: Component<Props, {}, "open">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/work/docs/edited-chip.svelte

@@ -24,9 +24,9 @@
 		lastEditor?: (Person & { at?: DateInput }) | null;
 		/** The switch row shows only when this is passed. */
 		showAuthorNames?: boolean;
-		onshowauthors?: (show: boolean) => void;
+		onShowAuthorNamesChange?: (show: boolean) => void;
 		/** The history button shows only when this is passed. */
-		onhistory?: () => void;
+		onHistory?: () => void;
 		labels?: Partial<DocLabels>;
 		timeZone?: string;
 		now?: Date;
@@ -40,8 +40,8 @@
 		owner = null,
 		lastEditor = null,
 		showAuthorNames = false,
-		onshowauthors,
-		onhistory,
+		onShowAuthorNamesChange,
+		onHistory,
 		labels: labelOverrides,
 		timeZone,
 		now,
@@ -54,7 +54,7 @@
 	let chip = $derived(editedLabel(editedAt, t.edited, { timeZone, now }));
 	let editorStamp = $derived(editStamp(lastEditor?.at ?? editedAt, { timeZone, now }));
 	// Nothing to open: the chip is a plain label rather than a button that opens an empty card.
-	let hasDetails = $derived(!!onshowauthors || !!owner || !!lastEditor || !!onhistory);
+	let hasDetails = $derived(!!onShowAuthorNamesChange || !!owner || !!lastEditor || !!onHistory);
 </script>
 
 {#snippet person(who: Person)}
@@ -83,12 +83,12 @@
 			class="w-[21.5rem] gap-0 p-0 text-(length:--text-control)"
 		>
 			<div class="divide-y divide-border/70">
-				{#if onshowauthors}
+				{#if onShowAuthorNamesChange}
 					<div class="flex items-center justify-between px-4 py-3">
 						<span class="text-muted-foreground">{t.showAuthorNames}</span>
 						<Switch
 							checked={showAuthorNames}
-							onCheckedChange={(next) => onshowauthors?.(next)}
+							onCheckedChange={(next) => onShowAuthorNamesChange?.(next)}
 							aria-label={t.showAuthorNames}
 						/>
 					</div>
@@ -108,11 +108,11 @@
 						{/if}
 					</div>
 				{/if}
-				{#if onhistory}
+				{#if onHistory}
 					<div class="p-2">
 						<button
 							type="button"
-							onclick={onhistory}
+							onclick={onHistory}
 							class="t-press flex h-8 w-full items-center justify-center gap-2 {docLooks.control} bg-foreground/5 font-medium transition-colors duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] outline-none hover:bg-foreground/8 focus-visible:shadow-(--ring-focus)"
 						>
 							<ClockCounterClockwise size={14} aria-hidden="true" />

package/src/work/docs/edited-chip.svelte.d.ts

@@ -0,0 +1,26 @@
+import { type DateInput } from "./edited.js";
+import { type DocLabels } from "./labels.js";
+type Person = {
+    name: string;
+    image?: string | null;
+};
+interface Props {
+    /** When the doc last changed. Unreadable or missing leaves just "Edited". */
+    editedAt?: DateInput;
+    owner?: Person | null;
+    /** The last editor. Their time falls back to `editedAt`. */
+    lastEditor?: (Person & {
+        at?: DateInput;
+    }) | null;
+    /** The switch row shows only when this is passed. */
+    showAuthorNames?: boolean;
+    onShowAuthorNamesChange?: (show: boolean) => void;
+    /** The history button shows only when this is passed. */
+    onHistory?: () => void;
+    labels?: Partial<DocLabels>;
+    timeZone?: string;
+    now?: Date;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

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

@@ -22,9 +22,11 @@
 		tipBelow: boolean;
 		drag: Drag | null;
 		setDrag: (drag: Drag | null) => void;
-		onhover: (id: string, on: boolean) => void;
-		onChange?: (id: string, change: GanttChange) => void | Promise<void>;
+		onHover: (id: string, on: boolean) => void;
+		onDatesChange?: (id: string, change: GanttChange) => void | Promise<void>;
 		onSelect?: (id: string) => void;
+		/** After an arrow key's change is saved, with the bar's new dates. */
+		onKeyMove?: (id: string, span: Span) => void;
 		describe: (span: Span) => string;
 	}
 
@@ -41,13 +43,14 @@
 		tipBelow,
 		drag,
 		setDrag,
-		onhover,
-		onChange,
+		onHover,
+		onDatesChange,
 		onSelect,
+		onKeyMove,
 		describe,
 	}: Props = $props();
 
-	let editable = $derived(!!onChange);
+	let editable = $derived(!!onDatesChange);
 	let dragging = $derived(drag?.id === id);
 	let width = $derived(barWidth(span, layout));
 	let left = $derived(dayX(layout, span.start) + layout.inset);
@@ -71,12 +74,13 @@
 		if (!drag || drag.id !== id) return;
 		const moved = drag.dx !== 0;
 		setDrag(null);
-		if (moved) void onChange?.(id, { start: isoFromDay(span.start), end: isoFromDay(span.end) });
+		if (moved)
+			void onDatesChange?.(id, { start: isoFromDay(span.start), end: isoFromDay(span.end) });
 		else onSelect?.(id);
 	}
 
 	/** Arrow keys move a bar a day. Shift plus an arrow moves its end, so the task grows or shrinks. */
-	function onKeyDown(e: KeyboardEvent): void {
+	async function onKeyDown(e: KeyboardEvent): Promise<void> {
 		if (e.key === "Enter" || e.key === " ") {
 			e.preventDefault();
 			onSelect?.(id);
@@ -89,12 +93,13 @@
 			? { start: span.start, end: Math.max(span.start, span.end + step) }
 			: { start: span.start + step, end: span.end + step };
 		if (next.start === span.start && next.end === span.end) return;
-		void onChange?.(id, { start: isoFromDay(next.start), end: isoFromDay(next.end) });
+		await onDatesChange?.(id, { start: isoFromDay(next.start), end: isoFromDay(next.end) });
+		onKeyMove?.(id, next);
 	}
 </script>
 
 <div
-	data-bar
+	data-bar={id}
 	role="button"
 	tabindex="0"
 	aria-roledescription="task bar"
@@ -116,9 +121,9 @@
 	onpointermove={onPointerMove}
 	onpointerup={onPointerUp}
 	onpointercancel={() => setDrag(null)}
-	onpointerenter={() => onhover(id, true)}
-	onpointerleave={() => onhover(id, false)}
-	onkeydown={onKeyDown}
+	onpointerenter={() => onHover(id, true)}
+	onpointerleave={() => onHover(id, false)}
+	onkeydown={(e) => void onKeyDown(e)}
 >
 	{#if progress > 0}
 		<!-- The clip keeps the bar's rounded corners while the fill scales. -->
@@ -165,78 +170,92 @@
 {/if}
 
 <style>
-	.g-bar {
-		touch-action: pan-y;
-		background: color-mix(in oklab, var(--g-hue) 16%, var(--color-card, white));
-		box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--g-hue) 34%, transparent);
-		/* Snapping to whole days reads as a glide, not a jump. */
-		transition:
-			left var(--duration-quick) var(--ease-smooth-out),
-			width var(--duration-quick) var(--ease-smooth-out),
-			box-shadow var(--duration-quick) var(--ease-smooth-out);
-	}
+	@layer theme, base, components, utilities;
+
+	@layer components {
+		.g-bar {
+			touch-action: pan-y;
+			background: color-mix(in oklab, var(--g-hue) 16%, var(--color-card, white));
+			box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--g-hue) 34%, transparent);
+			/* Snapping to whole days reads as a glide, not a jump. */
+			transition:
+				left var(--duration-quick) var(--ease-smooth-out),
+				width var(--duration-quick) var(--ease-smooth-out),
+				box-shadow var(--duration-quick) var(--ease-smooth-out);
+		}
+
+		@media (hover: hover) and (pointer: fine) {
+			.g-bar:hover {
+				box-shadow:
+					inset 0 0 0 1px color-mix(in oklab, var(--g-hue) 55%, transparent),
+					0 1px 2px rgb(0 0 0 / 0.06),
+					0 4px 12px color-mix(in oklab, var(--g-hue) 18%, transparent);
+			}
+		}
 
-	@media (hover: hover) and (pointer: fine) {
-		.g-bar:hover {
+		.g-bar-dragging {
 			box-shadow:
 				inset 0 0 0 1px color-mix(in oklab, var(--g-hue) 55%, transparent),
 				0 1px 2px rgb(0 0 0 / 0.06),
 				0 4px 12px color-mix(in oklab, var(--g-hue) 18%, transparent);
 		}
-	}
 
-	.g-bar-dragging {
-		box-shadow:
-			inset 0 0 0 1px color-mix(in oklab, var(--g-hue) 55%, transparent),
-			0 1px 2px rgb(0 0 0 / 0.06),
-			0 4px 12px color-mix(in oklab, var(--g-hue) 18%, transparent);
-	}
+		.g-bar-dragging {
+			z-index: 15;
+		}
 
-	.g-bar-dragging {
-		z-index: 15;
-	}
+		.g-progress {
+			background: color-mix(in oklab, var(--g-hue) 32%, var(--color-card, white));
+			transition: transform var(--duration-fast) var(--ease-smooth-out);
+		}
 
-	.g-progress {
-		background: color-mix(in oklab, var(--g-hue) 32%, var(--color-card, white));
-		transition: transform var(--duration-fast) var(--ease-smooth-out);
-	}
+		/* Resize grips: a wide invisible hit area, a slim pill that shows on hover. */
+		.g-handle {
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			width: 12px;
+			cursor: ew-resize;
+			touch-action: none;
+		}
 
-	/* Resize grips: a wide invisible hit area, a slim pill that shows on hover. */
-	.g-handle {
-		position: absolute;
-		top: 0;
-		bottom: 0;
-		width: 12px;
-		cursor: ew-resize;
-		touch-action: none;
-	}
+		.g-handle::after {
+			content: "";
+			position: absolute;
+			top: 25%;
+			bottom: 25%;
+			left: 50%;
+			width: 3px;
+			translate: -50% 0;
+			background: color-mix(in oklab, var(--g-hue) 70%, var(--color-foreground));
+			opacity: 0;
+			transition: opacity var(--duration-quick) var(--ease-smooth-out);
+		}
 
-	.g-handle::after {
-		content: "";
-		position: absolute;
-		top: 25%;
-		bottom: 25%;
-		left: 50%;
-		width: 3px;
-		translate: -50% 0;
-		background: color-mix(in oklab, var(--g-hue) 70%, var(--color-foreground));
-		opacity: 0;
-		transition: opacity var(--duration-quick) var(--ease-smooth-out);
-	}
+		@media (hover: hover) and (pointer: fine) {
+			.g-bar:hover .g-handle::after {
+				opacity: 0.6;
+			}
+		}
 
-	@media (hover: hover) and (pointer: fine) {
-		.g-bar:hover .g-handle::after {
+		.g-bar:focus-visible .g-handle::after,
+		.g-bar-dragging .g-handle::after {
 			opacity: 0.6;
 		}
-	}
 
-	.g-bar:focus-visible .g-handle::after,
-	.g-bar-dragging .g-handle::after {
-		opacity: 0.6;
-	}
+		.g-tip {
+			animation: g-tip-in var(--duration-quick) var(--ease-smooth-out) both;
+		}
 
-	.g-tip {
-		animation: g-tip-in var(--duration-quick) var(--ease-smooth-out) both;
+		@media (prefers-reduced-motion: reduce) {
+			.g-tip {
+				animation: none;
+			}
+			.g-bar,
+			.g-progress {
+				transition: none;
+			}
+		}
 	}
 
 	@keyframes g-tip-in {
@@ -245,14 +264,4 @@
 			translate: 0 var(--distance-micro);
 		}
 	}
-
-	@media (prefers-reduced-motion: reduce) {
-		.g-tip {
-			animation: none;
-		}
-		.g-bar,
-		.g-progress {
-			transition: none;
-		}
-	}
 </style>

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

@@ -0,0 +1,29 @@
+import type { GanttChange } from "../task-types.js";
+import { type Drag, type Layout, type Span } from "./logic.js";
+import "./gantt.css";
+interface Props {
+    id: string;
+    title: string;
+    /** The task's own dates, with a live drag applied. */
+    span: Span;
+    hue: string;
+    progress: number;
+    order: number;
+    layout: Layout;
+    staggerCap: number;
+    /** A bar narrower than this shows its title outside, to the right. */
+    inlineTitleMin: number;
+    /** The first row has no room above it, so its drag tip opens below. */
+    tipBelow: boolean;
+    drag: Drag | null;
+    setDrag: (drag: Drag | null) => void;
+    onHover: (id: string, on: boolean) => void;
+    onDatesChange?: (id: string, change: GanttChange) => void | Promise<void>;
+    onSelect?: (id: string) => void;
+    /** After an arrow key's change is saved, with the bar's new dates. */
+    onKeyMove?: (id: string, span: Span) => void;
+    describe: (span: Span) => string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;