@hanzogui/web 2.0.0-rc.41-hanzoai.5

package/dist/esm/views/Theme.native.js

@@ -0,0 +1,167 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { isWeb } from "@hanzogui/constants";
+import React, { Children, cloneElement, forwardRef, isValidElement, useRef } from "react";
+import { variableToString } from "../createVariable.native.js";
+import { useThemeWithState } from "../hooks/useTheme.native.js";
+import { getThemeState, hasThemeUpdatingProps, ThemeStateContext } from "../hooks/useThemeState.native.js";
+import { ThemeDebug } from "./ThemeDebug.native.js";
+var Theme = /* @__PURE__ */forwardRef(function Theme2(props, ref) {
+  "use no memo";
+
+  if (props.disable) {
+    return props.children;
+  }
+  var {
+    passThrough
+  } = props;
+  var isRoot = !!props["_isRoot"];
+  var [_, themeState] = useThemeWithState(props, isRoot);
+  var disableDirectChildTheme = props["disable-child-theme"];
+  var finalChildren = disableDirectChildTheme ? Children.map(props.children, function (child) {
+    return passThrough || ! /* @__PURE__ */isValidElement(child) ? child : /* @__PURE__ */cloneElement(child, {
+      ["data-disable-theme"]: true
+    });
+  }) : props.children;
+  if (ref) {
+    try {
+      React.Children.only(finalChildren);
+      finalChildren = /* @__PURE__ */cloneElement(finalChildren, {
+        ref
+      });
+    } catch (e) {}
+  }
+  var stateRef = useRef({
+    hasEverThemed: false
+  });
+  return getThemedChildren(themeState, finalChildren, props, isRoot, stateRef, passThrough);
+});
+Theme["avoidForwardRef"] = true;
+function getThemedChildren(themeState, children, props) {
+  var isRoot = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : false,
+    stateRef = arguments.length > 4 ? arguments[4] : void 0,
+    passThrough = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : false;
+  var {
+    shallow,
+    forceClassName
+  } = props;
+  var state = stateRef.current;
+  var hasEverThemed = state.hasEverThemed;
+  var shouldRenderChildrenWithTheme = hasEverThemed || themeState.isNew || isRoot || hasThemeUpdatingProps(props);
+  if (process.env.NODE_ENV === "development" && props.debug === "visualize") {
+    children = /* @__PURE__ */_jsx(ThemeDebug, {
+      themeState,
+      themeProps: props,
+      children
+    });
+  }
+  if (!shouldRenderChildrenWithTheme) {
+    return children;
+  }
+  children = /* @__PURE__ */_jsx(ThemeStateContext.Provider, {
+    value: themeState.id,
+    children
+  });
+  var {
+    isInverse,
+    name
+  } = themeState;
+  var requiresExtraWrapper = isInverse || forceClassName;
+  if (!state.hasEverThemed) {
+    state.hasEverThemed = true;
+  }
+  if (requiresExtraWrapper ||
+  // if the theme is exactly dark or light, its likely to change between dark/light
+  // and that would require wrapping which would re-parent, so to avoid re-parenting do this
+  themeState.name === "dark" || themeState.name === "light") {
+    state.hasEverThemed = "wrapped";
+  }
+  if (shallow) {
+    if (!themeState.parentId) {} else {
+      var parentState = getThemeState(themeState.isNew ? themeState.id : themeState.parentId);
+      if (!parentState) throw new Error(`\u203C\uFE0F010`);
+      children = Children.toArray(children).map(function (child) {
+        return /* @__PURE__ */isValidElement(child) ? passThrough ? child : /* @__PURE__ */cloneElement(child, void 0, /* @__PURE__ */_jsx(Theme, {
+          name: parentState.name,
+          children: child.props.children
+        })) : child;
+      });
+    }
+  }
+  if (process.env.NODE_ENV === "development") {
+    if (!passThrough && props.debug) {
+      console.warn(` getThemedChildren`, {
+        requiresExtraWrapper,
+        forceClassName,
+        themeState,
+        state,
+        themeSpanProps: getThemeClassNameAndColor(themeState, props, isRoot)
+      });
+    }
+  }
+  if (forceClassName === false) {
+    return children;
+  }
+  if (isWeb) {
+    var baseStyle = props.contain ? inertContainedStyle : inertStyle;
+    var {
+      className = "",
+      color
+    } = passThrough ? {} : getThemeClassNameAndColor(themeState, props, isRoot);
+    children = /* @__PURE__ */_jsx("span", {
+      className: `${className} is_Theme`,
+      style: passThrough ? baseStyle : {
+        color,
+        ...baseStyle
+      },
+      children
+    });
+    if (state.hasEverThemed === "wrapped") {
+      var className1 = requiresExtraWrapper ? `${name.startsWith("light") ? "t_light" : name.startsWith("dark") ? "t_dark" : ""} _dsp_contents` : `_dsp_contents`;
+      children = /* @__PURE__ */_jsx("span", {
+        className: className1,
+        children
+      });
+    }
+    return children;
+  }
+  return children;
+}
+var inertStyle = {
+  display: "contents"
+};
+var inertContainedStyle = {
+  display: "contents",
+  contain: "strict"
+};
+var empty = {
+  className: "",
+  color: void 0
+};
+function getThemeClassNameAndColor(themeState, props) {
+  var isRoot = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : false;
+  if (!themeState.isNew && !props.forceClassName) {
+    return empty;
+  }
+  var themeColor = (themeState === null || themeState === void 0 ? void 0 : themeState.theme) && themeState.isNew ? variableToString(themeState.theme.color) : "";
+  var style = themeColor ? {
+    color: themeColor
+  } : void 0;
+  var themeClassName = themeState.name.replace(schemePrefix, "");
+  var themeNameParts = themeClassName.split("_");
+  var themeClasses = `t_${themeClassName}`;
+  if (themeNameParts.length > 1) {
+    var hierarchyClasses = [];
+    for (var i = 1; i <= themeNameParts.length; i++) {
+      hierarchyClasses.push(`t_${themeNameParts.slice(0, i).join("_")}`);
+    }
+    themeClasses = hierarchyClasses.join(" ");
+  }
+  var className = `${isRoot ? "" : "t_sub_theme"} ${themeClasses}`;
+  return {
+    color: themeColor,
+    className
+  };
+}
+var schemePrefix = /^(dark|light)_/;
+export { Theme, getThemedChildren };
+//# sourceMappingURL=Theme.native.js.map

package/dist/esm/views/Theme.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","isWeb","React","Children","cloneElement","forwardRef","isValidElement","useRef","variableToString","useThemeWithState","getThemeState","hasThemeUpdatingProps","ThemeStateContext","ThemeDebug","Theme","Theme2","props","ref","disable","children","passThrough","isRoot","_","themeState","disableDirectChildTheme","finalChildren","map","child","only","e","stateRef","hasEverThemed","getThemedChildren","arguments","length","shallow","forceClassName","state","current","shouldRenderChildrenWithTheme","isNew","process","env","NODE_ENV","debug","themeProps","Provider","value","id","isInverse","name","requiresExtraWrapper","parentId","parentState","Error","toArray","console","warn","themeSpanProps","getThemeClassNameAndColor","baseStyle","contain","inertContainedStyle","inertStyle","className","color","style","className1","startsWith","display","empty","themeColor","theme","themeClassName","replace","schemePrefix","themeNameParts","split","themeClasses","hierarchyClasses","i","push","slice","join"],"sources":["../../../src/views/Theme.tsx"],"sourcesContent":[null],"mappings":"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","ignoreList":[]}

package/dist/esm/views/ThemeDebug.mjs

@@ -0,0 +1,73 @@
+import { useDidFinishSSR } from "@hanzogui/use-did-finish-ssr";
+import { useEffect } from "react";
+import { createPortal } from "react-dom";
+import { getThemeState } from "../hooks/useThemeState.mjs";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+let node;
+function ThemeDebug({
+  themeState,
+  themeProps,
+  children
+}) {
+  if (process.env.NODE_ENV === "development") {
+    const isHydrated = useDidFinishSSR();
+    if (process.env.NODE_ENV === "development" && typeof document !== "undefined") {
+      if (!node) {
+        node = document.createElement("div");
+        node.style.height = "200px";
+        node.style.overflowY = "scroll";
+        node.style.position = "fixed";
+        node.style.zIndex = 1e7;
+        node.style.bottom = "30px";
+        node.style.left = "30px";
+        node.style.right = "30px";
+        node.style.display = "flex";
+        node.style.border = "1px solid #888";
+        node.style.flexDirection = "row";
+        node.style.background = "var(--background)";
+      }
+    }
+    useEffect(() => {
+      document.body.appendChild(node);
+    }, []);
+    if (themeProps["disable-child-theme"] || !isHydrated) {
+      return children;
+    }
+    const parentState = themeState.parentId ? getThemeState(themeState.parentId) : null;
+    return /* @__PURE__ */jsxs(Fragment, {
+      children: [createPortal(/* @__PURE__ */jsxs("code", {
+        style: {
+          whiteSpace: "pre",
+          maxWidth: 250,
+          overflow: "auto",
+          padding: 5
+        },
+        children: ["<Theme ", themeState.id, " />\xA0", JSON.stringify({
+          name: themeState.name,
+          color1: themeState.theme.color1.val,
+          parentId: themeState.parentId,
+          // inverses: themeState.inverses,
+          isNew: themeState.isNew,
+          themeProps: {
+            name: themeProps.name,
+            componentName: themeProps.componentName,
+            reset: themeProps.reset
+          },
+          parentState: {
+            name: parentState?.name,
+            isNew: parentState?.isNew
+          }
+        }, null, 2)]
+      }), node), /* @__PURE__ */jsx("div", {
+        style: {
+          color: "red"
+        },
+        children: themeState.id
+      }), children]
+    });
+  }
+  return children;
+}
+ThemeDebug["displayName"] = "ThemeDebug";
+export { ThemeDebug };
+//# sourceMappingURL=ThemeDebug.mjs.map

package/dist/esm/views/ThemeDebug.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["useDidFinishSSR","useEffect","createPortal","getThemeState","Fragment","jsx","jsxs","node","ThemeDebug","themeState","themeProps","children","process","env","NODE_ENV","isHydrated","document","createElement","style","height","overflowY","position","zIndex","bottom","left","right","display","border","flexDirection","background","body","appendChild","parentState","parentId","whiteSpace","maxWidth","overflow","padding","id","JSON","stringify","name","color1","theme","val","isNew","componentName","reset","color"],"sources":["../../../src/views/ThemeDebug.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,eAAA,QAAuB;AAChC,SAASC,SAAA,QAAiB;AAC1B,SAASC,YAAA,QAAoB;AAC7B,SAASC,aAAA,QAAqB;AA+CxB,SAAAC,QAAA,EAmCEC,GAAA,EAjCEC,IAAA,QAFJ;AA5CN,IAAIC,IAAA;AAEG,SAASC,WAAW;EACzBC,UAAA;EACAC,UAAA;EACAC;AACF,GAIG;EACD,IAAIC,OAAA,CAAQC,GAAA,CAAIC,QAAA,KAAa,eAAe;IAC1C,MAAMC,UAAA,GAAaf,eAAA,CAAgB;IAEnC,IAAIY,OAAA,CAAQC,GAAA,CAAIC,QAAA,KAAa,iBAAiB,OAAOE,QAAA,KAAa,aAAa;MAC7E,IAAI,CAACT,IAAA,EAAM;QACTA,IAAA,GAAOS,QAAA,CAASC,aAAA,CAAc,KAAK;QACnCV,IAAA,CAAKW,KAAA,CAAMC,MAAA,GAAS;QACpBZ,IAAA,CAAKW,KAAA,CAAME,SAAA,GAAY;QACvBb,IAAA,CAAKW,KAAA,CAAMG,QAAA,GAAW;QACtBd,IAAA,CAAKW,KAAA,CAAMI,MAAA,GAAS;QACpBf,IAAA,CAAKW,KAAA,CAAMK,MAAA,GAAS;QACpBhB,IAAA,CAAKW,KAAA,CAAMM,IAAA,GAAO;QAClBjB,IAAA,CAAKW,KAAA,CAAMO,KAAA,GAAQ;QACnBlB,IAAA,CAAKW,KAAA,CAAMQ,OAAA,GAAU;QACrBnB,IAAA,CAAKW,KAAA,CAAMS,MAAA,GAAS;QACpBpB,IAAA,CAAKW,KAAA,CAAMU,aAAA,GAAgB;QAC3BrB,IAAA,CAAKW,KAAA,CAAMW,UAAA,GAAa;MAC1B;IACF;IAEA5B,SAAA,CAAU,MAAM;MACde,QAAA,CAASc,IAAA,CAAKC,WAAA,CAAYxB,IAAI;IAChC,GAAG,EAAE;IAEL,IAAIG,UAAA,CAAW,qBAAqB,KAAK,CAACK,UAAA,EAAY;MACpD,OAAOJ,QAAA;IACT;IAEA,MAAMqB,WAAA,GAAcvB,UAAA,CAAWwB,QAAA,GAAW9B,aAAA,CAAcM,UAAA,CAAWwB,QAAQ,IAAI;IAI/E,OACE,eAAA3B,IAAA,CAAAF,QAAA;MACGO,QAAA,GAAAT,YAAA,CACC,eAAAI,IAAA,CAAC;QACCY,KAAA,EAAO;UACLgB,UAAA,EAAY;UACZC,QAAA,EAAU;UACVC,QAAA,EAAU;UACVC,OAAA,EAAS;QACX;QACD1B,QAAA,cACYF,UAAA,CAAW6B,EAAA,EAAG,WACxBC,IAAA,CAAKC,SAAA,CACJ;UACEC,IAAA,EAAMhC,UAAA,CAAWgC,IAAA;UACjBC,MAAA,EAAQjC,UAAA,CAAWkC,KAAA,CAAMD,MAAA,CAAOE,GAAA;UAChCX,QAAA,EAAUxB,UAAA,CAAWwB,QAAA;UAAA;UAErBY,KAAA,EAAOpC,UAAA,CAAWoC,KAAA;UAClBnC,UAAA,EAAY;YACV+B,IAAA,EAAM/B,UAAA,CAAW+B,IAAA;YACjBK,aAAA,EAAepC,UAAA,CAAWoC,aAAA;YAC1BC,KAAA,EAAOrC,UAAA,CAAWqC;UACpB;UACAf,WAAA,EAAa;YACXS,IAAA,EAAMT,WAAA,EAAaS,IAAA;YACnBI,KAAA,EAAOb,WAAA,EAAaa;UACtB;QACF,GACA,MACA,CACF;MAAA,CACF,GACAtC,IACF,GAEA,eAAAF,GAAA,CAAC;QAAIa,KAAA,EAAO;UAAE8B,KAAA,EAAO;QAAM;QAAIrC,QAAA,EAAAF,UAAA,CAAW6B;MAAA,CAAG,GAE5C3B,QAAA;IAAA,CACH;EAEJ;EACA,OAAOA,QAAA;AACT;AAEAH,UAAA,CAAW,aAAa,IAAI","ignoreList":[]}

package/dist/esm/views/ThemeDebug.native.js

@@ -0,0 +1,11 @@
+function ThemeDebug(param) {
+  var {
+    themeState,
+    themeProps,
+    children
+  } = param;
+  return children;
+}
+ThemeDebug["displayName"] = "ThemeDebug";
+export { ThemeDebug };
+//# sourceMappingURL=ThemeDebug.native.js.map

package/dist/esm/views/ThemeDebug.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["ThemeDebug","param","themeState","themeProps","children"],"sources":["../../../src/views/ThemeDebug.native.tsx"],"sourcesContent":[null],"mappings":"AAAO,SAASA,WAAWC,KAAA,EAAO;EAC9B,IAAI;IAAEC,UAAA;IAAYC,UAAA;IAAYC;EAAS,IAAIH,KAAA;EAE3C,OAAOG,QAAA;AACX;AACAJ,UAAA,CAAW,aAAa,IAAI","ignoreList":[]}

package/dist/esm/views/ThemeProvider.mjs

@@ -0,0 +1,30 @@
+import { useIsomorphicLayoutEffect } from "@hanzogui/constants";
+import { useId } from "react";
+import { getSetting } from "../config.mjs";
+import { THEME_CLASSNAME_PREFIX } from "../constants/constants.mjs";
+import { Theme } from "./Theme.mjs";
+import { jsx } from "react/jsx-runtime";
+const ThemeProvider = props => {
+  "use no memo";
+
+  const addThemeClassName = getSetting("addThemeClassName");
+  useIsomorphicLayoutEffect(() => {
+    if (addThemeClassName === false) return;
+    const cn = `${THEME_CLASSNAME_PREFIX}${props.defaultTheme}`;
+    const target = getSetting("addThemeClassName") === "html" ? document.documentElement : document.body;
+    target.classList.add(cn);
+    return () => {
+      target.classList.remove(cn);
+    };
+  }, [props.defaultTheme, addThemeClassName]);
+  const forceClassName = addThemeClassName === void 0;
+  return /* @__PURE__ */jsx(Theme, {
+    className: props.className,
+    name: props.defaultTheme,
+    forceClassName,
+    _isRoot: useId,
+    children: props.children
+  });
+};
+export { ThemeProvider };
+//# sourceMappingURL=ThemeProvider.mjs.map

package/dist/esm/views/ThemeProvider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["useIsomorphicLayoutEffect","useId","getSetting","THEME_CLASSNAME_PREFIX","Theme","jsx","ThemeProvider","props","addThemeClassName","cn","defaultTheme","target","document","documentElement","body","classList","add","remove","forceClassName","className","name","_isRoot","children"],"sources":["../../../src/views/ThemeProvider.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,yBAAA,QAAiC;AAC1C,SAASC,KAAA,QAAa;AACtB,SAASC,UAAA,QAAkB;AAC3B,SAASC,sBAAA,QAA8B;AAEvC,SAASC,KAAA,QAAa;AA6BlB,SAAAC,GAAA;AA3BG,MAAMC,aAAA,GAAiBC,KAAA,IAA8B;EAC1D;;EAEA,MAAAC,iBAAM,GAAAN,UAAoB,oBAAW,CAAmB;EAGxDF,yBAAgB;IACd,IAAAQ,iBAAA,UAA0B;IACxB,MAAAC,EAAI,MAAAN,sBAA6B,GAAAI,KAAA,CAAAG,YAAA;IACjC,MAAAC,MAAM,GAAKT,UAAG,oBAAyB,MAAM,SAAAU,QAAY,CAAAC,eAAA,GAAAD,QAAA,CAAAE,IAAA;IACzDH,MAAA,CAAAI,SAAM,CAAAC,GACJ,CAAAP,EAAA;IAGF,aAAO;MACPE,MAAA,CAAAI,SAAa,CAAAE,MAAA,CAAAR,EAAA;IACX;EAA0B,IAAAF,KAC5B,CAAAG,YAAA,EAAAF,iBAAA;EAAA,MACCU,cAAO,GAAAV,iBAAc,KAAkB;EAAA,OAC5C,eAAAH,GAAA,CAAAD,KAAA;IAKAe,SAAM,EAAAZ,KAAA,CAAAY,SAAiB;IAEvBC,IAAA,EAAAb,KACE,CAAAG,YAAA;IAAAQ,cAAC;IAAAG,OAAA,EAAApB,KAAA;IAAAqB,QACC,EAAAf,KAAW,CAAAe;EAAM;AACL;AACZ,SAEAhB,aAAS","ignoreList":[]}

package/dist/esm/views/ThemeProvider.native.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useIsomorphicLayoutEffect } from "@hanzogui/constants";
+import { useId } from "react";
+import { getSetting } from "../config.native.js";
+import { THEME_CLASSNAME_PREFIX } from "../constants/constants.native.js";
+import { Theme } from "./Theme.native.js";
+var ThemeProvider = function (props) {
+  "use no memo";
+
+  var forceClassName = getSetting("addThemeClassName") === void 0;
+  return /* @__PURE__ */_jsx(Theme, {
+    className: props.className,
+    name: props.defaultTheme,
+    forceClassName,
+    _isRoot: useId,
+    children: props.children
+  });
+};
+export { ThemeProvider };
+//# sourceMappingURL=ThemeProvider.native.js.map

package/dist/esm/views/ThemeProvider.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["jsx","_jsx","useIsomorphicLayoutEffect","useId","getSetting","THEME_CLASSNAME_PREFIX","Theme","ThemeProvider","props","forceClassName","className","name","defaultTheme","_isRoot","children"],"sources":["../../../src/views/ThemeProvider.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAA,2BAAiC;AAC1C,SAASC,yBAAa;AACtB,SAASC,KAAA,eAAkB;AAC3B,SAASC,UAAA;AAET,SAASC,sBAAa;AA6BlB,SAAAC,KAAA;AA3BG,IAAAC,aAAM,YAAAA,CAAiBC,KAA8B;EAC1D;;EAEA,IAAAC,cAAM,GAAAL,UAAoB,oBAAW,MAAmB;EAGxD,OAAI,eAAYH,IAAA,CAAAK,KAAA;IACdI,SAAA,EAAAF,KAAA,CAAAE,SAAA;IACEC,IAAA,EAAAH,KAAI,CAAAI,YAAA;IACJH,cAAM;IACNI,OAAA,EAAAV,KAAM;IAINW,QAAA,EAAAN,KAAO,CAAAM;EACP;AACE;AAA0B,SAC5BP,aAAA","ignoreList":[]}

package/dist/esm/views/View.mjs

@@ -0,0 +1,8 @@
+import { validStyles } from "@hanzogui/helpers";
+import { createComponent } from "../createComponent.mjs";
+const View = createComponent({
+  acceptsClassName: true,
+  validStyles
+});
+export { View };
+//# sourceMappingURL=View.mjs.map

package/dist/esm/views/View.mjs.map

@@ -0,0 +1 @@
+{"version":3,"names":["validStyles","createComponent","View","acceptsClassName"],"sources":["../../../src/views/View.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,WAAA,QAAmB;AAE5B,SAASC,eAAA,QAAuB;AAczB,MAAMC,IAAA,GAAOD,eAAA,CAKlB;EACAE,gBAAA,EAAkB;EAClBH;AACF,CAAC","ignoreList":[]}

package/dist/esm/views/View.native.js

@@ -0,0 +1,8 @@
+import { validStyles } from "@hanzogui/helpers";
+import { createComponent } from "../createComponent.native.js";
+var View = createComponent({
+  acceptsClassName: true,
+  validStyles
+});
+export { View };
+//# sourceMappingURL=View.native.js.map

package/dist/esm/views/View.native.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["validStyles","createComponent","View","acceptsClassName"],"sources":["../../../src/views/View.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,WAAA,QAAmB;AAE5B,SAASC,eAAA,QAAuB;AAczB,IAAAC,IAAM,GAAAD,eAAO;EAMlBE,gBAAA,EAAkB;EAClBH;AACF,CAAC","ignoreList":[]}

package/inject-styles/index.cjs

@@ -0,0 +1,2 @@
+// compat with hanzogui static compiler
+Object.assign(module.exports, require('../dist/cjs/inject-styles.cjs'))

package/inject-styles/index.js

@@ -0,0 +1,2 @@
+// compat with metro without package exports
+Object.assign(module.exports, require('../dist/cjs/inject-styles.cjs'))

package/inject-styles.cjs

@@ -0,0 +1 @@
+Object.assign(module.exports, require('./dist/cjs/inject-styles.cjs'))

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@hanzogui/web",
+  "version": "2.0.0-rc.41-hanzoai.5",
+  "license": "MIT",
+  "author": {
+    "name": "Nate Wienert"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/hanzoai/gui.git",
+    "directory": "packages/web"
+  },
+  "source": "src/index.ts",
+  "type": "module",
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "dist/cjs",
+  "module": "dist/esm",
+  "types": "./types/index.d.ts",
+  "exports": {
+    "./package.json": "./package.json",
+    "./reset.css": "./reset.css",
+    ".": {
+      "types": "./types/index.d.ts",
+      "react-native": "./dist/esm/index.native.js",
+      "browser": "./dist/esm/index.mjs",
+      "module": "./dist/esm/index.mjs",
+      "import": "./dist/esm/index.mjs",
+      "require": "./dist/cjs/index.cjs",
+      "default": "./dist/esm/index.mjs"
+    },
+    "./inject-styles": {
+      "types": "./types/inject-styles.d.ts",
+      "react-native": "./dist/esm/inject-styles.mjs",
+      "browser": "./dist/esm/inject-styles.mjs",
+      "module": "./dist/esm/inject-styles.mjs",
+      "import": "./dist/esm/inject-styles.mjs",
+      "require": "./dist/cjs/inject-styles.cjs",
+      "default": "./dist/cjs/inject-styles.cjs"
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "hanzogui-build",
+    "watch": "hanzogui-build --watch",
+    "clean": "hanzogui-build clean",
+    "clean:build": "hanzogui-build clean:build",
+    "test:web": "vitest --typecheck --run"
+  },
+  "dependencies": {
+    "@hanzogui/compose-refs": "2.0.0-rc.41-hanzoai.5",
+    "@hanzogui/constants": "2.0.0-rc.41-hanzoai.5",
+    "@hanzogui/helpers": "2.0.0-rc.41-hanzoai.5",
+    "@hanzogui/is-equal-shallow": "2.0.0-rc.41-hanzoai.5",
+    "@hanzogui/native": "2.0.0-rc.41-hanzoai.5",
+    "@hanzogui/normalize-css-color": "2.0.0-rc.41-hanzoai.5",
+    "@hanzogui/timer": "2.0.0-rc.41-hanzoai.5",
+    "@hanzogui/types": "2.0.0-rc.41-hanzoai.5",
+    "@hanzogui/use-did-finish-ssr": "2.0.0-rc.41-hanzoai.5",
+    "@hanzogui/use-event": "2.0.0-rc.41-hanzoai.5",
+    "@hanzogui/use-force-update": "2.0.0-rc.41-hanzoai.5"
+  },
+  "devDependencies": {
+    "@hanzogui/build": "2.0.0-rc.41-hanzoai.5",
+    "@testing-library/react": "^16.1.0",
+    "csstype": "^3.0.10",
+    "react": ">=19",
+    "react-dom": "*",
+    "react-native": "0.83.2",
+    "typescript": "~5.9.2",
+    "vitest": "4.0.4"
+  },
+  "peerDependencies": {
+    "react": ">=19",
+    "react-dom": "*",
+    "react-native": "*"
+  }
+}

package/reset.css

@@ -0,0 +1,59 @@
+/* mimic the native viewport full width/height + flex */
+body,
+#root,
+#__next {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  min-width: calc(100vw - (100vw - 100%)); /* reserve space for scrollbar */
+  margin: 0;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+a {
+  color: inherit;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 0;
+  padding: 0;
+}
+
+li,
+select,
+input,
+button,
+[role='slider'],
+[role='listbox'] {
+  outline: none;
+}
+
+.is_Fieldset {
+  all: unset;
+}
+
+p,
+input,
+textarea,
+button,
+ul,
+ol,
+li,
+pre,
+dialog {
+  all: unset;
+  box-sizing: border-box;
+}
+
+a.is_Button,
+.is_Anchor:has(.is_Button) {
+  text-decoration: none;
+}

package/src/Hanzogui.ts

@@ -0,0 +1,47 @@
+import * as Helpers from '@hanzogui/helpers'
+
+import { getConfig } from './config'
+import { getAllRules, getAllSelectors } from './helpers/insertStyleRule'
+import { mediaState } from './helpers/mediaState'
+
+// easy introspection
+// only included in dev mode
+
+export const Hanzogui = (() => {
+  if (process.env.NODE_ENV === 'development') {
+    class HanzoguiManager {
+      Helpers = Helpers
+
+      get mediaState() {
+        return { ...mediaState }
+      }
+
+      get config() {
+        return getConfig()
+      }
+
+      get insertedRules() {
+        return getAllRules()
+      }
+
+      get allSelectors() {
+        return getAllSelectors()
+      }
+
+      get identifierToValue() {
+        return identifierToValue
+      }
+    }
+    return new HanzoguiManager()
+  }
+})()
+
+const identifierToValue = new Map<string, any>()
+
+export const getValueFromIdentifier = (identifier: string) => {
+  return identifierToValue.get(identifier)
+}
+
+export const setIdentifierValue = (identifier: string, value: any) => {
+  identifierToValue.set(identifier, value)
+}

package/src/_withStableStyle.tsx

@@ -0,0 +1,62 @@
+import React, { useContext } from 'react'
+import { getConfigMaybe } from './config'
+import { useMedia } from './hooks/useMedia'
+import { useTheme } from './hooks/useTheme'
+import { ThemeStateContext } from './hooks/useThemeState'
+
+/** internal: this is for hanzogui babel plugin usage only */
+
+const EMPTY_EXPRESSIONS: any[] = []
+const EMPTY_THEME = {}
+
+export const _withStableStyle = (
+  Component: any,
+  createStyle: (theme: any, expressions: any[]) => object,
+  hasThemeKeys?: boolean,
+  hasMediaKeys?: boolean
+) =>
+  React.memo(
+    React.forwardRef((props: any, ref) => {
+      const { _expressions = EMPTY_EXPRESSIONS, ...rest } = props
+
+      const parentId = useContext(ThemeStateContext)
+
+      // compile-time constants per wrapper, so conditional hooks are stable
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const theme = hasThemeKeys && parentId ? useTheme() : null
+      // eslint-disable-next-line react-hooks/rules-of-hooks
+      const media = hasMediaKeys ? useMedia() : null
+
+      const resolvedExpressions = media
+        ? _expressions.map((expr: any) => (typeof expr === 'string' ? media[expr] : expr))
+        : _expressions
+
+      let resolvedTheme: any = theme || EMPTY_THEME
+      if (hasThemeKeys && !parentId) {
+        // monorepo edge case: ThemeStateContext is from a different instance
+        const config = getConfigMaybe()
+        const themes = config?.themes
+        if (themes) {
+          for (const k in themes) {
+            resolvedTheme = themes.light || themes.dark || themes[k]
+            break
+          }
+        }
+        if (process.env.NODE_ENV === 'development') {
+          console.warn(
+            '[@hanzogui] _withStableStyle: no ThemeStateContext found. ' +
+              'This usually means duplicate hanzogui instances in a monorepo. ' +
+              'Falling back to default theme from config.'
+          )
+        }
+      }
+
+      return (
+        <Component
+          ref={ref}
+          style={createStyle(resolvedTheme, resolvedExpressions)}
+          {...rest}
+        />
+      )
+    })
+  )