@hanzogui/web 2.0.0

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

@@ -0,0 +1,136 @@
+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 (props, ref) {
+  "use no memo";
+
+  if (props.disable) return props.children;
+  var {
+      passThrough
+    } = props,
+    isRoot = !!props._isRoot,
+    [_, themeState] = useThemeWithState(props, isRoot),
+    disableDirectChildTheme = props["disable-child-theme"],
+    finalChildren = disableDirectChildTheme ? Children.map(props.children, function (child) {
+      return passThrough || ! /* @__PURE__ */isValidElement(child) ? child : /* @__PURE__ */cloneElement(child, {
+        "data-disable-theme": !0
+      });
+    }) : props.children;
+  if (ref) try {
+    React.Children.only(finalChildren), finalChildren = /* @__PURE__ */cloneElement(finalChildren, {
+      ref
+    });
+  } catch {}
+  var stateRef = useRef({
+    hasEverThemed: !1
+  });
+  return getThemedChildren(themeState, finalChildren, props, isRoot, stateRef, passThrough);
+});
+Theme.avoidForwardRef = !0;
+function getThemedChildren(themeState, children, props) {
+  var isRoot = arguments.length > 3 && arguments[3] !== void 0 ? arguments[3] : !1,
+    stateRef = arguments.length > 4 ? arguments[4] : void 0,
+    passThrough = arguments.length > 5 && arguments[5] !== void 0 ? arguments[5] : !1,
+    {
+      shallow,
+      forceClassName
+    } = props,
+    state = stateRef.current,
+    hasEverThemed = state.hasEverThemed,
+    shouldRenderChildrenWithTheme = hasEverThemed || themeState.isNew || isRoot || hasThemeUpdatingProps(props);
+  if (process.env.NODE_ENV === "development" && props.debug === "visualize" && (children = /* @__PURE__ */_jsx(ThemeDebug, {
+    themeState,
+    themeProps: props,
+    children
+  })), !shouldRenderChildrenWithTheme) return children;
+  children = /* @__PURE__ */_jsx(ThemeStateContext.Provider, {
+    value: themeState.id,
+    children
+  });
+  var {
+      isInverse,
+      name
+    } = themeState,
+    requiresExtraWrapper = isInverse || forceClassName;
+  if (state.hasEverThemed || (state.hasEverThemed = !0), (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"), shallow && themeState.parentId) {
+    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" && !passThrough && props.debug && console.warn(" getThemedChildren", {
+    requiresExtraWrapper,
+    forceClassName,
+    themeState,
+    state,
+    themeSpanProps: getThemeClassNameAndColor(themeState, props, isRoot)
+  }), forceClassName === !1) return children;
+  if (isWeb) {
+    var baseStyle = props.contain ? inertContainedStyle : inertStyle,
+      {
+        className = "",
+        color
+      } = passThrough ? {} : getThemeClassNameAndColor(themeState, props, isRoot);
+    if (children = /* @__PURE__ */_jsx("span", {
+      className: `${className} is_Theme`,
+      style: passThrough ? baseStyle : {
+        color,
+        ...baseStyle
+      },
+      children
+    }), 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"
+  },
+  inertContainedStyle = {
+    display: "contents",
+    contain: "strict"
+  },
+  empty = {
+    className: "",
+    color: void 0
+  };
+function getThemeClassNameAndColor(themeState, props) {
+  var isRoot = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : !1;
+  if (!themeState.isNew && !props.forceClassName) return empty;
+  var themeColor = themeState?.theme && themeState.isNew ? variableToString(themeState.theme.color) : "",
+    style = themeColor ? {
+      color: themeColor
+    } : void 0,
+    themeClassName = themeState.name.replace(schemePrefix, ""),
+    themeNameParts = themeClassName.split("_"),
+    themeClasses = `t_${themeClassName}`;
+  if (themeNameParts.length > 1) {
+    for (var hierarchyClasses = [], 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","props","ref","disable","children","passThrough","isRoot","_isRoot","_","themeState","disableDirectChildTheme","finalChildren","map","child","only","stateRef","hasEverThemed","getThemedChildren","avoidForwardRef","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,54 @@
+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 < "u" && (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);
+    }, []), 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","displayName"],"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;IAuBnC,IArBIY,OAAA,CAAQC,GAAA,CAAIC,QAAA,KAAa,iBAAiB,OAAOE,QAAA,GAAa,QAC3DT,IAAA,KACHA,IAAA,GAAOS,QAAA,CAASC,aAAA,CAAc,KAAK,GACnCV,IAAA,CAAKW,KAAA,CAAMC,MAAA,GAAS,SACpBZ,IAAA,CAAKW,KAAA,CAAME,SAAA,GAAY,UACvBb,IAAA,CAAKW,KAAA,CAAMG,QAAA,GAAW,SACtBd,IAAA,CAAKW,KAAA,CAAMI,MAAA,GAAS,KACpBf,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,kBACpBpB,IAAA,CAAKW,KAAA,CAAMU,aAAA,GAAgB,OAC3BrB,IAAA,CAAKW,KAAA,CAAMW,UAAA,GAAa,uBAI5B5B,SAAA,CAAU,MAAM;MACde,QAAA,CAASc,IAAA,CAAKC,WAAA,CAAYxB,IAAI;IAChC,GAAG,EAAE,GAEDG,UAAA,CAAW,qBAAqB,KAAK,CAACK,UAAA,EACxC,OAAOJ,QAAA;IAGT,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,CAAWyC,WAAA,GAAiB","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","displayName"],"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,CAAWK,WAAA,GAAiB","ignoreList":[]}

package/dist/esm/views/ThemeProvider.mjs

@@ -0,0 +1,29 @@
+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 === !1) return;
+    const cn = `${THEME_CLASSNAME_PREFIX}${props.defaultTheme}`,
+      target = getSetting("addThemeClassName") === "html" ? document.documentElement : document.body;
+    return target.classList.add(cn), () => {
+      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,MAAMC,iBAAA,GAAoBN,UAAA,CAAW,mBAAmB;EAItDF,yBAAA,CAA0B,MAAM;IAC9B,IAAIQ,iBAAA,KAAsB,IAAO;IACjC,MAAMC,EAAA,GAAK,GAAGN,sBAAsB,GAAGI,KAAA,CAAMG,YAAY;MACnDC,MAAA,GACJT,UAAA,CAAW,mBAAmB,MAAM,SAChCU,QAAA,CAASC,eAAA,GACTD,QAAA,CAASE,IAAA;IACf,OAAAH,MAAA,CAAOI,SAAA,CAAUC,GAAA,CAAIP,EAAE,GAChB,MAAM;MACXE,MAAA,CAAOI,SAAA,CAAUE,MAAA,CAAOR,EAAE;IAC5B;EACF,GAAG,CAACF,KAAA,CAAMG,YAAA,EAAcF,iBAAiB,CAAC;EAM5C,MAAMU,cAAA,GAAiBV,iBAAA,KAAsB;EAE7C,OACE,eAAAH,GAAA,CAACD,KAAA;IACCe,SAAA,EAAWZ,KAAA,CAAMY,SAAA;IACjBC,IAAA,EAAMb,KAAA,CAAMG,YAAA;IACZQ,cAAA;IAEAG,OAAA,EAASpB,KAAA;IAERqB,QAAA,EAAAf,KAAA,CAAMe;EAAA,CACT;AAEJ","ignoreList":[]}

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

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useId } from "react";
+import { getSetting } from "../config.native.js";
+import { Theme } from "./Theme.native.js";
+var ThemeProvider = function (props) {
+  "use no memo";
+
+  var addThemeClassName = getSetting("addThemeClassName"),
+    forceClassName = addThemeClassName === void 0;
+  return /* @__PURE__ */_jsx(Theme, {
+    className: props.className,
+    name: props.defaultTheme,
+    forceClassName,
+    // @ts-expect-error
+    _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","useId","getSetting","Theme","ThemeProvider","props","addThemeClassName","forceClassName","className","name","defaultTheme","_isRoot","children"],"sources":["../../../src/views/ThemeProvider.tsx"],"sourcesContent":[null],"mappings":"AAAA,SAASA,GAAA,IAAAC,IAAA,2BAAiC;AAE1C,SAASC,KAAA,eAAkB;AAC3B,SAASC,UAAA;AA+BL,SAAAC,KAAA;AA3BG,IAAAC,aAAM,YAAAA,CAAiBC,KAA8B;EAC1D;;EAEA,IAAAC,iBAAM,GAAAJ,UAAoB,oBAAW;IAAmBK,cAAA,GAAAD,iBAAA;EAItD,sBAAAN,IAA0B,CAAAG,KAAM;IAC9BK,SAAI,EAAAH,KAAA,CAAAG,SAAsB;IAC1BC,IAAA,EAAMJ,KAAK,CAAAK,YAAG;IAKdH,cAAO;IAEL;IACFI,OAAA,EAAAV,KAAA;IACFW,QAAU,EAAAP,KAAA,CAAAO;EAMZ;AAEA;AACE,SAACR,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: !0,
+  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: !0,
+  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 hanzo-gui 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",
+  "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": "hanzo-gui-build",
+    "watch": "hanzo-gui-build --watch",
+    "clean": "hanzo-gui-build clean",
+    "clean:build": "hanzo-gui-build clean:build",
+    "test:web": "vitest --typecheck --run"
+  },
+  "dependencies": {
+    "@hanzogui/compose-refs": "workspace:*",
+    "@hanzogui/constants": "workspace:*",
+    "@hanzogui/helpers": "workspace:*",
+    "@hanzogui/is-equal-shallow": "workspace:*",
+    "@hanzogui/native": "workspace:*",
+    "@hanzogui/normalize-css-color": "workspace:*",
+    "@hanzogui/timer": "workspace:*",
+    "@hanzogui/types": "workspace:*",
+    "@hanzogui/use-did-finish-ssr": "workspace:*",
+    "@hanzogui/use-event": "workspace:*",
+    "@hanzogui/use-force-update": "workspace:*"
+  },
+  "devDependencies": {
+    "@hanzogui/build": "workspace:*",
+    "@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/Gui.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 Gui = (() => {
+  if (process.env.NODE_ENV === 'development') {
+    class GuiManager {
+      Helpers = Helpers
+
+      get mediaState() {
+        return { ...mediaState }
+      }
+
+      get config() {
+        return getConfig()
+      }
+
+      get insertedRules() {
+        return getAllRules()
+      }
+
+      get allSelectors() {
+        return getAllSelectors()
+      }
+
+      get identifierToValue() {
+        return identifierToValue
+      }
+    }
+    return new GuiManager()
+  }
+})()
+
+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,55 @@
+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 hanzo-gui babel plugin usage only */
+
+export const _withStableStyle = (
+  Component: any,
+  createStyle: (theme: any, expressions: any[]) => object
+) =>
+  React.memo(
+    React.forwardRef((props: any, ref) => {
+      const { _expressions = [], ...rest } = props
+
+      // in monorepo setups (pnpm, etc.) module duplication can cause the
+      // ThemeStateContext here to be a different instance than the one in
+      // GuiProvider, making the provider invisible. fall back to config
+      // themes instead of crashing with "Missing theme".
+      const parentId = useContext(ThemeStateContext)
+      if (!parentId) {
+        const config = getConfigMaybe()
+        const themes = config?.themes
+        const fallback = themes
+          ? themes.light || themes.dark || Object.values(themes)[0]
+          : {}
+        if (process.env.NODE_ENV === 'development') {
+          console.warn(
+            '[@gui] _withStableStyle: no ThemeStateContext found. ' +
+              'This usually means duplicate gui instances in a monorepo. ' +
+              'Falling back to default theme from config.'
+          )
+        }
+        return (
+          <Component ref={ref} style={createStyle(fallback, _expressions)} {...rest} />
+        )
+      }
+
+      const theme = useTheme()
+
+      // Only call useMedia if there are string media keys to resolve
+      // This is safe because expressions are compile-time stable
+      const hasMediaKeys = _expressions.some((expr: any) => typeof expr === 'string')
+      const media = hasMediaKeys ? useMedia() : null
+
+      const resolvedExpressions = media
+        ? _expressions.map((expr: any) => (typeof expr === 'string' ? media[expr] : expr))
+        : _expressions
+
+      return (
+        <Component ref={ref} style={createStyle(theme, resolvedExpressions)} {...rest} />
+      )
+    })
+  )