@heyramzi/ui 2.11.0 → 2.11.2

package/dist/components/picker/trigger.js

@@ -1,33 +1,51 @@
 import { tv } from "tailwind-variants";
+/**
+* The one look for a control that opens a picker, and for the plain values
+* that sit in the same column beside it.
+*/
+// WHY a recipe: a property row can be a menu trigger, a link or a plain
+// string. All three draw the same box, and only one is a button.
+// It replaced eight geometries in one sidebar: three heights, three radii, two
+// paddings, and a border on three rows out of eight.
+// Borderless at rest on purpose. A value that's set is a fact to read, so the
+// box shows only under the pointer and on focus.
 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
-    }
+	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: {
+		// Heights match `segmentedTrackClass`, so a strip and a picker line up.
+		// Padding is 6px leading, 10px trailing: an even 8px shunted icon rows right.
+		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"
+		},
+		/**
+		* Fill the row. Off by default: Linear's property rows sit at natural width
+		* (80px for "Assign"), so a set of rows reads as a set of chips.
+		*/
+		block: {
+			true: "flex w-full",
+			false: "w-fit"
+		},
+		/** No value yet: the label is a prompt, so it recedes until hovered. */
+		empty: {
+			true: "text-muted-foreground/70 hover:text-muted-foreground",
+			false: ""
+		},
+		/** A row that carries no action still needs the column's box. */
+		inert: {
+			true: "hover:bg-transparent cursor-default",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		size: "default",
+		block: false,
+		empty: false,
+		inert: false
+	}
 });

package/dist/components/picker/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/segmented/collapse.js

@@ -1,32 +1,43 @@
+/** How a segmented strip that outgrew its row decides what to keep. */
+// WHY not a scrollbar: a sideways scroll hid four of five tabs
+// behind a gesture nobody makes with a mouse. The tail becomes a menu instead.
+// WHY a count, not a measurement: the strip sits in a toolbar sized by its own
+// content, so measuring reads its own width back and never collapses.
+/**
+* The most objects a strip draws before its tail becomes a menu, the menu
+* counted as one of them. Two to six values is where a segmented control reads best.
+*/
 export const SEGMENT_MAX = 6;
+/**
+* Split items into the drawn ones and the menu's. The current item always stays visible.
+* @param max objects the row may draw, the menu counted as one
+*/
 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)
-    };
+	// Under three the row is the menu and a single segment beside it, which says
+	// less than the menu alone. Below that, and whenever everything fits, no split.
+	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)
+	};
 }
+/** `"none"` draws every segment: the row scrolls sideways instead of folding a tail into a menu. */
 export function resolveSegmentMax(max) {
-    return max === "none" ? Number.POSITIVE_INFINITY : max;
+	return max === "none" ? Number.POSITIVE_INFINITY : max;
 }

package/dist/components/segmented/index.js

@@ -1,3 +1,11 @@
+/**
+* The segmented control. Three components draw it, one per ARIA shape, and they
+* share the track (`segmented.ts`) and segment body (`segment.svelte`).
+*/
+// WHY no low-level `Tabs.Root`/`List`/`Trigger` here: that's `shadcn/tabs`. This
+// is the data-driven layer on top, and `AnimatedTabs` is the way in.
+// Past `SEGMENT_MAX` objects the tail collapses into a menu: `collapse.ts`
+// decides, `segmented-overflow.svelte` draws it. No call site opts in.
 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";

package/dist/components/segmented/segmented.js

@@ -1,50 +1,75 @@
 import { tv } from "tailwind-variants";
 import { pageGutterClass } from "../../lib/layout.js";
+/**
+* The one look for a segmented control: the track and trigger here, what a
+* segment says in `segment.svelte`.
+*/
+// WHY a recipe, not one component: tabs are a `tablist`, filters a `group` of
+// `aria-pressed` toggles, page links a `nav`. Only the ARIA shape may differ.
+// The look used to drift three ways, one with an at-rest shadow. All three read from here now.
 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
-    }
+	// WHY the height lives on the track: it carries the inset, so an `h-7` trigger
+	// drew 30px beside a 28px button. One toolbar row came out at five heights.
+	// WHY no size variant: `sm` drew 24px, and every tab control must share one height.
+	base: "h-7 any-pointer-coarse:h-11 shrink-0 items-stretch",
+	variants: {
+		// `pill`: a bordered well with a travelling highlight. `underline`: bare
+		// labels over one hairline, the active one marked by a rule that travels.
+		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 the row rather than sit at its natural width. For a narrow rail.
+		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
-    }
+	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: {
+		// The pill sits concentric in the track's 2px inset; the underline has no well, so
+		// no padding, and its rule is as wide as the label.
+		variant: {
+			pill: "rounded-[calc(var(--radius-lg)-3px)] px-2.5 any-pointer-coarse:px-3.5",
+			underline: "rounded-sm px-0"
+		},
+		// WHY `min-w-fit flex-auto`, not equal fractions: fractions cut "Approved" to
+		// "Appro…" in a 280px rail. Each segment claims its label and shares the slack.
+		fill: {
+			true: "min-w-fit flex-auto",
+			false: ""
+		},
+		active: {
+			true: "text-foreground",
+			false: ""
+		}
+	},
+	defaultVariants: {
+		variant: "pill",
+		fill: false,
+		active: false
+	}
 });
+/**
+* The row a segmented strip sits in, and the one recipe for a navigation row
+* under the app header. Written per caller it produced two different left
+* edges.
+*/
+// WHY no bottom hairline: with a section strip and a page toolbar stacked it
+// drew two rules for one boundary. The gap is the boundary.
 export const segmentedRowClass = `flex shrink-0 flex-wrap items-center gap-x-4 gap-y-2 py-2 ${pageGutterClass}`;
+/** The active style, for a strip whose state lives in a `data-active` attribute. */
 export const segmentedActiveClass = "data-active:text-foreground";

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

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

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

@@ -0,0 +1 @@
+export {};

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

@@ -1,93 +1,105 @@
+// The tag list's rules, with no DOM. Options are the values already used, so a spelling gets picked,
+// never retyped, and a new tag is a deliberate act.
+/** Splits typed or pasted text on commas and newlines, trimmed, empties dropped. */
 export function splitTags(text) {
-    return text.split(/[,\n]/).map((part)=>part.trim()).filter(Boolean);
+	return text.split(/[,\n]/).map((part) => part.trim()).filter(Boolean);
 }
+/** Splits typed or pasted text for a free field: commas, semicolons, newlines and spaces all separate. */
 export function splitTyped(text) {
-    return text.split(/[\s,;]+/).filter(Boolean);
+	return text.split(/[\s,;]+/).filter(Boolean);
 }
+/** What two spellings are compared by: no case, no spaces, no marks ("Share Point" is "SharePoint"). */
 export function fold(text) {
-    return text.normalize("NFD").replace(/\p{M}/gu, "").toLowerCase().replace(/[\s._-]+/g, "");
+	return text.normalize("NFD").replace(/\p{M}/gu, "").toLowerCase().replace(/[\s._-]+/g, "");
 }
-const same = (a, b)=>fold(a) === fold(b);
+const same = (a, b) => fold(a) === fold(b);
+/** Edits (insert, delete, replace, swap of neighbours) between two strings, stopping past `limit`. */
 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];
+	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];
 }
+/** How close `query` is to `option`: 0 the same, 1 a prefix, 2 contained, 3 a typo away, else null. */
 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;
+	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;
+	// One edit for a short word, two from 7 letters, and not at all for 3 or fewer.
+	const limit = q.length >= 7 ? 2 : q.length >= 4 ? 1 : 0;
+	return limit > 0 && editDistance(o, q, limit) <= limit ? 3 : null;
 }
+/**
+* The options to offer for what's typed, closest first, from exact match down to a typo away.
+* Options already on the field are left out.
+*/
 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);
+	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);
 }
+/** The existing option that is `input` apart from case, spacing and marks, or undefined. */
 export function findOption(options, input) {
-    return options.find((option)=>same(option, input));
+	return options.find((option) => same(option, input));
 }
+/**
+* Whether typing `query` may offer "Create": never for a word an option or tag already is. A
+* typo's close option shows above it, never instead.
+*/
 export function canCreate(options, tags, query, allowCreate = true) {
-    return allowCreate && query.trim() !== "" && ![
-        ...options,
-        ...tags
-    ].some((held)=>same(held, query));
+	return allowCreate && query.trim() !== "" && ![...options, ...tags].some((held) => same(held, query));
 }
+/**
+* The list after adding the option `name`, in the option's spelling. A repeat returns the same
+* array, so a caller can skip the save.
+*/
 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
-    ];
+	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];
 }
+/** The list without `tag`, whatever its casing. */
 export function removeTag(tags, tag) {
-    return tags.filter((held)=>!same(held, tag));
+	return tags.filter((held) => !same(held, tag));
 }
+/**
+* Collapses spellings of one word to the first, and takes an option's spelling when one matches.
+* For a list that was stored before the options existed.
+*/
 export function cleanTags(tags, options = []) {
-    return tags.reduce((out, tag)=>[
-            ...addTag(out, tag, options)
-        ], []);
+	return tags.reduce((out, tag) => [...addTag(out, tag, options)], []);
 }
+/**
+* The distinct values across many lists, one spelling each: the most used wins, then the first
+* seen. This is what an "existing values" field offers as its 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));
+	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

@@ -1,3 +1,7 @@
+/**
+* The one light and dark system, wrapping mode-watcher. Mount `ThemeProvider` once in the root
+* layout, or the no-flash script never runs.
+*/
 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

@@ -1,3 +1,7 @@
+/**
+* One toolbar row for a list page. Wide, it shows search, tabs and a view switch inline. Narrow,
+* each of those folds into a menu and the row never wraps.
+*/
 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

@@ -1,4 +1,17 @@
 import { cn } from "../../lib/utils.js";
+// The trigger class for every toolbar control. Coarse pointers get a taller
+// box at the same type size, since the chip is too small for a thumb.
+// One fixed height, matching the `sm` button and the segmented track. A second
+// size put a 24px filter beside 28px controls on the calendar (14 Oct 2026).
 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);
+	return cn(
+		// The outline button's edge: a real border plus the resting shadow. A `ring-1` hairline
+		// shares box-shadow with `shadow-btn` and drew a broken edge beside Display (26 Oct 2026).
+		"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 is a selected state, so it may tint; the tint reads off the foreground and
+		// shows on the canvas, where bg-muted vanished.
+		active ? "bg-foreground/6 text-foreground" : "bg-card text-muted-foreground hover:bg-foreground/3 hover:text-foreground",
+		className
+	);
 }

package/dist/editor/anchors.js

@@ -1,17 +1,21 @@
+/** Heading anchors: one slug per heading, unique within a document. Pure. */
+/** Lowercase, words joined by `-`, accents dropped. An empty result is `section`. */
 export function slugify(text) {
-    const slug = text.normalize("NFKD").replace(/[̀-ͯ]/g, "").toLowerCase().replace(/[^\p{L}\p{N}]+/gu, "-").replace(/^-+|-+$/g, "");
-    return slug || "section";
+	const slug = text.normalize("NFKD").replace(/[̀-ͯ]/g, "").toLowerCase().replace(/[^\p{L}\p{N}]+/gu, "-").replace(/^-+|-+$/g, "");
+	return slug || "section";
 }
+/** One unique anchor per label, in order: a repeat becomes `name-2`, `name-3`. */
 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;
-    });
+	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}`;
+		// A heading literally called "Setup 2" must not steal the second "Setup".
+		while (taken.has(id)) id = `${base}-${++count}`;
+		seen.set(base, count);
+		taken.add(id);
+		return id;
+	});
 }