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

package/dist/app/styles.js

@@ -0,0 +1,356 @@
+/**
+ * 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-stack-gap: var(--odd-space-lg);
+    margin-block-end: var(--odd-space-xl);
+  }
+  oddkin-workbench :is(.wb-catalog-search, .wb-counts, .wb-categories) {
+    --odd-cluster-gap: var(--odd-space-sm);
+    align-items: center;
+  }
+  oddkin-workbench .wb-catalog-search label {
+    --odd-stack-gap: var(--odd-space-2xs);
+    flex: 1 1 18rem;
+    max-inline-size: 32rem;
+  }
+  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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyV7B,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,38 @@
+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;
+        /** Groups (categories) to list; empty lists every group. */
+        readonly groups?: readonly string[];
+        /** A live preview for a card, supplied by a host that loads the library (the docs). */
+        readonly preview?: (page: PageEntry) => Node | undefined;
+    };
+}
+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;QAC3D,4DAA4D;QAC5D,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,MAAM,EAAE,CAAC;QACpC,uFAAuF;QACvF,QAAQ,CAAC,OAAO,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,GAAG,SAAS,CAAC;KAC1D,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;AA0BD,4FAA4F;AAC5F,wBAAgB,YAAY,CAAC,GAAG,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,kDAqG7D;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"}