@heyramzi/ui 2.11.1 → 2.11.2

package/dist/record/fields.js

@@ -1,148 +1,146 @@
+// Turns a module's field declarations and a record's values into rows to draw.
 import { formatDay, formatMoney } from "./format.js";
+/** A choice or a multi: the types that carry a list of options. */
 function hasOptions(field) {
-    return field.type === "choice" || field.type === "multi";
+	return field.type === "choice" || field.type === "multi";
 }
 function isEmpty(value) {
-    return value == null || value === "" || Array.isArray(value) && value.length === 0;
+	return value == null || value === "" || Array.isArray(value) && value.length === 0;
 }
+/** A field shows unless its `showWhen` names a field that doesn't hold the wanted value. */
 export function isFieldVisible(field, values) {
-    const rule = field.showWhen;
-    if (!rule) return true;
-    const current = values[rule.key];
-    if (rule.equals === undefined) return !isEmpty(current);
-    const wanted = Array.isArray(rule.equals) ? rule.equals : [
-        rule.equals
-    ];
-    const held = Array.isArray(current) ? current : current == null ? [] : [
-        String(current)
-    ];
-    return held.some((v)=>wanted.includes(v));
+	const rule = field.showWhen;
+	if (!rule) return true;
+	const current = values[rule.key];
+	if (rule.equals === undefined) return !isEmpty(current);
+	const wanted = Array.isArray(rule.equals) ? rule.equals : [rule.equals];
+	const held = Array.isArray(current) ? current : current == null ? [] : [String(current)];
+	return held.some((v) => wanted.includes(v));
 }
+/**
+* The options a picker offers: an archived one is left out unless it is what the
+* record already holds, so an old value still reads and is never chosen again.
+*/
 export function pickableOptions(field, value) {
-    const held = Array.isArray(value) ? value : value == null ? [] : [
-        String(value)
-    ];
-    return (hasOptions(field) ? field.options : []).filter((o)=>!o.archived || held.includes(o.key));
+	const held = Array.isArray(value) ? value : value == null ? [] : [String(value)];
+	return (hasOptions(field) ? field.options : []).filter((o) => !o.archived || held.includes(o.key));
 }
+/**
+* Visible fields bucketed by section in the declared order. A section with no
+* field is not drawn. Fields with no or an unknown section go last under no heading.
+*/
 export function groupFields(fields, sections, values) {
-    const visible = fields.filter((f)=>isFieldVisible(f, values));
-    const known = new Set(sections.map((s)=>s.key));
-    const groups = sections.map((s)=>({
-            key: s.key,
-            label: s.label,
-            fields: visible.filter((f)=>f.section === s.key)
-        })).filter((g)=>g.fields.length > 0);
-    const loose = visible.filter((f)=>!f.section || !known.has(f.section));
-    if (loose.length > 0) groups.push({
-        key: "",
-        label: null,
-        fields: loose
-    });
-    return groups;
+	const visible = fields.filter((f) => isFieldVisible(f, values));
+	const known = new Set(sections.map((s) => s.key));
+	const groups = sections.map((s) => ({
+		key: s.key,
+		label: s.label,
+		fields: visible.filter((f) => f.section === s.key)
+	})).filter((g) => g.fields.length > 0);
+	const loose = visible.filter((f) => !f.section || !known.has(f.section));
+	if (loose.length > 0) groups.push({
+		key: "",
+		label: null,
+		fields: loose
+	});
+	return groups;
 }
+/** What the editor hands back, as the type the field declares. Empty text is null. */
 export function parseSaved(field, raw) {
-    if (Array.isArray(raw)) return raw;
-    const text = raw.trim();
-    if (text === "") return null;
-    if (field.type === "money") {
-        const n = Number(text.replace(",", "."));
-        return Number.isFinite(n) ? n : null;
-    }
-    return text;
+	if (Array.isArray(raw)) return raw;
+	const text = raw.trim();
+	if (text === "") return null;
+	if (field.type === "money") {
+		const n = Number(text.replace(",", "."));
+		return Number.isFinite(n) ? n : null;
+	}
+	return text;
 }
 const INPUT = {
-    text: "text",
-    longtext: "longtext",
-    choice: "select",
-    multi: "multi",
-    money: "number",
-    date: "date",
-    url: "url",
-    email: "email",
-    timezone: "text",
-    tags: "tags"
+	text: "text",
+	longtext: "longtext",
+	choice: "select",
+	multi: "multi",
+	money: "number",
+	date: "date",
+	url: "url",
+	email: "email",
+	timezone: "text",
+	tags: "tags"
 };
+/** One field and its value as an `InfoRow`. */
 export function fieldRow(field, value, ctx = {}) {
-    const row = {
-        id: field.key,
-        label: field.label,
-        input: INPUT[field.type],
-        placeholder: field.placeholder,
-        required: field.required
-    };
-    const optionOf = (key)=>hasOptions(field) ? field.options.find((o)=>o.key === key) : undefined;
-    if (!isEmpty(value)) {
-        switch(field.type){
-            case "choice":
-                {
-                    const option = optionOf(String(value));
-                    row.value = option?.label ?? String(value);
-                    row.tone = option?.tone;
-                    break;
-                }
-            case "multi":
-                {
-                    const keys = Array.isArray(value) ? value : [
-                        String(value)
-                    ];
-                    row.chips = keys.map((k)=>({
-                            label: optionOf(k)?.label ?? k,
-                            tone: optionOf(k)?.tone
-                        }));
-                    break;
-                }
-            case "tags":
-                {
-                    const labels = Array.isArray(value) ? value : [
-                        String(value)
-                    ];
-                    row.chips = labels.map((label)=>({
-                            label
-                        }));
-                    break;
-                }
-            case "money":
-                row.value = formatMoney(Number(value), field.currency ?? ctx.currency, ctx.locale);
-                break;
-            case "date":
-                row.value = formatDay(String(value), ctx.locale);
-                break;
-            case "url":
-                row.value = String(value).replace(/^https?:\/\/(www\.)?/, "").replace(/\/$/, "");
-                row.href = String(value);
-                break;
-            case "email":
-                row.value = String(value);
-                row.href = `mailto:${value}`;
-                break;
-            case "text":
-            case "longtext":
-            case "timezone":
-                row.value = String(value);
-                break;
-            default:
-                return field;
-        }
-    }
-    if (field.type === "choice" || field.type === "multi") {
-        row.options = pickableOptions(field, value).map((o)=>({
-                value: o.key,
-                label: o.label,
-                tone: o.tone
-            }));
-        row.editValue = Array.isArray(value) ? value : value == null ? field.type === "multi" ? [] : "" : String(value);
-    } else if (!isEmpty(value)) {
-        row.editValue = String(value);
-    }
-    if (field.type === "tags") {
-        row.tags = {
-            options: ctx.tagOptions?.[field.key] ?? (field.options === "existing-values" ? [] : field.options),
-            allowCreate: field.allowCreate,
-            max: field.max
-        };
-        row.editValue = Array.isArray(value) ? value : [];
-    }
-    const onSave = ctx.onSave;
-    if (onSave) row.onSave = (raw)=>onSave(field.key, parseSaved(field, raw));
-    return row;
+	const row = {
+		id: field.key,
+		label: field.label,
+		input: INPUT[field.type],
+		placeholder: field.placeholder,
+		required: field.required
+	};
+	const optionOf = (key) => hasOptions(field) ? field.options.find((o) => o.key === key) : undefined;
+	if (!isEmpty(value)) {
+		switch (field.type) {
+			case "choice": {
+				const option = optionOf(String(value));
+				row.value = option?.label ?? String(value);
+				row.tone = option?.tone;
+				break;
+			}
+			case "multi": {
+				const keys = Array.isArray(value) ? value : [String(value)];
+				row.chips = keys.map((k) => ({
+					label: optionOf(k)?.label ?? k,
+					tone: optionOf(k)?.tone
+				}));
+				break;
+			}
+			case "tags": {
+				const labels = Array.isArray(value) ? value : [String(value)];
+				row.chips = labels.map((label) => ({ label }));
+				break;
+			}
+			case "money":
+				row.value = formatMoney(Number(value), field.currency ?? ctx.currency, ctx.locale);
+				break;
+			case "date":
+				row.value = formatDay(String(value), ctx.locale);
+				break;
+			case "url":
+				row.value = String(value).replace(/^https?:\/\/(www\.)?/, "").replace(/\/$/, "");
+				row.href = String(value);
+				break;
+			case "email":
+				row.value = String(value);
+				row.href = `mailto:${value}`;
+				break;
+			case "text":
+			case "longtext":
+			case "timezone":
+				row.value = String(value);
+				break;
+			default: return field;
+		}
+	}
+	if (field.type === "choice" || field.type === "multi") {
+		row.options = pickableOptions(field, value).map((o) => ({
+			value: o.key,
+			label: o.label,
+			tone: o.tone
+		}));
+		row.editValue = Array.isArray(value) ? value : value == null ? field.type === "multi" ? [] : "" : String(value);
+	} else if (!isEmpty(value)) {
+		row.editValue = String(value);
+	}
+	if (field.type === "tags") {
+		row.tags = {
+			// "existing-values" is the host's to fill: only it can see the other records.
+			options: ctx.tagOptions?.[field.key] ?? (field.options === "existing-values" ? [] : field.options),
+			allowCreate: field.allowCreate,
+			max: field.max
+		};
+		row.editValue = Array.isArray(value) ? value : [];
+	}
+	const onSave = ctx.onSave;
+	if (onSave) row.onSave = (raw) => onSave(field.key, parseSaved(field, raw));
+	return row;
 }

package/dist/record/format.js

@@ -1,97 +1,85 @@
+// 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.
 const DAY_ONLY = /^\d{4}-\d{2}-\d{2}$/;
 function parse(iso) {
-    return DAY_ONLY.test(iso) ? {
-        date: new Date(`${iso}T00:00:00Z`),
-        timeZone: "UTC"
-    } : {
-        date: new Date(iso)
-    };
+	return DAY_ONLY.test(iso) ? {
+		date: new Date(`${iso}T00:00:00Z`),
+		timeZone: "UTC"
+	} : { date: new Date(iso) };
 }
+/** "Mon 26 Oct". */
 export function formatDay(iso, locale = "en-GB") {
-    const { date, timeZone } = parse(iso);
-    return new Intl.DateTimeFormat(locale, {
-        weekday: "short",
-        day: "numeric",
-        month: "short",
-        timeZone
-    }).format(date);
+	const { date, timeZone } = parse(iso);
+	return new Intl.DateTimeFormat(locale, {
+		weekday: "short",
+		day: "numeric",
+		month: "short",
+		timeZone
+	}).format(date);
 }
+/** "Sat 24 to Sun 25 Oct" in one month, two full days across months, one day when the ends match. */
 export function formatRange(start, end, locale = "en-GB") {
-    if (!end || end.slice(0, 10) === start.slice(0, 10)) return formatDay(start, locale);
-    const a = parse(start);
-    const b = parse(end);
-    const sameMonth = a.date.getUTCFullYear() === b.date.getUTCFullYear() && a.date.getUTCMonth() === b.date.getUTCMonth();
-    if (!sameMonth) return `${formatDay(start, locale)} to ${formatDay(end, locale)}`;
-    const part = (d)=>new Intl.DateTimeFormat(locale, {
-            weekday: "short",
-            day: "numeric",
-            timeZone: "UTC"
-        }).format(d);
-    const month = new Intl.DateTimeFormat(locale, {
-        month: "short",
-        timeZone: "UTC"
-    }).format(b.date);
-    return `${part(a.date)} to ${part(b.date)} ${month}`;
+	if (!end || end.slice(0, 10) === start.slice(0, 10)) return formatDay(start, locale);
+	const a = parse(start);
+	const b = parse(end);
+	const sameMonth = a.date.getUTCFullYear() === b.date.getUTCFullYear() && a.date.getUTCMonth() === b.date.getUTCMonth();
+	if (!sameMonth) return `${formatDay(start, locale)} to ${formatDay(end, locale)}`;
+	const part = (d) => new Intl.DateTimeFormat(locale, {
+		weekday: "short",
+		day: "numeric",
+		timeZone: "UTC"
+	}).format(d);
+	const month = new Intl.DateTimeFormat(locale, {
+		month: "short",
+		timeZone: "UTC"
+	}).format(b.date);
+	return `${part(a.date)} to ${part(b.date)} ${month}`;
 }
+/** "Oct 21" without a weekday, for a timeline day header. */
 export function formatDayHeader(day, locale = "en-GB") {
-    return new Intl.DateTimeFormat(locale, {
-        weekday: "short",
-        day: "numeric",
-        month: "short",
-        year: "numeric",
-        timeZone: "UTC"
-    }).format(new Date(`${day}T00:00:00Z`));
+	return new Intl.DateTimeFormat(locale, {
+		weekday: "short",
+		day: "numeric",
+		month: "short",
+		year: "numeric",
+		timeZone: "UTC"
+	}).format(new Date(`${day}T00:00:00Z`));
 }
+/** "14:30" in the viewer's zone, or the given one. */
 export function formatTime(iso, locale = "en-GB", timeZone) {
-    return new Intl.DateTimeFormat(locale, {
-        hour: "2-digit",
-        minute: "2-digit",
-        timeZone
-    }).format(new Date(iso));
+	return new Intl.DateTimeFormat(locale, {
+		hour: "2-digit",
+		minute: "2-digit",
+		timeZone
+	}).format(new Date(iso));
 }
+/** "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()) / 1000);
-    const abs = Math.abs(seconds);
-    const rtf = new Intl.RelativeTimeFormat(locale, {
-        numeric: "auto",
-        style: "long"
-    });
-    const units = [
-        [
-            31_536_000,
-            "year"
-        ],
-        [
-            2_592_000,
-            "month"
-        ],
-        [
-            604_800,
-            "week"
-        ],
-        [
-            86_400,
-            "day"
-        ],
-        [
-            3_600,
-            "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");
+	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");
 }
+/** "€12,000". `compact` gives "€12K". */
 export function formatMoney(amount, currency = "EUR", locale = "en-GB", compact = false) {
-    return new Intl.NumberFormat(locale, {
-        style: "currency",
-        currency,
-        maximumFractionDigits: compact || Number.isInteger(amount) ? 0 : 2,
-        notation: compact ? "compact" : "standard"
-    }).format(amount);
+	return new Intl.NumberFormat(locale, {
+		style: "currency",
+		currency,
+		maximumFractionDigits: compact || Number.isInteger(amount) ? 0 : 2,
+		notation: compact ? "compact" : "standard"
+	}).format(amount);
 }

package/dist/record/gutter.js

@@ -1 +1,2 @@
+/** The record's horizontal padding, shared by the header, banner, tabs and body so they line up. */
 export const gutterClass = "px-4 @3xl:px-6";

package/dist/record/kinds.js

@@ -1,110 +1,100 @@
 import { CheckCircle, ClipboardText, CurrencyCircleDollar, EnvelopeSimple, File, Flag, Gavel, NavigationArrow, NotePencil, Phone, Receipt, Signpost, UsersThree } from "phosphor-svelte";
+/** The kit's event kinds, drawn in plain English. A module adds its own beside them. */
 export const DEFAULT_RECORD_KINDS = [
-    {
-        key: "call",
-        label: "Call",
-        icon: Phone
-    },
-    {
-        key: "meeting",
-        label: "Meeting",
-        icon: UsersThree
-    },
-    {
-        key: "email",
-        label: "Email",
-        icon: EnvelopeSimple
-    },
-    {
-        key: "form",
-        label: "Form",
-        icon: ClipboardText
-    },
-    {
-        key: "note",
-        label: "Note",
-        icon: NotePencil
-    },
-    {
-        key: "status",
-        label: "Where we are",
-        icon: NavigationArrow
-    },
-    {
-        key: "stage",
-        label: "Stage",
-        icon: Signpost
-    },
-    {
-        key: "task.done",
-        label: "Task done",
-        icon: CheckCircle,
-        tone: "success"
-    },
-    {
-        key: "milestone.done",
-        label: "Step done",
-        icon: Flag,
-        tone: "success"
-    },
-    {
-        key: "invoice.sent",
-        label: "Invoice",
-        icon: Receipt
-    },
-    {
-        key: "payment",
-        label: "Payment",
-        icon: CurrencyCircleDollar,
-        tone: "success"
-    },
-    {
-        key: "decision",
-        label: "Decision",
-        icon: Gavel
-    },
-    {
-        key: "file",
-        label: "File",
-        icon: File
-    }
+	{
+		key: "call",
+		label: "Call",
+		icon: Phone
+	},
+	{
+		key: "meeting",
+		label: "Meeting",
+		icon: UsersThree
+	},
+	{
+		key: "email",
+		label: "Email",
+		icon: EnvelopeSimple
+	},
+	{
+		key: "form",
+		label: "Form",
+		icon: ClipboardText
+	},
+	{
+		key: "note",
+		label: "Note",
+		icon: NotePencil
+	},
+	{
+		key: "status",
+		label: "Where we are",
+		icon: NavigationArrow
+	},
+	{
+		key: "stage",
+		label: "Stage",
+		icon: Signpost
+	},
+	{
+		key: "task.done",
+		label: "Task done",
+		icon: CheckCircle,
+		tone: "success"
+	},
+	{
+		key: "milestone.done",
+		label: "Step done",
+		icon: Flag,
+		tone: "success"
+	},
+	{
+		key: "invoice.sent",
+		label: "Invoice",
+		icon: Receipt
+	},
+	{
+		key: "payment",
+		label: "Payment",
+		icon: CurrencyCircleDollar,
+		tone: "success"
+	},
+	{
+		key: "decision",
+		label: "Decision",
+		icon: Gavel
+	},
+	{
+		key: "file",
+		label: "File",
+		icon: File
+	}
 ];
+/** The chips over the timeline. Kinds a record has none of are not drawn. */
 export const DEFAULT_RECORD_FILTERS = [
-    {
-        key: "calls",
-        label: "Calls",
-        kinds: [
-            "call",
-            "meeting"
-        ]
-    },
-    {
-        key: "notes",
-        label: "Notes",
-        kinds: [
-            "note"
-        ]
-    },
-    {
-        key: "money",
-        label: "Money",
-        kinds: [
-            "invoice.sent",
-            "payment"
-        ]
-    },
-    {
-        key: "stage",
-        label: "Stage",
-        kinds: [
-            "stage"
-        ]
-    },
-    {
-        key: "status",
-        label: "Status",
-        kinds: [
-            "status"
-        ]
-    }
+	{
+		key: "calls",
+		label: "Calls",
+		kinds: ["call", "meeting"]
+	},
+	{
+		key: "notes",
+		label: "Notes",
+		kinds: ["note"]
+	},
+	{
+		key: "money",
+		label: "Money",
+		kinds: ["invoice.sent", "payment"]
+	},
+	{
+		key: "stage",
+		label: "Stage",
+		kinds: ["stage"]
+	},
+	{
+		key: "status",
+		label: "Status",
+		kinds: ["status"]
+	}
 ];