@heyramzi/ui 2.8.0 → 2.10.0

package/dist/components/docs/scroll-spy.svelte.js

@@ -0,0 +1,71 @@
+export const READ_LINE = 80;
+export class ScrollSpy {
+    active = $state("");
+    #scroller = null;
+    #items = [];
+    #locate;
+    #frame = 0;
+    attach(scroller, items, locate) {
+        this.#scroller = scroller;
+        this.#items = items;
+        this.#locate = locate;
+        if (!scroller || items.length === 0) {
+            this.active = "";
+            return ()=>{};
+        }
+        const schedule = ()=>{
+            this.#frame ||= requestAnimationFrame(()=>{
+                this.#frame = 0;
+                this.update();
+            });
+        };
+        scroller.addEventListener("scroll", schedule, {
+            passive: true
+        });
+        const observer = new ResizeObserver(schedule);
+        observer.observe(scroller);
+        for (const child of scroller.children)observer.observe(child);
+        this.update();
+        return ()=>{
+            scroller.removeEventListener("scroll", schedule);
+            observer.disconnect();
+            if (this.#frame) cancelAnimationFrame(this.#frame);
+            this.#frame = 0;
+        };
+    }
+    topOf(id) {
+        const scroller = this.#scroller;
+        if (!scroller) return null;
+        if (this.#locate) return this.#locate(id);
+        const el = scroller.querySelector(`#${CSS.escape(id)}`);
+        if (!el) return null;
+        return el.getBoundingClientRect().top - scroller.getBoundingClientRect().top + scroller.scrollTop;
+    }
+    update() {
+        const scroller = this.#scroller;
+        if (!scroller || this.#items.length === 0) return;
+        const atEnd = scroller.scrollTop + scroller.clientHeight >= scroller.scrollHeight - 2;
+        if (atEnd && scroller.scrollTop > 0) {
+            this.active = this.#items[this.#items.length - 1].id;
+            return;
+        }
+        const line = scroller.scrollTop + READ_LINE + 1;
+        let current = this.#items[0].id;
+        for (const item of this.#items){
+            const top = this.topOf(item.id);
+            if (top !== null && top <= line) current = item.id;
+        }
+        this.active = current;
+    }
+    jump(id) {
+        const scroller = this.#scroller;
+        const top = this.topOf(id);
+        if (!scroller || top === null) return;
+        const reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+        this.active = id;
+        scroller.scrollTo({
+            top: Math.max(0, top - READ_LINE),
+            behavior: reduced ? "auto" : "smooth"
+        });
+    }
+}

package/dist/components/field-row/index.js

@@ -0,0 +1 @@
+export { default as FieldRow } from "../../../src/components/field-row/field-row.svelte";

package/dist/components/hold-to-confirm/index.js

@@ -0,0 +1 @@
+export { default as HoldToConfirm } from "../../../src/components/hold-to-confirm/hold-to-confirm.svelte";

package/dist/components/icon/index.js

@@ -0,0 +1 @@
+export { default as Icon } from "../../../src/components/icon/icon.svelte";

package/dist/components/language-flag/index.js

@@ -0,0 +1 @@
+export { default as LanguageFlag } from "../../../src/components/language-flag/language-flag.svelte";

package/dist/components/list-page/filter-section.js

@@ -0,0 +1,4 @@
+import { cn } from "../../lib/utils.js";
+export function filterSectionClass(className) {
+    return cn("px-2 pt-2 pb-1 text-[11px] font-medium uppercase tracking-wide text-muted-foreground first:pt-1", className);
+}

package/dist/components/list-page/index.js

@@ -0,0 +1,25 @@
+export { default as DetailEmpty } from "../../../src/components/list-page/detail-empty.svelte";
+export { default as DetailHeader } from "../../../src/components/list-page/detail-header.svelte";
+export { default as DetailPanel } from "../../../src/components/list-page/detail-panel.svelte";
+export { default as DetailRow } from "../../../src/components/list-page/detail-row.svelte";
+export { default as DetailStack } from "../../../src/components/list-page/detail-stack.svelte";
+export { default as EmptyState } from "../../../src/components/list-page/empty-state.svelte";
+export { default as FilterItem } from "../../../src/components/list-page/filter-item.svelte";
+export { default as PrevNext } from "../../../src/components/list-page/prev-next.svelte";
+export { stepTo } from "./step.js";
+export { default as NoticeBar } from "../../../src/components/list-page/notice-bar.svelte";
+export { default as RailBody } from "../../../src/components/list-page/rail-body.svelte";
+export { default as RailEmpty } from "../../../src/components/list-page/rail-empty.svelte";
+export { default as RailHead } from "../../../src/components/list-page/rail-head.svelte";
+export { default as RailRow } from "../../../src/components/list-page/rail-row.svelte";
+export { default as SectionLabel } from "../../../src/components/section-header/section-label.svelte";
+export { queueRailClass, queueRailWidth } from "./queue-rail.js";
+export { default as FilterPopover } from "../../../src/components/list-page/filter-popover.svelte";
+export { filterSectionClass } from "./filter-section.js";
+export { default as GroupedList } from "../../../src/components/list-page/grouped-list.svelte";
+export { default as ListPageShell } from "../../../src/components/list-page/list-page-shell.svelte";
+export { default as MasterDetail } from "../../../src/components/list-page/master-detail.svelte";
+export { default as ToolbarSearch } from "../../../src/components/toolbar/toolbar-search.svelte";
+export { toolbarTriggerClass } from "../toolbar/toolbar-trigger.js";
+export { listTable } from "./list-table.js";
+export { getSectionHost, setSectionHost } from "./section-host.js";

package/dist/components/list-page/list-table.js

@@ -0,0 +1,5 @@
+import { cn } from "../../lib/utils.js";
+export const listTable = {
+    headRow: (className)=>cn("hover:translate-y-0 hover:bg-transparent hover:shadow-none [&>th]:h-9 [&>th]:border-b [&>th]:border-border", className),
+    row: (className)=>cn("border-b border-border/50 last:border-b-0 hover:translate-y-0 hover:bg-muted/40 hover:shadow-none [&>td]:h-10 [&>td]:py-0", className)
+};

package/dist/components/list-page/queue-rail.js

@@ -0,0 +1,3 @@
+export const queueRailClass = "flex flex-col overflow-hidden rounded-xl border border-border bg-card";
+export const queueRailWidth = "minmax(280px, 340px)";
+export const MASTER_DETAIL_PANE = Symbol("master-detail-pane");

package/dist/components/list-page/section-host.js

@@ -0,0 +1,8 @@
+import { getContext, setContext } from "svelte";
+const KEY = Symbol("list-page.section-host");
+export function setSectionHost(host) {
+    setContext(KEY, host);
+}
+export function getSectionHost() {
+    return getContext(KEY);
+}

package/dist/components/list-page/step.js

@@ -0,0 +1,5 @@
+export function stepTo(ids, current, by) {
+    const index = current ? ids.indexOf(current) : -1;
+    if (index < 0) return null;
+    return ids[index + by] ?? null;
+}

package/dist/components/locale-switch/index.js

@@ -0,0 +1 @@
+export { default as LocaleSwitch } from "../../../src/components/locale-switch/locale-switch.svelte";

package/dist/components/mark/index.js

@@ -0,0 +1 @@
+export { default as Mark } from "../../../src/components/mark/mark.svelte";

package/dist/components/open-in/index.js

@@ -0,0 +1 @@
+export { default as OpenIn } from "../../../src/components/open-in/open-in.svelte";

package/dist/components/picker/index.js

@@ -0,0 +1,3 @@
+export { default as Picker } from "../../../src/components/picker/picker.svelte";
+export { default as MarkPicker } from "../../../src/components/picker/mark-picker.svelte";
+export { pickerTriggerClass } from "./trigger.js";

package/dist/components/picker/trigger.js

@@ -0,0 +1,33 @@
+import { tv } from "tailwind-variants";
+export const pickerTriggerClass = tv({
+    base: [
+        "t-press inline-flex min-w-0 items-center gap-1.5 rounded-md text-[13px] font-medium whitespace-nowrap select-none",
+        "hover:bg-muted data-[state=open]:bg-muted",
+        "disabled:pointer-events-none disabled:opacity-50",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0"
+    ],
+    variants: {
+        size: {
+            sm: "h-6 ps-1.5 pe-2 any-pointer-coarse:h-11 any-pointer-coarse:pe-2.5",
+            default: "h-7 ps-1.5 pe-2.5 any-pointer-coarse:h-11"
+        },
+        block: {
+            true: "flex w-full",
+            false: "w-fit"
+        },
+        empty: {
+            true: "text-muted-foreground/70 hover:text-muted-foreground",
+            false: ""
+        },
+        inert: {
+            true: "hover:bg-transparent cursor-default",
+            false: ""
+        }
+    },
+    defaultVariants: {
+        size: "default",
+        block: false,
+        empty: false,
+        inert: false
+    }
+});

package/dist/components/section-card/index.js

@@ -0,0 +1 @@
+export { default as SectionCard } from "../../../src/components/section-card/section-card.svelte";

package/dist/components/section-header/index.js

@@ -0,0 +1,2 @@
+export { default as SectionHeader } from "../../../src/components/section-header/section-header.svelte";
+export { default as SectionLabel } from "../../../src/components/section-header/section-label.svelte";

package/dist/components/segmented/collapse.js

@@ -0,0 +1,32 @@
+export const SEGMENT_MAX = 6;
+export function splitSegments(items, max, activeIndex) {
+    if (max < 3 || items.length <= max) return {
+        visible: [
+            ...items
+        ],
+        hidden: []
+    };
+    const slots = max - 1;
+    if (activeIndex < slots && activeIndex >= 0) {
+        return {
+            visible: items.slice(0, slots),
+            hidden: items.slice(slots)
+        };
+    }
+    if (activeIndex < 0 || activeIndex >= items.length) {
+        return {
+            visible: items.slice(0, slots),
+            hidden: items.slice(slots)
+        };
+    }
+    return {
+        visible: [
+            ...items.slice(0, slots - 1),
+            ...items.slice(activeIndex, activeIndex + 1)
+        ],
+        hidden: items.filter((_, i)=>i >= slots - 1 && i !== activeIndex)
+    };
+}
+export function resolveSegmentMax(max) {
+    return max === "none" ? Number.POSITIVE_INFINITY : max;
+}

package/dist/components/segmented/index.js

@@ -0,0 +1,8 @@
+import AnimatedTabs from "../../../src/components/segmented/animated-tabs.svelte";
+import SegmentedFilter from "../../../src/components/segmented/segmented-filter.svelte";
+import SegmentedNav from "../../../src/components/segmented/segmented-nav.svelte";
+import SectionRuns from "../../../src/components/segmented/section-runs.svelte";
+import "../../../src/components/segmented/segment.svelte";
+import { segmentedRowClass } from "./segmented.js";
+import { SEGMENT_MAX } from "./collapse.js";
+export { AnimatedTabs, SectionRuns, SegmentedFilter, SegmentedNav, SEGMENT_MAX, segmentedRowClass };

package/dist/components/segmented/segmented.js

@@ -0,0 +1,50 @@
+import { tv } from "tailwind-variants";
+import { pageGutterClass } from "../../lib/layout.js";
+export const segmentedTrackClass = tv({
+    base: "h-7 any-pointer-coarse:h-11 shrink-0 items-stretch",
+    variants: {
+        variant: {
+            pill: "overflow-hidden rounded-lg border border-border p-0.5 any-pointer-coarse:border-0 any-pointer-coarse:px-[3px] any-pointer-coarse:py-0",
+            underline: "gap-5 border-b border-border"
+        },
+        fill: {
+            true: "flex w-full",
+            false: "inline-flex w-fit"
+        }
+    },
+    defaultVariants: {
+        variant: "pill",
+        fill: false
+    }
+});
+export const segmentedTriggerClass = tv({
+    base: [
+        "ui-segment group/segment t-press relative z-[1] inline-flex items-center justify-center gap-1.5 whitespace-nowrap font-medium select-none",
+        "text-muted-foreground hover:text-foreground",
+        "disabled:pointer-events-none disabled:opacity-50",
+        "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "focus-visible:ring-ring focus-visible:ring-2 focus-visible:ring-inset focus-visible:outline-none",
+        "h-full text-xs"
+    ],
+    variants: {
+        variant: {
+            pill: "rounded-[calc(var(--radius-lg)-3px)] px-2.5 any-pointer-coarse:px-3.5",
+            underline: "rounded-sm px-0"
+        },
+        fill: {
+            true: "min-w-fit flex-auto",
+            false: ""
+        },
+        active: {
+            true: "text-foreground",
+            false: ""
+        }
+    },
+    defaultVariants: {
+        variant: "pill",
+        fill: false,
+        active: false
+    }
+});
+export const segmentedRowClass = `flex shrink-0 flex-wrap items-center gap-x-4 gap-y-2 py-2 ${pageGutterClass}`;
+export const segmentedActiveClass = "data-active:text-foreground";

package/dist/components/star-rating-input/index.js

@@ -0,0 +1,2 @@
+import Root from "../../../src/components/star-rating-input/star-rating-input.svelte";
+export { Root, Root as StarRatingInput };

package/dist/components/svg/index.js

@@ -0,0 +1 @@
+export { default as Svg } from "../../../src/components/svg/svg.svelte";

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

@@ -0,0 +1 @@
+export { default as TableView } from "../../../src/components/table-view/table-view.svelte";

package/dist/components/tags-input/index.js

@@ -0,0 +1,2 @@
+export { default as TagsInput } from "../../../src/components/tags-input/tags-input.svelte";
+export { addTag, canCreate, cleanTags, collectOptions, editDistance, findOption, fold, matchOptions, removeTag, splitTags } from "./tags.js";

package/dist/components/tags-input/tags.js

@@ -0,0 +1,90 @@
+export function splitTags(text) {
+    return text.split(/[,\n]/).map((part)=>part.trim()).filter(Boolean);
+}
+export function fold(text) {
+    return text.normalize("NFD").replace(/\p{M}/gu, "").toLowerCase().replace(/[\s._-]+/g, "");
+}
+const same = (a, b)=>fold(a) === fold(b);
+export function editDistance(a, b, limit = 2) {
+    if (Math.abs(a.length - b.length) > limit) return limit + 1;
+    let prev2 = [];
+    let prev = Array.from({
+        length: b.length + 1
+    }, (_, j)=>j);
+    for(let i = 1; i <= a.length; i++){
+        const row = [
+            i
+        ];
+        for(let j = 1; j <= b.length; j++){
+            let d = Math.min(prev[j] + 1, row[j - 1] + 1, prev[j - 1] + (a[i - 1] === b[j - 1] ? 0 : 1));
+            if (i > 1 && j > 1 && a[i - 1] === b[j - 2] && a[i - 2] === b[j - 1]) d = Math.min(d, prev2[j - 2] + 1);
+            row.push(d);
+        }
+        prev2 = prev;
+        prev = row;
+    }
+    return prev[b.length];
+}
+function rank(option, query) {
+    const o = fold(option);
+    const q = fold(query);
+    if (o === q) return 0;
+    if (o.startsWith(q)) return 1;
+    if (o.includes(q)) return 2;
+    const limit = q.length >= 7 ? 2 : q.length >= 4 ? 1 : 0;
+    return limit > 0 && editDistance(o, q, limit) <= limit ? 3 : null;
+}
+export function matchOptions(options, tags, query, limit = 8) {
+    const open = options.filter((option)=>!tags.some((held)=>same(held, option)));
+    if (!query.trim()) return open.slice(0, limit);
+    return open.flatMap((option)=>{
+        const r = rank(option, query);
+        return r === null ? [] : [
+            {
+                option,
+                r
+            }
+        ];
+    }).sort((a, b)=>a.r - b.r).map(({ option })=>option).slice(0, limit);
+}
+export function findOption(options, input) {
+    return options.find((option)=>same(option, input));
+}
+export function canCreate(options, tags, query, allowCreate = true) {
+    return allowCreate && query.trim() !== "" && ![
+        ...options,
+        ...tags
+    ].some((held)=>same(held, query));
+}
+export function addTag(tags, name, options = [], max) {
+    const tag = findOption(options, name) ?? name.trim();
+    if (!tag || tags.some((held)=>same(held, tag))) return tags;
+    if (max !== undefined && tags.length >= max) return tags;
+    return [
+        ...tags,
+        tag
+    ];
+}
+export function removeTag(tags, tag) {
+    return tags.filter((held)=>!same(held, tag));
+}
+export function cleanTags(tags, options = []) {
+    return tags.reduce((out, tag)=>[
+            ...addTag(out, tag, options)
+        ], []);
+}
+export function collectOptions(lists) {
+    const seen = new Map();
+    for (const list of lists)for (const raw of list){
+        const tag = raw.trim();
+        if (!tag) continue;
+        const spellings = seen.get(fold(tag)) ?? new Map();
+        spellings.set(tag, (spellings.get(tag) ?? 0) + 1);
+        seen.set(fold(tag), spellings);
+    }
+    return [
+        ...seen.values()
+    ].map((spellings)=>[
+            ...spellings
+        ].sort((a, b)=>b[1] - a[1])[0][0]).sort((a, b)=>a.localeCompare(b));
+}

package/dist/components/theme/index.js

@@ -0,0 +1,3 @@
+export { default as ThemeProvider } from "../../../src/components/theme/theme-provider.svelte";
+export { revealTheme } from "../../lib/theme-transition.js";
+export { mode, resetMode, setMode, systemPrefersMode, toggleMode, userPrefersMode } from "mode-watcher";

package/dist/components/toolbar/index.js

@@ -0,0 +1,3 @@
+export { default as Toolbar } from "../../../src/components/toolbar/toolbar.svelte";
+export { default as ToolbarSearch } from "../../../src/components/toolbar/toolbar-search.svelte";
+export { toolbarTriggerClass } from "./toolbar-trigger.js";

package/dist/components/toolbar/toolbar-trigger.js

@@ -0,0 +1,4 @@
+import { cn } from "../../lib/utils.js";
+export function toolbarTriggerClass({ active = false, className } = {}) {
+    return cn("t-press inline-flex cursor-pointer items-center gap-1.5 rounded-lg border border-border font-medium shadow-btn transition-[background-color,border-color,color] duration-quick ease-smooth-out hover:border-foreground/15 motion-reduce:transition-none", "h-7 px-2.5 text-xs any-pointer-coarse:h-11 any-pointer-coarse:px-3", active ? "bg-foreground/6 text-foreground" : "bg-card text-muted-foreground hover:bg-foreground/3 hover:text-foreground", className);
+}

package/dist/editor/anchors.js

@@ -0,0 +1,17 @@
+export function slugify(text) {
+    const slug = text.normalize("NFKD").replace(/[̀-ͯ]/g, "").toLowerCase().replace(/[^\p{L}\p{N}]+/gu, "-").replace(/^-+|-+$/g, "");
+    return slug || "section";
+}
+export function anchorIds(labels) {
+    const seen = new Map();
+    const taken = new Set();
+    return labels.map((label)=>{
+        const base = slugify(label);
+        let count = (seen.get(base) ?? 0) + 1;
+        let id = count === 1 ? base : `${base}-${count}`;
+        while(taken.has(id))id = `${base}-${++count}`;
+        seen.set(base, count);
+        taken.add(id);
+        return id;
+    });
+}

package/dist/editor/block-id.js

@@ -0,0 +1,62 @@
+import { Extension } from "@tiptap/core";
+import { Plugin, PluginKey } from "@tiptap/pm/state";
+const TOP_LEVEL_BLOCK_TYPES = new Set([
+    "paragraph",
+    "heading",
+    "bulletList",
+    "orderedList",
+    "blockquote",
+    "codeBlock",
+    "horizontalRule"
+]);
+export function generateBlockId() {
+    return crypto.randomUUID();
+}
+function isTopLevelBlock(node) {
+    return TOP_LEVEL_BLOCK_TYPES.has(node.type.name);
+}
+const blockIdPluginKey = new PluginKey("blockId");
+export const BlockIdExtension = Extension.create({
+    name: "blockId",
+    addGlobalAttributes () {
+        return [
+            {
+                types: Array.from(TOP_LEVEL_BLOCK_TYPES),
+                attributes: {
+                    id: {
+                        default: null,
+                        parseHTML: (element)=>element.getAttribute("data-block-id") || null,
+                        renderHTML: (attributes)=>{
+                            if (!attributes.id) return {};
+                            return {
+                                "data-block-id": attributes.id
+                            };
+                        }
+                    }
+                }
+            }
+        ];
+    },
+    addProseMirrorPlugins () {
+        return [
+            new Plugin({
+                key: blockIdPluginKey,
+                appendTransaction (_transactions, _oldState, newState) {
+                    const { tr, doc } = newState;
+                    let changed = false;
+                    doc.forEach((node, offset)=>{
+                        if (!isTopLevelBlock(node)) return;
+                        if (node.attrs.id) return;
+                        const id = generateBlockId();
+                        tr.setNodeMarkup(offset, undefined, {
+                            ...node.attrs,
+                            id
+                        });
+                        changed = true;
+                    });
+                    return changed ? tr : null;
+                }
+            })
+        ];
+    }
+});

package/dist/editor/block-ops.js

@@ -0,0 +1,105 @@
+import { markdownToTiptap } from "./markdown.js";
+function extractText(nodes) {
+    if (!nodes?.length) return "";
+    return nodes.map((n)=>{
+        if (n.type === "text") return n.text ?? "";
+        if (n.type === "hardBreak") return " ";
+        return extractText(n.content);
+    }).join("");
+}
+function blockText(node) {
+    const raw = extractText(node.content).trim();
+    return raw.length > 120 ? raw.slice(0, 117) + "..." : raw;
+}
+function getId(node) {
+    const id = node.attrs?.id;
+    return typeof id === "string" && id.length > 0 ? id : null;
+}
+function requireDoc(doc) {
+    const d = doc;
+    if (!d || d.type !== "doc" || !Array.isArray(d.content)) {
+        throw new Error("Invalid doc: expected { type: 'doc', content: [...] }");
+    }
+    return d;
+}
+function requireBlockById(doc, id) {
+    const idx = doc.content.findIndex((n)=>getId(n) === id);
+    if (idx === -1) {
+        throw new Error(`Block id "${id}" not found in doc`);
+    }
+    return idx;
+}
+function newBlocksFromMd(markdown) {
+    const parsed = markdownToTiptap(markdown);
+    return parsed.content;
+}
+export function listBlocks(doc) {
+    const d = requireDoc(doc);
+    return d.content.map((node)=>({
+            id: getId(node) ?? "",
+            type: node.type,
+            text: blockText(node)
+        }));
+}
+export function appendBlocks(doc, markdown) {
+    const d = requireDoc(doc);
+    const added = newBlocksFromMd(markdown);
+    return {
+        type: "doc",
+        content: [
+            ...d.content,
+            ...added
+        ]
+    };
+}
+export function prependBlocks(doc, markdown) {
+    const d = requireDoc(doc);
+    const added = newBlocksFromMd(markdown);
+    return {
+        type: "doc",
+        content: [
+            ...added,
+            ...d.content
+        ]
+    };
+}
+export function insertBlocksAfter(doc, afterId, markdown) {
+    const d = requireDoc(doc);
+    const idx = requireBlockById(d, afterId);
+    const added = newBlocksFromMd(markdown);
+    const content = [
+        ...d.content.slice(0, idx + 1),
+        ...added,
+        ...d.content.slice(idx + 1)
+    ];
+    return {
+        type: "doc",
+        content
+    };
+}
+export function replaceBlock(doc, id, markdown) {
+    const d = requireDoc(doc);
+    const idx = requireBlockById(d, id);
+    const added = newBlocksFromMd(markdown);
+    const content = [
+        ...d.content.slice(0, idx),
+        ...added,
+        ...d.content.slice(idx + 1)
+    ];
+    return {
+        type: "doc",
+        content
+    };
+}
+export function deleteBlock(doc, id) {
+    const d = requireDoc(doc);
+    const idx = requireBlockById(d, id);
+    const content = [
+        ...d.content.slice(0, idx),
+        ...d.content.slice(idx + 1)
+    ];
+    return {
+        type: "doc",
+        content
+    };
+}