@heyramzi/ui 2.8.0 → 2.10.0

package/dist/canvas/ui/tools.js

@@ -0,0 +1,411 @@
+import { PEN_DEFAULTS } from "../pen/types.js";
+export const TOOLS = [
+    {
+        id: "select",
+        key: "V"
+    },
+    {
+        id: "hand",
+        key: "H"
+    },
+    {
+        id: "connect",
+        key: "L"
+    },
+    {
+        id: "pen",
+        key: "P"
+    },
+    {
+        id: "highlighter",
+        key: "M"
+    },
+    {
+        id: "eraser",
+        key: "E"
+    },
+    {
+        id: "text",
+        key: "T"
+    },
+    {
+        id: "rectangle",
+        key: "R"
+    },
+    {
+        id: "ellipse",
+        key: "O"
+    },
+    {
+        id: "diamond",
+        key: "D"
+    },
+    {
+        id: "frame",
+        key: "F"
+    }
+];
+const TOOL_BY_KEY = new Map(TOOLS.map((tool)=>[
+        tool.key.toLowerCase(),
+        tool.id
+    ]));
+export function toolForKey(key) {
+    return TOOL_BY_KEY.get(key.toLowerCase()) ?? null;
+}
+export function keyForTool(tool) {
+    return TOOLS.find((entry)=>entry.id === tool)?.key ?? "";
+}
+export function isDrawingTool(tool) {
+    return tool !== "select" && tool !== "hand" && tool !== "connect" && tool !== "frame";
+}
+export function isFrameTool(tool) {
+    return tool === "frame";
+}
+export function isShapeTool(tool) {
+    return tool === "rectangle" || tool === "ellipse" || tool === "diamond";
+}
+const BRUSH_SIZES = {
+    pen: [
+        2,
+        PEN_DEFAULTS.pen.size,
+        8
+    ],
+    highlighter: [
+        12,
+        PEN_DEFAULTS.highlighter.size,
+        32
+    ]
+};
+export const DEFAULT_BRUSH_LEVEL = 1;
+export function brushSize(tool, level) {
+    if (tool === "pen" || tool === "highlighter") return BRUSH_SIZES[tool][level];
+    return undefined;
+}
+export function hasBrush(tool) {
+    return tool === "pen" || tool === "highlighter";
+}
+export function isBrushTool(tool) {
+    return tool === "pen" || tool === "highlighter" || tool === "eraser";
+}
+export function hasColor(tool) {
+    return isDrawingTool(tool) && tool !== "eraser";
+}
+export const SHORTCUTS = [
+    {
+        id: "select",
+        group: "tools",
+        keys: [
+            "V"
+        ]
+    },
+    {
+        id: "hand",
+        group: "tools",
+        keys: [
+            "H"
+        ]
+    },
+    {
+        id: "connect",
+        group: "tools",
+        keys: [
+            "L"
+        ]
+    },
+    {
+        id: "pen",
+        group: "tools",
+        keys: [
+            "P"
+        ]
+    },
+    {
+        id: "highlighter",
+        group: "tools",
+        keys: [
+            "M"
+        ]
+    },
+    {
+        id: "eraser",
+        group: "tools",
+        keys: [
+            "E"
+        ]
+    },
+    {
+        id: "text",
+        group: "tools",
+        keys: [
+            "T"
+        ]
+    },
+    {
+        id: "rectangle",
+        group: "tools",
+        keys: [
+            "R"
+        ]
+    },
+    {
+        id: "ellipse",
+        group: "tools",
+        keys: [
+            "O"
+        ]
+    },
+    {
+        id: "diamond",
+        group: "tools",
+        keys: [
+            "D"
+        ]
+    },
+    {
+        id: "frame",
+        group: "tools",
+        keys: [
+            "F"
+        ]
+    },
+    {
+        id: "note",
+        group: "tools",
+        keys: [
+            "N"
+        ]
+    },
+    {
+        id: "cards",
+        group: "tools",
+        keys: [
+            "C"
+        ]
+    },
+    {
+        id: "comment",
+        group: "tools",
+        keys: [
+            "B"
+        ]
+    },
+    {
+        id: "panTemporarily",
+        group: "tools",
+        keys: [
+            "Space"
+        ]
+    },
+    {
+        id: "undo",
+        group: "edit",
+        keys: [
+            "mod",
+            "Z"
+        ]
+    },
+    {
+        id: "redo",
+        group: "edit",
+        keys: [
+            "mod",
+            "shift",
+            "Z"
+        ]
+    },
+    {
+        id: "copy",
+        group: "edit",
+        keys: [
+            "mod",
+            "C"
+        ]
+    },
+    {
+        id: "paste",
+        group: "edit",
+        keys: [
+            "mod",
+            "V"
+        ]
+    },
+    {
+        id: "selectAll",
+        group: "edit",
+        keys: [
+            "mod",
+            "A"
+        ]
+    },
+    {
+        id: "multiSelect",
+        group: "edit",
+        keys: [
+            "shift",
+            "Click"
+        ]
+    },
+    {
+        id: "duplicate",
+        group: "edit",
+        keys: [
+            "mod",
+            "D"
+        ]
+    },
+    {
+        id: "group",
+        group: "edit",
+        keys: [
+            "mod",
+            "G"
+        ]
+    },
+    {
+        id: "ungroup",
+        group: "edit",
+        keys: [
+            "mod",
+            "shift",
+            "G"
+        ]
+    },
+    {
+        id: "bringForward",
+        group: "edit",
+        keys: [
+            "]"
+        ]
+    },
+    {
+        id: "sendBackward",
+        group: "edit",
+        keys: [
+            "["
+        ]
+    },
+    {
+        id: "bringToFront",
+        group: "edit",
+        keys: [
+            "mod",
+            "]"
+        ]
+    },
+    {
+        id: "sendToBack",
+        group: "edit",
+        keys: [
+            "mod",
+            "["
+        ]
+    },
+    {
+        id: "lock",
+        group: "edit",
+        keys: [
+            "mod",
+            "shift",
+            "L"
+        ]
+    },
+    {
+        id: "copyAsPng",
+        group: "edit",
+        keys: [
+            "mod",
+            "shift",
+            "C"
+        ]
+    },
+    {
+        id: "nudge",
+        group: "edit",
+        keys: [
+            "Arrows"
+        ]
+    },
+    {
+        id: "nudgeFar",
+        group: "edit",
+        keys: [
+            "shift",
+            "Arrows"
+        ]
+    },
+    {
+        id: "delete",
+        group: "edit",
+        keys: [
+            "Del"
+        ]
+    },
+    {
+        id: "save",
+        group: "edit",
+        keys: [
+            "mod",
+            "S"
+        ]
+    },
+    {
+        id: "zoomIn",
+        group: "view",
+        keys: [
+            "+"
+        ]
+    },
+    {
+        id: "zoomOut",
+        group: "view",
+        keys: [
+            "-"
+        ]
+    },
+    {
+        id: "zoom100",
+        group: "view",
+        keys: [
+            "shift",
+            "0"
+        ]
+    },
+    {
+        id: "zoomFit",
+        group: "view",
+        keys: [
+            "shift",
+            "1"
+        ]
+    },
+    {
+        id: "zoomSelection",
+        group: "view",
+        keys: [
+            "shift",
+            "2"
+        ]
+    },
+    {
+        id: "present",
+        group: "view",
+        keys: [
+            "mod",
+            "Enter"
+        ]
+    },
+    {
+        id: "shortcuts",
+        group: "view",
+        keys: [
+            "?"
+        ]
+    },
+    {
+        id: "escape",
+        group: "view",
+        keys: [
+            "Esc"
+        ]
+    }
+];

package/dist/charts/dashboard/chart.js

@@ -0,0 +1 @@
+export const CHART_HEIGHT = 240;

package/dist/charts/dashboard/data-table.js

@@ -0,0 +1,7 @@
+export const dataTableClass = "w-full text-sm";
+export const dataTheadClass = "bg-muted/40 text-xs text-muted-foreground";
+export const dataThClass = "px-4 py-2.5 text-left font-medium";
+export const dataThNumClass = "px-4 py-2.5 text-right font-medium";
+export const dataTrClass = "border-b border-border transition-colors last:border-0 hover:bg-muted/40";
+export const dataTdClass = "px-4 py-2.5 align-top";
+export const dataTdNumClass = "px-4 py-2.5 text-right align-top tabular-nums";

package/dist/charts/dashboard/index.js

@@ -0,0 +1,13 @@
+export { default as DataPanel } from "../../../src/charts/dashboard/data-panel.svelte";
+export { default as DataSortHead } from "../../../src/charts/dashboard/data-sort-head.svelte";
+export { default as DataTable } from "../../../src/charts/dashboard/data-table.svelte";
+export { default as RatingChip } from "../../../src/charts/dashboard/rating-chip.svelte";
+export { default as DashboardEmpty } from "../../../src/charts/dashboard/dashboard-empty.svelte";
+export { default as DashboardSection } from "../../../src/charts/dashboard/dashboard-section.svelte";
+export { default as PanelGrid } from "../../../src/charts/dashboard/panel-grid.svelte";
+export { default as PeriodFilter } from "../../../src/charts/dashboard/period-filter.svelte";
+export { default as StatBand } from "../../../src/charts/dashboard/stat-band.svelte";
+export { default as StatTile } from "../../../src/charts/dashboard/stat-tile.svelte";
+export { CHART_HEIGHT } from "./chart.js";
+export { DAY_WINDOWS } from "./windows.js";
+export { dataTableClass, dataTdClass, dataTdNumClass, dataThClass, dataThNumClass, dataTheadClass, dataTrClass } from "./data-table.js";

package/dist/charts/dashboard/windows.js

@@ -0,0 +1,5 @@
+export const DAY_WINDOWS = [
+    7,
+    30,
+    90
+];

package/dist/charts/edge-fade.js

@@ -0,0 +1,7 @@
+export const EDGE_FADE_DEFAULT = 0.08;
+export function resolveEdgeFade(value, fallback = EDGE_FADE_DEFAULT) {
+    if (value === false) return 0;
+    if (value === true || value == null) return fallback;
+    if (!Number.isFinite(value)) return 0;
+    return Math.min(0.45, Math.max(0, value));
+}

package/dist/charts/hover-band.js

@@ -0,0 +1,13 @@
+export const HOVER_BAND_REACH = 0.8;
+export function hoverBand(xs, i, width, reach = HOVER_BAND_REACH) {
+    if (i < 0 || i >= xs.length) return null;
+    const at = xs[i];
+    const before = i > 0 ? at - xs[i - 1] : Infinity;
+    const after = i < xs.length - 1 ? xs[i + 1] - at : Infinity;
+    const gap = Math.min(before, after);
+    const half = (Number.isFinite(gap) ? gap : width) * reach;
+    return {
+        x: at - half,
+        width: half * 2
+    };
+}

package/dist/charts/index.js

@@ -0,0 +1,19 @@
+import "../../src/charts/charts.css";
+export { default as BarChart } from "../../src/charts/bar-chart.svelte";
+export { default as AreaChart } from "../../src/charts/area-chart.svelte";
+export { default as LineChart } from "../../src/charts/line-chart.svelte";
+export { default as DonutChart } from "../../src/charts/donut-chart.svelte";
+export { default as Sparkline } from "../../src/charts/sparkline.svelte";
+export { default as TimeSeriesChart } from "../../src/charts/time-series-chart.svelte";
+export { default as GaugeChart } from "../../src/charts/gauge-chart.svelte";
+export { default as RingChart } from "../../src/charts/ring-chart.svelte";
+export { default as Legend } from "../../src/charts/legend.svelte";
+export { } from "../../src/charts/reference-line.svelte";
+export { default as StatCard } from "../../src/charts/stat-card.svelte";
+export { default as NumberChart } from "../../src/charts/number-chart.svelte";
+export { default as Figure } from "../../src/charts/figure.svelte";
+export { default as TrendPill } from "../../src/charts/trend-pill.svelte";
+export { default as AnimatedValue } from "../../src/charts/animated-value.svelte";
+export { default as EdgeFade } from "../../src/charts/edge-fade.svelte";
+export { resolveEdgeFade, EDGE_FADE_DEFAULT } from "./edge-fade.js";
+export { ChartContainer, ChartTooltip, ChartStyle, getPayloadConfigFromPayload, useChart, setChartContext, THEMES } from "./primitives/index.js";

package/dist/charts/motion.js

@@ -0,0 +1,15 @@
+import { cubicInOut } from "svelte/easing";
+export const REVEAL_MS = 1100;
+export const DOMAIN_MOTION = {
+    type: "tween",
+    duration: 500,
+    easing: cubicInOut
+};
+export const TOOLTIP_TOP = 8;
+export const TOOLTIP_GAP = 16;
+export function tokenMs(el, name, fallback) {
+    const raw = getComputedStyle(el).getPropertyValue(name).trim();
+    const n = Number.parseFloat(raw);
+    if (Number.isNaN(n)) return fallback;
+    return raw.endsWith("ms") ? n : n * 1000;
+}

package/dist/charts/primitives/chart-utils.js

@@ -0,0 +1,22 @@
+import { getContext, setContext } from "svelte";
+export const THEMES = {
+    light: "",
+    dark: ".dark"
+};
+export function getPayloadConfigFromPayload(config, item, key) {
+    if (typeof item !== "object" || item === null) return undefined;
+    let configLabelKey = key;
+    if (item.key === key) {
+        configLabelKey = item.key;
+    } else if (item.label === key) {
+        configLabelKey = item.label;
+    }
+    return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+const chartContextKey = Symbol("chart-context");
+export function setChartContext(value) {
+    return setContext(chartContextKey, value);
+}
+export function useChart() {
+    return getContext(chartContextKey);
+}

package/dist/charts/primitives/index.js

@@ -0,0 +1,4 @@
+export { default as ChartContainer } from "../../../src/charts/primitives/chart-container.svelte";
+export { default as ChartTooltip } from "../../../src/charts/primitives/chart-tooltip.svelte";
+export { default as ChartStyle } from "../../../src/charts/primitives/chart-style.svelte";
+export { getPayloadConfigFromPayload, useChart, setChartContext, THEMES } from "./chart-utils.js";

package/dist/components/copy/clipboard.js

@@ -0,0 +1,38 @@
+export async function copyText(value) {
+    try {
+        await navigator.clipboard.writeText(value);
+        return true;
+    } catch  {
+        return false;
+    }
+}
+export async function copyRichText(html, plainText) {
+    const text = plainText ?? htmlToPlainText(html);
+    try {
+        await navigator.clipboard.write([
+            new ClipboardItem({
+                "text/html": new Blob([
+                    html
+                ], {
+                    type: "text/html"
+                }),
+                "text/plain": new Blob([
+                    text
+                ], {
+                    type: "text/plain"
+                })
+            })
+        ]);
+        return true;
+    } catch  {
+        return copyText(text);
+    }
+}
+export function htmlToPlainText(html) {
+    if (typeof document === "undefined") {
+        return html.replace(/<br\s*\/?>/gi, "\n").replace(/<\/p>/gi, "\n\n").replace(/<\/li>/gi, "\n").replace(/<li>/gi, "• ").replace(/<[^>]+>/g, "").replace(/&nbsp;/g, " ").replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">").trim();
+    }
+    const div = document.createElement("div");
+    div.innerHTML = html;
+    return div.textContent || div.innerText || "";
+}

package/dist/components/copy/copied.svelte.js

@@ -0,0 +1,26 @@
+import { copyText } from "./clipboard.js";
+export class Copied {
+    key = $state(null);
+    #timer = null;
+    is(key = "") {
+        return this.key === key;
+    }
+    async copy(value, key = "", hold = 1400) {
+        if (!await copyText(value)) return false;
+        this.mark(key, hold);
+        return true;
+    }
+    mark(key = "", hold = 1400) {
+        this.key = key;
+        if (this.#timer) clearTimeout(this.#timer);
+        this.#timer = setTimeout(()=>{
+            this.key = null;
+            this.#timer = null;
+        }, hold);
+    }
+    reset() {
+        if (this.#timer) clearTimeout(this.#timer);
+        this.#timer = null;
+        this.key = null;
+    }
+}

package/dist/components/copy/index.js

@@ -0,0 +1,3 @@
+export { default as CopyButton } from "../../../src/components/copy/copy-button.svelte";
+export { copyText, copyRichText, htmlToPlainText } from "./clipboard.js";
+export { Copied } from "./copied.svelte.js";

package/dist/components/data-table/data-table.js

@@ -0,0 +1,55 @@
+export function normalizeQuery(query) {
+    return query.trim().toLowerCase();
+}
+export function containsQuery(value, query) {
+    if (!query) return true;
+    return value?.toLowerCase().includes(query) ?? false;
+}
+export function anyContainsQuery(values, query) {
+    return values.some((value)=>containsQuery(value, query));
+}
+export function toggleSort(current, key) {
+    if (current?.key !== key) return {
+        key,
+        direction: "asc"
+    };
+    if (current.direction === "asc") return {
+        key,
+        direction: "desc"
+    };
+    return null;
+}
+export function sortRows(rows, sort) {
+    if (!sort) return rows;
+    const { key, direction } = sort;
+    const multiplier = direction === "asc" ? 1 : -1;
+    return [
+        ...rows
+    ].sort((a, b)=>{
+        const aVal = a[key];
+        const bVal = b[key];
+        if (aVal == null && bVal == null) return 0;
+        if (aVal == null) return 1;
+        if (bVal == null) return -1;
+        if (typeof aVal === "string" && typeof bVal === "string") {
+            return multiplier * aVal.localeCompare(bVal);
+        }
+        if (typeof aVal === "number" && typeof bVal === "number") {
+            return multiplier * (aVal - bVal);
+        }
+        return multiplier * String(aVal).localeCompare(String(bVal));
+    });
+}
+export function paginateRows(rows, page, pageSize) {
+    const start = (page - 1) * pageSize;
+    return rows.slice(start, start + pageSize);
+}
+export function totalPages(total, pageSize) {
+    return Math.max(1, Math.ceil(total / pageSize));
+}
+export function formatCount(visible, total, label) {
+    const singular = label.endsWith("s") ? label.slice(0, -1) : label;
+    const noun = total === 1 ? singular : label;
+    if (visible === total) return `${total.toLocaleString()} ${noun}`;
+    return `${visible.toLocaleString()} of ${total.toLocaleString()} ${noun}`;
+}

package/dist/components/data-table/index.js

@@ -0,0 +1,7 @@
+export { default as InfiniteScroll } from "../../../src/components/data-table/infinite-scroll.svelte";
+export { default as Pagination } from "../../../src/components/data-table/pagination.svelte";
+export { default as RowArrow } from "../../../src/components/data-table/row-arrow.svelte";
+export { default as RowContextMenu } from "../../../src/components/data-table/row-context-menu.svelte";
+export { default as SortableHead } from "../../../src/components/data-table/sortable-head.svelte";
+export { default as TableSkeleton } from "../../../src/components/data-table/table-skeleton.svelte";
+export { anyContainsQuery, containsQuery, formatCount, normalizeQuery, paginateRows, sortRows, toggleSort, totalPages } from "./data-table.js";

package/dist/components/docs/index.js

@@ -0,0 +1,3 @@
+export { default as DocPage } from "../../../src/components/docs/doc-page.svelte";
+export { default as OnThisPage } from "../../../src/components/docs/on-this-page.svelte";
+export { ScrollSpy, READ_LINE } from "./scroll-spy.svelte.js";