deskforge 1.0.0

package/packages/ui/src/navigation/TabBar.ts

@@ -0,0 +1,73 @@
+// TabBar.ts
+// Horizontal tab navigation component.
+// Switches between views within the same screen.
+// Active tab indicator slides smoothly between tabs.
+// Rendered by Skia with spring animation on tab change.
+
+import { createNode } from '@deskforge/core/'
+import type { DFNode } from '@deskforge/core/'
+import type { IconName } from '../display/Icon'
+
+// A single tab item
+interface TabItem {
+  // Tab display label
+  label:    string
+
+  // Optional icon shown above or beside label
+  icon?:    IconName
+
+  // Whether this tab is disabled
+  disabled?: boolean
+
+  // Badge count shown on tab
+  badge?:   number
+}
+
+// Props for the TabBar component
+interface TabBarProps {
+  // Array of tab items
+  tabs:       TabItem[]
+
+  // Currently active tab index
+  active:     number
+
+  // Called when a tab is selected
+  onChange:   (index: number) => void
+
+  // Whether icons show above labels
+  // or beside labels
+  iconPosition?: 'top' | 'left'
+
+  // Active tab indicator color
+  color?:     string
+
+  // Background color
+  background?: string
+
+  // Whether tabs fill full width equally
+  fullWidth?:  boolean
+
+  // Tab bar size preset
+  size?:       'sm' | 'md' | 'lg'
+}
+
+// Creates a tab bar navigation node
+// props — tab bar configuration
+function TabBar(props: TabBarProps): DFNode {
+  return createNode('TabBar', {
+    tabs:         props.tabs,
+    active:       props.active,
+    onChange:     props.onChange,
+    iconPosition: props.iconPosition ?? 'left',
+    color:        props.color        ?? 'primary',
+    background:   props.background   ?? 'surface',
+    fullWidth:    props.fullWidth     ?? true,
+    size:         props.size         ?? 'md',
+
+    // Sliding indicator animation
+    indicatorAnimation: 'spring',
+  } as Record<string, unknown>, [])
+}
+
+export type { TabItem, TabBarProps }
+export { TabBar }

package/packages/ui/src/navigation/index.ts

@@ -0,0 +1,6 @@
+// index.ts
+// Public door into the navigation components.
+
+export * from './TabBar'
+export * from './BottomNav'
+export * from './Drawer'

package/packages/ui/src/overlay/Dialog.ts

@@ -0,0 +1,124 @@
+// Dialog.ts
+// Imperative dialog functions.
+// Called programmatically — not rendered in tree.
+// confirm() returns a Promise that resolves to boolean.
+// prompt() returns a Promise that resolves to string or null.
+// alert() shows a message and waits for dismissal.
+
+import { createNode } from '@deskforge/core/'
+import type { DFNode } from '@deskforge/core/'
+
+// Configuration for a dialog
+interface DialogConfig {
+  // Dialog title
+  title?:          string
+
+  // Dialog message body
+  message:         string
+
+  // Confirm button label
+  confirmLabel?:   string
+
+  // Cancel button label
+  cancelLabel?:    string
+
+  // Dialog type affects styling
+  type?:           'info' | 'warning' | 'danger' | 'success'
+}
+
+// Active dialog state
+interface DialogState {
+  visible:  boolean
+  config:   DialogConfig | null
+  resolve:  ((value: unknown) => void) | null
+}
+
+// Global dialog state
+const dialogState: DialogState = {
+  visible: false,
+  config:  null,
+  resolve: null,
+}
+
+// Shows a confirmation dialog
+// Returns true if confirmed false if cancelled
+async function confirm(
+  message: string,
+  options?: Partial<DialogConfig>
+): Promise<boolean> {
+  return new Promise(resolve => {
+    dialogState.visible = true
+    dialogState.config  = {
+      message,
+      title:        options?.title        ?? 'Confirm',
+      confirmLabel: options?.confirmLabel ?? 'Confirm',
+      cancelLabel:  options?.cancelLabel  ?? 'Cancel',
+      type:         options?.type         ?? 'info',
+    }
+    dialogState.resolve = resolve as (value: unknown) => void
+
+    console.log('[DeskForge Dialog] Confirm:', message)
+  })
+}
+
+// Shows a prompt dialog with text input
+// Returns entered string or null if cancelled
+async function prompt(
+  message: string,
+  options?: Partial<DialogConfig> & { defaultValue?: string }
+): Promise<string | null> {
+  return new Promise(resolve => {
+    dialogState.visible = true
+    dialogState.config  = {
+      message,
+      title:        options?.title        ?? 'Enter Value',
+      confirmLabel: options?.confirmLabel ?? 'OK',
+      cancelLabel:  options?.cancelLabel  ?? 'Cancel',
+      type:         options?.type         ?? 'info',
+    }
+    dialogState.resolve = resolve as (value: unknown) => void
+
+    console.log('[DeskForge Dialog] Prompt:', message)
+  })
+}
+
+// Shows an alert dialog with single dismiss button
+async function alert(
+  message: string,
+  options?: Partial<DialogConfig>
+): Promise<void> {
+  return new Promise(resolve => {
+    dialogState.visible = true
+    dialogState.config  = {
+      message,
+      title:        options?.title        ?? 'Alert',
+      confirmLabel: options?.confirmLabel ?? 'OK',
+      type:         options?.type         ?? 'info',
+    }
+    dialogState.resolve = resolve as (value: unknown) => void
+
+    console.log('[DeskForge Dialog] Alert:', message)
+  })
+}
+
+// Creates a dialog node for the renderer
+// Used internally — developer uses confirm/prompt/alert
+function DialogNode(props: DialogConfig & {
+  visible:   boolean
+  onConfirm: () => void
+  onCancel:  () => void
+}): DFNode {
+  return createNode('Dialog', {
+    ...props,
+  } as Record<string, unknown>, [])
+}
+
+// The Dialog object with imperative methods
+const Dialog = {
+  confirm,
+  prompt,
+  alert,
+}
+
+export type { DialogConfig, DialogState }
+export { Dialog, confirm, prompt, alert, DialogNode }

package/packages/ui/src/overlay/Modal.ts

@@ -0,0 +1,76 @@
+// Modal.ts
+// Centered dialog overlay component.
+// Dims background content with backdrop.
+// Appears with scale-in animation from center.
+// Closes on backdrop tap or escape key.
+
+import { createNode } from '@deskforge/core/'
+import type { DFNode } from '@deskforge/core/'
+
+// Props for the Modal component
+interface ModalProps {
+  // Whether modal is visible
+  open:             boolean
+
+  // Called when modal should close
+  onClose:          () => void
+
+  // Title shown in modal header
+  title?:           string
+
+  // Whether to show close button in header
+  showClose?:       boolean
+
+  // Width of modal panel
+  width?:           number | string
+
+  // Maximum width constraint
+  maxWidth?:        number
+
+  // Background color of modal panel
+  background?:      string
+
+  // Border radius of modal panel
+  radius?:          number | string
+
+  // Backdrop opacity 0 to 1
+  backdropOpacity?: number
+
+  // Whether tapping backdrop closes modal
+  closeOnBackdrop?: boolean
+
+  // Whether escape key closes modal
+  closeOnEscape?:   boolean
+
+  // Padding inside modal
+  padding?:         number | string
+}
+
+// Creates a modal dialog overlay node
+// children — content displayed inside modal
+// props — modal configuration
+function Modal(
+  children: DFNode[],
+  props:    ModalProps
+): DFNode {
+  return createNode('Modal', {
+    open:            props.open,
+    onClose:         props.onClose,
+    title:           props.title,
+    showClose:       props.showClose       ?? true,
+    width:           props.width           ?? 480,
+    maxWidth:        props.maxWidth        ?? 560,
+    background:      props.background      ?? 'surface',
+    radius:          props.radius          ?? 'lg',
+    backdropOpacity: props.backdropOpacity ?? 0.5,
+    closeOnBackdrop: props.closeOnBackdrop ?? true,
+    closeOnEscape:   props.closeOnEscape   ?? true,
+    padding:         props.padding         ?? 24,
+
+    // Scale in animation from center
+    animationType: 'scaleIn',
+  } as Record<string, unknown>, children)
+}
+
+export type { ModalProps }
+export { Modal }

package/packages/ui/src/overlay/Sheet.ts

@@ -0,0 +1,79 @@
+// Sheet.ts
+// Bottom or top sheet overlay component.
+// Slides up from the bottom on mobile.
+// Used for action menus and option panels.
+// Can be dragged to dismiss with swipe gesture.
+
+import { createNode } from '@deskforge/core/'
+import type { DFNode } from '@deskforge/core/'
+
+// Sheet slide direction
+type SheetPosition = 'bottom' | 'top'
+
+// Props for the Sheet component
+interface SheetProps {
+  // Whether sheet is visible
+  open:             boolean
+
+  // Called when sheet should close
+  onClose:          () => void
+
+  // Which edge sheet slides from
+  position?:        SheetPosition
+
+  // Height of the sheet
+  height?:          number | string
+
+  // Maximum height constraint
+  maxHeight?:       number | string
+
+  // Background color
+  background?:      string
+
+  // Border radius on open edge
+  radius?:          number
+
+  // Backdrop opacity 0 to 1
+  backdropOpacity?: number
+
+  // Whether tapping backdrop closes sheet
+  closeOnBackdrop?: boolean
+
+  // Whether drag gesture dismisses sheet
+  dragToClose?:     boolean
+
+  // Whether to show drag handle indicator
+  showHandle?:      boolean
+
+  // Padding inside sheet
+  padding?:         number | string
+}
+
+// Creates a bottom or top sheet overlay node
+// children — content inside the sheet
+// props — sheet configuration
+function Sheet(
+  children: DFNode[],
+  props:    SheetProps
+): DFNode {
+  return createNode('Sheet', {
+    open:            props.open,
+    onClose:         props.onClose,
+    position:        props.position        ?? 'bottom',
+    height:          props.height          ?? 'auto',
+    maxHeight:       props.maxHeight       ?? '80%',
+    background:      props.background      ?? 'surface',
+    radius:          props.radius          ?? 16,
+    backdropOpacity: props.backdropOpacity ?? 0.4,
+    closeOnBackdrop: props.closeOnBackdrop ?? true,
+    dragToClose:     props.dragToClose     ?? true,
+    showHandle:      props.showHandle      ?? true,
+    padding:         props.padding         ?? 24,
+
+    // Slide animation
+    animationType: 'slideUp',
+  } as Record<string, unknown>, children)
+}
+
+export type { SheetPosition, SheetProps }
+export { Sheet }

package/packages/ui/src/overlay/index.ts

@@ -0,0 +1,6 @@
+// index.ts
+// Public door into the overlay components.
+
+export * from './Modal'
+export * from './Sheet'
+export * from './Dialog'

package/packages/ui/src/typography/Code.ts

@@ -0,0 +1,88 @@
+// Code.ts
+// Inline and block code display component.
+// Uses monospace font from active theme.
+// Supports syntax highlighting for common languages.
+// Rendered by Skia with precise character spacing.
+
+import { createNode } from '@deskforge/core/'
+import type { DFNode } from '@deskforge/core/'
+
+// Supported syntax highlighting languages
+type CodeLanguage =
+  | 'typescript'
+  | 'javascript'
+  | 'python'
+  | 'go'
+  | 'rust'
+  | 'cpp'
+  | 'c'
+  | 'php'
+  | 'kotlin'
+  | 'swift'
+  | 'json'
+  | 'bash'
+  | 'sql'
+  | 'html'
+  | 'css'
+  | 'plain'
+
+// Props for the Code component
+interface CodeProps {
+  // Programming language for syntax highlighting
+  language?:   CodeLanguage
+
+  // Whether to show line numbers
+  lineNumbers?: boolean
+
+  // Whether code is inline or block
+  // Inline renders inside text flow
+  // Block renders as a separate element
+  inline?:     boolean
+
+  // Background color override
+  background?: string
+
+  // Text color override
+  color?:      string
+
+  // Font size
+  size?:       number | string
+
+  // Whether code is copyable on click
+  copyable?:   boolean
+
+  // Padding around code block
+  padding?:    number | string
+
+  // Border radius
+  radius?:     number | string
+
+  // Max height with scroll
+  maxHeight?:  number
+}
+
+// Creates a code display node
+// value — the code string to display
+// props — code display configuration
+function Code(
+  value:  string,
+  props:  CodeProps = {}
+): DFNode {
+  return createNode('Code', {
+    value:       value,
+    language:    props.language    ?? 'plain',
+    lineNumbers: props.lineNumbers ?? false,
+    inline:      props.inline      ?? false,
+    background:  props.background  ?? 'codeBg',
+    color:       props.color       ?? 'codeText',
+    size:        props.size        ?? 'sm',
+    copyable:    props.copyable    ?? true,
+    padding:     props.padding     ?? (props.inline ? 4 : 16),
+    radius:      props.radius      ?? 6,
+    maxHeight:   props.maxHeight,
+    fontFamily:  'mono',
+  } as Record<string, unknown>, [])
+}
+
+export type { CodeLanguage, CodeProps }
+export { Code }

package/packages/ui/src/typography/Heading.ts

@@ -0,0 +1,70 @@
+// Heading.ts
+// Semantic heading component.
+// Maps to h1 through h6 hierarchy.
+// Font size scales automatically with level.
+// Uses heading font from active theme.
+
+import { createNode } from '@deskforge/core/'
+import type { DFNode } from '@deskforge/core/'
+
+// Heading levels matching HTML h1-h6
+type HeadingLevel = 1 | 2 | 3 | 4 | 5 | 6
+
+// Font sizes for each heading level
+// Resolved from theme typography tokens
+const HEADING_SIZES: Record<HeadingLevel, string> = {
+  1: '4xl',  // 48px
+  2: '3xl',  // 32px
+  3: '2xl',  // 24px
+  4: 'xl',   // 20px
+  5: 'lg',   // 16px
+  6: 'md',   // 14px
+}
+
+// Props for the Heading component
+interface HeadingProps {
+  // Heading level 1 is largest 6 is smallest
+  level?:  HeadingLevel
+
+  // Text color or theme token
+  color?:  string
+
+  // Text alignment
+  align?:  'left' | 'center' | 'right'
+
+  // Whether text is selectable
+  selectable?: boolean
+
+  // Opacity 0 to 1
+  opacity?: number
+
+  // Flex weight
+  flex?: number
+}
+
+// Creates a semantic heading node
+// value — heading text content
+// props — heading configuration
+function Heading(
+  value: string,
+  props: HeadingProps = {}
+): DFNode {
+  const level = props.level ?? 1
+
+  return createNode('Heading', {
+    value:      value,
+    level:      level,
+    size:       HEADING_SIZES[level],
+    weight:     'bold',
+    color:      props.color     ?? 'text',
+    align:      props.align     ?? 'left',
+    selectable: props.selectable ?? false,
+    opacity:    props.opacity    ?? 1,
+    flex:       props.flex,
+    // Heading font from theme
+    fontFamily: 'heading',
+  } as Record<string, unknown>, [])
+}
+
+export type { HeadingLevel, HeadingProps }
+export { Heading }

package/packages/ui/src/typography/Markdown.ts

@@ -0,0 +1,56 @@
+// Markdown.ts
+// Renders markdown content as styled DFNodes.
+// Parses headings, bold, italic, lists, code blocks.
+// No external markdown library needed.
+// Built-in parser converts markdown to DFNode tree.
+
+import { createNode } from '@deskforge/core/'
+import type { DFNode } from '@deskforge/core/'
+
+// Props for the Markdown component
+interface MarkdownProps {
+  // Text color for body content
+  color?:      string
+
+  // Base font size
+  size?:       number | string
+
+  // Whether links are clickable
+  links?:      boolean
+
+  // Whether code blocks show syntax highlighting
+  highlight?:  boolean
+
+  // Max width of rendered content
+  maxWidth?:   number | string
+
+  // Padding around content
+  padding?:    number | string
+
+  // Called when a link is clicked
+  onLink?:     (url: string) => void
+}
+
+// Creates a markdown rendering node
+// The renderer parses the markdown string
+// and converts it to a DFNode tree at render time
+// src — markdown string to render
+// props — markdown display configuration
+function Markdown(
+  src:   string,
+  props: MarkdownProps = {}
+): DFNode {
+  return createNode('Markdown', {
+    src:       src,
+    color:     props.color     ?? 'text',
+    size:      props.size      ?? 'md',
+    links:     props.links     ?? true,
+    highlight: props.highlight ?? true,
+    maxWidth:  props.maxWidth,
+    padding:   props.padding   ?? 0,
+    onLink:    props.onLink,
+  } as Record<string, unknown>, [])
+}
+
+export type { MarkdownProps }
+export { Markdown }

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

@@ -0,0 +1,104 @@
+// Text.ts
+// The primary text rendering component.
+// Handles all text display needs.
+// Style tokens resolve from the active theme.
+// Rendered by Skia with full font support
+// including subpixel hinting and emoji.
+
+import { createNode } from '@deskforge/core/'
+import type { DFNode } from '@deskforge/core/'
+
+// Predefined text style presets
+// Each maps to specific font size weight and color
+type TextStyle =
+  | 'heading'     // large bold heading
+  | 'subheading'  // medium bold heading
+  | 'body'        // normal body text
+  | 'caption'     // small secondary text
+  | 'label'       // form label text
+  | 'mono'        // monospace code text
+  | 'overline'    // small uppercase label
+
+// Text overflow behaviour
+type TextOverflow = 'clip' | 'ellipsis' | 'fade'
+
+// Text alignment
+type TextAlign = 'left' | 'center' | 'right' | 'justify'
+
+// Props for the Text component
+interface TextProps {
+  // Preset style — overrides individual props
+  style?:         TextStyle
+
+  // Font size in pixels or token name
+  size?:          number | string
+
+  // Font weight or token name
+  weight?:        number | string
+
+  // Text color or theme token
+  color?:         string
+
+  // Text alignment
+  align?:         TextAlign
+
+  // Italic style
+  italic?:        boolean
+
+  // Underline decoration
+  underline?:     boolean
+
+  // Strikethrough decoration
+  strikethrough?: boolean
+
+  // Line height multiplier
+  lineHeight?:    number
+
+  // Letter spacing in pixels
+  letterSpacing?: number
+
+  // Maximum lines before truncating
+  maxLines?:      number
+
+  // What to do when text overflows
+  overflow?:      TextOverflow
+
+  // Whether text is selectable by user
+  selectable?:    boolean
+
+  // Flex weight
+  flex?:          number
+
+  // Opacity 0 to 1
+  opacity?:       number
+}
+
+// Creates a text rendering node
+// value — the string to display
+// props — text styling configuration
+function Text(
+  value: string | number,
+  props: TextProps = {}
+): DFNode {
+  return createNode('Text', {
+    value:          String(value),
+    style:          props.style,
+    size:           props.size,
+    weight:         props.weight,
+    color:          props.color,
+    align:          props.align         ?? 'left',
+    italic:         props.italic        ?? false,
+    underline:      props.underline     ?? false,
+    strikethrough:  props.strikethrough ?? false,
+    lineHeight:     props.lineHeight,
+    letterSpacing:  props.letterSpacing,
+    maxLines:       props.maxLines,
+    overflow:       props.overflow      ?? 'ellipsis',
+    selectable:     props.selectable    ?? false,
+    flex:           props.flex,
+    opacity:        props.opacity       ?? 1,
+  } as Record<string, unknown>, [])
+}
+
+export type { TextStyle, TextOverflow, TextAlign, TextProps }
+export { Text }

package/packages/ui/src/typography/index.ts

@@ -0,0 +1,7 @@
+// index.ts
+// Public door into the typography components.
+
+export * from './Text'
+export * from './Heading'
+export * from './Code'
+export * from './Markdown'