@heyramzi/ui 2.11.0 → 2.11.2

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

@@ -1,86 +1,89 @@
 import { defineStatuses } from "../../status/define-statuses.js";
 import { ClipboardText, EnvelopeSimple, Hash, Phone } from "phosphor-svelte";
+/** The lifecycle of an item. The dot and the badge both read this one map. */
 export const inboxStates = defineStatuses({
-    proposed: {
-        label: "Needs you",
-        tone: "warning",
-        variant: "open"
-    },
-    working: {
-        label: "Agent working",
-        tone: "accent",
-        variant: "progress",
-        progress: 0.6
-    },
-    approved: {
-        label: "Approved",
-        tone: "success",
-        variant: "completed"
-    },
-    declined: {
-        label: "Declined",
-        tone: "neutral",
-        variant: "lost"
-    },
-    done: {
-        label: "Done by agent",
-        tone: "success",
-        variant: "completed"
-    },
-    undone: {
-        label: "Undone",
-        tone: "neutral",
-        variant: "lost"
-    }
+	proposed: {
+		label: "Needs you",
+		tone: "warning",
+		variant: "open"
+	},
+	working: {
+		label: "Agent working",
+		tone: "accent",
+		variant: "progress",
+		progress: .6
+	},
+	approved: {
+		label: "Approved",
+		tone: "success",
+		variant: "completed"
+	},
+	declined: {
+		label: "Declined",
+		tone: "neutral",
+		variant: "lost"
+	},
+	done: {
+		label: "Done by agent",
+		tone: "success",
+		variant: "completed"
+	},
+	undone: {
+		label: "Undone",
+		tone: "neutral",
+		variant: "lost"
+	}
 });
+/** What the agent made of the touchpoint. */
 export const inboxKinds = defineStatuses({
-    information: {
-        label: "Information",
-        tone: "info",
-        variant: "filled"
-    },
-    action: {
-        label: "Action",
-        tone: "accent",
-        variant: "filled"
-    },
-    decision: {
-        label: "Decision",
-        tone: "warning",
-        variant: "filled"
-    }
+	information: {
+		label: "Information",
+		tone: "info",
+		variant: "filled"
+	},
+	action: {
+		label: "Action",
+		tone: "accent",
+		variant: "filled"
+	},
+	decision: {
+		label: "Decision",
+		tone: "warning",
+		variant: "filled"
+	}
 });
+/** How sure the agent is, bucketed. The dot's fill carries the exact score. */
 export const inboxConfidence = defineStatuses({
-    high: {
-        label: "Confident",
-        tone: "success",
-        variant: "progress"
-    },
-    medium: {
-        label: "Unsure",
-        tone: "warning",
-        variant: "progress"
-    },
-    low: {
-        label: "Guessing",
-        tone: "destructive",
-        variant: "progress"
-    }
+	high: {
+		label: "Confident",
+		tone: "success",
+		variant: "progress"
+	},
+	medium: {
+		label: "Unsure",
+		tone: "warning",
+		variant: "progress"
+	},
+	low: {
+		label: "Guessing",
+		tone: "destructive",
+		variant: "progress"
+	}
 });
 export function confidenceLevel(score) {
-    if (score >= 0.8) return "high";
-    if (score >= 0.5) return "medium";
-    return "low";
+	if (score >= .8) return "high";
+	if (score >= .5) return "medium";
+	return "low";
 }
 export const SOURCE_ICON = {
-    call: Phone,
-    email: EnvelopeSimple,
-    slack: Hash,
-    form: ClipboardText
+	call: Phone,
+	email: EnvelopeSimple,
+	slack: Hash,
+	form: ClipboardText
 };
 export const SOURCE_LABEL = {
-    call: "Call",
-    email: "Email",
-    slack: "Slack",
-    form: "Form"
+	call: "Call",
+	email: "Email",
+	slack: "Slack",
+	form: "Form"
 };

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

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

package/dist/work/kanban-drag.js

@@ -1,25 +1,30 @@
 const FRAME_PAD = 16;
+/**
+* Native drag shows a flat, faded snapshot. This hands the browser a tilted
+* copy with a lifted shadow instead. Call it from `ondragstart`.
+*/
 export function liftDragImage(e, tilt = -3) {
-    const source = e.currentTarget;
-    if (!source || !e.dataTransfer) return;
-    const rect = source.getBoundingClientRect();
-    const frame = document.createElement("div");
-    Object.assign(frame.style, {
-        position: "fixed",
-        top: "-10000px",
-        left: "-10000px",
-        padding: `${FRAME_PAD}px`,
-        pointerEvents: "none"
-    });
-    const ghost = source.cloneNode(true);
-    Object.assign(ghost.style, {
-        width: `${rect.width}px`,
-        opacity: "1",
-        rotate: `${tilt}deg`,
-        filter: "drop-shadow(0 2px 4px rgb(35 35 35 / 0.08)) drop-shadow(0 10px 18px rgb(35 35 35 / 0.14))"
-    });
-    frame.appendChild(ghost);
-    document.body.appendChild(frame);
-    e.dataTransfer.setDragImage(frame, e.clientX - rect.left + FRAME_PAD, e.clientY - rect.top + FRAME_PAD);
-    setTimeout(()=>frame.remove());
+	const source = e.currentTarget;
+	if (!source || !e.dataTransfer) return;
+	const rect = source.getBoundingClientRect();
+	// The padded frame leaves room for the tilt and shadow, or the snapshot crops them.
+	const frame = document.createElement("div");
+	Object.assign(frame.style, {
+		position: "fixed",
+		top: "-10000px",
+		left: "-10000px",
+		padding: `${FRAME_PAD}px`,
+		pointerEvents: "none"
+	});
+	const ghost = source.cloneNode(true);
+	Object.assign(ghost.style, {
+		width: `${rect.width}px`,
+		opacity: "1",
+		rotate: `${tilt}deg`,
+		filter: "drop-shadow(0 2px 4px rgb(35 35 35 / 0.08)) drop-shadow(0 10px 18px rgb(35 35 35 / 0.14))"
+	});
+	frame.appendChild(ghost);
+	document.body.appendChild(frame);
+	e.dataTransfer.setDragImage(frame, e.clientX - rect.left + FRAME_PAD, e.clientY - rect.top + FRAME_PAD);
+	setTimeout(() => frame.remove());
 }

package/dist/work/kanban-types.js

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

package/dist/work/presets/sales.js

@@ -1,35 +1,39 @@
 import { defineStatuses } from "../../status/define-statuses.js";
+/**
+* An example status map for a sales pipeline. Names are neutral on purpose:
+* swap the keys and labels for your own domain.
+*/
 export const salesStatuses = defineStatuses({
-    new: {
-        label: "New",
-        tone: "accent",
-        variant: "open"
-    },
-    contacted: {
-        label: "Contacted",
-        tone: "info",
-        variant: "open"
-    },
-    proposal: {
-        label: "Proposal",
-        tone: "accent",
-        variant: "progress",
-        progress: 0.25
-    },
-    negotiation: {
-        label: "Negotiation",
-        tone: "warning",
-        variant: "progress",
-        progress: 0.75
-    },
-    won: {
-        label: "Won",
-        tone: "success",
-        variant: "completed"
-    },
-    lost: {
-        label: "Lost",
-        tone: "destructive",
-        variant: "lost"
-    }
+	new: {
+		label: "New",
+		tone: "accent",
+		variant: "open"
+	},
+	contacted: {
+		label: "Contacted",
+		tone: "info",
+		variant: "open"
+	},
+	proposal: {
+		label: "Proposal",
+		tone: "accent",
+		variant: "progress",
+		progress: .25
+	},
+	negotiation: {
+		label: "Negotiation",
+		tone: "warning",
+		variant: "progress",
+		progress: .75
+	},
+	won: {
+		label: "Won",
+		tone: "success",
+		variant: "completed"
+	},
+	lost: {
+		label: "Lost",
+		tone: "destructive",
+		variant: "lost"
+	}
 });

package/dist/work/reorder.js

@@ -1,10 +1,11 @@
+/** Move `activeId` to `overId`'s index. Returns a copy; unknown ids pass through. */
 export function reorderByIds(items, activeId, overId) {
-    const activeIndex = items.findIndex((item)=>item.id === activeId);
-    const overIndex = items.findIndex((item)=>item.id === overId);
-    if (activeIndex === -1 || overIndex === -1 || activeIndex === overIndex) {
-        return items.slice();
-    }
-    const next = items.slice();
-    next.splice(overIndex, 0, ...next.splice(activeIndex, 1));
-    return next;
+	const activeIndex = items.findIndex((item) => item.id === activeId);
+	const overIndex = items.findIndex((item) => item.id === overId);
+	if (activeIndex === -1 || overIndex === -1 || activeIndex === overIndex) {
+		return items.slice();
+	}
+	const next = items.slice();
+	next.splice(overIndex, 0, ...next.splice(activeIndex, 1));
+	return next;
 }

package/dist/work/task-types.js

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

package/dist/work/time/duration.js

@@ -1,60 +1,65 @@
+/** "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();
-    if (!value) return null;
-    if (/^\d+$/.test(value)) return Number(value);
-    const clock = /^(\d+):([0-5]?\d)$/.exec(value);
-    if (clock) return Number(clock[1]) * 60 + Number(clock[2]);
-    const decimalHours = /^(\d+(?:[.,]\d+)?)\s*h$/.exec(value);
-    if (decimalHours?.[1]) return Math.round(Number(decimalHours[1].replace(",", ".")) * 60);
-    const parts = /^(?:(\d+)\s*h)?\s*(?:(\d+)\s*m?)?$/.exec(value);
-    if (!parts || !parts[1] && !parts[2]) return null;
-    return Number(parts[1] ?? 0) * 60 + Number(parts[2] ?? 0);
+	const value = text.trim().toLowerCase();
+	if (!value) return null;
+	if (/^\d+$/.test(value)) return Number(value);
+	const clock = /^(\d+):([0-5]?\d)$/.exec(value);
+	if (clock) return Number(clock[1]) * 60 + Number(clock[2]);
+	const decimalHours = /^(\d+(?:[.,]\d+)?)\s*h$/.exec(value);
+	if (decimalHours?.[1]) return Math.round(Number(decimalHours[1].replace(",", ".")) * 60);
+	const parts = /^(?:(\d+)\s*h)?\s*(?:(\d+)\s*m?)?$/.exec(value);
+	if (!parts || !parts[1] && !parts[2]) return null;
+	return Number(parts[1] ?? 0) * 60 + Number(parts[2] ?? 0);
 }
+/** 150 to "2h 30m". */
 export function formatMinutes(minutes) {
-    const whole = Math.max(0, Math.round(Number.isFinite(minutes) ? minutes : 0));
-    const hours = Math.floor(whole / 60);
-    const rest = whole % 60;
-    if (hours === 0) return `${rest}m`;
-    return rest === 0 ? `${hours}h` : `${hours}h ${rest}m`;
+	const whole = Math.max(0, Math.round(Number.isFinite(minutes) ? minutes : 0));
+	const hours = Math.floor(whole / 60);
+	const rest = whole % 60;
+	if (hours === 0) return `${rest}m`;
+	return rest === 0 ? `${hours}h` : `${hours}h ${rest}m`;
 }
+/** Milliseconds to the timer readout, "1:05:09". */
 export function formatClock(ms) {
-    const total = Math.max(0, Math.floor(ms / 1000));
-    return {
-        hours: String(Math.floor(total / 3600)),
-        minutes: String(Math.floor(total % 3600 / 60)).padStart(2, "0"),
-        seconds: String(total % 60).padStart(2, "0")
-    };
+	const total = Math.max(0, Math.floor(ms / 1e3));
+	return {
+		hours: String(Math.floor(total / 3600)),
+		minutes: String(Math.floor(total % 3600 / 60)).padStart(2, "0"),
+		seconds: String(total % 60).padStart(2, "0")
+	};
 }
+/** 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}`;
+	const month = String(date.getMonth() + 1).padStart(2, "0");
+	const day = String(date.getDate()).padStart(2, "0");
+	return `${date.getFullYear()}-${month}-${day}`;
 }
+/** "Today", "Yesterday", then "Mon, Oct 12", in the given locale. */
 export function dayLabel(day, locale) {
-    const date = new Date(`${day}T12:00:00`);
-    const now = new Date();
-    now.setHours(12, 0, 0, 0);
-    const gap = Math.round((date.getTime() - now.getTime()) / 86_400_000);
-    if (gap === 0 || gap === -1) {
-        const word = new Intl.RelativeTimeFormat(locale, {
-            numeric: "auto"
-        }).format(gap, "day");
-        return word.charAt(0).toLocaleUpperCase(locale) + word.slice(1);
-    }
-    return date.toLocaleDateString(locale, {
-        weekday: "short",
-        month: "short",
-        day: "numeric"
-    });
+	const date = new Date(`${day}T12:00:00`);
+	const now = new Date();
+	now.setHours(12, 0, 0, 0);
+	const gap = Math.round((date.getTime() - now.getTime()) / 864e5);
+	if (gap === 0 || gap === -1) {
+		const word = new Intl.RelativeTimeFormat(locale, { numeric: "auto" }).format(gap, "day");
+		return word.charAt(0).toLocaleUpperCase(locale) + word.slice(1);
+	}
+	return date.toLocaleDateString(locale, {
+		weekday: "short",
+		month: "short",
+		day: "numeric"
+	});
 }
+/** The tone of a budget: quiet until 90%, warning to 100%, destructive past it. */
 export function budgetTone(logged, estimate) {
-    if (!estimate || estimate <= 0) return "neutral";
-    const ratio = logged / estimate;
-    if (ratio > 1) return "destructive";
-    return ratio >= 0.9 ? "warning" : "neutral";
+	if (!estimate || estimate <= 0) return "neutral";
+	const ratio = logged / estimate;
+	if (ratio > 1) return "destructive";
+	return ratio >= .9 ? "warning" : "neutral";
 }
+/** A stable color for a person, from their name or id. */
 export function personColor(key) {
-    let hash = 0;
-    for (const char of key)hash = (hash * 31 + char.charCodeAt(0)) % 360;
-    return `oklch(0.72 0.12 ${hash})`;
+	let hash = 0;
+	for (const char of key) hash = (hash * 31 + char.charCodeAt(0)) % 360;
+	return `oklch(0.72 0.12 ${hash})`;
 }

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

@@ -1,25 +1,25 @@
 export const DEFAULT_TIME_LABELS = {
-    title: "Time",
-    timer: "Timer",
-    start: "Start timer",
-    stop: "Stop timer",
-    running: "Running",
-    since: (time)=>`Since ${time}`,
-    started: "Timer started",
-    runningFor: (duration)=>`Timer running, ${duration}`,
-    stopped: (duration)=>`Timer stopped, ${duration} to log`,
-    elapsed: "Elapsed time",
-    logged: "Logged",
-    duration: "Time spent",
-    durationPlaceholder: "1h30",
-    date: "Date worked",
-    note: "Note",
-    notePlaceholder: "What was done",
-    log: "Log",
-    saving: "Saving",
-    invalid: "Try 45m, 1h30 or 1.5h",
-    empty: "Log your first hour",
-    remaining: (left, estimate)=>`${left} left of ${estimate}`,
-    over: (over, estimate)=>`${over} over ${estimate}`,
-    deleteEntry: (duration)=>`Delete ${duration} entry`
+	title: "Time",
+	timer: "Timer",
+	start: "Start timer",
+	stop: "Stop timer",
+	running: "Running",
+	since: (time) => `Since ${time}`,
+	started: "Timer started",
+	runningFor: (duration) => `Timer running, ${duration}`,
+	stopped: (duration) => `Timer stopped, ${duration} to log`,
+	elapsed: "Elapsed time",
+	logged: "Logged",
+	duration: "Time spent",
+	durationPlaceholder: "1h30",
+	date: "Date worked",
+	note: "Note",
+	notePlaceholder: "What was done",
+	log: "Log",
+	saving: "Saving",
+	invalid: "Try 45m, 1h30 or 1.5h",
+	empty: "Log your first hour",
+	remaining: (left, estimate) => `${left} left of ${estimate}`,
+	over: (over, estimate) => `${over} over ${estimate}`,
+	deleteEntry: (duration) => `Delete ${duration} entry`
 };