uidl-runtime 0.1.0

package/dist/types/actions.d.ts

@@ -0,0 +1,116 @@
+export interface SetStateAction {
+    setState: {
+        path: string;
+        value: unknown;
+    };
+}
+export interface NavigateAction {
+    navigate: {
+        route: string | Record<string, unknown>;
+    };
+}
+export interface ApiAction {
+    api: {
+        url: string;
+        method: "GET" | "POST" | "PUT" | "DELETE";
+        body?: Record<string, unknown>;
+        dataSource?: string;
+    };
+}
+export type MutationOperation = "create" | "update" | "delete" | "transition";
+export type ResolvableActionValue<T = unknown> = T | {
+    $bind: string;
+} | {
+    $expr: unknown;
+};
+export interface MutationActionConfig {
+    operation: MutationOperation;
+    /** Collection/doctype key understood by the host adapter or domain service. */
+    collection: ResolvableActionValue<string>;
+    id?: ResolvableActionValue<string | number>;
+    payload?: ResolvableActionValue<Record<string, unknown>>;
+    transition?: ResolvableActionValue<string>;
+    version?: ResolvableActionValue<number>;
+    resultPath?: string;
+    errorPath?: string;
+    fieldErrorsPath?: string;
+    statusPath?: string;
+    /** Runs only after the host mutationHandler resolves successfully. */
+    onSuccess?: Action;
+    /** Runs only after the host mutationHandler rejects or request validation fails. */
+    onError?: Action;
+}
+export interface MutationAction {
+    mutate: MutationActionConfig;
+}
+export interface CommandActionConfig {
+    /** Host-owned command name, e.g. "workspace.schema.save". */
+    name: ResolvableActionValue<string>;
+    payload?: ResolvableActionValue<Record<string, unknown>>;
+    resultPath?: string;
+    errorPath?: string;
+    statusPath?: string;
+    onSuccess?: Action;
+    onError?: Action;
+}
+export interface CommandAction {
+    command: CommandActionConfig;
+}
+export interface MutationRequest {
+    operation: MutationOperation;
+    collection: string;
+    id?: string | number;
+    payload?: Record<string, unknown>;
+    transition?: string;
+    version?: number;
+}
+export interface MutationResponse {
+    success: boolean;
+    request?: MutationRequest;
+    data?: unknown;
+    error?: string;
+    code?: string;
+    fields?: Record<string, string>;
+}
+export type MutationHandler = (request: MutationRequest) => Promise<unknown> | unknown;
+export interface CommandRequest {
+    name: string;
+    payload?: Record<string, unknown>;
+}
+export interface CommandResponse {
+    success: boolean;
+    request?: CommandRequest;
+    data?: unknown;
+    error?: string;
+    code?: string;
+    fields?: Record<string, string>;
+}
+export type CommandHandler = (request: CommandRequest) => Promise<unknown> | unknown;
+export interface ShowSnackbarAction {
+    showSnackbar: {
+        message: string;
+        duration?: number;
+    };
+}
+export interface ShowDialogAction {
+    showDialog: {
+        title: string;
+        content: string;
+    };
+}
+export interface ValidateAction {
+    validate: {
+        fields: string[];
+    };
+}
+export interface SequenceAction {
+    sequence: Action[];
+}
+export interface IfAction {
+    if: {
+        condition: Record<string, unknown>;
+        then: Action;
+        else?: Action;
+    };
+}
+export type Action = SetStateAction | NavigateAction | ApiAction | MutationAction | CommandAction | ShowSnackbarAction | ShowDialogAction | ValidateAction | SequenceAction | IfAction;

package/dist/types/editor.d.ts

@@ -0,0 +1,45 @@
+import { UIDLDocument, UIDLNode } from './index';
+export interface EditorDocument {
+    document: UIDLDocument;
+    flatNodeMap: Map<string, UIDLNode>;
+}
+export interface EditorState {
+    document: EditorDocument;
+    selectedNodeId: string | null;
+    hoveredNodeId: string | null;
+    activeBreakpoint: BreakpointId;
+    themeMode: "light" | "dark";
+    panelVisibility: PanelVisibility;
+    validationErrors: ValidationError[];
+    isDirty: boolean;
+}
+export type BreakpointId = "base" | "sm" | "md" | "lg" | "xl" | "2xl";
+export interface PanelVisibility {
+    palette: boolean;
+    layers: boolean;
+    properties: boolean;
+    style: boolean;
+}
+export interface ValidationError {
+    path: string;
+    message: string;
+    severity: "error" | "warning";
+}
+export interface EditorAction {
+    type: "selectNode" | "hoverNode" | "updateNode" | "addChild" | "deleteNode" | "moveNode" | "setBreakpoint" | "setThemeMode" | "togglePanel" | "setDocument" | "setValidationErrors" | "markClean";
+    payload?: unknown;
+}
+export interface UpdateNodePayload {
+    nodeId: string;
+    changes: Partial<UIDLNode>;
+}
+export interface AddChildPayload {
+    parentId: string;
+    childType: string;
+    index?: number;
+}
+export interface MoveNodePayload {
+    nodeId: string;
+    targetParentId: string;
+    index?: number;
+}

package/dist/types/index.d.ts

@@ -0,0 +1,82 @@
+export interface UIDLDocument {
+    $schema?: string;
+    version: string;
+    id: string;
+    name: string;
+    route?: string;
+    theme?: string;
+    state?: Record<string, unknown>;
+    dataSources?: Record<string, unknown>;
+    /**
+     * Named, reusable node sub-trees ("component templates"). A node with `componentId: "X"`
+     * instantiates `definitions.X` at render time — see `renderer/instantiateComponent.ts`.
+     */
+    definitions?: Record<string, UIDLNode>;
+    root: UIDLNode;
+}
+export interface UIDLNode {
+    id: string;
+    type: string;
+    name?: string;
+    props?: Record<string, unknown>;
+    style?: Record<string, unknown>;
+    children?: UIDLNode[];
+    slots?: Record<string, UIDLNode[]>;
+    responsive?: Record<string, unknown>;
+    visibility?: Record<string, unknown>;
+    bindings?: Record<string, unknown>;
+    events?: Record<string, unknown>;
+    repeat?: Record<string, unknown>;
+    ref?: string;
+    componentId?: string;
+    themeRef?: string;
+    testId?: string;
+}
+export interface DesignTokens {
+    color?: Record<string, string>;
+    font?: Record<string, string>;
+    spacing?: Record<string, string>;
+    radius?: Record<string, string>;
+    shadow?: Record<string, unknown>;
+}
+export interface WidgetManifest<TProps = Record<string, unknown>> {
+    type: string;
+    component: React.ComponentType<TProps>;
+    category: "layout" | "base" | "form" | "data" | "navigation" | "advanced";
+    acceptsChildren: boolean;
+    defaultProps?: Partial<TProps>;
+    propDescriptors?: ComponentPropDescriptor[];
+    propSchema?: Record<string, unknown>;
+    slots?: string[];
+    events?: string[];
+    eventDescriptors?: ComponentEventDescriptor[];
+    /**
+     * Hide from the Editor's WidgetPalette (Round 15). Chrome widgets like Sidebar/Navbar/
+     * Toolbar/Drawer/Panel are part of the document vocabulary and still fully renderable
+     * from JSON — they just aren't meant to be drag-dropped into a canvas by authors.
+     * Absent = visible, same as before this flag existed.
+     */
+    hideFromPalette?: boolean;
+    toTailwind?: (props: TProps, style?: Record<string, unknown>) => string;
+}
+export type ComponentPropType = "string" | "number" | "boolean" | "enum" | "array" | "object" | "node";
+export interface ComponentPropDescriptor {
+    name: string;
+    type: ComponentPropType;
+    description?: string;
+    values?: readonly string[];
+    required?: boolean;
+    bindable?: boolean;
+}
+export interface ComponentEventDescriptor {
+    name: string;
+    description?: string;
+    payload?: "value" | "rowAction" | "card" | "node" | "submit" | "close" | "event";
+}
+export interface ComponentRegistry {
+    get(type: string): WidgetManifest | undefined;
+    register(manifest: WidgetManifest): void;
+    has(type: string): boolean;
+    list(): WidgetManifest[];
+}
+export type { Theme, ThemePreset, PrimitiveTokens, SemanticTokens, TypographyToken, ComponentVariant, StyleIntent, ResponsiveValue, } from './theme';

package/dist/types/theme.d.ts

@@ -0,0 +1,95 @@
+export interface ResponsiveValue<T> {
+    base?: T;
+    [breakpoint: string]: T | undefined;
+}
+export interface PrimitiveTokens {
+    color: Record<string, string>;
+    spacing: Record<string, string>;
+    radius: Record<string, string>;
+    shadow: Record<string, string>;
+    font: Record<string, string>;
+    border: Record<string, string>;
+}
+export interface SemanticTokens {
+    color: Record<string, string>;
+    spacing: Record<string, string>;
+    radius: Record<string, string>;
+    shadow: Record<string, string>;
+    typography: Record<string, TypographyToken>;
+}
+export interface TypographyToken {
+    fontFamily?: string;
+    fontSize?: string;
+    fontWeight?: number | string;
+    lineHeight?: string;
+    letterSpacing?: string;
+}
+export interface ComponentVariant {
+    name: string;
+    props?: Record<string, unknown>;
+    style?: StyleIntent;
+    className?: string;
+}
+export type StyleIntent = {
+    gap?: string | ResponsiveValue<string>;
+    padding?: string | ResponsiveValue<string>;
+    paddingTop?: string | ResponsiveValue<string>;
+    paddingRight?: string | ResponsiveValue<string>;
+    paddingBottom?: string | ResponsiveValue<string>;
+    paddingLeft?: string | ResponsiveValue<string>;
+    margin?: string | ResponsiveValue<string>;
+    marginTop?: string | ResponsiveValue<string>;
+    marginRight?: string | ResponsiveValue<string>;
+    marginBottom?: string | ResponsiveValue<string>;
+    marginLeft?: string | ResponsiveValue<string>;
+    width?: string | ResponsiveValue<string>;
+    height?: string | ResponsiveValue<string>;
+    minWidth?: string | ResponsiveValue<string>;
+    maxWidth?: string | ResponsiveValue<string>;
+    minHeight?: string | ResponsiveValue<string>;
+    maxHeight?: string | ResponsiveValue<string>;
+    flexDirection?: "row" | "column" | "row-reverse" | "column-reverse" | ResponsiveValue<"row" | "column" | "row-reverse" | "column-reverse">;
+    justifyContent?: "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly" | ResponsiveValue<"start" | "center" | "end" | "space-between" | "space-around" | "space-evenly">;
+    alignItems?: "start" | "center" | "end" | "stretch" | "baseline" | ResponsiveValue<"start" | "center" | "end" | "stretch" | "baseline">;
+    display?: string | ResponsiveValue<string>;
+    position?: "static" | "relative" | "absolute" | "fixed" | "sticky" | ResponsiveValue<"static" | "relative" | "absolute" | "fixed" | "sticky">;
+    /** Shorthand for top/right/bottom/left together (Tailwind's `inset-*` utilities). */
+    inset?: string | ResponsiveValue<string>;
+    top?: string | ResponsiveValue<string>;
+    right?: string | ResponsiveValue<string>;
+    bottom?: string | ResponsiveValue<string>;
+    left?: string | ResponsiveValue<string>;
+    zIndex?: number | ResponsiveValue<number>;
+    background?: string | ResponsiveValue<string>;
+    color?: string | ResponsiveValue<string>;
+    fontSize?: string | ResponsiveValue<string>;
+    fontWeight?: number | string | ResponsiveValue<number | string>;
+    lineHeight?: string | ResponsiveValue<string>;
+    letterSpacing?: string | ResponsiveValue<string>;
+    borderRadius?: string | ResponsiveValue<string>;
+    borderWidth?: string | ResponsiveValue<string>;
+    borderColor?: string | ResponsiveValue<string>;
+    shadow?: string | ResponsiveValue<string>;
+    opacity?: number | ResponsiveValue<number>;
+    /**
+     * A semantic typography token reference (e.g. `"{semantics.typography.headline-medium}"`),
+     * applying that token's fontFamily/fontSize/fontWeight/lineHeight/letterSpacing together.
+     * Not responsive — a single typography token per node.
+     */
+    typography?: string;
+};
+export interface Theme {
+    id: string;
+    name: string;
+    mode: "light" | "dark";
+    breakpoints: Record<string, string>;
+    primitives: PrimitiveTokens;
+    semantics: SemanticTokens;
+    variants: Record<string, ComponentVariant[]>;
+}
+export interface ThemePreset {
+    id: string;
+    label: string;
+    mode: "light" | "dark";
+    theme: Theme;
+}