@heyramzi/ui 2.0.1 → 2.2.0

package/src/tasks/record/where-we-are.svelte

@@ -1,121 +0,0 @@
-<script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import { NavigationArrow } from "phosphor-svelte";
-import { cn } from "../../lib/utils.js";
-import { Button } from "../../shadcn/button/index.js";
-import StatusBadge from "../status-badge.svelte";
-import type { Tone } from "../../lib/tone.js";
-import { gutterClass } from "./gutter.js";
-import { formatAge } from "./format.js";
-import { resolveLabels, type RecordLabels } from "./types.js";
-
-// =========================
-// PROPS
-// =========================
-interface Props {
-	/** The status note. Nothing draws without it. */
-	note?: string | null;
-	/** ISO timestamp of the note. */
-	at?: string | null;
-	actor?: string | null;
-	health?: { label: string; tone: Tone } | null;
-	/** Client mode: the project this note belongs to. */
-	project?: { name: string; href?: string | null } | null;
-	labels?: Partial<RecordLabels>;
-	locale?: string;
-	now?: Date | number;
-	class?: string;
-}
-let { note, at, actor, health, project, labels, locale, now, class: className }: Props = $props();
-
-// =========================
-// STATE
-// =========================
-let expanded = $state(false);
-let clamped = $state(false);
-let text = $state<HTMLElement | null>(null);
-
-// =========================
-// DERIVED
-// =========================
-let t = $derived(resolveLabels(labels));
-let age = $derived(at ? formatAge(at, now, locale) : null);
-let hasMeta = $derived(Boolean(health || actor || age));
-
-// =========================
-// EFFECTS
-// =========================
-// WHY measure instead of guessing from length: the clamp is two lines, so the
-// same note fits at 1280px and overflows at 390px. "More" shows only when text is cut.
-$effect(() => {
-	if (!text) return;
-	const el = text;
-	const measure = () => {
-		if (!expanded) clamped = el.scrollHeight > el.clientHeight + 1;
-	};
-	measure();
-	const observer = new ResizeObserver(measure);
-	observer.observe(el);
-	return () => observer.disconnect();
-});
-</script>
-
-<!-- =========================== -->
-<!-- MARKUP -->
-<!-- =========================== -->
-{#if note}
-	<section
-		aria-label={t.whereWeAre}
-		class={cn("flex items-start gap-2.5 border-b border-border bg-muted/40 py-2.5", gutterClass, className)}
-	>
-		<NavigationArrow
-			class="mt-0.5 size-3.5 shrink-0 text-[color:var(--tone-accent,var(--color-primary))]"
-			weight="fill"
-			aria-hidden="true"
-		/>
-		<div class="min-w-0 flex-1">
-			<!-- No `title` attribute: a native tooltip would repeat the whole note
-			     over the steps list. "More" opens it in place. -->
-			<p
-				bind:this={text}
-				class={cn("text-sm leading-snug text-muted-foreground", !expanded && "line-clamp-2")}
-			>
-				<span class="font-medium text-foreground">{t.whereWeAre}</span>
-				{#if project}
-					{#if project.href}
-						<a
-							href={project.href}
-							class="font-medium text-foreground underline-offset-2 hover:underline"
-							>{project.name}</a
-						>
-					{:else}
-						<span class="font-medium text-foreground">{project.name}</span>
-					{/if}
-				{/if}
-				<span class="whitespace-pre-line">{note}</span>
-			</p>
-			{#if hasMeta}
-				<p class="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-xs text-muted-foreground">
-					{#if health}
-						<StatusBadge tone={health.tone} dot capitalize={false}>{health.label}</StatusBadge>
-					{/if}
-					{#if actor}<span>{t.by(actor)}</span>{/if}
-					{#if age}<span class="tabular-nums">{age}</span>{/if}
-				</p>
-			{/if}
-		</div>
-		{#if clamped || expanded}
-			<Button
-				variant="ghost"
-				size="sm"
-				class="-mr-2 shrink-0 text-muted-foreground"
-				aria-expanded={expanded}
-				onclick={() => (expanded = !expanded)}
-			>
-				{expanded ? t.less : t.more}
-			</Button>
-		{/if}
-	</section>
-{/if}

package/src/tasks/side-panel.svelte

@@ -1,193 +0,0 @@
-<script lang="ts" module>
-import type { PanelStat, SidePanelWidth } from "./side-panel-types.js";
-export type { PanelStat, SidePanelWidth };
-</script>
-
-<script lang="ts">
-// =========================
-// IMPORTS
-// =========================
-import type { Snippet } from "svelte";
-import * as Sheet from "../shadcn/sheet/index.js";
-import { OpenIn, type OpenInTool } from "../components/open-in/index.js";
-import { CopyButton } from "../components/copy/index.js";
-import type { Tone } from "../lib/tone.js";
-import { cn } from "../lib/utils.js";
-import StatusBadge from "./status-badge.svelte";
-
-// =========================
-// PROPS
-// =========================
-interface 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/tasks/status-types.ts

@@ -1,40 +0,0 @@
-import type { Component } from "svelte";
-import type { Tone } from "../lib/tone.js";
-
-/**
- * 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;
-	tone?: Tone;
-	/** Any Svelte component, for example a Phosphor icon. Renders inside StatusIcon. */
-	icon?: Component;
-	variant?: StatusDotVariant;
-	/** 0 to 1. Only used by the `progress` variant. */
-	progress?: number;
-	/** Optional CSS color. Overrides the tone color for the dot and icon. */
-	color?: string;
-	description?: string;
-};
-
-export type StatusMap = Record<string, StatusDef>;
-
-export type StatusId<M extends StatusMap> = keyof M & string;
-
-/** What the components accept. `defineStatuses` returns this plus a typed `ids`. */
-export type Statuses = {
-	/** The raw map. Kept loose so a registry with specific keys is assignable here. */
-	map: StatusMap;
-	ids: string[];
-	has(id: string): boolean;
-	get(id: string): StatusDef | undefined;
-	label(id: string): string;
-	tone(id: string): Tone;
-	icon(id: string): Component | undefined;
-	variant(id: string): StatusDotVariant;
-	progress(id: string): number | undefined;
-	color(id: string): string | undefined;
-};