tmg-media-player 0.0.1

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

@@ -0,0 +1,1369 @@
+"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/index.ts
+var settingsView_exports = {};
+__export(settingsView_exports, {
+  SETTINGS_BUILD: () => SETTINGS_BUILD,
+  SettingsViewPlug: () => SettingsViewPlug
+});
+module.exports = __toCommonJS(settingsView_exports);
+var import_modules = require("sia-reactor/modules");
+
+// src/ts/core/controllable.ts
+var import_sia_reactor3 = require("sia-reactor");
+var import_utils13 = 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 INTERACTIVE_SELECTOR = ":is(button,[href],input:not([type='hidden']),select,textarea,details>summary,[contenteditable],iframe,audio[controls],video[controls],[tabindex]):not([disabled],[tabindex='-1'],[data-focus-guard],[inert],[inert] *)";
+var isInteractive = (target) => target instanceof HTMLElement && target.matches(INTERACTIVE_SELECTOR);
+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;
+}
+function parseCSSTime(time) {
+  return time?.endsWith?.("ms") ? parseFloat(time) : parseFloat(time) * 1e3;
+}
+var mockAsync = (timeout = 250) => new Promise((resolve) => (0, import_utils5.setTimeout)(resolve, timeout));
+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_utils10 = require("sia-reactor/utils");
+
+// 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_utils13.nuke)(this);
+  }
+  onDestroy() {
+  }
+};
+
+// src/ts/plugs/base/index.ts
+var import_utils16 = require("sia-reactor/utils");
+
+// 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_utils15 = 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_utils15.setPath)(CONFIG_BUILD, Plug.fullName, Plug.BUILD);
+  }
+  static unregister(fullName, editBuild = true) {
+    this.instance.unregister(fullName);
+    editBuild && (0, import_utils15.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_utils15.setPath)(CONFIG_BUILD, Pin.Plug.fullName + "." + Pin.pinName, Pin.BUILD);
+  }
+  static unregister(fullName, editBuild = true) {
+    this.instance.unregister(fullName);
+    editBuild && (0, import_utils15.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/base/index.ts
+var BasePlug = class extends Controllable {
+  static get surname() {
+    return this.isMain ? "" : "settings.";
+  }
+  static get fullName() {
+    return this.surname + this.plugName;
+  }
+  get name() {
+    return this.constructor.plugName;
+  }
+  constructor(ctlr, config = (0, import_utils16.getPath)(ctlr.config, new.target.fullName), state) {
+    ctlr.plug(new.target.fullName)?.destroy();
+    super(ctlr, config, state);
+    const path = new.target.fullName;
+    this.ctlr.config.watch(path, () => this.config = (0, import_utils16.getPath)(this.ctlr.config, path), { signal: this.signal });
+    ctlr.plugs.set(new.target.fullName, this);
+  }
+  onSetup() {
+    this.mount?.();
+    this.ctlr.state.readyState ? this.wire?.() : this.wire && this.ctlr.state.wonce("readyState", this.wire, { signal: this.signal });
+  }
+  onDestroy() {
+    this.unmount?.();
+    this.ctlr.plugs.delete(this.constructor.fullName);
+  }
+  mount() {
+  }
+  unmount() {
+  }
+  wire() {
+    this.registerMenu();
+  }
+  registerMenu() {
+    this.ctlr.plug("settings.settingsView")?.menu.register(MenuRegistry.get(this.constructor.fullName)?.(this));
+  }
+  // override to configure positioning
+};
+__publicField(BasePlug, "plugName");
+__publicField(BasePlug, "isCore", false);
+__publicField(BasePlug, "isMain", false);
+__publicField(BasePlug, "BUILD");
+
+// src/ts/plugs/settings/settingsView/build.ts
+var SETTINGS_BUILD = {
+  autoPause: true,
+  menu: {
+    disabled: false,
+    showView: true,
+    viewLabel: "See More",
+    preserveStack: false
+  }
+};
+
+// src/ts/components/base/index.ts
+var BaseComponent = class extends Controllable {
+  constructor(ctlr, config, state) {
+    super(ctlr, config, { label: "", cmd: "", active: false, disabled: false, hidden: false, ...state });
+    __publicField(this, "element");
+  }
+  get name() {
+    return this.constructor.componentName;
+  }
+  get el() {
+    return this.element;
+  }
+  onSetup() {
+    this.mount?.();
+    this.ctlr.state.readyState ? this.wire?.() : this.wire && this.ctlr.state.wonce("readyState", this.wire, { signal: this.signal });
+  }
+  onDestroy() {
+    this.unmount();
+  }
+  // Must assign to this.element before returning
+  mount() {
+  }
+  unmount() {
+    this.el.remove();
+  }
+  wire() {
+  }
+  // auto unwiring
+  active() {
+    this.el.classList.toggle("tmg-media-control-active", this.state.active = true);
+  }
+  inactive() {
+    this.el.classList.toggle("tmg-media-control-active", this.state.active = false);
+  }
+  disable() {
+    this.el.classList.toggle("tmg-media-control-disabled", this.state.disabled = true);
+  }
+  enable() {
+    this.el.classList.toggle("tmg-media-control-disabled", this.state.disabled = false);
+  }
+  hide() {
+    this.el.classList.toggle("tmg-media-control-hidden", this.state.hidden = true);
+  }
+  show() {
+    this.el.classList.toggle("tmg-media-control-hidden", this.state.hidden = false);
+  }
+  gate(e) {
+    !e.value ? this.hide() : this.canShow && this.show();
+  }
+  get canShow() {
+    return true;
+  }
+  // override to make gating smarter
+  setBtnARIA(dblAction, target = this.el) {
+    this.state.label && target.setAttribute("aria-label", this.state.label);
+    this.state.cmd && target.setAttribute("aria-keyshortcuts", (0, import_utils6.parseForARIAKS)(this.state.cmd));
+    if (dblAction) target.setAttribute("aria-description", `Double-press to ${dblAction}`);
+    else if (target.hasAttribute("aria-description")) target.removeAttribute("aria-description");
+  }
+};
+__publicField(BaseComponent, "componentName");
+__publicField(BaseComponent, "isControl", false);
+
+// src/ts/plugs/settings/settingsView/menu/index.ts
+var import_sia_reactor12 = require("sia-reactor");
+
+// src/ts/utils/dom.ts
+var import_sia_reactor11 = require("sia-reactor");
+
+// ../t007-tools/packages/utils/dist/chunk-NX2LWYD6.js
+var import_sia_reactor5 = require("sia-reactor");
+var import_sia_reactor6 = require("sia-reactor");
+var import_sia_reactor7 = require("sia-reactor");
+var import_sia_reactor8 = require("sia-reactor");
+function initOutsideClick(el, { enabled = false, onOutside = import_sia_reactor5.NOOP, outOnClick = true, outOnEscape = true, outOnFocusOut = false, allowBounds = false, allowInputs = false, root = window, scoped = true, capture = true } = import_sia_reactor5.NIL) {
+  const stack = t007._outsiders_stack ?? (t007._outsiders_stack = []), existing = (t007._outsiders ?? (t007._outsiders = /* @__PURE__ */ new WeakMap())).get(el);
+  if (!enabled || existing) return existing ? existing : void 0;
+  scoped = scoped && root instanceof HTMLElement, root = scoped ? root : root === document ? document : window;
+  const onScopedOut = (e, t, p = e.touches?.[0] || e, rect = allowBounds ? el.getBoundingClientRect() : null) => {
+    if (stack.at(-1) !== el || (allowBounds ? p.clientX >= rect.left && p.clientX <= rect.right && p.clientY >= rect.top && p.clientY <= rect.bottom : el.contains(t))) return false;
+    return (!scoped ? true : root.contains(t)) && onOutside(e);
+  }, handleClick = ((e) => outOnClick && !(allowInputs && isInteractive(e.target)) && onScopedOut(e, e.target)), handleEscape = ((e) => outOnEscape && e.key === "Escape" && !e.ctrlKey && !e.shiftKey && !e.altKey && !e.metaKey && stack.at(-1) === el && onOutside(e)), handleFocusOut = (e) => outOnFocusOut && !el.contains(e.relatedTarget) && onScopedOut(e, e.relatedTarget);
+  root.addEventListener("mousedown", handleClick, capture), root.addEventListener("touchstart", handleClick, { passive: true, capture });
+  root.addEventListener("keydown", handleEscape, capture);
+  el.addEventListener("focusout", handleFocusOut, capture);
+  const destroy = () => {
+    root.removeEventListener("mousedown", handleClick, capture), root.removeEventListener("touchstart", handleClick, capture);
+    root.removeEventListener("keydown", handleEscape, capture);
+    el.removeEventListener("focusout", handleFocusOut, capture);
+    t007._outsiders.delete(el), stack.splice(stack.indexOf(el), 1);
+  };
+  return !stack.includes(el) && stack.push(el), t007._outsiders.set(el, destroy), destroy;
+}
+var removeOutsideClick = (el) => t007._outsiders?.get(el)?.();
+function initFocusTrap(el, { enabled = false, initialSelector = "[data-autofocus]", ringClassName = "focus-outline", root = window, scoped = true, capture = true } = import_sia_reactor6.NIL) {
+  const stack = t007._ftrappers_stack ?? (t007._ftrappers_stack = []), existing = (t007._ftrappers ?? (t007._ftrappers = /* @__PURE__ */ new WeakMap())).get(el);
+  if (!enabled || existing) return existing ? existing : void 0;
+  scoped = scoped && root instanceof HTMLElement, root = scoped ? root : root === document ? document : window;
+  let recovering = false;
+  const focused = document.querySelector(":focus"), initial = el.querySelector(initialSelector), first = (0, import_utils.createEl)("span", { tabIndex: 0 }, { focusGuard: "start" }, { position: "absolute", width: "0", height: "0", pointerEvents: "none" }), last = (0, import_utils.createEl)("span", { tabIndex: 0 }, { focusGuard: "end" }, { position: "absolute", width: "0", height: "0", pointerEvents: "none" }), getFocusable = (c = el) => [...c.querySelectorAll(INTERACTIVE_SELECTOR)], resetFocus = (i = 0, els = getFocusable()) => !recovering && (recovering = true, els?.length ? els.at(i).focus() : (!el.hasAttribute("tabindex") && (el.tabIndex = -1), el.focus()), recovering = false), edgeFocus = (pre = false, rt = root) => {
+    if (!scoped) return resetFocus(pre ? -1 : 0);
+    if (rt.hasAttribute("tabindex")) return rt.focus();
+    const items = getFocusable();
+    if (!items.length) return resetFocus(0, null);
+    const ceil = document.fullscreenElement || document.querySelector("dialog:modal") || document.body;
+    let p = rt.parentElement || ceil, all = getFocusable(p);
+    while (p !== ceil && (!all.length || (pre ? rt.contains(all[0]) : rt.contains(all.at(-1))))) all = getFocusable(p = p.parentElement || ceil);
+    for (let target, len = all.length, i = all.indexOf(items[pre ? 0 : items.length - 1]) + (pre ? -1 : 1); pre ? i >= 0 : i < len; pre ? i-- : i++) if (!rt.contains(target = all[i])) return target.focus();
+    (pre ? first : last).blur();
+  }, handleFocusIn = (e) => {
+    if (document.querySelector("dialog:modal") && !el.matches("dialog:modal")) return;
+    stack.at(-1) === el && (0, import_utils2.getActiveEl)(el.ownerDocument) !== root && !el.contains((0, import_utils2.getActiveEl)(el.ownerDocument)) && !e.composedPath().includes(el) && resetFocus();
+  }, handleInitialBlur = () => initial.classList.remove(ringClassName);
+  first.addEventListener("focus", (e) => el.contains(e.relatedTarget) ? edgeFocus(true) : resetFocus(), capture), el.prepend(first);
+  last.addEventListener("focus", (e) => el.contains(e.relatedTarget) ? edgeFocus() : resetFocus(-1), capture), el.append(last);
+  root.addEventListener("focusin", handleFocusIn, capture);
+  if (initial || !el.contains(focused)) !initial ? setTimeout(resetFocus) : setTimeout(() => (initial.classList.add(ringClassName), initial.focus(), initial.addEventListener("blur", handleInitialBlur, capture)));
+  const destroy = () => {
+    focused?.isConnected && focused.focus(), first.remove(), last.remove();
+    root.removeEventListener("focusin", handleFocusIn, capture);
+    initial?.removeEventListener("blur", handleInitialBlur, capture);
+    t007._ftrappers.delete(el), stack.splice(stack.indexOf(el), 1);
+  };
+  const handle = { destroy, sync: () => (el.prepend(first), el.append(last)) };
+  return !stack.includes(el) && stack.push(el), t007._ftrappers.set(el, handle), handle;
+}
+var removeFocusTrap = (el) => t007._ftrappers?.get(el)?.destroy();
+var syncFocusTrap = (el) => t007._ftrappers?.get(el)?.sync();
+var getTargetIndex = ({ key, currIndex, length, gridX, gridY, vGridY, loop, ctrlKey = false, rtl }) => {
+  const rowStart = currIndex - currIndex % gridX, rowEnd = Math.min(rowStart + gridX - 1, length - 1), colStart = currIndex % gridX, colEnd = Math.min(colStart + gridX * (gridY - 1), length - 1), canX = gridX > 1, canY = gridY > 1, horizontalMove = rtl ? { ArrowRight: canX ? -1 : 0, ArrowLeft: canX ? 1 : 0 } : { ArrowRight: canX ? 1 : 0, ArrowLeft: canX ? -1 : 0 }, move = { ...horizontalMove, ArrowDown: canY ? gridX : 0, ArrowUp: canY ? -gridX : 0, Home: ctrlKey ? 0 : rowStart, End: ctrlKey ? length - 1 : rowEnd, PageDown: (vGridY - 1) * gridX, PageUp: -(vGridY - 1) * gridX }[key] ?? 0;
+  let targetIndex = key === "Home" || key === "End" ? move : currIndex + move;
+  if (key === "ArrowDown") {
+    if (!loop && targetIndex >= length) targetIndex -= move;
+  } else if (key === "ArrowUp") {
+    if (!loop && targetIndex < 0) targetIndex += Math.abs(move);
+  } else if (key === "PageDown") {
+    if (!loop && targetIndex >= length) targetIndex = colEnd;
+  } else if (key === "PageUp") {
+    if (!loop && targetIndex < 0) targetIndex = colStart;
+  }
+  return loop ? (targetIndex + length) % length : (0, import_utils4.clamp)(0, targetIndex, length - 1);
+};
+var getCommonAncestor = (first, second) => {
+  if (!first) return null;
+  if (!second) return first.parentElement;
+  const ancestors = /* @__PURE__ */ new Set();
+  let current = first;
+  while (current) ancestors.add(current), current = current.parentElement;
+  current = second;
+  while (current) {
+    if (ancestors.has(current)) return current;
+    current = current.parentElement;
+  }
+  return null;
+};
+var getGrid = (all, x = true, y = true, vY = true) => {
+  const len = all.length, grid = {};
+  if (!len) return grid;
+  let cols = all.findIndex((el) => el.offsetTop !== all[0].offsetTop);
+  cols = cols > 0 ? cols : len;
+  if (x) grid.x = cols;
+  let rows = Math.ceil(len / cols);
+  if (y) grid.y = rows;
+  if (vY) {
+    const itemHeight = all[0].offsetHeight ?? 0, containerHeight = getCommonAncestor(all[0], all[1])?.clientHeight ?? 0;
+    rows = (0, import_utils4.clamp)(1, Math.floor(containerHeight / itemHeight), rows) || rows;
+    grid.vY = rows;
+  }
+  return grid;
+};
+var H_NAV_KEYS = ["ArrowRight", "ArrowLeft", "Home", "End"];
+var V_NAV_KEYS = ["ArrowUp", "ArrowDown", "PageDown", "PageUp"];
+var NAV_KEYS = [...H_NAV_KEYS, ...V_NAV_KEYS];
+var DEFAULT_CONFIG = {
+  enabled: null,
+  selector: "[data-arrow-item]",
+  focusOnHover: true,
+  loop: true,
+  virtual: false,
+  typeahead: false,
+  rovingTab: null,
+  defaultTabbableIndex: null,
+  baseTabIndex: "0",
+  resetMs: 500,
+  rtl: null,
+  grid: {},
+  activeClass: "focus-outlined",
+  inputSelector: "input,textarea,[contenteditable]",
+  focusOptions: { preventScroll: false },
+  scrollIntoView: { block: "nearest", inline: "nearest" },
+  onSelect: import_sia_reactor8.NOOP,
+  onFocusOut: import_sia_reactor8.NOOP
+};
+
+// ../t007-tools/packages/utils/dist/hooks/vanilla.js
+var import_sia_reactor9 = require("sia-reactor");
+var import_sia_reactor10 = require("sia-reactor");
+function initArrowNavigation(container, config = {}) {
+  const existing = (t007._arrownavs ?? (t007._arrownavs = /* @__PURE__ */ new WeakMap())).get(container);
+  if (!config.enabled || existing) return existing ? existing : void 0;
+  const { enabled: isEnabled, selector, focusOnHover, loop, virtual, typeahead, resetMs, activeClass, inputSelector, defaultTabbableIndex, baseTabIndex, grid, rtl: isRtl, focusOptions, scrollIntoView, onSelect, onFocusOut, rovingTab } = { ...DEFAULT_CONFIG, ...config };
+  let gridX = grid.x || 1, gridY = grid.y || 1, vGridY = grid.vY || 1, activeIndex = -1, buffer = "", timeout = null, items = [];
+  const enabled = isEnabled ?? virtual, roving = rovingTab ?? !virtual, rtl = isRtl ?? ("undefined" === typeof document ? false : getComputedStyle(container).direction === "rtl"), shouldSnub = () => !enabled || !container, isItemDisabled = (el) => !el || el.matches('[disabled],[aria-disabled="true"],[inert],:disabled'), getItems = () => items = Array.from(container.querySelectorAll(selector));
+  const getAbleIndex = (targetIndex, e = { key: "ArrowRight", ctrlKey: false }) => {
+    if (shouldSnub() || !items.length) return null;
+    let index = targetIndex;
+    let attempts = 0;
+    while (attempts < items.length) {
+      if (!isItemDisabled(items[index])) return index;
+      index = getTargetIndex({ key: e.key, currIndex: index, gridX, gridY, vGridY, length: items.length, loop, ctrlKey: e.ctrlKey, rtl });
+      attempts++;
+    }
+    return null;
+  };
+  const goToIndex = (targetIndex, e = { key: "ArrowRight" }) => {
+    if (shouldSnub()) return;
+    const idx = getAbleIndex(targetIndex, e);
+    if (idx === null) return;
+    resetActiveIndex(idx);
+    onSelect?.(items[idx], e), updateDOM();
+    if (virtual) {
+      items[idx]?.scrollIntoView(scrollIntoView);
+      container.setAttribute("aria-activedescendant", items[idx].id || "");
+    } else items[idx]?.focus(focusOptions);
+  };
+  const updateDOM = () => {
+    if (shouldSnub() || !virtual && !roving || !items.length) return;
+    const hasDefaultTabbable = defaultTabbableIndex !== null && defaultTabbableIndex !== void 0, tabbableIndex = hasDefaultTabbable && !isItemDisabled(items[defaultTabbableIndex]) ? defaultTabbableIndex : getAbleIndex(0);
+    for (let i = 0, len = items.length; i < len; i++) {
+      const el = items[i], isActive = i === activeIndex;
+      if (roving) el.setAttribute("tabindex", i === activeIndex || activeIndex === -1 && i === tabbableIndex ? baseTabIndex : "-1");
+      else if (virtual && activeIndex > 0) el.setAttribute("tabindex", i > activeIndex ? baseTabIndex : "-1");
+      else el.setAttribute("tabindex", baseTabIndex);
+      if (virtual) el.setAttribute("aria-selected", String(isActive)), el.classList.toggle(activeClass, isActive);
+    }
+  };
+  const resetActiveIndex = (index = -1) => (activeIndex = index, updateDOM());
+  const typeAhead = (key) => {
+    if (shouldSnub() || !typeahead) return;
+    buffer += key.toLowerCase();
+    if (timeout) clearTimeout(timeout);
+    timeout = setTimeout(() => buffer = "", resetMs);
+    const start = activeIndex >= 0 ? activeIndex + 1 : 0;
+    for (let i = 0; i < items.length; i++) {
+      const idx = (start + i) % items.length, label = (items[idx].getAttribute("data-label") || items[idx].innerText || "").trim().toLowerCase();
+      if (label.startsWith(buffer)) return goToIndex(idx);
+    }
+  };
+  const simulateKey = (e) => {
+    const t = e.target;
+    if (shouldSnub() || (0, import_utils2.getActiveEl)(t?.ownerDocument)?.matches("option")) return;
+    const { key } = e;
+    if (!items.length) return;
+    if (virtual && (key === " " || key === "Enter")) return items[activeIndex]?.click();
+    if (t?.matches(DEFAULT_CONFIG.inputSelector) && !virtual) return;
+    if (typeahead && key.length === 1 && /^[a-z0-9]$/i.test(key)) return typeAhead(key);
+    if (!NAV_KEYS.includes(key)) return;
+    if (!(e.currentTarget?.matches(DEFAULT_CONFIG.inputSelector) && gridX <= 1 && H_NAV_KEYS.includes(key))) e.preventDefault?.(), e.stopPropagation?.();
+    const currIndex = virtual ? activeIndex : items.indexOf((0, import_utils2.getActiveEl)(t?.ownerDocument)), targetIndex = getTargetIndex({ currIndex, gridX, gridY, vGridY, length: items.length, loop, rtl, key, ctrlKey: e.ctrlKey });
+    goToIndex(targetIndex, e);
+  };
+  getItems(), updateDOM();
+  const interactiveEls = !virtual ? [container] : [container.querySelector(inputSelector)];
+  for (const el of interactiveEls) el?.addEventListener("keydown", simulateKey);
+  const handleFocusOut = (e) => {
+    if (!container.contains(e.relatedTarget)) return resetActiveIndex(), updateDOM(), onFocusOut?.(e);
+    const among = items.includes(e.relatedTarget);
+    if (!among && (defaultTabbableIndex ?? -1) >= 0) return resetActiveIndex(), updateDOM();
+    if (virtual) resetActiveIndex(), updateDOM();
+  };
+  container.addEventListener("focusout", handleFocusOut);
+  const handleHover = (e) => {
+    if (!enabled || !focusOnHover) return;
+    const el = e.currentTarget, idx = items.indexOf(el);
+    if (idx !== -1) goToIndex(idx);
+  };
+  for (const el of items) el.addEventListener("mouseenter", handleHover);
+  const sync = () => {
+    const oldEl = items[activeIndex];
+    for (const el of items) el.removeEventListener("mouseenter", handleHover);
+    getItems();
+    for (const el of items) el.addEventListener("mouseenter", handleHover);
+    calcGrid();
+    const newEl = items[activeIndex];
+    updateDOM();
+    if (oldEl && newEl && oldEl === newEl) return;
+    resetActiveIndex(), updateDOM();
+  };
+  const mutationObserver2 = new MutationObserver(sync);
+  mutationObserver2.observe(container, { childList: true, subtree: true });
+  const setGrid = (g) => {
+    if (g.x !== void 0) gridX = g.x;
+    if (g.y !== void 0) gridY = g.y;
+    if (g.vY !== void 0) vGridY = g.vY;
+  };
+  let ancestor = null;
+  const resizeObserver2 = new ResizeObserver(() => calcGrid());
+  const calcGrid = () => {
+    setGrid(getGrid(items, !grid.x, !grid.y, !grid.vY));
+    const next = items.length > 1 ? getCommonAncestor(items[0], items[1]) : container;
+    if (next && next !== ancestor) ancestor && resizeObserver2.unobserve(ancestor), ancestor = next, resizeObserver2.observe(ancestor);
+  };
+  setGrid(grid), calcGrid();
+  const destroy = () => {
+    for (const el of interactiveEls) el?.removeEventListener("keydown", simulateKey);
+    container.removeEventListener("focusout", handleFocusOut);
+    for (const el of items) el.removeEventListener("mouseenter", handleHover);
+    mutationObserver2.disconnect(), resizeObserver2.disconnect();
+    if (timeout) clearTimeout(timeout);
+    t007._arrownavs.delete(container);
+  };
+  const handle = { gridX: () => gridX, gridY: () => gridY, vGridY: () => vGridY, items: () => items, activeIndex: () => activeIndex, activeItem: () => items[activeIndex] ?? null, getAbleIndex, typeAhead, goToIndex, simulateKey, sync, destroy };
+  return t007._arrownavs.set(container, handle), handle;
+}
+var removeArrowNavigation = (container) => t007._arrownavs?.get(container)?.destroy();
+var syncArrowNavigation = (container) => t007._arrownavs?.get(container)?.sync();
+
+// src/ts/utils/dom.ts
+var win = "undefined" !== typeof window ? window : void 0;
+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/panel/index.ts
+var BaseMenuPanel = class extends Controllable {
+  constructor(ctlr, config, className) {
+    super(ctlr, config);
+    __publicField(this, "element");
+    __publicField(this, "content");
+    this.element = (0, import_utils.createEl)("div", { className: `tmg-media-smenu-panel ${className}` });
+    this.element.append(this.content = (0, import_utils.createEl)("div", { className: "tmg-media-smenu-panel-content" }));
+  }
+  enter(dir = "forward") {
+    this.element.classList.remove("tmg-media-smenu-panel-exit", "tmg-media-smenu-panel-active");
+    this.element.dataset.dir = dir, this.element.style.removeProperty("display"), this.element.removeAttribute("inert");
+    void this.element.offsetWidth, this.element.classList.add("tmg-media-smenu-panel-active");
+  }
+  exit(dir = "backward") {
+    this.element.dataset.dir = dir, this.element.setAttribute("inert", "");
+    this.element.classList.remove("tmg-media-smenu-panel-active", "tmg-media-smenu-panel-exit");
+    this.element.style.display = "none";
+  }
+  get isActive() {
+    return this.element.classList.contains("tmg-media-smenu-panel-active");
+  }
+  get contentHeight() {
+    return Array.prototype.reduce.call(this.element.children, ((acc, el) => {
+      const oldHeight = el.style.height;
+      el.style.height = "auto";
+      const h = el.scrollHeight;
+      return oldHeight ? el.style.height = oldHeight : el.style.removeProperty("height"), acc + h;
+    }), 0);
+  }
+};
+
+// 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/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/panel/main.ts
+var MainMenuPanel = class extends BaseMenuPanel {
+  constructor(ctlr, menuConfig) {
+    super(ctlr, void 0, "tmg-media-smenu-main-panel");
+    this.menuConfig = menuConfig;
+    __publicField(this, "viewBtn");
+    __publicField(this, "renderRows");
+    __publicField(this, "onItemClick");
+    __publicField(this, "onViewClick");
+  }
+  onSetup() {
+  }
+  build() {
+    const list = (0, import_utils.createEl)("ul", { className: "tmg-media-smenu-main-list", role: "menu" });
+    this.renderRows = createListRenderer({
+      container: list,
+      getKey: (item) => item.id,
+      createNode: (item) => this.buildRow(item),
+      destroyNode: (node) => (node._ac?.abort(), node.widget?.destroy(), node.remove())
+    });
+    this.content.append(list);
+    if (this.menuConfig.showView) {
+      this.viewBtn = (0, import_utils.createEl)("button", { type: "button", className: "tmg-media-smenu-view-btn", innerHTML: `<span class="tmg-media-smenu-row-icon">${IconRegistry.get("returnback")}</span><span class="tmg-media-smenu-view-label">${this.menuConfig.viewLabel}</span>` });
+      this.viewBtn.addEventListener("click", () => this.onViewClick?.()), this.content.append((0, import_utils.createEl)("div", { className: "tmg-media-smenu-divider" }), this.viewBtn);
+    }
+  }
+  sync(items) {
+    this.renderRows(items), this.isActive && this.focusFirst();
+  }
+  enter(dir) {
+    super.enter(dir), this.focusFirst();
+  }
+  focusFirst() {
+    (0, import_utils5.requestAnimationFrame)(() => this.element.querySelector(".tmg-media-smenu-row[tabindex='0']")?.focus(), this.ctlr.signal);
+  }
+  buildRow(item) {
+    const isWidget = item.widget === "toggle" || item.widget === "button" || item.inline, li = (0, import_utils.createEl)("li", { className: "tmg-media-smenu-row" + (item.getDisabled?.() ? " tmg-media-control-disabled" : ""), role: "menuitem", tabIndex: 0, inert: item.getDisabled?.() || void 0 }, { itemId: item.id }), lbl = (0, import_utils.createEl)("span", { className: "tmg-media-smenu-row-label", textContent: item.label });
+    if (item.title) li.title = isFunc(item.title) ? item.title() : item.title;
+    if (item.icon) {
+      const iconSvg = IconRegistry.get(item.icon, true);
+      if (iconSvg) li.append((0, import_utils.createEl)("span", { className: "tmg-media-smenu-row-icon", innerHTML: iconSvg }));
+    }
+    if (isWidget) {
+      const widget = WidgetRegistry.create(item, this.ctlr);
+      if (widget) {
+        item.inline && item.widget !== "toggle" ? (li.removeAttribute("tabindex"), li.classList.replace("tmg-media-smenu-row", "tmg-media-smenu-inline-wrapper"), li.append(widget.render()), item.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) => !item.getDisabled?.() && (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-row-value", textContent: item.getValue() || "" });
+      if (item.infoText) {
+        const info = (0, import_utils.createEl)("span", { className: "tmg-media-smenu-row-info", textContent: isFunc(item.infoText) ? item.infoText() : item.infoText });
+        li.append(lbl, info, val, (0, import_utils.createEl)("span", { className: "tmg-media-smenu-row-arrow", ariaHidden: "true", innerHTML: "&#8250;" }));
+      } else li.append(lbl, val, (0, import_utils.createEl)("span", { className: "tmg-media-smenu-row-arrow", ariaHidden: "true", innerHTML: "&#8250;" }));
+      li.addEventListener("click", () => !item.getDisabled?.() && this.onItemClick?.(item));
+      if (item.mediaPaths || item.configPaths || item.onWire) {
+        const ac = new AbortController(), syncUI = () => {
+          const valNode = li.querySelector(".tmg-media-smenu-row-value");
+          valNode ? valNode.textContent = item.getValue() || "" : li.widget?.syncUI();
+          li.inert = !!item.getDisabled?.(), li.classList.toggle("tmg-media-control-disabled", !!item.getDisabled?.());
+        };
+        item.mediaPaths?.forEach((path) => this.media.on(path, syncUI, { signal: ac.signal }));
+        item.configPaths?.forEach((path) => this.ctlr.config.on(path, syncUI, { signal: ac.signal }));
+        item.onWire?.(syncUI, ac.signal);
+        li._ac = ac;
+      }
+    }
+    return li;
+  }
+};
+
+// src/ts/plugs/settings/settingsView/menu/panel/sub.ts
+var SubMenuPanel = class extends BaseMenuPanel {
+  constructor(ctlr) {
+    super(ctlr, void 0, "tmg-media-smenu-sub-panel");
+    __publicField(this, "headerLabel");
+    __publicField(this, "widgetSlot");
+    __publicField(this, "backBtn");
+    __publicField(this, "widget", null);
+    __publicField(this, "item", null);
+    __publicField(this, "headerActions");
+    __publicField(this, "footerSlot");
+    __publicField(this, "onBack");
+    __publicField(this, "onSubItemClick");
+  }
+  onSetup() {
+    this.buildShell();
+  }
+  buildShell() {
+    const header = (0, import_utils.createEl)("div", { className: "tmg-media-smenu-sub-header" });
+    this.backBtn = (0, import_utils.createEl)("button", { type: "button", className: "tmg-media-smenu-back-btn", ariaLabel: "Back", innerHTML: `<span class="tmg-media-smenu-back-arrow">&#8249;</span>`, tabIndex: 0 });
+    this.headerLabel = (0, import_utils.createEl)("span", { className: "tmg-media-smenu-sub-title", tabIndex: -1 });
+    this.backBtn.addEventListener("click", (e) => (e.stopPropagation(), this.onBack?.()));
+    header.addEventListener("click", () => this.onBack?.());
+    this.headerActions = (0, import_utils.createEl)("div", { className: "tmg-media-smenu-sub-actions" });
+    header.append(this.backBtn, this.headerLabel, this.headerActions);
+    this.widgetSlot = (0, import_utils.createEl)("div", { className: "tmg-media-smenu-widget-slot" });
+    this.footerSlot = (0, import_utils.createEl)("div", { className: "tmg-media-smenu-sub-footer" });
+    this.content.append(header, this.widgetSlot, this.footerSlot);
+  }
+  enter(dir) {
+    super.enter(dir), (0, import_utils5.requestAnimationFrame)(() => this.element.querySelector(":is([tabindex='0'], button:not([disabled]), input:not([type='checkbox'], [type='radio'], [disabled])):not(.tmg-media-smenu-back-btn, .tmg-media-range-container)")?.focus(), this.ctlr.signal);
+  }
+  load(item) {
+    this.headerLabel.textContent = item.label;
+    if (this.item?.id === item.id) return void this.widget?.syncUI();
+    if (this.widget) this.widget.element?.remove(), this.widget.destroy();
+    this.item = item;
+    const widget = WidgetRegistry.create(item, this.ctlr);
+    if (!widget) return;
+    if (widget instanceof GroupWidget) widget.onSubItemClick = (sub) => this.onSubItemClick?.(sub);
+    this.widget = widget;
+    this.widgetSlot.append(widget.render());
+    this.headerActions.innerHTML = "";
+    if (item.actions) {
+      for (const action of item.actions) {
+        const label = action.getLabel(), btn = (0, import_utils.createEl)("button", { className: "tmg-media-smenu-sub-action-btn" + (!action.icon ? " tmg-media-smenu-input-btn tmg-media-smenu-text-action" : ""), type: "button", ariaLabel: label, title: label });
+        if (action.id === "delete" || action.icon === "delete") btn.classList.add("tmg-media-smenu-delete-btn");
+        action.icon ? btn.innerHTML = IconRegistry.get(action.icon, true) || label : btn.textContent = label;
+        btn.addEventListener("click", (e) => (e.stopPropagation(), action.onClick()));
+        this.headerActions.append(btn);
+      }
+    }
+    this.footerSlot.innerHTML = "";
+    if (item.tipHTML) this.footerSlot.innerHTML = isFunc(item.tipHTML) ? item.tipHTML() : item.tipHTML;
+    if (item.footerActions?.length) {
+      const actionsWrap = (0, import_utils.createEl)("div", { className: "tmg-media-smenu-footer-actions" });
+      for (const action of item.footerActions) {
+        const btn = (0, import_utils.createEl)("button", { className: "tmg-media-smenu-input-btn", type: "button", textContent: action.getLabel() });
+        btn.addEventListener("click", () => action.onClick()), actionsWrap.append(btn);
+      }
+      this.footerSlot.append(actionsWrap);
+    }
+  }
+  syncUI() {
+    this.widget?.syncUI();
+    if (this.item?.footerActions?.length) {
+      const btns = this.footerSlot.querySelectorAll("button");
+      this.item.footerActions.forEach((action, i) => btns[i] && (btns[i].textContent = action.getLabel()));
+    }
+    if (this.item?.actions?.length) {
+      const btns = this.headerActions.querySelectorAll("button");
+      this.item.actions.forEach((action, i) => {
+        if (!btns[i]) return;
+        const lbl = action.getLabel();
+        btns[i].innerHTML = action.icon ? IconRegistry.get(action.icon, true) || lbl : lbl;
+      });
+    }
+  }
+  get activeId() {
+    return this.item?.id ?? null;
+  }
+};
+
+// src/ts/plugs/settings/settingsView/menu/index.ts
+var SettingsMenu = class extends BaseComponent {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "registry", new OrderedRegistry());
+    __publicField(this, "mainPanel");
+    __publicField(this, "subPanels", []);
+    __publicField(this, "navStack", []);
+    __publicField(this, "menuOpen", false);
+    __publicField(this, "anchorEl");
+    __publicField(this, "lastClosedTime", 0);
+  }
+  create() {
+    this.element = (0, import_utils.createEl)("div", { className: "tmg-media-smenu-overlay", inert: true });
+    this.el.addEventListener("keydown", (e, active = (0, import_utils2.getActiveEl)(this.el.ownerDocument)) => {
+      if ((e.key === "Enter" || e.key === " ") && active && !active.matches("input,textarea,[contenteditable]") && active.tagName !== "BUTTON" && active.closest(".tmg-media-smenu-panel-active")) e.preventDefault(), active.click();
+      else if (e.key === "ArrowRight" && active?.querySelector(".tmg-media-smenu-row-arrow, .tmg-media-smenu-group-arrow")) e.stopImmediatePropagation(), active.click();
+      else if (e.key === "ArrowLeft" && !active?.matches("input,textarea,[contenteditable]")) e.stopImmediatePropagation(), this.goBack();
+    });
+    return this.element;
+  }
+  mount(onViewClick) {
+    if (!this.element) this.create();
+    this.mainPanel = new MainMenuPanel(this.ctlr, this.config);
+    this.mainPanel.setup(), this.mainPanel.build();
+    this.mainPanel.onItemClick = (item) => this.goTo(item.id);
+    this.mainPanel.onViewClick = onViewClick;
+    this.el.append(this.mainPanel.element);
+    this.media.container.append(this.element);
+  }
+  wire() {
+    this.media.on("state.paused", ({ value }) => !value && this.close(), { signal: this.signal });
+    this.media.on("features", () => this.menuOpen && (this.syncMain(), this.subPanels.forEach((p) => p.syncUI())), { signal: this.signal });
+    this.ctlr.state.on("dimensions.container.width", () => this.menuOpen && this.reposition(this.anchorEl), { signal: this.signal });
+    this.ctlr.state.on("dimensions.container.height", () => this.menuOpen && this.reposition(this.anchorEl), { signal: this.signal });
+  }
+  unmount() {
+    removeOutsideClick(this.element), removeArrowNavigation(this.element), removeFocusTrap(this.element), super.unmount();
+  }
+  mergeItem(item) {
+    const existing = this.getItem(item.id);
+    if (existing) {
+      if (item.items) existing.items = [...existing.items || [], ...item.items];
+      if (item.actions) existing.actions = [...existing.actions || [], ...item.actions];
+      if (item.footerActions) existing.footerActions = [...existing.footerActions || [], ...item.footerActions];
+      if (item.tipHTML && !existing.tipHTML) existing.tipHTML = item.tipHTML;
+      return existing;
+    }
+    return item;
+  }
+  register(items) {
+    if (items) Array.isArray(items) ? items.forEach((item) => (item = this.mergeItem(item), this.registry.register(item.id, item))) : (items = this.mergeItem(items), this.registry.register(items.id, items)), this.menuOpen && this.syncMain();
+  }
+  registerFirst(item) {
+    if (item) item = this.mergeItem(item), this.registry.registerFirst(item.id, item), this.menuOpen && this.syncMain();
+  }
+  registerBefore(key, item) {
+    if (item) item = this.mergeItem(item), this.registry.registerBefore(key, item.id, item), this.menuOpen && this.syncMain();
+  }
+  registerAfter(key, item) {
+    if (item) item = this.mergeItem(item), this.registry.registerAfter(key, item.id, item), this.menuOpen && this.syncMain();
+  }
+  unregister(id) {
+    this.registry.unregister(id), this.menuOpen && this.syncMain();
+  }
+  getItem(id, items = this.registry.getAll()) {
+    for (const item of items)
+      if (item.id === id) return item;
+      else if (item.items) {
+        const found = this.getItem(id, item.items);
+        if (found) return found;
+      }
+    return void 0;
+  }
+  syncUI(id) {
+    if (id) this.subPanels[this.navStack.indexOf(id)]?.syncUI(), this.syncMain();
+    else this.syncMain(), this.subPanels.forEach((p) => p.syncUI());
+  }
+  toggle(anchorEl) {
+    this.menuOpen ? this.close() : this.open(anchorEl);
+  }
+  open(anchorEl) {
+    if (this.menuOpen || performance.now() - this.lastClosedTime < 50) return;
+    this.menuOpen = true;
+    this.anchorEl = anchorEl;
+    if (!this.config.preserveStack) this.navStack = [];
+    if (this.navStack.length === 0) this.syncMain(), this.showPanel(this.mainPanel, "none"), this.subPanels.forEach((p) => this.hidePanel(p));
+    else this.syncUI(this.navStack[this.navStack.length - 1]), this.showPanel(this.subPanels[this.navStack.length - 1], "none"), this.hidePanel(this.mainPanel), this.subPanels.forEach((p, idx) => idx !== this.navStack.length - 1 && this.hidePanel(p));
+    this.reposition(anchorEl), this.el.removeAttribute("inert"), this.el.classList.add("tmg-media-smenu-overlay-open"), this.el.classList.remove("tmg-media-smenu-overlay-closed");
+    this.media.container.classList.add("tmg-media-settings-menu");
+    initOutsideClick(this.element, { enabled: true, onOutside: (e) => !this.anchorEl?.contains(e?.target) && this.close(), outOnFocusOut: !import_sia_reactor12.CTX.isDevEnv }), initFocusTrap(this.element, { enabled: true });
+    initArrowNavigation(this.element, { enabled: true, rovingTab: false, focusOnHover: false, grid: { x: 1 }, selector: ".tmg-media-smenu-panel :is([tabindex='0'], button:not([disabled]), input:not([type='checkbox'], [type='radio'], [disabled])):not(.tmg-media-smenu-back-btn, .tmg-media-range-container)" });
+  }
+  close() {
+    if (!this.menuOpen) return;
+    this.menuOpen = false;
+    this.lastClosedTime = performance.now();
+    this.el.setAttribute("inert", ""), this.el.classList.remove("tmg-media-smenu-overlay-open", "tmg-media-smenu-drop-down"), this.media.container.classList.remove("tmg-media-settings-menu");
+    removeOutsideClick(this.element), removeArrowNavigation(this.element), removeFocusTrap(this.element);
+    this.anchorEl?.focus(), this.anchorEl = void 0;
+  }
+  get isOpen() {
+    return this.menuOpen;
+  }
+  getSubPanel(depth) {
+    if (!this.subPanels[depth]) {
+      const p = new SubMenuPanel(this.ctlr);
+      p.setup();
+      p.onBack = this.goBack;
+      p.onSubItemClick = (item) => this.goTo(item.id);
+      this.element.append(p.element), syncFocusTrap(this.element);
+      this.subPanels[depth] = p;
+    }
+    return this.subPanels[depth];
+  }
+  goTo(id) {
+    const item = this.getItem(id);
+    if (!item || !item.items && !item.widget || item.widget === "button" || item.widget === "toggle") return;
+    const activePanel = this.navStack.length === 0 ? this.mainPanel : this.subPanels[this.navStack.length - 1];
+    this.navStack.push(id);
+    const nextPanel = this.getSubPanel(this.navStack.length - 1);
+    nextPanel.load(item);
+    this.showPanel(nextPanel, "forward"), this.hidePanel(activePanel, "backward");
+  }
+  goBack() {
+    if (this.navStack.length === 0) return;
+    const activePanel = this.subPanels[this.navStack.length - 1];
+    this.navStack.pop();
+    this.showPanel(this.navStack.length === 0 ? this.mainPanel : this.subPanels[this.navStack.length - 1], "backward");
+    this.hidePanel(activePanel, "forward");
+  }
+  showPanel(panel, dir = "forward") {
+    panel.enter(dir), this.syncHeight(panel), syncArrowNavigation(this.element);
+  }
+  hidePanel(panel, dir = "backward") {
+    panel.exit(dir);
+  }
+  syncMain() {
+    this.mainPanel.sync(this.registry.getAll().filter((item) => (isFunc(item.hidden) ? item.hidden() : item.hidden) ? false : !item.feature || Boolean(this.media.features[item.feature])));
+  }
+  syncHeight(panel, height = panel.contentHeight) {
+    (0, import_utils5.requestAnimationFrame)(() => this.menuOpen && height && (this.el.style.height = `${height}px`), this.signal);
+  }
+  reposition(anchorEl) {
+    const container = this.media.container, cRect = container.getBoundingClientRect(), aRect = anchorEl ? anchorEl.getBoundingClientRect() : this.el.getBoundingClientRect();
+    if (!anchorEl && !this.menuOpen) return;
+    const y = aRect.top - cRect.top;
+    const menuWidth = this.el.offsetWidth || 320;
+    let xPos = aRect.right - cRect.left - menuWidth + 10;
+    const margin = 12;
+    if (xPos < margin) xPos = margin;
+    if (xPos + menuWidth > cRect.width - margin) xPos = cRect.width - menuWidth - margin;
+    this.el.style.setProperty("--tmg-smenu-anchor-x", `${xPos}px`);
+    this.el.style.setProperty("--tmg-smenu-anchor-y", `${y}px`);
+    this.el.classList.toggle("tmg-media-smenu-drop-down", y < cRect.height / 2);
+  }
+};
+__publicField(SettingsMenu, "componentName", "SettingsMenu");
+
+// src/ts/plugs/settings/settingsView/index.ts
+var SettingsViewPlug = class extends BasePlug {
+  constructor(ctlr, config, state) {
+    super(ctlr, config, state);
+    __publicField(this, "closeBtn");
+    __publicField(this, "menu");
+    __publicField(this, "wasPaused", false);
+    __publicField(this, "viewReady", false);
+    this.menu = new SettingsMenu(this.ctlr, this.config.menu);
+  }
+  mount() {
+    this.closeBtn = this.ctlr.queryDOM(".tmg-media-settings-close-btn");
+    !this.config.menu.disabled && this.menu.mount(this.enterView);
+  }
+  unmount() {
+    this.media.container.classList.remove("tmg-media-settings-view");
+    this.ctlr.queryDOM(".tmg-media-settings-tips-btn")?.remove(), this.ctlr.queryDOM(".tmg-media-settings-brand-wrapper")?.remove(), this.ctlr.queryDOM(".tmg-media-settings-theme-wrapper")?.remove();
+  }
+  wire() {
+    this.closeBtn?.addEventListener("click", this.leaveView, { signal: this.signal });
+    this.media.on("state.paused", ({ value }) => !value && this.leaveView(), { signal: this.signal });
+    this.ctlr.registerAction("settings", { fn: this.toggleView, keyboard: { phase: "keyup" }, zen: true });
+    !this.config.menu.disabled && this.menu.wire(), super.wire();
+  }
+  async enterView() {
+    if (this.ctlr.isUIActive("settings")) return;
+    if (!this.viewReady) this.initView(), this.viewReady = true;
+    this.menu.close();
+    this.wasPaused = this.media.state.paused;
+    if (this.config.autoPause) (0, import_modules.silence)(() => this.media.intent.paused = true);
+    this.media.container.classList.add("tmg-media-settings-view");
+    await mockAsync(parseCSSTime(this.settings.css.settingsViewTransitionTime));
+    this.ctlr.plug("settings.overlay")?.show();
+    this.ctlr.DOM.settings?.removeAttribute("inert"), this.ctlr.DOM.containerContent?.setAttribute("inert", "");
+    this.closeBtn?.focus();
+  }
+  // #STANDALONE: needs scoped behavior
+  async leaveView() {
+    if (!this.ctlr.isUIActive("settings")) return;
+    this.media.container.classList.remove("tmg-media-settings-view");
+    await mockAsync(parseCSSTime(this.settings.css.settingsViewTransitionTime));
+    if (this.config.autoPause) (0, import_modules.silence)(() => this.media.intent.paused = this.wasPaused);
+    this.ctlr.DOM.settings?.setAttribute("inert", ""), this.ctlr.DOM.containerContent?.removeAttribute("inert");
+  }
+  // #STANDALONE: needs scoped behavior
+  async toggleView() {
+    this.ctlr.isUIActive("settings") ? await this.leaveView() : await this.enterView();
+  }
+  initView() {
+    const options = [{ option: "Light Blue", value: "#3198f5" }, { option: "Hot Pink", value: "#ff69b4" }, { option: "Fiery Red", value: "#ff0033" }, { option: "Dark Turquoise", value: "#00ced1" }, { option: "Custom Hue", value: "custom" }, { option: "Video Derived", value: "auto" }], gcolors = options.slice(0, -2).map((opt) => opt.value), defs = { brand: this.settings.css.brandColor ?? "#e26e02", theme: this.settings.css.themeColor ?? "#ffffff", bcolors: ["#e26e02", ...gcolors], tcolors: ["#ffffff", ...gcolors] }, bField = t007.field({ type: "select", label: "Brand Color", helperText: { info: "Just try changing your brand color for now" }, options: [{ option: "Tastey Orange", value: "#e26e02" }, ...options], value: !defs.bcolors.includes(defs.brand) ? !this.settings.css.syncWithMedia.brandColor ? "custom" : "auto" : defs.brand }), cBField = t007.field({ type: "color" }), tField = t007.field({ type: "select", label: "Theme Color", helperText: { info: "Also try changing your theme color for now" }, options: [{ option: "Pure White", value: "#ffffff" }, ...options], value: !defs.tcolors.includes(defs.theme) ? !this.settings.css.syncWithMedia.themeColor ? "custom" : "auto" : defs.theme }), cTField = t007.field({ type: "color" }), bWrapper = (0, import_utils.createEl)("div", { className: "tmg-media-settings-brand-wrapper" }), tWrapper = (0, import_utils.createEl)("div", { className: "tmg-media-settings-theme-wrapper" });
+    this.ctlr.config.watch("settings.css.brandColor", (v = defs.brand) => (v = v.toLowerCase(), cBField.inputEl.value = v, cBField.style.setProperty("--input-color", v), bField.inputEl.value = !defs.bcolors.includes(v) ? !this.settings.css.syncWithMedia.brandColor ? "custom" : "auto" : v), { init: true, signal: this.signal });
+    this.ctlr.config.watch("settings.css.themeColor", (v = defs.theme) => (v = v.toLowerCase(), cTField.inputEl.value = v, cTField.style.setProperty("--input-color", v), tField.inputEl.value = !defs.tcolors.includes(v) ? !this.settings.css.syncWithMedia.themeColor ? "custom" : "auto" : v), { init: true, signal: this.signal });
+    this.ctlr.DOM.settingsBottomPanel?.append((bWrapper.append(bField, cBField), bWrapper), (tWrapper.append(tField, cTField), tWrapper));
+    const id = { theme: "", brand: "" }, sync = (cb, req = true, type = "brand") => (this.settings.css.syncWithMedia[`${type}Color`] = req, cb(req)), assert = (opts, type = "brand") => this.ctlr.plug("settings.toasts")?.toast?.update(id[type], { render: `Still here in case you change your choice about the ${type}`, ...opts }), onBColorChange = ({ target: { value: val } }) => this.ctlr.throttle(
+      "brandColorPicking",
+      async () => {
+        id.brand && t007.toast?.dismiss(id.brand);
+        let col;
+        if (val === "custom") return cBField.inputEl.click();
+        if (val !== "auto") col = this.settings.css.brandColor = val;
+        else col = this.settings.css.brandColor = (this.media.status.loadedData ? await this.ctlr.plug("settings.frame")?.getMainColor(this.media.state.currentTime) : null) ?? this.ctlr.plug("settings.css")?._cache.brandColor;
+        const cb = (s) => bField.inputEl.value = defs.bcolors.includes(col) ? col : s ? "auto" : "custom", No = () => (sync(cb, false), assert({ actions: { Yes } })), Yes = () => (sync(cb, true), assert({ actions: { No } }));
+        sync(cb, val === "auto");
+        val === "auto" && (id.brand = this.ctlr.plug("settings.toasts")?.toast?.("Should the brand color change anytime a video loads?", { icon: "\u{1F3A8}", autoClose: 15e3, hideProgressBar: false, actions: { Yes, No }, onClose: () => id.brand = "", signal: this.signal }) || "");
+      },
+      150
+    ), onTColorChange = ({ target: { value: val } }) => this.ctlr.throttle(
+      "themeColorPicking",
+      async () => {
+        id.theme && t007.toast?.dismiss(id.theme);
+        let col;
+        if (val === "custom") return cTField.inputEl.click();
+        if (val !== "auto") col = this.settings.css.themeColor = val;
+        else col = this.settings.css.themeColor = (this.media.status.loadedData ? await this.ctlr.plug("settings.frame")?.getMainColor(this.media.state.currentTime) : null) ?? this.ctlr.plug("settings.css")?._cache.themeColor;
+        const cb = (s) => tField.inputEl.value = defs.tcolors.includes(col) ? col : s ? "auto" : "custom", No = () => (sync(cb, false, "theme"), assert({ actions: { Yes } }, "theme")), Yes = () => (sync(cb, true, "theme"), assert({ actions: { No } }, "theme"));
+        sync(cb, val === "auto", "theme");
+        val === "auto" && (id.theme = this.ctlr.plug("settings.toasts")?.toast?.("Should the theme color change anytime a video loads?", { icon: "\u{1F3A8}", autoClose: 15e3, hideProgressBar: false, actions: { Yes, No }, onClose: () => id.theme = "", signal: this.signal }) || "");
+      },
+      150
+    );
+    bField.inputEl.addEventListener("input", onBColorChange), cBField.inputEl.addEventListener("input", onBColorChange);
+    tField.inputEl.addEventListener("input", onTColorChange), cTField.inputEl.addEventListener("input", onTColorChange);
+    const tipsBtn = (0, import_utils.createEl)("button", { className: "tmg-media-settings-tips-btn", innerHTML: `<span>\u{1F4A1} Did You Know?</span>` });
+    this.closeBtn?.insertAdjacentElement("afterend", tipsBtn);
+    tipsBtn.addEventListener("click", this.showTipsDialog, { signal: this.signal });
+  }
+  getTipsHTML() {
+    return `
+      <div style="text-align: left; font-family: inherit; color: inherit;">
+        <div style="text-align: center; margin-bottom: 25px;">
+          <h2 style="margin: 0 0 10px 0; letter-spacing: -0.5px;">\u{1F3AC} Welcome to TVP</h2>
+          <p style="margin: 0; opacity: 0.9; line-height: 1.5;">
+            You aren't just watching a video; you're sitting in the cockpit of the most advanced, performance-first media engine on the web. We are thrilled to have you here. 
+            <br><strong>Here is your official flight manual to unlock its full power:</strong>
+          </p>
+        </div>
+        <h3 style="margin-top: 0; margin-bottom: 10px; border-bottom: 1px solid currentColor; padding-bottom: 5px; opacity: 0.85;">\u{1F39B}\uFE0F The Smart Canvas (Touch & Mouse)</h3>
+        <ul style="padding-left: 20px; line-height: 1.6; margin-bottom: 25px;">
+          <li><strong>Hyper-Speed on Demand:</strong> Click and hold the right side of the video screen or the play key (<strong>Spacebar</strong>) to fast-forward, left side or <strong>Shift</strong> + play key rewinds.</li>
+          <li><strong>Smart Scrubbing:</strong> Don't hunt for the tiny progress bar. Just scroll horizontally across the middle of the screen to scrub smoothly through time.</li>
+          <li><strong>Invisible Sliders:</strong> Scroll vertically on the <em>right edge</em> for Volume, and the <em>left edge</em> for Brightness.</li>
+          <li><strong>Precision Taps:</strong> Double-tap the edges to skip forward or backward. Double tap the center to toggle Fullscreen (or Play/Pause on mobile).</li>
+        </ul>
+        <h3 style="margin-top: 0; margin-bottom: 10px; border-bottom: 1px solid currentColor; padding-bottom: 5px; opacity: 0.85;">\u{1F3D7}\uFE0F Total UI Control</h3>
+        <ul style="padding-left: 20px; line-height: 1.6; margin-bottom: 25px;">
+          <li><strong>Build Your Own Player:</strong> Don't like our layout? <strong>Click and drag</strong> almost any button on the bottom control bar to physically rearrange the interface exactly how you want it.</li>
+          <li><strong>Draggable Subtitles:</strong> Subtitles blocking a crucial part of the scene? Just grab the text box and drag it anywhere else on the screen.</li>
+          <li><strong>The Chameleon Engine:</strong> Head to settings and set your Brand/Theme colors to "Video Derived". TVP will actively analyze the video frames and extract dominant colors to paint the UI dynamically.</li>
+          <li><strong>Descriptive Hints:</strong> Hover over the controls to expose their tooltips and get more information about how to trigger each function.</li>
+        </ul>
+        <h3 style="margin-top: 0; margin-bottom: 10px; border-bottom: 1px solid currentColor; padding-bottom: 5px; opacity: 0.85;">\u2328\uFE0F Keyboard Ninja Status</h3>
+        <ul style="padding-left: 20px; line-height: 1.6; margin-bottom: 25px;">
+          <li><strong>The Playback Trinity (J, K, L):</strong> Skip backward, Play/Pause, and Skip forward like a pro editor. Do the same with arrow keys, hold <strong>Ctrl</strong>, <strong>Shift</strong> or <strong>Alt</strong> to spice things up.</li>
+          <li><strong>Time Travel (0 - 9):</strong> Hit any number key to instantly jump to that percentage of the video (e.g., hitting '5' jumps to the exact middle).</li>
+          <li><strong>Frame-by-Frame:</strong> Paused the video? Use <strong>,</strong> (comma) and <strong>.</strong> (period) to step backward or forward one single frame at a time.</li>
+          <li><strong>Warp Speed:</strong> Use <strong>&gt;</strong> and <strong>&lt;</strong> to crank the playback speed up or down.</li>
+        </ul>
+        <h3 style="margin-top: 0; margin-bottom: 10px; border-bottom: 1px solid currentColor; padding-bottom: 5px; opacity: 0.85;">\u{1F52C} Advanced Window Tech</h3>
+        <ul style="padding-left: 20px; line-height: 1.6; margin-bottom: 20px;">
+          <li><strong>The Snapshot Engine:</strong> Click the Camera icon or press <strong>s</strong> to screenshot a high-res image of the exact frame. <em>(Easter Egg: Double-Click or press <strong>Alt + s</strong> to capture in pure Black &amp; White!)</em></li>
+          <li><strong>Ultra-readable Time:</strong> Click the time display or press <strong>q</strong> to toggle between elapsed time and remaining time. <em>(Easter Egg: Double-Click or press <strong>z</strong> to display the time in different formats!)</em></li>
+          <li><strong>Floating Miniplayer:</strong> Start playing a video and just scroll down the page. TVP will automatically detach into a draggable miniplayer so you never miss a second.</li>
+          <li><strong>Custom Picture-in-Picture:</strong> We bypassed standard browser limits to give you a floating player that actually keeps all your custom UI controls intact.</li>
+        </ul>
+        <div style="text-align: center; margin-top: 30px; padding: 15px; border-radius: 8px; background: rgba(128, 128, 128, 0.1);">
+          <p style="margin: 0 0 10px 0;"><strong>Enjoy the engine.</strong> We're still in active development, but we're already miles ahead. Welcome to the bleeding edge.</p>
+          <p style="margin: 0; opacity: 0.8;">\u{1F9EA} <strong>Beta Tester?</strong> Check the bottom of the page to find the hidden button to travel through linear time, or <a href="mailto:tobioketade007@gmail.com" style="color: inherit; text-decoration: underline;">drop me an email</a> to collaborate!</p>
+          </div>
+        </div>
+      `;
+  }
+  async showTipsDialog() {
+    await this.leaveView();
+    t007.alert(this.getTipsHTML(), { id: `${this.ctlr.config.id}-tips-dialog`, rootElement: this.ctlr.DOM.containerContent, confirmText: "Got it!" });
+  }
+  onDestroy() {
+    this.menu.destroy(), super.onDestroy();
+  }
+};
+__publicField(SettingsViewPlug, "plugName", "settingsView");
+__publicField(SettingsViewPlug, "BUILD", SETTINGS_BUILD);
+//# sourceMappingURL=index.cjs.map