@heyramzi/ui 2.24.0 → 3.1.0

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

@@ -1,258 +0,0 @@
-<script lang="ts">
-	import {
-		CalendarBlank,
-		CircleDashed,
-		CircleHalf,
-		Flag,
-		Folder,
-		Timer,
-		User,
-		UserCircle,
-	} from "phosphor-svelte";
-	import { Button } from "../../shadcn/button/index.js";
-	import { Card } from "../../shadcn/card/index.js";
-	import * as Avatar from "../../shadcn/avatar/index.js";
-	import TaskDetail from "./task-detail.svelte";
-	import PropertyRow from "../../components/work-parts/property-row.svelte";
-	import TaskChip from "./task-chip.svelte";
-	import TimeTracker from "../time/time-tracker.svelte";
-	import StatusDot from "../../status/status-dot.svelte";
-	import { defineStatuses } from "../../status/define-statuses.js";
-	import type { ThreadComment, ThreadPost } from "../../thread/types.js";
-	import type { TimeLogInput, TimeStopInfo } from "../time/time-types.js";
-
-	type Scenario =
-		| "default"
-		| "long"
-		| "emptyDescription"
-		| "unassigned"
-		| "running"
-		| "busy"
-		| "closed"
-		| "loading";
-
-	const statuses = defineStatuses({
-		todo: { label: "To do", tone: "neutral", variant: "open" },
-		doing: { label: "In progress", tone: "info", variant: "progress", progress: 0.5 },
-		done: { label: "Done", tone: "success", variant: "completed" },
-	});
-
-	const scenarios: { id: Scenario; label: string }[] = [
-		{ id: "default", label: "Default" },
-		{ id: "long", label: "Long title" },
-		{ id: "emptyDescription", label: "Empty description" },
-		{ id: "unassigned", label: "No assignee" },
-		{ id: "running", label: "Running timer" },
-		{ id: "busy", label: "24 comments" },
-		{ id: "closed", label: "Closed" },
-		{ id: "loading", label: "Loading" },
-	];
-
-	const people = ["Ada Lovelace", "Bo Chen", "Cy Park"];
-	const now = Date.now();
-	const hour = 3_600_000;
-	const stamp = (agoHours: number) => new Date(now - agoHours * hour).toISOString();
-
-	const person = (name: string) => ({ name, kind: "user" as const });
-	const planner = { name: "Planner", kind: "agent" as const };
-
-	const seed: ThreadComment[] = [
-		{
-			id: "c1",
-			author: person("Ada Lovelace"),
-			body: "Calls with Yoan: the format that sold the template was simple. A board on why, then the system, then the demo.",
-			createdAt: stamp(30),
-		},
-		{
-			id: "c2",
-			author: planner,
-			body: "Reused that shape for the outline. Three sections, the demo last, one call to action at the end.",
-			createdAt: stamp(26),
-		},
-		{
-			id: "c3",
-			author: person("Bo Chen"),
-			body: "Looks right. I'll record Thursday.",
-			createdAt: stamp(5),
-			edited: true,
-		},
-	];
-	const crowd: ThreadComment[] = Array.from({ length: 24 }, (_, i) => ({
-		id: `b${i}`,
-		author: i % 4 === 1 ? planner : person(people[i % people.length] ?? "Ada Lovelace"),
-		body:
-			i % 5 === 0
-				? "Pushed the second cut. The intro runs 40 seconds, so I trimmed the first example and kept the one with numbers."
-				: "Noted, moving on to the next step.",
-		createdAt: stamp(60 - i * 2),
-	}));
-
-	const longTitle =
-		"Run one awareness-only live session for an entrepreneur group, record it, and hand the raw take to the editor with a thumbnail brief";
-	const brief =
-		"Record the video about how the notebook is orchestrated.\n\nSteps: pick the angle from the notebook's own list, record, drop the raw take in the drive, and open one task per handoff (editor cut, thumbnail, storage link).\n\nDone when the raw take is in the drive and the three handoff tasks exist.";
-
-	let scenario = $state<Scenario>("default");
-	let narrow = $state(false);
-	let title = $state("Record the video and hand it off");
-	let description = $state<string | null>(brief);
-	let thread = $state<ThreadComment[]>([...seed]);
-	let done = $state(false);
-	let timer = $state<{ startedAt: number } | null>(null);
-	let entries = $state([
-		{
-			id: "e1",
-			minutes: 90,
-			day: new Date(now - 24 * hour).toISOString().slice(0, 10),
-			person: "Ada Lovelace",
-			note: "Outline",
-		},
-	]);
-
-	$effect(() => {
-		const s = scenario;
-		title = s === "long" ? longTitle : "Record the video and hand it off";
-		description = s === "emptyDescription" ? null : brief;
-		thread = s === "busy" ? [...crowd] : s === "loading" ? [] : [...seed];
-		done = s === "closed";
-		timer = s === "running" ? { startedAt: Date.now() - 754_000 } : null;
-	});
-
-	let assignee = $derived(scenario === "unassigned" ? null : "Ada Lovelace");
-	let status = $derived(done ? "done" : scenario === "running" ? "doing" : "todo");
-	let statusLabel = $derived(statuses.label(status));
-
-	function onLog(input: TimeLogInput) {
-		entries = [
-			{
-				id: `e${entries.length + 1}`,
-				minutes: input.minutes,
-				day: input.day,
-				person: "Ada Lovelace",
-				note: input.note ?? "",
-			},
-			...entries,
-		];
-		return true;
-	}
-
-	function onStop(info: TimeStopInfo) {
-		onLog({ minutes: info.minutes, day: info.day });
-		timer = null;
-	}
-
-	function onPostComment({ body, parentId }: ThreadPost) {
-		thread = [
-			...thread,
-			{
-				id: `n${thread.length}`,
-				author: person("Ada Lovelace"),
-				body,
-				parentId,
-				createdAt: new Date().toISOString(),
-			},
-		];
-	}
-</script>
-
-<div class="flex flex-col gap-3">
-	<div class="flex flex-wrap items-center gap-1.5" role="group" aria-label="Scenario">
-		{#each scenarios as item (item.id)}
-			<Button
-				size="sm"
-				variant={scenario === item.id ? "default" : "outline"}
-				aria-pressed={scenario === item.id}
-				onclick={() => (scenario = item.id)}
-			>
-				{item.label}
-			</Button>
-		{/each}
-		<Button
-			size="sm"
-			variant={narrow ? "default" : "outline"}
-			class="ms-auto"
-			aria-pressed={narrow}
-			onclick={() => (narrow = !narrow)}
-		>
-			390 wide
-		</Button>
-	</div>
-
-	<Card class="mx-auto w-full gap-0 py-0" style="max-width: {narrow ? '390px' : 'none'}">
-		<TaskDetail
-			{title}
-			onTitleChange={(next) => {
-				title = next;
-			}}
-			{done}
-			closed={done}
-			onToggleDone={() => (done = !done)}
-			{description}
-			onDescriptionChange={(next) => {
-				description = next;
-			}}
-			comments={thread}
-			loadingComments={scenario === "loading"}
-			{onPostComment}
-			onDeleteComment={(comment) => {
-				thread = thread.filter((row) => row.id !== comment.id);
-			}}
-			canEditComment={(comment) =>
-				comment.author.kind === "user" && comment.author.name === "Ada Lovelace"}
-		>
-			{#snippet meta()}
-				<span>From a call</span>
-				<span class="tabular-nums">Created Sep 9, 2026</span>
-			{/snippet}
-			{#snippet properties()}
-				<PropertyRow label="Status" icon={CircleHalf} layout="responsive">
-					<TaskChip aria-label="Status: {statusLabel}"
-						><StatusDot {statuses} {status} size={14} animate={false} />{statusLabel}</TaskChip
-					>
-				</PropertyRow>
-				<PropertyRow label="Priority" icon={Flag} layout="responsive">
-					<TaskChip><Flag weight="fill" class="text-destructive" aria-hidden="true" />High</TaskChip
-					>
-				</PropertyRow>
-				<PropertyRow label="Assignee" icon={UserCircle} layout="responsive">
-					{#if assignee}
-						<TaskChip>
-							<Avatar.Root class="size-4" aria-hidden="true">
-								<Avatar.Fallback><User class="size-3" /></Avatar.Fallback>
-							</Avatar.Root>
-							{assignee}
-						</TaskChip>
-					{:else}
-						<TaskChip empty><CircleDashed aria-hidden="true" />Assign</TaskChip>
-					{/if}
-				</PropertyRow>
-				<PropertyRow label="Due date" icon={CalendarBlank} layout="responsive">
-					<TaskChip><CalendarBlank aria-hidden="true" />Oct 9, 2026</TaskChip>
-				</PropertyRow>
-				<PropertyRow label="Project" icon={Folder} layout="responsive">
-					<TaskChip><Folder aria-hidden="true" />Agency OS</TaskChip>
-				</PropertyRow>
-				<PropertyRow label="Time" icon={Timer} layout="responsive">
-					<TimeTracker
-						{entries}
-						running={timer}
-						estimate={240}
-						getId={(entry) => entry.id}
-						getMinutes={(entry) => entry.minutes}
-						getDay={(entry) => entry.day}
-						getPerson={(entry) => entry.person}
-						getNote={(entry) => entry.note}
-						onStart={() => {
-							timer = { startedAt: Date.now() };
-						}}
-						{onStop}
-						{onLog}
-						onDelete={(entry) => {
-							entries = entries.filter((row) => row.id !== entry.id);
-						}}
-					/>
-				</PropertyRow>
-			{/snippet}
-		</TaskDetail>
-	</Card>
-</div>

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

@@ -1,227 +0,0 @@
-<script lang="ts">
-	// =========================
-	// IMPORTS
-	// =========================
-	import { docLooks } from "../../components/work-parts/looks.js";
-	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 {docLooks.frame} border border-border bg-card"
-	>
-		<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 {docLooks.control} 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:shadow-(--ring-focus) 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 ${docLooks.control} 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:shadow-(--ring-focus) 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>