@inkandswitch/patchwork-pkg-base 0.0.15 → 0.0.17

package/packages/theming/dist/tool.js

@@ -0,0 +1,405 @@
+import {
+  detectColorScheme,
+  getActiveThemeState,
+  onActiveThemeChange,
+  setThemeForMode,
+  startActiveTheme
+} from "./chunk-K4OOO2TK.js";
+import "./chunk-RATW7VZI.js";
+
+// src/tool.tsx
+import { template as _$template } from "solid-js/web";
+import { delegateEvents as _$delegateEvents } from "solid-js/web";
+import { setAttribute as _$setAttribute } from "solid-js/web";
+import { effect as _$effect } from "solid-js/web";
+import { createComponent as _$createComponent } from "solid-js/web";
+import { insert as _$insert } from "solid-js/web";
+import { addEventListener as _$addEventListener } from "solid-js/web";
+import { render } from "solid-js/web";
+import { createMemo, createSignal, For, Show } from "solid-js";
+import { getRegistry } from "@inkandswitch/patchwork-plugins";
+var _tmpl$ = /* @__PURE__ */ _$template(`<span class=theme-picker-check>\u2713`);
+var _tmpl$2 = /* @__PURE__ */ _$template(`<button class=theme-picker-card><div class=theme-picker-preview><span class=theme-picker-preview-name></span><div class=theme-picker-dots><span class="theme-picker-dot theme-picker-dot--primary"></span><span class="theme-picker-dot theme-picker-dot--secondary"></span><span class="theme-picker-dot theme-picker-dot--fill">`);
+var _tmpl$3 = /* @__PURE__ */ _$template(`<span class=theme-picker-now>showing now`);
+var _tmpl$4 = /* @__PURE__ */ _$template(`<p class=theme-picker-group-caption>`);
+var _tmpl$5 = /* @__PURE__ */ _$template(`<div class=theme-picker-grid>`);
+var _tmpl$6 = /* @__PURE__ */ _$template(`<section class=theme-picker-section><h3 class=theme-picker-section-title><span></span></h3><div class=theme-picker-grid>`);
+var _tmpl$7 = /* @__PURE__ */ _$template(`<div class=theme-picker-empty>No themes are available yet.`);
+var _tmpl$8 = /* @__PURE__ */ _$template(`<div class=theme-picker><div class=theme-picker-head><h2 class=theme-picker-heading>Theme</h2><p class=theme-picker-status>Your system is in <b> mode</b> right now, so <b></b> is showing.</p></div><label class=theme-picker-toggle><input type=checkbox>Use the same theme in both light and dark mode`);
+function ThemePickerTool(handle, element) {
+  startActiveTheme(element, handle);
+  const [themeState, setThemeState] = createSignal(getActiveThemeState());
+  const unsubscribeThemeState = onActiveThemeChange(setThemeState);
+  const [themes, setThemes] = createSignal([]);
+  const [colorSchemes, setColorSchemes] = createSignal({});
+  const [splitModes, setSplitModes] = createSignal(getActiveThemeState().light !== getActiveThemeState().dark);
+  async function detectAll(themeList) {
+    const schemes = {};
+    await Promise.all(themeList.map(async (t) => {
+      schemes[t.id] = await detectColorScheme(t);
+    }));
+    setColorSchemes(schemes);
+  }
+  const themeRegistry = getRegistry("patchwork:theme");
+  const refresh = () => {
+    const all = themeRegistry.all?.() || [];
+    setThemes(all);
+    detectAll(all);
+  };
+  refresh();
+  themeRegistry.on("registered", refresh);
+  themeRegistry.on("removed", refresh);
+  const themeLabel = (theme) => theme.name || theme.id;
+  const nameFor = (id) => {
+    const theme = themes().find((t) => t.id === id);
+    return theme ? themeLabel(theme) : id;
+  };
+  const sortedThemes = createMemo(() => [...themes()].sort((a, b) => themeLabel(a).localeCompare(themeLabel(b), void 0, {
+    sensitivity: "base"
+  })));
+  const groupsFor = (mode) => {
+    const schemes = colorSchemes();
+    const belongs = (id) => mode === "light" ? schemes[id] !== "dark" : schemes[id] !== "light";
+    return {
+      primary: sortedThemes().filter((t) => belongs(t.id)),
+      secondary: sortedThemes().filter((t) => !belongs(t.id))
+    };
+  };
+  const style = document.createElement("style");
+  style.textContent = `
+		.theme-picker {
+			padding: var(--studio-space-lg, 1.5rem);
+			font-family: var(--studio-family-sans, system-ui, sans-serif);
+			color: var(--studio-line, black);
+			display: flex;
+			flex-direction: column;
+			gap: var(--studio-space-lg, 1.5rem);
+			max-width: 44rem;
+		}
+		.theme-picker-head {
+			display: flex;
+			flex-direction: column;
+			gap: var(--studio-space-2xs, 0.25rem);
+		}
+		.theme-picker-heading {
+			font-size: 1.25rem;
+			font-weight: 700;
+			margin: 0;
+		}
+		.theme-picker-status {
+			margin: 0;
+			font-size: 0.9rem;
+			line-height: 1.4;
+			color: color-mix(in oklch, var(--studio-line, black), transparent 30%);
+		}
+		.theme-picker-status b {
+			font-weight: 600;
+			color: var(--studio-line, black);
+		}
+		.theme-picker-toggle {
+			display: inline-flex;
+			align-items: center;
+			gap: var(--studio-space-2xs, 0.375rem);
+			align-self: flex-start;
+			font-size: 0.85rem;
+			cursor: pointer;
+			user-select: none;
+		}
+		.theme-picker-toggle input {
+			margin: 0;
+			width: 0.95rem;
+			height: 0.95rem;
+			accent-color: var(--studio-primary, #35f7ca);
+			cursor: pointer;
+		}
+		.theme-picker-section {
+			display: flex;
+			flex-direction: column;
+			gap: var(--studio-space-sm, 0.5rem);
+		}
+		.theme-picker-section-title {
+			display: flex;
+			align-items: baseline;
+			gap: var(--studio-space-xs, 0.4rem);
+			margin: 0;
+			font-size: 0.8rem;
+			font-weight: 700;
+			text-transform: uppercase;
+			letter-spacing: 0.05em;
+			color: color-mix(in oklch, var(--studio-line, black), transparent 45%);
+		}
+		.theme-picker-now {
+			display: inline-flex;
+			align-items: center;
+			gap: 0.25rem;
+			padding: 0.1rem 0.4rem;
+			border-radius: 999px;
+			font-size: 0.62rem;
+			font-weight: 700;
+			letter-spacing: 0.03em;
+			text-transform: none;
+			color: var(--studio-fill, white);
+			background: var(--studio-primary, #0a7);
+		}
+		.theme-picker-group-caption {
+			margin: var(--studio-space-2xs, 0.25rem) 0 0;
+			font-size: 0.68rem;
+			font-weight: 600;
+			text-transform: uppercase;
+			letter-spacing: 0.05em;
+			color: color-mix(in oklch, var(--studio-line, black), transparent 55%);
+		}
+		.theme-picker-grid {
+			display: grid;
+			grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
+			gap: var(--studio-space-sm, 0.6rem);
+		}
+		.theme-picker-card {
+			position: relative;
+			padding: 0;
+			border: 1px solid color-mix(in oklch, var(--studio-line, black), transparent 82%);
+			border-radius: var(--studio-radius-md, 8px);
+			background: none;
+			cursor: pointer;
+			overflow: hidden;
+			transition: box-shadow 0.1s ease, border-color 0.1s ease;
+		}
+		.theme-picker-card:hover {
+			border-color: color-mix(in oklch, var(--studio-line, black), transparent 55%);
+		}
+		.theme-picker-card[data-selected] {
+			border-color: transparent;
+			box-shadow: 0 0 0 2px var(--studio-line, black);
+		}
+		.theme-picker-preview {
+			display: flex;
+			flex-direction: column;
+			justify-content: space-between;
+			gap: var(--studio-space-sm, 0.5rem);
+			min-height: 4.75rem;
+			padding: var(--studio-space-sm, 0.6rem);
+			background: var(--studio-fill, white);
+			color: var(--studio-line, black);
+			text-align: left;
+		}
+		.theme-picker-preview-name {
+			font-size: 0.85rem;
+			font-weight: 600;
+			line-height: 1.1;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+		.theme-picker-dots {
+			display: flex;
+			gap: 0.3rem;
+		}
+		.theme-picker-dot {
+			width: 0.85rem;
+			height: 0.85rem;
+			border-radius: 999px;
+			box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--studio-line, black), transparent 65%);
+		}
+		.theme-picker-dot--fill { background: var(--studio-fill, #fff); }
+		.theme-picker-dot--primary { background: var(--studio-primary, #35f7ca); }
+		.theme-picker-dot--secondary { background: var(--studio-secondary, #ec6ca7); }
+		.theme-picker-check {
+			position: absolute;
+			top: 0.35rem;
+			right: 0.35rem;
+			width: 1.15rem;
+			height: 1.15rem;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			border-radius: 999px;
+			font-size: 0.7rem;
+			color: var(--studio-fill, white);
+			background: var(--studio-line, black);
+		}
+		.theme-picker-empty {
+			padding: var(--studio-space-md, 1rem);
+			color: color-mix(in oklch, var(--studio-line, black), transparent 45%);
+			font-size: 0.9rem;
+		}
+	`;
+  element.appendChild(style);
+  const dispose = render(() => {
+    const currentMode = () => themeState().mode;
+    const activeThemeId = () => themeState().themeId;
+    const showTwoSections = () => splitModes();
+    function choose(mode, id) {
+      if (mode === "both") {
+        setThemeForMode("light", id);
+        setThemeForMode("dark", id);
+      } else {
+        setThemeForMode(mode, id);
+      }
+    }
+    function setSameForBoth(same) {
+      if (same) {
+        choose("both", themeState().themeId);
+        setSplitModes(false);
+      } else {
+        setSplitModes(true);
+      }
+    }
+    function Card(props) {
+      return (() => {
+        var _el$ = _tmpl$2(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild;
+        _$addEventListener(_el$, "click", props.onChoose, true);
+        _$insert(_el$3, () => themeLabel(props.theme));
+        _$insert(_el$, _$createComponent(Show, {
+          get when() {
+            return props.selected;
+          },
+          get children() {
+            return _tmpl$();
+          }
+        }), null);
+        _$effect((_p$) => {
+          var _v$ = props.selected ? "" : void 0, _v$2 = themeLabel(props.theme), _v$3 = props.theme.id;
+          _v$ !== _p$.e && _$setAttribute(_el$, "data-selected", _p$.e = _v$);
+          _v$2 !== _p$.t && _$setAttribute(_el$, "title", _p$.t = _v$2);
+          _v$3 !== _p$.a && _$setAttribute(_el$2, "theme", _p$.a = _v$3);
+          return _p$;
+        }, {
+          e: void 0,
+          t: void 0,
+          a: void 0
+        });
+        return _el$;
+      })();
+    }
+    function Section(props) {
+      const groups = () => groupsFor(props.groupMode);
+      const primaryCaption = () => props.groupMode === "light" ? "Light themes" : "Dark themes";
+      const secondaryCaption = () => props.groupMode === "light" ? "Dark themes" : "Light themes";
+      const isNow = () => props.mode !== "both" && currentMode() === props.mode;
+      return (() => {
+        var _el$5 = _tmpl$6(), _el$6 = _el$5.firstChild, _el$7 = _el$6.firstChild, _el$0 = _el$6.nextSibling;
+        _$insert(_el$7, () => props.label);
+        _$insert(_el$6, _$createComponent(Show, {
+          get when() {
+            return isNow();
+          },
+          get children() {
+            return _tmpl$3();
+          }
+        }), null);
+        _$insert(_el$5, _$createComponent(Show, {
+          get when() {
+            return groups().secondary.length > 0;
+          },
+          get children() {
+            var _el$9 = _tmpl$4();
+            _$insert(_el$9, primaryCaption);
+            return _el$9;
+          }
+        }), _el$0);
+        _$insert(_el$0, _$createComponent(For, {
+          get each() {
+            return groups().primary;
+          },
+          children: (theme) => _$createComponent(Card, {
+            theme,
+            get selected() {
+              return props.selectedId === theme.id;
+            },
+            onChoose: () => choose(props.mode, theme.id)
+          })
+        }));
+        _$insert(_el$5, _$createComponent(Show, {
+          get when() {
+            return groups().secondary.length > 0;
+          },
+          get children() {
+            return [(() => {
+              var _el$1 = _tmpl$4();
+              _$insert(_el$1, secondaryCaption);
+              return _el$1;
+            })(), (() => {
+              var _el$10 = _tmpl$5();
+              _$insert(_el$10, _$createComponent(For, {
+                get each() {
+                  return groups().secondary;
+                },
+                children: (theme) => _$createComponent(Card, {
+                  theme,
+                  get selected() {
+                    return props.selectedId === theme.id;
+                  },
+                  onChoose: () => choose(props.mode, theme.id)
+                })
+              }));
+              return _el$10;
+            })()];
+          }
+        }), null);
+        return _el$5;
+      })();
+    }
+    return (() => {
+      var _el$11 = _tmpl$8(), _el$12 = _el$11.firstChild, _el$13 = _el$12.firstChild, _el$14 = _el$13.nextSibling, _el$15 = _el$14.firstChild, _el$16 = _el$15.nextSibling, _el$17 = _el$16.firstChild, _el$18 = _el$16.nextSibling, _el$20 = _el$18.nextSibling, _el$21 = _el$12.nextSibling, _el$22 = _el$21.firstChild;
+      _$insert(_el$16, currentMode, _el$17);
+      _$insert(_el$20, () => nameFor(activeThemeId()));
+      _el$22.addEventListener("change", (event) => setSameForBoth(event.currentTarget.checked));
+      _$insert(_el$11, _$createComponent(Show, {
+        get when() {
+          return themes().length === 0;
+        },
+        get children() {
+          return _tmpl$7();
+        }
+      }), null);
+      _$insert(_el$11, _$createComponent(Show, {
+        get when() {
+          return showTwoSections();
+        },
+        get fallback() {
+          return _$createComponent(Section, {
+            mode: "both",
+            get groupMode() {
+              return currentMode();
+            },
+            label: "Theme",
+            get selectedId() {
+              return activeThemeId();
+            }
+          });
+        },
+        get children() {
+          return [_$createComponent(Section, {
+            mode: "light",
+            groupMode: "light",
+            label: "Light mode theme",
+            get selectedId() {
+              return themeState().light;
+            }
+          }), _$createComponent(Section, {
+            mode: "dark",
+            groupMode: "dark",
+            label: "Dark mode theme",
+            get selectedId() {
+              return themeState().dark;
+            }
+          })];
+        }
+      }), null);
+      _$effect(() => _el$22.checked = !showTwoSections());
+      return _el$11;
+    })();
+  }, element);
+  return () => {
+    unsubscribeThemeState();
+    themeRegistry.off?.("registered", refresh);
+    themeRegistry.off?.("removed", refresh);
+    dispose();
+    style.remove();
+  };
+}
+_$delegateEvents(["click"]);
+export {
+  ThemePickerTool
+};
+//# sourceMappingURL=tool.js.map

package/packages/theming/dist/tool.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/tool.tsx"],
+  "sourcesContent": ["import { template as _$template } from \"solid-js/web\";\nimport { delegateEvents as _$delegateEvents } from \"solid-js/web\";\nimport { setAttribute as _$setAttribute } from \"solid-js/web\";\nimport { effect as _$effect } from \"solid-js/web\";\nimport { createComponent as _$createComponent } from \"solid-js/web\";\nimport { insert as _$insert } from \"solid-js/web\";\nimport { addEventListener as _$addEventListener } from \"solid-js/web\";\nvar _tmpl$ = /*#__PURE__*/_$template(`<span class=theme-picker-check>\u2713`),\n  _tmpl$2 = /*#__PURE__*/_$template(`<button class=theme-picker-card><div class=theme-picker-preview><span class=theme-picker-preview-name></span><div class=theme-picker-dots><span class=\"theme-picker-dot theme-picker-dot--primary\"></span><span class=\"theme-picker-dot theme-picker-dot--secondary\"></span><span class=\"theme-picker-dot theme-picker-dot--fill\">`),\n  _tmpl$3 = /*#__PURE__*/_$template(`<span class=theme-picker-now>showing now`),\n  _tmpl$4 = /*#__PURE__*/_$template(`<p class=theme-picker-group-caption>`),\n  _tmpl$5 = /*#__PURE__*/_$template(`<div class=theme-picker-grid>`),\n  _tmpl$6 = /*#__PURE__*/_$template(`<section class=theme-picker-section><h3 class=theme-picker-section-title><span></span></h3><div class=theme-picker-grid>`),\n  _tmpl$7 = /*#__PURE__*/_$template(`<div class=theme-picker-empty>No themes are available yet.`),\n  _tmpl$8 = /*#__PURE__*/_$template(`<div class=theme-picker><div class=theme-picker-head><h2 class=theme-picker-heading>Theme</h2><p class=theme-picker-status>Your system is in <b> mode</b> right now, so <b></b> is showing.</p></div><label class=theme-picker-toggle><input type=checkbox>Use the same theme in both light and dark mode`);\nimport { render } from \"solid-js/web\";\nimport { createMemo, createSignal, For, Show } from \"solid-js\";\nimport { getRegistry } from \"@inkandswitch/patchwork-plugins\";\nimport { detectColorScheme, getActiveThemeState, onActiveThemeChange, setThemeForMode, startActiveTheme } from \"./active-theme.ts\";\nexport function ThemePickerTool(handle, element) {\n  startActiveTheme(element, handle);\n  const [themeState, setThemeState] = createSignal(getActiveThemeState());\n  const unsubscribeThemeState = onActiveThemeChange(setThemeState);\n  const [themes, setThemes] = createSignal([]);\n  const [colorSchemes, setColorSchemes] = createSignal({});\n  const [splitModes, setSplitModes] = createSignal(getActiveThemeState().light !== getActiveThemeState().dark);\n  async function detectAll(themeList) {\n    const schemes = {};\n    await Promise.all(themeList.map(async t => {\n      schemes[t.id] = await detectColorScheme(t);\n    }));\n    setColorSchemes(schemes);\n  }\n  const themeRegistry = getRegistry(\"patchwork:theme\");\n  const refresh = () => {\n    const all = themeRegistry.all?.() || [];\n    setThemes(all);\n    detectAll(all);\n  };\n  refresh();\n  themeRegistry.on(\"registered\", refresh);\n  themeRegistry.on(\"removed\", refresh);\n  const themeLabel = theme => theme.name || theme.id;\n  const nameFor = id => {\n    const theme = themes().find(t => t.id === id);\n    return theme ? themeLabel(theme) : id;\n  };\n  const sortedThemes = createMemo(() => [...themes()].sort((a, b) => themeLabel(a).localeCompare(themeLabel(b), void 0, {\n    sensitivity: \"base\"\n  })));\n  const groupsFor = mode => {\n    const schemes = colorSchemes();\n    const belongs = id => mode === \"light\" ? schemes[id] !== \"dark\" : schemes[id] !== \"light\";\n    return {\n      primary: sortedThemes().filter(t => belongs(t.id)),\n      secondary: sortedThemes().filter(t => !belongs(t.id))\n    };\n  };\n  const style = document.createElement(\"style\");\n  style.textContent = `\n\t\t.theme-picker {\n\t\t\tpadding: var(--studio-space-lg, 1.5rem);\n\t\t\tfont-family: var(--studio-family-sans, system-ui, sans-serif);\n\t\t\tcolor: var(--studio-line, black);\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tgap: var(--studio-space-lg, 1.5rem);\n\t\t\tmax-width: 44rem;\n\t\t}\n\t\t.theme-picker-head {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tgap: var(--studio-space-2xs, 0.25rem);\n\t\t}\n\t\t.theme-picker-heading {\n\t\t\tfont-size: 1.25rem;\n\t\t\tfont-weight: 700;\n\t\t\tmargin: 0;\n\t\t}\n\t\t.theme-picker-status {\n\t\t\tmargin: 0;\n\t\t\tfont-size: 0.9rem;\n\t\t\tline-height: 1.4;\n\t\t\tcolor: color-mix(in oklch, var(--studio-line, black), transparent 30%);\n\t\t}\n\t\t.theme-picker-status b {\n\t\t\tfont-weight: 600;\n\t\t\tcolor: var(--studio-line, black);\n\t\t}\n\t\t.theme-picker-toggle {\n\t\t\tdisplay: inline-flex;\n\t\t\talign-items: center;\n\t\t\tgap: var(--studio-space-2xs, 0.375rem);\n\t\t\talign-self: flex-start;\n\t\t\tfont-size: 0.85rem;\n\t\t\tcursor: pointer;\n\t\t\tuser-select: none;\n\t\t}\n\t\t.theme-picker-toggle input {\n\t\t\tmargin: 0;\n\t\t\twidth: 0.95rem;\n\t\t\theight: 0.95rem;\n\t\t\taccent-color: var(--studio-primary, #35f7ca);\n\t\t\tcursor: pointer;\n\t\t}\n\t\t.theme-picker-section {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tgap: var(--studio-space-sm, 0.5rem);\n\t\t}\n\t\t.theme-picker-section-title {\n\t\t\tdisplay: flex;\n\t\t\talign-items: baseline;\n\t\t\tgap: var(--studio-space-xs, 0.4rem);\n\t\t\tmargin: 0;\n\t\t\tfont-size: 0.8rem;\n\t\t\tfont-weight: 700;\n\t\t\ttext-transform: uppercase;\n\t\t\tletter-spacing: 0.05em;\n\t\t\tcolor: color-mix(in oklch, var(--studio-line, black), transparent 45%);\n\t\t}\n\t\t.theme-picker-now {\n\t\t\tdisplay: inline-flex;\n\t\t\talign-items: center;\n\t\t\tgap: 0.25rem;\n\t\t\tpadding: 0.1rem 0.4rem;\n\t\t\tborder-radius: 999px;\n\t\t\tfont-size: 0.62rem;\n\t\t\tfont-weight: 700;\n\t\t\tletter-spacing: 0.03em;\n\t\t\ttext-transform: none;\n\t\t\tcolor: var(--studio-fill, white);\n\t\t\tbackground: var(--studio-primary, #0a7);\n\t\t}\n\t\t.theme-picker-group-caption {\n\t\t\tmargin: var(--studio-space-2xs, 0.25rem) 0 0;\n\t\t\tfont-size: 0.68rem;\n\t\t\tfont-weight: 600;\n\t\t\ttext-transform: uppercase;\n\t\t\tletter-spacing: 0.05em;\n\t\t\tcolor: color-mix(in oklch, var(--studio-line, black), transparent 55%);\n\t\t}\n\t\t.theme-picker-grid {\n\t\t\tdisplay: grid;\n\t\t\tgrid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));\n\t\t\tgap: var(--studio-space-sm, 0.6rem);\n\t\t}\n\t\t.theme-picker-card {\n\t\t\tposition: relative;\n\t\t\tpadding: 0;\n\t\t\tborder: 1px solid color-mix(in oklch, var(--studio-line, black), transparent 82%);\n\t\t\tborder-radius: var(--studio-radius-md, 8px);\n\t\t\tbackground: none;\n\t\t\tcursor: pointer;\n\t\t\toverflow: hidden;\n\t\t\ttransition: box-shadow 0.1s ease, border-color 0.1s ease;\n\t\t}\n\t\t.theme-picker-card:hover {\n\t\t\tborder-color: color-mix(in oklch, var(--studio-line, black), transparent 55%);\n\t\t}\n\t\t.theme-picker-card[data-selected] {\n\t\t\tborder-color: transparent;\n\t\t\tbox-shadow: 0 0 0 2px var(--studio-line, black);\n\t\t}\n\t\t.theme-picker-preview {\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tjustify-content: space-between;\n\t\t\tgap: var(--studio-space-sm, 0.5rem);\n\t\t\tmin-height: 4.75rem;\n\t\t\tpadding: var(--studio-space-sm, 0.6rem);\n\t\t\tbackground: var(--studio-fill, white);\n\t\t\tcolor: var(--studio-line, black);\n\t\t\ttext-align: left;\n\t\t}\n\t\t.theme-picker-preview-name {\n\t\t\tfont-size: 0.85rem;\n\t\t\tfont-weight: 600;\n\t\t\tline-height: 1.1;\n\t\t\toverflow: hidden;\n\t\t\ttext-overflow: ellipsis;\n\t\t\twhite-space: nowrap;\n\t\t}\n\t\t.theme-picker-dots {\n\t\t\tdisplay: flex;\n\t\t\tgap: 0.3rem;\n\t\t}\n\t\t.theme-picker-dot {\n\t\t\twidth: 0.85rem;\n\t\t\theight: 0.85rem;\n\t\t\tborder-radius: 999px;\n\t\t\tbox-shadow: inset 0 0 0 1px color-mix(in oklch, var(--studio-line, black), transparent 65%);\n\t\t}\n\t\t.theme-picker-dot--fill { background: var(--studio-fill, #fff); }\n\t\t.theme-picker-dot--primary { background: var(--studio-primary, #35f7ca); }\n\t\t.theme-picker-dot--secondary { background: var(--studio-secondary, #ec6ca7); }\n\t\t.theme-picker-check {\n\t\t\tposition: absolute;\n\t\t\ttop: 0.35rem;\n\t\t\tright: 0.35rem;\n\t\t\twidth: 1.15rem;\n\t\t\theight: 1.15rem;\n\t\t\tdisplay: flex;\n\t\t\talign-items: center;\n\t\t\tjustify-content: center;\n\t\t\tborder-radius: 999px;\n\t\t\tfont-size: 0.7rem;\n\t\t\tcolor: var(--studio-fill, white);\n\t\t\tbackground: var(--studio-line, black);\n\t\t}\n\t\t.theme-picker-empty {\n\t\t\tpadding: var(--studio-space-md, 1rem);\n\t\t\tcolor: color-mix(in oklch, var(--studio-line, black), transparent 45%);\n\t\t\tfont-size: 0.9rem;\n\t\t}\n\t`;\n  element.appendChild(style);\n  const dispose = render(() => {\n    const currentMode = () => themeState().mode;\n    const activeThemeId = () => themeState().themeId;\n    const showTwoSections = () => splitModes();\n    function choose(mode, id) {\n      if (mode === \"both\") {\n        setThemeForMode(\"light\", id);\n        setThemeForMode(\"dark\", id);\n      } else {\n        setThemeForMode(mode, id);\n      }\n    }\n    function setSameForBoth(same) {\n      if (same) {\n        choose(\"both\", themeState().themeId);\n        setSplitModes(false);\n      } else {\n        setSplitModes(true);\n      }\n    }\n    function Card(props) {\n      return (() => {\n        var _el$ = _tmpl$2(),\n          _el$2 = _el$.firstChild,\n          _el$3 = _el$2.firstChild;\n        _$addEventListener(_el$, \"click\", props.onChoose, true);\n        _$insert(_el$3, () => themeLabel(props.theme));\n        _$insert(_el$, _$createComponent(Show, {\n          get when() {\n            return props.selected;\n          },\n          get children() {\n            return _tmpl$();\n          }\n        }), null);\n        _$effect(_p$ => {\n          var _v$ = props.selected ? \"\" : void 0,\n            _v$2 = themeLabel(props.theme),\n            _v$3 = props.theme.id;\n          _v$ !== _p$.e && _$setAttribute(_el$, \"data-selected\", _p$.e = _v$);\n          _v$2 !== _p$.t && _$setAttribute(_el$, \"title\", _p$.t = _v$2);\n          _v$3 !== _p$.a && _$setAttribute(_el$2, \"theme\", _p$.a = _v$3);\n          return _p$;\n        }, {\n          e: undefined,\n          t: undefined,\n          a: undefined\n        });\n        return _el$;\n      })();\n    }\n    function Section(props) {\n      const groups = () => groupsFor(props.groupMode);\n      const primaryCaption = () => props.groupMode === \"light\" ? \"Light themes\" : \"Dark themes\";\n      const secondaryCaption = () => props.groupMode === \"light\" ? \"Dark themes\" : \"Light themes\";\n      const isNow = () => props.mode !== \"both\" && currentMode() === props.mode;\n      return (() => {\n        var _el$5 = _tmpl$6(),\n          _el$6 = _el$5.firstChild,\n          _el$7 = _el$6.firstChild,\n          _el$0 = _el$6.nextSibling;\n        _$insert(_el$7, () => props.label);\n        _$insert(_el$6, _$createComponent(Show, {\n          get when() {\n            return isNow();\n          },\n          get children() {\n            return _tmpl$3();\n          }\n        }), null);\n        _$insert(_el$5, _$createComponent(Show, {\n          get when() {\n            return groups().secondary.length > 0;\n          },\n          get children() {\n            var _el$9 = _tmpl$4();\n            _$insert(_el$9, primaryCaption);\n            return _el$9;\n          }\n        }), _el$0);\n        _$insert(_el$0, _$createComponent(For, {\n          get each() {\n            return groups().primary;\n          },\n          children: theme => _$createComponent(Card, {\n            theme: theme,\n            get selected() {\n              return props.selectedId === theme.id;\n            },\n            onChoose: () => choose(props.mode, theme.id)\n          })\n        }));\n        _$insert(_el$5, _$createComponent(Show, {\n          get when() {\n            return groups().secondary.length > 0;\n          },\n          get children() {\n            return [(() => {\n              var _el$1 = _tmpl$4();\n              _$insert(_el$1, secondaryCaption);\n              return _el$1;\n            })(), (() => {\n              var _el$10 = _tmpl$5();\n              _$insert(_el$10, _$createComponent(For, {\n                get each() {\n                  return groups().secondary;\n                },\n                children: theme => _$createComponent(Card, {\n                  theme: theme,\n                  get selected() {\n                    return props.selectedId === theme.id;\n                  },\n                  onChoose: () => choose(props.mode, theme.id)\n                })\n              }));\n              return _el$10;\n            })()];\n          }\n        }), null);\n        return _el$5;\n      })();\n    }\n    return (() => {\n      var _el$11 = _tmpl$8(),\n        _el$12 = _el$11.firstChild,\n        _el$13 = _el$12.firstChild,\n        _el$14 = _el$13.nextSibling,\n        _el$15 = _el$14.firstChild,\n        _el$16 = _el$15.nextSibling,\n        _el$17 = _el$16.firstChild,\n        _el$18 = _el$16.nextSibling,\n        _el$20 = _el$18.nextSibling,\n        _el$21 = _el$12.nextSibling,\n        _el$22 = _el$21.firstChild;\n      _$insert(_el$16, currentMode, _el$17);\n      _$insert(_el$20, () => nameFor(activeThemeId()));\n      _el$22.addEventListener(\"change\", event => setSameForBoth(event.currentTarget.checked));\n      _$insert(_el$11, _$createComponent(Show, {\n        get when() {\n          return themes().length === 0;\n        },\n        get children() {\n          return _tmpl$7();\n        }\n      }), null);\n      _$insert(_el$11, _$createComponent(Show, {\n        get when() {\n          return showTwoSections();\n        },\n        get fallback() {\n          return _$createComponent(Section, {\n            mode: \"both\",\n            get groupMode() {\n              return currentMode();\n            },\n            label: \"Theme\",\n            get selectedId() {\n              return activeThemeId();\n            }\n          });\n        },\n        get children() {\n          return [_$createComponent(Section, {\n            mode: \"light\",\n            groupMode: \"light\",\n            label: \"Light mode theme\",\n            get selectedId() {\n              return themeState().light;\n            }\n          }), _$createComponent(Section, {\n            mode: \"dark\",\n            groupMode: \"dark\",\n            label: \"Dark mode theme\",\n            get selectedId() {\n              return themeState().dark;\n            }\n          })];\n        }\n      }), null);\n      _$effect(() => _el$22.checked = !showTwoSections());\n      return _el$11;\n    })();\n  }, element);\n  return () => {\n    unsubscribeThemeState();\n    themeRegistry.off?.(\"registered\", refresh);\n    themeRegistry.off?.(\"removed\", refresh);\n    dispose();\n    style.remove();\n  };\n}\n_$delegateEvents([\"click\"]);"],
+  "mappings": "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",
+  "names": []
+}

package/packages/theming/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "@patchwork/theming",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "main": "./dist/main.js",
+  "exports": {
+    ".": {
+      "import": "./dist/main.js",
+      "source": "./src/main.ts"
+    },
+    "./codemirror-theme": {
+      "import": "./dist/codemirror-theme.js",
+      "source": "./src/codemirror-theme.ts"
+    },
+    "./tool": {
+      "import": "./dist/tool.js",
+      "source": "./src/tool.tsx"
+    },
+    "./theme-editor": {
+      "import": "./dist/theme-editor.js",
+      "source": "./src/theme-editor.tsx"
+    }
+  },
+  "scripts": {
+    "build": "node esbuild/build.ts",
+    "dev": "node esbuild/watch.ts",
+    "pushwatch": "pnpm dev pushwork",
+    "register": "pw-modules add \"$MODULE_SETTINGS_DOC_URL\" \"$(pushwork url)\""
+  },
+  "dependencies": {
+    "@codemirror/language": "^6.11.3",
+    "@codemirror/state": "^6.5.2",
+    "@codemirror/view": "^6.38.4",
+    "@lezer/highlight": "^1.2.1",
+    "@inkandswitch/patchwork-bootloader": "^0.2.4",
+    "@inkandswitch/patchwork-plugins": "^0.0.11",
+    "solid-js": "^1.9.9"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.28.4",
+    "@babel/parser": "^7.28.4",
+    "babel-preset-solid": "^1.9.9",
+    "@node-types/node": "npm:@types/node@^24.9.1",
+    "esbuild": "^0.23.1",
+    "typescript": "~5.9.3"
+  }
+}

package/packages/threepane/dist/IsolatedDocumentArea-LFSDWMIY.js

@@ -0,0 +1,2 @@
+import{s as a,t as b}from"./chunk-FOMAU6H2.js";import"./chunk-FW4363Y4.js";export{a as IsolatedDocumentArea,b as mountIsolationRoot};
+//# sourceMappingURL=IsolatedDocumentArea-LFSDWMIY.js.map

package/packages/threepane/dist/IsolatedDocumentArea-LFSDWMIY.js.map

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

package/packages/threepane/dist/PatchworkFrame-JTNZ6365.js

@@ -0,0 +1,2 @@
+import{a as Oe,b as H,c as V,d as oe,e as ne,f as se,g as ie,h as ae,i as ce,j as le,k as de,l as ue,m as fe,n as me,o as P,p as he,q as pe,r as ge,s as we}from"./chunk-FOMAU6H2.js";import{a as N}from"./chunk-7YXO2YGV.js";import{b as Pe}from"./chunk-FW4363Y4.js";import{template as y}from"solid-js/web";import{delegateEvents as nt}from"solid-js/web";import{memo as st}from"solid-js/web";import{setStyleProperty as it}from"solid-js/web";import{setAttribute as q}from"solid-js/web";import{effect as x}from"solid-js/web";import{insert as _}from"solid-js/web";import{createComponent as u}from"solid-js/web";import{getOwner as U}from"solid-js/web";import{use as C}from"solid-js/web";import"@inkandswitch/patchwork-elements";import{parseAutomergeUrl as Tt,stringifyAutomergeUrl as At}from"@automerge/automerge-repo";import{interpretAsDocumentId as Wt,isValidAutomergeUrl as Mt,parseAutomergeUrl as Ft,stringifyAutomergeUrl as Ht}from"@automerge/automerge-repo";function be(e,a,c){let i=e.closest("patchwork-view")??e,t=new MessageChannel,r=t.port2,s=new AbortController,{signal:n}=s;r.addEventListener("message",m=>{m.data?.type==="change"&&c(m.data.value)},{signal:n}),r.start();let l={selector:a,port:t.port1};return i.dispatchEvent(new CustomEvent("patchwork:subscribe",{detail:l,bubbles:!0,composed:!0})),()=>{n.aborted||(s.abort(),r.postMessage({type:"unsubscribe"}),r.close())}}import{template as j}from"solid-js/web";import{delegateEvents as Fe}from"solid-js/web";import{memo as He}from"solid-js/web";import{insert as ve}from"solid-js/web";import{createComponent as A}from"solid-js/web";import{For as je,Show as B}from"solid-js";var Ve=j("<div class=threepane-widgets>"),Ne=j("<div class=threepane-widgets__empty><button type=button class=threepane-widgets__add>\uFF0B Add document list"),Be=j("<div class=threepane-widget>"),ze="chee/document-list";function _e(e){let a=()=>{let c=e.rootFolderUrl(),o=e.configHandle();!c||!o||o.change(i=>{i.sidebar.widgets.push([ze,c])})};return(()=>{var c=Ve();return ve(c,A(B,{get when(){return e.ready()},get children(){return A(B,{get when(){return e.widgets().length},get fallback(){return A(B,{get when(){return He(()=>!!e.rootFolderUrl())()&&e.configHandle()},get children(){var o=Ne(),i=o.firstChild;return i.$$click=a,o}})},get children(){return A(je,{get each(){return e.widgets()},children:o=>(()=>{var i=Be();return ve(i,A(P,{slot:o})),i})()})}})}})),c})()}Fe(["click"]);import{template as Se}from"solid-js/web";import{setAttribute as qe}from"solid-js/web";import{effect as Ye}from"solid-js/web";import{insert as ye}from"solid-js/web";import{createComponent as z}from"solid-js/web";import{For as Ge,Show as Je}from"solid-js";var Ke=Se("<div class=frame-tray>"),Xe=Se("<div class=frame-tray__item>");function De(e){return z(Je,{get when(){return e.slots().length},get children(){var a=Ke();return ye(a,z(Ge,{get each(){return e.slots()},children:c=>(()=>{var o=Xe();return ye(o,z(P,{slot:c})),Ye(()=>qe(o,"data-tray-id",me(c))),o})()})),a}})}import{createEffect as L,createMemo as X,createSignal as b,onCleanup as k,onMount as G,Show as E}from"solid-js";import{render as wt}from"solid-js/web";import{createDocOfDatatype2 as Ze}from"@inkandswitch/patchwork-plugins";import{getRegistry as Qe}from"@inkandswitch/patchwork-plugins";function O(e){return Qe("patchwork:datatype").loadWhenReady(e)}var et=new Set(["document-title","spacer"]),tt="chee/document-list";function ke(e){return e?[[tt,e]]:[]}async function $e(e,a){let c=e.doc()?.rootFolderUrl,o=e.doc()?.tools?.threepane;if(o){(await a.find(o)).change(l=>{c&&!l.sidebar?.widgets?.length&&(l.sidebar.widgets=ke(c)),l.tray||(l.tray=N.slice())});return}let i=await O("threepane:config");if(!i){console.warn("frame: threepane:config datatype never registered");return}if(e.doc()?.tools?.threepane)return;let t=e.doc(),r=(t?.documentToolbarToolIds??[]).filter(n=>!et.has(n)),s=await Ze(i,a);s.change(n=>{n.doctitle.tools=r,n.sidebar.widgets=ke(t?.rootFolderUrl),n.tray||(n.tray=N.slice())}),e.change(n=>{n.tools||(n.tools={}),n.tools.threepane||(n.tools.threepane=s.url)})}var Re=Pe(Oe(),1);import{createDocOfDatatype2 as rt}from"@inkandswitch/patchwork-plugins";var w=(0,Re.default)("patchwork:threepane:examples");async function Ie(e,a){let c=e.doc();if(!c?.rootFolderUrl){w("skipped \u2014 account has no rootFolderUrl");return}if(c.exampleDocsSeededAt){w("skipped \u2014 already ran for this account at",new Date(c.exampleDocsSeededAt).toISOString());return}w("claiming marker on account",e.url),e.change(l=>{l.exampleDocsSeededAt||(l.exampleDocsSeededAt=Date.now())});let o=await a.find(c.rootFolderUrl),i=o.doc()?.docs?.length??0;if(i){w(`skipped \u2014 root folder already has ${i} doc(s); only fresh accounts are seeded`);return}let t=await ot();if(w("bundle init scripts:",t),!t.length){w("skipped \u2014 no static module bundles to ask");return}let r=await O("folder");if(!r){w("folder datatype never registered; giving up");return}let s=await rt(r,a,l=>{l.title="Examples"});for(let l of t)try{await(await import(l)).default?.(a,s),w("ran init script",l)}catch(m){w("init script unavailable or failed",l,m)}let n=s.doc()?.docs?.length??0;if(!n){w("no bundle contributed any documents");return}o.change(l=>{l.docs.unshift({name:"Examples",type:"folder",url:s.url})}),w(`seeded ${n} document(s) into Examples folder`,s.url)}var Ce="https://patchwork-tools.netlify.app/init.js",Ee="https://patchwork-base.netlify.app/init.js";async function ot(){let e=window.patchwork?.packages;if(!e?.urls)return[Ee,Ce];await e.doneLoading;let a=Object.values(e.urls).filter(o=>typeof o=="string"&&!o.startsWith("automerge:")).map(o=>new URL("init.js",new URL(o,document.baseURI)).href),c=a.length?[]:[Ee];return[...new Set([...a,...c,Ce])]}var at=y("<div class=frame-shell><aside class=frame-warning-banner>research grade software. do not share links. sharing a doc is sharing your account.</aside><div class=frame><patchwork-view component=patchwork-selected-doc-provider><patchwork-view component=patchwork-account-provider><patchwork-view component=patchwork-tool-storage-provider>",!0,!1,!1),ct=y("<div style=display:contents>"),lt=y("<div class=main-area>"),dt=y("<div class=frame__popover-backdrop><div class=frame__popover role=dialog aria-modal=true><div class=frame__popover-toolbar><patchwork-view tool-id=doc-openwith></patchwork-view></div><div class=frame__popover-body><patchwork-view>",!0,!1,!1),ut=y('<button type=button class="frame__sidebar-toggle frame__left-toggle">'),ft=y("<div class=threepane-sidebar><div class=threepane-sidebar__footer><footer class=threepane-account-bar><button type=button class=threepane-account-bar__button>Settings"),mt=y("<div class=frame__tray-dock>"),ht=y('<button type=button class="threepane-account-bar__button threepane-account-bar__avatar"title=Account aria-label=Account><patchwork-view tool-id=contact-avatar>',!0,!1,!1),pt=y("<button type=button class=threepane-account-bar__button>Packages"),gt=y('<svg xmlns=http://www.w3.org/2000/svg width=18 height=18 viewBox="0 0 24 24"fill=none stroke=var(--studio-chrome-line) stroke-width=1.75 stroke-linecap=round stroke-linejoin=round><rect width=18 height=18 x=3 y=3 rx=2></rect><path d="M9 3v18">'),bt=180,vt=720,_t=120,yt=3,Y=(e,a)=>{let[c,o]=b(!1);return L(()=>{let i=a();if(!i)return;o(!1);let t=r=>{r.detail?.componentId===e&&o(!0)};i.addEventListener("patchwork:mounted",t),k(()=>i.removeEventListener("patchwork:mounted",t))}),c};function K(e,a){e.dispatchEvent(new CustomEvent("patchwork:open-document",{detail:a,bubbles:!0,composed:!0}))}function St({handle:e,repo:a,...c}){ge();let o=e.url,[i,t]=b(),r=Y("patchwork-account-provider",i),[s,n]=b(),l=Y("patchwork-tool-storage-provider",s),[m,d]=b(),h=Y("patchwork-selected-doc-provider",m),p=X(()=>h()&&r()&&l());return(()=>{var S=at(),g=S.firstChild,W=g.nextSibling,T=W.firstChild,R=T.firstChild,I=R.firstChild;return C(d,T),T._$owner=U(),C(t,R),R.docUrl=o,R._$owner=U(),C(n,I),I.docUrl=o,I._$owner=U(),_(I,u(E,{get when(){return p()},get children(){return u(Dt,{handle:e,repo:a,get isolation(){return c.isolation}})}})),S})()}function Dt(e){let a=H(()=>e.handle.url,{repo:e.repo});(async()=>{await $e(e.handle,e.repo),await Ie(e.handle,e.repo)})().catch(f=>{console.error("frame: account bootstrap failed",f)});let[c,o]=b(0);L(()=>{let f=a();if(!f)return;let v=()=>o(D=>D+1);f.on("change",v),k(()=>f.off("change",v))});let i=X(()=>(c(),a()?.doc())),t=e.handle.url,r=()=>i()?.tools?.threepane,s=H(()=>r(),{repo:e.repo}),[n,l]=b(0);L(()=>{let f=s();if(!f)return;let v=()=>l(D=>D+1);f.on("change",v),k(()=>f.off("change",v))});let m=X(()=>(n(),s()?.doc())),d=()=>m()?.doctitle?.tools,h=()=>m()?.sidebar?.widgets??[],p=()=>m()?.tray??[],S=()=>i()?.rootFolderUrl,g=ae(),W=ce({setLeftSidebarWidth:g.setLeftSidebarWidth,setRightSidebarWidth:g.setRightSidebarWidth,setIsSidebarCollapsed:g.setIsSidebarCollapsed,setIsRightSidebarCollapsed:g.setIsRightSidebarCollapsed,isLeftCollapsed:g.isSidebarCollapsed,isRightCollapsed:g.isRightSidebarCollapsed,minWidth:bt,maxWidth:vt,autoCloseWidth:_t,dragThreshold:yt}),{events:T,dismissEvent:R,clearAll:I}=de(),M,[J,Ue]=b(null),[Le,Q]=b(null);G(()=>{let f=be(M,{type:"patchwork:selected-view"},v=>Ue(v));k(f)});let $=()=>J()?.url,F=()=>J()?.toolId??void 0,Z=()=>se(V.rightWidth,ne),ee=()=>ie(V.rightCollapsed),[Te,te]=b(),Ae=le(Te,$),[re,xe]=b(!1);return L(()=>{re()||(e.isolation||!$()||Ae())&&xe(!0)}),(()=>{var f=ct(),v=M;return typeof v=="function"?C(v,f):M=f,_(f,u(ue,{get events(){return T()},onDismiss:R,onClearAll:I}),null),_(f,u($t,{accountDocUrl:t,sidebarState:g,sidebarResize:W,sidebarWidgets:h,traySlots:p,configHandle:s,rootFolderUrl:S,widgetsReady:re,contactUrl:()=>i()?.contactUrl,moduleSettingsUrl:()=>i()?.moduleSettingsUrl,get isolation(){return e.isolation},onInterceptOpen:Q,get children(){return u(E,{get when(){return $()},get fallback(){return(()=>{var D=lt();return _(D,u(he,{viewKey:$,selectedDocUrl:$,toolId:F,ref:te})),D})()},get children(){return u(E,{get when(){return e.isolation},get fallback(){return u(pe,{setMainDocElement:te,selectedDocUrl:$,selectedToolId:F,doctitleSlots:d,get isLeftCollapsed(){return g.isSidebarCollapsed},initialRightWidth:Z,initialRightCollapsed:ee})},get children(){return u(we,{get contactUrl(){return i()?.contactUrl},selectedDocUrl:$,selectedToolId:F,doctitleSlots:d,get isLeftCollapsed(){return g.isSidebarCollapsed},initialRightWidth:Z,initialRightCollapsed:ee})}})}})}}),null),_(f,u(E,{get when(){return Le()},children:D=>u(kt,{get view(){return D()},onClose:()=>Q(null)})}),null),f})()}function kt(e){let[a,c]=b(e.view.toolId??void 0);L(()=>c(e.view.toolId??void 0));let o;return G(()=>{let i=s=>{s.key==="Escape"&&e.onClose()};window.addEventListener("keydown",i),k(()=>window.removeEventListener("keydown",i));let t=o;if(!t)return;let r=s=>{let{url:n,toolId:l}=s.detail;n&&(s.stopPropagation(),c(l??void 0))};t.addEventListener("patchwork:open-document",r),k(()=>t.removeEventListener("patchwork:open-document",r))}),(()=>{var i=dt(),t=i.firstChild,r=t.firstChild,s=r.firstChild,n=r.nextSibling,l=n.firstChild;i.$$click=()=>e.onClose(),t.$$click=d=>d.stopPropagation();var m=o;return typeof m=="function"?C(m,t):o=t,s._$owner=U(),l._$owner=U(),x(d=>{var h=e.view.url,p=e.view.url,S=a();return h!==d.e&&(s.docUrl=d.e=h),p!==d.t&&(l.docUrl=d.t=p),S!==d.a&&(l.toolId=d.a=S),d},{e:void 0,t:void 0,a:void 0}),i})()}function $t(e){let a=e.sidebarState.isSidebarCollapsed,c=()=>e.traySlots().length>0,o;G(()=>{if(!e.isolation||!o)return;let t=o,r=s=>{let{url:n,toolId:l}=s.detail;n&&(s.stopPropagation(),e.onInterceptOpen?.({url:n,toolId:l??null}))};t.addEventListener("patchwork:open-document",r),k(()=>t.removeEventListener("patchwork:open-document",r))});let i;return L(()=>{if(e.sidebarState.isSidebarCollapsed())return;let t=i;if(!t)return;let r=()=>{t.getBoundingClientRect().width<=window.innerWidth*.75||(e.sidebarState.setIsSidebarCollapsed(!0),window.dispatchEvent(new CustomEvent(oe)))};t.addEventListener("patchwork:open-document",r),k(()=>t.removeEventListener("patchwork:open-document",r))}),[(()=>{var t=ut();return t.$$click=()=>e.sidebarState.setIsSidebarCollapsed(r=>!r),_(t,u(Ct,{})),x(r=>{var s=a()?"Show sidebar":"Hide sidebar",n=a()?"Show sidebar":"Hide sidebar",l=!a();return s!==r.e&&q(t,"title",r.e=s),n!==r.t&&q(t,"aria-label",r.t=n),l!==r.a&&q(t,"aria-pressed",r.a=l),r},{e:void 0,t:void 0,a:void 0}),t})(),u(fe,{side:"left",isCollapsed:a,get width(){return e.sidebarState.leftSidebarWidth},get onMouseDown(){return e.sidebarResize.handleMouseDown},get onToggleClick(){return e.sidebarResize.handleToggleClick},get children(){var t=ft(),r=t.firstChild,s=r.firstChild,n=s.firstChild,l=i;typeof l=="function"?C(l,t):i=t,_(t,u(_e,{get widgets(){return e.sidebarWidgets},get configHandle(){return e.configHandle},get rootFolderUrl(){return e.rootFolderUrl},get ready(){return e.widgetsReady}}),r);var m=o;return typeof m=="function"?C(m,r):o=r,_(s,u(E,{get when(){return e.contactUrl()},children:d=>(()=>{var h=ht(),p=h.firstChild;return h.$$click=S=>K(S.currentTarget,{url:e.accountDocUrl,toolId:"account-picker"}),p._$owner=U(),x(()=>p.docUrl=d()),h})()}),n),_(s,u(E,{get when(){return e.moduleSettingsUrl()},children:d=>(()=>{var h=pt();return h.$$click=p=>K(p.currentTarget,{url:d(),toolId:"packages"}),h})()}),n),n.$$click=d=>K(d.currentTarget,{url:e.accountDocUrl,toolId:"frame-configurator"}),x(()=>t.classList.toggle("threepane-sidebar--has-tray",!!c())),t}}),u(E,{get when(){return c()},get children(){var t=mt();return _(t,u(De,{get slots(){return e.traySlots}})),x(r=>{var s=!!a(),n=`${e.sidebarState.leftSidebarWidth()}px`;return s!==r.e&&t.classList.toggle("frame__tray-dock--collapsed",r.e=s),n!==r.t&&it(t,"width",r.t=n),r},{e:void 0,t:void 0}),t}}),st(()=>e.children)]}function Ct(){return gt()}function Kr(e){return(a,c)=>wt(()=>u(St,{handle:a,get repo(){return c.repo},isolation:e}),c)}nt(["click"]);export{St as PatchworkFrame,Kr as renderPatchworkFrame};
+//# sourceMappingURL=PatchworkFrame-JTNZ6365.js.map