uidl-runtime 0.1.0

package/dist/editor/LayerTree.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { UIDLNode } from '../types';
+export interface LayerTreeProps {
+    root: UIDLNode;
+    selectedNodeId: string | null;
+    hoveredNodeId: string | null;
+    onSelectNode: (nodeId: string | null) => void;
+    onHoverNode: (nodeId: string | null) => void;
+    onMoveNode?: (nodeId: string, targetParentId: string, index?: number) => void;
+    className?: string;
+}
+export declare function LayerTree({ root, selectedNodeId, hoveredNodeId, onSelectNode, onHoverNode, onMoveNode, className, }: LayerTreeProps): React.JSX.Element;

package/dist/editor/PropertyPanel.d.ts

@@ -0,0 +1,7 @@
+import { UIDLNode } from '../types';
+export interface PropertyPanelProps {
+    node: UIDLNode | null;
+    onUpdateNode: (nodeId: string, changes: Partial<UIDLNode>) => void;
+    className?: string;
+}
+export declare function PropertyPanel({ node, onUpdateNode, className }: PropertyPanelProps): import("react").JSX.Element;

package/dist/editor/StylePanel.d.ts

@@ -0,0 +1,7 @@
+import { UIDLNode } from '../types';
+export interface StylePanelProps {
+    node: UIDLNode | null;
+    onUpdateNode: (nodeId: string, changes: Partial<UIDLNode>) => void;
+    className?: string;
+}
+export declare function StylePanel({ node, onUpdateNode, className }: StylePanelProps): import("react").JSX.Element;

package/dist/editor/ValidationStatus.d.ts

@@ -0,0 +1,9 @@
+export interface ValidationStatusProps {
+    errors: Array<{
+        path: string;
+        message: string;
+        severity: "error" | "warning";
+    }>;
+    className?: string;
+}
+export declare function ValidationStatus({ errors, className }: ValidationStatusProps): import("react").JSX.Element;

package/dist/editor/WidgetPalette.d.ts

@@ -0,0 +1,6 @@
+export interface WidgetPaletteProps {
+    onSelectWidget: (widgetType: string) => void;
+    selectedNodeId: string | null;
+    className?: string;
+}
+export declare function WidgetPalette({ onSelectWidget, selectedNodeId, className, }: WidgetPaletteProps): import("react").JSX.Element;

package/dist/editor/document.d.ts

@@ -0,0 +1,10 @@
+import { UIDLNode } from '../types';
+import { RenderScope } from '../expr/evaluate';
+export declare function buildFlatNodeMap(root: UIDLNode): Map<string, UIDLNode>;
+export declare function buildNestedTree(flatMap: Map<string, UIDLNode>, rootId: string): UIDLNode;
+export declare function findNodeById(flatMap: Map<string, UIDLNode>, nodeId: string): UIDLNode | undefined;
+export declare function findParentId(flatMap: Map<string, UIDLNode>, nodeId: string): string | undefined;
+export declare function removeChildFromNode(parent: UIDLNode, nodeId: string): UIDLNode;
+export declare function findNodePath(flatMap: Map<string, UIDLNode>, nodeId: string): string[];
+export declare function getNodeDepth(flatMap: Map<string, UIDLNode>, nodeId: string): number;
+export declare function isNodeVisible(node: UIDLNode, scope?: RenderScope): boolean;

package/dist/editor/index.d.ts

@@ -0,0 +1,2 @@
+export { Editor } from './Editor';
+export type { EditorProps } from './Editor';

package/dist/editor/store.d.ts

@@ -0,0 +1,46 @@
+import { UIDLDocument, UIDLNode } from '../types';
+export interface EditorStore {
+    document: UIDLDocument;
+    flatNodeMap: Map<string, UIDLNode>;
+    history: {
+        past: UIDLDocument[];
+        future: UIDLDocument[];
+    };
+    selectedNodeId: string | null;
+    hoveredNodeId: string | null;
+    activeBreakpoint: string;
+    themeMode: "light" | "dark";
+    panelVisibility: {
+        palette: boolean;
+        layers: boolean;
+        properties: boolean;
+        style: boolean;
+    };
+    validationErrors: Array<{
+        path: string;
+        message: string;
+        severity: "error" | "warning";
+    }>;
+    isDirty: boolean;
+    canUndo: boolean;
+    canRedo: boolean;
+    selectNode: (nodeId: string | null) => void;
+    hoverNode: (nodeId: string | null) => void;
+    updateNode: (nodeId: string, changes: Partial<UIDLNode>) => void;
+    addChild: (parentId: string, childType: string, index?: number) => void;
+    deleteNode: (nodeId: string) => void;
+    moveNode: (nodeId: string, targetParentId: string, index?: number) => void;
+    setBreakpoint: (breakpoint: string) => void;
+    setThemeMode: (mode: "light" | "dark") => void;
+    togglePanel: (panel: keyof EditorStore["panelVisibility"]) => void;
+    setDocument: (document: UIDLDocument) => void;
+    setValidationErrors: (errors: Array<{
+        path: string;
+        message: string;
+        severity: "error" | "warning";
+    }>) => void;
+    markClean: () => void;
+    undo: () => void;
+    redo: () => void;
+}
+export declare function createEditorStore(initialDocument?: UIDLDocument): import('zustand').UseBoundStore<import('zustand').StoreApi<EditorStore>>;

package/dist/expr/evaluate.d.ts

@@ -0,0 +1,51 @@
+export interface RenderScope {
+    theme?: unknown;
+    local?: Record<string, unknown>;
+    state?: Record<string, unknown>;
+    session?: Record<string, unknown>;
+    route?: Record<string, unknown>;
+    data?: Record<string, unknown>;
+    index?: number;
+}
+export interface LiteralExpr {
+    literal: unknown;
+}
+export interface PathExpr {
+    path: string;
+}
+export interface EqExpr {
+    "==": [Expr, Expr];
+}
+export interface NeqExpr {
+    "!=": [Expr, Expr];
+}
+export interface AndExpr {
+    and: [Expr, Expr];
+}
+export interface OrExpr {
+    or: [Expr, Expr];
+}
+export interface NotExpr {
+    not: Expr;
+}
+export interface IfExpr {
+    if: [Expr, Expr, Expr];
+}
+export interface CoalesceExpr {
+    "??": [Expr, Expr];
+}
+/**
+ * Aggregate a numeric field across a collection already in scope.
+ *
+ * List pages need a real total in their KPI row. Rather than open the evaluator up to
+ * arbitrary arithmetic, this stays declarative: name a collection path, a field, and one of
+ * three fixed reducers. Non-numeric and missing values are skipped rather than coerced, so a
+ * blank cell cannot silently turn a total into NaN.
+ */
+export interface AggExpr {
+    agg: "sum" | "count" | "avg";
+    over: string;
+    field?: string;
+}
+export type Expr = LiteralExpr | PathExpr | EqExpr | NeqExpr | AndExpr | OrExpr | NotExpr | IfExpr | CoalesceExpr | AggExpr;
+export declare function evaluate(expr: unknown, scope: RenderScope): unknown;

package/dist/hooks/useElementWidth.d.ts

@@ -0,0 +1,14 @@
+import { RefObject } from 'react';
+/**
+ * Tracks an element's rendered width.
+ *
+ * Charts need it because Meridian sizes its SVGs by *aspect ratio*, and picks a different
+ * ratio at every call site so that the drawn height still lands around 235px — 4.15 for the
+ * full-width Cashflow line, 2.05 for the half-width Profit and Loss bars. A reusable widget
+ * has no such fixed call site, so it measures instead and derives the ratio from the width it
+ * actually got, which keeps the chart the same height in a narrow column and a wide page.
+ *
+ * Returns 0 until the first measurement (and in environments without ResizeObserver, such as
+ * jsdom), which callers must treat as "not measured yet" rather than "zero wide".
+ */
+export declare function useElementWidth<T extends HTMLElement>(): [RefObject<T | null>, number];

package/dist/index.d.ts

@@ -0,0 +1,61 @@
+export { renderUIDocument, createRenderContext } from './renderer/renderDocument';
+export type { RenderOptions, RenderContext } from './renderer/renderDocument';
+export { UIDocumentRenderer } from './renderer/UIDocumentRenderer';
+export type { UIDocumentRendererProps } from './renderer/UIDocumentRenderer';
+export { createRegistry, defaultRegistry, registerComponent } from './registry/registry';
+export { UIDL_RUNTIME_VERSION, REGISTRY_VERSION, getRegistryVersion, getRegistryFingerprint, type RegistryVersion } from './version';
+export type { UIDLDocument, UIDLNode, DesignTokens, WidgetManifest, ComponentRegistry, ComponentPropDescriptor, ComponentPropType, ComponentEventDescriptor, Theme, ThemePreset, PrimitiveTokens, SemanticTokens, TypographyToken, ComponentVariant, StyleIntent, ResponsiveValue } from './types';
+export type { Action, SetStateAction, NavigateAction, ApiAction, CommandAction, CommandActionConfig, CommandHandler, CommandRequest, CommandResponse, MutationAction, MutationActionConfig, MutationHandler, MutationOperation, MutationRequest, MutationResponse, ResolvableActionValue, ShowSnackbarAction, ShowDialogAction, ValidateAction, SequenceAction, IfAction, } from './types/actions';
+export { DocumentSchema, DesignTokensSchema, ThemePresetsSchema } from './schemas/document';
+export { ActionSchema, ActionsSchema } from './schemas/actions';
+export { generateJsonSchemas } from './schema/jsonSchema';
+export type { JsonSchemaExport } from './schema/jsonSchema';
+export { createThemeEngine } from './theme/engine';
+export type { ThemeEngine } from './theme/engine';
+export { registerTheme, registerThemePreset, getTheme, getThemePreset, listThemes, listPresets, createThemeRegistry } from './theme/registry';
+export { defaultLightTheme, defaultDarkTheme, defaultLightPreset, defaultDarkPreset } from './theme/presets';
+export { meridianLightTheme, meridianDarkTheme, meridianLightPreset, meridianDarkPreset } from './theme/meridianPreset';
+export { themeToCssVariables, themeToCssVariablesMap, themeToTailwindV4, themeToTailwindV3 } from './theme/tailwind';
+export { serializeTheme, serializeThemePreset, deserializeTheme, deserializeThemePreset } from './theme/serialize';
+export { useElementWidth } from './hooks/useElementWidth';
+export { normalizeNodeResponsive } from './utils/responsive';
+export { validateResponsiveValue, validateResponsiveStyle } from './validate/validateResponsive';
+export { createDocumentState, getByPath, setByPath } from './state/createDocumentState';
+export type { DocumentStateStore } from './state/createDocumentState';
+export { createInlineArrayResolver, isQueryDataSource, resolveQueryDescriptor, runDataSources, serializeResolvedQueries, } from './state/dataSources';
+export type { DataSourceResolver, DataSourceContext, QueryDataSource, BindScope, DataSourceStatus, RunDataSourcesOptions, } from './state/dataSources';
+export { DataError, isDataError, InMemoryAdapter, createInMemoryAdapter, HttpAdapter, createHttpAdapter, } from './data';
+export type { DataAdapter, DataErrorCode, Mutation, Query, QueryFilter, QueryOp, QueryPage, QueryResult, QuerySort, RecordMeta, InMemoryAdapterOptions, HttpAdapterOptions, } from './data';
+export { createEventBus, ActionInterpreter } from './actions';
+export { Editor } from './editor';
+export type { EditorProps } from './editor';
+export { QRCodeSVG, BarcodeSVG, DataMatrixSVG } from './components/BarcodeAndQRCode';
+export { Icon, IconWidget, ICON_PATHS, ICON_NAMES, hasIcon } from './components/icons';
+export type { IconProps, IconName } from './components/icons';
+export { MeridianBarChart, MeridianLineChart, MeridianDonutChart } from './components/charts';
+export { prefixFormat, MERIDIAN_SERIES_COLORS, MERIDIAN_DONUT_COLORS } from './utils/chart';
+export type { BarChartProps, LineChartProps, DonutChartProps, DonutSector } from './components/charts';
+export type { QRCodeSVGProps, BarcodeSVGProps, DataMatrixSVGProps } from './components/BarcodeAndQRCode';
+export { formatCellValue, isNumericFormat, statusColor } from './utils/listCell';
+export type { CellFormat, CellFormatOptions } from './utils/listCell';
+export { t, formatRupiah, formatIndonesianDate, formatTerbilang } from './utils/i18n';
+export type { Language } from './utils/i18n';
+export { generateUidlFromPrompt } from './services/aiPromptGenerator';
+export { Drawer, Snackbar, Dialog, Button, Badge } from './components/primitives';
+export type { DrawerProps, SnackbarProps, DialogProps, ButtonProps, BadgeProps } from './components/primitives';
+export { PAGE_RECIPES, isPageRecipe, validateHostCapabilities, semanticNodeId, semanticListNodeIds, } from './compiler/types.js';
+export type { PageRecipe, LocalizedText, FieldWidget, FieldOption, FieldMeta, ListColumn, ListFilter, ListSummary, ListPageMeta, StateTransition, DocumentStates, ChildTableRef, FormPageMeta, ReportColumn, ReportFilter, ReportPageMeta, DashboardKpi, DashboardChart, DashboardShortcut, DashboardPageMeta, SettingsField, SettingsSection, SettingsPageMeta, TreeNode, TreePageMeta, WizardStep, WizardPageMeta, RecipeMetaMap, HostCapabilities, UiPolicy, RoutePolicy, ResponsivePolicy, CompilePageInput, CompilePageInputFor, CompilePageResult, PageCompiler, CapabilityIssue, } from './compiler/types.js';
+export { compileListPage, parseListQueryParams, serializeListQueryParams, } from './compiler/list.js';
+export type { CompileListOptions } from './compiler/list.js';
+export { compileFormPage } from './compiler/form.js';
+export type { CompileFormOptions } from './compiler/form.js';
+export { compileReportPage } from './compiler/report.js';
+export type { CompileReportOptions } from './compiler/report.js';
+export { compileDashboardPage } from './compiler/dashboard.js';
+export type { CompileDashboardOptions } from './compiler/dashboard.js';
+export { compileSettingsPage } from './compiler/settings.js';
+export type { CompileSettingsOptions } from './compiler/settings.js';
+export { compileTreePage } from './compiler/tree.js';
+export type { CompileTreeOptions } from './compiler/tree.js';
+export { compileWizardPage } from './compiler/wizard.js';
+export type { CompileWizardOptions } from './compiler/wizard.js';

package/dist/registry/defaults.d.ts

@@ -0,0 +1,2 @@
+import { WidgetManifest } from '../types';
+export declare const defaultWidgets: WidgetManifest[];

package/dist/registry/registry.d.ts

@@ -0,0 +1,4 @@
+import { ComponentRegistry, WidgetManifest } from '../types';
+export declare function createRegistry(): ComponentRegistry;
+export declare const defaultRegistry: ComponentRegistry;
+export declare function registerComponent(manifest: WidgetManifest): void;

package/dist/renderer/RenderNode.d.ts

@@ -0,0 +1,16 @@
+import { default as React } from 'react';
+import { ComponentRegistry, UIDLNode, Theme } from '../types';
+import { RenderScope as ExprRenderScope } from '../expr/evaluate';
+import { ActionInterpreter } from '../actions/interpreter';
+interface RenderScope extends ExprRenderScope {
+    theme?: Theme;
+    local?: Record<string, unknown>;
+    index?: number;
+    actionInterpreter?: ActionInterpreter;
+    registry?: ComponentRegistry;
+    definitions?: Record<string, UIDLNode>;
+    /** componentIds currently being expanded, ancestor-first — used to detect circular references. */
+    componentStack?: string[];
+}
+export declare function renderNode(node: UIDLNode, scope?: RenderScope): React.ReactNode;
+export {};

package/dist/renderer/UIDocumentRenderer.d.ts

@@ -0,0 +1,13 @@
+import { UIDLDocument } from '../types';
+import { RenderOptions } from './renderDocument';
+export interface UIDocumentRendererProps extends RenderOptions {
+    document: UIDLDocument;
+}
+/**
+ * The stateful counterpart to `renderUIDocument`: a real component that stays subscribed to the
+ * document's event bus for its whole lifetime, so `showDialog`/`showSnackbar` actions actually
+ * render something instead of firing an event nobody listens to. Use this (not the plain
+ * `renderUIDocument` function) whenever a document's actions may include `showDialog` or
+ * `showSnackbar`.
+ */
+export declare function UIDocumentRenderer({ document, theme, stateStore, session, dataSources, dataAdapter, mutationHandler, commandHandler, onRouteChange, registry, apiAllowlist, apiMaxResponseBytes, apiMaxConcurrentCalls, }: UIDocumentRendererProps): import("react").JSX.Element;

package/dist/renderer/instantiateComponent.d.ts

@@ -0,0 +1,18 @@
+import { UIDLNode } from '../types';
+/**
+ * Merges an instance node (a node with `componentId` set, plus whatever `props`/`style`/etc it
+ * carries) onto its definition (the named sub-tree from `document.definitions`), producing the
+ * node to actually render. The instance always wins on conflicts — same "instance overrides
+ * template" convention as `variant.style`/`node.style` for `themeRef` in RenderNode.tsx.
+ *
+ * - `props`/`style`/`events`/`bindings`: shallow-merged, instance keys win.
+ * - `slots`: shallow-merged by slot name, instance's slot content replaces the definition's
+ *   default content for that name; slot names the instance doesn't mention keep the
+ *   definition's own content. (Slots always render after children, in whatever position
+ *   RenderNode.tsx already renders them — this does not add interleaved/positioned slots.)
+ * - `children`: the instance's children *replace* the definition's entirely when the instance
+ *   provides any; otherwise the definition's own (default/example) children are used.
+ * - Everything else the instance doesn't specify (type, responsive, repeat, themeRef, testId,
+ *   visibility) falls back to the definition's value.
+ */
+export declare function instantiateComponent(instanceNode: UIDLNode, definition: UIDLNode): UIDLNode;

package/dist/renderer/renderDocument.d.ts

@@ -0,0 +1,63 @@
+import { default as React } from 'react';
+import { ComponentRegistry, UIDLDocument, Theme } from '../types';
+import { DocumentStateStore } from '../state/createDocumentState';
+import { EventBus } from '../actions/eventBus';
+import { ActionInterpreter, ApiAllowlist } from '../actions/interpreter';
+import { DataAdapter } from '../data/types';
+import { CommandHandler, MutationHandler } from '../types/actions';
+export interface RenderOptions {
+    theme?: Theme;
+    stateStore?: DocumentStateStore;
+    session?: Record<string, unknown>;
+    dataSources?: Record<string, unknown>;
+    /**
+     * A `DataAdapter` to resolve `{"$query": {...}}` entries in `dataSources` against. Only
+     * `<UIDocumentRenderer />` actually issues the fetches (it owns the effect loop that reruns a
+     * query when its `$bind`-resolved params change); passing this to `renderUIDocument` still
+     * lets its single pass render the `state.$data.<name>.status === "loading"` placeholder
+     * correctly, but nothing will ever resolve it — see the `$query`-without-Renderer warning
+     * below.
+     */
+    dataAdapter?: DataAdapter;
+    /**
+     * Host-owned handler for UIDL `mutate` actions. Wire this to an adapter-backed domain service
+     * in demos, and later to the same HTTP contract, so business writes stay outside components.
+     */
+    mutationHandler?: MutationHandler;
+    /** Host-owned handler for UIDL `command` actions. Unset means commands are disabled. */
+    commandHandler?: CommandHandler;
+    onRouteChange?: (route: string | Record<string, unknown>) => void;
+    registry?: ComponentRegistry;
+    /**
+     * Hosts a document's `api` actions are allowed to call. `api` actions refuse to run unless
+     * this is set — see `ActionInterpreter`'s constructor for why the default is fail-closed.
+     */
+    apiAllowlist?: ApiAllowlist;
+    /** Max `api` response body size in bytes before the request is aborted. Default 5MB. */
+    apiMaxResponseBytes?: number;
+    /** Max number of `api` actions to run concurrently; further calls fail fast. Default 6. */
+    apiMaxConcurrentCalls?: number;
+}
+export interface RenderContext {
+    theme: Theme | undefined;
+    data: Record<string, unknown>;
+    stateSnapshot: Record<string, unknown> | undefined;
+    session: Record<string, unknown> | undefined;
+    eventBus: EventBus;
+    interpreter: ActionInterpreter;
+}
+/**
+ * Builds everything renderNode needs (theme, resolved data sources, an ActionInterpreter wired
+ * to a fresh EventBus) without rendering anything. Shared by `renderUIDocument` (a plain,
+ * single-pass function — has no way to react to further events after it returns) and
+ * `UIDocumentRenderer` (a real component that stays subscribed to the event bus, so `showDialog`/
+ * `showSnackbar` actions can actually show something — see UIDocumentRenderer.tsx).
+ */
+export declare function createRenderContext(document: UIDLDocument, options?: RenderOptions): RenderContext;
+export declare function renderUIDocument(document: UIDLDocument, options?: RenderOptions): React.ReactNode;
+/**
+ * CSS custom properties for the theme's tokens are set once on the root element so
+ * `var(--color-primary)`-style references (from ThemeEngine.resolveInlineStyle) resolve for
+ * every descendant, without needing a global stylesheet or build-time Tailwind support.
+ */
+export declare function withThemeCssVariables(rendered: React.ReactNode, theme: Theme | undefined): React.ReactNode;