@inkandswitch/patchwork-pkg-base 0.0.16 → 0.0.17

package/packages/theming/dist/theme-editor-datatype-CIXRKEFF.js

@@ -0,0 +1,11 @@
+import {
+  CustomThemeDatatype,
+  DEFAULT_VALUES,
+  EDITABLE_VARIABLES
+} from "./chunk-U7SC4JPE.js";
+export {
+  CustomThemeDatatype,
+  DEFAULT_VALUES,
+  EDITABLE_VARIABLES
+};
+//# sourceMappingURL=theme-editor-datatype-CIXRKEFF.js.map

package/packages/theming/dist/theme-editor-datatype-CIXRKEFF.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/packages/theming/dist/theme-editor.js

@@ -0,0 +1,576 @@
+import {
+  DEFAULT_VALUES,
+  EDITABLE_VARIABLES
+} from "./chunk-U7SC4JPE.js";
+
+// src/theme-editor.tsx
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { setStyleProperty as _$setStyleProperty } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { memo as _$memo } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { render } from "solid-js/web";
+import { createSignal, createEffect, For, onCleanup, Show } from "solid-js";
+var _tmpl$ = /* @__PURE__ */ _$template(`<div class=group><div class=group-title>Discovered :root variables`);
+var _tmpl$2 = /* @__PURE__ */ _$template(`<div class=theme-editor><div class=header><input class=name-input placeholder="Theme name"><div class=toolbar><button class=mode-toggle><span class=mode-icon></span></button><button class=btn></button><button class=btn>Reset</button><button class=btn>Copy CSS</button></div></div><div class=preview><div class=preview-title>Preview</div><div class=swatch-row><div class=swatch></div><div class=swatch></div><div class=swatch></div><div class=swatch></div><div class=swatch></div><div class=swatch></div><div class=swatch></div><div class=swatch></div></div><div class=preview-title style=margin-top:0.5rem>Fill offsets</div><div class=offset-strip><div></div><div></div><div></div><div></div><div></div><div></div></div><div class=preview-title>Line offsets</div><div class=offset-strip><div></div><div></div><div></div><div></div><div></div><div></div></div></div><div class=group><div class=group-title>Custom CSS</div><textarea class=css-textarea placeholder="/* Additional CSS rules */
+[theme=&quot;my-theme&quot;] .some-element {
+  color: red;
+}"></textarea></div><div class=group><div class=group-title>Generated CSS</div><pre class=export-area>`);
+var _tmpl$3 = /* @__PURE__ */ _$template(`<div class=group><div class=group-title>`);
+var _tmpl$4 = /* @__PURE__ */ _$template(`<input class=color-input type=color>`);
+var _tmpl$5 = /* @__PURE__ */ _$template(`<span class=hex-display>`);
+var _tmpl$6 = /* @__PURE__ */ _$template(`<input class=text-input type=text>`);
+var _tmpl$7 = /* @__PURE__ */ _$template(`<div class=var-row><span class=var-label>`);
+var _tmpl$8 = /* @__PURE__ */ _$template(`<button class=btn-sm>Override`);
+var _tmpl$9 = /* @__PURE__ */ _$template(`<div class=var-row><span class=discovered-label>`);
+var FILL_OFFSET_RAMP = [[10, 0], [20, 7], [30, 18], [40, 32], [50, 50]];
+function generateThemeCss(name, mode, vars, customCss) {
+  let css = `[theme="${name}"] {
+`;
+  css += `	color-scheme: ${mode};
+`;
+  for (const [key, value] of Object.entries(vars)) {
+    css += `	${key}: ${value};
+`;
+  }
+  for (const [label, amount] of FILL_OFFSET_RAMP) {
+    css += `	--studio-fill-offset-${label}: color-mix(in oklch, color-mix(in oklch, var(--studio-fill), var(--studio-line) ${amount}%), var(--studio-offset-tint, var(--studio-secondary)) var(--studio-offset-tint-amount, 10%));
+`;
+  }
+  for (const pct of [10, 20, 30, 40, 50]) {
+    css += `	--studio-line-offset-${pct}: color-mix(in oklch, color-mix(in oklch, var(--studio-line), var(--studio-fill) ${pct}%), var(--studio-offset-tint, var(--studio-secondary)) var(--studio-offset-tint-amount, 10%));
+`;
+  }
+  css += "}\n";
+  if (customCss?.trim()) {
+    css += `
+/* Custom CSS */
+${customCss}
+`;
+  }
+  return css;
+}
+function discoverRootVariables() {
+  const knownKeys = new Set(EDITABLE_VARIABLES.flatMap((g) => g.vars.map((v) => v.key)));
+  for (const pct of [10, 20, 30, 40, 50]) {
+    knownKeys.add(`--studio-fill-offset-${pct}`);
+    knownKeys.add(`--studio-line-offset-${pct}`);
+  }
+  const found = {};
+  try {
+    for (const sheet of document.styleSheets) {
+      try {
+        for (const rule of sheet.cssRules) {
+          if (!(rule instanceof CSSStyleRule)) continue;
+          if (rule.selectorText !== ":root") continue;
+          for (let i = 0; i < rule.style.length; i++) {
+            const prop = rule.style[i];
+            if (!prop.startsWith("--")) continue;
+            if (knownKeys.has(prop)) continue;
+            found[prop] = rule.style.getPropertyValue(prop).trim();
+          }
+        }
+      } catch {
+      }
+    }
+  } catch {
+  }
+  return found;
+}
+function looksLikeColor(value) {
+  const v = value.trim().toLowerCase();
+  return v.startsWith("#") || v.startsWith("rgb") || v.startsWith("hsl") || v.startsWith("oklch") || v.startsWith("oklab") || v.startsWith("lch") || v.startsWith("lab") || v.startsWith("color(") || v.startsWith("color-mix(");
+}
+function ThemeEditorTool(handle, element) {
+  const [doc, setDoc] = createSignal(handle.doc());
+  const onChange = () => setDoc(handle.doc());
+  handle.on("change", onChange);
+  const [livePreview, setLivePreview] = createSignal(true);
+  createEffect(() => {
+    if (!livePreview()) return;
+    const d = doc();
+    if (!d?.variables) return;
+    const root = document.documentElement;
+    for (const [key, value] of Object.entries(d.variables)) {
+      root.style.setProperty(key, value);
+    }
+    for (const [label, amount] of FILL_OFFSET_RAMP) {
+      root.style.setProperty(`--studio-fill-offset-${label}`, `color-mix(in oklch, color-mix(in oklch, var(--studio-fill), var(--studio-line) ${amount}%), var(--studio-offset-tint, var(--studio-secondary)) var(--studio-offset-tint-amount, 10%))`);
+    }
+    for (const pct of [10, 20, 30, 40, 50]) {
+      root.style.setProperty(`--studio-line-offset-${pct}`, `color-mix(in oklch, color-mix(in oklch, var(--studio-line), var(--studio-fill) ${pct}%), var(--studio-offset-tint, var(--studio-secondary)) var(--studio-offset-tint-amount, 10%))`);
+    }
+  });
+  onCleanup(() => {
+    const root = document.documentElement;
+    const d = doc();
+    if (d?.variables) {
+      for (const key of Object.keys(d.variables)) {
+        root.style.removeProperty(key);
+      }
+      for (const pct of [10, 20, 30, 40, 50]) {
+        root.style.removeProperty(`--studio-fill-offset-${pct}`);
+        root.style.removeProperty(`--studio-line-offset-${pct}`);
+      }
+    }
+  });
+  function setVar(key, value) {
+    handle.change((d) => {
+      if (!d.variables) d.variables = {};
+      d.variables[key] = value;
+    });
+  }
+  function setName(name) {
+    handle.change((d) => {
+      d.name = name;
+    });
+  }
+  function toggleMode() {
+    handle.change((d) => {
+      d.mode = d.mode === "dark" ? "light" : "dark";
+    });
+  }
+  function setCustomCss(css) {
+    handle.change((d) => {
+      d.customCss = css;
+    });
+  }
+  function resetToDefaults() {
+    handle.change((d) => {
+      d.variables = {
+        ...DEFAULT_VALUES
+      };
+    });
+  }
+  const [rootVars, setRootVars] = createSignal({});
+  setTimeout(() => setRootVars(discoverRootVariables()), 0);
+  function exportCss() {
+    const d = doc();
+    return generateThemeCss(d.name?.toLowerCase().replace(/\s+/g, "-") || "custom", d.mode || "light", d.variables || {}, d.customCss);
+  }
+  const customCssPreviewEl = document.createElement("style");
+  element.appendChild(customCssPreviewEl);
+  createEffect(() => {
+    if (!livePreview()) {
+      customCssPreviewEl.textContent = "";
+      return;
+    }
+    customCssPreviewEl.textContent = doc()?.customCss || "";
+  });
+  onCleanup(() => customCssPreviewEl.remove());
+  function copyToClipboard() {
+    navigator.clipboard.writeText(exportCss());
+  }
+  const style = document.createElement("style");
+  style.textContent = `
+		.theme-editor {
+			padding: var(--studio-space-md, 1rem);
+			font-family: var(--studio-family-sans, system-ui, sans-serif);
+			color: var(--studio-line, black);
+			display: flex;
+			flex-direction: column;
+			gap: var(--studio-space-md, 1rem);
+			height: 100%;
+			overflow-y: auto;
+		}
+		.theme-editor .header {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			gap: var(--studio-space-sm, 0.5rem);
+		}
+		.theme-editor .name-input {
+			font-size: 1.25rem;
+			font-weight: 600;
+			border: none;
+			border-bottom: 2px solid transparent;
+			background: none;
+			color: inherit;
+			font-family: inherit;
+			padding: var(--studio-space-2xs, 0.25rem) 0;
+			outline: none;
+			flex: 1;
+			min-width: 0;
+		}
+		.theme-editor .name-input:focus {
+			border-bottom-color: var(--studio-primary-line, var(--studio-primary, #35f7ca));
+		}
+		.theme-editor .toolbar {
+			display: flex;
+			gap: var(--studio-space-xs, 0.375rem);
+			align-items: center;
+		}
+		.theme-editor .btn {
+			padding: var(--studio-space-2xs, 0.25rem) var(--studio-space-sm, 0.5rem);
+			border-radius: var(--studio-radius-sm, 4px);
+			border: 1px solid color-mix(in oklch, var(--studio-line, black), transparent 80%);
+			background: var(--studio-fill, white);
+			color: var(--studio-line, black);
+			font-size: 0.8rem;
+			font-family: inherit;
+			cursor: pointer;
+		}
+		.theme-editor .btn:hover {
+			background: color-mix(in oklch, var(--studio-fill, white), var(--studio-line, black) 5%);
+		}
+		.theme-editor .btn[data-active] {
+			background: var(--studio-primary-fill, var(--studio-primary, #35f7ca));
+			border-color: var(--studio-primary-line, var(--studio-primary, #35f7ca));
+			color: var(--studio-primary-line, var(--studio-fill, white));
+		}
+		.theme-editor .mode-toggle {
+			display: flex;
+			align-items: center;
+			gap: var(--studio-space-2xs, 0.25rem);
+			padding: var(--studio-space-2xs, 0.25rem) var(--studio-space-sm, 0.5rem);
+			border-radius: var(--studio-radius-sm, 4px);
+			border: 1px solid color-mix(in oklch, var(--studio-line, black), transparent 80%);
+			background: var(--studio-fill, white);
+			color: var(--studio-line, black);
+			font-size: 0.8rem;
+			font-family: inherit;
+			cursor: pointer;
+		}
+		.theme-editor .mode-toggle:hover {
+			background: color-mix(in oklch, var(--studio-fill, white), var(--studio-line, black) 5%);
+		}
+		.theme-editor .mode-icon {
+			font-size: 1em;
+			line-height: 1;
+		}
+		.theme-editor .group {
+			display: flex;
+			flex-direction: column;
+			gap: var(--studio-space-xs, 0.375rem);
+		}
+		.theme-editor .group-title {
+			font-size: 0.75rem;
+			font-weight: 600;
+			text-transform: uppercase;
+			letter-spacing: 0.05em;
+			color: color-mix(in oklch, var(--studio-line, black), transparent 50%);
+		}
+		.theme-editor .var-row {
+			display: flex;
+			align-items: center;
+			gap: var(--studio-space-sm, 0.5rem);
+		}
+		.theme-editor .var-label {
+			font-size: 0.8rem;
+			min-width: 8rem;
+			color: color-mix(in oklch, var(--studio-line, black), transparent 30%);
+		}
+		.theme-editor .color-input {
+			width: 2.5rem;
+			height: 2rem;
+			border: 1px solid color-mix(in oklch, var(--studio-line, black), transparent 80%);
+			border-radius: var(--studio-radius-sm, 4px);
+			padding: 2px;
+			cursor: pointer;
+			background: none;
+		}
+		.theme-editor .text-input {
+			flex: 1;
+			min-width: 0;
+			padding: var(--studio-space-2xs, 0.25rem) var(--studio-space-xs, 0.375rem);
+			border: 1px solid color-mix(in oklch, var(--studio-line, black), transparent 80%);
+			border-radius: var(--studio-radius-sm, 4px);
+			background: var(--studio-fill, white);
+			color: var(--studio-line, black);
+			font-size: 0.8rem;
+			font-family: inherit;
+		}
+		.theme-editor .text-input:focus {
+			outline: 2px solid var(--studio-primary-line, var(--studio-primary, #35f7ca));
+			outline-offset: 1px;
+		}
+		.theme-editor .hex-display {
+			font-family: var(--studio-family-code, ui-monospace, monospace);
+			font-size: 0.75rem;
+			color: color-mix(in oklch, var(--studio-line, black), transparent 50%);
+			min-width: 5rem;
+		}
+		.theme-editor .preview {
+			border: 1px solid color-mix(in oklch, var(--studio-line, black), transparent 80%);
+			border-radius: var(--studio-radius-md, 8px);
+			padding: var(--studio-space-md, 1rem);
+			display: flex;
+			flex-direction: column;
+			gap: var(--studio-space-sm, 0.5rem);
+		}
+		.theme-editor .preview-title {
+			font-size: 0.75rem;
+			font-weight: 600;
+			text-transform: uppercase;
+			letter-spacing: 0.05em;
+			color: color-mix(in oklch, var(--studio-line, black), transparent 50%);
+			margin-bottom: var(--studio-space-2xs, 0.25rem);
+		}
+		.theme-editor .swatch-row {
+			display: flex;
+			gap: var(--studio-space-2xs, 0.25rem);
+			flex-wrap: wrap;
+		}
+		.theme-editor .swatch {
+			width: 2rem;
+			height: 2rem;
+			border-radius: var(--studio-radius-sm, 4px);
+			border: 1px solid color-mix(in oklch, var(--studio-line, black), transparent 85%);
+		}
+		.theme-editor .offset-strip {
+			display: flex;
+			height: 1.5rem;
+			border-radius: var(--studio-radius-sm, 4px);
+			overflow: hidden;
+			border: 1px solid color-mix(in oklch, var(--studio-line, black), transparent 85%);
+		}
+		.theme-editor .offset-strip > div {
+			flex: 1;
+		}
+		.theme-editor .export-area {
+			font-family: var(--studio-family-code, ui-monospace, monospace);
+			font-size: 0.7rem;
+			white-space: pre;
+			overflow-x: auto;
+			background: color-mix(in oklch, var(--studio-fill, white), var(--studio-line, black) 3%);
+			border: 1px solid color-mix(in oklch, var(--studio-line, black), transparent 85%);
+			border-radius: var(--studio-radius-sm, 4px);
+			padding: var(--studio-space-sm, 0.5rem);
+			max-height: 200px;
+			overflow-y: auto;
+		}
+		.theme-editor .css-textarea {
+			font-family: var(--studio-family-code, ui-monospace, monospace);
+			font-size: 0.8rem;
+			min-height: 6rem;
+			resize: vertical;
+			padding: var(--studio-space-sm, 0.5rem);
+			border: 1px solid color-mix(in oklch, var(--studio-line, black), transparent 80%);
+			border-radius: var(--studio-radius-sm, 4px);
+			background: var(--studio-fill, white);
+			color: var(--studio-line, black);
+			tab-size: 2;
+			white-space: pre;
+			overflow-x: auto;
+		}
+		.theme-editor .css-textarea:focus {
+			outline: 2px solid var(--studio-primary-line, var(--studio-primary, #35f7ca));
+			outline-offset: 1px;
+		}
+		.theme-editor .discovered-label {
+			font-family: var(--studio-family-code, ui-monospace, monospace);
+			font-size: 0.75rem;
+			min-width: 8rem;
+			color: color-mix(in oklch, var(--studio-line, black), transparent 30%);
+			word-break: break-all;
+		}
+		.theme-editor .btn-sm {
+			padding: 2px var(--studio-space-xs, 0.375rem);
+			border-radius: var(--studio-radius-sm, 4px);
+			border: 1px solid color-mix(in oklch, var(--studio-line, black), transparent 80%);
+			background: var(--studio-fill, white);
+			color: var(--studio-line, black);
+			font-size: 0.7rem;
+			font-family: inherit;
+			cursor: pointer;
+		}
+		.theme-editor .btn-sm:hover {
+			background: color-mix(in oklch, var(--studio-fill, white), var(--studio-line, black) 5%);
+		}
+	`;
+  element.appendChild(style);
+  const dispose = render(() => {
+    const vars = () => doc()?.variables || {};
+    return (() => {
+      var _el$ = _tmpl$2(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.nextSibling, _el$5 = _el$4.firstChild, _el$6 = _el$5.firstChild, _el$7 = _el$5.nextSibling, _el$8 = _el$7.nextSibling, _el$9 = _el$8.nextSibling, _el$0 = _el$2.nextSibling, _el$1 = _el$0.firstChild, _el$10 = _el$1.nextSibling, _el$11 = _el$10.firstChild, _el$12 = _el$11.nextSibling, _el$13 = _el$12.nextSibling, _el$14 = _el$13.nextSibling, _el$15 = _el$14.nextSibling, _el$16 = _el$15.nextSibling, _el$17 = _el$16.nextSibling, _el$18 = _el$17.nextSibling, _el$19 = _el$10.nextSibling, _el$20 = _el$19.nextSibling, _el$21 = _el$20.firstChild, _el$22 = _el$21.nextSibling, _el$23 = _el$22.nextSibling, _el$24 = _el$23.nextSibling, _el$25 = _el$24.nextSibling, _el$26 = _el$25.nextSibling, _el$27 = _el$20.nextSibling, _el$28 = _el$27.nextSibling, _el$29 = _el$28.firstChild, _el$30 = _el$29.nextSibling, _el$31 = _el$30.nextSibling, _el$32 = _el$31.nextSibling, _el$33 = _el$32.nextSibling, _el$34 = _el$33.nextSibling, _el$37 = _el$0.nextSibling, _el$38 = _el$37.firstChild, _el$39 = _el$38.nextSibling, _el$40 = _el$37.nextSibling, _el$41 = _el$40.firstChild, _el$42 = _el$41.nextSibling;
+      _el$3.$$input = (e) => setName(e.currentTarget.value);
+      _el$5.$$click = toggleMode;
+      _$insert(_el$6, () => (doc()?.mode || "light") === "dark" ? "\u263E" : "\u2600");
+      _$insert(_el$5, () => (doc()?.mode || "light") === "dark" ? "Dark" : "Light", null);
+      _el$7.$$click = () => setLivePreview(!livePreview());
+      _$insert(_el$7, () => livePreview() ? "Live" : "Paused");
+      _el$8.$$click = resetToDefaults;
+      _el$9.$$click = copyToClipboard;
+      _$insert(_el$, _$createComponent(For, {
+        each: EDITABLE_VARIABLES,
+        children: (group) => (() => {
+          var _el$43 = _tmpl$3(), _el$44 = _el$43.firstChild;
+          _$insert(_el$44, () => group.group);
+          _$insert(_el$43, _$createComponent(For, {
+            get each() {
+              return group.vars;
+            },
+            children: (v) => (() => {
+              var _el$45 = _tmpl$7(), _el$46 = _el$45.firstChild;
+              _$insert(_el$46, () => v.label);
+              _$insert(_el$45, _$createComponent(Show, {
+                get when() {
+                  return v.type === "color";
+                },
+                get children() {
+                  return [(() => {
+                    var _el$47 = _tmpl$4();
+                    _el$47.$$input = (e) => setVar(v.key, e.currentTarget.value);
+                    _$effect(() => _el$47.value = vars()[v.key] || DEFAULT_VALUES[v.key] || "#000000");
+                    return _el$47;
+                  })(), (() => {
+                    var _el$48 = _tmpl$5();
+                    _$insert(_el$48, () => vars()[v.key] || DEFAULT_VALUES[v.key]);
+                    return _el$48;
+                  })()];
+                }
+              }), null);
+              _$insert(_el$45, _$createComponent(Show, {
+                get when() {
+                  return v.type === "text";
+                },
+                get children() {
+                  var _el$49 = _tmpl$6();
+                  _el$49.$$input = (e) => setVar(v.key, e.currentTarget.value);
+                  _$effect(() => _el$49.value = vars()[v.key] || DEFAULT_VALUES[v.key] || "");
+                  return _el$49;
+                }
+              }), null);
+              return _el$45;
+            })()
+          }), null);
+          return _el$43;
+        })()
+      }), _el$37);
+      _$insert(_el$, _$createComponent(Show, {
+        get when() {
+          return Object.keys(rootVars()).length > 0;
+        },
+        get children() {
+          var _el$35 = _tmpl$(), _el$36 = _el$35.firstChild;
+          _$insert(_el$35, _$createComponent(For, {
+            get each() {
+              return Object.entries(rootVars());
+            },
+            children: ([key, defaultValue]) => (() => {
+              var _el$50 = _tmpl$9(), _el$51 = _el$50.firstChild;
+              _$insert(_el$51, key);
+              _$insert(_el$50, _$createComponent(Show, {
+                get when() {
+                  return looksLikeColor(vars()[key] || defaultValue);
+                },
+                get children() {
+                  return [(() => {
+                    var _el$52 = _tmpl$4();
+                    _el$52.$$input = (e) => setVar(key, e.currentTarget.value);
+                    _$effect(() => _el$52.value = vars()[key] || defaultValue);
+                    return _el$52;
+                  })(), (() => {
+                    var _el$53 = _tmpl$5();
+                    _$insert(_el$53, () => vars()[key] || defaultValue);
+                    return _el$53;
+                  })()];
+                }
+              }), null);
+              _$insert(_el$50, _$createComponent(Show, {
+                get when() {
+                  return !looksLikeColor(vars()[key] || defaultValue);
+                },
+                get children() {
+                  var _el$54 = _tmpl$6();
+                  _el$54.$$input = (e) => setVar(key, e.currentTarget.value);
+                  _$effect(() => _el$54.value = vars()[key] || defaultValue);
+                  return _el$54;
+                }
+              }), null);
+              _$insert(_el$50, _$createComponent(Show, {
+                get when() {
+                  return !vars()[key];
+                },
+                get children() {
+                  var _el$55 = _tmpl$8();
+                  _el$55.$$click = () => setVar(key, defaultValue);
+                  return _el$55;
+                }
+              }), null);
+              return _el$50;
+            })()
+          }), null);
+          return _el$35;
+        }
+      }), _el$37);
+      _el$39.$$input = (e) => setCustomCss(e.currentTarget.value);
+      _$insert(_el$42, exportCss);
+      _$effect((_p$) => {
+        var _v$ = livePreview() ? "" : void 0, _v$2 = vars()["--studio-fill"] || "#fff", _v$3 = vars()["--studio-line"] || "#000", _v$4 = vars()["--studio-primary"] || "#35f7ca", _v$5 = vars()["--studio-secondary"] || "#33ccf8", _v$6 = vars()["--studio-danger"] || "#ff6a90", _v$7 = vars()["--studio-warning"] || "#f8c43b", _v$8 = vars()["--studio-added"] || "#35f7ca", _v$9 = vars()["--studio-link"] || "#36e", _v$0 = vars()["--studio-fill"] || "#fff", _v$1 = `color-mix(in oklch, ${vars()["--studio-fill"] || "#fff"}, ${vars()["--studio-line"] || "#000"} 10%)`, _v$10 = `color-mix(in oklch, ${vars()["--studio-fill"] || "#fff"}, ${vars()["--studio-line"] || "#000"} 20%)`, _v$11 = `color-mix(in oklch, ${vars()["--studio-fill"] || "#fff"}, ${vars()["--studio-line"] || "#000"} 30%)`, _v$12 = `color-mix(in oklch, ${vars()["--studio-fill"] || "#fff"}, ${vars()["--studio-line"] || "#000"} 40%)`, _v$13 = `color-mix(in oklch, ${vars()["--studio-fill"] || "#fff"}, ${vars()["--studio-line"] || "#000"} 50%)`, _v$14 = vars()["--studio-line"] || "#000", _v$15 = `color-mix(in oklch, ${vars()["--studio-line"] || "#000"}, ${vars()["--studio-fill"] || "#fff"} 10%)`, _v$16 = `color-mix(in oklch, ${vars()["--studio-line"] || "#000"}, ${vars()["--studio-fill"] || "#fff"} 20%)`, _v$17 = `color-mix(in oklch, ${vars()["--studio-line"] || "#000"}, ${vars()["--studio-fill"] || "#fff"} 30%)`, _v$18 = `color-mix(in oklch, ${vars()["--studio-line"] || "#000"}, ${vars()["--studio-fill"] || "#fff"} 40%)`, _v$19 = `color-mix(in oklch, ${vars()["--studio-line"] || "#000"}, ${vars()["--studio-fill"] || "#fff"} 50%)`;
+        _v$ !== _p$.e && _$setAttribute(_el$7, "data-active", _p$.e = _v$);
+        _v$2 !== _p$.t && _$setStyleProperty(_el$11, "background", _p$.t = _v$2);
+        _v$3 !== _p$.a && _$setStyleProperty(_el$12, "background", _p$.a = _v$3);
+        _v$4 !== _p$.o && _$setStyleProperty(_el$13, "background", _p$.o = _v$4);
+        _v$5 !== _p$.i && _$setStyleProperty(_el$14, "background", _p$.i = _v$5);
+        _v$6 !== _p$.n && _$setStyleProperty(_el$15, "background", _p$.n = _v$6);
+        _v$7 !== _p$.s && _$setStyleProperty(_el$16, "background", _p$.s = _v$7);
+        _v$8 !== _p$.h && _$setStyleProperty(_el$17, "background", _p$.h = _v$8);
+        _v$9 !== _p$.r && _$setStyleProperty(_el$18, "background", _p$.r = _v$9);
+        _v$0 !== _p$.d && _$setStyleProperty(_el$21, "background", _p$.d = _v$0);
+        _v$1 !== _p$.l && _$setStyleProperty(_el$22, "background", _p$.l = _v$1);
+        _v$10 !== _p$.u && _$setStyleProperty(_el$23, "background", _p$.u = _v$10);
+        _v$11 !== _p$.c && _$setStyleProperty(_el$24, "background", _p$.c = _v$11);
+        _v$12 !== _p$.w && _$setStyleProperty(_el$25, "background", _p$.w = _v$12);
+        _v$13 !== _p$.m && _$setStyleProperty(_el$26, "background", _p$.m = _v$13);
+        _v$14 !== _p$.f && _$setStyleProperty(_el$29, "background", _p$.f = _v$14);
+        _v$15 !== _p$.y && _$setStyleProperty(_el$30, "background", _p$.y = _v$15);
+        _v$16 !== _p$.g && _$setStyleProperty(_el$31, "background", _p$.g = _v$16);
+        _v$17 !== _p$.p && _$setStyleProperty(_el$32, "background", _p$.p = _v$17);
+        _v$18 !== _p$.b && _$setStyleProperty(_el$33, "background", _p$.b = _v$18);
+        _v$19 !== _p$.T && _$setStyleProperty(_el$34, "background", _p$.T = _v$19);
+        return _p$;
+      }, {
+        e: void 0,
+        t: void 0,
+        a: void 0,
+        o: void 0,
+        i: void 0,
+        n: void 0,
+        s: void 0,
+        h: void 0,
+        r: void 0,
+        d: void 0,
+        l: void 0,
+        u: void 0,
+        c: void 0,
+        w: void 0,
+        m: void 0,
+        f: void 0,
+        y: void 0,
+        g: void 0,
+        p: void 0,
+        b: void 0,
+        T: void 0
+      });
+      _$effect(() => _el$3.value = doc()?.name || "");
+      _$effect(() => _el$39.value = doc()?.customCss || "");
+      return _el$;
+    })();
+  }, element);
+  return () => {
+    handle.off("change", onChange);
+    const root = document.documentElement;
+    const d = doc();
+    if (d?.variables) {
+      for (const key of Object.keys(d.variables)) {
+        root.style.removeProperty(key);
+      }
+      for (const pct of [10, 20, 30, 40, 50]) {
+        root.style.removeProperty(`--studio-fill-offset-${pct}`);
+        root.style.removeProperty(`--studio-line-offset-${pct}`);
+      }
+    }
+    dispose();
+    style.remove();
+  };
+}
+_$delegateEvents(["input", "click"]);
+export {
+  ThemeEditorTool,
+  generateThemeCss
+};
+//# sourceMappingURL=theme-editor.js.map