@inkandswitch/patchwork-pkg-base 0.0.17 → 0.0.19

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

@@ -1,11 +0,0 @@
-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

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

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

@@ -1,576 +0,0 @@
-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