@dorsk/tsumikit 0.57.0 → 0.58.1

package/dist/components/molecules/combobox-keyboard.d.ts

@@ -0,0 +1,100 @@
+/**
+ * @typedef {{ type: 'move', index: number } | { type: 'select' } | { type: 'close' }} ComboboxAction
+ * @typedef {{ start: number, char: string, query: string }} ComboboxTrigger
+ */
+/**
+ * Resolve a navigation key to the option it highlights. Arrows step by one and
+ * wrap when `loop` is set; Home/End jump to the ends only when `homeEnd` is set,
+ * since in a text field they move the caret by default. Unhandled keys return
+ * `undefined` so the field keeps its native behaviour.
+ *
+ * @param {number} current
+ * @param {number} count
+ * @param {string} key
+ * @param {{ loop?: boolean, homeEnd?: boolean }} [opts]
+ * @returns {number | undefined}
+ */
+export function nextComboboxIndex(current: number, count: number, key: string, { loop, homeEnd }?: {
+    loop?: boolean;
+    homeEnd?: boolean;
+}): number | undefined;
+/**
+ * Map a keydown on the wrapped field to what the open listbox does with it.
+ * Nothing is consumed while closed. Escape always closes. Enter/Tab select the
+ * highlighted option only when one exists and no modifier is held, so
+ * Shift+Enter (newline), Shift+Tab (focus back) and Mod+Enter (submit) pass
+ * through. `undefined` means the field keeps the key.
+ *
+ * @param {{ key: string, shiftKey?: boolean, ctrlKey?: boolean, metaKey?: boolean, altKey?: boolean }} e
+ * @param {{ open: boolean, count: number, index: number, loop?: boolean, homeEnd?: boolean, selectOn?: readonly string[] }} state
+ * @returns {ComboboxAction | undefined}
+ */
+export function comboboxAction(e: {
+    key: string;
+    shiftKey?: boolean;
+    ctrlKey?: boolean;
+    metaKey?: boolean;
+    altKey?: boolean;
+}, { open, count, index, loop, homeEnd, selectOn }: {
+    open: boolean;
+    count: number;
+    index: number;
+    loop?: boolean;
+    homeEnd?: boolean;
+    selectOn?: readonly string[];
+}): ComboboxAction | undefined;
+/**
+ * Find a `@query`-style token ending at the caret. The trigger char must start
+ * the text or follow whitespace/punctuation (so `foo@bar` and `##` are not
+ * triggers), and the query may not contain whitespace.
+ *
+ * @param {string} text
+ * @param {number} caret
+ * @param {string | readonly string[]} [chars]
+ * @returns {ComboboxTrigger | null}
+ */
+export function findTrigger(text: string, caret: number, chars?: string | readonly string[]): ComboboxTrigger | null;
+/**
+ * Replace the trigger token under the caret with `replacement` (plus a trailing
+ * space unless `suffix` says otherwise) and report where the caret lands.
+ *
+ * @param {string} text
+ * @param {number} caret
+ * @param {ComboboxTrigger} trigger
+ * @param {string} replacement
+ * @param {string} [suffix]
+ * @returns {{ text: string, caret: number }}
+ */
+export function applyTrigger(text: string, caret: number, trigger: ComboboxTrigger, replacement: string, suffix?: string): {
+    text: string;
+    caret: number;
+};
+/**
+ * Viewport rect of the caret in a text field, measured through an off-screen
+ * mirror of the field's text and typography (fields expose no caret geometry).
+ * Falls back to the field's own rect when the document cannot be measured.
+ *
+ * @param {HTMLInputElement | HTMLTextAreaElement} el
+ * @returns {{ top: number, left: number, bottom: number, right: number, width: number, height: number }}
+ */
+export function caretRect(el: HTMLInputElement | HTMLTextAreaElement): {
+    top: number;
+    left: number;
+    bottom: number;
+    right: number;
+    width: number;
+    height: number;
+};
+export type ComboboxAction = {
+    type: "move";
+    index: number;
+} | {
+    type: "select";
+} | {
+    type: "close";
+};
+export type ComboboxTrigger = {
+    start: number;
+    char: string;
+    query: string;
+};

package/dist/components/molecules/combobox-keyboard.js

@@ -0,0 +1,170 @@
+/**
+ * @typedef {{ type: 'move', index: number } | { type: 'select' } | { type: 'close' }} ComboboxAction
+ * @typedef {{ start: number, char: string, query: string }} ComboboxTrigger
+ */
+
+/**
+ * Resolve a navigation key to the option it highlights. Arrows step by one and
+ * wrap when `loop` is set; Home/End jump to the ends only when `homeEnd` is set,
+ * since in a text field they move the caret by default. Unhandled keys return
+ * `undefined` so the field keeps its native behaviour.
+ *
+ * @param {number} current
+ * @param {number} count
+ * @param {string} key
+ * @param {{ loop?: boolean, homeEnd?: boolean }} [opts]
+ * @returns {number | undefined}
+ */
+export function nextComboboxIndex(current, count, key, { loop = true, homeEnd = false } = {}) {
+	if (count <= 0) return undefined;
+	const last = count - 1;
+	const cur = Number.isFinite(current) ? Math.min(Math.max(Math.trunc(current), 0), last) : 0;
+	if (key === 'ArrowDown') return cur >= last ? (loop ? 0 : last) : cur + 1;
+	if (key === 'ArrowUp') return cur <= 0 ? (loop ? last : 0) : cur - 1;
+	if (homeEnd && key === 'Home') return 0;
+	if (homeEnd && key === 'End') return last;
+	return undefined;
+}
+
+/**
+ * Map a keydown on the wrapped field to what the open listbox does with it.
+ * Nothing is consumed while closed. Escape always closes. Enter/Tab select the
+ * highlighted option only when one exists and no modifier is held, so
+ * Shift+Enter (newline), Shift+Tab (focus back) and Mod+Enter (submit) pass
+ * through. `undefined` means the field keeps the key.
+ *
+ * @param {{ key: string, shiftKey?: boolean, ctrlKey?: boolean, metaKey?: boolean, altKey?: boolean }} e
+ * @param {{ open: boolean, count: number, index: number, loop?: boolean, homeEnd?: boolean, selectOn?: readonly string[] }} state
+ * @returns {ComboboxAction | undefined}
+ */
+export function comboboxAction(
+	e,
+	{ open, count, index, loop, homeEnd, selectOn = ['Enter', 'Tab'] },
+) {
+	if (!open) return undefined;
+	if (e.key === 'Escape') return { type: 'close' };
+	if (e.shiftKey || e.ctrlKey || e.metaKey || e.altKey) return undefined;
+	if (selectOn.includes(e.key)) return count > 0 ? { type: 'select' } : undefined;
+	const next = nextComboboxIndex(index, count, e.key, { loop, homeEnd });
+	return next === undefined ? undefined : { type: 'move', index: next };
+}
+
+/**
+ * Find a `@query`-style token ending at the caret. The trigger char must start
+ * the text or follow whitespace/punctuation (so `foo@bar` and `##` are not
+ * triggers), and the query may not contain whitespace.
+ *
+ * @param {string} text
+ * @param {number} caret
+ * @param {string | readonly string[]} [chars]
+ * @returns {ComboboxTrigger | null}
+ */
+export function findTrigger(text, caret, chars = '@') {
+	const before = text.slice(0, Math.max(0, caret));
+	const set = typeof chars === 'string' ? [...chars] : chars;
+	let best = null;
+	for (const char of set) {
+		const at = before.lastIndexOf(char);
+		if (at < 0 || (best && at < best.start)) continue;
+		const query = before.slice(at + 1);
+		if (/\s/.test(query)) continue;
+		if (at > 0 && /[\p{L}\p{N}_]/u.test(before[at - 1])) continue;
+		if (at > 0 && set.includes(before[at - 1])) continue;
+		best = { start: at, char, query };
+	}
+	return best;
+}
+
+/**
+ * Replace the trigger token under the caret with `replacement` (plus a trailing
+ * space unless `suffix` says otherwise) and report where the caret lands.
+ *
+ * @param {string} text
+ * @param {number} caret
+ * @param {ComboboxTrigger} trigger
+ * @param {string} replacement
+ * @param {string} [suffix]
+ * @returns {{ text: string, caret: number }}
+ */
+export function applyTrigger(text, caret, trigger, replacement, suffix = ' ') {
+	const token = replacement + suffix;
+	return {
+		text: text.slice(0, trigger.start) + token + text.slice(caret),
+		caret: trigger.start + token.length,
+	};
+}
+
+const MIRROR_PROPS = [
+	'box-sizing',
+	'width',
+	'height',
+	'overflow-x',
+	'overflow-y',
+	'border-top-width',
+	'border-right-width',
+	'border-bottom-width',
+	'border-left-width',
+	'padding-top',
+	'padding-right',
+	'padding-bottom',
+	'padding-left',
+	'font-style',
+	'font-variant',
+	'font-weight',
+	'font-stretch',
+	'font-size',
+	'font-size-adjust',
+	'line-height',
+	'font-family',
+	'text-align',
+	'text-transform',
+	'text-indent',
+	'text-decoration',
+	'letter-spacing',
+	'word-spacing',
+	'tab-size',
+	'white-space',
+	'word-break',
+	'overflow-wrap',
+];
+
+/**
+ * Viewport rect of the caret in a text field, measured through an off-screen
+ * mirror of the field's text and typography (fields expose no caret geometry).
+ * Falls back to the field's own rect when the document cannot be measured.
+ *
+ * @param {HTMLInputElement | HTMLTextAreaElement} el
+ * @returns {{ top: number, left: number, bottom: number, right: number, width: number, height: number }}
+ */
+export function caretRect(el) {
+	const rect = el.getBoundingClientRect();
+	const doc = el.ownerDocument;
+	const view = doc.defaultView;
+	if (!view || !doc.body) return rect;
+	const caret = el.selectionEnd ?? el.value.length;
+	const style = view.getComputedStyle(el);
+	const mirror = doc.createElement('div');
+	for (const prop of MIRROR_PROPS) mirror.style.setProperty(prop, style.getPropertyValue(prop));
+	mirror.style.position = 'fixed';
+	mirror.style.top = '0';
+	mirror.style.left = '-9999px';
+	mirror.style.visibility = 'hidden';
+	mirror.style.pointerEvents = 'none';
+	if (el instanceof view.HTMLInputElement) mirror.style.whiteSpace = 'pre';
+	else {
+		mirror.style.whiteSpace = 'pre-wrap';
+		mirror.style.overflowY = 'hidden';
+	}
+	mirror.textContent = el.value.slice(0, caret);
+	const marker = doc.createElement('span');
+	marker.textContent = el.value.slice(caret) || '.';
+	mirror.appendChild(marker);
+	doc.body.appendChild(mirror);
+	const m = mirror.getBoundingClientRect();
+	const s = marker.getBoundingClientRect();
+	mirror.remove();
+	const lineHeight = Number.parseFloat(style.lineHeight) || s.height || rect.height;
+	const top = rect.top + (s.top - m.top) - el.scrollTop;
+	const left = rect.left + (s.left - m.left) - el.scrollLeft;
+	return { top, left, width: 0, height: lineHeight, bottom: top + lineHeight, right: left };
+}

package/dist/components/molecules/menu-item.d.ts

@@ -0,0 +1,11 @@
+export interface MenuItemGlyphs {
+    leading: 'icon' | 'check' | 'none';
+    trailingCheck: boolean;
+}
+export interface MenuItemShape {
+    icon?: string;
+    pressed?: boolean;
+    keepOpen?: boolean;
+}
+export declare function menuItemGlyphs(item: MenuItemShape): MenuItemGlyphs;
+export declare function menuItemCloses(item: MenuItemShape, closeOnSelect: boolean): boolean;

package/dist/components/molecules/menu-item.js

@@ -0,0 +1,9 @@
+export function menuItemGlyphs(item) {
+    const checkable = item.pressed !== undefined;
+    if (item.icon)
+        return { leading: 'icon', trailingCheck: checkable };
+    return { leading: checkable ? 'check' : 'none', trailingCheck: false };
+}
+export function menuItemCloses(item, closeOnSelect) {
+    return item.keepOpen === undefined ? closeOnSelect : !item.keepOpen;
+}

package/dist/count.d.ts

@@ -0,0 +1,2 @@
+export declare function hasCount(count: number | undefined | null): count is number;
+export declare function formatCount(count: number, max?: number): string;

package/dist/count.js

@@ -0,0 +1,7 @@
+export function hasCount(count) {
+    return typeof count === 'number' && Number.isFinite(count) && count > 0;
+}
+export function formatCount(count, max = 99) {
+    const n = Math.floor(count);
+    return n > max ? `${max}+` : String(n);
+}

package/dist/floating.d.ts

@@ -2,9 +2,13 @@ export type Side = 'top' | 'bottom' | 'left' | 'right';
 export type Align = 'start' | 'center' | 'end';
 /** `${side}-${align}`, e.g. `bottom-start` (Popover) or `left-center` (Tooltip). */
 export type Placement = `${Side}-${Align}`;
+/** Viewport-relative box to float against: an element's rect or a virtual one (a text caret). */
+export type AnchorRect = Pick<DOMRect, 'top' | 'left' | 'bottom' | 'right' | 'width' | 'height'>;
 /**
  * Position `floating` next to `trigger` and write the result to its inline
  * `top`/`left` (expects `floating` to be `position: fixed`). Call on open and on
  * scroll/resize while open.
  */
 export declare function place(trigger: HTMLElement, floating: HTMLElement, placement?: Placement, gap?: number): void;
+/** `place` against a viewport rect instead of an element. */
+export declare function placeAt(t: AnchorRect, floating: HTMLElement, placement?: Placement, gap?: number): void;

package/dist/floating.js

@@ -18,7 +18,10 @@ function alignPos(align, start, size, fSize) {
  * scroll/resize while open.
  */
 export function place(trigger, floating, placement = 'bottom-start', gap = 6) {
-    const t = trigger.getBoundingClientRect();
+    placeAt(trigger.getBoundingClientRect(), floating, placement, gap);
+}
+/** `place` against a viewport rect instead of an element. */
+export function placeAt(t, floating, placement = 'bottom-start', gap = 6) {
     const f = floating.getBoundingClientRect();
     const vw = document.documentElement.clientWidth;
     const vh = document.documentElement.clientHeight;

package/dist/index.d.ts

@@ -1,8 +1,10 @@
 export type { AnchorAttributes } from './anchor';
 export { artworkGradient, artworkHue, initials } from './artwork';
 export { autoresize } from './autoresize';
+export { avatarHue, avatarInitial } from './avatar';
 export { copyToClipboard } from './clipboard';
 export { default as Artwork } from './components/atoms/Artwork.svelte';
+export { default as Avatar } from './components/atoms/Avatar.svelte';
 export { default as Badge } from './components/atoms/Badge.svelte';
 export { default as Button } from './components/atoms/Button.svelte';
 export { default as Card } from './components/atoms/Card.svelte';
@@ -24,6 +26,7 @@ export { default as Select } from './components/atoms/Select.svelte';
 export { default as Skeleton } from './components/atoms/Skeleton.svelte';
 export { default as Slider } from './components/atoms/Slider.svelte';
 export { default as Spinner } from './components/atoms/Spinner.svelte';
+export { default as Swatch } from './components/atoms/Swatch.svelte';
 export { default as Switch } from './components/atoms/Switch.svelte';
 export { default as Text } from './components/atoms/Text.svelte';
 export { default as Textarea } from './components/atoms/Textarea.svelte';
@@ -47,9 +50,12 @@ export { default as CapBar } from './components/molecules/CapBar.svelte';
 export { default as Carousel } from './components/molecules/Carousel.svelte';
 export { default as ChatBubble } from './components/molecules/ChatBubble.svelte';
 export { default as CodeBlock } from './components/molecules/CodeBlock.svelte';
+export { default as Combobox } from './components/molecules/Combobox.svelte';
 export { default as Composer } from './components/molecules/Composer.svelte';
 export { default as ConfirmModal } from './components/molecules/ConfirmModal.svelte';
 export { default as CopyButton } from './components/molecules/CopyButton.svelte';
+export { applyTrigger, comboboxAction, findTrigger, nextComboboxIndex, } from './components/molecules/combobox-keyboard.js';
+export { type DisclosureChevron, type DisclosureHeaderContext, default as Disclosure, } from './components/molecules/Disclosure.svelte';
 export { default as Drawer } from './components/molecules/Drawer.svelte';
 export { default as Dropzone } from './components/molecules/Dropzone.svelte';
 export { default as EmojiPicker } from './components/molecules/EmojiPicker.svelte';
@@ -61,6 +67,7 @@ export { default as FilterInput, type FilterInputContext, } from './components/m
 export { default as FontScalePicker } from './components/molecules/FontScalePicker.svelte';
 export { type DiffStats, default as GitRef, type PrState, type PullRequest, } from './components/molecules/GitRef.svelte';
 export { default as IconButton } from './components/molecules/IconButton.svelte';
+export { default as InputGroup } from './components/molecules/InputGroup.svelte';
 export { default as KeyValue, type KeyValueRow, type KeyValueTone, } from './components/molecules/KeyValue.svelte';
 export { default as LoadMore } from './components/molecules/LoadMore.svelte';
 export { default as Menu, type MenuItem } from './components/molecules/Menu.svelte';
@@ -75,6 +82,7 @@ export { default as RadioGroup, type RadioOption, } from './components/molecules
 export { default as SectionHeader } from './components/molecules/SectionHeader.svelte';
 export { default as SegmentedControl, type SegmentOption, } from './components/molecules/SegmentedControl.svelte';
 export { default as SelectButton } from './components/molecules/SelectButton.svelte';
+export { default as SplitButton } from './components/molecules/SplitButton.svelte';
 export { default as Tabs, type TabItem } from './components/molecules/Tabs.svelte';
 export { default as ThemePicker } from './components/molecules/ThemePicker.svelte';
 export { default as Timestamp } from './components/molecules/Timestamp.svelte';
@@ -85,6 +93,7 @@ export { default as Truncate } from './components/molecules/Truncate.svelte';
 export { default as WorkingDir } from './components/molecules/WorkingDir.svelte';
 export { type Column, default as DataTable, type RowTone, } from './components/organisms/DataTable.svelte';
 export { default as FilterSearchBar } from './components/organisms/FilterSearchBar.svelte';
+export { formatCount, hasCount } from './count';
 export { EMOJI_GROUPS, type EmojiEntry, type EmojiGroup, searchEmoji } from './emoji';
 export { FIELD_KEY, type FieldContext, getFieldContext, setFieldContext, warnUnlabelled, } from './field-context';
 export * as filterQuery from './query';

package/dist/index.js

@@ -6,8 +6,10 @@
 // then use the components below.
 export { artworkGradient, artworkHue, initials } from './artwork';
 export { autoresize } from './autoresize';
+export { avatarHue, avatarInitial } from './avatar';
 export { copyToClipboard } from './clipboard';
 export { default as Artwork } from './components/atoms/Artwork.svelte';
+export { default as Avatar } from './components/atoms/Avatar.svelte';
 export { default as Badge } from './components/atoms/Badge.svelte';
 export { default as Button } from './components/atoms/Button.svelte';
 export { default as Card } from './components/atoms/Card.svelte';
@@ -27,6 +29,7 @@ export { default as Select } from './components/atoms/Select.svelte';
 export { default as Skeleton } from './components/atoms/Skeleton.svelte';
 export { default as Slider } from './components/atoms/Slider.svelte';
 export { default as Spinner } from './components/atoms/Spinner.svelte';
+export { default as Swatch } from './components/atoms/Swatch.svelte';
 export { default as Switch } from './components/atoms/Switch.svelte';
 // ---- atoms ----
 export { default as Text } from './components/atoms/Text.svelte';
@@ -52,9 +55,12 @@ export { default as CapBar } from './components/molecules/CapBar.svelte';
 export { default as Carousel } from './components/molecules/Carousel.svelte';
 export { default as ChatBubble } from './components/molecules/ChatBubble.svelte';
 export { default as CodeBlock } from './components/molecules/CodeBlock.svelte';
+export { default as Combobox } from './components/molecules/Combobox.svelte';
 export { default as Composer } from './components/molecules/Composer.svelte';
 export { default as ConfirmModal } from './components/molecules/ConfirmModal.svelte';
 export { default as CopyButton } from './components/molecules/CopyButton.svelte';
+export { applyTrigger, comboboxAction, findTrigger, nextComboboxIndex, } from './components/molecules/combobox-keyboard.js';
+export { default as Disclosure, } from './components/molecules/Disclosure.svelte';
 export { default as Drawer } from './components/molecules/Drawer.svelte';
 export { default as Dropzone } from './components/molecules/Dropzone.svelte';
 export { default as EmojiPicker } from './components/molecules/EmojiPicker.svelte';
@@ -67,6 +73,7 @@ export { default as FilterInput, } from './components/molecules/FilterInput.svel
 export { default as FontScalePicker } from './components/molecules/FontScalePicker.svelte';
 export { default as GitRef, } from './components/molecules/GitRef.svelte';
 export { default as IconButton } from './components/molecules/IconButton.svelte';
+export { default as InputGroup } from './components/molecules/InputGroup.svelte';
 export { default as KeyValue, } from './components/molecules/KeyValue.svelte';
 export { default as LoadMore } from './components/molecules/LoadMore.svelte';
 export { default as Menu } from './components/molecules/Menu.svelte';
@@ -83,6 +90,7 @@ export { default as RadioGroup, } from './components/molecules/RadioGroup.svelte
 export { default as SectionHeader } from './components/molecules/SectionHeader.svelte';
 export { default as SegmentedControl, } from './components/molecules/SegmentedControl.svelte';
 export { default as SelectButton } from './components/molecules/SelectButton.svelte';
+export { default as SplitButton } from './components/molecules/SplitButton.svelte';
 export { default as Tabs } from './components/molecules/Tabs.svelte';
 export { default as ThemePicker } from './components/molecules/ThemePicker.svelte';
 export { default as Timestamp } from './components/molecules/Timestamp.svelte';
@@ -94,6 +102,7 @@ export { default as WorkingDir } from './components/molecules/WorkingDir.svelte'
 // ---- organisms ----
 export { default as DataTable, } from './components/organisms/DataTable.svelte';
 export { default as FilterSearchBar } from './components/organisms/FilterSearchBar.svelte';
+export { formatCount, hasCount } from './count';
 export { EMOJI_GROUPS, searchEmoji } from './emoji';
 export { FIELD_KEY, getFieldContext, setFieldContext, warnUnlabelled, } from './field-context';
 // ---- query core (headless: schema / parser / AST / suggest / compilers) ----

package/dist/input-group-context.d.ts

@@ -0,0 +1,10 @@
+import type { ControlSize } from './size';
+export declare const INPUT_GROUP_KEY: unique symbol;
+/** Read through getters so the field tracks the group's props reactively. */
+export type InputGroupContext = {
+    readonly size: ControlSize;
+    readonly disabled: boolean;
+    readonly invalid: boolean;
+};
+export declare function setInputGroupContext(ctx: InputGroupContext): InputGroupContext;
+export declare function getInputGroupContext(): InputGroupContext | undefined;

package/dist/input-group-context.js

@@ -0,0 +1,8 @@
+import { getContext, setContext } from 'svelte';
+export const INPUT_GROUP_KEY = Symbol('tsu-input-group');
+export function setInputGroupContext(ctx) {
+    return setContext(INPUT_GROUP_KEY, ctx);
+}
+export function getInputGroupContext() {
+    return getContext(INPUT_GROUP_KEY);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.57.0",
+  "version": "0.58.1",
   "description": "Minimal, dependency-free Svelte 5 + pure-CSS UI kit. Token-driven atoms, molecules & layouts with theming out of the box.",
   "type": "module",
   "license": "MIT",