@heyramzi/tasks 0.3.0 → 0.5.0

package/src/side-panel.svelte

@@ -0,0 +1,204 @@
+<script lang="ts" module>
+/** How wide the panel opens from `sm` (a short form) to `2xl` (a reader). Under
+    the `sm` breakpoint every panel is full width. */
+export type SidePanelWidth = "sm" | "md" | "lg" | "xl" | "2xl";
+
+/** One number the record is judged on. They sit in the header, in the order given. */
+export type PanelStat = {
+	label: string;
+	value: string;
+	/** A quiet note beside the value: the rate behind a count, or what the figure is. */
+	sub?: string;
+	/** One severity vocabulary: a count that should be zero is `bad`. */
+	tone?: "default" | "muted" | "good" | "bad";
+};
+</script>
+
+<script lang="ts">
+// =========================
+// IMPORTS
+// =========================
+import type { Snippet } from "svelte";
+import * as Sheet from "@heyramzi/ui/shadcn/sheet";
+import { OpenIn, type OpenInTool } from "@heyramzi/ui/components/open-in";
+import { CopyButton } from "@heyramzi/ui/components/copy";
+import type { Tone } from "@heyramzi/ui/lib/tone.js";
+import { cn } from "@heyramzi/utils";
+import StatusBadge from "./status-badge.svelte";
+
+// =========================
+// PROPS
+// =========================
+type Props = {
+	open: boolean;
+	/** Names the dialog for screen readers and heads the panel. */
+	title: string;
+	/** Merged onto the title. A short path is set `font-mono`, a subject is not. */
+	titleClass?: string;
+	/** The facts the record is filed under, read out under the title. */
+	description?: string;
+	/** Status chips, left of the action row. */
+	badges?: { label: string; tone: Tone }[];
+	/** Doors out to another tool. `text` replaces the tool's name on the button. */
+	openIn?: { tool: OpenInTool; href: string; label: string; text?: string }[];
+	/** A prompt for an AI about this record, copied on click. */
+	handoff?: { value: () => string | Promise<string>; label: string; copiedLabel: string };
+	/** The record's numbers, as a strip under the badges. Same place in every panel. */
+	stats?: PanelStat[];
+	/** Anything else the record can do, drawn last in the action row. */
+	actions?: Snippet;
+	/** Pinned actions. The body scrolls above it; the caller aligns the row. */
+	footer?: Snippet;
+	children: Snippet;
+	width?: SidePanelWidth;
+	/** The body brings its own header: the title is read out but not drawn, and
+	    the body is neither padded nor scrolled by the panel. */
+	bare?: boolean;
+	/** Fires once when the panel closes, from the close button, Escape or the overlay. */
+	onClose?: () => void;
+};
+let {
+	open = $bindable(),
+	title,
+	titleClass,
+	description,
+	badges = [],
+	openIn = [],
+	handoff,
+	stats = [],
+	actions,
+	footer,
+	children,
+	width = "sm",
+	bare = false,
+	onClose,
+}: Props = $props();
+
+// =========================
+// STATE
+// =========================
+let panel = $state<HTMLElement | null>(null);
+
+// =========================
+// DERIVED
+// =========================
+let hasRow = $derived(badges.length > 0 || openIn.length > 0 || Boolean(handoff || actions));
+const STAT_TONE = {
+	default: "",
+	muted: "text-muted-foreground",
+	good: "text-success",
+	bad: "text-destructive",
+} as const;
+const WIDTH: Record<SidePanelWidth, string> = {
+	sm: "sm:max-w-sm",
+	md: "sm:max-w-md",
+	lg: "sm:max-w-xl",
+	xl: "sm:max-w-2xl",
+	"2xl": "sm:max-w-3xl",
+};
+
+// =========================
+// HANDLERS
+// =========================
+// WHY focus goes to the panel unless a text field comes first: the dialog otherwise
+// opens on its first control, which draws a ring on a record nobody has touched.
+// A form that opens on its field keeps the default, since that is where you type.
+const FIRST_CONTROL =
+	'a[href], button:not([disabled]), input:not([type="hidden"]):not([disabled]), textarea:not([disabled]), select:not([disabled])';
+function onOpenAutoFocus(event: Event) {
+	if (!panel || panel.querySelector(FIRST_CONTROL)?.matches("input, textarea, select")) return;
+	event.preventDefault();
+	panel.focus();
+}
+</script>
+
+<!-- =========================== -->
+<!-- MARKUP -->
+<!-- =========================== -->
+<Sheet.Root
+	bind:open
+	onOpenChange={(next) => {
+		if (!next) onClose?.();
+	}}
+>
+	<Sheet.Content
+		side="right"
+		bind:ref={panel}
+		tabindex={-1}
+		class={cn("flex w-full flex-col gap-0 p-0", WIDTH[width], bare && "overflow-hidden")}
+		{onOpenAutoFocus}
+	>
+		{#if bare}
+			<Sheet.Header class="sr-only">
+				<Sheet.Title>{title}</Sheet.Title>
+			</Sheet.Header>
+			{@render children()}
+		{:else}
+			<Sheet.Header class="gap-1 border-b border-border">
+				<!-- WHY the right padding: the close button sits over this corner and
+				     a long title runs straight under it. -->
+				<Sheet.Title class={cn("pr-9 text-base leading-snug", titleClass)}>{title}</Sheet.Title>
+				{#if description}
+					<Sheet.Description>{description}</Sheet.Description>
+				{/if}
+				{#if hasRow}
+					<div class="flex items-center justify-between gap-3 pt-1.5">
+						<div class="flex min-w-0 flex-wrap items-center gap-2">
+							{#each badges as badge (`${badge.tone}:${badge.label}`)}
+								<StatusBadge tone={badge.tone}>{badge.label}</StatusBadge>
+							{/each}
+						</div>
+						<div class="flex shrink-0 items-center gap-1">
+							{#each openIn as door (door.href)}
+								<OpenIn
+									tool={door.tool}
+									href={door.href}
+									title={door.label}
+									label={door.text}
+									variant="button"
+									size="sm"
+								/>
+							{/each}
+							{#if handoff}
+								<CopyButton
+									agent
+									value={handoff.value}
+									label={handoff.label}
+									copiedLabel={handoff.copiedLabel}
+								/>
+							{/if}
+							{@render actions?.()}
+						</div>
+					</div>
+				{/if}
+				{#if stats.length > 0}
+					<dl class="flex flex-wrap gap-x-6 gap-y-3 pt-3">
+						{#each stats as stat (stat.label)}
+							<div class="min-w-0">
+								<dt class="text-xs text-muted-foreground">{stat.label}</dt>
+								<dd class={cn("text-sm font-medium tabular-nums", STAT_TONE[stat.tone ?? "default"])}>
+									{stat.value}
+									{#if stat.sub}
+										<span class="text-xs font-normal text-muted-foreground">{stat.sub}</span>
+									{/if}
+								</dd>
+							</div>
+						{/each}
+					</dl>
+				{/if}
+			</Sheet.Header>
+
+			<!-- WHY the body pads and spaces its sections itself: a panel that lets the
+			     caller choose drifts, one with a grey band and one with a white page. -->
+			<div class="flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto p-4">
+				{@render children()}
+			</div>
+
+			{#if footer}
+				<Sheet.Footer class="mt-0 flex-row items-center justify-end border-t border-border">
+					{@render footer()}
+				</Sheet.Footer>
+			{/if}
+		{/if}
+	</Sheet.Content>
+</Sheet.Root>

package/src/status-badge.svelte

@@ -1,19 +1,29 @@
 <script lang="ts">
-	import { cn } from "./lib/cn.js";
-	import { TONE_CLASS } from "./tone.js";
-	import type { Tone, Statuses } from "./status-types.js";
-	import spinnerIcon from "./icons/spinner.svg?raw";
+	import type { Snippet } from "svelte";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "@heyramzi/utils";
+	import { Badge } from "@heyramzi/ui/shadcn/badge";
+	import { Spinner } from "@heyramzi/ui/shadcn/spinner";
+	import { TONE_COLOR, type Tone } from "@heyramzi/ui/lib/tone.js";
+	import type { Statuses } from "./status-types.js";
 
-	type Props = {
+	type Props = Omit<HTMLAttributes<HTMLSpanElement>, "class" | "children"> & {
 		/** A registry from `defineStatuses`. Supplies the label and tone. */
 		statuses?: Statuses;
-		status: string;
+		/** The status id to look up in `statuses`. Leave it out when you pass `children`. */
+		status?: string;
 		/** Override the registry label. */
 		label?: string;
 		/** Override the registry tone. */
 		tone?: Tone;
+		/** Shows a dot in the tone's colour before the label. */
+		dot?: boolean;
 		/** Shows a spinner: a background job is still working on the record. */
 		busy?: boolean;
+		/** Capitalizes the first letter of each word. Turn off for a name or a number. */
+		capitalize?: boolean;
+		/** The chip's text, for a caller that already has the word. Wins over `label` and the registry. */
+		children?: Snippet;
 		class?: string;
 	};
 
@@ -22,23 +32,32 @@
 		status,
 		label,
 		tone,
+		dot = false,
 		busy = false,
+		capitalize = true,
+		children,
 		class: className,
+		...restProps
 	}: Props = $props();
 
-	let resolvedTone = $derived(tone ?? (statuses ? statuses.tone(status) : "neutral"));
-	let resolvedLabel = $derived(label ?? (statuses ? statuses.label(status) : status));
+	let resolvedTone = $derived(tone ?? (statuses && status ? statuses.tone(status) : "neutral"));
+	let resolvedLabel = $derived(label ?? (statuses && status ? statuses.label(status) : (status ?? "")));
 </script>
 
-<span
-	class={cn(
-		"inline-flex shrink-0 items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium capitalize",
-		TONE_CLASS[resolvedTone],
-		className,
-	)}
->
+<Badge tone={resolvedTone} class={cn(capitalize && "capitalize", className)} {...restProps}>
+	{#if dot}
+		<span
+			class="size-1.5 shrink-0 rounded-full"
+			style:background-color={TONE_COLOR[resolvedTone]}
+			aria-hidden="true"
+		></span>
+	{/if}
 	{#if busy}
-		<span class="size-3 animate-spin [&>svg]:size-full" aria-hidden="true">{@html spinnerIcon}</span>
+		<Spinner class="size-3" aria-hidden="true" />
+	{/if}
+	{#if children}
+		{@render children()}
+	{:else}
+		{resolvedLabel}
 	{/if}
-	{resolvedLabel}
-</span>
+</Badge>

package/src/status-dot.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { cn } from "./lib/cn.js";
-	import { TONE_COLOR } from "./tone.js";
+	import { cn } from "@heyramzi/utils";
+	import { TONE_COLOR } from "@heyramzi/ui/lib/tone.js";
 	import type { StatusDotVariant, Statuses } from "./status-types.js";
 
-	type Props = {
+	interface Props {
 		/** A registry from `defineStatuses`. Resolves color, variant and progress. */
 		statuses?: Statuses;
 		status?: string;
@@ -14,7 +14,7 @@
 		size?: number;
 		animate?: boolean;
 		class?: string;
-	};
+	}
 
 	let {
 		statuses,
@@ -66,17 +66,16 @@
 		viewBox="0 0 14 14"
 		fill="none"
 		aria-hidden="true"
-		class={cn("shrink-0", className)}
+		class={cn("sd", className)}
 	>
 		<circle cx="7" cy="7" r="6" fill={resolvedColor} class={animate ? "sd-pop" : ""}></circle>
 		<polyline
 			points="4.5,7 6.5,9 9.5,5"
 			fill="none"
-			stroke="white"
+			class={cn("sd-mark", animate && "sd-check")}
 			stroke-width="1.5"
 			stroke-linecap="round"
 			stroke-linejoin="round"
-			class={animate ? "sd-check" : ""}
 		></polyline>
 	</svg>
 {:else if resolvedVariant === "lost"}
@@ -86,10 +85,10 @@
 		viewBox="0 0 14 14"
 		fill="none"
 		aria-hidden="true"
-		class={cn("shrink-0", className)}
+		class={cn("sd", className)}
 	>
 		<circle cx="7" cy="7" r="6" fill={resolvedColor} class={animate ? "sd-pop" : ""}></circle>
-		<g stroke="white" stroke-width="1.5" stroke-linecap="round">
+		<g class="sd-mark" stroke-width="1.5" stroke-linecap="round">
 			<line x1="5" y1="5" x2="9" y2="9" class={animate ? "sd-cross" : ""}></line>
 			<line x1="9" y1="5" x2="5" y2="9" class={animate ? "sd-cross sd-cross-second" : ""}></line>
 		</g>
@@ -101,7 +100,7 @@
 		viewBox="0 0 14 14"
 		fill="none"
 		aria-hidden="true"
-		class={cn("shrink-0", className)}
+		class={cn("sd", className)}
 	>
 		<circle cx="7" cy="7" r="6" fill={resolvedColor} class={animate ? "sd-pop" : ""}></circle>
 	</svg>
@@ -112,9 +111,16 @@
 		viewBox="0 0 14 14"
 		fill="none"
 		aria-hidden="true"
-		class={cn("shrink-0", className)}
+		class={cn("sd", className)}
 	>
-		<circle cx="7" cy="7" r="5.5" stroke={resolvedColor} stroke-width="1.5"></circle>
+		<circle
+			cx="7"
+			cy="7"
+			r="5.5"
+			stroke={resolvedColor}
+			stroke-width="1.5"
+			class={resolvedVariant === "dashed" ? "sd-dashed" : ""}
+		></circle>
 		{#if dasharray}
 			<circle
 				cx="7"
@@ -133,6 +139,20 @@
 {/if}
 
 <style>
+	.sd {
+		flex-shrink: 0;
+	}
+
+	/* The tick and cross read as cut out of the disc. A host sets the mark to its own ground. */
+	.sd-mark {
+		stroke: var(--status-dot-mark, white);
+	}
+
+	/* 12 dashes that close evenly: 2 * PI * 5.5 = 34.56, cut into 12 periods of 2.88. */
+	.sd-dashed {
+		stroke-dasharray: 1.3 1.58;
+	}
+
 	.sd-fill {
 		transform-origin: 7px 7px;
 		animation: sd-fill-in var(--duration-slow, 320ms) var(--ease-smooth-out, ease-out) forwards;

package/src/status-icon.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import type { Component } from "svelte";
 	import StatusDot from "./status-dot.svelte";
-	import { cn } from "./lib/cn.js";
-	import { TONE_ICON } from "./tone.js";
+	import { cn } from "@heyramzi/utils";
+	import { TONE_ICON } from "@heyramzi/ui/lib/tone.js";
 	import type { Statuses } from "./status-types.js";
 
 	type Props = {

package/src/status-types.ts

@@ -1,10 +1,11 @@
 import type { Component } from "svelte";
+import type { Tone } from "@heyramzi/ui/lib/tone.js";
 
-/** The one severity scale the kit ships. */
-export type Tone = "neutral" | "accent" | "info" | "success" | "warning" | "destructive";
-
-/** The shape the dot can take. `progress` needs a `progress` value between 0 and 1. */
-export type StatusDotVariant = "open" | "progress" | "filled" | "completed" | "lost";
+/**
+ * The shape the dot can take. `progress` needs a `progress` value between 0 and 1.
+ * `dashed` is an open ring cut into dashes, for an aggregate such as "All".
+ */
+export type StatusDotVariant = "open" | "dashed" | "progress" | "filled" | "completed" | "lost";
 
 export type StatusDef = {
 	label: string;