@spicemod/creator 0.0.26 → 0.0.28

package/templates/extension/shared/tsconfig.node.json

@@ -0,0 +1,25 @@
+{
+  "compilerOptions": {
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["spice.config.ts"]
+}

package/templates/extension/ts/react/src/app.tsx

@@ -1,6 +1,6 @@
 import "@/app.css";
 import { createRoot } from "react-dom/client";
-// you can use aliases too ! (just add them to tsconfig.json)
+// you can use aliases too ! (checkout tsconfig.app.json)
 import Onboarding from "@/components/Onboarding";
 
 const config = {

package/templates/hmrCustomApp.js

@@ -0,0 +1,284 @@
+const React = Spicetify.React;
+const rc = React.createElement;
+
+const waitForImport = async (retryCount = 0) => {
+  try {
+    const mod = await import(_IMPORT_LINK);
+    return mod.default || mod.render;
+  } catch (err) {
+    console.error("Failed to import app:", err);
+    if (retryCount < 3) {
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      return waitForImport(retryCount + 1);
+    }
+    return null;
+  }
+};
+
+const styles = {
+  container: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    height: "100%",
+    width: "100%",
+    background:
+      "radial-gradient(circle at top left, rgba(29, 185, 84, 0.15), transparent 50%), var(--spice-main, #121212)",
+    color: "var(--spice-text, #ffffff)",
+    fontFamily: "var(--font-family, Circular, Helvetica, Arial, sans-serif)",
+  },
+  loadingText: {
+    marginTop: "24px",
+    fontSize: "14px",
+    fontWeight: "600",
+    color: "rgba(255, 255, 255, 0.8)",
+    letterSpacing: "0.05em",
+    textTransform: "uppercase",
+  },
+  errorContainer: {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    padding: "48px",
+    backgroundColor: "rgba(255, 255, 255, 0.03)",
+    backdropFilter: "blur(16px)",
+    border: "1px solid rgba(255, 255, 255, 0.08)",
+    borderRadius: "24px",
+    boxShadow: "0 16px 40px rgba(0, 0, 0, 0.4)",
+    maxWidth: "800px",
+    width: "90%",
+    textAlign: "center",
+  },
+  iconContainer: {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "64px",
+    height: "64px",
+    borderRadius: "50%",
+    backgroundColor: "rgba(241, 94, 108, 0.1)",
+    border: "1px solid rgba(241, 94, 108, 0.2)",
+    marginBottom: "24px",
+    boxShadow: "0 0 20px rgba(241, 94, 108, 0.15)",
+  },
+  errorTitle: {
+    fontSize: "28px",
+    fontWeight: "800",
+    marginBottom: "16px",
+    color: "#ffffff",
+    letterSpacing: "-0.04em",
+  },
+  errorTraceBox: {
+    width: "100%",
+    backgroundColor: "rgba(0, 0, 0, 0.25)",
+    border: "1px solid rgba(255, 255, 255, 0.05)",
+    boxShadow: "inset 0 4px 10px rgba(0,0,0,0.3)",
+    borderRadius: "12px",
+    padding: "16px",
+    marginBottom: "32px",
+    textAlign: "left",
+    overflowX: "auto",
+  },
+  errorMessage: {
+    fontSize: "13px",
+    lineHeight: "1.6",
+    fontFamily: "monospace",
+    color: "rgba(255, 255, 255, 0.7)",
+    wordBreak: "break-word",
+    margin: 0,
+  },
+  buttonBase: {
+    padding: "14px 36px",
+    fontSize: "14px",
+    fontWeight: "600",
+    color: "#ffffff",
+    backgroundColor: "rgba(255, 255, 255, 0.05)",
+    backdropFilter: "blur(8px)",
+    WebkitBackdropFilter: "blur(8px)",
+    border: "1px solid rgba(255, 255, 255, 0.1)",
+    borderRadius: "500px",
+    cursor: "pointer",
+    textTransform: "uppercase",
+    letterSpacing: "0.1em",
+    transition: "all 0.2s ease",
+  },
+};
+
+const AlertIcon = () =>
+  rc(
+    "svg",
+    {
+      width: "32",
+      height: "32",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "rgba(241, 94, 108, 0.9)",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+    },
+    rc("path", {
+      d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z",
+    }),
+    rc("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+    rc("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" }),
+  );
+
+const Spinner = () =>
+  rc(
+    "svg",
+    { width: "48", height: "48", viewBox: "0 0 50 50" },
+    rc("circle", {
+      cx: "25",
+      cy: "25",
+      r: "20",
+      fill: "none",
+      stroke: "rgba(255,255,255,0.1)",
+      strokeWidth: "4",
+    }),
+    rc(
+      "circle",
+      {
+        cx: "25",
+        cy: "25",
+        r: "20",
+        fill: "none",
+        stroke: "rgba(255,255,255,0.8)",
+        strokeWidth: "4",
+        strokeDasharray: "30 100",
+        strokeLinecap: "round",
+      },
+      rc("animateTransform", {
+        attributeName: "transform",
+        type: "rotate",
+        from: "0 25 25",
+        to: "360 25 25",
+        dur: "1s",
+        repeatCount: "indefinite",
+      }),
+    ),
+  );
+
+const RetryButton = ({ onClick }) => {
+  const [isHovered, setIsHovered] = React.useState(false);
+  const [isActive, setIsActive] = React.useState(false);
+
+  const dynamicStyle = {
+    ...styles.buttonBase,
+    backgroundColor: isActive
+      ? "rgba(255, 255, 255, 0.15)"
+      : isHovered
+        ? "rgba(255, 255, 255, 0.1)"
+        : "rgba(255, 255, 255, 0.05)",
+    borderColor: isHovered ? "rgba(255, 255, 255, 0.3)" : "rgba(255, 255, 255, 0.1)",
+    transform: isActive ? "scale(0.96)" : isHovered ? "scale(1.02)" : "scale(1)",
+    boxShadow: isHovered ? "0 4px 12px rgba(0,0,0,0.2)" : "none",
+  };
+
+  return rc(
+    "button",
+    {
+      style: dynamicStyle,
+      onClick,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => {
+        setIsHovered(false);
+        setIsActive(false);
+      },
+      onMouseDown: () => setIsActive(true),
+      onMouseUp: () => setIsActive(false),
+    },
+    "Try Again",
+  );
+};
+
+const Loading = () =>
+  rc(
+    "div",
+    { style: styles.container },
+    rc(Spinner),
+    rc("div", { style: styles.loadingText }, "Loading app..."),
+  );
+
+const ErrorDisplay = ({ message, onRetry }) =>
+  rc(
+    "div",
+    { style: styles.container },
+    rc(
+      "div",
+      { style: styles.errorContainer },
+      rc("div", { style: styles.iconContainer }, rc(AlertIcon)),
+      rc("div", { style: styles.errorTitle }, "Failed to load app"),
+      rc("div", { style: styles.errorTraceBox }, rc("p", { style: styles.errorMessage }, message)),
+      rc(RetryButton, { onClick: onRetry }),
+    ),
+  );
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = { hasError: false, errorMessage: null };
+  }
+
+  static getDerivedStateFromError(error) {
+    return {
+      hasError: true,
+      errorMessage:
+        error.stack || error.message || "A runtime error occurred in the app component.",
+    };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.error("Caught inside ErrorBoundary:", error, errorInfo);
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return rc(ErrorDisplay, {
+        message: this.state.errorMessage,
+        onRetry: () => {
+          this.setState({ hasError: false, errorMessage: null });
+          if (this.props.onRetry) this.props.onRetry();
+        },
+      });
+    }
+    return this.props.children;
+  }
+}
+
+const AppWrapper = () => {
+  const [App, setApp] = React.useState(null);
+  const [error, setError] = React.useState(null);
+  const [isLoading, setIsLoading] = React.useState(true);
+
+  const loadApp = React.useCallback(() => {
+    setIsLoading(true);
+    setError(null);
+    waitForImport()
+      .then((app) => {
+        if (app) {
+          setApp(() => app);
+        } else {
+          setError("Unable to load the app. Please check if the development server is running.");
+        }
+      })
+      .catch((err) => {
+        setError(err.stack || err.message || "An unexpected error occurred during import.");
+      })
+      .finally(() => {
+        setIsLoading(false);
+      });
+  }, []);
+
+  React.useEffect(() => {
+    loadApp();
+  }, [loadApp]);
+
+  if (isLoading) return rc(Loading);
+  if (error) return rc(ErrorDisplay, { message: error, onRetry: loadApp });
+  if (!App) return rc(ErrorDisplay, { message: "App component not found.", onRetry: loadApp });
+
+  return rc(ErrorBoundary, { onRetry: loadApp }, rc(App));
+};
+var render = () => rc(AppWrapper);

package/templates/liveReload.js

@@ -1,69 +1,322 @@
 (() => {
-  const WS_URL = _HOT_RELOAD_LINK;
-  const SERVER = _SERVER_URL;
-  const CSS_PATH = _CSS_PATH;
-  const JS_PATH = _JS_PATH;
+  const CONFIG = {
+    wsUrl: _HOT_RELOAD_LINK,
+    server: _SERVER_URL,
+    cssPath: _CSS_PATH,
+    jsPath: _JS_PATH,
+    removeCmd: _REMOVE_CMD,
+    cssId: "sc-css-injected",
+    jsId: "sc-js-injected",
+  };
+
+  const ICONS = {
+    close: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>`,
+    terminal: `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>`,
+    copy: `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>`,
+    check: `<svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>`,
+    warning: `⚠️`,
+  };
+
+  class SpicetifyDevTools {
+    constructor() {
+      this.state = {
+        isConnected: false,
+        hasConnectedOnce: false,
+        hasError: false,
+      };
+
+      this.socket = null;
+      this.reconnectTimeout = null;
+      this.shadowRoot = null;
+      this.elements = {};
+    }
+
+    init() {
+      this.setupShadowDOM();
+      this.injectUserAssets();
+      this.connectWebSocket();
+    }
+
+    setupShadowDOM() {
+      const hostEl = document.createElement("div");
+      hostEl.id = "sc-devtools-root";
+      hostEl.style.cssText = "position: absolute; z-index: 2147483647;";
+      document.body.appendChild(hostEl);
+
+      this.shadowRoot = hostEl.attachShadow({ mode: "open" });
+
+      const style = document.createElement("style");
+      style.textContent = this.getStyles();
+      this.shadowRoot.appendChild(style);
 
-  const CSS_ID = "sc-css-injected";
-  const JS_ID = "sc-js-injected";
+      const wrapper = document.createElement("div");
+      wrapper.innerHTML = this.getHTMLTemplate();
+      this.shadowRoot.appendChild(wrapper);
 
-  let socket;
+      this.elements = {
+        modal: this.shadowRoot.querySelector(".sc-modal"),
+        errorContent: this.shadowRoot.querySelector(".sc-modal__content"),
+        btnModalClose: this.shadowRoot.querySelector(".sc-modal__close-btn"),
+        copyBtns: this.shadowRoot.querySelectorAll(".sc-remove__copy"),
+      };
 
-  const connect = () => {
-    socket = new WebSocket(WS_URL);
+      this.bindEvents();
+    }
 
-    socket.addEventListener("open", () => {
-      console.log("[SC] Live reload connected");
-    });
+    bindEvents() {
+      this.elements.btnModalClose.addEventListener("click", () => this.hideErrorDialog());
 
-    socket.addEventListener("message", (event) => {
-      let updated;
+      this.elements.copyBtns.forEach((btn) => {
+        btn.addEventListener("click", () => this.handleCopyCommand(btn));
+      });
+    }
 
+    connectWebSocket() {
+      this.socket = new WebSocket(CONFIG.wsUrl);
+
+      this.socket.addEventListener("open", () => {
+        this.setState({ isConnected: true });
+        console.log("[SC] Live reload connected");
+
+        if (this.state.hasConnectedOnce) {
+          Spicetify.showNotification("Reconnected successfully", false);
+        }
+        this.setState({ hasConnectedOnce: true });
+      });
+
+      this.socket.addEventListener("message", (event) => this.handleMessage(event));
+      this.socket.addEventListener("close", () => this.handleDisconnect());
+      this.socket.addEventListener("error", () => this.setState({ isConnected: false }));
+    }
+
+    handleMessage(event) {
+      let data;
       try {
-        updated = JSON.parse(event.data);
+        data = JSON.parse(event.data);
       } catch {
         return;
       }
+      if (!data) return;
 
-      if (!Array.isArray(updated) || updated.length === 0) return;
+      if (!Array.isArray(data)) {
+        if (data.type === "build-error" && data.errors?.length > 0) {
+          this.setState({ hasError: true });
+          this.showErrorDialog(data.errors);
+          return;
+        }
+        if (data.type === "build-success") {
+          this.setState({ hasError: false });
+          this.hideErrorDialog();
+          if (data.warnings?.length > 0) {
+            Spicetify.showNotification(`${data.warnings.length} warning(s)`, false);
+          }
+          if (Array.isArray(data.updated) && data.updated.length > 0) {
+            data = data.updated;
+          } else {
+            return;
+          }
+        }
+      }
 
-      const isOnlyCSS = updated.every((file) => file.endsWith(".css"));
+      if (Array.isArray(data) && data.length > 0) {
+        const isOnlyCSS = data.every((file) => file.endsWith(".css"));
 
-      if (isOnlyCSS && CSS_PATH) {
-        const link = document.getElementById(CSS_ID);
-        if (!link || !link.parentNode) return;
+        if (isOnlyCSS && CONFIG.cssPath) {
+          this.hotReloadCSS();
+        } else {
+          window.location.reload();
+        }
+      }
+    }
 
-        const next = link.cloneNode(false);
-        next.href = `${SERVER}${CSS_PATH}?t=${Date.now()}`;
-        next.onload = () => link.remove();
+    handleDisconnect() {
+      this.setState({ isConnected: false });
+      clearTimeout(this.reconnectTimeout);
+      this.reconnectTimeout = setTimeout(() => this.connectWebSocket(), 1000);
+    }
 
-        link.parentNode.insertBefore(next, link.nextSibling);
-      } else {
-        window.location.reload();
+    injectUserAssets() {
+      if (CONFIG.cssPath) {
+        const link = document.createElement("link");
+        link.id = CONFIG.cssId;
+        link.rel = "stylesheet";
+        link.href = CONFIG.server + CONFIG.cssPath;
+        document.head.appendChild(link);
       }
-    });
+      const script = document.createElement("script");
+      script.id = CONFIG.jsId;
+      script.src = CONFIG.server + CONFIG.jsPath;
+      script.onerror = () => {
+        this.setState({ hasError: true });
+        this.showErrorDialog([
+          { text: "Failed to load JavaScript. Ensure the dev server is running." },
+        ]);
+      };
+      document.body.appendChild(script);
+    }
 
-    socket.addEventListener("close", () => {
-      setTimeout(connect, 1000);
-    });
+    hotReloadCSS() {
+      const oldLink = document.getElementById(CONFIG.cssId);
+      if (!oldLink || !oldLink.parentNode) return;
 
-    socket.addEventListener("error", () => {
-      socket.close();
-    });
-  };
+      const newLink = oldLink.cloneNode(false);
+      newLink.href = `${CONFIG.server}${CONFIG.cssPath}?t=${Date.now()}`;
+      newLink.onload = () => {
+        oldLink.remove();
+        Spicetify.showNotification("Styles hot-reloaded", false);
+      };
+      oldLink.parentNode.insertBefore(newLink, oldLink.nextSibling);
+    }
+
+    setState(newState) {
+      this.state = { ...this.state, ...newState };
+    }
+
+    showErrorDialog(errors) {
+      this.elements.modal.style.display = "flex";
+      this.elements.errorContent.innerHTML = "";
 
-  if (CSS_PATH) {
-    const link = document.createElement("link");
-    link.id = CSS_ID;
-    link.rel = "stylesheet";
-    link.href = SERVER + CSS_PATH;
-    document.head.appendChild(link);
+      const fragment = document.createDocumentFragment();
+
+      errors.forEach((err, index) => {
+        const msg = err.text || err.message || String(err);
+        const item = document.createElement("div");
+        item.className = "sc-err-item";
+
+        let html = `<div class="sc-err-msg">${index + 1}. ${msg}</div>`;
+
+        if (err.location) {
+          const loc = err.location;
+          html += `
+            <div class="sc-err-loc">
+              <div class="sc-err-path">${loc.file}:${loc.line}:${loc.column}</div>
+              ${loc.lineText ? `<div class="sc-err-code">${loc.lineText}</div>` : ""}
+            </div>`;
+        }
+
+        if (err.notes?.length) {
+          err.notes.forEach((note) => {
+            html += `<div class="sc-err-note">${note.text}</div>`;
+          });
+        }
+
+        item.innerHTML = html;
+        fragment.appendChild(item);
+      });
+
+      this.elements.errorContent.appendChild(fragment);
+    }
+
+    hideErrorDialog() {
+      this.elements.modal.style.display = "none";
+    }
+
+    handleCopyCommand(btnElement) {
+      navigator.clipboard.writeText(CONFIG.removeCmd).then(() => {
+        btnElement.classList.add("is-copied");
+        btnElement.innerHTML = `${ICONS.check} Copied!`;
+
+        setTimeout(() => {
+          btnElement.classList.remove("is-copied");
+          btnElement.innerHTML = `${ICONS.copy} Copy`;
+        }, 2000);
+      });
+    }
+
+    getHTMLTemplate() {
+      const removeSectionHTML = `
+<div class="sc-remove">
+  <div class="sc-remove__title">${ICONS.terminal} Remove Extension</div>
+  <div class="sc-remove__cmd">
+    <code>${CONFIG.removeCmd}</code>
+    <button class="sc-remove__copy">${ICONS.copy} Copy</button>
+  </div>
+</div>
+`;
+
+      return `
+  <div class="sc-modal" style="display: none;">
+    <div class="sc-modal__inner">
+      <div class="sc-modal__header">
+        <h2 class="sc-modal__title"><span>${ICONS.warning}</span><span>Build Error</span></h2>
+        <button class="sc-modal__close-btn">${ICONS.close}</button>
+      </div>
+      <div class="sc-modal__content"></div>
+      ${removeSectionHTML}
+    </div>
+  </div>
+`;
+    }
+
+    getStyles() {
+      return `
+/* Variables */
+:host {
+  --sc-color-bg-modal: #181818;
+  --sc-color-bg-elevated: rgba(255, 255, 255, 0.06);
+  --sc-color-bg-hover: rgba(255, 255, 255, 0.1);
+  --sc-color-text-primary: #ffffff;
+  --sc-color-text-secondary: #a7a7a7;
+  --sc-color-text-muted: #888888;
+  --sc-color-brand: #1ed760;
+  --sc-color-error: #e91429;
+  --sc-border-light: rgba(255, 255, 255, 0.08);
+  --sc-border-error: rgba(233, 20, 41, 0.2);
+  --sc-shadow-panel: 0 24px 48px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--sc-border-light);
+  --sc-radius-sm: 6px;
+  --sc-radius-md: 12px;
+  --sc-radius-lg: 16px;
+  --sc-radius-circle: 50%;
+  --sc-font-sans: "Circular Sp", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  --sc-font-mono: Consolas, Monaco, "Courier New", monospace;
+  --sc-transition-smooth: all 0.2s ease;
+}
+
+/* Animations */
+@keyframes scModalEnter { from { opacity: 0; transform: scale(0.96) translateY(15px); } to { opacity: 1; transform: scale(1) translateY(0); } }
+@keyframes scBackdropFade { from { opacity: 0; backdrop-filter: blur(0px); } to { opacity: 1; backdrop-filter: blur(8px); } }
+
+/* Modal */
+.sc-modal { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; padding: 24px; animation: scBackdropFade 0.3s ease-out; font-family: var(--sc-font-sans); }
+.sc-modal__inner { width: 100%; max-width: 680px; max-height: 80vh; background-color: var(--sc-color-bg-modal); border-radius: var(--sc-radius-lg); box-shadow: var(--sc-shadow-panel); display: flex; flex-direction: column; overflow: hidden; animation: scModalEnter 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
+.sc-modal__header { padding: 20px 24px; background: linear-gradient(135deg, rgba(233, 20, 41, 0.12), rgba(233, 20, 41, 0.02)); border-bottom: 1px solid var(--sc-border-error); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
+.sc-modal__title { color: #ff6b6b; font-size: 18px; font-weight: 800; margin: 0; display: flex; align-items: center; gap: 10px; letter-spacing: -0.01em; }
+.sc-modal__close-btn { background: var(--sc-color-bg-elevated); border: none; color: var(--sc-color-text-secondary); cursor: pointer; width: 32px; height: 32px; border-radius: var(--sc-radius-circle); display: flex; align-items: center; justify-content: center; transition: var(--sc-transition-smooth); }
+.sc-modal__close-btn:hover { background: var(--sc-color-bg-hover); color: var(--sc-color-text-primary); }
+.sc-modal__content { padding: 0; overflow-y: auto; flex: 1; scrollbar-width: thin; scrollbar-color: var(--sc-color-bg-hover) transparent; }
+.sc-modal__content::-webkit-scrollbar { width: 6px; }
+.sc-modal__content::-webkit-scrollbar-track { background: transparent; }
+.sc-modal__content::-webkit-scrollbar-thumb { background: var(--sc-color-bg-hover); border-radius: 3px; }
+
+/* Error Items */
+.sc-err-item { padding: 20px 24px; border-bottom: 1px solid var(--sc-border-light); transition: background-color 0.2s; }
+.sc-err-item:hover { background-color: rgba(255, 255, 255, 0.02); }
+.sc-err-item:last-child { border-bottom: none; }
+.sc-err-msg { color: var(--sc-color-text-primary); font-weight: 600; margin-bottom: 12px; font-size: 14px; line-height: 1.5; font-family: var(--sc-font-mono); }
+.sc-err-loc { background-color: rgba(0, 0, 0, 0.3); padding: 14px; border-radius: var(--sc-radius-sm); border: 1px solid var(--sc-border-light); font-family: var(--sc-font-mono); font-size: 12px; overflow-x: auto; }
+.sc-err-path { color: var(--sc-color-brand); margin-bottom: 8px; font-weight: 600; opacity: 0.9; }
+.sc-err-code { color: var(--sc-color-text-muted); white-space: pre; line-height: 1.5; }
+.sc-err-note { color: var(--sc-color-text-secondary); margin-top: 14px; padding-left: 14px; border-left: 2px solid var(--sc-color-error); font-size: 12px; font-weight: 500; }
+
+/* Remove Section */
+.sc-remove { padding: 16px 24px; background: linear-gradient(180deg, rgba(233, 20, 41, 0.06), rgba(233, 20, 41, 0.02)); border-top: 1px solid var(--sc-border-error); }
+.sc-remove__title { color: #f15e6c; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; }
+.sc-remove__cmd { display: flex; align-items: stretch; background: rgba(0, 0, 0, 0.4); border-radius: var(--sc-radius-sm); border: 1px solid var(--sc-border-light); overflow: hidden; }
+.sc-remove__cmd code { flex: 1; padding: 10px 14px; font-family: var(--sc-font-mono); font-size: 12px; color: var(--sc-color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+.sc-remove__copy { padding: 10px 14px; background: rgba(255, 255, 255, 0.03); border: none; border-left: 1px solid var(--sc-border-light); color: var(--sc-color-text-secondary); cursor: pointer; font-size: 11px; font-weight: 600; transition: var(--sc-transition-smooth); display: flex; align-items: center; gap: 6px; }
+.sc-remove__copy:hover { background: var(--sc-color-bg-hover); color: var(--sc-color-text-primary); }
+.sc-remove__copy.is-copied { color: var(--sc-color-brand); }`;
+    }
   }
 
-  const script = document.createElement("script");
-  script.id = JS_ID;
-  script.src = SERVER + JS_PATH;
-  document.body.appendChild(script);
+  const start = () => {
+    const devTools = new SpicetifyDevTools();
+    devTools.init();
+  };
 
-  connect();
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", start);
+  } else {
+    start();
+  }
 })();