@ixfx/components 0.16.4 → 0.17.0

package/llms.txt

@@ -22,6 +22,7 @@ import '@ixfx/components/data-grid';
 - [data-display](docs-user/data-display.md): A debug data display component that renders key-value pairs from a plain object. Supports 7 inline render modes (`led`, `plot`, `plot-xy`, `plot-heat`, `plot-histogram`, `time-elapsed`, `hide`) via `c
 - [data-grid](docs-user/data-grid.md): A virtualised data grid with sortable/resizable/reorderable columns, single/multi selection, grouping, and inline cell editing. Handles 200+ rows with windowed rendering and keyboard navigation.
 - [data-table](docs-user/data-table.md): A key/value data table with responsive layout, hover details, and keyboard/tickle navigation.
+- [date-input](docs-user/date-input.md): Themed date or date-time input. Wraps the native picker, so keyboard entry, the calendar popup and localisation come from the browser; only the look follows the theme.
 - [detail-list](docs-user/detail-list.md): A list that scales horizontally, not vertically. Items are laid out in equal-width columns; they flow top→bottom down a column, then wrap to the top of the next column to the right. The component has 
 - [dock](docs-user/dock.md): Dockable, movable panels like VS Code / Photoshop. Drag a panel by its
 - [editable-label](docs-user/editable-label.md): Inline editable text components. `ixfx-editable-number` extends `ixfx-editable-label` with drag-to-adjust and fill-bar visualization.
@@ -42,6 +43,7 @@ import '@ixfx/components/data-grid';
 - [miller](docs-user/miller.md): A Miller column component displays hierarchical data as multiple vertical columns, like macOS Finder or email clients. Each column shows the children of the selected item in the previous column.
 - [multicol-list](docs-user/multicol-list.md): A faceted-filtering component: each column shows one property (facet) of the *same*
 - [narrowed-text](docs-user/narrowed-text.md): A filtered text selection component with inline search. Shows slotted items filtered by a query string as the user types.
+- [node-graph](docs-user/node-graph.md): A Svelte-Flow-style node editor: nodes on a pan/zoom canvas, wires between typed ports, and a magnetic connect gesture. Nodes are ordinary light-DOM elements, so you can put anything inside them — inc
 - [notifier](docs-user/notifier.md): A "lookless" app-wide notification system. `NotificationManager` is a singleton that owns notification state, queueing, and timing — it doesn't know how to draw anything. A `NotificationRenderer` (the
 - [pan-text](docs-user/pan-text.md): Pans overflowing text on hover or continuously in a loop. Use when a label is too long for its container and you want to reveal the full text without truncation.
 - [panel](docs-user/panel.md): An collapsible panel component with support for titles, icons, toolbars, and multiple visual variants.
@@ -68,6 +70,7 @@ import '@ixfx/components/data-grid';
 - [tree](docs-user/tree.md): Three components share a common `TreeComponent` interface: **`ixfx-tree-list`**, **`ixfx-miller-list`**, and **`ixfx-crumb-navigation`**. This document describes the shared API, plus component-specifi
 - [treemap](docs-user/treemap.md): `<ixfx-treemap-list>` — a nested-area (treemap) view over tree data. The zoom root fills the viewport; each node's rectangle is subdivided among its children by `valueAccessor` share. Clicking a branc
 - [twosplit-layout](docs-user/twosplit-layout.md): A Lit web component that lays out two elements within a container with a split bar to adjust their proportions.
+- [unit-input](docs-user/unit-input.md): One control for a number plus a unit: a number field joined to a unit picker, styled as a single input.
 - [util](docs-user/util.md): A tooltip component that renders a value with optional icon and formatted number display. Uses native render root (no shadow DOM).
 - [vertical-list](docs-user/vertical-list.md): A scrollable vertical list of items with selection, keyboard navigation, and incremental search. Items can be plain `<li>` elements declared in HTML or rich custom elements added programmatically. Lar
 - [xy-pad](docs-user/xy-pad.md): A 2D touch-friendly XY pad for controlling two parameters simultaneously. Each axis supports independent linear/logarithmic scaling.

package/package.json

@@ -1,12 +1,17 @@
 {
   "name": "@ixfx/components",
   "type": "module",
-  "version": "0.16.4",
+  "version": "0.17.0",
   "packageManager": "pnpm@10.0.0",
   "description": "Web components for ixfx — Lit-based UI toolkit",
   "author": "Clint Heyer",
   "license": "MIT",
-  "keywords": ["web-components", "lit", "ixfx", "ui"],
+  "keywords": [
+    "web-components",
+    "lit",
+    "ixfx",
+    "ui"
+  ],
   "exports": {
     "./style.css": "./dist/style.css",
     ".": {
@@ -29,6 +34,14 @@
       "types": "./dist/checkbox.d.ts",
       "import": "./dist/checkbox.js"
     },
+    "./date-input": {
+      "types": "./dist/date-input.d.ts",
+      "import": "./dist/date-input.js"
+    },
+    "./unit-input": {
+      "types": "./dist/unit-input.d.ts",
+      "import": "./dist/unit-input.js"
+    },
     "./checked-select": {
       "types": "./dist/checked-select.d.ts",
       "import": "./dist/checked-select.js"
@@ -93,6 +106,10 @@
       "types": "./dist/narrowed-text.d.ts",
       "import": "./dist/narrowed-text.js"
     },
+    "./node-graph": {
+      "types": "./dist/node-graph.d.ts",
+      "import": "./dist/node-graph.js"
+    },
     "./panel": {
       "types": "./dist/panel.d.ts",
       "import": "./dist/panel.js"
@@ -217,7 +234,9 @@
     "docs-user",
     "llms.txt"
   ],
-  "engines": { "node": ">=20" },
+  "engines": {
+    "node": ">=20"
+  },
   "scripts": {
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
@@ -244,36 +263,40 @@
     "lit": "^3.0.0"
   },
   "peerDependenciesMeta": {
-    "lit": { "optional": false }
+    "lit": {
+      "optional": false
+    }
   },
   "dependencies": {
-    "@clinth/ui-commands": "1.1.1",
-    "@clinth/vcanvas": "0.0.5",
-    "@ixfx/arrays": "0.56.14",
-    "@ixfx/collections": "0.56.14",
-    "@ixfx/core": "0.56.14",
-    "@ixfx/dom": "0.56.14",
-    "@ixfx/flow": "0.56.14",
-    "@ixfx/geometry": "0.56.14",
-    "@ixfx/modulation": "0.56.14",
-    "@ixfx/numbers": "0.56.14",
-    "@ixfx/visual": "0.56.14",
+    "@clinth/ui-commands": "1.1.2",
+    "@clinth/vcanvas": "0.0.6",
+    "@ixfx/arrays": "0.56.21",
+    "@ixfx/collections": "0.56.21",
+    "@ixfx/core": "0.56.21",
+    "@ixfx/dom": "0.56.21",
+    "@ixfx/flow": "0.56.21",
+    "@ixfx/geometry": "0.56.21",
+    "@ixfx/modulation": "0.56.21",
+    "@ixfx/numbers": "0.56.21",
+    "@ixfx/visual": "0.56.21",
     "fzf": "0.5.2"
   },
   "devDependencies": {
-    "@antfu/eslint-config": "^9.3.0",
-    "@tsdown/css": "0.22.14",
+    "@antfu/eslint-config": "^10.0.0",
+    "@dagrejs/dagre": "3.1.3",
+    "@tsdown/css": "0.23.7",
     "@typescript/native": "npm:typescript@^7.0.2",
-    "eslint": "10.8.1",
+    "eslint": "10.14.0",
     "eslint-plugin-format": "2.0.1",
-    "globals": "17.9.0",
-    "happy-dom": "^20.14.0",
-    "knip": "6.32.0",
+    "globals": "17.14.0",
+    "happy-dom": "^21.0.4",
+    "knip": "6.44.2",
+    "libavoid-js": "0.5.0-beta.5",
     "lit": "3.3.3",
-    "tsdown": "0.22.14",
+    "tsdown": "0.23.7",
     "typescript": "npm:@typescript/typescript6@6.0.2",
-    "typescript-eslint": "8.66.0",
-    "vite": "8.2.1",
-    "vitest": "^5.0.0"
+    "typescript-eslint": "8.72.2",
+    "vite": "8.3.7",
+    "vitest": "^5.1.0"
   }
 }

package/bundle/rolldown-runtime-CEoa-xHZ.js

@@ -1 +0,0 @@
-var e=Object.defineProperty,t=(t,n)=>{let r={};for(var i in t)e(r,i,{get:t[i],enumerable:!0});return n||e(r,Symbol.toStringTag,{value:`Module`}),r},n=(e=>typeof require<`u`?require:typeof Proxy<`u`?new Proxy(e,{get:(e,t)=>(typeof require<`u`?require:e)[t]}):e)(function(e){if(typeof require<`u`)return require.apply(this,arguments);throw Error('Calling `require` for "'+e+"\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.")});export{n,t};

package/dist/interaction-E-uMGHkJ.js

@@ -1,3 +0,0 @@
-import "./tickled-controller-D-HZymaZ.js";
-import "./tickled-styles-BrAHEj1q.js";
-import "./list-native-drag-controller-CcXoS0YX.js";

package/dist/rolldown-runtime-D7D4PA-g.js

@@ -1,13 +0,0 @@
-//#region \0rolldown/runtime.js
-var __defProp = Object.defineProperty;
-var __exportAll = (all, no_symbols) => {
-	let target = {};
-	for (var name in all) __defProp(target, name, {
-		get: all[name],
-		enumerable: true
-	});
-	if (!no_symbols) __defProp(target, Symbol.toStringTag, { value: "Module" });
-	return target;
-};
-//#endregion
-export { __exportAll as t };