@dorsk/tsumikit 0.38.1 → 0.40.0

package/dist/index.d.ts

@@ -35,11 +35,15 @@ export { default as NavSection } from './components/layouts/NavSection.svelte';
 export { default as ResizablePanel } from './components/layouts/ResizablePanel.svelte';
 export { type ResizeHandleParams, resizeHandle, } from './components/layouts/resizable-panel-frame.js';
 export { default as Stack } from './components/layouts/Stack.svelte';
+export { default as Toolbar } from './components/layouts/Toolbar.svelte';
 export { type AccordionItem, default as Accordion, } from './components/molecules/Accordion.svelte';
+export { type Attachment, default as AttachmentList, } from './components/molecules/AttachmentList.svelte';
 export { type BreadcrumbItem, default as Breadcrumb, } from './components/molecules/Breadcrumb.svelte';
 export { default as Callout } from './components/molecules/Callout.svelte';
 export { default as CapBar } from './components/molecules/CapBar.svelte';
+export { default as ChatBubble } from './components/molecules/ChatBubble.svelte';
 export { default as CodeBlock } from './components/molecules/CodeBlock.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 { default as Drawer } from './components/molecules/Drawer.svelte';
@@ -55,11 +59,13 @@ export { default as IconButton } from './components/molecules/IconButton.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';
-export { default as Metric, default as StatTile, } from './components/molecules/Metric.svelte';
+export { default as Meter } from './components/molecules/Meter.svelte';
+export { default as Metric, default as StatTile, type MetricSegment, } from './components/molecules/Metric.svelte';
 export { default as Modal } from './components/molecules/Modal.svelte';
 export { default as OptionButton } from './components/molecules/OptionButton.svelte';
 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 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';
@@ -75,11 +81,13 @@ 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 { FIELD_KEY, type FieldContext, getFieldContext, setFieldContext, warnUnlabelled, } from './field-context';
+export * as filterQuery from './query';
 export { type AndNode, activeToken, compilePredicate, defaultOperator, type ExprNode, type FieldDef, type FieldType, type FilterNode, filters, findField, freeText, type LeafNode, type NotNode, OPERATORS, type Operator, type OperatorId, type OrNode, operatorByCode, operatorById, operatorsFor, parse, type Query, type QueryNode, resolveValues, type Schema, type Suggestion, type SuggestKind, type SuggestState, serialize, serializeFilter, suggest, type TextNode, toSql, type ValueContext, type ValueOption, type ValueProvider, walk, } from './query';
+export type { ControlSize } from './size';
 export { fontScale, SCALE_LEVELS, type ScaleLevel } from './stores/fontscale.svelte';
 export { type Mode, THEMES, theme } from './stores/theme.svelte';
 export { type Toast, type ToastAction, type ToastOptions, type ToastTone, type ToastToneInput, toasts, } from './stores/toast.svelte';
 export { formatTimestamp, localTimeZone, relativeTime, type TimeInput, type TimestampMode, } from './timestamp';
 export { canonicalTone, type Tone } from './tone';
-export { type TruncateMode, type TruncateOptions, truncate } from './truncate';
+export { pathCandidates, type TruncateMode, type TruncateOptions, truncate } from './truncate';
 export { normalizeWorkingDir, type WorkingDirOptions, workingDirCandidates } from './working-dir';

package/dist/index.js

@@ -41,11 +41,15 @@ export { default as NavSection } from './components/layouts/NavSection.svelte';
 export { default as ResizablePanel } from './components/layouts/ResizablePanel.svelte';
 export { resizeHandle, } from './components/layouts/resizable-panel-frame.js';
 export { default as Stack } from './components/layouts/Stack.svelte';
+export { default as Toolbar } from './components/layouts/Toolbar.svelte';
 export { default as Accordion, } from './components/molecules/Accordion.svelte';
+export { default as AttachmentList, } from './components/molecules/AttachmentList.svelte';
 export { default as Breadcrumb, } from './components/molecules/Breadcrumb.svelte';
 export { default as Callout } from './components/molecules/Callout.svelte';
 export { default as CapBar } from './components/molecules/CapBar.svelte';
+export { default as ChatBubble } from './components/molecules/ChatBubble.svelte';
 export { default as CodeBlock } from './components/molecules/CodeBlock.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 { default as Drawer } from './components/molecules/Drawer.svelte';
@@ -62,6 +66,7 @@ export { default as IconButton } from './components/molecules/IconButton.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';
+export { default as Meter } from './components/molecules/Meter.svelte';
 export { default as Metric, 
 // StatTile is an alias for Metric — same component, dashboard-friendly name.
 default as StatTile, } from './components/molecules/Metric.svelte';
@@ -69,6 +74,7 @@ export { default as Modal } from './components/molecules/Modal.svelte';
 export { default as OptionButton } from './components/molecules/OptionButton.svelte';
 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 RadioGroup, } from './components/molecules/RadioGroup.svelte';
 export { default as SectionHeader } from './components/molecules/SectionHeader.svelte';
 export { default as SegmentedControl, } from './components/molecules/SegmentedControl.svelte';
@@ -86,6 +92,7 @@ export { default as DataTable, } from './components/organisms/DataTable.svelte';
 export { default as FilterSearchBar } from './components/organisms/FilterSearchBar.svelte';
 export { FIELD_KEY, getFieldContext, setFieldContext, warnUnlabelled, } from './field-context';
 // ---- query core (headless: schema / parser / AST / suggest / compilers) ----
+export * as filterQuery from './query';
 export { activeToken, compilePredicate, defaultOperator, filters, findField, freeText, OPERATORS, operatorByCode, operatorById, operatorsFor, parse, resolveValues, serialize, serializeFilter, suggest, toSql, walk, } from './query';
 export { fontScale, SCALE_LEVELS } from './stores/fontscale.svelte';
 // ---- stores / actions ----
@@ -93,5 +100,5 @@ export { THEMES, theme } from './stores/theme.svelte';
 export { toasts, } from './stores/toast.svelte';
 export { formatTimestamp, localTimeZone, relativeTime, } from './timestamp';
 export { canonicalTone } from './tone';
-export { truncate } from './truncate';
+export { pathCandidates, truncate } from './truncate';
 export { normalizeWorkingDir, workingDirCandidates } from './working-dir';

package/dist/size.d.ts

@@ -0,0 +1,2 @@
+/** Control-height scale shared by form/toolbar controls (Button, Input, Select…). */
+export type ControlSize = 'sm' | 'md' | 'lg';

package/dist/size.js

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

package/dist/styles/tokens.css

@@ -170,6 +170,9 @@
   --control-height-default: 2.5rem;
   --control-height-large: 3rem;
   --control-height: 2.75rem;
+  /* Keyboard focus indicator shared by every interactive atom. */
+  --focus-ring: 2px solid var(--accent);
+  --focus-ring-offset: 1px;
   /* Square box scale for icon-only controls (IconButton, Button `box`/`square`,
 	   SelectButton, Popover trigger, CopyButton, FileButton). md is the classic
 	   2.25rem icon button; sm/lg reuse the control heights so a boxed control

package/dist/timestamp.d.ts

@@ -41,10 +41,10 @@ export declare function localTimeZone(): string;
  * two-unit form — "1d 15h", "1h 55m" — which keeps the coarse unit exact and
  * shows the remainder instead of rounding it away.
  */
-export declare function relativeTime(value: TimeInput | null | undefined, now?: number, precision?: boolean): string;
+export declare function relativeTime(value: TimeInput | null | undefined, now?: number, precision?: boolean, short?: boolean): string;
 /**
  * Render a date in the chosen inline mode. `utc` selects UTC over the viewer's
  * zone for the date/time/datetime/short-iso modes (ignored by `iso`, always
  * UTC, and `relative`, zoneless). Returns '' for unparseable input.
  */
-export declare function formatTimestamp(value: TimeInput | null | undefined, mode: TimestampMode, now?: number, utc?: boolean, precision?: boolean): string;
+export declare function formatTimestamp(value: TimeInput | null | undefined, mode: TimestampMode, now?: number, utc?: boolean, precision?: boolean, short?: boolean): string;

package/dist/timestamp.js

@@ -75,14 +75,14 @@ const DAY = 24 * HOUR;
  * two-unit form — "1d 15h", "1h 55m" — which keeps the coarse unit exact and
  * shows the remainder instead of rounding it away.
  */
-export function relativeTime(value, now = Date.now(), precision = false) {
+export function relativeTime(value, now = Date.now(), precision = false, short = false) {
     const d = toDate(value);
     if (!d)
         return '';
     const deltaMs = now - d.getTime();
     const future = deltaMs < 0;
     const secs = Math.floor(Math.abs(deltaMs) / 1000);
-    const suffix = (s) => (future ? `in ${s}` : `${s} ago`);
+    const suffix = (s) => (short ? (future ? `+${s}` : s) : future ? `in ${s}` : `${s} ago`);
     if (secs < MIN)
         return suffix(`${secs}s`);
     if (secs >= 30 * DAY)
@@ -118,7 +118,7 @@ export function relativeTime(value, now = Date.now(), precision = false) {
  * zone for the date/time/datetime/short-iso modes (ignored by `iso`, always
  * UTC, and `relative`, zoneless). Returns '' for unparseable input.
  */
-export function formatTimestamp(value, mode, now, utc = false, precision = false) {
+export function formatTimestamp(value, mode, now, utc = false, precision = false, short = false) {
     const d = toDate(value);
     if (!d)
         return '';
@@ -132,6 +132,6 @@ export function formatTimestamp(value, mode, now, utc = false, precision = false
         case 'datetime':
             return toLocale(d, mode, utc);
         case 'relative':
-            return relativeTime(d, now, precision);
+            return relativeTime(d, now, precision, short);
     }
 }

package/dist/tone.d.ts

@@ -1,2 +1,2 @@
 export type Tone = 'neutral' | 'ok' | 'success' | 'warn' | 'danger' | 'info' | 'accent';
-export declare function canonicalTone(t: string): string;
+export declare function canonicalTone<T extends string>(t: T): Exclude<T, 'success'> | 'ok';

package/dist/tone.js

@@ -1,3 +1,3 @@
 export function canonicalTone(t) {
-    return t === 'success' ? 'ok' : t;
+    return (t === 'success' ? 'ok' : t);
 }

package/dist/truncate.d.ts

@@ -1,4 +1,4 @@
-export type TruncateMode = 'end' | 'middle' | 'start';
+export type TruncateMode = 'end' | 'middle' | 'start' | 'path';
 export interface TruncateOptions {
     /** Maximum number of characters in the result, ellipsis included. */
     max: number;
@@ -6,7 +6,19 @@ export interface TruncateOptions {
     mode?: TruncateMode;
     /** Ellipsis string. Default '…' (one char). */
     ellipsis?: string;
+    /** `path` mode: segment separator. Default '/'. */
+    separator?: string;
+    /** `path` mode: chars the leaf keeps at minimum before the ellipsis. Default 3. */
+    minLeaf?: number;
+    /** `path` mode: leading segments never abbreviated (e.g. 1 keeps `~`). Default 0. */
+    keepFirst?: number;
 }
+/**
+ * Path renderings richest → poorest: full, ancestors abbreviated to their first
+ * char left to right, leading ancestors dropped behind the ellipsis, leaf only,
+ * leaf end-truncated down to `minLeaf` chars.
+ */
+export declare function pathCandidates(value: string, options?: Omit<TruncateOptions, 'max' | 'mode'>): string[];
 /**
  * Shorten `value` to at most `max` characters (counting the ellipsis), or
  * return it unchanged when it already fits. Returns the original string when

package/dist/truncate.js

@@ -10,6 +10,41 @@
 // most emoji are not split mid-surrogate. It is not grapheme-cluster aware, so
 // combining marks / ZWJ sequences can still be cut; that trade-off keeps it
 // dependency-free.
+/**
+ * Path renderings richest → poorest: full, ancestors abbreviated to their first
+ * char left to right, leading ancestors dropped behind the ellipsis, leaf only,
+ * leaf end-truncated down to `minLeaf` chars.
+ */
+export function pathCandidates(value, options = {}) {
+    const { ellipsis = '…', separator = '/', minLeaf = 3, keepFirst = 0 } = options;
+    const trimmed = value.endsWith(separator) && value.length > separator.length
+        ? value.slice(0, -separator.length)
+        : value;
+    const absolute = trimmed.startsWith(separator);
+    const segs = trimmed.split(separator).filter(Boolean);
+    if (segs.length === 0)
+        return [trimmed || separator];
+    const leaf = segs[segs.length - 1];
+    const parents = segs.slice(0, -1);
+    const out = [];
+    const push = (c) => {
+        if (out[out.length - 1] !== c && !out.includes(c))
+            out.push(c);
+    };
+    const join = (parts) => (absolute ? separator : '') + parts.join(separator);
+    for (let n = 0; n <= parents.length; n++) {
+        push(join([...parents.map((p, i) => (i >= keepFirst && i < keepFirst + n ? [...p][0] : p)), leaf]));
+    }
+    const abbreviated = parents.map((p, i) => (i >= keepFirst ? [...p][0] : p));
+    for (let drop = 1; drop < abbreviated.length; drop++) {
+        push(`${ellipsis}${separator}${[...abbreviated.slice(drop), leaf].join(separator)}`);
+    }
+    push(leaf);
+    for (let keep = [...leaf].length - 1; keep >= minLeaf; keep--) {
+        push(truncate(leaf, { max: keep + [...ellipsis].length, mode: 'end', ellipsis }));
+    }
+    return out;
+}
 /**
  * Shorten `value` to at most `max` characters (counting the ellipsis), or
  * return it unchanged when it already fits. Returns the original string when
@@ -20,6 +55,10 @@ export function truncate(value, options) {
     const chars = [...value];
     if (chars.length <= max)
         return value;
+    if (mode === 'path') {
+        const candidates = pathCandidates(value, options);
+        return candidates.find((c) => [...c].length <= max) ?? candidates[candidates.length - 1];
+    }
     const ell = [...ellipsis];
     const budget = max - ell.length; // chars of real content we can keep
     // Not enough room for the ellipsis plus any content: don't produce a string

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dorsk/tsumikit",
-  "version": "0.38.1",
+  "version": "0.40.0",
   "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",
@@ -58,15 +58,17 @@
     "package": "svelte-kit sync && svelte-package && publint",
     "package:watch": "svelte-kit sync && svelte-package --watch",
     "prepublishOnly": "npm run package",
+    "design": "npm run package && npm run design:bundle && npm run design:verify",
     "design:bundle": "node .design-sync/build-bundle.mjs",
-    "design:verify": "node .design-sync/verify-bundle.mjs"
+    "design:verify": "node .design-sync/verify-bundle.mjs",
+    "design:clean": "rm -rf ds-bundle .ds-proto"
   },
   "peerDependencies": {
     "svelte": "^5.0.0"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.2.0",
-    "@dorsk/kakehashi": "^0.1.1",
+    "@dorsk/kakehashi": "^0.2.0",
     "@sveltejs/adapter-static": "^3.0.8",
     "@sveltejs/kit": "^2.22.0",
     "@sveltejs/package": "^2.3.0",