@heyramzi/ui 2.23.0 → 2.24.0

package/COMPONENTS.md

@@ -64,11 +64,9 @@ Generic pieces built on the primitives, imported from `@heyramzi/ui/components/<
 - `copy` — CopyButton, copyText, copyRichText, htmlToPlainText, Copied
 - `data-table` — SortableHead, Pagination, InfiniteScroll, RowContextMenu, TableSkeleton, and the sort, page and filter helpers
 - `hold-to-confirm` — HoldToConfirm, press and hold to confirm
-- `icon` — Icon, a Phosphor component at a size
-- `language-flag` — LanguageFlag
+- `language-flag` — LanguageFlag, LANGUAGE_FLAGS (code to `/flags/*.svg`, also a SegmentedFilter option's `image`)
 - `list-page` — ListPageShell, MasterDetail, GroupedList, RailRow and the rest of the master-detail page kit, NoticeBar, EmptyState, FilterPopover, setSectionHost
 - `toolbar` — Toolbar: one row at any width; search, tabs and the view switch fold into menus in a narrow pane
-- `locale-switch` — LocaleSwitch, a language switch on SegmentedFilter
 - `mark` — Mark, a logo or photo glyph with an initial fallback
 - `open-in` — OpenIn, a link out to a tool that takes the tool's name, label and mark as a prop
 - `picker` — Picker, MarkPicker, pickerTriggerClass, a command palette at popover scale
@@ -122,15 +120,14 @@ Generic pieces built on the primitives, imported from `@heyramzi/ui/components/<
 ## AI and chat (`src/ai`)
 
 - `ai-button` — AiButton
-- `confirmation` — Confirmation, ConfirmationTitle, ConfirmationRequest, ConfirmationAccepted, ConfirmationRejected, ConfirmationActions, ConfirmationAction
+- `confirmation` — Confirmation, ConfirmationTitle, ConfirmationState (`when` names the kind it shows), ConfirmationActions, ConfirmationAction, type ConfirmationKind
 - `generation-progress` — GenerationProgress
 - `loading-state` — PixelLoader
 - `prompt-input` — PromptInput, PromptInputBody, PromptInputToolbar, PromptInputTextarea, PromptInputSubmit
 - `reasoning` — Reasoning, ReasoningTrigger, ReasoningContent
 - `response` — Response
 - `suggestion` — Suggestion, Suggestions
-- `thinking-dots` — ThinkingDots
-- `typing-dots` — TypingDots
+- `typing-dots` — TypingDots. A `label` makes it a `role="status"` line
 - `voice-waveform` — VoiceWaveform
 
 ## Record (`src/record`)

package/dist/ai/confirmation/index.js

@@ -1,11 +1,8 @@
 import Confirmation from "../../../src/ai/confirmation/Confirmation.svelte";
 import ConfirmationTitle from "../../../src/ai/confirmation/ConfirmationTitle.svelte";
-import ConfirmationRequest from "../../../src/ai/confirmation/ConfirmationRequest.svelte";
-import ConfirmationAccepted from "../../../src/ai/confirmation/ConfirmationAccepted.svelte";
-import ConfirmationRejected from "../../../src/ai/confirmation/ConfirmationRejected.svelte";
-import ConfirmationFailed from "../../../src/ai/confirmation/ConfirmationFailed.svelte";
+import ConfirmationState from "../../../src/ai/confirmation/ConfirmationState.svelte";
 import ConfirmationActions from "../../../src/ai/confirmation/ConfirmationActions.svelte";
 import ConfirmationAction from "../../../src/ai/confirmation/ConfirmationAction.svelte";
-export { Confirmation, ConfirmationTitle, ConfirmationRequest, ConfirmationAccepted, ConfirmationRejected, ConfirmationFailed, ConfirmationActions, ConfirmationAction, 
+export { Confirmation, ConfirmationTitle, ConfirmationState, ConfirmationActions, ConfirmationAction, 
 //
- Confirmation as Root, ConfirmationTitle as Title, ConfirmationRequest as Request, ConfirmationAccepted as Accepted, ConfirmationRejected as Rejected, ConfirmationFailed as Failed, ConfirmationActions as Actions, ConfirmationAction as Action };
+ Confirmation as Root, ConfirmationTitle as Title, ConfirmationState as State, ConfirmationActions as Actions, ConfirmationAction as Action };

package/dist/ai/index.js

@@ -17,11 +17,7 @@ export { PromptInput, PromptInputBody, PromptInputToolbar, PromptInputTextarea,
 // =========================
 // CONFIRMATION
 // =========================
-export { Confirmation, ConfirmationTitle, ConfirmationRequest, ConfirmationAccepted, ConfirmationRejected, ConfirmationActions, ConfirmationAction } from "./confirmation/index.js";
-// =========================
-// THINKING DOTS
-// =========================
-export { ThinkingDots } from "./thinking-dots/index.js";
+export { Confirmation, ConfirmationTitle, ConfirmationState, ConfirmationActions, ConfirmationAction } from "./confirmation/index.js";
 // =========================
 // VOICE WAVEFORM
 // =========================

package/dist/charts/dashboard/index.js

@@ -1,8 +1,6 @@
-export { default as DataPanel } from "../../../src/charts/dashboard/data-panel.svelte";
-export { default as DataSortHead } from "../../../src/charts/dashboard/data-sort-head.svelte";
+export { default as DataPanel } from "../../../src/lib/panel.svelte";
 export { default as DataTable } from "../../../src/charts/dashboard/data-table.svelte";
 export { default as RatingChip } from "../../../src/charts/dashboard/rating-chip.svelte";
-export { default as DashboardEmpty } from "../../../src/charts/dashboard/dashboard-empty.svelte";
 export { default as DashboardSection } from "../../../src/charts/dashboard/dashboard-section.svelte";
 export { default as PanelGrid } from "../../../src/charts/dashboard/panel-grid.svelte";
 export { default as PeriodFilter } from "../../../src/charts/dashboard/period-filter.svelte";

package/dist/charts/primitives/chart-utils.js

@@ -13,6 +13,20 @@ export function getPayloadConfigFromPayload(config, item, key) {
 	}
 	return configLabelKey in config ? config[configLabelKey] : config[key];
 }
+const compact = new Intl.NumberFormat(undefined, {
+	notation: "compact",
+	maximumFractionDigits: 1
+});
+/**
+* An axis tick formatter. "1,000,000" overflows the 48px gutter and the gap between ticks, so a
+* label over 6 characters falls back to "1M"; the tooltip keeps the full value.
+*/
+export function valueTick(format) {
+	return (v) => {
+		const full = format(v);
+		return full.length > 6 && Number.isFinite(v) ? compact.format(v) : full;
+	};
+}
 const chartContextKey = Symbol("chart-context");
 export function setChartContext(value) {
 	return setContext(chartContextKey, value);

package/dist/components/chip/index.js

@@ -1 +1,2 @@
+export { default as CountChip } from "../../../src/components/chip/count-chip.svelte";
 export { default as TagChip } from "../../../src/components/chip/tag-chip.svelte";

package/dist/components/language-flag/flags.js

@@ -0,0 +1,5 @@
+/** Language code to flag image. The host serves these files from /flags. */
+export const LANGUAGE_FLAGS = {
+	en: "/flags/US.svg",
+	fr: "/flags/FR.svg"
+};

package/dist/components/language-flag/index.js

@@ -1 +1,2 @@
 export { default as LanguageFlag } from "../../../src/components/language-flag/language-flag.svelte";
+export { LANGUAGE_FLAGS } from "./flags.js";

package/dist/components/list-page/index.js

@@ -1,6 +1,5 @@
-export { default as DetailEmpty } from "../../../src/components/list-page/detail-empty.svelte";
 export { default as DetailHeader } from "../../../src/components/list-page/detail-header.svelte";
-export { default as DetailPanel } from "../../../src/components/list-page/detail-panel.svelte";
+export { default as DetailPanel } from "../../../src/lib/panel.svelte";
 export { default as DetailRow } from "../../../src/components/list-page/detail-row.svelte";
 export { default as DetailStack } from "../../../src/components/list-page/detail-stack.svelte";
 export { default as EmptyState } from "../../../src/components/list-page/empty-state.svelte";
@@ -9,7 +8,6 @@ export { default as PrevNext } from "../../../src/components/list-page/prev-next
 export { stepTo } from "./step.js";
 export { default as NoticeBar } from "../../../src/components/list-page/notice-bar.svelte";
 export { default as RailBody } from "../../../src/components/list-page/rail-body.svelte";
-export { default as RailEmpty } from "../../../src/components/list-page/rail-empty.svelte";
 export { default as RailHead } from "../../../src/components/list-page/rail-head.svelte";
 export { default as RailRow } from "../../../src/components/list-page/rail-row.svelte";
 export { default as SectionLabel } from "../../../src/components/section-header/section-label.svelte";

package/dist/components/work-parts/index.js

@@ -1,4 +1,4 @@
-export { default as CountChip } from "../../../src/components/work-parts/count-chip.svelte";
+export { default as CountChip } from "../../../src/components/chip/count-chip.svelte";
 export { default as GroupHead } from "../../../src/components/work-parts/group-head.svelte";
 export { default as PropertyRow } from "../../../src/components/work-parts/property-row.svelte";
 export { default as WorkCard } from "../../../src/components/work-parts/work-card.svelte";

package/dist/editor/doc-blocks.js

@@ -5,6 +5,7 @@
 import { Extension } from "@tiptap/core";
 import { Plugin, PluginKey } from "@tiptap/pm/state";
 import { Decoration, DecorationSet } from "@tiptap/pm/view";
+import { copyText } from "../components/copy/clipboard.js";
 import { anchorIds } from "./anchors.js";
 const LINK_ICON = `<svg width="12" height="12" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true"><path d="M240 88.23a54.43 54.43 0 0 1-16 37L189.25 160a54.27 54.27 0 0 1-38.63 16h-.05A54.63 54.63 0 0 1 96 119.84a8 8 0 0 1 16 .45A38.62 38.62 0 0 0 150.58 160a38.4 38.4 0 0 0 27.31-11.31l34.75-34.75a38.63 38.63 0 0 0-54.63-54.63l-11 11A8 8 0 0 1 135.7 59l11-11a54.65 54.65 0 0 1 77.3 0A54.86 54.86 0 0 1 240 88.23ZM109 185.66l-11 11A38.41 38.41 0 0 1 70.6 208a38.63 38.63 0 0 1-27.29-65.94L78 107.31a38.63 38.63 0 0 1 54.63 0 8 8 0 0 0 11.31-11.31 54.65 54.65 0 0 0-77.3 0L32 130.75A54.62 54.62 0 0 0 70.56 224a54.28 54.28 0 0 0 38.64-16l11-11a8 8 0 0 0-11.2-11.34Z"/></svg>`;
 const anchorsKey = new PluginKey("headingAnchors");
@@ -48,7 +49,7 @@ export const HeadingAnchors = Extension.create({
 						button.addEventListener("click", () => {
 							const { origin, pathname, search } = window.location;
 							const url = `${origin}${pathname}${search}#${id}`;
-							void navigator.clipboard?.writeText(url).catch(() => {});
+							void copyText(url);
 							button.dataset.copied = "true";
 							setTimeout(() => delete button.dataset.copied, 1400);
 							options.oncopy?.(url, id);

package/dist/effects/animated-beam/path-calculator.svelte.js

@@ -15,14 +15,21 @@ export function usePathCalculator() {
 		const containerRect = containerRef.getBoundingClientRect();
 		const rectA = fromRef.getBoundingClientRect();
 		const rectB = toRef.getBoundingClientRect();
+		// A scaled ancestor shrinks every rect, but the SVG draws in the container's own pixels.
+		// Divide the scale out, or the beams stop short of their nodes.
+		const scaleX = containerRef.offsetWidth ? containerRect.width / containerRef.offsetWidth : 1;
+		const scaleY = containerRef.offsetHeight ? containerRect.height / containerRef.offsetHeight : 1;
+		const local = (rect) => new DOMRect((rect.left - containerRect.left) / scaleX, (rect.top - containerRect.top) / scaleY, rect.width / scaleX, rect.height / scaleY);
+		const a = local(rectA);
+		const b = local(rectB);
 		svgDimensions = {
-			width: containerRect.width,
-			height: containerRect.height
+			width: containerRect.width / scaleX,
+			height: containerRect.height / scaleY
 		};
-		const startX = anchorX(rectA, containerRect.left, fromAnchor, startXOffset);
-		const startY = rectA.top - containerRect.top + rectA.height / 2 + startYOffset;
-		const endX = anchorX(rectB, containerRect.left, toAnchor, endXOffset);
-		const endY = rectB.top - containerRect.top + rectB.height / 2 + endYOffset;
+		const startX = anchorX(a, 0, fromAnchor, startXOffset);
+		const startY = a.top + a.height / 2 + startYOffset;
+		const endX = anchorX(b, 0, toAnchor, endXOffset);
+		const endY = b.top + b.height / 2 + endYOffset;
 		// A cubic with horizontal handles, not a quadratic through a raised midpoint.
 		// The quadratic put its single control point at `midY` minus `curvature`, which for a fan into one node lands past the far end:
 		// the top beam dove below the hub and crossed the middle beam before arriving, and three beams bundled into a lens for the last stretch.

package/dist/lib/dates.js

@@ -0,0 +1,41 @@
+/** "Oct 23" in the caller's locale. */
+export function shortDate(at, { locale, timeZone, year } = {}) {
+	return new Intl.DateTimeFormat(locale, {
+		month: "short",
+		day: "numeric",
+		year: year ? "numeric" : undefined,
+		timeZone
+	}).format(new Date(at));
+}
+const UNITS = [
+	[31536e3, "year"],
+	[2592e3, "month"],
+	[604800, "week"],
+	[86400, "day"],
+	[3600, "hour"],
+	[60, "minute"]
+];
+/** "3 days ago", "in 2 weeks", "now": the largest whole unit between `at` and `now`. */
+export function relativeTime(at, now = Date.now(), { locale, style = "long" } = {}) {
+	const seconds = Math.round((new Date(at).getTime() - new Date(now).getTime()) / 1e3);
+	const age = Math.abs(seconds);
+	const rtf = new Intl.RelativeTimeFormat(locale, {
+		numeric: "auto",
+		style
+	});
+	for (const [size, unit] of UNITS) {
+		if (age >= size) return rtf.format(Math.round(seconds / size), unit);
+	}
+	return rtf.format(0, "second");
+}
+/** The calendar day of a moment as `YYYY-MM-DD`, in the given zone or the viewer's own. Today by default. */
+export function localDay(at = new Date(), timeZone) {
+	const parts = new Intl.DateTimeFormat("en-US", {
+		year: "numeric",
+		month: "2-digit",
+		day: "2-digit",
+		timeZone
+	}).formatToParts(new Date(at));
+	const part = (type) => parts.find((p) => p.type === type)?.value ?? "";
+	return `${part("year")}-${part("month")}-${part("day")}`;
+}

package/dist/lib/panel.js

@@ -1,6 +1,6 @@
 /** The one panel shell: a titled box holding a table, a chart or a stack. */
-// WHY tokens, not markup: `DetailPanel` and `DataPanel` draw the same box with
-// different props, and their edges drifted because the classes were typed twice.
+// Tokens beside `panel.svelte`, because skeletons and hand-built cards draw this
+// same edge without the panel's header.
 // Dashboards used `Card`, so /ads had a ring and a shadow where /social had a
 // hairline. Flat, one hairline, `rounded-xl`.
 export const panelShellClass = "overflow-hidden rounded-xl border border-border bg-card";

package/dist/lib/tone.js

@@ -10,6 +10,19 @@ export const TONE_CLASS = {
 	warning: "border-warning/30 bg-warning/10 text-warning-800 dark:text-warning-400",
 	destructive: "border-destructive/30 bg-destructive/10 text-destructive-ink"
 };
+/**
+* The scale as a quiet tint with no border: the icon and the text carry the tone, the fill only
+* groups them. Neutral reads off the foreground, not `bg-muted`, because muted sits 0.005 L from
+* the canvas and vanishes there (tokens board, "what fights the new scale").
+*/
+export const TONE_TINT = {
+	neutral: "bg-foreground/6 text-muted-foreground",
+	accent: "bg-[color-mix(in_oklab,var(--tone-accent,var(--color-primary))_12%,transparent)] text-[color:var(--tone-accent,var(--color-primary))]",
+	info: "bg-info/12 text-info-800 dark:text-info-400",
+	success: "bg-success/12 text-success-800 dark:text-success-400",
+	warning: "bg-warning/14 text-warning-800 dark:text-warning-400",
+	destructive: "bg-destructive/10 text-destructive-ink"
+};
 /** The same scale as text, for a verdict inside a line of muted facts. */
 export const TONE_TEXT = {
 	neutral: "text-muted-foreground",

package/dist/record/format.js

@@ -1,5 +1,6 @@
 // Display formatting through Intl, so a locale string is all a host passes.
 // A date-only value ("2026-10-26") is a calendar day, read in UTC so no zone shifts it.
+import { relativeTime } from "../lib/dates.js";
 const DAY_ONLY = /^\d{4}-\d{2}-\d{2}$/;
 function parse(iso) {
 	return DAY_ONLY.test(iso) ? {
@@ -55,24 +56,7 @@ export function formatTime(iso, locale = "en-GB", timeZone) {
 }
 /** "3 days ago", "in 2 weeks", "now". */
 export function formatAge(iso, now = Date.now(), locale = "en-GB") {
-	const seconds = Math.round((new Date(iso).getTime() - new Date(now).getTime()) / 1e3);
-	const abs = Math.abs(seconds);
-	const rtf = new Intl.RelativeTimeFormat(locale, {
-		numeric: "auto",
-		style: "long"
-	});
-	const units = [
-		[31536e3, "year"],
-		[2592e3, "month"],
-		[604800, "week"],
-		[86400, "day"],
-		[3600, "hour"],
-		[60, "minute"]
-	];
-	for (const [size, unit] of units) {
-		if (abs >= size) return rtf.format(Math.round(seconds / size), unit);
-	}
-	return rtf.format(0, "second");
+	return relativeTime(iso, now, { locale });
 }
 /** "€12,000". `compact` gives "€12K". */
 export function formatMoney(amount, currency = "EUR", locale = "en-GB", compact = false) {

package/dist/record/logic.js

@@ -1,14 +1,11 @@
+// The record's pure logic: grouping, merging, picking. No DOM, no clock of its own.
+import { localDay as dayOf } from "../lib/dates.js";
 // =========================
 // EVENTS
 // =========================
 /** The calendar day of a timestamp as `YYYY-MM-DD`, in the given zone or the viewer's own. */
 export function localDay(iso, timeZone) {
-	return new Intl.DateTimeFormat("en-CA", {
-		year: "numeric",
-		month: "2-digit",
-		day: "2-digit",
-		timeZone
-	}).format(new Date(iso));
+	return dayOf(iso, timeZone);
 }
 /** Newest day first, newest event first inside a day. */
 export function groupEventsByDay(events, timeZone) {

package/dist/status/index.js

@@ -3,4 +3,4 @@ export { default as StatusDot } from "../../src/status/status-dot.svelte";
 export { default as StatusIcon } from "../../src/status/status-icon.svelte";
 export { defineStatuses } from "./define-statuses.js";
 export { default as StatusPill } from "../../src/status/status-pill.svelte";
-export { PILL_TINT } from "./pill-tint.js";
+export { TONE_TINT as PILL_TINT } from "../lib/tone.js";

package/dist/work/dates.js

@@ -1,5 +1,6 @@
 // Dates are plain "YYYY-MM-DD" strings, counted as whole UTC days. A timeline
 // only needs days, and day numbers dodge every timezone and DST edge.
+import { localDay } from "../lib/dates.js";
 const DAY_MS = 864e5;
 /** Days since 1970-01-01 for an ISO date. Anything after the date part is ignored. */
 export function dayNumber(iso) {
@@ -16,9 +17,7 @@ export function addDays(iso, days) {
 }
 /** Today in the viewer's own timezone, as an ISO date. */
 export function todayIso() {
-	const now = new Date();
-	const local = new Date(now.getTime() - now.getTimezoneOffset() * 6e4);
-	return local.toISOString().slice(0, 10);
+	return localDay();
 }
 /** 0 is Sunday, as in `Date.getUTCDay`. */
 export function weekday(day) {

package/dist/work/detail/detail-types.js

@@ -8,13 +8,5 @@ export const DEFAULT_TASK_DETAIL_LABELS = {
 	save: "Save",
 	saving: "Saving",
 	cancel: "Cancel",
-	comments: "Activity",
-	commentPlaceholder: "Leave a comment",
-	commentSend: "Comment",
-	commentEdit: "Edit comment",
-	commentDelete: "Delete comment",
-	commentEdited: "edited",
-	commentsEmpty: "No comments yet",
-	ai: "AI",
 	properties: "Properties"
 };

package/dist/work/docs/edited.js

@@ -1,3 +1,5 @@
+/** The "Edited Oct 23" chip: how a stamp reads, and what to show when it can't be read. */
+import { shortDate as monthDay } from "../../lib/dates.js";
 export function parseStamp(value) {
 	if (value === null || value === undefined || value === "") return null;
 	const date = value instanceof Date ? value : new Date(value);
@@ -14,13 +16,12 @@ export function shortDate(value, options = {}) {
 	const date = parseStamp(value);
 	if (!date) return "";
 	const { locale = "en-US", timeZone, now = new Date() } = options;
-	const sameYear = yearOf(date, options) === yearOf(now, options);
-	return new Intl.DateTimeFormat(locale, {
-		month: "short",
-		day: "numeric",
-		year: sameYear ? undefined : "numeric",
-		timeZone
-	}).format(date);
+	const year = yearOf(date, options) !== yearOf(now, options);
+	return monthDay(date, {
+		locale,
+		timeZone,
+		year
+	});
 }
 /** "Oct 23, 14:44" for the last-edit row. Empty when the date can't be read. */
 export function editStamp(value, options = {}) {

package/dist/work/inbox/inbox-logic.js

@@ -1,3 +1,4 @@
+import { relativeTime, shortDate } from "../../lib/dates.js";
 /** The draft to open on: the agent's pick, else the first. */
 export function startDraft(drafts, recommended) {
 	return drafts.find((draft) => draft.templateId === recommended) ?? drafts[0];
@@ -52,12 +53,6 @@ export function freshReasoning(item, facts) {
 	return said.some((line) => line.includes(key) || key.includes(line)) ? "" : reasoning;
 }
 const ISO = /^\d{4}-\d{2}-\d{2}T/;
-const UNITS = [
-	[604800, "week"],
-	[86400, "day"],
-	[3600, "hour"],
-	[60, "minute"]
-];
 /**
 * A time as a person says it: "3 hr. ago", "Oct 12". A host-formatted string stays as written,
 * and a raw ISO string never reaches the screen.
@@ -66,22 +61,12 @@ export function whenOf(at, now = Date.now(), locale = "en-GB") {
 	if (!ISO.test(at)) return at;
 	const time = Date.parse(at);
 	if (Number.isNaN(time)) return "";
-	const seconds = Math.round((time - now) / 1e3);
-	const age = Math.abs(seconds);
-	if (age >= 4 * 604800) {
-		return new Intl.DateTimeFormat(locale, {
-			month: "short",
-			day: "numeric"
-		}).format(time);
-	}
-	const rtf = new Intl.RelativeTimeFormat(locale, {
-		numeric: "auto",
+	const age = Math.abs(Math.round((time - now) / 1e3));
+	if (age >= 4 * 604800) return shortDate(time, { locale });
+	return relativeTime(time, now, {
+		locale,
 		style: "short"
 	});
-	for (const [size, unit] of UNITS) {
-		if (age >= size) return rtf.format(Math.round(seconds / size), unit);
-	}
-	return rtf.format(0, "second");
 }
 /** True when a key press belongs to a text field and so isn't a shortcut. */
 export function isTyping(target) {

package/dist/work/index.js

@@ -8,8 +8,6 @@ export { default as TaskList } from "../../src/work/task-list.svelte";
 export { default as TaskGantt } from "../../src/work/task-gantt.svelte";
 export { addDays, dayNumber, isoFromDay, todayIso } from "./dates.js";
 export { default as TaskDetail } from "../../src/work/detail/task-detail.svelte";
-export { default as TaskThread } from "../../src/work/detail/task-thread.svelte";
-export { default as TaskProperty } from "../../src/work/detail/task-property.svelte";
 export { default as TaskChip } from "../../src/work/detail/task-chip.svelte";
 export { DEFAULT_TASK_DETAIL_LABELS } from "./detail/detail-types.js";
 export { default as TimeTracker } from "../../src/work/time/time-tracker.svelte";

package/dist/work/time/duration.js

@@ -1,3 +1,4 @@
+import { localDay as dayOf } from "../../lib/dates.js";
 /** "90", "45m", "1h", "1.5h", "1h30", "1h 30m" and "1:30" to whole minutes. Null when it isn't a duration. */
 export function parseMinutes(text) {
 	const value = text.trim().toLowerCase();
@@ -30,9 +31,7 @@ export function formatClock(ms) {
 }
 /** The reader's own calendar day as `YYYY-MM-DD`. */
 export function localDay(date = new Date()) {
-	const month = String(date.getMonth() + 1).padStart(2, "0");
-	const day = String(date.getDate()).padStart(2, "0");
-	return `${date.getFullYear()}-${month}-${day}`;
+	return dayOf(date);
 }
 /** "Today", "Yesterday", then "Mon, Oct 12", in the given locale. */
 export function dayLabel(day, locale) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heyramzi/ui",
-  "version": "2.23.0",
+  "version": "2.24.0",
   "description": "Svelte 5 UI for apps: primitives, effects and animations, plus work (tasks and docs), charts, slides, an editor, onboarding and a canvas as subpaths.",
   "homepage": "https://ui.heyramzi.com",
   "license": "MIT",
@@ -126,16 +126,6 @@
       "node": "./dist/icons/sf-symbols.js",
       "default": "./src/icons/sf-symbols.ts"
     },
-    "./icons/trades": {
-      "svelte": "./src/icons/trades.ts",
-      "types": "./src/icons/trades.ts",
-      "node": "./dist/icons/trades.js",
-      "default": "./src/icons/trades.ts"
-    },
-    "./icons/TradeIcon": {
-      "svelte": "./src/icons/TradeIcon.svelte",
-      "default": "./src/icons/TradeIcon.svelte"
-    },
     "./design": {
       "style": "./src/design/index.css",
       "default": "./src/design/index.css"
@@ -263,12 +253,6 @@
       "node": "./dist/work/inbox/index.js",
       "default": "./src/work/inbox/index.ts"
     },
-    "./work/presets/sales": {
-      "svelte": "./src/work/presets/sales.ts",
-      "types": "./src/work/presets/sales.ts",
-      "node": "./dist/work/presets/sales.js",
-      "default": "./src/work/presets/sales.ts"
-    },
     "./work/detail": {
       "svelte": "./src/work/detail/task-detail.svelte",
       "types": "./src/work/detail/task-detail.svelte",
@@ -436,7 +420,6 @@
   },
   "peerDependencies": {
     "@internationalized/date": "^3.12.4",
-    "@tabler/icons-svelte-runes": "^3.46.0",
     "@xyflow/svelte": "^1.7.0",
     "bits-ui": "^2.19.5",
     "mode-watcher": "^1.1.0",
@@ -453,9 +436,6 @@
     "@internationalized/date": {
       "optional": true
     },
-    "@tabler/icons-svelte-runes": {
-      "optional": true
-    },
     "@xyflow/svelte": {
       "optional": true
     }

package/src/ai/confirmation/Confirmation.svelte

@@ -1,10 +1,10 @@
 <script lang="ts" module>
 	import type { Snippet } from "svelte";
 	import type { HTMLAttributes } from "svelte/elements";
-	import type { ConfirmationState } from "./confirmation-context.svelte.js";
+	import type { ConfirmationKind } from "./confirmation-context.svelte.js";
 
 	export interface ConfirmationProps extends HTMLAttributes<HTMLElement> {
-		kind: ConfirmationState;
+		kind: ConfirmationKind;
 		executing?: boolean;
 		class?: string;
 		children?: Snippet;

package/src/ai/confirmation/{ConfirmationRequest.svelte → ConfirmationState.svelte}

@@ -1,7 +1,10 @@
 <script lang="ts" module>
 	import type { Snippet } from "svelte";
+	import type { ConfirmationKind } from "./confirmation-context.svelte.js";
 
-	export interface ConfirmationRequestProps {
+	export interface ConfirmationStateProps {
+		/** The state whose content this shows. */
+		when: Exclude<ConfirmationKind, "idle">;
 		children?: Snippet;
 	}
 </script>
@@ -9,12 +12,12 @@
 <script lang="ts">
 	import { getConfirmationContext } from "./confirmation-context.svelte.js";
 
-	let { children }: ConfirmationRequestProps = $props();
+	let { when, children }: ConfirmationStateProps = $props();
 
 	const ctx = getConfirmationContext();
 </script>
 
-{#if ctx.kind === "requested"}
+{#if ctx.kind === when}
 	<!-- WHY: the wrapper mirrors the parent section's stack so the state swap can
        animate as one block without changing the children's layout. -->
 	<div

package/src/ai/confirmation/confirmation-context.svelte.ts

@@ -2,10 +2,10 @@ import { getContext, setContext } from "svelte";
 
 const CONFIRMATION_CONTEXT_KEY = Symbol("confirmation-context");
 
-export type ConfirmationState = "idle" | "requested" | "accepted" | "rejected" | "failed";
+export type ConfirmationKind = "idle" | "requested" | "accepted" | "rejected" | "failed";
 
 export interface ConfirmationContextValue {
-  readonly kind: ConfirmationState;
+  readonly kind: ConfirmationKind;
   readonly executing: boolean;
 }
 

package/src/ai/confirmation/confirmation-parts.test.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	// Every state part under one Confirmation, for the state-swap test.
+	import {
+		Confirmation,
+		ConfirmationState,
+		type ConfirmationKind,
+	} from "./index.js";
+
+	let { kind }: { kind: ConfirmationKind } = $props();
+</script>
+
+<Confirmation {kind}>
+	<ConfirmationState when="requested">request</ConfirmationState>
+	<ConfirmationState when="accepted">accepted</ConfirmationState>
+	<ConfirmationState when="rejected">rejected</ConfirmationState>
+	<ConfirmationState when="failed">failed</ConfirmationState>
+</Confirmation>

package/src/ai/confirmation/confirmation-parts.test.ts

@@ -0,0 +1,23 @@
+import { flushSync, mount, unmount } from "svelte";
+import { describe, expect, it } from "vite-plus/test";
+import type { ConfirmationKind } from "./index.js";
+import Parts from "./confirmation-parts.test.svelte";
+
+function shown(kind: ConfirmationKind): string {
+  const target = document.createElement("div");
+  const app = mount(Parts, { target, props: { kind } });
+  flushSync();
+  const text = target.textContent?.replace(/\s+/g, " ").trim() ?? "";
+  void unmount(app);
+  return text;
+}
+
+describe("ConfirmationState", () => {
+  it("shows only the part whose `when` matches the kind", () => {
+    expect(shown("requested")).toBe("request");
+    expect(shown("accepted")).toBe("accepted");
+    expect(shown("rejected")).toBe("rejected");
+    expect(shown("failed")).toBe("failed");
+    expect(shown("idle")).toBe("");
+  });
+});