/** * The importable **catalog manifest** — `catalog.json`. * * This is the index a design tool reads: provenance, a pointer to the DTCG * token file, and one entry per component carrying every variant image (ideal + * layout) with a stable bundle-relative path, the component's resolved tokens, * its greenline layer, and its seed-kit reference. It is a superset of the * `@design-parity/adapter-bundle` `manifest.json` shape (same `path` / `state` / * `theme` / `size` image keys) so a catalog component is also a valid parity * bundle — the same artifact round-trips back through the parity flow. * * {@link toCatalogManifest} is **pure** (it only computes paths, no I/O); the * {@link writeCatalog} step materializes the bytes those paths point at. */ import type { DesignTokens, Image, ImageGutter, ParityDirection, Theme } from "@design-parity/core"; import type { Catalog, CatalogDisplay, CatalogMotion, CatalogScreen, ComponentReference, Greenline, Redline } from "./types.js"; /** Which sticker-sheet variant an image belongs to. */ export type VariantKind = "ideal" | "layout"; /** One image entry in the manifest — bundle-relative path + variant keys. */ export interface CatalogManifestImage { variant: VariantKind; /** Bundle-relative PNG path (forward slashes). */ path: string; /** Compose preview that produced this render; used for exact mapped upgrades. */ previewId?: string; state: string; theme?: Theme; size?: string; /** Extra named variant axes (e.g. `{ content: "icon+label" }`) → set variant props. */ props?: Record; width: number; height: number; /** * Transparent margin the renderer added outside the component's own bounds, * in pixels (`Image.gutter`). Carried because the published PNG keeps it: * `writeCatalog` writes the render's own bytes, so without this the manifest * states a canvas that is larger than the component and every consumer of the * published catalog treats the frame as content. */ gutter?: ImageGutter; /** * Deep link into a live preview server where this exact variant can be opened * and customised — the cross-tool bridge that makes browsing the published * `design-artifacts/` branch and a live, editable preview the same * render. Present only when a {@link ManifestOptions.previewServer} base is * configured. See {@link livePreviewUrl}. */ livePreview?: string; } /** One component entry in the manifest. */ export interface CatalogManifestComponent { componentId: string; /** * Top-level section (tab) this component belongs to — see * {@link CatalogComponent.section}. A preview host groups components by * `section` into tabs, with {@link group} as the sub-heading inside a tab. */ section?: string; group?: string; caption?: string; reference?: ComponentReference; /** Family handle for {@link reference}; see {@link CatalogComponent.referenceSet}. */ referenceSet?: string; /** Stated reason there is no {@link reference}; see {@link CatalogComponent.noReference}. */ noReference?: string; images: CatalogManifestImage[]; /** * The component's animated captures, alongside — never inside — {@link images}, which every * consumer reads as a set of stills. Absent for a component with no motion, and for a catalog * exported before the axis existed. See {@link CatalogMotion}. */ motion?: CatalogMotion[]; tokens?: DesignTokens; greenlines: Greenline[]; /** Layout spacing spec — per-node box + padding + gap + corner radius. */ redlines: Redline[]; /** * Bundle-relative path to the pre-generated **wireframe SVG** (one bordered box * per composable), when the component carries box geometry. The importer places * it as the vector wireframe comparison lane. Absent ⇒ no wireframe. */ wireframe?: string; } /** * One alternate theme's entry in the manifest: what it is called, and where its * token file lives in the bundle. The tokens themselves are a sibling DTCG file * rather than inline, so a consumer that only needs the *list* of themes (a * picker, an index page) doesn't pay for every theme's full palette, and each * file is importable on its own exactly like the system one. */ export interface CatalogManifestTheme { /** Stable id — the provider FQN; see `CatalogTheme.id`. */ id: string; /** Human label, when the system declares one. */ name?: string; /** Declaring group, when the system declares one. */ group?: string; /** Whether this is a dark theme; see `CatalogTheme.dark`. */ dark?: boolean; /** Bundle-relative path to this theme's DTCG token file. */ tokensFile: string; } /** The parsed/serializable `catalog.json`. */ export interface CatalogManifest { schema: "design-parity-catalog/v1"; system: string; title: string; library?: string[]; renderer?: string; generatedAt?: string; /** Bundle-relative path to the DTCG token file, when tokens were exported. */ tokensFile?: string; /** * The consumer repo's parity direction (from its `.design-parity.json`), so a * design-tool importer knows who owns the source of truth without reaching the * repo. `code-led` ⇒ the importer may own the design catalog; `design-led` ⇒ * renders are reference-only and writes need confirmation; `auto`/absent ⇒ the * importer applies its safe default. Set by the generator, not by the renderer. */ direction?: ParityDirection; /** * The screen graph — main screens + their related secondaries/dialogs — for a * per-screen import. Carried through from the catalog spec; absent ⇒ flat. */ screens?: CatalogScreen[]; /** * Presentation hints (stage surface + hero preview) carried through from the * catalog spec, so a viewer/index reads the system's own choice. Absent ⇒ the * consumer's defaults. */ display?: CatalogDisplay; /** * The system's alternate named themes and where each one's tokens live — * absent when the system declares none. `tokensFile` above stays the SYSTEM * token set (the theme the stickers were rendered under); these are additive, * so a consumer that predates them reads the same catalog it always did. */ themes?: CatalogManifestTheme[]; components: CatalogManifestComponent[]; } /** * A live preview server the catalog should deep-link into, so each image carries * a `livePreview` URL where a designer can open and customise that variant. The * upstream `compose-preview serve --catalogs ` hosts the same published * catalog, so the link round-trips to the same render the sticker sheet shows. */ export interface PreviewServerOptions { /** Base URL of the live server, e.g. `"https://preview.coo.ee"`. */ base: string; } export interface ManifestOptions { /** Bundle-relative DTCG token filename. Default `"tokens.dtcg.json"`. */ tokensFile?: string; /** * The consumer repo's parity direction to stamp into the manifest (from its * `.design-parity.json`). Omitted ⇒ no `direction` field; the importer applies * its own safe default. */ direction?: ParityDirection; /** * When set, every image entry gets a {@link CatalogManifestImage.livePreview} * deep link into this server. Omitted ⇒ no `livePreview` fields (the catalog is * still complete; the links are an additive convenience). */ previewServer?: PreviewServerOptions; } /** * Bundle-relative path for one theme's token file: `themes/.dtcg.json`, * slugged from the theme id (a provider FQN) the same way component ids are, so * the name is filesystem-safe, stable across regenerations, and can never escape * the directory. */ export declare function themeTokensPath(id: string): string; /** * The live-preview deep link for a manifest image. Targets the server's **viewer** * route `/p/{name}` (not `/?preview=`, which only renders the session landing * page) with `?session=` selecting the catalog. The preview id is the * image's bundle path without the `images/` prefix and `.png` suffix, with the * component-subdir `/` flattened to `__` — exactly how `compose-preview serve * --catalogs` derives a route-safe (single-path-segment) catalog preview id, so * the link resolves to the matching live render. Pure; trailing slashes on * `base` are normalized away. */ export declare function livePreviewUrl(base: string, system: string, imagePath: string): string; /** Filesystem-safe slug for a component id / variant key segment. */ export declare function slug(value: string): string; /** * Bundle-relative path for one variant image of a component. Encodes the * component id and every variant key — including extra `props` axes — so * distinct states/themes/sizes/props never collide: * `images//__[__][__][__…].png`. */ /** * The **sticker id** a preview server routes on — `____[…]`. * * This is the id in a compare URL (`…/compare/device-populated__ideal__default__compact`) and the * one design references are keyed by, derived from exactly the same parts as {@link imagePath} so * the two can never drift. Used as the annotation key when an image carries no explicit * `previewId`: a catalog that never recorded one is still addressable, because this is how the * server names it either way. */ export declare function stickerId(componentId: string, variant: VariantKind, image: Image): string | undefined; export declare function imagePath(componentId: string, variant: VariantKind, image: Image): string; /** Bundle-relative path for a component's pre-generated wireframe SVG. */ export declare function wireframePath(componentId: string): string; /** Build the serializable {@link CatalogManifest} for a {@link Catalog} (pure). */ export declare function toCatalogManifest(catalog: Catalog, opts?: ManifestOptions): CatalogManifest; //# sourceMappingURL=manifest.d.ts.map