@lattix/react 0.1.0

package/dist/action-context.d.ts

@@ -0,0 +1,11 @@
+import type { LattixAction } from "@lattix/core";
+/**
+ * Handler invoked when a semantic action fires (e.g. button onPress).
+ * Receives the normalized action object so consumers can dispatch, navigate, etc.
+ */
+export type LattixActionHandler = (action: LattixAction) => void;
+/** React context carrying the action handler for the current renderer subtree. */
+export declare const LattixActionContext: import("react").Context<LattixActionHandler | undefined>;
+/** Read the current action handler from context. Returns a no-op if none is provided. */
+export declare const useLattixAction: () => LattixActionHandler;
+//# sourceMappingURL=action-context.d.ts.map

package/dist/action-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-context.d.ts","sourceRoot":"","sources":["../src/action-context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAEjD;;;GAGG;AACH,MAAM,MAAM,mBAAmB,GAAG,CAAC,MAAM,EAAE,YAAY,KAAK,IAAI,CAAC;AAEjE,kFAAkF;AAClF,eAAO,MAAM,mBAAmB,0DAE/B,CAAC;AAEF,yFAAyF;AACzF,eAAO,MAAM,eAAe,QAAO,mBAGlC,CAAC"}

package/dist/action-context.js

@@ -0,0 +1,10 @@
+import { createContext, useContext } from "react";
+/** React context carrying the action handler for the current renderer subtree. */
+export const LattixActionContext = createContext(undefined);
+/** Read the current action handler from context. Returns a no-op if none is provided. */
+export const useLattixAction = () => {
+    const handler = useContext(LattixActionContext);
+    return handler ?? noop;
+};
+const noop = () => { };
+//# sourceMappingURL=action-context.js.map

package/dist/action-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"action-context.js","sourceRoot":"","sources":["../src/action-context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AASlD,kFAAkF;AAClF,MAAM,CAAC,MAAM,mBAAmB,GAAG,aAAa,CAC9C,SAAS,CACV,CAAC;AAEF,yFAAyF;AACzF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAwB,EAAE;IACvD,MAAM,OAAO,GAAG,UAAU,CAAC,mBAAmB,CAAC,CAAC;IAChD,OAAO,OAAO,IAAI,IAAI,CAAC;AACzB,CAAC,CAAC;AAEF,MAAM,IAAI,GAAwB,GAAG,EAAE,GAAE,CAAC,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export { LattixRenderer, type LattixRendererProps } from "./renderer.js";
+export { RenderNode, type LattixNodeProps } from "./render-node.js";
+export { LattixActionContext, useLattixAction, type LattixActionHandler, } from "./action-context.js";
+export { LattixRegistryContext, useTokenRegistry, } from "./registry-context.js";
+export { resolveStyleToCSS, type ResolveStyleOptions } from "./resolve-style.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,KAAK,mBAAmB,EAAE,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACpE,OAAO,EACL,mBAAmB,EACnB,eAAe,EACf,KAAK,mBAAmB,GACzB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAAE,KAAK,mBAAmB,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/index.js

@@ -0,0 +1,6 @@
+export { LattixRenderer } from "./renderer.js";
+export { RenderNode } from "./render-node.js";
+export { LattixActionContext, useLattixAction, } from "./action-context.js";
+export { LattixRegistryContext, useTokenRegistry, } from "./registry-context.js";
+export { resolveStyleToCSS } from "./resolve-style.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAA4B,MAAM,eAAe,CAAC;AACzE,OAAO,EAAE,UAAU,EAAwB,MAAM,kBAAkB,CAAC;AACpE,OAAO,EACL,mBAAmB,EACnB,eAAe,GAEhB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EACL,qBAAqB,EACrB,gBAAgB,GACjB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,iBAAiB,EAA4B,MAAM,oBAAoB,CAAC"}

package/dist/registry-context.d.ts

@@ -0,0 +1,6 @@
+import { type TokenRegistry } from "@lattix/tokens";
+/** React context carrying the token registry for style resolution. */
+export declare const LattixRegistryContext: import("react").Context<Readonly<Record<string, import("@lattix/core").LattixStyleValue>>>;
+/** Read the current token registry from context. */
+export declare const useTokenRegistry: () => TokenRegistry;
+//# sourceMappingURL=registry-context.d.ts.map

package/dist/registry-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry-context.d.ts","sourceRoot":"","sources":["../src/registry-context.ts"],"names":[],"mappings":"AACA,OAAO,EAAwB,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAE1E,sEAAsE;AACtE,eAAO,MAAM,qBAAqB,4FAEjC,CAAC;AAEF,oDAAoD;AACpD,eAAO,MAAM,gBAAgB,QAAO,aACD,CAAC"}

package/dist/registry-context.js

@@ -0,0 +1,7 @@
+import { createContext, useContext } from "react";
+import { defaultTokenRegistry } from "@lattix/tokens";
+/** React context carrying the token registry for style resolution. */
+export const LattixRegistryContext = createContext(defaultTokenRegistry);
+/** Read the current token registry from context. */
+export const useTokenRegistry = () => useContext(LattixRegistryContext);
+//# sourceMappingURL=registry-context.js.map

package/dist/registry-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"registry-context.js","sourceRoot":"","sources":["../src/registry-context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,EAAE,oBAAoB,EAAsB,MAAM,gBAAgB,CAAC;AAE1E,sEAAsE;AACtE,MAAM,CAAC,MAAM,qBAAqB,GAAG,aAAa,CAChD,oBAAoB,CACrB,CAAC;AAEF,oDAAoD;AACpD,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAkB,EAAE,CAClD,UAAU,CAAC,qBAAqB,CAAC,CAAC"}

package/dist/render-node.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import type { LattixNode } from "@lattix/core";
+/** Props passed to every node renderer. */
+export interface LattixNodeProps {
+    readonly node: LattixNode;
+}
+/**
+ * Render a single semantic node by dispatching to the appropriate kind renderer.
+ * Unknown kinds render a diagnostic `<div>` with a data attribute.
+ */
+export declare const RenderNode: React.FC<LattixNodeProps>;
+//# sourceMappingURL=render-node.d.ts.map

package/dist/render-node.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render-node.d.ts","sourceRoot":"","sources":["../src/render-node.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,UAAU,EAAgB,MAAM,cAAc,CAAC;AAO7D,2CAA2C;AAC3C,MAAM,WAAW,eAAe;IAC9B,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC;CAC3B;AAyOD;;;GAGG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAUhD,CAAC"}

package/dist/render-node.js

@@ -0,0 +1,129 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { normalizeAction } from "@lattix/core";
+import { resolveMotionToCSS } from "@lattix/motion";
+import { useLattixAction } from "./action-context.js";
+import { useTokenRegistry } from "./registry-context.js";
+import { resolveStyleToCSS } from "./resolve-style.js";
+/** Resolve node styles and motion using renderer-local contexts. */
+const useNodePresentation = (node) => {
+    const registry = useTokenRegistry();
+    const style = resolveStyleToCSS(node.normalizedStyle, { registry }, node.style);
+    const motion = resolveMotionToCSS(node.animation);
+    return {
+        style: { ...style, ...motion.style },
+        motionAttributes: motion.attributes,
+    };
+};
+/** Recursively render children of a container node. */
+const RenderChildren = ({ children, }) => {
+    if (!children || children.length === 0) {
+        return null;
+    }
+    return (_jsx(_Fragment, { children: children.map((child, i) => (_jsx(RenderNode, { node: child }, child.id ?? `${child.kind}-${i}`))) }));
+};
+/** Resolve an action prop (string id or LattixAction) into a click handler. */
+const useActionHandler = (actionProp) => {
+    const dispatch = useLattixAction();
+    if (actionProp === undefined || actionProp === null) {
+        return undefined;
+    }
+    return () => {
+        const action = typeof actionProp === "string"
+            ? normalizeAction(actionProp)
+            : actionProp;
+        dispatch(action);
+    };
+};
+const ScreenRenderer = ({ node }) => {
+    const { style, motionAttributes } = useNodePresentation(node);
+    return (_jsx("div", { "data-lattix-kind": "screen", "data-lattix-id": node.id, ...motionAttributes, style: { minHeight: "100vh", ...style }, children: _jsx(RenderChildren, { children: node.children }) }));
+};
+const StackRenderer = ({ node }) => {
+    const { style, motionAttributes } = useNodePresentation(node);
+    return (_jsx("div", { "data-lattix-kind": "stack", ...motionAttributes, style: { display: "flex", flexDirection: "column", ...style }, children: _jsx(RenderChildren, { children: node.children }) }));
+};
+const RowRenderer = ({ node }) => {
+    const { style, motionAttributes } = useNodePresentation(node);
+    return (_jsx("div", { "data-lattix-kind": "row", ...motionAttributes, style: { display: "flex", flexDirection: "row", ...style }, children: _jsx(RenderChildren, { children: node.children }) }));
+};
+const BoxRenderer = ({ node }) => {
+    const { style, motionAttributes } = useNodePresentation(node);
+    return (_jsx("div", { "data-lattix-kind": "box", ...motionAttributes, style: style, children: _jsx(RenderChildren, { children: node.children }) }));
+};
+const TextRenderer = ({ node }) => {
+    const { style, motionAttributes } = useNodePresentation(node);
+    const content = node.props.content;
+    return (_jsx("span", { "data-lattix-kind": "text", ...motionAttributes, style: style, children: content ?? "" }));
+};
+const ImageRenderer = ({ node }) => {
+    const { style, motionAttributes } = useNodePresentation(node);
+    const source = node.props.source;
+    const alt = node.props.alt ?? "";
+    return (_jsx("img", { "data-lattix-kind": "image", ...motionAttributes, src: source, alt: alt, style: style }));
+};
+const ButtonRenderer = ({ node }) => {
+    const { style, motionAttributes } = useNodePresentation(node);
+    const label = node.props.label;
+    const variant = node.props.variant;
+    const onClick = useActionHandler(node.props.onPress);
+    return (_jsx("button", { "data-lattix-kind": "button", "data-lattix-variant": variant, ...motionAttributes, onClick: onClick, style: style, children: node.children && node.children.length > 0 ? (_jsx(RenderChildren, { children: node.children })) : (label ?? "") }));
+};
+const InputRenderer = ({ node }) => {
+    const dispatch = useLattixAction();
+    const { style, motionAttributes } = useNodePresentation(node);
+    const placeholder = node.props.placeholder;
+    const handleChange = (e) => {
+        const onChangeProp = node.props.onChange;
+        if (onChangeProp !== undefined && onChangeProp !== null) {
+            const action = typeof onChangeProp === "string"
+                ? normalizeAction(onChangeProp)
+                : onChangeProp;
+            dispatch({ ...action, payload: { ...action.payload, value: e.target.value } });
+        }
+    };
+    return (_jsx("input", { "data-lattix-kind": "input", ...motionAttributes, placeholder: placeholder, onChange: handleChange, style: style }));
+};
+const BadgeRenderer = ({ node }) => {
+    const { style, motionAttributes } = useNodePresentation(node);
+    const label = node.props.label;
+    return (_jsx("span", { "data-lattix-kind": "badge", ...motionAttributes, style: style, children: label ?? "" }));
+};
+const DividerRenderer = ({ node }) => {
+    const { style, motionAttributes } = useNodePresentation(node);
+    return _jsx("hr", { "data-lattix-kind": "divider", ...motionAttributes, style: style });
+};
+const SpacerRenderer = ({ node }) => {
+    const { style, motionAttributes } = useNodePresentation(node);
+    return (_jsx("div", { "data-lattix-kind": "spacer", ...motionAttributes, style: { flex: 1, ...style } }));
+};
+const ListRenderer = ({ node }) => {
+    const { style, motionAttributes } = useNodePresentation(node);
+    return (_jsx("ul", { "data-lattix-kind": "list", ...motionAttributes, style: { display: "flex", flexDirection: "column", ...style }, children: node.children?.map((child, i) => (_jsx("li", { children: _jsx(RenderNode, { node: child }) }, child.id ?? `${child.kind}-${i}`))) }));
+};
+/** Built-in node kind → renderer mapping. */
+const NODE_RENDERERS = {
+    screen: ScreenRenderer,
+    stack: StackRenderer,
+    row: RowRenderer,
+    box: BoxRenderer,
+    text: TextRenderer,
+    image: ImageRenderer,
+    button: ButtonRenderer,
+    input: InputRenderer,
+    badge: BadgeRenderer,
+    divider: DividerRenderer,
+    spacer: SpacerRenderer,
+    list: ListRenderer,
+};
+/**
+ * Render a single semantic node by dispatching to the appropriate kind renderer.
+ * Unknown kinds render a diagnostic `<div>` with a data attribute.
+ */
+export const RenderNode = ({ node }) => {
+    const Renderer = NODE_RENDERERS[node.kind];
+    if (Renderer) {
+        return _jsx(Renderer, { node: node });
+    }
+    return (_jsx("div", { "data-lattix-kind": node.kind, "data-lattix-unknown": "true", children: `[unsupported node kind: ${node.kind}]` }));
+};
+//# sourceMappingURL=render-node.js.map

package/dist/render-node.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"render-node.js","sourceRoot":"","sources":["../src/render-node.tsx"],"names":[],"mappings":"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"}

package/dist/renderer.d.ts

@@ -0,0 +1,37 @@
+import React from "react";
+import type { LattixTree } from "@lattix/core";
+import type { TokenRegistry } from "@lattix/tokens";
+import { type LattixActionHandler } from "./action-context.js";
+/** Props for the top-level Lattix web renderer. */
+export interface LattixRendererProps {
+    /** The validated semantic tree to render. */
+    readonly tree: LattixTree;
+    /** Handler invoked when a semantic action fires (e.g. button onPress). */
+    readonly onAction?: LattixActionHandler;
+    /** Custom token registry for style resolution. Defaults to `defaultTokenRegistry`. */
+    readonly registry?: TokenRegistry;
+}
+/**
+ * Top-level React component that renders a Lattix semantic tree.
+ *
+ * Wraps the tree in action and registry context providers so that all
+ * descendant node renderers can resolve tokens and dispatch actions.
+ *
+ * ```tsx
+ * import { LattixRenderer } from "@lattix/react";
+ * import { Screen } from "@lattix/dsl";
+ *
+ * const tree = Screen("Home", s => s.text("Hello")).toTree();
+ *
+ * function App() {
+ *   return (
+ *     <LattixRenderer
+ *       tree={tree}
+ *       onAction={(action) => console.log("action:", action)}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export declare const LattixRenderer: React.FC<LattixRendererProps>;
+//# sourceMappingURL=renderer.d.ts.map

package/dist/renderer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.d.ts","sourceRoot":"","sources":["../src/renderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC/C,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AACpD,OAAO,EAEL,KAAK,mBAAmB,EACzB,MAAM,qBAAqB,CAAC;AAI7B,mDAAmD;AACnD,MAAM,WAAW,mBAAmB;IAClC,6CAA6C;IAC7C,QAAQ,CAAC,IAAI,EAAE,UAAU,CAAC;IAC1B,0EAA0E;IAC1E,QAAQ,CAAC,QAAQ,CAAC,EAAE,mBAAmB,CAAC;IACxC,sFAAsF;IACtF,QAAQ,CAAC,QAAQ,CAAC,EAAE,aAAa,CAAC;CACnC;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAwBxD,CAAC"}

package/dist/renderer.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { LattixActionContext, } from "./action-context.js";
+import { LattixRegistryContext } from "./registry-context.js";
+import { RenderNode } from "./render-node.js";
+/**
+ * Top-level React component that renders a Lattix semantic tree.
+ *
+ * Wraps the tree in action and registry context providers so that all
+ * descendant node renderers can resolve tokens and dispatch actions.
+ *
+ * ```tsx
+ * import { LattixRenderer } from "@lattix/react";
+ * import { Screen } from "@lattix/dsl";
+ *
+ * const tree = Screen("Home", s => s.text("Hello")).toTree();
+ *
+ * function App() {
+ *   return (
+ *     <LattixRenderer
+ *       tree={tree}
+ *       onAction={(action) => console.log("action:", action)}
+ *     />
+ *   );
+ * }
+ * ```
+ */
+export const LattixRenderer = ({ tree, onAction, registry, }) => {
+    const content = _jsx(RenderNode, { node: tree.root });
+    const withAction = onAction ? (_jsx(LattixActionContext.Provider, { value: onAction, children: content })) : (content);
+    if (registry) {
+        return (_jsx(LattixRegistryContext.Provider, { value: registry, children: withAction }));
+    }
+    return withAction;
+};
+//# sourceMappingURL=renderer.js.map

package/dist/renderer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderer.js","sourceRoot":"","sources":["../src/renderer.tsx"],"names":[],"mappings":";AAGA,OAAO,EACL,mBAAmB,GAEpB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EAAE,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAY9C;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,MAAM,cAAc,GAAkC,CAAC,EAC5D,IAAI,EACJ,QAAQ,EACR,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,KAAC,UAAU,IAAC,IAAI,EAAE,IAAI,CAAC,IAAI,GAAI,CAAC;IAEhD,MAAM,UAAU,GAAG,QAAQ,CAAC,CAAC,CAAC,CAC5B,KAAC,mBAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ,YAC1C,OAAO,GACqB,CAChC,CAAC,CAAC,CAAC,CACF,OAAO,CACR,CAAC;IAEF,IAAI,QAAQ,EAAE,CAAC;QACb,OAAO,CACL,KAAC,qBAAqB,CAAC,QAAQ,IAAC,KAAK,EAAE,QAAQ,YAC5C,UAAU,GACoB,CAClC,CAAC;IACJ,CAAC;IAED,OAAO,UAAU,CAAC;AACpB,CAAC,CAAC"}

package/dist/resolve-style.d.ts

@@ -0,0 +1,14 @@
+import type { NormalizedLattixStyle, LattixStyle } from "@lattix/core";
+import { type TokenRegistry } from "@lattix/tokens";
+export interface ResolveStyleOptions {
+    readonly registry?: TokenRegistry;
+}
+/**
+ * Resolve semantic styles into a React CSSProperties-compatible object.
+ *
+ * Uses `normalizedStyle` when available, falling back to `rawStyle` for
+ * properties that were not normalized (e.g. tokens unknown to the default
+ * registry at build time but present in a custom renderer registry).
+ */
+export declare const resolveStyleToCSS: (normalizedStyle: NormalizedLattixStyle | undefined, options?: ResolveStyleOptions, rawStyle?: LattixStyle) => React.CSSProperties;
+//# sourceMappingURL=resolve-style.d.ts.map

package/dist/resolve-style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve-style.d.ts","sourceRoot":"","sources":["../src/resolve-style.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,qBAAqB,EAErB,WAAW,EAEZ,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAgB,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC;AA4DlE,MAAM,WAAW,mBAAmB;IAClC,QAAQ,CAAC,QAAQ,CAAC,EAAE,aAAa,CAAC;CACnC;AAED;;;;;;GAMG;AACH,eAAO,MAAM,iBAAiB,GAC5B,iBAAiB,qBAAqB,GAAG,SAAS,EAClD,UAAS,mBAAwB,EACjC,WAAW,WAAW,KACrB,KAAK,CAAC,aAiCR,CAAC"}

package/dist/resolve-style.js

@@ -0,0 +1,88 @@
+import { isTokenReference } from "@lattix/core";
+import { resolveToken } from "@lattix/tokens";
+/** CSS property names mapped from semantic style property names. */
+const CSS_PROPERTY_MAP = {
+    color: "color",
+    background: "backgroundColor",
+    backgroundColor: "backgroundColor",
+    padding: "padding",
+    margin: "margin",
+    marginTop: "marginTop",
+    marginBottom: "marginBottom",
+    marginLeft: "marginLeft",
+    marginRight: "marginRight",
+    gap: "gap",
+    borderRadius: "borderRadius",
+    fontSize: "fontSize",
+    fontWeight: "fontWeight",
+    width: "width",
+    height: "height",
+    flex: "flex",
+    flexDirection: "flexDirection",
+    alignItems: "alignItems",
+    justifyContent: "justifyContent",
+};
+/** Convert a resolved style value to a CSS-compatible value. */
+const toCSSValue = (value) => {
+    if (typeof value === "number") {
+        return value;
+    }
+    return String(value);
+};
+/** Resolve a single normalized style entry to a CSS value. */
+const resolveEntry = (entry, registry) => {
+    if (entry.kind === "literal") {
+        return toCSSValue(entry.value);
+    }
+    const resolved = resolveToken(entry.ref, registry);
+    if (resolved === undefined) {
+        return undefined;
+    }
+    return toCSSValue(resolved);
+};
+/** Resolve a raw style value (from node.style) to a CSS value using the registry. */
+const resolveRawValue = (value, registry) => {
+    if (typeof value === "string" && isTokenReference(value)) {
+        const resolved = resolveToken(value, registry);
+        return resolved !== undefined ? toCSSValue(resolved) : undefined;
+    }
+    return toCSSValue(value);
+};
+/**
+ * Resolve semantic styles into a React CSSProperties-compatible object.
+ *
+ * Uses `normalizedStyle` when available, falling back to `rawStyle` for
+ * properties that were not normalized (e.g. tokens unknown to the default
+ * registry at build time but present in a custom renderer registry).
+ */
+export const resolveStyleToCSS = (normalizedStyle, options = {}, rawStyle) => {
+    if (!normalizedStyle && !rawStyle) {
+        return {};
+    }
+    const css = {};
+    const seen = new Set();
+    if (normalizedStyle) {
+        for (const [prop, entry] of Object.entries(normalizedStyle)) {
+            seen.add(prop);
+            const cssKey = CSS_PROPERTY_MAP[prop] ?? prop;
+            const value = resolveEntry(entry, options.registry);
+            if (value !== undefined) {
+                css[cssKey] = value;
+            }
+        }
+    }
+    if (rawStyle) {
+        for (const [prop, value] of Object.entries(rawStyle)) {
+            if (seen.has(prop)) {
+                continue;
+            }
+            const cssKey = CSS_PROPERTY_MAP[prop] ?? prop;
+            const resolved = resolveRawValue(value, options.registry);
+            if (resolved !== undefined) {
+                css[cssKey] = resolved;
+            }
+        }
+    }
+    return css;
+};
+//# sourceMappingURL=resolve-style.js.map

package/dist/resolve-style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolve-style.js","sourceRoot":"","sources":["../src/resolve-style.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "@lattix/react",
+  "version": "0.1.0",
+  "description": "React web renderer for Lattix semantic trees",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "clean": "rm -rf dist *.tsbuildinfo",
+    "test": "vitest run",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  },
+  "license": "MIT",
+  "dependencies": {
+    "@lattix/core": "0.1.0",
+    "@lattix/motion": "0.1.0",
+    "@lattix/tokens": "0.1.0",
+    "react": ">=18"
+  },
+  "devDependencies": {
+    "@lattix/diagnostics": "0.1.0",
+    "@lattix/dsl": "0.1.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.3.7",
+    "react-dom": "^18.3.1",
+    "typescript": "^5.7.3",
+    "vitest": "^3.0.5"
+  },
+  "peerDependencies": {
+    "react": ">=18"
+  }
+}