@pixl-app/sdk 0.1.1 → 1.0.0

package/dist/ui/index.js

@@ -0,0 +1,1919 @@
+import {
+  fontFamily2,
+  loadFont2,
+  Pixl2
+} from "../index-nb1y5rx1.js";
+
+// src/ui/styles.ts
+var TOKENS = `
+	--bg: var(--pixl-bg, #0f0f12);
+	--surface: var(--pixl-surface, #22222c);
+	--fg: var(--pixl-fg, #e8e8f0);
+	--muted: var(--pixl-muted, #9a9aa8);
+	--line: var(--pixl-line, rgb(255 255 255 / 0.1));
+	--line-strong: var(--pixl-line-strong, rgb(255 255 255 / 0.16));
+	--accent: var(--pixl-accent, #7c6dfa);
+	--danger: var(--pixl-danger, #f05252);
+	--radius: 10px;
+`;
+var CONTROLS = `
+	.btn {
+		height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line);
+		background: transparent; color: var(--fg); font: inherit; font-size: 14px; cursor: pointer;
+		display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
+	}
+	.btn:hover:not(:disabled) { border-color: color-mix(in oklch, var(--fg) 35%, transparent); }
+	.btn:disabled { opacity: 0.45; cursor: not-allowed; }
+	.btn.primary { background: var(--accent); border-color: transparent; color: white; font-weight: 600; }
+	.btn.danger { background: var(--danger); border-color: transparent; color: white; }
+	.btn.ghost { border-color: transparent; }
+	.btn.icon { width: 34px; padding: 0; }
+	.input {
+		height: 34px; width: 100%; box-sizing: border-box; border-radius: 8px; border: 1px solid var(--line);
+		background: rgb(0 0 0 / 0.2); color: var(--fg); padding: 0 10px; font: inherit; font-size: 14px;
+	}
+	textarea.input { height: auto; min-height: 80px; padding: 8px 10px; }
+	.btn:focus-visible, .input:focus-visible, .switch:focus-visible {
+		outline: 2px solid var(--accent); outline-offset: 1px;
+	}
+	@media (max-width: 640px) {
+		.btn { height: 40px; }
+		.btn.icon { width: 40px; }
+		.input { height: 40px; }
+	}
+`;
+var SHADOW_CSS = `
+	:host { ${TOKENS} display: block; color: var(--fg); font-family: var(--pixl-font, system-ui, sans-serif); font-size: 14px; }
+	:host([hidden]) { display: none; }
+	* { box-sizing: border-box; }
+	${CONTROLS}
+	.field { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 12px 0; }
+	.field.wide { flex-direction: column; align-items: stretch; }
+	.label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+	.label-text { font-weight: 500; }
+	.desc { color: var(--muted); font-size: 12px; }
+	.control { display: flex; align-items: center; gap: 8px; min-width: 0; }
+	.field.wide .control { width: 100%; }
+	.error { color: var(--danger); font-size: 12px; width: 100%; }
+	.skeleton { display: block; border-radius: 8px; background: var(--surface); animation: pixl-pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; }
+	@keyframes pixl-pulse { 50% { opacity: .5; } }
+	@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }
+	.switch {
+		appearance: none; width: 40px; height: 22px; border-radius: 999px; border: 1px solid var(--line);
+		background: var(--surface); position: relative; cursor: pointer; padding: 0; flex: none; transition: background .2s;
+	}
+	.switch::after {
+		content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
+		background: var(--fg); transition: transform .2s;
+	}
+	.switch[aria-checked="true"] { background: var(--accent); border-color: transparent; }
+	.switch[aria-checked="true"]::after { transform: translateX(18px); }
+	.count { min-width: 3ch; text-align: center; font-variant-numeric: tabular-nums; font-size: 18px; font-family: ui-monospace, monospace; }
+	input[type="range"] { flex: 1; min-width: 120px; accent-color: var(--accent); }
+	.value { min-width: 3ch; text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }
+	input[type="color"] { width: 40px; height: 34px; padding: 2px; border-radius: 8px; border: 1px solid var(--line); background: transparent; cursor: pointer; flex: none; }
+	.thumb { width: 48px; height: 48px; border-radius: 8px; border: 1px solid var(--line); background: rgb(0 0 0 / 0.25); object-fit: contain; flex: none; }
+	.thumb.empty { display: grid; place-items: center; color: var(--muted); font-size: 11px; }
+	.stack { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1; }
+	.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
+	.field:not(.wide) .control pixl-dropdown { min-width: 160px; }
+	.secret-wrap { position: relative; width: 100%; }
+	.secret-wrap .input { padding-right: 40px; }
+	.secret-wrap .eye { position: absolute; top: 50%; right: 3px; transform: translateY(-50%); width: 28px; height: 28px; color: var(--muted); }
+	.secret-wrap .eye:hover:not(:disabled) { color: var(--fg); }
+`;
+var PAGE_CSS = `
+	:where(:root) { color-scheme: dark; }
+	:where(body) { font-family: var(--pixl-font, system-ui, sans-serif); color: var(--pixl-fg, #e8e8f0); }
+	:where(pixl-field, pixl-toggle, pixl-counter, pixl-range, pixl-select, pixl-text, pixl-color, pixl-file, pixl-button, pixl-list, pixl-section, pixl-controls) { display: block; }
+	:where(.pixl-btn, .pixl-input, .pixl-select, .pixl-checkbox, .pixl-card, .pixl-skeleton) { ${TOKENS} }
+	.pixl-btn {
+		height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line);
+		background: transparent; color: var(--fg); font: inherit; cursor: pointer;
+		display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
+	}
+	.pixl-btn:disabled { opacity: 0.45; cursor: not-allowed; }
+	.pixl-btn.primary { background: var(--accent); border-color: transparent; color: white; font-weight: 600; }
+	.pixl-btn.danger { background: var(--danger); border-color: transparent; color: white; }
+	.pixl-btn.ghost { border-color: transparent; }
+	.pixl-input {
+		height: 34px; width: 100%; box-sizing: border-box; border-radius: 8px; border: 1px solid var(--line);
+		background: rgb(0 0 0 / 0.2); color: var(--fg); padding: 0 10px; font: inherit;
+	}
+	textarea.pixl-input { height: auto; min-height: 80px; padding: 8px 10px; }
+	/* Rückfall für ein <select> des Systems: Feld wie <pixl-dropdown>, die Liste bleibt die des Systems */
+	select.pixl-select {
+		appearance: none; height: 36px; width: 100%; box-sizing: border-box; border-radius: 10px;
+		border: 1px solid var(--line-strong); color: var(--fg); padding: 0 32px 0 12px; font: inherit; font-size: 14px;
+		background: rgb(0 0 0 / 0.2) no-repeat right 8px center / 16px 16px;
+		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239a9aa8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
+		cursor: pointer; text-overflow: ellipsis;
+	}
+	select.pixl-select:hover:not(:disabled) { border-color: color-mix(in oklch, var(--fg) 30%, transparent); }
+	select.pixl-select:focus-visible {
+		outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 25%, transparent);
+	}
+	select.pixl-select:disabled { opacity: 0.5; cursor: not-allowed; }
+	select.pixl-select option { background: var(--surface); color: var(--fg); }
+	/* Häkchen für ein normales <input type="checkbox">, sieht aus wie <pixl-checkbox> */
+	input[type="checkbox"].pixl-checkbox {
+		appearance: none; width: 16px; height: 16px; margin: 0; flex: none; vertical-align: middle; cursor: pointer;
+		border-radius: 5px; border: 1px solid color-mix(in oklch, var(--fg) 30%, transparent); background: rgb(0 0 0 / 0.2);
+		background-position: center; background-repeat: no-repeat; background-size: 12px 12px;
+		transition: border-color .15s, box-shadow .15s;
+	}
+	input[type="checkbox"].pixl-checkbox:hover:not(:disabled) { border-color: color-mix(in oklch, var(--fg) 50%, transparent); }
+	input[type="checkbox"].pixl-checkbox:checked {
+		border-color: transparent;
+		background-color: var(--accent);
+		background-image:
+			url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"),
+			linear-gradient(oklch(from var(--accent) calc(l + 0.04) calc(c * 0.92) h), var(--accent));
+		background-size: 12px 12px, 100% 100%;
+		box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 1px 2px rgb(0 0 0 / 0.35);
+	}
+	input[type="checkbox"].pixl-checkbox:disabled { opacity: 0.45; cursor: not-allowed; }
+	input[type="checkbox"].pixl-checkbox:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
+	.pixl-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 16px; }
+	.pixl-skeleton { display: block; border-radius: 8px; background: var(--surface); animation: pixl-pulse 2s cubic-bezier(.4, 0, .6, 1) infinite; }
+	@keyframes pixl-pulse { 50% { opacity: .5; } }
+	@media (prefers-reduced-motion: reduce) { .pixl-skeleton { animation: none; } }
+	.pixl-btn:focus-visible, .pixl-input:focus-visible { outline: 2px solid var(--pixl-accent, #7c6dfa); outline-offset: 1px; }
+	@media (max-width: 640px) { .pixl-btn, .pixl-input { height: 40px; } }
+	@media (pointer: coarse) { select.pixl-select { height: 40px; } }
+`;
+var sheet = null;
+function adoptStyles(root, extra = "") {
+  if (!sheet) {
+    sheet = new CSSStyleSheet;
+    sheet.replaceSync(SHADOW_CSS);
+  }
+  const sheets = [sheet];
+  if (extra) {
+    const own = new CSSStyleSheet;
+    own.replaceSync(extra);
+    sheets.push(own);
+  }
+  root.adoptedStyleSheets = sheets;
+}
+function injectPageStyles() {
+  if (typeof document === "undefined" || document.getElementById("pixl-ui-styles"))
+    return;
+  const style = document.createElement("style");
+  style.id = "pixl-ui-styles";
+  style.textContent = PAGE_CSS;
+  document.head.prepend(style);
+}
+
+// src/ui/checkbox.ts
+var CHECK = `<svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>`;
+var CSS = `
+	:host { display: inline-flex; vertical-align: middle; }
+	.control {
+		display: inline-flex; align-items: center; gap: 8px; cursor: pointer; outline: none;
+		border-radius: 6px; -webkit-tap-highlight-color: transparent;
+	}
+	.box {
+		display: inline-flex; align-items: center; justify-content: center; flex: none;
+		width: 16px; height: 16px; border-radius: 5px; border: 1px solid color-mix(in oklch, var(--fg) 30%, transparent);
+		background: rgb(0 0 0 / 0.2); color: white; transition: border-color .15s, background .15s, box-shadow .15s;
+	}
+	.box svg { visibility: hidden; }
+	.control:hover .box { border-color: color-mix(in oklch, var(--fg) 50%, transparent); }
+	.control[aria-checked="true"] .box {
+		border-color: transparent;
+		background: var(--accent);
+		background-image: linear-gradient(oklch(from var(--accent) calc(l + 0.04) calc(c * 0.92) h), var(--accent));
+		box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 1px 2px rgb(0 0 0 / 0.35);
+	}
+	.control[aria-checked="true"] .box svg { visibility: visible; }
+	.control:focus-visible .box { outline: 2px solid var(--accent); outline-offset: 2px; }
+	.control[aria-disabled="true"] { cursor: not-allowed; opacity: 0.45; }
+	.text { display: inline; min-width: 0; }
+	.text.empty { display: none; }
+`;
+
+class PixlCheckbox extends HTMLElement {
+  static formAssociated = true;
+  static observedAttributes = ["checked", "disabled", "aria-label"];
+  root;
+  control;
+  internals;
+  formDisabled = false;
+  defaultChecked = null;
+  toggledThisTask = false;
+  constructor() {
+    super();
+    this.internals = typeof this.attachInternals === "function" ? this.attachInternals() : null;
+    this.root = this.attachShadow({ mode: "open", delegatesFocus: true });
+    adoptStyles(this.root, CSS);
+    this.root.innerHTML = `<span class="control" part="control" role="checkbox" tabindex="0"><span class="box" part="box">${CHECK}</span><span class="text empty" part="label"><slot></slot></span></span>`;
+    this.control = this.root.querySelector(".control");
+    this.root.querySelector("slot").addEventListener("slotchange", () => this.syncText());
+    this.addEventListener("click", (e) => {
+      const inner = e.composedPath()[0];
+      if (inner instanceof Element && inner !== this && inner.closest("a, button, input, select, textarea"))
+        return;
+      this.toggleByUser();
+    });
+    this.control.addEventListener("keydown", (e) => {
+      if (e.key !== " ")
+        return;
+      e.preventDefault();
+      if (!e.repeat)
+        this.toggleByUser();
+    });
+  }
+  connectedCallback() {
+    if (Object.prototype.hasOwnProperty.call(this, "checked")) {
+      const v = this.checked;
+      delete this.checked;
+      this.checked = v === true;
+    }
+    this.defaultChecked ??= this.hasAttribute("checked");
+    this.sync();
+    this.syncText();
+  }
+  syncText() {
+    const slot = this.root.querySelector("slot");
+    if (!slot)
+      return;
+    const filled = slot.assignedNodes().some((n) => n.nodeType === Node.ELEMENT_NODE || n.textContent?.trim());
+    this.root.querySelector(".text").classList.toggle("empty", !filled);
+  }
+  attributeChangedCallback() {
+    this.sync();
+  }
+  get checked() {
+    return this.hasAttribute("checked");
+  }
+  set checked(v) {
+    this.toggleAttribute("checked", Boolean(v));
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(v) {
+    this.toggleAttribute("disabled", Boolean(v));
+  }
+  get name() {
+    return this.getAttribute("name") ?? "";
+  }
+  get value() {
+    return this.getAttribute("value") ?? "on";
+  }
+  get form() {
+    return this.internals?.form ?? null;
+  }
+  formResetCallback() {
+    this.checked = this.defaultChecked === true;
+  }
+  formDisabledCallback(disabled) {
+    this.formDisabled = disabled;
+    this.sync();
+  }
+  formStateRestoreCallback(state) {
+    this.checked = state !== null;
+  }
+  get isDisabled() {
+    return this.disabled || this.formDisabled;
+  }
+  toggleByUser() {
+    if (this.isDisabled || this.toggledThisTask)
+      return;
+    this.toggledThisTask = true;
+    setTimeout(() => this.toggledThisTask = false);
+    this.checked = !this.checked;
+    this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+    this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+  }
+  sync() {
+    if (!this.control)
+      return;
+    const disabled = this.isDisabled;
+    this.control.setAttribute("aria-checked", String(this.checked));
+    if (disabled)
+      this.control.setAttribute("aria-disabled", "true");
+    else
+      this.control.removeAttribute("aria-disabled");
+    this.control.tabIndex = disabled ? -1 : 0;
+    const fromLabels = this.textContent?.trim() ? "" : [...this.internals?.labels ?? []].map((l) => l.textContent?.trim() ?? "").filter(Boolean).join(" ");
+    const label = this.getAttribute("aria-label") ?? fromLabels;
+    if (label)
+      this.control.setAttribute("aria-label", label);
+    else
+      this.control.removeAttribute("aria-label");
+    this.internals?.setFormValue(this.checked ? this.value : null);
+  }
+}
+
+// src/ui/runtime.ts
+var pixlClass = null;
+function setPixlClass(cls) {
+  pixlClass = cls;
+}
+function sharedPixl() {
+  if (!pixlClass)
+    throw new Error("[pixl] pixl-ui braucht das SDK: pixl.js vor pixl-ui.js einbinden");
+  return pixlClass.shared();
+}
+var widgetPromise = null;
+function sharedWidget() {
+  widgetPromise ??= (async () => {
+    const pixl = sharedPixl();
+    const now = pixl.widget();
+    if (now)
+      return now;
+    await pixl.ready.catch(() => {});
+    return pixl.widget();
+  })();
+  return widgetPromise;
+}
+var openDialogs = 0;
+function requestFullscreen(on) {
+  if (typeof window === "undefined" || window.parent === window)
+    return;
+  window.parent.postMessage({ type: "pixl:fullscreen", on }, "*");
+}
+var overflowBefore = "";
+function dialogOpened() {
+  if (openDialogs++ > 0)
+    return;
+  overflowBefore = document.documentElement.style.overflow;
+  document.documentElement.style.overflow = "hidden";
+  requestFullscreen(true);
+}
+function dialogClosed() {
+  if (openDialogs === 0 || --openDialogs > 0)
+    return;
+  document.documentElement.style.overflow = overflowBefore;
+  requestFullscreen(false);
+}
+
+// src/ui/dialog.ts
+var CSS2 = `
+	dialog {
+		border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--fg);
+		padding: 0; width: min(560px, calc(100vw - 16px)); max-height: calc(100dvh - 16px); overflow: hidden;
+	}
+	:host([size="large"]) dialog { width: min(960px, calc(100vw - 16px)); }
+	dialog[open] { display: flex; flex-direction: column; }
+	dialog::backdrop { background: rgb(0 0 0 / 0.6); }
+	header { padding: 18px 20px 6px; }
+	h2 { margin: 0 0 4px; font-size: 17px; }
+	header p { margin: 0; color: var(--muted); }
+	header p:empty { display: none; }
+	.body { padding: 12px 20px 16px; overflow: auto; flex: 1; min-height: 0; }
+	footer { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--line); background: rgb(0 0 0 / 0.15); }
+	footer.empty { display: none; }
+	@media (max-width: 640px) {
+		dialog { width: 100%; max-width: 100%; height: fit-content; max-height: 100%; margin: auto 0 0; border-radius: 14px 14px 0 0; }
+		:host([size="large"]) dialog { width: 100%; height: 100%; margin: 0; border: 0; border-radius: 0; }
+		footer { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
+	}
+`;
+
+class PixlDialog extends HTMLElement {
+  static observedAttributes = ["heading", "description"];
+  root;
+  dialog;
+  isOpen = false;
+  constructor() {
+    super();
+    this.root = this.attachShadow({ mode: "open" });
+    adoptStyles(this.root, CSS2);
+    this.root.innerHTML = `
+			<dialog part="dialog">
+				<header><h2 part="heading"></h2><p part="description"></p></header>
+				<div class="body" part="body"><slot></slot></div>
+				<footer part="actions"><slot name="actions"></slot></footer>
+			</dialog>`;
+    this.dialog = this.root.querySelector("dialog");
+    this.dialog.addEventListener("close", () => this.closed());
+    const actions = this.root.querySelector('slot[name="actions"]');
+    const footer = this.root.querySelector("footer");
+    const syncFooter = () => footer.classList.toggle("empty", actions.assignedElements().length === 0);
+    actions.addEventListener("slotchange", syncFooter);
+    syncFooter();
+    this.sync();
+  }
+  attributeChangedCallback() {
+    this.sync();
+  }
+  sync() {
+    this.root.querySelector("h2").textContent = this.getAttribute("heading") ?? "";
+    this.root.querySelector("header p").textContent = this.getAttribute("description") ?? "";
+  }
+  get opened() {
+    return this.isOpen;
+  }
+  open() {
+    if (this.isOpen)
+      return;
+    this.isOpen = true;
+    dialogOpened();
+    this.dialog.showModal();
+    this.dispatchEvent(new Event("open"));
+  }
+  close() {
+    if (this.isOpen)
+      this.dialog.close();
+  }
+  closed() {
+    if (!this.isOpen)
+      return;
+    this.isOpen = false;
+    dialogClosed();
+    this.dispatchEvent(new Event("close"));
+  }
+  disconnectedCallback() {
+    this.close();
+  }
+}
+
+// src/ui/dropdown-helpers.ts
+var ITEM_HEIGHT = 32;
+var LIST_CHROME = 10;
+var GAP = 6;
+var MIN_WIDTH = 160;
+var EDGE = 8;
+var MAX_HEIGHT = 320;
+function normalizeOptions(input) {
+  if (!Array.isArray(input))
+    return [];
+  const out = [];
+  for (const o of input) {
+    if (typeof o === "string" || typeof o === "number")
+      out.push({ value: String(o), label: String(o) });
+    else if (o && typeof o === "object" && "value" in o) {
+      const { value, label, disabled } = o;
+      out.push({
+        value: String(value),
+        label: label === undefined || label === null ? String(value) : String(label),
+        disabled: disabled === true
+      });
+    }
+  }
+  return out;
+}
+function nextEnabled(options, from, step) {
+  for (let i = from + step;i >= 0 && i < options.length; i += step)
+    if (!options[i].disabled)
+      return i;
+  return -1;
+}
+function firstEnabled(options) {
+  return nextEnabled(options, -1, 1);
+}
+function lastEnabled(options) {
+  return nextEnabled(options, options.length, -1);
+}
+function typeaheadIndex(options, query, current) {
+  if (!query || !options.length)
+    return -1;
+  const q = query.toLocaleLowerCase("de");
+  const same = [...q].every((c) => c === q[0]);
+  const needle = same ? q[0] : q;
+  const n = options.length;
+  const start = same ? current + 1 : Math.max(current, 0);
+  for (let k = 0;k < n; k++) {
+    const i = ((start + k) % n + n) % n;
+    const o = options[i];
+    if (!o.disabled && o.label.toLocaleLowerCase("de").startsWith(needle))
+      return i;
+  }
+  return -1;
+}
+function placeList(trigger, listHeight, viewport, maxHeight = MAX_HEIGHT) {
+  const below = viewport.height - trigger.bottom - GAP - EDGE;
+  const aboveSpace = trigger.top - GAP - EDGE;
+  const above = listHeight > below && aboveSpace > below;
+  const space = Math.max(above ? aboveSpace : below, ITEM_HEIGHT + LIST_CHROME);
+  const height = Math.min(listHeight, maxHeight, space);
+  const width = Math.min(Math.max(trigger.width, MIN_WIDTH), Math.max(viewport.width - 2 * EDGE, 0));
+  const left = Math.min(Math.max(trigger.left, EDGE), Math.max(viewport.width - EDGE - width, EDGE));
+  return {
+    top: above ? trigger.top - GAP - height : trigger.bottom + GAP,
+    left,
+    width,
+    maxHeight: Math.min(maxHeight, space),
+    above
+  };
+}
+
+// src/ui/dropdown.ts
+var CHEVRON_ICON = `<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg>`;
+var CHECK_ICON = `<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 6 9 17l-5-5"/></svg>`;
+var CSS3 = `
+	:host { display: inline-block; vertical-align: middle; width: 100%; min-width: 0; }
+	.trigger {
+		display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; height: 36px;
+		padding: 0 8px 0 12px; border-radius: 10px; border: 1px solid var(--line-strong);
+		background: rgb(0 0 0 / 0.2); color: var(--fg); font: inherit; font-size: 14px; text-align: left;
+		cursor: pointer; outline: none; transition: border-color .15s, box-shadow .15s;
+	}
+	.trigger:hover:not(:disabled) { border-color: color-mix(in oklch, var(--fg) 30%, transparent); }
+	.trigger:focus-visible {
+		border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 25%, transparent);
+	}
+	.trigger[aria-expanded="true"] { border-color: var(--accent); }
+	.trigger:disabled { cursor: not-allowed; opacity: 0.5; }
+	.text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+	.text.empty { color: color-mix(in oklch, var(--muted) 70%, transparent); }
+	.chevron { display: flex; flex: none; color: var(--muted); }
+	.list {
+		position: fixed; inset: auto; margin: 0; z-index: 2147483000; box-sizing: border-box;
+		overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain;
+		padding: 4px; border: 1px solid var(--line); border-radius: 10px;
+		background: var(--surface); color: var(--fg); font: inherit; font-size: 14px;
+		box-shadow: 0 16px 40px -12px rgb(0 0 0 / 0.7); outline: none;
+		scrollbar-width: thin; scrollbar-color: rgb(255 255 255 / 0.15) transparent;
+	}
+	.list.fallback:not(.open) { display: none; }
+	.list:popover-open, .list.fallback.open { animation: pixl-pop-in 140ms cubic-bezier(0.2, 0.9, 0.3, 1.2) both; }
+	.list.above { --pop-y: -4px; }
+	@keyframes pixl-pop-in { from { opacity: 0; transform: translateY(var(--pop-y, 4px)) scale(0.98); } }
+	@media (prefers-reduced-motion: reduce) { .list:popover-open, .list.fallback.open { animation: none; } }
+	.option {
+		display: flex; align-items: center; gap: 8px; height: ${ITEM_HEIGHT}px; padding: 0 8px;
+		border-radius: 6px; cursor: default; user-select: none;
+	}
+	.option[data-highlighted] { background: rgb(255 255 255 / 0.06); }
+	.option[aria-disabled="true"] { opacity: 0.45; }
+	.option .label { display: block; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+	.option .check { display: flex; flex: none; color: var(--accent); }
+	.option:not([aria-selected="true"]) .check { visibility: hidden; }
+	.none { padding: 6px 8px; color: var(--muted); }
+	@media (pointer: coarse) { .trigger { height: 40px; } }
+`;
+var supportsPopover = typeof HTMLElement !== "undefined" && "showPopover" in HTMLElement.prototype;
+var counter = 0;
+
+class PixlDropdown extends HTMLElement {
+  static formAssociated = true;
+  static observedAttributes = ["value", "placeholder", "disabled", "aria-label"];
+  root;
+  trigger;
+  text;
+  list;
+  internals;
+  uid = `pixl-dropdown-${++counter}`;
+  propOptions = null;
+  childOptions = [];
+  observer = null;
+  highlighted = -1;
+  query = "";
+  queryTimer;
+  formDisabled = false;
+  defaultValue = null;
+  listening = false;
+  frame = 0;
+  lastRect = "";
+  constructor() {
+    super();
+    this.internals = typeof this.attachInternals === "function" ? this.attachInternals() : null;
+    this.root = this.attachShadow({ mode: "open", delegatesFocus: true });
+    adoptStyles(this.root, CSS3);
+    this.root.innerHTML = `
+			<button type="button" class="trigger" part="trigger" role="combobox" aria-haspopup="listbox" aria-expanded="false">
+				<span class="text"></span><span class="chevron">${CHEVRON_ICON}</span>
+			</button>
+			<div class="list" part="list" role="listbox" tabindex="-1"></div>`;
+    this.trigger = this.root.querySelector("button");
+    this.text = this.root.querySelector(".text");
+    this.list = this.root.querySelector(".list");
+    this.list.id = `${this.uid}-list`;
+    this.trigger.setAttribute("aria-controls", this.list.id);
+    if (supportsPopover) {
+      this.list.setAttribute("popover", "auto");
+      this.trigger.popoverTargetElement = this.list;
+      this.list.addEventListener("beforetoggle", (e) => {
+        if (e.newState === "open")
+          this.beforeOpen();
+      });
+      this.list.addEventListener("toggle", (e) => {
+        if (e.newState === "open")
+          this.afterOpen();
+        else
+          this.afterClose();
+      });
+    } else {
+      this.list.classList.add("fallback");
+      this.trigger.addEventListener("click", () => this.isOpen ? this.close() : this.open());
+    }
+    this.trigger.addEventListener("keydown", (e) => this.onKeydown(e));
+    this.trigger.addEventListener("keyup", (e) => e.key === " " && e.preventDefault());
+    this.list.addEventListener("mousedown", (e) => e.preventDefault());
+    this.list.addEventListener("click", (e) => {
+      const item = e.target.closest(".option");
+      if (item)
+        this.pick(Number(item.dataset.index));
+    });
+    this.list.addEventListener("mousemove", (e) => {
+      const item = e.target.closest(".option");
+      if (item && item.getAttribute("aria-disabled") !== "true")
+        this.highlight(Number(item.dataset.index), false);
+    });
+    this.addEventListener("click", (e) => {
+      if (e.composedPath()[0] === this)
+        this.trigger.focus();
+    });
+  }
+  connectedCallback() {
+    for (const prop of ["options", "value"]) {
+      if (Object.prototype.hasOwnProperty.call(this, prop)) {
+        const v = this[prop];
+        delete this[prop];
+        this[prop] = v;
+      }
+    }
+    this.defaultValue ??= this.getAttribute("value");
+    this.readChildren();
+    this.observer ??= new MutationObserver(() => this.readChildren());
+    this.observer.observe(this, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+      attributes: true,
+      attributeFilter: ["value", "label", "disabled", "selected"]
+    });
+    this.render();
+  }
+  disconnectedCallback() {
+    this.observer?.disconnect();
+    if (supportsPopover) {
+      if (this.list.matches(":popover-open"))
+        this.list.hidePopover();
+    } else
+      this.list.classList.remove("open");
+    if (this.listening)
+      this.afterClose();
+  }
+  attributeChangedCallback() {
+    this.render();
+  }
+  get options() {
+    return this.propOptions ?? this.childOptions;
+  }
+  set options(value) {
+    this.propOptions = value === null || value === undefined ? null : normalizeOptions(value);
+    this.render();
+  }
+  get value() {
+    const attr = this.getAttribute("value");
+    if (attr !== null)
+      return attr;
+    if (this.hasAttribute("placeholder"))
+      return "";
+    const marked = this.propOptions ? null : this.querySelector("option[selected]");
+    if (marked)
+      return marked.value;
+    const first = firstEnabled(this.options);
+    return first >= 0 ? this.options[first].value : "";
+  }
+  set value(v) {
+    this.setAttribute("value", v === null || v === undefined ? "" : String(v));
+  }
+  get disabled() {
+    return this.hasAttribute("disabled");
+  }
+  set disabled(v) {
+    this.toggleAttribute("disabled", Boolean(v));
+  }
+  get name() {
+    return this.getAttribute("name") ?? "";
+  }
+  get selectedLabel() {
+    return this.options.find((o) => o.value === this.value)?.label ?? "";
+  }
+  get form() {
+    return this.internals?.form ?? null;
+  }
+  open() {
+    if (this.isOpen || this.trigger.disabled || !this.isConnected)
+      return;
+    if (supportsPopover)
+      this.list.showPopover();
+    else {
+      this.beforeOpen();
+      this.list.classList.add("open");
+      this.afterOpen();
+    }
+  }
+  close() {
+    if (!this.isOpen)
+      return;
+    if (supportsPopover)
+      this.list.hidePopover();
+    else {
+      this.list.classList.remove("open");
+      this.afterClose();
+    }
+  }
+  get isOpen() {
+    return supportsPopover ? this.list.matches(":popover-open") : this.list.classList.contains("open");
+  }
+  formResetCallback() {
+    if (this.defaultValue === null)
+      this.removeAttribute("value");
+    else
+      this.setAttribute("value", this.defaultValue);
+  }
+  formDisabledCallback(disabled) {
+    this.formDisabled = disabled;
+    this.render();
+  }
+  formStateRestoreCallback(state) {
+    if (typeof state === "string")
+      this.value = state;
+  }
+  readChildren() {
+    const next = [...this.querySelectorAll("option")].map((o) => ({
+      value: o.value,
+      label: o.label || o.textContent?.trim() || o.value,
+      disabled: o.disabled
+    }));
+    if (JSON.stringify(next) === JSON.stringify(this.childOptions))
+      return;
+    this.childOptions = next;
+    this.render();
+  }
+  render() {
+    if (!this.trigger)
+      return;
+    const options = this.options;
+    const value = this.value;
+    const selected = options.find((o) => o.value === value);
+    this.text.textContent = selected?.label ?? this.getAttribute("placeholder") ?? "Auswählen";
+    this.text.classList.toggle("empty", !selected);
+    this.trigger.disabled = this.disabled || this.formDisabled;
+    const label = this.getAttribute("aria-label") ?? this.labelText();
+    if (label)
+      this.trigger.setAttribute("aria-label", label);
+    else
+      this.trigger.removeAttribute("aria-label");
+    this.internals?.setFormValue(selected || value ? value : null);
+    if (this.trigger.disabled)
+      this.close();
+    this.renderList();
+  }
+  labelText() {
+    const labels = this.internals?.labels;
+    if (!labels?.length)
+      return "";
+    return [...labels].map((l) => l.textContent?.trim() ?? "").filter(Boolean).join(" ");
+  }
+  renderList() {
+    const options = this.options;
+    const value = this.value;
+    if (!options.length) {
+      this.list.innerHTML = `<div class="none">Keine Einträge</div>`;
+      this.highlight(-1, false);
+      return;
+    }
+    this.list.replaceChildren(...options.map((o, i) => {
+      const item = document.createElement("div");
+      item.className = "option";
+      item.id = `${this.uid}-o${i}`;
+      item.dataset.index = String(i);
+      item.setAttribute("role", "option");
+      item.setAttribute("aria-selected", String(o.value === value));
+      if (o.disabled)
+        item.setAttribute("aria-disabled", "true");
+      const label = document.createElement("span");
+      label.className = "label";
+      label.textContent = o.label;
+      const check = document.createElement("span");
+      check.className = "check";
+      check.innerHTML = CHECK_ICON;
+      item.append(label, check);
+      return item;
+    }));
+    if (this.highlighted >= options.length)
+      this.highlighted = -1;
+    this.highlight(this.highlighted, false);
+  }
+  beforeOpen() {
+    const options = this.options;
+    const selected = options.findIndex((o) => o.value === this.value && !o.disabled);
+    this.highlighted = selected >= 0 ? selected : firstEnabled(options);
+    this.renderList();
+    this.position();
+  }
+  afterOpen() {
+    this.trigger.setAttribute("aria-expanded", "true");
+    this.highlight(this.highlighted, true);
+    if (this.listening)
+      return;
+    this.listening = true;
+    addEventListener("resize", this.onViewportChange, { passive: true });
+    if (!supportsPopover)
+      document.addEventListener("pointerdown", this.onOutsidePointer, true);
+    this.lastRect = this.rectKey();
+    this.frame = requestAnimationFrame(this.follow);
+  }
+  afterClose() {
+    this.trigger.setAttribute("aria-expanded", "false");
+    this.trigger.removeAttribute("aria-activedescendant");
+    this.listening = false;
+    cancelAnimationFrame(this.frame);
+    removeEventListener("resize", this.onViewportChange);
+    if (!supportsPopover)
+      document.removeEventListener("pointerdown", this.onOutsidePointer, true);
+  }
+  onViewportChange = () => this.position();
+  rectKey() {
+    const r = this.trigger.getBoundingClientRect();
+    return `${r.top},${r.left},${r.width},${r.height}`;
+  }
+  follow = () => {
+    if (!this.listening)
+      return;
+    const key = this.rectKey();
+    if (key !== this.lastRect) {
+      this.lastRect = key;
+      this.position();
+    }
+    this.frame = requestAnimationFrame(this.follow);
+  };
+  onOutsidePointer = (e) => {
+    if (!e.composedPath().includes(this))
+      this.close();
+  };
+  position() {
+    const r = this.trigger.getBoundingClientRect();
+    const height = Math.max(this.options.length, 1) * ITEM_HEIGHT + LIST_CHROME;
+    const p = placeList(r, height, { width: innerWidth, height: innerHeight });
+    const s = this.list.style;
+    s.top = `${p.top}px`;
+    s.left = `${p.left}px`;
+    s.width = `${p.width}px`;
+    s.maxHeight = `${p.maxHeight}px`;
+    this.list.classList.toggle("above", p.above);
+  }
+  highlight(index, scroll) {
+    this.highlighted = index;
+    for (const item of this.list.querySelectorAll(".option"))
+      item.toggleAttribute("data-highlighted", Number(item.dataset.index) === index);
+    const item = index >= 0 ? this.list.querySelector(`#${this.uid}-o${index}`) : null;
+    if (item && this.isOpen) {
+      this.trigger.setAttribute("aria-activedescendant", item.id);
+      if (scroll)
+        item.scrollIntoView({ block: "nearest" });
+    } else
+      this.trigger.removeAttribute("aria-activedescendant");
+  }
+  pick(index) {
+    const option = this.options[index];
+    if (!option || option.disabled)
+      return;
+    const changed = option.value !== this.value;
+    this.value = option.value;
+    this.close();
+    this.trigger.focus();
+    if (!changed)
+      return;
+    this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+    this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+  }
+  onKeydown(e) {
+    if (e.altKey || e.ctrlKey || e.metaKey) {
+      if (e.altKey && e.key === "ArrowUp" && this.isOpen) {
+        e.preventDefault();
+        this.pick(this.highlighted);
+      }
+      return;
+    }
+    const options = this.options;
+    const open = this.isOpen;
+    const move = (index) => {
+      if (index >= 0)
+        this.highlight(index, true);
+    };
+    switch (e.key) {
+      case "ArrowDown":
+      case "ArrowUp":
+        e.preventDefault();
+        if (!open)
+          return this.open();
+        return move(nextEnabled(options, this.highlighted, e.key === "ArrowDown" ? 1 : -1));
+      case "Home":
+      case "PageUp":
+        if (!open)
+          return;
+        e.preventDefault();
+        return move(firstEnabled(options));
+      case "End":
+      case "PageDown":
+        if (!open)
+          return;
+        e.preventDefault();
+        return move(lastEnabled(options));
+      case "Enter":
+        e.preventDefault();
+        return open ? this.pick(this.highlighted) : this.open();
+      case " ":
+        e.preventDefault();
+        if (this.query)
+          return this.typeahead(" ");
+        return open ? this.pick(this.highlighted) : this.open();
+      case "Escape":
+        if (!open)
+          return;
+        e.preventDefault();
+        e.stopPropagation();
+        return this.close();
+      case "Tab":
+        if (open)
+          this.close();
+        return;
+      default:
+        if (e.key.length === 1) {
+          e.preventDefault();
+          this.typeahead(e.key);
+        }
+    }
+  }
+  typeahead(char) {
+    clearTimeout(this.queryTimer);
+    this.query += char;
+    this.queryTimer = setTimeout(() => this.query = "", 500);
+    const options = this.options;
+    const from = this.isOpen ? this.highlighted : options.findIndex((o) => o.value === this.value);
+    const index = typeaheadIndex(options, this.query, from);
+    if (index < 0)
+      return;
+    if (this.isOpen)
+      this.highlight(index, true);
+    else if (options[index].value !== this.value) {
+      this.value = options[index].value;
+      this.dispatchEvent(new Event("input", { bubbles: true, composed: true }));
+      this.dispatchEvent(new Event("change", { bubbles: true, composed: true }));
+    }
+  }
+}
+
+// src/ui/inputs.ts
+function h(tag, props = {}, ...children) {
+  const el = document.createElement(tag);
+  for (const [k, v] of Object.entries(props)) {
+    if (k.startsWith("aria-") || k === "role" || k === "type")
+      el.setAttribute(k, String(v));
+    else
+      el[k] = v;
+  }
+  el.append(...children);
+  return el;
+}
+function createInput(field, value, handlers, ctx) {
+  switch (field.type) {
+    case "boolean": {
+      const sw = h("button", { type: "button", className: "switch", role: "switch", "aria-label": ctx.label });
+      let current = value === true;
+      const sync = () => sw.setAttribute("aria-checked", String(current));
+      sw.onclick = () => {
+        current = !current;
+        sync();
+        handlers.set(current);
+      };
+      sync();
+      return {
+        el: sw,
+        update: (v) => {
+          current = v === true;
+          sync();
+        }
+      };
+    }
+    case "number": {
+      if (field.slider)
+        return sliderInput(field, value, handlers, ctx);
+      const step = field.step ?? 1;
+      const out = h("output", { className: "count" }, String(value ?? 0));
+      let current = typeof value === "number" ? value : 0;
+      const change = (d) => {
+        if (handlers.add)
+          handlers.add(d);
+        else {
+          current += d;
+          out.textContent = String(current);
+          handlers.set(current);
+        }
+        bounds();
+      };
+      const minus = h("button", { type: "button", className: "btn icon", "aria-label": `${ctx.label} verringern` }, "−");
+      const plus = h("button", { type: "button", className: "btn icon", "aria-label": `${ctx.label} erhöhen` }, "+");
+      const bounds = () => {
+        minus.disabled = field.min !== undefined && current <= field.min;
+        plus.disabled = field.max !== undefined && current >= field.max;
+      };
+      minus.onclick = () => change(-step);
+      plus.onclick = () => change(step);
+      bounds();
+      return {
+        el: h("div", { className: "control" }, minus, out, plus),
+        update: (v) => {
+          current = typeof v === "number" ? v : 0;
+          out.textContent = String(current);
+          bounds();
+        }
+      };
+    }
+    case "enum": {
+      const select = document.createElement("pixl-dropdown");
+      select.setAttribute("aria-label", ctx.label);
+      select.options = field.options.map((o) => ({ value: o, label: o }));
+      select.value = String(value ?? field.options[0] ?? "");
+      select.addEventListener("change", () => handlers.set(select.value));
+      return { el: select, update: (v) => select.value = String(v ?? "") };
+    }
+    case "string": {
+      if (field.sensitive)
+        return secretInput(field, value, handlers, ctx);
+      const input = field.multiline ? h("textarea", { className: "input", "aria-label": ctx.label }) : h("input", { className: "input", "aria-label": ctx.label });
+      if (field.maxLength)
+        input.maxLength = field.maxLength;
+      input.value = typeof value === "string" ? value : "";
+      let committed = input.value;
+      const commit = () => {
+        if (input.value === committed)
+          return;
+        committed = input.value;
+        handlers.set(input.value);
+      };
+      input.onblur = commit;
+      input.onkeydown = (e) => {
+        if (e instanceof KeyboardEvent && e.key === "Enter" && !field.multiline) {
+          e.preventDefault();
+          commit();
+        }
+      };
+      return {
+        el: input,
+        update: (v) => {
+          if (document.activeElement === input)
+            return;
+          input.value = typeof v === "string" ? v : "";
+          committed = input.value;
+        }
+      };
+    }
+    case "color": {
+      const picker = h("input", { type: "color", "aria-label": ctx.label });
+      const hex = h("input", { className: "input", "aria-label": `${ctx.label} als Hex`, maxLength: 9 });
+      hex.style.fontFamily = "ui-monospace, monospace";
+      const show = (v) => {
+        const s = typeof v === "string" ? v : "#ffffff";
+        picker.value = s.slice(0, 7);
+        if (document.activeElement !== hex)
+          hex.value = s;
+      };
+      show(value);
+      picker.onchange = () => {
+        hex.value = picker.value;
+        handlers.set(picker.value);
+      };
+      hex.onchange = () => /^#[0-9a-f]{6}([0-9a-f]{2})?$/i.test(hex.value) && handlers.set(hex.value);
+      return { el: h("div", { className: "control" }, picker, hex), update: show };
+    }
+    case "file":
+      return fileInput(field, value, handlers, ctx);
+    case "font":
+      return fontInput(value, handlers, ctx);
+    case "voice":
+      return voiceInput(value, handlers, ctx);
+    case "trigger": {
+      const btn = h("button", { type: "button", className: "btn" }, ctx.label);
+      btn.onclick = () => handlers.press?.();
+      return { el: btn, update: () => {} };
+    }
+  }
+}
+var POPULAR_FONTS = ("Roboto,Open Sans,Inter,Montserrat,Poppins,Lato,Arimo,Roboto Condensed,Roboto Mono,Oswald,Noto Sans," + "DM Sans,Raleway,Nunito Sans,Playfair Display,Nunito,Manrope,Roboto Slab,Ubuntu,Plus Jakarta Sans," + "JetBrains Mono,Kanit,Mulish,Figtree,PT Sans,Rubik,Black Ops One,Archivo Black,Saira,Outfit," + "Source Sans 3,Jost,Quicksand,Source Code Pro,Inconsolata,Merriweather,Prompt,Share Tech,Fira Sans," + "Lora,Space Grotesk,Smooch Sans,Work Sans,Archivo,Karla,Bebas Neue,Noto Serif,Heebo,IBM Plex Sans," + "Press Start 2P").split(",");
+var fontLists = 0;
+function fontInput(value, handlers, ctx) {
+  const listId = `pixl-fonts-${++fontLists}`;
+  const input = h("input", {
+    className: "input",
+    "aria-label": ctx.label,
+    placeholder: "Schrift des Widgets",
+    autocomplete: "off",
+    spellcheck: false,
+    maxLength: 100
+  });
+  input.setAttribute("list", listId);
+  const list = h("datalist", { id: listId }, ...POPULAR_FONTS.map((f) => h("option", { value: f })));
+  let committed = "";
+  let applied = "";
+  const show = (v) => {
+    const name = typeof v === "string" ? v : "";
+    committed = name;
+    if (document.activeElement !== input)
+      input.value = name;
+    if (applied === name)
+      return;
+    applied = "";
+    input.style.fontFamily = "";
+    if (!name)
+      return;
+    loadFont2(name).then(() => {
+      if (committed !== name)
+        return;
+      applied = name;
+      input.style.fontFamily = fontFamily2(name, "system-ui, sans-serif");
+    });
+  };
+  const commit = () => {
+    const next = (input.value.split(",")[0] ?? "").replace(/\s+/g, " ").replace(/[\p{Cc}"'`;{}<>\\]/gu, "").replace(/ {2,}/g, " ").trim().slice(0, 100).trim();
+    input.value = next;
+    if (next === committed)
+      return;
+    show(next);
+    handlers.set(next);
+  };
+  input.onblur = commit;
+  input.onkeydown = (e) => {
+    if (e instanceof KeyboardEvent && e.key === "Enter") {
+      e.preventDefault();
+      commit();
+    }
+  };
+  show(value);
+  return { el: h("div", { className: "control", style: "width:100%" }, input, list), update: show };
+}
+function sliderInput(field, value, handlers, ctx) {
+  const min = field.min ?? 0;
+  const input = h("input", {
+    type: "range",
+    min: String(min),
+    max: String(field.max ?? 100),
+    step: String(field.step ?? 1),
+    value: String(value ?? min),
+    "aria-label": ctx.label
+  });
+  const shown = h("span", { className: "value" }, String(value ?? min));
+  input.oninput = () => shown.textContent = input.value;
+  input.onchange = () => handlers.set(Number(input.value));
+  return {
+    el: h("div", { className: "control" }, input, shown),
+    update: (v) => {
+      if (document.activeElement === input)
+        return;
+      input.value = String(v);
+      shown.textContent = String(v);
+    }
+  };
+}
+function fileInput(field, value, handlers, ctx) {
+  const widget = ctx.widget;
+  const thumb = h("img", { className: "thumb", alt: "" });
+  const url = h("input", { className: "input", placeholder: "oder https://…", "aria-label": `${ctx.label}, Adresse` });
+  const picker = h("input", { type: "file", accept: field.accept ?? "", hidden: true });
+  const upload = h("button", { type: "button", className: "btn" }, "Hochladen");
+  const clear = h("button", { type: "button", className: "btn ghost" }, "Entfernen");
+  let current = typeof value === "string" ? value : "";
+  const show = () => {
+    const src = current && widget ? widget.fileUrl(current) : current;
+    thumb.hidden = !src;
+    if (src)
+      thumb.src = src;
+    clear.hidden = !current;
+    if (document.activeElement !== url)
+      url.value = current.startsWith("https://") ? current : "";
+  };
+  const set = (v) => {
+    current = v;
+    show();
+    handlers.set(v);
+  };
+  upload.onclick = () => picker.click();
+  picker.onchange = async () => {
+    const file = picker.files?.[0];
+    picker.value = "";
+    if (!file || !widget)
+      return;
+    upload.disabled = true;
+    upload.textContent = "Lädt hoch …";
+    try {
+      set((await widget.files.upload(file)).path);
+    } catch (e) {
+      console.error("[pixl] Hochladen fehlgeschlagen:", e);
+      alert("Hochladen fehlgeschlagen");
+    } finally {
+      upload.disabled = false;
+      upload.textContent = "Hochladen";
+    }
+  };
+  clear.onclick = () => set("");
+  url.onchange = () => {
+    const v = url.value.trim();
+    if (!v || v.startsWith("https://"))
+      set(v);
+  };
+  show();
+  return {
+    el: h("div", { className: "control", style: "align-items:flex-start;width:100%" }, thumb, h("div", { className: "stack" }, h("div", { className: "row" }, upload, clear, picker), url)),
+    update: (v) => {
+      current = typeof v === "string" ? v : "";
+      show();
+    }
+  };
+}
+var EYE_ICON = `<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2.06 12.35a1 1 0 0 1 0-.7 10.75 10.75 0 0 1 19.88 0 1 1 0 0 1 0 .7 10.75 10.75 0 0 1-19.88 0"/><circle cx="12" cy="12" r="3"/></svg>`;
+var EYE_OFF_ICON = `<svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.73 5.08A10.43 10.43 0 0 1 12 5c7 0 10 7 10 7a13.16 13.16 0 0 1-1.67 2.68"/><path d="M6.61 6.61A13.53 13.53 0 0 0 2 12s3 7 10 7a9.74 9.74 0 0 0 5.39-1.61"/><path d="M9.88 9.88a3 3 0 1 0 4.24 4.24"/><path d="m2 2 20 20"/></svg>`;
+function secretInput(field, value, handlers, ctx) {
+  const input = h("input", {
+    type: "password",
+    className: "input secret",
+    "aria-label": ctx.label,
+    autocomplete: "off",
+    autocapitalize: "off",
+    spellcheck: false
+  });
+  for (const attr of ["data-1p-ignore", "data-bwignore"])
+    input.setAttribute(attr, "");
+  input.setAttribute("data-lpignore", "true");
+  input.setAttribute("data-form-type", "other");
+  if (field.maxLength)
+    input.maxLength = field.maxLength;
+  const eye = h("button", { type: "button", className: "btn ghost icon eye" });
+  const wrap = h("div", { className: "secret-wrap" }, input, eye);
+  let revealed = false;
+  const show = (on) => {
+    revealed = on;
+    input.type = on ? "text" : "password";
+    eye.innerHTML = on ? EYE_OFF_ICON : EYE_ICON;
+    eye.setAttribute("aria-label", on ? `${ctx.label} verbergen` : `${ctx.label} anzeigen`);
+    eye.setAttribute("aria-pressed", String(on));
+  };
+  show(false);
+  eye.onclick = () => show(!revealed);
+  wrap.addEventListener("focusout", (e) => {
+    if (!wrap.contains(e.relatedTarget))
+      show(false);
+  });
+  input.value = typeof value === "string" ? value : "";
+  let committed = input.value;
+  const commit = () => {
+    const next = input.value.trim();
+    input.value = next;
+    if (next === committed)
+      return;
+    committed = next;
+    handlers.set(next);
+  };
+  input.onblur = commit;
+  input.onkeydown = (e) => {
+    if (e instanceof KeyboardEvent && e.key === "Enter") {
+      e.preventDefault();
+      commit();
+    }
+  };
+  return {
+    el: wrap,
+    update: (v) => {
+      if (document.activeElement === input)
+        return;
+      input.value = typeof v === "string" ? v : "";
+      committed = input.value;
+    }
+  };
+}
+var TIER_SUFFIX = { ai: " (KI)", custom: " (eigene)" };
+var TIER_ORDER = { standard: 0, ai: 1, custom: 2 };
+function voiceInput(value, handlers, ctx) {
+  const select = document.createElement("pixl-dropdown");
+  select.setAttribute("aria-label", ctx.label);
+  select.setAttribute("disabled", "");
+  const hint = h("span", { className: "desc", hidden: true });
+  let current = typeof value === "string" ? value : "";
+  let known = new Map;
+  let channelName = "";
+  const fill = () => {
+    const options = [
+      { value: "", label: channelName ? `Stimme des Kanals (${channelName})` : "Stimme des Kanals" },
+      ...[...known].map(([id, label]) => ({ value: id, label }))
+    ];
+    if (current && !known.has(current))
+      options.push({ value: current, label: "Unbekannte Stimme" });
+    select.options = options;
+    select.value = current;
+  };
+  fill();
+  select.addEventListener("change", () => {
+    current = select.value;
+    handlers.set(current);
+  });
+  const widget = ctx.widget;
+  if (!widget)
+    hint.textContent = "Stimmen gibt es nur in gehosteten Widgets";
+  else
+    widget.voices().then((data) => {
+      const sorted = [...data.voices].sort((a, b) => (TIER_ORDER[a.tier ?? "standard"] ?? 3) - (TIER_ORDER[b.tier ?? "standard"] ?? 3) || a.name.localeCompare(b.name, "de"));
+      known = new Map(sorted.map((v) => [v.id, `${v.name}${TIER_SUFFIX[v.tier ?? ""] ?? ""}`]));
+      channelName = data.voices.find((v) => v.id === data.default)?.name ?? "";
+      fill();
+      if (data.enabled)
+        select.removeAttribute("disabled");
+      else {
+        hint.textContent = "TTS ist für diesen Kanal ausgeschaltet.";
+        hint.hidden = false;
+      }
+    }).catch(() => {
+      hint.textContent = "Stimmen konnten nicht geladen werden.";
+      hint.hidden = false;
+    });
+  if (!widget)
+    hint.hidden = false;
+  return {
+    el: h("div", { className: "stack" }, select, hint),
+    update: (v) => {
+      current = typeof v === "string" ? v : "";
+      fill();
+    }
+  };
+}
+
+// src/ui/field.ts
+var isWide = (def) => def.type === "string" || def.type === "file" || def.type === "font" || def.type === "voice" || def.type === "number" && !!def.slider;
+var PLACEHOLDER = {
+  "pixl-toggle": [40, 22, 999],
+  "pixl-counter": [116, 34, 999],
+  "pixl-button": [120, 34, 999],
+  "pixl-color": [120, 34, 8]
+};
+
+class WidgetBoundElement extends HTMLElement {
+  widget = null;
+  root;
+  unsubscribe = null;
+  connected = false;
+  constructor() {
+    super();
+    this.root = this.attachShadow({ mode: "open" });
+  }
+  get fieldName() {
+    return this.getAttribute("field") ?? "";
+  }
+  get scope() {
+    const attr = this.getAttribute("scope");
+    if (attr === "settings" || attr === "controls")
+      return attr;
+    return this.widget?.manifest?.settings?.[this.fieldName] ? "settings" : "controls";
+  }
+  get definition() {
+    const m = this.widget?.manifest;
+    const name = this.fieldName;
+    return (this.scope === "settings" ? m?.settings?.[name] : m?.controls?.[name]) ?? null;
+  }
+  connectedCallback() {
+    this.connected = true;
+    if (!this.widget) {
+      this.setAttribute("aria-busy", "true");
+      this.renderPlaceholder();
+    }
+    sharedWidget().then((widget) => {
+      if (!this.connected)
+        return;
+      this.removeAttribute("aria-busy");
+      this.widget = widget;
+      if (!widget)
+        return this.renderMessage("Nur in gehosteten Widgets verfügbar");
+      const live = this.scope === "settings" ? widget.settings[this.fieldName] : widget.values[this.fieldName];
+      this.render();
+      this.unsubscribe = live?.subscribe((v) => this.onValue(v)) ?? null;
+    });
+  }
+  disconnectedCallback() {
+    this.connected = false;
+    this.unsubscribe?.();
+    this.unsubscribe = null;
+  }
+  async write(op) {
+    if (!this.widget)
+      return false;
+    try {
+      await this.widget.batch([{ ...op, name: this.fieldName, scope: this.scope }]);
+      this.showError(null);
+      return true;
+    } catch (e) {
+      this.showError(e instanceof Error ? e.message : "Speichern fehlgeschlagen");
+      return false;
+    }
+  }
+  showError(message) {
+    let el = this.root.querySelector(".error");
+    if (!message)
+      return el?.remove();
+    if (!el) {
+      el = document.createElement("p");
+      el.className = "error";
+      el.setAttribute("role", "alert");
+      this.root.querySelector(".field, .list")?.append(el);
+    }
+    el.textContent = message;
+  }
+  renderPlaceholder() {
+    adoptStyles(this.root);
+    const [width, height, radius] = PLACEHOLDER[this.localName] ?? [96, 34, 8];
+    const field = document.createElement("div");
+    field.className = "field";
+    const text = this.getAttribute("label") ?? this.textContent?.trim();
+    if (this.localName !== "pixl-button") {
+      const label = document.createElement("span");
+      if (text) {
+        label.className = "label-text";
+        label.textContent = text;
+      } else {
+        label.className = "skeleton";
+        label.style.cssText = "height:14px;width:min(160px,45%)";
+        label.setAttribute("aria-hidden", "true");
+      }
+      field.append(label);
+    }
+    const control = document.createElement("span");
+    control.className = "skeleton";
+    control.style.cssText = `width:${width}px;height:${height}px;border-radius:${radius}px`;
+    control.setAttribute("aria-hidden", "true");
+    field.append(control);
+    this.root.replaceChildren(field);
+  }
+  renderMessage(message) {
+    adoptStyles(this.root);
+    this.root.innerHTML = `<p class="desc">${message}</p>`;
+  }
+}
+
+class PixlField extends WidgetBoundElement {
+  static observedAttributes = ["field", "scope", "label", "description"];
+  input = null;
+  attributeChangedCallback() {
+    if (this.widget)
+      this.render();
+  }
+  render() {
+    adoptStyles(this.root);
+    const def = this.definition;
+    if (!def)
+      return this.renderMessage(`Feld „${this.fieldName}“ steht nicht in pixl.json`);
+    if (def.type === "list")
+      return this.renderMessage(`Für Listen <pixl-list field="${this.fieldName}"> nehmen`);
+    const label = this.getAttribute("label") ?? (this.textContent?.trim() || def.label);
+    const description = this.getAttribute("description") ?? def.description ?? "";
+    const value = this.scope === "settings" ? this.widget?.settings[this.fieldName]?.value : this.widget?.values[this.fieldName]?.value;
+    const field = document.createElement("div");
+    field.className = `field${isWide(def) ? " wide" : ""}`;
+    this.input = createInput(def, value, {
+      set: (v) => void this.write({ set: v }),
+      add: (d) => void this.write({ add: d }),
+      press: () => void this.write({ press: true })
+    }, { label, widget: this.widget });
+    if (def.type !== "trigger") {
+      const text = document.createElement("div");
+      text.className = "label";
+      text.innerHTML = `<span class="label-text"><slot></slot></span>`;
+      text.querySelector("slot").textContent = label;
+      if (description) {
+        const desc = document.createElement("span");
+        desc.className = "desc";
+        desc.textContent = description;
+        text.append(desc);
+      }
+      field.append(text);
+    }
+    const control = document.createElement("div");
+    control.className = "control";
+    control.append(this.input.el);
+    field.append(control);
+    this.root.replaceChildren(field);
+  }
+  onValue(value) {
+    this.input?.update(value);
+  }
+}
+
+class PixlToggle extends PixlField {
+}
+
+class PixlCounter extends PixlField {
+}
+
+class PixlRange extends PixlField {
+}
+
+class PixlSelect extends PixlField {
+}
+
+class PixlText extends PixlField {
+}
+
+class PixlColor extends PixlField {
+}
+
+class PixlFile extends PixlField {
+}
+
+class PixlButton extends PixlField {
+}
+
+// src/ui/list.ts
+var CSS4 = `
+	.list { display: flex; flex-direction: column; gap: 10px; }
+	/* Einträge vertieft in der Karte des Felds, statt eines zweiten Rahmens */
+	ul {
+		list-style: none; margin: 0; padding: 0; border-radius: var(--radius);
+		background: rgb(0 0 0 / 0.2); box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.25);
+	}
+	li.row-item { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 8px 12px; }
+	li.row-item + li.row-item { border-top: 1px solid var(--line); }
+	.name { flex: 1; min-width: 6rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+	.actions { margin-left: auto; display: flex; gap: 2px; }
+	.img { width: 36px; height: 36px; border-radius: 6px; border: 1px solid var(--line); object-fit: contain; background: rgb(0 0 0 / 0.25); flex: none; }
+	.tiles {
+		display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; border-radius: var(--radius); min-height: 72px; align-items: center;
+		background: rgb(0 0 0 / 0.2); box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.25);
+	}
+	.tile { border: 0; padding: 0; background: transparent; color: inherit; font: inherit; cursor: grab; touch-action: pan-y; user-select: none; border-radius: 8px; }
+	.tile.dragging { opacity: 0.35; }
+	.tile.before { box-shadow: -4px 0 0 var(--accent); }
+	.tile.after { box-shadow: 4px 0 0 var(--accent); }
+	.empty { color: var(--muted); padding: 16px; text-align: center; border-radius: var(--radius); background: rgb(0 0 0 / 0.15); }
+	.tools { display: flex; flex-wrap: wrap; gap: 8px; }
+	.form { display: flex; flex-direction: column; gap: 14px; }
+	.form label { display: flex; flex-direction: column; gap: 6px; font-weight: 500; }
+`;
+
+class PixlList extends WidgetBoundElement {
+  static observedAttributes = ["field", "scope", "layout"];
+  renderItem = null;
+  items = [];
+  dialog = null;
+  attributeChangedCallback() {
+    if (this.widget)
+      this.render();
+  }
+  get listField() {
+    const def = this.definition;
+    return def?.type === "list" ? def : null;
+  }
+  onValue(value) {
+    this.items = Array.isArray(value) ? value : [];
+    this.renderItems();
+  }
+  renderPlaceholder() {
+    adoptStyles(this.root, CSS4);
+    const tile = `<span class="skeleton" style="width:72px;height:72px"></span>`;
+    const row = `<li class="row-item"><span class="skeleton" style="height:14px;width:45%;margin:11px 0"></span></li>`;
+    this.root.innerHTML = this.getAttribute("layout") === "tiles" ? `<div class="tiles" aria-hidden="true">${tile.repeat(3)}</div>` : `<ul aria-hidden="true">${row.repeat(3)}</ul>`;
+  }
+  render() {
+    adoptStyles(this.root, CSS4);
+    const def = this.listField;
+    if (!def)
+      return this.renderMessage(`„${this.fieldName}“ ist in pixl.json kein list-Feld`);
+    this.root.innerHTML = `
+			<div class="list">
+				<div class="items"></div>
+				<div class="tools">
+					<button type="button" class="btn add">+ Hinzufügen</button>
+				</div>
+			</div>
+			<pixl-dialog size="large"></pixl-dialog>`;
+    this.dialog = this.root.querySelector("pixl-dialog");
+    this.root.querySelector(".add").onclick = () => this.edit(null);
+    this.renderItems();
+  }
+  labelOf(item) {
+    const def = this.listField;
+    const preferred = def?.itemLabel ? item[def.itemLabel] : null;
+    if (typeof preferred === "string" && preferred)
+      return preferred;
+    for (const [key, f] of Object.entries(def?.item ?? {}))
+      if ((f.type === "string" || f.type === "enum") && typeof item[key] === "string" && item[key])
+        return item[key];
+    return "Ohne Namen";
+  }
+  renderItems() {
+    const host = this.root.querySelector(".items");
+    const def = this.listField;
+    if (!host || !def)
+      return;
+    const add = this.root.querySelector(".add");
+    if (add)
+      add.disabled = this.items.length >= (def.max ?? 200);
+    if (!this.items.length) {
+      host.innerHTML = `<p class="empty">Noch keine Einträge</p>`;
+      return;
+    }
+    if (this.getAttribute("layout") === "tiles")
+      return this.renderTiles(host);
+    const ul = document.createElement("ul");
+    this.items.forEach((item, i) => {
+      const li = document.createElement("li");
+      li.className = "row-item";
+      const custom = this.renderItem?.(item, i);
+      if (custom !== undefined && custom !== null) {
+        const wrap = document.createElement("div");
+        wrap.className = "name";
+        wrap.append(custom);
+        li.append(wrap);
+      } else {
+        const image = def.itemImage ? item[def.itemImage] : null;
+        if (def.itemImage) {
+          const img = document.createElement("img");
+          img.className = "img";
+          img.alt = "";
+          if (typeof image === "string" && image)
+            img.src = this.widget?.fileUrl(image) ?? image;
+          li.append(img);
+        }
+        const name = document.createElement("span");
+        name.className = "name";
+        name.textContent = this.labelOf(item);
+        li.append(name);
+      }
+      for (const [key, f] of Object.entries(def.item).filter(([, f]) => f.type === "boolean").slice(0, 3)) {
+        const sw = document.createElement("button");
+        sw.type = "button";
+        sw.className = "switch";
+        sw.setAttribute("role", "switch");
+        sw.setAttribute("aria-checked", String(item[key] === true));
+        sw.setAttribute("aria-label", `${f.label}: ${this.labelOf(item)}`);
+        sw.onclick = () => this.op({ update: item.id, field: key, toggle: true });
+        li.append(sw);
+      }
+      const actions = document.createElement("div");
+      actions.className = "actions";
+      actions.append(this.iconButton("↑", `${this.labelOf(item)} nach oben`, i === 0, () => this.op({ move: item.id, to: i - 1 })), this.iconButton("↓", `${this.labelOf(item)} nach unten`, i === this.items.length - 1, () => this.op({ move: item.id, to: i + 1 })), this.iconButton("✎", `${this.labelOf(item)} bearbeiten`, false, () => this.edit(i)), this.iconButton("✕", `${this.labelOf(item)} löschen`, false, () => this.op({ remove: item.id })));
+      li.append(actions);
+      ul.append(li);
+    });
+    host.replaceChildren(ul);
+  }
+  renderTiles(host) {
+    const wrap = document.createElement("div");
+    wrap.className = "tiles";
+    this.items.forEach((item, i) => {
+      const tile = document.createElement("button");
+      tile.type = "button";
+      tile.className = "tile";
+      tile.setAttribute("aria-label", `${this.labelOf(item)} bearbeiten`);
+      const custom = this.renderItem?.(item, i);
+      tile.append(custom ?? this.labelOf(item));
+      this.attachDrag(tile, i, wrap);
+      wrap.append(tile);
+    });
+    host.replaceChildren(wrap);
+  }
+  attachDrag(tile, index, wrap) {
+    let start = null;
+    let moved = false;
+    let target = null;
+    tile.addEventListener("pointerdown", (e) => {
+      if (e.button !== 0)
+        return;
+      start = { x: e.clientX, y: e.clientY };
+      moved = false;
+      target = null;
+      tile.setPointerCapture(e.pointerId);
+    });
+    tile.addEventListener("pointermove", (e) => {
+      if (!start)
+        return;
+      if (!moved && Math.hypot(e.clientX - start.x, e.clientY - start.y) < 8)
+        return;
+      moved = true;
+      tile.classList.add("dragging");
+      const tiles = [...wrap.querySelectorAll(".tile")];
+      let best = null;
+      tiles.forEach((t, i) => {
+        t.classList.remove("before", "after");
+        const r = t.getBoundingClientRect();
+        const d = Math.hypot(e.clientX - (r.left + r.width / 2), e.clientY - (r.top + r.height / 2));
+        if (!best || d < best.d)
+          best = { i, d, after: e.clientX > r.left + r.width / 2 };
+      });
+      if (!best)
+        return;
+      const b = best;
+      tiles[b.i].classList.add(b.after ? "after" : "before");
+      target = b.after ? b.i + 1 : b.i;
+    });
+    const end = (cancelled) => {
+      if (!start)
+        return;
+      start = null;
+      if (cancelled)
+        return this.renderItems();
+      if (!moved)
+        return this.edit(index);
+      if (target === null)
+        return this.renderItems();
+      const to = Math.max(0, Math.min(target > index ? target - 1 : target, this.items.length - 1));
+      if (to === index)
+        return this.renderItems();
+      this.op({ move: this.items[index].id, to });
+    };
+    tile.addEventListener("pointerup", () => end(false));
+    tile.addEventListener("pointercancel", () => end(true));
+  }
+  iconButton(text, label, disabled, onClick) {
+    const b = document.createElement("button");
+    b.type = "button";
+    b.className = "btn ghost icon";
+    b.textContent = text;
+    b.disabled = disabled;
+    b.setAttribute("aria-label", label);
+    b.onclick = onClick;
+    return b;
+  }
+  op(op) {
+    return this.write(op);
+  }
+  edit(index) {
+    const def = this.listField;
+    if (!def)
+      return;
+    const item = index === null ? null : this.items[index] ?? null;
+    const save = async (values) => {
+      if (item)
+        return this.op({ update: item.id, patch: values });
+      return this.op({ insert: values });
+    };
+    const event = new CustomEvent("pixl-edit", {
+      cancelable: true,
+      bubbles: true,
+      composed: true,
+      detail: { item, index, save }
+    });
+    if (!this.dispatchEvent(event))
+      return;
+    this.openBuiltInEditor(def, item, save);
+  }
+  openBuiltInEditor(def, item, save) {
+    const dialog = this.dialog;
+    if (!dialog)
+      return;
+    const values = {};
+    const form = document.createElement("form");
+    form.className = "form";
+    for (const [key, f] of Object.entries(def.item)) {
+      values[key] = item ? item[key] : f.default;
+      const label = document.createElement("label");
+      label.append(f.label);
+      const input = createInput(f, values[key], { set: (v) => values[key] = v }, { label: f.label, widget: this.widget });
+      label.append(input.el);
+      form.append(label);
+    }
+    const cancel = document.createElement("button");
+    cancel.type = "button";
+    cancel.className = "btn";
+    cancel.textContent = "Abbrechen";
+    cancel.slot = "actions";
+    cancel.onclick = () => dialog.close();
+    const ok = document.createElement("button");
+    ok.type = "button";
+    ok.className = "btn primary";
+    ok.textContent = item ? "Speichern" : "Hinzufügen";
+    ok.slot = "actions";
+    ok.onclick = async () => {
+      ok.disabled = true;
+      if (await save(values))
+        dialog.close();
+      ok.disabled = false;
+    };
+    form.onsubmit = (e) => {
+      e.preventDefault();
+      ok.click();
+    };
+    dialog.setAttribute("heading", item ? "Eintrag bearbeiten" : "Neuer Eintrag");
+    dialog.replaceChildren(form, cancel, ok);
+    dialog.open();
+  }
+}
+
+// src/ui/section.ts
+var SECTION_CSS = `
+	h3 {
+		margin: 0 0 10px; padding: 0 4px; font-size: 12px; font-weight: 600; color: var(--muted);
+		text-transform: uppercase; letter-spacing: 0.04em;
+	}
+	.box { display: flex; flex-direction: column; gap: 10px; }
+	::slotted(*) {
+		border: 1px solid var(--line); border-radius: 12px; background: var(--surface); padding: 0 16px;
+	}
+`;
+
+class PixlSection extends HTMLElement {
+  static observedAttributes = ["heading"];
+  root;
+  constructor() {
+    super();
+    this.root = this.attachShadow({ mode: "open" });
+    adoptStyles(this.root, SECTION_CSS);
+    this.root.innerHTML = `<h3 part="heading"></h3><div class="box" part="box"><slot></slot></div>`;
+    this.sync();
+  }
+  attributeChangedCallback() {
+    this.sync();
+  }
+  sync() {
+    const h3 = this.root.querySelector("h3");
+    h3.textContent = this.getAttribute("heading") ?? "";
+    h3.hidden = !h3.textContent;
+  }
+}
+
+class PixlControls extends HTMLElement {
+  static observedAttributes = ["scope"];
+  connectedCallback() {
+    this.build();
+  }
+  attributeChangedCallback() {
+    if (this.isConnected)
+      this.build();
+  }
+  async build() {
+    const widget = await sharedWidget();
+    const scope = this.getAttribute("scope") === "settings" ? "settings" : "controls";
+    const fields = (scope === "settings" ? widget?.manifest?.settings : widget?.manifest?.controls) ?? {};
+    const groups = new Map;
+    const labels = new Map;
+    const out = [];
+    for (const [name, def] of Object.entries(fields)) {
+      if (def.hidden)
+        continue;
+      const key = def.group ?? "";
+      let section = groups.get(key);
+      if (!section) {
+        section = document.createElement("pixl-section");
+        section.style.marginBottom = "24px";
+        groups.set(key, section);
+        labels.set(key, []);
+        out.push(section);
+      }
+      labels.get(key).push(def.label);
+      const el = document.createElement(def.type === "list" ? "pixl-list" : "pixl-field");
+      el.setAttribute("field", name);
+      el.setAttribute("scope", scope);
+      if (def.type === "list")
+        el.style.padding = "12px 0";
+      section.append(el);
+    }
+    const plain = (s) => s.trim().toLocaleLowerCase();
+    for (const [key, section] of groups) {
+      const names = labels.get(key) ?? [];
+      const repeats = names.length === 1 && plain(names[0]) === plain(key);
+      if (key && !repeats)
+        section.setAttribute("heading", key);
+    }
+    this.replaceChildren(...out);
+  }
+}
+
+// src/ui/define.ts
+var ELEMENTS = [
+  ["pixl-field", PixlField],
+  ["pixl-toggle", PixlToggle],
+  ["pixl-counter", PixlCounter],
+  ["pixl-range", PixlRange],
+  ["pixl-select", PixlSelect],
+  ["pixl-text", PixlText],
+  ["pixl-color", PixlColor],
+  ["pixl-file", PixlFile],
+  ["pixl-button", PixlButton],
+  ["pixl-list", PixlList],
+  ["pixl-dialog", PixlDialog],
+  ["pixl-dropdown", PixlDropdown],
+  ["pixl-checkbox", PixlCheckbox],
+  ["pixl-section", PixlSection],
+  ["pixl-controls", PixlControls]
+];
+function defineElements() {
+  if (typeof customElements === "undefined")
+    return;
+  injectPageStyles();
+  for (const [name, element] of ELEMENTS)
+    if (!customElements.get(name))
+      customElements.define(name, element);
+}
+
+// src/ui/index.ts
+setPixlClass(Pixl2);
+defineElements();
+export {
+  PAGE_CSS,
+  PixlCheckbox,
+  PixlControls,
+  PixlDialog,
+  PixlDropdown,
+  PixlField,
+  PixlList,
+  PixlSection,
+  SHADOW_CSS,
+  createInput,
+  defineElements,
+  requestFullscreen,
+  sharedPixl,
+  sharedWidget
+};