@heyramzi/ui 2.10.0 → 2.11.0

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

@@ -1,2 +1,2 @@
 export { default as TagsInput } from "../../../src/components/tags-input/tags-input.svelte";
-export { addTag, canCreate, cleanTags, collectOptions, editDistance, findOption, fold, matchOptions, removeTag, splitTags } from "./tags.js";
+export { addTag, canCreate, cleanTags, collectOptions, editDistance, findOption, fold, matchOptions, removeTag, splitTags, splitTyped } from "./tags.js";

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

@@ -1,6 +1,9 @@
 export function splitTags(text) {
     return text.split(/[,\n]/).map((part)=>part.trim()).filter(Boolean);
 }
+export function splitTyped(text) {
+    return text.split(/[\s,;]+/).filter(Boolean);
+}
 export function fold(text) {
     return text.normalize("NFD").replace(/\p{M}/gu, "").toLowerCase().replace(/[\s._-]+/g, "");
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heyramzi/ui",
-  "version": "2.10.0",
+  "version": "2.11.0",
   "description": "Svelte 5 UI for apps: primitives, effects and animations, plus work (tasks and docs), charts, slides, an editor, onboarding and a canvas as subpaths.",
   "homepage": "https://ui.heyramzi.com",
   "license": "MIT",
@@ -383,7 +383,7 @@
     }
   },
   "dependencies": {
-    "@dagrejs/dagre": "^3.1.1",
+    "@dagrejs/dagre": "^3.1.3",
     "@shadcn-svelte/primitives": "^0.0.1",
     "@tiptap/core": "^3.32.0",
     "@tiptap/extension-drag-handle": "^3.32.0",
@@ -398,9 +398,9 @@
     "clsx": "^2.1.1",
     "d3-scale": "^4.0.2",
     "d3-shape": "^3.2.0",
-    "layerchart": "^2.8.1",
+    "layerchart": "^2.9.1",
     "markdown-it": "^15.0.3",
-    "marked": "^18.1.1",
+    "marked": "^18.1.2",
     "perfect-freehand": "^1.2.3",
     "phosphor-svelte": "^3.1.1",
     "roughjs": "^4.6.6",
@@ -416,14 +416,14 @@
     "@types/d3-shape": "^3.2.0",
     "@types/node": "^26.6.5",
     "@xyflow/svelte": "^1.7.0",
-    "bits-ui": "^2.20.0",
+    "bits-ui": "^2.20.2",
     "jsdom": "^30.1.3",
     "mode-watcher": "^1.1.0",
-    "svelte": "^5.57.2",
+    "svelte": "^5.57.3",
     "svelte-check": "^4.7.7",
     "svelte-sonner": "^1.2.1",
     "typescript": "~7.0.2",
-    "vite-plus": "1.3.0"
+    "vite-plus": "1.4.0"
   },
   "peerDependencies": {
     "@internationalized/date": "^3.12.4",

package/src/components/tags-input/index.ts

@@ -10,4 +10,5 @@ export {
   matchOptions,
   removeTag,
   splitTags,
+  splitTyped,
 } from "./tags.js";

package/src/components/tags-input/tags-input.svelte

@@ -11,6 +11,7 @@
 		matchOptions,
 		removeTag,
 		splitTags,
+		splitTyped,
 	} from "./tags.js";
 
 	// =========================
@@ -40,6 +41,11 @@
 		allowCreate?: boolean;
 		/** Most tags the list holds. Past it the input goes away. */
 		max?: number;
+		/**
+		 * Tags typed freely, with no options and no menu: Enter, comma, space or Tab adds what's
+		 * typed, a pasted list adds every part, and leaving the field keeps what was typed.
+		 */
+		free?: boolean;
 		/** Accessible name of the field. */
 		label: string;
 		labels?: Partial<Labels>;
@@ -56,6 +62,7 @@
 		options = [],
 		allowCreate = true,
 		max,
+		free = false,
 		label,
 		labels,
 		disabled = false,
@@ -90,11 +97,17 @@
 	const matches = $derived(matchOptions(options, tags, query));
 	const creatable = $derived(canCreate(options, tags, query, allowCreate));
 	// Options closest first (a typo's fix comes before anything new), then the one row that makes what's typed.
-	const rows = $derived([
-		...matches.map((name) => ({ kind: "pick" as const, name })),
-		...(creatable ? [{ kind: "create" as const, name: query.trim() }] : []),
-	]);
-	const nothing = $derived(editing && !full && query.trim() !== "" && rows.length === 0);
+	const rows = $derived(
+		free
+			? []
+			: [
+					...matches.map((name) => ({ kind: "pick" as const, name })),
+					...(creatable ? [{ kind: "create" as const, name: query.trim() }] : []),
+				],
+	);
+	const nothing = $derived(
+		!free && editing && !full && query.trim() !== "" && rows.length === 0,
+	);
 	const open = $derived(editing && !full && (rows.length > 0 || nothing));
 
 	// =========================
@@ -117,12 +130,12 @@
 	}
 
 	// Leaving the field keeps what was typed only when it is an existing label said another way.
-	// Anything else is dropped: free text is never saved by walking away.
+	// Anything else is dropped unless the field is free: free text is never saved by walking away.
 	function stop() {
 		const typed = query;
 		query = "";
 		editing = false;
-		const match = findOption(options, typed);
+		const match = free ? typed.trim() : findOption(options, typed);
 		if (match) void commit(addTag(tags, match, options, max));
 	}
 
@@ -134,7 +147,12 @@
 
 	function onKey(event: KeyboardEvent) {
 		const last = rows.length - 1;
-		if (event.key === "ArrowDown" || event.key === "ArrowUp") {
+		const separator = event.key === "," || (free && event.key === " ");
+		if (free && (separator || event.key === "Enter" || (event.key === "Tab" && query.trim()))) {
+			event.preventDefault();
+			if (query.trim()) add(query);
+			else if (event.key === "Enter") stop();
+		} else if (event.key === "ArrowDown" || event.key === "ArrowUp") {
 			if (rows.length === 0) return;
 			event.preventDefault();
 			const step = event.key === "ArrowDown" ? 1 : -1;
@@ -162,6 +180,7 @@
 	// Pasted words that are existing labels are added. The rest stay in the box to be created on purpose.
 	function onPaste(event: ClipboardEvent) {
 		const pasted = event.clipboardData?.getData("text") ?? "";
+		if (free) return pasteTyped(event, pasted);
 		if (!/[,\n]/.test(pasted)) return;
 		event.preventDefault();
 		const parts = splitTags(pasted);
@@ -173,6 +192,17 @@
 		);
 	}
 
+	// A free field takes a pasted list whole, one tag per part. One word pastes into the box as usual.
+	function pasteTyped(event: ClipboardEvent, pasted: string) {
+		const parts = splitTyped(pasted);
+		if (parts.length < 2) return;
+		event.preventDefault();
+		query = "";
+		void commit(
+			parts.reduce((list, part) => addTag(list, part, options, max), tags as readonly string[]),
+		);
+	}
+
 	function onFocusOut(event: FocusEvent) {
 		const next = event.relatedTarget as Node | null;
 		if (editing && !(next && root?.contains(next))) stop();

package/src/components/tags-input/tags.test.ts

@@ -8,6 +8,7 @@ import {
   matchOptions,
   removeTag,
   splitTags,
+  splitTyped,
 } from "./tags.js";
 
 const options = ["Airtable", "Docusign", "QuickBooks", "SharePoint", "Supabase"];
@@ -17,6 +18,16 @@ describe("tags as labels", () => {
     expect(splitTags(" a, b,,\nc ,")).toEqual(["a", "b", "c"]);
   });
 
+  // save-to-clickup, 28 Oct 2026: client domains pasted from anywhere, separated any way.
+  it("splits a free field's paste on commas, semicolons, newlines and spaces", () => {
+    expect(splitTyped("acme.com, bo.io;\nzed.co  ann@x.dev")).toEqual([
+      "acme.com",
+      "bo.io",
+      "zed.co",
+      "ann@x.dev",
+    ]);
+  });
+
   it("counts a transposition as one edit", () => {
     expect(editDistance("airtbale", "airtable")).toBe(1);
     expect(editDistance("make", "airtable")).toBeGreaterThan(2);

package/src/components/tags-input/tags.ts

@@ -9,6 +9,11 @@ export function splitTags(text: string): string[] {
     .filter(Boolean);
 }
 
+/** Splits typed or pasted text for a free field: commas, semicolons, newlines and spaces all separate. */
+export function splitTyped(text: string): string[] {
+  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: string): string {
   return text

package/src/status/status-dot.svelte

@@ -54,7 +54,6 @@
 	let dasharray = $derived(
 		fraction != null ? `${INNER_CIRC * fraction} ${INNER_CIRC * (1 - fraction)}` : undefined,
 	);
-	let dashoffset = $derived(fraction != null ? INNER_CIRC * 0.25 : undefined);
 </script>
 
 {#if resolvedVariant === "completed"}
@@ -128,7 +127,6 @@
 				stroke={resolvedColor}
 				stroke-width="4"
 				stroke-dasharray={dasharray}
-				stroke-dashoffset={dashoffset}
 				transform="rotate(-90 7 7)"
 				class={animate ? "sd-fill" : ""}
 			></circle>