semajsx 0.5.1 → 0.6.0

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

@@ -1,17 +1,23 @@
-import { d as defineCollection, v as __exportAll } from "../../src-L88LbwEv.mjs";
+import { d as defineCollection, v as __exportAll } from "../../src-75qcxwT_.mjs";
+import { t as signal } from "../../signal-BN8vHXDb.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 { d as island } from "../../resource-DSlXDZZi.mjs";
+import "../../src-B4VBiHa8.mjs";
 import "../../document-BOJDaiBc.mjs";
-import { n as Icon, t as lucide } from "../../lucide-CVtHepGM.mjs";
+import "../../client-CButR91p.mjs";
+import { n as Icon, t as lucide } from "../../lucide-C5BghhSl.mjs";
 import { dirname, join } from "path";
 import { mkdir, writeFile } from "fs/promises";
 import { z } from "zod";
+import { copyFile, mkdir as mkdir$1 } from "node:fs/promises";
+import { dirname as dirname$1, join as join$1 } from "node:path";
+import { fileURLToPath } from "node:url";
+import remarkGfm from "remark-gfm";
 
 //#region ../ssg/src/plugins/docs-theme/styles.ts
 /**
@@ -36,6 +42,18 @@ const THEME_CSS = `
   to   { opacity: 1; transform: scale(1) translateY(0); }
 }
 
+/* ==============================================
+ * Font Face
+ * ============================================== */
+
+@font-face {
+  font-family: "Maple Mono NF CN";
+  src: url("/fonts/MapleMono-NF-CN-Regular.woff2") format("woff2");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
 /* ==============================================
  * Global Reset & Base
  * ============================================== */
@@ -446,7 +464,7 @@ body {
   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-family: "Maple Mono NF CN", "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);
@@ -504,15 +522,18 @@ body {
 
 /* Tables */
 
+.dt-table-wrapper {
+  margin: 1.5rem 0;
+  border-radius: 10px;
+  border: 0.5px solid rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+}
+
 .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 {
@@ -544,11 +565,36 @@ body {
   background: rgba(0, 0, 0, 0.02);
 }
 
+/* Table scrollbar styling */
+.dt-table-wrapper {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(0, 0, 0, 0.12) rgba(0, 0, 0, 0.02);
+}
+
+.dt-table-wrapper::-webkit-scrollbar {
+  height: 6px;
+}
+
+.dt-table-wrapper::-webkit-scrollbar-track {
+  background: rgba(0, 0, 0, 0.02);
+  border-radius: 3px;
+}
+
+.dt-table-wrapper::-webkit-scrollbar-thumb {
+  background: rgba(0, 0, 0, 0.12);
+  border-radius: 3px;
+}
+
+.dt-table-wrapper::-webkit-scrollbar-thumb:hover {
+  background: rgba(0, 0, 0, 0.2);
+}
+
 /* ==============================================
  * Code Blocks
  * ============================================== */
 
 .dt-code-block {
+  position: relative;
   margin: 1.5rem 0;
   border-radius: 12px;
   overflow: hidden;
@@ -556,52 +602,34 @@ body {
 }
 
 .dt-code-header {
-  background: #161617;
-  padding: 0.5rem 1.25rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+  position: absolute;
+  top: 0;
+  right: 0;
+  padding: 0.625rem 1rem;
+  z-index: 1;
+  pointer-events: none;
+  background: linear-gradient(to left, rgba(34, 39, 46, 0.95) 70%, transparent);
+  padding-left: 2rem;
 }
 
 .dt-code-lang {
-  color: #86868b;
+  color: #636e7b;
   font-size: 0.6875rem;
   text-transform: uppercase;
   font-weight: 600;
   letter-spacing: 0.04em;
+  user-select: none;
 }
 
 .dt-code-block pre {
   margin: 0;
   border-radius: 0;
   border: none;
-}
-
-.dt-code-header + pre {
-  border-radius: 0;
+  padding-top: 2.25rem;
 }
 
 /* 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;
 }
@@ -610,6 +638,15 @@ body {
   display: inline;
 }
 
+/* ==============================================
+ * Tabs interactivity (aria-selected)
+ * ============================================== */
+
+[role="tab"][aria-selected="true"] {
+  color: #0071e3;
+  border-bottom-color: #0071e3;
+}
+
 /* ==============================================
  * 404 Page
  * ============================================== */
@@ -716,14 +753,28 @@ body {
   .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;
+  .dt-table-wrapper {
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
+    border-radius: 8px;
   }
 
-  .dt-content th, .dt-content td { padding: 0.625rem 0.75rem; }
+  .dt-content table {
+    font-size: 0.8125rem;
+  }
+
+  .dt-content th {
+    padding: 0.5rem 0.75rem;
+    font-size: 0.75rem;
+  }
+
+  .dt-content td {
+    padding: 0.5rem 0.75rem;
+  }
+
+  .dt-content td:first-child {
+    font-weight: 500;
+  }
 
   .dt-code-block { border-radius: 10px; }
   .dt-code-header { padding: 0.375rem 1rem; }
@@ -765,6 +816,10 @@ body {
   pointer-events: none;
 }
 
+.dt-preview-box.dt-preview-interactive > * {
+  pointer-events: auto;
+}
+
 .dt-preview-box::before {
   content: "";
   position: absolute;
@@ -1377,10 +1432,39 @@ const panel = rule`${c$8.panel} {
 
 //#endregion
 //#region ../ui/src/components/tabs/tabs.tsx
+/**
+* Module-level state for SSR initial rendering.
+*
+* Set by `Tabs` before returning JSX; read by `Tab` / `TabPanel` when they
+* render during the same synchronous (or awaited) SSR pass.  This lets the
+* server output include the correct `aria-selected` and `hidden` attributes
+* so the page is styled correctly before any JS loads.
+*
+* On the client the `ref` callback in `Tabs` immediately overwrites these
+* attributes once the component mounts, so the initial values are harmless.
+*/
+let _ssrDefaultTab;
 function Tabs(props) {
+	const active = signal(props.defaultValue);
+	_ssrDefaultTab = props.defaultValue;
 	return /* @__PURE__ */ jsx("div", {
 		class: [root$8, props.class],
-		"data-tabs": props.defaultValue,
+		"data-tabs": active,
+		onClick: (e) => {
+			const tab = e.target.closest("[role=tab]");
+			if (!tab) return;
+			const value = tab.getAttribute("data-tab-value");
+			if (value) active.value = value;
+		},
+		ref: (el) => {
+			if (!el) return;
+			const sync = (value) => {
+				for (const t of el.querySelectorAll("[role=tab]")) t.setAttribute("aria-selected", String(t.getAttribute("data-tab-value") === value));
+				for (const p of el.querySelectorAll("[role=tabpanel]")) p.hidden = p.getAttribute("data-tab-panel") !== value;
+			};
+			sync(active.value);
+			active.subscribe(sync);
+		},
 		children: props.children
 	});
 }
@@ -1400,14 +1484,17 @@ function Tab(props) {
 		],
 		role: "tab",
 		"data-tab-value": props.value,
+		"aria-selected": _ssrDefaultTab !== void 0 ? props.value === _ssrDefaultTab ? "true" : "false" : void 0,
 		children: props.children
 	});
 }
 function TabPanel(props) {
+	const hidden = _ssrDefaultTab !== void 0 ? props.value !== _ssrDefaultTab : void 0;
 	return /* @__PURE__ */ jsx("div", {
 		class: [panel, props.class],
 		role: "tabpanel",
 		"data-tab-panel": props.value,
+		hidden: hidden || void 0,
 		children: props.children
 	});
 }
@@ -2192,11 +2279,36 @@ function Switch(props) {
 function cx(...args) {
 	return args.filter(Boolean).join(" ");
 }
-function ComponentPreview({ label, children }) {
+function Table({ children, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		class: "dt-table-wrapper",
+		children: /* @__PURE__ */ jsx("table", {
+			...props,
+			children
+		})
+	});
+}
+function Pre({ children, "data-language": lang, ...props }) {
+	return /* @__PURE__ */ jsxs("div", {
+		class: "dt-code-block",
+		children: [lang && /* @__PURE__ */ jsx("div", {
+			class: "dt-code-header",
+			children: /* @__PURE__ */ jsx("span", {
+				class: "dt-code-lang",
+				children: lang
+			})
+		}), /* @__PURE__ */ jsx("pre", {
+			"data-language": lang,
+			...props,
+			children
+		})]
+	});
+}
+function ComponentPreview({ label, interactive, children }) {
 	return /* @__PURE__ */ jsx("div", {
 		class: "dt-preview",
 		children: /* @__PURE__ */ jsxs("div", {
-			class: "dt-preview-box",
+			class: interactive ? "dt-preview-box dt-preview-interactive" : "dt-preview-box",
 			children: [label && /* @__PURE__ */ jsx("span", {
 				class: "dt-preview-label",
 				children: label
@@ -3115,6 +3227,7 @@ function llms(options) {
 
 //#endregion
 //#region ../ssg/src/plugins/docs-theme/index.ts
+const TabsIsland = island(Tabs, "@semajsx/ui/components/tabs");
 const docsSchema = z.object({
 	title: z.string(),
 	description: z.string().optional(),
@@ -3185,8 +3298,18 @@ function docsTheme(options) {
 	const docsBasePath = options.docs?.basePath ?? "/docs";
 	const guidesBasePath = options.guides?.basePath ?? "/guides";
 	const uiBasePath = options.ui?.basePath ?? "/ui";
+	let outDir = "";
 	const plugins = [{
 		name: "docs-theme",
+		configResolved(config) {
+			outDir = config.outDir ?? "./dist";
+		},
+		async buildEnd() {
+			const fontSrc = join$1(dirname$1(fileURLToPath(import.meta.url)), "fonts", "MapleMono-NF-CN-Regular.woff2");
+			const fontDest = join$1(outDir, "fonts", "MapleMono-NF-CN-Regular.woff2");
+			await mkdir$1(dirname$1(fontDest), { recursive: true });
+			await copyFile(fontSrc, fontDest);
+		},
 		config() {
 			const collections = [];
 			const routes = [];
@@ -3321,10 +3444,12 @@ function docsTheme(options) {
 				props: { title: `404 - Page Not Found | ${options.title}` }
 			});
 			const mdxComponents = {
+				table: Table,
+				pre: Pre,
 				ComponentPreview,
 				Callout,
 				CodeBlock,
-				Tabs,
+				Tabs: TabsIsland,
 				TabList,
 				Tab,
 				TabPanel,
@@ -3345,7 +3470,7 @@ function docsTheme(options) {
 				collections,
 				routes,
 				mdx: {
-					remarkPlugins: options.mdx?.remarkPlugins,
+					remarkPlugins: [remarkGfm, ...options.mdx?.remarkPlugins ?? []],
 					rehypePlugins: options.mdx?.rehypePlugins,
 					components: mdxComponents
 				}