tmg-media-player 0.0.1

package/dist/super/plugs/menus.cjs

@@ -0,0 +1,2572 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+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);
+
+// src/ts/super/plugs/menus.ts
+var menus_exports = {};
+__export(menus_exports, {
+  TOAST_BOOLEAN_OPTS: () => TOAST_BOOLEAN_OPTS,
+  TOAST_FORM_INPUTS: () => TOAST_FORM_INPUTS,
+  getMainPlaylistMenu: () => getMainPlaylistMenu,
+  getSettingsAmbienceMenu: () => getSettingsAmbienceMenu,
+  getSettingsAutoMenu: () => getSettingsAutoMenu,
+  getSettingsBrightnessMenu: () => getSettingsBrightnessMenu,
+  getSettingsCaptionsMenu: () => getSettingsCaptionsMenu,
+  getSettingsControlPanelMenu: () => getSettingsControlPanelMenu,
+  getSettingsFastPlayMenu: () => getSettingsFastPlayMenu,
+  getSettingsFrameMenu: () => getSettingsFrameMenu,
+  getSettingsGestureMenu: () => getSettingsGestureMenu,
+  getSettingsKeysMenu: () => getSettingsKeysMenu,
+  getSettingsLockedMenu: () => getSettingsLockedMenu,
+  getSettingsMetadataMenu: () => getSettingsMetadataMenu,
+  getSettingsModesMenu: () => getSettingsModesMenu,
+  getSettingsObjectFitMenu: () => getSettingsObjectFitMenu,
+  getSettingsOverlayMenu: () => getSettingsOverlayMenu,
+  getSettingsPersistMenu: () => getSettingsPersistMenu,
+  getSettingsPlaybackRateMenu: () => getSettingsPlaybackRateMenu,
+  getSettingsPosterMenu: () => getSettingsPosterMenu,
+  getSettingsSettingsViewMenu: () => getSettingsSettingsViewMenu,
+  getSettingsSleepTimerMenu: () => getSettingsSleepTimerMenu,
+  getSettingsTimeMenu: () => getSettingsTimeMenu,
+  getSettingsTimeTravelMenu: () => getSettingsTimeTravelMenu,
+  getSettingsToastsMenu: () => getSettingsToastsMenu,
+  getSettingsVoiceMenu: () => getSettingsVoiceMenu,
+  getSettingsVolumeMenu: () => getSettingsVolumeMenu,
+  toToastFormOpts: () => toToastFormOpts
+});
+module.exports = __toCommonJS(menus_exports);
+
+// src/ts/plugs/main/playlist/build.ts
+var PLAYLIST_ITEM_BUILD = {
+  media: {
+    intent: {
+      src: "",
+      tracks: []
+    },
+    settings: {
+      metadata: {
+        title: "",
+        chapterInfo: [],
+        links: {
+          title: ""
+        }
+      }
+    }
+  },
+  settings: {
+    time: {
+      start: 0
+    },
+    controlPanel: {
+      timeline: {
+        previews: false,
+        marks: []
+      }
+    }
+  }
+};
+
+// src/ts/plugs/menus/main/playlist.ts
+var import_utils = require("sia-reactor/utils");
+var getMainPlaylistMenu = (plug) => ({
+  id: "playlist",
+  label: "Playlist",
+  icon: "playlist",
+  widget: "drag-select",
+  feature: "playlist",
+  configPaths: ["playlist", "playlist.content"],
+  getValue: () => plug.config.content?.[plug.state.currentIndex]?.media.settings.metadata.title || plug.media.settings.metadata.title || "Playlist",
+  getOptions: () => (plug.config.content?.length ? plug.config.content : [{ media: { settings: { metadata: { title: plug.media.settings.metadata.title || "Unknown" } } } }]).map((opt, i) => ({ value: String(i), display: opt.media.settings.metadata.title || "Unknown" })),
+  getDisabled: () => plug.config.content?.length === 0 && !plug.config.allowOverride.add,
+  onChange: (val) => plug.moveTo(Number(val), true),
+  onReorder: plug.config.allowOverride.move ? (oldIdx, newIdx) => {
+    const p = plug.config.content;
+    if (!p) return;
+    const [moved] = p.splice(oldIdx, 1);
+    p.splice(newIdx, 0, moved);
+  } : void 0,
+  onDelete: plug.config.allowOverride.delete ? plug.remove : void 0,
+  tipHTML: plug.config.allowOverride.move ? "You can drag to reorder items" : void 0,
+  actions: [...plug.config.allowOverride.move ? [{ id: "shuffle", getLabel: () => "Shuffle", icon: "shuffle", onClick: plug.shuffle }] : [], ...plug.config.allowOverride.add ? [{ id: "add", getLabel: () => "Add", icon: "add", onClick: () => plug.ctlr.plug("settings.settingsView")?.menu?.goTo("playlist-add") }] : []],
+  items: [
+    {
+      id: "playlist-add",
+      label: "Add to Playlist",
+      icon: "add",
+      widget: "input",
+      inputs: [
+        { label: "Video URL", placeholder: "https://www.youtube.com/...", type: "url", required: true, helperText: { info: "Input any media (video or audio) url" } },
+        { label: "Title", placeholder: "My Awesome Video", type: "text" }
+      ],
+      getValue: () => "",
+      onChange: (vals) => {
+        const firstItem = { media: { intent: { src: plug.media.state.src }, settings: { metadata: { title: plug.media.settings.metadata.title || "Unknown", chapterInfo: plug.media.settings.metadata.chapterInfo, links: { title: plug.media.settings.metadata.links.title } } } }, settings: { time: { start: plug.settings.time.start }, controlPanel: { timeline: { previews: plug.settings.controlPanel.timeline.previews, marks: [...plug.settings.controlPanel.timeline.marks || []] } } } }, newItem = { media: { intent: { src: vals["Video URL"] }, settings: { metadata: { title: vals["Title"] } } } };
+        plug.config.content = [...plug.config.content ?? [(0, import_utils.mergeObjs)(PLAYLIST_ITEM_BUILD, firstItem)], (0, import_utils.mergeObjs)(PLAYLIST_ITEM_BUILD, newItem)];
+        plug.ctlr.plug("settings.settingsView")?.menu?.goBack();
+      }
+    }
+  ]
+});
+
+// src/ts/plugs/menus/settings/ambience.ts
+var getSettingsAmbienceMenu = (plug) => ({
+  id: "ambience",
+  label: "Ambience",
+  icon: "ambience",
+  widget: "toggle",
+  getValue: () => plug.config.active ? "On" : "Off",
+  onChange: (val) => plug.config.active = val,
+  configPaths: ["settings.ambience.active"]
+});
+
+// ../t007-tools/packages/utils/dist/chunk-ZALPHCSJ.js
+var import_utils2 = require("sia-reactor/utils");
+var import_utils3 = require("sia-reactor/utils");
+var import_sia_reactor = require("sia-reactor");
+var import_sia_reactor2 = require("sia-reactor");
+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 import_utils8 = require("sia-reactor/utils");
+var VIRTUAL_RESOURCE = /* @__PURE__ */ Symbol.for("T007_VIRTUAL_RESOURCE");
+function isBool(val) {
+  return "boolean" === typeof val;
+}
+function isNum(val) {
+  return "number" === typeof val;
+}
+function isStr(val) {
+  return "string" === typeof val;
+}
+function isArr(obj) {
+  return Array.isArray(obj);
+}
+function capitalize(word = "") {
+  return word.replace(/^(\s*)([a-z])/i, (_, s, l) => s + l.toUpperCase());
+}
+function camelize(str = "", { source } = /[\s_-]+/, { preserveInnerCase: pIC = true, upperFirst: uF = false } = {}) {
+  return (pIC ? str : str.toLowerCase()).replace(new RegExp(source + "(\\w)", "g"), (_, c) => c.toUpperCase()).replace(/^\w/, (c) => c[uF ? "toUpperCase" : "toLowerCase"]());
+}
+function uncamelize(str, separator = " ") {
+  return str.replace(/([a-z])([A-Z])/g, `$1${separator}$2`).toLowerCase();
+}
+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");
+function isUISetting(obj) {
+  return (0, import_utils4.isObj)(obj) && "options" in obj && isArr(obj.options);
+}
+function isUIOption(opt) {
+  return (0, import_utils4.isObj)(opt) && "value" in opt;
+}
+function getBoolOrStr(value) {
+  return value === "true" ? true : value === "false" ? false : value;
+}
+function getUIOpt(opts, value, key = "display") {
+  if (opts)
+    for (const opt of opts) {
+      const p = parseUIOpt(opt);
+      if (p.value == value) return p[key];
+    }
+  return String(value);
+}
+function getUniqueOpts(options) {
+  const counts = {};
+  options.forEach((opt) => counts[opt.display] = (counts[opt.display] || 0) + 1);
+  const seen = {};
+  for (let i = options.length - 1; i >= 0; i--) {
+    const opt = options[i];
+    if (counts[opt.display] > 1) {
+      seen[opt.display] = (seen[opt.display] || 0) + 1;
+      const num = counts[opt.display] - seen[opt.display] + 1;
+      opt.display = `${opt.display} (${num})`;
+    }
+  }
+  return options;
+}
+function parseUIOpt(opt) {
+  return isUIOption(opt) ? { value: opt.value, display: String(opt.display ?? opt.value), infoText: opt.infoText } : { value: opt, display: String(opt) };
+}
+function parseUIObj(obj) {
+  const result = {}, keys = Object.keys(obj);
+  for (let i = 0; i < keys.length; i++) {
+    const entry = obj[keys[i]];
+    if (!(0, import_utils4.isObj)(entry)) continue;
+    if (isUISetting(entry))
+      result[keys[i]] = {
+        values: entry.options.map((opt) => parseUIOpt(opt).value),
+        displays: entry.options.map((opt) => parseUIOpt(opt).display)
+      };
+    else result[keys[i]] = parseUIObj(entry);
+  }
+  return result;
+}
+function parsePanelBottomObj(obj = [], arr = false) {
+  if (!(0, import_utils4.isObj)(obj) && !isArr(obj)) return false;
+  const [third = [], second = [], first = []] = (0, import_utils4.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" };
+}
+function insertPanelCtrl(current, defaults, id) {
+  let s = 0;
+  for (let i = 0; i < defaults.indexOf(id); i++) if (defaults[i] === "spacer") s++;
+  for (let i = defaults.indexOf(id) + 1; i < defaults.length; i++)
+    if (defaults[i] === "spacer") {
+      let c = 0;
+      for (let j = 0; j < current.length; j++) if (current[j] === "spacer" && ++c === s + 1) return void current.splice(j, 0, id);
+    } else {
+      const idx = current.indexOf(defaults[i]);
+      if (idx !== -1) return void current.splice(idx, 0, id);
+    }
+  current.push(id);
+}
+
+// src/ts/plugs/menus/settings/auto.ts
+var getSettingsAutoMenu = (plug) => ({
+  id: "autoplay",
+  label: "Autoplay",
+  icon: "autoplay",
+  widget: "group",
+  getValue: () => getUIOpt(plug.config.play.options, plug.config.play.value),
+  tipHTML: "Configure automatic playback settings and transitions",
+  configPaths: ["settings.auto.play.value"],
+  items: [
+    {
+      id: "autoPlay",
+      label: "Autoplay",
+      widget: "select",
+      getValue: () => getUIOpt(plug.config.play.options, plug.config.play.value),
+      getOptions: () => plug.config.play.options,
+      onChange: (val) => plug.config.play.value = getBoolOrStr(val),
+      configPaths: ["settings.auto.play.value"],
+      tipHTML: "Automatically start playback when the player enters or leaves the viewport based on the selected option"
+    },
+    {
+      id: "autoPause",
+      label: "Auto-pause",
+      widget: "select",
+      getValue: () => getUIOpt(plug.config.pause.options, plug.config.pause.value),
+      getOptions: () => plug.config.pause.options,
+      onChange: (val) => plug.config.pause.value = getBoolOrStr(val),
+      configPaths: ["settings.auto.pause.value"],
+      tipHTML: "Automatically pause playback when the player enters or leaves the viewport based on the selected option"
+    },
+    {
+      id: "autoNext",
+      label: "Auto-next",
+      widget: "group",
+      getValue: () => plug.config.next.value === -1 ? "Off" : `${plug.config.next.value}ms`,
+      configPaths: ["settings.auto.next.value"],
+      items: [
+        {
+          id: "autoNextTime",
+          label: "Countdown Time",
+          widget: "input",
+          inputs: [{ label: "ms", placeholder: "20000", helperText: { info: "Time in ms to wait before automatically playing the next item in the playlist. Set to -1 to disable." }, type: "number", min: "-1", value: () => plug.config.next.value }],
+          getValue: () => plug.config.next.value === -1 ? "Off" : `${plug.config.next.value}ms`,
+          onChange: (val) => plug.config.next.value = val["ms"],
+          configPaths: ["settings.auto.next.value"]
+        },
+        {
+          id: "autoNextPreview",
+          label: "Preview",
+          widget: "group",
+          getValue: () => "",
+          items: [
+            {
+              id: "autoNextPreviewUsePoster",
+              label: "Use poster",
+              widget: "toggle",
+              getValue: () => plug.config.next.preview.usePoster ? "On" : "Off",
+              onChange: (val) => plug.config.next.preview.usePoster = val,
+              configPaths: ["settings.auto.next.preview.usePoster"],
+              tipHTML: "Display the next video's poster during the countdown."
+            },
+            {
+              id: "autoNextPreviewTease",
+              label: "Tease video",
+              widget: "toggle",
+              getValue: () => plug.config.next.preview.tease ? "On" : "Off",
+              onChange: (val) => plug.config.next.preview.tease = val,
+              configPaths: ["settings.auto.next.preview.tease"],
+              tipHTML: "Play a short silent preview of the next when no poster is present."
+            },
+            {
+              id: "autoNextPreviewTime",
+              label: "Preview Time",
+              widget: "input",
+              inputs: [{ label: "ms", placeholder: "4000", helperText: { info: "The poster fallback preview time in ms in the next video, where the tease ends." }, type: "number", min: "0", value: () => plug.config.next.preview.time * 1e3 }],
+              getValue: () => `${plug.config.next.preview.time * 1e3}ms`,
+              onChange: (val) => plug.config.next.preview.time = val["ms"] / 1e3,
+              configPaths: ["settings.auto.next.preview.time"]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+});
+
+// src/ts/plugs/menus/settings/brightness.ts
+var import_utils13 = require("sia-reactor/utils");
+var getSettingsBrightnessMenu = (plug) => ({
+  id: "limits",
+  label: "Limits",
+  icon: "configure",
+  widget: "group",
+  getValue: () => "",
+  items: [
+    {
+      id: "brightnessLimits",
+      label: "Brightness",
+      widget: "limits",
+      configPaths: ["settings.brightness.min", "settings.brightness.max", "settings.brightness.skip"],
+      getValue: () => "",
+      getLimits: () => [{ name: "brightness", label: "Clamp bounds", min: plug.config.min, max: plug.config.max, step: plug.config.skip }],
+      onChange: (val) => (0, import_utils13.fanout)(plug.config, { min: val.brightness_min, max: val.brightness_max, skip: val.brightness_step }, { skipUndefined: true })
+    }
+  ]
+});
+
+// src/ts/plugs/settings/captions/build.ts
+var STYLE_PATHS = ["captions.font.family.value", "captions.font.size.value", "captions.font.color.value", "captions.font.opacity.value", "captions.font.weight.value", "captions.font.variant.value", "captions.background.color.value", "captions.background.opacity.value", "captions.window.color.value", "captions.window.opacity.value", "captions.characterEdgeStyle.value", "captions.textAlignment.value"];
+var CAPTIONS_BUILD = {
+  multiple: false,
+  allowOverride: true,
+  font: {
+    family: {
+      value: "",
+      options: [
+        { value: "", display: "Default" },
+        { value: "monospace", display: "Monospace" },
+        { value: "sans-serif", display: "Sans Serif" },
+        { value: "serif", display: "Serif" },
+        { value: "cursive", display: "Cursive" },
+        { value: "fantasy", display: "Fantasy" },
+        { value: "system-ui", display: "System UI" },
+        { value: "arial", display: "Arial" },
+        { value: "verdana", display: "Verdana" },
+        { value: "tahoma", display: "Tahoma" },
+        { value: "times new roman", display: "Times New Roman" },
+        { value: "georgia", display: "Georgia" },
+        { value: "impact", display: "Impact" },
+        { value: "comic sans ms", display: "Comic Sans MS" }
+      ]
+    },
+    size: {
+      min: 100,
+      max: 400,
+      value: 100,
+      skip: 100,
+      options: [
+        { value: 25, display: "25%" },
+        { value: 50, display: "50%" },
+        { value: 75, display: "75%" },
+        { value: 100, display: "100%" },
+        { value: 150, display: "150%" },
+        { value: 200, display: "200%" },
+        { value: 300, display: "300%" },
+        { value: 400, display: "400%" }
+      ]
+    },
+    color: {
+      value: "#ffffff",
+      options: [
+        { value: "#ffffff", display: "White" },
+        { value: "#ffff00", display: "Yellow" },
+        { value: "#00ff00", display: "Green" },
+        { value: "#00ffff", display: "Cyan" },
+        { value: "#0000ff", display: "Blue" },
+        { value: "#ff00ff", display: "Magenta" },
+        { value: "#ff0000", display: "Red" },
+        { value: "#000000", display: "Black" }
+      ]
+    },
+    opacity: {
+      value: 100,
+      options: [
+        { value: 25, display: "25%" },
+        { value: 50, display: "50%" },
+        { value: 75, display: "75%" },
+        { value: 100, display: "100%" }
+      ]
+    },
+    weight: {
+      value: "400",
+      options: [
+        { value: "100", display: "Thin" },
+        { value: "200", display: "Extra Light" },
+        { value: "300", display: "Light" },
+        { value: "400", display: "Normal" },
+        { value: "500", display: "Medium" },
+        { value: "600", display: "Semi Bold" },
+        { value: "700", display: "Bold" },
+        { value: "800", display: "Extra Bold" },
+        { value: "900", display: "Black" }
+      ]
+    },
+    variant: {
+      value: "normal",
+      options: [
+        { value: "normal", display: "Normal" },
+        { value: "small-caps", display: "Small Caps" },
+        { value: "all-small-caps", display: "All Small Caps" }
+      ]
+    }
+  },
+  background: {
+    color: {
+      value: "#000000",
+      options: [
+        { value: "#ffffff", display: "White" },
+        { value: "#ffff00", display: "Yellow" },
+        { value: "#00ff00", display: "Green" },
+        { value: "#00ffff", display: "Cyan" },
+        { value: "#0000ff", display: "Blue" },
+        { value: "#ff00ff", display: "Magenta" },
+        { value: "#ff0000", display: "Red" },
+        { value: "#000000", display: "Black" }
+      ]
+    },
+    opacity: {
+      value: 75,
+      options: [
+        { value: 0, display: "0%" },
+        { value: 25, display: "25%" },
+        { value: 50, display: "50%" },
+        { value: 75, display: "75%" },
+        { value: 100, display: "100%" }
+      ]
+    }
+  },
+  window: {
+    color: {
+      value: "#000000",
+      options: [
+        { value: "#ffffff", display: "White" },
+        { value: "#ffff00", display: "Yellow" },
+        { value: "#00ff00", display: "Green" },
+        { value: "#00ffff", display: "Cyan" },
+        { value: "#0000ff", display: "Blue" },
+        { value: "#ff00ff", display: "Magenta" },
+        { value: "#ff0000", display: "Red" },
+        { value: "#000000", display: "Black" }
+      ]
+    },
+    opacity: {
+      value: 0,
+      options: [
+        { value: 0, display: "0%" },
+        { value: 25, display: "25%" },
+        { value: 50, display: "50%" },
+        { value: 75, display: "75%" },
+        { value: 100, display: "100%" }
+      ]
+    }
+  },
+  characterEdgeStyle: {
+    value: "none",
+    options: [
+      { value: "none", display: "None" },
+      { value: "drop-shadow", display: "Drop Shadow" },
+      { value: "raised", display: "Raised" },
+      { value: "depressed", display: "Depressed" },
+      { value: "outline", display: "Outline" }
+    ]
+  },
+  textAlignment: {
+    value: "left",
+    options: [
+      { value: "left", display: "Left" },
+      { value: "center", display: "Center" },
+      { value: "right", display: "Right" }
+    ]
+  },
+  previewTimeout: 1500
+};
+
+// src/ts/plugs/menus/settings/captions.ts
+var import_utils14 = require("sia-reactor/utils");
+var getSettingsCaptionsMenu = (plug) => [
+  {
+    id: "captions",
+    label: "Captions",
+    icon: "captions",
+    widget: "group",
+    mediaPaths: ["state.currentTextTrack", "status.textTracks"],
+    configPaths: ["settings.captions.multiple"],
+    onWire: (syncUI, signal) => plug.state.watch("secondaryTracks", syncUI, { signal }),
+    getValue() {
+      const isMulti = plug.config.multiple, list = plug.media.status.textTracks;
+      if (!isMulti) return plug.media.state.currentTextTrack === -1 ? "Off" : list[plug.media.state.currentTextTrack]?.label || list[plug.media.state.currentTextTrack]?.language || `Track ${plug.media.state.currentTextTrack + 1}`;
+      if (plug.media.state.currentTextTrack === -1) return plug.state.secondaryTracks.length ? `Off +${plug.state.secondaryTracks.length}` : "Off";
+      const track = list[plug.media.state.currentTextTrack], primLabel = track?.label || track?.language || `Track ${plug.media.state.currentTextTrack + 1}`;
+      return plug.state.secondaryTracks.length ? `${primLabel} +${plug.state.secondaryTracks.length}` : primLabel;
+    },
+    actions: [
+      {
+        id: "goToStyles",
+        getLabel: () => "Styles",
+        onClick: () => plug.ctlr.plug("settings.settingsView")?.menu.goTo("subtitleStyle")
+      }
+    ],
+    items: [
+      {
+        id: "captionsList",
+        label: "Tracks",
+        widget: "select",
+        inline: true,
+        getMultiple: () => plug.config.multiple,
+        getValue() {
+          const isMulti = plug.config.multiple, list = plug.media.status.textTracks;
+          if (!isMulti) return plug.media.state.currentTextTrack === -1 ? "Off" : list[plug.media.state.currentTextTrack]?.label || list[plug.media.state.currentTextTrack]?.language || `Track ${plug.media.state.currentTextTrack + 1}`;
+          if (plug.media.state.currentTextTrack === -1 && !plug.state.secondaryTracks.length) return ["Off"];
+          const vals = [];
+          if (plug.media.state.currentTextTrack > -1) vals.push(list[plug.media.state.currentTextTrack]?.label || list[plug.media.state.currentTextTrack]?.language || `Track ${plug.media.state.currentTextTrack + 1}`);
+          plug.state.secondaryTracks.forEach((idx) => {
+            const tr = list[idx];
+            if (tr) vals.push(tr.label || tr.language || `Track ${idx + 1}`);
+          });
+          return vals.length ? vals : ["Off"];
+        },
+        getOptions() {
+          const list = plug.media.status.textTracks;
+          const opts = !list || !list.length ? [] : Array.from(list).map((t, i) => ({ value: i, display: t.label || t.language || `Track ${i + 1}` }));
+          if (opts.length) opts.unshift({ value: -1, display: "Off" });
+          return opts.length ? opts : [{ value: -1, display: "Off" }];
+        },
+        onChange: (val) => {
+          if (val === -1) {
+            plug.media.intent.textVisible = false;
+            plug.media.intent.currentTextTrack = -1;
+            plug.state.secondaryTracks = [];
+          } else {
+            plug.media.intent.textVisible = true;
+            if (plug.config.multiple) {
+              const idx = plug.state.secondaryTracks.indexOf(val);
+              if (idx > -1) {
+                const arr = [...plug.state.secondaryTracks];
+                arr.splice(idx, 1);
+                plug.state.secondaryTracks = arr;
+              } else if (val !== plug.media.state.currentTextTrack) plug.state.secondaryTracks = [...plug.state.secondaryTracks, val];
+            } else {
+              plug.media.intent.currentTextTrack = val;
+              plug.state.secondaryTracks = [];
+            }
+          }
+        },
+        mediaPaths: ["status.textTracks", "state.currentTextTrack"]
+      },
+      {
+        id: "captionsMulti",
+        label: "Multiple Captions",
+        widget: "toggle",
+        inline: true,
+        feature: "multipleCaptions",
+        getValue: () => plug.config.multiple ? "On" : "Off",
+        onChange: (val) => {
+          plug.config.multiple = val;
+          if (!val) plug.state.secondaryTracks = [];
+          plug.ctlr.plug("settings.settingsView")?.menu.syncUI();
+        }
+      },
+      {
+        id: "subtitleStyle",
+        label: "Styles",
+        widget: "group",
+        hidden: true,
+        // Hide from rows list but still accessible via actions
+        getValue: () => "",
+        configPaths: STYLE_PATHS.map((p) => `settings.${p}`),
+        items: [
+          ...STYLE_PATHS.map((p) => {
+            const id = camelize(p.replace(".value", ""), /\./), pathParts = p.replace("captions.", "").replace(".value", ""), getCurr = () => (0, import_utils14.getPath)(plug.config, pathParts), parsed = (0, import_utils14.getPath)(parseUIObj(plug.config), pathParts), hasNum = !!parsed?.values?.length && parsed.values.every((v) => !isBool(v) && !isNaN(Number(v))), isColor = !hasNum && parsed?.values?.some((v) => String(v).startsWith("#")), actMin = hasNum ? Math.min(...parsed.values.map(Number)) : 0, actMax = hasNum ? Math.max(...parsed.values.map(Number)) : 100, configPaths = ["settings." + p];
+            return {
+              id,
+              label: uncamelize(pathParts.replace(/\./g, " ")).split(" ").map(capitalize).join(" "),
+              widget: hasNum ? "group" : isColor ? "color" : "select",
+              getValue: (curr = getCurr()) => getUIOpt(curr.options, curr.value),
+              getOptions: (curr = getCurr()) => curr.options,
+              onChange: (val, curr = getCurr()) => curr.value = val,
+              tipHTML: () => {
+                if (p.includes("font.variant")) return "Apply variants like small capitals to the text";
+                if (p.includes("window.color")) return "Change the background color of the entire caption bounding box (differs from text background)";
+                if (p.includes("window.opacity")) return "Adjust how transparent the entire caption bounding box is";
+                if (p.includes("characterEdgeStyle")) return "Add borders or shadows to the text to make it more readable";
+                return void 0;
+              },
+              items: hasNum ? [
+                {
+                  id: `${id}Slider`,
+                  label: "Custom",
+                  widget: "range",
+                  inline: true,
+                  getValue: (curr = getCurr()) => `${Math.round(Number(curr.value))}%`,
+                  onChange: (val, curr = getCurr()) => curr.value = isStr(curr.value) ? String(val) : Number(val),
+                  getRange: (curr = getCurr()) => ({ min: Math.min(curr.min ?? actMin, actMin), max: Math.max(curr.max ?? actMax, actMax), formatTooltip: (v) => Math.round(v) + "%", options: curr.options }),
+                  configPaths
+                },
+                {
+                  id: `${id}Select`,
+                  label: "Presets",
+                  widget: "select",
+                  inline: true,
+                  getOptions: (curr = getCurr()) => curr.options,
+                  getValue: (curr = getCurr()) => String(curr.value),
+                  onChange: (val, curr = getCurr()) => curr.value = isStr(curr.value) ? String(val) : Number(val),
+                  configPaths
+                }
+              ] : void 0,
+              configPaths
+            };
+          }),
+          {
+            id: "resetCaptions",
+            label: "Reset",
+            widget: "button",
+            getValue: () => "",
+            onChange: () => {
+              plug.config.allowOverride = CAPTIONS_BUILD.allowOverride;
+              const cssCache = plug.media.tech.ctlr?.plug("settings.css")?._cache;
+              STYLE_PATHS.forEach((p, _, __, val = cssCache?.[camelize(p.replace(".value", ""), /\./)]) => (val = p.includes("opacity") && val !== void 0 ? Number(val) * 100 : val, (0, import_utils14.setPath)(plug.config, p.replace("captions.", ""), val ?? (0, import_utils14.getPath)(CAPTIONS_BUILD, p.replace("captions.", "")))));
+            }
+          },
+          {
+            id: "allowOverride",
+            label: "Allow media override",
+            widget: "toggle",
+            getValue: () => plug.config.allowOverride ? "On" : "Off",
+            onChange: (val) => plug.config.allowOverride = val,
+            configPaths: ["settings.captions.allowOverride"],
+            title: "Allow media content to override your custom caption styling with its own styling (if available)"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    id: "limits",
+    label: "Limits",
+    icon: "configure",
+    widget: "group",
+    getValue: () => "",
+    items: [
+      {
+        id: "captionSizeLimits",
+        label: "Caption size",
+        widget: "limits",
+        configPaths: ["settings.captions.font.size.min", "settings.captions.font.size.max", "settings.captions.font.size.skip"],
+        getValue: () => "",
+        getLimits: () => [{ name: "captionSize", label: "Clamp bounds", min: plug.config.font.size.min, max: plug.config.font.size.max, step: plug.config.font.size.skip }],
+        onChange: (val) => (0, import_utils14.fanout)(plug.config.font.size, { min: val.captionSize_min, max: val.captionSize_max, skip: val.captionSize_step }, { skipUndefined: true })
+      }
+    ]
+  }
+];
+
+// 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 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_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/plugs/menus/settings/controlPanel.ts
+var import_utils15 = require("sia-reactor/utils");
+var isEnabled = (plug, id) => getPanelLocation(plug.config, id).row.includes(id);
+var setEnabled = (plug, id, enabled, b = plug.ctlr._build.settings.controlPanel) => {
+  const cLoc = getPanelLocation(plug.config, id);
+  if (!enabled) return void (cLoc.row.includes(id) && (0, import_utils15.setPath)(plug.config, cLoc.path, cLoc.row.filter((c) => c !== id)));
+  if (cLoc.row.includes(id)) return;
+  const bLoc = getPanelLocation(b, id), cfgRow = (0, import_utils15.getPath)(plug.config, bLoc.path);
+  Array.isArray(cfgRow) && bLoc.row.length ? insertPanelCtrl(cfgRow, bLoc.row, id) : plug.config.bottom[1].push(id);
+};
+var getSettingsControlPanelMenu = (plug) => ({
+  id: "general",
+  label: "Advanced",
+  icon: "settings",
+  widget: "group",
+  getValue: () => "",
+  items: [
+    {
+      id: "layoutControlPanel",
+      label: "Control panel",
+      widget: "group",
+      getValue: () => "",
+      tipHTML: "Configure player controls, layout, and visual feedback",
+      items: [
+        {
+          id: "layoutToggleControls",
+          label: "Toggle controls",
+          widget: "group",
+          getValue: () => "",
+          configPaths: ["settings.controlPanel.top", "settings.controlPanel.center", "settings.controlPanel.bottom"],
+          items: [...CONTROLS, ...BIG_CONTROLS].filter((id) => id !== "spacer").map((id) => ({
+            id: `toggle-cp-${id}`,
+            label: id.replace(/([A-Z])/g, " $1").toLowerCase().replace(/^./, (s) => s.toUpperCase()),
+            widget: "toggle",
+            getValue: () => isEnabled(plug, id) ? "On" : "Off",
+            onChange: (val) => setEnabled(plug, id, val),
+            configPaths: ["settings.controlPanel.top", "settings.controlPanel.center", "settings.controlPanel.bottom"]
+          }))
+        },
+        {
+          id: "layoutTimeline",
+          label: "Timeline",
+          widget: "group",
+          getValue: () => "",
+          items: [
+            {
+              id: "timelineThumb",
+              label: "Show thumb",
+              widget: "select",
+              getValue: () => getUIOpt(plug.config.timeline.thumb.options, plug.config.timeline.thumb.value),
+              getOptions: () => plug.config.timeline.thumb.options,
+              onChange: (val) => plug.config.timeline.thumb.value = val === "auto" ? "auto" : val === "true",
+              configPaths: ["settings.controlPanel.timeline.thumb.value"]
+            },
+            {
+              id: "timelineCompact",
+              label: "Compact mode",
+              widget: "toggle",
+              getValue: () => plug.comp("timeline")?.config.compact ? "On" : "Off",
+              onChange: (val) => plug.config.timeline.compact = val,
+              configPaths: ["settings.controlPanel.timeline.compact"],
+              title: "Make the timeline thinner and more minimalist to conserve space"
+            },
+            {
+              id: "timelineAutopause",
+              label: "Pause-to-preview",
+              widget: "toggle",
+              getValue: () => plug.comp("timeline")?.config.autopause ? "On" : "Off",
+              onChange: (val) => plug.config.timeline.autopause = val,
+              configPaths: ["settings.controlPanel.timeline.autopause"],
+              title: "Automatically pauses the video while you are dragging the timeline to seek"
+            },
+            {
+              id: "timelinePlayedMarks",
+              label: "Played marks",
+              widget: "toggle",
+              getValue: () => plug.comp("timeline")?.config.playedMarks ? "On" : "Off",
+              onChange: (val) => plug.config.timeline.playedMarks = val,
+              configPaths: ["settings.controlPanel.timeline.playedMarks"],
+              title: "Displays colored indicators on the timeline for sections you've already watched"
+            },
+            {
+              id: "timelineBufferMarks",
+              label: "Buffer marks",
+              widget: "toggle",
+              getValue: () => plug.comp("timeline")?.config.bufferMarks ? "On" : "Off",
+              onChange: (val) => plug.config.timeline.bufferMarks = val,
+              configPaths: ["settings.controlPanel.timeline.bufferMarks"],
+              title: "Shows a progress bar indicating how much of the video has been pre-loaded"
+            },
+            {
+              id: "timelinePreviews",
+              label: "Seek previews",
+              widget: "toggle",
+              getValue: () => plug.comp("timeline")?.config.previews ? "On" : "Off",
+              onChange: (val) => plug.config.timeline.previews = val,
+              configPaths: ["settings.controlPanel.timeline.previews"],
+              title: "Displays a thumbnail preview of the video frame when hovering over the timeline. Note: If a specific preview type (e.g. sprite/image src) was set by the developer, toggling this will reset it to 'auto'."
+            },
+            {
+              id: "timelineScrub",
+              label: "Scrub behaviour",
+              widget: "group",
+              getValue: () => "",
+              items: [
+                {
+                  id: "timelineScrubSync",
+                  label: "Sync scrubbing",
+                  widget: "toggle",
+                  getValue: () => plug.comp("timeline")?.config.scrub.sync ? "On" : "Off",
+                  onChange: (val) => plug.config.timeline.scrub.sync = val,
+                  configPaths: ["settings.controlPanel.timeline.scrub.sync"],
+                  title: "Updates the video frame in real-time as you drag the timeline cursor"
+                },
+                {
+                  id: "timelineScrubRelative",
+                  label: "Relative scrubbing",
+                  widget: "toggle",
+                  getValue: () => plug.comp("timeline")?.config.scrub.relative ? "On" : "Off",
+                  onChange: (val) => plug.config.timeline.scrub.relative = val,
+                  configPaths: ["settings.controlPanel.timeline.scrub.relative"],
+                  title: "Whether the scrubbing pointer should follow your finger exactly or move relative to your initial point of touch"
+                },
+                {
+                  id: "timelineScrubCancel",
+                  label: "Scrub cancellation",
+                  widget: "group",
+                  getValue: () => plug.comp("timeline")?.config.scrub.cancel.delta && plug.comp("timeline")?.config.scrub.cancel.timeout ? "On" : "Off",
+                  configPaths: ["settings.controlPanel.timeline.scrub.cancel.delta", "settings.controlPanel.timeline.scrub.cancel.timeout"],
+                  items: [
+                    {
+                      id: "timelineScrubCancelDelta",
+                      label: "Cancel distance",
+                      widget: "range",
+                      getValue: () => `${Math.round(plug.comp("timeline")?.config.scrub.cancel.delta)}px`,
+                      getRange: () => ({ min: 0, max: 100, step: 5 }),
+                      onChange: (val) => plug.config.timeline.scrub.cancel.delta = val,
+                      configPaths: ["settings.controlPanel.timeline.scrub.cancel.delta"],
+                      tipHTML: "Horizontal distance from your initial drag position before a scrub is considered cancelled."
+                    },
+                    {
+                      id: "timelineScrubCancelTimeout",
+                      label: "Cancel timeout",
+                      widget: "input",
+                      inputs: [{ label: "ms", placeholder: "2500", type: "number", min: "0", helperText: { info: "How long to wait before allowing you to resume scrubbing after a cancellation." }, value: () => plug.comp("timeline")?.config.scrub.cancel.timeout }],
+                      getValue: () => `${plug.comp("timeline")?.config.scrub.cancel.timeout}ms`,
+                      onChange: (val) => plug.config.timeline.scrub.cancel.timeout = val["ms"],
+                      configPaths: ["settings.controlPanel.timeline.scrub.cancel.timeout"],
+                      tipHTML: "How long to wait before allowing you to resume scrubbing after a cancellation attempt."
+                    }
+                  ]
+                }
+              ]
+            },
+            {
+              id: "timelineWheelGroup",
+              label: "Wheel seek",
+              widget: "group",
+              getValue: () => plug.comp("timeline")?.config.wheel.disabled ? "Off" : "On",
+              items: [
+                {
+                  id: "timelineWheelDisabled",
+                  label: "Disable",
+                  widget: "toggle",
+                  getValue: () => plug.comp("timeline")?.config.wheel.disabled ? "On" : "Off",
+                  onChange: (val) => plug.config.timeline.wheel.disabled = val,
+                  configPaths: ["settings.controlPanel.timeline.wheel"],
+                  title: "Enables seeking through the video by scrolling the mouse wheel over the timeline"
+                },
+                {
+                  id: "timelineWheelAxisRatio",
+                  label: "Sensitivity",
+                  widget: "range",
+                  getValue: () => String(plug.comp("timeline")?.config.wheel.axisRatio),
+                  getRange: () => ({ min: 1, max: 50, step: 1 }),
+                  onChange: (val) => plug.config.timeline.wheel.axisRatio = val,
+                  configPaths: ["settings.controlPanel.timeline.wheel"],
+                  tipHTML: "Adjusts how much the video seeks per scroll wheel notch"
+                }
+              ]
+            },
+            {
+              id: "timelineMarkers",
+              label: "Add marker",
+              widget: "input",
+              inputs: [
+                { label: "Label", placeholder: "Chapter 2", helperText: { info: "e.g. Chapter 2" }, required: true },
+                { label: "Position (%)", placeholder: "50", helperText: { info: "0 \u2013 100" }, type: "number", required: true },
+                { label: "End (%)", helperText: { info: "Optional" }, type: "number" }
+              ],
+              getValue: () => `${plug.comp("timeline")?.config.marks.length || 0} marker${(plug.comp("timeline")?.config.marks.length || 0) !== 1 ? "s" : ""}`,
+              onChange: (val) => plug.config.timeline.marks = [...plug.config.timeline.marks || [], { label: val["Label"] || void 0, start: Number(val["Position (%)"]) || 0, end: val["End (%)"] ? Number(val["End (%)"]) : void 0 }],
+              configPaths: ["settings.controlPanel.timeline.marks"]
+            }
+          ]
+        },
+        {
+          id: "layoutBuffer",
+          label: "Loading spinner",
+          widget: "select",
+          getValue: () => getUIOpt(plug.config.buffer.options, plug.config.buffer.value),
+          getOptions: () => plug.config.buffer.options,
+          onChange: (val) => plug.config.buffer.value = getBoolOrStr(val),
+          configPaths: ["settings.controlPanel.buffer.value"]
+        },
+        {
+          id: "layoutProgressBar",
+          label: "Progress bar",
+          widget: "toggle",
+          getValue: () => plug.config.progressBar ? "On" : "Off",
+          onChange: (val) => plug.config.progressBar = val,
+          configPaths: ["settings.controlPanel.progressBar"]
+        },
+        {
+          id: "layoutDraggable",
+          label: "Drag & drop layout",
+          widget: "toggle",
+          getValue: () => plug.config.draggable ? "On" : "Off",
+          onChange: (val) => plug.config.draggable = val,
+          configPaths: ["settings.controlPanel.draggable"]
+        }
+      ]
+    }
+  ]
+});
+
+// src/ts/plugs/menus/settings/fastPlay.ts
+var fPRgx = /all|mouse|touch|pen/;
+var getSettingsFastPlayMenu = (plug) => ({
+  id: "general",
+  label: "Advanced",
+  icon: "settings",
+  widget: "group",
+  getValue: () => "",
+  items: [
+    {
+      id: "fastPlay",
+      label: "Fast play",
+      widget: "group",
+      getValue: () => plug.config.key || fPRgx.test(plug.config.pointer.type.value) ? "On" : "Off",
+      tipHTML: "Configure fast playback gestures, speed, and triggers",
+      configPaths: ["settings.fastPlay.key", "settings.fastPlay.pointer.type.value"],
+      items: [
+        {
+          id: "fastPlayRate",
+          label: "Fast play speed",
+          widget: "range",
+          getValue: () => `${plug.config.playbackRate}x`,
+          getRange() {
+            const divs = [];
+            for (let i = Math.ceil(plug.settings.playbackRate.min); i <= plug.settings.playbackRate.max; i++) divs.push(i);
+            return { min: plug.settings.playbackRate.min, max: plug.settings.playbackRate.max, step: 0.05, formatTooltip: (v) => `${v.toFixed(2)}x`, divs };
+          },
+          onChange: (val) => plug.config.playbackRate = val,
+          configPaths: ["settings.fastPlay.playbackRate", "settings.playbackRate.min", "settings.playbackRate.max"],
+          tipHTML: "Playback speed multiplier when fast play is active"
+        },
+        {
+          id: "fastPlayKey",
+          label: "Keyboard hold trigger",
+          widget: "toggle",
+          getValue: () => plug.config.key ? "On" : "Off",
+          onChange: (val) => plug.config.key = val,
+          configPaths: ["settings.fastPlay.key"],
+          title: "Press and hold the Left/Right arrow keys to temporarily rewind or fast-forward"
+        },
+        {
+          id: "fastPlayPointer",
+          label: "Pointer hold trigger",
+          widget: "group",
+          getValue: () => plug.config.pointer.threshold && fPRgx.test(plug.config.pointer.type.value) ? "On" : "Off",
+          tipHTML: "Press and hold the video with your mouse or finger to temporarily rewind or fast-forward",
+          configPaths: ["settings.fastPlay.pointer.type.value", "settings.fastPlay.pointer.threshold"],
+          items: [
+            {
+              id: "fastPlayPointerType",
+              label: "Pointer type",
+              widget: "select",
+              getValue: () => getUIOpt(plug.config.pointer.type.options, plug.config.pointer.type.value),
+              getOptions: () => plug.config.pointer.type.options,
+              onChange: (val) => plug.config.pointer.type.value = val,
+              configPaths: ["settings.fastPlay.pointer.type.value"],
+              tipHTML: "Which input devices can trigger fast play by long pressing the video."
+            },
+            {
+              id: "fastPlayPointerThreshold",
+              label: "Hold Duration",
+              widget: "input",
+              inputs: [{ label: "ms", placeholder: "2500", helperText: { info: "How long you need to hold your finger or mouse down before fast play starts." }, type: "number", min: "0", value: () => plug.config.pointer.threshold }],
+              getValue: () => `${plug.config.pointer.threshold}ms`,
+              onChange: (val) => plug.config.pointer.threshold = val["ms"],
+              configPaths: ["settings.fastPlay.pointer.threshold"]
+            },
+            {
+              id: "fastPlayPointerInset",
+              label: "Edge inset",
+              widget: "range",
+              getValue: () => `${Math.round(plug.config.pointer.inset)}px`,
+              getRange: () => ({ min: 0, max: 100, step: 5, formatTooltip: (v) => `${Math.round(v)}px` }),
+              onChange: (val) => plug.config.pointer.inset = val,
+              configPaths: ["settings.fastPlay.pointer.inset"],
+              tipHTML: "Distance from the screen edges to ignore long presses (prevents accidental triggers)"
+            }
+          ]
+        },
+        {
+          id: "fastPlayReset",
+          label: "Reset paused on release",
+          widget: "toggle",
+          getValue: () => plug.config.resetPaused ? "On" : "Off",
+          onChange: (val) => plug.config.resetPaused = val,
+          configPaths: ["settings.fastPlay.resetPaused"],
+          title: "Automatically reset play state when you release the trigger"
+        },
+        {
+          id: "fastPlayRewind",
+          label: "Allow rewind",
+          widget: "toggle",
+          getValue: () => plug.config.rewind ? "On" : "Off",
+          onChange: (val) => plug.config.rewind = val,
+          configPaths: ["settings.fastPlay.rewind"],
+          title: "Allow fast playing backwards (rewinding) if triggered on the left side of the screen"
+        }
+      ]
+    }
+  ]
+});
+
+// src/ts/plugs/menus/settings/frame.ts
+var getSettingsFrameMenu = (plug) => ({
+  id: "general",
+  label: "Advanced",
+  icon: "settings",
+  widget: "group",
+  getValue: () => "",
+  items: [
+    {
+      id: "frameCapture",
+      label: "Frame Capture",
+      widget: "group",
+      getValue: () => plug.config.disabled ? "Off" : "On",
+      configPaths: ["settings.frame.disabled"],
+      items: [
+        {
+          id: "frameDisabled",
+          label: "Disable",
+          widget: "toggle",
+          getValue: () => plug.config.disabled ? "On" : "Off",
+          onChange: (val) => plug.config.disabled = val,
+          configPaths: ["settings.frame.disabled"]
+        },
+        {
+          id: "frameCaptureAutoClose",
+          label: "Notification Timeout (ms)",
+          widget: "input",
+          inputs: [{ label: "Timeout (ms)", type: "number", min: "0", step: "1", value: () => isBool(plug.config.captureAutoClose) ? -1 : plug.config.captureAutoClose, helperText: { info: "How long the captured image preview stays on screen before disappearing, -1 for None" } }],
+          getValue: () => String(plug.config.captureAutoClose),
+          onChange: (val) => plug.config.captureAutoClose = val["Timeout (ms)"] === -1 ? false : val["Timeout (ms)"],
+          configPaths: ["settings.frame.captureAutoClose"]
+        }
+      ]
+    }
+  ]
+});
+
+// src/ts/utils/time.ts
+function formatMediaTime({ time, format = "digital", elapsed = true, showMs = false, casing = "normal" } = { time: 0 }) {
+  const long = format.endsWith("long"), sx = (n = 0) => n == 1 ? "" : "s", cs = (str) => casing === "upper" ? str.toUpperCase() : casing === "title" ? str.replace(/^([a-z])/i, (m2) => m2.toUpperCase()) : str.toLowerCase(), wrd = (n = 0) => ({ d: cs(long ? " day" + sx(n) + " " : "d"), h: cs(long ? " hour" + sx(n) + " " : "h"), m: cs(long ? " minute" + sx(n) + " " : "m"), s: cs(long ? " second" + sx(n) + " " : "s"), ms: cs(long ? " millisecond" + sx(n) + " " : "ms") }), pad = (v, n = 2, f) => long && !f ? v : String(v).padStart(n, isNum(+n) ? "0" : "-");
+  if (isNaN(time ?? NaN) || time === Infinity) return format !== "digital" ? ("-" + wrd().h + pad("-") + wrd().m + (!elapsed ? "left" : "")).trim() : !elapsed ? "-:--" : "-:--";
+  const s = Math.floor(Math.abs(time) % 60), m = Math.floor(Math.abs(time) / 60) % 60, h = Math.floor(Math.abs(time) / 3600) % 24, d = Math.floor(Math.abs(time) / 86400), ms = Math.floor(Math.abs(time) % 1 * 1e3);
+  if (format === "digital") {
+    const base2 = d ? d + ":" + pad(h, 2, true) + ":" + pad(m, 2, true) + ":" + pad(s, 2, true) : h ? h + ":" + pad(m, 2, true) + ":" + pad(s, 2, true) : m + ":" + pad(s, 2, true);
+    return !elapsed ? "-" + base2 : base2;
+  }
+  const base = d ? d + wrd(d).d + pad(h) + wrd(h).h + pad(m) + wrd(m).m + pad(s) + wrd(s).s : h ? h + wrd(h).h + pad(m) + wrd(m).m + pad(s) + wrd(s).s : m + wrd(m).m + pad(s) + wrd(s).s, msPart = showMs && ms ? pad(ms, 3) + wrd(ms).ms : "";
+  return (base + msPart + (!long ? " " : "") + (!elapsed ? "left" : "")).trim();
+}
+
+// src/ts/utils/dom.ts
+var import_sia_reactor3 = require("sia-reactor");
+var win2 = "undefined" !== typeof window ? window : void 0;
+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;
+
+// src/ts/utils/media.ts
+var import_utils18 = require("sia-reactor/utils");
+function getBooleanMediaProps(media, prop = "intent") {
+  return Object.keys(media[prop]).filter((k) => typeof media[prop][k] === "boolean");
+}
+var DUMMY_VID = (0, import_utils2.createEl)("video");
+var DUMMY_AUD = (0, import_utils2.createEl)("audio");
+
+// src/ts/plugs/menus/settings/gesture.ts
+var getClickOptions = (plug) => [{ value: false, display: "None" }, ...getBooleanMediaProps(plug.media).map((k) => ({ value: k, display: capitalize(k.replace(/([A-Z])/g, " $1").toLowerCase()) }))];
+var getSettingsGestureMenu = (plug) => ({
+  id: "general",
+  label: "Advanced",
+  icon: "settings",
+  widget: "group",
+  getValue: () => "",
+  items: [
+    {
+      id: "gestures",
+      label: "Gestures",
+      widget: "group",
+      getValue: () => plug.config.click === false && plug.config.dblClick === false && !plug.config.touch.volume && !plug.config.touch.brightness && !plug.config.touch.timeline && !plug.config.wheel.volume && !plug.config.wheel.brightness && !plug.config.wheel.timeline ? "Off" : "On",
+      tipHTML: "Configure touch, swipe, and click interactions",
+      configPaths: ["settings.gesture.click", "settings.gesture.dblClick", "settings.gesture.touch.volume", "settings.gesture.touch.brightness", "settings.gesture.touch.timeline", "settings.gesture.wheel.volume", "settings.gesture.wheel.brightness", "settings.gesture.wheel.timeline"],
+      items: [
+        {
+          id: "gestureClick",
+          label: "Single click",
+          widget: "select",
+          getValue: () => plug.config.click === false ? "None" : capitalize(String(plug.config.click)),
+          getOptions: () => getClickOptions(plug),
+          onChange: (val) => plug.config.click = getBoolOrStr(val),
+          configPaths: ["settings.gesture.click"],
+          tipHTML: "Action to perform when tapping once on the video player"
+        },
+        {
+          id: "gestureDblClick",
+          label: "Double click",
+          widget: "select",
+          getValue: () => plug.config.dblClick === false ? "None" : capitalize(String(plug.config.dblClick)),
+          getOptions: () => getClickOptions(plug),
+          onChange: (val) => plug.config.dblClick = getBoolOrStr(val),
+          configPaths: ["settings.gesture.dblClick"],
+          tipHTML: "Action to perform when double tapping on the video player"
+        },
+        {
+          id: "gestureTouchGroup",
+          label: "Touch gestures",
+          widget: "group",
+          getValue: () => plug.config.touch.volume || plug.config.touch.brightness || plug.config.touch.timeline ? "On" : "Off",
+          items: [
+            {
+              id: "gestureTouchVolume",
+              label: "Volume swipe",
+              widget: "toggle",
+              getValue: () => plug.config.touch.volume ? "On" : "Off",
+              onChange: (val) => plug.config.touch.volume = val,
+              configPaths: ["settings.gesture.touch.volume"],
+              title: "Swipe up or down on the right side of the screen to adjust volume"
+            },
+            {
+              id: "gestureTouchBrightness",
+              label: "Brightness swipe",
+              widget: "toggle",
+              getValue: () => plug.config.touch.brightness ? "On" : "Off",
+              onChange: (val) => plug.config.touch.brightness = val,
+              configPaths: ["settings.gesture.touch.brightness"],
+              title: "Swipe up or down on the left side of the screen to adjust brightness"
+            },
+            {
+              id: "gestureTouchTimeline",
+              label: "Seek swipe",
+              widget: "toggle",
+              getValue: () => plug.config.touch.timeline ? "On" : "Off",
+              onChange: (val) => plug.config.touch.timeline = val,
+              configPaths: ["settings.gesture.touch.timeline"],
+              title: "Swipe left or right anywhere on the screen to seek."
+            },
+            {
+              id: "gestureTouchThreshold",
+              label: "Swipe Threshold",
+              widget: "input",
+              inputs: [{ label: "ms", placeholder: "200", helperText: { info: "Time in ms before a touch is acknowledged to start a swipe gesture, provided it did not move during the hold duration." }, type: "number", min: "0", value: () => plug.config.touch.threshold }],
+              getValue: () => `${plug.config.touch.threshold}ms`,
+              onChange: (val) => plug.config.touch.threshold = val["ms"],
+              configPaths: ["settings.gesture.touch.threshold"]
+            },
+            {
+              id: "gestureTouchSliderTimeout",
+              label: "Slider timeout",
+              widget: "input",
+              inputs: [{ label: "ms", placeholder: "2500", helperText: { info: "How long the gesture indicator stays on screen after swiping." }, type: "number", min: "0", value: () => plug.config.touch.sliderTimeout }],
+              getValue: () => `${plug.config.touch.sliderTimeout}ms`,
+              onChange: (val) => plug.config.touch.sliderTimeout = val["ms"],
+              configPaths: ["settings.gesture.touch.sliderTimeout"]
+            },
+            {
+              id: "gestureTouchAxesRatio",
+              label: "Axes ratio",
+              widget: "range",
+              getValue: () => String(plug.config.touch.axesRatio),
+              getRange: () => ({ min: 0.1, max: 10, step: 0.25, formatTooltip: (v) => v.toFixed(1) }),
+              onChange: (val) => plug.config.touch.axesRatio = val,
+              configPaths: ["settings.gesture.touch.axesRatio"],
+              tipHTML: "Multiplier for vertical vs horizontal swipe dominance"
+            },
+            {
+              id: "gestureTouchInset",
+              label: "Edge inset",
+              widget: "range",
+              getValue: () => `${Math.round(plug.config.touch.inset)}px`,
+              getRange: () => ({ min: 0, max: 100, step: 5, formatTooltip: (v) => `${Math.round(v)}px` }),
+              onChange: (val) => plug.config.touch.inset = val,
+              configPaths: ["settings.gesture.touch.inset"],
+              tipHTML: "Distance from the screen edges to ignore swipes (prevents accidental gestures)"
+            }
+          ]
+        },
+        {
+          id: "gestureWheelGroup",
+          label: "Scroll wheel",
+          widget: "group",
+          getValue: () => plug.config.wheel.volume || plug.config.wheel.brightness || plug.config.wheel.timeline ? "On" : "Off",
+          items: [
+            {
+              id: "gestureWheelVolume",
+              label: "Volume scroll",
+              widget: "toggle",
+              getValue: () => plug.config.wheel.volume ? "On" : "Off",
+              onChange: (val) => plug.config.wheel.volume = val,
+              configPaths: ["settings.gesture.wheel.volume"]
+            },
+            {
+              id: "gestureWheelBrightness",
+              label: "Brightness scroll",
+              widget: "toggle",
+              getValue: () => plug.config.wheel.brightness ? "On" : "Off",
+              onChange: (val) => plug.config.wheel.brightness = val,
+              configPaths: ["settings.gesture.wheel.brightness"]
+            },
+            {
+              id: "gestureWheelTimeline",
+              label: "Seek scroll",
+              widget: "toggle",
+              getValue: () => plug.config.wheel.timeline ? "On" : "Off",
+              onChange: (val) => plug.config.wheel.timeline = val,
+              configPaths: ["settings.gesture.wheel.timeline"]
+            },
+            {
+              id: "gestureWheelTimeout",
+              label: "Wheel timeout",
+              widget: "input",
+              inputs: [{ label: "ms", placeholder: "2500", type: "number", min: "0", value: () => plug.config.wheel.timeout }],
+              getValue: () => `${plug.config.wheel.timeout}ms`,
+              onChange: (val) => plug.config.wheel.timeout = val["ms"],
+              configPaths: ["settings.gesture.wheel.timeout"]
+            },
+            {
+              id: "gestureWheelXRatio",
+              label: "Horizontal sensitivity",
+              widget: "range",
+              getValue: () => String(plug.config.wheel.xRatio),
+              getRange: () => ({ min: 1, max: 50, step: 1 }),
+              onChange: (val) => plug.config.wheel.xRatio = val,
+              configPaths: ["settings.gesture.wheel.xRatio"]
+            },
+            {
+              id: "gestureWheelYRatio",
+              label: "Vertical sensitivity",
+              widget: "range",
+              getValue: () => String(plug.config.wheel.yRatio),
+              getRange: () => ({ min: 1, max: 50, step: 1 }),
+              onChange: (val) => plug.config.wheel.yRatio = val,
+              configPaths: ["settings.gesture.wheel.yRatio"]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+});
+
+// src/ts/plugs/settings/keys/build.ts
+var KEY_SHORTCUT_MOD_ACTIONS = ["skip", "volume", "brightness", "playbackRate", "captionsFontSize"];
+
+// src/ts/plugs/menus/settings/keys.ts
+var fmt = (action) => capitalize(action.replace(/([A-Z])/g, " $1"));
+var getSettingsKeysMenu = (plug) => ({
+  id: "general",
+  label: "Advanced",
+  icon: "settings",
+  widget: "group",
+  getValue: () => "",
+  items: [
+    {
+      id: "keyboard",
+      label: "Keyboard",
+      widget: "group",
+      getValue: () => plug.config.disabled ? "Off" : "On",
+      tipHTML: "Configure keyboard shortcuts and modifier keys",
+      configPaths: ["settings.keys.disabled"],
+      items: [
+        {
+          id: "keyboardDisabled",
+          label: "Disable",
+          widget: "toggle",
+          getValue: () => plug.config.disabled ? "On" : "Off",
+          onChange: (val) => plug.config.disabled = val,
+          configPaths: ["settings.keys.disabled"]
+        },
+        {
+          id: "keyboardStrictMatches",
+          label: "Strict Matches",
+          widget: "toggle",
+          getValue: () => plug.config.strictMatches ? "On" : "Off",
+          onChange: (val) => plug.config.strictMatches = val,
+          configPaths: ["settings.keys.strictMatches"],
+          title: "Require exact key combo matches for actions (e.g., Shift+f will not trigger the action for f)."
+        },
+        {
+          id: "keyboardMods",
+          label: "Modifier keys",
+          widget: "group",
+          getValue: () => plug.config.mods.disabled ? "Off" : "On",
+          items: [
+            {
+              id: "keyboardModsDisabled",
+              label: "Disable",
+              widget: "toggle",
+              getValue: () => plug.config.mods.disabled ? "On" : "Off",
+              onChange: (val) => plug.config.mods.disabled = val,
+              configPaths: ["settings.keys.mods.disabled"],
+              title: "Allow holding Shift or Ctrl/Cmd to change how much the action steps by (e.g. holding Shift to seek 10s instead of 5s)"
+            },
+            ...KEY_SHORTCUT_MOD_ACTIONS.map((mod) => ({
+              id: `keyboardMod-${mod}`,
+              label: `${fmt(mod)} Modifier`,
+              widget: "group",
+              getValue: () => "",
+              items: [
+                {
+                  id: `keyboardMod-${mod}-ctrl`,
+                  label: "Ctrl amount",
+                  widget: "input",
+                  inputs: [{ label: "Amount", type: "number", min: "0", step: "any", value: () => plug.config.mods[mod].ctrl }],
+                  getValue: () => String(plug.config.mods[mod].ctrl),
+                  onChange: (val) => plug.config.mods[mod].ctrl = val["Amount"],
+                  configPaths: [`settings.keys.mods.${mod}`]
+                },
+                {
+                  id: `keyboardMod-${mod}-shift`,
+                  label: "Shift amount",
+                  widget: "input",
+                  inputs: [{ label: "Amount", type: "number", min: "0", step: "any", value: () => plug.config.mods[mod].shift }],
+                  getValue: () => String(plug.config.mods[mod].shift),
+                  onChange: (val) => plug.config.mods[mod].shift = val["Amount"],
+                  configPaths: [`settings.keys.mods.${mod}`]
+                }
+              ]
+            }))
+          ]
+        },
+        {
+          id: "keyboardLists",
+          label: "Lists & Overrides",
+          widget: "group",
+          getValue: () => "",
+          items: [
+            {
+              id: "keyboardOverrides",
+              label: "Overrides",
+              widget: "input",
+              inputs: [{ label: "Keys", placeholder: "Space, ArrowUp", helperText: { info: "Comma-separated keys that override default browser behavior" }, value: () => plug.config.overrides.join(", ") }],
+              getValue: () => plug.config.overrides.join(", "),
+              // prettier-ignore
+              onChange: (val) => plug.config.overrides = val["Keys"].split(",").map((s) => s.trim()).filter(Boolean),
+              configPaths: ["settings.keys.overrides"]
+            },
+            {
+              id: "keyboardBlocks",
+              label: "Blocks",
+              widget: "input",
+              inputs: [{ label: "Keys", placeholder: "Space, ArrowUp", helperText: { info: "Comma-separated keys to completely block" }, value: () => plug.config.blocks.join(", ") }],
+              getValue: () => plug.config.blocks.join(", "),
+              // prettier-ignore
+              onChange: (val) => plug.config.blocks = val["Keys"].split(",").map((s) => s.trim()).filter(Boolean),
+              configPaths: ["settings.keys.blocks"]
+            },
+            {
+              id: "keyboardWhitelist",
+              label: "Whitelist",
+              widget: "input",
+              inputs: [{ label: "Keys", placeholder: "Space, ArrowUp", helperText: { info: "Comma-separated keys that are explicitly allowed" }, value: () => plug.config.whitelist.join(", ") }],
+              getValue: () => plug.config.whitelist.join(", "),
+              // prettier-ignore
+              onChange: (val) => plug.config.whitelist = val["Keys"].split(",").map((s) => s.trim()).filter(Boolean),
+              configPaths: ["settings.keys.whitelist"]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+});
+
+// src/ts/plugs/menus/settings/locked.ts
+var getSettingsLockedMenu = (plug) => ({
+  id: "general",
+  label: "Advanced",
+  icon: "settings",
+  widget: "group",
+  getValue: () => "",
+  items: [
+    {
+      id: "locked",
+      label: "Lockable",
+      widget: "group",
+      getValue: () => plug.config.disabled ? "Off" : "On",
+      configPaths: ["settings.locked.disabled"],
+      tipHTML: "Configure whether the player can be locked to prevent accidental interactions.",
+      items: [
+        {
+          id: "lockedDisabled",
+          label: "Disable",
+          widget: "toggle",
+          getValue: () => plug.config.disabled ? "On" : "Off",
+          onChange: (val) => plug.config.disabled = val,
+          configPaths: ["settings.locked.disabled"]
+        }
+      ]
+    }
+  ]
+});
+
+// src/ts/plugs/menus/settings/metadata.ts
+var import_modules = require("sia-reactor/modules");
+var getSettingsMetadataMenu = (plug) => [
+  {
+    id: "loop",
+    label: "Loop",
+    icon: "loop",
+    widget: "toggle",
+    getValue: () => plug.media.state.loop ? "On" : "Off",
+    onChange: (val) => plug.media.intent.loop = val,
+    mediaPaths: ["state.loop"]
+  },
+  {
+    id: "quality",
+    label: "Quality",
+    icon: "quality",
+    widget: "select",
+    feature: "levels",
+    getValue() {
+      const list = plug.media.status.levels;
+      if (!list || !list.length || plug.media.state.currentLevel === -1) return "";
+      const opts = this.getOptions();
+      return plug.media.state.autoLevel ? opts[0].display : opts.find((o) => o.value === plug.media.state.currentLevel)?.display || "";
+    },
+    getOptions() {
+      const list = plug.media.status.levels;
+      if (!list || !list.length) return [{ value: -1, display: "Auto" }];
+      const getOpt = (i, t = list[i]) => {
+        const label = t.label || (t.height ? `${t.height}p` : "") || (isStr(t) ? capitalize(t) : "Unknown");
+        return { value: i, display: label, infoText: t.bandwidth || t.bitrate ? `${Math.round((t.bandwidth || t.bitrate) / 1e3)} kbps` : "" };
+      };
+      const opts = getUniqueOpts(Array.from(list).reduce((acc, t, i) => (isStr(t) && t.toLowerCase() === "auto" ? acc : acc.push(getOpt(i)), acc), [])).reverse(), { display, infoText } = plug.media.state.autoLevel ? getOpt(plug.media.state.currentLevel) : { display: "Unknown", infoText: "" };
+      return opts.push({ value: -1, display: `Auto${display !== "Unknown" ? ` (${display})` : ""}`, infoText }), opts;
+    },
+    getDisabled: () => !plug.media.status.levels.length,
+    onChange: (val) => val === -1 ? plug.media.intent.autoLevel = true : plug.media.intent.currentLevel = val,
+    mediaPaths: ["status.levels", "state.currentLevel", "state.autoLevel"]
+  },
+  {
+    id: "audioTracks",
+    label: "Audio track",
+    icon: "audiotrack",
+    widget: "select",
+    feature: "audioTracks",
+    getValue() {
+      const list = plug.media.status.audioTracks;
+      if (!list || !list.length || plug.media.state.currentAudioTrack === -1) return "";
+      const track = list[plug.media.state.currentAudioTrack];
+      return track?.label || track?.language || `Track ${plug.media.state.currentAudioTrack + 1}`;
+    },
+    getOptions() {
+      const list = plug.media.status.audioTracks;
+      return !list || !list.length ? [] : Array.from(list).map((t, i) => ({ value: i, display: t.label || t.language || `Track ${i + 1}` }));
+    },
+    onChange: (val) => plug.media.intent.currentAudioTrack = val,
+    mediaPaths: ["status.audioTracks", "state.currentAudioTrack"]
+  },
+  {
+    id: "videoTracks",
+    label: "Video track",
+    icon: "videotrack",
+    widget: "select",
+    feature: "videoTracks",
+    getValue() {
+      const list = plug.media.status.videoTracks;
+      if (!list || !list.length || plug.media.state.currentVideoTrack === -1) return "";
+      const track = list[plug.media.state.currentVideoTrack];
+      return track?.label || track?.language || `Track ${plug.media.state.currentVideoTrack + 1}`;
+    },
+    getOptions() {
+      const list = plug.media.status.videoTracks;
+      return !list || !list.length ? [] : Array.from(list).map((t, i) => ({ value: i, display: t.label || t.language || `Track ${i + 1}` }));
+    },
+    onChange: (val) => plug.media.intent.currentVideoTrack = val,
+    mediaPaths: ["status.videoTracks", "state.currentVideoTrack"]
+  },
+  {
+    id: "captions",
+    label: "Captions",
+    icon: "captions",
+    widget: "select",
+    feature: "textTracks",
+    tipHTML: "Select a caption track",
+    getValue() {
+      const list = plug.media.status.textTracks;
+      return !list || !list.length || plug.media.state.currentTextTrack === -1 ? "Off" : list[plug.media.state.currentTextTrack]?.label || list[plug.media.state.currentTextTrack]?.language || `Track ${plug.media.state.currentTextTrack + 1}`;
+    },
+    getOptions() {
+      const list = plug.media.status.textTracks;
+      return !list || !list.length ? [{ value: -1, display: "Off" }] : Array.from(list).map((t, i) => ({ value: i, display: t.label || t.language || `Track ${i + 1}` }));
+    },
+    onChange: (val) => plug.media.intent.currentTextTrack = val,
+    mediaPaths: ["status.textTracks", "state.currentTextTrack", "features.textTracks"]
+  },
+  {
+    id: "chapters",
+    label: "Chapters",
+    icon: "chapters",
+    widget: "select",
+    feature: "currentChapter",
+    tipHTML: "Navigate through video chapters",
+    getValue() {
+      const list = plug.media.settings.metadata.chapterInfo;
+      if (!list || !list.length || plug.media.state.currentChapter === -1) return "";
+      const chapter = list[plug.media.state.currentChapter];
+      return chapter?.title || `Chapter ${plug.media.state.currentChapter + 1}`;
+    },
+    getOptions() {
+      const list = plug.media.settings.metadata.chapterInfo;
+      return !list || !list.length ? [] : list.map((c, i) => ({ value: i, display: c.title || `Chapter ${i + 1}`, infoText: isNum(c.startTime) ? formatMediaTime({ time: c.startTime }) : void 0 }));
+    },
+    onChange: (val) => (0, import_modules.silence)(() => plug.media.intent.currentChapter = val),
+    mediaPaths: ["settings.metadata.chapterInfo", "state.currentChapter", "features.currentChapter"]
+  }
+];
+
+// src/ts/plugs/menus/settings/modes.ts
+var getSettingsModesMenu = (plug) => ({
+  id: "general",
+  label: "Advanced",
+  icon: "settings",
+  widget: "group",
+  getValue: () => "",
+  items: [
+    {
+      id: "modes",
+      label: "Modes",
+      widget: "group",
+      getValue: () => plug.config.fullscreen.disabled && plug.config.pictureInPicture.disabled && plug.config.theater.disabled && plug.config.miniplayer.disabled ? "Off" : "On",
+      tipHTML: "Configure fullscreen, picture-in-picture, and display modes",
+      configPaths: ["settings.modes.fullscreen.disabled", "settings.modes.pictureInPicture.disabled", "settings.modes.theater.disabled", "settings.modes.miniplayer.disabled"],
+      items: [
+        {
+          id: "modesFullscreen",
+          label: "Fullscreen",
+          widget: "group",
+          getValue: () => plug.config.fullscreen.disabled ? "Off" : "On",
+          configPaths: ["settings.modes.fullscreen.disabled"],
+          items: [
+            {
+              id: "modesFullscreenDisabled",
+              label: "Disable",
+              widget: "toggle",
+              getValue: () => plug.config.fullscreen.disabled ? "On" : "Off",
+              onChange: (val) => plug.config.fullscreen.disabled = val,
+              configPaths: ["settings.modes.fullscreen.disabled"]
+            },
+            {
+              id: "modesFullscreenOrientationLock",
+              label: "Orientation lock",
+              widget: "select",
+              getValue: () => getUIOpt(plug.config.fullscreen.orientationLock.options, plug.config.fullscreen.orientationLock.value),
+              getOptions: () => plug.config.fullscreen.orientationLock.options,
+              onChange: (val) => plug.config.fullscreen.orientationLock.value = getBoolOrStr(val),
+              configPaths: ["settings.modes.fullscreen.orientationLock.value"],
+              tipHTML: "Lock the device orientation to a specific layout when entering fullscreen"
+            },
+            {
+              id: "modesFullscreenOnRotate",
+              label: "Auto-fullscreen on rotate",
+              widget: "select",
+              getValue: () => getUIOpt(plug.config.fullscreen.onRotate.options, plug.config.fullscreen.onRotate.value),
+              getOptions: () => plug.config.fullscreen.onRotate.options,
+              onChange: (val) => plug.config.fullscreen.onRotate.value = getBoolOrStr(val),
+              configPaths: ["settings.modes.fullscreen.onRotate.value"],
+              tipHTML: "Automatically enter fullscreen mode when the device is rotated"
+            }
+          ]
+        },
+        {
+          id: "modesPip",
+          label: "Picture in picture",
+          widget: "group",
+          getValue: () => plug.config.pictureInPicture.disabled ? "Off" : "On",
+          configPaths: ["settings.modes.pictureInPicture.disabled"],
+          items: [
+            {
+              id: "modesPipDisabled",
+              label: "Disable",
+              widget: "toggle",
+              getValue: () => plug.config.pictureInPicture.disabled ? "On" : "Off",
+              onChange: (val) => plug.config.pictureInPicture.disabled = val,
+              configPaths: ["settings.modes.pictureInPicture.disabled"]
+            },
+            {
+              id: "modesPipFloating",
+              label: "Floating player API",
+              widget: "group",
+              getValue: () => "",
+              items: [
+                {
+                  id: "modesPipFloatingDisabled",
+                  label: "Disable",
+                  widget: "toggle",
+                  getValue: () => plug.config.pictureInPicture.floatingPlayer.disabled ? "On" : "Off",
+                  onChange: (val) => plug.config.pictureInPicture.floatingPlayer.disabled = val,
+                  configPaths: ["settings.modes.pictureInPicture.floatingPlayer.disabled"],
+                  title: "The floating player (Document PiP API) allows keeping the custom player UI in the Picture-in-Picture window"
+                },
+                {
+                  id: "modesPipFloatingWidth",
+                  label: "Initial width",
+                  widget: "range",
+                  getValue: () => `${Math.round(plug.config.pictureInPicture.floatingPlayer.width)}px`,
+                  getRange: () => ({ min: 100, max: 1200, step: 20, formatTooltip: (v) => `${Math.round(v)}px` }),
+                  onChange: (val) => plug.config.pictureInPicture.floatingPlayer.width = val,
+                  configPaths: ["settings.modes.pictureInPicture.floatingPlayer.width"]
+                },
+                {
+                  id: "modesPipFloatingHeight",
+                  label: "Initial height",
+                  widget: "range",
+                  getValue: () => `${Math.round(plug.config.pictureInPicture.floatingPlayer.height)}px`,
+                  getRange: () => ({ min: 100, max: 800, step: 20, formatTooltip: (v) => `${Math.round(v)}px` }),
+                  onChange: (val) => plug.config.pictureInPicture.floatingPlayer.height = val,
+                  configPaths: ["settings.modes.pictureInPicture.floatingPlayer.height"]
+                },
+                {
+                  id: "modesPipFloatingDisallowReturn",
+                  label: "Disallow return to opener",
+                  widget: "toggle",
+                  getValue: () => plug.config.pictureInPicture.floatingPlayer.disallowReturnToOpener ? "On" : "Off",
+                  onChange: (val) => plug.config.pictureInPicture.floatingPlayer.disallowReturnToOpener = val,
+                  configPaths: ["settings.modes.pictureInPicture.floatingPlayer.disallowReturnToOpener"],
+                  title: "Hide the 'Back to Tab' button in the floating window"
+                },
+                {
+                  id: "modesPipFloatingPreferInitial",
+                  label: "Prefer initial placement",
+                  widget: "toggle",
+                  getValue: () => plug.config.pictureInPicture.floatingPlayer.preferInitialWindowPlacement ? "On" : "Off",
+                  onChange: (val) => plug.config.pictureInPicture.floatingPlayer.preferInitialWindowPlacement = val,
+                  configPaths: ["settings.modes.pictureInPicture.floatingPlayer.preferInitialWindowPlacement"],
+                  title: "Try to open the floating window in the same screen position it was previously closed"
+                }
+              ]
+            }
+          ]
+        },
+        {
+          id: "modesTheater",
+          label: "Theater mode",
+          widget: "group",
+          getValue: () => plug.config.theater.disabled ? "Off" : "On",
+          configPaths: ["settings.modes.theater.disabled"],
+          items: [
+            {
+              id: "modesTheaterDisabled",
+              label: "Disable",
+              widget: "toggle",
+              getValue: () => plug.config.theater.disabled ? "On" : "Off",
+              onChange: (val) => plug.config.theater.disabled = val,
+              configPaths: ["settings.modes.theater.disabled"]
+            }
+          ]
+        },
+        {
+          id: "modesMiniplayer",
+          label: "Miniplayer",
+          widget: "group",
+          getValue: () => plug.config.miniplayer.disabled ? "Off" : "On",
+          configPaths: ["settings.modes.miniplayer.disabled"],
+          items: [
+            {
+              id: "modesMiniplayerDisabled",
+              label: "Disable",
+              widget: "toggle",
+              getValue: () => plug.config.miniplayer.disabled ? "On" : "Off",
+              onChange: (val) => plug.config.miniplayer.disabled = val,
+              configPaths: ["settings.modes.miniplayer.disabled"]
+            },
+            {
+              id: "modesMiniplayerMinWidth",
+              label: "Min window width",
+              widget: "range",
+              getValue: () => `${Math.round(plug.config.miniplayer.minWindowWidth)}px`,
+              getRange: () => ({ min: 100, max: 1200, step: 20, formatTooltip: (v) => `${Math.round(v)}px` }),
+              onChange: (val) => plug.config.miniplayer.minWindowWidth = val,
+              configPaths: ["settings.modes.miniplayer.minWindowWidth"]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+});
+
+// src/ts/plugs/menus/settings/objectFit.ts
+var getSettingsObjectFitMenu = (plug) => ({
+  id: "general",
+  label: "Advanced",
+  icon: "settings",
+  widget: "group",
+  getValue: () => "",
+  items: [
+    {
+      id: "layout-objectFit",
+      label: "Video fit",
+      widget: "select",
+      feature: "objectFit",
+      getValue: () => plug.toLabel(),
+      getOptions: () => plug.config.options,
+      onChange: (val) => plug.media.intent.objectFit = val,
+      mediaPaths: ["state.objectFit"]
+    }
+  ]
+});
+
+// src/ts/plugs/menus/settings/overlay.ts
+var getSettingsOverlayMenu = (plug) => ({
+  id: "general",
+  label: "Advanced",
+  icon: "settings",
+  widget: "group",
+  getValue: () => "",
+  items: [
+    {
+      id: "overlayConfig",
+      label: "Overlay",
+      widget: "group",
+      getValue: () => getUIOpt(plug.config.curtain.options, plug.config.curtain.value),
+      tipHTML: "Configure the overlay behavior and appearance",
+      configPaths: ["settings.overlay.curtain.value"],
+      items: [
+        {
+          id: "overlayBehavior",
+          label: "Hide behaviour",
+          widget: "select",
+          getValue: () => getUIOpt(plug.config.behavior.options, plug.config.behavior.value),
+          getOptions: () => plug.config.behavior.options,
+          onChange: (val) => plug.config.behavior.value = val,
+          configPaths: ["settings.overlay.behavior.value"]
+        },
+        {
+          id: "overlayDelay",
+          label: "Auto-hide delay",
+          widget: "input",
+          inputs: [{ label: "ms", placeholder: "2500", type: "number", min: "0", value: () => plug.config.delay }],
+          getValue: () => `${plug.config.delay}ms`,
+          onChange: (val) => plug.config.delay = val["ms"],
+          configPaths: ["settings.overlay.delay"]
+        },
+        {
+          id: "overlayCurtain",
+          label: "Curtain style",
+          widget: "select",
+          getValue: () => getUIOpt(plug.config.curtain.options, plug.config.curtain.value),
+          getOptions: () => plug.config.curtain.options,
+          onChange: (val) => plug.config.curtain.value = val,
+          configPaths: ["settings.overlay.curtain.value"]
+        }
+      ]
+    }
+  ]
+});
+
+// src/ts/plugs/menus/settings/persist.ts
+var getSettingsPersistMenu = (plug) => ({
+  id: "general",
+  label: "Advanced",
+  icon: "settings",
+  widget: "group",
+  getValue: () => "",
+  items: [
+    {
+      id: "persist",
+      label: "Persistence",
+      widget: "group",
+      tipHTML: "Configure how settings and playback state are saved to local storage.",
+      getValue: () => "On",
+      items: [
+        {
+          id: "persistThrottle",
+          label: "Save Throttle",
+          widget: "input",
+          inputs: [{ label: "ms", placeholder: "2500", helperText: { info: "How often the player saves state changes. Higher numbers = fewer writes but less accurate resumption." }, type: "number", min: "0", value: () => plug.module.config.throttle }],
+          getValue: () => `${plug.module.config.throttle}ms`,
+          onChange: (val) => plug.config.throttle = val["ms"],
+          configPaths: ["settings.persist.throttle"]
+        },
+        {
+          id: "persistStrict",
+          label: "Strict resume",
+          widget: "toggle",
+          getValue: () => plug.module.config.strict ? "On" : "Off",
+          onChange: (val) => plug.config.strict = val,
+          configPaths: ["settings.persist.strict"],
+          title: "Force save immediately before page closes or reloads for accurate resumption, might restore cleared data."
+        },
+        {
+          id: "persistClearStorage",
+          label: "Clear Storage",
+          title: "Clear all saved player settings and preferences.",
+          widget: "button",
+          getValue: () => "Clear",
+          onChange: async () => {
+            const ok = await t007.confirm("Are you sure you want to clear all your data?", { id: `${plug.ctlr.config.id}-clear-dialog`, rootElement: plug.media.container, confirmText: "Clear", title: "Clear data" });
+            if (ok) plug.module.clear(), plug.ctlr.plug("settings.toasts")?.toast?.success("Storage cleared successfully!", { tag: "tmg-persist", signal: plug.signal });
+          }
+        }
+      ]
+    }
+  ]
+});
+
+// src/ts/plugs/menus/settings/playbackRate.ts
+var import_utils19 = require("sia-reactor/utils");
+var getSettingsPlaybackRateMenu = (plug) => [
+  {
+    id: "playbackRate",
+    label: "Playback speed",
+    icon: "playbackrate",
+    widget: "group",
+    feature: "playbackRate",
+    tipHTML: "Configure custom playback speeds",
+    getValue: () => plug.media.state.playbackRate === 1 ? "Normal" : `${plug.media.state.playbackRate}x`,
+    items: [
+      {
+        id: "playbackRateSlider",
+        label: "Custom",
+        widget: "range",
+        inline: true,
+        getRange() {
+          const divs = [];
+          for (let i = Math.ceil(plug.config.min); i <= plug.config.max; i++) divs.push(i);
+          return { min: plug.config.min, max: plug.config.max, step: 0.05, formatTooltip: (v) => `${v.toFixed(2)}x`, divs };
+        },
+        getValue: () => plug.media.state.playbackRate.toFixed(2).replace(/\.?0+$/, "") + "x",
+        onChange: (val) => plug.media.intent.playbackRate = val,
+        configPaths: ["settings.playbackRate.min", "settings.playbackRate.max"],
+        mediaPaths: ["state.playbackRate"]
+      },
+      {
+        id: "playbackRateSelect",
+        label: "Presets",
+        widget: "select",
+        inline: true,
+        getOptions: () => plug.config.options.map((o) => {
+          const p = parseUIOpt(o);
+          return { value: p.value, display: p.value === 1 ? "Normal" : p.display };
+        }),
+        getValue: () => String(plug.media.state.playbackRate),
+        onChange: (val) => plug.media.intent.playbackRate = val,
+        mediaPaths: ["state.playbackRate"]
+      }
+    ],
+    mediaPaths: ["state.playbackRate"]
+  },
+  {
+    id: "limits",
+    label: "Limits",
+    icon: "configure",
+    widget: "group",
+    getValue: () => "",
+    items: [
+      {
+        id: "playbackRateLimits",
+        label: "Playback speed",
+        widget: "limits",
+        configPaths: ["settings.playbackRate.min", "settings.playbackRate.max", "settings.playbackRate.skip"],
+        getValue: () => "",
+        getLimits: () => [{ name: "playbackRate", label: "Clamp bounds", min: plug.config.min, max: plug.config.max, step: plug.config.skip }],
+        onChange: (val) => (0, import_utils19.fanout)(plug.config, { min: val.playbackRate_min, max: val.playbackRate_max, skip: val.playbackRate_step }, { skipUndefined: true })
+      }
+    ]
+  }
+];
+
+// src/ts/plugs/menus/settings/poster.ts
+var getSettingsPosterMenu = (plug) => ({
+  id: "general",
+  label: "Advanced",
+  icon: "settings",
+  widget: "group",
+  getValue: () => "",
+  items: [
+    {
+      id: "poster",
+      label: "Poster",
+      widget: "group",
+      tipHTML: "If strict, the poster hides as soon as playback starts or time changes, and doesn't come back when the video ends.",
+      getValue: () => plug.settings.poster.strict ? "Strict" : "Normal",
+      configPaths: ["settings.poster.strict"],
+      items: [
+        {
+          id: "posterStrict",
+          label: "Strict Mode",
+          widget: "toggle",
+          getValue: () => plug.settings.poster.strict ? "On" : "Off",
+          onChange: (val) => plug.settings.poster.strict = val,
+          configPaths: ["settings.poster.strict"]
+        }
+      ]
+    }
+  ]
+});
+
+// src/ts/plugs/menus/settings/settingsView.ts
+var getSettingsSettingsViewMenu = (plug) => ({
+  id: "general",
+  label: "Advanced",
+  icon: "settings",
+  widget: "group",
+  getValue: () => "",
+  items: [
+    {
+      id: "settingsView",
+      label: "Settings View",
+      widget: "group",
+      getValue: () => "",
+      items: [
+        {
+          id: "settingsViewAutoPause",
+          label: "Auto-pause on open",
+          widget: "toggle",
+          getValue: () => plug.config.autoPause ? "On" : "Off",
+          onChange: (val) => plug.config.autoPause = val,
+          configPaths: ["settings.settingsView.autoPause"],
+          title: "Automatically pause the media when the settings view is opened"
+        },
+        {
+          id: "settingsViewMenu",
+          label: "Menu",
+          widget: "group",
+          getValue: () => "",
+          items: [
+            {
+              id: "settingsViewPreserveStack",
+              label: "Remember last opened",
+              widget: "toggle",
+              getValue: () => plug.config.menu.preserveStack ? "On" : "Off",
+              onChange: (val) => plug.config.menu.preserveStack = val,
+              configPaths: ["settings.settingsView.menu.preserveStack"],
+              title: "Remember the last opened menu when re-opening the settings menu"
+            }
+          ]
+        }
+      ]
+    },
+    // Dev Mode is last in General, registered by settingsView (the last General contributor)
+    {
+      id: "generalDevMode",
+      label: "Developer Mode",
+      widget: "toggle",
+      getValue: () => plug.ctlr.config.devMode ? "On" : "Off",
+      onChange: (val) => plug.ctlr.config.devMode = val,
+      configPaths: ["devMode"],
+      tipHTML: "Enables developer tools, verbose logging, and debug overlays."
+    }
+  ]
+});
+
+// src/ts/plugs/menus/settings/sleepTimer.ts
+var getSettingsSleepTimerMenu = (plug) => {
+  const getEndDisplay = () => {
+    const timeLeft = plug.media.status.duration - plug.media.state.currentTime;
+    return Number.isFinite(timeLeft) && timeLeft > 0 ? `End of video (${Math.floor(timeLeft / 60)} minutes)` : "End of video";
+  };
+  return {
+    id: "sleepTimer",
+    label: "Sleep timer",
+    icon: "timer",
+    widget: "select",
+    getValue: () => plug.state.ms ? plug.state.ms === -1 ? getEndDisplay() : formatMediaTime({ time: plug.state.ms / 1e3, format: "long" }) : "Off",
+    getOptions: () => [
+      { display: "Off", value: 0 },
+      { display: "10 minutes", value: 10 * 60 * 1e3 },
+      { display: "15 minutes", value: 15 * 60 * 1e3 },
+      { display: "20 minutes", value: 20 * 60 * 1e3 },
+      { display: "30 minutes", value: 30 * 60 * 1e3 },
+      { display: "45 minutes", value: 45 * 60 * 1e3 },
+      { display: "60 minutes", value: 60 * 60 * 1e3 },
+      { display: getEndDisplay(), value: -1 }
+    ],
+    onChange: (value) => plug.setTimer(Number(value))
+  };
+};
+
+// src/ts/plugs/menus/settings/time.ts
+var import_utils20 = require("sia-reactor/utils");
+var getSettingsTimeMenu = (plug) => ({
+  id: "limits",
+  label: "Limits",
+  icon: "configure",
+  widget: "group",
+  getValue: () => "",
+  items: [
+    {
+      id: "timeLimits",
+      label: "Time",
+      widget: "limits",
+      configPaths: ["settings.time.min", "settings.time.max", "settings.time.skip", "settings.time.start", "settings.time.end"],
+      getValue: () => "",
+      getLimits: () => [
+        { name: "time", label: "Clamp bounds", min: plug.config.min, max: plug.config.max, step: plug.config.skip },
+        { name: "time", label: "Start & End", start: plug.config.start ?? 0, end: plug.config.end }
+      ],
+      onChange: (val) => (0, import_utils20.fanout)(plug.config, { min: val.time_min, max: val.time_max, skip: val.time_step, start: val.time_start, end: val.time_end }, { skipUndefined: true })
+    }
+  ]
+});
+
+// src/ts/plugs/menus/settings/timeTravel.ts
+var formatEntry = (entry, index) => {
+  if (!entry) return { display: `(${index + 1}) Unknown`, infoText: "" };
+  if (entry.nodes) return { display: `(${index + 1}) ${entry.label || `Batch (${entry.nodes.length})`}`, infoText: "" };
+  const rawPath = entry.path ? String(entry.path) : "change", typeStr = rawPath.startsWith("state.") ? " (State)" : rawPath.startsWith("intent.") ? " (Intent)" : rawPath.startsWith("config.") ? " (Config)" : "", p = rawPath.replace(/^(intent|state|config)\./, "").split(".").pop() || rawPath;
+  return { display: `(${index + 1}) ${capitalize(uncamelize(p))}${typeStr}`, infoText: entry.to != null ? String(entry.to) : "" };
+};
+var getSettingsTimeTravelMenu = (plug) => ({
+  id: "general",
+  label: "Advanced",
+  icon: "settings",
+  widget: "group",
+  getValue: () => "",
+  items: [
+    {
+      id: "timeTravel",
+      label: "Time travel",
+      widget: "group",
+      getValue: () => plug.module.config.limit ? "On" : "Off",
+      onWire: (syncUI, signal) => plug.module.config.on("limit", syncUI, { signal }),
+      tipHTML: "\u{1F30C} Step through the space-time continuum of your player's state. Rewind mistakes, replay interactions, and witness the magic of reactive architecture firsthand.",
+      items: [
+        {
+          id: "timeTravelHistory",
+          label: "History",
+          widget: "select",
+          getValue: () => plug.module.state.history.length ? `(${plug.module.state.currentFrame}) of ${plug.module.state.history.length}` : "Empty",
+          getOptions: () => {
+            const h = plug.module.state.history, centerIdx = Math.max(0, (plug.module.state.currentFrame ?? 0) - 1), startIdx = Math.max(0, centerIdx - 10);
+            return h.slice(startIdx, Math.min(h.length, centerIdx + 11)).map((entry, i) => {
+              const actualIdx = startIdx + i, formatted = formatEntry(entry, actualIdx);
+              return { value: `(${actualIdx + 1}) of ${plug.module.state.history.length}`, display: formatted.display, infoText: formatted.infoText };
+            }).reverse();
+          },
+          onChange: (val) => {
+            const match = val.match(/\((\d+)\)/);
+            if (match) plug.module.jumpTo(Number(match[1]));
+          },
+          onWire: (syncUI, signal) => {
+            const tk = "tt_" + Math.random();
+            for (const k of ["currentFrame", "tracking", "paused"]) plug.module.state.on(k, () => plug.ctlr.throttle(tk, () => (syncUI(), plug.ctlr.plug("settings.settingsView")?.menu?.syncUI("timeTravelHistory")), 30, false), { signal });
+          },
+          configPaths: ["settings.timeTravel.module"],
+          actions: [
+            {
+              id: "toggleWhitelist",
+              getLabel: () => {
+                const w = plug.module.config.whitelist;
+                return w?.[0] === "state" || w?.[0]?.[0] === "state" ? "Record Intents" : "Record States";
+              },
+              onClick: () => {
+                const w = plug.module.config.whitelist, isState = w?.[0] === "state" || w?.[0]?.[0] === "state";
+                plug.config.module.whitelist = Array.isArray(w) ? [isState ? "intent" : "state"] : { ...w, 0: [isState ? "intent" : "state"] };
+                plug.ctlr.plug("settings.settingsView")?.menu?.syncUI("timeTravelHistory");
+              }
+            }
+          ],
+          footerActions: [
+            { id: "undo", getLabel: () => "Undo", onClick: () => plug.module.undo() },
+            { id: "redo", getLabel: () => "Redo", onClick: () => plug.module.redo() },
+            { id: "playPause", getLabel: () => plug.module.state.paused ? "Play" : "Pause", onClick: () => plug.module.state.paused ? plug.module.play() : plug.module.pause() },
+            { id: "rewind", getLabel: () => "Rewind", onClick: () => plug.module.rewind() },
+            { id: "toggleTrack", getLabel: () => plug.module.state.tracking ? "Untrack" : "Track", onClick: () => plug.module.state.tracking ? plug.module.untrack() : plug.module.track() },
+            { id: "clear", getLabel: () => "Clear", onClick: () => plug.module.clear() }
+          ]
+        },
+        {
+          id: "timeTravelPersist",
+          label: "Persist history",
+          widget: "toggle",
+          getValue: () => plug.config.persist ? "On" : "Off",
+          onChange: (val) => plug.config.persist = val,
+          configPaths: ["settings.timeTravel.persist"],
+          title: "Save your state history across page reloads"
+        }
+      ]
+    }
+  ]
+});
+
+// src/ts/plugs/menus/settings/toasts.ts
+var import_toast = require("@t007/toast");
+var TOAST_BOOLEAN_OPTS = [
+  { option: "Default", value: "default" },
+  { option: "Yes", value: "yes" },
+  { option: "No", value: "no" }
+];
+var toToastFormOpts = (opts) => [{ option: "Default", value: "default" }, ...opts.map((o) => ({ option: o.display, value: o.value }))];
+var TOAST_FORM_INPUTS = [
+  { label: "Type", type: "select", options: toToastFormOpts(import_toast.TOAST_UI_TYPES) },
+  { label: "Position", type: "select", options: toToastFormOpts(import_toast.TOAST_UI_POSITIONS) },
+  { label: "Animation", type: "select", options: toToastFormOpts(import_toast.TOAST_UI_ANIMATIONS) },
+  { label: "Close Button", type: "select", options: TOAST_BOOLEAN_OPTS },
+  { label: "Hide Progress Bar", type: "select", options: TOAST_BOOLEAN_OPTS },
+  { label: "Close On Click", type: "select", options: TOAST_BOOLEAN_OPTS },
+  { label: "Drag To Close", type: "select", options: toToastFormOpts(import_toast.TOAST_UI_DRAG_OPTIONS) },
+  { label: "Drag Direction", type: "select", options: toToastFormOpts(import_toast.TOAST_UI_DRAG_DIRECTIONS) },
+  { label: "Auto Close (ms)", type: "number", helperText: { info: "Blank for Default, -1 for None" }, min: "-1" }
+];
+var getActionLogicOpts = (plug) => [
+  { option: "None", value: "none" },
+  ...Object.keys(plug.ctlr.actions).filter((k) => !plug.ctlr.actions[k]?.private).map((k) => ({ value: k, option: plug.ctlr.actions[k]?.label || capitalize(k.replace(/([A-Z])/g, " $1").toLowerCase()) }))
+];
+var getSettingsToastsMenu = (plug) => ({
+  id: "general",
+  label: "Advanced",
+  widget: "group",
+  getValue: () => "",
+  items: [
+    {
+      id: "toasts",
+      label: "Notifications",
+      widget: "group",
+      getValue: () => plug.config.disabled ? "Off" : "On",
+      configPaths: ["settings.toasts.disabled"],
+      items: [
+        {
+          id: "toastsCustomReminders",
+          label: "Custom Reminders",
+          widget: "group",
+          getValue: () => plug.state.reminders.length ? `${plug.state.reminders.length} Active` : "",
+          items: [
+            {
+              id: "toastsCreateReminder",
+              label: "Create Reminder",
+              widget: "input",
+              getValue: () => "",
+              inputs: [{ label: "Message", placeholder: "Take a break!", helperText: { info: "The message to display in the reminder" }, required: true }, { label: "Delay (ms)", type: "number", helperText: { info: "0 for Immediate" }, required: true, min: "0", value: 0 }, { label: "Action", type: "select", options: getActionLogicOpts(plug) }, ...TOAST_FORM_INPUTS],
+              onChange: (val) => {
+                const parse = (v) => v === "default" ? void 0 : v === "yes" ? true : v === "no" ? false : v === "none" ? false : !isNaN(Number(v)) && isStr(v) ? Number(v) : v;
+                plug.addReminder({ message: val.Message, delay: val["Delay (ms)"], actionId: val.Action, type: parse(val.Type), position: parse(val.Position), animation: parse(val.Animation), closeButton: parse(val["Close Button"]), hideProgressBar: parse(val["Hide Progress Bar"]), closeOnClick: parse(val["Close On Click"]), dragToClose: parse(val["Drag To Close"]), dragToCloseDir: parse(val["Drag Direction"]), autoClose: val["Auto Close (ms)"] === -1 ? false : val["Auto Close (ms)"] });
+                plug.ctlr.plug("settings.settingsView")?.menu.syncUI();
+              }
+            },
+            {
+              id: "toastsActiveReminders",
+              label: "Active",
+              widget: "drag-select",
+              getValue: () => "",
+              getOptions: () => plug.state.reminders.map((r) => ({ value: r.id, display: r.message, infoText: (r.delay ? `${Math.floor(r.delay / 1e3 / 60)} minutes` : "Immediately") + (r.actionId && r.actionId !== "none" ? ` -> ${plug.ctlr.actions[r.actionId]?.label || capitalize(r.actionId.replace(/([A-Z])/g, " $1").toLowerCase())}` : "") })),
+              onDelete: (idx) => {
+                const id = plug.state.reminders[idx]?.id;
+                id && (plug.removeReminder(id), plug.ctlr.plug("settings.settingsView")?.menu.syncUI());
+              }
+            }
+          ]
+        },
+        {
+          id: "toastsDisabled",
+          label: "Disable",
+          widget: "toggle",
+          getValue: () => plug.config.disabled ? "On" : "Off",
+          onChange: (val) => (plug.config.disabled = val, !val && plug.toast?.("Notifications enabled!", { tag: "tmg-tsts", type: "success", renotify: true })),
+          configPaths: ["settings.toasts.disabled"]
+        },
+        {
+          id: "toastsPosition",
+          label: "Position",
+          widget: "select",
+          getOptions: () => import_toast.TOAST_UI_POSITIONS,
+          getValue: () => import_toast.TOAST_UI_POSITIONS.find((o) => o.value === plug.config.position)?.display,
+          onChange: (val) => (plug.config.position = val, plug.toast?.("Position updated!", { tag: "tmg-tsts", position: val, type: "success", renotify: true })),
+          configPaths: ["settings.toasts.position"],
+          tipHTML: "Where the toasts should appear on the screen"
+        },
+        {
+          id: "toastAnimation",
+          label: "Animation",
+          widget: "select",
+          getOptions: () => import_toast.TOAST_UI_ANIMATIONS,
+          getValue: () => import_toast.TOAST_UI_ANIMATIONS.find((o) => o.value === (isStr(plug.config.animation) ? plug.config.animation : "slide"))?.display,
+          onChange: (val) => (plug.config.animation = val, plug.toast?.("Animation updated!", { tag: "tmg-tsts", animation: val, type: "success", renotify: true })),
+          configPaths: ["settings.toasts.animation"]
+        },
+        {
+          id: "toastsLimit",
+          label: "Max Visible",
+          widget: "range",
+          getValue: () => String(plug.config.limit),
+          getRange: () => ({ min: 1, max: 30, step: 1, formatTooltip: (v) => String(Math.round(v)) }),
+          onChange: (val) => plug.config.limit = val,
+          configPaths: ["settings.toasts.limit"]
+        },
+        {
+          id: "toastsNewestOnTop",
+          label: "Newest on Top",
+          widget: "toggle",
+          getValue: () => plug.config.newestOnTop ? "On" : "Off",
+          onChange: (val) => plug.config.newestOnTop = val,
+          configPaths: ["settings.toasts.newestOnTop"]
+        },
+        {
+          id: "toastsProgressBar",
+          label: "Hide Progress Bar",
+          widget: "toggle",
+          getValue: () => plug.config.hideProgressBar ? "On" : "Off",
+          onChange: (val) => (plug.config.hideProgressBar = val, plug.toast?.("Progress bar visibility updated!", { tag: "tmg-tsts", hideProgressBar: val, type: "info", renotify: true })),
+          configPaths: ["settings.toasts.hideProgressBar"]
+        },
+        {
+          id: "toastsCloseButton",
+          label: "Show Close Button",
+          widget: "toggle",
+          getValue: () => plug.config.closeButton ? "On" : "Off",
+          onChange: (val) => (plug.config.closeButton = val, plug.toast?.("Close button visibility updated!", { tag: "tmg-tsts", closeButton: val, type: "info", renotify: true })),
+          configPaths: ["settings.toasts.closeButton"]
+        },
+        {
+          id: "toastsCloseOnClick",
+          label: "Close on Click",
+          widget: "toggle",
+          getValue: () => plug.config.closeOnClick ? "On" : "Off",
+          onChange: (val) => plug.config.closeOnClick = val,
+          configPaths: ["settings.toasts.closeOnClick"]
+        },
+        {
+          id: "toastsPauseOnHover",
+          label: "Pause on Hover",
+          widget: "toggle",
+          getValue: () => plug.config.pauseOnHover ? "On" : "Off",
+          onChange: (val) => plug.config.pauseOnHover = val,
+          configPaths: ["settings.toasts.pauseOnHover"]
+        },
+        {
+          id: "toastsPauseOnFocusLoss",
+          label: "Pause on Focus Loss",
+          widget: "toggle",
+          getValue: () => plug.config.pauseOnFocusLoss ? "On" : "Off",
+          onChange: (val) => plug.config.pauseOnFocusLoss = val,
+          configPaths: ["settings.toasts.pauseOnFocusLoss"]
+        },
+        {
+          id: "toastsDragToClose",
+          label: "Drag to Close",
+          widget: "toggle",
+          getValue: () => import_toast.TOAST_UI_DRAG_OPTIONS.find((o) => o.value === plug.config.dragToClose)?.display,
+          onChange: (val) => plug.config.dragToClose = val,
+          configPaths: ["settings.toasts.dragToClose"]
+        },
+        {
+          id: "toastsDragToCloseDir",
+          label: "Drag Direction",
+          widget: "select",
+          getValue: () => import_toast.TOAST_UI_DRAG_DIRECTIONS.find((o) => o.value === plug.config.dragToCloseDir)?.display,
+          getOptions: () => import_toast.TOAST_UI_DRAG_DIRECTIONS,
+          onChange: (val) => plug.config.dragToCloseDir = val,
+          configPaths: ["settings.toasts.dragToCloseDir"]
+        }
+      ]
+    }
+  ]
+});
+
+// src/ts/plugs/menus/settings/voice.ts
+var getSettingsVoiceMenu = (plug) => ({
+  id: "general",
+  label: "Advanced",
+  icon: "settings",
+  widget: "group",
+  getValue: () => "",
+  items: [
+    {
+      id: "voice",
+      label: "Voice",
+      widget: "group",
+      getValue: () => getUIOpt(plug.config.active.options, plug.config.active.value),
+      configPaths: ["settings.voice.active.value"],
+      items: [
+        {
+          id: "voiceActive",
+          label: "Active",
+          widget: "select",
+          getValue: () => getUIOpt(plug.config.active.options, plug.config.active.value),
+          getOptions: () => plug.config.active.options,
+          onChange: (val) => plug.config.active.value = getBoolOrStr(val),
+          configPaths: ["settings.voice.active.value"],
+          tipHTML: "Turn the voice control engine on or off or passive (listens for the wake word to turn on)."
+        },
+        {
+          id: "voiceWakeWord",
+          label: "Wake word",
+          widget: "input",
+          inputs: [{ label: "Phrase", placeholder: "hey player", type: "text", value: () => plug.config.wakeWord, helperText: { info: "Phrase used to wake the assistant hands-free. Clear to disable." } }],
+          getValue: () => plug.config.wakeWord ? `"${plug.config.wakeWord}"` : "",
+          onChange: (val) => plug.config.wakeWord = val["Phrase"].trim(),
+          configPaths: ["settings.voice.wakeWord"]
+        },
+        {
+          id: "voiceBehavior",
+          label: "UI Behavior",
+          widget: "select",
+          getOptions: () => plug.config.behavior.options,
+          getValue: () => getUIOpt(plug.config.behavior.options, plug.config.behavior.value),
+          onChange: (val) => plug.config.behavior.value = val,
+          configPaths: ["settings.voice.behavior.value"],
+          tipHTML: "Determines how and when the voice listening toast appears on screen."
+        },
+        {
+          id: "voiceTimeout",
+          label: "Sleep timeout",
+          widget: "input",
+          inputs: [{ label: "ms", placeholder: "7000", helperText: { info: "Time in ms of silence before the voice assistant goes back to sleep." }, type: "number", min: "1000", value: () => plug.config.timeout }],
+          getValue: () => `${plug.config.timeout}ms`,
+          onChange: (val) => plug.config.timeout = Number(val["ms"]),
+          configPaths: ["settings.voice.timeout"]
+        },
+        {
+          id: "voiceInputs",
+          label: "Inputs",
+          widget: "group",
+          getValue: () => "",
+          items: [
+            {
+              id: "voiceInputsDirect",
+              label: "Direct",
+              widget: "toggle",
+              getValue: () => plug.config.inputs.direct ? "On" : "Off",
+              onChange: (val) => plug.config.inputs.direct = val,
+              configPaths: ["settings.voice.inputs.direct"],
+              title: "Skips the root menu, dropping you straight into Media > Intent so you can say things like 'Volume 80' immediately."
+            },
+            {
+              id: "voiceInputsStrict",
+              label: "Strict",
+              widget: "select",
+              getOptions: () => plug.config.inputs.strict.options,
+              getValue: () => getUIOpt(plug.config.inputs.strict.options, plug.config.inputs.strict.value),
+              onChange: (val) => plug.config.inputs.strict.value = getBoolOrStr(val),
+              configPaths: ["settings.voice.inputs.strict"],
+              title: "If enabled, the voice assistant will always require your approval before executing a command otherwise they'll be executed automatically except for text."
+            },
+            {
+              id: "voiceInputsAccuracy",
+              label: "Match accuracy",
+              widget: "range",
+              getValue: () => `${Math.round(plug.config.inputs.accuracy * 100)}%`,
+              getRange: () => ({ min: 10, max: 100, step: 5, formatTooltip: (v) => `${Math.round(v)}%` }),
+              onChange: (val) => plug.config.inputs.accuracy = Number(val) / 100,
+              configPaths: ["settings.voice.inputs.accuracy"],
+              tipHTML: "Lower values allow for more speech-to-text typos (e.g., 'metadata' vs 'metadita'), but may trigger the wrong command."
+            }
+          ]
+        },
+        {
+          id: "voiceCommands",
+          label: "Commands",
+          widget: "group",
+          getValue: () => "",
+          items: [
+            {
+              id: "voiceCommandsDisabled",
+              label: "Disabled",
+              widget: "toggle",
+              getValue: () => plug.config.commandsDisabled ? "On" : "Off",
+              onChange: (val) => plug.config.commandsDisabled = val,
+              configPaths: ["settings.voice.commandsDisabled"],
+              tipHTML: "Disable all custom and built-in voice commands (direct paths navigation will still work)."
+            },
+            {
+              id: "voiceAutoToggles",
+              label: "Auto-toggles",
+              widget: "toggle",
+              getValue: () => plug.config.autoToggles ? "On" : "Off",
+              onChange: (val) => plug.config.autoToggles = val,
+              configPaths: ["settings.voice.autoToggles"],
+              tipHTML: "Automatically toggle boolean values when navigating directly to their path without needing an explicit on/off phrase."
+            }
+          ]
+        },
+        {
+          id: "voicePositionGroup",
+          label: "Positioning",
+          widget: "group",
+          getValue: () => "",
+          items: [
+            {
+              id: "voiceListenerPos",
+              label: "Listener",
+              widget: "select",
+              getOptions: () => plug.config.listenerPos.options,
+              getValue: () => getUIOpt(plug.config.listenerPos.options, plug.config.listenerPos.value),
+              onChange: (val) => plug.config.listenerPos.value = val,
+              configPaths: ["settings.voice.listenerPos.value"],
+              tipHTML: "Where the main microphone transcript appears"
+            },
+            {
+              id: "voicePredictPos",
+              label: "Predictor",
+              widget: "select",
+              getOptions: () => plug.config.predictorPos.options,
+              getValue: () => getUIOpt(plug.config.predictorPos.options, plug.config.predictorPos.value),
+              onChange: (val) => plug.config.predictorPos.value = val,
+              configPaths: ["settings.voice.predictorPos.value"],
+              tipHTML: "Where the AI prediction hints appear"
+            }
+          ]
+        }
+      ]
+    }
+  ]
+});
+
+// src/ts/plugs/menus/settings/volume.ts
+var import_utils21 = require("sia-reactor/utils");
+var getSettingsVolumeMenu = (plug) => ({
+  id: "limits",
+  label: "Limits",
+  icon: "configure",
+  widget: "group",
+  getValue: () => "",
+  items: [
+    {
+      id: "volumeLimits",
+      label: "Volume",
+      widget: "limits",
+      configPaths: ["settings.volume.skip"],
+      getValue: () => "",
+      getLimits: () => [{ name: "volume", label: "Clamp bounds", min: plug.config.min, max: plug.config.max, step: plug.config.skip }],
+      onChange: (val) => (0, import_utils21.fanout)(plug.config, { min: val.volume_min, max: val.volume_max, skip: val.volume_step }, { skipUndefined: true })
+    }
+  ]
+});
+//# sourceMappingURL=menus.cjs.map