@adia-ai/web-components 0.8.39 → 0.8.41

package/core/dom.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Structural node/element guards — `nodeType`-based, so they hold under DOM
+ * shims (linkedom via custom-elements-ssr) where `Node`/`Element` are not
+ * globals and a bare `instanceof` throws (gh#1436).
+ */
+
+/** True for any DOM node (anything with a numeric `nodeType`). */
+export declare function isNode(v: unknown): v is Node;
+
+/** True for ELEMENT_NODE (nodeType 1) only. */
+export declare function isElement(v: unknown): v is Element;

package/core/dom.js

@@ -0,0 +1,34 @@
+/**
+ * AdiaUI DOM guards — structural node/element tests that survive DOM shims.
+ *
+ * Why (gh#1436): under SSR shims such as linkedom via `custom-elements-ssr`,
+ * only `HTMLElement` is installed as a global — `Node`, `Element`, `Text`,
+ * `DocumentFragment` are not — so a bare `v instanceof Node` is a
+ * `ReferenceError`, not `false`. Testing the wire shape (`nodeType`) instead
+ * of the constructor identity works in browsers, happy-dom, and linkedom
+ * alike, and also matches nodes from another realm (iframe, DOMParser
+ * document) that `instanceof` against the main-window constructor would
+ * reject. Same failure shape as
+ * `.claude/skills/ssr-compatibility/references/guard-patterns.md` §1.
+ *
+ * Use these anywhere the framework accepts "a node or something else"
+ * (renderer return values, `ref` arguments, event targets) instead of a bare
+ * `instanceof <DOM constructor>`.
+ */
+
+/**
+ * @param {unknown} v
+ * @returns {v is Node}
+ */
+export function isNode(v) {
+  return v != null && typeof v === 'object' && typeof (/** @type {any} */ (v).nodeType) === 'number';
+}
+
+/**
+ * ELEMENT_NODE (1) only — excludes text, comment, fragment and document nodes.
+ * @param {unknown} v
+ * @returns {v is Element}
+ */
+export function isElement(v) {
+  return isNode(v) && v.nodeType === 1;
+}

package/core/form.js

@@ -26,6 +26,13 @@
  *   data-msg-pattern="Invalid format"
  *   data-msg-minlength="Too short"
  *   data-msg-maxlength="Too long"
+ * Numeric-constraint siblings read by individual subclasses (input, tags-input):
+ *   data-msg-min / data-msg-max / data-msg-bad-input
+ * This whole `data-msg-*` family is deliberately EXEMPT from yaml `states:`/
+ * `props:` declaration — component-side config read by this shared mixin
+ * across 7+ consuming components, not a per-component state or prop.
+ * Disposition + rationale: primitive-authoring's yaml-contract.md
+ * (gh#1332/#1464, ADR-0060 §Decision 3).
  *
  * Manual control:
  *   el.validate()          → returns boolean, surfaces error

package/core/index.d.ts

@@ -15,3 +15,4 @@ export * from './register.js';
 // explicit form so the type barrel matches the runtime exactly.
 export { streams, whenStream } from './data-stream.js';
 export type { StreamEntry } from './data-stream.js';
+export * from './dom.js';

package/core/index.js

@@ -32,3 +32,4 @@ export * from './polyfills.js';
 export { streams, whenStream } from './data-stream.js';
 export * from './streams-bridge.js';
 export * from './responsive.js';
+export * from './dom.js';

package/core/responsive.js

@@ -49,9 +49,20 @@ const BP_VALS          = /** @type {number[]} */ (Object.values(BREAKPOINTS));
 
 // ─── Active-breakpoint signal ─────────────────────────────────────────────────
 
+// Feature-detect, never environment-detect (gh#1430): SSR DOM shims
+// (linkedom under custom-elements-ssr) define `window` as an object with
+// no layout engine — `innerWidth` is undefined and `matchMedia` is absent —
+// so `typeof window !== 'undefined'` passes there and the browser-only
+// call throws at module import, taking every importer (row/col/grid/
+// block/text) off the server. Same guard shape as
+// `.claude/skills/ssr-compatibility/references/guard-patterns.md` §1.
+
 function _detect() {
-  if (typeof window === 'undefined') return 'lg'; // SSR / non-browser fallback
-  const w = window.innerWidth;
+  // A real viewport reports a numeric width; SSR / DOM shims / non-browser
+  // runtimes don't → the widest-common fallback so server output isn't a
+  // mobile layout.
+  const w = typeof window !== 'undefined' ? window.innerWidth : undefined;
+  if (typeof w !== 'number') return 'lg';
   for (let i = BP_NAMES.length - 1; i >= 0; i--) {
     if (w >= BP_VALS[i]) return BP_NAMES[i];
   }
@@ -67,8 +78,9 @@ function _detect() {
  */
 export const breakpoint = signal(_detect());
 
-// Wire matchMedia listeners once (browser only, skipped in SSR / tests)
-if (typeof window !== 'undefined') {
+// Wire matchMedia listeners once — only where the API exists (browser).
+// Skipped under SSR shims and non-DOM tests; nothing to observe there.
+if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
   // One listener per non-zero threshold; fires whenever the viewport crosses
   // that boundary in either direction.
   for (let i = 1; i < BP_VALS.length; i++) {

package/core/template.js

@@ -11,6 +11,7 @@
  */
 
 import { effect, isSignal } from './signals.js';
+import { isNode } from './dom.js';
 
 const [PART, KEY_MAP] = [Symbol(), Symbol()];
 
@@ -467,7 +468,7 @@ function applyValue(p, v) {
           c.appendChild(document.createTextNode(item ?? ''));
         }
       }
-    } else if (v instanceof Node) {
+    } else if (isNode(v)) {
       p.n.replaceWith(v);
       p.n = v;
     } else if (p.n[PART]) {