@adarsh_goswami/design 0.1.0

package/dist/index.js

@@ -0,0 +1,1136 @@
+// src/components/DocsLayout/DocsLayout.tsx
+import { Badge as Badge2, Box as Box3, Flex as Flex3, Heading as Heading3, Separator as Separator3, Text as Text3, ScrollArea as ScrollArea2 } from "@radix-ui/themes";
+
+// src/components/DocsLayout/NavSidebar.tsx
+import { Badge, Box, Flex, Heading, ScrollArea, Separator, Text } from "@radix-ui/themes";
+import { jsx, jsxs } from "react/jsx-runtime";
+function NavStatusBadge({ status }) {
+  if (status === "final") return null;
+  return /* @__PURE__ */ jsx(Badge, { size: "1", variant: "soft", color: status === "draft" ? "yellow" : "gray", children: status });
+}
+function NavLeaf({
+  id,
+  label,
+  slug,
+  status,
+  activeSlug,
+  onSlugChange
+}) {
+  const isActive = slug === activeSlug;
+  const isDeprecated = status === "deprecated";
+  return /* @__PURE__ */ jsx(Box, { mb: "1", children: /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick: () => onSlugChange(slug),
+      style: { width: "100%", textAlign: "left", background: "none", border: "none", cursor: "pointer", padding: 0 },
+      children: /* @__PURE__ */ jsxs(
+        Flex,
+        {
+          align: "center",
+          justify: "between",
+          gap: "2",
+          px: "2",
+          py: "1",
+          className: [
+            "rounded-md transition-colors",
+            isActive ? "bg-[var(--accent-subtle)] text-accent" : "text-text-secondary hover:bg-bg-hover hover:text-text-primary"
+          ].join(" "),
+          style: { minHeight: "30px" },
+          children: [
+            /* @__PURE__ */ jsx(
+              Text,
+              {
+                as: "span",
+                size: "2",
+                weight: isActive ? "medium" : "regular",
+                style: {
+                  fontFamily: "var(--brand-font-body)",
+                  textDecoration: isDeprecated ? "line-through" : void 0
+                },
+                children: label
+              }
+            ),
+            status && /* @__PURE__ */ jsx(NavStatusBadge, { status })
+          ]
+        }
+      )
+    }
+  ) }, id);
+}
+function NavItemRow({
+  item,
+  activeSlug,
+  onSlugChange
+}) {
+  if (item.slug) {
+    return /* @__PURE__ */ jsx(
+      NavLeaf,
+      {
+        id: item.id,
+        label: item.label,
+        slug: item.slug,
+        status: item.status,
+        activeSlug,
+        onSlugChange
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Box, { mb: "1", children: [
+    /* @__PURE__ */ jsxs(Flex, { align: "center", justify: "between", gap: "2", px: "2", py: "1", children: [
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          as: "p",
+          size: "2",
+          weight: "medium",
+          style: {
+            fontFamily: "var(--brand-font-body)",
+            color: "var(--text-secondary)",
+            textDecoration: item.status === "deprecated" ? "line-through" : void 0
+          },
+          children: item.label
+        }
+      ),
+      item.status && /* @__PURE__ */ jsx(NavStatusBadge, { status: item.status })
+    ] }),
+    item.children && item.children.length > 0 && /* @__PURE__ */ jsx(Box, { pl: "3", children: item.children.map((child) => /* @__PURE__ */ jsx(
+      NavLeaf,
+      {
+        id: child.id,
+        label: child.label,
+        slug: child.slug,
+        status: child.status,
+        activeSlug,
+        onSlugChange
+      },
+      child.id
+    )) })
+  ] });
+}
+function NavSidebar({ meta, navigation, activeSlug, onSlugChange }) {
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      style: {
+        width: "256px",
+        flexShrink: 0,
+        height: "100%",
+        borderRight: "1px solid var(--border-soft)",
+        backgroundColor: "var(--bg-surface)",
+        display: "flex",
+        flexDirection: "column"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Box,
+          {
+            px: "4",
+            py: "3",
+            style: { borderBottom: "1px solid var(--border-subtle)", flexShrink: 0 },
+            children: /* @__PURE__ */ jsxs(Flex, { align: "center", gap: "2", children: [
+              meta.logoUrl && /* @__PURE__ */ jsx("img", { src: meta.logoUrl, alt: meta.title, style: { height: "20px", width: "auto" } }),
+              /* @__PURE__ */ jsx(
+                Heading,
+                {
+                  as: "h2",
+                  size: "3",
+                  style: { fontFamily: "var(--brand-font-display)", color: "var(--text-primary)" },
+                  children: meta.title
+                }
+              ),
+              meta.version && /* @__PURE__ */ jsx(Badge, { size: "1", variant: "soft", color: "violet", children: meta.version })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(ScrollArea, { scrollbars: "vertical", style: { flex: 1 }, children: /* @__PURE__ */ jsx(Box, { p: "4", children: navigation.map((section, sectionIndex) => /* @__PURE__ */ jsxs(Box, { mb: "4", children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              as: "p",
+              size: "1",
+              weight: "medium",
+              mb: "2",
+              style: {
+                fontFamily: "var(--brand-font-body)",
+                color: "var(--text-muted)",
+                textTransform: "uppercase",
+                letterSpacing: "var(--brand-tracking-wider)",
+                marginTop: sectionIndex === 0 ? 0 : void 0
+              },
+              children: section.label
+            }
+          ),
+          /* @__PURE__ */ jsx(Separator, { size: "4", mb: "2" }),
+          section.items.map((item) => /* @__PURE__ */ jsx(
+            NavItemRow,
+            {
+              item,
+              activeSlug,
+              onSlugChange
+            },
+            item.id
+          ))
+        ] }, section.id)) }) })
+      ]
+    }
+  );
+}
+
+// src/components/DocsLayout/MarkdownContent.tsx
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import rehypeHighlight from "rehype-highlight";
+import { Box as Box2, Flex as Flex2, Heading as Heading2, Separator as Separator2, Text as Text2 } from "@radix-ui/themes";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var markdownComponents = {
+  h1: ({ children }) => /* @__PURE__ */ jsx2(
+    Heading2,
+    {
+      as: "h1",
+      size: "7",
+      mb: "4",
+      style: { fontFamily: "var(--brand-font-display)", color: "var(--text-primary)" },
+      children
+    }
+  ),
+  h2: ({ children }) => /* @__PURE__ */ jsx2(
+    Heading2,
+    {
+      as: "h2",
+      size: "5",
+      mb: "3",
+      mt: "6",
+      style: { fontFamily: "var(--brand-font-display)", color: "var(--text-primary)" },
+      children
+    }
+  ),
+  h3: ({ children }) => /* @__PURE__ */ jsx2(
+    Heading2,
+    {
+      as: "h3",
+      size: "4",
+      mb: "2",
+      mt: "5",
+      style: { fontFamily: "var(--brand-font-display)", color: "var(--text-secondary)" },
+      children
+    }
+  ),
+  p: ({ children }) => /* @__PURE__ */ jsx2(
+    Text2,
+    {
+      as: "p",
+      size: "3",
+      mb: "4",
+      style: {
+        fontFamily: "var(--brand-font-body)",
+        color: "var(--text-secondary)",
+        lineHeight: "var(--brand-leading-relaxed)",
+        display: "block"
+      },
+      children
+    }
+  ),
+  a: ({ href, children }) => /* @__PURE__ */ jsx2(
+    "a",
+    {
+      href: href ?? "#",
+      style: { color: "var(--accent)", textDecoration: "underline" },
+      children
+    }
+  ),
+  code: ({ className, children }) => {
+    const isBlock = className?.startsWith("language-");
+    if (isBlock) {
+      return /* @__PURE__ */ jsx2(
+        Box2,
+        {
+          mb: "4",
+          style: {
+            borderRadius: "var(--brand-radius-lg)",
+            border: "1px solid var(--border-soft)",
+            backgroundColor: "var(--bg-raised)",
+            overflowX: "auto"
+          },
+          children: /* @__PURE__ */ jsx2(
+            "code",
+            {
+              className: className ?? "",
+              style: {
+                display: "block",
+                padding: "var(--sp-4)",
+                fontSize: "var(--brand-text-sm)",
+                fontFamily: "var(--brand-font-mono)",
+                color: "var(--text-primary)"
+              },
+              children
+            }
+          )
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx2(
+      "code",
+      {
+        style: {
+          backgroundColor: "var(--bg-raised)",
+          color: "var(--accent-bright)",
+          borderRadius: "var(--brand-radius-sm)",
+          padding: "2px 6px",
+          fontSize: "var(--brand-text-sm)",
+          fontFamily: "var(--brand-font-mono)"
+        },
+        children
+      }
+    );
+  },
+  ul: ({ children }) => /* @__PURE__ */ jsx2(
+    "ul",
+    {
+      style: {
+        marginBottom: "var(--sp-4)",
+        paddingLeft: "var(--sp-4)",
+        listStyleType: "disc",
+        color: "var(--text-secondary)",
+        fontFamily: "var(--brand-font-body)"
+      },
+      children
+    }
+  ),
+  ol: ({ children }) => /* @__PURE__ */ jsx2(
+    "ol",
+    {
+      style: {
+        marginBottom: "var(--sp-4)",
+        paddingLeft: "var(--sp-4)",
+        listStyleType: "decimal",
+        color: "var(--text-secondary)",
+        fontFamily: "var(--brand-font-body)"
+      },
+      children
+    }
+  ),
+  li: ({ children }) => /* @__PURE__ */ jsx2(
+    Text2,
+    {
+      as: "p",
+      size: "3",
+      mb: "1",
+      style: {
+        fontFamily: "var(--brand-font-body)",
+        color: "var(--text-secondary)",
+        display: "list-item"
+      },
+      children
+    }
+  ),
+  blockquote: ({ children }) => /* @__PURE__ */ jsx2(
+    Box2,
+    {
+      mb: "4",
+      pl: "4",
+      py: "2",
+      style: {
+        borderLeft: "2px solid var(--accent)",
+        backgroundColor: "var(--accent-subtle)",
+        borderRadius: "0 var(--brand-radius-md) var(--brand-radius-md) 0"
+      },
+      children
+    }
+  ),
+  table: ({ children }) => /* @__PURE__ */ jsx2(Box2, { mb: "4", style: { overflowX: "auto" }, children: /* @__PURE__ */ jsx2(
+    "table",
+    {
+      style: {
+        width: "100%",
+        borderCollapse: "collapse",
+        fontSize: "var(--brand-text-sm)",
+        fontFamily: "var(--brand-font-body)"
+      },
+      children
+    }
+  ) }),
+  th: ({ children }) => /* @__PURE__ */ jsx2(
+    "th",
+    {
+      style: {
+        textAlign: "left",
+        padding: "8px 12px",
+        borderBottom: "1px solid var(--border-mid)",
+        color: "var(--text-primary)",
+        fontWeight: 500
+      },
+      children
+    }
+  ),
+  td: ({ children }) => /* @__PURE__ */ jsx2(
+    "td",
+    {
+      style: {
+        padding: "8px 12px",
+        borderBottom: "1px solid var(--border-subtle)",
+        color: "var(--text-secondary)"
+      },
+      children
+    }
+  ),
+  hr: () => /* @__PURE__ */ jsx2(Flex2, { my: "6", children: /* @__PURE__ */ jsx2(Separator2, { size: "4" }) })
+};
+function MarkdownContent({ content }) {
+  return /* @__PURE__ */ jsx2(
+    ReactMarkdown,
+    {
+      remarkPlugins: [remarkGfm],
+      rehypePlugins: [rehypeHighlight],
+      components: markdownComponents,
+      children: content
+    }
+  );
+}
+
+// src/components/DocsLayout/DocsLayout.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var PAGE_TYPE_COLORS = {
+  prd: "violet",
+  adr: "blue",
+  guide: "green",
+  reference: "gray"
+};
+function PageTypeBadge({ type }) {
+  return /* @__PURE__ */ jsx3(Badge2, { size: "1", variant: "soft", color: PAGE_TYPE_COLORS[type], children: type.toUpperCase() });
+}
+function DocsLayout({ data, activeSlug, onSlugChange }) {
+  const { meta, navigation, pages } = data;
+  const page = pages[activeSlug];
+  return /* @__PURE__ */ jsx3(Flex3, { direction: "column", style: { height: "100vh", backgroundColor: "var(--bg-base)" }, children: /* @__PURE__ */ jsxs2(Flex3, { direction: "row", style: { flex: 1, overflow: "hidden" }, children: [
+    /* @__PURE__ */ jsx3(
+      NavSidebar,
+      {
+        meta,
+        navigation,
+        activeSlug,
+        onSlugChange
+      }
+    ),
+    /* @__PURE__ */ jsx3(Box3, { style: { flex: 1, overflow: "hidden", backgroundColor: "var(--bg-base)" }, children: /* @__PURE__ */ jsx3(ScrollArea2, { scrollbars: "vertical", style: { height: "100%" }, children: /* @__PURE__ */ jsx3(Box3, { p: "8", style: { maxWidth: "768px", margin: "0 auto" }, children: !page ? /* @__PURE__ */ jsx3(Flex3, { align: "center", justify: "center", style: { height: "300px" }, children: /* @__PURE__ */ jsx3(Text3, { size: "3", style: { color: "var(--text-muted)" }, children: "Page not found" }) }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+      /* @__PURE__ */ jsxs2(Flex3, { align: "center", gap: "3", mb: "3", children: [
+        page.type && /* @__PURE__ */ jsx3(PageTypeBadge, { type: page.type }),
+        page.lastUpdated && /* @__PURE__ */ jsxs2(
+          Text3,
+          {
+            size: "1",
+            style: { color: "var(--text-muted)", fontFamily: "var(--brand-font-body)" },
+            children: [
+              "Updated ",
+              page.lastUpdated
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsx3(
+        Heading3,
+        {
+          as: "h1",
+          size: "8",
+          mb: "4",
+          style: {
+            fontFamily: "var(--brand-font-display)",
+            color: "var(--text-primary)"
+          },
+          children: page.title
+        }
+      ),
+      /* @__PURE__ */ jsx3(Separator3, { size: "4", mb: "6" }),
+      /* @__PURE__ */ jsx3(MarkdownContent, { content: page.content })
+    ] }) }) }) })
+  ] }) });
+}
+
+// src/components/Logo/Logo.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function AgMark({ size = 64, variant = "dark" }) {
+  const aPrimary = variant === "light" ? "#4A3FCC" : variant === "glow" ? "#9B8FFB" : "#7C6EFA";
+  const gPrimary = variant === "light" ? "#0A0A0B" : "#F0EEF8";
+  const bgFill = variant === "light" ? "#F0EEF8" : variant === "glow" ? "url(#agGlowGrad)" : "#111113";
+  return /* @__PURE__ */ jsxs3("svg", { viewBox: "0 0 64 64", width: size, height: size, fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+    variant === "glow" && /* @__PURE__ */ jsx4("defs", { children: /* @__PURE__ */ jsxs3("radialGradient", { id: "agGlowGrad", cx: "30%", cy: "30%", r: "80%", children: [
+      /* @__PURE__ */ jsx4("stop", { offset: "0%", stopColor: "#1A1630" }),
+      /* @__PURE__ */ jsx4("stop", { offset: "100%", stopColor: "#0D0C1A" })
+    ] }) }),
+    /* @__PURE__ */ jsx4("rect", { width: "64", height: "64", rx: "14", fill: bgFill }),
+    /* @__PURE__ */ jsx4("path", { d: "M14 46 L24 20 L34 46", stroke: aPrimary, strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx4("line", { x1: "18", y1: "37", x2: "30", y2: "37", stroke: aPrimary, strokeWidth: "2.5", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx4("path", { d: "M38 28 C38 23 42 20 47 20 C52 20 55 23 55 28 L55 32 L49 32 L49 29", stroke: gPrimary, strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }),
+    /* @__PURE__ */ jsx4("path", { d: "M38 28 C38 33 38 38 38 40 C38 43.5 42 46 47 46 C52 46 55 43.5 55 40 L55 32", stroke: gPrimary, strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] });
+}
+function AgWordmark() {
+  return /* @__PURE__ */ jsxs3("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
+    /* @__PURE__ */ jsxs3("svg", { viewBox: "0 0 36 36", width: "36", height: "36", fill: "none", children: [
+      /* @__PURE__ */ jsx4("rect", { width: "36", height: "36", rx: "8", fill: "#18181C" }),
+      /* @__PURE__ */ jsx4("path", { d: "M6 26 L13 10 L20 26", stroke: "#7C6EFA", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+      /* @__PURE__ */ jsx4("line", { x1: "9", y1: "20.5", x2: "17", y2: "20.5", stroke: "#7C6EFA", strokeWidth: "2", strokeLinecap: "round" }),
+      /* @__PURE__ */ jsx4("path", { d: "M23 16.5 C23 13.5 25.5 12 28 12 C30.5 12 32 13.5 32 16.5 L32 18.5 L28.5 18.5 L28.5 16.5", stroke: "#F0EEF8", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+      /* @__PURE__ */ jsx4("path", { d: "M23 16.5 C23 19 23 21.5 23 23 C23 25 25.5 26 28 26 C30.5 26 32 25 32 23 L32 18.5", stroke: "#F0EEF8", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+    ] }),
+    /* @__PURE__ */ jsxs3("span", { style: { fontFamily: "var(--brand-font-display)", fontWeight: 700, fontSize: 18, color: "var(--text-primary)", letterSpacing: "-0.02em" }, children: [
+      "Adarsh",
+      /* @__PURE__ */ jsx4("span", { style: { color: "var(--accent)" }, children: "." })
+    ] })
+  ] });
+}
+
+// src/components/Footer/Footer.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function Footer({ year = (/* @__PURE__ */ new Date()).getFullYear() }) {
+  const mono = { fontFamily: "var(--brand-font-mono)" };
+  return /* @__PURE__ */ jsxs4("div", { style: {
+    paddingTop: "var(--sp-16)",
+    paddingBottom: "var(--sp-8)",
+    borderTop: "1px solid var(--border-subtle)",
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    flexWrap: "wrap",
+    gap: "var(--sp-4)"
+  }, children: [
+    /* @__PURE__ */ jsx5(AgWordmark, {}),
+    /* @__PURE__ */ jsxs4("div", { style: { display: "flex", alignItems: "center", gap: "var(--sp-2)" }, children: [
+      /* @__PURE__ */ jsxs4("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", style: { flexShrink: 0 }, children: [
+        /* @__PURE__ */ jsx5("circle", { cx: "6", cy: "6", r: "5.5", stroke: "var(--border-soft)" }),
+        /* @__PURE__ */ jsx5("path", { d: "M8 4.5A2.5 2.5 0 1 0 8 7.5", stroke: "var(--text-disabled)", strokeWidth: "1", strokeLinecap: "round" })
+      ] }),
+      /* @__PURE__ */ jsxs4("span", { style: { ...mono, fontSize: 11, color: "var(--text-disabled)" }, children: [
+        year,
+        " Adarsh Goswami. All rights reserved."
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/Theme/ThemeProvider.tsx
+import { useState, useEffect, useCallback } from "react";
+import { Theme } from "@radix-ui/themes";
+
+// src/components/Theme/ThemeContext.ts
+import { createContext, useContext } from "react";
+var ThemeContext = createContext(null);
+function useTheme() {
+  const ctx = useContext(ThemeContext);
+  if (ctx === null) {
+    throw new Error("[useTheme] must be used inside <ThemeProvider>.");
+  }
+  return ctx;
+}
+
+// src/components/Theme/ThemeProvider.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function ThemeProvider({
+  children,
+  defaultTheme = "dark"
+}) {
+  const [theme, setThemeState] = useState(defaultTheme);
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    document.documentElement.setAttribute("data-theme", theme);
+  }, [theme]);
+  const setTheme = useCallback((next) => {
+    setThemeState(next);
+  }, []);
+  const toggleTheme = useCallback(() => {
+    setThemeState((prev) => prev === "dark" ? "light" : "dark");
+  }, []);
+  return /* @__PURE__ */ jsx6(ThemeContext.Provider, { value: { theme, setTheme, toggleTheme }, children: /* @__PURE__ */ jsx6(Theme, { appearance: theme, children }) });
+}
+
+// src/components/Theme/ThemeToggle.tsx
+import { Switch } from "@radix-ui/themes";
+import { jsx as jsx7 } from "react/jsx-runtime";
+function ThemeToggle({ "aria-label": ariaLabel = "Toggle theme" }) {
+  const { theme, toggleTheme } = useTheme();
+  return /* @__PURE__ */ jsx7(
+    Switch,
+    {
+      size: "2",
+      className: "ag-theme-toggle",
+      checked: theme === "light",
+      onCheckedChange: () => toggleTheme(),
+      "aria-label": ariaLabel
+    }
+  );
+}
+
+// src/components/ThemePage/ThemePage.tsx
+import { useEffect as useEffect2, useState as useState2 } from "react";
+
+// package.json
+var package_default = {
+  name: "@adarsh_goswami/design",
+  version: "0.1.0",
+  type: "module",
+  description: "Single source of truth for Adarsh Goswami's personal design system \u2014 pre-themed Radix UI components, CSS tokens, and Tailwind preset.",
+  author: "Adarsh Goswami",
+  license: "MIT",
+  exports: {
+    ".": {
+      types: "./dist/index.d.ts",
+      import: "./dist/index.js",
+      require: "./dist/index.cjs"
+    },
+    "./dist/theme.css": "./dist/theme.css",
+    "./dist/tailwind.config.css": "./dist/tailwind.config.css",
+    "./dist/assets/*": "./dist/assets/*"
+  },
+  main: "./dist/index.cjs",
+  module: "./dist/index.js",
+  types: "./dist/index.d.ts",
+  files: [
+    "dist"
+  ],
+  scripts: {
+    build: "tsup",
+    dev: "tsup --watch",
+    demo: "vite",
+    typecheck: "tsc --noEmit"
+  },
+  peerDependencies: {
+    "@radix-ui/themes": ">=3.0.0",
+    react: ">=18.0.0",
+    "react-dom": ">=18.0.0",
+    tailwindcss: "^4.2.2"
+  },
+  devDependencies: {
+    "@radix-ui/themes": "^3.3.0",
+    "@types/bun": "latest",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    react: "^19.2.4",
+    "react-dom": "^19.2.4",
+    tsup: "^8.5.1",
+    typescript: "^5.9.3",
+    vite: "^8.0.8"
+  },
+  engines: {
+    node: ">=18"
+  },
+  dependencies: {
+    "react-markdown": "^10.1.0",
+    "rehype-highlight": "^7.0.2",
+    "remark-gfm": "^4.0.1"
+  }
+};
+
+// src/components/ThemePage/ThemePage.tsx
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+function useTokenMap(tokens) {
+  const [map, setMap] = useState2({});
+  useEffect2(() => {
+    const style = getComputedStyle(document.documentElement);
+    const result = {};
+    for (const t of tokens) result[t] = style.getPropertyValue(t).trim();
+    setMap(result);
+  }, []);
+  return map;
+}
+function SectionLabel({ children }) {
+  return /* @__PURE__ */ jsx8("p", { style: {
+    fontFamily: "var(--brand-font-mono)",
+    fontSize: "var(--brand-text-xs)",
+    letterSpacing: "0.1em",
+    textTransform: "uppercase",
+    color: "var(--text-muted)",
+    margin: "var(--sp-6) 0 var(--sp-3)"
+  }, children });
+}
+function Section({ label, title, description, children, first }) {
+  return /* @__PURE__ */ jsxs5("section", { style: {
+    marginBottom: "var(--sp-24)",
+    paddingTop: first ? 0 : "var(--sp-24)",
+    borderTop: first ? "none" : "1px solid var(--border-subtle)"
+  }, children: [
+    /* @__PURE__ */ jsx8("div", { style: { fontFamily: "var(--brand-font-mono)", fontSize: "var(--brand-text-xs)", fontWeight: 500, letterSpacing: "0.12em", textTransform: "uppercase", color: "var(--accent)", marginBottom: "var(--sp-2)" }, children: label }),
+    /* @__PURE__ */ jsx8("div", { style: { fontFamily: "var(--brand-font-display)", fontSize: "var(--brand-text-2xl)", fontWeight: 700, color: "var(--text-primary)", marginBottom: "var(--sp-2)" }, children: title }),
+    description && /* @__PURE__ */ jsx8("div", { style: { fontSize: "var(--brand-text-sm)", color: "var(--text-secondary)", marginBottom: "var(--sp-8)", maxWidth: 480 }, children: description }),
+    children
+  ] });
+}
+function ColorSwatch({ token, label, values }) {
+  return /* @__PURE__ */ jsxs5("div", { style: { borderRadius: "var(--brand-radius-md)", overflow: "hidden", border: "1px solid var(--border-subtle)" }, children: [
+    /* @__PURE__ */ jsx8("div", { style: { height: 56, background: `var(${token})` } }),
+    /* @__PURE__ */ jsxs5("div", { style: { background: "var(--bg-surface)", padding: "10px 12px 14px" }, children: [
+      /* @__PURE__ */ jsx8("div", { style: { fontSize: "var(--brand-text-xs)", fontWeight: 500, color: "var(--text-primary)", marginBottom: 2 }, children: label }),
+      /* @__PURE__ */ jsx8("div", { style: { fontFamily: "var(--brand-font-mono)", fontSize: 10, color: "var(--text-muted)" }, children: token }),
+      values[token] && /* @__PURE__ */ jsx8("div", { style: { fontFamily: "var(--brand-font-mono)", fontSize: 10, color: "var(--text-disabled)", marginTop: 1 }, children: values[token] })
+    ] })
+  ] });
+}
+function ColorGrid({ children }) {
+  return /* @__PURE__ */ jsx8("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(140px, 1fr))", gap: "var(--sp-3)" }, children });
+}
+var COLOR_TOKENS = [
+  "--bg-base",
+  "--bg-surface",
+  "--bg-raised",
+  "--bg-overlay",
+  "--border-subtle",
+  "--border-soft",
+  "--border-mid",
+  "--text-primary",
+  "--text-secondary",
+  "--text-muted",
+  "--text-disabled",
+  "--accent",
+  "--accent-bright",
+  "--accent-dim",
+  "--accent-glow",
+  "--success",
+  "--warning",
+  "--error",
+  "--info"
+];
+var TYPE_SCALE = [
+  { token: "--brand-text-5xl", label: "text-5xl", role: "display", weight: 800, family: "display" },
+  { token: "--brand-text-4xl", label: "text-4xl", role: "h1", weight: 700, family: "display" },
+  { token: "--brand-text-3xl", label: "text-3xl", role: "h2", weight: 700, family: "display" },
+  { token: "--brand-text-2xl", label: "text-2xl", role: "h3", weight: 700, family: "display" },
+  { token: "--brand-text-xl", label: "text-xl", role: "h4", weight: 600, family: "display" },
+  { token: "--brand-text-lg", label: "text-lg", role: "h5", weight: 600, family: "display" },
+  { token: "--brand-text-md", label: "text-md", role: "body-lg", weight: 400, family: "body" },
+  { token: "--brand-text-base", label: "text-base", role: "body", weight: 400, family: "body" },
+  { token: "--brand-text-sm", label: "text-sm", role: "caption", weight: 400, family: "body" },
+  { token: "--brand-text-xs", label: "text-xs", role: "mono", weight: 500, family: "mono" }
+];
+var TYPE_SPECIMENS = {
+  "--brand-text-5xl": "Adarsh.",
+  "--brand-text-4xl": "Build fast, ship clean.",
+  "--brand-text-3xl": "Personal infrastructure.",
+  "--brand-text-2xl": "Reusable services, zero rework.",
+  "--brand-text-xl": "Authentication \xB7 Payments \xB7 Notifications",
+  "--brand-text-lg": "Dark-first design, consistent everywhere.",
+  "--brand-text-md": "A minimal design system that scales across projects.",
+  "--brand-text-base": "Built on an 8px grid with consistent tokens for color, spacing, and type.",
+  "--brand-text-sm": "Last updated April 2026 \xB7 Version 1.0.0",
+  "--brand-text-xs": "npm install @adarsh_goswami/brand"
+};
+var SPACING = [
+  { token: "--sp-1", rem: "0.25rem", px: "4px" },
+  { token: "--sp-2", rem: "0.5rem", px: "8px" },
+  { token: "--sp-3", rem: "0.75rem", px: "12px" },
+  { token: "--sp-4", rem: "1rem", px: "16px" },
+  { token: "--sp-5", rem: "1.25rem", px: "20px" },
+  { token: "--sp-6", rem: "1.5rem", px: "24px" },
+  { token: "--sp-8", rem: "2rem", px: "32px" },
+  { token: "--sp-10", rem: "2.5rem", px: "40px" },
+  { token: "--sp-12", rem: "3rem", px: "48px" },
+  { token: "--sp-16", rem: "4rem", px: "64px" },
+  { token: "--sp-20", rem: "5rem", px: "80px" },
+  { token: "--sp-24", rem: "6rem", px: "96px" }
+];
+var RADII = [
+  { token: "--brand-radius-sm", label: "sm", value: "4px" },
+  { token: "--brand-radius-md", label: "md", value: "8px" },
+  { token: "--brand-radius-lg", label: "lg", value: "12px" },
+  { token: "--brand-radius-xl", label: "xl", value: "16px" },
+  { token: "--brand-radius-2xl", label: "2xl", value: "24px" },
+  { token: "--brand-radius-full", label: "full", value: "9999px" }
+];
+var SHADOWS = [
+  { token: "--brand-shadow-sm", label: "shadow-sm", desc: "Subtle lift" },
+  { token: "--brand-shadow-md", label: "shadow-md", desc: "Card elevation" },
+  { token: "--brand-shadow-lg", label: "shadow-lg", desc: "Modal / overlay" },
+  { token: "--brand-shadow-accent", label: "shadow-accent", desc: "Accent glow" }
+];
+var EASINGS = [
+  { token: "--brand-ease-out", label: "ease-out", value: "cubic-bezier(0.16, 1, 0.3, 1)", use: "Entrances, expansions" },
+  { token: "--brand-ease-in-out", label: "ease-in-out", value: "cubic-bezier(0.4, 0, 0.2, 1)", use: "State transitions" }
+];
+var DURATIONS = [
+  { token: "--brand-duration-fast", label: "fast", value: "120ms", use: "Hover states, micro-interactions" },
+  { token: "--brand-duration-base", label: "base", value: "220ms", use: "Most transitions" },
+  { token: "--brand-duration-slow", label: "slow", value: "400ms", use: "Page-level, reveals" }
+];
+var FONT_FAMILIES = [
+  { token: "--brand-font-display", cssFamily: "var(--brand-font-display)", weight: 700, sample: "Syne \u2014 Display" },
+  { token: "--brand-font-body", cssFamily: "var(--brand-font-body)", weight: 400, sample: "DM Sans \u2014 Body" },
+  { token: "--brand-font-mono", cssFamily: "var(--brand-font-mono)", weight: 400, sample: "DM Mono \u2014 Mono" }
+];
+function fontFamilyVar(family) {
+  if (family === "display") return "var(--brand-font-display)";
+  if (family === "mono") return "var(--brand-font-mono)";
+  return "var(--brand-font-body)";
+}
+function ComponentsSection() {
+  const [tooltipVisible, setTooltipVisible] = useState2(false);
+  const mono = { fontFamily: "var(--brand-font-mono)" };
+  return /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-8)" }, children: [
+    /* @__PURE__ */ jsxs5("div", { children: [
+      /* @__PURE__ */ jsx8(SectionLabel, { children: "Buttons" }),
+      /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexWrap: "wrap", gap: "var(--sp-3)", alignItems: "center", marginBottom: "var(--sp-3)" }, children: [
+        /* @__PURE__ */ jsx8("button", { style: btnStyle("primary"), children: "Deploy service" }),
+        /* @__PURE__ */ jsx8("button", { style: btnStyle("secondary"), children: "View source" }),
+        /* @__PURE__ */ jsx8("button", { style: btnStyle("ghost"), children: "Cancel" }),
+        /* @__PURE__ */ jsx8("button", { style: btnStyle("danger"), children: "Delete" })
+      ] }),
+      /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexWrap: "wrap", gap: "var(--sp-3)", alignItems: "center" }, children: [
+        /* @__PURE__ */ jsx8("button", { style: { ...btnStyle("primary"), ...btnSize("sm") }, children: "Small" }),
+        /* @__PURE__ */ jsx8("button", { style: btnStyle("primary"), children: "Default" }),
+        /* @__PURE__ */ jsx8("button", { style: { ...btnStyle("primary"), ...btnSize("lg") }, children: "Large" })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { children: [
+      /* @__PURE__ */ jsx8(SectionLabel, { children: "Badges" }),
+      /* @__PURE__ */ jsx8("div", { style: { display: "flex", flexWrap: "wrap", gap: "var(--sp-3)", alignItems: "center" }, children: [
+        { label: "Default", bg: "var(--bg-overlay)", color: "var(--text-secondary)", border: "var(--border-soft)" },
+        { label: "\u25CF Live", bg: "var(--accent-subtle)", color: "var(--accent-bright)", border: "var(--accent-border)" },
+        { label: "\u25CF Active", bg: "var(--success-bg)", color: "var(--success)", border: "var(--success-border)" },
+        { label: "\u25CF Degraded", bg: "var(--warning-bg)", color: "var(--warning)", border: "var(--warning-border)" },
+        { label: "\u25CF Offline", bg: "var(--error-bg)", color: "var(--error)", border: "var(--error-border)" }
+      ].map((b) => /* @__PURE__ */ jsx8("span", { style: { ...mono, fontSize: 10, fontWeight: 500, letterSpacing: "0.06em", textTransform: "uppercase", padding: "3px 8px", borderRadius: "var(--brand-radius-sm)", background: b.bg, color: b.color, border: `1px solid ${b.border}` }, children: b.label }, b.label)) })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { children: [
+      /* @__PURE__ */ jsx8(SectionLabel, { children: "Cards" }),
+      /* @__PURE__ */ jsx8("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(220px, 1fr))", gap: "var(--sp-4)" }, children: [
+        { icon: "\u{1F510}", title: "Auth Service", body: "JWT-based auth with refresh tokens, OAuth2, and session management." },
+        { icon: "\u{1F4B3}", title: "Payments", body: "Stripe-powered billing with webhooks, subscriptions, and invoicing." },
+        { icon: "\u{1F4E8}", title: "Notifications", body: "Email, push, and in-app notification service with templates." }
+      ].map((card) => /* @__PURE__ */ jsxs5("div", { style: { background: "var(--bg-surface)", border: "1px solid var(--border-subtle)", borderRadius: "var(--brand-radius-xl)", padding: "var(--sp-6)" }, children: [
+        /* @__PURE__ */ jsx8("div", { style: { width: 36, height: 36, borderRadius: "var(--brand-radius-md)", background: "var(--accent-subtle)", border: "1px solid var(--accent-border)", display: "flex", alignItems: "center", justifyContent: "center", marginBottom: "var(--sp-4)", fontSize: 16 }, children: card.icon }),
+        /* @__PURE__ */ jsx8("div", { style: { fontFamily: "var(--brand-font-display)", fontSize: "var(--brand-text-md)", fontWeight: 600, color: "var(--text-primary)", marginBottom: "var(--sp-2)" }, children: card.title }),
+        /* @__PURE__ */ jsx8("div", { style: { fontSize: "var(--brand-text-sm)", color: "var(--text-secondary)", lineHeight: 1.6 }, children: card.body })
+      ] }, card.title)) })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { children: [
+      /* @__PURE__ */ jsx8(SectionLabel, { children: "Form Inputs" }),
+      /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-3)", maxWidth: 400 }, children: [
+        /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-2)" }, children: [
+          /* @__PURE__ */ jsx8("label", { style: labelStyle, children: "Project name" }),
+          /* @__PURE__ */ jsx8("input", { readOnly: true, style: inputStyle(), placeholder: "my-awesome-app", defaultValue: "" })
+        ] }),
+        /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-2)" }, children: [
+          /* @__PURE__ */ jsx8("label", { style: labelStyle, children: "API Key" }),
+          /* @__PURE__ */ jsx8("input", { readOnly: true, style: { ...inputStyle(), ...mono, fontSize: 13 }, defaultValue: "ag_live_\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u20223fa2" }),
+          /* @__PURE__ */ jsx8("span", { style: { fontSize: 11, color: "var(--text-muted)" }, children: "Keep this secret. Rotate from the dashboard." })
+        ] }),
+        /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-2)" }, children: [
+          /* @__PURE__ */ jsx8("label", { style: labelStyle, children: "Status" }),
+          /* @__PURE__ */ jsx8("input", { readOnly: true, style: inputStyle("error"), defaultValue: "invalid-slug!" }),
+          /* @__PURE__ */ jsx8("span", { style: { fontSize: 11, color: "var(--error)" }, children: "Only lowercase letters, numbers, and hyphens." })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { children: [
+      /* @__PURE__ */ jsx8(SectionLabel, { children: "Code Block" }),
+      /* @__PURE__ */ jsxs5("div", { style: { ...mono, background: "var(--bg-surface)", border: "1px solid var(--border-subtle)", borderRadius: "var(--brand-radius-lg)", padding: "var(--sp-5) var(--sp-6)", fontSize: "var(--brand-text-sm)", color: "var(--text-secondary)", lineHeight: 1.8, overflowX: "auto" }, children: [
+        /* @__PURE__ */ jsx8("span", { style: { color: "var(--text-disabled)" }, children: "// Initialize AG Auth" }),
+        "\n",
+        /* @__PURE__ */ jsx8("span", { style: { color: "var(--accent-bright)" }, children: "import" }),
+        " { createClient } ",
+        /* @__PURE__ */ jsx8("span", { style: { color: "var(--accent-bright)" }, children: "from" }),
+        " ",
+        /* @__PURE__ */ jsx8("span", { style: { color: "var(--success)" }, children: "'@ag/auth'" }),
+        "\n\n",
+        /* @__PURE__ */ jsx8("span", { style: { color: "var(--accent-bright)" }, children: "const" }),
+        " auth = ",
+        /* @__PURE__ */ jsx8("span", { style: { color: "var(--info)" }, children: "createClient" }),
+        "({\n",
+        "  projectId: ",
+        /* @__PURE__ */ jsx8("span", { style: { color: "var(--success)" }, children: "'proj_xxxxxxxx'" }),
+        ",\n",
+        "  secret:    process.env.",
+        /* @__PURE__ */ jsx8("span", { style: { color: "var(--info)" }, children: "AG_SECRET" }),
+        ",\n",
+        "  ttl:       ",
+        /* @__PURE__ */ jsx8("span", { style: { color: "var(--warning)" }, children: "3600" }),
+        ",\n",
+        "})\n\n",
+        /* @__PURE__ */ jsx8("span", { style: { color: "var(--accent-bright)" }, children: "export default" }),
+        " auth"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { children: [
+      /* @__PURE__ */ jsx8(SectionLabel, { children: "Navigation" }),
+      /* @__PURE__ */ jsxs5("div", { style: { background: "rgba(10,10,11,0.8)", backdropFilter: "blur(12px)", border: "1px solid var(--border-subtle)", borderRadius: "var(--brand-radius-xl)", padding: "var(--sp-3) var(--sp-5)", display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+        /* @__PURE__ */ jsxs5("div", { style: { fontFamily: "var(--brand-font-display)", fontSize: "var(--brand-text-md)", fontWeight: 700, color: "var(--text-primary)", display: "flex", alignItems: "center", gap: "var(--sp-2)" }, children: [
+          /* @__PURE__ */ jsxs5("svg", { viewBox: "0 0 24 24", width: "20", height: "20", fill: "none", children: [
+            /* @__PURE__ */ jsx8("path", { d: "M4 18 L9 6 L14 18", stroke: "#7C6EFA", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+            /* @__PURE__ */ jsx8("line", { x1: "6", y1: "14", x2: "12", y2: "14", stroke: "#7C6EFA", strokeWidth: "2", strokeLinecap: "round" }),
+            /* @__PURE__ */ jsx8("path", { d: "M16 10C16 8 17.5 7 19 7C20.5 7 22 8 22 10L22 12L19.5 12", stroke: "#F0EEF8", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }),
+            /* @__PURE__ */ jsx8("path", { d: "M16 10C16 12 16 14 16 15C16 16.5 17.5 17 19 17C20.5 17 22 16.5 22 15L22 12", stroke: "#F0EEF8", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })
+          ] }),
+          "Adarsh"
+        ] }),
+        /* @__PURE__ */ jsx8("div", { style: { display: "flex", gap: "var(--sp-6)", listStyle: "none" }, children: ["Work", "Services", "Blog", "Contact"].map((link, i) => /* @__PURE__ */ jsx8("span", { style: { fontSize: "var(--brand-text-sm)", color: i === 0 ? "var(--accent-bright)" : "var(--text-secondary)", cursor: "pointer" }, children: link }, link)) }),
+        /* @__PURE__ */ jsxs5("div", { style: { display: "flex", alignItems: "center", gap: "var(--sp-3)" }, children: [
+          /* @__PURE__ */ jsx8(ThemeToggle, {}),
+          /* @__PURE__ */ jsx8("button", { style: { ...btnStyle("primary"), ...btnSize("sm") }, children: "Hire me" })
+        ] })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { children: [
+      /* @__PURE__ */ jsx8(SectionLabel, { children: "Tooltip" }),
+      /* @__PURE__ */ jsxs5(
+        "div",
+        {
+          style: { position: "relative", display: "inline-block" },
+          onMouseEnter: () => setTooltipVisible(true),
+          onMouseLeave: () => setTooltipVisible(false),
+          children: [
+            /* @__PURE__ */ jsx8("button", { style: btnStyle("secondary"), children: "Hover me" }),
+            tooltipVisible && /* @__PURE__ */ jsx8("div", { style: { position: "absolute", bottom: "calc(100% + 8px)", left: "50%", transform: "translateX(-50%)", background: "var(--bg-overlay)", border: "1px solid var(--border-soft)", borderRadius: "var(--brand-radius-md)", padding: "var(--sp-2) var(--sp-3)", fontSize: 11, color: "var(--text-secondary)", whiteSpace: "nowrap", boxShadow: "var(--brand-shadow-md)", zIndex: 10, pointerEvents: "none" }, children: "Triggers on hover \xB7 120ms delay" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { children: [
+      /* @__PURE__ */ jsx8(SectionLabel, { children: "Tags" }),
+      /* @__PURE__ */ jsx8("div", { style: { display: "flex", flexWrap: "wrap", gap: "var(--sp-2)" }, children: ["typescript", "react", "node.js", "postgres", "redis", "docker"].map((tag) => /* @__PURE__ */ jsx8("span", { style: { ...mono, fontSize: 11, color: "var(--text-muted)", background: "var(--bg-overlay)", border: "1px solid var(--border-subtle)", padding: "2px 8px", borderRadius: "var(--brand-radius-sm)", display: "inline-block" }, children: tag }, tag)) })
+    ] })
+  ] });
+}
+function btnStyle(variant) {
+  const base = {
+    fontFamily: "var(--brand-font-body)",
+    fontSize: "var(--brand-text-sm)",
+    fontWeight: 500,
+    padding: "var(--sp-3) var(--sp-5)",
+    borderRadius: "var(--brand-radius-md)",
+    border: "none",
+    cursor: "pointer",
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "var(--sp-2)",
+    letterSpacing: "0.01em",
+    lineHeight: 1
+  };
+  if (variant === "primary") return { ...base, background: "var(--accent)", color: "#fff" };
+  if (variant === "secondary") return { ...base, background: "var(--bg-raised)", color: "var(--text-primary)", border: "1px solid var(--border-soft)" };
+  if (variant === "ghost") return { ...base, background: "transparent", color: "var(--text-secondary)", border: "1px solid transparent" };
+  return { ...base, background: "var(--error-bg)", color: "var(--error)", border: "1px solid var(--error-border)" };
+}
+function btnSize(size) {
+  if (size === "sm") return { fontSize: 11, padding: "var(--sp-2) var(--sp-3)", borderRadius: "var(--brand-radius-sm)" };
+  return { fontSize: "var(--brand-text-base)", padding: "var(--sp-4) var(--sp-8)", borderRadius: "var(--brand-radius-lg)" };
+}
+var labelStyle = {
+  fontSize: "var(--brand-text-xs)",
+  fontWeight: 500,
+  color: "var(--text-secondary)",
+  letterSpacing: "0.03em"
+};
+function inputStyle(state) {
+  return {
+    fontFamily: "var(--brand-font-body)",
+    fontSize: "var(--brand-text-sm)",
+    color: "var(--text-primary)",
+    background: "var(--bg-raised)",
+    border: `1px solid ${state === "error" ? "var(--error)" : "var(--border-soft)"}`,
+    borderRadius: "var(--brand-radius-md)",
+    padding: "var(--sp-3) var(--sp-4)",
+    outline: "none",
+    width: "100%",
+    boxSizing: "border-box"
+  };
+}
+function ThemePage({ version = package_default.version }) {
+  const colorValues = useTokenMap(COLOR_TOKENS);
+  const mono = { fontFamily: "var(--brand-font-mono)" };
+  const dot = { width: 5, height: 5, borderRadius: "50%", background: "var(--accent)", display: "inline-block" };
+  return /* @__PURE__ */ jsx8("div", { style: {
+    background: "var(--bg-base)",
+    color: "var(--text-primary)",
+    fontFamily: "var(--brand-font-body)",
+    fontSize: "var(--brand-text-base)",
+    lineHeight: 1.6,
+    WebkitFontSmoothing: "antialiased",
+    minHeight: "100vh"
+  }, children: /* @__PURE__ */ jsxs5("div", { style: { maxWidth: "var(--brand-layout-container-max)", margin: "0 auto", padding: "var(--sp-16) var(--sp-8)" }, children: [
+    /* @__PURE__ */ jsxs5("div", { style: { paddingTop: "var(--sp-20)", paddingBottom: "var(--sp-16)", position: "relative", overflow: "hidden" }, children: [
+      /* @__PURE__ */ jsx8("div", { style: {
+        position: "absolute",
+        top: -80,
+        left: -120,
+        width: 600,
+        height: 400,
+        background: "radial-gradient(ellipse, var(--accent-glow) 0%, transparent 70%)",
+        pointerEvents: "none"
+      } }),
+      /* @__PURE__ */ jsxs5("div", { style: { ...mono, fontSize: "var(--brand-text-xs)", letterSpacing: "0.16em", textTransform: "uppercase", color: "var(--text-muted)", marginBottom: "var(--sp-6)", display: "flex", alignItems: "center", gap: "var(--sp-3)", position: "relative" }, children: [
+        /* @__PURE__ */ jsx8("span", { style: { width: 24, height: 1, background: "var(--border-mid)", display: "inline-block" } }),
+        "@adarsh_goswami/brand",
+        version && /* @__PURE__ */ jsxs5("span", { style: { background: "var(--accent-subtle)", color: "var(--accent)", border: "1px solid var(--accent-border)", borderRadius: "var(--brand-radius-sm)", padding: "2px 8px", fontSize: 10 }, children: [
+          "v",
+          version
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs5("div", { style: { fontFamily: "var(--brand-font-display)", fontSize: "clamp(3rem, 8vw, 5rem)", fontWeight: 800, lineHeight: 0.95, letterSpacing: "-0.03em", marginBottom: "var(--sp-6)", position: "relative" }, children: [
+        /* @__PURE__ */ jsx8("span", { style: { color: "var(--text-primary)" }, children: "Design" }),
+        /* @__PURE__ */ jsx8("br", {}),
+        /* @__PURE__ */ jsx8("span", { style: { color: "var(--accent)" }, children: "System" })
+      ] }),
+      /* @__PURE__ */ jsx8("div", { style: { fontSize: "var(--brand-text-md)", color: "var(--text-secondary)", fontWeight: 300, maxWidth: 420, lineHeight: 1.7, position: "relative" }, children: "The single source of truth for all brand decisions \u2014 colors, typography, spacing, and motion." }),
+      /* @__PURE__ */ jsx8("div", { style: { ...mono, marginTop: "var(--sp-10)", display: "flex", flexWrap: "wrap", alignItems: "center", gap: "var(--sp-6)", fontSize: "var(--brand-text-xs)", color: "var(--text-muted)", letterSpacing: "0.06em", position: "relative" }, children: ["Radix UI", "Tailwind CSS", "TypeScript"].map((tech) => /* @__PURE__ */ jsxs5("span", { style: { display: "flex", alignItems: "center", gap: "var(--sp-2)" }, children: [
+        /* @__PURE__ */ jsx8("span", { style: dot }),
+        tech
+      ] }, tech)) })
+    ] }),
+    /* @__PURE__ */ jsx8(Section, { label: "01 \u2014 Identity", title: "Logo & Mark", description: "The AG monogram is built from geometric forms \u2014 two interlocked letterforms on a contained grid.", first: true, children: /* @__PURE__ */ jsxs5("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))", gap: "var(--sp-4)" }, children: [
+      /* @__PURE__ */ jsxs5("div", { style: logoCardStyle("dark"), children: [
+        /* @__PURE__ */ jsx8(AgMark, { size: 64, variant: "dark" }),
+        /* @__PURE__ */ jsx8("span", { style: logoLabelStyle("dark"), children: "Primary \u2014 Dark" })
+      ] }),
+      /* @__PURE__ */ jsxs5("div", { style: logoCardStyle("glow"), children: [
+        /* @__PURE__ */ jsx8(AgMark, { size: 64, variant: "glow" }),
+        /* @__PURE__ */ jsx8("span", { style: logoLabelStyle("dark"), children: "Glow Variant" })
+      ] }),
+      /* @__PURE__ */ jsxs5("div", { style: logoCardStyle("light"), children: [
+        /* @__PURE__ */ jsx8(AgMark, { size: 64, variant: "light" }),
+        /* @__PURE__ */ jsx8("span", { style: logoLabelStyle("light"), children: "Light Variant" })
+      ] }),
+      /* @__PURE__ */ jsxs5("div", { style: { ...logoCardStyle("dark"), justifyContent: "center" }, children: [
+        /* @__PURE__ */ jsx8(AgWordmark, {}),
+        /* @__PURE__ */ jsx8("span", { style: logoLabelStyle("dark"), children: "Wordmark" })
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsxs5(Section, { label: "02 \u2014 Color", title: "Color System", description: "Dark-first palette anchored by a violet-indigo accent. All values resolve from theme.css.", children: [
+      /* @__PURE__ */ jsx8(SectionLabel, { children: "Accent" }),
+      /* @__PURE__ */ jsxs5(ColorGrid, { children: [
+        /* @__PURE__ */ jsx8(ColorSwatch, { token: "--accent-bright", label: "Bright", values: colorValues }),
+        /* @__PURE__ */ jsx8(ColorSwatch, { token: "--accent", label: "Base", values: colorValues }),
+        /* @__PURE__ */ jsx8(ColorSwatch, { token: "--accent-dim", label: "Dim", values: colorValues }),
+        /* @__PURE__ */ jsx8(ColorSwatch, { token: "--accent-glow", label: "Glow", values: colorValues })
+      ] }),
+      /* @__PURE__ */ jsx8(SectionLabel, { children: "Backgrounds" }),
+      /* @__PURE__ */ jsxs5(ColorGrid, { children: [
+        /* @__PURE__ */ jsx8(ColorSwatch, { token: "--bg-base", label: "Base", values: colorValues }),
+        /* @__PURE__ */ jsx8(ColorSwatch, { token: "--bg-surface", label: "Surface", values: colorValues }),
+        /* @__PURE__ */ jsx8(ColorSwatch, { token: "--bg-raised", label: "Raised", values: colorValues }),
+        /* @__PURE__ */ jsx8(ColorSwatch, { token: "--bg-overlay", label: "Overlay", values: colorValues })
+      ] }),
+      /* @__PURE__ */ jsx8(SectionLabel, { children: "Borders" }),
+      /* @__PURE__ */ jsxs5(ColorGrid, { children: [
+        /* @__PURE__ */ jsx8(ColorSwatch, { token: "--border-subtle", label: "Subtle", values: colorValues }),
+        /* @__PURE__ */ jsx8(ColorSwatch, { token: "--border-soft", label: "Soft", values: colorValues }),
+        /* @__PURE__ */ jsx8(ColorSwatch, { token: "--border-mid", label: "Mid", values: colorValues })
+      ] }),
+      /* @__PURE__ */ jsx8(SectionLabel, { children: "Text" }),
+      /* @__PURE__ */ jsxs5(ColorGrid, { children: [
+        /* @__PURE__ */ jsx8(ColorSwatch, { token: "--text-primary", label: "Primary", values: colorValues }),
+        /* @__PURE__ */ jsx8(ColorSwatch, { token: "--text-secondary", label: "Secondary", values: colorValues }),
+        /* @__PURE__ */ jsx8(ColorSwatch, { token: "--text-muted", label: "Muted", values: colorValues }),
+        /* @__PURE__ */ jsx8(ColorSwatch, { token: "--text-disabled", label: "Disabled", values: colorValues })
+      ] }),
+      /* @__PURE__ */ jsx8(SectionLabel, { children: "Semantic" }),
+      /* @__PURE__ */ jsxs5(ColorGrid, { children: [
+        /* @__PURE__ */ jsx8(ColorSwatch, { token: "--success", label: "Success", values: colorValues }),
+        /* @__PURE__ */ jsx8(ColorSwatch, { token: "--warning", label: "Warning", values: colorValues }),
+        /* @__PURE__ */ jsx8(ColorSwatch, { token: "--error", label: "Error", values: colorValues }),
+        /* @__PURE__ */ jsx8(ColorSwatch, { token: "--info", label: "Info", values: colorValues })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs5(Section, { label: "03 \u2014 Typography", title: "Type System", description: "Syne for display and headings. DM Sans for body. DM Mono for code, labels, and data.", children: [
+      /* @__PURE__ */ jsx8(SectionLabel, { children: "Families" }),
+      /* @__PURE__ */ jsx8("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-3)", marginBottom: "var(--sp-8)" }, children: FONT_FAMILIES.map(({ token, cssFamily, weight, sample }) => /* @__PURE__ */ jsxs5("div", { style: { padding: "var(--sp-4) var(--sp-5)", background: "var(--bg-surface)", border: "1px solid var(--border-subtle)", borderRadius: "var(--brand-radius-md)", display: "flex", justifyContent: "space-between", alignItems: "center", gap: "var(--sp-4)", flexWrap: "wrap" }, children: [
+        /* @__PURE__ */ jsx8("span", { style: { fontFamily: cssFamily, fontWeight: weight, fontSize: "var(--brand-text-lg)", color: "var(--text-primary)" }, children: sample }),
+        /* @__PURE__ */ jsx8("span", { style: { ...mono, fontSize: 10, color: "var(--text-muted)", flexShrink: 0 }, children: token })
+      ] }, token)) }),
+      /* @__PURE__ */ jsx8(SectionLabel, { children: "Scale" }),
+      /* @__PURE__ */ jsx8("div", { children: TYPE_SCALE.map(({ token, label, role, weight, family }) => /* @__PURE__ */ jsxs5("div", { style: { display: "flex", alignItems: "baseline", gap: "var(--sp-6)", padding: "var(--sp-5) 0", borderBottom: "1px solid var(--border-subtle)" }, children: [
+        /* @__PURE__ */ jsxs5("div", { style: { minWidth: 130, flexShrink: 0 }, children: [
+          /* @__PURE__ */ jsx8("div", { style: { ...mono, fontSize: 10, color: "var(--accent)", letterSpacing: "0.08em" }, children: token }),
+          /* @__PURE__ */ jsx8("div", { style: { ...mono, fontSize: 10, color: "var(--text-muted)", marginTop: 2 }, children: label }),
+          /* @__PURE__ */ jsx8("div", { style: { ...mono, fontSize: 10, color: "var(--text-disabled)", marginTop: 1 }, children: role })
+        ] }),
+        /* @__PURE__ */ jsx8("div", { style: { fontFamily: fontFamilyVar(family), fontSize: `var(${token})`, fontWeight: weight, color: "var(--text-primary)", lineHeight: 1.2 }, children: TYPE_SPECIMENS[token] })
+      ] }, token)) })
+    ] }),
+    /* @__PURE__ */ jsx8(Section, { label: "04 \u2014 Spacing", title: "Spacing Scale", description: "8px base grid. All values are multiples of 4px for sub-grid alignment.", children: /* @__PURE__ */ jsx8("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-3)" }, children: SPACING.map(({ token, rem, px }) => /* @__PURE__ */ jsxs5("div", { style: { display: "flex", alignItems: "center", gap: "var(--sp-4)" }, children: [
+      /* @__PURE__ */ jsx8("div", { style: { ...mono, fontSize: 11, color: "var(--text-muted)", minWidth: 70 }, children: token }),
+      /* @__PURE__ */ jsx8("div", { style: { flex: 1, height: 24, display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx8("div", { style: { height: 8, width: `var(${token})`, background: "var(--accent)", borderRadius: 2, opacity: 0.7 } }) }),
+      /* @__PURE__ */ jsx8("div", { style: { ...mono, fontSize: 11, color: "var(--text-secondary)", minWidth: 50 }, children: rem }),
+      /* @__PURE__ */ jsx8("div", { style: { ...mono, fontSize: 11, color: "var(--text-muted)", minWidth: 40 }, children: px })
+    ] }, token)) }) }),
+    /* @__PURE__ */ jsx8(Section, { label: "05 \u2014 Shape", title: "Border Radius", description: "Consistent corner radii for a cohesive, modern feel across all components.", children: /* @__PURE__ */ jsx8("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(110px, 1fr))", gap: "var(--sp-4)" }, children: RADII.map(({ token, label, value }) => /* @__PURE__ */ jsxs5("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: "var(--sp-3)" }, children: [
+      /* @__PURE__ */ jsx8("div", { style: { width: 64, height: 64, background: "var(--bg-raised)", border: "1px solid var(--border-soft)", borderRadius: `var(${token})` } }),
+      /* @__PURE__ */ jsxs5("div", { style: { textAlign: "center" }, children: [
+        /* @__PURE__ */ jsx8("div", { style: { ...mono, fontSize: 10, color: "var(--accent)" }, children: label }),
+        /* @__PURE__ */ jsx8("div", { style: { ...mono, fontSize: 10, color: "var(--text-muted)", marginTop: 2 }, children: value })
+      ] })
+    ] }, token)) }) }),
+    /* @__PURE__ */ jsx8(Section, { label: "06 \u2014 Elevation", title: "Shadows", description: "Four shadow levels including an accent glow.", children: /* @__PURE__ */ jsx8("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: "var(--sp-6)" }, children: SHADOWS.map(({ token, label, desc }) => /* @__PURE__ */ jsxs5("div", { style: { padding: "var(--sp-8)", background: "var(--bg-surface)", borderRadius: "var(--brand-radius-lg)", boxShadow: `var(${token})` }, children: [
+      /* @__PURE__ */ jsx8("div", { style: { ...mono, fontSize: 10, color: "var(--accent)", marginBottom: "var(--sp-1)" }, children: token }),
+      /* @__PURE__ */ jsx8("div", { style: { ...mono, fontSize: 10, color: "var(--text-secondary)", marginBottom: "var(--sp-1)" }, children: label }),
+      /* @__PURE__ */ jsx8("div", { style: { fontSize: "var(--brand-text-xs)", color: "var(--text-muted)" }, children: desc })
+    ] }, token)) }) }),
+    /* @__PURE__ */ jsx8(Section, { label: "07 \u2014 Components", title: "UI Components", description: "Core interactive elements built from the token system above.", children: /* @__PURE__ */ jsx8(ComponentsSection, {}) }),
+    /* @__PURE__ */ jsxs5(Section, { label: "08 \u2014 Motion", title: "Animation Tokens", description: "Subtle, purposeful motion. Never decorative \u2014 always communicates state or hierarchy.", children: [
+      /* @__PURE__ */ jsx8(SectionLabel, { children: "Easing" }),
+      /* @__PURE__ */ jsx8("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: "var(--sp-4)", marginBottom: "var(--sp-6)" }, children: EASINGS.map(({ token, label, value, use }) => /* @__PURE__ */ jsxs5("div", { style: { padding: "var(--sp-5)", background: "var(--bg-surface)", border: "1px solid var(--border-subtle)", borderRadius: "var(--brand-radius-md)" }, children: [
+        /* @__PURE__ */ jsx8("div", { style: { ...mono, fontSize: 10, color: "var(--accent)", marginBottom: "var(--sp-2)" }, children: token }),
+        /* @__PURE__ */ jsx8("div", { style: { fontFamily: "var(--brand-font-display)", fontSize: "var(--brand-text-md)", fontWeight: 700, color: "var(--text-primary)" }, children: label }),
+        /* @__PURE__ */ jsx8("div", { style: { ...mono, fontSize: 10, color: "var(--text-muted)", marginTop: "var(--sp-2)" }, children: value }),
+        /* @__PURE__ */ jsx8("div", { style: { fontSize: "var(--brand-text-xs)", color: "var(--text-secondary)", marginTop: "var(--sp-2)" }, children: use })
+      ] }, token)) }),
+      /* @__PURE__ */ jsx8(SectionLabel, { children: "Duration" }),
+      /* @__PURE__ */ jsx8("div", { style: { display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))", gap: "var(--sp-4)" }, children: DURATIONS.map(({ token, label, value, use }) => /* @__PURE__ */ jsxs5("div", { style: { padding: "var(--sp-5)", background: "var(--bg-surface)", border: "1px solid var(--border-subtle)", borderRadius: "var(--brand-radius-md)" }, children: [
+        /* @__PURE__ */ jsx8("div", { style: { ...mono, fontSize: 10, color: "var(--accent)", marginBottom: "var(--sp-2)" }, children: token }),
+        /* @__PURE__ */ jsx8("div", { style: { fontFamily: "var(--brand-font-display)", fontSize: "var(--brand-text-xl)", fontWeight: 700, color: "var(--text-primary)" }, children: value }),
+        /* @__PURE__ */ jsx8("div", { style: { ...mono, fontSize: 10, color: "var(--text-muted)", marginTop: "var(--sp-2)" }, children: label }),
+        /* @__PURE__ */ jsx8("div", { style: { fontSize: "var(--brand-text-xs)", color: "var(--text-secondary)", marginTop: "var(--sp-2)" }, children: use })
+      ] }, token)) })
+    ] }),
+    /* @__PURE__ */ jsx8(Footer, {})
+  ] }) });
+}
+function logoCardStyle(bg) {
+  const backgrounds = {
+    dark: "var(--bg-overlay)",
+    glow: "#0D0C1A",
+    light: "#F0EEF8"
+  };
+  const borders = {
+    dark: "var(--border-subtle)",
+    glow: "rgba(124,110,250,0.2)",
+    light: "rgba(0,0,0,0.08)"
+  };
+  return {
+    background: backgrounds[bg],
+    border: `1px solid ${borders[bg]}`,
+    borderRadius: "var(--brand-radius-lg)",
+    padding: "var(--sp-8)",
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "center",
+    gap: "var(--sp-4)"
+  };
+}
+function logoLabelStyle(bg) {
+  return {
+    fontFamily: "var(--brand-font-mono)",
+    fontSize: "var(--brand-text-xs)",
+    color: bg === "light" ? "#5C5A6E" : "var(--text-muted)",
+    letterSpacing: "0.08em"
+  };
+}
+
+// src/assets/logo.svg
+var logo_default = 'data:image/svg+xml,<svg viewBox="0 0 160 36" fill="none" xmlns="http://www.w3.org/2000/svg">%0A  <!-- Icon mark -->%0A  <rect width="36" height="36" rx="8" fill="%2318181C"/>%0A  <!-- A -->%0A  <path d="M6 26 L13 10 L20 26" stroke="%237C6EFA" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>%0A  <line x1="9" y1="20.5" x2="17" y2="20.5" stroke="%237C6EFA" stroke-width="2" stroke-linecap="round"/>%0A  <!-- G -->%0A  <path d="M23 16.5 C23 13.5 25.5 12 28 12 C30.5 12 32 13.5 32 16.5 L32 18.5 L28.5 18.5 L28.5 16.5" stroke="%23F0EEF8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>%0A  <path d="M23 16.5 C23 19 23 21.5 23 23 C23 25 25.5 26 28 26 C30.5 26 32 25 32 23 L32 18.5" stroke="%23F0EEF8" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>%0A  <!-- Wordmark text -->%0A  <text x="48" y="26" font-family="Syne, sans-serif" font-weight="700" font-size="18" letter-spacing="-0.36">%0A    <tspan fill="%23F0EEF8">Adarsh</tspan><tspan fill="%237C6EFA">.</tspan>%0A  </text>%0A</svg>%0A';
+
+// src/assets/logo-mark.svg
+var logo_mark_default = 'data:image/svg+xml,<svg viewBox="0 0 64 64" fill="none" xmlns="http://www.w3.org/2000/svg">%0A  <rect width="64" height="64" rx="14" fill="%23111113"/>%0A  <!-- A -->%0A  <path d="M14 46 L24 20 L34 46" stroke="%237C6EFA" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>%0A  <line x1="18" y1="37" x2="30" y2="37" stroke="%237C6EFA" stroke-width="2.5" stroke-linecap="round"/>%0A  <!-- G -->%0A  <path d="M38 28 C38 23 42 20 47 20 C52 20 55 23 55 28 L55 32 L49 32 L49 29" stroke="%23F0EEF8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>%0A  <path d="M38 28 C38 33 38 38 38 40 C38 43.5 42 46 47 46 C52 46 55 43.5 55 40 L55 32" stroke="%23F0EEF8" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>%0A</svg>%0A';
+
+// src/assets/favicon.svg
+var favicon_default = 'data:image/svg+xml,<svg viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">%0A  <rect width="32" height="32" rx="7" fill="%23111113"/>%0A  <!-- A \u2014 scaled 0.5x from 64x64 mark -->%0A  <path d="M7 23 L12 10 L17 23" stroke="%237C6EFA" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>%0A  <line x1="9" y1="18.5" x2="15" y2="18.5" stroke="%237C6EFA" stroke-width="1.5" stroke-linecap="round"/>%0A  <!-- G \u2014 scaled 0.5x from 64x64 mark -->%0A  <path d="M19 14 C19 11.5 21 10 23.5 10 C26 10 27.5 11.5 27.5 14 L27.5 16 L24.5 16 L24.5 14.5" stroke="%23F0EEF8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>%0A  <path d="M19 14 C19 16.5 19 19 19 20 C19 21.75 21 23 23.5 23 C26 23 27.5 21.75 27.5 20 L27.5 16" stroke="%23F0EEF8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>%0A</svg>%0A';
+export {
+  AgMark,
+  AgWordmark,
+  DocsLayout,
+  Footer,
+  ThemePage,
+  ThemeProvider,
+  ThemeToggle,
+  favicon_default as favicon,
+  logo_default as logo,
+  logo_mark_default as logoMark,
+  useTheme
+};