semajsx 0.1.1 → 0.1.2

package/dist/ssg/plugins/docs-theme.mjs

@@ -0,0 +1,2042 @@
+import { d as defineCollection, v as __exportAll } from "../../src-DR-EWgVP.mjs";
+import { a as jsxs, i as jsx, v as Fragment } from "../../src-DW3tIczg.mjs";
+import "../../src-BqX3sryB.mjs";
+import { G as rules, K as classes, M as createTheme, N as defineTokens, U as isStyleToken, W as rule } from "../../src-Ds9vl42d.mjs";
+import "../../jsx-runtime-D9ZNjMJ2.mjs";
+import "../../src-DUpFNNM_.mjs";
+import "../../jsx-runtime-BjCGsceN.mjs";
+import "../../resource-DSlXDZZi.mjs";
+import "../../src-DuSN6go_.mjs";
+import "../../document-BOJDaiBc.mjs";
+import { n as Icon, t as lucide } from "../../lucide-CVtHepGM.mjs";
+import { z } from "zod";
+
+//#region ../ssg/src/plugins/docs-theme/styles.ts
+/**
+* Apple-inspired theme CSS for the docs-theme plugin.
+*
+* All class names are prefixed with `dt-` to avoid collisions.
+* Component styles (Card, Callout, Badge) come from @semajsx/ui via componentCSS.
+* This file contains layout, navigation, hero, typography, animations, and responsive styles.
+*/
+const THEME_CSS = `
+/* ==============================================
+ * Keyframes
+ * ============================================== */
+
+@keyframes dt-fade-in-up {
+  from { opacity: 0; transform: translateY(20px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+@keyframes dt-fade-in-scale {
+  from { opacity: 0; transform: scale(0.96) translateY(8px); }
+  to   { opacity: 1; transform: scale(1) translateY(0); }
+}
+
+/* ==============================================
+ * Global Reset & Base
+ * ============================================== */
+
+* { margin: 0; padding: 0; box-sizing: border-box; }
+
+html { scroll-behavior: smooth; }
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
+    Inter, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  line-height: 1.6;
+  color: #1d1d1f;
+  background: #fbfbfd;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+::selection {
+  background: rgba(0, 113, 227, 0.2);
+  color: #1d1d1f;
+}
+
+/* ==============================================
+ * Frosted Glass Navigation
+ * ============================================== */
+
+.dt-glass-nav {
+  position: sticky;
+  top: 0;
+  z-index: 50;
+  background: rgba(251, 251, 253, 0.8);
+  backdrop-filter: saturate(180%) blur(20px);
+  -webkit-backdrop-filter: saturate(180%) blur(20px);
+  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
+}
+
+.dt-nav-inner {
+  max-width: 1200px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 14px 2rem;
+  height: 52px;
+}
+
+.dt-nav-logo {
+  color: #1d1d1f;
+  font-size: 1.25rem;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+  text-decoration: none;
+}
+
+.dt-nav-links {
+  display: flex;
+  list-style: none;
+  margin: 0;
+  gap: 2rem;
+}
+
+.dt-nav-link {
+  color: #1d1d1f;
+  text-decoration: none;
+  font-size: 0.875rem;
+  font-weight: 400;
+  letter-spacing: -0.005em;
+  transition: color 0.2s ease;
+}
+
+.dt-nav-link:hover {
+  color: #0071e3;
+}
+
+/* ==============================================
+ * Layout
+ * ============================================== */
+
+.dt-root {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background: #fbfbfd;
+}
+
+.dt-main {
+  flex: 1 1 0%;
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem 2rem 4rem;
+}
+
+/* ==============================================
+ * Footer
+ * ============================================== */
+
+.dt-footer {
+  border-top: 0.5px solid rgba(0, 0, 0, 0.08);
+  background: #f5f5f7;
+}
+
+.dt-footer-inner {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 2rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.dt-footer-links {
+  display: flex;
+  gap: 2rem;
+  align-items: center;
+}
+
+.dt-footer-link {
+  color: #6e6e73;
+  text-decoration: none;
+  font-size: 0.8125rem;
+  transition: color 0.2s;
+}
+
+.dt-footer-link:hover {
+  color: #0071e3;
+}
+
+.dt-footer-copy {
+  color: #86868b;
+  font-size: 0.8125rem;
+  margin: 0;
+}
+
+/* ==============================================
+ * Hero Section
+ * ============================================== */
+
+.dt-hero-bg {
+  background: linear-gradient(180deg, #fbfbfd 0%, #f5f5f7 40%, #fbfbfd 100%);
+  position: relative;
+}
+
+.dt-hero-bg::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 100%;
+  height: 100%;
+  background: radial-gradient(
+    ellipse 60% 50% at 50% 40%,
+    rgba(0, 113, 227, 0.06) 0%,
+    rgba(251, 251, 253, 0) 70%
+  );
+  pointer-events: none;
+}
+
+.dt-hero-title {
+  font-size: clamp(3rem, 8vw, 5rem);
+  font-weight: 700;
+  line-height: 1.05;
+  letter-spacing: -0.03em;
+  background: linear-gradient(135deg, #1d1d1f 30%, #6e6e73 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin-bottom: 1.25rem;
+}
+
+.dt-hero-subtitle {
+  font-size: clamp(1.25rem, 2.5vw, 1.5rem);
+  font-weight: 400;
+  line-height: 1.5;
+  color: #6e6e73;
+  max-width: 40rem;
+  margin: 0 auto 2.5rem;
+  letter-spacing: -0.005em;
+}
+
+.dt-hero-cta {
+  display: flex;
+  gap: 1rem;
+  justify-content: center;
+  margin-top: 2rem;
+}
+
+/* ==============================================
+ * Section Typography
+ * ============================================== */
+
+.dt-section-title {
+  font-size: clamp(2rem, 4vw, 2.75rem);
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  line-height: 1.1;
+  color: #1d1d1f;
+  margin-bottom: 0.75rem;
+}
+
+.dt-section-subtitle {
+  font-size: clamp(1rem, 2vw, 1.25rem);
+  font-weight: 400;
+  line-height: 1.5;
+  color: #6e6e73;
+  max-width: 36rem;
+  margin: 0 auto 3rem;
+}
+
+/* ==============================================
+ * Buttons
+ * ============================================== */
+
+.dt-primary-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.875rem 1.75rem;
+  background: #0071e3;
+  color: white;
+  border-radius: 980px;
+  font-size: 1.0625rem;
+  font-weight: 500;
+  text-decoration: none;
+  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
+  border: none;
+  cursor: pointer;
+  letter-spacing: -0.005em;
+}
+
+.dt-primary-btn:hover {
+  background: #0077ed;
+  transform: scale(1.02);
+  box-shadow: 0 4px 16px rgba(0, 113, 227, 0.3);
+}
+
+.dt-secondary-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.875rem 1.75rem;
+  background: transparent;
+  color: #0071e3;
+  border: 1.5px solid #0071e3;
+  border-radius: 980px;
+  font-size: 1.0625rem;
+  font-weight: 500;
+  text-decoration: none;
+  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
+  cursor: pointer;
+  letter-spacing: -0.005em;
+}
+
+.dt-secondary-btn:hover {
+  background: #0071e3;
+  color: white;
+  transform: scale(1.02);
+}
+
+/* ==============================================
+ * Animations
+ * ============================================== */
+
+.dt-anim-slide-up {
+  animation: dt-fade-in-up 0.8s cubic-bezier(0.25, 0.1, 0.25, 1) both;
+}
+
+.dt-anim-scale-in {
+  animation: dt-fade-in-scale 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) both;
+}
+
+.dt-fade-in {
+  animation: dt-fade-in-up 0.6s cubic-bezier(0.25, 0.1, 0.25, 1) both;
+}
+
+.dt-stagger-1 { animation-delay: 0.1s; }
+.dt-stagger-2 { animation-delay: 0.2s; }
+.dt-stagger-3 { animation-delay: 0.35s; }
+.dt-stagger-4 { animation-delay: 0.5s; }
+.dt-stagger-5 { animation-delay: 0.65s; }
+
+/* ==============================================
+ * Page Layout
+ * ============================================== */
+
+.dt-page-container {
+  max-width: 720px;
+}
+
+.dt-page-title {
+  font-size: 2.25rem;
+  font-weight: 700;
+  color: #1d1d1f;
+  letter-spacing: -0.02em;
+  margin-bottom: 0.5rem;
+}
+
+.dt-page-desc {
+  font-size: 1.125rem;
+  color: #6e6e73;
+  line-height: 1.5;
+}
+
+.dt-category-heading {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: #86868b;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-bottom: 1rem;
+}
+
+.dt-card-title {
+  font-size: 1.0625rem;
+  font-weight: 600;
+  color: #1d1d1f;
+  letter-spacing: -0.01em;
+  margin-bottom: 0.25rem;
+}
+
+.dt-card-desc {
+  color: #6e6e73;
+  font-size: 0.875rem;
+  line-height: 1.5;
+  margin: 0;
+}
+
+.dt-content-desc {
+  font-size: 1.125rem;
+  color: #6e6e73;
+  line-height: 1.5;
+  padding-bottom: 1.5rem;
+  border-bottom: 0.5px solid rgba(0, 0, 0, 0.06);
+}
+
+/* ==============================================
+ * Content Typography
+ * ============================================== */
+
+.dt-content {
+  line-height: 1.75;
+  color: #1d1d1f;
+}
+
+.dt-content h1 {
+  font-size: 1.875rem;
+  font-weight: 700;
+  margin-top: 3rem;
+  margin-bottom: 0.75rem;
+  color: #1d1d1f;
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+}
+
+.dt-content h2 {
+  font-size: 1.5rem;
+  font-weight: 600;
+  margin-top: 2.5rem;
+  margin-bottom: 0.75rem;
+  color: #1d1d1f;
+  letter-spacing: -0.015em;
+  line-height: 1.25;
+  padding-top: 1.5rem;
+  border-top: 0.5px solid rgba(0, 0, 0, 0.06);
+}
+
+.dt-content h2:first-child,
+.dt-content hr + h2 {
+  border-top: none;
+  padding-top: 0;
+  margin-top: 0;
+}
+
+.dt-content h3 {
+  font-size: 1.25rem;
+  font-weight: 600;
+  margin-top: 2rem;
+  margin-bottom: 0.5rem;
+  color: #1d1d1f;
+  letter-spacing: -0.01em;
+  line-height: 1.3;
+}
+
+.dt-content p {
+  margin-bottom: 1.25rem;
+  font-size: 1rem;
+  color: #1d1d1f;
+}
+
+.dt-content ul,
+.dt-content ol {
+  margin-left: 1.5rem;
+  margin-bottom: 1.25rem;
+}
+
+.dt-content li {
+  margin-bottom: 0.375rem;
+  font-size: 1rem;
+  line-height: 1.65;
+}
+
+.dt-content code {
+  background: rgba(0, 0, 0, 0.04);
+  padding: 0.15rem 0.4rem;
+  border-radius: 5px;
+  font-family: "SF Mono", "Fira Code", "Fira Mono", Menlo, Consolas, "DejaVu Sans Mono", monospace;
+  font-size: 0.875em;
+  color: #1d1d1f;
+  border: 0.5px solid rgba(0, 0, 0, 0.06);
+}
+
+.dt-content pre {
+  background: #1d1d1f;
+  color: #e5e5ea;
+  padding: 1.25rem 1.5rem;
+  border-radius: 12px;
+  overflow-x: auto;
+  margin-bottom: 1.25rem;
+  font-size: 0.875rem;
+  line-height: 1.65;
+  border: 0.5px solid rgba(0, 0, 0, 0.1);
+}
+
+.dt-content pre code {
+  background: none;
+  color: inherit;
+  padding: 0;
+  border: none;
+  font-size: inherit;
+}
+
+.dt-content a {
+  color: #0071e3;
+  text-decoration: none;
+  transition: color 0.2s ease;
+}
+
+.dt-content a:hover {
+  text-decoration: underline;
+}
+
+.dt-content strong {
+  font-weight: 600;
+  color: #1d1d1f;
+}
+
+.dt-content blockquote {
+  border-left: 3px solid rgba(0, 0, 0, 0.08);
+  padding: 0.75rem 1.25rem;
+  margin: 1.5rem 0;
+  color: #6e6e73;
+  background: rgba(0, 0, 0, 0.02);
+  border-radius: 0 10px 10px 0;
+}
+
+.dt-content hr {
+  border: none;
+  border-top: 0.5px solid rgba(0, 0, 0, 0.06);
+  margin: 2.5rem 0;
+}
+
+/* Tables */
+
+.dt-content table {
+  width: 100%;
+  border-collapse: collapse;
+  margin: 1.5rem 0;
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  border-radius: 10px;
+  overflow: hidden;
+  border: 0.5px solid rgba(0, 0, 0, 0.08);
+}
+
+.dt-content thead {
+  background: rgba(0, 0, 0, 0.03);
+}
+
+.dt-content th {
+  font-weight: 600;
+  color: #1d1d1f;
+  text-align: left;
+  padding: 0.75rem 1rem;
+  font-size: 0.8125rem;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+  border-bottom: 0.5px solid rgba(0, 0, 0, 0.08);
+}
+
+.dt-content td {
+  padding: 0.75rem 1rem;
+  color: #1d1d1f;
+  border-bottom: 0.5px solid rgba(0, 0, 0, 0.04);
+}
+
+.dt-content tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.dt-content tbody tr:hover {
+  background: rgba(0, 0, 0, 0.02);
+}
+
+/* ==============================================
+ * Code Blocks
+ * ============================================== */
+
+.dt-code-block {
+  margin: 1.5rem 0;
+  border-radius: 12px;
+  overflow: hidden;
+  border: 0.5px solid rgba(0, 0, 0, 0.1);
+}
+
+.dt-code-header {
+  background: #161617;
+  padding: 0.5rem 1.25rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.dt-code-lang {
+  color: #86868b;
+  font-size: 0.6875rem;
+  text-transform: uppercase;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+}
+
+.dt-code-block pre {
+  margin: 0;
+  border-radius: 0;
+  border: none;
+}
+
+.dt-code-header + pre {
+  border-radius: 0;
+}
+
+/* Shiki integration */
+
+.dt-content pre.shiki {
+  position: relative;
+  padding: 2.25rem 1.5rem 1.25rem;
+}
+
+.dt-content pre.shiki[data-language]::before {
+  content: attr(data-language);
+  position: absolute;
+  top: 0.625rem;
+  right: 1rem;
+  color: #636e7b;
+  font-size: 0.6875rem;
+  text-transform: uppercase;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  pointer-events: none;
+  user-select: none;
+}
+
+.dt-content pre.shiki code {
+  display: block;
+}
+
+.dt-content pre.shiki .line {
+  display: inline;
+}
+
+/* ==============================================
+ * 404 Page
+ * ============================================== */
+
+.dt-not-found-title {
+  font-size: clamp(4rem, 12vw, 8rem);
+  font-weight: 700;
+  line-height: 1;
+  letter-spacing: -0.04em;
+  background: linear-gradient(135deg, #1d1d1f 30%, #6e6e73 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin-bottom: 1.25rem;
+}
+
+/* ==============================================
+ * Responsive
+ * ============================================== */
+
+@media (max-width: 768px) {
+  .dt-nav-inner {
+    padding: 12px 1rem !important;
+    height: 48px !important;
+  }
+
+  .dt-nav-logo { font-size: 1.125rem !important; }
+  .dt-nav-links { gap: 1.25rem !important; }
+  .dt-nav-link { font-size: 0.8125rem; }
+
+  .dt-main {
+    padding: 1.25rem 1rem 2.5rem !important;
+  }
+
+  .dt-hero-section {
+    padding: 60px 16px 48px !important;
+  }
+
+  .dt-hero-cta {
+    flex-direction: column !important;
+    align-items: center !important;
+    gap: 0.75rem !important;
+  }
+
+  .dt-section-features {
+    padding: 48px 16px !important;
+  }
+
+  .dt-section-links {
+    padding: 0 16px 60px !important;
+  }
+
+  .dt-section-links-inner {
+    padding-top: 48px !important;
+  }
+
+  .dt-features-grid {
+    grid-template-columns: 1fr !important;
+    gap: 1rem !important;
+  }
+
+  .dt-links-grid {
+    grid-template-columns: 1fr !important;
+  }
+
+  .dt-page-title {
+    font-size: 1.75rem !important;
+  }
+
+  .dt-page-desc {
+    font-size: 1rem !important;
+  }
+
+  .dt-page-container {
+    max-width: 100%;
+  }
+
+  .dt-footer-inner {
+    flex-direction: column !important;
+    align-items: center !important;
+    text-align: center;
+    padding: 1.5rem 1rem !important;
+  }
+
+  .dt-footer-links {
+    justify-content: center !important;
+    gap: 1.5rem !important;
+  }
+
+  .dt-not-found-section {
+    padding: 60px 16px 48px !important;
+  }
+
+  .dt-not-found-cta {
+    flex-direction: column !important;
+    align-items: center !important;
+    gap: 0.75rem !important;
+  }
+
+  .dt-content { line-height: 1.7; }
+  .dt-content h1 { font-size: 1.5rem; margin-top: 2rem; }
+  .dt-content h2 { font-size: 1.25rem; margin-top: 2rem; padding-top: 1.25rem; }
+  .dt-content h3 { font-size: 1.125rem; margin-top: 1.5rem; }
+  .dt-content pre { padding: 1rem; font-size: 0.8125rem; border-radius: 10px; }
+  .dt-content ul, .dt-content ol { margin-left: 1.25rem; }
+
+  .dt-content table {
+    font-size: 0.8125rem;
+    display: block;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .dt-content th, .dt-content td { padding: 0.625rem 0.75rem; }
+
+  .dt-code-block { border-radius: 10px; }
+  .dt-code-header { padding: 0.375rem 1rem; }
+
+}
+`;
+
+//#endregion
+//#region ../ui/src/theme/tokens.ts
+/**
+* Default design tokens for @semajsx/ui
+*
+* These tokens define the visual language of the component library.
+* All components reference these tokens via CSS custom properties,
+* enabling runtime theme switching.
+*
+* @example
+* ```ts
+* import { tokens } from "@semajsx/ui/theme";
+*
+* // Use in custom styles
+* const myRule = rule`${c.box} {
+*   color: ${tokens.colors.text};
+*   padding: ${tokens.space.md};
+* }`;
+* ```
+*/
+const tokenDefinition = {
+	colors: {
+		primary: "#0071e3",
+		primaryHover: "#0077ed",
+		primaryActive: "#0068d6",
+		background: "#fbfbfd",
+		surface: "#f5f5f7",
+		border: "rgba(0, 0, 0, 0.08)",
+		text: "#1d1d1f",
+		textMuted: "#6e6e73",
+		textTertiary: "#86868b",
+		danger: "#ff453a",
+		dangerHover: "#ff6961",
+		success: "#34c759",
+		warning: "#ff9f0a",
+		info: "#007aff",
+		tip: "#af52de",
+		onPrimary: "#ffffff",
+		onDanger: "#ffffff"
+	},
+	space: {
+		xs: "0.25rem",
+		sm: "0.5rem",
+		md: "0.75rem",
+		lg: "1rem",
+		xl: "1.5rem",
+		xxl: "2rem"
+	},
+	radii: {
+		sm: "10px",
+		md: "12px",
+		lg: "16px",
+		xl: "20px",
+		pill: "980px"
+	},
+	fonts: {
+		base: "-apple-system, BlinkMacSystemFont, \"SF Pro Display\", \"SF Pro Text\", Inter, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif",
+		mono: "\"SF Mono\", \"Fira Code\", \"Fira Mono\", Menlo, Consolas, \"DejaVu Sans Mono\", monospace"
+	},
+	fontSizes: {
+		xs: "0.8125rem",
+		sm: "0.875rem",
+		md: "1rem",
+		lg: "1.0625rem"
+	},
+	fontWeights: {
+		normal: "400",
+		medium: "500",
+		semibold: "600",
+		bold: "700"
+	},
+	lineHeights: {
+		tight: "1.25",
+		normal: "1.6"
+	},
+	shadows: {
+		sm: "0 1px 3px rgba(0, 0, 0, 0.03)",
+		md: "0 1px 4px rgba(0, 0, 0, 0.04)",
+		lg: "0 8px 28px rgba(0, 0, 0, 0.08)",
+		primaryGlow: "0 4px 16px rgba(0, 113, 227, 0.3)"
+	},
+	transitions: {
+		fast: "0.2s ease",
+		normal: "0.3s cubic-bezier(0.25, 0.1, 0.25, 1)"
+	}
+};
+const tokens = defineTokens(tokenDefinition);
+
+//#endregion
+//#region ../ui/src/components/callout/callout.style.ts
+/**
+* Callout component styles
+*
+* Five semantic variants: info, warning, success, error, tip
+* Matching the docs site callout design.
+*/
+var callout_style_exports = /* @__PURE__ */ __exportAll({
+	content: () => content,
+	icon: () => icon$2,
+	root: () => root$4,
+	title: () => title
+});
+const c$4 = classes([
+	"root",
+	"title",
+	"icon",
+	"content"
+]);
+const root$4 = rule`${c$4.root} {
+  padding: 1.25rem 1.5rem;
+  margin: 1.5rem 0;
+  border-radius: 14px;
+  border: 0.5px solid rgba(0, 0, 0, 0.04);
+  font-family: ${tokens.fonts.base};
+}`;
+const title = rule`${c$4.title} {
+  font-weight: ${tokens.fontWeights.semibold};
+  font-size: 0.9375rem;
+  margin: 0 0 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: ${tokens.space.sm};
+  letter-spacing: -0.005em;
+}`;
+const icon$2 = rule`${c$4.icon} {
+  width: 18px;
+  height: 18px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}`;
+const content = rule`${c$4.content} {
+  color: ${tokens.colors.text};
+  font-size: 0.9375rem;
+  line-height: ${tokens.lineHeights.normal};
+}`;
+
+//#endregion
+//#region ../ui/src/components/callout/callout.tsx
+const SVG_ATTRS = {
+	xmlns: "http://www.w3.org/2000/svg",
+	width: "18",
+	height: "18",
+	viewBox: "0 0 24 24",
+	fill: "none",
+	stroke: "currentColor",
+	"stroke-width": "2",
+	"stroke-linecap": "round",
+	"stroke-linejoin": "round"
+};
+function InfoIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		...SVG_ATTRS,
+		children: [
+			/* @__PURE__ */ jsx("circle", {
+				cx: "12",
+				cy: "12",
+				r: "10"
+			}),
+			/* @__PURE__ */ jsx("path", { d: "M12 16v-4" }),
+			/* @__PURE__ */ jsx("path", { d: "M12 8h.01" })
+		]
+	});
+}
+function WarningIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		...SVG_ATTRS,
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" }),
+			/* @__PURE__ */ jsx("path", { d: "M12 9v4" }),
+			/* @__PURE__ */ jsx("path", { d: "M12 17h.01" })
+		]
+	});
+}
+function SuccessIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		...SVG_ATTRS,
+		children: [/* @__PURE__ */ jsx("path", { d: "M22 11.08V12a10 10 0 1 1-5.93-9.14" }), /* @__PURE__ */ jsx("path", { d: "m9 11 3 3L22 4" })]
+	});
+}
+function ErrorIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		...SVG_ATTRS,
+		children: [
+			/* @__PURE__ */ jsx("circle", {
+				cx: "12",
+				cy: "12",
+				r: "10"
+			}),
+			/* @__PURE__ */ jsx("path", { d: "m15 9-6 6" }),
+			/* @__PURE__ */ jsx("path", { d: "m9 9 6 6" })
+		]
+	});
+}
+function TipIcon() {
+	return /* @__PURE__ */ jsxs("svg", {
+		...SVG_ATTRS,
+		children: [
+			/* @__PURE__ */ jsx("path", { d: "M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5" }),
+			/* @__PURE__ */ jsx("path", { d: "M9 18h6" }),
+			/* @__PURE__ */ jsx("path", { d: "M10 22h4" })
+		]
+	});
+}
+const calloutConfig = {
+	info: {
+		bg: "rgba(0, 122, 255, 0.06)",
+		accent: "#007aff",
+		icon: InfoIcon
+	},
+	warning: {
+		bg: "rgba(255, 159, 10, 0.08)",
+		accent: "#ff9f0a",
+		icon: WarningIcon
+	},
+	success: {
+		bg: "rgba(52, 199, 89, 0.08)",
+		accent: "#34c759",
+		icon: SuccessIcon
+	},
+	error: {
+		bg: "rgba(255, 69, 58, 0.08)",
+		accent: "#ff453a",
+		icon: ErrorIcon
+	},
+	tip: {
+		bg: "rgba(175, 82, 222, 0.06)",
+		accent: "#af52de",
+		icon: TipIcon
+	}
+};
+function Callout(props) {
+	const config = calloutConfig[props.type ?? "info"];
+	const IconComponent = config.icon;
+	return /* @__PURE__ */ jsxs("div", {
+		class: [root$4, props.class],
+		style: `background: ${config.bg}`,
+		role: "note",
+		children: [props.title && /* @__PURE__ */ jsxs("div", {
+			class: title,
+			style: `color: ${config.accent}`,
+			children: [/* @__PURE__ */ jsx("span", {
+				class: icon$2,
+				children: /* @__PURE__ */ jsx(IconComponent, {})
+			}), props.title]
+		}), /* @__PURE__ */ jsx("div", {
+			class: content,
+			children: props.children
+		})]
+	});
+}
+
+//#endregion
+//#region ../ui/src/components/badge/badge.style.ts
+/**
+* Badge component styles
+*
+* Pill-shaped labels with semantic color variants.
+*/
+var badge_style_exports = /* @__PURE__ */ __exportAll({ root: () => root$3 });
+const c$3 = classes(["root"]);
+const root$3 = rule`${c$3.root} {
+  display: inline-flex;
+  align-items: center;
+  font-size: 0.6875rem;
+  font-weight: ${tokens.fontWeights.semibold};
+  font-family: ${tokens.fonts.base};
+  padding: 0.125rem 0.5rem;
+  border-radius: ${tokens.radii.pill};
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  white-space: nowrap;
+  line-height: 1.6;
+}`;
+
+//#endregion
+//#region ../ui/src/components/badge/badge.tsx
+const badgeColors = {
+	default: {
+		bg: "rgba(0, 0, 0, 0.06)",
+		fg: "#1d1d1f"
+	},
+	success: {
+		bg: "rgba(52, 199, 89, 0.12)",
+		fg: "#248a3d"
+	},
+	warning: {
+		bg: "rgba(255, 159, 10, 0.12)",
+		fg: "#b25000"
+	},
+	danger: {
+		bg: "rgba(255, 69, 58, 0.12)",
+		fg: "#d70015"
+	},
+	info: {
+		bg: "rgba(0, 122, 255, 0.1)",
+		fg: "#0055b3"
+	},
+	tip: {
+		bg: "rgba(175, 82, 222, 0.1)",
+		fg: "#8944ab"
+	}
+};
+function Badge(props) {
+	const config = badgeColors[props.color ?? "default"];
+	return /* @__PURE__ */ jsx("span", {
+		class: [root$3, props.class],
+		style: `background: ${config.bg}; color: ${config.fg}`,
+		children: props.children
+	});
+}
+
+//#endregion
+//#region ../ui/src/components/card/card.style.ts
+/**
+* Card component styles
+*
+* Two variants matching the docs site design:
+* - feature: Large card with icon, heading, description
+* - link: Smaller clickable card for navigation
+*/
+var card_style_exports = /* @__PURE__ */ __exportAll({
+	desc: () => desc,
+	descLink: () => descLink,
+	feature: () => feature,
+	featureStates: () => featureStates,
+	heading: () => heading,
+	headingLink: () => headingLink,
+	icon: () => icon$1,
+	link: () => link,
+	linkStates: () => linkStates,
+	root: () => root$2
+});
+const c$2 = classes([
+	"root",
+	"feature",
+	"link",
+	"icon",
+	"heading",
+	"desc"
+]);
+const root$2 = rule`${c$2.root} {
+  background: white;
+  border: 0.5px solid rgba(0, 0, 0, 0.06);
+  font-family: ${tokens.fonts.base};
+  transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1);
+}`;
+const feature = rule`${c$2.feature} {
+  border-radius: ${tokens.radii.xl};
+  padding: 2.5rem;
+  box-shadow: ${tokens.shadows.md};
+}`;
+const featureStates = rule`${c$2.feature}:hover {
+  transform: translateY(-4px) scale(1.01);
+  box-shadow: ${tokens.shadows.lg};
+}`;
+const link = rule`${c$2.link} {
+  display: block;
+  border-radius: ${tokens.radii.lg};
+  padding: 1.75rem;
+  box-shadow: ${tokens.shadows.sm};
+  text-decoration: none;
+  cursor: pointer;
+}`;
+const linkStates = rules(rule`${c$2.link}:hover {
+    border-color: rgba(0, 113, 227, 0.3);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
+    transform: translateY(-2px);
+  }`);
+const icon$1 = rule`${c$2.icon} {
+  font-size: 2rem;
+  width: 48px;
+  height: 48px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: ${tokens.colors.surface};
+  border-radius: ${tokens.radii.md};
+  margin-bottom: 1.25rem;
+}`;
+const heading = rule`${c$2.heading} {
+  font-size: 1.375rem;
+  font-weight: ${tokens.fontWeights.semibold};
+  color: ${tokens.colors.text};
+  margin: 0 0 0.5rem;
+  letter-spacing: -0.01em;
+}`;
+const headingLink = rule`${c$2.link} ${c$2.heading} {
+  font-size: ${tokens.fontSizes.lg};
+  margin-bottom: 0.25rem;
+}`;
+const desc = rule`${c$2.desc} {
+  color: ${tokens.colors.textMuted};
+  line-height: ${tokens.lineHeights.normal};
+  font-size: 0.9375rem;
+  margin: 0;
+}`;
+const descLink = rule`${c$2.link} ${c$2.desc} {
+  font-size: ${tokens.fontSizes.sm};
+  line-height: 1.5;
+}`;
+
+//#endregion
+//#region ../ui/src/components/card/card.tsx
+function Card(props) {
+	const variant = props.variant ?? "feature";
+	const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+		props.icon && /* @__PURE__ */ jsx("div", {
+			class: icon$1,
+			children: props.icon
+		}),
+		props.heading && /* @__PURE__ */ jsx("h3", {
+			class: [heading, variant === "link" && headingLink],
+			children: props.heading
+		}),
+		props.description && /* @__PURE__ */ jsx("p", {
+			class: [desc, variant === "link" && descLink],
+			children: props.description
+		}),
+		props.children
+	] });
+	if (variant === "link") return /* @__PURE__ */ jsx("a", {
+		href: props.href,
+		class: [
+			root$2,
+			link,
+			linkStates,
+			props.class
+		],
+		style: props.style,
+		children: content
+	});
+	return /* @__PURE__ */ jsx("div", {
+		class: [
+			root$2,
+			feature,
+			featureStates,
+			props.class
+		],
+		style: props.style,
+		children: content
+	});
+}
+
+//#endregion
+//#region ../ui/src/theme/themes.ts
+/**
+* Built-in themes for @semajsx/ui
+*
+* Provides light (default) and dark themes. Custom themes can be
+* created using createTheme() from @semajsx/style.
+*
+* @example
+* ```tsx
+* import { lightTheme, darkTheme } from "@semajsx/ui/theme";
+* import { inject } from "@semajsx/style";
+*
+* // Apply default (light) theme to :root
+* inject(lightTheme);
+*
+* // Scope dark theme to an element
+* <div class={darkTheme}>
+*   <Button>Dark button</Button>
+* </div>
+* ```
+*/
+/**
+* Light theme - applies token defaults to :root
+*/
+const lightTheme = createTheme(tokens);
+/**
+* Dark theme - scoped to a CSS class
+*/
+const darkTheme = createTheme(tokens, {
+	colors: {
+		primary: "#2997ff",
+		primaryHover: "#5ab4ff",
+		primaryActive: "#0071e3",
+		background: "#000000",
+		surface: "#1c1c1e",
+		border: "rgba(255, 255, 255, 0.12)",
+		text: "#f5f5f7",
+		textMuted: "#a1a1a6",
+		textTertiary: "#6e6e73",
+		danger: "#ff453a",
+		dangerHover: "#ff6961",
+		success: "#30d158",
+		warning: "#ffd60a",
+		info: "#0a84ff",
+		tip: "#bf5af2",
+		onPrimary: "#ffffff",
+		onDanger: "#ffffff"
+	},
+	shadows: {
+		sm: "0 1px 3px rgba(0, 0, 0, 0.2)",
+		md: "0 1px 4px rgba(0, 0, 0, 0.3)",
+		lg: "0 8px 28px rgba(0, 0, 0, 0.4)",
+		primaryGlow: "0 4px 16px rgba(41, 151, 255, 0.3)"
+	}
+});
+
+//#endregion
+//#region ../ui/src/components/button/button.style.ts
+/**
+* Button component styles
+*
+* All styles reference theme tokens via CSS custom properties,
+* so they respond to theme changes automatically.
+*/
+var button_style_exports = /* @__PURE__ */ __exportAll({
+	danger: () => danger,
+	dangerStates: () => dangerStates,
+	ghost: () => ghost,
+	ghostStates: () => ghostStates,
+	icon: () => icon,
+	lg: () => lg,
+	md: () => md,
+	outline: () => outline,
+	outlineStates: () => outlineStates,
+	root: () => root$1,
+	rootStates: () => rootStates,
+	sm: () => sm,
+	solid: () => solid,
+	solidStates: () => solidStates
+});
+const c$1 = classes([
+	"root",
+	"solid",
+	"outline",
+	"ghost",
+	"sm",
+	"md",
+	"lg",
+	"danger",
+	"icon"
+]);
+const root$1 = rule`${c$1.root} {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${tokens.space.sm};
+  border: 1.5px solid transparent;
+  border-radius: ${tokens.radii.pill};
+  font-family: ${tokens.fonts.base};
+  font-weight: ${tokens.fontWeights.medium};
+  line-height: ${tokens.lineHeights.tight};
+  letter-spacing: -0.005em;
+  cursor: pointer;
+  user-select: none;
+  transition: all ${tokens.transitions.normal};
+}`;
+const rootStates = rules(rule`${c$1.root}:focus-visible {
+    outline: 2px solid ${tokens.colors.primary};
+    outline-offset: 2px;
+  }`, rule`${c$1.root}:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    pointer-events: none;
+  }`);
+const solid = rule`${c$1.solid} {
+  background: ${tokens.colors.primary};
+  color: ${tokens.colors.onPrimary};
+  border-color: ${tokens.colors.primary};
+}`;
+const solidStates = rules(rule`${c$1.solid}:hover:not(:disabled) {
+    background: ${tokens.colors.primaryHover};
+    border-color: ${tokens.colors.primaryHover};
+    transform: scale(1.02);
+    box-shadow: ${tokens.shadows.primaryGlow};
+  }`, rule`${c$1.solid}:active:not(:disabled) {
+    background: ${tokens.colors.primaryActive};
+    border-color: ${tokens.colors.primaryActive};
+    transform: scale(0.98);
+    box-shadow: none;
+  }`);
+const outline = rule`${c$1.outline} {
+  background: transparent;
+  color: ${tokens.colors.primary};
+  border-color: ${tokens.colors.primary};
+}`;
+const outlineStates = rules(rule`${c$1.outline}:hover:not(:disabled) {
+    background: ${tokens.colors.primary};
+    color: ${tokens.colors.onPrimary};
+    transform: scale(1.02);
+  }`, rule`${c$1.outline}:active:not(:disabled) {
+    background: ${tokens.colors.primaryActive};
+    color: ${tokens.colors.onPrimary};
+    transform: scale(0.98);
+  }`);
+const ghost = rule`${c$1.ghost} {
+  background: transparent;
+  color: ${tokens.colors.text};
+  border-color: transparent;
+}`;
+const ghostStates = rules(rule`${c$1.ghost}:hover:not(:disabled) {
+    background: ${tokens.colors.surface};
+  }`, rule`${c$1.ghost}:active:not(:disabled) {
+    background: ${tokens.colors.border};
+  }`);
+const danger = rule`${c$1.danger} {
+  background: ${tokens.colors.danger};
+  color: ${tokens.colors.onDanger};
+  border-color: ${tokens.colors.danger};
+}`;
+const dangerStates = rules(rule`${c$1.danger}:hover:not(:disabled) {
+    background: ${tokens.colors.dangerHover};
+    border-color: ${tokens.colors.dangerHover};
+    transform: scale(1.02);
+  }`, rule`${c$1.danger}:focus-visible {
+    outline-color: ${tokens.colors.danger};
+  }`);
+const sm = rule`${c$1.sm} {
+  padding: ${tokens.space.sm} ${tokens.space.lg};
+  font-size: ${tokens.fontSizes.sm};
+}`;
+const md = rule`${c$1.md} {
+  padding: ${tokens.space.md} ${tokens.space.xl};
+  font-size: ${tokens.fontSizes.md};
+}`;
+const lg = rule`${c$1.lg} {
+  padding: 0.875rem 1.75rem;
+  font-size: ${tokens.fontSizes.lg};
+}`;
+const icon = rule`${c$1.icon} {
+  display: inline-flex;
+  flex-shrink: 0;
+}`;
+
+//#endregion
+//#region ../ui/src/components/code-block/code-block.style.ts
+/**
+* CodeBlock component styles
+*
+* Dark-themed code display with optional language header.
+*/
+var code_block_style_exports = /* @__PURE__ */ __exportAll({
+	header: () => header,
+	inline: () => inline,
+	lang: () => lang,
+	pre: () => pre,
+	root: () => root
+});
+const c = classes([
+	"root",
+	"header",
+	"lang",
+	"pre",
+	"inline"
+]);
+const root = rule`${c.root} {
+  margin: 1.5rem 0;
+  border-radius: ${tokens.radii.md};
+  overflow: hidden;
+  border: 0.5px solid rgba(0, 0, 0, 0.1);
+  font-family: ${tokens.fonts.mono};
+}`;
+const header = rule`${c.header} {
+  background: #161617;
+  padding: 0.5rem 1.25rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}`;
+const lang = rule`${c.lang} {
+  color: #86868b;
+  font-size: 0.6875rem;
+  text-transform: uppercase;
+  font-weight: ${tokens.fontWeights.semibold};
+  letter-spacing: 0.04em;
+  font-family: ${tokens.fonts.mono};
+}`;
+const pre = rule`${c.pre} {
+  background: #1d1d1f;
+  color: #e5e5ea;
+  padding: 1.25rem 1.5rem;
+  overflow-x: auto;
+  margin: 0;
+  font-size: ${tokens.fontSizes.sm};
+  line-height: 1.65;
+  font-family: ${tokens.fonts.mono};
+}`;
+const inline = rule`${c.inline} {
+  background: rgba(0, 0, 0, 0.04);
+  padding: 0.15rem 0.4rem;
+  border-radius: 5px;
+  font-size: 0.875em;
+  border: 0.5px solid rgba(0, 0, 0, 0.06);
+  font-family: ${tokens.fonts.mono};
+}`;
+
+//#endregion
+//#region ../ui/src/css.ts
+/**
+* Pre-collected CSS for SSG/SSR usage
+*
+* Since @semajsx/style's inject() requires a DOM, this module provides
+* all component CSS as a static string for server-side rendering.
+*
+* @example
+* ```tsx
+* import { componentCSS } from "@semajsx/ui/css";
+*
+* // Include in a <style> tag for SSG output
+* <style>{componentCSS}</style>
+* ```
+*/
+function collectCSS(styles) {
+	return Object.values(styles).filter((v) => isStyleToken(v)).map((t) => t.__cssTemplate).join("\n");
+}
+/** All @semajsx/ui component CSS (theme variables + component rules) */
+const componentCSS = [
+	lightTheme.__cssTemplate,
+	collectCSS(button_style_exports),
+	collectCSS(card_style_exports),
+	collectCSS(callout_style_exports),
+	collectCSS(badge_style_exports),
+	collectCSS(code_block_style_exports)
+].join("\n");
+
+//#endregion
+//#region ../ssg/src/plugins/docs-theme/components.tsx
+/** Concatenate class names, filtering falsy values */
+function cx(...args) {
+	return args.filter(Boolean).join(" ");
+}
+function CodeBlock({ children, className, language }) {
+	const lang = language || (className?.replace(/^language-/, "") ?? "text");
+	return /* @__PURE__ */ jsxs("div", {
+		class: "dt-code-block",
+		children: [lang && lang !== "text" && /* @__PURE__ */ jsx("div", {
+			class: "dt-code-header",
+			children: /* @__PURE__ */ jsx("span", {
+				class: "dt-code-lang",
+				children: lang
+			})
+		}), /* @__PURE__ */ jsx("pre", {
+			class: className,
+			children: /* @__PURE__ */ jsx("code", { children })
+		})]
+	});
+}
+const DIFFICULTY_COLORS = {
+	beginner: "success",
+	intermediate: "warning",
+	advanced: "danger"
+};
+const DIFFICULTY_LABELS = {
+	beginner: "Beginner",
+	intermediate: "Intermediate",
+	advanced: "Advanced"
+};
+function createComponents(options) {
+	function Document(props) {
+		const { children, title, scripts, css } = props;
+		const defaultTitle = options.title;
+		const pageTitle = title ?? defaultTitle;
+		const desc = options.description ?? "";
+		return /* @__PURE__ */ jsxs("html", {
+			lang: "en",
+			children: [/* @__PURE__ */ jsxs("head", { children: [
+				/* @__PURE__ */ jsx("meta", { charSet: "UTF-8" }),
+				/* @__PURE__ */ jsx("meta", {
+					name: "viewport",
+					content: "width=device-width, initial-scale=1.0"
+				}),
+				desc && /* @__PURE__ */ jsx("meta", {
+					name: "description",
+					content: desc
+				}),
+				/* @__PURE__ */ jsx("meta", {
+					name: "theme-color",
+					content: "#fbfbfd"
+				}),
+				/* @__PURE__ */ jsx("meta", {
+					name: "color-scheme",
+					content: "light"
+				}),
+				/* @__PURE__ */ jsx("title", { children: pageTitle }),
+				/* @__PURE__ */ jsx("link", {
+					rel: "preconnect",
+					href: "https://fonts.googleapis.com"
+				}),
+				/* @__PURE__ */ jsx("link", {
+					rel: "preconnect",
+					href: "https://fonts.gstatic.com",
+					crossOrigin: ""
+				}),
+				/* @__PURE__ */ jsx("link", {
+					href: "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap",
+					rel: "stylesheet"
+				}),
+				css?.map((href) => /* @__PURE__ */ jsx("link", {
+					rel: "stylesheet",
+					href
+				}, href))
+			] }), /* @__PURE__ */ jsxs("body", { children: [children, scripts] })]
+		});
+	}
+	function Layout({ children }) {
+		const footerLinks = options.footer?.links ?? options.nav.links;
+		const copyrightName = options.footer?.copyright ?? options.title;
+		return /* @__PURE__ */ jsxs("div", {
+			class: "dt-root",
+			children: [
+				/* @__PURE__ */ jsx("style", { children: componentCSS }),
+				/* @__PURE__ */ jsx("style", { children: THEME_CSS }),
+				/* @__PURE__ */ jsx("nav", {
+					class: "dt-glass-nav",
+					children: /* @__PURE__ */ jsxs("div", {
+						class: "dt-nav-inner",
+						children: [/* @__PURE__ */ jsx("a", {
+							href: "/",
+							class: "dt-nav-logo",
+							children: options.nav.logo
+						}), /* @__PURE__ */ jsx("ul", {
+							class: "dt-nav-links",
+							children: options.nav.links.map((link) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx("a", {
+								href: link.href,
+								class: "dt-nav-link",
+								...link.external ? {
+									target: "_blank",
+									rel: "noopener noreferrer"
+								} : {},
+								children: link.label
+							}) }, link.href))
+						})]
+					})
+				}),
+				/* @__PURE__ */ jsx("main", {
+					class: "dt-main",
+					children
+				}),
+				/* @__PURE__ */ jsx("footer", {
+					class: "dt-footer",
+					children: /* @__PURE__ */ jsxs("div", {
+						class: "dt-footer-inner",
+						children: [/* @__PURE__ */ jsx("div", {
+							class: "dt-footer-links",
+							children: footerLinks.map((link) => /* @__PURE__ */ jsx("a", {
+								href: link.href,
+								class: "dt-footer-link",
+								...link.external ? {
+									target: "_blank",
+									rel: "noopener noreferrer"
+								} : {},
+								children: link.label
+							}, link.href))
+						}), /* @__PURE__ */ jsxs("p", {
+							class: "dt-footer-copy",
+							children: [`\u00A9 ${(/* @__PURE__ */ new Date()).getFullYear()} ${copyrightName}`, ". MIT License."]
+						})]
+					})
+				})
+			]
+		});
+	}
+	function HomePage() {
+		return /* @__PURE__ */ jsxs(Layout, { children: [
+			options.hero && /* @__PURE__ */ jsx("div", {
+				class: cx("dt-hero-bg", "dt-hero-section"),
+				style: "padding: 100px 24px 80px; position: relative;",
+				children: /* @__PURE__ */ jsxs("div", {
+					style: "max-width: 680px; margin: 0 auto; position: relative; z-index: 1; text-align: center;",
+					children: [
+						/* @__PURE__ */ jsx("h1", {
+							class: cx("dt-hero-title", "dt-anim-slide-up"),
+							children: options.hero.title
+						}),
+						/* @__PURE__ */ jsx("p", {
+							class: cx("dt-hero-subtitle", "dt-anim-slide-up", "dt-stagger-1"),
+							children: options.hero.subtitle
+						}),
+						options.hero.actions && options.hero.actions.length > 0 && /* @__PURE__ */ jsx("div", {
+							class: cx("dt-hero-cta", "dt-anim-slide-up", "dt-stagger-2"),
+							children: options.hero.actions.map((action) => /* @__PURE__ */ jsx("a", {
+								href: action.href,
+								class: action.primary ? "dt-primary-btn" : "dt-secondary-btn",
+								children: action.label
+							}, action.href))
+						})
+					]
+				})
+			}),
+			options.features && /* @__PURE__ */ jsxs("section", {
+				class: "dt-section-features",
+				style: "max-width: 1080px; margin: 0 auto; padding: 80px 24px;",
+				children: [/* @__PURE__ */ jsxs("div", {
+					style: "text-align: center; margin-bottom: 3.5rem;",
+					children: [/* @__PURE__ */ jsx("h2", {
+						class: cx("dt-section-title", "dt-anim-slide-up"),
+						children: options.features.title
+					}), /* @__PURE__ */ jsx("p", {
+						class: cx("dt-section-subtitle", "dt-anim-slide-up", "dt-stagger-1"),
+						children: options.features.subtitle
+					})]
+				}), /* @__PURE__ */ jsx("div", {
+					class: "dt-features-grid",
+					style: "display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem;",
+					children: options.features.items.map((item, i) => /* @__PURE__ */ jsx(Card, {
+						icon: /* @__PURE__ */ jsx(Icon, {
+							name: item.icon,
+							size: 24
+						}),
+						heading: item.title,
+						description: item.description,
+						class: cx("dt-anim-scale-in", `dt-stagger-${Math.min(i + 2, 5)}`)
+					}, item.title))
+				})]
+			}),
+			options.quickLinks && /* @__PURE__ */ jsx("section", {
+				class: "dt-section-links",
+				style: "max-width: 1080px; margin: 0 auto; padding: 0 24px 100px;",
+				children: /* @__PURE__ */ jsxs("div", {
+					class: "dt-section-links-inner",
+					style: "border-top: 0.5px solid rgba(0, 0, 0, 0.06); padding-top: 80px; text-align: center;",
+					children: [
+						/* @__PURE__ */ jsx("h2", {
+							class: cx("dt-section-title", "dt-anim-slide-up"),
+							children: options.quickLinks.title
+						}),
+						/* @__PURE__ */ jsx("p", {
+							class: cx("dt-section-subtitle", "dt-anim-slide-up", "dt-stagger-1"),
+							children: options.quickLinks.subtitle
+						}),
+						/* @__PURE__ */ jsx("div", {
+							class: "dt-links-grid",
+							style: "display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.25rem; max-width: 720px; margin: 0 auto;",
+							children: options.quickLinks.items.map((item, i) => /* @__PURE__ */ jsx(Card, {
+								variant: "link",
+								href: item.href,
+								heading: item.title,
+								description: item.description,
+								class: cx("dt-anim-scale-in", `dt-stagger-${Math.min(i + 2, 5)}`),
+								style: "text-align: left;"
+							}, item.href))
+						})
+					]
+				})
+			})
+		] });
+	}
+	function DocsIndex({ docs: docsList }) {
+		const docsConf = options.docs;
+		const heading = docsConf?.heading ?? "Documentation";
+		const desc = docsConf?.description ?? "";
+		const byCategory = docsList.reduce((acc, doc) => {
+			const category = doc.data.category || "General";
+			if (!acc[category]) acc[category] = [];
+			acc[category].push(doc);
+			return acc;
+		}, {});
+		Object.values(byCategory).forEach((items) => items.sort((a, b) => a.data.order - b.data.order));
+		const basePath = docsConf?.basePath ?? "/docs";
+		return /* @__PURE__ */ jsx(Layout, { children: /* @__PURE__ */ jsxs("div", {
+			style: "max-width: 720px;",
+			children: [/* @__PURE__ */ jsxs("div", {
+				style: "margin-bottom: 3rem;",
+				children: [/* @__PURE__ */ jsx("h1", {
+					class: cx("dt-page-title", "dt-anim-slide-up"),
+					children: heading
+				}), desc && /* @__PURE__ */ jsx("p", {
+					class: cx("dt-page-desc", "dt-anim-slide-up", "dt-stagger-1"),
+					children: desc
+				})]
+			}), Object.entries(byCategory).map(([category, items]) => /* @__PURE__ */ jsxs("section", {
+				class: "dt-fade-in",
+				style: "margin-bottom: 2.5rem;",
+				children: [/* @__PURE__ */ jsx("h2", {
+					class: "dt-category-heading",
+					children: category
+				}), /* @__PURE__ */ jsx("div", {
+					style: "display: flex; flex-direction: column; gap: 0.75rem;",
+					children: items.map((doc, i) => /* @__PURE__ */ jsx(Card, {
+						variant: "link",
+						href: `${basePath}/${doc.slug}`,
+						heading: doc.data.title,
+						description: doc.data.description,
+						class: cx("dt-anim-scale-in"),
+						style: `animation-delay: ${.1 + i * .08}s;`
+					}, doc.slug))
+				})]
+			}, category))]
+		}) });
+	}
+	function DocPage({ doc, content }) {
+		return /* @__PURE__ */ jsx(Layout, { children: /* @__PURE__ */ jsxs("article", {
+			class: "dt-page-container",
+			children: [/* @__PURE__ */ jsxs("div", {
+				style: "margin-bottom: 2.5rem;",
+				children: [/* @__PURE__ */ jsx("h1", {
+					class: cx("dt-page-title", "dt-anim-slide-up"),
+					children: doc.data.title
+				}), doc.data.description && /* @__PURE__ */ jsx("p", {
+					class: cx("dt-content-desc", "dt-anim-slide-up", "dt-stagger-1"),
+					children: doc.data.description
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				class: cx("dt-content", "dt-fade-in"),
+				children: content
+			})]
+		}) });
+	}
+	function GuidesIndex({ guides: guidesList }) {
+		const guidesConf = options.guides;
+		const heading = guidesConf?.heading ?? "Guides";
+		const desc = guidesConf?.description ?? "";
+		const byDifficulty = guidesList.reduce((acc, guide) => {
+			const difficulty = guide.data.difficulty || "beginner";
+			if (!acc[difficulty]) acc[difficulty] = [];
+			acc[difficulty].push(guide);
+			return acc;
+		}, {});
+		Object.values(byDifficulty).forEach((items) => items.sort((a, b) => a.data.order - b.data.order));
+		const basePath = guidesConf?.basePath ?? "/guides";
+		return /* @__PURE__ */ jsx(Layout, { children: /* @__PURE__ */ jsxs("div", {
+			style: "max-width: 720px;",
+			children: [/* @__PURE__ */ jsxs("div", {
+				style: "margin-bottom: 3rem;",
+				children: [/* @__PURE__ */ jsx("h1", {
+					class: cx("dt-page-title", "dt-anim-slide-up"),
+					children: heading
+				}), desc && /* @__PURE__ */ jsx("p", {
+					class: cx("dt-page-desc", "dt-anim-slide-up", "dt-stagger-1"),
+					children: desc
+				})]
+			}), Object.entries(byDifficulty).map(([difficulty, items]) => /* @__PURE__ */ jsxs("section", {
+				class: "dt-fade-in",
+				style: "margin-bottom: 2.5rem;",
+				children: [/* @__PURE__ */ jsx("h2", {
+					class: "dt-category-heading",
+					children: DIFFICULTY_LABELS[difficulty] ?? difficulty
+				}), /* @__PURE__ */ jsx("div", {
+					style: "display: flex; flex-direction: column; gap: 0.75rem;",
+					children: items.map((guide, i) => /* @__PURE__ */ jsxs(Card, {
+						variant: "link",
+						href: `${basePath}/${guide.slug}`,
+						class: cx("dt-anim-scale-in"),
+						style: `animation-delay: ${.1 + i * .08}s;`,
+						children: [/* @__PURE__ */ jsxs("div", {
+							style: "display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.375rem;",
+							children: [/* @__PURE__ */ jsx("h3", {
+								class: "dt-card-title",
+								style: "margin: 0;",
+								children: guide.data.title
+							}), /* @__PURE__ */ jsx(Badge, {
+								color: DIFFICULTY_COLORS[guide.data.difficulty] ?? "default",
+								children: guide.data.difficulty
+							})]
+						}), guide.data.description && /* @__PURE__ */ jsx("p", {
+							class: "dt-card-desc",
+							children: guide.data.description
+						})]
+					}, guide.slug))
+				})]
+			}, difficulty))]
+		}) });
+	}
+	function GuidePage({ guide, content }) {
+		return /* @__PURE__ */ jsx(Layout, { children: /* @__PURE__ */ jsxs("article", {
+			class: "dt-page-container",
+			children: [/* @__PURE__ */ jsxs("div", {
+				style: "margin-bottom: 2.5rem;",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						class: "dt-fade-in",
+						style: "margin-bottom: 1rem;",
+						children: /* @__PURE__ */ jsx(Badge, {
+							color: DIFFICULTY_COLORS[guide.data.difficulty] ?? "default",
+							children: guide.data.difficulty
+						})
+					}),
+					/* @__PURE__ */ jsx("h1", {
+						class: cx("dt-page-title", "dt-anim-slide-up"),
+						children: guide.data.title
+					}),
+					guide.data.description && /* @__PURE__ */ jsx("p", {
+						class: cx("dt-content-desc", "dt-anim-slide-up", "dt-stagger-1"),
+						children: guide.data.description
+					})
+				]
+			}), /* @__PURE__ */ jsx("div", {
+				class: cx("dt-content", "dt-fade-in"),
+				children: content
+			})]
+		}) });
+	}
+	function NotFound() {
+		return /* @__PURE__ */ jsx(Layout, { children: /* @__PURE__ */ jsx("div", {
+			class: cx("dt-hero-bg", "dt-not-found-section"),
+			style: "padding: 100px 24px 80px; position: relative;",
+			children: /* @__PURE__ */ jsxs("div", {
+				style: "max-width: 680px; margin: 0 auto; position: relative; z-index: 1; text-align: center;",
+				children: [
+					/* @__PURE__ */ jsx("h1", {
+						class: cx("dt-not-found-title", "dt-anim-slide-up"),
+						children: "404"
+					}),
+					/* @__PURE__ */ jsx("p", {
+						class: cx("dt-hero-subtitle", "dt-anim-slide-up", "dt-stagger-1"),
+						style: "margin-bottom: 0.75rem;",
+						children: "Page Not Found"
+					}),
+					/* @__PURE__ */ jsx("p", {
+						class: cx("dt-anim-slide-up", "dt-stagger-2"),
+						style: "color: #86868b; font-size: 1rem; margin-bottom: 2.5rem; max-width: 28rem; margin-left: auto; margin-right: auto; line-height: 1.6;",
+						children: "The page you're looking for doesn't exist or has been moved."
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						class: cx("dt-hero-cta", "dt-anim-slide-up", "dt-stagger-3", "dt-not-found-cta"),
+						children: [/* @__PURE__ */ jsx("a", {
+							href: "/",
+							class: "dt-primary-btn",
+							children: "Go Back Home"
+						}), /* @__PURE__ */ jsx("a", {
+							href: options.docs?.basePath ?? "/docs",
+							class: "dt-secondary-btn",
+							children: "View Docs"
+						})]
+					})
+				]
+			})
+		}) });
+	}
+	return {
+		Document,
+		Layout,
+		HomePage,
+		DocsIndex,
+		DocPage,
+		GuidesIndex,
+		GuidePage,
+		NotFound,
+		Callout,
+		CodeBlock
+	};
+}
+
+//#endregion
+//#region ../ssg/src/plugins/docs-theme/index.ts
+const docsSchema = z.object({
+	title: z.string(),
+	description: z.string().optional(),
+	order: z.number().default(999),
+	category: z.string().optional()
+});
+const guidesSchema = z.object({
+	title: z.string(),
+	description: z.string().optional(),
+	order: z.number().default(999),
+	difficulty: z.enum([
+		"beginner",
+		"intermediate",
+		"advanced"
+	]).default("beginner")
+});
+/**
+* Docs theme plugin for SSG.
+*
+* Provides an Apple-inspired documentation site with:
+* - Frosted glass navigation
+* - Home page with hero, features, and quick links
+* - Docs collection with category grouping
+* - Guides collection with difficulty levels
+* - MDX components (Callout, CodeBlock)
+* - Responsive design
+*
+* All text content, navigation links, and site metadata
+* are configured through options — nothing is hardcoded.
+*
+* @example
+* ```tsx
+* import { createSSG } from "@semajsx/ssg";
+* import { docsTheme } from "@semajsx/ssg/plugins/docs-theme";
+* import { fileSource } from "@semajsx/ssg";
+*
+* const ssg = createSSG({
+*   outDir: "./dist",
+*   plugins: [
+*     docsTheme({
+*       title: "My Docs",
+*       nav: {
+*         logo: "MyProject",
+*         links: [
+*           { label: "Docs", href: "/docs" },
+*           { label: "GitHub", href: "https://github.com/...", external: true },
+*         ],
+*       },
+*       hero: {
+*         title: "MyProject",
+*         subtitle: "A great project.",
+*         actions: [{ label: "Get Started", href: "/docs/intro", primary: true }],
+*       },
+*       docs: { source: fileSource({ directory: "content/docs" }, rootDir) },
+*     }),
+*   ],
+* });
+* ```
+*/
+function docsTheme(options) {
+	const components = createComponents(options);
+	const docsBasePath = options.docs?.basePath ?? "/docs";
+	const guidesBasePath = options.guides?.basePath ?? "/guides";
+	const plugins = [{
+		name: "docs-theme",
+		config() {
+			const collections = [];
+			const routes = [];
+			if (options.docs) collections.push(defineCollection({
+				name: "docs",
+				source: options.docs.source,
+				schema: docsSchema
+			}));
+			if (options.guides) collections.push(defineCollection({
+				name: "guides",
+				source: options.guides.source,
+				schema: guidesSchema
+			}));
+			routes.push({
+				path: "/",
+				component: components.HomePage,
+				props: { title: options.title }
+			});
+			if (options.docs) {
+				routes.push({
+					path: docsBasePath,
+					component: components.DocsIndex,
+					props: async (ssg) => ({
+						title: options.docs?.heading ?? "Documentation",
+						docs: await ssg.getCollection("docs")
+					})
+				});
+				routes.push({
+					path: `${docsBasePath}/:slug`,
+					component: components.DocPage,
+					getStaticPaths: async (ssg) => {
+						const allDocs = await ssg.getCollection("docs");
+						return Promise.all(allDocs.map(async (doc) => {
+							const { Content } = await doc.render();
+							return {
+								params: { slug: doc.slug },
+								props: {
+									doc,
+									content: Content(),
+									title: `${doc.data.title} | ${options.title}`
+								}
+							};
+						}));
+					}
+				});
+			}
+			if (options.guides) {
+				routes.push({
+					path: guidesBasePath,
+					component: components.GuidesIndex,
+					props: async (ssg) => ({
+						title: options.guides?.heading ?? "Guides",
+						guides: await ssg.getCollection("guides")
+					})
+				});
+				routes.push({
+					path: `${guidesBasePath}/:slug`,
+					component: components.GuidePage,
+					getStaticPaths: async (ssg) => {
+						const allGuides = await ssg.getCollection("guides");
+						return Promise.all(allGuides.map(async (guide) => {
+							const { Content } = await guide.render();
+							return {
+								params: { slug: guide.slug },
+								props: {
+									guide,
+									content: Content(),
+									title: `${guide.data.title} | ${options.title}`
+								}
+							};
+						}));
+					}
+				});
+			}
+			routes.push({
+				path: "/404",
+				component: components.NotFound,
+				props: { title: `404 - Page Not Found | ${options.title}` }
+			});
+			const mdxComponents = {
+				Callout,
+				CodeBlock,
+				...options.mdx?.components
+			};
+			return {
+				document: components.Document,
+				collections,
+				routes,
+				mdx: {
+					remarkPlugins: options.mdx?.remarkPlugins,
+					rehypePlugins: options.mdx?.rehypePlugins,
+					components: mdxComponents
+				}
+			};
+		}
+	}];
+	if (options.lucide !== false) {
+		const lucideOpts = typeof options.lucide === "object" ? options.lucide : {};
+		plugins.push(lucide(lucideOpts));
+	}
+	return plugins;
+}
+
+//#endregion
+export { Callout, CodeBlock, docsTheme };
+//# sourceMappingURL=docs-theme.mjs.map