@heyramzi/ui 2.23.0 → 3.0.0

package/dist/lib/tone.js

@@ -10,6 +10,18 @@ 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"
 };
+/**
+* A quiet borderless tint: icon and text carry the tone. Neutral reads off the foreground,
+* since `bg-muted` sits 0.005 L from the canvas and vanishes there.
+*/
+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",
@@ -17,7 +29,7 @@ export const TONE_TEXT = {
 	info: "text-info-800 dark:text-info-400",
 	success: "text-success-800 dark:text-success-400",
 	warning: "text-warning-800 dark:text-warning-400",
-	destructive: "text-destructive"
+	destructive: "text-destructive-ink"
 };
 /** The same scale as icon color. */
 export const TONE_ICON = {

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/shadcn/alert/alert-variants.js

@@ -3,7 +3,7 @@ export const alertVariants = tv({
 	base: "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
 	variants: { variant: {
 		default: "bg-card text-card-foreground",
-		destructive: "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current"
+		destructive: "text-destructive-ink bg-card *:data-[slot=alert-description]:text-destructive-ink [&>svg]:text-current"
 	} },
 	defaultVariants: { variant: "default" }
 });

package/dist/shadcn/attachment/context.js

@@ -0,0 +1,10 @@
+import { getContext, setContext } from "svelte";
+const KEY = Symbol("attachment");
+/** Called by Attachment.Root: the id its Title takes, so the Trigger and Actions can point at it. */
+export function setAttachmentTitleId(id) {
+	setContext(KEY, id);
+}
+/** The enclosing card's title id, or undefined outside an Attachment.Root. */
+export function getAttachmentTitleId() {
+	return getContext(KEY);
+}

package/dist/shadcn/dropdown-menu/menu-item.js

@@ -22,7 +22,7 @@ export const menuItemClass = tv({
 	variants: {
 		variant: {
 			default: "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground",
-			destructive: "text-destructive *:[svg]:text-destructive hover:bg-destructive/10 focus:bg-destructive/10 focus:text-destructive dark:hover:bg-destructive/20 dark:focus:bg-destructive/20"
+			destructive: "text-destructive-ink *:[svg]:text-destructive hover:bg-destructive/10 focus:bg-destructive/10 focus:text-destructive-ink dark:hover:bg-destructive/20 dark:focus:bg-destructive/20"
 		},
 		/** A row in a set where a sibling carries a leading mark. */
 		inset: {

package/dist/shadcn/hooks/highlighter.js

@@ -28,10 +28,66 @@ const aliases = {
 	yml: "yaml",
 	zsh: "bash"
 };
+// VS Code's pair colours an imported name too. No bundled light theme clears 4.5:1 on bg-muted.
+const THEMES = {
+	light: "light-plus",
+	dark: "dark-plus"
+};
+// The faintest code surface in each mode: a highlighted line (bg-muted), the input tint in dark.
+const SURFACES = {
+	light: [
+		232,
+		232,
+		232
+	],
+	dark: [
+		52,
+		52,
+		52
+	]
+};
+function luminance(rgb) {
+	const [r, g, b] = rgb.map((v) => {
+		const s = v / 255;
+		return s <= .04045 ? s / 12.92 : ((s + .055) / 1.055) ** 2.4;
+	});
+	return .2126 * r + .7152 * g + .0722 * b;
+}
+function contrast(a, b) {
+	const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+	return (hi + .05) / (lo + .05);
+}
+// Steps an opaque hex colour toward black (light) or white (dark), keeping its hue, until it reads 4.5:1.
+function readable(hex, mode) {
+	if (!/^#[\da-f]{6}(ff)?$/i.test(hex)) return hex;
+	const base = [
+		1,
+		3,
+		5
+	].map((i) => Number.parseInt(hex.slice(i, i + 2), 16));
+	let rgb = base;
+	for (let step = .01; contrast(rgb, SURFACES[mode]) < 4.5 && step <= 1; step += .01) {
+		rgb = base.map((v) => Math.round(mode === "light" ? v * (1 - step) : v + (255 - v) * step));
+	}
+	return `#${rgb.map((v) => v.toString(16).padStart(2, "0")).join("")}`;
+}
+async function readableTheme(theme, mode) {
+	const { default: raw } = await theme;
+	return {
+		...raw,
+		tokenColors: raw.tokenColors?.map((rule) => rule.settings.foreground ? {
+			...rule,
+			settings: {
+				...rule.settings,
+				foreground: readable(rule.settings.foreground, mode)
+			}
+		} : rule)
+	};
+}
 let highlighter;
 function getHighlighter() {
 	highlighter ??= createHighlighterCore({
-		themes: [import("shiki/themes/github-light.mjs"), import("shiki/themes/github-dark.mjs")],
+		themes: [readableTheme(import("shiki/themes/light-plus.mjs"), "light"), readableTheme(import("shiki/themes/dark-plus.mjs"), "dark")],
 		langs: [],
 		engine: createJavaScriptRegexEngine({ forgiving: true })
 	});
@@ -71,10 +127,7 @@ export async function loadHighlighter(language) {
 highlight(code, state) {
 		const tokenize = (text) => shiki.codeToTokens(text, {
 			lang,
-			themes: {
-				light: "github-light",
-				dark: "github-dark"
-			},
+			themes: THEMES,
 			defaultColor: false,
 			grammarState: state
 		}).tokens;

package/dist/shadcn/sidebar/constants.js

@@ -3,4 +3,4 @@ export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 export const SIDEBAR_WIDTH = "16rem";
 export const SIDEBAR_WIDTH_MOBILE = "18rem";
 export const SIDEBAR_WIDTH_ICON = "3rem";
-export const SIDEBAR_KEYBOARD_SHORTCUT = "s";
+export const SIDEBAR_KEYBOARD_SHORTCUT = "b";

package/dist/shadcn/sidebar/context.svelte.js

@@ -1,6 +1,11 @@
 import { IsMobile } from "../hooks/is-mobile.svelte.js";
 import { getContext, setContext } from "svelte";
 import { SIDEBAR_KEYBOARD_SHORTCUT } from "./constants.js";
+// Cmd+B in a field means bold, so the shortcut leaves typing alone.
+function isEditable(target) {
+	if (!(target instanceof HTMLElement)) return false;
+	return target.closest("input, textarea, [contenteditable]:not([contenteditable=\"false\"])") !== null;
+}
 class SidebarState {
 	props;
 	open = $derived.by(() => this.props.open());
@@ -8,8 +13,10 @@ class SidebarState {
 	setOpen;
 	#isMobile;
 	state = $derived.by(() => this.open ? "expanded" : "collapsed");
+	id;
 	constructor(props) {
 		this.setOpen = props.setOpen;
+		this.id = props.id;
 		this.#isMobile = new IsMobile();
 		this.props = props;
 	}
@@ -18,9 +25,13 @@ class SidebarState {
 	get isMobile() {
 		return this.#isMobile.current;
 	}
+	/** Whether the sidebar a trigger controls is showing: the sheet on a phone, the panel otherwise. */
+	get expanded() {
+		return this.#isMobile.current ? this.openMobile : this.open;
+	}
 	// Event handler to apply to the `<svelte:window>`
 	handleShortcutKeydown = (e) => {
-		if (e.key === SIDEBAR_KEYBOARD_SHORTCUT && (e.metaKey || e.ctrlKey)) {
+		if (e.key === SIDEBAR_KEYBOARD_SHORTCUT && (e.metaKey || e.ctrlKey) && !isEditable(e.target)) {
 			e.preventDefault();
 			this.toggle();
 		}

package/dist/slides/deck-controller.svelte.js

@@ -3,12 +3,6 @@ import { fitBox, gridBoxes } from "./layout.js";
 import { keyAction, nextPosition, ordinalOf, prevPosition, progressOf, settle, visibleIndexes } from "./navigation.js";
 import { resolveLabels } from "./labels.js";
 import { DEFAULT_CANVAS } from "./types.js";
-/* With several decks on a page, keys belong to the one the reader last touched. */
-const live = new Set();
-let active = null;
-const claimKeys = (deck) => {
-	active = deck;
-};
 /** Height the controls bar takes at the bottom of the overview, in px. */
 const CONTROLS_ROOM = 56;
 /** How long the overview morph flag stays up, a little past the longest stagger. */
@@ -83,23 +77,12 @@ export class DeckController {
 		this.#listeners.add(listener);
 		return () => this.#listeners.delete(listener);
 	}
-	/** Marks this deck as the one that owns the keys. Mounting does it too. */
-	activate() {
-		claimKeys(this);
-	}
 	mount() {
-		live.add(this);
-		claimKeys(this);
-		return () => {
-			live.delete(this);
-			if (active === this) active = null;
-			clearTimeout(this.#timer);
-		};
+		return () => clearTimeout(this.#timer);
 	}
+	/** Which deck hears a key is the page's call: Deck passes only keys from focus inside it. */
 	get listening() {
-		if (this.options.keyboard === false) return false;
-		const eligible = [...live].filter((deck) => deck.options.keyboard !== false);
-		return eligible.length <= 1 || active === this;
+		return this.options.keyboard !== false;
 	}
 	#write(position) {
 		this.options.index = position.index;

package/dist/status/index.js

@@ -3,4 +3,3 @@ 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";

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";
@@ -17,5 +15,4 @@ export { default as TimeChip } from "../../src/work/time/time-chip.svelte";
 export { default as TimeRing } from "../../src/work/time/time-ring.svelte";
 export { default as TimeDot } from "../../src/work/time/time-dot.svelte";
 export { budgetTone, dayLabel, formatClock, formatMinutes, localDay, parseMinutes, personColor } from "./time/duration.js";
-export { confidenceLevel, inboxConfidence, inboxKinds, inboxStates } from "./inbox/index.js";
 export { DEFAULT_TIME_LABELS } from "./time/time-types.js";

package/dist/work/kanban-keyboard.js

@@ -4,7 +4,7 @@ export function createCardKeyDown(config) {
 	const { input, canDrop, isHidden, sortedByColumn, isCapped, moveAndPin } = config;
 	/**
 	* Alt + ArrowLeft/Right moves the focused card to the next droppable column, so
-	* keyboard and screen-reader users get drag's onMove contract.
+	* keyboard and screen-reader users get drag's onMove contract. Returns the move, if one ran.
 	*/
 	return function onCardKeyDown(e, id) {
 		const { onSelect, items, getId, getColumn, columns, sortKey, dropAtTop, boardOrder } = input();
@@ -30,16 +30,21 @@ export function createCardKeyDown(config) {
 				const index = atTop ? 0 : column.length;
 				const before = column[index - 1];
 				const after = column[index];
-				void moveAndPin(id, {
+				const done = moveAndPin(id, {
 					columnId: target.id,
 					...boardOrder ? { boardOrder: boardOrderAt(column, index, (entry) => boardOrder(entry)) } : {},
 					beforeId: before === undefined ? null : getId(before),
 					afterId: after === undefined ? null : getId(after)
 				});
-			} else {
-				void moveAndPin(id, { columnId: target.id });
+				return {
+					column: target,
+					done
+				};
 			}
-			return;
+			return {
+				column: target,
+				done: moveAndPin(id, { columnId: target.id })
+			};
 		}
 	};
 }

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) {