@cedros/data-react 0.1.7 → 0.1.8

package/dist/site-templates/docs-styles.css

@@ -1,4 +1,4 @@
-/* ─── Syntax highlighting (GitHub-light inspired, dark-mode aware) ──── */
+/* Syntax highlighting --------------------------------------------------- */
 
 .cedros-site__prose .hljs {
   color: var(--cds-fg);
@@ -7,81 +7,221 @@
 
 .hljs-comment,
 .hljs-quote {
-  color: color-mix(in srgb, var(--cds-muted) 85%, var(--cds-fg) 15%);
+  color: color-mix(in srgb, var(--cds-muted) 82%, var(--cds-fg) 18%);
   font-style: italic;
 }
 
 .hljs-keyword,
 .hljs-selector-tag,
 .hljs-type {
-  color: #cf222e;
+  color: #bc2d31;
 }
 
 .hljs-string,
 .hljs-addition {
-  color: #0a3069;
+  color: #005d8f;
 }
 
 .hljs-number,
 .hljs-literal,
 .hljs-variable,
 .hljs-template-variable {
-  color: #0550ae;
+  color: #0f5bd8;
 }
 
 .hljs-title,
 .hljs-section,
 .hljs-attr {
-  color: #953800;
+  color: #92521d;
 }
 
 .hljs-built_in,
 .hljs-name {
-  color: #8250df;
+  color: #7750c4;
 }
 
 .hljs-deletion {
-  color: #82071e;
-  background: #ffebe9;
+  color: #821c2f;
+  background: #fce8ee;
 }
 
 @media (prefers-color-scheme: dark) {
   .hljs-keyword,
   .hljs-selector-tag,
   .hljs-type {
-    color: #ff7b72;
+    color: #ff8f7a;
   }
 
   .hljs-string,
   .hljs-addition {
-    color: #a5d6ff;
+    color: #9cd4ff;
   }
 
   .hljs-number,
   .hljs-literal,
   .hljs-variable,
   .hljs-template-variable {
-    color: #79c0ff;
+    color: #83b8ff;
   }
 
   .hljs-title,
   .hljs-section,
   .hljs-attr {
-    color: #ffa657;
+    color: #ffbc77;
   }
 
   .hljs-built_in,
   .hljs-name {
-    color: #d2a8ff;
+    color: #ceb1ff;
   }
 
   .hljs-deletion {
-    color: #ffdcd7;
-    background: #67060c;
+    color: #ffdde5;
+    background: #5f1320;
   }
 }
 
-/* ─── Code block copy button ──── */
+/* Markdown/prose -------------------------------------------------------- */
+
+.cedros-site__prose {
+  display: grid;
+  gap: 1rem;
+  line-height: 1.74;
+  color: var(--cds-fg);
+}
+
+.cedros-site__prose :where(h2, h3, h4) {
+  margin: 1.4rem 0 0;
+  line-height: 1.18;
+  letter-spacing: -0.04em;
+  scroll-margin-top: 6.5rem;
+}
+
+.cedros-site__prose h2 {
+  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
+}
+
+.cedros-site__prose h3 {
+  font-size: 1.18rem;
+}
+
+.cedros-site__prose h4 {
+  font-size: 1rem;
+}
+
+.cedros-site__prose p,
+.cedros-site__prose ul,
+.cedros-site__prose ol,
+.cedros-site__prose table,
+.cedros-site__prose pre,
+.cedros-site__prose blockquote {
+  margin: 0;
+}
+
+.cedros-site__prose ul,
+.cedros-site__prose ol {
+  padding-left: 1.1rem;
+  display: grid;
+  gap: 0.55rem;
+}
+
+.cedros-site__prose li {
+  color: var(--cds-muted);
+}
+
+.cedros-site__prose li > * {
+  color: var(--cds-fg);
+}
+
+.cedros-site__prose strong {
+  color: var(--cds-fg);
+}
+
+.cedros-site__prose hr {
+  width: 100%;
+  height: 1px;
+  border: 0;
+  background: color-mix(in srgb, var(--cds-border) 84%, transparent);
+}
+
+.cedros-site__prose a {
+  color: var(--cds-link-strong);
+  text-decoration-color: color-mix(in srgb, var(--cds-link) 42%, transparent);
+  text-underline-offset: 0.22em;
+}
+
+.cedros-site__prose :where(h2, h3, h4) a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.cedros-site__prose pre {
+  overflow-x: auto;
+  padding: 1rem 1rem 1.05rem;
+  border-radius: calc(var(--cds-radius) - 0.05rem);
+  border: 1px solid color-mix(in srgb, var(--cds-border) 88%, transparent);
+  background: color-mix(in srgb, var(--cds-panel-muted) 82%, transparent);
+  box-shadow: inset 0 1px 0 rgb(255 255 255 / 24%);
+}
+
+.cedros-site__prose code {
+  font-family:
+    var(--cedros-font-mono, "JetBrains Mono", "SFMono-Regular", "Consolas", monospace);
+  font-size: 0.92em;
+}
+
+.cedros-site__prose :not(pre) > code {
+  border: 1px solid color-mix(in srgb, var(--cds-border) 84%, transparent);
+  border-radius: 0.45rem;
+  background: color-mix(in srgb, var(--cds-panel-muted) 78%, transparent);
+  padding: 0.12rem 0.38rem;
+}
+
+.cedros-site__prose blockquote {
+  padding: 0.85rem 1rem;
+  border-left: 3px solid color-mix(in srgb, var(--cds-link) 36%, var(--cds-border) 64%);
+  color: var(--cds-muted);
+  background: color-mix(in srgb, var(--cds-panel-muted) 84%, transparent);
+  border-radius: calc(var(--cds-radius) - 0.18rem);
+}
+
+.cedros-site__prose img {
+  max-width: 100%;
+  height: auto;
+  border-radius: calc(var(--cds-radius) - 0.1rem);
+  border: 1px solid color-mix(in srgb, var(--cds-border) 78%, transparent);
+}
+
+.cedros-site__content-warning {
+  margin: 0;
+  color: var(--cds-muted);
+  border: 1px dashed color-mix(in srgb, var(--cds-border) 88%, transparent);
+  border-radius: calc(var(--cds-radius) - 0.1rem);
+  padding: 0.8rem 0.95rem;
+  background: color-mix(in srgb, var(--cds-panel-muted) 82%, transparent);
+}
+
+.cedros-site__prose table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 0.9rem;
+  overflow: hidden;
+  border-radius: calc(var(--cds-radius) - 0.1rem);
+}
+
+.cedros-site__prose th,
+.cedros-site__prose td {
+  padding: 0.65rem 0.8rem;
+  border: 1px solid color-mix(in srgb, var(--cds-border) 84%, transparent);
+  text-align: left;
+}
+
+.cedros-site__prose th {
+  background: color-mix(in srgb, var(--cds-panel-muted) 86%, transparent);
+  font-weight: 700;
+}
+
+/* Code block copy ------------------------------------------------------- */
 
 .cedros-site__code-block {
   position: relative;
@@ -89,17 +229,20 @@
 
 .cedros-site__code-copy {
   position: absolute;
-  top: 0.45rem;
-  right: 0.45rem;
-  padding: 0.2rem 0.5rem;
-  font-size: 0.7rem;
-  border: 1px solid var(--cds-border);
-  border-radius: calc(var(--cds-radius) - 2px);
-  background: var(--cds-bg);
+  top: 0.7rem;
+  right: 0.7rem;
+  min-height: 2rem;
+  border: 1px solid color-mix(in srgb, var(--cds-border) 84%, transparent);
+  border-radius: 999px;
+  padding: 0 0.65rem;
+  background: color-mix(in srgb, var(--cds-panel) 92%, transparent);
   color: var(--cds-muted);
   cursor: pointer;
   opacity: 0;
-  transition: opacity 0.15s;
+  transition:
+    opacity 140ms ease,
+    color 140ms ease,
+    border-color 140ms ease;
 }
 
 .cedros-site__code-block:hover .cedros-site__code-copy {
@@ -108,69 +251,49 @@
 
 .cedros-site__code-copy:hover {
   color: var(--cds-fg);
-  border-color: var(--cds-fg);
+  border-color: color-mix(in srgb, var(--cds-link) 36%, var(--cds-border) 64%);
 }
 
-/* ─── Callout / alert styles (remark-github-blockquote-alert) ──── */
+/* Alert callouts -------------------------------------------------------- */
 
 .markdown-alert {
   margin: 0;
-  padding: 0.65rem 0.85rem;
+  padding: 0.8rem 0.95rem;
   border-left: 3px solid var(--cds-border);
-  border-radius: calc(var(--cds-radius) - 2px);
-  background: color-mix(in srgb, var(--cds-muted-bg) 72%, var(--cds-bg) 28%);
+  border-radius: calc(var(--cds-radius) - 0.18rem);
+  background: color-mix(in srgb, var(--cds-panel-muted) 84%, transparent);
 }
 
 .markdown-alert .markdown-alert-title {
-  font-weight: 600;
+  font-weight: 700;
   font-size: 0.82rem;
-  margin-bottom: 0.35rem;
+  margin-bottom: 0.4rem;
   display: flex;
   align-items: center;
   gap: 0.35rem;
 }
 
 .markdown-alert-note {
-  border-left-color: #0969da;
+  border-left-color: #0d6fd8;
 }
 
 .markdown-alert-tip {
-  border-left-color: #1a7f37;
+  border-left-color: #188b58;
 }
 
 .markdown-alert-important {
-  border-left-color: #8250df;
+  border-left-color: #7750c4;
 }
 
 .markdown-alert-warning {
-  border-left-color: #9a6700;
+  border-left-color: #b27706;
 }
 
 .markdown-alert-caution {
-  border-left-color: #cf222e;
+  border-left-color: #d14c62;
 }
 
-/* ─── Prose table styles ──── */
-
-.cedros-site__prose table {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: 0.85rem;
-}
-
-.cedros-site__prose th,
-.cedros-site__prose td {
-  padding: 0.45rem 0.65rem;
-  border: 1px solid var(--cds-border);
-  text-align: left;
-}
-
-.cedros-site__prose th {
-  background: var(--cds-muted-bg);
-  font-weight: 600;
-}
-
-/* ─── Collapsible sidebar sections ──── */
+/* Docs chrome ----------------------------------------------------------- */
 
 .cedros-site__docs-section summary {
   cursor: pointer;
@@ -183,38 +306,110 @@
 }
 
 .cedros-site__docs-section summary::before {
-  content: "▸ ";
-  font-size: 0.65em;
-  vertical-align: middle;
+  content: "";
+  display: inline-block;
+  width: 0.45rem;
+  height: 0.45rem;
+  margin-right: 0.55rem;
+  border-right: 1.5px solid currentColor;
+  border-bottom: 1.5px solid currentColor;
+  transform: rotate(-45deg) translateY(-1px);
+  transition: transform 140ms ease;
 }
 
 .cedros-site__docs-section[open] summary::before {
-  content: "▾ ";
+  transform: rotate(45deg) translateY(-1px);
 }
 
-/* ─── Mobile sidebar drawer ──── */
-
 .cedros-site__sidebar-toggle {
   display: none;
+  align-items: center;
+  justify-content: space-between;
   width: 100%;
-  padding: 0.55rem 0.75rem;
-  font-size: 0.85rem;
-  font-weight: 600;
-  border: 1px solid var(--cds-border);
-  border-radius: var(--cds-radius);
-  background: var(--cds-bg);
+  min-height: 3.15rem;
+  padding: 0.85rem 0.95rem;
+  border: 1px solid color-mix(in srgb, var(--cds-border) 86%, transparent);
+  border-radius: calc(var(--cds-radius) - 0.05rem);
+  background: color-mix(in srgb, var(--cds-panel) 90%, transparent);
   color: var(--cds-fg);
   cursor: pointer;
   text-align: left;
+  box-shadow: var(--cds-shadow-sm);
+}
+
+.cedros-site__sidebar-toggle-copy {
+  display: grid;
+  gap: 0.12rem;
+}
+
+.cedros-site__sidebar-toggle-label {
+  font-size: 0.86rem;
+  font-weight: 700;
+}
+
+.cedros-site__sidebar-toggle-meta,
+.cedros-site__sidebar-toggle-state {
+  font-size: 0.76rem;
+  color: var(--cds-muted);
 }
 
 .cedros-site__sidebar-overlay {
   display: none;
 }
 
-@media (max-width: 900px) {
+.cedros-site__docs-article {
+  overflow: hidden;
+}
+
+.cedros-site__toc-links {
+  display: grid;
+  gap: 0.35rem;
+}
+
+.cedros-site__toc-link {
+  display: inline-flex;
+  align-items: center;
+  min-height: 2.2rem;
+  border: 1px solid transparent;
+  border-radius: calc(var(--cds-radius) - 0.2rem);
+  padding: 0.42rem 0.62rem;
+  color: var(--cds-muted);
+  text-decoration: none;
+  font-size: 0.81rem;
+  transition:
+    color 140ms ease,
+    background 140ms ease,
+    border-color 140ms ease;
+}
+
+.cedros-site__toc-link--depth-2 {
+  padding-left: 0.62rem;
+}
+
+.cedros-site__toc-link--depth-3 {
+  padding-left: 1rem;
+}
+
+.cedros-site__toc-link--depth-4 {
+  padding-left: 1.35rem;
+}
+
+.cedros-site__toc-link:hover {
+  color: var(--cds-fg);
+  background: color-mix(in srgb, var(--cds-panel-muted) 82%, transparent);
+  border-color: color-mix(in srgb, var(--cds-border) 84%, transparent);
+}
+
+.cedros-site__toc-link--active {
+  color: var(--cds-link-strong);
+  border-color: color-mix(in srgb, var(--cds-link) 38%, var(--cds-border) 62%);
+  background: var(--cds-link-soft);
+  font-weight: 700;
+}
+
+@media (max-width: 960px) {
   .cedros-site__sidebar-toggle {
-    display: block;
+    display: inline-flex;
   }
 
   .cedros-site__docs-sidebar {
@@ -224,11 +419,14 @@
   .cedros-site__docs-sidebar--open {
     display: grid;
     position: fixed;
-    inset: 0;
+    inset: 0 auto 0 0;
     z-index: 100;
+    width: min(340px, calc(100vw - 1.5rem));
+    max-width: none;
+    height: 100vh;
     overflow-y: auto;
-    max-width: 320px;
-    box-shadow: 4px 0 12px rgba(0, 0, 0, 0.15);
+    border-radius: 0 calc(var(--cds-radius) + 0.1rem) calc(var(--cds-radius) + 0.1rem) 0;
+    box-shadow: 0 36px 80px rgb(15 23 42 / 24%);
   }
 
   .cedros-site__sidebar-overlay {
@@ -236,30 +434,24 @@
     position: fixed;
     inset: 0;
     z-index: 99;
-    background: rgba(0, 0, 0, 0.3);
+    background: rgb(15 23 42 / 38%);
+    backdrop-filter: blur(3px);
   }
-}
-
-/* ─── Docs article modifier ──── */
-
-.cedros-site__docs-article {
-  overflow: hidden;
-}
 
-/* ─── TOC scroll-spy active link ──── */
-
-.cedros-site__toc-link--active {
-  color: var(--cds-link);
-  font-weight: 600;
+  .cedros-site__docs-sidebar-close {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+  }
 }
 
-/* ─── Autolinked heading anchors ──── */
-
-.cedros-site__prose :where(h2, h3, h4) a {
-  color: inherit;
-  text-decoration: none;
-}
+@media (max-width: 700px) {
+  .cedros-site__prose {
+    gap: 0.9rem;
+    font-size: 0.97rem;
+  }
 
-.cedros-site__prose :where(h2, h3, h4) a:hover {
-  text-decoration: underline;
+  .cedros-site__code-copy {
+    opacity: 1;
+  }
 }

package/dist/site-templates/docsNavigation.d.ts

@@ -1,3 +1,4 @@
+import { type DocsNormalizationOptions } from "../docsContract.js";
 import type { DocsIndexEntry } from "./contentIndex.js";
 export interface DocsSidebarItem {
     key: string;
@@ -36,12 +37,31 @@ export interface DocsPrevNext<T extends DocsIndexEntry = DocsIndexEntry> {
     previousDoc?: DocsPagerLink<T>;
     nextDoc?: DocsPagerLink<T>;
 }
-export interface FetchDocEntryOptions {
-    basePath?: string;
+export interface FetchDocEntryOptions extends DocsNormalizationOptions {
+}
+export interface DocsNavigationOptions extends FetchDocEntryOptions {
+    currentPath?: string;
+    groupByProduct?: boolean;
+    preserveOrder?: boolean;
+    collapsible?: boolean;
+    productSlug?: string;
+    sectionKey?: string;
 }
 export declare function buildDocsSidebarSections(docs: DocsIndexEntry[], basePath?: string): DocsSidebarSection[];
 export declare function fetchDocEntry<T extends DocsIndexEntry>(docs: T[], slugOrPath: string, options?: FetchDocEntryOptions): T | undefined;
+/**
+ * Builds sidebar-ready docs navigation from a normalized docs collection.
+ *
+ * Groups by product automatically when multiple products exist and preserves explicit ordering fields when present.
+ */
+export declare function buildDocsNavigation<T extends DocsIndexEntry>(docs: T[], options?: DocsNavigationOptions): DocsSidebarSection[];
 export declare function buildDocsTree<T extends DocsIndexEntry>(docs: T[], basePath?: string): DocsTreeSection<T>[];
 export declare function buildHierarchicalDocsSidebarSections<T extends DocsIndexEntry>(docs: T[], basePath?: string): DocsSidebarSection[];
-export declare function buildDocsPrevNext<T extends DocsIndexEntry>(docs: T[], currentSlugOrPath: string, options?: FetchDocEntryOptions): DocsPrevNext<T>;
+/**
+ * Builds previous/next links from the same ordered docs collection used for navigation.
+ *
+ * When the current doc belongs to a product, pager links stay inside that product by default.
+ */
+export declare function buildDocsArticlePager<T extends DocsIndexEntry>(docs: T[], currentSlugOrPath: string, options?: DocsNavigationOptions): DocsPrevNext<T>;
+export declare function buildDocsPrevNext<T extends DocsIndexEntry>(docs: T[], currentSlugOrPath: string, options?: DocsNavigationOptions): DocsPrevNext<T>;
 export declare function withActiveDocsSidebar(sections: DocsSidebarSection[], currentPath?: string): DocsSidebarSection[];