deskforge 1.0.0 → 1.0.1

package/examples/deskforge-app/screens/TodoApp.ts

@@ -0,0 +1,288 @@
+/**
+ * Todo List App - Complete Example
+ * 
+ * Demonstrates FlatList, TextInput, CheckBox, Pressable handlers,
+ * complex state management, and list item operations.
+ */
+
+import {
+  View,
+  Text,
+  Pressable,
+  FlatList,
+  TextInput,
+  CheckBox,
+  StyleSheet,
+} from '@deskforge/ui/src'
+import { State } from '@deskforge/state/src'
+
+/**
+ * Todo item structure
+ */
+interface TodoItem {
+  id: string
+  text: string
+  completed: boolean
+  createdAt: number
+}
+
+/**
+ * Style definitions
+ */
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#f8f9fc',
+  },
+  header: {
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    backgroundColor: '#ffffff',
+    borderBottomWidth: 1,
+    borderBottomColor: '#e2e8f0',
+  },
+  headerTitle: {
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: '#111111',
+  },
+  stats: {
+    flexDirection: 'row',
+    gap: 12,
+    marginTop: 12,
+  },
+  statBox: {
+    flex: 1,
+    backgroundColor: '#f0f0f0',
+    borderRadius: 8,
+    padding: 12,
+    alignItems: 'center',
+  },
+  statNumber: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: '#0077ff',
+  },
+  statLabel: {
+    fontSize: 12,
+    color: '#999999',
+    marginTop: 4,
+  },
+  inputSection: {
+    flexDirection: 'row',
+    gap: 8,
+    padding: 16,
+    backgroundColor: '#ffffff',
+    borderBottomWidth: 1,
+    borderBottomColor: '#e2e8f0',
+  },
+  input: {
+    flex: 1,
+    borderWidth: 1,
+    borderColor: '#e2e8f0',
+    borderRadius: 8,
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    fontSize: 14,
+  },
+  addButton: {
+    backgroundColor: '#2ecc71',
+    borderRadius: 8,
+    paddingHorizontal: 16,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  addButtonText: {
+    color: '#ffffff',
+    fontWeight: 'bold',
+  },
+  todoList: {
+    flex: 1,
+  },
+  todoItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: '#f0f0f0',
+  },
+  todoCheckbox: {
+    marginRight: 12,
+  },
+  todoContent: {
+    flex: 1,
+  },
+  todoText: {
+    fontSize: 15,
+    color: '#111111',
+  },
+  todoTextCompleted: {
+    textDecorationLine: 'line-through',
+    color: '#999999',
+  },
+  deleteButton: {
+    padding: 8,
+    marginLeft: 8,
+  },
+  deleteButtonText: {
+    color: '#e74c3c',
+    fontWeight: 'bold',
+    fontSize: 18,
+  },
+  emptyState: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  emptyStateText: {
+    fontSize: 16,
+    color: '#999999',
+  },
+})
+
+/**
+ * TodoApp - Main component
+ * 
+ * Todo list with add, complete, and delete functionality.
+ * Demonstrates complex state mutations and list operations.
+ */
+export const TodoApp = () => {
+  const state = State({
+    todos: [] as TodoItem[],
+    newTodoText: '',
+  })
+
+  // Stats
+  const totalTodos = state.todos.length
+  const completedTodos = state.todos.filter((t) => t.completed).length
+  const remainingTodos = totalTodos - completedTodos
+
+  /**
+   * Add a new todo
+   */
+  const addTodo = () => {
+    if (!state.newTodoText.trim()) return
+
+    const newTodo: TodoItem = {
+      id: `todo_${Date.now()}`,
+      text: state.newTodoText,
+      completed: false,
+      createdAt: Date.now(),
+    }
+
+    state.todos.unshift(newTodo)
+    state.newTodoText = ''
+  }
+
+  /**
+   * Toggle todo completion
+   */
+  const toggleTodo = (id: string) => {
+    const todo = state.todos.find((t) => t.id === id)
+    if (todo) {
+      todo.completed = !todo.completed
+    }
+  }
+
+  /**
+   * Delete a todo
+   */
+  const deleteTodo = (id: string) => {
+    const index = state.todos.findIndex((t) => t.id === id)
+    if (index >= 0) {
+      state.todos.splice(index, 1)
+    }
+  }
+
+  /**
+   * Render individual todo item
+   */
+  const renderTodoItem = (todo: TodoItem) => {
+    return View(styles.todoItem, [
+      CheckBox(
+        todo.completed,
+        (value) => toggleTodo(todo.id),
+        styles.todoCheckbox,
+        {
+          tintColor: '#0077ff',
+        }
+      ),
+
+      View(styles.todoContent, [
+        Text(
+          todo.text,
+          {
+            ...styles.todoText,
+            ...(todo.completed ? styles.todoTextCompleted : {}),
+          }
+        ),
+      ]),
+
+      Pressable(
+        styles.deleteButton,
+        {
+          onPress: () => deleteTodo(todo.id),
+        },
+        [
+          Text('×', styles.deleteButtonText),
+        ]
+      ),
+    ])
+  }
+
+  return View(styles.container, [
+    // Header with stats
+    View(styles.header, [
+      Text('Todos', styles.headerTitle),
+
+      View(styles.stats, [
+        View(styles.statBox, [
+          Text(String(totalTodos), styles.statNumber),
+          Text('Total', styles.statLabel),
+        ]),
+
+        View(styles.statBox, [
+          Text(String(completedTodos), styles.statNumber),
+          Text('Done', styles.statLabel),
+        ]),
+
+        View(styles.statBox, [
+          Text(String(remainingTodos), styles.statNumber),
+          Text('Left', styles.statLabel),
+        ]),
+      ]),
+    ]),
+
+    // Input section
+    View(styles.inputSection, [
+      TextInput(styles.input, {
+        placeholder: 'Add a new todo...',
+        value: state.newTodoText,
+        onChangeText: (text) => {
+          state.newTodoText = text
+        },
+      }),
+
+      Pressable(styles.addButton, {
+        onPress: addTodo,
+      }, [
+        Text('Add', styles.addButtonText),
+      ]),
+    ]),
+
+    // Todo list
+    state.todos.length === 0
+      ? View(styles.emptyState, [
+          Text('No todos yet!', styles.emptyStateText),
+          Text('Add one to get started', {
+            fontSize: 14,
+            color: '#ccc',
+            marginTop: 8,
+          }),
+        ])
+      : FlatList(state.todos, renderTodoItem, styles.todoList),
+  ])
+}
+
+export default TodoApp

package/examples/deskforge-app/screens/index.ts

@@ -0,0 +1,50 @@
+/**
+ * DeskForge Examples Index
+ * 
+ * Comprehensive examples demonstrating all UI components and patterns.
+ */
+
+export { NotesApp } from './screens/NotesApp'
+export { CounterApp } from './screens/CounterApp'
+export { SettingsApp } from './screens/SettingsApp'
+export { TodoApp } from './screens/TodoApp'
+export { GalleryApp } from './screens/GalleryApp'
+
+/**
+ * Example patterns demonstrated:
+ * 
+ * NotesApp:
+ *   - FlatList with dynamic data
+ *   - Modal for user input
+ *   - TextInput with validation
+ *   - Database integration (DB.query)
+ *   - Toast notifications
+ *   - State management with multiple properties
+ * 
+ * CounterApp:
+ *   - Simple State reactivity
+ *   - Computed values
+ *   - Pressable handlers
+ *   - Basic component composition
+ * 
+ * SettingsApp:
+ *   - Switch toggle component
+ *   - Slider for numeric input
+ *   - ScrollView for overflow content
+ *   - Platform detection (Platform.OS)
+ *   - Theme integration
+ * 
+ * TodoApp:
+ *   - FlatList with item operations
+ *   - CheckBox for boolean state
+ *   - Complex array mutations
+ *   - Statistics computation
+ *   - Delete/toggle item patterns
+ * 
+ * GalleryApp:
+ *   - Image component with URIs
+ *   - Grid layout pattern
+ *   - Full-screen preview modal
+ *   - Image gallery best practices
+ *   - ActivityIndicator for loading
+ */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "deskforge",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Build everything. Own everything. Pay for nothing.",
   "publishConfig": {
     "access": "public"

package/packages/cli/dist/commands/start.d.ts

@@ -4,7 +4,13 @@ interface StartConfig {
     platform?: string;
 }
 declare function findEntryFile(): string | null;
+interface DesktopShellOptions {
+    appName: string;
+    outputPath: string;
+    port: number;
+}
+declare function renderDesktopShell(options: DesktopShellOptions): Promise<string>;
 declare function start(config?: StartConfig): Promise<void>;
 export type { StartConfig };
-export { start, findEntryFile };
+export { start, findEntryFile, renderDesktopShell };
 //# sourceMappingURL=start.d.ts.map

package/packages/cli/dist/commands/start.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"start.d.ts","sourceRoot":"","sources":["../../src/commands/start.ts"],"names":[],"mappings":"AAaA,UAAU,WAAW;IAEnB,SAAS,EAAG,OAAO,CAAA;IAGnB,IAAI,EAAQ,MAAM,CAAA;IAGlB,QAAQ,CAAC,EAAG,MAAM,CAAA;CACnB;AAGD,iBAAS,aAAa,IAAI,MAAM,GAAG,IAAI,CAYtC;AAGD,iBAAe,KAAK,CAClB,MAAM,GAAE,WAA6C,GACpD,OAAO,CAAC,IAAI,CAAC,CAuEf;AAED,YAAY,EAAE,WAAW,EAAE,CAAA;AAC3B,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"start.d.ts","sourceRoot":"","sources":["../../src/commands/start.ts"],"names":[],"mappings":"AAaA,UAAU,WAAW;IAEnB,SAAS,EAAG,OAAO,CAAA;IAGnB,IAAI,EAAQ,MAAM,CAAA;IAGlB,QAAQ,CAAC,EAAG,MAAM,CAAA;CACnB;AAGD,iBAAS,aAAa,IAAI,MAAM,GAAG,IAAI,CAYtC;AAED,UAAU,mBAAmB;IAC3B,OAAO,EAAE,MAAM,CAAA;IACf,UAAU,EAAE,MAAM,CAAA;IAClB,IAAI,EAAE,MAAM,CAAA;CACb;AAED,iBAAS,kBAAkB,CAAC,OAAO,EAAE,mBAAmB,GAAG,OAAO,CAAC,MAAM,CAAC,CAoEzE;AAGD,iBAAe,KAAK,CAClB,MAAM,GAAE,WAA6C,GACpD,OAAO,CAAC,IAAI,CAAC,CAmEf;AAED,YAAY,EAAE,WAAW,EAAE,CAAA;AAC3B,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,kBAAkB,EAAE,CAAA"}

package/packages/cli/dist/commands/start.js

@@ -8,10 +8,11 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.start = start;
 exports.findEntryFile = findEntryFile;
+exports.renderDesktopShell = renderDesktopShell;
 const fs = require("fs");
 const path = require("path");
-const http = require("http");
 const child_process_1 = require("child_process");
+const skia_canvas_1 = require("skia-canvas");
 // Finds the app entry file in current directory
 function findEntryFile() {
     const candidates = [
@@ -24,6 +25,65 @@ function findEntryFile() {
     }
     return null;
 }
+function renderDesktopShell(options) {
+    return new Promise((resolve, reject) => {
+        try {
+            const canvas = new skia_canvas_1.Canvas(1280, 820);
+            const ctx = canvas.getContext('2d');
+            // Window chrome
+            ctx.fillStyle = '#0f172a';
+            ctx.fillRect(0, 0, 1280, 820);
+            ctx.fillStyle = '#111827';
+            ctx.fillRect(0, 0, 1280, 40);
+            ctx.fillStyle = '#ffffff';
+            ctx.font = '600 14px sans-serif';
+            ctx.fillText(options.appName, 24, 25);
+            // Traffic lights
+            ctx.fillStyle = '#ef4444';
+            ctx.beginPath();
+            ctx.arc(20, 20, 6, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.fillStyle = '#f59e0b';
+            ctx.beginPath();
+            ctx.arc(40, 20, 6, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.fillStyle = '#22c55e';
+            ctx.beginPath();
+            ctx.arc(60, 20, 6, 0, Math.PI * 2);
+            ctx.fill();
+            // Main surface
+            ctx.fillStyle = '#f8fafc';
+            ctx.fillRect(0, 40, 1280, 780);
+            ctx.fillStyle = '#111827';
+            ctx.font = '700 34px sans-serif';
+            ctx.fillText('DeskForge desktop shell', 70, 140);
+            ctx.fillStyle = '#475569';
+            ctx.font = '20px sans-serif';
+            ctx.fillText(`Running on port ${options.port}`, 70, 190);
+            ctx.fillStyle = '#ffffff';
+            ctx.fillRect(70, 230, 1140, 420);
+            ctx.fillStyle = '#e2e8f0';
+            ctx.fillRect(90, 250, 1100, 380);
+            ctx.fillStyle = '#0f172a';
+            ctx.font = '600 24px sans-serif';
+            ctx.fillText('Beautiful Skia desktop UI', 120, 320);
+            ctx.font = '18px sans-serif';
+            ctx.fillText('Fluid panels, modern chrome, and GPU-backed rendering.', 120, 360);
+            ctx.fillText('This shell is rendered by Skia instead of a browser page.', 120, 390);
+            ctx.fillStyle = '#2563eb';
+            ctx.fillRect(120, 430, 220, 46);
+            ctx.fillStyle = '#ffffff';
+            ctx.font = '600 18px sans-serif';
+            ctx.fillText('Open app', 168, 460);
+            canvas.toFile(options.outputPath, { format: 'png' })
+                .then(() => resolve(options.outputPath))
+                .catch(reject);
+        }
+        catch (err) {
+            reject(err);
+        }
+    });
+}
 // Starts the development server
 async function start(config = { hotReload: true, port: 3040 }) {
     console.log('\n[dfcli] Starting DeskForge dev server...\n');
@@ -44,27 +104,21 @@ async function start(config = { hotReload: true, port: 3040 }) {
         const raw = m && m[1] ? m[1] : '';
         const platforms = raw.split(',').map(s => s.replace(/['"\s]/g, '')).filter(Boolean);
         if (platforms.includes('desktop')) {
-            const webPort = (config.port || 3040) + 1;
-            const server = http.createServer((req, res) => {
-                res.writeHead(200, { 'Content-Type': 'text/html' });
-                const html = `<!doctype html><html><head><meta charset="utf-8"><title>${path.basename(process.cwd())}</title></head><body><h1>${path.basename(process.cwd())}</h1><p>DeskForge app running in dev mode on port ${config.port}.</p></body></html>`;
-                res.end(html);
-            });
-            server.listen(webPort, () => {
-                console.log(`[dfcli] ✓ Desktop window served at http://localhost:${webPort}`);
-                // Open default browser as a lightweight native window
-                const opener = process.platform === 'darwin' ? 'open' : process.platform === 'win32' ? 'start' : 'xdg-open';
-                // Spawn via shell on Windows to use 'start'
-                if (process.platform === 'win32') {
-                    (0, child_process_1.spawn)(opener, [`http://localhost:${webPort}`], { shell: true, stdio: 'ignore', detached: true }).unref();
-                }
-                else {
-                    (0, child_process_1.spawn)(opener, [`http://localhost:${webPort}`], { stdio: 'ignore', detached: true }).unref();
-                }
+            const shellPath = path.join(process.cwd(), '.deskforge-desktop-shell.png');
+            await renderDesktopShell({
+                appName: path.basename(process.cwd()),
+                outputPath: shellPath,
+                port: config.port || 3040,
             });
-            // clean up on exit
-            process.on('exit', () => server.close());
-            process.on('SIGINT', () => { server.close(); process.exit(0); });
+            console.log(`[dfcli] ✓ Desktop shell rendered to ${shellPath}`);
+            // Open the generated shell image using the OS default viewer if available.
+            const opener = process.platform === 'darwin' ? 'open' : process.platform === 'win32' ? 'start' : 'xdg-open';
+            if (process.platform === 'win32') {
+                (0, child_process_1.spawn)(opener, [shellPath], { shell: true, stdio: 'ignore', detached: true }).unref();
+            }
+            else {
+                (0, child_process_1.spawn)(opener, [shellPath], { stdio: 'ignore', detached: true }).unref();
+            }
         }
     }
     catch (err) {

package/packages/cli/dist/commands/start.js.map

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

package/packages/cli/src/commands/start.ts

@@ -7,8 +7,8 @@
 
 import * as fs   from 'fs'
 import * as path from 'path'
-import * as http from 'http'
 import { spawn } from 'child_process'
+import { Canvas } from 'skia-canvas'
 
 // Development server configuration
 interface StartConfig {
@@ -37,6 +37,82 @@ function findEntryFile(): string | null {
   return null
 }
 
+interface DesktopShellOptions {
+  appName: string
+  outputPath: string
+  port: number
+}
+
+function renderDesktopShell(options: DesktopShellOptions): Promise<string> {
+  return new Promise((resolve, reject) => {
+    try {
+      const canvas = new Canvas(1280, 820)
+      const ctx = canvas.getContext('2d')
+
+      // Window chrome
+      ctx.fillStyle = '#0f172a'
+      ctx.fillRect(0, 0, 1280, 820)
+
+      ctx.fillStyle = '#111827'
+      ctx.fillRect(0, 0, 1280, 40)
+
+      ctx.fillStyle = '#ffffff'
+      ctx.font = '600 14px sans-serif'
+      ctx.fillText(options.appName, 24, 25)
+
+      // Traffic lights
+      ctx.fillStyle = '#ef4444'
+      ctx.beginPath()
+      ctx.arc(20, 20, 6, 0, Math.PI * 2)
+      ctx.fill()
+      ctx.fillStyle = '#f59e0b'
+      ctx.beginPath()
+      ctx.arc(40, 20, 6, 0, Math.PI * 2)
+      ctx.fill()
+      ctx.fillStyle = '#22c55e'
+      ctx.beginPath()
+      ctx.arc(60, 20, 6, 0, Math.PI * 2)
+      ctx.fill()
+
+      // Main surface
+      ctx.fillStyle = '#f8fafc'
+      ctx.fillRect(0, 40, 1280, 780)
+
+      ctx.fillStyle = '#111827'
+      ctx.font = '700 34px sans-serif'
+      ctx.fillText('DeskForge desktop shell', 70, 140)
+
+      ctx.fillStyle = '#475569'
+      ctx.font = '20px sans-serif'
+      ctx.fillText(`Running on port ${options.port}`, 70, 190)
+
+      ctx.fillStyle = '#ffffff'
+      ctx.fillRect(70, 230, 1140, 420)
+      ctx.fillStyle = '#e2e8f0'
+      ctx.fillRect(90, 250, 1100, 380)
+
+      ctx.fillStyle = '#0f172a'
+      ctx.font = '600 24px sans-serif'
+      ctx.fillText('Beautiful Skia desktop UI', 120, 320)
+      ctx.font = '18px sans-serif'
+      ctx.fillText('Fluid panels, modern chrome, and GPU-backed rendering.', 120, 360)
+      ctx.fillText('This shell is rendered by Skia instead of a browser page.', 120, 390)
+
+      ctx.fillStyle = '#2563eb'
+      ctx.fillRect(120, 430, 220, 46)
+      ctx.fillStyle = '#ffffff'
+      ctx.font = '600 18px sans-serif'
+      ctx.fillText('Open app', 168, 460)
+
+      canvas.toFile(options.outputPath, { format: 'png' })
+        .then(() => resolve(options.outputPath))
+        .catch(reject)
+    } catch (err) {
+      reject(err as Error)
+    }
+  })
+}
+
 // Starts the development server
 async function start(
   config: StartConfig = { hotReload: true, port: 3040 }
@@ -69,26 +145,22 @@ async function start(
     const raw = m && m[1] ? m[1] : ''
     const platforms = raw.split(',').map(s => s.replace(/['"\s]/g, '')).filter(Boolean)
     if (platforms.includes('desktop')) {
-      const webPort = (config.port || 3040) + 1
-      const server = http.createServer((req, res) => {
-        res.writeHead(200, { 'Content-Type': 'text/html' })
-        const html = `<!doctype html><html><head><meta charset="utf-8"><title>${path.basename(process.cwd())}</title></head><body><h1>${path.basename(process.cwd())}</h1><p>DeskForge app running in dev mode on port ${config.port}.</p></body></html>`
-        res.end(html)
-      })
-      server.listen(webPort, () => {
-        console.log(`[dfcli] ✓ Desktop window served at http://localhost:${webPort}`)
-        // Open default browser as a lightweight native window
-        const opener = process.platform === 'darwin' ? 'open' : process.platform === 'win32' ? 'start' : 'xdg-open'
-        // Spawn via shell on Windows to use 'start'
-        if (process.platform === 'win32') {
-          spawn(opener, [`http://localhost:${webPort}`], { shell: true, stdio: 'ignore', detached: true }).unref()
-        } else {
-          spawn(opener, [`http://localhost:${webPort}`], { stdio: 'ignore', detached: true }).unref()
-        }
+      const shellPath = path.join(process.cwd(), '.deskforge-desktop-shell.png')
+      await renderDesktopShell({
+        appName: path.basename(process.cwd()),
+        outputPath: shellPath,
+        port: config.port || 3040,
       })
-      // clean up on exit
-      process.on('exit', () => server.close())
-      process.on('SIGINT', () => { server.close(); process.exit(0) })
+
+      console.log(`[dfcli] ✓ Desktop shell rendered to ${shellPath}`)
+
+      // Open the generated shell image using the OS default viewer if available.
+      const opener = process.platform === 'darwin' ? 'open' : process.platform === 'win32' ? 'start' : 'xdg-open'
+      if (process.platform === 'win32') {
+        spawn(opener, [shellPath], { shell: true, stdio: 'ignore', detached: true }).unref()
+      } else {
+        spawn(opener, [shellPath], { stdio: 'ignore', detached: true }).unref()
+      }
     }
   } catch (err) {
     // non-fatal
@@ -114,4 +186,4 @@ async function start(
 }
 
 export type { StartConfig }
-export { start, findEntryFile }
+export { start, findEntryFile, renderDesktopShell }

package/packages/cli/test/start.test.js

@@ -0,0 +1,24 @@
+const test = require('node:test')
+const assert = require('node:assert/strict')
+const fs = require('fs')
+const os = require('os')
+const path = require('path')
+
+const startModule = require('../dist/commands/start.js')
+
+test('desktop shell renderer writes a skia-based png file', async () => {
+  assert.equal(typeof startModule.renderDesktopShell, 'function')
+
+  const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'deskforge-desktop-shell-'))
+  const outputPath = path.join(tmpDir, 'desktop-shell.png')
+
+  const result = await startModule.renderDesktopShell({
+    appName: 'DeskForge Demo',
+    outputPath,
+    port: 3040,
+  })
+
+  assert.equal(result, outputPath)
+  assert.ok(fs.existsSync(outputPath))
+  assert.ok(fs.statSync(outputPath).size > 0)
+})

package/packages/core/dist/index.d.ts

@@ -3,4 +3,5 @@ export * from './tree/index';
 export * from './scheduler/index';
 export * from './animation/index';
 export * from './component/index';
+export * from './style/index';
 //# sourceMappingURL=index.d.ts.map