@vanelsas/baredom 2.8.0 → 3.0.0

package/CHANGELOG.md

@@ -2,6 +2,51 @@
 
 All notable changes to BareDOM will be documented in this file.
 
+## [3.0.0] - 2026-05-12
+
+### Added
+
+- **x-trace-history** — A time-travel debugger for BareDOM components. Records every CustomEvent, attribute mutation, instance-field write, and lifecycle callback as plain JS records with a stable schema. Floating dock with cross-instance lanes, scrubber, synchronous cause→effect causality DAG view, heatmap density rendering for animation-heavy lanes, full-text search across recorded values, bounded recording sessions, and JSON export/import. Ships as a separate ESM module (`@vanelsas/baredom/x-trace-history`) activated by `?baredom-trace-history` URL param or `window.BAREDOM_TRACE_HISTORY = true` — zero overhead when off. TypeScript declarations (`TraceRecord` discriminated union + `window.BareDOM.traceHistory` console API) included. See [`docs/x-trace-history.md`](docs/x-trace-history.md) and [`docs/x-trace-history-schema.md`](docs/x-trace-history-schema.md).
+- **Standalone trace viewer** — `public/viewer.html` deployed alongside the demo site for sharing recorded traces. Drag-drop a `.trace.json` file or pass `?trace=<base64>` to load a trace into the dock.
+- **Adapter integration tests** — React (`adapters/react/test-app/`) and Angular (`adapters/angular/test-app/`) test-apps now exercise the trace-history dock end-to-end, with dev-tool guidance added to each adapter's README and main doc.
+- **Dispatch + lifecycle hook points** — `baredom.utils.dom` and `baredom.utils.component` expose `*trace-hook*` / `*lifecycle-hook*` extension atoms gating instrumentation of every CustomEvent dispatch, attribute mutation, instance-field write, and lifecycle callback. One nil-check cost when no recorder is installed.
+
+### Fixed
+
+- **x-select** — Slotted `<option selected>` default no longer gets stomped on render when the host has no `value` attribute. An explicit `value` attribute still overrides the slotted default.
+
+### Changed
+
+- **Tooling** — Sibling demo build outputs (`bare-demo/public/js/`, `bare-html/js/`, etc.), the Angular CLI cache, and the clj-kondo cache are now correctly gitignored. Adapter test-app `package-lock.json` files are tracked for reproducible smoke-test installs.
+
+## [2.9.0] - 2026-05-09
+
+### Added
+
+- **x-spotlight-card** — Card surface with a cursor-following spotlight highlight (motion-respecting, theme-aware).
+- **x-confetti** — Imperative celebration burst component with canvas particles.
+- **x-kbd** — Platform-aware keyboard key / shortcut display.
+- **x-otp-input** — Form-associated OTP / verification-code input.
+- **x-proximity-list** — Dock-effect list with proximity scaling.
+
+### Changed
+
+- **Centralized component registration** — `baredom.registry` is now the single source of truth for the full component set; `baredom.core/start!` and `baredom.exports.all/init` both consume the same vector.
+- **Overlay listener registry** — Replaced overlay magic-string listener keys with `baredom.utils.overlay/attach-listener!`, eliminating drift between add/remove sites.
+- **Pure model layer expanded** — Pointer-coord math moved out of `x-color-picker` into the model layer; coordinate math moved out of `x-chart` into the model layer; series-point computation in `x-chart` is now pure.
+- **Render-pipeline decomposition** — `render!` (and adjacent monolithic functions) decomposed into named phase helpers in: `x-chart`, `x-button`, `x-combobox`, `x-color-picker`, `x-scroll-timeline`, `x-particle-button`. Each `render!` now reads as a phase list (`render-orchestrator` pattern); long shadow builders split per the `shadow-builders` pattern; `x-color-picker` listener wiring moved to a single `listener-spec` table.
+- **`x-proximity-list` settling loop** — Replaced the JS-object settling flag with a `loop`/`recur` driver, removing mutable instance state.
+- **`x-date-picker`** — Force-close moved out of `render!` (audit Phase 5).
+- **Host attribute access** — Migrated to `du/*` wrappers across the remaining call sites (audit Wave 4c).
+- **Utils contracts** — Documented `baredom.utils.*` contracts; `normalize-prop-val` extracted as a reusable helper.
+- **shadow-cljs** — Bumped to 3.4.7.
+- **CLAUDE.md** — Added audit-derived guidance (named patterns, accessor tiers, error-recovery entries, function-size rule with orchestrator exemption).
+
+### Fixed
+
+- **x-chart** — Category x-axis off-by-one on the rightmost label.
+- **x-particle-button** — Palette no longer goes stale after a `variant` change; the cached palette is invalidated when variant attributes flip.
+
 ## [2.8.0] - 2026-05-06
 
 ### Added

package/README.md

@@ -244,7 +244,7 @@ BareDOM components are native HTML elements. Import, register, and use them in a
 
 ## Design Principles
 
-**Stateless.** No `atom`, no signal, no reactive state container lives inside a component. Every render is a pure function of the current attributes and properties. Debugging a component means inspecting attributes in DevTools — no hidden state to hunt for.
+**Stateless.** No `atom`, no signal, no reactive state container lives inside a component. Every render is a pure function of the current attributes and properties. Debugging a component means inspecting attributes in DevTools — no hidden state to hunt for. For deeper investigations, the optional [`x-trace-history`](./docs/x-trace-history.md) dev tool ships as a separate ESM module and records every dispatch, attribute change, and lifecycle callback as a navigable timeline with cause→effect chains. Load it with `<script type="module" src="…/x-trace-history.js">` and activate via `?baredom-trace-history`; zero cost when the flag is absent.
 
 **Standards-only.** BareDOM relies on Custom Elements v1, Shadow DOM v1, and ES modules — all natively supported in modern browsers. There are no polyfills required and no proprietary APIs to learn.
 

package/custom-elements.json

@@ -991,6 +991,65 @@
         "name" : "XSpacer"
       }
     } ]
+  }, {
+    "kind" : "javascript-module",
+    "path" : "dist/x-kbd.js",
+    "declarations" : [ {
+      "kind" : "class",
+      "name" : "XKbd",
+      "tagName" : "x-kbd",
+      "superclass" : {
+        "name" : "HTMLElement"
+      },
+      "members" : [ {
+        "kind" : "field",
+        "name" : "keys",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "separator",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "size",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "platform",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "label",
+        "type" : {
+          "text" : "string"
+        }
+      } ],
+      "events" : [ ],
+      "slots" : [ {
+        "name" : ""
+      } ]
+    } ],
+    "exports" : [ {
+      "kind" : "js",
+      "name" : "init",
+      "declaration" : {
+        "name" : "init"
+      }
+    }, {
+      "kind" : "custom-element-definition",
+      "name" : "x-kbd",
+      "declaration" : {
+        "name" : "XKbd"
+      }
+    } ]
   }, {
     "kind" : "javascript-module",
     "path" : "dist/x-liquid-dock.js",
@@ -1739,6 +1798,76 @@
         "name" : "XDivider"
       }
     } ]
+  }, {
+    "kind" : "javascript-module",
+    "path" : "dist/x-proximity-list.js",
+    "declarations" : [ {
+      "kind" : "class",
+      "name" : "XProximityList",
+      "tagName" : "x-proximity-list",
+      "superclass" : {
+        "name" : "HTMLElement"
+      },
+      "members" : [ {
+        "kind" : "field",
+        "name" : "direction",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "radius",
+        "type" : {
+          "text" : "number"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "maxScale",
+        "type" : {
+          "text" : "number"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "lift",
+        "type" : {
+          "text" : "number"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "gap",
+        "type" : {
+          "text" : "number"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "disabled",
+        "type" : {
+          "text" : "boolean"
+        }
+      } ],
+      "events" : [ {
+        "name" : "x-proximity-list-select",
+        "type" : {
+          "text" : "CustomEvent"
+        }
+      } ],
+      "slots" : [ {
+        "name" : ""
+      } ]
+    } ],
+    "exports" : [ {
+      "kind" : "js",
+      "name" : "init",
+      "declaration" : {
+        "name" : "init"
+      }
+    }, {
+      "kind" : "custom-element-definition",
+      "name" : "x-proximity-list",
+      "declaration" : {
+        "name" : "XProximityList"
+      }
+    } ]
   }, {
     "kind" : "javascript-module",
     "path" : "dist/x-avatar.js",
@@ -2419,6 +2548,125 @@
         "name" : "XTab"
       }
     } ]
+  }, {
+    "kind" : "javascript-module",
+    "path" : "dist/x-confetti.js",
+    "declarations" : [ {
+      "kind" : "class",
+      "name" : "XConfetti",
+      "tagName" : "x-confetti",
+      "superclass" : {
+        "name" : "HTMLElement"
+      },
+      "members" : [ {
+        "kind" : "field",
+        "name" : "disabled",
+        "type" : {
+          "text" : "boolean"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "spread",
+        "type" : {
+          "text" : "number"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "mode",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "colors",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "duration",
+        "type" : {
+          "text" : "number"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "autoFire",
+        "type" : {
+          "text" : "boolean"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "gravity",
+        "type" : {
+          "text" : "number"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "count",
+        "type" : {
+          "text" : "number"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "origin",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "velocity",
+        "type" : {
+          "text" : "number"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "shapes",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "method",
+        "name" : "fire",
+        "return" : {
+          "type" : {
+            "text" : "void"
+          }
+        },
+        "parameters" : [ {
+          "name" : "options",
+          "type" : {
+            "text" : "Record<string, any>"
+          }
+        } ]
+      } ],
+      "events" : [ {
+        "name" : "x-confetti-fire",
+        "type" : {
+          "text" : "CustomEvent"
+        }
+      }, {
+        "name" : "x-confetti-end",
+        "type" : {
+          "text" : "CustomEvent"
+        }
+      } ],
+      "slots" : [ {
+        "name" : ""
+      } ]
+    } ],
+    "exports" : [ {
+      "kind" : "js",
+      "name" : "init",
+      "declaration" : {
+        "name" : "init"
+      }
+    }, {
+      "kind" : "custom-element-definition",
+      "name" : "x-confetti",
+      "declaration" : {
+        "name" : "XConfetti"
+      }
+    } ]
   }, {
     "kind" : "javascript-module",
     "path" : "dist/x-chip.js",
@@ -5172,6 +5420,154 @@
         "name" : "XI18n"
       }
     } ]
+  }, {
+    "kind" : "javascript-module",
+    "path" : "dist/x-otp-input.js",
+    "declarations" : [ {
+      "kind" : "class",
+      "name" : "XOtpInput",
+      "tagName" : "x-otp-input",
+      "superclass" : {
+        "name" : "HTMLElement"
+      },
+      "members" : [ {
+        "kind" : "field",
+        "name" : "mask",
+        "type" : {
+          "text" : "boolean"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "placeholder",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "disabled",
+        "type" : {
+          "text" : "boolean"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "name",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "value",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "readonly",
+        "type" : {
+          "text" : "boolean"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "type",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "label",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "autofocus",
+        "type" : {
+          "text" : "boolean"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "length",
+        "type" : {
+          "text" : "number"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "error",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "required",
+        "type" : {
+          "text" : "boolean"
+        }
+      }, {
+        "kind" : "method",
+        "name" : "focus",
+        "return" : {
+          "type" : {
+            "text" : "void"
+          }
+        }
+      }, {
+        "kind" : "method",
+        "name" : "clear",
+        "return" : {
+          "type" : {
+            "text" : "void"
+          }
+        }
+      }, {
+        "kind" : "method",
+        "name" : "checkValidity",
+        "return" : {
+          "type" : {
+            "text" : "boolean"
+          }
+        }
+      }, {
+        "kind" : "method",
+        "name" : "reportValidity",
+        "return" : {
+          "type" : {
+            "text" : "boolean"
+          }
+        }
+      } ],
+      "events" : [ {
+        "name" : "x-otp-input-input",
+        "type" : {
+          "text" : "CustomEvent"
+        }
+      }, {
+        "name" : "x-otp-input-change",
+        "type" : {
+          "text" : "CustomEvent"
+        }
+      }, {
+        "name" : "x-otp-input-complete",
+        "type" : {
+          "text" : "CustomEvent"
+        }
+      } ],
+      "slots" : [ {
+        "name" : ""
+      } ]
+    } ],
+    "exports" : [ {
+      "kind" : "js",
+      "name" : "init",
+      "declaration" : {
+        "name" : "init"
+      }
+    }, {
+      "kind" : "custom-element-definition",
+      "name" : "x-otp-input",
+      "declaration" : {
+        "name" : "XOtpInput"
+      }
+    } ]
   }, {
     "kind" : "javascript-module",
     "path" : "dist/x-metaball-cursor.js",
@@ -6368,6 +6764,77 @@
         "name" : "XRadio"
       }
     } ]
+  }, {
+    "kind" : "javascript-module",
+    "path" : "dist/x-spotlight-card.js",
+    "declarations" : [ {
+      "kind" : "class",
+      "name" : "XSpotlightCard",
+      "tagName" : "x-spotlight-card",
+      "superclass" : {
+        "name" : "HTMLElement"
+      },
+      "members" : [ {
+        "kind" : "field",
+        "name" : "variant",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "radius",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "padding",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "color",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "intensity",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "size",
+        "type" : {
+          "text" : "string"
+        }
+      }, {
+        "kind" : "field",
+        "name" : "static",
+        "type" : {
+          "text" : "boolean"
+        }
+      } ],
+      "events" : [ ],
+      "slots" : [ {
+        "name" : ""
+      } ]
+    } ],
+    "exports" : [ {
+      "kind" : "js",
+      "name" : "init",
+      "declaration" : {
+        "name" : "init"
+      }
+    }, {
+      "kind" : "custom-element-definition",
+      "name" : "x-spotlight-card",
+      "declaration" : {
+        "name" : "XSpotlightCard"
+      }
+    } ]
   }, {
     "kind" : "javascript-module",
     "path" : "dist/x-gaussian-blur.js",

package/dist/baredom.d.ts

@@ -13,6 +13,7 @@ export { XRippleEffect } from "./x-ripple-effect";
 export { XPopover } from "./x-popover";
 export { XTableRow } from "./x-table-row";
 export { XSpacer } from "./x-spacer";
+export { XKbd } from "./x-kbd";
 export { XLiquidDock } from "./x-liquid-dock";
 export { XCheckbox } from "./x-checkbox";
 export { XToaster } from "./x-toaster";
@@ -23,6 +24,7 @@ export { XTimelineItem } from "./x-timeline-item";
 export { XNotificationCenter } from "./x-notification-center";
 export { XAvatarGroup } from "./x-avatar-group";
 export { XDivider } from "./x-divider";
+export { XProximityList } from "./x-proximity-list";
 export { XAvatar } from "./x-avatar";
 export { XFormField } from "./x-form-field";
 export { XBentoGrid } from "./x-bento-grid";
@@ -33,6 +35,7 @@ export { XOrganicShape } from "./x-organic-shape";
 export { XIcon } from "./x-icon";
 export { XBentoItem } from "./x-bento-item";
 export { XTab } from "./x-tab";
+export { XConfetti } from "./x-confetti";
 export { XChip } from "./x-chip";
 export { XAlert } from "./x-alert";
 export { XTheme } from "./x-theme";
@@ -69,6 +72,7 @@ export { XKineticCanvas } from "./x-kinetic-canvas";
 export { XTextArea } from "./x-text-area";
 export { XTypography } from "./x-typography";
 export { XI18n } from "./x-i18n";
+export { XOtpInput } from "./x-otp-input";
 export { XMetaballCursor } from "./x-metaball-cursor";
 export { XMenu } from "./x-menu";
 export { XLiquidGlass } from "./x-liquid-glass";
@@ -83,6 +87,7 @@ export { XScrollStack } from "./x-scroll-stack";
 export { XKineticFont } from "./x-kinetic-font";
 export { XSelect } from "./x-select";
 export { XRadio } from "./x-radio";
+export { XSpotlightCard } from "./x-spotlight-card";
 export { XGaussianBlur } from "./x-gaussian-blur";
 export { XTable } from "./x-table";
 export { XTableRow } from "./x-table-row";
@@ -99,3 +104,23 @@ export { XCurrencyField } from "./x-currency-field";
 export { XBreadcrumbs } from "./x-breadcrumbs";
 export { XCollapse } from "./x-collapse";
 export { XFieldset } from "./x-fieldset";
+export {
+  XTraceHistory,
+  BareDOMNamespace,
+  BareDOMTraceHistory,
+  TraceRecord,
+  TraceRecordBase,
+  TraceRecordDispatch,
+  TraceRecordInstanceFieldSet,
+  TraceRecordAttributeSet,
+  TraceRecordAttributeRemoved,
+  TraceRecordLifecycleConnected,
+  TraceRecordLifecycleDisconnected,
+  TraceRecordLifecycleAttributeChanged,
+  TraceComponentInfo,
+  TraceEnvelope,
+  TraceEnvelopeSession,
+  TraceSession,
+  TraceImport,
+  TraceSchemaVersion
+} from "./x-trace-history";