@dorsk/tsumikit 0.9.1 → 0.9.3

package/dist/components/atoms/Icon.svelte

@@ -43,6 +43,12 @@
 		pause: '<rect x="14" y="3" width="5" height="18" rx="1" /><rect x="5" y="3" width="5" height="18" rx="1" />',
 		stop: '<rect width="18" height="18" x="3" y="3" rx="2" />',
 
+		// — media types —
+		music: '<path d="M9 18V5l12-2v13" /><circle cx="6" cy="18" r="3" /><circle cx="18" cy="16" r="3" />',
+		tv: '<path d="m17 2-5 5-5-5" /><rect width="20" height="15" x="2" y="7" rx="2" />',
+		film: '<rect width="18" height="18" x="3" y="3" rx="2" /><path d="M7 3v18" /><path d="M3 7.5h4" /><path d="M3 12h18" /><path d="M3 16.5h4" /><path d="M17 3v18" /><path d="M17 7.5h4" /><path d="M17 16.5h4" />',
+		disc: '<circle cx="12" cy="12" r="10" /><circle cx="12" cy="12" r="2" />',
+
 		// — files / content —
 		file: '<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" /><path d="M14 2v5a1 1 0 0 0 1 1h5" />',
 		'file-text': '<path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" /><path d="M14 2v5a1 1 0 0 0 1 1h5" /><path d="M10 9H8" /><path d="M16 13H8" /><path d="M16 17H8" />',
@@ -55,6 +61,8 @@
 
 		// — objects / status —
 		link: '<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" /><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" />',
+		unlink: '<path d="m18.84 12.25 1.72-1.71h-.02a5.004 5.004 0 0 0-.12-7.07 5.006 5.006 0 0 0-6.95 0l-1.72 1.71" /><path d="m5.17 11.75-1.71 1.71a5.004 5.004 0 0 0 .12 7.07 5.006 5.006 0 0 0 6.95 0l1.71-1.71" /><line x1="8" x2="8" y1="2" y2="5" /><line x1="2" x2="5" y1="8" y2="8" /><line x1="16" x2="16" y1="19" y2="22" /><line x1="19" x2="22" y1="16" y2="16" />',
+		'text-cursor': '<path d="M17 22h-1a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4h1" /><path d="M7 22h1a4 4 0 0 0 4-4" /><path d="M7 2h1a4 4 0 0 1 4 4" />',
 		tag: '<path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z" /><circle cx="7.5" cy="7.5" r=".5" fill="currentColor" />',
 		bookmark: '<path d="M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z" />',
 		star: '<path d="M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" />',
@@ -103,6 +111,7 @@
 		name,
 		size,
 		label,
+		spin = false,
 		children,
 		...rest
 	}: {
@@ -111,6 +120,9 @@
 		/** Explicit pixel size. Omit to track the surrounding text (1em) — best
 		 *  for icons sitting inline with a label. */
 		size?: number;
+		/** Continuously rotate the glyph (e.g. `name="loader"` as a spinner). The
+		 *  global prefers-reduced-motion rule halts it for motion-sensitive users. */
+		spin?: boolean;
 		/** When set, the icon is exposed to AT with this label; otherwise it is
 		 *  decorative (aria-hidden) and the parent control carries the label. */
 		label?: string;
@@ -126,6 +138,7 @@
 <svg
 	data-tsu="Icon"
 	class="icon"
+	class:spin
 	style={size ? `font-size: ${size}px` : undefined}
 	viewBox="0 0 24 24"
 	fill={filled ? 'currentColor' : 'none'}
@@ -152,4 +165,17 @@
 		width: 1em;
 		height: 1em;
 	}
+	.icon.spin {
+		animation: icon-spin 0.7s linear infinite;
+	}
+	@keyframes icon-spin {
+		to {
+			transform: rotate(360deg);
+		}
+	}
+	@media (prefers-reduced-motion: reduce) {
+		.icon.spin {
+			animation: none;
+		}
+	}
 </style>

package/dist/components/atoms/Icon.svelte.d.ts

@@ -30,6 +30,10 @@ declare const ICONS: {
     readonly play: "<path d=\"M5 5a2 2 0 0 1 3.008-1.728l11.997 6.998a2 2 0 0 1 .003 3.458l-12 7A2 2 0 0 1 5 19z\" />";
     readonly pause: "<rect x=\"14\" y=\"3\" width=\"5\" height=\"18\" rx=\"1\" /><rect x=\"5\" y=\"3\" width=\"5\" height=\"18\" rx=\"1\" />";
     readonly stop: "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" />";
+    readonly music: "<path d=\"M9 18V5l12-2v13\" /><circle cx=\"6\" cy=\"18\" r=\"3\" /><circle cx=\"18\" cy=\"16\" r=\"3\" />";
+    readonly tv: "<path d=\"m17 2-5 5-5-5\" /><rect width=\"20\" height=\"15\" x=\"2\" y=\"7\" rx=\"2\" />";
+    readonly film: "<rect width=\"18\" height=\"18\" x=\"3\" y=\"3\" rx=\"2\" /><path d=\"M7 3v18\" /><path d=\"M3 7.5h4\" /><path d=\"M3 12h18\" /><path d=\"M3 16.5h4\" /><path d=\"M17 3v18\" /><path d=\"M17 7.5h4\" /><path d=\"M17 16.5h4\" />";
+    readonly disc: "<circle cx=\"12\" cy=\"12\" r=\"10\" /><circle cx=\"12\" cy=\"12\" r=\"2\" />";
     readonly file: "<path d=\"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z\" /><path d=\"M14 2v5a1 1 0 0 0 1 1h5\" />";
     readonly 'file-text': "<path d=\"M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z\" /><path d=\"M14 2v5a1 1 0 0 0 1 1h5\" /><path d=\"M10 9H8\" /><path d=\"M16 13H8\" /><path d=\"M16 17H8\" />";
     readonly folder: "<path d=\"M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z\" />";
@@ -39,6 +43,8 @@ declare const ICONS: {
     readonly list: "<path d=\"M3 5h.01\" /><path d=\"M3 12h.01\" /><path d=\"M3 19h.01\" /><path d=\"M8 5h13\" /><path d=\"M8 12h13\" /><path d=\"M8 19h13\" />";
     readonly grid: "<rect width=\"7\" height=\"7\" x=\"3\" y=\"3\" rx=\"1\" /><rect width=\"7\" height=\"7\" x=\"14\" y=\"3\" rx=\"1\" /><rect width=\"7\" height=\"7\" x=\"14\" y=\"14\" rx=\"1\" /><rect width=\"7\" height=\"7\" x=\"3\" y=\"14\" rx=\"1\" />";
     readonly link: "<path d=\"M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71\" /><path d=\"M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71\" />";
+    readonly unlink: "<path d=\"m18.84 12.25 1.72-1.71h-.02a5.004 5.004 0 0 0-.12-7.07 5.006 5.006 0 0 0-6.95 0l-1.72 1.71\" /><path d=\"m5.17 11.75-1.71 1.71a5.004 5.004 0 0 0 .12 7.07 5.006 5.006 0 0 0 6.95 0l1.71-1.71\" /><line x1=\"8\" x2=\"8\" y1=\"2\" y2=\"5\" /><line x1=\"2\" x2=\"5\" y1=\"8\" y2=\"8\" /><line x1=\"16\" x2=\"16\" y1=\"19\" y2=\"22\" /><line x1=\"19\" x2=\"22\" y1=\"16\" y2=\"16\" />";
+    readonly 'text-cursor': "<path d=\"M17 22h-1a4 4 0 0 1-4-4V6a4 4 0 0 1 4-4h1\" /><path d=\"M7 22h1a4 4 0 0 0 4-4\" /><path d=\"M7 2h1a4 4 0 0 1 4 4\" />";
     readonly tag: "<path d=\"M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z\" /><circle cx=\"7.5\" cy=\"7.5\" r=\".5\" fill=\"currentColor\" />";
     readonly bookmark: "<path d=\"M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z\" />";
     readonly star: "<path d=\"M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z\" />";
@@ -76,6 +82,9 @@ type $$ComponentProps = {
     /** Explicit pixel size. Omit to track the surrounding text (1em) — best
      *  for icons sitting inline with a label. */
     size?: number;
+    /** Continuously rotate the glyph (e.g. `name="loader"` as a spinner). The
+     *  global prefers-reduced-motion rule halts it for motion-sensitive users. */
+    spin?: boolean;
     /** When set, the icon is exposed to AT with this label; otherwise it is
      *  decorative (aria-hidden) and the parent control carries the label. */
     label?: string;

package/dist/components/atoms/Spinner.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	// Inline loading spinner — a spinning `loader` glyph. Tracks the surrounding
+	// text size by default (1em), or pass an explicit pixel `size`. The spin
+	// animation is owned by Icon and is halted under prefers-reduced-motion, so
+	// motion-sensitive users see a static glyph instead.
+	import Icon from './Icon.svelte';
+
+	let {
+		size,
+		label = 'Loading',
+		...rest
+	}: {
+		/** Explicit pixel size. Omit to track the surrounding text (1em). */
+		size?: number;
+		/** AT label announcing the busy state. Set to undefined to make the
+		 *  spinner decorative when an ancestor already conveys the loading state. */
+		label?: string;
+		[key: string]: unknown;
+	} = $props();
+</script>
+
+<Icon name="loader" spin {size} {label} data-tsu="Spinner" {...rest} />

package/dist/components/atoms/Spinner.svelte.d.ts

@@ -0,0 +1,11 @@
+type $$ComponentProps = {
+    /** Explicit pixel size. Omit to track the surrounding text (1em). */
+    size?: number;
+    /** AT label announcing the busy state. Set to undefined to make the
+     *  spinner decorative when an ancestor already conveys the loading state. */
+    label?: string;
+    [key: string]: unknown;
+};
+declare const Spinner: import("svelte").Component<$$ComponentProps, {}, "">;
+type Spinner = ReturnType<typeof Spinner>;
+export default Spinner;

package/dist/index.d.ts

@@ -13,6 +13,7 @@ export { default as Link } from './components/atoms/Link.svelte';
 export { default as Progress } from './components/atoms/Progress.svelte';
 export { default as Select } from './components/atoms/Select.svelte';
 export { default as Slider } from './components/atoms/Slider.svelte';
+export { default as Spinner } from './components/atoms/Spinner.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';

package/dist/index.js

@@ -18,6 +18,7 @@ export { default as Link } from './components/atoms/Link.svelte';
 export { default as Progress } from './components/atoms/Progress.svelte';
 export { default as Select } from './components/atoms/Select.svelte';
 export { default as Slider } from './components/atoms/Slider.svelte';
+export { default as Spinner } from './components/atoms/Spinner.svelte';
 export { default as Switch } from './components/atoms/Switch.svelte';
 // ---- atoms ----
 export { default as Text } from './components/atoms/Text.svelte';

package/dist/query/suggest.d.ts

@@ -20,7 +20,13 @@ export interface SuggestState {
     span: [number, number];
     items: Suggestion[];
 }
-/** The whitespace-delimited token under the caret (quotes count as non-ws). */
+/**
+ * The token under the caret. Whitespace ends a token EXCEPT inside an open
+ * quote, so a quoted value containing spaces (`album:"ok computer`) stays one
+ * token and keeps the caret in the value step rather than collapsing to an
+ * empty token (which would wrongly re-offer fields). A closed quote followed by
+ * whitespace starts a fresh token (so the next `field:` can be chained).
+ */
 export declare function activeToken(s: string, pos: number): {
     start: number;
     end: number;

package/dist/query/suggest.js

@@ -9,14 +9,49 @@
 import { findField, operatorsFor, resolveValues, } from './schema';
 // Longest first so `>=`/`!:` win over `>`/`:`.
 const OP_CODES = ['!:', '!=', '>=', '<=', ':', '=', '>', '<'];
-/** The whitespace-delimited token under the caret (quotes count as non-ws). */
+/**
+ * The token under the caret. Whitespace ends a token EXCEPT inside an open
+ * quote, so a quoted value containing spaces (`album:"ok computer`) stays one
+ * token and keeps the caret in the value step rather than collapsing to an
+ * empty token (which would wrongly re-offer fields). A closed quote followed by
+ * whitespace starts a fresh token (so the next `field:` can be chained).
+ */
 export function activeToken(s, pos) {
-    let start = pos;
-    while (start > 0 && !/\s/.test(s[start - 1]))
-        start--;
+    // Walk from the start so we can track quote state; the last unquoted
+    // whitespace before the caret is the token boundary.
+    let start = 0;
+    let inQuote = false;
+    let q = '';
+    for (let i = 0; i < pos; i++) {
+        const c = s[i];
+        if (inQuote) {
+            if (c === q)
+                inQuote = false;
+        }
+        else if (c === '"' || c === "'") {
+            inQuote = true;
+            q = c;
+        }
+        else if (/\s/.test(c)) {
+            start = i + 1;
+        }
+    }
+    // Extend forward through the rest of the token, still respecting quotes.
     let end = pos;
-    while (end < s.length && !/\s/.test(s[end]))
-        end++;
+    for (let i = pos; i < s.length; i++) {
+        const c = s[i];
+        if (!inQuote && /\s/.test(c))
+            break;
+        if (inQuote) {
+            if (c === q)
+                inQuote = false;
+        }
+        else if (c === '"' || c === "'") {
+            inQuote = true;
+            q = c;
+        }
+        end = i + 1;
+    }
     return { start, end, raw: s.slice(start, end) };
 }
 /** Split a token into field / operator-code / value parts (earliest op wins). */

package/package.json

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