@heyramzi/ui 2.11.1 → 2.11.2

package/dist/icons/trades.js

@@ -1,34 +1,49 @@
+/**
+* Trade icon map. Tabler covers the domain Lucide and Phosphor miss.
+*/
+/*
+* Lucide/Phosphor gap audit (Sept 2026) against the 14 trade pills in the "NOT SURE? TAP WHAT YOU DO" strip. Lucide has `hammer`, `wrench`, `hard-hat`, `bolt`, `brick-wall`,
+*/
+/*
+* `building`, `car`, but no `trowel`, no tiling grid, no `window` cleaning `spray/squeegee`, no `crane`, no dedicated `handyman` toolset. Phosphor has `hammer`, `wrench`, `hard-hat`, `paint-roller`, and also no `trowel`.
+*/
+/*
+* Tabler 3.46 (6184 icons, MIT) has all 14 at a consistent 2px stroke on 24×24: droplet/pipe, bolt, home (roof), tools, key, window,
+*/
+/*
+* car-garage, hammer / wave-saw-tool, helmet, trowel, grid-dots, leaf, car, crane. Svelte 5 port is ` @tabler/icons-svelte-runes` (runes, not the Svelte 4 ` @tabler/icons-svelte`).
+*/
 import { IconBolt, IconCar, IconCarGarage, IconCrane, IconDroplet, IconGridDots, IconHammer, IconHelmet, IconHome, IconKey, IconLeaf, IconTools, IconTrowel, IconWindow } from "@tabler/icons-svelte-runes";
 export const tradeIconMap = {
-    plumbers: IconDroplet,
-    electricians: IconBolt,
-    roofers: IconHome,
-    handymen: IconTools,
-    locksmiths: IconKey,
-    "window-cleaners": IconWindow,
-    garages: IconCarGarage,
-    carpenters: IconHammer,
-    builders: IconHelmet,
-    plasterers: IconTrowel,
-    tilers: IconGridDots,
-    gardeners: IconLeaf,
-    "mobile-mechanics": IconCar,
-    "construction-companies": IconCrane
+	plumbers: IconDroplet,
+	electricians: IconBolt,
+	roofers: IconHome,
+	handymen: IconTools,
+	locksmiths: IconKey,
+	"window-cleaners": IconWindow,
+	garages: IconCarGarage,
+	carpenters: IconHammer,
+	builders: IconHelmet,
+	plasterers: IconTrowel,
+	tilers: IconGridDots,
+	gardeners: IconLeaf,
+	"mobile-mechanics": IconCar,
+	"construction-companies": IconCrane
 };
 export const tradeLabels = {
-    plumbers: "PLUMBERS",
-    electricians: "ELECTRICIANS",
-    roofers: "ROOFERS",
-    handymen: "HANDYMEN",
-    locksmiths: "LOCKSMITHS",
-    "window-cleaners": "WINDOW CLEANERS",
-    garages: "GARAGES",
-    carpenters: "CARPENTERS",
-    builders: "BUILDERS",
-    plasterers: "PLASTERERS",
-    tilers: "TILERS",
-    gardeners: "GARDENERS",
-    "mobile-mechanics": "MOBILE MECHANICS",
-    "construction-companies": "CONSTRUCTION COMPANIES"
+	plumbers: "PLUMBERS",
+	electricians: "ELECTRICIANS",
+	roofers: "ROOFERS",
+	handymen: "HANDYMEN",
+	locksmiths: "LOCKSMITHS",
+	"window-cleaners": "WINDOW CLEANERS",
+	garages: "GARAGES",
+	carpenters: "CARPENTERS",
+	builders: "BUILDERS",
+	plasterers: "PLASTERERS",
+	tilers: "TILERS",
+	gardeners: "GARDENERS",
+	"mobile-mechanics": "MOBILE MECHANICS",
+	"construction-companies": "CONSTRUCTION COMPANIES"
 };
 export const tradeSlugs = Object.keys(tradeIconMap);

package/dist/inbox/index.js

@@ -1,4 +1,5 @@
 export { default as ThreadInbox } from "../../src/inbox/thread-inbox.svelte";
 export { NO_FILTER, actorNames, entryLine, filterThreads, inboxKeyOf, isPending, resolveInboxLabels, snoozeChoices, subjectTypes, threadsOf } from "./logic.js";
 export { ALL, DEFAULT_INBOX_LABELS } from "./types.js";
+// The approval card a pinned proposal is drawn with, and the types its `proposal` field carries.
 export { default as InboxCard } from "../../src/work/inbox/inbox-card.svelte";

package/dist/inbox/logic.js

@@ -1,156 +1,160 @@
 import { isOpen, isTyping } from "../work/inbox/inbox-logic.js";
 import { ALL, DEFAULT_INBOX_LABELS } from "./types.js";
+/** A timestamp as a number, with NaN for one that doesn't parse. */
 function ms(at) {
-    return Date.parse(at);
+	return Date.parse(at);
 }
 function latestOf(thread) {
-    const time = ms(thread.latestAt);
-    return Number.isNaN(time) ? Number.NEGATIVE_INFINITY : time;
+	const time = ms(thread.latestAt);
+	return Number.isNaN(time) ? Number.NEGATIVE_INFINITY : time;
 }
+/** True while a proposal entry still waits for a verdict. */
 export function isPending(entry) {
-    return entry.kind === "proposal" && !!entry.proposal && isOpen(entry.proposal);
+	return entry.kind === "proposal" && !!entry.proposal && isOpen(entry.proposal);
 }
+/**
+* One thread per subject, newest first. An entry with no subject id is dropped, and a malformed
+* timestamp sorts last.
+*/
 export function threadsOf(entries, options = {}) {
-    const groups = new Map();
-    entries.forEach((entry, index)=>{
-        const subject = entry.subject;
-        if (!subject?.id) return;
-        const key = `${subject.type}:${subject.id}`;
-        groups.set(key, [
-            ...groups.get(key) ?? [],
-            {
-                entry,
-                subject,
-                index,
-                time: ms(entry.at)
-            }
-        ]);
-    });
-    const threads = [];
-    for (const [key, rows] of groups){
-        const ordered = rows.toSorted((a, b)=>{
-            const aBad = Number.isNaN(a.time);
-            const bBad = Number.isNaN(b.time);
-            if (aBad !== bBad) return aBad ? 1 : -1;
-            return (aBad ? 0 : a.time - b.time) || a.index - b.index;
-        });
-        const newest = ordered.findLast((row)=>!Number.isNaN(row.time)) ?? ordered[0];
-        const list = ordered.map((row)=>row.entry);
-        threads.push({
-            key,
-            subject: newest.subject,
-            entries: list,
-            unread: list.filter((entry)=>!entry.read).length,
-            latestAt: newest.entry.at,
-            pending: list.filter(isPending).toReversed()
-        });
-    }
-    return threads.map((thread, index)=>({
-            thread,
-            index
-        })).toSorted((a, b)=>{
-        if (options.unreadFirst) {
-            const unread = Number(b.thread.unread > 0) - Number(a.thread.unread > 0);
-            if (unread) return unread;
-        }
-        const aTime = latestOf(a.thread);
-        const bTime = latestOf(b.thread);
-        if (aTime === bTime) return a.index - b.index;
-        return bTime - aTime;
-    }).map((row)=>row.thread);
+	const groups = new Map();
+	entries.forEach((entry, index) => {
+		const subject = entry.subject;
+		if (!subject?.id) return;
+		const key = `${subject.type}:${subject.id}`;
+		groups.set(key, [...groups.get(key) ?? [], {
+			entry,
+			subject,
+			index,
+			time: ms(entry.at)
+		}]);
+	});
+	const threads = [];
+	for (const [key, rows] of groups) {
+		const ordered = rows.toSorted((a, b) => {
+			const aBad = Number.isNaN(a.time);
+			const bBad = Number.isNaN(b.time);
+			if (aBad !== bBad) return aBad ? 1 : -1;
+			return (aBad ? 0 : a.time - b.time) || a.index - b.index;
+		});
+		const newest = ordered.findLast((row) => !Number.isNaN(row.time)) ?? ordered[0];
+		const list = ordered.map((row) => row.entry);
+		threads.push({
+			key,
+			// The newest entry carries the freshest title and status.
+			subject: newest.subject,
+			entries: list,
+			unread: list.filter((entry) => !entry.read).length,
+			latestAt: newest.entry.at,
+			pending: list.filter(isPending).toReversed()
+		});
+	}
+	return threads.map((thread, index) => ({
+		thread,
+		index
+	})).toSorted((a, b) => {
+		if (options.unreadFirst) {
+			const unread = Number(b.thread.unread > 0) - Number(a.thread.unread > 0);
+			if (unread) return unread;
+		}
+		const aTime = latestOf(a.thread);
+		const bTime = latestOf(b.thread);
+		if (aTime === bTime) return a.index - b.index;
+		return bTime - aTime;
+	}).map((row) => row.thread);
 }
 export const NO_FILTER = {
-    type: ALL,
-    who: ALL,
-    needsYou: false
+	type: ALL,
+	who: ALL,
+	needsYou: false
 };
+/** Keep a thread when it matches the type, holds an entry from the person or agent, and has a pending proposal if asked. */
 export function filterThreads(threads, filter) {
-    return threads.filter((thread)=>(filter.type === ALL || thread.subject.type === filter.type) && (filter.who === ALL || thread.entries.some((entry)=>entry.actor.name === filter.who)) && (!filter.needsYou || thread.pending.length > 0));
+	return threads.filter((thread) => (filter.type === ALL || thread.subject.type === filter.type) && (filter.who === ALL || thread.entries.some((entry) => entry.actor.name === filter.who)) && (!filter.needsYou || thread.pending.length > 0));
 }
 export function subjectTypes(threads) {
-    return [
-        ...new Set(threads.map((thread)=>thread.subject.type))
-    ];
+	return [...new Set(threads.map((thread) => thread.subject.type))];
 }
 export function actorNames(threads) {
-    return [
-        ...new Set(threads.flatMap((thread)=>thread.entries.map((entry)=>entry.actor.name)))
-    ].filter(Boolean);
+	return [...new Set(threads.flatMap((thread) => thread.entries.map((entry) => entry.actor.name)))].filter(Boolean);
 }
 const KEYS = {
-    j: "next",
-    k: "previous",
-    u: "toggleRead",
-    h: "snooze",
-    a: "approve",
-    d: "decline",
-    s: "steer",
-    S: "unfollow",
-    e: "edit"
+	j: "next",
+	k: "previous",
+	u: "toggleRead",
+	h: "snooze",
+	a: "approve",
+	d: "decline",
+	s: "steer",
+	S: "unfollow",
+	e: "edit"
 };
+/**
+* What a key press asks for, or null when it isn't ours: focus is in a text field, or a modifier
+* other than Linear's Shift+S, Shift+Backspace and Alt+U is held.
+*/
 export function inboxKeyOf(event) {
-    if (event.defaultPrevented || event.metaKey || event.ctrlKey) return null;
-    if (isTyping(event.target)) return null;
-    if (event.altKey) return event.code === "KeyU" && !event.shiftKey ? "readAll" : null;
-    if (event.key === "Backspace") return event.shiftKey ? "clearRead" : "clear";
-    return KEYS[event.key] ?? null;
+	if (event.defaultPrevented || event.metaKey || event.ctrlKey) return null;
+	if (isTyping(event.target)) return null;
+	// Option+U on a Mac types a dead key, so the physical key decides.
+	if (event.altKey) return event.code === "KeyU" && !event.shiftKey ? "readAll" : null;
+	if (event.key === "Backspace") return event.shiftKey ? "clearRead" : "clear";
+	return KEYS[event.key] ?? null;
 }
+/** The three times a snooze offers: 3 hours on, tomorrow at 9, next Monday at 9. */
 export function snoozeChoices(now) {
-    const later = new Date(now.getTime() + 3 * 60 * 60 * 1000);
-    const tomorrow = new Date(now);
-    tomorrow.setDate(tomorrow.getDate() + 1);
-    tomorrow.setHours(9, 0, 0, 0);
-    const nextWeek = new Date(now);
-    nextWeek.setDate(nextWeek.getDate() + ((8 - nextWeek.getDay()) % 7 || 7));
-    nextWeek.setHours(9, 0, 0, 0);
-    return [
-        {
-            id: "later",
-            until: later
-        },
-        {
-            id: "tomorrow",
-            until: tomorrow
-        },
-        {
-            id: "nextWeek",
-            until: nextWeek
-        }
-    ];
+	const later = new Date(now.getTime() + 3 * 60 * 60 * 1e3);
+	const tomorrow = new Date(now);
+	tomorrow.setDate(tomorrow.getDate() + 1);
+	tomorrow.setHours(9, 0, 0, 0);
+	const nextWeek = new Date(now);
+	nextWeek.setDate(nextWeek.getDate() + ((8 - nextWeek.getDay()) % 7 || 7));
+	nextWeek.setHours(9, 0, 0, 0);
+	return [
+		{
+			id: "later",
+			until: later
+		},
+		{
+			id: "tomorrow",
+			until: tomorrow
+		},
+		{
+			id: "nextWeek",
+			until: nextWeek
+		}
+	];
 }
 export function resolveInboxLabels(overrides) {
-    return {
-        ...DEFAULT_INBOX_LABELS,
-        ...overrides
-    };
+	return {
+		...DEFAULT_INBOX_LABELS,
+		...overrides
+	};
 }
+/** One line for an entry, in the host's words. `{from}`, `{to}` and `{assignee}` are filled. */
 export function entryLine(entry, labels) {
-    const fill = (text)=>text.replaceAll("{from}", entry.status?.from ?? "").replaceAll("{to}", entry.status?.to ?? "").replaceAll("{assignee}", entry.assignee ?? "");
-    switch(entry.kind){
-        case "status":
-            return fill(entry.status?.from ? labels.statusMoved : labels.statusSet);
-        case "assigned":
-            return fill(labels.assigned);
-        case "mention":
-            return labels.mentioned;
-        case "agent_response":
-            return labels.responded;
-        case "proposal":
-            return labels.proposed;
-        default:
-            return labels.commented;
-    }
+	const fill = (text) => text.replaceAll("{from}", entry.status?.from ?? "").replaceAll("{to}", entry.status?.to ?? "").replaceAll("{assignee}", entry.assignee ?? "");
+	switch (entry.kind) {
+		case "status": return fill(entry.status?.from ? labels.statusMoved : labels.statusSet);
+		case "assigned": return fill(labels.assigned);
+		case "mention": return labels.mentioned;
+		case "agent_response": return labels.responded;
+		case "proposal": return labels.proposed;
+		default: return labels.commented;
+	}
 }
+/** An entry as a sentence: who, then what. With no known actor it starts with the verb, capitalised. */
 export function sentenceOf(entry, labels) {
-    const line = entryLine(entry, labels);
-    if (entry.actor.name) return `${entry.actor.name} ${line}`;
-    return line.charAt(0).toUpperCase() + line.slice(1);
+	const line = entryLine(entry, labels);
+	if (entry.actor.name) return `${entry.actor.name} ${line}`;
+	return line.charAt(0).toUpperCase() + line.slice(1);
 }
+/** What happened to the subject, as against something a person wrote. */
 const EVENT_KINDS = new Set([
-    "status",
-    "assigned",
-    "proposal"
+	"status",
+	"assigned",
+	"proposal"
 ]);
 export function isEvent(entry) {
-    return EVENT_KINDS.has(entry.kind);
+	return EVENT_KINDS.has(entry.kind);
 }

package/dist/inbox/types.js

@@ -1,46 +1,46 @@
 export const ALL = "all";
 export const DEFAULT_INBOX_LABELS = {
-    title: "Inbox",
-    all: "All",
-    anyone: "Anyone",
-    needsYou: "Needs you",
-    empty: "Nothing here",
-    emptyNeedsYou: "Nothing is waiting on you",
-    emptyFiltered: "No thread matches these filters",
-    clearFilters: "Clear filters",
-    unread: "unread",
-    markRead: "Mark read",
-    markUnread: "Mark unread",
-    snooze: "Snooze",
-    snoozeLater: "Later today",
-    snoozeTomorrow: "Tomorrow",
-    snoozeNextWeek: "Next week",
-    snoozed: "Snoozed",
-    showSnoozed: "Show snoozed",
-    unsnooze: "Unsnooze",
-    unfollow: "Unfollow",
-    markAllRead: "Mark all read",
-    clear: "Clear",
-    clearRead: "Clear read",
-    selectThread: "Select a thread",
-    filterType: "Filter by type",
-    filterWho: "Filter by person or agent",
-    filter: "Filter",
-    kind: "Type",
-    from: "From",
-    open: "Open",
-    agent: "AI",
-    statusMoved: "moved this from {from} to {to}",
-    statusSet: "set this to {to}",
-    assigned: "assigned this to {assignee}",
-    mentioned: "mentioned you",
-    commented: "commented",
-    responded: "replied",
-    proposed: "asks for your call",
-    hintMove: "move",
-    hintRead: "read",
-    hintReadAll: "all read",
-    hintSnooze: "snooze",
-    hintClear: "clear, with shift every read thread",
-    hintAct: "approve, decline, steer, edit"
+	title: "Inbox",
+	all: "All",
+	anyone: "Anyone",
+	needsYou: "Needs you",
+	empty: "Nothing here",
+	emptyNeedsYou: "Nothing is waiting on you",
+	emptyFiltered: "No thread matches these filters",
+	clearFilters: "Clear filters",
+	unread: "unread",
+	markRead: "Mark read",
+	markUnread: "Mark unread",
+	snooze: "Snooze",
+	snoozeLater: "Later today",
+	snoozeTomorrow: "Tomorrow",
+	snoozeNextWeek: "Next week",
+	snoozed: "Snoozed",
+	showSnoozed: "Show snoozed",
+	unsnooze: "Unsnooze",
+	unfollow: "Unfollow",
+	markAllRead: "Mark all read",
+	clear: "Clear",
+	clearRead: "Clear read",
+	selectThread: "Select a thread",
+	filterType: "Filter by type",
+	filterWho: "Filter by person or agent",
+	filter: "Filter",
+	kind: "Type",
+	from: "From",
+	open: "Open",
+	agent: "AI",
+	statusMoved: "moved this from {from} to {to}",
+	statusSet: "set this to {to}",
+	assigned: "assigned this to {assignee}",
+	mentioned: "mentioned you",
+	commented: "commented",
+	responded: "replied",
+	proposed: "asks for your call",
+	hintMove: "move",
+	hintRead: "read",
+	hintReadAll: "all read",
+	hintSnooze: "snooze",
+	hintClear: "clear, with shift every read thread",
+	hintAct: "approve, decline, steer, edit"
 };

package/dist/lib/arrive.js

@@ -1,13 +1,20 @@
-export const arrive = (node, value)=>{
-    let previous = value;
-    node.classList.add("t-enter");
-    return {
-        update (next) {
-            if (next === previous) return;
-            previous = next;
-            node.classList.remove("t-enter");
-            void node.offsetWidth;
-            node.classList.add("t-enter");
-        }
-    };
+/**
+* Replays `.t-enter` whenever the value handed in changes, so a panel that swaps
+* its record reads as a new one arriving. `<div use:arrive={selectedId}>`
+*/
+// Prefer it to `{#key}`, which rebuilds the subtree and loses scroll, focus and
+// open disclosures. `use:` works on elements only, so a component still needs `{#key}`.
+export const arrive = (node, value) => {
+	let previous = value;
+	// The first paint is the mount, which already animates on its own class.
+	node.classList.add("t-enter");
+	return { update(next) {
+		if (next === previous) return;
+		previous = next;
+		// Remove, force a reflow, re-add. A CSS animation runs once per element,
+		// and only a reflow between the two writes makes the browser replay it.
+		node.classList.remove("t-enter");
+		void node.offsetWidth;
+		node.classList.add("t-enter");
+	} };
 };

package/dist/lib/icon-types.js

@@ -0,0 +1 @@
+export {};

package/dist/lib/initials.js

@@ -1,17 +1,23 @@
 const segmenter = typeof Intl !== "undefined" && "Segmenter" in Intl ? new Intl.Segmenter() : null;
+/** The first whole character of a string: an emoji or an accented letter stays in one piece. */
 function firstGrapheme(text) {
-    if (!text) return "";
-    if (segmenter) return segmenter.segment(text)[Symbol.iterator]().next().value?.segment ?? "";
-    return Array.from(text)[0] ?? "";
+	if (!text) return "";
+	if (segmenter) return segmenter.segment(text)[Symbol.iterator]().next().value?.segment ?? "";
+	return Array.from(text)[0] ?? "";
 }
+/** One letter for an avatar fallback. Falls back to `fallback` for an empty or missing name. */
 export function initial(name, fallback = "?") {
-    const first = firstGrapheme((name ?? "").trim());
-    return first ? first.toLocaleUpperCase() : fallback;
+	const first = firstGrapheme((name ?? "").trim());
+	return first ? first.toLocaleUpperCase() : fallback;
 }
+/**
+* Two letters for an avatar fallback, first and last word, skipping suffixes: "Christopher
+* Montgomery III" gives "CM". A one-word name gives one letter.
+*/
 export function initials(name, fallback = "?") {
-    const words = (name ?? "").trim().split(/\s+/).filter((word)=>word && !/^(?:[IVX]{1,4}|jr\.?|sr\.?)$/i.test(word));
-    if (words.length === 0) return initial(name, fallback);
-    const head = firstGrapheme(words[0]);
-    const tail = words.length > 1 ? firstGrapheme(words[words.length - 1]) : "";
-    return (head + tail).toLocaleUpperCase();
+	const words = (name ?? "").trim().split(/\s+/).filter((word) => word && !/^(?:[IVX]{1,4}|jr\.?|sr\.?)$/i.test(word));
+	if (words.length === 0) return initial(name, fallback);
+	const head = firstGrapheme(words[0]);
+	const tail = words.length > 1 ? firstGrapheme(words[words.length - 1]) : "";
+	return (head + tail).toLocaleUpperCase();
 }

package/dist/lib/layout.js

@@ -1 +1,6 @@
+/** The app's one horizontal gutter. */
+// WHY a token: the tab strip said `px-4 md:px-6` and page bodies `p-4`, so from
+// `md` up the nav sat 8px right of the content. Same fact typed twice.
+// The content edge won: sixty page bodies against one strip. Anything lining up
+// with the page body names this instead of retyping a padding.
 export const pageGutterClass = "px-4";

package/dist/lib/panel.js

@@ -1,3 +1,16 @@
+/** 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.
+// 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";
+/**
+* The panel's header bar: label left, count or controls right. `min-h-11` so a
+* label-only header matches one with a button.
+*/
 export const panelHeaderClass = "flex min-h-11 flex-wrap items-center justify-between gap-x-3 gap-y-1 border-b border-border px-4 py-2";
+/**
+* The inset well for a control block inside a panel. A visible step at the
+* same depth, for filter rows and grouped controls.
+*/
 export const insetWellClass = "rounded-lg border border-border bg-muted/40 p-2";

package/dist/lib/result.js

@@ -1,26 +1,26 @@
 export function tryCatch(fn) {
-    try {
-        return {
-            ok: true,
-            value: fn()
-        };
-    } catch (e) {
-        return {
-            ok: false,
-            error: e instanceof Error ? e : new Error(String(e))
-        };
-    }
+	try {
+		return {
+			ok: true,
+			value: fn()
+		};
+	} catch (e) {
+		return {
+			ok: false,
+			error: e instanceof Error ? e : new Error(String(e))
+		};
+	}
 }
 export async function tryCatchAsync(fn) {
-    try {
-        return {
-            ok: true,
-            value: await fn()
-        };
-    } catch (e) {
-        return {
-            ok: false,
-            error: e instanceof Error ? e : new Error(String(e))
-        };
-    }
+	try {
+		return {
+			ok: true,
+			value: await fn()
+		};
+	} catch (e) {
+		return {
+			ok: false,
+			error: e instanceof Error ? e : new Error(String(e))
+		};
+	}
 }