boltdocs 1.0.4 → 1.3.1

package/src/client/theme/ui/Sidebar/sidebar.css

@@ -1,269 +1,236 @@
-/* ═══════════════════════════════════════════════════════════
-   SIDEBAR
-   ═══════════════════════════════════════════════════════════ */
-.boltdocs-sidebar {
-  width: var(--ld-sidebar-width);
-  flex-shrink: 0;
-  background-color: var(--ld-sidebar-bg);
-  backdrop-filter: blur(var(--ld-sidebar-blur));
-  -webkit-backdrop-filter: blur(var(--ld-sidebar-blur));
-  border-right: 1px solid var(--ld-border-subtle);
-  padding: 1rem 0.6rem;
-  overflow-y: auto;
-  position: sticky;
-  top: var(--ld-navbar-height);
-  height: calc(100vh - var(--ld-navbar-height));
-  scrollbar-width: thin;
-  scrollbar-color: var(--ld-bg-mute) transparent;
-  display: flex;
-  flex-direction: column;
-  transition:
-    width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
-    padding 0.3s cubic-bezier(0.16, 1, 0.3, 1),
-    opacity 0.2s ease;
-}
-
-.boltdocs-sidebar > nav {
-  flex: 1;
-}
-
-/* ─── Collapsible Sidebar ────────────────────────────────── */
-.boltdocs-main-container.sidebar-collapsed .boltdocs-sidebar {
-  width: 0;
-  padding-left: 0;
-  padding-right: 0;
-  border-right-color: transparent;
-  opacity: 0;
-  pointer-events: none;
-  overflow: hidden;
-}
-
-.sidebar-toggle-floating {
-  position: fixed;
-  bottom: 2rem;
-  left: 2rem;
-  width: 2.75rem;
-  height: 2.75rem;
-  border-radius: 50%;
-  background-color: var(--ld-surface);
-  border: 1px solid var(--ld-border-strong);
-  color: var(--ld-text-muted);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  z-index: 100;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
-  opacity: 0;
-  pointer-events: none;
-  transform: translateY(20px) scale(0.9);
-}
-
-.sidebar-toggle-floating:hover {
-  background-color: var(--ld-bg-soft);
-  color: var(--ld-text-main);
-  transform: translateY(0px) scale(1.05);
-  border-color: var(--ld-color-primary);
-}
-
-.sidebar-toggle-floating:active {
-  transform: translateY(0px) scale(0.95);
-}
-
-.boltdocs-main-container.sidebar-collapsed .sidebar-toggle-floating {
-  opacity: 1;
-  pointer-events: auto;
-  transform: translateY(0) scale(1);
-}
-
-.sidebar-footer {
-  margin-top: 2rem;
-  padding-top: 1rem;
-  border-top: 1px solid var(--ld-border-subtle);
-}
-
-.sidebar-collapse-btn {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  width: 100%;
-  padding: 0.5rem 0.75rem;
-  background: none;
-  border: none;
-  border-radius: var(--ld-radius-md);
-  color: var(--ld-text-muted);
-  font-family: var(--ld-font-sans);
-  font-size: 0.8125rem;
-  font-weight: 500;
-  cursor: pointer;
-  transition: all 0.2s ease;
-}
-
-.sidebar-collapse-btn:hover {
-  background-color: var(--ld-bg-soft);
-  color: var(--ld-color-primary);
-}
-
-.boltdocs-sidebar::-webkit-scrollbar {
-  width: 4px;
-}
-
-.boltdocs-sidebar::-webkit-scrollbar-track {
-  background: transparent;
-}
-
-.boltdocs-sidebar::-webkit-scrollbar-thumb {
-  background: var(--ld-bg-mute);
-  border-radius: 4px;
-}
-
-.sidebar-list {
-  list-style: none;
-  padding: 0;
-  margin: 0 0 0.5rem;
-}
-
-.sidebar-list li {
-  margin-bottom: 1px;
-}
-
-.sidebar-link {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.45rem 0.75rem;
-  color: var(--ld-text-muted);
-  text-decoration: none;
-  border-radius: var(--ld-radius-md);
-  font-size: 0.875rem;
-  font-weight: 500;
-  transition: all 0.2s ease;
-  margin: 0.15rem 0;
-}
-
-.sidebar-link-content {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  gap: 0.5rem;
-}
-
-.sidebar-link-content > span:first-child {
-  flex: 1;
-  word-wrap: break-word;
-}
-
-.sidebar-badge {
-  font-size: 0.45rem;
-  font-weight: 500;
-  padding: 0.1rem 0.3rem;
-  border-radius: 9999px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  white-space: nowrap;
-  line-height: 1;
-  display: inline-flex;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-.sidebar-badge.badge-new {
-  color: #38bdf8;
-  background-color: rgba(56, 189, 248, 0.15);
-  border: 1px solid rgba(56, 189, 248, 0.25);
-}
-
-.sidebar-badge.badge-experimental {
-  color: #eab308; /* Yellow */
-  background-color: rgba(234, 179, 8, 0.15);
-  border: 1px solid rgba(234, 179, 8, 0.25);
-}
-
-.sidebar-badge.badge-updated {
-  color: #a1a1aa; /* Grey / Zinc 400 */
-  background-color: rgba(161, 161, 170, 0.15);
-  border: 1px solid rgba(161, 161, 170, 0.25);
-}
-
-.sidebar-badge.badge-default {
-  color: var(--ld-text-muted);
-  background-color: var(--ld-bg-mute);
-  border: 1px solid var(--ld-border-subtle);
-}
-
-.sidebar-link:hover {
-  color: var(--ld-color-primary-hover);
-}
-
-.sidebar-link.active {
-  color: var(--ld-color-primary);
-  font-weight: 600;
-}
-
-/* ─── Sidebar Groups ─────────────────────────────────────── */
-.sidebar-group {
-  margin-top: 1.25rem;
-}
-
-.sidebar-group:first-child {
-  margin-top: 0;
-}
-
-.sidebar-group-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  width: 100%;
-  padding: 0.35rem 0.75rem;
-  background: none;
-  border: none;
-  border-radius: var(--ld-radius-md);
-  color: var(--ld-text-dim);
-  font-family: var(--ld-font-sans);
-  font-size: 0.6875rem;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
-  cursor: pointer;
-  transition:
-    color 0.2s,
-    background-color 0.2s;
-}
-
-.sidebar-group-header:hover {
-  color: var(--ld-text-muted);
-  background-color: rgba(255, 255, 255, 0.03);
-}
-
-.sidebar-group-header.active {
-  color: var(--ld-color-primary);
-}
-
-.sidebar-group-chevron {
-  display: inline-flex;
-  align-items: center;
-  transition: transform 0.25s ease;
-  font-size: 0.75rem;
-  line-height: 1;
-}
-
-.sidebar-group-chevron.open {
-  transform: rotate(90deg);
-}
-
-.sidebar-group-list {
-  list-style: none;
-  padding: 0;
-  margin: 0.35rem 0 0;
-  overflow: hidden;
-}
-
-.sidebar-group-list li {
-  margin-bottom: 1px;
-}
-
-.sidebar-link-nested {
-  padding-left: 1.25rem;
-}
+/* ═══════════════════════════════════════════════════════════
+   SIDEBAR
+   ═══════════════════════════════════════════════════════════ */
+.boltdocs-sidebar {
+  width: var(--ld-sidebar-width);
+  flex-shrink: 0;
+  background-color: var(--ld-sidebar-bg);
+  backdrop-filter: blur(var(--ld-sidebar-blur));
+  -webkit-backdrop-filter: blur(var(--ld-sidebar-blur));
+  border-right: 1px solid var(--ld-border-subtle);
+  padding: 1rem 0.6rem;
+  overflow-y: auto;
+  position: sticky;
+  top: var(--ld-navbar-height);
+  height: calc(100vh - var(--ld-navbar-height));
+  scrollbar-width: thin;
+  scrollbar-color: var(--ld-bg-mute) transparent;
+  display: flex;
+  flex-direction: column;
+  transition:
+    width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
+    padding 0.3s cubic-bezier(0.16, 1, 0.3, 1),
+    opacity 0.2s ease;
+}
+
+.boltdocs-sidebar > nav {
+  flex: 1;
+}
+
+/* ─── Collapsible Sidebar ────────────────────────────────── */
+.boltdocs-main-container.sidebar-collapsed .boltdocs-sidebar {
+  width: 54px;
+  padding: 1rem 0;
+  border-right: 1px solid var(--ld-border-subtle);
+  opacity: 1;
+  pointer-events: auto;
+  overflow: hidden;
+}
+
+.sidebar-collapse {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 0 0.75rem 1rem;
+  transition: justify-content 0.3s ease;
+}
+
+.boltdocs-main-container.sidebar-collapsed .sidebar-collapse {
+  justify-content: center;
+  padding: 0 0 1rem;
+}
+
+.sidebar-collapse-btn {
+  color: var(--ld-text-muted);
+  border: none;
+  box-shadow: none;
+  background-color: transparent;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  border-radius: var(--ld-radius-md);
+  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.sidebar-collapse-btn:hover {
+  background-color: var(--ld-bg-mute);
+  color: var(--ld-text-main);
+  transform: scale(1.05);
+}
+
+.boltdocs-sidebar::-webkit-scrollbar {
+  width: 4px;
+}
+
+.boltdocs-sidebar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.boltdocs-sidebar::-webkit-scrollbar-thumb {
+  background: var(--ld-bg-mute);
+  border-radius: 4px;
+}
+
+.sidebar-list {
+  list-style: none;
+  padding: 0;
+  margin: 0 0 0.5rem;
+}
+
+.sidebar-list li {
+  margin-bottom: 1px;
+}
+
+.sidebar-link {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.45rem 0.75rem;
+  color: var(--ld-text-muted);
+  text-decoration: none;
+  border-radius: var(--ld-radius-md);
+  font-size: 0.875rem;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  margin: 0.15rem 0;
+}
+
+.sidebar-link-content {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  gap: 0.5rem;
+}
+
+.sidebar-link-content > span:first-child {
+  flex: 1;
+  word-wrap: break-word;
+}
+
+.sidebar-badge {
+  font-size: 0.45rem;
+  font-weight: 500;
+  padding: 0.1rem 0.3rem;
+  border-radius: 9999px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  white-space: nowrap;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.sidebar-badge.badge-new {
+  color: #38bdf8;
+  background-color: rgba(56, 189, 248, 0.15);
+  border: 1px solid rgba(56, 189, 248, 0.25);
+}
+
+.sidebar-badge.badge-experimental {
+  color: #eab308; /* Yellow */
+  background-color: rgba(234, 179, 8, 0.15);
+  border: 1px solid rgba(234, 179, 8, 0.25);
+}
+
+.sidebar-badge.badge-updated {
+  color: #a1a1aa; /* Grey / Zinc 400 */
+  background-color: rgba(161, 161, 170, 0.15);
+  border: 1px solid rgba(161, 161, 170, 0.25);
+}
+
+.sidebar-badge.badge-default {
+  color: var(--ld-text-muted);
+  background-color: var(--ld-bg-mute);
+  border: 1px solid var(--ld-border-subtle);
+}
+
+.sidebar-link:hover {
+  color: var(--ld-color-primary-hover);
+}
+
+.sidebar-link.active {
+  color: var(--ld-color-primary);
+  font-weight: 600;
+}
+
+/* ─── Sidebar Groups ─────────────────────────────────────── */
+.sidebar-group {
+  margin-top: 1.25rem;
+}
+
+.sidebar-group:first-child {
+  margin-top: 0;
+}
+
+.sidebar-group-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 0.35rem 0.75rem;
+  background: none;
+  border: none;
+  border-radius: var(--ld-radius-md);
+  color: var(--ld-text-dim);
+  font-family: var(--ld-font-sans);
+  font-size: 0.6875rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  cursor: pointer;
+  transition:
+    color 0.2s,
+    background-color 0.2s;
+}
+
+.sidebar-group-header:hover {
+  color: var(--ld-text-muted);
+  background-color: rgba(255, 255, 255, 0.03);
+}
+
+.sidebar-group-header.active {
+  color: var(--ld-color-primary);
+}
+
+.sidebar-group-chevron {
+  display: inline-flex;
+  align-items: center;
+  transition: transform 0.25s ease;
+  font-size: 0.75rem;
+  line-height: 1;
+}
+
+.sidebar-group-chevron.open {
+  transform: rotate(90deg);
+}
+
+.sidebar-group-list {
+  list-style: none;
+  padding: 0;
+  margin: 0.35rem 0 0;
+  overflow: hidden;
+}
+
+.sidebar-group-list li {
+  margin-bottom: 1px;
+}
+
+.sidebar-link-nested {
+  padding-left: 1.25rem;
+}

package/src/client/theme/ui/ThemeToggle/ThemeToggle.tsx

@@ -1,69 +1,69 @@
-import React, { useEffect, useState } from "react";
-import { Sun, Moon } from "lucide-react";
-
-export function ThemeToggle() {
-  const [theme, setTheme] = useState("dark");
-  const [mounted, setMounted] = useState(false);
-
-  useEffect(() => {
-    setMounted(true);
-    // On mount, read from localStorage or matchMedia
-    const stored = localStorage.getItem("boltdocs-theme");
-    if (stored === "light" || stored === "dark") {
-      setTheme(stored);
-    } else {
-      const prefersDark = window.matchMedia(
-        "(prefers-color-scheme: dark)",
-      ).matches;
-      setTheme(prefersDark ? "dark" : "light");
-    }
-
-    // Listen to system changes if no localStorage is set
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    const handleChange = (e: MediaQueryListEvent) => {
-      if (!localStorage.getItem("boltdocs-theme")) {
-        setTheme(e.matches ? "dark" : "light");
-      }
-    };
-    mediaQuery.addEventListener("change", handleChange);
-    return () => mediaQuery.removeEventListener("change", handleChange);
-  }, []);
-
-  useEffect(() => {
-    if (!mounted) return;
-    const root = document.documentElement;
-    if (theme === "light") {
-      root.classList.add("theme-light");
-      root.dataset.theme = "light";
-    } else {
-      root.classList.remove("theme-light");
-      root.dataset.theme = "dark";
-    }
-  }, [theme, mounted]);
-
-  const toggleTheme = () => {
-    const newTheme = theme === "dark" ? "light" : "dark";
-    setTheme(newTheme);
-    localStorage.setItem("boltdocs-theme", newTheme);
-  };
-
-  // Prevent hydration mismatch by rendering a placeholder with same layout
-  if (!mounted) {
-    return (
-      <button className="navbar-icon-btn" aria-label="Toggle theme" disabled>
-        <span style={{ width: 20, height: 20, display: "inline-block" }}></span>
-      </button>
-    );
-  }
-
-  return (
-    <button
-      className="navbar-icon-btn"
-      onClick={toggleTheme}
-      aria-label="Toggle theme"
-      title={`Switch to ${theme === "dark" ? "light" : "dark"} theme`}
-    >
-      {theme === "dark" ? <Sun size={20} /> : <Moon size={20} />}
-    </button>
-  );
-}
+import React, { useEffect, useState } from "react";
+import { Sun, Moon } from "lucide-react";
+
+export function ThemeToggle() {
+  const [theme, setTheme] = useState("dark");
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    // On mount, read from localStorage or matchMedia
+    const stored = localStorage.getItem("boltdocs-theme");
+    if (stored === "light" || stored === "dark") {
+      setTheme(stored);
+    } else {
+      const prefersDark = window.matchMedia(
+        "(prefers-color-scheme: dark)",
+      ).matches;
+      setTheme(prefersDark ? "dark" : "light");
+    }
+
+    // Listen to system changes if no localStorage is set
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = (e: MediaQueryListEvent) => {
+      if (!localStorage.getItem("boltdocs-theme")) {
+        setTheme(e.matches ? "dark" : "light");
+      }
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+
+  useEffect(() => {
+    if (!mounted) return;
+    const root = document.documentElement;
+    if (theme === "light") {
+      root.classList.add("theme-light");
+      root.dataset.theme = "light";
+    } else {
+      root.classList.remove("theme-light");
+      root.dataset.theme = "dark";
+    }
+  }, [theme, mounted]);
+
+  const toggleTheme = () => {
+    const newTheme = theme === "dark" ? "light" : "dark";
+    setTheme(newTheme);
+    localStorage.setItem("boltdocs-theme", newTheme);
+  };
+
+  // Prevent hydration mismatch by rendering a placeholder with same layout
+  if (!mounted) {
+    return (
+      <button className="navbar-icon-btn" aria-label="Toggle theme" disabled>
+        <span style={{ width: 20, height: 20, display: "inline-block" }}></span>
+      </button>
+    );
+  }
+
+  return (
+    <button
+      className="navbar-icon-btn"
+      onClick={toggleTheme}
+      aria-label="Toggle theme"
+      title={`Switch to ${theme === "dark" ? "light" : "dark"} theme`}
+    >
+      {theme === "dark" ? <Sun size={20} /> : <Moon size={20} />}
+    </button>
+  );
+}

package/src/client/theme/ui/ThemeToggle/index.ts

@@ -1 +1 @@
-export { ThemeToggle } from "./ThemeToggle";
+export { ThemeToggle } from "./ThemeToggle";