@ixfx/components 0.5.20 → 0.6.0

package/llms.txt

@@ -0,0 +1,57 @@
+# @ixfx/components
+> Web components for ixfx — Lit-based UI toolkit
+
+## Quick start
+```bash
+pnpm add @ixfx/components
+```
+```ts
+import '@ixfx/components/button';
+import '@ixfx/components/data-grid';
+```
+
+## Components
+- [ac-text](docs-user/ac-text.md): VS Code command-palette style autocomplete text input. Shows a popup with matching results as the user types.
+- [ac-token](docs-user/ac-token.md): Token/tag input with per-token autocomplete. Looks like a text box — committed tokens appear as inline chips, and a suggestion popup follows the typing cursor. Typical use cases are email To: fields a
+- [button](docs-user/button.md): Three related button components:
+- [checkbox](docs-user/checkbox.md): A custom checkbox with a diagonal line indicator and indeterminate state support. Uses shadow DOM with CSS variables for full appearance customization.
+- [colour-picker](docs-user/colour-picker.md): Two components for picking OKLCH colours. Use `ixfx-colour-picker` when you need a full inline picker; use `ixfx-colour-picker-popup` when you need a compact swatch that opens a picker in a popover.
+- [crumbs](docs-user/crumbs.md): Breadcrumb navigation with lazy-loading child support. Uses the same `TreeNode` / `TreeItem` data model as `ixfx-tree-list`, allowing easy swapping between the two components.
+- [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.
+- [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.
+- [form](docs-user/form.md): Primitives for typical form layout with responsive label positioning and data binding.
+- [grouped-item-lister](docs-user/grouped-item-lister.md): A meta-component that renders a typed item list using any sub-component you supply. Items can be displayed in a single sub-component (_ungrouped_ mode) or split into labelled groups, each with its own
+- [icons](docs-user/icons.md): A centralized SVG icon system for `@ixfx/components`. Icons are stored by name, can be overridden globally, and all components that use a given icon re-render automatically when it changes.
+- [incr-search](docs-user/incr-search.md): Utilities for incremental (type-ahead) search over data collections or DOM-backed lists.
+- [labelled-radial-input](docs-user/labelled-radial-input.md): A composite radial input that pairs an editable label (`ixfx-editable-number`) with a rotary dial (`ixfx-radial-input`). The two controls are always in sync — turning the dial updates the number, and 
+- [labelled-range-input](docs-user/labelled-range-input.md): A composite range input that pairs an editable label (`ixfx-editable-number`) with a slider (`ixfx-range-input`). The two controls are always in sync — dragging the slider updates the number, and edit
+- [led](docs-user/led.md): An LED indicator component with color mixing and optional blinking animation.
+- [menu](docs-user/menu.md): A custom menu system built on native HTML popovers with keyboard navigation, tickled focus management, and command routing.
+- [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.
+- [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.
+- [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
+- [panel](docs-user/panel.md): An collapsible panel component with support for titles, icons, toolbars, and multiple visual variants.
+- [plots](docs-user/plots.md): SVG-based plotting components for visualising data streams.
+- [polar-pad](docs-user/polar-pad.md): A circular pad for setting polar coordinates (angle + radius). The user clicks or drags within a circle to position a marker. The marker's position encodes an angle (degrees, 0 = right, clockwise) and
+- [radial-input](docs-user/radial-input.md): A rotary dial input component inspired by music production interfaces (Ableton Live, synthesiser knobs). Renders as a flattened arc SVG and responds to drag and keyboard input.
+- [range](docs-user/range.md): Range: Coloured bar that suggests values
+- [range-input](docs-user/range-input.md): A label-free, fully styled range slider wrapping `<input type="range">`. Supports horizontal and vertical orientations, CSS variable theming, gradient fills, custom thumb shapes, and an optional value
+- [rating](docs-user/rating.md): A rating input that renders a row of glyphs (star / heart / square). Supports half-step increments, keyboard control, per-rank theming via CSS variables, and prominence-based hover feedback. Clicking 
+- [select-horiz](docs-user/select-horiz.md): A horizontally scrolling, snap-to-center single-item picker. Children are ordinary elements you provide — the component doesn't render its own item markup, it just lays them out with scroll-snap, keep
+- [slider-input](docs-user/slider-input.md): A linear SVG-based slider. Supports horizontal and vertical orientations, three value modes (single/dual/triple), three single-mode styles (range/bipolar/unipolar), triangle/needle/dot markers, and `v
+- [snackbar](docs-user/snackbar.md): A small floating toolbar anchored in visual proximity to another element on the page (the "target"), built on the native Popover and CSS Anchor Positioning APIs.
+- [snap-container](docs-user/snap-container.md): A container that positions its child element at configurable snap positions along an axis. The child can be dragged, clicked to snap, or controlled via keyboard.
+- [split-layout](docs-user/split-layout.md): A Lit web component that lays out two elements within a container with a split bar to adjust their proportions.
+- [swipe](docs-user/swipe.md): A touch-friendly swipe/nudge component. User taps and drags to generate a value in range [-1, 1]. Value is emitted only on pointer release.
+- [tabs](docs-user/tabs.md): A complete tabbed interface system using several coordinated components:
+- [timeline](docs-user/timeline.md): A canvas-based timeline component with tracks, events, zoom/pan, and vertical track resizing. Suitable for visualizing time-series data, event logs, or scheduling.
+- [transitory-label](docs-user/transitory-label.md): An inline text label that animates between values instead of changing instantly. Displays as `inline-block` and inherits text styling from its parent.
+- [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
+- [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.
+- [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.
+
+## Overviews
+- [user-catalog.md](docs-user/user-catalog.md)
+- [user-theming.md](docs-user/user-theming.md)

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@ixfx/components",
   "type": "module",
-  "version": "0.5.20",
-  "description": "",
-  "author": "",
-  "license": "ISC",
-  "keywords": [],
+  "version": "0.6.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"],
+  "sideEffects": false,
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -28,23 +30,31 @@
   "files": [
     "bundle",
     "dist",
-    "docs-user"
+    "docs-user",
+    "llms.txt"
   ],
+  "engines": { "node": ">=20" },
   "scripts": {
     "typecheck": "tsc --noEmit",
     "start": "vite serve",
     "dev": "vite serve",
     "lint": "eslint",
     "lint:fix": "eslint --fix",
-    "build:md": "node ./scripts/collate-docs.ts",
-    "build": "tsdown",
+    "build:md": "node --experimental-strip-types ./scripts/collate-docs.ts",
+    "build": "pnpm run build:md && tsdown",
     "rebuild": "rm -rf dist bundle && pnpm run build",
-    "publish-prepare": "pnpm run rebuild && pnpm run typecheck && pnpm run lint",
+    "publish-prepare": "pnpm run build:md && pnpm run rebuild && pnpm run typecheck && pnpm run lint",
     "preview": "vite preview",
     "build:demo": "vite build --config vite.static.config.js",
     "deploy:demo": "cd ixfxcomponents-demo && pnpm run deploy",
     "knip": "knip --config ./config/knip.json"
   },
+  "peerDependencies": {
+    "lit": "^3.0.0"
+  },
+  "peerDependenciesMeta": {
+    "lit": { "optional": false }
+  },
   "dependencies": {
     "@clinth/ui-commands": "1.1.0",
     "@clinth/vcanvas": "0.0.3",
@@ -57,8 +67,7 @@
     "@ixfx/modulation": "0.56.14",
     "@ixfx/numbers": "0.56.14",
     "@ixfx/visual": "0.56.14",
-    "fzf": "0.5.2",
-    "lit": "3.3.3"
+    "fzf": "0.5.2"
   },
   "devDependencies": {
     "@antfu/eslint-config": "^9.3.0",
@@ -68,6 +77,7 @@
     "eslint-plugin-format": "2.0.1",
     "globals": "17.9.0",
     "knip": "6.32.0",
+    "lit": "3.3.3",
     "tsdown": "0.22.14",
     "typescript": "npm:@typescript/typescript6@6.0.2",
     "typescript-eslint": "8.66.0",