powr-sdk-web 6.0.0 → 6.2.0

package/dist/shell/styles.js

@@ -0,0 +1,241 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.v = exports.s = exports.SIDEBAR_WIDTH = exports.NARROW_QUERY = exports.HEADER_HEIGHT = void 0;
+var _tokens = require("../theme/tokens");
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+/**
+ * Shell styles. Every colour is a `--powr-*` var with today's neutral as the
+ * fallback — the wrapper has no palette of its own (clone-leak guardrail).
+ */
+
+var v = exports.v = {
+  bg: (0, _tokens.powrVar)("bg", "#fafafa"),
+  surface: (0, _tokens.powrVar)("surface", "#ffffff"),
+  text: (0, _tokens.powrVar)("text", "#111827"),
+  muted: (0, _tokens.powrVar)("muted", "#6b7280"),
+  border: (0, _tokens.powrVar)("border", "#e5e7eb"),
+  primary: (0, _tokens.powrVar)("primary", "#2563eb"),
+  primaryFg: (0, _tokens.powrVar)("primary-fg", "#ffffff"),
+  danger: (0, _tokens.powrVar)("danger", "#dc2626"),
+  radius: (0, _tokens.powrVar)("radius", "0.5rem"),
+  font: (0, _tokens.powrVar)("font", "system-ui, -apple-system, Segoe UI, Roboto, sans-serif")
+};
+var SIDEBAR_WIDTH = exports.SIDEBAR_WIDTH = 240;
+var HEADER_HEIGHT = exports.HEADER_HEIGHT = 56;
+var NARROW_QUERY = exports.NARROW_QUERY = "(max-width: 900px)";
+var s = exports.s = {
+  root: {
+    minHeight: "100vh",
+    display: "flex",
+    flexDirection: "column",
+    background: v.bg,
+    color: v.text,
+    fontFamily: v.font
+  },
+  header: {
+    position: "sticky",
+    top: 0,
+    zIndex: 40,
+    height: HEADER_HEIGHT,
+    display: "flex",
+    alignItems: "center",
+    gap: 16,
+    padding: "0 16px",
+    borderBottom: "1px solid ".concat(v.border),
+    background: v.surface
+  },
+  brand: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 8,
+    fontWeight: 700,
+    fontSize: 16,
+    color: v.text,
+    textDecoration: "none",
+    whiteSpace: "nowrap"
+  },
+  headerNav: {
+    display: "flex",
+    alignItems: "center",
+    gap: 4,
+    marginLeft: 8
+  },
+  headerRight: {
+    marginLeft: "auto",
+    display: "flex",
+    alignItems: "center",
+    gap: 8
+  },
+  body: {
+    display: "flex",
+    flex: 1,
+    minHeight: 0
+  },
+  sidebar: {
+    width: SIDEBAR_WIDTH,
+    flexShrink: 0,
+    position: "sticky",
+    top: HEADER_HEIGHT,
+    alignSelf: "flex-start",
+    height: "calc(100vh - ".concat(HEADER_HEIGHT, "px)"),
+    overflowY: "auto",
+    padding: 12,
+    borderRight: "1px solid ".concat(v.border),
+    background: v.surface
+  },
+  main: {
+    flex: 1,
+    minWidth: 0,
+    padding: "calc(24px * var(--powr-density, 1))"
+  },
+  footer: {
+    padding: "12px 16px",
+    borderTop: "1px solid ".concat(v.border),
+    color: v.muted,
+    fontSize: 12,
+    background: v.surface
+  },
+  navItem: function navItem(active, vertical) {
+    return {
+      display: "flex",
+      alignItems: "center",
+      gap: 10,
+      padding: vertical ? "9px 12px" : "6px 10px",
+      borderRadius: v.radius,
+      fontSize: 14,
+      lineHeight: 1.2,
+      textDecoration: "none",
+      cursor: "pointer",
+      whiteSpace: "nowrap",
+      color: active ? v.primary : v.text,
+      background: active ? "color-mix(in srgb, ".concat(v.primary, " 10%, transparent)") : "transparent",
+      fontWeight: active ? 600 : 500
+    };
+  },
+  navIcon: {
+    display: "inline-flex",
+    width: 18,
+    justifyContent: "center",
+    color: "inherit"
+  },
+  iconButton: {
+    width: 36,
+    height: 36,
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    borderRadius: v.radius,
+    border: "1px solid ".concat(v.border),
+    background: v.surface,
+    color: v.text,
+    cursor: "pointer",
+    fontSize: 16,
+    padding: 0
+  },
+  avatarButton: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: 8,
+    height: 36,
+    padding: "0 10px 0 4px",
+    borderRadius: 999,
+    border: "1px solid ".concat(v.border),
+    background: v.surface,
+    color: v.text,
+    cursor: "pointer",
+    fontSize: 13
+  },
+  avatar: {
+    width: 28,
+    height: 28,
+    borderRadius: "50%",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    background: v.primary,
+    color: v.primaryFg,
+    fontSize: 12,
+    fontWeight: 700
+  },
+  menu: {
+    position: "absolute",
+    right: 0,
+    top: "calc(100% + 6px)",
+    minWidth: 220,
+    padding: 6,
+    borderRadius: v.radius,
+    border: "1px solid ".concat(v.border),
+    background: v.surface,
+    boxShadow: "0 10px 30px rgba(0,0,0,0.12)",
+    zIndex: 50
+  },
+  menuHeader: {
+    padding: "8px 10px 10px",
+    borderBottom: "1px solid ".concat(v.border),
+    marginBottom: 4
+  },
+  menuItem: function menuItem(danger) {
+    return {
+      display: "flex",
+      width: "100%",
+      alignItems: "center",
+      gap: 8,
+      padding: "8px 10px",
+      borderRadius: "calc(".concat(v.radius, " - 2px)"),
+      border: "none",
+      background: "transparent",
+      color: danger ? v.danger : v.text,
+      fontSize: 14,
+      textAlign: "left",
+      textDecoration: "none",
+      cursor: "pointer"
+    };
+  },
+  overlay: {
+    position: "fixed",
+    inset: 0,
+    background: "rgba(0,0,0,0.4)",
+    zIndex: 60
+  },
+  drawer: function drawer(side) {
+    return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
+      position: "fixed",
+      top: 0,
+      bottom: 0
+    }, side, 0), "width", "min(360px, 90vw)"), "padding", 16), "overflowY", "auto"), "background", v.surface), "color", v.text), "borderLeft", side === "right" ? "1px solid ".concat(v.border) : "none"), "borderRight", side === "left" ? "1px solid ".concat(v.border) : "none"), "boxShadow", "0 0 40px rgba(0,0,0,0.2)"), "zIndex", 61);
+  },
+  drawerHead: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    marginBottom: 12
+  },
+  gatePage: {
+    minHeight: "100vh",
+    display: "flex",
+    flexDirection: "column",
+    background: v.bg,
+    color: v.text,
+    fontFamily: v.font
+  },
+  gateCard: {
+    width: "min(480px, 100%)",
+    margin: "40px auto",
+    padding: 8
+  },
+  skeletonBar: function skeletonBar(w) {
+    return {
+      height: 12,
+      width: w,
+      borderRadius: 6,
+      background: v.border,
+      opacity: 0.6
+    };
+  }
+};

package/dist/theme/PowrThemeProvider.js

@@ -4,7 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = PowrThemeProvider;
-exports.powrThemeStorageKey = powrThemeStorageKey;
+Object.defineProperty(exports, "powrThemeStorageKey", {
+  enumerable: true,
+  get: function get() {
+    return _tokens.powrThemeStorageKey;
+  }
+});
 exports.usePowrTheme = usePowrTheme;
 var _react = _interopRequireWildcard(require("react"));
 var _tokens = require("./tokens");
@@ -24,11 +29,7 @@ function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 var config = require("../config");
 var PowrThemeContext = /*#__PURE__*/(0, _react.createContext)(null);
-var STORAGE_PREFIX = "powr-theme";
 var DARK_QUERY = "(prefers-color-scheme: dark)";
-function powrThemeStorageKey(projectId) {
-  return "".concat(STORAGE_PREFIX, ":").concat(projectId || "default");
-}
 function readStorage(key) {
   if (typeof window === "undefined") return null;
   try {
@@ -91,7 +92,7 @@ function PowrThemeProvider(_ref) {
     className = _ref.className,
     onChange = _ref.onChange,
     children = _ref.children;
-  var storageKey = powrThemeStorageKey(projectId || config.projectId);
+  var storageKey = (0, _tokens.powrThemeStorageKey)(projectId || config.projectId);
   var _useState = (0, _react.useState)(function () {
       return (0, _tokens.normalizeScheme)(schemeProp);
     }),
@@ -164,8 +165,10 @@ function PowrThemeProvider(_ref) {
   }, [resolved]);
 
   // attach="root": write on <html> so product CSS, portals and toasts see the same vars.
+  // Wait for the cache read: otherwise the first commit writes the prop defaults
+  // over what `powrThemeInitScript` already painted (one light frame for dark users).
   (0, _react.useEffect)(function () {
-    if (attach !== "root" || typeof document === "undefined") return undefined;
+    if (attach !== "root" || typeof document === "undefined" || !hydrated) return undefined;
     var el = document.documentElement;
     for (var _i = 0, _Object$keys = Object.keys(cssVars); _i < _Object$keys.length; _i++) {
       var name = _Object$keys[_i];
@@ -193,11 +196,21 @@ function PowrThemeProvider(_ref) {
       el.removeAttribute("data-powr-preset");
       el.style.removeProperty("color-scheme");
     };
-  }, [attach, cssVars, resolved.scheme, resolved.density, resolved.preset]);
+  }, [attach, hydrated, cssVars, resolved.scheme, resolved.density, resolved.preset]);
   var commit = (0, _react.useCallback)(function (next) {
-    if (persist) writeStorage(storageKey, next);
     if (typeof onChange === "function") onChange(next);
-  }, [persist, storageKey, onChange]);
+  }, [onChange]);
+
+  // Cache from state, not from setter closures — three back-to-back setX calls
+  // (host pull) must leave the cache equal to the final state, not the first.
+  (0, _react.useEffect)(function () {
+    if (!hydrated || !persist) return;
+    writeStorage(storageKey, {
+      scheme: scheme,
+      density: density,
+      preset: preset
+    });
+  }, [hydrated, persist, storageKey, scheme, density, preset]);
   var setScheme = (0, _react.useCallback)(function (value) {
     var s = (0, _tokens.normalizeScheme)(value);
     setSchemeState(s);

package/dist/theme/PowrThemeSettings.js

@@ -0,0 +1,323 @@
+"use strict";
+
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = PowrThemeSettings;
+var _react = _interopRequireWildcard(require("react"));
+var _PowrThemeProvider = require("./PowrThemeProvider");
+var _tokens = require("./tokens");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t2 in e) "default" !== _t2 && {}.hasOwnProperty.call(e, _t2) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t2)) && (i.get || i.set) ? o(f, _t2, i) : f[_t2] = e[_t2]); return f; })(e, t); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
+function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
+/**
+ * User-level theme selectors: scheme · density · product preset.
+ *
+ * Reads and writes through `usePowrTheme()`, so it needs a `PowrThemeProvider`
+ * above it. Legacy apps mount this inside their own Settings page; the
+ * wrapper opens it in a drawer. Presets come from the product — this panel
+ * never invents colours (no colour wheel).
+ *
+ * `onSave` is the hook for card 3 (host `/users/me/preferences`). Until then
+ * changes are live + cached in localStorage by the provider.
+ */
+
+var SCHEME_LABELS = {
+  light: "Light",
+  dark: "Dark",
+  system: "System"
+};
+var DENSITY_LABELS = {
+  comfortable: "Comfortable",
+  compact: "Compact"
+};
+var styles = {
+  root: {
+    display: "grid",
+    gap: 20,
+    color: (0, _tokens.powrVar)("text", "#111827"),
+    fontFamily: (0, _tokens.powrVar)("font", "system-ui, sans-serif")
+  },
+  title: {
+    margin: 0,
+    fontSize: 16,
+    fontWeight: 600
+  },
+  label: {
+    display: "block",
+    fontSize: 12,
+    fontWeight: 600,
+    letterSpacing: "0.04em",
+    textTransform: "uppercase",
+    color: (0, _tokens.powrVar)("muted", "#6b7280"),
+    marginBottom: 8
+  },
+  segmented: {
+    display: "inline-flex",
+    padding: 3,
+    gap: 2,
+    borderRadius: (0, _tokens.powrVar)("radius", "0.5rem"),
+    border: "1px solid ".concat((0, _tokens.powrVar)("border", "#e5e7eb")),
+    background: (0, _tokens.powrVar)("bg", "#fafafa")
+  },
+  segment: function segment(active) {
+    return {
+      padding: "6px 12px",
+      fontSize: 13,
+      lineHeight: 1.2,
+      borderRadius: "calc(".concat((0, _tokens.powrVar)("radius", "0.5rem"), " - 2px)"),
+      border: "none",
+      cursor: "pointer",
+      background: active ? (0, _tokens.powrVar)("surface", "#fff") : "transparent",
+      color: active ? (0, _tokens.powrVar)("text", "#111827") : (0, _tokens.powrVar)("muted", "#6b7280"),
+      boxShadow: active ? "0 1px 2px rgba(0,0,0,0.08)" : "none",
+      fontWeight: active ? 600 : 400
+    };
+  },
+  presetGrid: {
+    display: "grid",
+    gridTemplateColumns: "repeat(auto-fill, minmax(140px, 1fr))",
+    gap: 8
+  },
+  presetCard: function presetCard(active) {
+    return {
+      display: "grid",
+      gap: 8,
+      padding: 10,
+      textAlign: "left",
+      cursor: "pointer",
+      borderRadius: (0, _tokens.powrVar)("radius", "0.5rem"),
+      border: "2px solid ".concat(active ? (0, _tokens.powrVar)("primary", "#2563eb") : (0, _tokens.powrVar)("border", "#e5e7eb")),
+      background: (0, _tokens.powrVar)("surface", "#fff"),
+      color: (0, _tokens.powrVar)("text", "#111827")
+    };
+  },
+  swatchRow: {
+    display: "flex",
+    gap: 4
+  },
+  swatch: function swatch(bg) {
+    return {
+      width: 18,
+      height: 18,
+      borderRadius: 4,
+      background: bg,
+      border: "1px solid ".concat((0, _tokens.powrVar)("border", "#e5e7eb"))
+    };
+  },
+  footer: {
+    display: "flex",
+    gap: 8,
+    alignItems: "center"
+  },
+  button: function button(primary) {
+    return {
+      padding: "8px 14px",
+      fontSize: 13,
+      cursor: "pointer",
+      borderRadius: (0, _tokens.powrVar)("radius", "0.5rem"),
+      border: "1px solid ".concat(primary ? (0, _tokens.powrVar)("primary", "#2563eb") : (0, _tokens.powrVar)("border", "#e5e7eb")),
+      background: primary ? (0, _tokens.powrVar)("primary", "#2563eb") : (0, _tokens.powrVar)("surface", "#fff"),
+      color: primary ? (0, _tokens.powrVar)("primary-fg", "#fff") : (0, _tokens.powrVar)("text", "#111827")
+    };
+  },
+  hint: {
+    fontSize: 12,
+    color: (0, _tokens.powrVar)("muted", "#6b7280"),
+    margin: 0
+  }
+};
+function Segmented(_ref) {
+  var value = _ref.value,
+    options = _ref.options,
+    labels = _ref.labels,
+    onChange = _ref.onChange,
+    name = _ref.name;
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    role: "radiogroup",
+    "aria-label": name,
+    style: styles.segmented
+  }, options.map(function (opt) {
+    return /*#__PURE__*/_react["default"].createElement("button", {
+      key: opt,
+      type: "button",
+      role: "radio",
+      "aria-checked": value === opt,
+      onClick: function onClick() {
+        return onChange(opt);
+      },
+      style: styles.segment(value === opt)
+    }, labels[opt] || opt);
+  }));
+}
+function presetSwatches(preset, dark) {
+  var t = dark && preset.dark || preset.tokens || {};
+  return [t.bg, t.surface, t.primary, t.text].filter(Boolean);
+}
+
+/**
+ * @param {object} props
+ * @param {string} [props.title="Appearance"]
+ * @param {boolean} [props.showScheme=true]
+ * @param {boolean} [props.showDensity=true]
+ * @param {boolean} [props.showPresets=true] - Hidden automatically when the product passed no presets.
+ * @param {(value: {scheme, density, preset}) => void|Promise<void>} [props.onSave] - Card 3: host save. Shows a Save button when given.
+ * @param {boolean} [props.saving]
+ * @param {string} [props.saveLabel="Save"]
+ */
+function PowrThemeSettings(_ref2) {
+  var _ref2$title = _ref2.title,
+    title = _ref2$title === void 0 ? "Appearance" : _ref2$title,
+    _ref2$showScheme = _ref2.showScheme,
+    showScheme = _ref2$showScheme === void 0 ? true : _ref2$showScheme,
+    _ref2$showDensity = _ref2.showDensity,
+    showDensity = _ref2$showDensity === void 0 ? true : _ref2$showDensity,
+    _ref2$showPresets = _ref2.showPresets,
+    showPresets = _ref2$showPresets === void 0 ? true : _ref2$showPresets,
+    onSave = _ref2.onSave,
+    _ref2$saving = _ref2.saving,
+    saving = _ref2$saving === void 0 ? false : _ref2$saving,
+    _ref2$error = _ref2.error,
+    error = _ref2$error === void 0 ? null : _ref2$error,
+    _ref2$saveLabel = _ref2.saveLabel,
+    saveLabel = _ref2$saveLabel === void 0 ? "Save" : _ref2$saveLabel;
+  var t = (0, _PowrThemeProvider.usePowrTheme)();
+  var _useState = (0, _react.useState)(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    savedAt = _useState2[0],
+    setSavedAt = _useState2[1];
+  var dirty = savedAt === null || savedAt.scheme !== t.scheme || savedAt.density !== t.density || savedAt.preset !== t.preset;
+  var handleSave = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee() {
+      var value, _t;
+      return _regenerator().w(function (_context) {
+        while (1) switch (_context.p = _context.n) {
+          case 0:
+            value = {
+              scheme: t.scheme,
+              density: t.density,
+              preset: t.preset
+            };
+            _context.p = 1;
+            _context.n = 2;
+            return onSave(value);
+          case 2:
+            setSavedAt(value);
+            _context.n = 4;
+            break;
+          case 3:
+            _context.p = 3;
+            _t = _context.v;
+          case 4:
+            return _context.a(2);
+        }
+      }, _callee, null, [[1, 3]]);
+    }));
+    return function handleSave() {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+  var presets = Array.isArray(t.presets) ? t.presets : [];
+  var hasPresets = showPresets && presets.length > 0;
+  var isDark = t.resolvedScheme === "dark";
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: styles.root
+  }, title ? /*#__PURE__*/_react["default"].createElement("h3", {
+    style: styles.title
+  }, title) : null, showScheme ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
+    style: styles.label
+  }, "Scheme"), /*#__PURE__*/_react["default"].createElement(Segmented, {
+    name: "Scheme",
+    value: t.scheme,
+    options: _tokens.POWR_SCHEMES,
+    labels: SCHEME_LABELS,
+    onChange: t.setScheme
+  }), t.scheme === "system" ? /*#__PURE__*/_react["default"].createElement("p", {
+    style: _objectSpread(_objectSpread({}, styles.hint), {}, {
+      marginTop: 6
+    })
+  }, "Following your device: ", t.resolvedScheme, ".") : null) : null, showDensity ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
+    style: styles.label
+  }, "Density"), /*#__PURE__*/_react["default"].createElement(Segmented, {
+    name: "Density",
+    value: t.density,
+    options: Object.keys(_tokens.POWR_DENSITIES),
+    labels: DENSITY_LABELS,
+    onChange: t.setDensity
+  })) : null, hasPresets ? /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement("span", {
+    style: styles.label
+  }, "Theme"), /*#__PURE__*/_react["default"].createElement("div", {
+    style: styles.presetGrid
+  }, /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
+    "aria-pressed": !t.preset,
+    onClick: function onClick() {
+      return t.setPreset(null);
+    },
+    style: styles.presetCard(!t.preset)
+  }, /*#__PURE__*/_react["default"].createElement("span", {
+    style: {
+      fontSize: 13,
+      fontWeight: 600
+    }
+  }, "Default"), /*#__PURE__*/_react["default"].createElement("span", {
+    style: styles.hint
+  }, "App\u2019s standard look")), presets.map(function (p) {
+    return /*#__PURE__*/_react["default"].createElement("button", {
+      key: p.id,
+      type: "button",
+      "aria-pressed": t.preset === p.id,
+      onClick: function onClick() {
+        return t.setPreset(p.id);
+      },
+      style: styles.presetCard(t.preset === p.id)
+    }, /*#__PURE__*/_react["default"].createElement("span", {
+      style: {
+        fontSize: 13,
+        fontWeight: 600
+      }
+    }, p.label || p.id), /*#__PURE__*/_react["default"].createElement("span", {
+      style: styles.swatchRow
+    }, presetSwatches(p, isDark).map(function (c, i) {
+      return /*#__PURE__*/_react["default"].createElement("span", {
+        key: i,
+        style: styles.swatch(c)
+      });
+    })));
+  }))) : null, /*#__PURE__*/_react["default"].createElement("div", {
+    style: styles.footer
+  }, onSave ? /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
+    disabled: saving,
+    onClick: handleSave,
+    style: _objectSpread(_objectSpread({}, styles.button(true)), {}, {
+      opacity: saving ? 0.6 : 1
+    })
+  }, saving ? "Saving…" : saveLabel) : null, /*#__PURE__*/_react["default"].createElement("button", {
+    type: "button",
+    onClick: t.reset,
+    style: styles.button(false)
+  }, "Reset"), error ? /*#__PURE__*/_react["default"].createElement("p", {
+    style: _objectSpread(_objectSpread({}, styles.hint), {}, {
+      color: (0, _tokens.powrVar)("danger", "#dc2626")
+    })
+  }, error) : onSave ? /*#__PURE__*/_react["default"].createElement("p", {
+    style: styles.hint
+  }, dirty ? "Saves to your Powr account — follows you to other devices." : "Saved to your account.") : /*#__PURE__*/_react["default"].createElement("p", {
+    style: styles.hint
+  }, "Saved on this device.")));
+}