semajsx 0.1.2 → 0.5.1

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

@@ -1,4 +1,4 @@
-import { d as defineCollection, v as __exportAll } from "../../src-DR-EWgVP.mjs";
+import { d as defineCollection, v as __exportAll } from "../../src-L88LbwEv.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";
@@ -9,6 +9,8 @@ import "../../resource-DSlXDZZi.mjs";
 import "../../src-DuSN6go_.mjs";
 import "../../document-BOJDaiBc.mjs";
 import { n as Icon, t as lucide } from "../../lucide-CVtHepGM.mjs";
+import { dirname, join } from "path";
+import { mkdir, writeFile } from "fs/promises";
 import { z } from "zod";
 
 //#region ../ssg/src/plugins/docs-theme/styles.ts
@@ -726,6 +728,143 @@ body {
   .dt-code-block { border-radius: 10px; }
   .dt-code-header { padding: 0.375rem 1rem; }
 
+  .dt-ui-grid {
+    grid-template-columns: 1fr !important;
+  }
+
+  .dt-preview-box {
+    padding: 2rem 1rem !important;
+  }
+}
+
+/* ==============================================
+ * Component Preview (shadcn-style showcase)
+ * ============================================== */
+
+.dt-preview {
+  margin: 1.5rem 0;
+  border: 0.5px solid rgba(0, 0, 0, 0.08);
+  border-radius: 12px;
+  overflow: hidden;
+  background: white;
+}
+
+.dt-preview-box {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  padding: 3.5rem 2.5rem;
+  min-height: 120px;
+  background: white;
+  position: relative;
+}
+
+.dt-preview-box > * {
+  pointer-events: none;
+}
+
+.dt-preview-box::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image:
+    radial-gradient(circle, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
+  background-size: 20px 20px;
+  pointer-events: none;
+}
+
+.dt-preview-label {
+  position: absolute;
+  top: 0.75rem;
+  left: 1rem;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: #86868b;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  z-index: 1;
+}
+
+/* ==============================================
+ * UI Components Section
+ * ============================================== */
+
+.dt-ui-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+  gap: 1rem;
+}
+
+.dt-ui-card {
+  display: block;
+  padding: 1.5rem;
+  background: white;
+  border: 0.5px solid rgba(0, 0, 0, 0.06);
+  border-radius: 12px;
+  text-decoration: none;
+  transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03);
+}
+
+.dt-ui-card:hover {
+  border-color: rgba(0, 113, 227, 0.3);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
+  transform: translateY(-2px);
+}
+
+.dt-ui-card-preview {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 80px;
+  margin-bottom: 1rem;
+  background: #f9f9fb;
+  border-radius: 8px;
+  overflow: hidden;
+  position: relative;
+}
+
+.dt-ui-card-preview > * {
+  pointer-events: none;
+}
+
+.dt-ui-card-preview::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image:
+    radial-gradient(circle, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
+  background-size: 16px 16px;
+  pointer-events: none;
+}
+
+.dt-ui-card-name {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: #1d1d1f;
+  margin: 0 0 0.25rem;
+  letter-spacing: -0.01em;
+}
+
+.dt-ui-card-desc {
+  font-size: 0.8125rem;
+  color: #6e6e73;
+  margin: 0;
+  line-height: 1.4;
+}
+
+.dt-ui-badge-new {
+  display: inline-block;
+  padding: 0.1rem 0.4rem;
+  background: rgba(0, 113, 227, 0.08);
+  color: #0071e3;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  border-radius: 4px;
+  margin-left: 0.5rem;
+  vertical-align: middle;
 }
 `;
 
@@ -826,25 +965,25 @@ const tokens = defineTokens(tokenDefinition);
 * Matching the docs site callout design.
 */
 var callout_style_exports = /* @__PURE__ */ __exportAll({
-	content: () => content,
+	content: () => content$1,
 	icon: () => icon$2,
-	root: () => root$4,
-	title: () => title
+	root: () => root$11,
+	title: () => title$1
 });
-const c$4 = classes([
+const c$11 = classes([
 	"root",
 	"title",
 	"icon",
 	"content"
 ]);
-const root$4 = rule`${c$4.root} {
+const root$11 = rule`${c$11.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} {
+const title$1 = rule`${c$11.title} {
   font-weight: ${tokens.fontWeights.semibold};
   font-size: 0.9375rem;
   margin: 0 0 0.5rem;
@@ -853,7 +992,7 @@ const title = rule`${c$4.title} {
   gap: ${tokens.space.sm};
   letter-spacing: -0.005em;
 }`;
-const icon$2 = rule`${c$4.icon} {
+const icon$2 = rule`${c$11.icon} {
   width: 18px;
   height: 18px;
   display: inline-flex;
@@ -861,7 +1000,7 @@ const icon$2 = rule`${c$4.icon} {
   justify-content: center;
   flex-shrink: 0;
 }`;
-const content = rule`${c$4.content} {
+const content$1 = rule`${c$11.content} {
   color: ${tokens.colors.text};
   font-size: 0.9375rem;
   line-height: ${tokens.lineHeights.normal};
@@ -965,18 +1104,18 @@ function Callout(props) {
 	const config = calloutConfig[props.type ?? "info"];
 	const IconComponent = config.icon;
 	return /* @__PURE__ */ jsxs("div", {
-		class: [root$4, props.class],
+		class: [root$11, props.class],
 		style: `background: ${config.bg}`,
 		role: "note",
 		children: [props.title && /* @__PURE__ */ jsxs("div", {
-			class: title,
+			class: title$1,
 			style: `color: ${config.accent}`,
 			children: [/* @__PURE__ */ jsx("span", {
 				class: icon$2,
 				children: /* @__PURE__ */ jsx(IconComponent, {})
 			}), props.title]
 		}), /* @__PURE__ */ jsx("div", {
-			class: content,
+			class: content$1,
 			children: props.children
 		})]
 	});
@@ -989,9 +1128,9 @@ function Callout(props) {
 *
 * 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} {
+var badge_style_exports = /* @__PURE__ */ __exportAll({ root: () => root$10 });
+const c$10 = classes(["root"]);
+const root$10 = rule`${c$10.root} {
   display: inline-flex;
   align-items: center;
   font-size: 0.6875rem;
@@ -1036,7 +1175,7 @@ const badgeColors = {
 function Badge(props) {
 	const config = badgeColors[props.color ?? "default"];
 	return /* @__PURE__ */ jsx("span", {
-		class: [root$3, props.class],
+		class: [root$10, props.class],
 		style: `background: ${config.bg}; color: ${config.fg}`,
 		children: props.children
 	});
@@ -1061,9 +1200,9 @@ var card_style_exports = /* @__PURE__ */ __exportAll({
 	icon: () => icon$1,
 	link: () => link,
 	linkStates: () => linkStates,
-	root: () => root$2
+	root: () => root$9
 });
-const c$2 = classes([
+const c$9 = classes([
 	"root",
 	"feature",
 	"link",
@@ -1071,22 +1210,22 @@ const c$2 = classes([
 	"heading",
 	"desc"
 ]);
-const root$2 = rule`${c$2.root} {
+const root$9 = rule`${c$9.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} {
+const feature = rule`${c$9.feature} {
   border-radius: ${tokens.radii.xl};
   padding: 2.5rem;
   box-shadow: ${tokens.shadows.md};
 }`;
-const featureStates = rule`${c$2.feature}:hover {
+const featureStates = rule`${c$9.feature}:hover {
   transform: translateY(-4px) scale(1.01);
   box-shadow: ${tokens.shadows.lg};
 }`;
-const link = rule`${c$2.link} {
+const link = rule`${c$9.link} {
   display: block;
   border-radius: ${tokens.radii.lg};
   padding: 1.75rem;
@@ -1094,12 +1233,12 @@ const link = rule`${c$2.link} {
   text-decoration: none;
   cursor: pointer;
 }`;
-const linkStates = rules(rule`${c$2.link}:hover {
+const linkStates = rules(rule`${c$9.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} {
+const icon$1 = rule`${c$9.icon} {
   font-size: 2rem;
   width: 48px;
   height: 48px;
@@ -1110,24 +1249,24 @@ const icon$1 = rule`${c$2.icon} {
   border-radius: ${tokens.radii.md};
   margin-bottom: 1.25rem;
 }`;
-const heading = rule`${c$2.heading} {
+const heading = rule`${c$9.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} {
+const headingLink = rule`${c$9.link} ${c$9.heading} {
   font-size: ${tokens.fontSizes.lg};
   margin-bottom: 0.25rem;
 }`;
-const desc = rule`${c$2.desc} {
+const desc = rule`${c$9.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} {
+const descLink = rule`${c$9.link} ${c$9.desc} {
   font-size: ${tokens.fontSizes.sm};
   line-height: 1.5;
 }`;
@@ -1154,7 +1293,7 @@ function Card(props) {
 	if (variant === "link") return /* @__PURE__ */ jsx("a", {
 		href: props.href,
 		class: [
-			root$2,
+			root$9,
 			link,
 			linkStates,
 			props.class
@@ -1164,7 +1303,7 @@ function Card(props) {
 	});
 	return /* @__PURE__ */ jsx("div", {
 		class: [
-			root$2,
+			root$9,
 			feature,
 			featureStates,
 			props.class
@@ -1174,6 +1313,199 @@ function Card(props) {
 	});
 }
 
+//#endregion
+//#region ../ui/src/components/tabs/tabs.style.ts
+/**
+* Tabs component styles
+*
+* A tab bar with active indicator and content panels.
+*/
+var tabs_style_exports = /* @__PURE__ */ __exportAll({
+	active: () => active,
+	list: () => list,
+	panel: () => panel,
+	root: () => root$8,
+	trigger: () => trigger,
+	triggerStates: () => triggerStates
+});
+const c$8 = classes([
+	"root",
+	"list",
+	"trigger",
+	"active",
+	"panel"
+]);
+const root$8 = rule`${c$8.root} {
+  margin: 1.5rem 0;
+  font-family: ${tokens.fonts.base};
+}`;
+const list = rule`${c$8.list} {
+  display: flex;
+  gap: 0;
+  border-bottom: 1px solid ${tokens.colors.border};
+  margin-bottom: 0;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}`;
+const trigger = rule`${c$8.trigger} {
+  padding: 0.625rem 1rem;
+  font-size: ${tokens.fontSizes.sm};
+  font-weight: ${tokens.fontWeights.medium};
+  font-family: ${tokens.fonts.base};
+  color: ${tokens.colors.textMuted};
+  background: none;
+  border: none;
+  border-bottom: 2px solid transparent;
+  cursor: pointer;
+  white-space: nowrap;
+  transition: color ${tokens.transitions.fast}, border-color ${tokens.transitions.fast};
+  margin-bottom: -1px;
+}`;
+const triggerStates = rules(rule`${c$8.trigger}:hover {
+    color: ${tokens.colors.text};
+  }`, rule`${c$8.trigger}:focus-visible {
+    outline: 2px solid ${tokens.colors.primary};
+    outline-offset: -2px;
+  }`);
+const active = rule`${c$8.active} {
+  color: ${tokens.colors.primary};
+  border-bottom-color: ${tokens.colors.primary};
+}`;
+const panel = rule`${c$8.panel} {
+  padding: 1rem 0;
+}`;
+
+//#endregion
+//#region ../ui/src/components/tabs/tabs.tsx
+function Tabs(props) {
+	return /* @__PURE__ */ jsx("div", {
+		class: [root$8, props.class],
+		"data-tabs": props.defaultValue,
+		children: props.children
+	});
+}
+function TabList(props) {
+	return /* @__PURE__ */ jsx("div", {
+		class: [list, props.class],
+		role: "tablist",
+		children: props.children
+	});
+}
+function Tab(props) {
+	return /* @__PURE__ */ jsx("button", {
+		class: [
+			trigger,
+			triggerStates,
+			props.class
+		],
+		role: "tab",
+		"data-tab-value": props.value,
+		children: props.children
+	});
+}
+function TabPanel(props) {
+	return /* @__PURE__ */ jsx("div", {
+		class: [panel, props.class],
+		role: "tabpanel",
+		"data-tab-panel": props.value,
+		children: props.children
+	});
+}
+
+//#endregion
+//#region ../ui/src/components/steps/steps.style.ts
+/**
+* Steps component styles
+*
+* Numbered step indicators for tutorials and guides.
+*/
+var steps_style_exports = /* @__PURE__ */ __exportAll({
+	body: () => body,
+	content: () => content,
+	item: () => item,
+	number: () => number,
+	root: () => root$7,
+	title: () => title
+});
+const c$7 = classes([
+	"root",
+	"item",
+	"number",
+	"content",
+	"title",
+	"body"
+]);
+const root$7 = rule`${c$7.root} {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  margin: 1.5rem 0;
+  font-family: ${tokens.fonts.base};
+}`;
+const item = rule`${c$7.item} {
+  display: flex;
+  gap: 1rem;
+  padding: 1.25rem 0;
+  border-bottom: 0.5px solid ${tokens.colors.border};
+}`;
+const number = rule`${c$7.number} {
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: ${tokens.colors.primary};
+  color: ${tokens.colors.onPrimary};
+  font-size: ${tokens.fontSizes.sm};
+  font-weight: ${tokens.fontWeights.semibold};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 0.125rem;
+}`;
+const content = rule`${c$7.content} {
+  flex: 1;
+  min-width: 0;
+}`;
+const title = rule`${c$7.title} {
+  font-size: ${tokens.fontSizes.md};
+  font-weight: ${tokens.fontWeights.semibold};
+  color: ${tokens.colors.text};
+  margin: 0 0 0.375rem;
+  letter-spacing: -0.005em;
+}`;
+const body = rule`${c$7.body} {
+  color: ${tokens.colors.textMuted};
+  font-size: ${tokens.fontSizes.sm};
+  line-height: ${tokens.lineHeights.normal};
+}`;
+
+//#endregion
+//#region ../ui/src/components/steps/steps.tsx
+function Steps(props) {
+	return /* @__PURE__ */ jsx("div", {
+		class: [root$7, props.class],
+		children: props.children
+	});
+}
+function Step(props) {
+	return /* @__PURE__ */ jsxs("div", {
+		class: [item, props.class],
+		children: [props.number !== void 0 && /* @__PURE__ */ jsx("div", {
+			class: number,
+			children: props.number
+		}), /* @__PURE__ */ jsxs("div", {
+			class: content,
+			children: [/* @__PURE__ */ jsx("h4", {
+				class: title,
+				children: props.title
+			}), /* @__PURE__ */ jsx("div", {
+				class: body,
+				children: props.children
+			})]
+		})]
+	});
+}
+
 //#endregion
 //#region ../ui/src/theme/themes.ts
 /**
@@ -1245,17 +1577,17 @@ var button_style_exports = /* @__PURE__ */ __exportAll({
 	ghost: () => ghost,
 	ghostStates: () => ghostStates,
 	icon: () => icon,
-	lg: () => lg,
-	md: () => md,
+	lg: () => lg$2,
+	md: () => md$2,
 	outline: () => outline,
 	outlineStates: () => outlineStates,
-	root: () => root$1,
-	rootStates: () => rootStates,
-	sm: () => sm,
+	root: () => root$6,
+	rootStates: () => rootStates$1,
+	sm: () => sm$2,
 	solid: () => solid,
 	solidStates: () => solidStates
 });
-const c$1 = classes([
+const c$6 = classes([
 	"root",
 	"solid",
 	"outline",
@@ -1266,7 +1598,7 @@ const c$1 = classes([
 	"danger",
 	"icon"
 ]);
-const root$1 = rule`${c$1.root} {
+const root$6 = rule`${c$6.root} {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -1281,79 +1613,79 @@ const root$1 = rule`${c$1.root} {
   user-select: none;
   transition: all ${tokens.transitions.normal};
 }`;
-const rootStates = rules(rule`${c$1.root}:focus-visible {
+const rootStates$1 = rules(rule`${c$6.root}:focus-visible {
     outline: 2px solid ${tokens.colors.primary};
     outline-offset: 2px;
-  }`, rule`${c$1.root}:disabled {
+  }`, rule`${c$6.root}:disabled {
     opacity: 0.5;
     cursor: not-allowed;
     pointer-events: none;
   }`);
-const solid = rule`${c$1.solid} {
+const solid = rule`${c$6.solid} {
   background: ${tokens.colors.primary};
   color: ${tokens.colors.onPrimary};
   border-color: ${tokens.colors.primary};
 }`;
-const solidStates = rules(rule`${c$1.solid}:hover:not(:disabled) {
+const solidStates = rules(rule`${c$6.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) {
+  }`, rule`${c$6.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} {
+const outline = rule`${c$6.outline} {
   background: transparent;
   color: ${tokens.colors.primary};
   border-color: ${tokens.colors.primary};
 }`;
-const outlineStates = rules(rule`${c$1.outline}:hover:not(:disabled) {
+const outlineStates = rules(rule`${c$6.outline}:hover:not(:disabled) {
     background: ${tokens.colors.primary};
     color: ${tokens.colors.onPrimary};
     transform: scale(1.02);
-  }`, rule`${c$1.outline}:active:not(:disabled) {
+  }`, rule`${c$6.outline}:active:not(:disabled) {
     background: ${tokens.colors.primaryActive};
     color: ${tokens.colors.onPrimary};
     transform: scale(0.98);
   }`);
-const ghost = rule`${c$1.ghost} {
+const ghost = rule`${c$6.ghost} {
   background: transparent;
   color: ${tokens.colors.text};
   border-color: transparent;
 }`;
-const ghostStates = rules(rule`${c$1.ghost}:hover:not(:disabled) {
+const ghostStates = rules(rule`${c$6.ghost}:hover:not(:disabled) {
     background: ${tokens.colors.surface};
-  }`, rule`${c$1.ghost}:active:not(:disabled) {
+  }`, rule`${c$6.ghost}:active:not(:disabled) {
     background: ${tokens.colors.border};
   }`);
-const danger = rule`${c$1.danger} {
+const danger = rule`${c$6.danger} {
   background: ${tokens.colors.danger};
   color: ${tokens.colors.onDanger};
   border-color: ${tokens.colors.danger};
 }`;
-const dangerStates = rules(rule`${c$1.danger}:hover:not(:disabled) {
+const dangerStates = rules(rule`${c$6.danger}:hover:not(:disabled) {
     background: ${tokens.colors.dangerHover};
     border-color: ${tokens.colors.dangerHover};
     transform: scale(1.02);
-  }`, rule`${c$1.danger}:focus-visible {
+  }`, rule`${c$6.danger}:focus-visible {
     outline-color: ${tokens.colors.danger};
   }`);
-const sm = rule`${c$1.sm} {
+const sm$2 = rule`${c$6.sm} {
   padding: ${tokens.space.sm} ${tokens.space.lg};
   font-size: ${tokens.fontSizes.sm};
 }`;
-const md = rule`${c$1.md} {
+const md$2 = rule`${c$6.md} {
   padding: ${tokens.space.md} ${tokens.space.xl};
   font-size: ${tokens.fontSizes.md};
 }`;
-const lg = rule`${c$1.lg} {
+const lg$2 = rule`${c$6.lg} {
   padding: 0.875rem 1.75rem;
   font-size: ${tokens.fontSizes.lg};
 }`;
-const icon = rule`${c$1.icon} {
+const icon = rule`${c$6.icon} {
   display: inline-flex;
   flex-shrink: 0;
 }`;
@@ -1370,30 +1702,30 @@ var code_block_style_exports = /* @__PURE__ */ __exportAll({
 	inline: () => inline,
 	lang: () => lang,
 	pre: () => pre,
-	root: () => root
+	root: () => root$5
 });
-const c = classes([
+const c$5 = classes([
 	"root",
 	"header",
 	"lang",
 	"pre",
 	"inline"
 ]);
-const root = rule`${c.root} {
+const root$5 = rule`${c$5.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} {
+const header = rule`${c$5.header} {
   background: #161617;
   padding: 0.5rem 1.25rem;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }`;
-const lang = rule`${c.lang} {
+const lang = rule`${c$5.lang} {
   color: #86868b;
   font-size: 0.6875rem;
   text-transform: uppercase;
@@ -1401,7 +1733,7 @@ const lang = rule`${c.lang} {
   letter-spacing: 0.04em;
   font-family: ${tokens.fonts.mono};
 }`;
-const pre = rule`${c.pre} {
+const pre = rule`${c$5.pre} {
   background: #1d1d1f;
   color: #e5e5ea;
   padding: 1.25rem 1.5rem;
@@ -1411,7 +1743,7 @@ const pre = rule`${c.pre} {
   line-height: 1.65;
   font-family: ${tokens.fonts.mono};
 }`;
-const inline = rule`${c.inline} {
+const inline = rule`${c$5.inline} {
   background: rgba(0, 0, 0, 0.04);
   padding: 0.15rem 0.4rem;
   border-radius: 5px;
@@ -1421,56 +1753,473 @@ const inline = rule`${c.inline} {
 }`;
 
 //#endregion
-//#region ../ui/src/css.ts
+//#region ../ui/src/components/separator/separator.style.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>
-* ```
+* Separator component styles
 */
-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");
+var separator_style_exports = /* @__PURE__ */ __exportAll({
+	horizontal: () => horizontal,
+	root: () => root$4,
+	vertical: () => vertical
+});
+const c$4 = classes(["root", "vertical"]);
+const root$4 = rule`${c$4.root} {
+  border: none;
+  background: ${tokens.colors.border};
+  flex-shrink: 0;
+}`;
+const horizontal = rule`${c$4.root}:not(${c$4.vertical}) {
+  height: 0.5px;
+  width: 100%;
+  margin: ${tokens.space.lg} 0;
+}`;
+const vertical = rule`${c$4.vertical} {
+  width: 0.5px;
+  height: auto;
+  align-self: stretch;
+  margin: 0 ${tokens.space.lg};
+}`;
 
 //#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 })
-		})]
-	});
-}
+//#region ../ui/src/components/input/input.style.ts
+/**
+* Input component styles
+*/
+var input_style_exports = /* @__PURE__ */ __exportAll({
+	label: () => label$1,
+	lg: () => lg$1,
+	md: () => md$1,
+	root: () => root$3,
+	rootStates: () => rootStates,
+	sm: () => sm$1,
+	wrapper: () => wrapper
+});
+const c$3 = classes([
+	"root",
+	"wrapper",
+	"label",
+	"sm",
+	"md",
+	"lg"
+]);
+const wrapper = rule`${c$3.wrapper} {
+  display: flex;
+  flex-direction: column;
+  gap: ${tokens.space.sm};
+  font-family: ${tokens.fonts.base};
+}`;
+const label$1 = rule`${c$3.label} {
+  font-size: ${tokens.fontSizes.sm};
+  font-weight: ${tokens.fontWeights.medium};
+  color: ${tokens.colors.text};
+  letter-spacing: -0.005em;
+}`;
+const root$3 = rule`${c$3.root} {
+  display: block;
+  width: 100%;
+  border: 1.5px solid ${tokens.colors.border};
+  border-radius: ${tokens.radii.sm};
+  background: white;
+  color: ${tokens.colors.text};
+  font-family: ${tokens.fonts.base};
+  font-size: ${tokens.fontSizes.md};
+  line-height: ${tokens.lineHeights.normal};
+  transition: all ${tokens.transitions.fast};
+  outline: none;
+}`;
+const rootStates = rules(rule`${c$3.root}:focus {
+    border-color: ${tokens.colors.primary};
+    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.15);
+  }`, rule`${c$3.root}:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    background: ${tokens.colors.surface};
+  }`, rule`${c$3.root}::placeholder {
+    color: ${tokens.colors.textTertiary};
+  }`);
+const sm$1 = rule`${c$3.sm} {
+  padding: ${tokens.space.sm} ${tokens.space.md};
+  font-size: ${tokens.fontSizes.sm};
+}`;
+const md$1 = rule`${c$3.md} {
+  padding: ${tokens.space.md} ${tokens.space.lg};
+  font-size: ${tokens.fontSizes.md};
+}`;
+const lg$1 = rule`${c$3.lg} {
+  padding: ${tokens.space.lg} ${tokens.space.xl};
+  font-size: ${tokens.fontSizes.lg};
+}`;
+
+//#endregion
+//#region ../ui/src/components/avatar/avatar.style.ts
+/**
+* Avatar component styles
+*/
+var avatar_style_exports = /* @__PURE__ */ __exportAll({
+	fallback: () => fallback,
+	image: () => image,
+	lg: () => lg,
+	md: () => md,
+	root: () => root$2,
+	sm: () => sm
+});
+const c$2 = classes([
+	"root",
+	"image",
+	"fallback",
+	"sm",
+	"md",
+	"lg"
+]);
+const root$2 = rule`${c$2.root} {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  overflow: hidden;
+  background: ${tokens.colors.surface};
+  border: 1.5px solid ${tokens.colors.border};
+  flex-shrink: 0;
+  font-family: ${tokens.fonts.base};
+  user-select: none;
+}`;
+const image = rule`${c$2.image} {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}`;
+const fallback = rule`${c$2.fallback} {
+  font-weight: ${tokens.fontWeights.semibold};
+  color: ${tokens.colors.textMuted};
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}`;
+const sm = rule`${c$2.sm} {
+  width: 32px;
+  height: 32px;
+  font-size: 0.75rem;
+}`;
+const md = rule`${c$2.md} {
+  width: 40px;
+  height: 40px;
+  font-size: ${tokens.fontSizes.sm};
+}`;
+const lg = rule`${c$2.lg} {
+  width: 48px;
+  height: 48px;
+  font-size: ${tokens.fontSizes.md};
+}`;
+
+//#endregion
+//#region ../ui/src/components/kbd/kbd.style.ts
+/**
+* Kbd (keyboard) component styles
+*/
+var kbd_style_exports = /* @__PURE__ */ __exportAll({ root: () => root$1 });
+const c$1 = classes(["root"]);
+const root$1 = rule`${c$1.root} {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 1.5em;
+  padding: 0.15rem 0.4rem;
+  background: ${tokens.colors.surface};
+  border: 0.5px solid ${tokens.colors.border};
+  border-bottom-width: 2px;
+  border-radius: 6px;
+  font-family: ${tokens.fonts.base};
+  font-size: 0.8125rem;
+  font-weight: ${tokens.fontWeights.medium};
+  color: ${tokens.colors.text};
+  line-height: 1.4;
+  white-space: nowrap;
+  user-select: none;
+  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
+}`;
+
+//#endregion
+//#region ../ui/src/components/switch/switch.style.ts
+/**
+* Switch component styles
+*/
+var switch_style_exports = /* @__PURE__ */ __exportAll({
+	label: () => label,
+	root: () => root,
+	rootDisabled: () => rootDisabled,
+	thumb: () => thumb,
+	thumbOn: () => thumbOn,
+	track: () => track,
+	trackOn: () => trackOn
+});
+const c = classes([
+	"root",
+	"track",
+	"trackOn",
+	"thumb",
+	"thumbOn",
+	"label"
+]);
+const root = rule`${c.root} {
+  display: inline-flex;
+  align-items: center;
+  gap: ${tokens.space.md};
+  cursor: pointer;
+  font-family: ${tokens.fonts.base};
+  user-select: none;
+}`;
+const rootDisabled = rule`${c.root}[aria-disabled="true"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+}`;
+const track = rule`${c.track} {
+  position: relative;
+  width: 44px;
+  height: 24px;
+  background: ${tokens.colors.border};
+  border-radius: 12px;
+  transition: background ${tokens.transitions.fast};
+  flex-shrink: 0;
+}`;
+const trackOn = rule`${c.trackOn} {
+  background: ${tokens.colors.primary};
+}`;
+const thumb = rule`${c.thumb} {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
+  background: white;
+  border-radius: 50%;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
+  transition: transform ${tokens.transitions.fast};
+}`;
+const thumbOn = rule`${c.thumbOn} {
+  transform: translateX(20px);
+}`;
+const label = rule`${c.label} {
+  font-size: ${tokens.fontSizes.sm};
+  font-weight: ${tokens.fontWeights.medium};
+  color: ${tokens.colors.text};
+  letter-spacing: -0.005em;
+}`;
+
+//#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),
+	collectCSS(tabs_style_exports),
+	collectCSS(steps_style_exports),
+	collectCSS(separator_style_exports),
+	collectCSS(input_style_exports),
+	collectCSS(avatar_style_exports),
+	collectCSS(kbd_style_exports),
+	collectCSS(switch_style_exports)
+].join("\n");
+
+//#endregion
+//#region ../ui/src/components/button/button.tsx
+const variantStyles = {
+	solid: [solid, solidStates],
+	outline: [outline, outlineStates],
+	ghost: [ghost, ghostStates]
+};
+const sizeStyles$2 = {
+	sm: sm$2,
+	md: md$2,
+	lg: lg$2
+};
+function Button(props) {
+	const variant = props.variant ?? "solid";
+	const size = props.size ?? "md";
+	const color = props.color ?? "default";
+	return /* @__PURE__ */ jsx("button", {
+		type: props.type ?? "button",
+		disabled: props.disabled,
+		class: [
+			root$6,
+			rootStates$1,
+			...variantStyles[variant],
+			sizeStyles$2[size],
+			color === "danger" && [danger, dangerStates],
+			props.class
+		],
+		onClick: props.onClick,
+		"aria-label": props["aria-label"],
+		children: props.children
+	});
+}
+
+//#endregion
+//#region ../ui/src/components/separator/separator.tsx
+function Separator(props) {
+	const orientation = props.orientation ?? "horizontal";
+	return /* @__PURE__ */ jsx("div", {
+		role: "separator",
+		"aria-orientation": orientation,
+		class: [
+			root$4,
+			horizontal,
+			orientation === "vertical" && vertical,
+			props.class
+		],
+		style: props.style
+	});
+}
+
+//#endregion
+//#region ../ui/src/components/input/input.tsx
+const sizeStyles$1 = {
+	sm: sm$1,
+	md: md$1,
+	lg: lg$1
+};
+function Input(props) {
+	const size = props.size ?? "md";
+	const inputId = props.id ?? props.name;
+	const input = /* @__PURE__ */ jsx("input", {
+		type: props.type ?? "text",
+		id: inputId,
+		name: props.name,
+		placeholder: props.placeholder,
+		value: props.value,
+		disabled: props.disabled,
+		readOnly: props.readOnly,
+		class: [
+			root$3,
+			rootStates,
+			sizeStyles$1[size],
+			props.class
+		]
+	});
+	if (props.label) return /* @__PURE__ */ jsxs("div", {
+		class: wrapper,
+		children: [/* @__PURE__ */ jsx("label", {
+			class: label$1,
+			for: inputId,
+			children: props.label
+		}), input]
+	});
+	return input;
+}
+
+//#endregion
+//#region ../ui/src/components/avatar/avatar.tsx
+const sizeStyles = {
+	sm,
+	md,
+	lg
+};
+function Avatar(props) {
+	const size = props.size ?? "md";
+	return /* @__PURE__ */ jsx("div", {
+		class: [
+			root$2,
+			sizeStyles[size],
+			props.class
+		],
+		role: "img",
+		"aria-label": props.alt ?? props.initials ?? "Avatar",
+		children: props.src ? /* @__PURE__ */ jsx("img", {
+			class: image,
+			src: props.src,
+			alt: props.alt ?? ""
+		}) : /* @__PURE__ */ jsx("span", {
+			class: fallback,
+			children: props.initials ?? "?"
+		})
+	});
+}
+
+//#endregion
+//#region ../ui/src/components/kbd/kbd.tsx
+function Kbd(props) {
+	return /* @__PURE__ */ jsx("kbd", {
+		class: [root$1, props.class],
+		children: props.children
+	});
+}
+
+//#endregion
+//#region ../ui/src/components/switch/switch.tsx
+function Switch(props) {
+	const checked = props.checked ?? false;
+	return /* @__PURE__ */ jsxs("div", {
+		role: "switch",
+		"aria-checked": checked ? "true" : "false",
+		"aria-disabled": props.disabled ? "true" : void 0,
+		class: [
+			root,
+			rootDisabled,
+			props.class
+		],
+		children: [/* @__PURE__ */ jsx("div", {
+			class: [track, checked && trackOn],
+			children: /* @__PURE__ */ jsx("div", { class: [thumb, checked && thumbOn] })
+		}), props.label && /* @__PURE__ */ jsx("span", {
+			class: label,
+			children: props.label
+		})]
+	});
+}
+
+//#endregion
+//#region ../ssg/src/plugins/docs-theme/components.tsx
+/** Concatenate class names, filtering falsy values */
+function cx(...args) {
+	return args.filter(Boolean).join(" ");
+}
+function ComponentPreview({ label, children }) {
+	return /* @__PURE__ */ jsx("div", {
+		class: "dt-preview",
+		children: /* @__PURE__ */ jsxs("div", {
+			class: "dt-preview-box",
+			children: [label && /* @__PURE__ */ jsx("span", {
+				class: "dt-preview-label",
+				children: label
+			}), children]
+		})
+	});
+}
+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",
@@ -1671,6 +2420,75 @@ function createComponents(options) {
 			})
 		] });
 	}
+	function DocsIndexHome({ docs: docsList, guides: guidesList }) {
+		const docsConf = options.docs;
+		const guidesConf = options.guides;
+		const docsBasePath = docsConf?.basePath ?? "/docs";
+		const guidesBasePath = 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: options.title
+					}), options.description && /* @__PURE__ */ jsx("p", {
+						class: cx("dt-page-desc", "dt-anim-slide-up", "dt-stagger-1"),
+						children: options.description
+					})]
+				}),
+				docsList.length > 0 && /* @__PURE__ */ jsxs("section", {
+					class: "dt-fade-in",
+					style: "margin-bottom: 2.5rem;",
+					children: [/* @__PURE__ */ jsx("h2", {
+						class: "dt-category-heading",
+						children: docsConf?.heading ?? "Documentation"
+					}), /* @__PURE__ */ jsx("div", {
+						style: "display: flex; flex-direction: column; gap: 0.75rem;",
+						children: docsList.sort((a, b) => a.data.order - b.data.order).map((doc, i) => /* @__PURE__ */ jsx(Card, {
+							variant: "link",
+							href: `${docsBasePath}/${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))
+					})]
+				}),
+				guidesList.length > 0 && /* @__PURE__ */ jsxs("section", {
+					class: "dt-fade-in",
+					style: "margin-bottom: 2.5rem;",
+					children: [/* @__PURE__ */ jsx("h2", {
+						class: "dt-category-heading",
+						children: guidesConf?.heading ?? "Guides"
+					}), /* @__PURE__ */ jsx("div", {
+						style: "display: flex; flex-direction: column; gap: 0.75rem;",
+						children: guidesList.sort((a, b) => a.data.order - b.data.order).map((guide, i) => /* @__PURE__ */ jsxs(Card, {
+							variant: "link",
+							href: `${guidesBasePath}/${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))
+					})]
+				})
+			]
+		}) });
+	}
 	function DocsIndex({ docs: docsList }) {
 		const docsConf = options.docs;
 		const heading = docsConf?.heading ?? "Documentation";
@@ -1816,6 +2634,233 @@ function createComponents(options) {
 			})]
 		}) });
 	}
+	function UIIndex({ components: componentsList }) {
+		const uiConf = options.ui;
+		const heading = uiConf?.heading ?? "Components";
+		const desc = uiConf?.description ?? "";
+		const basePath = uiConf?.basePath ?? "/ui";
+		const byCategory = componentsList.reduce((acc, comp) => {
+			const category = comp.data.category || "General";
+			if (!acc[category]) acc[category] = [];
+			acc[category].push(comp);
+			return acc;
+		}, {});
+		Object.values(byCategory).forEach((items) => items.sort((a, b) => a.data.order - b.data.order));
+		return /* @__PURE__ */ jsx(Layout, { children: /* @__PURE__ */ jsxs("div", {
+			style: "max-width: 960px;",
+			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", {
+					class: "dt-ui-grid",
+					children: items.map((comp, i) => /* @__PURE__ */ jsxs("a", {
+						href: `${basePath}/${comp.slug}`,
+						class: cx("dt-ui-card", "dt-anim-scale-in"),
+						style: `animation-delay: ${.05 + i * .05}s;`,
+						children: [
+							/* @__PURE__ */ jsx("div", {
+								class: "dt-ui-card-preview",
+								children: renderMiniPreview(comp.slug)
+							}),
+							/* @__PURE__ */ jsx("h3", {
+								class: "dt-ui-card-name",
+								children: comp.data.title
+							}),
+							comp.data.description && /* @__PURE__ */ jsx("p", {
+								class: "dt-ui-card-desc",
+								children: comp.data.description
+							})
+						]
+					}, comp.slug))
+				})]
+			}, category))]
+		}) });
+	}
+	/** Renders a small preview of the component for the index grid cards */
+	function renderMiniPreview(slug) {
+		switch (slug) {
+			case "button": return /* @__PURE__ */ jsxs("div", {
+				style: "display: flex; gap: 0.5rem; position: relative; z-index: 1;",
+				children: [/* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					children: "Button"
+				}), /* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					variant: "outline",
+					children: "Outline"
+				})]
+			});
+			case "badge": return /* @__PURE__ */ jsxs("div", {
+				style: "display: flex; gap: 0.5rem; position: relative; z-index: 1;",
+				children: [
+					/* @__PURE__ */ jsx(Badge, { children: "Default" }),
+					/* @__PURE__ */ jsx(Badge, {
+						color: "success",
+						children: "Success"
+					}),
+					/* @__PURE__ */ jsx(Badge, {
+						color: "warning",
+						children: "Warning"
+					})
+				]
+			});
+			case "input": return /* @__PURE__ */ jsx("div", {
+				style: "width: 160px; position: relative; z-index: 1;",
+				children: /* @__PURE__ */ jsx(Input, {
+					size: "sm",
+					placeholder: "Type here..."
+				})
+			});
+			case "switch": return /* @__PURE__ */ jsxs("div", {
+				style: "display: flex; gap: 1rem; position: relative; z-index: 1;",
+				children: [/* @__PURE__ */ jsx(Switch, {}), /* @__PURE__ */ jsx(Switch, { checked: true })]
+			});
+			case "avatar": return /* @__PURE__ */ jsxs("div", {
+				style: "display: flex; gap: 0.5rem; position: relative; z-index: 1;",
+				children: [
+					/* @__PURE__ */ jsx(Avatar, {
+						initials: "AB",
+						size: "sm"
+					}),
+					/* @__PURE__ */ jsx(Avatar, {
+						initials: "CD",
+						size: "md"
+					}),
+					/* @__PURE__ */ jsx(Avatar, {
+						initials: "EF",
+						size: "lg"
+					})
+				]
+			});
+			case "separator": return /* @__PURE__ */ jsxs("div", {
+				style: "width: 120px; position: relative; z-index: 1;",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						style: "font-size: 0.75rem; color: #86868b; text-align: center;",
+						children: "Above"
+					}),
+					/* @__PURE__ */ jsx(Separator, {}),
+					/* @__PURE__ */ jsx("div", {
+						style: "font-size: 0.75rem; color: #86868b; text-align: center;",
+						children: "Below"
+					})
+				]
+			});
+			case "kbd": return /* @__PURE__ */ jsxs("div", {
+				style: "display: flex; gap: 0.25rem; align-items: center; position: relative; z-index: 1;",
+				children: [
+					/* @__PURE__ */ jsx(Kbd, { children: "Cmd" }),
+					/* @__PURE__ */ jsx("span", {
+						style: "color: #86868b; font-size: 0.75rem;",
+						children: "+"
+					}),
+					/* @__PURE__ */ jsx(Kbd, { children: "K" })
+				]
+			});
+			case "card": return /* @__PURE__ */ jsx("div", {
+				style: "transform: scale(0.45); transform-origin: center; position: relative; z-index: 1; width: 240px;",
+				children: /* @__PURE__ */ jsx(Card, {
+					heading: "Card Title",
+					description: "A brief description"
+				})
+			});
+			case "callout": return /* @__PURE__ */ jsx("div", {
+				style: "transform: scale(0.6); transform-origin: center; position: relative; z-index: 1; width: 260px;",
+				children: /* @__PURE__ */ jsx(Callout, {
+					type: "info",
+					children: "Informational callout"
+				})
+			});
+			case "tabs": return /* @__PURE__ */ jsx("div", {
+				style: "transform: scale(0.7); transform-origin: center; position: relative; z-index: 1; width: 200px;",
+				children: /* @__PURE__ */ jsx(Tabs, {
+					defaultValue: "one",
+					children: /* @__PURE__ */ jsxs(TabList, { children: [/* @__PURE__ */ jsx(Tab, {
+						value: "one",
+						children: "First"
+					}), /* @__PURE__ */ jsx(Tab, {
+						value: "two",
+						children: "Second"
+					})] })
+				})
+			});
+			case "steps": return /* @__PURE__ */ jsx("div", {
+				style: "transform: scale(0.4); transform-origin: center; position: relative; z-index: 1; width: 200px;",
+				children: /* @__PURE__ */ jsxs(Steps, { children: [/* @__PURE__ */ jsx(Step, {
+					title: "Install",
+					number: 1,
+					children: "bun add semajsx"
+				}), /* @__PURE__ */ jsx(Step, {
+					title: "Build",
+					number: 2,
+					children: "Create app"
+				})] })
+			});
+			case "code-block": return /* @__PURE__ */ jsx("div", {
+				style: "position: relative; z-index: 1; width: 160px;",
+				children: /* @__PURE__ */ jsxs("div", {
+					style: "background: #1e1e1e; border-radius: 6px; padding: 8px 10px; font-family: ui-monospace, 'SF Mono', monospace; font-size: 0.625rem; color: #d4d4d4; line-height: 1.5; white-space: pre; overflow: hidden;",
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							style: "color: #c586c0;",
+							children: "const"
+						}),
+						" ",
+						/* @__PURE__ */ jsx("span", {
+							style: "color: #9cdcfe;",
+							children: "x"
+						}),
+						" ",
+						/* @__PURE__ */ jsx("span", {
+							style: "color: #d4d4d4;",
+							children: "="
+						}),
+						" ",
+						/* @__PURE__ */ jsx("span", {
+							style: "color: #b5cea8;",
+							children: "42"
+						}),
+						";"
+					]
+				})
+			});
+			default: return /* @__PURE__ */ jsx("div", {
+				style: "font-size: 0.6875rem; color: #86868b; position: relative; z-index: 1;",
+				children: slug
+			});
+		}
+	}
+	function UIPage({ component: comp, content }) {
+		return /* @__PURE__ */ jsx(Layout, { children: /* @__PURE__ */ jsxs("article", {
+			class: "dt-page-container",
+			style: "max-width: 800px;",
+			children: [/* @__PURE__ */ jsxs("div", {
+				style: "margin-bottom: 2.5rem;",
+				children: [/* @__PURE__ */ jsx("h1", {
+					class: cx("dt-page-title", "dt-anim-slide-up"),
+					children: comp.data.title
+				}), comp.data.description && /* @__PURE__ */ jsx("p", {
+					class: cx("dt-content-desc", "dt-anim-slide-up", "dt-stagger-1"),
+					children: comp.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"),
@@ -1857,13 +2902,214 @@ function createComponents(options) {
 		Document,
 		Layout,
 		HomePage,
+		DocsIndexHome,
 		DocsIndex,
 		DocPage,
 		GuidesIndex,
 		GuidePage,
+		UIIndex,
+		UIPage,
 		NotFound,
+		ComponentPreview,
 		Callout,
-		CodeBlock
+		CodeBlock,
+		Tabs,
+		TabList,
+		Tab,
+		TabPanel,
+		Steps,
+		Step,
+		Button,
+		Badge,
+		Card,
+		Separator,
+		Input,
+		Avatar,
+		Kbd,
+		Switch
+	};
+}
+
+//#endregion
+//#region ../ssg/src/plugins/llms/index.ts
+function normalizePath(path) {
+	return path.startsWith("/") ? path : `/${path}`;
+}
+function resolveUrl(base, path) {
+	if (!base) return path;
+	return `${base.replace(/\/$/, "")}${path}`;
+}
+function getEntryTitle(entry) {
+	return entry.data.title ?? entry.slug;
+}
+function getEntryDescription(entry) {
+	return entry.data.description;
+}
+function formatLink(title, url, description) {
+	return description ? `- [${title}](${url}): ${description}` : `- [${title}](${url})`;
+}
+/**
+* Generate llms.txt content following the llms.txt specification.
+*
+* Format:
+* - H1: site title (required)
+* - Blockquote: site description (optional)
+* - H2 sections: collection entries as markdown links
+* - ## Optional: additional links
+*
+* @see https://llmstxt.org/
+*/
+function generateLlmsTxt(options, sectionEntries) {
+	const lines = [];
+	lines.push(`# ${options.title}`);
+	lines.push("");
+	if (options.description) {
+		lines.push(`> ${options.description}`);
+		lines.push("");
+	}
+	for (const section of options.sections ?? []) {
+		const entries = sectionEntries.get(section.collection) ?? [];
+		if (entries.length === 0) continue;
+		const basePath = normalizePath(section.basePath);
+		lines.push(`## ${section.title}`);
+		lines.push("");
+		for (const entry of entries) {
+			const title = getEntryTitle(entry);
+			const url = resolveUrl(options.url, `${basePath}/${entry.slug}`);
+			const desc = getEntryDescription(entry);
+			lines.push(formatLink(title, url, desc));
+		}
+		lines.push("");
+	}
+	if (options.links?.length) {
+		lines.push("## Optional");
+		lines.push("");
+		for (const link of options.links) lines.push(formatLink(link.title, link.url, link.description));
+		lines.push("");
+	}
+	return lines.join("\n");
+}
+/**
+* Generate llms-full.txt with complete content for each entry.
+* Includes the full markdown body of every collection entry.
+*/
+function generateLlmsFullTxt(options, sectionEntries) {
+	const lines = [];
+	lines.push(`# ${options.title}`);
+	lines.push("");
+	if (options.description) {
+		lines.push(`> ${options.description}`);
+		lines.push("");
+	}
+	for (const section of options.sections ?? []) {
+		const entries = sectionEntries.get(section.collection) ?? [];
+		if (entries.length === 0) continue;
+		const basePath = normalizePath(section.basePath);
+		lines.push(`## ${section.title}`);
+		lines.push("");
+		for (const entry of entries) {
+			const title = getEntryTitle(entry);
+			const url = resolveUrl(options.url, `${basePath}/${entry.slug}`);
+			const desc = getEntryDescription(entry);
+			lines.push(`### ${title}`);
+			if (desc) {
+				lines.push("");
+				lines.push(`> ${desc}`);
+			}
+			lines.push("");
+			lines.push(`Source: ${url}`);
+			lines.push("");
+			lines.push(entry.body.trim());
+			lines.push("");
+			lines.push("---");
+			lines.push("");
+		}
+	}
+	return lines.join("\n");
+}
+function generateEntryMarkdown(entry) {
+	const title = getEntryTitle(entry);
+	const desc = getEntryDescription(entry);
+	const lines = [];
+	lines.push(`# ${title}`);
+	if (desc) {
+		lines.push("");
+		lines.push(`> ${desc}`);
+	}
+	lines.push("");
+	lines.push(entry.body.trim());
+	lines.push("");
+	return lines.join("\n");
+}
+/**
+* LLMs plugin for SSG.
+*
+* Generates `llms.txt`, `llms-full.txt`, and per-page `.md` files
+* following the llms.txt specification, making your site easily
+* consumable by LLMs and AI agents.
+*
+* @see https://llmstxt.org/
+*
+* @example
+* ```tsx
+* import { createSSG } from "@semajsx/ssg";
+* import { llms } from "@semajsx/ssg/plugins/llms";
+*
+* const ssg = createSSG({
+*   outDir: "./dist",
+*   plugins: [
+*     llms({
+*       title: "My Project",
+*       description: "Documentation for My Project",
+*       url: "https://docs.myproject.com",
+*       sections: [
+*         { title: "Documentation", collection: "docs", basePath: "/docs" },
+*       ],
+*     }),
+*   ],
+* });
+* ```
+*/
+function llms(options) {
+	let outDir = "";
+	return {
+		name: "llms",
+		enforce: "post",
+		configResolved(config) {
+			outDir = config.outDir ?? "./dist";
+		},
+		async buildEnd(_result, ssg) {
+			const genLlmsTxt = options.llmsTxt !== false;
+			const genLlmsFullTxt = options.llmsFullTxt !== false;
+			const genMarkdownPages = options.markdownPages !== false;
+			const sectionEntries = /* @__PURE__ */ new Map();
+			for (const section of options.sections ?? []) try {
+				const entries = await ssg.getCollection(section.collection);
+				sectionEntries.set(section.collection, entries);
+			} catch {
+				sectionEntries.set(section.collection, []);
+			}
+			await mkdir(outDir, { recursive: true });
+			if (genLlmsTxt) {
+				const content = generateLlmsTxt(options, sectionEntries);
+				await writeFile(join(outDir, "llms.txt"), content, "utf-8");
+			}
+			if (genLlmsFullTxt) {
+				const content = generateLlmsFullTxt(options, sectionEntries);
+				await writeFile(join(outDir, "llms-full.txt"), content, "utf-8");
+			}
+			if (genMarkdownPages) for (const section of options.sections ?? []) {
+				const basePath = normalizePath(section.basePath);
+				const entries = sectionEntries.get(section.collection) ?? [];
+				for (const entry of entries) {
+					const mdPath = `${basePath}/${entry.slug}.md`;
+					const fullPath = join(outDir, mdPath.slice(1));
+					const content = generateEntryMarkdown(entry);
+					await mkdir(dirname(fullPath), { recursive: true });
+					await writeFile(fullPath, content, "utf-8");
+				}
+			}
+		}
 	};
 }
 
@@ -1885,6 +3131,12 @@ const guidesSchema = z.object({
 		"advanced"
 	]).default("beginner")
 });
+const uiSchema = z.object({
+	title: z.string(),
+	description: z.string().optional(),
+	order: z.number().default(999),
+	category: z.string().optional()
+});
 /**
 * Docs theme plugin for SSG.
 *
@@ -1932,6 +3184,7 @@ function docsTheme(options) {
 	const components = createComponents(options);
 	const docsBasePath = options.docs?.basePath ?? "/docs";
 	const guidesBasePath = options.guides?.basePath ?? "/guides";
+	const uiBasePath = options.ui?.basePath ?? "/ui";
 	const plugins = [{
 		name: "docs-theme",
 		config() {
@@ -1947,7 +3200,33 @@ function docsTheme(options) {
 				source: options.guides.source,
 				schema: guidesSchema
 			}));
-			routes.push({
+			if (options.ui) collections.push(defineCollection({
+				name: "ui",
+				source: options.ui.source,
+				schema: uiSchema
+			}));
+			if (options.home !== false) if (options.home === "docs-index") routes.push({
+				path: "/",
+				component: components.DocsIndexHome,
+				props: async (ssg) => ({
+					title: options.title,
+					docs: options.docs ? await ssg.getCollection("docs") : [],
+					guides: options.guides ? await ssg.getCollection("guides") : []
+				})
+			});
+			else if (typeof options.home === "function") {
+				const CustomHome = options.home;
+				routes.push({
+					path: "/",
+					component: (props) => CustomHome(props),
+					props: async (ssg) => ({
+						title: options.title,
+						Layout: components.Layout,
+						docs: options.docs ? await ssg.getCollection("docs") : [],
+						guides: options.guides ? await ssg.getCollection("guides") : []
+					})
+				});
+			} else routes.push({
 				path: "/",
 				component: components.HomePage,
 				props: { title: options.title }
@@ -2008,14 +3287,57 @@ function docsTheme(options) {
 					}
 				});
 			}
+			if (options.ui) {
+				routes.push({
+					path: uiBasePath,
+					component: components.UIIndex,
+					props: async (ssg) => ({
+						title: options.ui?.heading ?? "Components",
+						components: await ssg.getCollection("ui")
+					})
+				});
+				routes.push({
+					path: `${uiBasePath}/:slug`,
+					component: components.UIPage,
+					getStaticPaths: async (ssg) => {
+						const allComponents = await ssg.getCollection("ui");
+						return Promise.all(allComponents.map(async (comp) => {
+							const { Content } = await comp.render();
+							return {
+								params: { slug: comp.slug },
+								props: {
+									component: comp,
+									content: Content(),
+									title: `${comp.data.title} | ${options.title}`
+								}
+							};
+						}));
+					}
+				});
+			}
 			routes.push({
 				path: "/404",
 				component: components.NotFound,
 				props: { title: `404 - Page Not Found | ${options.title}` }
 			});
 			const mdxComponents = {
+				ComponentPreview,
 				Callout,
 				CodeBlock,
+				Tabs,
+				TabList,
+				Tab,
+				TabPanel,
+				Steps,
+				Step,
+				Button,
+				Badge,
+				Card,
+				Separator,
+				Input,
+				Avatar,
+				Kbd,
+				Switch,
 				...options.mdx?.components
 			};
 			return {
@@ -2034,9 +3356,39 @@ function docsTheme(options) {
 		const lucideOpts = typeof options.lucide === "object" ? options.lucide : {};
 		plugins.push(lucide(lucideOpts));
 	}
+	const hasContent = options.docs || options.guides || options.ui;
+	if (options.llms !== false && hasContent) {
+		const llmsOpts = typeof options.llms === "object" ? options.llms : {};
+		const sections = [];
+		if (options.docs) sections.push({
+			title: options.docs.heading ?? "Documentation",
+			collection: "docs",
+			basePath: docsBasePath
+		});
+		if (options.guides) sections.push({
+			title: options.guides.heading ?? "Guides",
+			collection: "guides",
+			basePath: guidesBasePath
+		});
+		if (options.ui) sections.push({
+			title: options.ui.heading ?? "Components",
+			collection: "ui",
+			basePath: uiBasePath
+		});
+		plugins.push(llms({
+			title: options.title,
+			description: options.description,
+			url: llmsOpts.url,
+			sections,
+			links: llmsOpts.links,
+			llmsTxt: llmsOpts.llmsTxt,
+			llmsFullTxt: llmsOpts.llmsFullTxt,
+			markdownPages: llmsOpts.markdownPages
+		}));
+	}
 	return plugins;
 }
 
 //#endregion
-export { Callout, CodeBlock, docsTheme };
+export { Avatar, Badge, Button, Callout, Card, CodeBlock, ComponentPreview, Input, Kbd, Separator, Step, Steps, Switch, Tab, TabList, TabPanel, Tabs, docsTheme };
 //# sourceMappingURL=docs-theme.mjs.map