@dorsk/tsumikit 0.67.1 → 0.68.1

package/dist/components/molecules/SortableList.svelte.d.ts

@@ -0,0 +1,116 @@
+export interface SortableListMove {
+    key: string;
+    from: number;
+    to: number;
+}
+export interface SortableListRowContext {
+    index: number;
+    grabbed: boolean;
+    selected: boolean;
+}
+/** Accessible strings. `pos` is 1-based. */
+export interface SortableListMessages {
+    instructions: string;
+    reorder: (name: string) => string;
+    moveUp: (name: string) => string;
+    moveDown: (name: string) => string;
+    grabbed: (name: string, pos: number, total: number) => string;
+    moved: (name: string, pos: number, total: number) => string;
+    dropped: (name: string, pos: number, total: number) => string;
+    cancelled: (name: string, pos: number, total: number) => string;
+}
+export declare const SORTABLE_LIST_MESSAGES: SortableListMessages;
+/**
+     * Reorderable list. The consumer owns the order: `onreorder` reports the new
+     * key list, the list shows it until `items` changes or `revertAfter` ms pass.
+     * Drag runs on Pointer Events (touch included); the grip is also a keyboard
+     * grab button and the arrows move one step.
+     */
+import { type Snippet } from 'svelte';
+import type { HTMLAttributes } from 'svelte/elements';
+declare function $$render<T>(): {
+    props: Omit<HTMLAttributes<HTMLDivElement>, keyof {
+        items: T[];
+        key: (item: T) => string;
+        /** Row content; the kit renders the grip, ordinal and arrows around it. */
+        row: Snippet<[T, SortableListRowContext]>;
+        /** Interactive row extras (go, skip), kept outside the selectable body. */
+        trailing?: Snippet<[T, SortableListRowContext]>;
+        /** Fires on drop or an arrow press with the full new key order. */
+        onreorder?: (keys: string[], move: SortableListMove) => void;
+        /** Veto a target index for a key. */
+        canMove?: (key: string, to: number) => boolean;
+        /** A locked row has no grip and disabled arrows. */
+        locked?: (item: T) => boolean;
+        /** Accessible row name used in labels and announcements. Defaults to the key. */
+        name?: (item: T) => string;
+        arrows?: boolean;
+        numbered?: boolean;
+        selected?: string;
+        onselect?: (key: string) => void;
+        /** Render the row body as a select button. Defaults to on when `onselect` or `selected` is given. */
+        selectable?: boolean;
+        /** `row` drags from anywhere on the row; touch then needs a 250 ms long-press. */
+        handle?: "grip" | "row";
+        size?: "sm" | "md";
+        label: string;
+        messages?: Partial<SortableListMessages>;
+        as?: "ol" | "ul";
+        /** Ms the optimistic order is kept when `items` is not updated. */
+        revertAfter?: number;
+        class?: string;
+        style?: string;
+    }> & {
+        items: T[];
+        key: (item: T) => string;
+        /** Row content; the kit renders the grip, ordinal and arrows around it. */
+        row: Snippet<[T, SortableListRowContext]>;
+        /** Interactive row extras (go, skip), kept outside the selectable body. */
+        trailing?: Snippet<[T, SortableListRowContext]>;
+        /** Fires on drop or an arrow press with the full new key order. */
+        onreorder?: (keys: string[], move: SortableListMove) => void;
+        /** Veto a target index for a key. */
+        canMove?: (key: string, to: number) => boolean;
+        /** A locked row has no grip and disabled arrows. */
+        locked?: (item: T) => boolean;
+        /** Accessible row name used in labels and announcements. Defaults to the key. */
+        name?: (item: T) => string;
+        arrows?: boolean;
+        numbered?: boolean;
+        selected?: string;
+        onselect?: (key: string) => void;
+        /** Render the row body as a select button. Defaults to on when `onselect` or `selected` is given. */
+        selectable?: boolean;
+        /** `row` drags from anywhere on the row; touch then needs a 250 ms long-press. */
+        handle?: "grip" | "row";
+        size?: "sm" | "md";
+        label: string;
+        messages?: Partial<SortableListMessages>;
+        as?: "ol" | "ul";
+        /** Ms the optimistic order is kept when `items` is not updated. */
+        revertAfter?: number;
+        class?: string;
+        style?: string;
+    };
+    exports: {};
+    bindings: "selected";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "selected";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const SortableList: $$IsomorphicComponent;
+type SortableList<T> = InstanceType<typeof SortableList<T>>;
+export default SortableList;

package/dist/components/molecules/segmented-control-count.d.ts

@@ -0,0 +1,2 @@
+/** @param {number | string} count */
+export function formatSegmentCount(count: number | string): string;

package/dist/components/molecules/segmented-control-count.js

@@ -0,0 +1,6 @@
+const countFormat = new Intl.NumberFormat('en-US');
+
+/** @param {number | string} count */
+export function formatSegmentCount(count) {
+	return typeof count === 'number' ? countFormat.format(count) : count;
+}

package/dist/components/molecules/sortable-list-order.d.ts

@@ -0,0 +1,68 @@
+/**
+ * Move the entry at `from` to `to`, returning a new array.
+ *
+ * @template T
+ * @param {T[]} list
+ * @param {number} from
+ * @param {number} to
+ * @returns {T[]}
+ */
+export function moveItem<T>(list: T[], from: number, to: number): T[];
+/**
+ * True when both key lists hold the same keys, in any order.
+ *
+ * @param {string[]} a
+ * @param {string[]} b
+ */
+export function sameKeys(a: string[], b: string[]): boolean;
+/**
+ * The nearest index from `from` in direction `dir` that `allowed` accepts,
+ * skipping vetoed slots. `undefined` when nothing in that direction is allowed.
+ *
+ * @param {number} from
+ * @param {number} count
+ * @param {1 | -1} dir
+ * @param {(to: number) => boolean} allowed
+ * @returns {number | undefined}
+ */
+export function stepTarget(from: number, count: number, dir: 1 | -1, allowed: (to: number) => boolean): number | undefined;
+/**
+ * The farthest index toward `edge` that `allowed` accepts.
+ *
+ * @param {number} from
+ * @param {number} count
+ * @param {'start' | 'end'} edge
+ * @param {(to: number) => boolean} allowed
+ * @returns {number | undefined}
+ */
+export function edgeTarget(from: number, count: number, edge: "start" | "end", allowed: (to: number) => boolean): number | undefined;
+/**
+ * Resolve a key pressed on a grabbed grip to a list action.
+ *
+ * @param {string} key
+ * @returns {'up' | 'down' | 'start' | 'end' | 'drop' | 'cancel' | undefined}
+ */
+export function grabbedAction(key: string): "up" | "down" | "start" | "end" | "drop" | "cancel" | undefined;
+/**
+ * Slot a dragged row lands in: the one whose top is nearest the dragged row's
+ * top. `heights` are the other rows, top to bottom; `top` is relative to the
+ * first slot.
+ *
+ * @param {number} top
+ * @param {number[]} heights
+ * @returns {number}
+ */
+export function slotForTop(top: number, heights: number[]): number;
+/**
+ * Auto-scroll velocity for a pointer at `y` inside a box spanning
+ * `top`..`bottom`: negative near the top edge, positive near the bottom,
+ * scaled by how deep into the `zone` the pointer is.
+ *
+ * @param {number} y
+ * @param {number} top
+ * @param {number} bottom
+ * @param {number} [zone]
+ * @param {number} [max] px per frame
+ * @returns {number}
+ */
+export function edgeScroll(y: number, top: number, bottom: number, zone?: number, max?: number): number;

package/dist/components/molecules/sortable-list-order.js

@@ -0,0 +1,133 @@
+/**
+ * Move the entry at `from` to `to`, returning a new array.
+ *
+ * @template T
+ * @param {T[]} list
+ * @param {number} from
+ * @param {number} to
+ * @returns {T[]}
+ */
+export function moveItem(list, from, to) {
+	const next = [...list];
+	if (from < 0 || from >= next.length) return next;
+	const clamped = Math.min(Math.max(to, 0), next.length - 1);
+	const [moved] = next.splice(from, 1);
+	next.splice(clamped, 0, moved);
+	return next;
+}
+
+/**
+ * True when both key lists hold the same keys, in any order.
+ *
+ * @param {string[]} a
+ * @param {string[]} b
+ */
+export function sameKeys(a, b) {
+	if (a.length !== b.length) return false;
+	const set = new Set(a);
+	return b.every((k) => set.has(k));
+}
+
+/**
+ * The nearest index from `from` in direction `dir` that `allowed` accepts,
+ * skipping vetoed slots. `undefined` when nothing in that direction is allowed.
+ *
+ * @param {number} from
+ * @param {number} count
+ * @param {1 | -1} dir
+ * @param {(to: number) => boolean} allowed
+ * @returns {number | undefined}
+ */
+export function stepTarget(from, count, dir, allowed) {
+	for (let to = from + dir; to >= 0 && to < count; to += dir) {
+		if (allowed(to)) return to;
+	}
+	return undefined;
+}
+
+/**
+ * The farthest index toward `edge` that `allowed` accepts.
+ *
+ * @param {number} from
+ * @param {number} count
+ * @param {'start' | 'end'} edge
+ * @param {(to: number) => boolean} allowed
+ * @returns {number | undefined}
+ */
+export function edgeTarget(from, count, edge, allowed) {
+	if (edge === 'start') {
+		for (let to = 0; to < from; to += 1) if (allowed(to)) return to;
+	} else {
+		for (let to = count - 1; to > from; to -= 1) if (allowed(to)) return to;
+	}
+	return undefined;
+}
+
+/**
+ * Resolve a key pressed on a grabbed grip to a list action.
+ *
+ * @param {string} key
+ * @returns {'up' | 'down' | 'start' | 'end' | 'drop' | 'cancel' | undefined}
+ */
+export function grabbedAction(key) {
+	switch (key) {
+		case 'ArrowUp':
+			return 'up';
+		case 'ArrowDown':
+			return 'down';
+		case 'Home':
+			return 'start';
+		case 'End':
+			return 'end';
+		case ' ':
+		case 'Enter':
+			return 'drop';
+		case 'Escape':
+			return 'cancel';
+		default:
+			return undefined;
+	}
+}
+
+/**
+ * Slot a dragged row lands in: the one whose top is nearest the dragged row's
+ * top. `heights` are the other rows, top to bottom; `top` is relative to the
+ * first slot.
+ *
+ * @param {number} top
+ * @param {number[]} heights
+ * @returns {number}
+ */
+export function slotForTop(top, heights) {
+	let best = 0;
+	let bestDist = Math.abs(top);
+	let slotTop = 0;
+	for (let j = 0; j < heights.length; j += 1) {
+		slotTop += heights[j];
+		const dist = Math.abs(top - slotTop);
+		if (dist < bestDist) {
+			best = j + 1;
+			bestDist = dist;
+		}
+	}
+	return best;
+}
+
+/**
+ * Auto-scroll velocity for a pointer at `y` inside a box spanning
+ * `top`..`bottom`: negative near the top edge, positive near the bottom,
+ * scaled by how deep into the `zone` the pointer is.
+ *
+ * @param {number} y
+ * @param {number} top
+ * @param {number} bottom
+ * @param {number} [zone]
+ * @param {number} [max] px per frame
+ * @returns {number}
+ */
+export function edgeScroll(y, top, bottom, zone = 40, max = 12) {
+	if (bottom - top <= zone * 2) return 0;
+	if (y < top + zone) return -Math.ceil(max * Math.min(1, (top + zone - y) / zone));
+	if (y > bottom - zone) return Math.ceil(max * Math.min(1, (y - (bottom - zone)) / zone));
+	return 0;
+}

package/dist/floating.d.ts

@@ -12,3 +12,41 @@ export type AnchorRect = Pick<DOMRect, 'top' | 'left' | 'bottom' | 'right' | 'wi
 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;
+/** Viewport edges (px) that a floating layout must stay inside. */
+export interface Bounds {
+    left: number;
+    top: number;
+    right: number;
+    bottom: number;
+}
+export interface Point {
+    x: number;
+    y: number;
+}
+export interface FanInput {
+    /** Centre of the trigger, in viewport px. */
+    center: Point;
+    count: number;
+    /** Degrees, 0 = right, counter-clockwise. */
+    from: number;
+    to: number;
+    /** Preferred distance from `center` to each petal centre. */
+    radius: number;
+    /** Petal diameter. */
+    petal: number;
+    /** Smallest radius the fan may shrink to before it is shifted instead. */
+    minRadius?: number;
+    bounds: Bounds;
+}
+export interface FanLayout {
+    radius: number;
+    /** Petal centres, in `count` order. */
+    points: Point[];
+}
+/** Angles (degrees) of `count` petals spread evenly from `from` to `to`. */
+export declare function fanAngles(count: number, from: number, to: number): number[];
+/**
+ * Lay `count` petals on an arc around `center`, shrinking the radius until every
+ * petal fits in `bounds`; if even `minRadius` overflows, the whole fan shifts in.
+ */
+export declare function fanLayout({ center, count, from, to, radius, petal, minRadius, bounds, }: FanInput): FanLayout;

package/dist/floating.js

@@ -57,3 +57,41 @@ export function placeAt(t, floating, placement = 'bottom-start', gap = 6) {
     floating.style.top = `${Math.round(top)}px`;
     floating.style.left = `${Math.round(left)}px`;
 }
+/** Angles (degrees) of `count` petals spread evenly from `from` to `to`. */
+export function fanAngles(count, from, to) {
+    if (count <= 1)
+        return count === 1 ? [(from + to) / 2] : [];
+    return Array.from({ length: count }, (_, i) => from + ((to - from) * i) / (count - 1));
+}
+/**
+ * Lay `count` petals on an arc around `center`, shrinking the radius until every
+ * petal fits in `bounds`; if even `minRadius` overflows, the whole fan shifts in.
+ */
+export function fanLayout({ center, count, from, to, radius, petal, minRadius = 0, bounds, }) {
+    const half = petal / 2;
+    const lo = { x: bounds.left + half, y: bounds.top + half };
+    const hi = { x: bounds.right - half, y: bounds.bottom - half };
+    const units = fanAngles(count, from, to).map((deg) => {
+        const rad = (deg * Math.PI) / 180;
+        return { x: Math.cos(rad), y: -Math.sin(rad) };
+    });
+    const reach = (c, u, min, max) => u > 1e-9 ? (max - c) / u : u < -1e-9 ? (min - c) / u : Number.POSITIVE_INFINITY;
+    let r = radius;
+    for (const u of units) {
+        r = Math.min(r, reach(center.x, u.x, lo.x, hi.x), reach(center.y, u.y, lo.y, hi.y));
+    }
+    r = Math.max(r, Math.min(minRadius, radius));
+    const raw = units.map((u) => ({ x: center.x + u.x * r, y: center.y + u.y * r }));
+    const shift = (vals, min, max) => {
+        if (!vals.length)
+            return 0;
+        const a = Math.min(...vals);
+        const b = Math.max(...vals);
+        if (b - a > max - min)
+            return (min + max) / 2 - (a + b) / 2;
+        return a < min ? min - a : b > max ? max - b : 0;
+    };
+    const dx = shift(raw.map((p) => p.x), lo.x, hi.x);
+    const dy = shift(raw.map((p) => p.y), lo.y, hi.y);
+    return { radius: r, points: raw.map((p) => ({ x: p.x + dx, y: p.y + dy })) };
+}

package/dist/index.d.ts

@@ -79,10 +79,12 @@ export { default as OptionButton } from './components/molecules/OptionButton.sve
 export { default as Pagination } from './components/molecules/Pagination.svelte';
 export { default as Popover } from './components/molecules/Popover.svelte';
 export { default as Prose } from './components/molecules/Prose.svelte';
+export { default as RadialMenu, type RadialArc, } from './components/molecules/RadialMenu.svelte';
 export { default as RadioGroup, type RadioOption, } from './components/molecules/RadioGroup.svelte';
 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 SortableList, SORTABLE_LIST_MESSAGES, type SortableListMessages, type SortableListMove, type SortableListRowContext, } from './components/molecules/SortableList.svelte';
 export { default as SplitButton } from './components/molecules/SplitButton.svelte';
 export { default as StatusBar } from './components/molecules/StatusBar.svelte';
 export { default as Tabs, type TabItem } from './components/molecules/Tabs.svelte';

package/dist/index.js

@@ -87,10 +87,12 @@ export { default as OptionButton } from './components/molecules/OptionButton.sve
 export { default as Pagination } from './components/molecules/Pagination.svelte';
 export { default as Popover } from './components/molecules/Popover.svelte';
 export { default as Prose } from './components/molecules/Prose.svelte';
+export { default as RadialMenu, } from './components/molecules/RadialMenu.svelte';
 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 SortableList, SORTABLE_LIST_MESSAGES, } from './components/molecules/SortableList.svelte';
 export { default as SplitButton } from './components/molecules/SplitButton.svelte';
 export { default as StatusBar } from './components/molecules/StatusBar.svelte';
 export { default as Tabs } from './components/molecules/Tabs.svelte';

package/dist/slide-select.d.ts

@@ -0,0 +1,26 @@
+export declare const SLIDE_THRESHOLD = 12;
+export interface SlideMove {
+    x: number;
+    y: number;
+    dx: number;
+    dy: number;
+}
+export interface SlideOptions {
+    /** Target index under the pointer, or -1. Not asked within `threshold` of the press. */
+    pick: (move: SlideMove) => number;
+    /** The armed target changed (-1: none). */
+    onarm: (index: number) => void;
+    threshold?: number;
+}
+export interface SlideSelect {
+    /** Start tracking; captures the pointer on `el` so moves keep arriving over a top-layer panel. */
+    down(e: PointerEvent, el?: Element | null): void;
+    move(e: PointerEvent): void;
+    /** Stop tracking; returns the armed index (or -1). */
+    up(): number;
+    cancel(): void;
+    readonly active: boolean;
+    /** True once the pointer travelled past the threshold since `down`. */
+    readonly slid: boolean;
+}
+export declare function slideSelect({ pick, onarm, threshold, }: SlideOptions): SlideSelect;

package/dist/slide-select.js

@@ -0,0 +1,53 @@
+// Press-and-slide picking: press a trigger, drag over a target to arm it,
+// release to fire it. The caller owns opening and maps a pointer to a target.
+export const SLIDE_THRESHOLD = 12;
+export function slideSelect({ pick, onarm, threshold = SLIDE_THRESHOLD, }) {
+    let origin = null;
+    let armed = -1;
+    let slid = false;
+    const arm = (i) => {
+        if (i === armed)
+            return;
+        armed = i;
+        onarm(i);
+    };
+    const stop = () => {
+        const i = armed;
+        origin = null;
+        arm(-1);
+        return i;
+    };
+    return {
+        down(e, el) {
+            origin = { x: e.clientX, y: e.clientY };
+            slid = false;
+            arm(-1);
+            try {
+                el?.setPointerCapture(e.pointerId);
+            }
+            catch { }
+        },
+        move(e) {
+            if (!origin)
+                return;
+            const dx = e.clientX - origin.x;
+            const dy = e.clientY - origin.y;
+            if (Math.hypot(dx, dy) < threshold) {
+                arm(-1);
+                return;
+            }
+            slid = true;
+            arm(pick({ x: e.clientX, y: e.clientY, dx, dy }));
+        },
+        up: () => (origin ? stop() : -1),
+        cancel() {
+            stop();
+        },
+        get active() {
+            return origin !== null;
+        },
+        get slid() {
+            return slid;
+        },
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.67.1",
+  "version": "0.68.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",