@heyramzi/ui 2.8.0 → 2.10.0

package/dist/ai/ai-button/index.js

@@ -0,0 +1,2 @@
+import AiButton from "../../../src/ai/ai-button/AiButton.svelte";
+export { AiButton };

package/dist/ai/confirmation/confirmation-context.svelte.js

@@ -0,0 +1,12 @@
+import { getContext, setContext } from "svelte";
+const CONFIRMATION_CONTEXT_KEY = Symbol("confirmation-context");
+export function setConfirmationContext(value) {
+    setContext(CONFIRMATION_CONTEXT_KEY, value);
+}
+export function getConfirmationContext() {
+    const context = getContext(CONFIRMATION_CONTEXT_KEY);
+    if (!context) {
+        throw new Error("Confirmation parts must be used inside a <Confirmation>.");
+    }
+    return context;
+}

package/dist/ai/confirmation/index.js

@@ -0,0 +1,9 @@
+import Confirmation from "../../../src/ai/confirmation/Confirmation.svelte";
+import ConfirmationTitle from "../../../src/ai/confirmation/ConfirmationTitle.svelte";
+import ConfirmationRequest from "../../../src/ai/confirmation/ConfirmationRequest.svelte";
+import ConfirmationAccepted from "../../../src/ai/confirmation/ConfirmationAccepted.svelte";
+import ConfirmationRejected from "../../../src/ai/confirmation/ConfirmationRejected.svelte";
+import ConfirmationFailed from "../../../src/ai/confirmation/ConfirmationFailed.svelte";
+import ConfirmationActions from "../../../src/ai/confirmation/ConfirmationActions.svelte";
+import ConfirmationAction from "../../../src/ai/confirmation/ConfirmationAction.svelte";
+export { Confirmation, ConfirmationTitle, ConfirmationRequest, ConfirmationAccepted, ConfirmationRejected, ConfirmationFailed, ConfirmationActions, ConfirmationAction, Confirmation as Root, ConfirmationTitle as Title, ConfirmationRequest as Request, ConfirmationAccepted as Accepted, ConfirmationRejected as Rejected, ConfirmationFailed as Failed, ConfirmationActions as Actions, ConfirmationAction as Action };

package/dist/ai/generation-progress/index.js

@@ -0,0 +1,2 @@
+import GenerationProgress from "../../../src/ai/generation-progress/GenerationProgress.svelte";
+export { GenerationProgress };

package/dist/ai/index.js

@@ -0,0 +1,11 @@
+export { TypingDots } from "./typing-dots/index.js";
+export { Response } from "./response/index.js";
+export { Suggestion, Suggestions } from "./suggestion/index.js";
+export { PromptInput, PromptInputBody, PromptInputToolbar, PromptInputTextarea, PromptInputSubmit } from "./prompt-input/index.js";
+export { Confirmation, ConfirmationTitle, ConfirmationRequest, ConfirmationAccepted, ConfirmationRejected, ConfirmationActions, ConfirmationAction } from "./confirmation/index.js";
+export { ThinkingDots } from "./thinking-dots/index.js";
+export { VoiceWaveform } from "./voice-waveform/index.js";
+export { Reasoning, ReasoningTrigger, ReasoningContent } from "./reasoning/index.js";
+export { PixelLoader } from "./loading-state/index.js";
+export { AiButton } from "./ai-button/index.js";
+export { GenerationProgress } from "./generation-progress/index.js";

package/dist/ai/loading-state/index.js

@@ -0,0 +1,3 @@
+import PixelLoader from "../../../src/ai/loading-state/PixelLoader.svelte";
+export { PixelLoader };
+export default PixelLoader;

package/dist/ai/prompt-input/index.js

@@ -0,0 +1,6 @@
+import PromptInput from "../../../src/ai/prompt-input/PromptInput.svelte";
+import PromptInputBody from "../../../src/ai/prompt-input/PromptInputBody.svelte";
+import PromptInputToolbar from "../../../src/ai/prompt-input/PromptInputToolbar.svelte";
+import PromptInputTextarea from "../../../src/ai/prompt-input/PromptInputTextarea.svelte";
+import PromptInputSubmit from "../../../src/ai/prompt-input/PromptInputSubmit.svelte";
+export { PromptInput, PromptInputBody, PromptInputToolbar, PromptInputTextarea, PromptInputSubmit, PromptInput as Root, PromptInputBody as Body, PromptInputToolbar as Toolbar, PromptInputTextarea as Textarea, PromptInputSubmit as Submit };

package/dist/ai/reasoning/index.js

@@ -0,0 +1,4 @@
+import Reasoning from "../../../src/ai/reasoning/Reasoning.svelte";
+import ReasoningTrigger from "../../../src/ai/reasoning/ReasoningTrigger.svelte";
+import ReasoningContent from "../../../src/ai/reasoning/ReasoningContent.svelte";
+export { Reasoning, ReasoningTrigger, ReasoningContent, Reasoning as Root, ReasoningTrigger as Trigger, ReasoningContent as Content };

package/dist/ai/reasoning/reasoning-context.svelte.js

@@ -0,0 +1,12 @@
+import { getContext, setContext } from "svelte";
+const REASONING_CONTEXT_KEY = Symbol("reasoning-context");
+export function setReasoningContext(value) {
+    setContext(REASONING_CONTEXT_KEY, value);
+}
+export function getReasoningContext() {
+    const context = getContext(REASONING_CONTEXT_KEY);
+    if (!context) {
+        throw new Error("Reasoning parts must be used inside a <Reasoning>.");
+    }
+    return context;
+}

package/dist/ai/response/index.js

@@ -0,0 +1,3 @@
+import Response from "../../../src/ai/response/Response.svelte";
+export { Response };
+export default Response;

package/dist/ai/suggestion/index.js

@@ -0,0 +1,3 @@
+import Suggestion from "../../../src/ai/suggestion/Suggestion.svelte";
+import Suggestions from "../../../src/ai/suggestion/Suggestions.svelte";
+export { Suggestion, Suggestions, Suggestion as Item, Suggestions as Root };

package/dist/ai/thinking-dots/index.js

@@ -0,0 +1,3 @@
+import ThinkingDots from "../../../src/ai/thinking-dots/ThinkingDots.svelte";
+export { ThinkingDots };
+export default ThinkingDots;

package/dist/ai/typing-dots/index.js

@@ -0,0 +1,2 @@
+import TypingDots from "../../../src/ai/typing-dots/TypingDots.svelte";
+export { TypingDots, TypingDots as Root };

package/dist/ai/voice-waveform/index.js

@@ -0,0 +1,3 @@
+import VoiceWaveform from "../../../src/ai/voice-waveform/VoiceWaveform.svelte";
+export { VoiceWaveform };
+export default VoiceWaveform;

package/dist/animations/text-swap.js

@@ -0,0 +1,30 @@
+function parseDuration(value) {
+    if (!value) return 200;
+    const trimmed = value.trim();
+    if (trimmed.endsWith("ms")) return Number.parseFloat(trimmed);
+    if (trimmed.endsWith("s")) return Number.parseFloat(trimmed) * 1000;
+    const parsed = Number.parseFloat(trimmed);
+    return Number.isFinite(parsed) ? parsed : 200;
+}
+function prefersReducedMotion() {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+export function swapText(el, newText, opts) {
+    if (prefersReducedMotion()) {
+        el.textContent = newText;
+        el.classList.remove("is-exit", "is-enter-start");
+        return;
+    }
+    const durationMs = opts?.durationMs ?? parseDuration(getComputedStyle(el).getPropertyValue("--text-swap-dur"));
+    el.classList.add("t-text-swap", "is-exit");
+    window.setTimeout(()=>{
+        el.textContent = newText;
+        el.classList.remove("is-exit");
+        el.classList.add("is-enter-start");
+        requestAnimationFrame(()=>{
+            void el.offsetHeight;
+            el.classList.remove("is-enter-start");
+        });
+    }, durationMs);
+}

package/dist/brand/index.js

@@ -0,0 +1,65 @@
+const COLOR_VARS = {
+    brand: "--brand",
+    brandOnDark: "--brand-on-dark",
+    highlight: "--brand-highlight",
+    signal: "--brand-signal",
+    ink: "--brand-ink",
+    surface: "--brand-surface",
+    line: "--brand-line",
+    raised: "--brand-raised",
+    paper: "--brand-paper",
+    surfaceLight: "--brand-surface-light",
+    lineLight: "--brand-line-light",
+    primary: "--brand-primary",
+    primaryForeground: "--brand-primary-foreground",
+    primaryOnDark: "--brand-primary-on-dark",
+    primaryForegroundOnDark: "--brand-primary-foreground-on-dark"
+};
+const FONT_VARS = {
+    sans: "--font-sans",
+    heading: "--font-heading",
+    mono: "--font-mono",
+    quote: "--font-quote"
+};
+export const BRAND_COLOR_VARS = COLOR_VARS;
+export function defineBrand(brand) {
+    return brand;
+}
+function checked(name, value) {
+    if (/[;{}<>]/.test(value)) throw new Error(`brand: ${name} holds a character CSS would read as more than a value`);
+    return value;
+}
+export function brandVars(brand) {
+    const out = {};
+    for (const [key, name] of Object.entries(COLOR_VARS)){
+        const value = brand.colors[key];
+        if (value !== undefined) out[name] = checked(name, value);
+    }
+    for (const [key, name] of Object.entries(FONT_VARS)){
+        const value = brand.fonts?.[key];
+        if (value !== undefined) out[name] = checked(name, value);
+    }
+    for (const [name, value] of Object.entries(brand.vars ?? {}))out[name] = checked(name, value);
+    return out;
+}
+export function brandStyle(brand) {
+    return Object.entries(brandVars(brand)).map(([name, value])=>`${name}:${value}`).join(";");
+}
+export function brandCss(brand, selector = ":root") {
+    const body = Object.entries(brandVars(brand)).map(([name, value])=>`  ${name}: ${value};`).join("\n");
+    return `${selector} {\n${body}\n}\n`;
+}
+export function applyBrand(brand, root = document.documentElement) {
+    const vars = brandVars(brand);
+    const before = new Map();
+    for (const [name, value] of Object.entries(vars)){
+        before.set(name, root.style.getPropertyValue(name));
+        root.style.setProperty(name, value);
+    }
+    return ()=>{
+        for (const [name, value] of before){
+            if (value) root.style.setProperty(name, value);
+            else root.style.removeProperty(name);
+        }
+    };
+}

package/dist/canvas/card/resize.js

@@ -0,0 +1,10 @@
+export const DEFAULT_MIN_WIDTH = 120;
+export const DEFAULT_MAX_WIDTH = 2400;
+export const DEFAULT_MIN_HEIGHT = 40;
+export function userHeightOf(data) {
+    const value = data?.userHeight;
+    return typeof value === "number" && Number.isFinite(value) && value > 0 ? value : 0;
+}
+export function keptHeight(dragged, content) {
+    return Math.max(Math.round(dragged), Math.ceil(content));
+}

package/dist/canvas/edges/edge-path.js

@@ -0,0 +1,284 @@
+import { getBezierPath, getSmoothStepPath, getStraightPath, Position } from "@xyflow/svelte";
+import { bestAnchors, sideDetour, sideFromHandle } from "../headless/edge-anchors.js";
+import { parseBox } from "../headless/edge-memo.js";
+const CORNER = 8;
+const DETOUR = 40;
+const DETOUR_FLOOR = 8;
+const OUT = {
+    top: {
+        x: 0,
+        y: -1
+    },
+    right: {
+        x: 1,
+        y: 0
+    },
+    bottom: {
+        x: 0,
+        y: 1
+    },
+    left: {
+        x: -1,
+        y: 0
+    }
+};
+export function readBend(data) {
+    const raw = data && typeof data === "object" ? data.bend : null;
+    return typeof raw === "number" && Number.isFinite(raw) ? raw : 0;
+}
+export function bendFromPointer(handle, pointer) {
+    const at = handle.axis === "x" ? pointer.x : pointer.y;
+    return Math.round(Math.min(handle.max, Math.max(handle.min, at)) - handle.base);
+}
+function mid(a, b) {
+    return (a + b) / 2;
+}
+function clamp(value, a, b) {
+    return Math.min(Math.max(a, b), Math.max(Math.min(a, b), value));
+}
+function runPoints(s, t, horizontal, at) {
+    return horizontal ? [
+        s,
+        {
+            x: at,
+            y: s.y
+        },
+        {
+            x: at,
+            y: t.y
+        },
+        t
+    ] : [
+        s,
+        {
+            x: s.x,
+            y: at
+        },
+        {
+            x: t.x,
+            y: at
+        },
+        t
+    ];
+}
+function runHandle({ source: s, target: t }, horizontal, at, limits) {
+    const span = horizontal ? t.y - s.y : t.x - s.x;
+    if (!(Math.abs(span) > 1)) return null;
+    return {
+        axis: horizontal ? "x" : "y",
+        x: horizontal ? at : mid(s.x, t.x),
+        y: horizontal ? mid(s.y, t.y) : at,
+        ...limits
+    };
+}
+function sameSideElbow(anchors, bend) {
+    const { source: s, target: t } = anchors;
+    const out = OUT[s.side];
+    const horizontal = out.x !== 0;
+    const base = sideDetour(anchors, DETOUR);
+    const edge = sideDetour(anchors, 0);
+    const outward = horizontal ? out.x : out.y;
+    const at = clamp(base + bend, edge + outward * DETOUR_FLOOR, outward > 0 ? Infinity : -Infinity);
+    const handle = runHandle(anchors, horizontal, at, {
+        base,
+        min: outward > 0 ? edge + DETOUR_FLOOR : -Infinity,
+        max: outward > 0 ? Infinity : edge - DETOUR_FLOOR
+    });
+    return {
+        points: runPoints(s, t, horizontal, at),
+        handle
+    };
+}
+function acrossElbow(anchors, bend) {
+    const { source: s, target: t } = anchors;
+    const horizontal = OUT[s.side].x !== 0;
+    const base = horizontal ? mid(s.x, t.x) : mid(s.y, t.y);
+    const lo = horizontal ? Math.min(s.x, t.x) : Math.min(s.y, t.y);
+    const hi = horizontal ? Math.max(s.x, t.x) : Math.max(s.y, t.y);
+    const at = clamp(base + bend, lo, hi);
+    const handle = runHandle(anchors, horizontal, at, {
+        base,
+        min: lo,
+        max: hi
+    });
+    return {
+        points: runPoints(s, t, horizontal, at),
+        handle
+    };
+}
+function cornerElbow(anchors) {
+    const { source: s, target: t } = anchors;
+    const inward = OUT[t.side];
+    const horizontalOut = OUT[s.side].x !== 0;
+    if (horizontalOut === (inward.x !== 0)) return null;
+    const corner = horizontalOut ? {
+        x: t.x,
+        y: s.y
+    } : {
+        x: s.x,
+        y: t.y
+    };
+    const arriving = horizontalOut ? Math.sign(t.y - s.y) : Math.sign(t.x - s.x);
+    const wanted = horizontalOut ? -inward.y : -inward.x;
+    return arriving === wanted ? {
+        points: [
+            s,
+            corner,
+            t
+        ],
+        handle: null
+    } : null;
+}
+function elbowPoints(anchors, bend) {
+    const { source: s, target: t } = anchors;
+    if (s.side === t.side) return sameSideElbow(anchors, bend);
+    const out = OUT[s.side];
+    const inward = OUT[t.side];
+    const ahead = out.x * (t.x - s.x) + out.y * (t.y - s.y);
+    if (ahead <= 0) return null;
+    if (out.x === -inward.x && out.y === -inward.y) return acrossElbow(anchors, bend);
+    return cornerElbow(anchors);
+}
+function roundedPath(points) {
+    const pts = points.filter((p, i)=>i === 0 || p.x !== points[i - 1].x || p.y !== points[i - 1].y);
+    let d = `M ${pts[0].x} ${pts[0].y}`;
+    for(let i = 1; i < pts.length - 1; i++){
+        const a = pts[i - 1];
+        const b = pts[i];
+        const c = pts[i + 1];
+        const r = Math.min(CORNER, Math.hypot(b.x - a.x, b.y - a.y) / 2, Math.hypot(c.x - b.x, c.y - b.y) / 2);
+        const collinear = a.x === b.x && b.x === c.x || a.y === b.y && b.y === c.y;
+        if (collinear || !(r > 0.5)) {
+            d += ` L ${b.x} ${b.y}`;
+            continue;
+        }
+        const before = {
+            x: b.x - Math.sign(b.x - a.x) * r,
+            y: b.y - Math.sign(b.y - a.y) * r
+        };
+        const after = {
+            x: b.x + Math.sign(c.x - b.x) * r,
+            y: b.y + Math.sign(c.y - b.y) * r
+        };
+        d += ` L ${before.x} ${before.y} Q ${b.x} ${b.y} ${after.x} ${after.y}`;
+    }
+    const last = pts[pts.length - 1];
+    return `${d} L ${last.x} ${last.y}`;
+}
+function middleOf(points) {
+    let best = {
+        length: -1,
+        at: points[0]
+    };
+    for(let i = 1; i < points.length; i++){
+        const length = Math.hypot(points[i].x - points[i - 1].x, points[i].y - points[i - 1].y);
+        if (length > best.length) best = {
+            length,
+            at: {
+                x: mid(points[i].x, points[i - 1].x),
+                y: mid(points[i].y, points[i - 1].y)
+            }
+        };
+    }
+    return best.at;
+}
+export function elbowCorners(route, anchors, bend = 0) {
+    if (route !== "elbow" || !anchors) return null;
+    return elbowPoints(anchors, bend)?.points ?? null;
+}
+export function routeEdgePath(route, geometry, anchors, bend = 0) {
+    if (route === "straight") {
+        const [path, labelX, labelY] = getStraightPath(geometry);
+        return {
+            path,
+            labelX,
+            labelY,
+            bend: null
+        };
+    }
+    if (route === "curved") {
+        const [path, labelX, labelY] = getBezierPath(geometry);
+        return {
+            path,
+            labelX,
+            labelY,
+            bend: null
+        };
+    }
+    const plan = anchors ? elbowPoints(anchors, bend) : null;
+    if (plan) {
+        const label = plan.handle ?? middleOf(plan.points);
+        return {
+            path: roundedPath(plan.points),
+            labelX: label.x,
+            labelY: label.y,
+            bend: plan.handle
+        };
+    }
+    const [path, labelX, labelY] = getSmoothStepPath({
+        ...geometry,
+        borderRadius: CORNER
+    });
+    return {
+        path,
+        labelX,
+        labelY,
+        bend: null
+    };
+}
+export function planLink(input) {
+    const from = parseBox(input.fromBox);
+    const to = parseBox(input.toBox);
+    let anchors = null;
+    let geometry = input.fallback;
+    if (from && to) {
+        anchors = bestAnchors(from, to, {
+            source: sideFromHandle(input.sourceHandle),
+            target: sideFromHandle(input.targetHandle)
+        });
+        geometry = {
+            sourceX: anchors.source.x,
+            sourceY: anchors.source.y,
+            sourcePosition: anchors.source.side,
+            targetX: anchors.target.x,
+            targetY: anchors.target.y,
+            targetPosition: anchors.target.side
+        };
+    }
+    return {
+        ...routeEdgePath(input.route, geometry, anchors, input.bend),
+        anchors,
+        geometry,
+        tips: arrowTips(input.route, geometry, anchors)
+    };
+}
+function into(side) {
+    switch(side){
+        case "left":
+            return 0;
+        case "right":
+            return Math.PI;
+        case "top":
+            return Math.PI / 2;
+        case "bottom":
+            return -Math.PI / 2;
+    }
+}
+export function arrowTips(route, geometry, anchors) {
+    const { sourceX, sourceY, targetX, targetY } = geometry;
+    const straight = Math.atan2(targetY - sourceY, targetX - sourceX);
+    const startAngle = route === "straight" || !anchors ? straight + Math.PI : into(anchors.source.side);
+    const endAngle = route === "straight" || !anchors ? straight : into(anchors.target.side);
+    return {
+        start: {
+            x: sourceX,
+            y: sourceY,
+            angle: startAngle
+        },
+        end: {
+            x: targetX,
+            y: targetY,
+            angle: endAngle
+        }
+    };
+}

package/dist/canvas/editor/context-menu.js

@@ -0,0 +1,42 @@
+function rectOf(el) {
+    if (!el) return null;
+    const r = el.getBoundingClientRect();
+    return {
+        x: r.x,
+        y: r.y,
+        width: r.width,
+        height: r.height
+    };
+}
+function tableCellOf(target) {
+    const cell = target.closest("[data-table-row]");
+    if (!cell) return null;
+    return {
+        row: Number(cell.dataset.tableRow),
+        col: Number(cell.dataset.tableCol)
+    };
+}
+export function resolveContextMenuHit(event, nodes) {
+    const target = event.target;
+    const position = {
+        x: event.clientX,
+        y: event.clientY
+    };
+    const edgeId = target.closest(".svelte-flow__edge")?.getAttribute("data-id");
+    if (edgeId) return {
+        kind: "edge",
+        edgeId,
+        position
+    };
+    const nodeElement = target.closest("[data-id]");
+    const nodeId = nodeElement?.getAttribute("data-id") ?? null;
+    const node = nodeId ? nodes.find((n)=>n.id === nodeId) : undefined;
+    return {
+        kind: "canvas",
+        position,
+        anchorRect: rectOf(nodeElement),
+        nodeId,
+        nodeType: node?.type ?? null,
+        tableCell: tableCellOf(target)
+    };
+}