ref: removed components/index.ts

dist/BetterYTM.css

@@ -469,104 +469,125 @@ hr {
   margin-right: 6px;
 }
 
-/* some variables are not defined on purpose to allow plugin authors to more easily provide overrides */
+.bytm-toggle-input-wrapper {
+  --toggle-height: 20px;
+  --toggle-width: 40px;
+  --toggle-knob-offset: 4px;
+  --toggle-color-on: #3683d4;
+  --toggle-color-off: #666;
+  --toggle-knob-color: #f5f5f5;
 
-/* use `body` prefix for more specificity: */
-body .bytm-ripple {
-  position: relative;
-  overflow: hidden;
-  width: var(--bytm-ripple-width, auto);
-  height: var(--bytm-ripple-height, auto);
+  display: flex;
+  align-items: center;
 }
 
-body .bytm-ripple.fastest {
-  --bytm-ripple-anim-duration: 0.15s;
+.bytm-toggle-input-wrapper .bytm-toggle-input-label {
+  cursor: pointer;
+  font-size: 1.5rem;
+  padding: 3px 12px;
 }
 
-body .bytm-ripple.fast {
-  --bytm-ripple-anim-duration: 0.35s;
+/* sauce: https://danklammer.com/articles/simple-css-toggle-switch/ */
+
+.bytm-toggle-input {
+  display: flex;
+  align-items: center;
 }
 
-body .bytm-ripple.slow {
-  --bytm-ripple-anim-duration: 0.75s;
+.bytm-toggle-input input {
+  appearance: none;
+  display: inline-block;
+  width: var(--toggle-width);
+  height: var(--toggle-height);
+  position: relative;
+  border-radius: 50px;
+  overflow: hidden;
+  outline: none;
+  border: none;
+  margin: 0;
+  padding: var(--toggle-knob-offset);
+  cursor: pointer;
+  background-color: var(--toggle-color-off);
+  transition:
+    justify-content 0.2s ease,
+    background-color 0.2s ease;
 }
 
-body .bytm-ripple.slowest {
-  --bytm-ripple-anim-duration: 1s;
+.bytm-toggle-input input[data-toggled="true"] {
+  background-color: var(--toggle-color-on);
 }
 
-.bytm-ripple-area {
-  --bytm-ripple-min-size: 100px;
-  /* --bytm-ripple-cont-width is added at runtime since there's no better way of getting the parent's width */
-  --bytm-ripple-expanded-size: calc(
-    max(
-      var(--bytm-ripple-cont-width, var(--bytm-ripple-min-size)) * 2,
-      var(--bytm-ripple-min-size)
-    )
+.bytm-toggle-input input .bytm-toggle-input-knob {
+  --toggle-knob-calc-width: calc(
+    var(--toggle-height) - (var(--toggle-knob-offset) * 2)
   );
-  position: absolute;
-  background: var(--bytm-ripple-color, rgba(255, 255, 255, 0.175));
-  transform: translate(-50%, -50%);
-  pointer-events: none;
+  --toggle-knob-calc-height: calc(
+    var(--toggle-height) - (var(--toggle-knob-offset) * 2)
+  );
+  width: var(--toggle-knob-calc-width);
+  height: var(--toggle-knob-calc-height);
+  background-color: var(--toggle-knob-color);
   border-radius: 50%;
-  animation: bytm-scale-ripple var(--bytm-ripple-anim-duration, 0.55s)
-    cubic-bezier(0.375, 0.33, 0.225, 0.93);
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: var(--toggle-knob-offset);
+  transition: left 0.2s ease;
 }
 
-@keyframes bytm-scale-ripple {
-  0% {
-    width: 0;
-    height: 0;
-    opacity: 1;
-  }
-  100% {
-    width: var(--bytm-ripple-expanded-size, 100%);
-    height: var(--bytm-ripple-expanded-size, 100%);
-    opacity: 0;
-  }
+.bytm-toggle-input input[data-toggled="true"] .bytm-toggle-input-knob {
+  left: calc(
+    var(--toggle-width) - var(--toggle-knob-offset) -
+      var(--toggle-knob-calc-width)
+  );
 }
 
-.bytm-exim-dialog-panes-cont {
+#bytm-prompt-dialog-header {
   display: flex;
   flex-direction: row;
-  justify-content: space-between;
-  flex-wrap: nowrap;
-  height: 100%;
-  overflow: hidden;
+  align-items: center;
 }
 
-.bytm-exim-dialog-pane {
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-  width: 48%;
+#bytm-prompt-dialog-header svg {
+  width: 24px;
+  height: 24px;
 }
 
-.bytm-exim-dialog-center-btn-cont {
-  display: flex;
-  justify-content: center;
+#bytm-prompt-dialog-upper-cont,
+#bytm-prompt-dialog-message {
+  font-size: 1.6rem;
+  white-space: pre-wrap;
 }
 
-.bytm-exim-dialog-pane textarea {
-  height: 120px;
-  resize: none;
+.bytm-prompt-type-prompt #bytm-prompt-dialog-message {
+  margin-bottom: 15px;
 }
 
-.bytm-hotkey-wrapper {
+#bytm-prompt-dialog-input {
+  font-size: 1.6rem;
+  width: 100%;
+}
+
+#bytm-prompt-dialog-button-wrapper {
   display: flex;
   flex-direction: row;
-  align-items: center;
   justify-content: flex-end;
+  align-items: end;
 }
 
-.bytm-hotkey-reset {
-  font-size: 0.9em;
-  margin-right: 10px;
+#bytm-prompt-dialog-buttons-cont {
+  display: flex;
+  flex-direction: row;
+  gap: 15px;
 }
 
-.bytm-hotkey-info {
-  font-size: 0.9em;
-  white-space: nowrap;
+#bytm-prompt-dialog-buttons-cont button {
+  cursor: pointer;
+}
+
+.bytm-prompt-dialog-button {
+  padding: 2px 6px;
+  font-size: 1.45rem;
 }
 
 :root {
@@ -660,125 +681,87 @@ body .bytm-ripple.slowest {
   font-weight: 400;
 }
 
-.bytm-toggle-input-wrapper {
-  --toggle-height: 20px;
-  --toggle-width: 40px;
-  --toggle-knob-offset: 4px;
-  --toggle-color-on: #3683d4;
-  --toggle-color-off: #666;
-  --toggle-knob-color: #f5f5f5;
+/* some variables are not defined on purpose to allow plugin authors to more easily provide overrides */
 
-  display: flex;
-  align-items: center;
+/* use `body` prefix for more specificity: */
+body .bytm-ripple {
+  position: relative;
+  overflow: hidden;
+  width: var(--bytm-ripple-width, auto);
+  height: var(--bytm-ripple-height, auto);
 }
 
-.bytm-toggle-input-wrapper .bytm-toggle-input-label {
-  cursor: pointer;
-  font-size: 1.5rem;
-  padding: 3px 12px;
+body .bytm-ripple.fastest {
+  --bytm-ripple-anim-duration: 0.15s;
 }
 
-/* sauce: https://danklammer.com/articles/simple-css-toggle-switch/ */
-
-.bytm-toggle-input {
-  display: flex;
-  align-items: center;
+body .bytm-ripple.fast {
+  --bytm-ripple-anim-duration: 0.35s;
 }
 
-.bytm-toggle-input input {
-  appearance: none;
-  display: inline-block;
-  width: var(--toggle-width);
-  height: var(--toggle-height);
-  position: relative;
-  border-radius: 50px;
-  overflow: hidden;
-  outline: none;
-  border: none;
-  margin: 0;
-  padding: var(--toggle-knob-offset);
-  cursor: pointer;
-  background-color: var(--toggle-color-off);
-  transition:
-    justify-content 0.2s ease,
-    background-color 0.2s ease;
+body .bytm-ripple.slow {
+  --bytm-ripple-anim-duration: 0.75s;
 }
 
-.bytm-toggle-input input[data-toggled="true"] {
-  background-color: var(--toggle-color-on);
+body .bytm-ripple.slowest {
+  --bytm-ripple-anim-duration: 1s;
 }
 
-.bytm-toggle-input input .bytm-toggle-input-knob {
-  --toggle-knob-calc-width: calc(
-    var(--toggle-height) - (var(--toggle-knob-offset) * 2)
-  );
-  --toggle-knob-calc-height: calc(
-    var(--toggle-height) - (var(--toggle-knob-offset) * 2)
+.bytm-ripple-area {
+  --bytm-ripple-min-size: 100px;
+  /* --bytm-ripple-cont-width is added at runtime since there's no better way of getting the parent's width */
+  --bytm-ripple-expanded-size: calc(
+    max(
+      var(--bytm-ripple-cont-width, var(--bytm-ripple-min-size)) * 2,
+      var(--bytm-ripple-min-size)
+    )
   );
-  width: var(--toggle-knob-calc-width);
-  height: var(--toggle-knob-calc-height);
-  background-color: var(--toggle-knob-color);
-  border-radius: 50%;
   position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  left: var(--toggle-knob-offset);
-  transition: left 0.2s ease;
+  background: var(--bytm-ripple-color, rgba(255, 255, 255, 0.175));
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  border-radius: 50%;
+  animation: bytm-scale-ripple var(--bytm-ripple-anim-duration, 0.55s)
+    cubic-bezier(0.375, 0.33, 0.225, 0.93);
 }
 
-.bytm-toggle-input input[data-toggled="true"] .bytm-toggle-input-knob {
-  left: calc(
-    var(--toggle-width) - var(--toggle-knob-offset) -
-      var(--toggle-knob-calc-width)
-  );
+@keyframes bytm-scale-ripple {
+  0% {
+    width: 0;
+    height: 0;
+    opacity: 1;
+  }
+  100% {
+    width: var(--bytm-ripple-expanded-size, 100%);
+    height: var(--bytm-ripple-expanded-size, 100%);
+    opacity: 0;
+  }
 }
 
-#bytm-prompt-dialog-header {
+.bytm-exim-dialog-panes-cont {
   display: flex;
   flex-direction: row;
-  align-items: center;
-}
-
-#bytm-prompt-dialog-header svg {
-  width: 24px;
-  height: 24px;
-}
-
-#bytm-prompt-dialog-upper-cont,
-#bytm-prompt-dialog-message {
-  font-size: 1.6rem;
-  white-space: pre-wrap;
-}
-
-.bytm-prompt-type-prompt #bytm-prompt-dialog-message {
-  margin-bottom: 15px;
-}
-
-#bytm-prompt-dialog-input {
-  font-size: 1.6rem;
-  width: 100%;
+  justify-content: space-between;
+  flex-wrap: nowrap;
+  height: 100%;
+  overflow: hidden;
 }
 
-#bytm-prompt-dialog-button-wrapper {
+.bytm-exim-dialog-pane {
   display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  align-items: end;
+  flex-direction: column;
+  gap: 12px;
+  width: 48%;
 }
 
-#bytm-prompt-dialog-buttons-cont {
+.bytm-exim-dialog-center-btn-cont {
   display: flex;
-  flex-direction: row;
-  gap: 15px;
-}
-
-#bytm-prompt-dialog-buttons-cont button {
-  cursor: pointer;
+  justify-content: center;
 }
 
-.bytm-prompt-dialog-button {
-  padding: 2px 6px;
-  font-size: 1.45rem;
+.bytm-exim-dialog-pane textarea {
+  height: 120px;
+  resize: none;
 }
 
 .bytm-auto-like-channels-footer-wrapper {
@@ -1058,6 +1041,23 @@ body.bytm-dom-ytm
   cursor: help;
 }
 
+.bytm-hotkey-wrapper {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+}
+
+.bytm-hotkey-reset {
+  font-size: 0.9em;
+  margin-right: 10px;
+}
+
+.bytm-hotkey-info {
+  font-size: 0.9em;
+  white-space: nowrap;
+}
+
 :root {
   --bytm-menu-bg-highlight: #252525;
 }

src/components/ExImDialog.ts

@@ -3,7 +3,9 @@ import { BytmDialog, type BytmDialogOptions } from "./BytmDialog.js";
 import { t } from "../utils/translations.js";
 import { onInteraction } from "../utils/input.js";
 import { copyToClipboard } from "../utils/dom.js";
-import { createLongBtn, createRipple, showToast } from "./index.js";
+import { createRipple } from "./ripple.js";
+import { createLongBtn } from "./longButton.js";
+import { showToast } from "./toast.js";
 import "./ExImDialog.css";
 
 // TODO: v2.3.0 overhaul:

src/components/index.ts

@@ -1,9 +0,0 @@
-export * from "./BytmDialog.js";
-export * from "./circularButton.js";
-export * from "./ExImDialog.js";
-export * from "./hotkeyInput.js";
-export * from "./longButton.js";
-export * from "./MarkdownDialog.js";
-export * from "./ripple.js";
-export * from "./toast.js";
-export * from "./toggleInput.js";

src/dialogs/allDataExIm.ts

@@ -1,8 +1,10 @@
 import { consumeStringGen, type SerializedDataStore } from "@sv443-network/userutils";
 import { copyToClipboard, downloadFile, error, onInteraction, t } from "../utils/index.js";
-import { createLongBtn, createRipple, showToast } from "../components/index.js";
 import { ExImDialog, type ExImDialogOpts } from "../components/ExImDialog.js";
 import { getSerializerStoresIds, getStoreSerializer } from "../serializer.js";
+import { showToast } from "../components/toast.js";
+import { createRipple } from "../components/ripple.js";
+import { createLongBtn } from "../components/longButton.js";
 import packageJson from "../../package.json" with { type: "json" };
 
 let allDataExImDialog: ExImDialog | undefined;

src/dialogs/autoLike.ts

@@ -1,13 +1,16 @@
 import { compress, debounce } from "@sv443-network/userutils";
 import { compressionSupported, error, getDomain, isValidChannelId, log, onInteraction, parseChannelIdFromUrl, t, tryToDecompressAndParse } from "../utils/index.js";
-import { BytmDialog, createCircularBtn, createToggleInput, showToast } from "../components/index.js";
 import { autoLikeStore, initAutoLikeStore } from "../features/index.js";
 import { emitSiteEvent, siteEvents } from "../siteEvents.js";
 import { ExImDialog } from "../components/ExImDialog.js";
 import { compressionFormat } from "../constants.js";
 import type { AutoLikeData } from "../types.js";
-import "./autoLike.css";
 import { showPrompt } from "./prompt.js";
+import { BytmDialog } from "../components/BytmDialog.js";
+import { showToast } from "../components/toast.js";
+import { createToggleInput } from "../components/toggleInput.js";
+import { createCircularBtn } from "../components/circularButton.js";
+import "./autoLike.css";
 
 let autoLikeDialog: BytmDialog | null = null;
 let autoLikeExImDialog: ExImDialog | null = null;

src/dialogs/changelog.ts

@@ -1,5 +1,5 @@
 import { getChangelogHtmlWithDetails, setInnerHtml, t } from "../utils/index.js";
-import { BytmDialog } from "../components/index.js";
+import { BytmDialog } from "../components/BytmDialog.js";
 import { scriptInfo } from "../constants.js";
 
 let changelogDialog: BytmDialog | null = null;

src/dialogs/exportCfg.ts

@@ -1,6 +1,6 @@
 import { compress } from "@sv443-network/userutils";
 import { compressionSupported, copyToClipboard, onInteraction, t } from "../utils/index.js";
-import { BytmDialog } from "../components/index.js";
+import { BytmDialog } from "../components/BytmDialog.js";
 import { compressionFormat, scriptInfo } from "../constants.js";
 import { formatVersion, getFeatures } from "../config.js";
 import { siteEvents } from "../siteEvents.js";

src/dialogs/featHelp.ts

@@ -1,5 +1,5 @@
 import { resourceAsString, setInnerHtml, t } from "../utils/index.js";
-import { BytmDialog } from "../components/index.js";
+import { BytmDialog } from "../components/BytmDialog.js";
 import { featInfo } from "../features/index.js";
 import type { FeatureKey } from "../types.js";
 

src/dialogs/importCfg.ts

@@ -1,5 +1,5 @@
 import { error, tryToDecompressAndParse, t, warn, log, reloadTab } from "../utils/index.js";
-import { BytmDialog } from "../components/index.js";
+import { BytmDialog } from "../components/BytmDialog.js";
 import { scriptInfo } from "../constants.js";
 import { emitSiteEvent } from "../siteEvents.js";
 import { formatVersion, getFeatures, migrations, setFeatures } from "../config.js";

src/dialogs/pluginList.ts

@@ -1,4 +1,4 @@
-import { BytmDialog } from "../components/index.js";
+import { BytmDialog } from "../components/BytmDialog.js";
 import { getRegisteredPlugins } from "../interface.js";
 import { getLocale, t } from "../utils/translations.js";
 import { setInnerHtml } from "../utils/dom.js";

src/dialogs/prompt.ts

@@ -1,7 +1,7 @@
 import type { Emitter } from "nanoevents";
 import { consumeStringGen, type StringGen, type Stringifiable } from "@sv443-network/userutils";
 import { getOS, resourceAsString, setInnerHtml, t } from "../utils/index.js";
-import { BytmDialog, type BytmDialogEvents } from "../components/index.js";
+import { BytmDialog, type BytmDialogEvents } from "../components/BytmDialog.js";
 import { addSelectorListener } from "../observers.js";
 import "./prompt.css";
 

src/dialogs/versionNotif.ts

@@ -1,6 +1,7 @@
 import { host, mode, platformNames, scriptInfo } from "../constants.js";
 import { getChangelogMd, getResourceUrl, onInteraction, parseMarkdown, setInnerHtml, t } from "../utils/index.js";
-import { BytmDialog, createToggleInput } from "../components/index.js";
+import { BytmDialog } from "../components/BytmDialog.js";
+import { createToggleInput } from "../components/toggleInput.js";
 import { getFeature, getFeatures, setFeatures } from "../config.js";
 import pkg from "../../package.json" with { type: "json" };
 import { emitSiteEvent } from "../siteEvents.js";

src/dialogs/welcome.ts

@@ -1,5 +1,5 @@
 import { getResourceUrl, initTranslations, setInnerHtml, setLocale, t, warn, type TrLocale } from "../utils/index.js";
-import { BytmDialog } from "../components/index.js";
+import { BytmDialog } from "../components/BytmDialog.js";
 import { openCfgMenu } from "../menu/menu_old.js";
 import { mode, scriptInfo } from "../constants.js";
 import { getFeature, getFeatures, setFeatures } from "../config.js";

src/features/index.ts

@@ -6,7 +6,7 @@ import { getFeature, promptResetConfig } from "../config.js";
 import { FeatureInfo, type ColorLightnessPref, type ResourceKey, type SiteSelection, type SiteSelectionOrNone } from "../types.js";
 import { emitSiteEvent } from "../siteEvents.js";
 import langMapping from "../../assets/locales.json" with { type: "json" };
-import { showIconToast } from "../components/index.js";
+import { showIconToast } from "../components/toast.js";
 import { mode } from "../constants.js";
 import { getStoreSerializer } from "../serializer.js";
 import { getAutoLikeDialog } from "../dialogs/autoLike.js";

src/features/input.ts

@@ -7,8 +7,10 @@ import { featInfo } from "./index.js";
 import { getFeature } from "../config.js";
 import { compressionFormat } from "../constants.js";
 import { addSelectorListener } from "../observers.js";
-import { createLongBtn, createRipple, showIconToast } from "../components/index.js";
 import { getAutoLikeDialog } from "../dialogs/autoLike.js";
+import { showIconToast } from "../components/toast.js";
+import { createLongBtn } from "../components/longButton.js";
+import { createRipple } from "../components/ripple.js";
 import "./input.css";
 
 export const inputIgnoreTagNames = ["INPUT", "TEXTAREA", "SELECT", "BUTTON", "A"];

src/features/layout.ts

@@ -5,9 +5,10 @@ import { addSelectorListener } from "../observers.js";
 import { error, getResourceUrl, log, warn, t, onInteraction, openInTab, getBestThumbnailUrl, getDomain, getCurrentMediaType, domLoaded, waitVideoElementReady, addStyleFromResource, fetchVideoVotes, getWatchId, tp, getVideoTime, setInnerHtml, formatNumber, resourceAsString } from "../utils/index.js";
 import { mode, scriptInfo } from "../constants.js";
 import { openCfgMenu } from "../menu/menu_old.js";
-import { createCircularBtn, createRipple } from "../components/index.js";
-import type { ResourceKey, VideoVotesObj } from "../types.js";
 import { showPrompt } from "../dialogs/prompt.js";
+import { createRipple } from "../components/ripple.js";
+import { createCircularBtn } from "../components/circularButton.js";
+import type { ResourceKey, VideoVotesObj } from "../types.js";
 import "./layout.css";
 
 //#region cfg menu btns

src/index.ts

@@ -7,7 +7,7 @@ import { initSiteEvents } from "./siteEvents.js";
 import { emitInterface, initInterface, initPlugins } from "./interface.js";
 import { initObservers, addSelectorListener, globservers } from "./observers.js";
 import { downloadData, getStoreSerializer } from "./serializer.js";
-import { MarkdownDialog } from "./components/index.js";
+import { MarkdownDialog } from "./components/MarkdownDialog.js";
 import { getWelcomeDialog } from "./dialogs/welcome.js";
 import { showPrompt } from "./dialogs/prompt.js";
 import type { FeatureConfig } from "./types.js";

src/interface.ts

@@ -7,8 +7,15 @@ import { defaultData, getFeatures, setFeatures } from "./config.js";
 import { autoLikeStore, featInfo, fetchLyricsUrlTop, getLyricsCacheEntry, sanitizeArtists, sanitizeSong } from "./features/index.js";
 import { allSiteEvents, type SiteEventsMap } from "./siteEvents.js";
 import { type FeatureConfig, type FeatureInfo, type LyricsCacheEntry, type PluginDef, type PluginInfo, type PluginRegisterResult, type PluginDefResolvable, type PluginEventMap, type PluginItem, type BytmObject, type AutoLikeData, type InterfaceFunctions } from "./types.js";
-import { BytmDialog, ExImDialog, MarkdownDialog, createCircularBtn, createHotkeyInput, createRipple, createToggleInput, showIconToast, showToast } from "./components/index.js";
 import { showPrompt } from "./dialogs/prompt.js";
+import { BytmDialog } from "./components/BytmDialog.js";
+import { createHotkeyInput } from "./components/hotkeyInput.js";
+import { createToggleInput } from "./components/toggleInput.js";
+import { createCircularBtn } from "./components/circularButton.js";
+import { createRipple } from "./components/ripple.js";
+import { showIconToast, showToast } from "./components/toast.js";
+import { ExImDialog } from "./components/ExImDialog.js";
+import { MarkdownDialog } from "./components/MarkdownDialog.js";
 
 const { autoPlural, getUnsafeWindow, randomId, NanoEmitter } = UserUtils;
 

src/menu/menu_old.ts

@@ -1,15 +1,18 @@
-import { compress, debounce, isScrollable, type Stringifiable } from "@sv443-network/userutils";
+import { compress, debounce, isScrollable, openDialogs, type Stringifiable } from "@sv443-network/userutils";
 import { type defaultData, formatVersion, getFeature, getFeatures, migrations, setFeatures } from "../config.js";
 import { buildNumber, compressionFormat, host, mode, scriptInfo } from "../constants.js";
 import { featInfo } from "../features/index.js";
 import { error, getResourceUrl, info, log, resourceAsString, getLocale, hasKey, initTranslations, setLocale, t, arrayWithSeparators, tp, type TrKey, onInteraction, getDomain, copyToClipboard, warn, compressionSupported, tryToDecompressAndParse, setInnerHtml, type TrLocale, tl, reloadTab } from "../utils/index.js";
 import { emitSiteEvent, siteEvents } from "../siteEvents.js";
-import type { FeatureCategory, FeatureKey, FeatureConfig, HotkeyObj, FeatureInfo } from "../types.js";
-import { BytmDialog, ExImDialog, createHotkeyInput, createToggleInput, openDialogs, setCurrentDialogId } from "../components/index.js";
 import { emitInterface } from "../interface.js";
 import { showPrompt } from "../dialogs/prompt.js";
 import { getFeatHelpDialog } from "../dialogs/featHelp.js";
 import { getChangelogDialog } from "../dialogs/changelog.js";
+import { BytmDialog, setCurrentDialogId } from "../components/BytmDialog.js";
+import { ExImDialog } from "../components/ExImDialog.js";
+import { createHotkeyInput } from "../components/hotkeyInput.js";
+import { createToggleInput } from "../components/toggleInput.js";
+import type { FeatureCategory, FeatureKey, FeatureConfig, HotkeyObj, FeatureInfo } from "../types.js";
 import pkg from "../../package.json" with { type: "json" };
 import localeMapping from "../../assets/locales.json" with { type: "json" };
 import "./menu_old.css";

src/stories/Ripple.stories.ts

@@ -1,6 +1,8 @@
 import type { StoryObj, Meta } from "@storybook/html";
 import { fn } from "@storybook/test";
-import { createCircularBtn, createLongBtn, createRipple } from "../components/index.js";
+import { createRipple } from "../components/ripple.js";
+import { createCircularBtn } from "../components/circularButton.js";
+import { createLongBtn } from "../components/longButton.js";
 import "../components/ripple.css";
 import "../features/layout.css";
 

src/types.ts

@@ -5,10 +5,16 @@ import type { addSelectorListener } from "./observers.js";
 import type { getResourceUrl, getSessionId, getVideoTime, TrLocale, t, tp, fetchVideoVotes, onInteraction, getThumbnailUrl, getBestThumbnailUrl, getLocale, hasKey, hasKeyFor, getDomain, waitVideoElementReady, setInnerHtml, getCurrentMediaType, tl, tlp, formatNumber, getVideoElement, getVideoSelector, reloadTab } from "./utils/index.js";
 import type { SiteEventsMap } from "./siteEvents.js";
 import type { InterfaceEventsMap, getAutoLikeDataInterface, getFeaturesInterface, getPluginInfo, saveAutoLikeDataInterface, saveFeaturesInterface, setLocaleInterface } from "./interface.js";
-import type { BytmDialog, ExImDialog, createCircularBtn, createHotkeyInput, createRipple, createToggleInput, showIconToast, showToast } from "./components/index.js";
 import type { fetchLyricsUrlTop, sanitizeArtists, sanitizeSong } from "./features/lyrics.js";
 import type { getLyricsCacheEntry } from "./features/lyricsCache.js";
 import type { showPrompt } from "./dialogs/prompt.js";
+import type { BytmDialog } from "./components/BytmDialog.js";
+import type { ExImDialog } from "./components/ExImDialog.js";
+import type { createHotkeyInput } from "./components/hotkeyInput.js";
+import type { createToggleInput } from "./components/toggleInput.js";
+import type { createCircularBtn } from "./components/circularButton.js";
+import type { createRipple } from "./components/ripple.js";
+import type { showIconToast, showToast } from "./components/toast.js";
 import resources from "../assets/resources.json" with { type: "json" };
 import locales from "../assets/locales.json" with { type: "json" };
 

src/utils/logging.ts

@@ -1,8 +1,9 @@
 import { clamp, debounce } from "@sv443-network/userutils";
+import { showIconToast } from "../components/toast.js";
+import { MarkdownDialog } from "../components/MarkdownDialog.js";
 import { scriptInfo } from "../constants.js";
 import { setGlobalProp } from "../interface.js";
 import { LogLevel } from "../types.js";
-import { MarkdownDialog, showIconToast } from "../components/index.js";
 import { t } from "./translations.js";
 import { getFeature } from "../config.js";
 import packageJson from "../../package.json" with { type: "json" };