desen 0.0.1 → 1.0.0-draft.2

package/.turbo/turbo-build.log

@@ -0,0 +1,5 @@
+
+
+> desen@1.0.0-draft.2 build /Users/selmanay/Desktop/desen/packages/react
+> tsc
+

package/README.md

@@ -0,0 +1,61 @@
+# 💠 DESEN (Design Environment Protocol)
+
+> A governed, executable representation of UI intent.
+
+[![Version](https://img.shields.io/badge/version-1.0.3--draft-blue.svg)](#)
+[![License](https://img.shields.io/badge/license-Apache%202.0-green.svg)](#)
+[![npm package](https://img.shields.io/npm/v/desen.svg?label=desen&color=blue)](https://www.npmjs.com/package/desen)
+
+DESEN is not another UI component library. It is a domain-specific language (DESEN-DSL), a deterministic runtime, and a Governance Core that makes user interfaces **measurable, auditable, and safe to operate at scale**.
+
+Instead of writing custom React for every layout change, DESEN allows designers and engineers to define surfaces as strict, schema-bound JSON. Changes can be reviewed, rolled out, and rolled back based on verifiable telemetry outcomes.
+
+* 🛡️ **Fail-Closed Runtime:** If a data binding fails or a schema is violated, DESEN gracefully degrades (fails-closed) instead of failing-open.
+* ⚖️ **AST-Based Protocol:** Declarative, pure JSON UI descriptions enforcing design systems with DTCG design tokens.
+* 📊 **Telemetry by Design:** Privacy-preserving observability built natively.
+
+## End-to-End Workflow (The Happy Path)
+
+Here is how designers and developers bring a DESEN surface to life from scratch:
+
+### Step 1: Cold Start (The Daemon)
+The developer or designer starts everything by launching the **DESEN CLI Daemon**. This sync server will listen on `localhost:3000` for JSON payloads sent out by Figma.
+
+In any empty directory where you want to scaffold your project, run:
+```bash
+npx desen daemon
+```
+*(If you are inside the monorepo root, you can also run `pnpm desen daemon`)*
+
+You will see:
+```text
+🚀 DESEN Daemon Active
+The Synchronization (Sync) server is waiting for incoming UI AST data from Figma.
+```
+
+### Step 2: The Designer's Flow (Figma)
+With the receiver (Daemon) ready, the designer takes the stage.
+1. Open **Figma** and the UI design you are working on.
+2. Launch the **DESEN Figma Plugin**.
+3. Select or configure UI components and tokens within the plugin.
+4. Click the **"Sync to Localhost"** button in the plugin UI.
+
+### Step 3: The Synchronization Dance (Figma ➔ Daemon ➔ Scaffolding)
+Figma compiles the design into a protocol-compliant **UI AST (JSON)** and POSTs it to the waiting `localhost:3000/sync`.
+
+1. **Security & Validation:** The Daemon does not blindly accept JSON. It validates against `SPEC.md` rules using `desen-core`.
+2. **Scaffolding:** If valid and no existing project is found, the Daemon automatically creates a `desen-workspace` folder in the current directory.
+3. This folder is populated with a clean Next.js application wired up with the `desen` rendering engine, and the received `.desen.json` file is saved to disk.
+
+### Step 4: Live Preview (Render Engine)
+To see the design vividly interact in the browser, spin up the newly created local application on port `3001`.
+
+1. **Without stopping the Daemon**, open a **new terminal tab**.
+2. Navigate into the scaffolded environment and launch it:
+```bash
+cd desen-workspace
+npm install
+npm run dev
+```
+3. Visit `localhost:3001` in your browser.
+4. **The Result:** The UI compiled from Figma is now fully rendered interactively by the `desen` React engine with guaranteed telemetry (VIEW_ELEMENT, INTERACT) support! Every subsequent "Sync" from Figma updates the screen in seconds via Fast Refresh.

package/dist/DesenProvider.d.ts

@@ -0,0 +1,32 @@
+import React, { ReactNode } from "react";
+import { ActionSpec } from "desen-core";
+export interface TelemetryEnvelope {
+    session_id: string;
+    element_id: string;
+    timestamp: string;
+    revision_id: string;
+    event_type: "VIEW_ELEMENT" | "INTERACT" | "BINDING_ERROR" | string;
+    payload: Record<string, any>;
+}
+export interface DesenRegistry {
+    [key: string]: React.ComponentType<any>;
+}
+export interface DesenContextType {
+    registry: DesenRegistry;
+    onTelemetry: (event: TelemetryEnvelope) => void;
+    onAction: (action: ActionSpec) => void;
+    tokens?: Record<string, any>;
+    session_id: string;
+    revision_id: string;
+}
+export interface DesenProviderProps {
+    children: ReactNode;
+    registry: DesenRegistry;
+    onTelemetry: (event: TelemetryEnvelope) => void;
+    onAction: (action: ActionSpec) => void;
+    tokens?: Record<string, any>;
+    session_id: string;
+    revision_id: string;
+}
+export declare const DesenProvider: React.FC<DesenProviderProps>;
+export declare const useDesen: () => DesenContextType;

package/dist/DesenProvider.js

@@ -0,0 +1,57 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useDesen = exports.DesenProvider = void 0;
+const react_1 = __importStar(require("react"));
+const DesenContext = (0, react_1.createContext)(undefined);
+const DesenProvider = ({ children, registry, onTelemetry, onAction, tokens, session_id, revision_id }) => {
+    return (react_1.default.createElement(DesenContext.Provider, { value: {
+            registry,
+            onTelemetry,
+            onAction,
+            tokens,
+            session_id,
+            revision_id
+        } }, children));
+};
+exports.DesenProvider = DesenProvider;
+const useDesen = () => {
+    const context = (0, react_1.useContext)(DesenContext);
+    if (!context) {
+        throw new Error("useDesen must be used within a DesenProvider");
+    }
+    return context;
+};
+exports.useDesen = useDesen;

package/dist/DesenRenderer.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import type { NodeSpec } from "desen-core";
+export interface DesenRendererProps {
+    node: NodeSpec;
+}
+export declare const DesenRenderer: React.FC<DesenRendererProps>;

package/dist/DesenRenderer.js

@@ -0,0 +1,95 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DesenRenderer = void 0;
+const react_1 = __importStar(require("react"));
+const DesenProvider_1 = require("./DesenProvider");
+const ErrorBoundary_1 = require("./ErrorBoundary");
+const parseDesenStyles_1 = require("./utils/parseDesenStyles");
+const BaseRenderer = ({ node }) => {
+    const { registry, tokens } = (0, DesenProvider_1.useDesen)();
+    const RegistryComponent = (0, react_1.useMemo)(() => {
+        // node.type üzerinden eşleşmeyi arıyoruz
+        return registry[node.type];
+    }, [registry, node.type]);
+    if (!RegistryComponent) {
+        // Fail-Closed: Bileşen yoksa null dön. UI çökertecek belirsiz durumdan kaçın.
+        console.warn(`[DESEN] RegistryComponent not found for type: ${node.type}`);
+        return null;
+    }
+    // Process DESEN styles securely with DTCG resolver
+    const parsedStyle = (0, react_1.useMemo)(() => {
+        const rawStyle = node.style || {};
+        const hasAction = !!node.action;
+        return (0, parseDesenStyles_1.parseDesenStyles)(rawStyle, hasAction, tokens);
+    }, [node, tokens]);
+    // Common Props — spread all node fields EXCEPT `children` and `root`
+    // (which would override the recursively-rendered React children).
+    const { children: _rawChildren, root: _rawRoot, ...nodeWithoutChildren } = node;
+    const props = {
+        ...nodeWithoutChildren,
+        ...(node.props || {}),
+        id: node.id,
+        type: node.type,
+        layout: node.layout,
+        constraints: node.constraints,
+        parsedStyle,
+    };
+    // Recursively render child nodes: supports both `children` array and `root` property
+    const children = (0, react_1.useMemo)(() => {
+        const pNode = node;
+        // Surface nodes use `root` instead of `children`
+        if (pNode.root && typeof pNode.root === 'object') {
+            // Inject _isSurfaceRoot flag so the registry component fills the viewport
+            const rootNode = { ...pNode.root, _isSurfaceRoot: true };
+            return react_1.default.createElement(exports.DesenRenderer, { node: rootNode });
+        }
+        // Composition nodes use `children` array
+        if (pNode.children && Array.isArray(pNode.children)) {
+            return pNode.children.map((child, index) => {
+                const uniqueKey = `${child.id || 'node'}-${index}`;
+                return react_1.default.createElement(exports.DesenRenderer, { key: uniqueKey, node: child });
+            });
+        }
+        return null;
+    }, [node]);
+    return react_1.default.createElement(RegistryComponent, { ...props }, children);
+};
+// Her renderer adımı ErrorBoundary ile sarılarak fail-closed emniyeti uygulanır
+const DesenRenderer = ({ node }) => {
+    return (react_1.default.createElement(ErrorBoundary_1.ErrorBoundary, { elementId: node.id },
+        react_1.default.createElement(BaseRenderer, { node: node })));
+};
+exports.DesenRenderer = DesenRenderer;

package/dist/ErrorBoundary.d.ts

@@ -0,0 +1,21 @@
+import React, { Component, ReactNode } from "react";
+import { useDesen } from "./DesenProvider";
+interface ErrorBoundaryProps {
+    children: ReactNode;
+    elementId?: string;
+    fallback?: ReactNode;
+    onTelemetry: ReturnType<typeof useDesen>["onTelemetry"];
+    session_id: string;
+    revision_id: string;
+}
+interface ErrorBoundaryState {
+    hasError: boolean;
+}
+export declare class ErrorBoundaryClass extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps);
+    static getDerivedStateFromError(_: Error): ErrorBoundaryState;
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void;
+    render(): React.ReactNode;
+}
+export declare const ErrorBoundary: React.FC<Omit<ErrorBoundaryProps, "onTelemetry" | "session_id" | "revision_id">>;
+export {};

package/dist/ErrorBoundary.js

@@ -0,0 +1,76 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorBoundary = exports.ErrorBoundaryClass = void 0;
+const react_1 = __importStar(require("react"));
+const DesenProvider_1 = require("./DesenProvider");
+class ErrorBoundaryClass extends react_1.Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false };
+    }
+    static getDerivedStateFromError(_) {
+        return { hasError: true };
+    }
+    componentDidCatch(error, errorInfo) {
+        const { onTelemetry, elementId, session_id, revision_id } = this.props;
+        onTelemetry({
+            session_id,
+            element_id: elementId || "unknown",
+            timestamp: new Date().toISOString(),
+            revision_id,
+            event_type: "BINDING_ERROR",
+            payload: {
+                error_class: "RENDER_ERROR",
+                message: error.message,
+                componentStack: errorInfo.componentStack,
+            },
+        });
+    }
+    render() {
+        if (this.state.hasError) {
+            // Fail-closed mantığı gereği ya null ya da verilmiş fallback
+            return this.props.fallback || null;
+        }
+        return this.props.children;
+    }
+}
+exports.ErrorBoundaryClass = ErrorBoundaryClass;
+// Hook tabanlı context bilgilerini Class bazlı bileşene enjekte etmek için wrapper
+const ErrorBoundary = (props) => {
+    const desenContext = (0, DesenProvider_1.useDesen)();
+    return (react_1.default.createElement(ErrorBoundaryClass, { ...props, onTelemetry: desenContext.onTelemetry, session_id: desenContext.session_id, revision_id: desenContext.revision_id }));
+};
+exports.ErrorBoundary = ErrorBoundary;

package/dist/bin.d.ts

@@ -0,0 +1,3 @@
+#!/usr/bin/env node
+declare const args: string[];
+declare const command: string;

package/dist/bin.js

@@ -0,0 +1,17 @@
+#!/usr/bin/env node
+"use strict";
+const args = process.argv.slice(2);
+const command = args[0];
+if (command === "daemon" || command === "audit") {
+    // This will execute the exported CLI process from desen-cli since it runs side-effects directly
+    require("desen-cli");
+}
+else {
+    console.log(`
+\x1b[36m💠 DESEN Protocol CLI\x1b[0m
+
+Usage:
+  \x1b[1mnpx desen daemon\x1b[0m    Start the local synchronization daemon
+  \x1b[1mnpx desen audit\x1b[0m     Audit DESEN JSON files
+`);
+}

package/dist/cli.d.ts

@@ -0,0 +1 @@
+export * from 'desen-cli';

package/dist/cli.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("desen-cli"), exports);

package/dist/core.d.ts

@@ -0,0 +1 @@
+export * from 'desen-core';

package/dist/core.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("desen-core"), exports);

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./DesenProvider";
+export * from "./ErrorBoundary";
+export * from "./DesenRenderer";
+export * from "./utils/parseDesenStyles";

package/dist/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./DesenProvider"), exports);
+__exportStar(require("./ErrorBoundary"), exports);
+__exportStar(require("./DesenRenderer"), exports);
+__exportStar(require("./utils/parseDesenStyles"), exports);

package/dist/postinstall.js

@@ -0,0 +1,3 @@
+"use strict";
+// Extracted out to avoid ts compilation removing the shebang if it is not a direct entry point
+console.log("\n\x1b[36m💠 DESEN yüklendi! Çalıştırmak için: npx desen daemon\x1b[0m\n");

package/dist/utils/ParentStateContext.d.ts

@@ -0,0 +1,5 @@
+export interface ParentState {
+    isHovered: boolean;
+    isActive: boolean;
+}
+export declare const ParentStateContext: import("react").Context<ParentState>;

package/dist/utils/ParentStateContext.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ParentStateContext = void 0;
+const react_1 = require("react");
+exports.ParentStateContext = (0, react_1.createContext)({
+    isHovered: false,
+    isActive: false
+});

package/dist/utils/parseDesenStyles.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import type { TokenTheme } from "desen-core";
+/**
+ * Resolves a dot-notation token path within a Theme/Tokens object following DTCG schema
+ */
+export declare function resolveTokenValue(path: string, theme?: TokenTheme | Record<string, any>): string | number | undefined;
+/**
+ * Parses a generic DESEN style object into React.CSSProperties
+ * Replaces token attributes by looking up the dot notation string recursively in the theme context.
+ * Falls back to literals when available or strictly ignores (Fail-Closed) if neither works.
+ */
+export declare function parseDesenStyles(style?: any, hasAction?: boolean, theme?: Record<string, any>): React.CSSProperties;

package/dist/utils/parseDesenStyles.js

@@ -0,0 +1,208 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveTokenValue = resolveTokenValue;
+exports.parseDesenStyles = parseDesenStyles;
+/**
+ * Resolves a dot-notation token path within a Theme/Tokens object following DTCG schema
+ */
+function resolveTokenValue(path, theme) {
+    if (!path || !theme)
+        return undefined;
+    // Clean string formatting like "{color.bg.primary}" if exists
+    const cleanPath = path.replace(/^\{|\}$/g, '');
+    const parts = cleanPath.split('.');
+    let current = theme;
+    for (const part of parts) {
+        if (current && typeof current === 'object' && part in current) {
+            current = current[part];
+        }
+        else {
+            return undefined;
+        }
+    }
+    // Resolve DTCG $value leaf
+    if (current && typeof current === 'object') {
+        if ('$value' in current && current.$value !== undefined)
+            return current.$value;
+        if ('value' in current && current.value !== undefined)
+            return current.value;
+    }
+    // Resolve direct primitive mapping
+    if (typeof current === 'string' || typeof current === 'number') {
+        return current;
+    }
+    return undefined;
+}
+/**
+ * Parses a generic DESEN style object into React.CSSProperties
+ * Replaces token attributes by looking up the dot notation string recursively in the theme context.
+ * Falls back to literals when available or strictly ignores (Fail-Closed) if neither works.
+ */
+function parseDesenStyles(style, hasAction, theme) {
+    if (!style && !hasAction)
+        return {};
+    const css = {};
+    if (hasAction || (style && (style.hover || style.active))) {
+        css.cursor = "pointer";
+    }
+    if (!style)
+        return css;
+    const resolvedProps = new Set();
+    // 1. Resolve Authored Tokens using `theme/tokens` context
+    if (theme) {
+        // Standard mapping for DESEN property bases to CSS properties
+        const STYLE_MAP = {
+            bg_color: 'backgroundColor',
+            text_color: 'color',
+            border_color: 'borderColor',
+            border_width: 'borderWidth',
+            border_top_width: 'borderTopWidth',
+            border_right_width: 'borderRightWidth',
+            border_bottom_width: 'borderBottomWidth',
+            border_left_width: 'borderLeftWidth',
+            border_radius: 'borderRadius',
+            border_top_left_radius: 'borderTopLeftRadius',
+            border_top_right_radius: 'borderTopRightRadius',
+            border_bottom_left_radius: 'borderBottomLeftRadius',
+            border_bottom_right_radius: 'borderBottomRightRadius',
+        };
+        for (const [key, value] of Object.entries(style)) {
+            if (key.endsWith('_token') && typeof value === 'string') {
+                const baseKey = key.replace('_token', '');
+                const resolvedValue = resolveTokenValue(value, theme);
+                if (resolvedValue !== undefined) {
+                    const cssKey = STYLE_MAP[baseKey] || baseKey.replace(/_([a-z])/g, (g) => g[1].toUpperCase());
+                    // Specific formatting for dimension-based token values (convert raw numbers to px)
+                    if (baseKey.includes('width') ||
+                        baseKey.includes('radius') ||
+                        baseKey === 'font_size' ||
+                        baseKey === 'min_height' ||
+                        baseKey === 'height' ||
+                        baseKey === 'line_height' ||
+                        baseKey === 'padding' ||
+                        baseKey === 'margin') {
+                        css[cssKey] = (typeof resolvedValue === 'number' && resolvedValue !== 0) ? `${resolvedValue}px` : resolvedValue;
+                    }
+                    else {
+                        css[cssKey] = resolvedValue;
+                    }
+                    if (baseKey === 'border_color' && css.borderWidth) {
+                        css.borderStyle = "solid";
+                    }
+                    else if (baseKey === 'border_color') {
+                        css.borderStyle = "solid";
+                    }
+                    resolvedProps.add(baseKey);
+                }
+            }
+        }
+    }
+    // 2. Apply Literal Fallbacks only if their corresponding _token wasn't resolved
+    if (!resolvedProps.has('bg_color') && style.bg_color)
+        css.backgroundColor = style.bg_color;
+    if (!resolvedProps.has('text_color') && style.text_color)
+        css.color = style.text_color;
+    if (!resolvedProps.has('border_color') && style.border_color) {
+        css.borderColor = style.border_color;
+        css.borderStyle = "solid";
+    }
+    if (!resolvedProps.has('border_width') && style.border_width !== undefined) {
+        css.borderWidth = typeof style.border_width === 'number' ? `${style.border_width}px` : style.border_width;
+    }
+    if (!resolvedProps.has('border_top_width') && style.border_top_width !== undefined) {
+        css.borderTopWidth = typeof style.border_top_width === 'number' ? `${style.border_top_width}px` : style.border_top_width;
+    }
+    if (!resolvedProps.has('border_right_width') && style.border_right_width !== undefined) {
+        css.borderRightWidth = typeof style.border_right_width === 'number' ? `${style.border_right_width}px` : style.border_right_width;
+    }
+    if (!resolvedProps.has('border_bottom_width') && style.border_bottom_width !== undefined) {
+        css.borderBottomWidth = typeof style.border_bottom_width === 'number' ? `${style.border_bottom_width}px` : style.border_bottom_width;
+    }
+    if (!resolvedProps.has('border_left_width') && style.border_left_width !== undefined) {
+        css.borderLeftWidth = typeof style.border_left_width === 'number' ? `${style.border_left_width}px` : style.border_left_width;
+    }
+    if (!resolvedProps.has('border_radius') && style.border_radius !== undefined) {
+        css.borderRadius = typeof style.border_radius === 'number' ? `${style.border_radius}px` : style.border_radius;
+    }
+    if (!resolvedProps.has('border_top_left_radius') && style.border_top_left_radius !== undefined) {
+        css.borderTopLeftRadius = typeof style.border_top_left_radius === 'number' ? `${style.border_top_left_radius}px` : style.border_top_left_radius;
+    }
+    if (!resolvedProps.has('border_top_right_radius') && style.border_top_right_radius !== undefined) {
+        css.borderTopRightRadius = typeof style.border_top_right_radius === 'number' ? `${style.border_top_right_radius}px` : style.border_top_right_radius;
+    }
+    if (!resolvedProps.has('border_bottom_left_radius') && style.border_bottom_left_radius !== undefined) {
+        css.borderBottomLeftRadius = typeof style.border_bottom_left_radius === 'number' ? `${style.border_bottom_left_radius}px` : style.border_bottom_left_radius;
+    }
+    if (!resolvedProps.has('border_bottom_right_radius') && style.border_bottom_right_radius !== undefined) {
+        css.borderBottomRightRadius = typeof style.border_bottom_right_radius === 'number' ? `${style.border_bottom_right_radius}px` : style.border_bottom_right_radius;
+    }
+    if (!resolvedProps.has('font_size') && style.font_size !== undefined) {
+        css.fontSize = typeof style.font_size === 'number' ? `${style.font_size}px` : style.font_size;
+    }
+    if (!resolvedProps.has('font_weight') && style.font_weight !== undefined)
+        css.fontWeight = style.font_weight;
+    if (!resolvedProps.has('font_family') && style.font_family)
+        css.fontFamily = style.font_family;
+    if (!resolvedProps.has('letter_spacing') && style.letter_spacing)
+        css.letterSpacing = style.letter_spacing;
+    if (!resolvedProps.has('line_height') && style.line_height)
+        css.lineHeight = typeof style.line_height === 'number' ? `${style.line_height}px` : style.line_height;
+    if (!resolvedProps.has('text_decoration') && style.text_decoration)
+        css.textDecoration = style.text_decoration;
+    if (!resolvedProps.has('text_transform') && style.text_transform)
+        css.textTransform = style.text_transform;
+    if (!resolvedProps.has('justify_content') && style.justify_content)
+        css.justifyContent = style.justify_content;
+    if (!resolvedProps.has('align_self') && style.align_self)
+        css.alignSelf = style.align_self;
+    if (!resolvedProps.has('flex_grow') && style.flex_grow !== undefined)
+        css.flexGrow = style.flex_grow;
+    if (!resolvedProps.has('text_align') && style.text_align)
+        css.textAlign = style.text_align;
+    if (!resolvedProps.has('width') && style.width !== undefined) {
+        css.width = (typeof style.width === 'number' || (typeof style.width === 'string' && !style.width.includes('%')))
+            ? `${parseInt(style.width)}px`
+            : style.width;
+    }
+    if (!resolvedProps.has('height') && style.height !== undefined) {
+        css.height = (typeof style.height === 'number' || (typeof style.height === 'string' && !style.height.includes('%')))
+            ? `${parseInt(style.height)}px`
+            : style.height;
+    }
+    if (!resolvedProps.has('padding') && style.padding) {
+        const pt = typeof style.padding.top === 'number' ? `${style.padding.top}px` : (style.padding.top || "0px");
+        const pr = typeof style.padding.right === 'number' ? `${style.padding.right}px` : (style.padding.right || "0px");
+        const pb = typeof style.padding.bottom === 'number' ? `${style.padding.bottom}px` : (style.padding.bottom || "0px");
+        const pl = typeof style.padding.left === 'number' ? `${style.padding.left}px` : (style.padding.left || "0px");
+        css.padding = `${pt} ${pr} ${pb} ${pl}`;
+    }
+    if (!resolvedProps.has('min_height') && style.min_height !== undefined) {
+        css.minHeight = typeof style.min_height === 'number' ? `${style.min_height}px` : style.min_height;
+    }
+    if (!resolvedProps.has('box_shadow') && style.box_shadow)
+        css.boxShadow = style.box_shadow;
+    if (!resolvedProps.has('transform_y') && style.transform_y !== undefined) {
+        css.transform = `translateY(${style.transform_y}px)`;
+        css.marginBottom = `${style.transform_y}px`;
+    }
+    if (!resolvedProps.has('opacity') && style.opacity !== undefined)
+        css.opacity = style.opacity;
+    // Pass through standard CSS if already passed in camelCase implicitly
+    const HANDLED_KEYS = new Set([
+        'bg_color', 'text_color', 'border_color',
+        'border_width', 'border_top_width', 'border_right_width', 'border_bottom_width', 'border_left_width',
+        'border_radius', 'border_top_left_radius', 'border_top_right_radius', 'border_bottom_left_radius', 'border_bottom_right_radius',
+        'font_size', 'font_weight', 'font_family', 'letter_spacing', 'line_height', 'text_decoration', 'text_transform', 'opacity',
+        'padding', 'min_height',
+        'justify_content', 'align_self', 'flex_grow', 'text_align',
+        'width', 'height', 'transform_y', 'box_shadow',
+        'hover', 'active', '_inherited' // Don't pass these meta-objects/flags to CSS
+    ]);
+    for (const key of Object.keys(style)) {
+        if (!HANDLED_KEYS.has(key) && !key.endsWith('_token')) {
+            // Keep existing keys if they are valid css rules
+            css[key] = style[key];
+        }
+    }
+    return css;
+}

package/package.json

@@ -1,15 +1,36 @@
 {
   "name": "desen",
-  "version": "0.0.1",
-  "description": "desen CLI (name reserved)",
-  "license": "MIT",
+  "version": "1.0.0-draft.2",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.js",
+    "./core": "./dist/core.js",
+    "./cli": "./dist/cli.js"
+  },
   "bin": {
-    "desen": "./cli.js"
+    "desen": "./dist/bin.js"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "desen-core": "1.0.0-draft.2",
+    "desen-cli": "1.0.0-draft.2"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "@types/node": "^20.0.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
-  "files": [
-    "cli.js"
-  ],
-  "engines": {
-    "node": ">=18"
+  "scripts": {
+    "postinstall": "node ./dist/postinstall.js 2>/dev/null || true",
+    "build": "tsc",
+    "dev": "tsc -w",
+    "clean": "rm -rf dist"
   }
-}
+}

package/src/DesenProvider.tsx

@@ -0,0 +1,69 @@
+import React, { createContext, useContext, ReactNode } from "react";
+import { ActionSpec } from "desen-core";
+
+export interface TelemetryEnvelope {
+    session_id: string;
+    element_id: string;
+    timestamp: string;
+    revision_id: string;
+    event_type: "VIEW_ELEMENT" | "INTERACT" | "BINDING_ERROR" | string;
+    payload: Record<string, any>;
+}
+
+export interface DesenRegistry {
+    [key: string]: React.ComponentType<any>;
+}
+
+export interface DesenContextType {
+    registry: DesenRegistry;
+    onTelemetry: (event: TelemetryEnvelope) => void;
+    onAction: (action: ActionSpec) => void;
+    tokens?: Record<string, any>;
+    session_id: string;
+    revision_id: string;
+}
+
+const DesenContext = createContext<DesenContextType | undefined>(undefined);
+
+export interface DesenProviderProps {
+    children: ReactNode;
+    registry: DesenRegistry;
+    onTelemetry: (event: TelemetryEnvelope) => void;
+    onAction: (action: ActionSpec) => void;
+    tokens?: Record<string, any>;
+    session_id: string;
+    revision_id: string;
+}
+
+export const DesenProvider: React.FC<DesenProviderProps> = ({
+    children,
+    registry,
+    onTelemetry,
+    onAction,
+    tokens,
+    session_id,
+    revision_id
+}) => {
+    return (
+        <DesenContext.Provider
+            value={{
+                registry,
+                onTelemetry,
+                onAction,
+                tokens,
+                session_id,
+                revision_id
+            }}
+        >
+            {children}
+        </DesenContext.Provider>
+    );
+};
+
+export const useDesen = (): DesenContextType => {
+    const context = useContext(DesenContext);
+    if (!context) {
+        throw new Error("useDesen must be used within a DesenProvider");
+    }
+    return context;
+};

package/src/DesenRenderer.tsx

@@ -0,0 +1,77 @@
+import React, { useMemo } from "react";
+import { useDesen } from "./DesenProvider";
+import { ErrorBoundary } from "./ErrorBoundary";
+import type { NodeSpec, CompositionSpec } from "desen-core";
+
+import { parseDesenStyles } from "./utils/parseDesenStyles";
+
+export interface DesenRendererProps {
+    node: NodeSpec;
+}
+
+const BaseRenderer: React.FC<DesenRendererProps> = ({ node }) => {
+    const { registry, tokens } = useDesen();
+
+    const RegistryComponent = useMemo(() => {
+        // node.type üzerinden eşleşmeyi arıyoruz
+        return registry[node.type];
+    }, [registry, node.type]);
+
+    if (!RegistryComponent) {
+        // Fail-Closed: Bileşen yoksa null dön. UI çökertecek belirsiz durumdan kaçın.
+        console.warn(`[DESEN] RegistryComponent not found for type: ${node.type}`);
+        return null;
+    }
+
+    // Process DESEN styles securely with DTCG resolver
+    const parsedStyle = useMemo(() => {
+        const rawStyle = (node as any).style || {};
+        const hasAction = !!(node as any).action;
+        return parseDesenStyles(rawStyle, hasAction, tokens);
+    }, [node, tokens]);
+
+    // Common Props — spread all node fields EXCEPT `children` and `root`
+    // (which would override the recursively-rendered React children).
+    const { children: _rawChildren, root: _rawRoot, ...nodeWithoutChildren } = node as any;
+    const props = {
+        ...nodeWithoutChildren,
+        ...((node as any).props || {}),
+        id: node.id,
+        type: node.type,
+        layout: (node as CompositionSpec).layout,
+        constraints: (node as any).constraints,
+        parsedStyle,
+    };
+
+    // Recursively render child nodes: supports both `children` array and `root` property
+    const children = useMemo(() => {
+        const pNode = node as any;
+
+        // Surface nodes use `root` instead of `children`
+        if (pNode.root && typeof pNode.root === 'object') {
+            // Inject _isSurfaceRoot flag so the registry component fills the viewport
+            const rootNode = { ...pNode.root, _isSurfaceRoot: true };
+            return <DesenRenderer node={rootNode as NodeSpec} />;
+        }
+
+        // Composition nodes use `children` array
+        if (pNode.children && Array.isArray(pNode.children)) {
+            return pNode.children.map((child: any, index: number) => {
+                const uniqueKey = `${child.id || 'node'}-${index}`;
+                return <DesenRenderer key={uniqueKey} node={child as NodeSpec} />;
+            });
+        }
+        return null;
+    }, [node]);
+
+    return <RegistryComponent {...props}>{children}</RegistryComponent>;
+};
+
+// Her renderer adımı ErrorBoundary ile sarılarak fail-closed emniyeti uygulanır
+export const DesenRenderer: React.FC<DesenRendererProps> = ({ node }) => {
+    return (
+        <ErrorBoundary elementId={node.id}>
+            <BaseRenderer node={node} />
+        </ErrorBoundary>
+    );
+};

package/src/ErrorBoundary.tsx

@@ -0,0 +1,65 @@
+import React, { Component, ReactNode } from "react";
+import { useDesen } from "./DesenProvider";
+
+interface ErrorBoundaryProps {
+    children: ReactNode;
+    elementId?: string;
+    fallback?: ReactNode;
+    onTelemetry: ReturnType<typeof useDesen>["onTelemetry"];
+    session_id: string;
+    revision_id: string;
+}
+
+interface ErrorBoundaryState {
+    hasError: boolean;
+}
+
+export class ErrorBoundaryClass extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps) {
+        super(props);
+        this.state = { hasError: false };
+    }
+
+    static getDerivedStateFromError(_: Error): ErrorBoundaryState {
+        return { hasError: true };
+    }
+
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
+        const { onTelemetry, elementId, session_id, revision_id } = this.props;
+
+        onTelemetry({
+            session_id,
+            element_id: elementId || "unknown",
+            timestamp: new Date().toISOString(),
+            revision_id,
+            event_type: "BINDING_ERROR",
+            payload: {
+                error_class: "RENDER_ERROR",
+                message: error.message,
+                componentStack: errorInfo.componentStack,
+            },
+        });
+    }
+
+    render() {
+        if (this.state.hasError) {
+            // Fail-closed mantığı gereği ya null ya da verilmiş fallback
+            return this.props.fallback || null;
+        }
+
+        return this.props.children;
+    }
+}
+
+// Hook tabanlı context bilgilerini Class bazlı bileşene enjekte etmek için wrapper
+export const ErrorBoundary: React.FC<Omit<ErrorBoundaryProps, "onTelemetry" | "session_id" | "revision_id">> = (props) => {
+    const desenContext = useDesen();
+    return (
+        <ErrorBoundaryClass
+            {...props}
+            onTelemetry={desenContext.onTelemetry}
+            session_id={desenContext.session_id}
+            revision_id={desenContext.revision_id}
+        />
+    );
+};

package/src/bin.ts

@@ -0,0 +1,17 @@
+#!/usr/bin/env node
+
+const args = process.argv.slice(2);
+const command = args[0];
+
+if (command === "daemon" || command === "audit") {
+    // This will execute the exported CLI process from desen-cli since it runs side-effects directly
+    require("desen-cli");
+} else {
+    console.log(`
+\x1b[36m💠 DESEN Protocol CLI\x1b[0m
+
+Usage:
+  \x1b[1mnpx desen daemon\x1b[0m    Start the local synchronization daemon
+  \x1b[1mnpx desen audit\x1b[0m     Audit DESEN JSON files
+`);
+}

package/src/cli.ts

@@ -0,0 +1 @@
+export * from 'desen-cli';

package/src/core.ts

@@ -0,0 +1 @@
+export * from 'desen-core';

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from "./DesenProvider";
+export * from "./ErrorBoundary";
+export * from "./DesenRenderer";
+export * from "./utils/parseDesenStyles";

package/src/postinstall.ts

@@ -0,0 +1,2 @@
+// Extracted out to avoid ts compilation removing the shebang if it is not a direct entry point
+console.log("\n\x1b[36m💠 DESEN yüklendi! Çalıştırmak için: npx desen daemon\x1b[0m\n");

package/src/utils/ParentStateContext.ts

@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+
+export interface ParentState {
+    isHovered: boolean;
+    isActive: boolean;
+}
+
+export const ParentStateContext = createContext<ParentState>({
+    isHovered: false,
+    isActive: false
+});

package/src/utils/parseDesenStyles.ts

@@ -0,0 +1,217 @@
+import React from "react";
+import type { TokenTheme } from "desen-core";
+
+/**
+ * Resolves a dot-notation token path within a Theme/Tokens object following DTCG schema
+ */
+export function resolveTokenValue(path: string, theme?: TokenTheme | Record<string, any>): string | number | undefined {
+    if (!path || !theme) return undefined;
+
+    // Clean string formatting like "{color.bg.primary}" if exists
+    const cleanPath = path.replace(/^\{|\}$/g, '');
+    const parts = cleanPath.split('.');
+
+    let current: any = theme;
+
+    for (const part of parts) {
+        if (current && typeof current === 'object' && part in current) {
+            current = current[part];
+        } else {
+            return undefined;
+        }
+    }
+
+    // Resolve DTCG $value leaf
+    if (current && typeof current === 'object') {
+        if ('$value' in current && current.$value !== undefined) return current.$value;
+        if ('value' in current && current.value !== undefined) return current.value;
+    }
+
+    // Resolve direct primitive mapping
+    if (typeof current === 'string' || typeof current === 'number') {
+        return current;
+    }
+
+    return undefined;
+}
+
+/**
+ * Parses a generic DESEN style object into React.CSSProperties
+ * Replaces token attributes by looking up the dot notation string recursively in the theme context.
+ * Falls back to literals when available or strictly ignores (Fail-Closed) if neither works.
+ */
+export function parseDesenStyles(style?: any, hasAction?: boolean, theme?: Record<string, any>): React.CSSProperties {
+    if (!style && !hasAction) return {};
+
+    const css: React.CSSProperties = {};
+
+    if (hasAction || (style && (style.hover || style.active))) {
+        css.cursor = "pointer";
+    }
+
+    if (!style) return css;
+
+    const resolvedProps = new Set<string>();
+
+    // 1. Resolve Authored Tokens using `theme/tokens` context
+    if (theme) {
+        // Standard mapping for DESEN property bases to CSS properties
+        const STYLE_MAP: Record<string, keyof React.CSSProperties> = {
+            bg_color: 'backgroundColor',
+            text_color: 'color',
+            border_color: 'borderColor',
+            border_width: 'borderWidth',
+            border_top_width: 'borderTopWidth',
+            border_right_width: 'borderRightWidth',
+            border_bottom_width: 'borderBottomWidth',
+            border_left_width: 'borderLeftWidth',
+            border_radius: 'borderRadius',
+            border_top_left_radius: 'borderTopLeftRadius',
+            border_top_right_radius: 'borderTopRightRadius',
+            border_bottom_left_radius: 'borderBottomLeftRadius',
+            border_bottom_right_radius: 'borderBottomRightRadius',
+        };
+
+        for (const [key, value] of Object.entries(style)) {
+            if (key.endsWith('_token') && typeof value === 'string') {
+                const baseKey = key.replace('_token', '');
+                const resolvedValue = resolveTokenValue(value, theme);
+
+                if (resolvedValue !== undefined) {
+                    const cssKey = STYLE_MAP[baseKey] || baseKey.replace(/_([a-z])/g, (g) => g[1].toUpperCase()) as keyof React.CSSProperties;
+
+                    // Specific formatting for dimension-based token values (convert raw numbers to px)
+                    if (
+                        baseKey.includes('width') ||
+                        baseKey.includes('radius') ||
+                        baseKey === 'font_size' ||
+                        baseKey === 'min_height' ||
+                        baseKey === 'height' ||
+                        baseKey === 'line_height' ||
+                        baseKey === 'padding' ||
+                        baseKey === 'margin'
+                    ) {
+                        (css as any)[cssKey] = (typeof resolvedValue === 'number' && resolvedValue !== 0) ? `${resolvedValue}px` : resolvedValue;
+                    } else {
+                        (css as any)[cssKey] = resolvedValue;
+                    }
+
+                    if (baseKey === 'border_color' && css.borderWidth) {
+                        css.borderStyle = "solid";
+                    } else if (baseKey === 'border_color') {
+                        css.borderStyle = "solid";
+                    }
+
+                    resolvedProps.add(baseKey);
+                }
+            }
+        }
+    }
+
+    // 2. Apply Literal Fallbacks only if their corresponding _token wasn't resolved
+    if (!resolvedProps.has('bg_color') && style.bg_color) css.backgroundColor = style.bg_color;
+    if (!resolvedProps.has('text_color') && style.text_color) css.color = style.text_color;
+
+    if (!resolvedProps.has('border_color') && style.border_color) {
+        css.borderColor = style.border_color;
+        css.borderStyle = "solid";
+    }
+
+    if (!resolvedProps.has('border_width') && style.border_width !== undefined) {
+        css.borderWidth = typeof style.border_width === 'number' ? `${style.border_width}px` : style.border_width;
+    }
+    if (!resolvedProps.has('border_top_width') && style.border_top_width !== undefined) {
+        css.borderTopWidth = typeof style.border_top_width === 'number' ? `${style.border_top_width}px` : style.border_top_width;
+    }
+    if (!resolvedProps.has('border_right_width') && style.border_right_width !== undefined) {
+        css.borderRightWidth = typeof style.border_right_width === 'number' ? `${style.border_right_width}px` : style.border_right_width;
+    }
+    if (!resolvedProps.has('border_bottom_width') && style.border_bottom_width !== undefined) {
+        css.borderBottomWidth = typeof style.border_bottom_width === 'number' ? `${style.border_bottom_width}px` : style.border_bottom_width;
+    }
+    if (!resolvedProps.has('border_left_width') && style.border_left_width !== undefined) {
+        css.borderLeftWidth = typeof style.border_left_width === 'number' ? `${style.border_left_width}px` : style.border_left_width;
+    }
+
+    if (!resolvedProps.has('border_radius') && style.border_radius !== undefined) {
+        css.borderRadius = typeof style.border_radius === 'number' ? `${style.border_radius}px` : style.border_radius;
+    }
+    if (!resolvedProps.has('border_top_left_radius') && style.border_top_left_radius !== undefined) {
+        css.borderTopLeftRadius = typeof style.border_top_left_radius === 'number' ? `${style.border_top_left_radius}px` : style.border_top_left_radius;
+    }
+    if (!resolvedProps.has('border_top_right_radius') && style.border_top_right_radius !== undefined) {
+        css.borderTopRightRadius = typeof style.border_top_right_radius === 'number' ? `${style.border_top_right_radius}px` : style.border_top_right_radius;
+    }
+    if (!resolvedProps.has('border_bottom_left_radius') && style.border_bottom_left_radius !== undefined) {
+        css.borderBottomLeftRadius = typeof style.border_bottom_left_radius === 'number' ? `${style.border_bottom_left_radius}px` : style.border_bottom_left_radius;
+    }
+    if (!resolvedProps.has('border_bottom_right_radius') && style.border_bottom_right_radius !== undefined) {
+        css.borderBottomRightRadius = typeof style.border_bottom_right_radius === 'number' ? `${style.border_bottom_right_radius}px` : style.border_bottom_right_radius;
+    }
+
+    if (!resolvedProps.has('font_size') && style.font_size !== undefined) {
+        css.fontSize = typeof style.font_size === 'number' ? `${style.font_size}px` : style.font_size;
+    }
+    if (!resolvedProps.has('font_weight') && style.font_weight !== undefined) css.fontWeight = style.font_weight;
+    if (!resolvedProps.has('font_family') && style.font_family) css.fontFamily = style.font_family;
+    if (!resolvedProps.has('letter_spacing') && style.letter_spacing) css.letterSpacing = style.letter_spacing;
+    if (!resolvedProps.has('line_height') && style.line_height) css.lineHeight = typeof style.line_height === 'number' ? `${style.line_height}px` : style.line_height;
+    if (!resolvedProps.has('text_decoration') && style.text_decoration) css.textDecoration = style.text_decoration;
+    if (!resolvedProps.has('text_transform') && style.text_transform) css.textTransform = style.text_transform;
+
+    if (!resolvedProps.has('justify_content') && style.justify_content) css.justifyContent = style.justify_content;
+    if (!resolvedProps.has('align_self') && style.align_self) css.alignSelf = style.align_self;
+    if (!resolvedProps.has('flex_grow') && style.flex_grow !== undefined) css.flexGrow = style.flex_grow;
+    if (!resolvedProps.has('text_align') && style.text_align) css.textAlign = style.text_align;
+
+    if (!resolvedProps.has('width') && style.width !== undefined) {
+        css.width = (typeof style.width === 'number' || (typeof style.width === 'string' && !style.width.includes('%')))
+            ? `${parseInt(style.width)}px`
+            : style.width;
+    }
+    if (!resolvedProps.has('height') && style.height !== undefined) {
+        css.height = (typeof style.height === 'number' || (typeof style.height === 'string' && !style.height.includes('%')))
+            ? `${parseInt(style.height)}px`
+            : style.height;
+    }
+
+    if (!resolvedProps.has('padding') && style.padding) {
+        const pt = typeof style.padding.top === 'number' ? `${style.padding.top}px` : (style.padding.top || "0px");
+        const pr = typeof style.padding.right === 'number' ? `${style.padding.right}px` : (style.padding.right || "0px");
+        const pb = typeof style.padding.bottom === 'number' ? `${style.padding.bottom}px` : (style.padding.bottom || "0px");
+        const pl = typeof style.padding.left === 'number' ? `${style.padding.left}px` : (style.padding.left || "0px");
+        css.padding = `${pt} ${pr} ${pb} ${pl}`;
+    }
+
+    if (!resolvedProps.has('min_height') && style.min_height !== undefined) {
+        css.minHeight = typeof style.min_height === 'number' ? `${style.min_height}px` : style.min_height;
+    }
+    if (!resolvedProps.has('box_shadow') && style.box_shadow) css.boxShadow = style.box_shadow;
+
+    if (!resolvedProps.has('transform_y') && style.transform_y !== undefined) {
+        css.transform = `translateY(${style.transform_y}px)`;
+        css.marginBottom = `${style.transform_y}px`;
+    }
+    if (!resolvedProps.has('opacity') && style.opacity !== undefined) css.opacity = style.opacity;
+
+    // Pass through standard CSS if already passed in camelCase implicitly
+    const HANDLED_KEYS = new Set([
+        'bg_color', 'text_color', 'border_color',
+        'border_width', 'border_top_width', 'border_right_width', 'border_bottom_width', 'border_left_width',
+        'border_radius', 'border_top_left_radius', 'border_top_right_radius', 'border_bottom_left_radius', 'border_bottom_right_radius',
+        'font_size', 'font_weight', 'font_family', 'letter_spacing', 'line_height', 'text_decoration', 'text_transform', 'opacity',
+        'padding', 'min_height',
+        'justify_content', 'align_self', 'flex_grow', 'text_align',
+        'width', 'height', 'transform_y', 'box_shadow',
+        'hover', 'active', '_inherited' // Don't pass these meta-objects/flags to CSS
+    ]);
+
+    for (const key of Object.keys(style)) {
+        if (!HANDLED_KEYS.has(key) && !key.endsWith('_token')) {
+            // Keep existing keys if they are valid css rules
+            (css as any)[key] = style[key];
+        }
+    }
+
+    return css;
+}

package/tsconfig.json

@@ -0,0 +1,14 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "CommonJS",
+    "declaration": true,
+    "outDir": "./dist",
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "jsx": "react",
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["src/**/*"]
+}

package/cli.js

@@ -1,3 +0,0 @@
-#!/usr/bin/env node
-
-console.log("desen reserved — coming soon")