Port Docs-Viewer to slatehtml as the docs-viewer package.

Replace the classic DOM shell with slate widgets, markdown→slate rendering, and a CI index build that uses build-docs.cjs.

src/widgets/slate-rich-text.umc

@@ -0,0 +1,195 @@
+--- html ---
+
+--- style ---
+self {
+  display: block; /* umc-layout-ok, prose leaf */
+  box-sizing: border-box;
+  width: 100%; /* umc-layout-ok */
+  color: inherit;
+  font: inherit;
+  font-size: 1rem;
+  line-height: 1.7;
+  min-width: 0;
+}
+
+self[kind="h1"] {
+  font-size: 2.5rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+  margin: 0 0 1.5rem; /* umc-layout-ok, OG .markdown-content h1 */
+  cursor: pointer;
+}
+
+self[kind="h2"] {
+  font-size: 1.8rem;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  line-height: 1.3;
+  margin: 0; /* umc-layout-ok — slate-collapse supplies section rhythm */
+  cursor: pointer;
+  flex: 1 1 auto; /* umc-layout-ok */
+  min-width: 0; /* umc-layout-ok */
+}
+
+self[kind="h3"] {
+  font-size: 1.5rem;
+  font-weight: 600;
+  line-height: 1.35;
+  margin: 0; /* umc-layout-ok */
+  cursor: pointer;
+  flex: 1 1 auto; /* umc-layout-ok */
+  min-width: 0; /* umc-layout-ok */
+}
+
+self[kind="h4"],
+self[kind="h5"],
+self[kind="h6"] {
+  font-size: 1.1rem;
+  font-weight: 600;
+  margin: 1.25em 0 0.4em; /* umc-layout-ok */
+  cursor: pointer;
+}
+
+self[kind="paragraph"] {
+  font-size: 1rem;
+  line-height: 1.7;
+  margin: 1rem 0; /* umc-layout-ok, OG p */
+}
+
+self[kind="list"],
+self[kind="table"],
+self[kind="html"],
+self[kind="code"] {
+  margin: 1rem 0; /* umc-layout-ok */
+}
+
+self[kind="code"] {
+  margin: 0;
+}
+
+self a {
+  color: var(--accent, #2196f3);
+  text-decoration: none;
+}
+
+self a:hover {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+self code {
+  font-family: var(--slate-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-size: 0.9em;
+  padding: 0.2em 0.4em; /* umc-layout-ok */
+  border-radius: 1px;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  color: #e0e0e0;
+}
+
+self pre {
+  display: block; /* umc-layout-ok */
+  margin: 0;
+  font-family: var(--slate-font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
+  font-size: 0.9rem;
+  line-height: 1.5;
+  white-space: pre;
+  overflow-x: auto; /* umc-layout-ok */
+  background: transparent;
+  border: none;
+  padding: 0; /* umc-layout-ok — chrome lives on .md-code-block */
+}
+
+self pre code,
+self pre code.hljs,
+self code.hljs {
+  display: block; /* umc-layout-ok */
+  padding: 0; /* umc-layout-ok */
+  margin: 0;
+  background: none;
+  border: none;
+  border-radius: 0;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  color: inherit;
+  white-space: inherit;
+}
+
+self img,
+self video {
+  max-width: 100%; /* umc-layout-ok */
+  height: auto; /* umc-layout-ok */
+  border-radius: 8px;
+  display: block; /* umc-layout-ok */
+  margin: 1rem 0; /* umc-layout-ok */
+}
+
+self ul,
+self ol {
+  margin: 1rem 0; /* umc-layout-ok */
+  padding-left: 1.35em; /* umc-layout-ok */
+}
+
+self li {
+  margin: 0.35em 0; /* umc-layout-ok */
+}
+
+self table {
+  width: 100%; /* umc-layout-ok */
+  border-collapse: separate;
+  border-spacing: 0;
+  font-size: 0.9rem;
+  margin: 1em 0; /* umc-layout-ok */
+}
+
+self th,
+self td {
+  border: none;
+  border-bottom: 1px solid var(--line, #404040);
+  padding: 0.75rem; /* umc-layout-ok */
+  text-align: left;
+}
+
+self th {
+  font-weight: 600;
+  background: rgba(255, 255, 255, 0.15);
+}
+
+self td {
+  background: rgba(255, 255, 255, 0.03);
+}
+
+--- script ---
+import { decorateHtml } from "../markdown/decorate.js";
+
+/**
+ * Inline / HTML island leaf for markdown.
+ *
+ *   <slate-rich-text kind="paragraph" html="Hello <strong>world</strong>"></slate-rich-text>
+ *
+ * Attrs: html, kind (h1…h6 | paragraph | list | table | code | html)
+ */
+export default defineUmc({
+  tag: "slate-rich-text",
+  attrs: {
+    html: "",
+    kind: "paragraph",
+  },
+
+  SynchronizeProperties(el) {
+    const next = decorateHtml(el.getAttribute("html") || "");
+    if (el.__richHtml === next) return;
+    el.__richHtml = next;
+    el.innerHTML = next;
+  },
+});
+
+--- preview ---
+<verticalbox gap="8" padding="16" width="420">
+  <slate-rich-text kind="h2" html="Heading with <code>code</code>"></slate-rich-text>
+  <slate-rich-text
+    kind="paragraph"
+    html='Body with <strong>bold</strong>, <em>italic</em>, and a <a href="?welcome" data-internal="true">wiki link</a>.'
+  ></slate-rich-text>
+</verticalbox>