@kerfjs/ui 5.0.0-beta.49 → 5.0.0-beta.51

package/dist/catalog.d.ts

@@ -1,103 +1,33 @@
+import * as kerfjs from 'kerfjs';
 import { SafeHtml } from 'kerfjs';
+import { a as CatalogProps } from './types-CEsieBZi.js';
+export { b as CatalogBrand, c as CatalogEntry, d as CatalogRelated, C as CatalogResource, e as CatalogSecondaryGroup, f as CatalogSection, g as CatalogStageRootAttributes } from './types-CEsieBZi.js';
 import { K as KerfUiContent } from './semantic-content-BbzjvSu9.js';
 
-/** A reference link shown in the detail footer for the active entry. */
-interface CatalogResource {
-    label: string;
-    href: string;
-    /** Optional monospace detail (e.g. a file path) shown after the label. */
-    detail?: string;
-}
-/** A related entry offered in the detail footer's "Related entries" popup menu. */
-interface CatalogRelated {
-    id: string;
-    name: string;
-    /** Group heading in the menu, e.g. "Uses" / "Used by". */
-    group: string;
-}
-interface CatalogEntry {
-    id: string;
-    name: string;
-    description?: string;
-    /** Short metadata tags shown at the trailing edge of the sidebar row. */
-    tags?: readonly string[];
-    resources?: readonly CatalogResource[];
-    related?: readonly CatalogRelated[];
-}
-interface CatalogSection {
-    category: string;
-    entries: readonly CatalogEntry[];
-}
-/**
- * A secondary group of sections shown below the primary sidebar sections with a
- * quieter "ecosystem" treatment (e.g. third-party components). Optionally
- * collapsible — the app owns `expanded` and toggles it from `wireCatalog`'s
- * `onToggleSecondary`.
- */
-interface CatalogSecondaryGroup {
-    label: string;
-    sections: readonly CatalogSection[];
-    /** When true, the group's label is a disclosure toggle controlling `expanded`. */
-    collapsible?: boolean;
-    /** Whether the group is expanded (controlled). Ignored unless `collapsible`. */
-    expanded?: boolean;
-}
-interface CatalogBrand {
-    title: string;
-    subtitle?: string;
-    /** Logo image URL (rendered decorative). Omit for a text-only brand. */
-    logoUrl?: string;
-}
-interface CatalogProps {
-    brand: CatalogBrand;
-    sections: readonly CatalogSection[];
-    /** The controlled active entry id — the app owns this signal. */
-    active: string;
-    /** The rendered preview for the active entry; the app computes it from `active`. */
-    content: KerfUiContent;
-    /** Whether the sidebar is collapsed (controlled). */
-    collapsed?: boolean;
-    /** Current theme; when set, a theme toggle is shown that switches to the opposite. Omit to hide it. */
-    theme?: 'light' | 'dark';
-    /** Extra header controls placed before the theme toggle (each a `ToolbarControlGroup`). */
-    headerActions?: KerfUiContent;
-    /** A secondary "ecosystem" group of sections below the primary category groups. */
-    secondarySections?: CatalogSecondaryGroup;
-    /** Extra sidebar content below the category groups (and the secondary group). */
-    sidebarFooter?: KerfUiContent;
-    /** Status line content shown at the start of the detail footer. */
-    status?: KerfUiContent;
-    /**
-     * Whether to highlight specimens' computed borders (or transparent outer
-     * bounds) and non-zero margins. Pass a boolean (rather than omitting the
-     * prop) when the active entry can switch between component and composition
-     * previews; `wireCatalogGeometryOverlay` keeps the overlay synchronized.
-     */
-    geometryOverlay?: boolean;
-    selectAction?: string;
-    toggleSidebarAction?: string;
-    toggleThemeAction?: string;
-    /** Action fired by the secondary group's disclosure toggle (when collapsible). */
-    toggleSecondaryAction?: string;
-    className?: string;
-}
-/**
- * A reusable component-catalog shell: a collapsible category sidebar, a titled
- * detail stage that renders the active entry's preview, and a footer with
- * reference links and a related-entry popup menu. Built entirely from public
- * `@kerfjs/ui` primitives. Controlled and stateless — the app owns the `active`,
- * `collapsed`, and `theme` signals and computes `content` from `active` in its own
- * render; wire the sidebar/collapse/theme actions with `wireCatalog`.
- */
-declare function Catalog({ brand, sections, active, content, collapsed, theme, headerActions, secondarySections, sidebarFooter, status, geometryOverlay, selectAction, toggleSidebarAction, toggleThemeAction, toggleSecondaryAction, className, }: CatalogProps): SafeHtml;
-/**
- * How a {@link CatalogExample}'s content aligns its visible left edge with the
- * example's `ListHeader` label (which sits 16px in — 8px title + 8px label):
- * - `'glyph'` — a bare glyph/text specimen with no inline geometry insets the full 16px.
- * - `'inline-control'` — a control that already carries ~8px of its own inline padding insets 8px so its content lands on the same line.
- * - `'none'` — a content-item / composition that owns its geometry and already aligns; no inset (default).
- */
+/** Controlled, stateless component-catalog shell. */
+declare function Catalog({ brand, sections, active, content, collapsed, theme, headerActions, secondarySections, sidebarFooter, status, geometryOverlay, stageRootAttributes, selectAction, toggleSidebarAction, toggleThemeAction, toggleSecondaryAction, className, slot, }: CatalogProps): kerfjs.SafeHtml;
+
+/** How a specimen aligns its visible edge with its `ListHeader` label. */
 type CatalogExampleAlign = 'glyph' | 'inline-control' | 'none';
+interface CatalogExampleViewport {
+    layout?: 'grid' | 'flex' | 'flex-column';
+    width?: 'full' | 'compact' | 'medium' | 'wide' | 'text' | 'control';
+    /** Fixed specimen height; `app` frames an application-sized recipe or layout.
+     *  A fixed height is definite, so a child that fills with `height: 100%`
+     *  (a horizontal `ResizableRegion`, say) spans the whole frame. */
+    height?: 'short' | 'reduced' | 'medium' | 'tall' | 'app';
+    /** A minimum the frame may grow past. It is not a definite height: a child
+     *  sized with `height: 100%` falls back to its content height, so use
+     *  `height` when the specimen must fill the frame. */
+    minHeight?: 'short' | 'medium';
+    frame?: 'solid' | 'dashed';
+    surface?: 'default' | 'lowered';
+    overflow?: 'hidden' | 'auto-x';
+    responsive?: 'roomy-only';
+    shadow?: boolean;
+    /** Public component custom properties applied to the specimen viewport. */
+    tokens?: Readonly<Record<`--${string}`, string>>;
+}
 type CatalogExampleRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
     'data-catalog-example'?: never;
     'data-catalog-example-stack'?: never;
@@ -105,47 +35,39 @@ type CatalogExampleRootAttributes = Readonly<Record<`data-${string}`, string | u
     'data-catalog-example-note'?: never;
     'data-align'?: never;
 }>;
-type CatalogExampleStackRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
-    'data-catalog-example'?: never;
-    'data-catalog-example-stack'?: never;
-    'data-catalog-example-label'?: never;
-    'data-catalog-example-note'?: never;
-    'data-align'?: never;
-}>;
 interface CatalogExampleProps {
-    /** The example's label, shown as a `ListHeader` above the specimen. Omit for a bare specimen. */
     label?: string;
-    /** Optional explanatory note between the label and the specimen. */
     note?: SafeHtml | string;
-    /** Alignment inset for the specimen — see {@link CatalogExampleAlign}. Default `'none'`. */
     align?: CatalogExampleAlign;
-    /** Safe authoring `data-*` metadata for the rendered section. Helper-owned structural attributes remain protected. */
+    /** Optional catalog-owned constraints for demonstrating layout components. */
+    viewport?: CatalogExampleViewport;
+    /** Replacement guidance shown when a roomy-only viewport is hidden. */
+    compactFallback?: SafeHtml | string;
     rootAttributes?: CatalogExampleRootAttributes;
     className?: string;
     children?: KerfUiContent;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
-/**
- * One labeled example in a catalog preview: a `ListHeader` label, an optional
- * note, and the specimen. `align` insets the specimen so its visible left edge
- * lines up with the label text, encoding the catalog's alignment rules as a
- * first-class prop instead of per-demo CSS. The inset is published as the
- * `--kui-catalog-example-align` custom property so a debug overlay can exclude it
- * from a specimen's measured margin.
- */
-declare function CatalogExample({ label, note, align, rootAttributes, className, children, }: CatalogExampleProps): SafeHtml;
+/** A labeled catalog specimen with optional explanatory text and alignment. */
+declare function CatalogExample({ label, note, align, viewport, compactFallback, rootAttributes, className, children, slot, }: CatalogExampleProps): SafeHtml;
+
+type CatalogExampleStackRootAttributes = Readonly<Record<`data-${string}`, string | undefined> & {
+    'data-catalog-example'?: never;
+    'data-catalog-example-stack'?: never;
+    'data-catalog-example-label'?: never;
+    'data-catalog-example-note'?: never;
+    'data-align'?: never;
+}>;
 interface CatalogExampleStackProps {
-    /** Accessible label for the stack region. */
     label?: string;
-    /** Safe authoring `data-*` metadata for the rendered stack. Helper-owned structural attributes remain protected. */
     rootAttributes?: CatalogExampleStackRootAttributes;
     className?: string;
     children?: KerfUiContent;
+    /** Native named-slot assignment when composed inside a web component. */
+    slot?: string;
 }
-/**
- * A vertically-stacked group of {@link CatalogExample}s with the catalog's
- * example rhythm. The semantic `section` becomes a named `region` when `label`
- * is supplied; an unlabeled stack remains an ordinary grouping.
- */
-declare function CatalogExampleStack({ label, rootAttributes, className, children, }: CatalogExampleStackProps): SafeHtml;
+/** A vertically stacked group of catalog examples. */
+declare function CatalogExampleStack({ label, rootAttributes, className, children, slot, }: CatalogExampleStackProps): kerfjs.SafeHtml;
 
-export { Catalog, type CatalogBrand, type CatalogEntry, CatalogExample, type CatalogExampleAlign, type CatalogExampleProps, CatalogExampleStack, type CatalogExampleStackProps, type CatalogProps, type CatalogRelated, type CatalogResource, type CatalogSecondaryGroup, type CatalogSection };
+export { Catalog, CatalogExample, type CatalogExampleAlign, type CatalogExampleProps, CatalogExampleStack, type CatalogExampleStackProps, type CatalogExampleViewport, CatalogProps };