@heyramzi/ui 2.8.0 → 2.10.0

package/dist/inbox/logic.js

@@ -0,0 +1,156 @@
+import { isOpen, isTyping } from "../work/inbox/inbox-logic.js";
+import { ALL, DEFAULT_INBOX_LABELS } from "./types.js";
+function ms(at) {
+    return Date.parse(at);
+}
+function latestOf(thread) {
+    const time = ms(thread.latestAt);
+    return Number.isNaN(time) ? Number.NEGATIVE_INFINITY : time;
+}
+export function isPending(entry) {
+    return entry.kind === "proposal" && !!entry.proposal && isOpen(entry.proposal);
+}
+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);
+}
+export const NO_FILTER = {
+    type: ALL,
+    who: ALL,
+    needsYou: false
+};
+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));
+}
+export function subjectTypes(threads) {
+    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);
+}
+const KEYS = {
+    j: "next",
+    k: "previous",
+    u: "toggleRead",
+    h: "snooze",
+    a: "approve",
+    d: "decline",
+    s: "steer",
+    S: "unfollow",
+    e: "edit"
+};
+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;
+}
+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
+        }
+    ];
+}
+export function resolveInboxLabels(overrides) {
+    return {
+        ...DEFAULT_INBOX_LABELS,
+        ...overrides
+    };
+}
+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;
+    }
+}
+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 EVENT_KINDS = new Set([
+    "status",
+    "assigned",
+    "proposal"
+]);
+export function isEvent(entry) {
+    return EVENT_KINDS.has(entry.kind);
+}

package/dist/inbox/types.js

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

package/dist/index.js

@@ -0,0 +1,18 @@
+export { default as BorderBeam } from "../src/effects/border-beam/BorderBeam.svelte";
+export { sizePresets, sizeThemePresets, themeColors } from "./effects/border-beam/presets.js";
+export { default as ThemeToggle } from "../src/effects/theme-toggle/ThemeToggle.svelte";
+export { default as AnimatedBeam } from "../src/effects/animated-beam/AnimatedBeam.svelte";
+export { default as Spotlight } from "../src/effects/spotlight/Spotlight.svelte";
+export { default as MagicCard } from "../src/effects/magic-card/MagicCard.svelte";
+export { default as Marquee } from "../src/effects/marquee/Marquee.svelte";
+export { default as ImageReveal } from "../src/effects/image-reveal/ImageReveal.svelte";
+export { default as ShaderGradient } from "../src/effects/shader-gradient/ShaderGradient.svelte";
+export { default as InView } from "../src/effects/reveal/InView.svelte";
+export { default as AnimatedGroup } from "../src/effects/reveal/AnimatedGroup.svelte";
+export { default as TextEffect } from "../src/effects/reveal/TextEffect.svelte";
+export { observeInView } from "./effects/reveal/observe.js";
+export { default as ProgressiveBlur } from "../src/effects/progressive-blur/ProgressiveBlur.svelte";
+export { default as InteractiveHoverButton } from "../src/effects/interactive-hover-button/InteractiveHoverButton.svelte";
+export { default as ImageComparison } from "../src/effects/image-comparison/ImageComparison.svelte";
+export { magnetic } from "./effects/magnetic/magnetic.js";
+export { revealTheme } from "./lib/theme-transition.js";

package/dist/lib/arrive.js

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

package/dist/lib/initials.js

@@ -0,0 +1,17 @@
+const segmenter = typeof Intl !== "undefined" && "Segmenter" in Intl ? new Intl.Segmenter() : null;
+function firstGrapheme(text) {
+    if (!text) return "";
+    if (segmenter) return segmenter.segment(text)[Symbol.iterator]().next().value?.segment ?? "";
+    return Array.from(text)[0] ?? "";
+}
+export function initial(name, fallback = "?") {
+    const first = firstGrapheme((name ?? "").trim());
+    return first ? first.toLocaleUpperCase() : fallback;
+}
+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();
+}

package/dist/lib/layout.js

@@ -0,0 +1 @@
+export const pageGutterClass = "px-4";

package/dist/lib/panel.js

@@ -0,0 +1,3 @@
+export const panelShellClass = "overflow-hidden rounded-xl border border-border bg-card";
+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";
+export const insetWellClass = "rounded-lg border border-border bg-muted/40 p-2";

package/dist/lib/result.js

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

package/dist/lib/sliding-pill.js

@@ -0,0 +1,45 @@
+const ACTIVE = '[data-state="active"],[aria-current="page"],[aria-pressed="true"]';
+export const slidingPill = (pill)=>{
+    const list = pill.parentElement;
+    if (!list) return;
+    let settled = false;
+    const move = (animate)=>{
+        const active = list.querySelector(ACTIVE);
+        if (!active) {
+            pill.style.opacity = "0";
+            return;
+        }
+        pill.style.opacity = "1";
+        if (animate) {
+            pill.style.transform = `translateX(${active.offsetLeft}px)`;
+            pill.style.width = `${active.offsetWidth}px`;
+            return;
+        }
+        pill.style.transition = "none";
+        pill.style.transform = `translateX(${active.offsetLeft}px)`;
+        pill.style.width = `${active.offsetWidth}px`;
+        void pill.offsetWidth;
+        pill.style.transition = "";
+    };
+    move(false);
+    list.dataset.pill = "on";
+    settled = true;
+    const attributes = new MutationObserver(()=>move(settled));
+    attributes.observe(list, {
+        subtree: true,
+        childList: true,
+        attributes: true,
+        attributeFilter: [
+            "data-state",
+            "aria-current",
+            "aria-pressed"
+        ]
+    });
+    const resize = new ResizeObserver(()=>move(false));
+    resize.observe(list);
+    return ()=>{
+        attributes.disconnect();
+        resize.disconnect();
+        delete list.dataset.pill;
+    };
+};

package/dist/lib/theme-transition.js

@@ -0,0 +1,53 @@
+const DEFAULT_DURATION = 300;
+const STYLE_ID = "heyramzi-reveal-theme";
+export function revealTheme(origin, apply, options = {}) {
+    const { skip = false, duration = DEFAULT_DURATION, easing = "cubic-bezier(0.77, 0, 0.175, 1)" } = options;
+    const point = resolveOrigin(origin);
+    const prefersReduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (skip || prefersReduced || !document.startViewTransition || !point) {
+        apply();
+        return;
+    }
+    const { x, y } = point;
+    const endRadius = Math.hypot(Math.max(x, window.innerWidth - x), Math.max(y, window.innerHeight - y));
+    ensureStyles();
+    const transition = document.startViewTransition(()=>{
+        apply();
+    });
+    transition.ready.then(()=>{
+        document.documentElement.animate({
+            clipPath: [
+                `circle(0px at ${x}px ${y}px)`,
+                `circle(${endRadius}px at ${x}px ${y}px)`
+            ]
+        }, {
+            duration,
+            easing,
+            pseudoElement: "::view-transition-new(root)"
+        });
+    });
+}
+function centreOf(element) {
+    const rect = element.getBoundingClientRect();
+    return {
+        x: rect.left + rect.width / 2,
+        y: rect.top + rect.height / 2
+    };
+}
+function resolveOrigin(origin) {
+    if (origin instanceof Element) return centreOf(origin);
+    if (origin instanceof MouseEvent) {
+        return origin.currentTarget instanceof Element ? centreOf(origin.currentTarget) : {
+            x: origin.clientX,
+            y: origin.clientY
+        };
+    }
+    return origin;
+}
+function ensureStyles() {
+    if (document.getElementById(STYLE_ID)) return;
+    const style = document.createElement("style");
+    style.id = STYLE_ID;
+    style.textContent = `::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal;}`;
+    document.head.appendChild(style);
+}

package/dist/lib/tone.js

@@ -0,0 +1,32 @@
+export const TONE_CLASS = {
+    neutral: "border-border bg-muted/40 text-muted-foreground",
+    accent: "border-[color-mix(in_oklab,var(--tone-accent,var(--color-primary))_30%,transparent)] bg-[color-mix(in_oklab,var(--tone-accent,var(--color-primary))_10%,transparent)] text-[color:var(--tone-accent,var(--color-primary))]",
+    info: "border-info/30 bg-info/10 text-info-800 dark:text-info-400",
+    success: "border-success/30 bg-success/10 text-success-800 dark:text-success-400",
+    warning: "border-warning/30 bg-warning/10 text-warning-800 dark:text-warning-400",
+    destructive: "border-destructive/30 bg-destructive/10 text-destructive-ink"
+};
+export const TONE_TEXT = {
+    neutral: "text-muted-foreground",
+    accent: "text-[color:var(--tone-accent,var(--color-primary))]",
+    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"
+};
+export const TONE_ICON = {
+    neutral: "text-muted-foreground",
+    accent: "text-[color:var(--tone-accent,var(--color-primary))]",
+    info: "text-info",
+    success: "text-success",
+    warning: "text-warning",
+    destructive: "text-destructive"
+};
+export const TONE_COLOR = {
+    neutral: "var(--color-muted-foreground)",
+    accent: "var(--tone-accent,var(--color-primary))",
+    info: "var(--color-info)",
+    success: "var(--color-success)",
+    warning: "var(--color-warning)",
+    destructive: "var(--color-destructive)"
+};

package/dist/lib/utils.js

@@ -0,0 +1,5 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/onboarding/define-tours.js

@@ -0,0 +1,28 @@
+import { MAX_STEPS } from "./types.js";
+function fail(id, problem) {
+    throw new Error(`tour "${id}": ${problem}`);
+}
+export function defineTours(tours) {
+    const ids = new Set();
+    for (const tour of tours){
+        const { id } = tour;
+        if (!id || !id.trim()) throw new Error("a tour needs an id");
+        if (ids.has(id)) fail(id, "its id is used twice");
+        ids.add(id);
+        if (!tour.route.startsWith("/")) fail(id, `route "${tour.route}" is not a route id`);
+        const version = tour.version ?? 1;
+        if (!Number.isInteger(version) || version < 1) fail(id, "version is a whole number from 1");
+        if (tour.kind === "intro") {
+            if (!tour.title || !tour.body) fail(id, "an intro needs a title and a body");
+            continue;
+        }
+        if (tour.steps.length < 1 || tour.steps.length > MAX_STEPS) {
+            fail(id, `has ${tour.steps.length} steps, and a tour takes 1 to ${MAX_STEPS}`);
+        }
+        tour.steps.forEach((step, i)=>{
+            if (!step.target.trim()) fail(id, `step ${i + 1} has no target`);
+            if (!step.title || !step.body) fail(id, `step ${i + 1} needs a title and a body`);
+        });
+    }
+    return tours;
+}

package/dist/onboarding/index.js

@@ -0,0 +1,4 @@
+export { default as OnboardingProvider } from "../../src/onboarding/onboarding-provider.svelte";
+export { onboarding } from "./onboarding.svelte.js";
+export { defineTours } from "./define-tours.js";
+export { localStorageStore, memoryStore } from "./stores.js";

package/dist/onboarding/onboarding.svelte.js

@@ -0,0 +1,15 @@
+class Onboarding {
+    hasTour = $state(false);
+    running = $state(false);
+    #replay = null;
+    bind(replay) {
+        this.#replay = replay;
+        return ()=>{
+            if (this.#replay === replay) this.#replay = null;
+        };
+    }
+    replay(tourId) {
+        return this.#replay ? this.#replay(tourId) : Promise.resolve(false);
+    }
+}
+export const onboarding = new Onboarding();

package/dist/onboarding/pick.js

@@ -0,0 +1,16 @@
+export function isSeen(tour, seen) {
+    return (seen[tour.id] ?? 0) >= (tour.version ?? 1);
+}
+export function toursForRoute(tours, routeId) {
+    return routeId ? tours.filter((tour)=>tour.route === routeId) : [];
+}
+export function pickTour(tours, routeId, seen) {
+    return toursForRoute(tours, routeId).find((tour)=>!isSeen(tour, seen));
+}
+export function pickForReplay(tours, routeId, tourId) {
+    if (tourId) return tours.find((tour)=>tour.id === tourId);
+    return toursForRoute(tours, routeId)[0];
+}
+export function keepFoundSteps(steps, exists) {
+    return steps.filter((step)=>exists(step.target));
+}

package/dist/onboarding/stores.js

@@ -0,0 +1,50 @@
+import { tryCatch } from "../lib/result.js";
+export function memoryStore(initial = {}) {
+    let seen = {
+        ...initial
+    };
+    return {
+        async load () {
+            return {
+                ...seen
+            };
+        },
+        async markSeen (tourId, version, _outcome) {
+            seen[tourId] = Math.max(seen[tourId] ?? 0, version);
+        },
+        async reset (tourId) {
+            if (tourId === undefined) seen = {};
+            else delete seen[tourId];
+        }
+    };
+}
+function readSeen(key) {
+    const read = tryCatch(()=>JSON.parse(localStorage.getItem(key) ?? "{}"));
+    const parsed = read.ok ? read.value : null;
+    if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return {};
+    return Object.fromEntries(Object.entries(parsed).filter((entry)=>typeof entry[1] === "number"));
+}
+function writeSeen(key, seen) {
+    tryCatch(()=>localStorage.setItem(key, JSON.stringify(seen)));
+}
+export function localStorageStore(key = "heyramzi:onboarding") {
+    return {
+        async load () {
+            return readSeen(key);
+        },
+        async markSeen (tourId, version, _outcome) {
+            const seen = readSeen(key);
+            seen[tourId] = Math.max(seen[tourId] ?? 0, version);
+            writeSeen(key, seen);
+        },
+        async reset (tourId) {
+            if (tourId === undefined) {
+                tryCatch(()=>localStorage.removeItem(key));
+                return;
+            }
+            const seen = readSeen(key);
+            delete seen[tourId];
+            writeSeen(key, seen);
+        }
+    };
+}

package/dist/onboarding/types.js

@@ -0,0 +1 @@
+export const MAX_STEPS = 6;

package/dist/onboarding/wait.js

@@ -0,0 +1,25 @@
+const find = (selector)=>document.querySelector(selector);
+export function waitForElement(selector, timeoutMs, signal) {
+    return new Promise((resolve)=>{
+        const now = find(selector);
+        if (now) return resolve(now);
+        if (signal?.aborted) return resolve(null);
+        const finish = (el)=>{
+            observer.disconnect();
+            clearTimeout(timer);
+            signal?.removeEventListener("abort", onAbort);
+            resolve(el);
+        };
+        const onAbort = ()=>finish(null);
+        const observer = new MutationObserver(()=>{
+            const el = find(selector);
+            if (el) finish(el);
+        });
+        const timer = setTimeout(()=>finish(find(selector)), timeoutMs);
+        observer.observe(document.documentElement, {
+            childList: true,
+            subtree: true
+        });
+        signal?.addEventListener("abort", onAbort);
+    });
+}

package/dist/panel/index.js

@@ -0,0 +1 @@
+export { default as SidePanel } from "../../src/panel/side-panel.svelte";