asyncapi-viewer 2.0.0 → 2.1.0

package/dist/types/render/tree.d.ts

@@ -0,0 +1,36 @@
+/**
+ * The payload tree (spec 4.8): stacked rows, guide lines per level, expand/collapse with real
+ * buttons, a toolbar with counts, oneOf/anyOf as a segmented control, constraints under the
+ * description, and leaves for circular references. RawSchema renders as a labelled code block.
+ *
+ * Display rules that differ from the model: the "[]" item node of an array is not a row. A
+ * primitive item folds into the parent's type ("array of string"); an object item's children
+ * are shown as the array's children, and their path already reads "items[]".
+ */
+import { nothing, type TemplateResult } from 'lit';
+import type { Schema, SchemaNode } from '../model/types.js';
+export declare const treeStyles: import("lit").CSSResult;
+/** Expansion and variant selection for one tree, keyed by node path. */
+export declare class TreeState {
+    #private;
+    readonly onChange: () => void;
+    constructor(onChange: () => void);
+    isExpanded(key: string, depth: number): boolean;
+    /** True once "Expand all" was used and nothing has been collapsed since. */
+    get allExpanded(): boolean;
+    toggle(key: string, depth: number): void;
+    setAll(expanded: boolean): void;
+    variant(key: string): number;
+    selectVariant(key: string, index: number): void;
+}
+export interface TreeOptions {
+    /** Toolbar text at the left; the field count when absent. */
+    label?: string;
+    /** Anchor prefix of the viewer, for links to the Schemas section. */
+    prefix: string;
+    /** Unique within the viewer, e.g. the message anchor plus "payload". */
+    key: string;
+    state: TreeState;
+}
+export declare function typeLabel(node: SchemaNode): string;
+export declare function renderSchema(schema: Schema | undefined, options: TreeOptions): TemplateResult | typeof nothing;

package/dist/types/styles/base.d.ts

@@ -0,0 +1,2 @@
+/** Layout shell, typography and the shared small components (pills, chips, buttons). */
+export declare const base: import("lit").CSSResult;

package/dist/types/styles/tokens.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Design tokens (spec 4.3). Public variables are `--asyncapi-*`, set on the element by the
+ * theme file or page CSS. Each maps to a private `--_*` with the design default, so page CSS
+ * wins whenever it sets a public one. Dark values apply through the reflected
+ * `resolved-theme` attribute, so page CSS can scope overrides per mode.
+ */
+export declare const tokens: import("lit").CSSResult;

package/dist/types/theme/theme.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Theme mode resolution (spec 4.4).
+ *
+ * `auto` follows the host page: Material for MkDocs (`body[data-md-color-scheme="slate"]`),
+ * then `html[data-theme="dark"]`, then `prefers-color-scheme`. All three are watched so the
+ * viewer follows the site's own toggle live. The in-viewer toggle overrides the host for this
+ * element only. The resolved mode is reflected as `resolved-theme="light|dark"` on the host so
+ * page CSS can scope overrides to one mode.
+ */
+export type ThemeMode = 'auto' | 'light' | 'dark';
+export type Resolved = 'light' | 'dark';
+export declare class ThemeController {
+    #private;
+    private readonly host;
+    private readonly onChange;
+    constructor(host: HTMLElement, onChange: (resolved: Resolved) => void);
+    get resolved(): Resolved;
+    /** The option value; a change clears any toggle override. */
+    set mode(mode: ThemeMode);
+    /** The toggle button: flips the resolved mode for this element only. */
+    toggle(): void;
+    connect(): void;
+    disconnect(): void;
+    /** What the host page says, before any override. Exported for tests. */
+    hostPreference(): Resolved;
+}

package/dist/types/util/color.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Colour maths for the runtime rules in spec 4.2: badge text colour from the accent's
+ * lightness, and a text-safe variant of the accent when it does not reach 4.5:1 on the
+ * page background. Pure functions over `[r, g, b]` in 0-255 so they are easy to test.
+ */
+export type RGB = [number, number, number];
+/** Parse `rgb(…)`, `rgba(…)`, `#rgb`, `#rrggbb` or `#rrggbbaa`. Undefined for anything else. */
+export declare function parseColor(text: string): RGB | undefined;
+export declare function toHex([r, g, b]: RGB): string;
+/** WCAG relative luminance, 0 (black) to 1 (white). */
+export declare function luminance([r, g, b]: RGB): number;
+/** WCAG contrast ratio, 1 to 21. */
+export declare function contrast(a: RGB, b: RGB): number;
+/** Spec 4.2: `#14161B` on light accents (lightness above 0.6), white otherwise. */
+export declare function badgeInk(accent: RGB): string;
+/**
+ * The accent itself when it reaches `ratio` against `background`, otherwise the nearest
+ * darker (light theme) or lighter (dark theme) shade that does. Mixes towards black or white
+ * in small steps so the hue is kept.
+ */
+export declare function textSafe(accent: RGB, background: RGB, dark: boolean, ratio?: number): RGB;
+export declare function mix(a: RGB, b: RGB, t: number): RGB;

package/dist/types/util/example.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Generated examples (ROADMAP amendment 9). When a message has no authored example, one is
+ * built from the schema so readers get a taste of real traffic. Values come from, in order:
+ * the field's own examples or default, const, the first enum value, the format, numeric bounds,
+ * then field-name heuristics. Never a bare "string" or 0 when a hint exists.
+ */
+import type { Schema } from '../model/types.js';
+export declare function generateExample(schema: Schema | undefined): unknown;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "asyncapi-viewer",
-  "version": "2.0.0",
+  "version": "2.1.0",
   "description": "Renders AsyncAPI 2 and 3 documents as a web component: <asyncapi-viewer src=\"...\">",
   "keywords": [
     "asyncapi",
@@ -23,13 +23,22 @@
   "files": [
     "dist",
     "theme",
+    "types",
     "README.md"
   ],
   "main": "./dist/asyncapi-viewer.js",
   "module": "./dist/asyncapi-viewer.js",
+  "types": "./dist/types/index.d.ts",
   "exports": {
-    ".": "./dist/asyncapi-viewer.js",
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "default": "./dist/asyncapi-viewer.js"
+    },
     "./iife": "./dist/asyncapi-viewer.iife.js",
+    "./react": {
+      "types": "./types/react.d.ts",
+      "default": "./types/react.js"
+    },
     "./theme/asyncapi-theme.css": "./theme/asyncapi-theme.css"
   },
   "publishConfig": {
@@ -37,7 +46,7 @@
   },
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "vite build && tsc -p tsconfig.build.json",
     "typecheck": "tsc --noEmit",
     "lint": "eslint .",
     "check": "npm run typecheck && npm run lint",

package/types/react.d.ts

@@ -0,0 +1,28 @@
+/**
+ * JSX typing for <asyncapi-viewer> in React 19. Opt in once, anywhere in the app:
+ *
+ *   import type {} from 'asyncapi-viewer/react';
+ *
+ * Attributes are the element's kebab-case names; booleans may be passed as true/false (React 19
+ * writes true as a bare attribute and removes false). Events use React 19's custom element
+ * convention: `onasyncapi-load` and `onasyncapi-error`.
+ */
+import type { DetailedHTMLProps, HTMLAttributes } from 'react';
+import type { AsyncAPIErrorEvent, AsyncAPILoadEvent, AsyncAPIViewerAttributes, AsyncAPIViewerElement } from 'asyncapi-viewer';
+
+export interface AsyncAPIViewerJSXProps
+  extends Omit<DetailedHTMLProps<HTMLAttributes<AsyncAPIViewerElement>, AsyncAPIViewerElement>, keyof AsyncAPIViewerAttributes>,
+    AsyncAPIViewerAttributes {
+  /** The document loaded and rendered. */
+  'onasyncapi-load'?: (event: AsyncAPILoadEvent) => void;
+  /** The document could not be loaded; the viewer shows the error in place. */
+  'onasyncapi-error'?: (event: AsyncAPIErrorEvent) => void;
+}
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'asyncapi-viewer': AsyncAPIViewerJSXProps;
+    }
+  }
+}

package/types/react.js

@@ -0,0 +1,2 @@
+// Types only: see react.d.ts. Present so that `import 'asyncapi-viewer/react'` also resolves.
+export {};