@heyramzi/ui 2.9.0 → 2.10.0

package/dist/work/use-kanban-dnd.svelte.js

@@ -0,0 +1,128 @@
+import { boardOrderAt } from "./board-order.js";
+export function createKanbanDnd(config) {
+    let draggedId = $state(null);
+    let dragOver = $state(null);
+    function readDraggedId(e) {
+        const raw = e.dataTransfer?.getData("text/plain");
+        if (!raw) return null;
+        try {
+            const parsed = JSON.parse(raw);
+            return parsed.id ?? null;
+        } catch  {
+            return null;
+        }
+    }
+    function onDragStart(e, id) {
+        if (e.dataTransfer) {
+            e.dataTransfer.effectAllowed = "move";
+            e.dataTransfer.setData("text/plain", JSON.stringify({
+                id
+            }));
+        }
+        requestAnimationFrame(()=>{
+            draggedId = id;
+        });
+    }
+    function onItemDragOver(e, columnId, overId, nextId) {
+        if (config.isDroppable && !config.isDroppable(columnId)) return;
+        e.preventDefault();
+        e.stopPropagation();
+        if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+        const rect = e.currentTarget.getBoundingClientRect();
+        const insertAfter = e.clientY > rect.top + rect.height / 2;
+        const targetOverId = insertAfter ? nextId : overId;
+        if (targetOverId === draggedId) return;
+        if (dragOver?.columnId === columnId && dragOver.overId === targetOverId) return;
+        dragOver = {
+            columnId,
+            overId: targetOverId
+        };
+    }
+    function onColumnDragOver(e, columnId) {
+        if (config.isDroppable && !config.isDroppable(columnId)) return;
+        e.preventDefault();
+        if (e.dataTransfer) e.dataTransfer.dropEffect = "move";
+        if (dragOver?.columnId !== columnId || dragOver.overId !== null) {
+            dragOver = {
+                columnId,
+                overId: null
+            };
+        }
+    }
+    function onDragLeave(e) {
+        if (!e.currentTarget.contains(e.relatedTarget)) {
+            dragOver = null;
+        }
+    }
+    function clearDragOver() {
+        dragOver = null;
+    }
+    function resetDrag() {
+        draggedId = null;
+        dragOver = null;
+    }
+    function manualInsertIndex(column, overId, columnId) {
+        const overIndex = overId ? column.findIndex((item)=>config.getId(item) === overId) : -1;
+        if (overIndex !== -1) return overIndex;
+        return config.dropAtTop?.(columnId) ? 0 : column.length;
+    }
+    function onDrop(e, targetColumnId) {
+        e.preventDefault();
+        if (config.isDroppable && !config.isDroppable(targetColumnId)) return;
+        const overId = dragOver?.overId ?? null;
+        dragOver = null;
+        draggedId = null;
+        const id = readDraggedId(e);
+        const item = id ? config.items().find((entry)=>config.getId(entry) === id) : undefined;
+        if (!item) return;
+        const movedId = config.getId(item);
+        if (config.getSortKey() !== "manual") {
+            if (config.getColumn(item) !== targetColumnId) {
+                void config.onMove(movedId, {
+                    columnId: targetColumnId
+                });
+            }
+            return;
+        }
+        const column = config.getColumnItems(targetColumnId).filter((entry)=>config.getId(entry) !== movedId);
+        const index = manualInsertIndex(column, overId, targetColumnId);
+        const before = column[index - 1];
+        const after = column[index];
+        const orderOf = config.boardOrder;
+        void config.onMove(movedId, {
+            columnId: targetColumnId,
+            ...orderOf ? {
+                boardOrder: boardOrderAt(column, index, orderOf)
+            } : {},
+            beforeId: before === undefined ? null : config.getId(before),
+            afterId: after === undefined ? null : config.getId(after)
+        });
+    }
+    return {
+        get draggedId () {
+            return draggedId;
+        },
+        get dragOver () {
+            return dragOver;
+        },
+        set dragOver (value){
+            dragOver = value;
+        },
+        onDragStart,
+        onItemDragOver,
+        onColumnDragOver,
+        onDragLeave,
+        onDrop,
+        clearDragOver,
+        resetDrag,
+        isDragSource (id) {
+            return draggedId === id;
+        },
+        showIndicatorBefore (columnId, itemId) {
+            return dragOver?.columnId === columnId && dragOver.overId === itemId && draggedId !== null;
+        },
+        showIndicatorEnd (columnId) {
+            return dragOver?.columnId === columnId && dragOver.overId === null && draggedId !== null;
+        }
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heyramzi/ui",
-  "version": "2.9.0",
+  "version": "2.10.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",
@@ -14,7 +14,8 @@
     "scripts",
     "package.json",
     "README.md",
-    "COMPONENTS.md"
+    "COMPONENTS.md",
+    "dist"
   ],
   "type": "module",
   "svelte": "./src/index.ts",
@@ -26,6 +27,7 @@
     ".": {
       "svelte": "./src/index.ts",
       "types": "./src/index.ts",
+      "node": "./dist/index.js",
       "default": "./src/index.ts"
     },
     "./package.json": "./package.json",
@@ -33,16 +35,19 @@
     "./brand": {
       "svelte": "./src/brand/index.ts",
       "types": "./src/brand/index.ts",
+      "node": "./dist/brand/index.js",
       "default": "./src/brand/index.ts"
     },
     "./lib/*.js": {
       "svelte": "./src/lib/*.ts",
       "types": "./src/lib/*.ts",
+      "node": "./dist/lib/*.js",
       "default": "./src/lib/*.ts"
     },
     "./lib/*": {
       "svelte": "./src/lib/*.ts",
       "types": "./src/lib/*.ts",
+      "node": "./dist/lib/*.js",
       "default": "./src/lib/*.ts"
     },
     "./border-beam": {
@@ -64,6 +69,7 @@
     "./effects/animated-beam": {
       "svelte": "./src/effects/animated-beam/index.ts",
       "types": "./src/effects/animated-beam/index.ts",
+      "node": "./dist/effects/animated-beam/index.js",
       "default": "./src/effects/animated-beam/index.ts"
     },
     "./effects/spotlight": {
@@ -81,16 +87,19 @@
     "./effects/image-reveal": {
       "svelte": "./src/effects/image-reveal/index.ts",
       "types": "./src/effects/image-reveal/index.ts",
+      "node": "./dist/effects/image-reveal/index.js",
       "default": "./src/effects/image-reveal/index.ts"
     },
     "./effects/shader-gradient": {
       "svelte": "./src/effects/shader-gradient/index.ts",
       "types": "./src/effects/shader-gradient/index.ts",
+      "node": "./dist/effects/shader-gradient/index.js",
       "default": "./src/effects/shader-gradient/index.ts"
     },
     "./effects/reveal": {
       "svelte": "./src/effects/reveal/index.ts",
       "types": "./src/effects/reveal/index.ts",
+      "node": "./dist/effects/reveal/index.js",
       "default": "./src/effects/reveal/index.ts"
     },
     "./effects/progressive-blur": {
@@ -108,16 +117,19 @@
     "./effects/magnetic": {
       "svelte": "./src/effects/magnetic/magnetic.ts",
       "types": "./src/effects/magnetic/magnetic.ts",
+      "node": "./dist/effects/magnetic/magnetic.js",
       "default": "./src/effects/magnetic/magnetic.ts"
     },
     "./icons/sf-symbols": {
       "svelte": "./src/icons/sf-symbols.ts",
       "types": "./src/icons/sf-symbols.ts",
+      "node": "./dist/icons/sf-symbols.js",
       "default": "./src/icons/sf-symbols.ts"
     },
     "./icons/trades": {
       "svelte": "./src/icons/trades.ts",
       "types": "./src/icons/trades.ts",
+      "node": "./dist/icons/trades.js",
       "default": "./src/icons/trades.ts"
     },
     "./icons/TradeIcon": {
@@ -133,6 +145,7 @@
       "default": "./src/animations/index.css"
     },
     "./animations/text-swap": {
+      "node": "./dist/animations/text-swap.js",
       "default": "./src/animations/text-swap.ts"
     },
     "./animations/*": {
@@ -141,16 +154,19 @@
     "./shadcn/hooks/*": {
       "svelte": "./src/shadcn/hooks/*.ts",
       "types": "./src/shadcn/hooks/*.ts",
+      "node": "./dist/shadcn/hooks/*.js",
       "default": "./src/shadcn/hooks/*.ts"
     },
     "./shadcn/*": {
       "svelte": "./src/shadcn/*/index.ts",
       "types": "./src/shadcn/*/index.ts",
+      "node": "./dist/shadcn/*/index.js",
       "default": "./src/shadcn/*/index.ts"
     },
     "./components/*": {
       "svelte": "./src/components/*/index.ts",
       "types": "./src/components/*/index.ts",
+      "node": "./dist/components/*/index.js",
       "default": "./src/components/*/index.ts"
     },
     "./shadcn/utilities.css": {
@@ -160,48 +176,57 @@
     "./ai": {
       "svelte": "./src/ai/index.ts",
       "types": "./src/ai/index.ts",
+      "node": "./dist/ai/index.js",
       "default": "./src/ai/index.ts"
     },
     "./ai/*": {
       "svelte": "./src/ai/*/index.ts",
       "types": "./src/ai/*/index.ts",
+      "node": "./dist/ai/*/index.js",
       "default": "./src/ai/*/index.ts"
     },
     "./agents": {
       "svelte": "./src/agents/index.ts",
       "types": "./src/agents/index.ts",
+      "node": "./dist/agents/index.js",
       "default": "./src/agents/index.ts"
     },
     "./agents/demo.svelte": "./src/agents/demo.svelte",
     "./status": {
       "svelte": "./src/status/index.ts",
       "types": "./src/status/index.ts",
+      "node": "./dist/status/index.js",
       "default": "./src/status/index.ts"
     },
     "./panel": {
       "svelte": "./src/panel/index.ts",
       "types": "./src/panel/index.ts",
+      "node": "./dist/panel/index.js",
       "default": "./src/panel/index.ts"
     },
     "./record": {
       "svelte": "./src/record/index.ts",
       "types": "./src/record/index.ts",
+      "node": "./dist/record/index.js",
       "default": "./src/record/index.ts"
     },
     "./record/demo.svelte": "./src/record/record-demo.svelte",
     "./thread": {
       "svelte": "./src/thread/index.ts",
       "types": "./src/thread/index.ts",
+      "node": "./dist/thread/index.js",
       "default": "./src/thread/index.ts"
     },
     "./inbox": {
       "svelte": "./src/inbox/index.ts",
       "types": "./src/inbox/index.ts",
+      "node": "./dist/inbox/index.js",
       "default": "./src/inbox/index.ts"
     },
     "./work": {
       "svelte": "./src/work/index.ts",
       "types": "./src/work/index.ts",
+      "node": "./dist/work/index.js",
       "default": "./src/work/index.ts"
     },
     "./work/kanban": {
@@ -227,11 +252,13 @@
     "./work/inbox": {
       "svelte": "./src/work/inbox/index.ts",
       "types": "./src/work/inbox/index.ts",
+      "node": "./dist/work/inbox/index.js",
       "default": "./src/work/inbox/index.ts"
     },
     "./work/presets/sales": {
       "svelte": "./src/work/presets/sales.ts",
       "types": "./src/work/presets/sales.ts",
+      "node": "./dist/work/presets/sales.js",
       "default": "./src/work/presets/sales.ts"
     },
     "./work/detail": {
@@ -242,6 +269,7 @@
     "./work/docs": {
       "svelte": "./src/work/docs/index.ts",
       "types": "./src/work/docs/index.ts",
+      "node": "./dist/work/docs/index.js",
       "default": "./src/work/docs/index.ts"
     },
     "./work/docs-demo.svelte": "./src/work/docs/docs-demo.svelte",
@@ -254,24 +282,29 @@
     "./charts": {
       "svelte": "./src/charts/index.ts",
       "types": "./src/charts/index.ts",
+      "node": "./dist/charts/index.js",
       "default": "./src/charts/index.ts"
     },
     "./charts/dashboard": {
       "svelte": "./src/charts/dashboard/index.ts",
       "types": "./src/charts/dashboard/index.ts",
+      "node": "./dist/charts/dashboard/index.js",
       "default": "./src/charts/dashboard/index.ts"
     },
     "./slides": {
       "types": "./src/slides/index.ts",
       "svelte": "./src/slides/index.ts",
+      "node": "./dist/slides/index.js",
       "default": "./src/slides/index.ts"
     },
     "./slides/model": {
       "types": "./src/slides/model.ts",
+      "node": "./dist/slides/model.js",
       "default": "./src/slides/model.ts"
     },
     "./slides/export": {
       "types": "./src/slides/export/index.ts",
+      "node": "./dist/slides/export/index.js",
       "default": "./src/slides/export/index.ts"
     },
     "./slides/demo": {
@@ -287,18 +320,22 @@
     "./editor": {
       "svelte": "./src/editor/index.ts",
       "types": "./src/editor/index.ts",
+      "node": "./dist/editor/index.js",
       "default": "./src/editor/index.ts"
     },
     "./editor/serializer": {
       "types": "./src/editor/serializer.ts",
+      "node": "./dist/editor/serializer.js",
       "default": "./src/editor/serializer.ts"
     },
     "./editor/markdown": {
       "types": "./src/editor/markdown.ts",
+      "node": "./dist/editor/markdown.js",
       "default": "./src/editor/markdown.ts"
     },
     "./editor/block-ops": {
       "types": "./src/editor/block-ops.ts",
+      "node": "./dist/editor/block-ops.js",
       "default": "./src/editor/block-ops.ts"
     },
     "./editor/inline-editor": {
@@ -312,11 +349,13 @@
     "./onboarding": {
       "svelte": "./src/onboarding/index.ts",
       "types": "./src/onboarding/index.ts",
+      "node": "./dist/onboarding/index.js",
       "default": "./src/onboarding/index.ts"
     },
     "./onboarding/stores": {
       "svelte": "./src/onboarding/stores.ts",
       "types": "./src/onboarding/stores.ts",
+      "node": "./dist/onboarding/stores.js",
       "default": "./src/onboarding/stores.ts"
     },
     "./onboarding/demo": {
@@ -327,6 +366,7 @@
     "./canvas": {
       "types": "./src/canvas/index.ts",
       "svelte": "./src/canvas/index.ts",
+      "node": "./dist/canvas/index.js",
       "default": "./src/canvas/index.ts"
     },
     "./canvas/*.svelte": {
@@ -338,6 +378,7 @@
     "./canvas/*.js": {
       "types": "./src/canvas/*.ts",
       "svelte": "./src/canvas/*.ts",
+      "node": "./dist/canvas/*.js",
       "default": "./src/canvas/*.ts"
     }
   },
@@ -416,6 +457,7 @@
     "sync:shadcn": "node scripts/sync-shadcn.mjs",
     "sync": "pnpm sync:transitions && pnpm sync:shadcn",
     "sync:check": "node scripts/sync-transitions.mjs --check && node scripts/sync-shadcn.mjs --check",
-    "check": "svelte-check --tsconfig ./tsconfig.json"
+    "check": "svelte-check --tsconfig ./tsconfig.json",
+    "build": "node ../../../vibe-kit/scripts/build-dist.mjs"
   }
 }

package/src/components/toolbar/toolbar-trigger.ts

@@ -15,9 +15,15 @@ export function toolbarTriggerClass({
   className,
 }: ToolbarTriggerOpts = {}): string {
   return cn(
-    "inline-flex cursor-pointer items-center gap-1.5 rounded-lg border border-border font-medium transition-colors active:translate-y-px",
+    // The outline button's edge: a real border plus the resting shadow. A `ring-1` hairline
+    // shares box-shadow with `shadow-btn` and drew a broken edge beside Display (26 Oct 2026).
+    "t-press inline-flex cursor-pointer items-center gap-1.5 rounded-lg border border-border font-medium shadow-btn transition-[background-color,border-color,color] duration-quick ease-smooth-out hover:border-foreground/15 motion-reduce:transition-none",
     "h-7 px-2.5 text-xs any-pointer-coarse:h-11 any-pointer-coarse:px-3",
-    active ? "bg-muted text-foreground" : "text-muted-foreground hover:text-foreground",
+    // Active is a selected state, so it may tint; the tint reads off the foreground and
+    // shows on the canvas, where bg-muted vanished.
+    active
+      ? "bg-foreground/6 text-foreground"
+      : "bg-card text-muted-foreground hover:bg-foreground/3 hover:text-foreground",
     className,
   );
 }

package/src/record/demo-data.ts

@@ -185,7 +185,7 @@ export const websiteEvents: RecordEvent[] = [
       { label: "Length", value: "45 min" },
       { label: "With", value: "Jane Roe, Tom Bell" },
     ],
-    href: "#call-scoping",
+    href: "#",
   },
   {
     id: "w3",
@@ -233,7 +233,7 @@ export const websiteEvents: RecordEvent[] = [
 export const website: RecordSummary = {
   id: "p-web",
   name: "Website rebuild",
-  href: "#project-web",
+  href: "#",
   stageKey: "sent",
   value: 12000,
   currency: "EUR",
@@ -254,7 +254,7 @@ export const website: RecordSummary = {
 export const audit: RecordSummary = {
   id: "p-audit",
   name: "Brand audit",
-  href: "#project-audit",
+  href: "#",
   stageKey: "lost",
   stageDetail: "Price",
   value: 4500,
@@ -272,7 +272,7 @@ export const audit: RecordSummary = {
 export const portal: RecordSummary = {
   id: "p-portal",
   name: "Booking portal",
-  href: "#project-portal",
+  href: "#",
   stageKey: "paid",
   value: 18000,
   paid: 18000,

package/src/record/record-demo.svelte

@@ -198,7 +198,7 @@
 					{#snippet header()}
 						<RecordHeader
 							title={website.name}
-							parent={{ label: "Marlow & Finch", href: "#client" }}
+							parent={{ label: "Marlow & Finch", href: "#" }}
 							stage={stage ? { label: stage.label, tone: stage.tone } : null}
 							facts={[
 								formatMoney(website.value ?? 0, "EUR", locale),
@@ -287,7 +287,7 @@
 					{#snippet header()}
 						<RecordHeader
 							title="Marlow & Finch"
-							parent={{ label: "Clients", href: "#clients" }}
+							parent={{ label: "Clients", href: "#" }}
 							facts={[
 								`Pipeline ${formatMoney(rollup.totals.EUR?.pipeline ?? 0, "EUR", locale, true)}`,
 								`Won ${formatMoney(rollup.totals.EUR?.won ?? 0, "EUR", locale, true)}`,