@heyramzi/ui 2.9.0 → 2.10.0

package/dist/work/gantt/logic.js

@@ -0,0 +1,260 @@
+import { dayNumber, isoFromDay, weekday } from "../dates.js";
+const DAY_MS = 86_400_000;
+export function dayX(layout, day) {
+    return (day - layout.first) * layout.dayWidth;
+}
+export function spanOf(item, { getStart, getEnd }) {
+    const first = getStart(item) || getEnd(item);
+    const last = getEnd(item) || getStart(item);
+    if (!first || !last) return null;
+    const start = dayNumber(first);
+    return {
+        start,
+        end: Math.max(start, dayNumber(last))
+    };
+}
+export function liveSpan(span, drag, id) {
+    if (!span || drag?.id !== id || drag.dx === 0) return span;
+    if (drag.mode === "move") return {
+        start: span.start + drag.dx,
+        end: span.end + drag.dx
+    };
+    if (drag.mode === "start") return {
+        start: Math.min(span.start + drag.dx, span.end),
+        end: span.end
+    };
+    return {
+        start: span.start,
+        end: Math.max(span.end + drag.dx, span.start)
+    };
+}
+function join(a, b) {
+    return !a ? b : !b ? a : {
+        start: Math.min(a.start, b.start),
+        end: Math.max(a.end, b.end)
+    };
+}
+export function rangeOf(items, source, todayDay, from, to) {
+    let lo = todayDay;
+    let hi = todayDay;
+    for (const item of items){
+        const span = spanOf(item, source);
+        if (!span) continue;
+        lo = Math.min(lo, span.start);
+        hi = Math.max(hi, span.end);
+    }
+    let first = from ? dayNumber(from) : lo - 7;
+    if (!from) first -= (weekday(first) + 6) % 7;
+    const last = to ? dayNumber(to) : hi + 21;
+    return {
+        first,
+        last: Math.max(last, first)
+    };
+}
+export function buildDays(first, count) {
+    return Array.from({
+        length: count
+    }, (_, i)=>{
+        const day = first + i;
+        const wd = weekday(day);
+        return {
+            day,
+            i,
+            date: Number(isoFromDay(day).slice(8, 10)),
+            wd,
+            weekend: wd === 0 || wd === 6
+        };
+    });
+}
+export function buildMonths(days, format) {
+    const out = [];
+    for (const d of days){
+        const key = isoFromDay(d.day).slice(0, 7);
+        const last = out.at(-1);
+        if (last?.key === key) last.length++;
+        else out.push({
+            key,
+            label: format.format(new Date(d.day * DAY_MS)),
+            i: d.i,
+            length: 1
+        });
+    }
+    return out;
+}
+export function buildRows(items, source) {
+    const { getId, getParent, groups, getGroup, folded, drag } = source;
+    const out = [];
+    let order = 0;
+    const live = (item, id)=>liveSpan(spanOf(item, source), drag, id);
+    const emit = (members)=>{
+        if (!getParent) {
+            for (const item of members){
+                const id = getId(item);
+                const own = live(item, id);
+                out.push({
+                    kind: "task",
+                    item,
+                    id,
+                    order: order++,
+                    depth: 0,
+                    hasChildren: false,
+                    open: true,
+                    own,
+                    span: own
+                });
+            }
+            return;
+        }
+        const ids = new Set(members.map((item)=>getId(item)));
+        const kids = new Map();
+        for (const item of members){
+            const parent = getParent(item);
+            const key = parent && ids.has(parent) ? parent : null;
+            kids.set(key, [
+                ...kids.get(key) ?? [],
+                item
+            ]);
+        }
+        const walk = (item, depth, visible)=>{
+            const id = getId(item);
+            const children = kids.get(id) ?? [];
+            const open = !folded.has(id);
+            const own = live(item, id);
+            const row = {
+                kind: "task",
+                item,
+                id,
+                order: 0,
+                depth,
+                hasChildren: children.length > 0,
+                open,
+                own,
+                span: own
+            };
+            if (visible) {
+                row.order = order++;
+                out.push(row);
+            }
+            let below = null;
+            for (const child of children)below = join(below, walk(child, depth + 1, visible && open));
+            if (!own) row.span = below;
+            return join(own, below);
+        };
+        for (const item of kids.get(null) ?? [])walk(item, 0, true);
+    };
+    if (!groups || !getGroup) {
+        emit(items);
+        return out;
+    }
+    for (const group of groups){
+        const members = items.filter((item)=>getGroup(item) === group.id);
+        let span = null;
+        for (const item of members)span = join(span, live(item, getId(item)));
+        out.push({
+            kind: "group",
+            group,
+            count: members.length,
+            span
+        });
+        emit(members);
+    }
+    return out;
+}
+export function roundedPath(points, radius) {
+    let d = `M${points[0][0]},${points[0][1]}`;
+    for(let i = 1; i < points.length - 1; i++){
+        const [px, py] = points[i - 1];
+        const [cx, cy] = points[i];
+        const [nx, ny] = points[i + 1];
+        const r = Math.min(radius, Math.hypot(cx - px, cy - py) / 2, Math.hypot(nx - cx, ny - cy) / 2);
+        const inX = cx - Math.sign(cx - px) * r;
+        const inY = cy - Math.sign(cy - py) * r;
+        const outX = cx + Math.sign(nx - cx) * r;
+        const outY = cy + Math.sign(ny - cy) * r;
+        d += ` L${inX},${inY} Q${cx},${cy} ${outX},${outY}`;
+    }
+    const [lx, ly] = points[points.length - 1];
+    return `${d} L${lx},${ly}`;
+}
+export function buildArrows(rows, layout, getDependsOn) {
+    const { rowHeight, inset } = layout;
+    const at = new Map();
+    rows.forEach((row, index)=>{
+        if (row.kind === "task" && row.span) at.set(row.id, {
+            row: index,
+            span: row.span
+        });
+    });
+    const out = [];
+    for (const row of rows){
+        if (row.kind !== "task") continue;
+        const target = at.get(row.id);
+        if (!target) continue;
+        for (const dep of getDependsOn(row.item) ?? []){
+            const source = at.get(dep);
+            if (!source) continue;
+            const x1 = dayX(layout, source.span.end + 1) - inset;
+            const y1 = source.row * rowHeight + rowHeight / 2;
+            const x2 = dayX(layout, target.span.start) + inset;
+            const y2 = target.row * rowHeight + rowHeight / 2;
+            const points = x2 - x1 >= 24 ? [
+                [
+                    x1,
+                    y1
+                ],
+                [
+                    x1 + 12,
+                    y1
+                ],
+                [
+                    x1 + 12,
+                    y2
+                ],
+                [
+                    x2,
+                    y2
+                ]
+            ] : [
+                [
+                    x1,
+                    y1
+                ],
+                [
+                    x1 + 10,
+                    y1
+                ],
+                [
+                    x1 + 10,
+                    y1 + (y2 > y1 ? rowHeight / 2 : -rowHeight / 2)
+                ],
+                [
+                    x2 - 12,
+                    y1 + (y2 > y1 ? rowHeight / 2 : -rowHeight / 2)
+                ],
+                [
+                    x2 - 12,
+                    y2
+                ],
+                [
+                    x2,
+                    y2
+                ]
+            ];
+            out.push({
+                key: `${dep}->${row.id}`,
+                d: roundedPath(points, 6),
+                head: `M${x2 - 5},${y2 - 3.5} L${x2},${y2} L${x2 - 5},${y2 + 3.5}`,
+                from: dep,
+                to: row.id
+            });
+        }
+    }
+    return out;
+}
+export function barWidth(span, layout) {
+    return Math.max((span.end - span.start + 1) * layout.dayWidth - layout.inset * 2, 8);
+}
+export function rangeLabel(span, format) {
+    const length = span.end - span.start + 1;
+    return `${format.format(new Date(span.start * DAY_MS))} to ${format.format(new Date(span.end * DAY_MS))}, ${length} ${length === 1 ? "day" : "days"}`;
+}

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

@@ -0,0 +1,94 @@
+export function startDraft(drafts, recommended) {
+    return drafts.find((draft)=>draft.templateId === recommended) ?? drafts[0];
+}
+export function isOpen(item) {
+    return item.tier === "ask" && item.state === "proposed";
+}
+export function canUndo(item) {
+    return item.tier === "auto" && item.state === "done";
+}
+function plain(text) {
+    return text.replace(/(…|\.{3})\s*$/, "").replace(/\s+/g, " ").trim().toLowerCase();
+}
+export function cardFacts(item) {
+    const { command, summary, detail } = item.proposal;
+    const shown = [
+        plain(item.title)
+    ];
+    if (command) shown.push(plain(`${command.tool}: ${command.text}`), plain(command.text));
+    const lines = [];
+    for (const raw of [
+        summary,
+        detail
+    ]){
+        let line = raw?.trim() ?? "";
+        const title = item.title.trim();
+        if (line.toLowerCase().startsWith(title.toLowerCase()) && line.length > title.length) {
+            line = line.slice(title.length).replace(/^[\s:.,;-]+/, "");
+        }
+        const key = plain(line);
+        if (!key || shown.some((seen)=>seen.includes(key) || key.includes(seen))) continue;
+        shown.push(key);
+        lines.push(line);
+    }
+    return {
+        lines,
+        command
+    };
+}
+export function freshReasoning(item, facts) {
+    const reasoning = item.trace.reasoning.trim();
+    const key = plain(reasoning);
+    if (!key) return "";
+    const said = [
+        item.title,
+        item.proposal.summary,
+        item.proposal.detail ?? "",
+        ...facts.lines
+    ].map(plain).filter(Boolean);
+    return said.some((line)=>line.includes(key) || key.includes(line)) ? "" : reasoning;
+}
+const ISO = /^\d{4}-\d{2}-\d{2}T/;
+const UNITS = [
+    [
+        604_800,
+        "week"
+    ],
+    [
+        86_400,
+        "day"
+    ],
+    [
+        3_600,
+        "hour"
+    ],
+    [
+        60,
+        "minute"
+    ]
+];
+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) / 1000);
+    const age = Math.abs(seconds);
+    if (age >= 4 * 604_800) {
+        return new Intl.DateTimeFormat(locale, {
+            month: "short",
+            day: "numeric"
+        }).format(time);
+    }
+    const rtf = new Intl.RelativeTimeFormat(locale, {
+        numeric: "auto",
+        style: "short"
+    });
+    for (const [size, unit] of UNITS){
+        if (age >= size) return rtf.format(Math.round(seconds / size), unit);
+    }
+    return rtf.format(0, "second");
+}
+export function isTyping(target) {
+    if (!(target instanceof HTMLElement)) return false;
+    return target.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(target.tagName);
+}

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

@@ -0,0 +1,86 @@
+import { defineStatuses } from "../../status/define-statuses.js";
+import { ClipboardText, EnvelopeSimple, Hash, Phone } from "phosphor-svelte";
+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"
+    }
+});
+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"
+    }
+});
+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"
+    }
+});
+export function confidenceLevel(score) {
+    if (score >= 0.8) return "high";
+    if (score >= 0.5) return "medium";
+    return "low";
+}
+export const SOURCE_ICON = {
+    call: Phone,
+    email: EnvelopeSimple,
+    slack: Hash,
+    form: ClipboardText
+};
+export const SOURCE_LABEL = {
+    call: "Call",
+    email: "Email",
+    slack: "Slack",
+    form: "Form"
+};

package/dist/work/inbox/index.js

@@ -0,0 +1 @@
+export { confidenceLevel, inboxConfidence, inboxKinds, inboxStates } from "./inbox-statuses.js";

package/dist/work/index.js

@@ -0,0 +1,21 @@
+export { default as KanbanBoard } from "../../src/work/kanban-board.svelte";
+export { default as KanbanColumn } from "../../src/work/kanban-column.svelte";
+export { liftDragImage } from "./kanban-drag.js";
+export { createKanbanDnd } from "./use-kanban-dnd.svelte.js";
+export { boardOrderAt, keyBetween } from "./board-order.js";
+export { reorderByIds } from "./reorder.js";
+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";
+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-drag.js

@@ -0,0 +1,25 @@
+const FRAME_PAD = 16;
+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());
+}

package/dist/work/presets/sales.js

@@ -0,0 +1,35 @@
+import { defineStatuses } from "../../status/define-statuses.js";
+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"
+    }
+});

package/dist/work/reorder.js

@@ -0,0 +1,10 @@
+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;
+}

package/dist/work/time/duration.js

@@ -0,0 +1,60 @@
+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);
+}
+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`;
+}
+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")
+    };
+}
+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}`;
+}
+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"
+    });
+}
+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";
+}
+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})`;
+}

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

@@ -0,0 +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`
+};