tmg-media-player 0.0.1

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

@@ -0,0 +1,1031 @@
+"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/controlPanel/index.ts
+var controlPanel_exports = {};
+__export(controlPanel_exports, {
+  BIG_CONTROLS: () => BIG_CONTROLS,
+  CONTROLS: () => CONTROLS,
+  CONTROL_PANEL_BUILD: () => CONTROL_PANEL_BUILD,
+  CONTROL_PANEL_DRAGGABLE_BUILD: () => CONTROL_PANEL_DRAGGABLE_BUILD,
+  ControlPanelDraggablePin: () => ControlPanelDraggablePin,
+  ControlPanelPlug: () => ControlPanelPlug,
+  ROWS_ARR: () => ROWS_ARR
+});
+module.exports = __toCommonJS(controlPanel_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 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 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 isBool(val) {
+  return "boolean" === typeof val;
+}
+function isStr(val) {
+  return "string" === typeof val;
+}
+function isArr(obj) {
+  return Array.isArray(obj);
+}
+function isFunc(val) {
+  return "function" === typeof val;
+}
+function inBoolArrOpt(opt, str) {
+  return opt?.includes?.(str) ?? opt;
+}
+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 limited(FN_KEY2, fn, opts = {}) {
+  let count = 0, { key, maxTimes: max = 1, oncePerSession = true } = isStr(opts) ? { key: opts } : opts;
+  const getReg = () => JSON.parse(localStorage.getItem(FN_KEY2) || "{}"), setReg = (r) => localStorage.setItem(FN_KEY2, JSON.stringify(r));
+  const handle = (...args) => {
+    if (oncePerSession && count > 0) return void 0;
+    if (!key) return count++ < max ? fn(...args) : void 0;
+    const r = getReg(), c = r[key] || 0;
+    return c < max ? (count++, r[key] = c + 1, setReg(r), fn(...args)) : void 0;
+  };
+  handle.left = max - (handle.count = count);
+  handle.reset = () => (count = 0, key && ((r) => (delete r[key], setReg(r)))(getReg()));
+  handle.block = () => (count = max, key && ((r) => (r[key] = max, setReg(r)))(getReg()));
+  return handle;
+}
+var mockAsync = (timeout = 250) => new Promise((resolve) => (0, import_utils5.setTimeout)(resolve, timeout));
+function bindCleanupToSignal(cleanup, signal) {
+  signal?.aborted ? cleanup() : signal?.addEventListener("abort", cleanup, { once: true });
+  if (signal && !signal.aborted) cleanup = (() => (signal.removeEventListener("abort", cleanup), cleanup()));
+  return cleanup;
+}
+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/consts/generics.ts
+var FN_KEY = "tmg_fn_registry";
+
+// src/ts/utils/obj.ts
+var import_utils9 = require("sia-reactor/utils");
+function parsePanelBottomObj(obj = [], arr = false) {
+  if (!(0, import_utils3.isObj)(obj) && !isArr(obj)) return false;
+  const [third = [], second = [], first = []] = (0, import_utils3.isObj)(obj) ? Object.values(obj).reverse() : isArr(obj[0]) ? [...obj].reverse() : [obj];
+  return arr ? [...third, ...second, ...first] : { 1: first, 2: second, 3: third };
+}
+function getPanelSplitCtrls(row) {
+  if (!row?.length) return { left: [], center: [], right: [] };
+  const s1 = row.indexOf("spacer"), s2 = row.indexOf("spacer", s1 + 1);
+  return s1 === -1 ? { left: row, center: [], right: [] } : s2 === -1 ? { left: row.slice(0, s1), center: [], right: row.slice(s1 + 1) } : { left: row.slice(0, s1), center: row.slice(s1 + 1, s2), right: row.slice(s2 + 1) };
+}
+function getPanelLocation(b, id) {
+  if (isArr(b.top) && b.top.includes(id)) return { path: "top", row: b.top, zone: getPanelSplitCtrls(b.top).left.includes(id) ? "left" : getPanelSplitCtrls(b.top).center.includes(id) ? "center" : "right" };
+  if (isArr(b.center) && b.center.includes(id)) return { path: "center", row: b.center, zone: "zone" };
+  if (b.bottom) {
+    const dB = parsePanelBottomObj(b.bottom);
+    if (dB) {
+      for (const k in dB) if (dB[k]?.includes(id)) return { path: `bottom.${k}`, row: dB[k], zone: getPanelSplitCtrls(dB[k]).left.includes(id) ? "left" : getPanelSplitCtrls(dB[k]).center.includes(id) ? "center" : "right" };
+    }
+  }
+  return { path: "bottom.1", row: [], zone: "left" };
+}
+
+// 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/plugs/base/index.ts
+var import_utils15 = 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_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/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_utils15.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_utils15.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");
+var BasePin = class extends Controllable {
+  static get surname() {
+    return this.Plug.plugName;
+  }
+  static get fullName() {
+    return this.surname + "." + this.pinName;
+  }
+  get name() {
+    return this.constructor.Plug.fullName;
+  }
+  get plug() {
+    return this.ctlr.plug(this.constructor.Plug.fullName);
+  }
+  constructor(ctlr, config, state) {
+    super(ctlr, config, state);
+    const path = new.target.Plug.fullName + "." + new.target.pinName;
+    this.ctlr.config.watch(path, () => this.config = (0, import_utils15.getPath)(this.ctlr.config, path), { signal: this.signal });
+  }
+  onSetup() {
+  }
+  // plug handles mount and wire
+  onDestroy() {
+    this.unmount?.();
+  }
+  mount() {
+  }
+  unmount() {
+  }
+  wire() {
+  }
+};
+__publicField(BasePin, "pinName");
+__publicField(BasePin, "Plug");
+__publicField(BasePin, "BUILD");
+
+// src/ts/utils/env.ts
+var win = "undefined" !== typeof window ? window : void 0;
+var nav = win?.navigator;
+var ua = nav?.userAgent || "";
+var uaData = nav?.userAgentData;
+var IS_ANDROID = false;
+var IS_WINDOWS = false;
+var IS_FIREFOX = false;
+var IS_EDGE = false;
+var IS_CHROME = false;
+var IS_CHROMIUM = false;
+var IS_SAFARI = false;
+var IS_IE = false;
+var IS_TIZEN = false;
+var IS_WEBOS = false;
+var IS_IPOD = false;
+var IS_IPAD = false;
+var IS_IPHONE = false;
+var IOS_VERSION = null;
+var ANDROID_VERSION = null;
+var CHROME_VERSION = null;
+var CHROMIUM_VERSION = null;
+var IE_VERSION = null;
+var IS_IOS = false;
+var IS_MOBILE = false;
+var IS_SMART_TV = false;
+var IS_CHROMECAST_RECEIVER = Boolean(win?.cast?.framework?.CastReceiverContext);
+var MSE_ENABLED = Boolean(win && ("MediaSource" in win || "webkitMediaSource" in win));
+var TOUCH_ENABLED = Boolean(win && ("ontouchstart" in win || nav?.maxTouchPoints || win.DocumentTouch && win.document instanceof win.DocumentTouch));
+if (uaData?.platform && uaData?.brands) {
+  const pickVersion = (brands, needle) => brands.find((b) => b.brand === needle && b.version)?.version || null;
+  IS_ANDROID = uaData.platform === "Android";
+  IS_WINDOWS = uaData.platform === "Windows";
+  IS_EDGE = uaData.brands.some((b) => b.brand === "Microsoft Edge");
+  IS_CHROMIUM = uaData.brands.some((b) => b.brand === "Chromium" || b.brand === "Google Chrome");
+  IS_CHROME = IS_CHROMIUM && !IS_EDGE;
+  CHROMIUM_VERSION = CHROME_VERSION = pickVersion(uaData.brands, "Chromium") || pickVersion(uaData.brands, "Google Chrome");
+}
+if (true) {
+  IS_ANDROID || (IS_ANDROID = /Android/i.test(ua));
+  IS_WINDOWS || (IS_WINDOWS = /Windows/i.test(ua));
+  IS_FIREFOX = /Firefox|FxiOS/i.test(ua);
+  IS_EDGE || (IS_EDGE = /Edg|EdgiOS/i.test(ua));
+  IS_CHROMIUM || (IS_CHROMIUM = /Chrome|CriOS/i.test(ua));
+  IS_CHROME = IS_CHROMIUM && !IS_EDGE;
+  IS_SAFARI = /Safari/i.test(ua) && !IS_CHROME && !IS_FIREFOX && !IS_EDGE;
+  IS_IE = /MSIE|(Trident\/7.0)|(rv:11.0)/i.test(ua);
+  IS_TIZEN = /Tizen/i.test(ua);
+  IS_WEBOS = /Web0S/i.test(ua);
+  IS_IPOD = /iPod/i.test(ua);
+  IS_IPAD = /iPad/i.test(ua) || IS_SAFARI && TOUCH_ENABLED && !/iPhone/i.test(ua);
+  IS_IPHONE = /iPhone/i.test(ua) && !IS_IPAD;
+  IOS_VERSION = ua.match(/OS (\d+)_/i)?.[1] ?? null;
+  ANDROID_VERSION = ua.match(/Android\s(\d+(?:\.\d+)+)/i)?.[1] ?? null;
+  CHROMIUM_VERSION = CHROME_VERSION = ua.match(/(?:Chrome|CriOS)\/(\d+)/)?.[1] ?? CHROMIUM_VERSION;
+  IE_VERSION = ua.match(/MSIE\s(\d+)\.\d/)?.[1] || (/Trident\/7.0/i.test(ua) && /rv:11.0/.test(ua) ? "11.0" : null);
+}
+IS_IOS = IS_IPHONE || IS_IPAD || IS_IPOD;
+IS_MOBILE = Boolean(IS_ANDROID || IS_IPHONE || IS_IPOD || IS_IPAD);
+IS_SMART_TV = IS_TIZEN || IS_WEBOS;
+
+// src/ts/plugs/settings/controlPanel/build.ts
+var ROWS_ARR = [1, 2, 3];
+var CONTROLS = ["expandminiplayer", "removeminiplayer", "meta", "timeline", "capture", "fullscreenorientation", "fullscreenlock", "backward10", "prev", "playpause", "next", "forward10", "brightness", "volume", "timeandduration", "spacer", "captions", "settings", "objectfit", "pictureinpicture", "theater", "fullscreen", "cast", "airplay", "chapter"];
+var BIG_CONTROLS = ["bigprev", "bigplaypause", "bignext"];
+var CONTROL_PANEL_DRAGGABLE_BUILD = ["", "big", "wrapper"];
+var CONTROL_PANEL_BUILD = {
+  profile: true,
+  title: true,
+  artist: true,
+  top: ["expandminiplayer", "spacer", "meta", "spacer", "capture", "fullscreenlock", "airplay", "cast", "fullscreenorientation", "removeminiplayer"],
+  center: ["bigprev", "bigplaypause", "bignext"],
+  bottom: {
+    1: [],
+    2: ["spacer", "timeline", "spacer"],
+    3: [...!IS_MOBILE ? ["prev", "playpause", "next"] : [], "brightness", "volume", "timeandduration", "chapter", "spacer", "captions", "settings", "objectfit", "pictureinpicture", "theater", "fullscreen"]
+  },
+  buffer: {
+    value: "eclipse",
+    options: [
+      { value: "eclipse", display: "Eclipse" },
+      { value: "accent", display: "Accent" },
+      { value: false, display: "Off" }
+    ]
+  },
+  timeline: {
+    thumb: {
+      value: true,
+      options: [
+        { value: "auto", display: "Auto" },
+        { value: true, display: "On" },
+        { value: false, display: "Off" }
+      ]
+    },
+    previews: false,
+    scrub: {
+      sync: false,
+      relative: !IS_MOBILE,
+      cancel: {
+        delta: 15,
+        timeout: 2e3
+      }
+    },
+    label: "Media Timeline",
+    tooltip: false,
+    autopause: true,
+    compact: IS_MOBILE,
+    bufferMarks: false,
+    playedMarks: false
+  },
+  progressBar: IS_MOBILE
+  // draggable: CONTROL_PANEL_DRAGGABLE_BUILD,
+};
+
+// src/ts/utils/dom.ts
+var import_sia_reactor7 = require("sia-reactor");
+
+// src/ts/utils/fn.ts
+var limited2 = (fn, opts = {}) => limited(FN_KEY, fn, opts);
+
+// ../t007-tools/packages/utils/dist/hooks/vanilla.js
+var import_sia_reactor5 = require("sia-reactor");
+var import_sia_reactor6 = require("sia-reactor");
+function initScrollAssist(el, { pxPerSecond = 80, assistClassName = "t007-scroll-assist", vertical = true, horizontal = true } = import_sia_reactor5.NIL) {
+  const parent = el?.parentElement, existing = (t007._scrollers ?? (t007._scrollers = /* @__PURE__ */ new WeakMap())).get(el);
+  if (!parent || existing) return existing ? existing : void 0;
+  t007._scrollers_r_observer ?? (t007._scrollers_r_observer = new ResizeObserver((entries) => {
+    for (const { target } of entries) t007._scrollers.get(target)?.update();
+  }));
+  t007._scrollers_m_observer ?? (t007._scrollers_m_observer = new MutationObserver((entries) => {
+    const els = /* @__PURE__ */ new Set();
+    for (const entry of entries) {
+      let node = entry.target instanceof Element ? entry.target : null;
+      while (node && !t007._scrollers.has(node)) node = node.parentElement;
+      if (node) els.add(node);
+    }
+    for (const el2 of els) t007._scrollers.get(el2)?.update();
+  }));
+  const assist = {};
+  let scrollId = null, last = performance.now(), assistWidth = 20, assistHeight = 20;
+  const update = () => {
+    const hasInteractive = !!parent.querySelector(INTERACTIVE_SELECTOR);
+    if (horizontal) {
+      const w = assist.left?.offsetWidth || assistWidth, check = hasInteractive ? el.clientWidth < w * 2 : false;
+      assist.left.style.display = check ? "none" : el.scrollLeft > 0 ? "block" : "none";
+      assist.right.style.display = check ? "none" : el.scrollLeft + el.clientWidth < el.scrollWidth - 1 ? "block" : "none";
+      assistWidth = w;
+    }
+    if (vertical) {
+      const h = assist.up?.offsetHeight || assistHeight, check = hasInteractive ? el.clientHeight < h * 2 : false;
+      assist.up.style.display = check ? "none" : el.scrollTop > 0 ? "block" : "none";
+      assist.down.style.display = check ? "none" : el.scrollTop + el.clientHeight < el.scrollHeight - 1 ? "block" : "none";
+      assistHeight = h;
+    }
+  };
+  const scroll = (dir) => {
+    const frame = () => {
+      const now = performance.now(), dt = now - last;
+      last = now;
+      const d = pxPerSecond * dt / 1e3;
+      if (dir === "left") el.scrollLeft = Math.max(0, el.scrollLeft - d);
+      if (dir === "right") el.scrollLeft = Math.min(el.scrollWidth - el.clientWidth, el.scrollLeft + d);
+      if (dir === "up") el.scrollTop = Math.max(0, el.scrollTop - d);
+      if (dir === "down") el.scrollTop = Math.min(el.scrollHeight - el.clientHeight, el.scrollTop + d);
+      scrollId = requestAnimationFrame(frame);
+    };
+    last = performance.now();
+    frame();
+  };
+  const stop = () => (cancelAnimationFrame(scrollId ?? 0), scrollId = null);
+  const addAssist = (dir) => {
+    const div = (0, import_utils.createEl)("div", { className: assistClassName }, { scrollDirection: dir }, { display: "none" });
+    if (!div) return;
+    for (const evt of ["pointerenter", "dragenter"]) div.addEventListener(evt, () => scroll(dir));
+    for (const evt of ["pointerleave", "pointerup", "pointercancel", "dragleave", "dragend"]) div.addEventListener(evt, stop);
+    dir === "left" || dir === "up" ? parent.insertBefore(div, el) : parent.append(div);
+    assist[dir] = div;
+  };
+  if (horizontal) for (const dir of ["left", "right"]) addAssist(dir);
+  if (vertical) for (const dir of ["up", "down"]) addAssist(dir);
+  const handle = {
+    update,
+    destroy() {
+      stop(), el.removeEventListener("scroll", update);
+      t007._scrollers_r_observer.unobserve(el), t007._scrollers.delete(el);
+      for (const a of Object.values(assist)) a.remove();
+    }
+  };
+  update(), el.addEventListener("scroll", update);
+  t007._scrollers_r_observer.observe(el), t007._scrollers_m_observer.observe(el, { childList: true, subtree: true, characterData: true });
+  return t007._scrollers.set(el, handle), handle;
+}
+var removeScrollAssist = (el) => t007._scrollers.get(el)?.destroy();
+
+// src/ts/utils/dom.ts
+var win2 = "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 = win2 ? 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 = win2 ? new ResizeObserver((entries) => {
+  for (const entry of entries) if (entry.target._resizeCbs) for (const cb of entry.target._resizeCbs) cb(entry);
+}) : null;
+var mutationObserver = win2 ? new MutationObserver((mutations) => {
+  const target = mutations[0].target;
+  if (target._mutationCbs) for (const cb of target._mutationCbs) cb(mutations);
+}) : null;
+function observeResize(el, cb, sig) {
+  (el._resizeCbs ?? (el._resizeCbs = /* @__PURE__ */ new Set())).add(cb);
+  resizeObserver?.observe(el);
+  return bindCleanupToSignal(() => (el._resizeCbs?.delete(cb), !el._resizeCbs?.size && resizeObserver?.unobserve(el)), sig);
+}
+
+// src/ts/plugs/settings/controlPanel/index.ts
+var import_utils23 = require("sia-reactor/utils");
+
+// src/ts/plugs/settings/controlPanel/draggable.ts
+var import_utils22 = require("sia-reactor/utils");
+
+// src/ts/plugs/settings/toasts/index.ts
+var import_utils21 = require("sia-reactor/utils");
+var import_sia_reactor8 = require("sia-reactor");
+var tutorialOpts = (onGotIt = import_sia_reactor8.NOOP) => ({ type: "info", icon: "\u{1F4A1}", position: "center-center", closeButton: true, hideProgressBar: false, animation: "fade", actions: { "Got it!": onGotIt } });
+
+// src/ts/plugs/settings/controlPanel/draggable.ts
+var ControlPanelDraggablePin = class extends BasePin {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "draggingEl", null);
+    __publicField(this, "replaced", null);
+    __publicField(this, "safeTimeoutId", -1);
+    __publicField(this, "teachBasics", limited2(
+      async (id = "meta", toast = this.ctlr.plug("settings.toasts")?.toast) => {
+        if (!toast) return;
+        const el = this.ctlr.queryDOM(`[data-control-id="meta"]`, true)[0], loc = getPanelLocation(this.ctlr._build.settings.controlPanel, "meta"), pos = (p, z) => p === "center" ? "center-center" : `${p.startsWith("top") ? "top" : "bottom"}-${z === "left" ? "left" : z === "right" ? "right" : "center"}`, startPos = pos(loc.path, loc.zone), emptyZones = [], cleanup = () => (el?.classList.remove("tmg-media-control-dragging"), this.ctlr.media.container.classList.remove("tmg-media-control-dragging"), emptyZones.forEach((x) => x.zone.classList.remove("tmg-media-dragover")), this.setEventListeners()), highlightZone = (z) => toast.isActive(tId) && (emptyZones.forEach((x) => x.zone.classList.remove("tmg-media-dragover")), z?.classList.add("tmg-media-dragover"));
+        for (const r of ["top", "bottom.1", "bottom.2", "bottom.3"])
+          for (const z of ["left", "center", "right"]) {
+            const row = r === "top" ? this.plug.slots.top : this.plug.slots.bottom[Number(r.split(".")[1])], slot = row[z];
+            if (!(slot instanceof HTMLElement) && slot.zone && !slot.zone.querySelector('[data-control-id]:not([data-control-id="spacer"])') && pos(r, z) !== startPos) emptyZones.push({ pos: pos(r, z), zone: slot.zone });
+          }
+        this.setEventListeners("remove"), el?.classList.add("tmg-media-control-dragging"), this.ctlr.media.container.classList.add("tmg-media-control-dragging"), this.ctlr.plug("settings.overlay")?.show();
+        const tId = toast(`Did you know you can drag the <b>Title</b> around${id !== "meta" ? " too" : ""}?`, { ...tutorialOpts(() => (this.teachBasics.block(), toast.dismiss(tId))), autoClose: false, onClose: cleanup, signal: this.signal });
+        await mockAsync(3500);
+        if (!toast.isActive(tId)) return;
+        toast(`You can move it from here...`, { id: tId, position: startPos });
+        if (emptyZones.length) {
+          await mockAsync(2500);
+          if (!toast.isActive(tId)) return;
+          highlightZone(emptyZones[0].zone), toast(`...to an empty space like here!`, { id: tId, position: emptyZones[0].pos });
+          for (let i = 1; i < emptyZones.length; i++) await mockAsync(2e3), toast.isActive(tId) && (highlightZone(emptyZones[i].zone), toast(`...or here!`, { id: tId, position: emptyZones[i].pos }));
+        }
+        await mockAsync(emptyZones.length ? 2e3 : 2500);
+        if (toast.isActive(tId)) highlightZone(), toast(`Try dragging it to an empty space now!`, { id: tId, position: "center-center", autoClose: 3500 }), cleanup();
+      },
+      { key: "tmg_cp_tut_1", maxTimes: 5 }
+    ));
+  }
+  static get Plug() {
+    return ControlPanelPlug;
+  }
+  wire() {
+    this.ctlr.config.on("settings.controlPanel.draggable", ({ value }) => this.setEventListeners(value ? "add" : "remove"), { init: true, signal: this.signal });
+  }
+  setEventListeners(action = this.config ? "add" : "remove") {
+    for (const c of this.ctlr.queryDOM("[data-draggable-control]", true)) {
+      c.dataset.dragId = c.dataset.dragId ?? "";
+      const act = !inBoolArrOpt(this.config, c.dataset.dragId) ? "remove" : action;
+      c.dataset.draggableControl = String(c.draggable = act === "add");
+      c[`${act}EventListener`]("dragstart", this.handleDragStart, { signal: this.signal });
+      c[`${act}EventListener`]("drag", this.handleDrag, { signal: this.signal });
+      c[`${act}EventListener`]("dragend", this.handleDragEnd, { signal: this.signal });
+    }
+    for (const c of [...this.ctlr.queryDOM("[data-drop-zone][data-drag-id]", true), ...this.plug.zoneEls]) {
+      c.dataset.dragId = c.dataset.dragId ?? "";
+      const act = !inBoolArrOpt(this.config, c.dataset.dragId) ? "remove" : action;
+      c.dataset.dropZone = String(act === "add");
+      c[`${act}EventListener`]("dragenter", this.handleDragEnter, { signal: this.signal });
+      c[`${act}EventListener`]("dragover", this.handleDragOver, { signal: this.signal });
+      c[`${act}EventListener`]("drop", this.handleDragLeave, { signal: this.signal });
+      c[`${act}EventListener`]("dragleave", this.handleDragLeave, { signal: this.signal });
+    }
+  }
+  handleDragStart(e) {
+    const { target: t, dataTransfer } = e;
+    if (!t?.tagName || t.dataset.draggableControl !== "true") return;
+    if (t.matches(":has(:is(input,[role='slider']):is(:hover, :active))")) return e.preventDefault();
+    dataTransfer.effectAllowed = "move";
+    this.draggingEl = t;
+    (0, import_utils5.requestAnimationFrame)(() => (t.classList.add("tmg-media-control-dragging"), this.ctlr.media.container.classList.add("tmg-media-control-dragging")), this.signal);
+    this.safeTimeoutId = (0, import_utils5.setTimeout)(() => (t.classList.remove("tmg-media-control-dragging"), this.ctlr.media.container.classList.remove("tmg-media-control-dragging")), 1e3, this.signal);
+    if (t.dataset.dragId !== "wrapper" || t.parentElement?.dataset.dragId !== "wrapper") return;
+    const { path, shell } = this.getShellPath(t, true);
+    (0, import_utils22.setPath)(this.plug.slots, path, shell);
+    this.replaced = { target: t.parentElement, child: shell.cover };
+  }
+  handleDrag() {
+    clearTimeout(this.safeTimeoutId);
+  }
+  handleDragEnd(e, t = e.target) {
+    if (!t?.tagName) return;
+    t.classList.remove("tmg-media-control-dragging"), this.ctlr.media.container.classList.remove("tmg-media-control-dragging");
+    this.replaced = this.draggingEl = null;
+    if (t.dataset.dragId === "wrapper" && t.parentElement?.dataset.dragId === "wrapper") (0, import_utils22.setPath)(this.plug.slots, this.getShellPath(t), t);
+    this.syncConfig(), this.teachBasics(t.dataset.controlId);
+  }
+  handleDragEnter(e) {
+    !this.noDropOff(e.target) && this.draggingEl && e.target.classList.add("tmg-media-dragover");
+  }
+  handleDragOver(e) {
+    const { target: t, clientX: x, dataTransfer } = e;
+    if (this.noDropOff(t)) return;
+    e.preventDefault();
+    if (dataTransfer) dataTransfer.dropEffect = "move";
+    this.ctlr.throttle(
+      "dragOver",
+      () => {
+        if (t.dataset.dragId === "wrapper") {
+          const atWrapper = getElSiblingAt(x, "x", t.querySelectorAll('.tmg-media-side-controls-wrapper-cover:has([data-drop-zone="true"][data-drag-id=""]:empty)'), "at");
+          if (!atWrapper) return;
+          this.replaced?.target.replaceChild(this.replaced.child, this.draggingEl);
+          this.replaced = { target: t, child: atWrapper };
+          return t.replaceChild(this.draggingEl, atWrapper);
+        }
+        const afterCtrl = getElSiblingAt(x, "x", t.querySelectorAll("[draggable=true]:not(.tmg-media-control-dragging)"));
+        afterCtrl ? t.insertBefore(this.draggingEl, afterCtrl) : t.append(this.draggingEl);
+        if (!t.dataset.dragId) for (const el of this.plug.zoneEls) this.plug.handleCompsView(el);
+      },
+      500,
+      false
+    );
+  }
+  handleDragLeave(e) {
+    !this.noDropOff(e.target) && e.target.classList.remove("tmg-media-dragover");
+  }
+  noDropOff(t, drop = this.draggingEl) {
+    return !drop?.tagName || t.dataset.dropZone !== "true" || t.dataset.dragId !== drop.dataset.dragId && (t.dataset.dragId === "wrapper" || drop.dataset.dragId === "wrapper");
+  }
+  getShellPath(target, both = false) {
+    let key = "";
+    const pos = { 0: "left", 1: "center", 2: "right" }[[...target.parentElement.children].indexOf(target)], cws = this.ctlr.queryDOM(".tmg-media-top-controls-wrapper, .tmg-media-bottom-sub-controls-wrapper", true);
+    cws.forEach((w, i) => w.contains(target) && (key = { 0: "top.", 1: "bottom.1.", 2: "bottom.2.", 3: "bottom.3." }[i]));
+    return both ? { path: key + pos, shell: (0, import_utils22.getPath)(this.plug.shells, key + pos) } : key + pos;
+  }
+  syncConfig() {
+    const id = (el) => el.dataset.controlId, derive = (slot, center = false) => [center ? "spacer" : "", ...slot instanceof HTMLElement ? [id(slot)] : Array.from(slot.zone.children, id), center && (slot instanceof HTMLElement || slot.zone.children.length) ? "spacer" : ""].filter(Boolean);
+    this.settings.controlPanel.top = [...derive(this.plug.slots.top.left), ...derive(this.plug.slots.top.center, true), ...derive(this.plug.slots.top.right)];
+    this.settings.controlPanel.center = derive(this.plug.shells.center);
+    this.settings.controlPanel.bottom = { 1: [...derive(this.plug.slots.bottom[1].left), ...derive(this.plug.slots.bottom[1].center, true), ...derive(this.plug.slots.bottom[1].right)], 2: [...derive(this.plug.slots.bottom[2].left), ...derive(this.plug.slots.bottom[2].center, true), ...derive(this.plug.slots.bottom[2].right)], 3: [...derive(this.plug.slots.bottom[3].left), ...derive(this.plug.slots.bottom[3].center, true), ...derive(this.plug.slots.bottom[3].right)] };
+  }
+};
+__publicField(ControlPanelDraggablePin, "pinName", "draggable");
+__publicField(ControlPanelDraggablePin, "BUILD", CONTROL_PANEL_DRAGGABLE_BUILD);
+
+// src/ts/plugs/settings/controlPanel/index.ts
+var ControlPanelPlug = class extends BasePlug {
+  constructor(ctlr, config = ctlr.settings.controlPanel) {
+    super(ctlr, config);
+    __publicField(this, "controls", /* @__PURE__ */ new Map());
+    __publicField(this, "draggable");
+    __publicField(this, "zoneEls");
+    __publicField(this, "shells");
+    __publicField(this, "slots");
+    __publicField(this, "slotters", /* @__PURE__ */ new WeakMap());
+    __publicField(this, "wratters", /* @__PURE__ */ new WeakMap());
+    __publicField(this, "scrollers", []);
+    __publicField(this, "topWrapper");
+    __publicField(this, "bigWrapper");
+    __publicField(this, "bottomWrapper");
+    const Pin = PinRegistry.get("controlPanel.draggable");
+    if (Pin) this.draggable = new Pin(this.ctlr, this.config.draggable);
+  }
+  mount() {
+    this.ctlr.DOM.topControlsWrapper = this.topWrapper = (0, import_utils.createEl)("div", { className: "tmg-media-top-controls-wrapper tmg-media-apt-controls-wrapper" }, { dropZone: "", dragId: "wrapper" });
+    this.ctlr.DOM.bigControlsWrapper = this.bigWrapper = (0, import_utils.createEl)("div", { className: "tmg-media-big-controls-wrapper" }, { dropZone: "", dragId: "big" });
+    this.ctlr.DOM.bottomControlsWrapper = this.bottomWrapper = (0, import_utils.createEl)("div", { className: "tmg-media-bottom-controls-wrapper" });
+    this.shells = { top: {}, center: {}, bottom: { 1: {}, 2: {}, 3: {} } };
+    this.shells.top = { left: this.buildShell("left"), center: this.buildShell("center"), right: this.buildShell("right") };
+    this.shells.center = { zone: this.bigWrapper, cover: (0, import_utils.createEl)("div", { className: "tmg-media-big-controls-wrapper-cover" }) };
+    for (const i of ROWS_ARR) this.shells.bottom[i] = { left: this.buildShell("left"), center: this.buildShell("center"), right: this.buildShell("right") };
+    this.slots = { top: {}, center: this.shells.center, bottom: { 1: {}, 2: {}, 3: {} } };
+    this.zoneEls = [...Object.values(this.shells.top), ...Object.values(this.shells.bottom).map((v) => Object.values(v))].flat().map((w) => w.zone);
+    this.shells.center.cover.append(this.shells.center.zone);
+    for (const i of ROWS_ARR) this.bottomWrapper.append((0, import_utils.createEl)("div", { className: `tmg-media-bottom-sub-controls-wrapper tmg-media-bottom-${i}-sub-controls-wrapper tmg-media-apt-controls-wrapper` }, { dropZone: "", dragId: "wrapper" }));
+    this.ctlr.DOM.controlsContainer?.append(this.topWrapper, this.shells.center.cover, this.bottomWrapper);
+    this.ctlr.config.set("settings.controlPanel.bottom", (v) => parsePanelBottomObj(v), { init: true, signal: this.signal });
+    this.ctlr.config.on("settings.controlPanel.top", this.handleTop, { init: true, signal: this.signal });
+    this.ctlr.config.on("settings.controlPanel.center", this.handleCenter, { init: true, signal: this.signal });
+    this.ctlr.config.on("settings.controlPanel.bottom", this.handleBottom, { init: true, signal: this.signal });
+    this.ctlr.config.on("settings.controlPanel.buffer.value", this.handleBuffer, { init: true, signal: this.signal });
+    this.draggable?.mount?.();
+  }
+  unmount() {
+    for (const w of [this.topWrapper, this.bigWrapper.parentElement, this.bottomWrapper]) w?.remove();
+  }
+  wire() {
+    this.ctlr.config.on("settings.controlPanel.timeline.thumb.value", ({ value }) => this.media.container.dataset.timelineThumb = String(value), { init: true, signal: this.signal });
+    this.ctlr.config.on("settings.controlPanel.timeline", (e, comp = this.comp("timeline")) => comp && (0, import_utils23.fanout)(comp.config, e.currentTarget.value), { signal: this.signal });
+    this.ctlr.config.on("settings.controlPanel.progressBar", ({ value }) => this.media.container.classList.toggle("tmg-media-progress-bar", value), { init: true, signal: this.signal });
+    this.draggable?.wire();
+    this.initScrollAndResize(), super.wire();
+  }
+  handleTop({ currentTarget: { value } }) {
+    if (!value || isBool(value)) return;
+    const { left, center, right } = getPanelSplitCtrls(value);
+    this.fillWrapper(this.topWrapper, [this.slots.top.left = this.getSlot(left, this.shells.top.left), this.slots.top.center = this.getSlot(center, this.shells.top.center), this.slots.top.right = this.getSlot(right, this.shells.top.right)]);
+    this.fillSlot(this.slots.top.left, left), this.fillSlot(this.slots.top.center, center), this.fillSlot(this.slots.top.right, right), this.ctlr.payload.wired && this.config.draggable && this.draggable?.setEventListeners("add");
+  }
+  handleCenter({ currentTarget: { value } }) {
+    value && !isBool(value) && this.fillSlot(this.slots.center, value), this.ctlr.payload.wired && this.config.draggable && this.draggable?.setEventListeners("add");
+  }
+  handleBottom({ currentTarget: { value } }) {
+    if (!value || isBool(value)) return;
+    for (const i of ROWS_ARR) {
+      const { left, center, right } = getPanelSplitCtrls(value[i]);
+      this.fillWrapper(this.bottomWrapper.children[i - 1], [this.slots.bottom[i].left = this.getSlot(left, this.shells.bottom[i].left), this.slots.bottom[i].center = this.getSlot(center, this.shells.bottom[i].center), this.slots.bottom[i].right = this.getSlot(right, this.shells.bottom[i].right)]);
+      this.fillSlot(this.slots.bottom[i].left, left), this.fillSlot(this.slots.bottom[i].center, center), this.fillSlot(this.slots.bottom[i].right, right);
+    }
+    this.ctlr.payload.wired && this.config.draggable && this.draggable?.setEventListeners("add");
+  }
+  handleBuffer({ value }) {
+    if (value && !this.controls.has("buffer")) this.initComp("buffer");
+    this.media.container.dataset.buffer = String(value);
+  }
+  initComp(name, comp = ComponentRegistry.init(name, this.ctlr, this.config[name])) {
+    return comp ? (this.controls.set(name, comp), comp) : void 0;
+  }
+  comp(name) {
+    return this.controls.get(name);
+  }
+  compEl(name) {
+    return this.controls.get(name)?.element;
+  }
+  getSlot(comps, fallback) {
+    return comps.length === 1 ? comps.includes("meta") ? (this.comp("meta") ?? this.initComp("meta"))?.element ?? fallback : comps.includes("timeline") ? (this.comp("timeline") ?? this.initComp("timeline"))?.element ?? fallback : fallback : fallback;
+  }
+  fillSlot(slot, comps) {
+    if (slot instanceof HTMLElement || !slot.zone) return;
+    let render = this.slotters.get(slot.zone);
+    !render && this.slotters.set(slot.zone, render = createListRenderer({ container: slot.zone, getKey: (id) => id, createNode: (id) => (this.comp(id) ?? this.initComp(id))?.element }));
+    render(comps), this.handleCompsView(slot.zone);
+  }
+  fillWrapper(wrapper, slots) {
+    let render = this.wratters.get(wrapper);
+    !render && this.wratters.set(wrapper, render = createListRenderer({ container: wrapper, getKey: (slot) => "cover" in slot ? slot.cover.dataset.shellId : slot.dataset.controlId, createNode: (slot) => slot instanceof HTMLElement ? slot : slot.cover ?? slot.zone }));
+    render(slots, false);
+  }
+  buildShell(side) {
+    const zone = (0, import_utils.createEl)("div", { className: `tmg-media-side-controls-wrapper tmg-media-${side}-side-controls-wrapper` }, { dropZone: "", shellId: side, scroller: side === "right" ? "reverse" : "" }), cover = (0, import_utils.createEl)("div", { className: `tmg-media-side-controls-wrapper-cover tmg-media-${side}-side-controls-wrapper-cover` }, { shellId: side });
+    return cover.append(zone), { cover, zone };
+  }
+  initScrollAndResize() {
+    for (const el of [...this.zoneEls, this.shells.center.zone]) {
+      this.handleCompsView(el);
+      this.scrollers.push((initScrollAssist(el, { pxPerSecond: el.dataset.dragId === "big" ? 120 : 60 }), el));
+      observeResize(el, () => this.handleCompsView(el), this.signal);
+      el.addEventListener("scroll", this.handleDirtyScroll, { passive: true, signal: this.signal });
+    }
+  }
+  handleDirtyScroll(e) {
+    const el = e.currentTarget;
+    if (el.scrollLeft > 0) el.dataset.hasScrolled = "true";
+    el.dataset.resetScrolled = String(el.scrollLeft === (el.dataset.scroller === "reverse" ? el.scrollWidth - el.clientWidth : 0));
+  }
+  handleCompsView(w) {
+    if (!w.isConnected) return;
+    let spacer, c = w.firstElementChild;
+    do {
+      c?.setAttribute("data-displayed", getComputedStyle(c).display !== "none" ? "true" : "false");
+      c?.setAttribute("data-spacer", "false");
+      if (c?.dataset.displayed === "true" && !spacer) spacer = c;
+    } while (c = c?.nextElementSibling ?? null);
+    this.settings.css.currentTopWrapperHeight = `${this.topWrapper.offsetHeight}px`;
+    this.settings.css.currentBottomWrapperHeight = `${this.bottomWrapper.offsetHeight}px`;
+    if (w.dataset.scroller !== "reverse") return;
+    spacer?.setAttribute("data-spacer", "true");
+    if (w.dataset.resetScrolled === "true") w.dataset.hasScrolled = "false";
+    if (w.dataset.hasScrolled === "true" || w.scrollWidth <= w.clientWidth || w.scrollLeft === w.scrollWidth - w.clientWidth) return void (w.scrollWidth <= w.clientWidth && (w.dataset.hasScrolled = "false"));
+    w.addEventListener("scroll", () => w.dataset.hasScrolled = "false", { once: true, signal: this.signal });
+    w.scrollLeft = w.scrollWidth - w.clientWidth;
+  }
+  onDestroy() {
+    for (const scroller of this.scrollers) removeScrollAssist(scroller);
+    this.draggable?.destroy();
+    for (const control of this.controls.values()) control.destroy();
+    super.onDestroy();
+  }
+};
+__publicField(ControlPanelPlug, "plugName", "controlPanel");
+__publicField(ControlPanelPlug, "BUILD", CONTROL_PANEL_BUILD);
+//# sourceMappingURL=index.cjs.map