deskforge 1.0.0 → 1.0.1

package/packages/file/src/file.ts

@@ -4,6 +4,9 @@
 // Read, write, move, copy, watch, pick — all in one clean API.
 // Works on desktop and mobile with platform-appropriate dialogs.
 
+import * as fs from 'fs'
+import * as path from 'path'
+
 // File types for the picker dialog
 type FileType =
   | 'any'
@@ -133,12 +136,101 @@ async function copy(
   console.log('[DeskForge File] Copy:', from, '→', to)
 }
 
-// Renames a file
+// Renames a file and updates local imports that reference it
 async function rename(
-  path:    string,
-  newName: string
+  oldPath: string,
+  newPath: string
 ): Promise<void> {
-  console.log('[DeskForge File] Rename:', path, '→', newName)
+  const resolvedOldPath = path.resolve(oldPath)
+  const resolvedNewPath = path.resolve(newPath)
+
+  if (!fs.existsSync(resolvedOldPath)) {
+    throw new Error(`[DeskForge File] Cannot rename missing file: ${resolvedOldPath}`)
+  }
+
+  const parentDir = path.dirname(resolvedNewPath)
+  fs.mkdirSync(parentDir, { recursive: true })
+  fs.renameSync(resolvedOldPath, resolvedNewPath)
+
+  const workspaceRoot = path.dirname(resolvedOldPath)
+  const files = walkFiles(workspaceRoot)
+
+  for (const file of files) {
+    const content = fs.readFileSync(file, 'utf8')
+    const updated = rewriteImportReferences(content, file, resolvedOldPath, resolvedNewPath)
+
+    if (updated !== content) {
+      fs.writeFileSync(file, updated)
+    }
+  }
+
+  console.log('[DeskForge File] Rename:', oldPath, '→', newPath)
+}
+
+function walkFiles(root: string): string[] {
+  if (!fs.existsSync(root)) return []
+
+  const results: string[] = []
+  const stack = [root]
+
+  while (stack.length > 0) {
+    const current = stack.pop()
+    if (!current) continue
+
+    const entries = fs.readdirSync(current, { withFileTypes: true })
+    for (const entry of entries) {
+      const fullPath = path.join(current, entry.name)
+      if (entry.isDirectory()) {
+        stack.push(fullPath)
+      } else if (entry.isFile() && /\.(ts|tsx|js|jsx|json|md)$/i.test(entry.name)) {
+        results.push(fullPath)
+      }
+    }
+  }
+
+  return results
+}
+
+function toPosixPath(filePath: string): string {
+  return filePath.split(path.sep).join('/')
+}
+
+function rewriteImportReferences(
+  content: string,
+  filePath: string,
+  oldPath: string,
+  newPath: string
+): string {
+  const fileDir = path.dirname(filePath)
+  const oldBase = path.basename(oldPath)
+  const newBase = path.basename(newPath)
+  const oldBaseNoExt = path.basename(oldPath, path.extname(oldPath))
+  const newBaseNoExt = path.basename(newPath, path.extname(newPath))
+  const oldRelative = toPosixPath(path.relative(fileDir, oldPath))
+  const newRelative = toPosixPath(path.relative(fileDir, newPath))
+
+  const replacements = [
+    { from: oldRelative, to: newRelative },
+    { from: `./${oldBase}`, to: `./${newBase}` },
+    { from: `../${oldBase}`, to: `../${newBase}` },
+    { from: `./${oldBaseNoExt}`, to: `./${newBaseNoExt}` },
+    { from: `../${oldBaseNoExt}`, to: `../${newBaseNoExt}` },
+    { from: oldBase, to: newBase },
+    { from: oldBaseNoExt, to: newBaseNoExt },
+  ]
+
+  let updated = content
+  for (const { from, to } of replacements) {
+    if (from && from !== to) {
+      updated = updated.replace(new RegExp(escapeRegExp(from), 'g'), to)
+    }
+  }
+
+  return updated
+}
+
+function escapeRegExp(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
 }
 
 // Deletes a file

package/packages/file/test/file.test.js

@@ -0,0 +1,23 @@
+const test = require('node:test')
+const assert = require('node:assert/strict')
+const fs = require('fs')
+const os = require('os')
+const path = require('path')
+
+const { File } = require('../dist/file.js')
+
+test('rename updates local import paths after a file rename', async () => {
+  const tmpDir = fs.mkdtempSync(path.join(os.tmpdir(), 'deskforge-file-rename-'))
+  const oldFile = path.join(tmpDir, 'oldName.ts')
+  const newFile = path.join(tmpDir, 'newName.ts')
+  const importer = path.join(tmpDir, 'app.ts')
+
+  fs.writeFileSync(oldFile, 'export const value = 1\n')
+  fs.writeFileSync(importer, "import { value } from './oldName'\nconsole.log(value)\n")
+
+  await File.rename(oldFile, newFile)
+
+  assert.ok(fs.existsSync(newFile))
+  assert.ok(!fs.existsSync(oldFile))
+  assert.match(fs.readFileSync(importer, 'utf8'), /newName/)
+})

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

@@ -3,4 +3,5 @@ export * from './router';
 export * from './file-router';
 export * from './manifest';
 export * from './app';
+export * from './navigation';
 //# sourceMappingURL=index.d.ts.map

package/packages/router/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,OAAO,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,cAAc,UAAU,CAAA;AACxB,cAAc,UAAU,CAAA;AACxB,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,OAAO,CAAA;AACrB,cAAc,cAAc,CAAA"}

package/packages/router/dist/index.js

@@ -21,4 +21,5 @@ __exportStar(require("./router"), exports);
 __exportStar(require("./file-router"), exports);
 __exportStar(require("./manifest"), exports);
 __exportStar(require("./app"), exports);
+__exportStar(require("./navigation"), exports);
 //# sourceMappingURL=index.js.map

package/packages/router/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,WAAW;AACX,4CAA4C;AAC5C,2CAAwB;AACxB,2CAAwB;AACxB,gDAA6B;AAC7B,6CAA0B;AAC1B,wCAAqB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,WAAW;AACX,4CAA4C;AAC5C,2CAAwB;AACxB,2CAAwB;AACxB,gDAA6B;AAC7B,6CAA0B;AAC1B,wCAAqB;AACrB,+CAA4B"}

package/packages/router/dist/navigation.d.ts

@@ -0,0 +1,23 @@
+import type { DFNode } from './screen';
+import type { ScreenComponent, ScreenConfig, ScreenParams } from './screen';
+export interface NavigationStackEntry {
+    name: string;
+    params: ScreenParams;
+}
+export interface DeskForgeNavigation {
+    navigate: (name: string, params?: ScreenParams) => void;
+    goBack: () => void;
+    canGoBack: () => boolean;
+    currentRoute: () => string | null;
+    currentParams: () => ScreenParams;
+    getStack: () => NavigationStackEntry[];
+    render: () => DFNode | null;
+    register: (name: string, component: ScreenComponent | ScreenConfig) => void;
+}
+export declare function createNavigation(): DeskForgeNavigation;
+export declare const navigation: DeskForgeNavigation;
+export declare function createNavigationScreen(component: ScreenComponent, options?: {
+    title?: string;
+    layout?: string;
+}): ScreenConfig;
+//# sourceMappingURL=navigation.d.ts.map

package/packages/router/dist/navigation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.d.ts","sourceRoot":"","sources":["../src/navigation.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,UAAU,CAAA;AACtC,OAAO,KAAK,EAAE,eAAe,EAAE,YAAY,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAG3E,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,YAAY,CAAA;CACrB;AAED,MAAM,WAAW,mBAAmB;IAClC,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,YAAY,KAAK,IAAI,CAAA;IACvD,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,SAAS,EAAE,MAAM,OAAO,CAAA;IACxB,YAAY,EAAE,MAAM,MAAM,GAAG,IAAI,CAAA;IACjC,aAAa,EAAE,MAAM,YAAY,CAAA;IACjC,QAAQ,EAAE,MAAM,oBAAoB,EAAE,CAAA;IACtC,MAAM,EAAE,MAAM,MAAM,GAAG,IAAI,CAAA;IAC3B,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,eAAe,GAAG,YAAY,KAAK,IAAI,CAAA;CAC5E;AAwDD,wBAAgB,gBAAgB,IAAI,mBAAmB,CAEtD;AAED,eAAO,MAAM,UAAU,qBAAqB,CAAA;AAE5C,wBAAgB,sBAAsB,CACpC,SAAS,EAAE,eAAe,EAC1B,OAAO,GAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAO,GAChD,YAAY,CAEd"}

package/packages/router/dist/navigation.js

@@ -0,0 +1,61 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.navigation = void 0;
+exports.createNavigation = createNavigation;
+exports.createNavigationScreen = createNavigationScreen;
+const screen_1 = require("./screen");
+class DeskForgeNavigator {
+    constructor() {
+        this.routes = new Map();
+        this.stack = [];
+        this.index = -1;
+    }
+    navigate(name, params = {}) {
+        const route = this.routes.get(name);
+        if (!route) {
+            console.error(`[DeskForge Navigation] Unknown route: ${name}`);
+            return;
+        }
+        this.stack = this.stack.slice(0, this.index + 1);
+        this.stack.push({ name, params });
+        this.index = this.stack.length - 1;
+    }
+    goBack() {
+        if (this.index <= 0)
+            return;
+        this.index--;
+    }
+    canGoBack() {
+        return this.index > 0;
+    }
+    currentRoute() {
+        return this.stack[this.index]?.name ?? null;
+    }
+    currentParams() {
+        return this.stack[this.index]?.params ?? {};
+    }
+    getStack() {
+        return this.stack.map(entry => ({ ...entry, params: { ...entry.params } }));
+    }
+    render() {
+        const current = this.stack[this.index];
+        if (!current)
+            return null;
+        const route = this.routes.get(current.name);
+        if (!route)
+            return null;
+        const resolved = typeof route === 'function' ? route(current.params) : route.component(current.params);
+        return resolved ?? null;
+    }
+    register(name, component) {
+        this.routes.set(name, component);
+    }
+}
+function createNavigation() {
+    return new DeskForgeNavigator();
+}
+exports.navigation = createNavigation();
+function createNavigationScreen(component, options = {}) {
+    return (0, screen_1.Screen)(component, options);
+}
+//# sourceMappingURL=navigation.js.map

package/packages/router/dist/navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"navigation.js","sourceRoot":"","sources":["../src/navigation.ts"],"names":[],"mappings":";;;AA0EA,4CAEC;AAID,wDAKC;AAnFD,qCAAiC;AAkBjC,MAAM,kBAAkB;IAAxB;QACU,WAAM,GAAG,IAAI,GAAG,EAA0C,CAAA;QAC1D,UAAK,GAA2B,EAAE,CAAA;QAClC,UAAK,GAAG,CAAC,CAAC,CAAA;IAiDpB,CAAC;IA/CC,QAAQ,CAAC,IAAY,EAAE,SAAuB,EAAE;QAC9C,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,CAAA;QACnC,IAAI,CAAC,KAAK,EAAE,CAAC;YACX,OAAO,CAAC,KAAK,CAAC,yCAAyC,IAAI,EAAE,CAAC,CAAA;YAC9D,OAAM;QACR,CAAC;QAED,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,GAAG,CAAC,CAAC,CAAA;QAChD,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAA;QACjC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAA;IACpC,CAAC;IAED,MAAM;QACJ,IAAI,IAAI,CAAC,KAAK,IAAI,CAAC;YAAE,OAAM;QAC3B,IAAI,CAAC,KAAK,EAAE,CAAA;IACd,CAAC;IAED,SAAS;QACP,OAAO,IAAI,CAAC,KAAK,GAAG,CAAC,CAAA;IACvB,CAAC;IAED,YAAY;QACV,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,IAAI,IAAI,IAAI,CAAA;IAC7C,CAAC;IAED,aAAa;QACX,OAAO,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,EAAE,MAAM,IAAI,EAAE,CAAA;IAC7C,CAAC;IAED,QAAQ;QACN,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,EAAE,MAAM,EAAE,EAAE,GAAG,KAAK,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC,CAAA;IAC7E,CAAC;IAED,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QACtC,IAAI,CAAC,OAAO;YAAE,OAAO,IAAI,CAAA;QAEzB,MAAM,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,CAAA;QAC3C,IAAI,CAAC,KAAK;YAAE,OAAO,IAAI,CAAA;QAEvB,MAAM,QAAQ,GAAG,OAAO,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM,CAAC,CAAA;QACtG,OAAO,QAAQ,IAAI,IAAI,CAAA;IACzB,CAAC;IAED,QAAQ,CAAC,IAAY,EAAE,SAAyC;QAC9D,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,SAAS,CAAC,CAAA;IAClC,CAAC;CACF;AAED,SAAgB,gBAAgB;IAC9B,OAAO,IAAI,kBAAkB,EAAE,CAAA;AACjC,CAAC;AAEY,QAAA,UAAU,GAAG,gBAAgB,EAAE,CAAA;AAE5C,SAAgB,sBAAsB,CACpC,SAA0B,EAC1B,UAA+C,EAAE;IAEjD,OAAO,IAAA,eAAM,EAAC,SAAS,EAAE,OAAO,CAAC,CAAA;AACnC,CAAC"}

package/packages/router/src/index.ts

@@ -4,4 +4,5 @@ export * from './screen'
 export * from './router'
 export * from './file-router'
 export * from './manifest'
-export * from './app'
+export * from './app'
+export * from './navigation'

package/packages/router/src/navigation.ts

@@ -0,0 +1,86 @@
+import type { DFNode } from './screen'
+import type { ScreenComponent, ScreenConfig, ScreenParams } from './screen'
+import { Screen } from './screen'
+
+export interface NavigationStackEntry {
+  name: string
+  params: ScreenParams
+}
+
+export interface DeskForgeNavigation {
+  navigate: (name: string, params?: ScreenParams) => void
+  goBack: () => void
+  canGoBack: () => boolean
+  currentRoute: () => string | null
+  currentParams: () => ScreenParams
+  getStack: () => NavigationStackEntry[]
+  render: () => DFNode | null
+  register: (name: string, component: ScreenComponent | ScreenConfig) => void
+}
+
+class DeskForgeNavigator implements DeskForgeNavigation {
+  private routes = new Map<string, ScreenComponent | ScreenConfig>()
+  private stack: NavigationStackEntry[] = []
+  private index = -1
+
+  navigate(name: string, params: ScreenParams = {}): void {
+    const route = this.routes.get(name)
+    if (!route) {
+      console.error(`[DeskForge Navigation] Unknown route: ${name}`)
+      return
+    }
+
+    this.stack = this.stack.slice(0, this.index + 1)
+    this.stack.push({ name, params })
+    this.index = this.stack.length - 1
+  }
+
+  goBack(): void {
+    if (this.index <= 0) return
+    this.index--
+  }
+
+  canGoBack(): boolean {
+    return this.index > 0
+  }
+
+  currentRoute(): string | null {
+    return this.stack[this.index]?.name ?? null
+  }
+
+  currentParams(): ScreenParams {
+    return this.stack[this.index]?.params ?? {}
+  }
+
+  getStack(): NavigationStackEntry[] {
+    return this.stack.map(entry => ({ ...entry, params: { ...entry.params } }))
+  }
+
+  render(): DFNode | null {
+    const current = this.stack[this.index]
+    if (!current) return null
+
+    const route = this.routes.get(current.name)
+    if (!route) return null
+
+    const resolved = typeof route === 'function' ? route(current.params) : route.component(current.params)
+    return resolved ?? null
+  }
+
+  register(name: string, component: ScreenComponent | ScreenConfig): void {
+    this.routes.set(name, component)
+  }
+}
+
+export function createNavigation(): DeskForgeNavigation {
+  return new DeskForgeNavigator()
+}
+
+export const navigation = createNavigation()
+
+export function createNavigationScreen(
+  component: ScreenComponent,
+  options: { title?: string; layout?: string } = {}
+): ScreenConfig {
+  return Screen(component, options)
+}

package/packages/router/test/router.test.js

@@ -1,7 +1,7 @@
 const test = require('node:test')
 const assert = require('node:assert/strict')
 
-const { FileRouter, ManifestBuilder } = require('../dist/index.js')
+const { FileRouter, ManifestBuilder, createNavigation } = require('../dist/index.js')
 
 function createNode() {
   return {
@@ -28,3 +28,23 @@ test('FileRouter resolves Expo-style routes and keeps route params', () => {
   assert.equal(router.getCurrentPath(), '/note/123')
   assert.deepEqual(router.render()?.props ?? {}, { title: '123' })
 })
+
+test('createNavigation supports stack navigation and params', () => {
+  const navigation = createNavigation()
+
+  navigation.register('home', () => createNode())
+  navigation.register('details', (params = {}) => ({
+    ...createNode(),
+    props: { noteId: params.noteId ?? 'unknown' },
+  }))
+
+  navigation.navigate('home')
+  navigation.navigate('details', { noteId: '42' })
+
+  assert.equal(navigation.currentRoute(), 'details')
+  assert.deepEqual(navigation.currentParams(), { noteId: '42' })
+  assert.equal(navigation.render()?.props?.noteId, '42')
+  navigation.goBack()
+  assert.equal(navigation.currentRoute(), 'home')
+  assert.equal(navigation.canGoBack(), false)
+})

package/packages/theme/src/theme.ts

@@ -133,8 +133,31 @@ function resolveToken(
   return current ?? path
 }
 
+// Theme object — convenient namespace for theme operations
+const Theme = {
+  setTheme,
+  getTokens,
+  getMode,
+  resolveToken,
+  onThemeChange,
+  
+  /**
+   * Apply theme settings with convenient object syntax
+   * @example Theme.apply({ isDark: true })
+   * @example Theme.apply({ mode: 'light' })
+   */
+  apply(options: { isDark?: boolean; mode?: ThemeMode }): void {
+    if (options.isDark !== undefined) {
+      setTheme(options.isDark ? 'dark' : 'light')
+    } else if (options.mode !== undefined) {
+      setTheme(options.mode)
+    }
+  }
+}
+
 export type { DFTheme, ThemeMode }
 export {
+  Theme,
   themeManager,
   setTheme,
   createTheme,

package/packages/ui/src/base/Button.ts

@@ -0,0 +1,67 @@
+/**
+ * Button Component
+ * 
+ * Quick button shorthand component. Combines Text and Pressable for common button pattern.
+ * Accepts title, style, and handlers. Returns DFNode.
+ * 
+ * No JSX. No HTML. No XML. Pure functional TypeScript.
+ */
+
+import { createNode } from '@deskforge/core'
+import type { DFNode, StyleObject } from '@deskforge/core'
+import type { PressHandlers } from './Pressable'
+
+/**
+ * Button - Quick button component
+ * 
+ * Convenience component for creating buttons. Renders a Pressable with a Text child.
+ * Useful for common button patterns without manually nesting components.
+ * 
+ * @param title - Button text label
+ * @param style - StyleObject containing layout and appearance properties
+ * @param handlers - PressHandlers object with onPress and other handlers
+ * @returns DFNode object with type 'Pressable' (button is a semantic shorthand)
+ * 
+ * @example
+ * Button('Click Me', { backgroundColor: '#0077ff', padding: 12 }, {
+ *   onPress: () => handleClick()
+ * })
+ * 
+ * Button('Submit', {
+ *   backgroundColor: '#2ecc71',
+ *   paddingHorizontal: 20,
+ *   paddingVertical: 10,
+ *   borderRadius: 4,
+ * }, {
+ *   onPress: () => submitForm()
+ * })
+ */
+export function Button(
+  title: string,
+  style: StyleObject,
+  handlers: PressHandlers = {}
+): DFNode {
+  return createNode(
+    'Pressable',
+    {
+      style,
+      onPress: handlers.onPress,
+      onLongPress: handlers.onLongPress,
+      onPressIn: handlers.onPressIn,
+      onPressOut: handlers.onPressOut,
+      disabled: handlers.disabled ?? false,
+    } as Record<string, unknown>,
+    [
+      createNode(
+        'Text',
+        {
+          content: title,
+          style: {},
+        } as Record<string, unknown>,
+        []
+      ),
+    ]
+  )
+}
+
+export type { StyleObject, PressHandlers }

package/packages/ui/src/base/Image.ts

@@ -0,0 +1,59 @@
+/**
+ * Image Component
+ * 
+ * Displays images from file paths or URIs with optional styling.
+ * Accepts source and optional style object. Returns DFNode.
+ * 
+ * No JSX. No HTML. No XML. Pure functional TypeScript.
+ */
+
+import { createNode } from '@deskforge/core'
+import type { DFNode, StyleObject } from '@deskforge/core'
+
+/**
+ * Image source — can be string path or URI object
+ */
+export type ImageSource = string | { uri: string }
+
+/**
+ * Image - Image rendering component
+ * 
+ * Renders an image from a file path or URI. Supports local files and remote URLs.
+ * Optional style object for sizing, positioning, and appearance.
+ * 
+ * @param source - Image source as file path string or { uri: string } object
+ * @param style - Optional StyleObject for sizing and appearance
+ * @returns DFNode object with type 'Image'
+ * 
+ * @example
+ * Image('/assets/logo.png', { width: 100, height: 100 })
+ * 
+ * Image({ uri: 'https://example.com/image.png' }, {
+ *   width: 200,
+ *   height: 200,
+ *   borderRadius: 12,
+ * })
+ * 
+ * Image('/local/image.jpg', { 
+ *   width: '100%',
+ *   height: 300,
+ *   resizeMode: 'cover'
+ * })
+ */
+export function Image(
+  source: ImageSource,
+  style?: StyleObject
+): DFNode {
+  const sourceObj = typeof source === 'string' ? { uri: source } : source
+
+  return createNode(
+    'Image',
+    {
+      source: sourceObj,
+      style: style ?? {},
+    } as Record<string, unknown>,
+    []
+  )
+}
+
+export type { StyleObject }

package/packages/ui/src/base/Pressable.ts

@@ -0,0 +1,69 @@
+/**
+ * Pressable Component
+ * 
+ * Tappable container with press event handlers and animations.
+ * Accepts style, handlers object, and children array. Returns DFNode.
+ * 
+ * No JSX. No HTML. No XML. Pure functional TypeScript.
+ */
+
+import { createNode } from '@deskforge/core'
+import type { DFNode, StyleObject } from '@deskforge/core'
+
+/**
+ * Press handler configuration
+ * 
+ * Defines all available press events for interactive components.
+ */
+export interface PressHandlers {
+  /** Fired on tap or click */
+  onPress?: () => void
+  /** Fired after 500ms hold */
+  onLongPress?: () => void
+  /** Fired when press starts */
+  onPressIn?: () => void
+  /** Fired when press ends */
+  onPressOut?: () => void
+  /** Prevents all press events when true */
+  disabled?: boolean
+}
+
+/**
+ * Pressable - Tappable container component
+ * 
+ * Renders a container that responds to press events. Automatically applies
+ * press animations and feedback. Children are rendered inside.
+ * 
+ * @param style - StyleObject containing layout and appearance properties
+ * @param handlers - PressHandlers object with onPress, onLongPress, onPressIn, onPressOut, disabled
+ * @param children - Array of DFNode children to render inside the pressable
+ * @returns DFNode object with type 'Pressable'
+ * 
+ * @example
+ * Pressable({ padding: 16, borderRadius: 8 }, {
+ *   onPress: () => console.log('pressed'),
+ *   onLongPress: () => console.log('long pressed'),
+ * }, [
+ *   Text('Press me', { color: '#0077ff' })
+ * ])
+ */
+export function Pressable(
+  style: StyleObject,
+  handlers: PressHandlers = {},
+  children: DFNode[] = []
+): DFNode {
+  return createNode(
+    'Pressable',
+    {
+      style,
+      onPress: handlers.onPress,
+      onLongPress: handlers.onLongPress,
+      onPressIn: handlers.onPressIn,
+      onPressOut: handlers.onPressOut,
+      disabled: handlers.disabled ?? false,
+    } as Record<string, unknown>,
+    children
+  )
+}
+
+export type { StyleObject }

package/packages/ui/src/base/Text.ts

@@ -0,0 +1,42 @@
+/**
+ * Text Component
+ * 
+ * Renders text content with optional styling.
+ * Accepts content string or number and optional style object. Returns DFNode.
+ * 
+ * No JSX. No HTML. No XML. Pure functional TypeScript.
+ */
+
+import { createNode } from '@deskforge/core'
+import type { DFNode, StyleObject } from '@deskforge/core'
+
+/**
+ * Text - Text rendering component
+ * 
+ * Renders text content with optional style object. Content can be string or number.
+ * All typography properties from React Native are supported via StyleObject.
+ * 
+ * @param content - Text content to render (string or number)
+ * @param style - Optional StyleObject containing typography and appearance properties
+ * @returns DFNode object with type 'Text'
+ * 
+ * @example
+ * Text('Hello World', { fontSize: 16, fontWeight: 'bold', color: '#000' })
+ * Text(42, { fontSize: 14 })
+ * Text('Simple', { color: '#666' })
+ */
+export function Text(
+  content: string | number,
+  style?: StyleObject
+): DFNode {
+  return createNode(
+    'Text',
+    {
+      content: String(content),
+      style: style ?? {},
+    } as Record<string, unknown>,
+    []
+  )
+}
+
+export type { StyleObject }