uidl-runtime 0.1.0

package/dist/utils/chart.d.ts

@@ -0,0 +1,12 @@
+/** utils/chart.ts — y-axis labels as "1 K" / "12 M" / "3 B". */
+export declare function prefixFormat(value: number): string;
+/**
+ * Meridian's Expenses donut ramp: a single-hue pink scale, darkest first. Kept as a named
+ * export so a document that supplies no per-series colors still lands on the app's palette
+ * instead of an ad-hoc rainbow.
+ */
+export declare const MERIDIAN_DONUT_COLORS: string[];
+/** Meridian's two-series dashboard palette (Cashflow inflow/outflow, P&L positive/negative). */
+export declare const MERIDIAN_SERIES_COLORS: string[];
+export declare const MERIDIAN_CHART_GRID_COLOR = "rgba(0, 0, 0, 0.2)";
+export declare const MERIDIAN_CHART_FONT_COLOR = "#7c7c7c";

package/dist/utils/cn.d.ts

@@ -0,0 +1 @@
+export declare function cn(...classes: (string | undefined | false | null)[]): string;

package/dist/utils/formLayout.d.ts

@@ -0,0 +1,93 @@
+/** FormContainer's page: the card is centred on the page ground, not flush to it. */
+export declare const MERIDIAN_FORM_PAGE_STYLE: {
+    readonly display: "flex";
+    readonly flexDirection: "column";
+    readonly alignItems: "center";
+    readonly width: "w-full";
+    readonly minHeight: "min-h-full";
+    readonly background: "{primitives.color.surface}";
+    readonly paddingTop: "pt-4";
+    readonly fontSize: "text-base";
+};
+/** A full-width form (FormContainer's `useFullWidth`, used when the document has a line table). */
+export declare const MERIDIAN_FORM_PAGE_FULL_STYLE: {
+    readonly display: "flex";
+    readonly flexDirection: "column";
+    readonly width: "w-full";
+    readonly minHeight: "min-h-full";
+    readonly background: "{primitives.color.surface}";
+    readonly fontSize: "text-base";
+};
+/** FormContainer — the one place in Meridian where border, radius and shadow are all used. */
+export declare const MERIDIAN_FORM_SHELL_STYLE: {
+    readonly display: "flex";
+    readonly flexDirection: "column";
+    readonly width: "w-form";
+    readonly maxWidth: "max-w-full";
+    readonly margin: "mx-4 mb-4";
+    readonly background: "{primitives.color.surface-elevated}";
+    readonly borderWidth: "border";
+    readonly borderColor: "{primitives.color.border}";
+    readonly borderRadius: "rounded-lg";
+    readonly shadow: "{primitives.shadow.lg}";
+};
+/** FormHeader — the in-page title bar. */
+export declare const MERIDIAN_FORM_HEADER_STYLE: {
+    readonly display: "flex";
+    readonly justifyContent: "space-between";
+    readonly alignItems: "center";
+    readonly padding: "px-4";
+    readonly height: "h-row-large";
+    readonly borderWidth: "border-b";
+    readonly borderColor: "{primitives.color.border}";
+};
+/** TwoColumnForm — label and control share one row, closed by a rule. */
+export declare const MERIDIAN_FORM_ROW_STYLE: {
+    readonly borderWidth: "border-b";
+    readonly borderColor: "{primitives.color.border}";
+    readonly minHeight: "min-h-row-mid";
+};
+export declare const MERIDIAN_FORM_ROW_GRID: {
+    readonly display: "grid";
+    readonly gridTemplateColumns: "minmax(0, 1fr) minmax(0, 1fr)";
+    readonly alignItems: "center";
+};
+/** The label sits in the start column; only it carries the leading padding. */
+export declare const MERIDIAN_FORM_LABEL_STYLE: {
+    readonly padding: "ps-4";
+    readonly color: "{primitives.color.text-secondary}";
+    readonly fontSize: "text-base";
+};
+/** The control sits flush in the end column — the row's rule does the separating. */
+export declare const MERIDIAN_FORM_CONTROL_STYLE: {
+    readonly padding: "py-2 pe-4";
+};
+/**
+ * Controls/Base: inside a form row a control is borderless and `size="small"`, because the
+ * row it sits in is already bounded. A boxed control there reads as a second frame.
+ */
+export declare const MERIDIAN_FORM_CONTROL_PROPS: {
+    readonly border: false;
+    readonly size: "small";
+};
+/** SectionHeader */
+export declare const MERIDIAN_SECTION_HEADER_STYLE: {
+    readonly display: "flex";
+    readonly justifyContent: "space-between";
+    readonly alignItems: "center";
+    readonly padding: "px-4 py-2.5";
+    readonly background: "{primitives.color.surface}";
+    readonly borderWidth: "border-b";
+    readonly borderColor: "{primitives.color.border}";
+    readonly fontSize: "text-sm";
+    readonly fontWeight: 600;
+    readonly color: "{primitives.color.text-secondary}";
+};
+/** CommonForm's footer: actions right-aligned in a `p-4` strip below the last row. */
+export declare const MERIDIAN_FORM_FOOTER_STYLE: {
+    readonly display: "flex";
+    readonly justifyContent: "end";
+    readonly alignItems: "center";
+    readonly gap: "gap-2";
+    readonly padding: "p-4";
+};

package/dist/utils/i18n.d.ts

@@ -0,0 +1,132 @@
+export type Language = "id" | "en";
+export declare const DICTIONARY: {
+    id: {
+        dashboard: string;
+        operations: string;
+        inventory: string;
+        accounting: string;
+        reports: string;
+        controls: string;
+        settings: string;
+        playground: string;
+        search: string;
+        openConsole: string;
+        backToCatalog: string;
+        create: string;
+        save: string;
+        cancel: string;
+        print: string;
+        export: string;
+        import: string;
+        format: string;
+        copy: string;
+        delete: string;
+        edit: string;
+        detail: string;
+        filter: string;
+        downloadPdf: string;
+        totalReceivables: string;
+        totalPayables: string;
+        netProfit: string;
+        cashBalance: string;
+        debit: string;
+        credit: string;
+        balance: string;
+        taxInvoice: string;
+        salesInvoice: string;
+        purchaseOrder: string;
+        billOfMaterials: string;
+        workOrder: string;
+        deviceHistoryRecord: string;
+        prescription: string;
+        murabahahAgreement: string;
+        shippingLabel: string;
+        customer: string;
+        supplier: string;
+        status: string;
+        date: string;
+        dueDate: string;
+        amount: string;
+        qty: string;
+        price: string;
+        subtotal: string;
+        tax: string;
+        grandTotal: string;
+        terbilang: string;
+    };
+    en: {
+        dashboard: string;
+        operations: string;
+        inventory: string;
+        accounting: string;
+        reports: string;
+        controls: string;
+        settings: string;
+        playground: string;
+        search: string;
+        openConsole: string;
+        backToCatalog: string;
+        create: string;
+        save: string;
+        cancel: string;
+        print: string;
+        export: string;
+        import: string;
+        format: string;
+        copy: string;
+        delete: string;
+        edit: string;
+        detail: string;
+        filter: string;
+        downloadPdf: string;
+        totalReceivables: string;
+        totalPayables: string;
+        netProfit: string;
+        cashBalance: string;
+        debit: string;
+        credit: string;
+        balance: string;
+        taxInvoice: string;
+        salesInvoice: string;
+        purchaseOrder: string;
+        billOfMaterials: string;
+        workOrder: string;
+        deviceHistoryRecord: string;
+        prescription: string;
+        murabahahAgreement: string;
+        shippingLabel: string;
+        customer: string;
+        supplier: string;
+        status: string;
+        date: string;
+        dueDate: string;
+        amount: string;
+        qty: string;
+        price: string;
+        subtotal: string;
+        tax: string;
+        grandTotal: string;
+        terbilang: string;
+    };
+};
+export declare function t(key: keyof typeof DICTIONARY["id"] | string, lang?: Language): string;
+/**
+ * Resolves a bilingual label object ({ id: string, en: string }) or plain string according to active language.
+ */
+export declare function localize(label: {
+    id?: string;
+    en?: string;
+} | string | undefined, lang?: Language): string;
+/**
+ * Formats a number or numeric string to Indonesian Rupiah currency standard (e.g. Rp 1.500.000).
+ */
+export declare function formatRupiah(amount: number | string, includePrefix?: boolean): string;
+/**
+ * Formats date string (YYYY-MM-DD or ISO) into formatted Indonesian or English date text.
+ */
+export declare function formatIndonesianDate(dateInput: string | Date, lang?: Language): string;
+/**
+ * Converts Indonesian numeric amount into canonical legal words (Terbilang Rupiah).
+ * Example: 1540000 -> "Satu Juta Lima Ratus Empat Puluh Ribu Rupiah"
+ */
+export declare function formatTerbilang(amountInput: number | string): string;

package/dist/utils/listCell.d.ts

@@ -0,0 +1,21 @@
+export declare function statusColor(status: string): string;
+/**
+ * How a column's values are printed. Mirrors the `fieldtype` distinctions Meridian's formatter
+ * actually branches on, not the full widget list — `text` is everything with no special rule.
+ */
+export type CellFormat = "text" | "currency" | "number" | "integer" | "date" | "status" | "check";
+/** `isNumeric` in utils.ts — the fieldtypes Meridian right-aligns. */
+export declare function isNumericFormat(format: CellFormat | undefined): boolean;
+export interface CellFormatOptions {
+    /** BCP 47 tag for number/date formatting. Meridian uses the instance's locale. */
+    locale?: string;
+    /** ISO 4217 code. When set, `currency` columns print with the symbol. */
+    currency?: string;
+    /** Decimal places for `number` columns — SystemSettings.displayPrecision upstream. */
+    precision?: number;
+}
+/**
+ * Returns the printable text for a cell, or `null` when the caller should render a status pill
+ * instead (the one case Meridian does not render as text).
+ */
+export declare function formatCellValue(value: unknown, format: CellFormat | undefined, options?: CellFormatOptions): string;

package/dist/utils/responsive.d.ts

@@ -0,0 +1,3 @@
+import { UIDLNode } from '../types';
+export declare function flattenResponsive(obj?: Record<string, unknown>, breakpoints?: string[]): string;
+export declare function normalizeNodeResponsive(node: UIDLNode): UIDLNode;

package/dist/utils/tailwind.d.ts

@@ -0,0 +1,23 @@
+export declare function resolveFlexDirection(value: unknown): string | undefined;
+export declare function resolveJustify(value: unknown): string | undefined;
+export declare function resolveAlign(value: unknown): string | undefined;
+export declare function resolvePosition(value: unknown): string | undefined;
+export declare function resolvePadding(value: unknown): string | undefined;
+export declare function resolveMargin(value: unknown): string | undefined;
+export declare function resolveTextStyle(value: unknown): string | undefined;
+/**
+ * Turns a `visibility.breakpoints` list (which categories the node should be visible in) into
+ * Tailwind `hidden`/`block` classes. Named `resolveBreakpointVisibility` (not `resolveVisibility`)
+ * to avoid confusion with `RenderNode.tsx`'s condition-based `resolveVisibility`, which decides
+ * whether to render the node at all — this one keeps the node in the DOM and toggles CSS
+ * `display` per breakpoint instead.
+ *
+ * Only emits a class where visibility actually *changes* between adjacent breakpoints, so e.g.
+ * `breakpoints: ["mobile"]` produces just `"md:hidden"` (hidden from md up, no need to also
+ * repeat `lg:hidden xl:hidden` — nothing turns it back on) instead of one `hidden`/`block`
+ * class per category independently, which could contradict a previous one at the same
+ * breakpoint (e.g. both `md:block` and `md:hidden` applying at once, whichever wins depending
+ * on unrelated CSS declaration order).
+ */
+export declare function resolveVisibility(visibility: unknown): string | undefined;
+export declare function resolveClassName(style?: Record<string, unknown>, _responsive?: Record<string, unknown>): string;

package/dist/validate/validateResponsive.d.ts

@@ -0,0 +1,7 @@
+import { Theme } from '../types/theme';
+export interface ResponsiveValidationError {
+    path: string;
+    message: string;
+}
+export declare function validateResponsiveValue(value: unknown, theme: Theme): ResponsiveValidationError[];
+export declare function validateResponsiveStyle(style: Record<string, unknown>, theme: Theme): ResponsiveValidationError[];

package/dist/version.d.ts

@@ -0,0 +1,10 @@
+export declare const UIDL_RUNTIME_VERSION = "1.1.0";
+export type RegistryVersion = {
+    version: string;
+    componentCount: number;
+    components: string[];
+};
+export declare function computeRegistryVersion(): RegistryVersion;
+export declare const REGISTRY_VERSION: RegistryVersion;
+export declare function getRegistryVersion(): RegistryVersion;
+export declare function getRegistryFingerprint(): string;

package/package.json

@@ -0,0 +1,109 @@
+{
+  "name": "uidl-runtime",
+  "version": "0.1.0",
+  "main": "./dist/uidl-runtime.js",
+  "module": "./dist/uidl-runtime.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/uidl-runtime.mjs",
+      "require": "./dist/uidl-runtime.js",
+      "default": "./dist/uidl-runtime.mjs"
+    },
+    "./style.css": "./dist/style.css",
+    "./schema/*.json": "./dist/schema/*.json"
+  },
+  "bin": {
+    "uidl-validate": "./bin/validate.mjs"
+  },
+  "files": [
+    "dist",
+    "bin"
+  ],
+  "workspaces": [
+    "packages/*",
+    "apps/*"
+  ],
+  "scripts": {
+    "dev": "npm run dev:reference",
+    "dev:core": "vite",
+    "dev:reference": "vite --config apps/reference/vite.config.ts",
+    "dev:reference:http": "VITE_DATA_MODE=http VITE_API_BASE_URL=http://127.0.0.1:8787/api vite --config apps/reference/vite.config.ts",
+    "mock:api": "node scripts/mock-server.mjs",
+    "build:reference": "vite build --config apps/reference/vite.config.ts",
+    "preview:reference": "vite preview --config apps/reference/vite.config.ts",
+    "build": "tsc -b && vite build && npm run build:css && npm run build:schema",
+    "build:css": "tailwindcss -i packages/core/src/style.css -o dist/style.css --minify",
+    "build:schema": "node scripts/generate-json-schema.mjs",
+    "preview": "vite preview",
+    "lint": "eslint .",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "smoke:package": "npm run build && node scripts/smoke-package-consumer.mjs",
+    "validate": "node bin/validate.mjs",
+    "validate:examples": "node bin/validate.mjs packages/templates/src/documents/*.json",
+    "audit:reference": "tsx scripts/audit-reference-coverage.mts",
+    "test:reference": "playwright test",
+    "test:reference:update": "playwright test --update-snapshots",
+    "test:reference:http": "PLAYWRIGHT_DATA_MODE=http playwright test e2e/real-reference-acceptance.spec.ts"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@heroicons/react": "^2.2.0",
+    "@playwright/test": "^1.62.1",
+    "@tailwindcss/cli": "^4.3.3",
+    "@tailwindcss/vite": "^4.0.0",
+    "@testing-library/jest-dom": "^7.0.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.4",
+    "@types/node": "^26.2.0",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "ajv": "^8.20.0",
+    "autoprefixer": "^10.4.0",
+    "eslint": "^10.8.1",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.4",
+    "globals": "^17.11.0",
+    "jsdom": "^30.0.1",
+    "postcss": "^8.4.0",
+    "tailwindcss": "^4.0.0",
+    "tsx": "^4.23.12",
+    "typescript": "~5.6.0",
+    "typescript-eslint": "^8.67.0",
+    "vite": "^6.0.0",
+    "vite-plugin-dts": "^4.3.0",
+    "vitest": "^4.1.10"
+  },
+  "dependencies": {
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "clsx": "^2.1.1",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "tailwind-merge": "^3.6.0",
+    "zod": "^4.4.3",
+    "zustand": "^5.0.15"
+  },
+  "description": "A schema-driven React runtime that renders validated JSON UIDL documents into lists, forms, reports and dashboards.",
+  "license": "MIT",
+  "engines": {
+    "node": ">=20.11"
+  },
+  "keywords": [
+    "uidl",
+    "json-ui",
+    "schema-driven-ui",
+    "react",
+    "low-code",
+    "ui-runtime",
+    "erp"
+  ]
+}