octane 0.2.3 → 0.2.4

package/dist/css.d.ts

@@ -3,6 +3,13 @@
  * falsy drops out). Octane's `class`/`className` semantics at every apply site.
  */
 export declare function normalizeClass(value: unknown): string;
+/**
+ * Append a later class source onto an earlier one. Used when a synthesized
+ * scope hash must share the element with a spread's class instead of replacing
+ * it. Both sides go through `normalizeClass` so arrays / objects compose the
+ * same way they would as a lone `class` value.
+ */
+export declare function mergeClass(left: unknown, right: unknown): string;
 export declare function styleName(name: string): string;
 /** @internal Development-only React-style inline CSS diagnostics. */
 export declare function devWarnStyleProperty(name: string, value: unknown, server: boolean): void;

package/dist/css.js

@@ -20,6 +20,13 @@ function normalizeClass(value) {
   }
   return str;
 }
+function mergeClass(left, right) {
+  const a = normalizeClass(left);
+  const b = normalizeClass(right);
+  if (!a) return b;
+  if (!b) return a;
+  return a + " " + b;
+}
 import { hyphenateStyleName } from "./dom-tables.js";
 const styleNameCache = /* @__PURE__ */ new Map();
 function styleName(name) {
@@ -84,6 +91,7 @@ function devWarnStyleCoercion(name, value) {
 export {
   devWarnStyleCoercion,
   devWarnStyleProperty,
+  mergeClass,
   normalizeClass,
   styleName
 };

package/dist/dom-tables.js

@@ -419,8 +419,13 @@ for (const base of [
   UNITLESS_STYLE_PROPS.add("moz" + c);
   UNITLESS_STYLE_PROPS.add("o" + c);
 }
+const unitlessStylePropCache = /* @__PURE__ */ new Map();
 function isUnitlessStyleProp(name) {
-  return UNITLESS_STYLE_PROPS.has(name.replaceAll("-", "").toLowerCase());
+  const cached = unitlessStylePropCache.get(name);
+  if (cached !== void 0) return cached;
+  const result = UNITLESS_STYLE_PROPS.has(name.replaceAll("-", "").toLowerCase());
+  unitlessStylePropCache.set(name, result);
+  return result;
 }
 function cssStyleValue(name, value) {
   if (typeof value === "number" && value !== 0 && name.charCodeAt(0) !== 45 && !isUnitlessStyleProp(name)) {

package/dist/runtime.d.ts

@@ -1217,7 +1217,12 @@ export declare function setHTML(el: Element, value: any): void;
 /** Complete validated write used by direct, spread, and html-only compiler paths. */
 export declare function setDangerouslySetInnerHTML(el: Element, value: any): void;
 /** Resolve source-ordered direct/spread raw-HTML writers and apply only the winner. */
-export declare function setDangerouslySetInnerHTMLSources(el: Element, sources: readonly (readonly [isSpread: boolean, sourceOrName: unknown, value?: unknown])[], ignoreSourceChildren?: boolean): void;
+export declare function setDangerouslySetInnerHTMLSources(el: Element, sources: readonly (readonly [
+    isSpread: boolean,
+    sourceOrName: unknown,
+    value?: unknown,
+    merge?: boolean
+])[], ignoreSourceChildren?: boolean): void;
 /** Stamp a compiler-proven non-nullish child onto a potential raw-HTML host. */
 export declare function markDangerouslySetInnerHTMLChildren(el: Element): void;
 export declare function attachRef(ref: any, el: Element | FragmentInstance | null, prevTarget?: Element | FragmentInstance | null): void;
@@ -1424,7 +1429,12 @@ export declare function setStyle(el: HTMLElement | SVGElement, value: any, prev:
 export declare function setStyleProperty(el: HTMLElement | SVGElement, name: string, value: any, staticCss: string, previous: any): void;
 /** Snapshot a JSX spread with own-enumerable Object.assign semantics. */
 export declare function snapshotSpread(value: unknown): Record<string, unknown> | null;
-type HostPropSource = readonly [isSpread: boolean, sourceOrName: unknown, value?: unknown];
+type HostPropSource = readonly [
+    isSpread: boolean,
+    sourceOrName: unknown,
+    value?: unknown,
+    merge?: boolean
+];
 /**
  * Resolve a spread-bearing compiled host's complete prop set before touching
  * the DOM. JSX spread merging is last-writer-wins, but aliases such as
@@ -1432,6 +1442,12 @@ type HostPropSource = readonly [isSpread: boolean, sourceOrName: unknown, value?
  * property. Canonical identities ensure a vanished earlier source cannot
  * remove an unchanged later winner, and hydration compares only the final
  * client value against the final server value.
+ *
+ * A synthesized scope-hash class (4th tuple flag) is not an authored later
+ * writer: after identity last-writer-wins, it composes onto the winning class
+ * instead of replacing a spread's class. An authored `class` beside a spread
+ * stays last-writer-wins because its hash is baked into that authored value
+ * and carries no merge flag.
  */
 export declare function setHostPropSources(el: Element, sources: readonly HostPropSource[], prev: Record<string, unknown> | undefined, scope: Scope, hasNestedChildren?: boolean): Record<string, unknown>;
 export declare function setSpread(el: Element, value: any, prev: any, mountScope?: Scope, skipDangerouslySetInnerHTML?: boolean, skipFormControls?: boolean): void;
@@ -1561,7 +1577,7 @@ export declare function setDefaultChecked(el: Element, value: unknown): void;
  * controlled value before its default fallback) while the compiler-owned
  * source bindings preserve authored evaluation order and single getter reads.
  */
-export declare function setFormControlSources(el: Element, sources: ReadonlyArray<readonly [boolean, unknown, unknown?]>): void;
+export declare function setFormControlSources(el: Element, sources: ReadonlyArray<readonly [boolean, unknown, unknown?, boolean?]>): void;
 interface PortalSlot {
     __kind: 'portalSlotSlot';
     block: Block | null;

package/dist/runtime.js

@@ -1554,12 +1554,17 @@ function journalDefaultValue(input) {
     journalAttr(input, "value");
   }
 }
+function radioCousins(input) {
+  if (input.form !== null) return input.form.elements;
+  const root = input.getRootNode();
+  return root.nodeType === 9 ? root.getElementsByName(input.name) : root.querySelectorAll('input[type="radio"]');
+}
 function journalRadioCousins(input) {
   const name = input.name;
-  const group = input.form !== null ? input.form.elements : typeof document !== "undefined" ? document.getElementsByName(name) : [];
+  const group = radioCousins(input);
   for (let i = 0; i < group.length; i++) {
     const other = group[i];
-    if (other === input || !other.checked || other.localName !== "input" || other.type !== "radio" || other.name !== name) {
+    if (other === input || !other.checked || other.localName !== "input" || other.type !== "radio" || other.name !== name || other.form !== input.form) {
       continue;
     }
     TRANSITION_JOURNAL.push(JOURNAL_PROP, other, "checked", true);
@@ -9688,7 +9693,13 @@ function coerceAttrValue(el, name, value) {
   }
   return v;
 }
-import { devWarnStyleCoercion, devWarnStyleProperty, normalizeClass, styleName } from "./css.js";
+import {
+  devWarnStyleCoercion,
+  devWarnStyleProperty,
+  mergeClass,
+  normalizeClass,
+  styleName
+} from "./css.js";
 function setClassName(el, value) {
   const cls = normalizeClass(value);
   const hydration = activeHydration();
@@ -9884,8 +9895,9 @@ function normalizedHostProp(el, rawName) {
 }
 function setHostPropSources(el, sources, prev, scope, hasNestedChildren = false) {
   const props = /* @__PURE__ */ new Map();
+  let classMerges = null;
   let sourceOrder = 0;
-  const record = (rawName, value) => {
+  function record(rawName, value) {
     if (typeof rawName !== "string") return;
     const order = sourceOrder++;
     const previous = props.get(rawName);
@@ -9895,10 +9907,15 @@ function setHostPropSources(el, sources, prev, scope, hasNestedChildren = false)
       firstOrder: previous?.firstOrder ?? order,
       lastOrder: order
     });
-  };
+  }
   for (const source of sources) {
     if (!source[0]) {
-      record(source[1], source[2]);
+      const rawName = source[1];
+      if (source[3] === true && typeof rawName === "string" && (rawName === "class" || rawName === "className")) {
+        (classMerges ??= []).push({ rawName, value: source[2], order: sourceOrder++ });
+        continue;
+      }
+      record(rawName, source[2]);
       continue;
     }
     const spread = source[1];
@@ -9924,6 +9941,22 @@ function setHostPropSources(el, sources, prev, scope, hasNestedChildren = false)
       writer.lastOrder
     ]);
   }
+  if (classMerges !== null) {
+    for (const extra of classMerges) {
+      const [identity, name] = normalizedHostProp(el, extra.rawName);
+      const previous = values.get(identity);
+      if (previous !== void 0) {
+        values.set(identity, [
+          previous[0],
+          mergeClass(previous[1], extra.value),
+          previous[2],
+          extra.order
+        ]);
+        continue;
+      }
+      values.set(identity, [name, extra.value, extra.order, extra.order]);
+    }
+  }
   const resolved = /* @__PURE__ */ Object.create(null);
   const ordered = [...values.values()];
   if (needsWinningOrderSort) ordered.sort((a, b) => a[2] - b[2]);
@@ -10099,11 +10132,12 @@ function headBlock(scope, slot, key, tag, attrs, text) {
     const ownerDocument = parent.nodeType === 9 ? parent : parent.ownerDocument;
     const head = ownerDocument.head;
     let el2 = adoptServerHeadEl(head, headOwnershipKey(key, rootIdentifierPrefix(scope.block)), tag);
+    const adopted = el2 !== null;
     if (el2 === null) {
       el2 = ownerDocument.createElement(tag);
       head.appendChild(el2);
     }
-    state = { el: el2 };
+    state = { el: el2, attrNames: adopted ? el2.getAttributeNames() : void 0 };
     scope.slots[slot] = state;
     (scope.cleanups ??= []).push(() => {
       removeHeadEventListeners(state, null);
@@ -10112,8 +10146,20 @@ function headBlock(scope, slot, key, tag, attrs, text) {
     });
   }
   const el = state.el;
+  if (TRANSITION_JOURNAL !== null) {
+    journalObjectOnce(state);
+    journalBag();
+  }
   if (state.handlers !== void 0) removeHeadEventListeners(state, attrs);
+  const previousNames = state.attrNames;
+  if (previousNames !== void 0) {
+    for (let i = 0; i < previousNames.length; i++) {
+      const name = previousNames[i];
+      if (attrs === null || !(name in attrs)) setAttribute(el, name, null);
+    }
+  }
   if (attrs !== null) {
+    const names = [];
     for (const k in attrs) {
       const ev = k.length > 2 && k[0] === "o" && k[1] === "n" ? eventSlot(k) : null;
       if (ev !== null) {
@@ -10134,12 +10180,19 @@ function headBlock(scope, slot, key, tag, attrs, text) {
         }
         continue;
       }
+      names.push(k);
       setAttribute(el, k, attrs[k]);
     }
+    state.attrNames = names;
+  } else {
+    state.attrNames = void 0;
   }
-  if (text != null) {
-    const t = String(text);
-    if (el.textContent !== t) el.textContent = t;
+  if (text != null || tag === "title") {
+    const t = text == null ? "" : String(text);
+    if (el.textContent !== t) {
+      if (TRANSITION_JOURNAL !== null) journalRootRange(el, null, null);
+      el.textContent = t;
+    }
   }
 }
 function namespaceHead(props, scope) {
@@ -10172,8 +10225,21 @@ function namespaceHeadElement(headKey, tag, attrs, text, authoredKey) {
   return createElement(namespaceHead, config);
 }
 function injectStyle(id, css, nonce) {
+  if (typeof document === "undefined") {
+    _injectedStyles.add(id);
+    return;
+  }
+  const existing = document.querySelector(`style[data-octane="${id}"]`);
+  if (existing !== null) {
+    if (_injectedStyles.has(id)) {
+      if (existing.textContent !== css) existing.textContent = css;
+    } else {
+      _injectedStyles.add(id);
+    }
+    return;
+  }
   if (_injectedStyles.has(id)) return;
-  if (typeof document !== "undefined" && document.querySelector(`style[data-octane="${id}"], style[data-href="octane-${id}"]`)) {
+  if (document.querySelector(`style[data-href~="octane-${id}"]`)) {
     _injectedStyles.add(id);
     return;
   }
@@ -11201,13 +11267,12 @@ function armControlledBase(el) {
       sv: null,
       sawV: false,
       sawC: false,
+      sawDC: false,
       dvv: UNCONTROLLED,
       composing: false,
       compositionEndTask: void 0,
       queued: false,
       formSeen: false,
-      formDefaultValue: UNCONTROLLED,
-      formDefaultChecked: UNCONTROLLED,
       formMultiple: false
     };
     el.$$ctrl = ctrl;
@@ -11382,9 +11447,14 @@ function setCheckedState(input, value, ctrl) {
     if (process.env.NODE_ENV !== "production")
       queueDevFormDiagnostic(input, CURRENT_SCOPE ?? void 0);
     const hydration = activeHydration();
-    if (hydration !== null && !hydration.isFresh(input)) return;
-    if (input.checked !== b) input.checked = b;
+    if (hydration !== null && !hydration.isFresh(input)) {
+      input.checked = input.checked;
+      ctrl.sawDC = true;
+      return;
+    }
+    input.checked = b;
     input.defaultChecked = b;
+    ctrl.sawDC = true;
     return;
   }
   if (process.env.NODE_ENV !== "production" && ctrl.c === -1) devWarnControlledFlip(input, true);
@@ -11398,7 +11468,7 @@ function inActivationWindow(input) {
   const target = activationCheckable;
   if (target === null) return false;
   if (input === target) return true;
-  return input.type === "radio" && target.type === "radio" && input.name !== "" && input.name === target.name && input.form === target.form;
+  return input.type === "radio" && target.type === "radio" && input.name !== "" && input.name === target.name && input.form === target.form && (input.form !== null || input.getRootNode() === target.getRootNode());
 }
 function setChecked(el, value) {
   const ctrl = armControlled(el);
@@ -11536,6 +11606,7 @@ function setDefaultValue(el, value, initial) {
   }
 }
 const DEFAULT_VALUE_BASELINE = /* @__PURE__ */ Symbol("octane.defaultValue");
+const DEFAULT_CHECKED_INITIALIZED = /* @__PURE__ */ Symbol("octane.defaultCheckedInitialized");
 function setDefaultValueUncontrolled(el, value) {
   const hydration = activeHydration();
   const input = el;
@@ -11564,10 +11635,30 @@ function setDefaultValueUncontrolled(el, value) {
 }
 function setDefaultChecked(el, value) {
   const ctrl = armControlled(el);
+  const input = el;
   const hydration = activeHydration();
-  if (hydration !== null && !hydration.isFresh(el) || value == null) return;
+  const hydrating = hydration !== null && !hydration.isFresh(el);
+  const first = !ctrl.sawDC;
+  if (first) {
+    if (TRANSITION_JOURNAL !== null) {
+      journalObjectOnce(ctrl);
+      journalBag();
+    }
+    ctrl.sawDC = true;
+  }
+  if (hydrating) {
+    if (first) input.checked = input.checked;
+    return;
+  }
   if (ctrl.c !== -1) return;
-  const input = el;
+  if (first && !(DEFAULT_CHECKED_INITIALIZED in input)) {
+    if (TRANSITION_JOURNAL !== null) {
+      TRANSITION_JOURNAL.push(JOURNAL_PROP, input, "checked", input.checked);
+      if (input.type === "radio" && input.name !== "" && !!value) journalRadioCousins(input);
+    }
+    input.checked = value == null ? input.checked : !!value;
+  }
+  if (value == null) return;
   const b = !!value;
   if (input.defaultChecked !== b) {
     if (TRANSITION_JOURNAL !== null) {
@@ -11626,15 +11717,12 @@ function setFormControlSources(el, sources) {
   }
   const ctrl = armControlled(el);
   const first = !ctrl.formSeen;
-  const previousDefaultChecked = ctrl.formDefaultChecked;
   const previousMultiple = ctrl.formMultiple;
   if (TRANSITION_JOURNAL !== null) {
     journalObjectOnce(ctrl);
     journalBag();
   }
   ctrl.formSeen = true;
-  ctrl.formDefaultValue = defaultValue;
-  ctrl.formDefaultChecked = defaultChecked;
   if (process.env.NODE_ENV !== "production" && hasDevFormDiagnosticContext(el, CURRENT_SCOPE ?? void 0)) {
     const diagnostic = ensureDevFormDiagnosticState(el);
     diagnostic.authoringProps = { value, defaultValue, checked, defaultChecked, multiple };
@@ -11650,10 +11738,8 @@ function setFormControlSources(el, sources) {
       setDefaultValue(input, defaultString, first);
     }
     setChecked(input, checked);
-    if (checked == null && defaultChecked != null) setDefaultChecked(input, defaultChecked);
-    if (!first && defaultChecked == null && previousDefaultChecked !== UNCONTROLLED && previousDefaultChecked != null) {
-      input.defaultChecked = false;
-    }
+    if (checked == null && (defaultChecked != null || first))
+      setDefaultChecked(input, defaultChecked);
     return;
   }
   if (tag === "textarea") {
@@ -11846,10 +11932,10 @@ function restoreCheckedState(input, ctrl) {
 }
 function restoreRadioCousins(input) {
   const name = input.name;
-  const group = input.form !== null ? input.form.elements : typeof document !== "undefined" ? document.getElementsByName(name) : [];
+  const group = radioCousins(input);
   for (let i = 0; i < group.length; i++) {
     const other = group[i];
-    if (other === input || other.localName !== "input" || other.type !== "radio" || other.name !== name) {
+    if (other === input || other.localName !== "input" || other.type !== "radio" || other.name !== name || other.form !== input.form) {
       continue;
     }
     const octrl = other.$$ctrl;
@@ -13325,19 +13411,29 @@ function hasDangerHTML(props) {
 function hasHostPropContent(descriptor) {
   return hasDangerHTML(descriptor.props) || descriptor.type === "textarea" && (descriptor.props?.value != null || descriptor.props?.defaultValue != null);
 }
+function markInputCheckedness(input) {
+  input.checked = input.checked;
+  input[DEFAULT_CHECKED_INITIALIZED] = true;
+}
 function applyDeoptProps(el, props, ownerBlock) {
   if (props == null) {
+    if (el.localName === "input") markInputCheckedness(el);
     if (process.env.NODE_ENV !== "production") queueDevFormDiagnostic(el, ownerBlock);
     return;
   }
+  let needsCheckedInitialization = el.localName === "input";
   for (const name in props) {
     if (name === "key" || name === "children") continue;
     if (name === "suppressHydrationWarning") {
       el.__oct_suppress = props[name] === true;
       continue;
     }
-    applyDeoptProp(el, name, props[name], ownerBlock);
+    const value = props[name];
+    if (needsCheckedInitialization && (name === "defaultChecked" || name === "checked" && value != null))
+      needsCheckedInitialization = false;
+    applyDeoptProp(el, name, value, ownerBlock);
   }
+  if (needsCheckedInitialization) markInputCheckedness(el);
   if (process.env.NODE_ENV !== "production") queueDevFormDiagnostic(el, ownerBlock);
 }
 function patchDeoptProps(el, prevProps, nextProps, ownerBlock) {
@@ -13398,6 +13494,7 @@ function hostComponent(scope, slot, tag, props, childrenBody, anchor) {
 }
 function applyHostProps(el, props, scope, state) {
   const prev = state.props;
+  let needsCheckedInitialization = prev === void 0 && el.localName === "input";
   if (ROOT_RENDER_TRANSACTION !== null && prev !== props) journalObjectOnce(state);
   if (prev != null) {
     for (const k in prev) {
@@ -13415,12 +13512,15 @@ function applyHostProps(el, props, scope, state) {
   }
   state.props = props;
   if (props == null) {
+    if (needsCheckedInitialization) markInputCheckedness(el);
     if (process.env.NODE_ENV !== "production") queueDevFormDiagnostic(el, scope);
     return;
   }
   for (const name in props) {
     if (name === "key" || name === "children") continue;
     const v = props[name];
+    if (needsCheckedInitialization && (name === "defaultChecked" || name === "checked" && v != null))
+      needsCheckedInitialization = false;
     const actionName = formActionAttributeName(el, name);
     if (actionName !== null) {
       setFormAction(el, actionName, v, prev?.[name]);
@@ -13458,6 +13558,7 @@ function applyHostProps(el, props, scope, state) {
       }
     }
   }
+  if (needsCheckedInitialization) markInputCheckedness(el);
   if (process.env.NODE_ENV !== "production") queueDevFormDiagnostic(el, scope);
 }
 const DEOPT_DESC = /* @__PURE__ */ Symbol("octane.deoptDesc");

package/dist/runtime.server.d.ts

@@ -213,7 +213,12 @@ export declare function ssrPortal(): string;
 export declare function ssrAttr(name: string, v: unknown, tag?: string, namespace?: AttributeNamespace): string;
 /** A dynamic `style` attribute (string cssText or an object). */
 export declare function ssrStyle(v: unknown): string;
-type SsrAttributeSource = readonly [isSpread: boolean, sourceOrName: unknown, value?: unknown];
+type SsrAttributeSource = readonly [
+    isSpread: boolean,
+    sourceOrName: unknown,
+    value?: unknown,
+    merge?: boolean
+];
 /**
  * Resolve all serializable attributes across direct JSX writers and spread
  * snapshots. HTML parsers keep the first duplicate attribute, while JSX props
@@ -222,6 +227,10 @@ type SsrAttributeSource = readonly [isSpread: boolean, sourceOrName: unknown, va
  * writes of the same JSX prop retain its first insertion position like
  * Object.assign. Distinct aliases that target one native attr still choose the
  * latest authored writer and retain that winning prop's insertion position.
+ *
+ * A synthesized scope-hash class (4th tuple flag) composes onto the winning
+ * class identity after that last-writer fold, matching the client so a spread
+ * `class` is not replaced by the hash alone.
  */
 export declare function ssrAttrs(sources: readonly SsrAttributeSource[], tag?: string, namespace?: AttributeNamespace, skipFormControls?: boolean): string;
 /**
@@ -569,6 +578,24 @@ export declare function descriptorChildren<T>(component: T): T;
  */
 export declare function isChildrenBlock(value: unknown): boolean;
 export declare function injectStyle(id: string, css: string, nonce?: string): void;
+/**
+ * A compiled assigned `<style>` block (`const theme = <style>…</style>`) on the
+ * server. Its CSS belongs to whichever request reads the map — a component in
+ * another module applying `theme` or using `theme.card` — so injection happens
+ * on property access into the active render's collector, after the CSS of the
+ * themes this block itself applies (`applied`: every applied map, same-module
+ * or imported, each a wrapper of its own, so a chain injects transitively in
+ * "applied before applier" order and each sheet once). A body-less bundle
+ * (`<style apply={[a, b]} />`) has no sheet — `id` and `css` are `null` — and
+ * only forwards the touch. Reads outside a render are no-ops.
+ */
+export declare function styleMap<T extends object>(id: string | null, css: string | null, map: T, applied?: ReadonlyArray<unknown>): T;
+/**
+ * Compiled at the top of a server component body for every imported theme it
+ * applies, before its own `injectStyle` calls: reading the map injects the
+ * theme's CSS first, so the applying scope's rules win the cascade.
+ */
+export declare function touchStyleMap(map: unknown): void;
 export declare function ssrHeadEl(key: string, tag: string, attrs: Record<string, unknown> | null, text: unknown): string;
 interface NamespaceHeadProps {
     headKey: string;