@oddkin/workbench 0.0.0-stage → 1.0.0-beta.0

package/dist/app/styles.js

@@ -0,0 +1,373 @@
+/**
+ * Shell styles (workbench-pages.md §3): light DOM, so every selector is scoped to
+ * `oddkin-workbench`. Values come from Oddkin tokens; layout responds to container widths. The
+ * shell page links `@oddkin/components/css/layout.css`: rows, clusters, stacks, and the card grid
+ * are its classes on the templates (with their override properties here). The two-column frame
+ * (`.wb-layout`, `.wb-page`) is this sheet's own: it switches at the `wb-shell` and `wb-main`
+ * thresholds together with the sidebar disclosure and the table of contents.
+ */
+import { css } from '@oddkin/core/styles';
+export const shellStyles = css `
+  body:has(> oddkin-workbench) {
+    margin: 0;
+  }
+  oddkin-workbench {
+    container: wb-shell / inline-size;
+    display: block;
+    min-block-size: 100vh;
+    background: var(--odd-color-canvas);
+    color: var(--odd-color-text-primary);
+    font-family: var(--odd-font-family-sans);
+    font-size: var(--odd-font-size-md);
+    line-height: var(--odd-line-height-normal);
+  }
+  oddkin-workbench :focus-visible {
+    outline: var(--odd-focus-width) solid var(--odd-color-focus-ring);
+    outline-offset: var(--odd-focus-offset);
+  }
+  oddkin-workbench a {
+    color: var(--odd-color-link);
+  }
+  oddkin-workbench code {
+    font-family: var(--odd-font-family-mono);
+    font-size: 0.9em;
+  }
+  oddkin-workbench .wb-visually-hidden {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+  oddkin-workbench .wb-skip {
+    position: absolute;
+    inset-block-start: var(--odd-space-sm);
+    inset-inline-start: var(--odd-space-sm);
+    z-index: 2;
+    padding: var(--odd-space-xs) var(--odd-space-sm);
+    background: var(--odd-color-surface-raised);
+    border: var(--odd-border-width-default) solid var(--odd-color-border-strong);
+    border-radius: var(--odd-radius-sm);
+  }
+  oddkin-workbench .wb-skip:not(:focus) {
+    clip-path: inset(50%);
+    inline-size: 1px;
+    block-size: 1px;
+    overflow: hidden;
+    padding: 0;
+    border: 0;
+  }
+
+  /* Header */
+  oddkin-workbench .wb-header {
+    --odd-cluster-gap: var(--odd-space-sm) var(--odd-space-lg);
+    padding: var(--odd-space-sm) var(--odd-space-xl);
+    background: var(--odd-color-surface-default);
+    border-block-end: var(--odd-border-width-default) solid var(--odd-color-border-default);
+  }
+  oddkin-workbench .wb-brand {
+    --odd-row-gap: var(--odd-space-xs);
+    color: inherit;
+    font-weight: var(--odd-font-weight-semibold);
+    text-decoration: none;
+  }
+  oddkin-workbench .wb-brand img {
+    block-size: 1.5rem;
+  }
+  oddkin-workbench .wb-primary ul,
+  oddkin-workbench .wb-sidebar ul,
+  oddkin-workbench .wb-toc ul,
+  oddkin-workbench .wb-cards,
+  oddkin-workbench .wb-search-results {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+  oddkin-workbench .wb-primary ul {
+    --odd-cluster-gap: var(--odd-space-xs) var(--odd-space-lg);
+    align-items: stretch;
+  }
+  oddkin-workbench .wb-primary a {
+    display: inline-block;
+    padding-block: var(--odd-space-2xs);
+    color: var(--odd-color-text-secondary);
+    text-decoration: none;
+  }
+  oddkin-workbench .wb-primary a[aria-current] {
+    color: var(--odd-color-text-primary);
+    box-shadow: inset 0 calc(-1 * var(--odd-border-width-strong)) 0 var(--odd-color-action-default);
+  }
+  oddkin-workbench .wb-tools {
+    --odd-cluster-gap: var(--odd-space-sm) var(--odd-space-md);
+    margin-inline-start: auto;
+  }
+  oddkin-workbench .wb-tools label {
+    --odd-row-gap: var(--odd-space-xs);
+    color: var(--odd-color-text-secondary);
+    font-size: var(--odd-font-size-sm);
+  }
+  oddkin-workbench input,
+  oddkin-workbench select,
+  oddkin-workbench button {
+    font: inherit;
+    color: inherit;
+  }
+  oddkin-workbench input[type='search'],
+  oddkin-workbench select {
+    padding: var(--odd-space-2xs) var(--odd-space-xs);
+    background: var(--odd-color-surface-default);
+    border: var(--odd-border-width-default) solid var(--odd-color-border-strong);
+    border-radius: var(--odd-radius-sm);
+  }
+
+  /* Search */
+  oddkin-workbench .wb-search {
+    position: relative;
+  }
+  oddkin-workbench .wb-search-results {
+    position: absolute;
+    inset-inline-end: 0;
+    inset-block-start: calc(100% + var(--odd-space-2xs));
+    z-index: 3;
+    inline-size: min(28rem, 90cqi);
+    max-block-size: 70vh;
+    overflow: auto;
+    padding: var(--odd-space-xs);
+    background: var(--odd-color-surface-raised);
+    border: var(--odd-border-width-default) solid var(--odd-color-border-default);
+    border-radius: var(--odd-radius-md);
+    box-shadow: var(--odd-elevation-md);
+  }
+  oddkin-workbench .wb-search-results a {
+    display: block;
+    padding: var(--odd-space-2xs) var(--odd-space-xs);
+    border-radius: var(--odd-radius-sm);
+    color: inherit;
+    text-decoration: none;
+  }
+  oddkin-workbench .wb-search-results a:hover {
+    background: var(--odd-color-surface-hover);
+  }
+  oddkin-workbench .wb-search-results small {
+    display: block;
+    color: var(--odd-color-text-secondary);
+  }
+
+  /* Layout */
+  oddkin-workbench .wb-banner {
+    margin: 0;
+    padding: var(--odd-space-xs) var(--odd-space-xl);
+    background: var(--odd-color-warning-surface);
+    color: var(--odd-color-warning-foreground);
+  }
+  oddkin-workbench .wb-layout {
+    display: grid;
+    grid-template-columns: minmax(11rem, 15rem) minmax(0, 1fr);
+    gap: var(--odd-space-xl);
+    max-inline-size: 88rem;
+    margin-inline: auto;
+    padding: var(--odd-space-xl);
+  }
+  oddkin-workbench .wb-layout.wb-no-sidebar {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  oddkin-workbench .wb-sidebar .wb-group-label {
+    margin: var(--odd-space-md) 0 var(--odd-space-2xs);
+    color: var(--odd-color-text-secondary);
+    font-size: var(--odd-font-size-xs);
+    font-weight: var(--odd-font-weight-semibold);
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+  }
+  oddkin-workbench .wb-sidebar a {
+    display: block;
+    padding: var(--odd-space-2xs) var(--odd-space-xs);
+    border-radius: var(--odd-radius-sm);
+    color: var(--odd-color-text-secondary);
+    text-decoration: none;
+  }
+  oddkin-workbench .wb-sidebar a[aria-current] {
+    background: var(--odd-color-surface-sunken);
+    color: var(--odd-color-text-primary);
+    font-weight: var(--odd-font-weight-medium);
+  }
+  oddkin-workbench .wb-sidebar-toggle {
+    display: none;
+    padding: var(--odd-space-2xs) var(--odd-space-sm);
+    background: var(--odd-color-surface-default);
+    border: var(--odd-border-width-default) solid var(--odd-color-border-strong);
+    border-radius: var(--odd-radius-sm);
+    cursor: pointer;
+  }
+  oddkin-workbench .wb-main {
+    container: wb-main / inline-size;
+    min-inline-size: 0;
+  }
+  oddkin-workbench .wb-main:focus {
+    outline: none;
+  }
+
+  /* Page */
+  oddkin-workbench .wb-page {
+    display: grid;
+    gap: var(--odd-space-lg) var(--odd-space-2xl);
+    grid-template-areas: 'header' 'toc' 'body';
+  }
+  oddkin-workbench .wb-page-header {
+    grid-area: header;
+    max-inline-size: 48rem;
+  }
+  oddkin-workbench .wb-eyebrow {
+    margin: 0 0 var(--odd-space-xs);
+    color: var(--odd-color-text-secondary);
+    font-size: var(--odd-font-size-xs);
+    font-weight: var(--odd-font-weight-semibold);
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+  oddkin-workbench h1 {
+    margin: 0;
+    font-family: var(--odd-font-family-display);
+    font-size: var(--odd-font-size-3xl);
+    font-weight: var(--odd-font-weight-regular);
+    line-height: var(--odd-line-height-tight);
+  }
+  oddkin-workbench .wb-summary {
+    margin: var(--odd-space-sm) 0 0;
+    color: var(--odd-color-text-secondary);
+    font-size: var(--odd-font-size-lg);
+  }
+  oddkin-workbench .wb-back {
+    display: inline-block;
+    margin-block-start: var(--odd-space-md);
+  }
+  oddkin-workbench .wb-toc {
+    grid-area: toc;
+    font-size: var(--odd-font-size-sm);
+  }
+  oddkin-workbench .wb-toc h2 {
+    margin: 0 0 var(--odd-space-xs);
+    color: var(--odd-color-text-secondary);
+    font-size: var(--odd-font-size-xs);
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+  }
+  oddkin-workbench .wb-toc li + li {
+    margin-block-start: var(--odd-space-2xs);
+  }
+  oddkin-workbench .wb-body {
+    grid-area: body;
+    min-inline-size: 0;
+  }
+  oddkin-workbench .wb-body > section + section {
+    margin-block-start: var(--odd-space-2xl);
+  }
+  oddkin-workbench .wb-body h2 {
+    margin: 0 0 var(--odd-space-sm);
+    font-size: var(--odd-font-size-xl);
+    font-weight: var(--odd-font-weight-semibold);
+  }
+  oddkin-workbench .wb-muted {
+    color: var(--odd-color-text-secondary);
+  }
+
+  /* Overview cards: 3, 2, or 1 columns by the content's width. */
+  oddkin-workbench .wb-group + .wb-group {
+    margin-block-start: var(--odd-space-2xl);
+  }
+  oddkin-workbench .wb-cards {
+    --odd-grid-columns: 1;
+    --odd-grid-gap: var(--odd-space-md);
+  }
+  oddkin-workbench .wb-card {
+    block-size: 100%;
+  }
+  oddkin-workbench .wb-catalog-filters {
+    --odd-cluster-gap: var(--odd-space-md);
+    align-items: end;
+    margin-block-end: var(--odd-space-lg);
+  }
+  oddkin-workbench .wb-catalog-filters label {
+    --odd-stack-gap: var(--odd-space-2xs);
+    color: var(--odd-color-text-secondary);
+    font-size: var(--odd-font-size-sm);
+  }
+  oddkin-workbench .wb-catalog-filters input,
+  oddkin-workbench .wb-catalog-filters select {
+    min-inline-size: 12rem;
+    padding: var(--odd-space-2xs) var(--odd-space-xs);
+    background: var(--odd-color-surface-default);
+    border: var(--odd-border-width-default) solid var(--odd-color-border-strong);
+    border-radius: var(--odd-radius-sm);
+  }
+  oddkin-workbench .wb-catalog-filters p {
+    margin: 0;
+  }
+  oddkin-workbench .wb-card h2,
+  oddkin-workbench .wb-card h3 {
+    margin: 0;
+    font-size: var(--odd-font-size-lg);
+    font-weight: var(--odd-font-weight-semibold);
+  }
+  oddkin-workbench .wb-card p {
+    margin: var(--odd-space-xs) 0 0;
+  }
+  oddkin-workbench .wb-meta {
+    color: var(--odd-color-text-secondary);
+    font-size: var(--odd-font-size-sm);
+  }
+  @container wb-main (width >= 32rem) {
+    oddkin-workbench .wb-cards {
+      --odd-grid-columns: 2;
+    }
+  }
+  @container wb-main (width >= 52rem) {
+    oddkin-workbench .wb-cards {
+      --odd-grid-columns: 3;
+    }
+    oddkin-workbench .wb-page.wb-has-toc {
+      grid-template-columns: minmax(0, 1fr) 13rem;
+      grid-template-areas: 'header toc' 'body toc';
+      align-items: start;
+    }
+    oddkin-workbench .wb-has-toc .wb-toc {
+      position: sticky;
+      inset-block-start: var(--odd-space-lg);
+    }
+  }
+
+  /* Narrow: one column; the sidebar is behind a disclosure button. */
+  @container wb-shell (width < 48rem) {
+    oddkin-workbench .wb-header {
+      padding-inline: var(--odd-space-md);
+    }
+    oddkin-workbench .wb-tools {
+      margin-inline-start: 0;
+    }
+    oddkin-workbench .wb-layout {
+      grid-template-columns: minmax(0, 1fr);
+      gap: var(--odd-space-lg);
+      padding: var(--odd-space-md);
+    }
+    oddkin-workbench .wb-sidebar-toggle {
+      display: inline-flex;
+    }
+    oddkin-workbench .wb-sidebar:not(.wb-expanded) .wb-sidebar-list {
+      display: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    oddkin-workbench .wb-primary a[aria-current],
+    oddkin-workbench .wb-sidebar a[aria-current] {
+      text-decoration: underline;
+    }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    oddkin-workbench * {
+      scroll-behavior: auto;
+    }
+  }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/app/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/app/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AACH,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE1C,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0W7B,CAAC"}

package/dist/app/theme-studio.d.ts

@@ -0,0 +1,12 @@
+import type { StyleInput } from '@oddkin/core/styles';
+import { ThemeStudioElement } from '../panels/theme-studio.js';
+export declare class WorkbenchThemeStudio extends ThemeStudioElement {
+    static shadowRootOptions: null;
+    static styles: StyleInput;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'oddkin-workbench-theme-studio': WorkbenchThemeStudio;
+    }
+}
+//# sourceMappingURL=theme-studio.d.ts.map

package/dist/app/theme-studio.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-studio.d.ts","sourceRoot":"","sources":["../../src/app/theme-studio.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAEtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAE/D,qBAAa,oBAAqB,SAAQ,kBAAkB;IAC1D,OAAgB,iBAAiB,OAAQ;IACzC,OAAgB,MAAM,EAAE,UAAU,CAAiB;CACpD;AAID,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,+BAA+B,EAAE,oBAAoB,CAAC;KACvD;CACF"}

package/dist/app/theme-studio.js

@@ -0,0 +1,14 @@
+/**
+ * Registers `<oddkin-workbench-theme-studio>`, Theme Studio's content in the shell's light DOM.
+ * The shell imports this module only when the Theme Studio route renders, so other pages never
+ * load the editor, its model, or the generation client.
+ */
+import { define } from '@oddkin/core/element';
+import { contentStyles } from '../panels/styles.js';
+import { ThemeStudioElement } from '../panels/theme-studio.js';
+export class WorkbenchThemeStudio extends ThemeStudioElement {
+    static shadowRootOptions = null;
+    static styles = contentStyles;
+}
+define('oddkin-workbench-theme-studio', WorkbenchThemeStudio);
+//# sourceMappingURL=theme-studio.js.map

package/dist/app/theme-studio.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-studio.js","sourceRoot":"","sources":["../../src/app/theme-studio.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAC;AAE9C,OAAO,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACpD,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAC;AAE/D,MAAM,OAAO,oBAAqB,SAAQ,kBAAkB;IAC1D,MAAM,CAAU,iBAAiB,GAAG,IAAI,CAAC;IACzC,MAAM,CAAU,MAAM,GAAe,aAAa,CAAC;CACpD;AAED,MAAM,CAAC,+BAA+B,EAAE,oBAAoB,CAAC,CAAC"}

package/dist/app/views.d.ts

@@ -0,0 +1,34 @@
+import type { PageEntry, PageRegistry } from '../pages/types.js';
+export interface ViewContext {
+    readonly registry: PageRegistry;
+    /** URL of an application path (`/components/odd-button#api`) in the configured routing mode. */
+    readonly href: (to: string) => string;
+    readonly lang: string;
+    readonly catalog?: {
+        readonly query: string;
+        readonly category: string;
+        readonly update: (query: string, category: string) => void;
+    };
+}
+export type Appearance = 'system' | 'light' | 'dark';
+/** Text with Markdown code spans (`name`) shown as code; everything stays text, never markup. */
+export declare function inline(text: string): (string | import("@oddkin/core/template").TemplateResult)[];
+/** `Updated <date> · tag, tag`: each part only when known. */
+export declare function metaLine(page: PageEntry, lang: string): import("@oddkin/core/template").TemplateResult | null;
+/** The overview page of a section, if the registry has one. */
+export declare const overviewOf: (registry: PageRegistry, section: string) => PageEntry | undefined;
+export declare function header(ctx: ViewContext, brand: {
+    readonly name: string;
+    readonly logo?: string;
+}, current: PageEntry | undefined, tools: unknown): import("@oddkin/core/template").TemplateResult;
+export declare function appearanceControl(value: Appearance, change: (value: Appearance) => void): import("@oddkin/core/template").TemplateResult;
+export declare function sidebarView(ctx: ViewContext, current: PageEntry, expanded: boolean, toggle: () => void): import("@oddkin/core/template").TemplateResult | null;
+export declare function pageHeader(ctx: ViewContext, page: PageEntry): import("@oddkin/core/template").TemplateResult;
+/** Overview body: the section's cards, grouped when the section has groups (components). */
+export declare function overviewBody(ctx: ViewContext, page: PageEntry): import("@oddkin/core/template").TemplateResult;
+/** Detail pages without generated content: a section per visible registry section. */
+export declare function sectionsBody(page: PageEntry): import("@oddkin/core/template").TemplateResult;
+export declare function toc(ctx: ViewContext, page: PageEntry): import("@oddkin/core/template").TemplateResult | null;
+/** A page with a heading and one paragraph: not found, a failed page, a notice. */
+export declare function messagePage(ctx: ViewContext, title: string, text: string, link?: PageEntry): import("@oddkin/core/template").TemplateResult;
+//# sourceMappingURL=views.d.ts.map

package/dist/app/views.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"views.d.ts","sourceRoot":"","sources":["../../src/app/views.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAGjE,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,QAAQ,EAAE,YAAY,CAAC;IAChC,gGAAgG;IAChG,QAAQ,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,MAAM,CAAC;IACtC,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,OAAO,CAAC,EAAE;QACjB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;QACvB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;QAC1B,QAAQ,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;KAC5D,CAAC;CACH;AAED,MAAM,MAAM,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAYrD,iGAAiG;AACjG,wBAAgB,MAAM,CAAC,IAAI,EAAE,MAAM,+DAKlC;AAED,8DAA8D;AAC9D,wBAAgB,QAAQ,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,MAAM,yDASrD;AAED,+DAA+D;AAC/D,eAAO,MAAM,UAAU,aAAc,YAAY,WAAW,MAAM,0BACuB,CAAC;AAE1F,wBAAgB,MAAM,CACpB,GAAG,EAAE,WAAW,EAChB,KAAK,EAAE;IAAE,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,EACxD,OAAO,EAAE,SAAS,GAAG,SAAS,EAC9B,KAAK,EAAE,OAAO,kDAwBf;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,UAAU,EAAE,MAAM,EAAE,CAAC,KAAK,EAAE,UAAU,KAAK,IAAI,kDAcvF;AAED,wBAAgB,WAAW,CACzB,GAAG,EAAE,WAAW,EAChB,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,OAAO,EACjB,MAAM,EAAE,MAAM,IAAI,yDAoCnB;AAED,wBAAgB,UAAU,CAAC,GAAG,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,kDAkB3D;AAYD,4FAA4F;AAC5F,wBAAgB,YAAY,CAAC,GAAG,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,kDAyF7D;AAED,sFAAsF;AACtF,wBAAgB,YAAY,CAAC,IAAI,EAAE,SAAS,kDAY3C;AAED,wBAAgB,GAAG,CAAC,GAAG,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,yDAcpD;AAED,mFAAmF;AACnF,wBAAgB,WAAW,CAAC,GAAG,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,SAAS,kDAQ1F"}

package/dist/app/views.js

@@ -0,0 +1,230 @@
+/**
+ * Shell views (workbench-pages.md §3–§6): header, primary navigation, contextual sidebar, page
+ * headers, overview cards, the section scaffold, and "On this page". Everything is projected
+ * from the page registry, so navigation, cards, routes, and search cannot drift apart.
+ */
+import { html, nothing, repeat } from '@oddkin/core/template';
+import { cards, onThisPage, primaryNavigation, sidebar } from '../pages/navigation.js';
+import { COPY } from './copy.js';
+const formatDate = (iso, lang) => {
+    try {
+        return new Intl.DateTimeFormat(lang, { dateStyle: 'medium', timeZone: 'UTC' }).format(new Date(`${iso}T00:00:00Z`));
+    }
+    catch {
+        return iso;
+    }
+};
+/** Text with Markdown code spans (`name`) shown as code; everything stays text, never markup. */
+export function inline(text) {
+    const parts = text.split('`');
+    // An unmatched backtick stays literal.
+    if (parts.length % 2 === 0)
+        parts[parts.length - 2] += `\`${parts.pop()}`;
+    return parts.map((part, i) => (i % 2 ? html `<code>${part}</code>` : part));
+}
+/** `Updated <date> · tag, tag`: each part only when known. */
+export function metaLine(page, lang) {
+    const parts = [];
+    if (page.updated)
+        parts.push(html `${COPY.updated} <time datetime=${page.updated}>${formatDate(page.updated, lang)}</time>`);
+    if (page.tags?.length)
+        parts.push(page.tags.join(', '));
+    if (!parts.length)
+        return nothing;
+    return html `<p class="wb-meta">${parts.flatMap((part, i) => (i ? [' · ', part] : [part]))}</p>`;
+}
+/** The overview page of a section, if the registry has one. */
+export const overviewOf = (registry, section) => registry.pages.find((p) => p.visible && p.section === section && p.kind === 'overview');
+export function header(ctx, brand, current, tools) {
+    const primary = primaryNavigation(ctx.registry);
+    const home = ctx.registry.pages.find((p) => p.id === 'home' && p.visible) ?? primary[0];
+    const state = (entry) => current?.id === entry.id ? 'page' : current?.section === entry.section ? 'true' : null;
+    return html `<header class="wb-header odd-cluster">
+    <a class="wb-brand odd-row" href=${ctx.href(home?.route ?? '/')}
+      >${brand.logo ? html `<img src=${brand.logo} alt="" />` : nothing}<span>${brand.name}</span></a
+    >
+    <nav class="wb-primary" aria-label=${COPY.primaryNavigation}>
+      <ul class="odd-cluster">
+        ${repeat(primary, (entry) => entry.id, (entry) => html `<li>
+              <a href=${ctx.href(entry.route)} aria-current=${state(entry)}>${entry.title}</a>
+            </li>`)}
+      </ul>
+    </nav>
+    <div class="wb-tools odd-cluster">${tools}</div>
+  </header>`;
+}
+export function appearanceControl(value, change) {
+    const options = Object.entries(COPY.appearances);
+    return html `<label class="odd-row"
+    >${COPY.appearance}
+    <select
+      class="wb-appearance"
+      .value=${value}
+      @change=${(event) => change(event.target.value)}
+    >
+      ${options.map(([key, label]) => html `<option value=${key} ?selected=${key === value}>${label}</option>`)}
+    </select></label
+  >`;
+}
+export function sidebarView(ctx, current, expanded, toggle) {
+    const groups = sidebar(ctx.registry, current.section);
+    if (!groups.length)
+        return nothing;
+    const title = overviewOf(ctx.registry, current.section)?.title ?? current.section;
+    return html `<nav class=${expanded ? 'wb-sidebar wb-expanded' : 'wb-sidebar'} aria-label=${title}>
+    <button
+      type="button"
+      class="wb-sidebar-toggle"
+      aria-expanded=${expanded ? 'true' : 'false'}
+      aria-controls="wb-sidebar-list"
+      @click=${toggle}
+    >
+      ${expanded ? COPY.hideSection(title) : COPY.showSection(title)}
+    </button>
+    <div class="wb-sidebar-list" id="wb-sidebar-list">
+      ${groups.map(({ group, pages }, i) => {
+        const label = group ? `wb-sidebar-group-${i}` : undefined;
+        return html `${group ? html `<p class="wb-group-label" id=${label}>${group}</p>` : nothing}
+          <ul aria-labelledby=${label ?? null}>
+            ${repeat(pages, (page) => page.id, (page) => html `<li>
+                  <a
+                    href=${ctx.href(page.route)}
+                    aria-current=${page.id === current.id ? 'page' : null}
+                    >${page.title}</a
+                  >
+                </li>`)}
+          </ul>`;
+    })}
+    </div>
+  </nav>`;
+}
+export function pageHeader(ctx, page) {
+    const overview = page.kind === 'overview';
+    const eyebrow = page.eyebrow ?? (overview ? COPY.overviewEyebrow : undefined);
+    const summary = page.summary ?? COPY.summaries[page.id];
+    const back = page.kind === 'component' || page.kind === 'foundation' || page.kind === 'products'
+        ? overviewOf(ctx.registry, page.section)
+        : undefined;
+    return html `<header class="wb-page-header">
+    ${eyebrow ? html `<p class="wb-eyebrow">${eyebrow}</p>` : nothing}
+    <h1>${page.title}</h1>
+    ${summary ? html `<p class="wb-summary">${inline(summary)}</p>` : nothing}
+    ${back
+        ? html `<a class="wb-back" href=${ctx.href(back.route)}>${COPY.allPages(back.title)}</a>`
+        : nothing}
+  </header>`;
+}
+function card(ctx, page, level) {
+    const title = html `<a href=${ctx.href(page.route)}>${page.title}</a>`;
+    return html `<li>
+    <odd-card class="wb-card">
+      ${level === 2 ? html `<h2>${title}</h2>` : html `<h3>${title}</h3>`}
+      ${page.summary ? html `<p>${inline(page.summary)}</p>` : nothing} ${metaLine(page, ctx.lang)}
+    </odd-card>
+  </li>`;
+}
+/** Overview body: the section's cards, grouped when the section has groups (components). */
+export function overviewBody(ctx, page) {
+    if (page.availability === 'unavailable')
+        return html `<div class="wb-body">
+      <p><strong>${page.id === 'foundations' ? COPY.noFoundations : COPY.noComponents}</strong></p>
+      ${page.id === 'foundations' ? html `<p class="wb-muted">${COPY.noFoundationsHelp}</p>` : nothing}
+    </div>`;
+    const allEntries = cards(ctx.registry, page.section);
+    const filters = page.section === 'components' ? ctx.catalog : undefined;
+    const categories = [...new Set(allEntries.map((entry) => entry.group ?? ''))];
+    const selectedCategory = filters && categories.includes(filters.category) ? filters.category : '';
+    const entries = filters
+        ? allEntries.filter((entry) => {
+            const text = `${entry.title} ${entry.id} ${entry.summary ?? ''} ${(entry.tags ?? []).join(' ')}`.toLowerCase();
+            return ((!filters.query.trim() || text.includes(filters.query.trim().toLowerCase())) &&
+                (!selectedCategory || (entry.group ?? '') === selectedCategory));
+        })
+        : allEntries;
+    const groups = new Map();
+    for (const entry of entries)
+        groups.set(entry.group ?? '', [...(groups.get(entry.group ?? '') ?? []), entry]);
+    const controls = filters === undefined
+        ? nothing
+        : html `<form
+          class="wb-catalog-filters odd-cluster"
+          role="search"
+          @submit=${(event) => event.preventDefault()}
+        >
+          <label class="odd-stack"
+            >${COPY.componentSearch}
+            <input
+              type="search"
+              name="q"
+              .value=${filters.query}
+              @input=${(event) => filters.update(event.target.value, filters.category)}
+            />
+          </label>
+          <label class="odd-stack"
+            >${COPY.categoryFilter}
+            <select
+              name="category"
+              .value=${selectedCategory}
+              @change=${(event) => filters.update(filters.query, event.target.value)}
+            >
+              <option value="">${COPY.allCategories}</option>
+              ${categories.map((category) => html `<option value=${category}>${category}</option>`)}
+            </select>
+          </label>
+          <p class="wb-muted" aria-live="polite">
+            ${COPY.componentResults(entries.length, allEntries.length)}
+          </p>
+        </form>`;
+    if (!entries.length)
+        return html `<div class="wb-body">
+      ${controls}
+      <p role="status">${COPY.noComponentResults}</p>
+    </div>`;
+    if (groups.size === 1 && groups.has(''))
+        return html `<div class="wb-body">
+      ${controls}
+      <ul class="wb-cards odd-grid">
+        ${repeat(entries, (entry) => entry.id, (entry) => card(ctx, entry, 2))}
+      </ul>
+    </div>`;
+    return html `<div class="wb-body">
+    ${controls}
+    ${[...groups].map(([group, pages], i) => html `<section class="wb-group" aria-labelledby=${`wb-group-${i}`}>
+          <h2 id=${`wb-group-${i}`}>${group} <span class="wb-muted">(${pages.length})</span></h2>
+          <ul class="wb-cards odd-grid">
+            ${repeat(pages, (entry) => entry.id, (entry) => card(ctx, entry, 3))}
+          </ul>
+        </section>`)}
+  </div>`;
+}
+/** Detail pages without generated content: a section per visible registry section. */
+export function sectionsBody(page) {
+    return html `<div class="wb-body">
+    ${repeat(page.sections.filter((s) => s.visible), (section) => section.id, (section) => html `<section id=${section.id} aria-labelledby=${`${section.id}-title`}>
+          <h2 id=${`${section.id}-title`}>${section.title}</h2>
+          <p class="wb-muted">${COPY.sectionPending}</p>
+        </section>`)}
+  </div>`;
+}
+export function toc(ctx, page) {
+    const entries = onThisPage(page);
+    if (!entries.length)
+        return nothing;
+    return html `<nav class="wb-toc" aria-labelledby="wb-toc-title">
+    <h2 id="wb-toc-title">${COPY.onThisPage}</h2>
+    <ul>
+      ${repeat(entries, (entry) => entry.id, (entry) => html `<li><a href=${ctx.href(`${page.route}#${entry.id}`)}>${entry.title}</a></li>`)}
+    </ul>
+  </nav>`;
+}
+/** A page with a heading and one paragraph: not found, a failed page, a notice. */
+export function messagePage(ctx, title, text, link) {
+    return html `<div class="wb-page">
+    <header class="wb-page-header">
+      <h1>${title}</h1>
+      <p class="wb-summary">${text}</p>
+      ${link ? html `<a class="wb-back" href=${ctx.href(link.route)}>${link.title}</a>` : nothing}
+    </header>
+  </div>`;
+}
+//# sourceMappingURL=views.js.map