@jfrader/storybook-docs 0.0.0-stage → 0.4.3

package/dist/styles.css

@@ -0,0 +1,688 @@
+/* The docs chrome reads --sd-* roles, which the consumer maps to its own design tokens.
+   Fallbacks keep the engine usable with no theme at all; nothing here is design-system specific. */
+:root {
+  --sd-bg: #0b0c0e;
+  --sd-surface: #121316;
+  --sd-surface-raised: #17181c;
+  --sd-surface-hover: #1d1e23;
+  --sd-border: #26272d;
+  --sd-border-subtle: #1e2025;
+  --sd-text: #f5f6f8;
+  --sd-text-muted: #9aa0ab;
+  --sd-text-subtle: #7b818c;
+  --sd-accent: #8b7cf6;
+  --sd-accent-text: #a99bff;
+  --sd-accent-soft: rgba(139, 124, 246, 0.16);
+  --sd-accent-contrast: #10111a;
+  --sd-danger: #cf3f3f;
+  --sd-danger-text: #ff8a8a;
+  --sd-success: #2f9e5b;
+  --sd-focus-ring: #a99bff;
+  --sd-radius: 12px;
+}
+/* The consumer's theme bridge is injected later and overrides these defaults. */
+
+html {
+  scroll-padding-top: max(72px, var(--sd-header-height, 55px));
+}
+html,
+body {
+  margin: 0;
+  background: var(--sd-bg);
+  color: var(--sd-text);
+  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, Inter, 'Helvetica Neue', Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+.app {
+  display: grid;
+  grid-template-columns: 276px minmax(0, 1fr);
+  min-height: 100vh;
+}
+
+.top {
+  position: sticky;
+  top: 0;
+  z-index: 5;
+  grid-column: 1 / -1;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 18px;
+  background: var(--sd-surface);
+  border-bottom: 1px solid var(--sd-border-subtle);
+}
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+.skip {
+  position: fixed;
+  top: 8px;
+  left: 8px;
+  z-index: 30;
+  padding: 8px 14px;
+  border-radius: 8px;
+  background: var(--sd-accent);
+  color: var(--sd-accent-contrast);
+  font-weight: 600;
+  text-decoration: none;
+  transform: translateY(-200%);
+}
+.skip:focus {
+  transform: none;
+}
+.nav-toggle {
+  display: none;
+}
+.main:focus {
+  outline: none;
+}
+.table-scroll {
+  overflow-x: auto;
+}
+.table-scroll tbody th code {
+  color: var(--sd-text);
+  background: none;
+  padding: 0;
+  font-weight: 600;
+}
+.table-scroll td .guidance {
+  margin: 0;
+}
+.table-scroll td .guidance > :first-child {
+  margin-top: 0;
+}
+.table-scroll td .guidance > :last-child {
+  margin-bottom: 0;
+}
+.table-scroll td p {
+  font-size: inherit;
+}
+.table-scroll summary {
+  min-block-size: 24px;
+  cursor: pointer;
+}
+.mark {
+  width: 26px;
+  height: 26px;
+  border-radius: 7px;
+  display: grid;
+  place-items: center;
+  font-weight: 700;
+  font-size: 14px;
+  color: var(--sd-accent-contrast);
+  background: var(--sd-accent);
+}
+.brand {
+  font-weight: 650;
+  letter-spacing: -0.01em;
+}
+.brand-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 12px;
+  color: var(--sd-text);
+  text-decoration: none;
+  border-radius: 7px;
+}
+.search {
+  position: relative;
+  flex: 0 1 430px;
+}
+.search input {
+  box-sizing: border-box;
+  width: 100%;
+  border: 1px solid var(--sd-text-subtle);
+  background: var(--sd-bg);
+  border-radius: 10px;
+  padding: 7px 10px;
+  color: var(--sd-text);
+  font: inherit;
+  font-size: 13px;
+}
+.search input::placeholder {
+  color: var(--sd-text-muted);
+}
+.search input:focus-visible {
+  outline: 2px solid var(--sd-focus-ring);
+  outline-offset: 1px;
+}
+/* The results list, options, marks and empty state live in src/search.css. */
+.spacer {
+  flex: 1;
+}
+.chip {
+  font-size: 11px;
+  color: var(--sd-text-muted);
+  padding: 2px 0;
+}
+.tool {
+  border: 1px solid var(--sd-text-subtle);
+  background: var(--sd-surface-raised);
+  color: var(--sd-text);
+  border-radius: 8px;
+  padding: 5px 10px;
+  font: inherit;
+  font-size: 12.5px;
+  cursor: pointer;
+  text-decoration: none;
+}
+.tool:hover {
+  background: var(--sd-surface-hover);
+}
+.tool:focus-visible,
+:where(.app) summary:focus-visible:where(:not(.story-lane *)),
+.table-scroll:focus-visible,
+.shot:focus-visible,
+:where(.app) a:focus-visible:where(:not(.story-lane *)) {
+  outline: 2px solid var(--sd-focus-ring);
+  outline-offset: 2px;
+}
+
+.nav {
+  border-right: 0;
+  background: var(--sd-surface);
+  padding: 14px 12px 80px;
+}
+.nav a {
+  display: block;
+  padding: 6px 10px;
+  border-radius: 8px;
+  color: var(--sd-text-muted);
+  font-size: 13.5px;
+  text-decoration: none;
+}
+.nav a:hover {
+  background: var(--sd-surface-hover);
+  color: var(--sd-text);
+}
+.nav a.on {
+  background: var(--sd-accent-soft);
+  color: var(--sd-text);
+  font-weight: 600;
+}
+.grp {
+  margin: 16px 0 4px;
+  padding: 0 10px;
+  font-size: 10.5px;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+  color: var(--sd-text-muted);
+  font-weight: 700;
+}
+.nav-note {
+  margin: 22px 10px 0;
+  font-size: 11.5px;
+  line-height: 1.6;
+  color: var(--sd-text-muted);
+}
+
+.main {
+  padding: 48px clamp(28px, 4vw, 64px) 160px;
+  min-width: 0;
+}
+.crumb {
+  font-size: 12.5px;
+  color: var(--sd-text-muted);
+  margin-bottom: 10px;
+}
+/* Zero-specificity boundaries keep chrome typography out of stories and document portals. */
+:where(.app) h1:where(:not(.story-lane *)) {
+  font-size: clamp(36px, 3.5vw, 52px);
+  line-height: 1.12;
+  font-weight: 650;
+  letter-spacing: -0.04em;
+  margin: 0 0 18px;
+}
+:where(.app) h2:where(:not(.story-lane *)) {
+  font-size: 24px;
+  line-height: 1.3;
+  font-weight: 650;
+  letter-spacing: -0.025em;
+  margin: 48px 0 16px;
+}
+:where(.app) h3:where(:not(.story-lane *)) {
+  font-size: 17px;
+  line-height: 1.4;
+  margin: 0 0 6px;
+}
+:where(.app) p:where(:not(.story-lane *)),
+:where(.app) li:where(:not(.story-lane *)) {
+  color: var(--sd-text-muted);
+  line-height: 1.65;
+  font-size: 14.5px;
+}
+.lede {
+  font-size: 18px;
+  max-width: 64ch;
+  line-height: 1.7;
+}
+:where(.app) a:where(:not(.story-lane *)) {
+  color: var(--sd-accent-text);
+}
+:where(.app) code:where(:not(.story-lane *)) {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12.5px;
+  background: var(--sd-surface-raised);
+  border: 0;
+  border-radius: 5px;
+  padding: 1px 5px;
+}
+.card {
+  padding: 16px 0;
+  margin: 12px 0;
+}
+.grid2 {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 24px 40px;
+}
+.tiles {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 32px;
+  margin: 32px 0 48px;
+}
+.tile .num {
+  font-size: 36px;
+  font-weight: 600;
+  letter-spacing: -0.04em;
+  font-variant-numeric: tabular-nums;
+}
+.tile b {
+  display: block;
+  margin: 2px 0 4px;
+  font-size: 14px;
+}
+.tile span {
+  color: var(--sd-text-muted);
+  font-size: 13px;
+}
+
+.summary-row {
+  display: flex;
+  align-items: center;
+  gap: 6px 18px;
+  flex-wrap: wrap;
+  margin: 4px 0 14px;
+}
+
+.story-failed {
+  color: color-mix(in srgb, var(--sd-danger) 55%, var(--sd-text));
+  font-size: 13px;
+}
+.lazy-placeholder {
+  padding: 26px;
+  color: var(--sd-text-muted);
+  font-size: 13px;
+}
+
+/* Skeletons: one pulse shared by every loading state (frames, guidance, props, header). */
+.skeleton {
+  display: block;
+  background: var(--sd-surface-raised);
+  border-radius: 6px;
+  animation: sd-pulse 1.4s ease-in-out infinite;
+}
+.skeleton-stack {
+  display: grid;
+  gap: 10px;
+}
+.skeleton-page {
+  display: grid;
+  gap: 16px;
+  margin: 18px 0;
+}
+@keyframes sd-pulse {
+  0%,
+  100% {
+    opacity: 0.5;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+  .skeleton {
+    animation: none;
+  }
+}
+
+pre.code {
+  background: var(--sd-surface);
+  border: 0;
+  border-radius: var(--sd-radius);
+  padding: 16px 18px;
+  overflow: auto;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12.5px;
+  line-height: 1.6;
+  color: var(--sd-text);
+  margin: 10px 0;
+}
+.hint,
+:is(.table-scroll, .guidance-table) > table th + th,
+:is(.table-scroll, .guidance-table) > table td + td {
+  border-left: 0;
+}
+code.type {
+  white-space: pre-wrap;
+}
+.req {
+  margin-left: 6px;
+  font-size: 10.5px;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--sd-danger) 55%, var(--sd-text));
+}
+
+/* Authored guidance (Markdown) */
+.guidance {
+  margin: 18px 0 6px;
+}
+.guidance h2 {
+  margin-top: 26px;
+}
+.guidance h3 {
+  margin: 18px 0 4px;
+  font-size: 14px;
+}
+:is(.table-scroll, .guidance-table) > table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: 13.5px;
+  margin: 16px 0;
+  line-height: 1.6;
+}
+:is(.table-scroll, .guidance-table) > table th {
+  text-align: left;
+  font-size: 11px;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--sd-text-muted);
+  padding: 12px 16px;
+  background: var(--sd-surface);
+  border-bottom: 1px solid var(--sd-border);
+}
+:is(.table-scroll, .guidance-table) > table tbody th {
+  font-size: inherit;
+  letter-spacing: normal;
+  text-transform: none;
+  font-weight: 400;
+  color: var(--sd-text-muted);
+  vertical-align: top;
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--sd-border-subtle);
+}
+:is(.table-scroll, .guidance-table) > table td {
+  padding: 14px 16px;
+  border-bottom: 1px solid var(--sd-border-subtle);
+  vertical-align: top;
+  color: var(--sd-text-muted);
+}
+
+.swatches {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
+  gap: 12px;
+}
+.sw {
+  border: 1px solid var(--sd-border);
+  border-radius: 10px;
+  overflow: hidden;
+}
+.sw .c {
+  height: 54px;
+}
+.sw .n {
+  padding: 8px 10px;
+  font-size: 12px;
+  color: var(--sd-text-muted);
+}
+.sw .n b {
+  display: block;
+  font-size: 12.5px;
+  color: var(--sd-text);
+}
+
+.scale-row {
+  display: flex;
+  align-items: baseline;
+  gap: 14px;
+  padding: 10px 0;
+  border-bottom: 1px solid var(--sd-border-subtle);
+}
+.scale-row .meta {
+  width: 200px;
+  flex: 0 0 auto;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  color: var(--sd-text-muted);
+}
+
+/* Foundations: spacing, shape, elevation, motion */
+.scale-rows {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 4px;
+  margin: 8px 0;
+}
+.space-row {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 6px 0;
+  border-bottom: 1px solid var(--sd-border-subtle);
+}
+.space-row .meta {
+  width: 210px;
+  flex: 0 0 auto;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  color: var(--sd-text-muted);
+}
+.bar {
+  height: 14px;
+  border-radius: 4px;
+  background: var(--sd-accent);
+  min-width: 2px;
+}
+.bar-outline {
+  height: 14px;
+  border-radius: 4px;
+  border: 1px dashed var(--sd-border);
+  min-width: 2px;
+}
+.radius-row,
+.shadow-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 18px;
+  margin: 10px 0;
+}
+.radius-cell,
+.shadow-cell {
+  display: grid;
+  gap: 8px;
+}
+.radius-cell .meta,
+.shadow-cell .meta {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12px;
+  color: var(--sd-text-muted);
+}
+.radius-box {
+  width: 64px;
+  height: 64px;
+  background: var(--sd-accent-soft);
+  border: 1px solid var(--sd-border);
+}
+.shadow-box {
+  width: 124px;
+  height: 76px;
+  border-radius: var(--sd-radius);
+  background: var(--sd-surface-raised);
+  border: 1px solid var(--sd-border);
+}
+.motion-demo {
+  width: 64px;
+  height: 14px;
+  border-radius: 4px;
+  background: var(--sd-accent);
+  animation: sd-slide 1.2s ease-in-out infinite alternate;
+}
+@keyframes sd-slide {
+  from {
+    transform: translateX(0);
+  }
+  to {
+    transform: translateX(140px);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .motion-demo {
+    animation: none;
+  }
+}
+:where(.app) section > h3:where(:not(.story-lane *)) {
+  margin: 22px 0 4px;
+}
+
+/* Overview: area directory */
+.group-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
+  gap: 32px 40px;
+  margin: 24px 0;
+}
+.group-card {
+  margin: 0;
+  padding: 20px 0 0;
+  border-top: 1px solid var(--sd-border);
+}
+.group-card h3 {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  margin: 0 0 12px;
+}
+.group-card .count {
+  font-size: 11.5px;
+  font-weight: 600;
+  color: var(--sd-text-muted);
+  font-variant-numeric: tabular-nums;
+}
+.group-card ul {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  columns: 1;
+}
+.group-card li {
+  padding: 2px 0;
+}
+.group-card li a {
+  font-size: 13.5px;
+  /* Touch targets, not just text boxes. */
+  display: inline-flex;
+  align-items: center;
+  min-block-size: 24px;
+  color: var(--sd-text-muted);
+  text-decoration: none;
+}
+.group-card li a:hover {
+  color: var(--sd-accent-text);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+.group-card .hint {
+  margin: 8px 0 0;
+}
+
+/* Narrow viewports: one column, the sidebar becomes a menu under the header. */
+@media (max-width: 1000px) {
+  .app {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .top {
+    flex-wrap: wrap;
+    gap: 8px 12px;
+  }
+  .nav-toggle {
+    display: inline-block;
+  }
+  .search {
+    order: 10;
+    flex: 1 1 100%;
+  }
+  .nav {
+    display: none;
+    position: fixed;
+    inset-inline: 0;
+    top: var(--sd-header-height, 55px);
+    z-index: 4;
+    box-sizing: border-box;
+    max-height: min(60vh, calc(100dvh - var(--sd-header-height, 55px)));
+    overflow-y: auto;
+    border-right: 0;
+    border-bottom: 1px solid var(--sd-border);
+    padding-bottom: 20px;
+  }
+  .nav.open {
+    display: block;
+  }
+  .main {
+    padding: 32px 20px 120px;
+  }
+  .grid2 {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .tiles {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 20px;
+    margin: 24px 0 36px;
+  }
+  .tile {
+    display: grid;
+    grid-template-columns: 80px minmax(0, 1fr);
+    column-gap: 16px;
+    padding: 0;
+    margin: 0;
+  }
+  .tile .num { grid-row: span 2; font-size: 28px; }
+  .scale-row,
+  .space-row {
+    flex-wrap: wrap;
+  }
+  .scale-row .meta,
+  .space-row .meta {
+    width: auto;
+    flex: 0 1 auto;
+    overflow-wrap: anywhere;
+  }
+  .bar,
+  .bar-outline {
+    max-width: 100%;
+  }
+}
+@media (forced-colors: active) {
+  .nav a.on,
+  .search-results li[aria-selected='true'] {
+    outline: 1px solid;
+    outline-offset: -1px;
+  }
+  pre.code,
+  .sd-controls {
+    outline: 1px solid;
+  }
+}

package/dist/toc.d.ts

@@ -0,0 +1,10 @@
+import './toc.css';
+/** The hash without its query: `#/components/button?story=Variants` → `#/components/button`. */
+export declare function hashPath(hash: string): string;
+/** The `?story=` deep-link target of a hash, if any. */
+export declare function storyFromHash(hash: string): string | null;
+export declare function storyLink(location: Location, story: string): string;
+/** The "On this page" rail and the `?story=` deep-link landing. */
+export declare function PageRail({ pageKey }: {
+    pageKey: string;
+}): import("react").JSX.Element | null;

package/dist/virtual.d.ts

@@ -0,0 +1,42 @@
+declare module 'virtual:storybook-docs/site' {
+  type StorybookDocsConfig = import('./config.js').StorybookDocsConfig;
+  export const site: StorybookDocsConfig['site'];
+  export const theme: NonNullable<StorybookDocsConfig['theme']>;
+  export const pages: Required<NonNullable<StorybookDocsConfig['pages']>>;
+  export const hasTokens: boolean;
+  export const themeCss: string;
+}
+
+declare module 'virtual:storybook-docs/catalog' {
+  type CatalogEntry = import('./config.js').CatalogEntry;
+  export const catalog: CatalogEntry[];
+  export const storySource: string;
+  export const groups: string[];
+  export const stats: { components: number; stories: number; groups: number };
+}
+
+declare module 'virtual:storybook-docs/tokens' {
+  export const vars: Record<string, unknown>;
+}
+
+declare module 'virtual:storybook-docs/props' {
+  type ComponentPropsDoc = import('./prop-docs.js').ComponentPropsDoc;
+  export function loadProps(slug: string): Promise<{ components: ComponentPropsDoc[] }>;
+}
+
+declare module 'virtual:storybook-docs/guidance' {
+  export function loadGuidance(slug: string): Promise<{ markdown: string }>;
+}
+
+declare module 'virtual:storybook-docs/releases' {
+  export const releases: { version: string | null; changelog: string | null };
+}
+
+declare module 'virtual:storybook-docs/global-styles';
+
+declare module 'virtual:storybook-docs/code' {
+  import type { ComponentType } from 'react';
+  export const provided: boolean;
+  /** The consumer's code renderer, or undefined when the config names none. */
+  export const Code: ComponentType<{ code: string; language?: string }> | undefined;
+}