@heyramzi/ui 2.7.0 → 2.9.0

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

@@ -0,0 +1,333 @@
+<script lang="ts">
+	// =========================
+	// IMPORTS
+	// =========================
+	import {
+		ArrowsOutCardinal,
+		CaretLeft,
+		CaretRight,
+		ClockCounterClockwise,
+		Alarm,
+		Clipboard,
+		CopySimple,
+		DotsThree,
+		FileDashed,
+		PencilSimple,
+		Star,
+		Trash,
+	} from "phosphor-svelte";
+	import type { Component, Snippet } from "svelte";
+	import {
+		AlertDialog,
+		AlertDialogAction,
+		AlertDialogCancel,
+		AlertDialogContent,
+		AlertDialogDescription,
+		AlertDialogFooter,
+		AlertDialogHeader,
+		AlertDialogTitle,
+	} from "../../shadcn/alert-dialog/index.js";
+	import { buttonVariants } from "../../shadcn/button/index.js";
+	import {
+		Command,
+		CommandEmpty,
+		CommandGroup,
+		CommandInput,
+		CommandItem,
+		CommandList,
+		CommandSeparator,
+		CommandShortcut,
+	} from "../../shadcn/command/index.js";
+	import { Popover, PopoverContent, PopoverTrigger } from "../../shadcn/popover/index.js";
+	import { docLabels, type DocLabels } from "./labels.js";
+	import {
+		copyOptions,
+		deleteName,
+		filterMenu,
+		menuItems,
+		shortcutLabel,
+		shortcutTarget,
+		type CopyKind,
+		type MenuId,
+	} from "./menu.js";
+
+	// =========================
+	// TYPES
+	// =========================
+	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>]>;
+	}
+
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		title,
+		url,
+		content,
+		favorited = false,
+		onmove,
+		onduplicate,
+		onrename,
+		ontemplate,
+		onfavorite,
+		oncopy,
+		onremind,
+		onhistory,
+		ondelete,
+		deleteDetail,
+		shortcuts = true,
+		open = $bindable(false),
+		labels: labelOverrides,
+		trigger,
+	}: Props = $props();
+
+	// =========================
+	// STATE
+	// =========================
+	let query = $state("");
+	let page = $state<"root" | "copy">("root");
+	let confirming = $state(false);
+
+	// =========================
+	// DERIVED
+	// =========================
+	let t = $derived(docLabels(labelOverrides));
+	let all = $derived(
+		menuItems(
+			{
+				move: !!onmove,
+				duplicate: !!onduplicate,
+				rename: !!onrename,
+				template: !!ontemplate,
+				favorite: !!onfavorite,
+				copy: !!oncopy,
+				remind: !!onremind,
+				history: !!onhistory,
+				delete: !!ondelete,
+			},
+			t,
+			{ favorited },
+		),
+	);
+	let visible = $derived(filterMenu(all, query));
+	// Groups keep their order; a hairline sits between the ones that still have an item.
+	let groups = $derived.by(() => {
+		const byGroup = new Map<number, typeof visible>();
+		for (const item of visible) byGroup.set(item.group, [...(byGroup.get(item.group) ?? []), item]);
+		return [...byGroup.entries()].toSorted((a, b) => a[0] - b[0]).map(([, items]) => items);
+	});
+	// Built only while the copy list is showing: the Markdown of a long doc isn't free.
+	let copies = $derived(
+		page === "copy" ? filterMenu(copyOptions({ title, url, content }, t), query) : [],
+	);
+	let confirmName = $derived(deleteName(title, t));
+
+	const ICONS: Record<MenuId, Component<{ class?: string }>> = {
+		move: ArrowsOutCardinal,
+		duplicate: CopySimple,
+		rename: PencilSimple,
+		template: FileDashed,
+		favorite: Star,
+		copy: Clipboard,
+		remind: Alarm,
+		history: ClockCounterClockwise,
+		delete: Trash,
+	};
+
+	// =========================
+	// FUNCTIONS
+	// =========================
+	function reset() {
+		query = "";
+		page = "root";
+	}
+
+	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,
+		};
+		if (id === "copy") {
+			query = "";
+			page = "copy";
+			return;
+		}
+		open = false;
+		if (id === "delete") confirming = true;
+		else run[id]?.();
+	}
+
+	async function copy(kind: CopyKind, text: string) {
+		open = false;
+		// A blocked clipboard still reports, so the host can say the copy didn't land.
+		await navigator.clipboard.writeText(text).catch(() => {});
+		oncopy?.(kind, text);
+	}
+
+	function onWindowKey(event: KeyboardEvent) {
+		if (!shortcuts || event.defaultPrevented || event.repeat) return;
+		const target = event.target as HTMLElement | null;
+		if (target?.closest("input, textarea, select, [contenteditable='true'], [role='dialog']"))
+			return;
+		const id = shortcutTarget(event, all);
+		if (!id) return;
+		event.preventDefault();
+		fire(id);
+	}
+
+	function onListKey(event: KeyboardEvent) {
+		if (page !== "copy") return;
+		const empty = query === "";
+		if (event.key === "ArrowLeft" || (event.key === "Backspace" && empty)) {
+			if (event.key === "ArrowLeft" && !empty) return;
+			event.preventDefault();
+			reset();
+		}
+	}
+</script>
+
+<svelte:window onkeydown={onWindowKey} />
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<Popover
+	bind:open
+	onOpenChange={(next) => {
+		// Reset as it opens, not as it closes: a reset mid-fade flashes the root list.
+		if (next) reset();
+	}}
+>
+	<PopoverTrigger aria-label={t.menu}>
+		{#snippet child({ props })}
+			{#if trigger}
+				{@render trigger(props)}
+			{:else}
+				<button
+					{...props}
+					type="button"
+					class="t-press inline-flex size-7 items-center justify-center rounded-md text-muted-foreground transition-colors duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] outline-none hover:bg-foreground/6 hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50 aria-expanded:bg-foreground/6 aria-expanded:text-foreground any-pointer-coarse:size-10"
+				>
+					<DotsThree size={18} weight="bold" aria-hidden="true" />
+				</button>
+			{/if}
+		{/snippet}
+	</PopoverTrigger>
+	<PopoverContent align="start" sideOffset={6} class="w-64 gap-0 overflow-hidden p-0">
+		<Command shouldFilter={false} onkeydown={onListKey} class="rounded-xl">
+			<CommandInput
+				bind:value={query}
+				placeholder={page === "copy" ? t.copy : t.filter}
+				aria-label={t.filter}
+			/>
+			<CommandList class="max-h-[22rem] p-1.5">
+				{#if page === "root"}
+					{#each groups as items, i (i)}
+						{#if i > 0 && !query}<CommandSeparator class="my-1.5" />{/if}
+						<CommandGroup class="p-0">
+							{#each items as item (item.id)}
+								{@const Icon = ICONS[item.id]}
+								<CommandItem
+									value={item.id}
+									onSelect={() => fire(item.id)}
+									class={item.danger ? "text-destructive data-selected:text-destructive" : ""}
+								>
+									<Icon
+										class={item.id === "favorite" && favorited
+											? "text-brand"
+											: item.danger
+												? ""
+												: "text-muted-foreground"}
+									/>
+									<span class="flex-1 truncate">{item.label}</span>
+									{#if item.shortcut}
+										<CommandShortcut class="text-xs tracking-normal"
+											>{shortcutLabel(item.shortcut)}</CommandShortcut
+										>
+									{:else if item.submenu}
+										<CaretRight size={12} class="text-muted-foreground" aria-hidden="true" />
+									{/if}
+								</CommandItem>
+							{/each}
+						</CommandGroup>
+					{/each}
+					{#if visible.length === 0}
+						<CommandEmpty class="py-6 text-center text-[13px] text-muted-foreground">
+							{t.noResults}
+						</CommandEmpty>
+					{/if}
+				{:else}
+					<CommandGroup class="p-0">
+						{#if !query}
+							<CommandItem value="__back" onSelect={reset} class="text-muted-foreground">
+								<CaretLeft size={14} aria-hidden="true" />
+								<span>{t.back}</span>
+							</CommandItem>
+							<CommandSeparator class="my-1.5" />
+						{/if}
+						{#each copies as option (option.kind)}
+							<CommandItem value={option.kind} onSelect={() => copy(option.kind, option.text)}>
+								<span class="truncate">{option.label}</span>
+							</CommandItem>
+						{/each}
+					</CommandGroup>
+					{#if copies.length === 0}
+						<CommandEmpty class="py-6 text-center text-[13px] text-muted-foreground">
+							{t.noResults}
+						</CommandEmpty>
+					{/if}
+				{/if}
+			</CommandList>
+		</Command>
+	</PopoverContent>
+</Popover>
+
+<AlertDialog bind:open={confirming}>
+	<AlertDialogContent class="sm:max-w-sm">
+		<AlertDialogHeader>
+			<AlertDialogTitle>{t.deleteTitle(confirmName)}</AlertDialogTitle>
+			<AlertDialogDescription>{deleteDetail ?? t.deleteDetail}</AlertDialogDescription>
+		</AlertDialogHeader>
+		<AlertDialogFooter>
+			<AlertDialogCancel>{t.cancel}</AlertDialogCancel>
+			<AlertDialogAction
+				class={buttonVariants({ variant: "destructive" })}
+				onclick={() => ondelete?.()}
+			>
+				{t.delete}
+			</AlertDialogAction>
+		</AlertDialogFooter>
+	</AlertDialogContent>
+</AlertDialog>

package/src/work/docs/docs-demo.svelte

@@ -0,0 +1,227 @@
+<script lang="ts">
+	// =========================
+	// IMPORTS
+	// =========================
+	import { Bell, FileText, LinkSimple, Star } from "phosphor-svelte";
+	import DocEditorPage from "./doc-editor-page.svelte";
+	import DocMenu from "./doc-menu.svelte";
+	import EditedChip from "./edited-chip.svelte";
+	import type { CopyKind } from "./menu.js";
+
+	// =========================
+	// TYPES
+	// =========================
+	type Node = Record<string, unknown>;
+
+	// =========================
+	// CONTENT
+	// =========================
+	const text = (value: string, marks?: Node[]): Node => ({
+		type: "text",
+		text: value,
+		marks,
+	});
+	const p = (...parts: (string | Node)[]): Node => ({
+		type: "paragraph",
+		content: parts.map((part) => (typeof part === "string" ? text(part) : part)),
+	});
+	const h = (level: number, value: string): Node => ({
+		type: "heading",
+		attrs: { level },
+		content: [text(value)],
+	});
+	const task = (value: string, checked = false): Node => ({
+		type: "taskItem",
+		attrs: { checked },
+		content: [p(value)],
+	});
+	const cell = (type: "tableHeader" | "tableCell", value: string): Node => ({
+		type,
+		content: [p(value)],
+	});
+	const row = (type: "tableHeader" | "tableCell", ...values: string[]): Node => ({
+		type: "tableRow",
+		content: values.map((value) => cell(type, value)),
+	});
+
+	const content: Node = {
+		type: "doc",
+		content: [
+			h(2, "Why this exists"),
+			p(
+				"The weekly report used to be copied by hand from ClickUp into a sheet. It took an hour and the numbers drifted. This doc says how the sync works, what it leaves out and what's still open.",
+			),
+			h(2, "How it works"),
+			p(
+				"Every night a job reads the tasks changed that day and writes one row per task. It never deletes a row. A task that moves lists keeps its row and gets a new ",
+				text("list", [{ type: "code" }]),
+				" value.",
+			),
+			h(3, "What a row holds"),
+			{
+				type: "table",
+				content: [
+					row("tableHeader", "Column", "Source", "Notes"),
+					row("tableCell", "Task", "name", "Linked back to ClickUp"),
+					row("tableCell", "Owner", "assignees[0]", "First assignee only"),
+					row("tableCell", "Hours", "time tracked", "Summed per day"),
+				],
+			},
+			h(3, "The job"),
+			{
+				type: "codeBlock",
+				attrs: { language: "typescript" },
+				content: [
+					text(
+						'export async function syncDay(day: string) {\n  const tasks = await clickup.changedOn(day);\n  const rows = tasks.map(toRow);\n  await sheet.upsert(rows, { key: "id" });\n}',
+					),
+				],
+			},
+			h(2, "Before it ships"),
+			{
+				type: "taskList",
+				content: [
+					task("Backfill the last four weeks", true),
+					task("Decide what a deleted task does to its row"),
+					task("Give finance read access to the sheet"),
+				],
+			},
+			{
+				type: "blockquote",
+				content: [
+					p(
+						"A report nobody trusts is worse than no report. Row counts get checked against ClickUp every Monday.",
+					),
+				],
+			},
+			h(2, "Open questions"),
+			p(
+				"Subtasks are flattened into their parent today. If finance wants hours per subtask, the key changes from the task id to the pair of ids, and the backfill runs again.",
+			),
+		],
+	};
+
+	// =========================
+	// STATE
+	// =========================
+	let title = $state("ClickUp to Sheets");
+	let favorited = $state(false);
+	let showAuthors = $state(false);
+	let editedAt = $state<Date>(new Date("2026-10-21T09:12:00"));
+	let note = $state("");
+
+	// =========================
+	// DERIVED
+	// =========================
+	let latest = $state<Node>(content);
+
+	const owner = { name: "Ramzi Tabka" };
+
+	// =========================
+	// FUNCTIONS
+	// =========================
+	function touched(json: Record<string, unknown>) {
+		latest = json;
+		editedAt = new Date();
+	}
+
+	function said(what: string) {
+		note = what;
+	}
+
+	function copied(kind: CopyKind) {
+		said(`Copied ${kind === "link" ? "title as link" : kind}`);
+	}
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<div class="flex flex-col gap-2">
+	<div
+		class="h-[min(48rem,calc(100svh-9rem))] overflow-hidden rounded-xl border border-border bg-background"
+	>
+		<DocEditorPage
+			bind:title
+			{content}
+			onchange={touched}
+			oncopylink={() => said("Copied link to section")}
+		>
+			{#snippet breadcrumb()}
+				<span class="flex min-w-0 items-center gap-1.5 text-muted-foreground @max-xl/doc:hidden">
+					<FileText size={14} aria-hidden="true" />
+					<span class="truncate">Reporting</span>
+				</span>
+				<span class="px-0.5 text-muted-foreground/60 @max-xl/doc:hidden" aria-hidden="true">›</span>
+				<span class="flex min-w-0 items-center gap-1.5 font-medium">
+					<FileText size={14} class="shrink-0 text-muted-foreground" aria-hidden="true" />
+					<span class="truncate">{title.trim() || "New document"}</span>
+				</span>
+			{/snippet}
+
+			{#snippet menu()}
+				<button
+					type="button"
+					aria-label={favorited ? "Remove from favorites" : "Favorite"}
+					aria-pressed={favorited}
+					onclick={() => (favorited = !favorited)}
+					class="t-press inline-flex size-7 items-center justify-center rounded-md text-muted-foreground transition-colors duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] outline-none hover:bg-foreground/6 hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50 any-pointer-coarse:size-10"
+				>
+					<Star
+						size={15}
+						weight={favorited ? "fill" : "regular"}
+						class={favorited ? "text-brand" : ""}
+					/>
+				</button>
+				<DocMenu
+					{title}
+					url="https://ui.heyramzi.com/work/docs"
+					content={latest}
+					{favorited}
+					onmove={() => said("Move to")}
+					onduplicate={() => said("Duplicated")}
+					onrename={() => said("Rename")}
+					ontemplate={() => said("Template created")}
+					onfavorite={() => (favorited = !favorited)}
+					oncopy={copied}
+					onremind={() => said("Remind me")}
+					onhistory={() => said("History")}
+					ondelete={() => said("Deleted")}
+				/>
+			{/snippet}
+
+			{#snippet meta()}
+				<EditedChip
+					{editedAt}
+					{owner}
+					lastEditor={owner}
+					showAuthorNames={showAuthors}
+					onshowauthors={(next) => (showAuthors = next)}
+					onhistory={() => said("History")}
+				/>
+			{/snippet}
+
+			{#snippet actions()}
+				{@const button =
+					"t-press inline-flex size-7 items-center justify-center rounded-md text-muted-foreground transition-colors duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] outline-none hover:bg-foreground/6 hover:text-foreground focus-visible:ring-3 focus-visible:ring-ring/50 any-pointer-coarse:size-10"}
+				<button
+					type="button"
+					aria-label="Copy link"
+					class="{button} @max-xl/doc:hidden"
+					onclick={() => said("Copied URL")}
+				>
+					<LinkSimple size={15} />
+				</button>
+				<button
+					type="button"
+					aria-label="Subscribe"
+					class={button}
+					onclick={() => said("Subscribed")}
+				>
+					<Bell size={15} />
+				</button>
+			{/snippet}
+		</DocEditorPage>
+	</div>
+	<p class="h-4 text-xs text-muted-foreground" aria-live="polite">{note}</p>
+</div>

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

@@ -0,0 +1,125 @@
+<script lang="ts">
+	// =========================
+	// IMPORTS
+	// =========================
+	import { ClockCounterClockwise, SlidersHorizontal } from "phosphor-svelte";
+	import { Avatar, AvatarFallback, AvatarImage } from "../../shadcn/avatar/index.js";
+	import { Popover, PopoverContent, PopoverTrigger } from "../../shadcn/popover/index.js";
+	import { Switch } from "../../shadcn/switch/index.js";
+	import { initials } from "../../lib/initials.js";
+	import { editStamp, editedLabel, type DateInput } from "./edited.js";
+	import { docLabels, type DocLabels } from "./labels.js";
+
+	// =========================
+	// TYPES
+	// =========================
+	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;
+		onshowauthors?: (show: boolean) => void;
+		/** The history button shows only when this is passed. */
+		onhistory?: () => void;
+		labels?: Partial<DocLabels>;
+		timeZone?: string;
+		now?: Date;
+	}
+
+	// =========================
+	// PROPS
+	// =========================
+	let {
+		editedAt,
+		owner = null,
+		lastEditor = null,
+		showAuthorNames = false,
+		onshowauthors,
+		onhistory,
+		labels: labelOverrides,
+		timeZone,
+		now,
+	}: Props = $props();
+
+	// =========================
+	// DERIVED
+	// =========================
+	let t = $derived(docLabels(labelOverrides));
+	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);
+</script>
+
+{#snippet person(who: Person)}
+	<Avatar class="size-5">
+		{#if who.image}<AvatarImage src={who.image} alt="" />{/if}
+		<AvatarFallback class="text-[9px]">{initials(who.name)}</AvatarFallback>
+	</Avatar>
+	<span class="truncate text-foreground">{who.name}</span>
+{/snippet}
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+{#if hasDetails}
+	<Popover>
+		<PopoverTrigger
+			class="t-press inline-flex h-7 items-center gap-1.5 rounded-md bg-foreground/5 px-2 @max-xl/doc:px-1.5 text-[13px] font-medium text-foreground/90 tabular-nums transition-colors duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] outline-none hover:bg-foreground/8 focus-visible:ring-3 focus-visible:ring-ring/50 aria-expanded:bg-foreground/8 any-pointer-coarse:h-10"
+		>
+			<SlidersHorizontal size={14} class="text-muted-foreground" aria-hidden="true" />
+			<!-- On a narrow page the glyph stands alone, so the title keeps the bar. -->
+			<span class="@max-xl/doc:sr-only">{chip}</span>
+		</PopoverTrigger>
+		<PopoverContent align="end" sideOffset={6} class="w-[21.5rem] gap-0 p-0 text-[13px]">
+			<div class="divide-y divide-border/70">
+				{#if onshowauthors}
+					<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)}
+							aria-label={t.showAuthorNames}
+						/>
+					</div>
+				{/if}
+				{#if owner}
+					<div class="flex items-center gap-3 px-4 py-3">
+						<span class="w-20 shrink-0 text-muted-foreground">{t.ownedBy}</span>
+						<span class="flex min-w-0 items-center gap-2">{@render person(owner)}</span>
+					</div>
+				{/if}
+				{#if lastEditor}
+					<div class="flex items-center gap-3 px-4 py-3">
+						<span class="w-20 shrink-0 text-muted-foreground">{t.lastEditBy}</span>
+						<span class="flex min-w-0 flex-1 items-center gap-2">{@render person(lastEditor)}</span>
+						{#if editorStamp}
+							<span class="shrink-0 text-xs text-muted-foreground tabular-nums">{editorStamp}</span>
+						{/if}
+					</div>
+				{/if}
+				{#if onhistory}
+					<div class="p-2">
+						<button
+							type="button"
+							onclick={onhistory}
+							class="t-press flex h-8 w-full items-center justify-center gap-2 rounded-lg bg-foreground/5 font-medium transition-colors duration-[var(--duration-fast)] ease-[var(--ease-smooth-out)] outline-none hover:bg-foreground/8 focus-visible:ring-3 focus-visible:ring-ring/50"
+						>
+							<ClockCounterClockwise size={14} aria-hidden="true" />
+							{t.showHistory}
+						</button>
+					</div>
+				{/if}
+			</div>
+		</PopoverContent>
+	</Popover>
+{:else}
+	<span class="inline-flex h-7 items-center text-[13px] text-muted-foreground tabular-nums">
+		{chip}
+	</span>
+{/if}