tmg-media-player 0.0.1

package/dist/plugs/settings/settingsView/menu/widgets/index.cjs

@@ -0,0 +1,912 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/ts/plugs/settings/settingsView/menu/widgets/index.ts
+var widgets_exports = {};
+__export(widgets_exports, {
+  BaseWidget: () => BaseWidget,
+  ButtonWidget: () => ButtonWidget,
+  ColorWidget: () => ColorWidget,
+  DragSelectWidget: () => DragSelectWidget,
+  GroupWidget: () => GroupWidget,
+  InputWidget: () => InputWidget,
+  LimitsWidget: () => LimitsWidget,
+  RangeWidget: () => RangeWidget,
+  SelectWidget: () => SelectWidget,
+  ToggleWidget: () => ToggleWidget,
+  WidgetRegistry: () => WidgetRegistry
+});
+module.exports = __toCommonJS(widgets_exports);
+
+// src/ts/core/controllable.ts
+var import_sia_reactor3 = require("sia-reactor");
+var import_utils12 = require("sia-reactor/utils");
+
+// ../t007-tools/packages/utils/dist/chunk-ZALPHCSJ.js
+var import_utils = require("sia-reactor/utils");
+var import_utils2 = require("sia-reactor/utils");
+var import_sia_reactor = require("sia-reactor");
+var import_sia_reactor2 = require("sia-reactor");
+var import_utils3 = require("sia-reactor/utils");
+var import_utils4 = require("sia-reactor/utils");
+var import_utils5 = require("sia-reactor/utils");
+var import_utils6 = require("sia-reactor/utils");
+var import_utils7 = require("sia-reactor/utils");
+var VIRTUAL_RESOURCE = /* @__PURE__ */ Symbol.for("T007_VIRTUAL_RESOURCE");
+function createListRenderer({ container, getKey, createNode, updateNode = import_sia_reactor.NOOP, destroyNode = import_sia_reactor.NOOP, initNode }) {
+  let nodeRegistry = /* @__PURE__ */ new Map();
+  if (initNode) {
+    const children = Array.from(container.children);
+    for (let i = 0, len = children.length; i < len; i++) initNode(children[i], (key) => nodeRegistry.set(key, children[i]));
+  }
+  return function syncDOM(array, strict = true) {
+    const newRegistry = /* @__PURE__ */ new Map(), seenKeys = /* @__PURE__ */ new Set(), oldPositions = /* @__PURE__ */ new WeakMap(), children = Array.from(container.children);
+    for (let i = 0, len = children.length; i < len; i++) oldPositions.set(children[i], i);
+    const futureNodes = [], oldIndices = [];
+    for (let i = 0, len = array.length; i < len; i++) {
+      const item = array[i], key = getKey(item);
+      if (seenKeys.has(key)) throw new Error(`[List Renderer] Duplicate key "${key}" detected`);
+      let node = nodeRegistry.get(key);
+      if (!node) {
+        node = createNode(item);
+        if (!node) {
+          if (strict) throw new Error(`[List Renderer] No HTMLElement for key "${key}"`);
+          continue;
+        }
+        oldIndices.push(-1);
+      } else updateNode(node, item), oldIndices.push(oldPositions.get(node) ?? -1);
+      seenKeys.add(key), futureNodes.push(node), newRegistry.set(key, node);
+    }
+    for (const [key, node] of nodeRegistry.entries()) !seenKeys.has(key) && node.parentElement === container && (destroyNode(node, key), node.remove());
+    const sequence = longestIncreasingSubsequence(oldIndices), stable = new Set(sequence);
+    let anchor = null;
+    for (let i = futureNodes.length - 1; i >= 0; i--) {
+      const node = futureNodes[i];
+      if (oldIndices[i] !== -1 && stable.has(i)) {
+        anchor = node;
+        continue;
+      }
+      container.insertBefore(node, anchor), anchor = node;
+    }
+    nodeRegistry = newRegistry;
+  };
+}
+function isFunc(val) {
+  return "function" === typeof val;
+}
+function longestIncreasingSubsequence(array) {
+  const n = array.length, parent = new Array(n), tails = [];
+  for (let i = 0; i < n; i++) {
+    const value = array[i];
+    if (value === -1) continue;
+    let left = 0;
+    let right = tails.length;
+    while (left < right) {
+      const mid = left + right >> 1;
+      if (array[tails[mid]] < value) left = mid + 1;
+      else right = mid;
+    }
+    if (left > 0) parent[i] = tails[left - 1];
+    else parent[i] = -1;
+    tails[left] = i;
+  }
+  if (!tails.length) return [];
+  const result = [];
+  let k = tails[tails.length - 1];
+  while (k >= 0) result.push(k), k = parent[k];
+  return result.reverse(), result;
+}
+if ("undefined" !== typeof window) {
+  (window.t007 ?? (window.t007 = {})).VIRTUAL_RESOURCE = VIRTUAL_RESOURCE;
+  window.T007_TOAST_JS_SRC ?? (window.T007_TOAST_JS_SRC = `https://cdn.jsdelivr.net/npm/@t007/toast@latest`);
+  window.T007_INPUT_JS_SRC ?? (window.T007_INPUT_JS_SRC = `https://cdn.jsdelivr.net/npm/@t007/input@latest`);
+  window.T007_DIALOG_JS_SRC ?? (window.T007_DIALOG_JS_SRC = `https://cdn.jsdelivr.net/npm/@t007/dialog@latest`);
+  window.T007_TOAST_CSS_SRC ?? (window.T007_TOAST_CSS_SRC = `https://cdn.jsdelivr.net/npm/@t007/toast@latest/dist/index.min.css`);
+  window.T007_INPUT_CSS_SRC ?? (window.T007_INPUT_CSS_SRC = `https://cdn.jsdelivr.net/npm/@t007/input@latest/dist/index.min.css`);
+  window.T007_DIALOG_CSS_SRC ?? (window.T007_DIALOG_CSS_SRC = `https://cdn.jsdelivr.net/npm/@t007/dialog@latest/dist/index.min.css`);
+}
+
+// src/ts/utils/obj.ts
+var import_utils9 = require("sia-reactor/utils");
+function isUIOption(opt) {
+  return (0, import_utils3.isObj)(opt) && "value" in opt;
+}
+function parseUIOpt(opt) {
+  return isUIOption(opt) ? { value: opt.value, display: String(opt.display ?? opt.value), infoText: opt.infoText } : { value: opt, display: String(opt) };
+}
+function parseUIOpts(opts) {
+  return opts.map((opt) => parseUIOpt(opt).value);
+}
+
+// src/ts/core/controllable.ts
+var Controllable = class {
+  // for easy reach, better devx
+  constructor(ctlr, config, state) {
+    __publicField(this, "ac", new AbortController());
+    __publicField(this, "signal", this.ac.signal);
+    __publicField(this, "ctlr");
+    __publicField(this, "media");
+    __publicField(this, "state");
+    // for reactivity needs of those who pass it up
+    __publicField(this, "config");
+    (0, import_utils7.guardAllMethods)(this, ctlr.guard);
+    this.signal = AbortSignal.any([this.signal, ctlr.signal]);
+    this.ctlr = ctlr;
+    this.media = ctlr.media;
+    this.state = (0, import_utils3.isObj)(state) ? (0, import_sia_reactor3.reactive)(state) : state;
+    this.config = config;
+  }
+  // may be a reactive obj node or the obj itself
+  get settings() {
+    return this.ctlr.settings;
+  }
+  setup() {
+    return this.onSetup(), this;
+  }
+  destroy() {
+    !this.signal.aborted && this.ac.abort(`[TMG Controllable] Instance is being destroyed`);
+    this.onDestroy(), this.state?.destroy?.(), this.config !== this.media && isFunc(this.config?.destroy) && this.config?.destroy?.();
+    (0, import_utils12.nuke)(this);
+  }
+  onDestroy() {
+  }
+};
+
+// src/ts/consts/config.ts
+var import_sia_reactor4 = require("sia-reactor");
+
+// src/ts/consts/actions.ts
+var ACTIONS_BUILD = {
+  // --- Keyboard-only actions (no default voice triggers; path router covers voice) ---
+  playPause: { label: "Play / Pause" },
+  skipFwd: { label: "Skip Forward", notify: "fwd" },
+  skipBwd: { label: "Skip Back", notify: "bwd" },
+  volumeUp: { label: "Volume Up", notify: "volumeup" },
+  volumeDown: { label: "Volume Down", notify: "volumedown" },
+  brightnessUp: { label: "Brightness Up", notify: "brightnessup" },
+  brightnessDown: { label: "Brightness Down", notify: "brightnessdown" },
+  playbackRateUp: { label: "Playback Rate Up", notify: "playbackrateup" },
+  playbackRateDown: { label: "Playback Rate Down", notify: "playbackratedown" },
+  stepFwd: { label: "Step Forward", notify: "fwd" },
+  stepBwd: { label: "Step Back", notify: "bwd" },
+  prev: { label: "Previous", notify: "mediaprev" },
+  next: { label: "Next", notify: "medianext" },
+  captions: { label: "Captions", notify: "captions" },
+  captionsFontSizeUp: { label: "Captions: Font Size Up" },
+  captionsFontSizeDown: { label: "Captions: Font Size Down" },
+  captionsFontFamily: { label: "Captions: Font Family" },
+  captionsFontWeight: { label: "Captions: Font Weight" },
+  captionsFontVariant: { label: "Captions: Font Variant" },
+  captionsFontOpacity: { label: "Captions: Font Opacity" },
+  captionsBackgroundOpacity: { label: "Captions: Background Opacity" },
+  captionsWindowOpacity: { label: "Captions: Window Opacity" },
+  captionsCharacterEdgeStyle: { label: "Captions: Character Edge" },
+  captionsTextAlignment: { label: "Captions: Text Alignment" },
+  objectFit: { label: "Object Fit" },
+  capture: { label: "Capture Frame", notify: "capture" },
+  cast: { label: "Cast", notify: "cast" },
+  airplay: { label: "AirPlay", notify: "airplay" },
+  dark: { label: "Dark Mode" },
+  settings: { label: "Settings", zen: true },
+  // --- Logic-expressible actions (logic[] + keyboard, no default voice triggers) ---
+  mute: { label: "Mute", notify: "volumemuted" },
+  fullscreen: { label: "Fullscreen", notify: "fullscreen", logic: [{ path: "media.intent.fullscreen", op: "toggle" }] },
+  theater: { label: "Theater", notify: "theater", logic: [{ path: "media.intent.theater", op: "toggle" }] },
+  pictureInPicture: { label: "Picture in Picture", notify: "pictureinpicture", logic: [{ path: "media.intent.pictureInPicture", op: "toggle" }] },
+  timeFormat: { label: "Time Format" },
+  timeMode: { label: "Time Mode" },
+  // --- Compound (voice|time)-only actions (voice engine meta, path router can't reach these) ---
+  timeTravelUndo: { label: "Time Travel: Undo", zen: true },
+  timeTravelRedo: { label: "Time Travel: Redo", zen: true },
+  voiceQuit: { label: "Voice: Quit", zen: true },
+  voiceSleep: { label: "Voice: Sleep", zen: true },
+  voiceSubmit: { label: "Voice: Submit", zen: true },
+  voiceHistoryFirst: { label: "Voice: Go to Root", zen: true },
+  voiceHistoryPrev: { label: "Voice: Go Back", zen: true },
+  voiceHistoryNext: { label: "Voice: Go Forward", zen: true },
+  voiceHistoryLast: { label: "Voice: Go to Leaf", zen: true },
+  voiceHistoryClear: { label: "Voice: Clear History", zen: true },
+  voiceToggleOn: { label: "Voice: Toggle On", zen: true },
+  voiceToggleOff: { label: "Voice: Toggle Off", zen: true }
+};
+
+// src/ts/consts/config.ts
+var CONFIG_BUILD = {
+  mediaType: "video",
+  mediaPlayer: "TMG",
+  media: { intent: { playsInline: true, textVisible: true, brightness: 100 } },
+  actions: Object.fromEntries(Object.entries(ACTIONS_BUILD).map(([k, v]) => [k, { id: k, ...v }])),
+  logicPathBlacklist: ["media.state", "media.status", "media.tech", "media.features", "media.type", "media.element", "media.pseudoElement", "media.container", "media.pseudoContainer"],
+  settings: {
+    // techOrder: [
+    //   "youtube", // 1. Black-box (Regex must catch these URLs instantly)
+    //   "vimeo", // 2. Black-box (Regex must catch these URLs instantly)
+    //   "shaka", // 3. THE APEX PREDATOR (Catches .mpd and .m3u8 first)
+    //   "hls", // 4. Fallback (Catches .m3u8 ONLY if Shaka is disabled/fails)
+    //   "dash", // 5. Fallback (Catches .mpd ONLY if Shaka is disabled/fails)
+    //   "html5", // 6. The Native Floor (Catches raw .mp4, .webm, .mp3, etc.)
+    // ],
+  },
+  debug: true,
+  devMode: import_sia_reactor4.CTX.isDevEnv,
+  noPlugList: []
+  // dev: "settings.persist"
+};
+
+// src/ts/core/registries.ts
+var import_utils14 = require("sia-reactor/utils");
+var BaseRegistry = class {
+  constructor() {
+    __publicField(this, "items", []);
+  }
+  register(name, value, config) {
+    return this.unregister(name), this.items.push({ name, value, config }), this;
+  }
+  unregister(name, idx = this.items.findIndex((i) => i.name === name)) {
+    return idx !== -1 && this.items.splice(idx, 1), this;
+  }
+  get(name) {
+    return this.items.find((i) => i.name === name)?.value;
+  }
+  getAll(order) {
+    if (!order) return this.items.map((i) => i.value);
+    return this.items.sort((a, b, ai = order.indexOf(a.name), bi = order.indexOf(b.name)) => ai === -1 && bi === -1 ? 0 : ai === -1 ? 1 : bi === -1 ? -1 : ai - bi).map((i) => i.value);
+  }
+  clear() {
+    return this.items = [], this;
+  }
+};
+var OrderedRegistry = class extends BaseRegistry {
+  registerFirst(name, value, config) {
+    return this.unregister(name), this.items.unshift({ name, value, config }), this;
+  }
+  registerBefore(key, name, value, config) {
+    this.unregister(name);
+    const idx = this.items.findIndex((i) => i.name === key);
+    return idx !== -1 ? (this.items.splice(idx, 0, { name, value, config }), this) : this.register(name, value, config);
+  }
+  registerAfter(key, name, value, config) {
+    this.unregister(name);
+    const idx = this.items.findIndex((i) => i.name === key);
+    return idx !== -1 ? (this.items.splice(idx + 1, 0, { name, value, config }), this) : this.register(name, value, config);
+  }
+};
+var _TechRegistry = class _TechRegistry extends OrderedRegistry {
+  static get(name) {
+    return this.instance.get(name);
+  }
+  static register(Tech) {
+    this.instance.register(Tech.techName, Tech);
+  }
+  static unregister(name) {
+    this.instance.unregister(name);
+  }
+  static registerBefore(key, Tech) {
+    this.instance.registerBefore(key, Tech.techName, Tech);
+  }
+  static registerAfter(key, Tech) {
+    this.instance.registerAfter(key, Tech.techName, Tech);
+  }
+  static pick(src, techOrder) {
+    return this.instance.getAll(techOrder).find((Tech) => Tech.canPlaySource(src)) || null;
+  }
+};
+__publicField(_TechRegistry, "instance", new _TechRegistry());
+var TechRegistry = _TechRegistry;
+var _PlugRegistry = class _PlugRegistry extends OrderedRegistry {
+  static get(name) {
+    return this.instance.get(name);
+  }
+  static register(Plug, editBuild = Plug.BUILD !== void 0) {
+    this.instance.register(Plug.fullName, Plug);
+    editBuild && (0, import_utils14.setPath)(CONFIG_BUILD, Plug.fullName, Plug.BUILD);
+  }
+  static unregister(fullName, editBuild = true) {
+    this.instance.unregister(fullName);
+    editBuild && (0, import_utils14.deletePath)(CONFIG_BUILD, fullName);
+  }
+  static registerBefore(key, Plug) {
+    this.instance.registerBefore(key, Plug.fullName, Plug);
+  }
+  static registerAfter(key, Plug) {
+    this.instance.registerAfter(key, Plug.fullName, Plug);
+  }
+  static getOrdered() {
+    return this.instance.getAll();
+  }
+};
+__publicField(_PlugRegistry, "instance", new _PlugRegistry());
+var PlugRegistry = _PlugRegistry;
+var _PinRegistry = class _PinRegistry extends BaseRegistry {
+  static get(name) {
+    return this.instance.get(name);
+  }
+  static register(Pin, editBuild = Pin.BUILD !== void 0) {
+    this.instance.register(Pin.fullName, Pin);
+    editBuild && (0, import_utils14.setPath)(CONFIG_BUILD, Pin.Plug.fullName + "." + Pin.pinName, Pin.BUILD);
+  }
+  static unregister(fullName, editBuild = true) {
+    this.instance.unregister(fullName);
+    editBuild && (0, import_utils14.deletePath)(fullName.slice(0, fullName.indexOf(".")) in CONFIG_BUILD ? CONFIG_BUILD : CONFIG_BUILD.settings, fullName);
+  }
+};
+__publicField(_PinRegistry, "instance", new _PinRegistry());
+var PinRegistry = _PinRegistry;
+var _MenuRegistry = class _MenuRegistry extends BaseRegistry {
+  static get(name) {
+    return this.instance.get(name);
+  }
+  static register(name, factory) {
+    this.instance.register(name, factory);
+  }
+  static unregister(name) {
+    this.instance.unregister(name);
+  }
+};
+__publicField(_MenuRegistry, "instance", new _MenuRegistry());
+var MenuRegistry = _MenuRegistry;
+var _ComponentRegistry = class _ComponentRegistry extends BaseRegistry {
+  static get(name) {
+    return this.instance.get(name);
+  }
+  static register(Comp) {
+    this.instance.register(Comp.componentName, Comp);
+  }
+  static unregister(name) {
+    this.instance.unregister(name);
+  }
+  static init(name, ctlr, config = {}) {
+    const Comp = this.instance.get(name);
+    if (!Comp) return null;
+    const instance = new Comp(ctlr, config);
+    return instance.create(), instance.setup();
+  }
+  static getAll() {
+    return this.instance.getAll();
+  }
+};
+__publicField(_ComponentRegistry, "instance", new _ComponentRegistry());
+var ComponentRegistry = _ComponentRegistry;
+var _IconRegistry = class _IconRegistry extends BaseRegistry {
+  static get(name, raw = false, token = /\btmg-media-[^\s"']+\s*/g) {
+    return (raw ? this.instance.get(name)?.replace(token, "") : this.instance.get(name)) || `<svg></svg>`;
+  }
+  static register(name, svg) {
+    this.instance.register(name, svg);
+  }
+  static unregister(name) {
+    this.instance.unregister(name);
+  }
+  // Bulk register a map of icons { play: "<svg...>", pause: "<svg...>" }
+  static registerAll(icons) {
+    for (const k of Object.keys(icons)) this.instance.register(k, icons[k]);
+  }
+};
+__publicField(_IconRegistry, "instance", new _IconRegistry());
+var IconRegistry = _IconRegistry;
+
+// src/ts/plugs/settings/settingsView/menu/widgets/base.ts
+var BaseWidget = class extends Controllable {
+  constructor(item, ctlr) {
+    super(ctlr, void 0);
+    __publicField(this, "item");
+    __publicField(this, "element");
+    this.item = item;
+  }
+  onSetup() {
+    this.item.mediaPaths?.forEach((path) => this.media.on(path, this.syncUI, { signal: this.signal }));
+    this.item.configPaths?.forEach((path) => this.ctlr.config.on(path, this.syncUI, { signal: this.signal }));
+    this.item.onWire?.(this.syncUI, this.signal);
+  }
+  onDestroy() {
+  }
+};
+var _WidgetRegistry = class _WidgetRegistry extends BaseRegistry {
+  static register(type, Ctor) {
+    this.instance.register(type, Ctor);
+  }
+  static create(item, ctlr) {
+    const Ctor = this.instance.get(item.widget);
+    if (!Ctor) return null;
+    const widget = new Ctor(item, ctlr);
+    return widget.setup(), widget;
+  }
+};
+__publicField(_WidgetRegistry, "instance", new _WidgetRegistry());
+var WidgetRegistry = _WidgetRegistry;
+
+// src/ts/utils/dom.ts
+var import_sia_reactor7 = require("sia-reactor");
+
+// ../t007-tools/packages/utils/dist/hooks/vanilla.js
+var import_sia_reactor5 = require("sia-reactor");
+var import_sia_reactor6 = require("sia-reactor");
+function initVScrollerator({ baseSpeed = 3, maxSpeed = 10, stepDelay = 2e3, baseRate = 16, lineHeight = 80, margin = 80, car = window } = import_sia_reactor6.NIL) {
+  let linesPerSec = baseSpeed, accelId = null, lastTime = null;
+  const drive = (clientY, brake = false, offsetY = 0) => {
+    if (car !== window) clientY -= offsetY;
+    const now = performance.now(), speed = linesPerSec * lineHeight * ((lastTime ? now - lastTime : baseRate) / 1e3);
+    if (!brake && (clientY < margin || clientY > (car.innerHeight ?? car.offsetHeight) - margin)) {
+      accelId === null ? accelId = setTimeout(() => linesPerSec += 1, stepDelay) : linesPerSec > baseSpeed && (linesPerSec = Math.min(linesPerSec + 1, maxSpeed));
+      car.scrollBy?.(0, clientY < margin ? -speed : speed);
+    } else reset();
+    return lastTime = !brake ? now : null, speed;
+  };
+  const reset = () => (accelId && clearTimeout(accelId), accelId = null, linesPerSec = baseSpeed, lastTime = null);
+  return { drive, reset };
+}
+
+// src/ts/utils/dom.ts
+var win = "undefined" !== typeof window ? window : void 0;
+function getElSiblingAt(p, dir, els, pos = "after") {
+  return els.length && Array.prototype.reduce.call(
+    els,
+    ((closest, child) => {
+      const { top: cT, left: cL, width: cW, height: cH } = child.getBoundingClientRect(), offset = p - (dir === "y" ? cT : cL) - (dir === "y" ? cH : cW) / 2, condition = pos === "after" ? offset < 0 && offset > closest.offset : pos === "before" ? offset > 0 && offset < closest.offset : pos === "at" ? Math.abs(offset) <= (dir === "y" ? cH : cW) / 2 && Math.abs(offset) < Math.abs(closest.offset) : false;
+      return condition ? { offset, element: child } : closest;
+    }),
+    { offset: pos === "after" ? -Infinity : Infinity, element: void 0 }
+  ).element;
+}
+var intersectionObserver = win ? new IntersectionObserver(
+  (entries) => {
+    for (const entry of entries) if (entry.target._intersectCbs) for (const cb of entry.target._intersectCbs) cb(entry);
+  },
+  { root: null, rootMargin: "0px", threshold: 0.3 }
+) : null;
+var resizeObserver = win ? new ResizeObserver((entries) => {
+  for (const entry of entries) if (entry.target._resizeCbs) for (const cb of entry.target._resizeCbs) cb(entry);
+}) : null;
+var mutationObserver = win ? new MutationObserver((mutations) => {
+  const target = mutations[0].target;
+  if (target._mutationCbs) for (const cb of target._mutationCbs) cb(mutations);
+}) : null;
+
+// src/ts/plugs/settings/settingsView/menu/widgets/range.ts
+var import_utils16 = require("sia-reactor/utils");
+var RangeWidget = class extends BaseWidget {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "valueLabel");
+    __publicField(this, "comp");
+    __publicField(this, "lastRange");
+  }
+  render() {
+    const comp = ComponentRegistry.init("rangeinput", this.ctlr, this.getConfig());
+    this.element = (0, import_utils.createEl)("div", { className: "tmg-media-smenu-range-wrapper" });
+    this.valueLabel = (0, import_utils.createEl)("span", { className: "tmg-media-smenu-range-value" });
+    if (comp) {
+      comp.config.on("value", ({ value }) => (this.item.onChange?.(value), this.valueLabel.textContent = this.item.getValue() || ""));
+      this.element.append(this.valueLabel, (this.comp = comp).element);
+    }
+    return this.syncUI(), this.element;
+  }
+  syncUI() {
+    this.valueLabel.textContent = this.item.getValue() || "";
+    if (!this.comp) return;
+    const cfg = this.item.getRange();
+    if (this.lastRange.min !== cfg.min || this.lastRange.max !== cfg.max) (0, import_utils16.fanout)(this.comp.config, this.getConfig(cfg));
+    else this.comp.config.value = this.getRangeValue();
+  }
+  getRangeValue() {
+    const v = parseFloat(this.item.getValue() || "");
+    return isNaN(v) ? this.item.getRange().min : v;
+  }
+  getConfig(range = this.item.getRange()) {
+    const cfg = this.lastRange = range, divs = (cfg.divs?.map((value) => ({ value })) ?? (cfg.options ? parseUIOpts(cfg.options).map((value) => ({ value })) : [])) || [], marks = [];
+    if (cfg.step && cfg.step > cfg.max * 0.01) for (let v = cfg.min; v <= cfg.max; v = parseFloat((v + cfg.step).toFixed(5))) marks.push({ start: v, type: "step" });
+    return { ...cfg, value: this.getRangeValue(), divs, marks };
+  }
+};
+WidgetRegistry.register("range", RangeWidget);
+
+// src/ts/plugs/settings/settingsView/menu/widgets/toggle.ts
+var ToggleWidget = class extends BaseWidget {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "track");
+    __publicField(this, "input");
+  }
+  render() {
+    this.track = (0, import_utils.createEl)("span", { className: "tmg-media-smenu-toggle-track" });
+    const thumb = (0, import_utils.createEl)("span", { className: "tmg-media-smenu-toggle-thumb" });
+    this.input = (0, import_utils.createEl)("input", { type: "checkbox", className: "t007-input tmg-media-smenu-toggle-input" });
+    this.element = (0, import_utils.createEl)("label", { className: "tmg-media-smenu-toggle-wrapper", role: "switch" });
+    this.track.append(thumb);
+    this.element.append(this.input, this.track);
+    this.input.addEventListener("change", () => (this.item.onChange?.(this.input.checked), this.element.ariaChecked = String(this.input.checked), this.syncTrack(this.input.checked)));
+    return this.syncUI(), this.element;
+  }
+  syncUI() {
+    this.input.checked = this.item.getValue() === "true" || this.item.getValue() === "On";
+    this.element.ariaChecked = String(this.input.checked);
+    this.syncTrack(this.input.checked);
+  }
+  syncTrack(on) {
+    this.track.classList.toggle("tmg-media-smenu-toggle-on", on);
+  }
+};
+WidgetRegistry.register("toggle", ToggleWidget);
+
+// src/ts/plugs/settings/settingsView/menu/widgets/select.ts
+var SelectWidget = class extends BaseWidget {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "renderRows");
+    __publicField(this, "currentValue", "");
+  }
+  render() {
+    this.element = (0, import_utils.createEl)("ul", { className: "tmg-media-smenu-select-list", role: "listbox" });
+    this.renderRows = createListRenderer({
+      container: this.element,
+      getKey: (opt) => opt.value,
+      createNode: (opt) => {
+        const li = (0, import_utils.createEl)("li", { className: "tmg-media-smenu-select-option", role: "option", tabIndex: 0, title: opt.title }, { optVal: opt.value }), check = (0, import_utils.createEl)("span", { className: "tmg-media-smenu-select-check", ariaHidden: "true" }), label = (0, import_utils.createEl)("span", { className: "tmg-media-smenu-select-label", textContent: opt.display });
+        li.append(check, label), opt.infoText && li.append((0, import_utils.createEl)("span", { className: "tmg-media-smenu-select-info", textContent: opt.infoText }));
+        li.addEventListener("click", () => {
+          const isMulti = this.item.getMultiple?.();
+          if (!isMulti && (label.textContent === this.currentValue || li.dataset.optVal === this.currentValue)) return;
+          this.item.onChange?.(opt.value);
+          this.currentValue = isMulti ? this.item.getValue() || [] : label.textContent;
+          this.syncActive();
+        });
+        return li;
+      },
+      updateNode: (node, opt) => {
+        node.querySelector(".tmg-media-smenu-select-label").textContent = opt.display;
+        opt.title ? node.title = opt.title : node.removeAttribute("title");
+        const infoNode = node.querySelector(".tmg-media-smenu-select-info");
+        opt.infoText ? infoNode ? infoNode.textContent = opt.infoText : node.append((0, import_utils.createEl)("span", { className: "tmg-media-smenu-select-info", textContent: opt.infoText })) : infoNode?.remove();
+        node.dataset.optVal = opt.value;
+        const isMulti = this.item.getMultiple?.(), vals = isMulti ? Array.isArray(this.currentValue) ? this.currentValue : [this.currentValue] : [this.currentValue];
+        node.ariaSelected = String(vals.includes(opt.display) || vals.includes(node.dataset.optVal));
+      }
+    });
+    return this.syncUI(), this.element;
+  }
+  syncUI() {
+    this.currentValue = this.item.getValue() || (this.item.getMultiple?.() ? [] : "");
+    this.renderRows((this.item.getOptions?.() ?? []).map((o) => parseUIOpt(o)));
+    this.syncActive();
+  }
+  syncActive() {
+    const isMulti = this.item.getMultiple?.(), vals = isMulti ? Array.isArray(this.currentValue) ? this.currentValue : [this.currentValue] : [this.currentValue];
+    for (const li of this.element.querySelectorAll("[data-opt-val]")) {
+      const active = vals.includes(li.querySelector(".tmg-media-smenu-select-label").textContent) || vals.includes(li.dataset.optVal);
+      li.classList.toggle("tmg-media-smenu-option-active", active), li.ariaSelected = String(active);
+    }
+  }
+};
+WidgetRegistry.register("select", SelectWidget);
+
+// src/ts/plugs/settings/settingsView/menu/widgets/color.ts
+var ColorWidget = class extends BaseWidget {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "renderSwatches");
+    __publicField(this, "freeInput");
+    __publicField(this, "currentValue");
+  }
+  render() {
+    this.element = (0, import_utils.createEl)("div", { className: "tmg-media-smenu-color-wrapper" });
+    const grid = (0, import_utils.createEl)("div", { className: "tmg-media-smenu-color-grid", role: "listbox" });
+    this.renderSwatches = createListRenderer({
+      container: grid,
+      getKey: (opt) => opt.value,
+      createNode: (opt) => {
+        const btn = (0, import_utils.createEl)("button", { type: "button", className: "tmg-media-smenu-color-swatch", title: opt.display, ariaLabel: opt.display }, { colorVal: opt.value });
+        btn.style.setProperty("--swatch", opt.value);
+        btn.addEventListener("click", () => {
+          this.item.onChange?.(opt.value);
+          this.currentValue = btn.ariaLabel ?? btn.dataset.colorVal;
+          this.freeInput.value = btn.dataset.colorVal;
+          this.syncActive();
+        });
+        return btn;
+      },
+      updateNode: (node, opt) => {
+        node.style.setProperty("--swatch", opt.value);
+        node.dataset.colorVal = opt.value;
+        node.ariaLabel = opt.display;
+        node.ariaSelected = String(opt.display === this.currentValue || node.dataset.colorVal === this.currentValue);
+        node.classList.toggle("tmg-media-smenu-color-active", opt.display === this.currentValue || node.dataset.colorVal === this.currentValue);
+      }
+    });
+    const field = t007.field({ type: "color", value: this.currentValue, className: "tmg-media-smenu-color-free" });
+    (this.freeInput = field.inputEl).addEventListener("input", () => {
+      this.item.onChange?.(this.freeInput.value);
+      const activeBtn = this.element.querySelector(`[data-color-val="${this.freeInput.value}"]`);
+      this.currentValue = activeBtn?.ariaLabel ?? this.freeInput.value;
+      this.syncActive();
+    });
+    return this.element.append(grid, field), this.syncUI(), this.element;
+  }
+  syncUI() {
+    this.currentValue = this.item.getValue() || "";
+    const activeBtn = this.element.querySelector(`:is([aria-label="${this.currentValue}"], [data-color-val="${this.currentValue}"])`);
+    if (this.freeInput) this.freeInput.value = activeBtn?.dataset.colorVal ?? this.currentValue;
+    this.renderSwatches((this.item.getOptions?.() ?? []).map((o) => parseUIOpt(o)));
+    this.syncActive();
+  }
+  syncActive() {
+    for (const btn of this.element.querySelectorAll("[data-color-val]")) {
+      const active = btn.ariaLabel === this.currentValue || btn.dataset.colorVal === this.currentValue;
+      btn.classList.toggle("tmg-media-smenu-color-active", active);
+      btn.ariaSelected = String(active);
+    }
+  }
+};
+WidgetRegistry.register("color", ColorWidget);
+
+// src/ts/plugs/settings/settingsView/menu/widgets/group.ts
+var GroupWidget = class extends BaseWidget {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "renderRows");
+    __publicField(this, "onSubItemClick");
+  }
+  render() {
+    this.element = (0, import_utils.createEl)("ul", { className: "tmg-media-smenu-group-list" });
+    this.renderRows = createListRenderer({
+      container: this.element,
+      getKey: (sub) => sub.id,
+      createNode: (item) => this.buildRow(item),
+      destroyNode: (node) => (node._ac?.abort(), node.widget?.destroy(), node.remove())
+    });
+    return this.syncUI(), this.element;
+  }
+  syncUI() {
+    const active = (this.item.items ?? []).filter((sub) => {
+      if (isFunc(sub.hidden) ? sub.hidden() : sub.hidden) return false;
+      return !sub.feature || Boolean(this.media.features[sub.feature]);
+    });
+    this.renderRows(active);
+    active.forEach((sub) => {
+      const li = this.element.querySelector(`.tmg-media-smenu-group-row[data-sub-id="${sub.id}"]`);
+      if (li) {
+        const valNode = li.querySelector(".tmg-media-smenu-group-value");
+        valNode ? valNode.textContent = sub.getValue?.() || "" : li.widget?.syncUI();
+      }
+    });
+  }
+  buildRow(sub) {
+    const isWidget = sub.widget === "toggle" || sub.inline, disabled = sub.getDisabled?.() ?? (["select", "drag-select"].includes(sub.widget) && sub.getOptions?.()?.length === 0), li = (0, import_utils.createEl)("li", { className: "tmg-media-smenu-group-row" + (disabled ? " tmg-media-control-disabled" : ""), tabIndex: 0, inert: disabled || void 0 }, { subId: sub.id }), lbl = (0, import_utils.createEl)("span", { className: "tmg-media-smenu-group-label", textContent: sub.label });
+    if (sub.title) li.title = isFunc(sub.title) ? sub.title() : sub.title;
+    if (sub.icon) {
+      const iconSvg = IconRegistry.get(sub.icon, true);
+      if (iconSvg) li.append((0, import_utils.createEl)("span", { className: "tmg-media-smenu-group-icon", innerHTML: iconSvg }));
+    }
+    if (isWidget) {
+      const widget = WidgetRegistry.create(sub, this.ctlr);
+      if (widget) {
+        sub.inline && sub.widget !== "toggle" ? (li.removeAttribute("tabindex"), li.classList.replace("tmg-media-smenu-group-row", "tmg-media-smenu-inline-wrapper"), li.append(widget.render()), sub.widget === "range" && li.classList.add("tmg-media-smenu-row-inline-block")) : (li.append(lbl, widget.render()), li.classList.add("tmg-media-smenu-row-inline"));
+        li.widget = widget;
+        li.addEventListener("click", (e) => !disabled && (e.target === li || e.target === lbl) && li.querySelector("input, button")?.click());
+      } else li.append(lbl);
+    } else {
+      const val = (0, import_utils.createEl)("span", { className: "tmg-media-smenu-group-value", textContent: sub.getValue() || "" });
+      sub.widget !== "button" ? li.append(lbl, val, (0, import_utils.createEl)("span", { className: "tmg-media-smenu-group-arrow", ariaHidden: "true", innerHTML: "&#8250;" })) : li.append(lbl);
+      li.addEventListener("click", () => !disabled && (sub.widget === "button" ? sub.onChange?.(null) : this.onSubItemClick?.(sub)));
+      if (sub.mediaPaths || sub.configPaths || sub.onWire) {
+        const ac = new AbortController(), syncUI = () => {
+          const valNode = li.querySelector(".tmg-media-smenu-group-value");
+          valNode ? valNode.textContent = sub.getValue() || "" : li.widget?.syncUI();
+          const _d = sub.getDisabled?.() ?? (["select", "drag-select"].includes(sub.widget) && sub.getOptions?.()?.length === 0);
+          li.inert = !!_d, li.classList.toggle("tmg-media-control-disabled", !!_d);
+        };
+        sub.mediaPaths?.forEach((path) => this.media.on(path, syncUI, { signal: ac.signal }));
+        sub.configPaths?.forEach((path) => this.ctlr.config.on(path, syncUI, { signal: ac.signal }));
+        sub.onWire?.(syncUI, ac.signal);
+        li._ac = ac;
+      }
+    }
+    return li;
+  }
+};
+WidgetRegistry.register("group", GroupWidget);
+
+// src/ts/plugs/settings/settingsView/menu/widgets/input.ts
+var import_utils20 = require("sia-reactor/utils");
+var InputWidget = class extends BaseWidget {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "form");
+  }
+  render() {
+    this.form = (0, import_utils.createEl)("form", { className: "t007-input-form", noValidate: true });
+    (this.item.inputs || [{ ...this.item, label: this.item.label || "Enter text" }]).forEach((inp) => this.form.append(t007.field({ required: !this.item.inputs, name: inp.label, ...inp, value: String(isFunc(inp.value) ? inp.value() : inp.value || "") })));
+    this.form.append((0, import_utils.createEl)("button", { className: "tmg-media-smenu-input-btn", type: "submit", textContent: "Submit" }));
+    this.form.onSubmit = () => {
+      const val = this.item.inputs ? Array.from(this.form.elements).filter((el) => el.name).reduce((acc, el) => (acc[el.name] = el.type === "number" ? el.value === "" ? void 0 : Number(el.value) : el.value, acc), {}) : this.form.elements[0].type === "number" ? this.form.elements[0].value === "" ? void 0 : Number(this.form.elements[0].value) : this.form.elements[0].value;
+      (0, import_utils20.setTimeout)(() => (this.item.onChange?.(val), this.form.reset(), this.ctlr.plug("settings.settingsView")?.menu.goBack()), 0, this.signal);
+    };
+    t007.handleFormValidation?.(this.form);
+    this.element = (0, import_utils.createEl)("div", { className: "tmg-media-smenu-input-wrapper" });
+    return this.element.append(this.form), this.syncUI(), this.element;
+  }
+  syncUI() {
+    if (this.item.inputs) {
+      this.item.inputs.forEach((inp) => {
+        const input = this.form.querySelector(`[name="${inp.label}"]`);
+        if (input && (0, import_utils2.getActiveEl)(document) !== input) {
+          const val = isFunc(inp.value) ? inp.value() : inp.value;
+          if (val != null) input.value = String(val);
+        }
+      });
+    } else {
+      const input = this.form.elements[0];
+      if (this.item.getValue && (0, import_utils2.getActiveEl)(document) !== input) input.value = String(this.item.getValue() || "");
+    }
+  }
+};
+WidgetRegistry.register("input", InputWidget);
+
+// src/ts/plugs/settings/settingsView/menu/widgets/dragselect.ts
+var DragSelectWidget = class extends BaseWidget {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "renderRows");
+    __publicField(this, "currentValue", "");
+  }
+  render() {
+    const ctlr = this.ctlr, el = this.element = (0, import_utils.createEl)("ul", { className: "tmg-media-smenu-select-list tmg-media-smenu-drag-list", role: "listbox" }), item = this.item;
+    this.renderRows = createListRenderer({
+      container: el,
+      getKey: (opt) => opt.value,
+      createNode: (opt) => {
+        const li = (0, import_utils.createEl)("li", { className: "tmg-media-smenu-select-option", role: "option", tabIndex: 0, title: opt.title }, { optVal: opt.value }), dragHandle = this.item.onReorder ? (0, import_utils.createEl)("span", { className: "tmg-media-smenu-playlist-drag", innerHTML: IconRegistry.get("dragindicator", true) || "\u2630" }) : null, label = (0, import_utils.createEl)("span", { className: "tmg-media-smenu-select-label", textContent: opt.display }), editBtn = this.item.onEdit ? (0, import_utils.createEl)("button", { className: "tmg-media-smenu-sub-action-btn", innerHTML: IconRegistry.get("edit", true) || "\u270E", type: "button", title: "Edit" }, {}, { flexShrink: "0" }) : null, deleteBtn = this.item.onDelete ? (0, import_utils.createEl)("button", { className: "tmg-media-smenu-delete-btn", innerHTML: IconRegistry.get("delete", true) || "\u2715", type: "button", title: "Delete" }, {}, { flexShrink: "0" }) : null;
+        dragHandle ? li.append(dragHandle, label) : li.append(label), opt.infoText && li.append((0, import_utils.createEl)("span", { className: "tmg-media-smenu-select-info", textContent: opt.infoText }));
+        if (editBtn) {
+          editBtn.onclick = (e) => {
+            e.stopPropagation();
+            const i = (this.item.getOptions?.() ?? []).findIndex((o) => parseUIOpt(o).value === opt.value);
+            if (i !== -1) this.item.onEdit?.(i);
+          };
+          li.append(editBtn);
+        }
+        if (deleteBtn) {
+          deleteBtn.onclick = (e) => {
+            e.stopPropagation();
+            const i = (this.item.getOptions?.() ?? []).findIndex((o) => parseUIOpt(o).value === opt.value);
+            if (i !== -1) this.item.onDelete?.(i);
+          };
+          li.append(deleteBtn);
+        }
+        if (dragHandle) {
+          dragHandle.onpointerdown = (e) => {
+            if (e.button !== 0 || li.classList.contains("tmg-media-smenu-dragging")) return;
+            e.preventDefault(), navigator.vibrate?.([50]);
+            const scrollEl = el.closest(".tmg-media-smenu-panel-content") || el.parentElement, initialOffsetY = el.getBoundingClientRect().top, initialScrollY = scrollEl.scrollTop, placeholder = (0, import_utils.createEl)("li", { className: "tmg-media-smenu-drag-placeholder" }, {}, { cssText: `height:${li.offsetHeight}px;width:${li.offsetWidth}px;` }), scrollerator = initVScrollerator({ margin: 60, car: scrollEl });
+            li.parentElement.insertBefore(placeholder, li.nextElementSibling), li.classList.add("tmg-media-smenu-dragging"), li.style.top = `${(0, import_utils4.clamp)(0, e.clientY - initialOffsetY - li.offsetHeight / 2, el.offsetHeight - li.offsetHeight)}px`;
+            ["pointermove", "pointerup", "pointercancel"].forEach((evt, i) => el.ownerDocument.addEventListener(evt, !i ? onPointerMove : onPointerUp, { passive: false }));
+            function onPointerMove(evt) {
+              const ev = evt;
+              ev.preventDefault();
+              ctlr.RAFLoop("listItemDragging", () => {
+                const liTop = (0, import_utils4.clamp)(0, scrollEl.scrollTop - initialScrollY + ev.clientY - initialOffsetY - li.offsetHeight / 2, el.offsetHeight - li.offsetHeight), afterLine = getElSiblingAt(ev.clientY, "y", Array.from(el.querySelectorAll(".tmg-media-smenu-select-option:not(.tmg-media-smenu-dragging)")));
+                li.style.top = `${liTop}px`, scrollerator.drive(ev.clientY, !(liTop > 0 && liTop < el.offsetHeight - li.offsetHeight), scrollEl.getBoundingClientRect().top);
+                afterLine ? el.insertBefore(placeholder, afterLine) : el.append(placeholder);
+              }, this.signal);
+            }
+            function onPointerUp() {
+              navigator.vibrate?.([50]), ctlr.cancelRAFLoop("listItemDragging"), scrollerator.reset();
+              const newIdx = Array.from(el.querySelectorAll(".tmg-media-smenu-select-option")).indexOf(li), oldIdx = (item.getOptions?.() ?? []).findIndex((o) => parseUIOpt(o).value === opt.value);
+              li.classList.remove("tmg-media-smenu-dragging"), li.style.top = "", placeholder.parentElement?.replaceChild(li, placeholder);
+              newIdx !== -1 && oldIdx !== -1 && newIdx !== oldIdx && item.onReorder?.(oldIdx, newIdx);
+              ["pointermove", "pointerup", "pointercancel"].forEach((evt, i) => el.ownerDocument.removeEventListener(evt, !i ? onPointerMove : onPointerUp));
+            }
+          };
+        }
+        li.onclick = (e) => {
+          if (!this.item.onChange) return;
+          if (!li.classList.contains("tmg-media-smenu-dragging") && (!dragHandle || !dragHandle.contains(e.target)) && label.textContent !== this.currentValue && li.dataset.optVal !== this.currentValue) {
+            this.item.onChange?.(opt.value);
+            this.currentValue = label.textContent;
+            this.syncActive();
+          }
+        };
+        return li;
+      },
+      updateNode: (node, opt) => {
+        if (node.classList.contains("tmg-media-smenu-dragging")) return;
+        node.querySelector(".tmg-media-smenu-select-label").textContent = opt.display;
+        opt.title ? node.title = opt.title : node.removeAttribute("title");
+        const infoNode = node.querySelector(".tmg-media-smenu-select-info");
+        opt.infoText ? infoNode ? infoNode.textContent = opt.infoText : node.append((0, import_utils.createEl)("span", { className: "tmg-media-smenu-select-info", textContent: opt.infoText })) : infoNode?.remove();
+        node.dataset.optVal = opt.value;
+        node.ariaSelected = String(opt.display === this.currentValue || node.dataset.optVal === this.currentValue);
+      }
+    });
+    return this.syncUI(), this.element;
+  }
+  syncUI() {
+    this.currentValue = this.item.getValue() || "";
+    this.renderRows((this.item.getOptions?.() ?? []).map(parseUIOpt));
+    this.syncActive();
+  }
+  syncActive() {
+    if (!this.item.onChange) return;
+    for (const li of this.element.querySelectorAll("[data-opt-val]")) {
+      const active = li.querySelector(".tmg-media-smenu-select-label").textContent === this.currentValue || li.dataset.optVal === this.currentValue;
+      li.classList.toggle("tmg-media-smenu-option-active", active);
+      li.ariaSelected = String(active);
+    }
+  }
+};
+WidgetRegistry.register("drag-select", DragSelectWidget);
+
+// src/ts/plugs/settings/settingsView/menu/widgets/limits.ts
+var import_utils22 = require("sia-reactor/utils");
+var LimitsWidget = class extends BaseWidget {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "form");
+  }
+  render() {
+    this.form = (0, import_utils.createEl)("form", { className: "t007-input-form tmg-media-limits-form", noValidate: true });
+    this.element = (0, import_utils.createEl)("div", { className: "tmg-media-smenu-limits-wrapper" });
+    (this.item.getLimits?.() || []).forEach((inp) => {
+      const row = (0, import_utils.createEl)("fieldset", { className: "tmg-media-limits-row" }), wrap = (0, import_utils.createEl)("div", { className: "tmg-media-limits-row-wrap" });
+      row.append((0, import_utils.createEl)("legend", { className: "tmg-media-limits-row-legend", textContent: inp.label }));
+      ["min", "max", "step", "start", "end"].forEach((key) => key in inp && wrap.append(t007.field({ type: "number", name: `${inp.name}_${key}`, label: key.toUpperCase(), required: false, className: "tmg-media-limits-field", step: "any" })));
+      row.append(wrap), this.form.append(row);
+    });
+    this.form.append((0, import_utils.createEl)("button", { className: "tmg-media-smenu-limits-btn", type: "submit", textContent: "Save Limits" }));
+    this.form.onSubmit = () => {
+      const val = Array.from(this.form.elements).filter((el) => el instanceof HTMLInputElement && !!el.name).reduce((acc, el) => (acc[el.name] = Number(el.value), acc), {});
+      (0, import_utils22.setTimeout)(() => (this.item.onChange?.(val), this.ctlr.plug("settings.settingsView")?.menu.goBack()), 0, this.signal);
+    };
+    return t007.handleFormValidation?.(this.form), this.element.append(this.form), this.syncUI(), this.element;
+  }
+  syncUI() {
+    (this.item.getLimits?.() || []).forEach((inp) => {
+      ["min", "max", "step", "start", "end"].forEach((key) => {
+        const input = key in inp ? this.form.querySelector(`input[name="${inp.name}_${key}"]`) : null;
+        if (input && (0, import_utils2.getActiveEl)(document) !== input) input.value = inp[key] != null ? String(inp[key]) : "";
+      });
+      const minEl = this.form.querySelector(`input[name="${inp.name}_min"]`), maxEl = this.form.querySelector(`input[name="${inp.name}_max"]`);
+      if (minEl && maxEl) minEl.max = maxEl.value, maxEl.min = minEl.value;
+      const startEl = this.form.querySelector(`input[name="${inp.name}_start"]`), endEl = this.form.querySelector(`input[name="${inp.name}_end"]`);
+      if (startEl && endEl) startEl.max = endEl.value, endEl.min = startEl.value;
+    });
+  }
+};
+WidgetRegistry.register("limits", LimitsWidget);
+
+// src/ts/plugs/settings/settingsView/menu/widgets/button.ts
+var ButtonWidget = class extends BaseWidget {
+  render() {
+    this.element = (0, import_utils.createEl)("ul", { className: "tmg-media-smenu-select-list", role: "listbox" });
+    const actions = this.item.actions || [{ getLabel: () => this.item.label, icon: this.item.icon, onClick: () => this.item.onChange?.(null) }];
+    for (const action of actions) {
+      const btn = (0, import_utils.createEl)("li", { className: "tmg-media-smenu-select-option", role: "option", ariaLabel: action.getLabel(), title: action.getLabel(), tabIndex: 0 });
+      btn.innerHTML = (action.icon ? `<span class="tmg-media-smenu-row-icon">${IconRegistry.get(action.icon, true) || ""}</span>` : "") + `<span class="tmg-media-smenu-row-label">${action.getLabel()}</span>`;
+      btn.addEventListener("click", (e) => (e.stopPropagation(), action.onClick()));
+      btn.addEventListener("keydown", (e) => e.key === "Enter" && (e.preventDefault(), action.onClick()));
+      this.element.append(btn);
+    }
+    return this.element;
+  }
+  syncUI() {
+  }
+};
+WidgetRegistry.register("button", ButtonWidget);
+//# sourceMappingURL=index.cjs.map