@sarj/docs-ui 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 sarj-ai
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,13 @@
+<!-- Generated by `sarj-standards maintain docs sync`; do not edit. -->
+
+# @sarj/docs-ui
+
+Shared Astro and Starlight reference UI for Sarj standards sites
+
+```bash
+npm install --save-dev @sarj/docs-ui
+```
+
+Rules and configuration are documented in the generated rule directory.
+
+[Documentation](https://code-standards.sarj.ai/) · [Source](https://github.com/sarj-ai/standards)

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@sarj/docs-ui",
+  "version": "0.1.0",
+  "packageManager": "npm@12.0.2",
+  "description": "Shared Astro and Starlight reference UI for Sarj standards sites",
+  "type": "module",
+  "scripts": {
+    "test": "node tests/package-contract.mjs"
+  },
+  "exports": {
+    "./styles.css": "./src/styles/theme.css",
+    "./PageAnchor.astro": "./src/components/PageAnchor.astro",
+    "./ReferencePage.astro": "./src/components/ReferencePage.astro",
+    "./Breadcrumbs.astro": "./src/components/Breadcrumbs.astro"
+  },
+  "files": [
+    "src",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": [
+    "./src/styles/theme.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sarj-ai/standards.git",
+    "directory": "packages/docs-ui"
+  },
+  "homepage": "https://code-standards.sarj.ai/",
+  "bugs": {
+    "url": "https://github.com/sarj-ai/standards/issues"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@fontsource-variable/nunito": "5.3.0"
+  },
+  "peerDependencies": {
+    "@astrojs/starlight": ">=0.41.7 <0.42",
+    "astro": ">=7.2.3 <8"
+  },
+  "engines": {
+    "node": ">=22.14.0"
+  }
+}

package/src/components/Breadcrumbs.astro

@@ -0,0 +1,20 @@
+---
+interface Ancestor {
+  label: string;
+  href: string;
+}
+
+interface Props {
+  ancestors: readonly Ancestor[];
+  current: string;
+}
+
+const { ancestors, current } = Astro.props;
+---
+
+<nav class="breadcrumbs" aria-label="Breadcrumb">
+  <ol>
+    {ancestors.map((ancestor) => <li><a href={ancestor.href}>{ancestor.label}</a></li>)}
+    <li><span aria-current="page">{current}</span></li>
+  </ol>
+</nav>

package/src/components/PageAnchor.astro

@@ -0,0 +1 @@
+<span id="_top" class="reference-page-anchor" tabindex="-1"></span>

package/src/components/ReferencePage.astro

@@ -0,0 +1,55 @@
+---
+import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro';
+import type { StarlightUserConfig } from '@astrojs/starlight/types';
+
+type Sidebar = NonNullable<StarlightUserConfig['sidebar']>;
+type Discovery = 'searchable' | 'navigation-only' | 'unlisted';
+
+interface Props {
+  title: string;
+  description: string;
+  sidebar: Sidebar;
+  discovery?: Discovery;
+  hasSidebar?: boolean;
+  template?: 'doc' | 'splash';
+}
+
+const {
+  title,
+  description,
+  sidebar,
+  discovery = 'searchable',
+  hasSidebar = true,
+  template = 'doc',
+} = Astro.props;
+const pagefind = discovery === 'searchable';
+const noindex = discovery === 'unlisted';
+---
+
+<StarlightPage
+  frontmatter={{
+    title,
+    description,
+    template,
+    pagefind,
+    prev: false,
+    next: false,
+    head: noindex ? [{ tag: 'meta', attrs: { name: 'robots', content: 'noindex, nofollow' } }] : [],
+  }}
+  sidebar={sidebar}
+  hasSidebar={hasSidebar}
+>
+  <div data-pagefind-body={pagefind ? true : undefined} data-pagefind-ignore={pagefind ? undefined : true}>
+    <slot />
+  </div>
+</StarlightPage>
+
+<script>
+  const menu = document.querySelector('starlight-menu-button');
+  const menuButton = menu?.querySelector('button');
+  if (menu instanceof HTMLElement && menuButton instanceof HTMLButtonElement) {
+    const syncExpanded = () => menuButton.setAttribute('aria-expanded', menu.getAttribute('aria-expanded') ?? 'false');
+    syncExpanded();
+    new MutationObserver(syncExpanded).observe(menu, { attributes: true, attributeFilter: ['aria-expanded'] });
+  }
+</script>

package/src/styles/theme.css

@@ -0,0 +1,42 @@
+@import '@fontsource-variable/nunito';
+
+:root {
+  --sl-font: 'Nunito Variable', Nunito, ui-sans-serif, system-ui, sans-serif;
+  --sl-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+  --sl-content-width: 72rem;
+  --sl-color-accent-low: #e9ebff;
+  --sl-color-accent: #465be8;
+  --sl-color-accent-high: #17205f;
+  --sl-color-white: #12141a;
+  --sl-color-gray-1: #252934;
+  --sl-color-gray-2: #4d5361;
+  --sl-color-gray-3: #6e7482;
+  --sl-color-gray-4: #b8bdc8;
+  --sl-color-gray-5: #dfe2e8;
+  --sl-color-gray-6: #f1f2f5;
+  --sl-color-black: #ffffff;
+  --report: #c34453;
+  --pass: #16806d;
+  --rule: #e4e6eb;
+  --paper: #ffffff;
+  --ink: #12141a;
+}
+
+:root[data-theme='dark'] {
+  --sl-color-accent-low: #20284c;
+  --sl-color-accent: #7787ff;
+  --sl-color-accent-high: #eef0ff;
+  --sl-color-white: #f4f5f8;
+  --sl-color-gray-1: #d8dbe3;
+  --sl-color-gray-2: #a5aab7;
+  --sl-color-gray-3: #777d8c;
+  --sl-color-gray-4: #414653;
+  --sl-color-gray-5: #272b34;
+  --sl-color-gray-6: #15171d;
+  --sl-color-black: #0b0c10;
+  --report: #ff8794;
+  --pass: #62d5bd;
+  --rule: #272a32;
+  --paper: #0b0c10;
+  --ink: #f4f5f8;
+}