@barefootjs/client 0.1.2 → 0.2.0

package/dist/runtime/apply-rest-attrs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"apply-rest-attrs.d.ts","sourceRoot":"","sources":["../../src/runtime/apply-rest-attrs.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAyBH;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAC5B,EAAE,EAAE,OAAO,EACX,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC/B,WAAW,EAAE,MAAM,EAAE,GACpB,IAAI,CAkEN"}
+{"version":3,"file":"apply-rest-attrs.d.ts","sourceRoot":"","sources":["../../src/runtime/apply-rest-attrs.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAiBH;;;;;;;GAOG;AACH,wBAAgB,cAAc,CAC5B,EAAE,EAAE,OAAO,EACX,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC/B,WAAW,EAAE,MAAM,EAAE,GACpB,IAAI,CA4DN"}

package/dist/runtime/index.js

@@ -123,6 +123,156 @@ var BF_KEY = "data-key";
 var BF_ASYNC = "bf-async";
 var BF_ASYNC_RESOLVE = "bf-async-resolve";
 var BF_PARENT_SCOPE_PLACEHOLDER = "__BF_PARENT_SCOPE__";
+// ../shared/src/dom-prop.ts
+var BOOLEAN_ATTRS = new Set([
+  "checked",
+  "disabled",
+  "readonly",
+  "selected",
+  "required",
+  "hidden",
+  "autofocus",
+  "autoplay",
+  "controls",
+  "loop",
+  "muted",
+  "open",
+  "multiple",
+  "novalidate",
+  "formnovalidate"
+]);
+var SVG_CAMEL_TO_KEBAB = {
+  strokeWidth: "stroke-width",
+  strokeLinecap: "stroke-linecap",
+  strokeLinejoin: "stroke-linejoin",
+  strokeDasharray: "stroke-dasharray",
+  strokeDashoffset: "stroke-dashoffset",
+  strokeMiterlimit: "stroke-miterlimit",
+  strokeOpacity: "stroke-opacity",
+  fillOpacity: "fill-opacity",
+  fillRule: "fill-rule",
+  stopColor: "stop-color",
+  stopOpacity: "stop-opacity",
+  textAnchor: "text-anchor",
+  dominantBaseline: "dominant-baseline",
+  alignmentBaseline: "alignment-baseline",
+  fontFamily: "font-family",
+  fontSize: "font-size",
+  fontWeight: "font-weight",
+  fontStyle: "font-style",
+  letterSpacing: "letter-spacing",
+  wordSpacing: "word-spacing",
+  pointerEvents: "pointer-events",
+  vectorEffect: "vector-effect",
+  colorInterpolation: "color-interpolation",
+  clipPath: "clip-path",
+  clipRule: "clip-rule",
+  markerStart: "marker-start",
+  markerMid: "marker-mid",
+  markerEnd: "marker-end"
+};
+var SVG_XML_CAMEL_ATTRS = new Set([
+  "allowReorder",
+  "attributeName",
+  "attributeType",
+  "autoReverse",
+  "baseFrequency",
+  "baseProfile",
+  "calcMode",
+  "clipPathUnits",
+  "contentScriptType",
+  "contentStyleType",
+  "diffuseConstant",
+  "edgeMode",
+  "externalResourcesRequired",
+  "filterRes",
+  "filterUnits",
+  "glyphRef",
+  "gradientTransform",
+  "gradientUnits",
+  "kernelMatrix",
+  "kernelUnitLength",
+  "keyPoints",
+  "keySplines",
+  "keyTimes",
+  "lengthAdjust",
+  "limitingConeAngle",
+  "markerHeight",
+  "markerUnits",
+  "markerWidth",
+  "maskContentUnits",
+  "maskUnits",
+  "numOctaves",
+  "pathLength",
+  "patternContentUnits",
+  "patternTransform",
+  "patternUnits",
+  "pointsAtX",
+  "pointsAtY",
+  "pointsAtZ",
+  "preserveAlpha",
+  "preserveAspectRatio",
+  "primitiveUnits",
+  "refX",
+  "refY",
+  "repeatCount",
+  "repeatDur",
+  "requiredExtensions",
+  "requiredFeatures",
+  "specularConstant",
+  "specularExponent",
+  "spreadMethod",
+  "startOffset",
+  "stdDeviation",
+  "stitchTiles",
+  "surfaceScale",
+  "systemLanguage",
+  "tableValues",
+  "targetX",
+  "targetY",
+  "textLength",
+  "viewBox",
+  "viewTarget",
+  "xChannelSelector",
+  "yChannelSelector",
+  "zoomAndPan"
+]);
+function isEventProp(key) {
+  return key.length > 2 && key[0] === "o" && key[1] === "n" && key[2] >= "A" && key[2] <= "Z";
+}
+function classifyDOMProp(key) {
+  if (key === "children")
+    return { kind: "skip", attrName: key };
+  if (key === "ref")
+    return { kind: "ref", attrName: key };
+  if (isEventProp(key))
+    return { kind: "event", attrName: key };
+  const attrName = toHTMLAttrNameRuntime(key);
+  if (attrName === "style")
+    return { kind: "style", attrName };
+  if (attrName === "value")
+    return { kind: "property", attrName };
+  if (attrName === "checked")
+    return { kind: "property", attrName };
+  if (BOOLEAN_ATTRS.has(attrName.toLowerCase()))
+    return { kind: "boolean", attrName };
+  return { kind: "attr", attrName };
+}
+function toHTMLAttrNameRuntime(key) {
+  if (key === "className")
+    return "class";
+  if (key === "htmlFor")
+    return "for";
+  const svgKebab = SVG_CAMEL_TO_KEBAB[key];
+  if (svgKebab !== undefined)
+    return svgKebab;
+  if (SVG_XML_CAMEL_ATTRS.has(key))
+    return key;
+  if (key.startsWith("data") || key.startsWith("aria")) {
+    return key.replace(/([A-Z])/g, "-$1").toLowerCase();
+  }
+  return key;
+}
 // src/context.ts
 function createContext(defaultValue) {
   return {
@@ -1580,13 +1730,6 @@ function styleToCss(value) {
 }
 
 // src/runtime/apply-rest-attrs.ts
-function toAttrName(key) {
-  if (key === "className")
-    return "class";
-  if (key === "htmlFor")
-    return "for";
-  return key.replace(/([A-Z])/g, "-$1").toLowerCase();
-}
 var jsxToDomEventMap = { doubleclick: "dblclick" };
 function toEventName(jsxPropName) {
   const raw = (jsxPropName[2].toLowerCase() + jsxPropName.slice(3)).toLowerCase();
@@ -1594,127 +1737,61 @@ function toEventName(jsxPropName) {
 }
 function applyRestAttrs(el, source, excludeKeys) {
   const exclude = new Set(excludeKeys);
+  const classified = [];
   for (const key of Object.keys(source)) {
     if (exclude.has(key))
       continue;
-    if (key === "ref") {
+    classified.push({ key, c: classifyDOMProp(key) });
+  }
+  for (const { key, c } of classified) {
+    if (c.kind === "ref") {
       const ref = source[key];
       if (typeof ref === "function")
         ref(el);
-      continue;
-    }
-    if (key.startsWith("on") && key.length > 2 && key[2] === key[2].toUpperCase()) {
+    } else if (c.kind === "event") {
       const handler = source[key];
       if (typeof handler === "function") {
         el.addEventListener(toEventName(key), handler);
       }
     }
   }
+  const attrEntries = classified.filter(({ c }) => c.kind !== "ref" && c.kind !== "event" && c.kind !== "skip");
   createEffect2(() => {
-    for (const key of Object.keys(source)) {
-      if (exclude.has(key))
-        continue;
-      if (key === "ref")
-        continue;
-      if (key === "children")
-        continue;
-      if (key.startsWith("on") && key.length > 2 && key[2] === key[2].toUpperCase())
-        continue;
+    for (const { key, c } of attrEntries) {
       const value = source[key];
-      const attr = toAttrName(key);
       if (value != null && value !== false) {
-        if (attr === "value" && "value" in el) {
+        if (c.kind === "property" && c.attrName === "value" && "value" in el) {
           const strVal = String(value);
           if (el.value !== strVal)
             el.value = strVal;
-        } else if (attr === "checked" && "checked" in el) {
+        } else if (c.kind === "property" && c.attrName === "checked" && "checked" in el) {
           el.checked = !!value;
-        } else if (attr === "style") {
+        } else if (c.kind === "boolean") {
+          el.setAttribute(c.attrName, "");
+        } else if (c.kind === "style") {
           const css = styleToCss(value);
           if (css == null)
             el.removeAttribute("style");
           else
             el.setAttribute("style", css);
         } else {
-          el.setAttribute(attr, String(value));
+          el.setAttribute(c.attrName, String(value));
         }
       } else {
-        if (attr === "checked" && "checked" in el) {
+        if (c.kind === "property" && c.attrName === "value" && "value" in el) {
+          el.value = "";
+        } else if (c.kind === "property" && c.attrName === "checked" && "checked" in el) {
           el.checked = false;
+        } else if (c.kind === "boolean") {
+          el.removeAttribute(c.attrName);
         } else {
-          el.removeAttribute(attr);
+          el.removeAttribute(c.attrName);
         }
       }
     }
   });
 }
 // src/runtime/spread-attrs.ts
-var SVG_CAMEL_CASE_ATTRS = new Set([
-  "allowReorder",
-  "attributeName",
-  "attributeType",
-  "autoReverse",
-  "baseFrequency",
-  "baseProfile",
-  "calcMode",
-  "clipPathUnits",
-  "contentScriptType",
-  "contentStyleType",
-  "diffuseConstant",
-  "edgeMode",
-  "externalResourcesRequired",
-  "filterRes",
-  "filterUnits",
-  "glyphRef",
-  "gradientTransform",
-  "gradientUnits",
-  "kernelMatrix",
-  "kernelUnitLength",
-  "keyPoints",
-  "keySplines",
-  "keyTimes",
-  "lengthAdjust",
-  "limitingConeAngle",
-  "markerHeight",
-  "markerUnits",
-  "markerWidth",
-  "maskContentUnits",
-  "maskUnits",
-  "numOctaves",
-  "pathLength",
-  "patternContentUnits",
-  "patternTransform",
-  "patternUnits",
-  "pointsAtX",
-  "pointsAtY",
-  "pointsAtZ",
-  "preserveAlpha",
-  "preserveAspectRatio",
-  "primitiveUnits",
-  "refX",
-  "refY",
-  "repeatCount",
-  "repeatDur",
-  "requiredExtensions",
-  "requiredFeatures",
-  "specularConstant",
-  "specularExponent",
-  "spreadMethod",
-  "startOffset",
-  "stdDeviation",
-  "stitchTiles",
-  "surfaceScale",
-  "systemLanguage",
-  "tableValues",
-  "targetX",
-  "targetY",
-  "textLength",
-  "viewBox",
-  "viewTarget",
-  "xChannelSelector",
-  "yChannelSelector",
-  "zoomAndPan"
-]);
 function spreadAttrs(obj) {
   if (!obj || typeof obj !== "object")
     return "";
@@ -1722,18 +1799,20 @@ function spreadAttrs(obj) {
   for (const [key, value] of Object.entries(obj)) {
     if (value == null || value === false)
       continue;
-    if (key.startsWith("on") && key.length > 2 && key[2] === key[2].toUpperCase())
-      continue;
-    if (key === "children")
+    const c = classifyDOMProp(key);
+    if (c.kind === "event" || c.kind === "skip" || c.kind === "ref")
       continue;
-    if (key === "style") {
+    if (c.kind === "style") {
       const css = styleToCss(value);
       if (css != null)
         parts.push(`style="${css}"`);
       continue;
     }
-    const attr = key === "className" ? "class" : key === "htmlFor" ? "for" : SVG_CAMEL_CASE_ATTRS.has(key) ? key : key.replace(/([A-Z])/g, "-$1").toLowerCase();
-    parts.push(value === true ? attr : `${attr}="${value}"`);
+    if (c.kind === "boolean" && value === true) {
+      parts.push(c.attrName);
+    } else {
+      parts.push(`${c.attrName}="${value}"`);
+    }
   }
   return parts.join(" ");
 }

package/dist/runtime/spread-attrs.d.ts

@@ -7,13 +7,10 @@
  */
 /**
  * Convert an object to an HTML attribute string.
- * Aligned with applyRestAttrs conventions: skips null/undefined/false,
- * event handlers, maps className→class and htmlFor→for. The `style`
- * prop is routed through `styleToCss` so object literals serialize to
- * a real CSS string (matching the reactive `applyRestAttrs` path).
- *
- * SVG attributes listed in `SVG_CAMEL_CASE_ATTRS` are preserved
- * verbatim — the SVG XML spec is case-sensitive for those names.
+ * Uses the shared classifyDOMProp classifier to determine how each prop
+ * maps to the DOM. Skips null/undefined/false, event handlers, ref, and
+ * children. The `style` prop is routed through `styleToCss` so object
+ * literals serialize to a real CSS string.
  */
 export declare function spreadAttrs(obj: Record<string, unknown>): string;
 //# sourceMappingURL=spread-attrs.d.ts.map

package/dist/runtime/spread-attrs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"spread-attrs.d.ts","sourceRoot":"","sources":["../../src/runtime/spread-attrs.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AA+CH;;;;;;;;;GASG;AACH,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAwBhE"}
+{"version":3,"file":"spread-attrs.d.ts","sourceRoot":"","sources":["../../src/runtime/spread-attrs.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAKH;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,GAAG,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,MAAM,CAmBhE"}

package/dist/runtime/standalone.js

@@ -314,6 +314,156 @@ var BF_KEY = "data-key";
 var BF_ASYNC = "bf-async";
 var BF_ASYNC_RESOLVE = "bf-async-resolve";
 var BF_PARENT_SCOPE_PLACEHOLDER = "__BF_PARENT_SCOPE__";
+// ../shared/src/dom-prop.ts
+var BOOLEAN_ATTRS = new Set([
+  "checked",
+  "disabled",
+  "readonly",
+  "selected",
+  "required",
+  "hidden",
+  "autofocus",
+  "autoplay",
+  "controls",
+  "loop",
+  "muted",
+  "open",
+  "multiple",
+  "novalidate",
+  "formnovalidate"
+]);
+var SVG_CAMEL_TO_KEBAB = {
+  strokeWidth: "stroke-width",
+  strokeLinecap: "stroke-linecap",
+  strokeLinejoin: "stroke-linejoin",
+  strokeDasharray: "stroke-dasharray",
+  strokeDashoffset: "stroke-dashoffset",
+  strokeMiterlimit: "stroke-miterlimit",
+  strokeOpacity: "stroke-opacity",
+  fillOpacity: "fill-opacity",
+  fillRule: "fill-rule",
+  stopColor: "stop-color",
+  stopOpacity: "stop-opacity",
+  textAnchor: "text-anchor",
+  dominantBaseline: "dominant-baseline",
+  alignmentBaseline: "alignment-baseline",
+  fontFamily: "font-family",
+  fontSize: "font-size",
+  fontWeight: "font-weight",
+  fontStyle: "font-style",
+  letterSpacing: "letter-spacing",
+  wordSpacing: "word-spacing",
+  pointerEvents: "pointer-events",
+  vectorEffect: "vector-effect",
+  colorInterpolation: "color-interpolation",
+  clipPath: "clip-path",
+  clipRule: "clip-rule",
+  markerStart: "marker-start",
+  markerMid: "marker-mid",
+  markerEnd: "marker-end"
+};
+var SVG_XML_CAMEL_ATTRS = new Set([
+  "allowReorder",
+  "attributeName",
+  "attributeType",
+  "autoReverse",
+  "baseFrequency",
+  "baseProfile",
+  "calcMode",
+  "clipPathUnits",
+  "contentScriptType",
+  "contentStyleType",
+  "diffuseConstant",
+  "edgeMode",
+  "externalResourcesRequired",
+  "filterRes",
+  "filterUnits",
+  "glyphRef",
+  "gradientTransform",
+  "gradientUnits",
+  "kernelMatrix",
+  "kernelUnitLength",
+  "keyPoints",
+  "keySplines",
+  "keyTimes",
+  "lengthAdjust",
+  "limitingConeAngle",
+  "markerHeight",
+  "markerUnits",
+  "markerWidth",
+  "maskContentUnits",
+  "maskUnits",
+  "numOctaves",
+  "pathLength",
+  "patternContentUnits",
+  "patternTransform",
+  "patternUnits",
+  "pointsAtX",
+  "pointsAtY",
+  "pointsAtZ",
+  "preserveAlpha",
+  "preserveAspectRatio",
+  "primitiveUnits",
+  "refX",
+  "refY",
+  "repeatCount",
+  "repeatDur",
+  "requiredExtensions",
+  "requiredFeatures",
+  "specularConstant",
+  "specularExponent",
+  "spreadMethod",
+  "startOffset",
+  "stdDeviation",
+  "stitchTiles",
+  "surfaceScale",
+  "systemLanguage",
+  "tableValues",
+  "targetX",
+  "targetY",
+  "textLength",
+  "viewBox",
+  "viewTarget",
+  "xChannelSelector",
+  "yChannelSelector",
+  "zoomAndPan"
+]);
+function isEventProp(key) {
+  return key.length > 2 && key[0] === "o" && key[1] === "n" && key[2] >= "A" && key[2] <= "Z";
+}
+function classifyDOMProp(key) {
+  if (key === "children")
+    return { kind: "skip", attrName: key };
+  if (key === "ref")
+    return { kind: "ref", attrName: key };
+  if (isEventProp(key))
+    return { kind: "event", attrName: key };
+  const attrName = toHTMLAttrNameRuntime(key);
+  if (attrName === "style")
+    return { kind: "style", attrName };
+  if (attrName === "value")
+    return { kind: "property", attrName };
+  if (attrName === "checked")
+    return { kind: "property", attrName };
+  if (BOOLEAN_ATTRS.has(attrName.toLowerCase()))
+    return { kind: "boolean", attrName };
+  return { kind: "attr", attrName };
+}
+function toHTMLAttrNameRuntime(key) {
+  if (key === "className")
+    return "class";
+  if (key === "htmlFor")
+    return "for";
+  const svgKebab = SVG_CAMEL_TO_KEBAB[key];
+  if (svgKebab !== undefined)
+    return svgKebab;
+  if (SVG_XML_CAMEL_ATTRS.has(key))
+    return key;
+  if (key.startsWith("data") || key.startsWith("aria")) {
+    return key.replace(/([A-Z])/g, "-$1").toLowerCase();
+  }
+  return key;
+}
 // src/context.ts
 function createContext(defaultValue) {
   return {
@@ -1766,13 +1916,6 @@ function styleToCss(value) {
 }
 
 // src/runtime/apply-rest-attrs.ts
-function toAttrName(key) {
-  if (key === "className")
-    return "class";
-  if (key === "htmlFor")
-    return "for";
-  return key.replace(/([A-Z])/g, "-$1").toLowerCase();
-}
 var jsxToDomEventMap = { doubleclick: "dblclick" };
 function toEventName(jsxPropName) {
   const raw = (jsxPropName[2].toLowerCase() + jsxPropName.slice(3)).toLowerCase();
@@ -1780,127 +1923,61 @@ function toEventName(jsxPropName) {
 }
 function applyRestAttrs(el, source, excludeKeys) {
   const exclude = new Set(excludeKeys);
+  const classified = [];
   for (const key of Object.keys(source)) {
     if (exclude.has(key))
       continue;
-    if (key === "ref") {
+    classified.push({ key, c: classifyDOMProp(key) });
+  }
+  for (const { key, c } of classified) {
+    if (c.kind === "ref") {
       const ref = source[key];
       if (typeof ref === "function")
         ref(el);
-      continue;
-    }
-    if (key.startsWith("on") && key.length > 2 && key[2] === key[2].toUpperCase()) {
+    } else if (c.kind === "event") {
       const handler = source[key];
       if (typeof handler === "function") {
         el.addEventListener(toEventName(key), handler);
       }
     }
   }
+  const attrEntries = classified.filter(({ c }) => c.kind !== "ref" && c.kind !== "event" && c.kind !== "skip");
   createEffect(() => {
-    for (const key of Object.keys(source)) {
-      if (exclude.has(key))
-        continue;
-      if (key === "ref")
-        continue;
-      if (key === "children")
-        continue;
-      if (key.startsWith("on") && key.length > 2 && key[2] === key[2].toUpperCase())
-        continue;
+    for (const { key, c } of attrEntries) {
       const value = source[key];
-      const attr = toAttrName(key);
       if (value != null && value !== false) {
-        if (attr === "value" && "value" in el) {
+        if (c.kind === "property" && c.attrName === "value" && "value" in el) {
           const strVal = String(value);
           if (el.value !== strVal)
             el.value = strVal;
-        } else if (attr === "checked" && "checked" in el) {
+        } else if (c.kind === "property" && c.attrName === "checked" && "checked" in el) {
           el.checked = !!value;
-        } else if (attr === "style") {
+        } else if (c.kind === "boolean") {
+          el.setAttribute(c.attrName, "");
+        } else if (c.kind === "style") {
           const css = styleToCss(value);
           if (css == null)
             el.removeAttribute("style");
           else
             el.setAttribute("style", css);
         } else {
-          el.setAttribute(attr, String(value));
+          el.setAttribute(c.attrName, String(value));
         }
       } else {
-        if (attr === "checked" && "checked" in el) {
+        if (c.kind === "property" && c.attrName === "value" && "value" in el) {
+          el.value = "";
+        } else if (c.kind === "property" && c.attrName === "checked" && "checked" in el) {
           el.checked = false;
+        } else if (c.kind === "boolean") {
+          el.removeAttribute(c.attrName);
         } else {
-          el.removeAttribute(attr);
+          el.removeAttribute(c.attrName);
         }
       }
     }
   });
 }
 // src/runtime/spread-attrs.ts
-var SVG_CAMEL_CASE_ATTRS = new Set([
-  "allowReorder",
-  "attributeName",
-  "attributeType",
-  "autoReverse",
-  "baseFrequency",
-  "baseProfile",
-  "calcMode",
-  "clipPathUnits",
-  "contentScriptType",
-  "contentStyleType",
-  "diffuseConstant",
-  "edgeMode",
-  "externalResourcesRequired",
-  "filterRes",
-  "filterUnits",
-  "glyphRef",
-  "gradientTransform",
-  "gradientUnits",
-  "kernelMatrix",
-  "kernelUnitLength",
-  "keyPoints",
-  "keySplines",
-  "keyTimes",
-  "lengthAdjust",
-  "limitingConeAngle",
-  "markerHeight",
-  "markerUnits",
-  "markerWidth",
-  "maskContentUnits",
-  "maskUnits",
-  "numOctaves",
-  "pathLength",
-  "patternContentUnits",
-  "patternTransform",
-  "patternUnits",
-  "pointsAtX",
-  "pointsAtY",
-  "pointsAtZ",
-  "preserveAlpha",
-  "preserveAspectRatio",
-  "primitiveUnits",
-  "refX",
-  "refY",
-  "repeatCount",
-  "repeatDur",
-  "requiredExtensions",
-  "requiredFeatures",
-  "specularConstant",
-  "specularExponent",
-  "spreadMethod",
-  "startOffset",
-  "stdDeviation",
-  "stitchTiles",
-  "surfaceScale",
-  "systemLanguage",
-  "tableValues",
-  "targetX",
-  "targetY",
-  "textLength",
-  "viewBox",
-  "viewTarget",
-  "xChannelSelector",
-  "yChannelSelector",
-  "zoomAndPan"
-]);
 function spreadAttrs(obj) {
   if (!obj || typeof obj !== "object")
     return "";
@@ -1908,18 +1985,20 @@ function spreadAttrs(obj) {
   for (const [key, value] of Object.entries(obj)) {
     if (value == null || value === false)
       continue;
-    if (key.startsWith("on") && key.length > 2 && key[2] === key[2].toUpperCase())
-      continue;
-    if (key === "children")
+    const c = classifyDOMProp(key);
+    if (c.kind === "event" || c.kind === "skip" || c.kind === "ref")
       continue;
-    if (key === "style") {
+    if (c.kind === "style") {
       const css = styleToCss(value);
       if (css != null)
         parts.push(`style="${css}"`);
       continue;
     }
-    const attr = key === "className" ? "class" : key === "htmlFor" ? "for" : SVG_CAMEL_CASE_ATTRS.has(key) ? key : key.replace(/([A-Z])/g, "-$1").toLowerCase();
-    parts.push(value === true ? attr : `${attr}="${value}"`);
+    if (c.kind === "boolean" && value === true) {
+      parts.push(c.attrName);
+    } else {
+      parts.push(`${c.attrName}="${value}"`);
+    }
   }
   return parts.join(" ");
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@barefootjs/client",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "BarefootJS client package: reactive primitives (SSR-safe) plus browser runtime under the `/runtime` subpath (compiler target)",
   "type": "module",
   "main": "./dist/index.js",
@@ -55,10 +55,10 @@
     "directory": "packages/client"
   },
   "dependencies": {
-    "@barefootjs/shared": "0.1.2"
+    "@barefootjs/shared": "0.2.0"
   },
   "peerDependencies": {
-    "@barefootjs/jsx": "0.1.2"
+    "@barefootjs/jsx": "0.2.0"
   },
   "peerDependenciesMeta": {
     "@barefootjs/jsx": {
@@ -66,7 +66,7 @@
     }
   },
   "devDependencies": {
-    "@barefootjs/jsx": "0.1.2",
+    "@barefootjs/jsx": "0.2.0",
     "@happy-dom/global-registrator": "^20.0.11",
     "typescript": "^5.0.0"
   }

package/src/runtime/apply-rest-attrs.ts

@@ -6,16 +6,9 @@
  */
 
 import { createEffect } from '@barefootjs/client/reactive'
+import { classifyDOMProp, type DOMPropClassification } from '@barefootjs/shared'
 import { styleToCss } from './style'
 
-/** Map of JSX prop names to HTML attribute names */
-function toAttrName(key: string): string {
-  if (key === 'className') return 'class'
-  if (key === 'htmlFor') return 'for'
-  // Convert camelCase to kebab-case for data-* and aria-* style attributes
-  return key.replace(/([A-Z])/g, '-$1').toLowerCase()
-}
-
 /**
  * Convert a JSX event prop name to a DOM event name for addEventListener.
  * Handles: camelCase → lowercase, plus special mappings (doubleclick → dblclick).
@@ -23,7 +16,6 @@ function toAttrName(key: string): string {
  */
 const jsxToDomEventMap: Record<string, string> = { doubleclick: 'dblclick' }
 function toEventName(jsxPropName: string): string {
-  // onKeyDown → 'k' + 'eyDown' → 'keydown'
   const raw = (jsxPropName[2].toLowerCase() + jsxPropName.slice(3)).toLowerCase()
   return jsxToDomEventMap[raw] ?? raw
 }
@@ -43,15 +35,19 @@ export function applyRestAttrs(
 ): void {
   const exclude = new Set(excludeKeys)
 
-  // Wire up event handlers and ref callbacks once (not reactively)
+  // Precompute classifications once — keys are stable for rest props.
+  const classified: Array<{ key: string; c: DOMPropClassification }> = []
   for (const key of Object.keys(source)) {
     if (exclude.has(key)) continue
-    if (key === 'ref') {
+    classified.push({ key, c: classifyDOMProp(key) })
+  }
+
+  // Wire up event handlers and ref callbacks once (not reactively)
+  for (const { key, c } of classified) {
+    if (c.kind === 'ref') {
       const ref = source[key]
       if (typeof ref === 'function') (ref as (el: Element) => void)(el)
-      continue
-    }
-    if (key.startsWith('on') && key.length > 2 && key[2] === key[2].toUpperCase()) {
+    } else if (c.kind === 'event') {
       const handler = source[key]
       if (typeof handler === 'function') {
         el.addEventListener(toEventName(key), handler as EventListener)
@@ -59,49 +55,39 @@ export function applyRestAttrs(
     }
   }
 
-  createEffect(() => {
-    for (const key of Object.keys(source)) {
-      if (exclude.has(key)) continue
-
-      // Event handlers and ref are wired up above, not as attributes
-      if (key === 'ref') continue
-      // `children` is a JSX construct rendered inside the element, never
-      // a DOM attribute. Without this exclusion, parent components that
-      // pass `children` through `{...props}` end up with
-      // `children="<p ...>...</p>"` written as a literal attribute on
-      // the wrapper div. The matching `spreadAttrs` (SSR-string) path
-      // already skips `children` for the same reason.
-      if (key === 'children') continue
-      if (key.startsWith('on') && key.length > 2 && key[2] === key[2].toUpperCase()) continue
+  // Filter to only attr-like entries for the reactive loop
+  const attrEntries = classified.filter(
+    ({ c }) => c.kind !== 'ref' && c.kind !== 'event' && c.kind !== 'skip',
+  )
 
+  createEffect(() => {
+    for (const { key, c } of attrEntries) {
       const value = source[key]
-      const attr = toAttrName(key)
 
       if (value != null && value !== false) {
-        // Use DOM property for value/checked (setAttribute sets the default, not current)
-        if (attr === 'value' && 'value' in el) {
+        if (c.kind === 'property' && c.attrName === 'value' && 'value' in el) {
           const strVal = String(value)
           if ((el as HTMLInputElement).value !== strVal) (el as HTMLInputElement).value = strVal
-        } else if (attr === 'checked' && 'checked' in el) {
+        } else if (c.kind === 'property' && c.attrName === 'checked' && 'checked' in el) {
           (el as HTMLInputElement).checked = !!value
-        } else if (attr === 'style') {
-          // Route the `style` prop through `styleToCss` so object literals
-          // (`{'--err': errorHue()}`) and inline strings (`'color:red'`)
-          // both reach the DOM as a real CSS string instead of
-          // `[object Object]`. Mirrors the compiler's
-          // `setAttribute('style', styleToCss(...))` path used when the
-          // attribute is bound directly on a JSX element.
+        } else if (c.kind === 'boolean') {
+          el.setAttribute(c.attrName, '')
+        } else if (c.kind === 'style') {
           const css = styleToCss(value)
           if (css == null) el.removeAttribute('style')
           else el.setAttribute('style', css)
         } else {
-          el.setAttribute(attr, String(value))
+          el.setAttribute(c.attrName, String(value))
         }
       } else {
-        if (attr === 'checked' && 'checked' in el) {
+        if (c.kind === 'property' && c.attrName === 'value' && 'value' in el) {
+          (el as HTMLInputElement).value = ''
+        } else if (c.kind === 'property' && c.attrName === 'checked' && 'checked' in el) {
           (el as HTMLInputElement).checked = false
+        } else if (c.kind === 'boolean') {
+          el.removeAttribute(c.attrName)
         } else {
-          el.removeAttribute(attr)
+          el.removeAttribute(c.attrName)
         }
       }
     }

package/src/runtime/spread-attrs.ts

@@ -6,83 +6,33 @@
  * a static string for server/template rendering of computed local spreads.
  */
 
+import { classifyDOMProp } from '@barefootjs/shared'
 import { styleToCss } from './style'
 
-/**
- * SVG attributes that are case-sensitive and MUST stay in camelCase.
- *
- * The default JSX-prop → HTML-attribute rewrite lower-cases camelCase
- * (`fooBar` → `foo-bar`), which is correct for HTML attrs and for the
- * CSS-style SVG presentation attrs (`strokeWidth` → `stroke-width`).
- * The XML-namespaced SVG attrs below, though, are case-sensitive in
- * the spec: `viewBox` lower-cased to `view-box` makes the browser
- * treat it as an unknown user attribute and the SVG no longer renders
- * (pointer events stop hitting the inner geometry — surfaced as the
- * Form Builder e2e regression in #1244's merge-emit follow-up).
- *
- * Coordinates with the compile-time `SVG_CAMEL_TO_KEBAB` table in
- * `packages/jsx/src/ir-to-client-js/utils.ts`: presentation attrs
- * (`clipPath`, `strokeWidth`, …) live there and must NOT appear here,
- * or the same JSX prop would lower to `clip-path` via the explicit-
- * attr path and stay `clipPath` via the spread path — a silent
- * divergence. The list below is XML attribute names that have no
- * kebab-case mirror (`viewBox`, `clipPathUnits`, …).
- *
- * The list mirrors React DOM's `DOMProperty` case-preserving entries
- * (only the attributes that appear on actual SVG elements; ARIA and
- * XLink namespaces are unrelated and handled by their `aria-*` /
- * `xlink:*` literal prefix).
- */
-const SVG_CAMEL_CASE_ATTRS: ReadonlySet<string> = new Set([
-  'allowReorder', 'attributeName', 'attributeType', 'autoReverse',
-  'baseFrequency', 'baseProfile', 'calcMode', 'clipPathUnits',
-  'contentScriptType', 'contentStyleType', 'diffuseConstant', 'edgeMode',
-  'externalResourcesRequired', 'filterRes', 'filterUnits', 'glyphRef',
-  'gradientTransform', 'gradientUnits', 'kernelMatrix', 'kernelUnitLength',
-  'keyPoints', 'keySplines', 'keyTimes', 'lengthAdjust', 'limitingConeAngle',
-  'markerHeight', 'markerUnits', 'markerWidth', 'maskContentUnits',
-  'maskUnits', 'numOctaves', 'pathLength', 'patternContentUnits',
-  'patternTransform', 'patternUnits', 'pointsAtX', 'pointsAtY', 'pointsAtZ',
-  'preserveAlpha', 'preserveAspectRatio', 'primitiveUnits', 'refX', 'refY',
-  'repeatCount', 'repeatDur', 'requiredExtensions', 'requiredFeatures',
-  'specularConstant', 'specularExponent', 'spreadMethod', 'startOffset',
-  'stdDeviation', 'stitchTiles', 'surfaceScale', 'systemLanguage',
-  'tableValues', 'targetX', 'targetY', 'textLength', 'viewBox', 'viewTarget',
-  'xChannelSelector', 'yChannelSelector', 'zoomAndPan',
-])
-
 /**
  * Convert an object to an HTML attribute string.
- * Aligned with applyRestAttrs conventions: skips null/undefined/false,
- * event handlers, maps className→class and htmlFor→for. The `style`
- * prop is routed through `styleToCss` so object literals serialize to
- * a real CSS string (matching the reactive `applyRestAttrs` path).
- *
- * SVG attributes listed in `SVG_CAMEL_CASE_ATTRS` are preserved
- * verbatim — the SVG XML spec is case-sensitive for those names.
+ * Uses the shared classifyDOMProp classifier to determine how each prop
+ * maps to the DOM. Skips null/undefined/false, event handlers, ref, and
+ * children. The `style` prop is routed through `styleToCss` so object
+ * literals serialize to a real CSS string.
  */
 export function spreadAttrs(obj: Record<string, unknown>): string {
   if (!obj || typeof obj !== 'object') return ''
   const parts: string[] = []
   for (const [key, value] of Object.entries(obj)) {
     if (value == null || value === false) continue
-    // Skip event handlers
-    if (key.startsWith('on') && key.length > 2 && key[2] === key[2].toUpperCase()) continue
-    // Skip children prop
-    if (key === 'children') continue
-    if (key === 'style') {
+    const c = classifyDOMProp(key)
+    if (c.kind === 'event' || c.kind === 'skip' || c.kind === 'ref') continue
+    if (c.kind === 'style') {
       const css = styleToCss(value)
       if (css != null) parts.push(`style="${css}"`)
       continue
     }
-    // Map JSX prop names to HTML attribute names. Case-sensitive SVG
-    // attrs keep their camelCase per the spec; HTML / CSS-style SVG
-    // presentation attrs lower-case to kebab-case.
-    const attr = key === 'className' ? 'class'
-      : key === 'htmlFor' ? 'for'
-      : SVG_CAMEL_CASE_ATTRS.has(key) ? key
-      : key.replace(/([A-Z])/g, '-$1').toLowerCase()
-    parts.push(value === true ? attr : `${attr}="${value}"`)
+    if (c.kind === 'boolean' && value === true) {
+      parts.push(c.attrName)
+    } else {
+      parts.push(`${c.attrName}="${value}"`)
+    }
   }
   return parts.join(' ')
 }