core/registry.js

core/registry.js
Classes
class PlaunaRegistry
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: PlaunaRegistry Registry for views, surfaces, and templates. Registry pattern: Centralized registration system for UI components Follows existing engine registry patterns Supports views, surfaces, templates, and factories Warns on duplicate registrations (overwrites) Provides getters for retrieving registered items Registry types: views: UI view configurations with render mode, size, closability surfaces: Surface definitions for GPU rendering (viewport, texture) templates: Reusable template configurations factories: Factory functions for component instantiation Classes PlaunaRegistry Registry for views, surfaces, and templates. Registry pattern: Centralized registration system for UI components Follows existing engine registry patterns Supports views, surfaces, templates, and factories Warns on duplicate registrations (overwrites) Provides getters for retrieving registered items Registry types: views: UI view configurations with render mode, size, closability surfaces: Surface definitions for GPU rendering (viewport, texture) templates: Reusable template configurations factories: Factory functions for component instantiation Method Signature Summary <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and


core/registry.js

→ unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


ecs/components.js

ecs/components.js
Constants
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: Plauna ECS Components Follow existing engine component registration patterns. Constants <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


editor/HotReload.js

editor/HotReload.js
Classes
class HotReload
Functions
plaunaHotReloadTextHash(text)
Constants
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: HotReload Live development tool for Plauna Provides hot module replacement and live style updates with robust validation Classes Method Signature Summary Functions Constants <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


editor/StyleInspector.js

editor/StyleInspector.js
Classes
class StyleInspector
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: StyleInspector Live style debugging tool for Plauna Provides real time style inspection and editing capabilities Classes Method Signature Summary <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


editor/TreeInspector.js

editor/TreeInspector.js
Classes
class TreeInspector
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: TreeInspector Visual tree inspector for Plauna Provides debugging and inspection of the UI visual tree Classes Method Signature Summary <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


index.js

index.js
Re-exports
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: Plauna Advanced UI System for Particle Engine Browser first UI runtime with hybrid DOM/GPU rendering ============================================================================ MODULE STRUCTURE ============================================================================ This is the main entry point for the Plauna UI system. It re exports all public APIs in a structured, organized manner. Export Categories: Core System: createPlaunaApp: Main application entry point PlaunaModuleTester: Module testing utilities UINode, DIRTY, NODE STATE: Core retained mode UI tree VisualTree: Visual tree management UI Components: PlaunaSmartContextMenu: Type aware context menu for debugging PlaunaTextService: Internationalization service (Pretext) PlaunaSurfaceManager: Surface/layer management PlaunaGPUBridge: WebGPU integration bridge Widget System: Layout widgets: Grid, Divider, Spacer Primitive widgets: Button, Panel, Text, Modal, Tooltip, Badge, Avatar, Progress, Skeleton Form widgets: Input, Checkbox, Radio, Switch, Select, Textarea, Slider, Rating Navigation widgets: Tabs, Dropdown, Breadcrumb, Pagination Data view widgets: ListView, Card Utilities: Style system: Design tokens, theme management Console system: PlaunaConsole for debugging Notification system: Toast, Notify Showcase system: WidgetShowcase for widget gallery Particle controller: ParticleController for particle integration Lab/Development: mountPlaunaWorkbenchLab: Workbench development environment mountShowcaseApp: Widget showcase application Re exports , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , <! HUMAN NOTES Notes & Examples App & widget lifecycle


index.js

, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


input/EventRouter.js

input/EventRouter.js
Classes
class EventRouter
Constants
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: EventRouter Event capture/target/bubble routing system for Plauna Handles DOM style event propagation with capture and bubble phases Classes EventRouter Event capture/target/bubble routing system for Plauna Handles DOM style event propagation with capture and bubble phases Method Signature Summary Constants <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


lab/showcase-app.js

lab/showcase-app.js
Classes
class ShowcaseApp
Functions
mountShowcaseApp(options = {})
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: ShowcaseApp Thin shell that boots the Plauna engine and mounts WidgetGallery Classes Method Signature Summary Functions <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


lab/workbench-lab.js

lab/workbench-lab.js
Functions
mountPlaunaWorkbenchLab(options)
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: No file level description found in source. Add one as a leading JSDoc comment, or document it below. Functions <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


layout/Constraints.js

layout/Constraints.js
Classes
class Constraints
class BoxConstraints
class LayoutConstraints
class ConstraintResolver
Constants
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: Constraints Size constraint system for Plauna layout Handles min/max/preferred sizes and constraint resolution Classes Method Signature Summary Method Signature Summary Method Signature Summary Method Signature Summary Constants <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


layout/FlexLayout.js

layout/FlexLayout.js
Classes
class FlexLayout
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: FlexLayout Flexbox inspired layout engine for Plauna Provides CSS Flexbox like layout functionality with constrained feature set Classes Method Signature Summary <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


layout/LayoutSizing.js

resolvePlaunaLayoutSize(value, containerSize, options = {})

resolvePlaunaLayoutConstraints(style = {}, containerSize = 0)

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: No file level description found in source. Add one as a leading JSDoc comment, or document it below. Functions <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


motion/MPAFallback.js

motion/MPAFallback.js
Exports
Notes & Examples
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: MPAFallback Cross document view transition fallback for mobile/legacy browsers. Browsers that don't support the CSS @view transition at rule for MPA navigation get a minimal fade in of the new page instead of a hard cut. This is a graceful degradation, not a full polyfill; the real cross document transition only works in browsers that support the View Transitions API Level 2. Usage: include synchronously in the <head of any landing page: <script src="/plauna/motion/MPAFallback.js" </script Exports No ES module exports detected in this file. <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


motion/PageTransition.js

startPageTransition(update, options = {})

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: PageTransition Modern page/view blending for Plauna. Wraps the native View Transitions API (Level 1/2) where available and falls back to CSS class/transition based cross fades for older browsers. Designed for SPA "page" swaps, tab changes, and content fades inside a Plauna app. Usage: const pt = new PageTransition({ type: 'slide left', duration: 350 }); await pt.start(() = { // update the DOM here }); Classes Method Signature Summary Start a view transition. Calls inside the transition callback, passes an AbortSignal for cooperative async cancellation, then waits for every browser owned lifecycle promise to settle. Cancel only presentation work owned by this transition instance. Native View Transitions API path. Fallback path using the Web Animations API. This gives us cross browser keyframe interpolation without the complexity of CSS class transition states. Build keyframes for a transition type for the Web Animations fallback. Inject a shared stylesheet for the View Transitions API pseudo element tree. Generates @keyframes and active view transition type rules for every effect. Functions Convenience function for one off transitions. <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


motion/PageTransitionContracts.js

class UnsupportedPageTransitionVersionError extends Error

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: No file level description found in source. Add one as a leading JSDoc comment, or document it below. Classes Method Signature Summary Functions Constants <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


motion/PageTransitionManager.js

motion/PageTransitionManager.js
Exports
Notes & Examples
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: PageTransitionManager Cross document (MPA) view transition orchestration. This module runs on every page that opts in. It injects a shared stylesheet containing the PageTransition presets and, on supported browsers, sets the active view transition type for cross document navigations via the pageswap and pagereveal events. Pages can control their transition with a data attribute on the <html element: <html data transition preset="etch" <html data transition preset="random" <html data transition preset="cycle" The default is the project's default preset (etch). If the attribute is absent or the value is unknown, the default is used. Exports No ES module exports detected in this file. <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


motion/PageTransitionPresets.js

resolvePreset(name, state = { index: 0 })

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: PageTransitionPresets Shared transition presets and stylesheet generation. This module is the single source of truth for the keyframes and CSS used by both the same document PageTransition engine and the cross document PageTransitionManager. Keeping the presets in one place means SPA demos and MPA page navigation can share the same effects and the same default. Functions Constants <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


motion/TransitionEngine.js

motion/TransitionEngine.js
Classes
class TransitionEngine
Constants
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: TransitionEngine Property animation system for Plauna Provides smooth transitions and animations for UI properties Classes Method Signature Summary Constants <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


notifications/NotificationSystem.js

notifications/NotificationSystem.js
Classes
class NotificationSystem
Constants
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: ============================================================================ NotificationSystem Centralized Notification Management ============================================================================ NotificationSystem provides a unified API for user notifications, separating them from debug logging and integrating with ToastManager for UI feedback. NOTIFICATION CHANNELS: 1. Toasts: UI notifications via ToastManager (top right corner) 2. Console: Browser console.log/error/warn for debugging 3. Sounds: Optional audio feedback using Web Audio API NOTIFICATION LEVELS (priority order): debug (0): Development debugging information info (1): General informational messages success (2): Success confirmations warning (3): Warning messages error (4): Error messages critical (5): Critical errors requiring immediate attention NOTIFICATION TYPES: system: System level notifications (startup, shutdown, etc.) action: User action feedback (clicks, submissions, etc.) validation: Form validation errors performance: Performance metrics and warnings security: Security related alerts network: Network request status GROUPING: createGroup(name, options): Create a notification group Groups collect related notifications and report summary Useful for batch operations or multi step processes CONVENIENCE METHODS: debug(message, type, data): Debug level notification info(message, type, data): Info level notification success(message, type, data): Success level notification warning(message, type, data): Warning level notification error(message, type, data): Error level notification critical(message, type, data): Critical level notification SOUND EFFECTS: Uses Web Audio API to generate simple beep


notifications/NotificationSystem.js

type, data): Error level notification critical(message, type, data): Critical level notification SOUND EFFECTS: Uses Web Audio API to generate simple beep sounds Different frequencies for different levels Can be disabled via enableSounds option MIN LEVEL FILTERING: minLevel option filters notifications below specified level Useful for suppressing debug messages in production INTEGRATION: Uses global Toast from ToastManager for UI toasts Toast position defaults to top right Console output includes prefix (default: '[Plauna]') USAGE: const notify = new NotificationSystem({ minLevel: 'info' }); notify.success('File saved successfully', 'action'); notify.error('Failed to load data', 'network', { url: '/api/data' }); Classes Method Signature Summary Constants <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


particle/ParticleController.js

particle/ParticleController.js
Classes
class ParticleController
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: No file level description found in source. Add one as a leading JSDoc comment, or document it below. Classes ParticleController Manages particle effects and animations Handles particle system initialization and control for showcase Method Signature Summary Initialize particle system Resize canvas to fit window Setup event listeners Create particles Create a single particle Update particles Draw particles Start particle animation Stop particle animation Set particle configuration Set particle count Add particles at position Clear all particles Get particle count Destroy particle controller <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


particle/bridge.js

particle/bridge.js
Classes
class PlaunaGPUBridge
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: PlaunaParticleBridge Connects Plauna to Particle Engine's VGPU Follows existing VGPU patterns from ViewportPanel Classes PlaunaParticleBridge Connects Plauna to Particle Engine's VGPU Follows existing VGPU patterns from ViewportPanel Method Signature Summary <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


style/AdaptiveThemeFactory.js

style/AdaptiveThemeFactory.js
Classes
class AdaptiveThemeFactory
Constants
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: No file level description found in source. Add one as a leading JSDoc comment, or document it below. Classes Method Signature Summary Constants <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


style/CSSGenerator.js

style/CSSGenerator.js
Classes
class CSSGenerator
Constants
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: CSSGenerator Runtime CSS generation from DesignTokens and LayerManager. CSS generation pattern: Generates CSS custom properties from design tokens Supports theme based variable sets (bright/night) Caches generated CSS for performance Injects CSS into document via style tags Supports z index layer variables Architecture: tokens: DesignTokens instance for token resolution layerValues: LayerManager z index values generatedCSS: Map of cached CSS strings styleElement: DOM style element for CSS injection themes: Pre defined theme variable sets Classes Method Signature Summary Generate CSS custom properties from design tokens Generate theme specific CSS selectors Generate all CSS (tokens + themes) Inject generated CSS into document Get CSS as text without injecting Clear cache Get all available tokens Get all layer values Export tokens as JSON Export CSS as downloadable file Constants <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


style/ComputedStyle.js

style/ComputedStyle.js
Classes
class ComputedStyle
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: ComputedStyle Style resolution and caching system for Plauna. Style resolution pattern: Handles style inheritance from parent nodes Resolves design token references Computes final style values for rendering Caches computed styles for performance Tracks performance statistics Architecture: cache: Map of computed style results tokenCache: Map of resolved token values styleCache: Map of style property resolutions performanceStats: Metrics for cache hits/misses and timing Style categories: Position and layout: position, display, flex properties Sizing: width, height, min/max dimensions, flex basis/grow/shrink Spacing: margin, padding Visual: colors, borders, shadows, opacity Typography: font family, size, weight, line height, alignment Interaction: pointer events, cursor Accessibility: visibility, z index Transform and animation Classes Method Signature Summary Compute style for a node. Style computation pattern: Generates cache key from node and parentStyle Returns cached result if available Resolves all style properties with inheritance Applies design token resolution Caches result for subsequent calls Tracks performance statistics <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone.


style/ComputedStyle.js

lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


style/DesignTokenContracts.js

class UnsupportedDesignTokenVersionError extends Error

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: No file level description found in source. Add one as a leading JSDoc comment, or document it below. Classes Method Signature Summary Functions Accept legacy raw token maps and return a canonical, safely cloned v1 envelope. Emit metadata additively so legacy readers still see token categories at the root. Constants <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


style/DesignTokens.js

style/DesignTokens.js
Classes
class DesignTokens
Constants
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: No file level description found in source. Add one as a leading JSDoc comment, or document it below. Classes DesignTokens Design system token management. Token management pattern: Centralized token system for Plauna styling Manages spacing, typography, color, motion, borderRadius, shadows, zIndex Observer pattern for token change notifications Caching for performance optimization Deep merge strategy for token inheritance Architecture: tokens: Merged token object (defaults + custom) observers: Set of callback functions cache: Map of cached token lookups Method Signature Summary Get a token value by path. Token access pattern: Supports dot notation (e.g., 'spacing.md') Returns cached value if available Falls back to defaultValue if token not found Caches result for subsequent lookups Set a token value by path. Token mutation pattern: Sets token value using dot notation Clears cache to invalidate stale values Notifies observers of token change Provides old value for comparison Constants <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


style/LayerManager.js

style/LayerManager.js
Functions
getStackingContextCSS(layerName)
getLayerZIndex(layerName)
getLayerCSSVariables()
Constants
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: LayerManager Semantic z index management system. Z index management pattern: Centralized z index constants organized by stacking context Arithmetic relationships for self documenting code Prevents z index wars by providing semantic layer names Uses isolation: isolate for stacking context isolation Stacking contexts (lowest to highest): Layout: backdrop, surface, widget gallery Modal: backdrop, panel Dropdown: backdrop, dropdown Tooltip Notification: toast, alert Arithmetic pattern: base = 0 above = 1 below = 1 Each layer is defined relative to the previous layer Functions Create CSS for stacking context isolation. Stacking context pattern: Uses isolation: isolate to create new stacking context Prevents side effects from parent stacking contexts Returns CSS object with isolation and z index Parameters: (string) — Name of the layer (e.g., 'z modal panel') Returns: CSS object with isolation and z index Get z index value for a layer Parameters: (string) — Name of the layer Returns: Z index value Get all layer values as CSS custom properties Returns: CSS custom property declarations Constants <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also:


style/LayerManager.js

theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


style/StyleSizing.js

resolvePlaunaStyleSize(value, options = {})

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: No file level description found in source. Add one as a leading JSDoc comment, or document it below. Functions <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


style/ThemeController.js

style/ThemeController.js
Classes
class ThemeController
Constants
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: ThemeController Runtime theme management and switching. Theme switching pattern: Manages bright/night theme switching with live CSS updates Persists theme preference to localStorage Listens to system theme preference (prefers color scheme) Observer pattern for theme change notifications Applies theme via data theme attribute and CSS variables Features: Auto switch based on system preference Manual theme switching with setTheme() Theme persistence across sessions Observer notifications for reactive updates Classes Method Signature Summary Load saved theme from localStorage. Persistence pattern: Reads theme preference from localStorage Validates theme value (bright or night) Falls back to 'bright' if invalid or unavailable Gracefully handles localStorage errors Save theme preference to localStorage Setup system theme listener (prefers color scheme) Set the current theme. Theme switching pattern: Validates theme value (bright or night) Skips if already set to same theme Updates currentTheme state Applies theme to DOM (data theme attribute + CSS variables) Persists to localStorage Notifies observers of change Apply theme to DOM and CSS Get current theme Toggle between bright and night themes Subscribe to theme changes Notify all observers of theme change Get all available themes Check if theme is dark Check if theme is light Get theme specific CSS variable value Initialize theme system Constants <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna


style/ThemeController.js

(storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


style/ThemeManager.js

style/ThemeManager.js
Classes
class ThemeManager
Constants
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: ThemeManager Theme management system for Plauna. Theme management pattern: Provides theme registration and switching Supports custom token overrides Observer pattern for theme change notifications Deep merge strategy for token inheritance Pre registered themes (light, dark) Architecture: themes: Map of registered theme definitions observers: Set of callback functions for change notifications customTokens: Map of custom token overrides currentTheme: Currently active theme ID Classes Method Signature Summary Constants <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


style/index.js

style/index.js
Exports
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: Style Module Exports Central export point for all Plauna styling utilities and managers. Exported modules: LayerManager: Semantic z index management system ThemeManager: Theme registration and management DesignTokens: Design system token management WidgetStyleManager: Theme aware widget styling CSSGenerator: Runtime CSS generation ThemeController: Runtime theme switching Usage: import { tokens, ThemeManager, layerValues } from './style/index.js'; Exports No ES module exports detected in this file. <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


surface/surface-manager.js

surface/surface-manager.js
Classes
class PlaunaSurfaceManager
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: PlaunaSurfaceManager Manages GPU surfaces and rendering Integrates with existing VGPU patterns Classes Method Signature Summary <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


text/pretext-service.js

text/pretext-service.js
Classes
class PlaunaTextService
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: PlaunaTextService DOM free text measurement and layout Implements Pretext style text measurement for Plauna Classes PlaunaTextService DOM free text measurement and layout Implements Pretext style text measurement for Plauna Method Signature Summary <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


themes/ThemeContracts.js

validateThemeId(value, label = 'Theme id')

prepareThemeVariables(input, { allowNull = true } = {})

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: No file level description found in source. Add one as a leading JSDoc comment, or document it below. Functions Constants <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


themes/ThemeLoader.js

themes/ThemeLoader.js
Classes
class ThemeLoader
Constants
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: ============================================================================ ThemeLoader File Based Theme Discovery and Loading ============================================================================ ThemeLoader is a file based theme system inspired by WordPress but modernized. It loads themes from plauna/themes/{id}/theme.json and applies CSS variables. THEME STRUCTURE: plauna/themes/ ├── base/ Base theme with all token defaults (required) │ └── theme.json Defines every possible CSS variable ├── dark/ Dark theme (extends base) │ └── theme.json Only overrides what's different from base ├── light/ Light theme (extends base) │ └── theme.json ├── high contrast/ High contrast theme (extends dark) │ └── theme.json ├── custom/ User starter template (extends dark) │ └── theme.json └── index.json Registry of discoverable themes THEME MANIFEST (theme.json): { "name": "Theme Name", "description": "Theme description", "extends": "parent theme id", // Optional: parent theme to inherit from "variables": { "color primary": " 3b82f6", // CSS variable name → value "spacing md": "16px", // null or omitted values inherit from parent } } THEME RESOLUTION CASCADE (highest priority wins): 1. base theme defaults (all variables defined) 2. Parent theme variables (if extends is set) 3. Current theme variables (overrides parent) 4. Runtime overrides (applyOverrides() per session changes) CSS VARIABLE APPLICATION: Variables are written to <style data plauna theme="1" tag on :root Format: variable name: value; Overrides use separate <style data plauna overrides="1" tag REGISTRY (themes/index.json): { "themes": ["dark", "light", "high contrast", "custom"] } Add your theme folder name here to make it


themes/ThemeLoader.js

plauna overrides="1" tag REGISTRY (themes/index.json): { "themes": ["dark", "light", "high contrast", "custom"] } Add your theme folder name here to make it discoverable without code changes. METHODS: discover(): Load themes/index.json and return available theme IDs load(id): Load raw theme.json without resolving parent chain resolve(id): Resolve full theme with parent chain merged apply(id): Apply theme CSS variables to DOM applyOverrides(vars): Apply per session variable overrides clearOverrides(): Remove runtime overrides listThemes(): Return theme metadata for all discoverable themes Classes ThemeLoader File based theme discovery and loading. Theme loading pattern: Loads themes from plauna/themes/{id}/theme.json Supports theme extension via "extends" property Resolves parent chain with cascading variable inheritance Applies CSS variables to :root via style tags Caches resolved themes for performance Architecture: cache: Resolved theme manifests (parent chain merged) rawCache: Raw theme.json files registry: Discoverable theme IDs from index.json styleEl: CSS variable style tag overrideEl: Runtime override style tag Method Signature Summary Discover available themes from themes/index.json. Discovery pattern: Loads themes/index.json registry Returns list of discoverable theme IDs Filters out base (internal theme) Falls back to ['dark', 'light'] on error Caches registry for subsequent calls Load raw theme.json without resolving parent chain. Raw loading pattern: Fetches theme.json from plauna/themes/{id}/theme.json Caches raw manifest in rawCache Returns unmodified JSON (no parent resolution) Throws error if theme not found Apply resolved theme variables to :root as CSS custom properties. CSS variable application pattern: Creates <style data plauna theme="1" tag if not


themes/ThemeLoader.js

not found Apply resolved theme variables to :root as CSS custom properties. CSS variable application pattern: Creates <style data plauna theme="1" tag if not exists Writes variables as :root { name: value; } Sets data theme attribute on document.documentElement Replaces existing content on subsequent calls Load, resolve, and apply a theme by ID. Theme application pattern: Resolves theme with parent chain Applies CSS variables to :root Sets data theme attribute Returns resolved theme for reference Apply per session CSS variable overrides on top of the active theme. Override pattern: Creates <style data plauna overrides="1" tag if not exists Overrides win over all theme variables (highest priority) Useful for


themes/ThemePreference.js

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: No file level description found in source. Add one as a leading JSDoc comment, or document it below. Functions Expand legacy state into both namespaced keys without contracting the old key. Older tabs may still be reading it during a rolling browser rollout. Constants <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


ui/SmartContextMenu.js

ui/SmartContextMenu.js
Classes
class PlaunaSmartContextMenu
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: ============================================================================ PlaunaSmartContextMenu Context Aware Right Click Menu ============================================================================ PlaunaSmartContextMenu provides a context aware right click menu that scans the visual tree near the cursor and builds a smart action panel based on nearby UI nodes. SCANNING ALGORITHM: 1. On right click, collectNearbyNodes() scans the visual tree around cursor 2. Uses adaptive radius based on node density (shrinks when many nodes nearby) 3. Scores each node based on type, role, text content, and distance 4. Returns top N nodes within scan radius NODE SCORING: Inside node: +1000 + inset depth (prioritizes deeper inside) Has role: +22 Has text content: +10 Has className: +8 Button type: +25 Input type: +18 Menu type: +15 Small area: +6 (prefers compact elements) ADAPTIVE RADIUS: Base radius: 140px (configurable) Density = 8: 48% of base (72px min) Density = 6: 55% of base (80px min) Density = 4: 65% of base (90px min) Density = 2: 80% of base (112px min) Density < 2: 100% of base (140px) DOM FALLBACK: If visualTree is unavailable (e.g., in showcase shell), falls back to DOM scanning Uses element. plaunaNode back reference set by WidgetRenderer Scans all elements in root and collects associated UINodes ACTION GENERATION: For each nearby node, generates contextual actions Actions include: inspect, copy text, copy ID, copy styles, toggle visibility Actions are sorted by relevance and displayed in a radial menu VISUAL FEEDBACK: Draws a scan ring around cursor during scanning Highlights nearby nodes with visual indicators Shows tie nodes (nodes with similar scores) with special


ui/SmartContextMenu.js

Draws a scan ring around cursor during scanning Highlights nearby nodes with visual indicators Shows tie nodes (nodes with similar scores) with special styling INTEGRATION: Requires: app (PlaunaApp), root (DOM element), visualTree (optional) Optional: domRenderer (WidgetRenderer instance), console (logger) Configurable: radius, maxNearby, maxActions, enabled flag USAGE: const menu = new PlaunaSmartContextMenu({ app: plaunaApp, root: document.body, visualTree: app.visualTree, domRenderer: app.domRenderer, radius: 140, maxNearby: 6, maxActions: 6 }); menu.enable(); Classes PlaunaSmartContextMenu Context aware right click menu. Context menu pattern: Scans visual tree near cursor on right click Builds smart action panel based on nearby UI nodes Adaptive radius based on node density Node scoring for relevance ranking Visual feedback with scan ring and highlights Integration: Requires: app (PlaunaApp), root (DOM element), visualTree (optional) Optional: domRenderer (WidgetRenderer), console (logger) Configurable: radius, maxNearby, maxActions, enabled flag Method Signature Summary Attach context menu event listeners. Attachment pattern: Registers contextmenu event handler (right click) Registers keydown handler (Escape to dismiss) Registers pointerdown handler (click outside to dismiss) Uses capture phase for early event interception Idempotent (checks enabled flag before attaching) Detach context menu event listeners. Detachment pattern: Removes all event listeners registered by attach() Uses capture phase to match attachment Cleans up event references Create context menu data from right click event. Context creation pattern: Extracts cursor position from event Finds target node from event target Scans for nearby nodes using adaptive radius Selects primary node (target or


ui/SmartContextMenu.js

pattern: Extracts cursor position from event Finds target node from event target Scans for nearby nodes using adaptive radius Selects primary node (target or top nearby) Builds contextual actions for nodes Collect nearby nodes from visual tree or DOM. Scanning algorithm: Uses adaptive radius based on node density Falls back to DOM scanning if visualTree unavailable Scores each node based on type, role, text, and distance Returns top N nodes within scan radius Extract type aware detail items for the smart context panel. Returns a list of metadata pills that adapt to node type: Type/Role/ID: always shown for identification Variant/Size/Status: shown when present for styling/state context Profile specific: na


ui/ToastManager.js

ui/ToastManager.js
Classes
class ToastManager
Constants
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: ============================================================================ ToastManager Unified Toast Notification System ============================================================================ ToastManager provides a user friendly toast notification system for Plauna. It separates UI notifications from debug logging and provides a clean API. TOAST POSITIONS: top right: Top right corner (default) top left: Top left corner top center: Top center bottom right: Bottom right corner bottom left: Bottom left corner bottom center: Bottom center TOAST TYPES: success: Green checkmark, 3s duration error: Red X, 5s duration warning: Yellow warning, 4s duration info: Blue info, 3s duration loading: Gray spinner, indefinite (must be manually dismissed) TOAST LIFECYCLE: 1. show(options): Creates toast element and appends to container 2. Animate in: Slide in animation based on position 3. Display: Shows for duration (or indefinite) 4. Animate out: Slide out animation 5. Remove: Element removed from DOM TOAST STRUCTURE: Container: Fixed position div at specified position Toast Element: Individual toast with type styling Icon: Type specific icon (✓, ✕, ⚠, ℹ, ⟳) Content: Title and optional description Close Button: X button to dismiss manually Progress Bar: Optional countdown indicator AUTO DISMISS: maxToasts: Maximum concurrent toasts (default: 5) defaultDuration: Default display time (default: 4000ms) Oldest toasts are dismissed when limit is reached Loading toasts have indefinite duration (duration: 0) ANIMATIONS: Slide in/out based on position Fade effect for smooth transitions CSS transitions defined in Toast.css CONVENIENCE METHODS: success(message, options): Show success toast


ui/ToastManager.js

based on position Fade effect for smooth transitions CSS transitions defined in Toast.css CONVENIENCE METHODS: success(message, options): Show success toast error(message, options): Show error toast warning(message, options): Show warning toast info(message, options): Show info toast loading(message, options): Show loading toast GLOBAL SINGLETON: Toast.initialize() creates global singleton Toast.show() uses global singleton Used by NotificationSystem and widget gallery USAGE: const manager = new ToastManager({ position: 'top right' }); manager.success('Operation completed'); manager.error('Failed to save', { duration: 6000 }); // Or use global singleton Toast.initialize(); Toast.show('Hello world', 'info'); Classes ToastManager Unified toast notification system. Toast pattern: Fixed position container at specified position Type specific styling (success, error, warning, info, loading) Auto dismiss with configurable duration Slide in/out animations based on position Max concurrent toast limit with FIFO dismissal Lifecycle: 1. show(): Creates toast and appends to container 2. Animate in: Slide in based on position 3. Display: Shows for duration (or indefinite for loading) 4. Animate out: Slide out animation 5. Remove: Element removed from DOM Method Signature Summary Show a toast notification. Toast creation pattern: Creates toast element with type specific styling Adds icon, content, close button, and optional progress bar Appends to container at specified position Enforces max concurrent toast limit (dismisses oldest) Auto dismisses after duration (0 for indefinite) Returns toast ID for update/dismiss operations Constants <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command


ui/ToastManager.js

<! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


ui/WidgetGallery.js

ui/WidgetGallery.js
Classes
class WidgetGallery
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: ============================================================================ WidgetGallery Storybook Style Widget Showcase ============================================================================ WidgetGallery is a Storybook like gallery that renders real interactive widget instances from widget.stories() definitions. It's used for development and documentation of Plauna widgets. RENDERING STRATEGY: Uses widgetRenderer.render() directly to bypass the broken require() in create() Instantiates widgets with new WidgetClass(id, storyOptions) Renders each widget to DOM in preview cells Adds interactive state badges (on/off/animating/sending toast) Wires click/change/input events to emit toast notifications GALLERY STRUCTURE: Header: Title and theme selector dropdown Tabs: Category navigation (Primitive, Input, Form, Layout, Navigation, etc.) Content Area: Grid of widget story previews Story Cell: Widget preview + label + state badges STORY PATTERN: Each widget defines static stories() returning named configurations: static stories() { return { 'Story Name': { variant: 'primary', size: 'md' }, 'Another Story': { disabled: true } }; } SPECIAL HANDLING: Tooltips: Appended to document.body for correct overlay positioning Toasts: Call show() immediately for visible demos State Badges: Display on/off/animating/sending toast indicators Interactive Events: Click/change/input emit toast notifications DATA ATTRIBUTES: data widget: Widget ID (e.g., 'button', 'badge') data variant: Story variant name data size: Story size name data story: Story name TOAST INTEGRATION: Uses global Toast from ToastManager Emits toasts on widget interactions for immediate feedback Toast position defaults to top


ui/WidgetGallery.js

Story name TOAST INTEGRATION: Uses global Toast from ToastManager Emits toasts on widget interactions for immediate feedback Toast position defaults to top right THEME SELECTOR: Async dropdown in header Calls shell.setTheme() on change Refreshes gallery on theme change Classes WidgetGallery Interactive widget showcase. Gallery architecture: Storybook like interface for widget documentation Renders real interactive widget instances Category based navigation with tabs Interactive state badges (on/off/animating/sending toast) Toast integration for immediate feedback Method Signature Summary Mount the gallery to a DOM element. Mounting pattern: Creates gallery app container with flex layout Builds header with title and theme selector Builds category tabs for navigation Creates content area for widget previews Activates first category on mount <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


ui/WidgetShowcase.js

ui/WidgetShowcase.js
Classes
class WidgetShowcase
Constants
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: WidgetShowcase Display system for widget examples and variants. Architecture: Renders individual widget examples with state variations Creates structured showcase sections with title, description, and variants Supports variant grids, state grids, size grids, and color grids Uses PlaunaTextService for internationalization Returns UINode trees for integration with Plauna rendering Showcase structure: Container: Card like container with title and description Variants grid: Auto fit grid for widget variants States grid: Grid for different widget states (hover, active, disabled) Size grid: Grid for different widget sizes Color grid: Grid for different color variants Classes WidgetShowcase Widget example renderer. Showcase pattern: Creates structured sections for widget documentation Renders variants, states, sizes, and colors in grids Returns UINode trees for Plauna rendering Supports optional interactive mode Method Signature Summary Create a showcase section for a widget. Showcase creation pattern: Creates card like container with title and description Renders variants in auto fit grid if provided Renders states grid if provided (hover, active, disabled) Renders size grid if provided Renders color grid if provided Returns UINode tree for Plauna rendering Create a variant card Create a state card Create a size card Create a color card Get showcase by widget name Get all showcases Clear all showcases Constants <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also:


ui/WidgetShowcase.js

services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


widgets/DataViews/Card.js
Classes
class Card extends UINode
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: Card Flexible content container widget for Plauna Provides header, body, and footer slots with variant system Classes Method Signature Summary <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


widgets/DataViews/List.js
Classes
class List extends UINode
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: List Basic list widget for Plauna Provides list functionality with multiple variants and states Classes Method Signature Summary <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


widgets/DataViews/ListView.js
Classes
class ListView extends UINode
Constants
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: ListView Data display widget for Plauna Provides virtualized list rendering with selection and sorting Classes Method Signature Summary Constants <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


widgets/DataViews/Table.js
Classes
class Table extends UINode
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: Table Data table widget for Plauna Provides table functionality with sorting, filtering, and pagination Classes Method Signature Summary <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


widgets/DataViews/Tree.js
Classes
class Tree extends UINode
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: Tree Hierarchical data display widget for Plauna Provides tree functionality with expand/collapse and navigation Classes Method Signature Summary <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


widgets/DataViews/index.js
Functions
getDataviewsWidget(id)
getAllDataviewsWidgets()
Constants
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: Data Views Widgets Category Data display and visualization widgets Functions Constants <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


widgets/Feedback/Alert.js
Classes
class Alert extends UINode
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: Alert Alert message widget for Plauna Provides alert functionality with multiple variants and dismissible options Classes Method Signature Summary <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


widgets/Feedback/EmptyState.js
Classes
class EmptyState extends UINode
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: EmptyState Empty state widget for Plauna Provides empty state functionality with multiple variants and content options Classes Method Signature Summary <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


widgets/Feedback/Spinner.js
Classes
class Spinner extends UINode
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: Spinner Loading spinner widget for Plauna Provides spinner functionality with multiple variants and sizes Classes Method Signature Summary <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


widgets/Feedback/Status.js
Classes
class Status extends UINode
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: Status Status indicator widget for Plauna Provides status functionality with multiple variants and sizes Classes Method Signature Summary <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


widgets/Feedback/Toast.js
Classes
class Toast extends UINode
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: Toast Notification toast widget for Plauna Provides toast functionality with multiple variants and auto dismiss Classes Method Signature Summary <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


widgets/Feedback/index.js
Functions
getFeedbackWidget(id)
getAllFeedbackWidgets()
Constants
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: Feedback Widgets Category User feedback and notification widgets Functions Constants <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


widgets/Form/Checkbox.js
Classes
class Checkbox extends UINode
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: Checkbox Multi select form control widget for Plauna Provides checkbox functionality with multiple states and variants Classes Method Signature Summary <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


widgets/Form/Input.js
Classes
class Input extends UINode
Constants
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: Input Form input widget for Plauna Provides text input with validation and styling options Classes Method Signature Summary Constants <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


widgets/Form/Radio.js
Classes
class Radio extends UINode
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: Radio Single select form control widget for Plauna Provides radio button functionality with multiple states and variants Classes Method Signature Summary <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


widgets/Form/Rating.js
Classes
class Rating extends UINode
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: Rating Star rating widget for Plauna Provides rating functionality with multiple states and variants Classes Method Signature Summary <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


widgets/Form/Select.js
Classes
class Select extends UINode
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: Select Multi option selection widget for Plauna Provides dropdown functionality with search and keyboard navigation Classes Method Signature Summary <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


widgets/Form/Slider.js
Classes
class Slider extends UINode
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: Slider Range selection widget for Plauna Provides slider functionality with multiple states and variants Classes Method Signature Summary <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


widgets/Form/Switch.js
Classes
class Switch extends UINode
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: Switch Binary on/off form control widget for Plauna Provides toggle functionality with multiple states and variants Classes Method Signature Summary <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


widgets/Form/Textarea.js
Classes
class Textarea extends UINode
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: Textarea Multi line text input widget for Plauna Provides textarea functionality with multiple states and variants Classes Method Signature Summary <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


widgets/Form/index.js
Functions
getFormWidget(id)
getAllFormWidgets()
Constants
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: Form Widgets Category Form elements and validation widgets Functions Constants <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


widgets/Input/Button.js
Classes
class Button extends UINode
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: Button Interactive button widget for Plauna Provides various button types, states, and accessibility Classes Method Signature Summary <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


widgets/Input/Color.js
Classes
class Color extends UINode
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: Color Color picker widget for Plauna Provides color selection with various input formats Classes Method Signature Summary <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


widgets/Input/Date.js
Classes
class Date extends UINode
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: Date Date picker widget for Plauna Provides date selection with various formats and validation Classes Method Signature Summary <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


widgets/Input/File.js
Classes
class File extends UINode
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: File File input widget for Plauna Provides file upload functionality with drag and drop support Classes Method Signature Summary <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


widgets/Input/Input.js
Classes
class Input extends UINode
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: Input Text input widget for Plauna Provides various input types with validation, states, and accessibility Classes Method Signature Summary <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


widgets/Input/Number.js
Classes
class Number extends UINode
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: Number Number input widget for Plauna Provides numeric input with validation, controls, and formatting Classes Method Signature Summary <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


widgets/Input/Range.js
Classes
class Range extends UINode
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: Range Range slider widget for Plauna Provides range selection with various configurations Classes Method Signature Summary <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


widgets/Input/Search.js
Classes
class Search extends UINode
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: Search Search input widget for Plauna Provides search functionality with suggestions and filters Classes Method Signature Summary <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


widgets/Input/Search.new.js
Classes
class Search extends WidgetItem
Re-exports
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: Search Search input widget for Plauna Provides search functionality with suggestions and filters Refactored to follow the new WidgetItem pattern while maintaining UINode compatibility Classes Method Signature Summary Get default widget options Get supported events Get theme tokens requirements Create widget instance Validate widget specific options Re exports <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


widgets/Input/Tag.js
Classes
class Tag extends UINode
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: Tag Tag input widget for Plauna Provides tag management with autocomplete and suggestions Classes Method Signature Summary <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


widgets/Input/Time.js
Classes
class Time extends UINode
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: Time Time picker widget for Plauna Provides time selection with various formats and validation Classes Method Signature Summary <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview


widgets/Input/Upload.js
Classes
class Upload extends UINode
Notes & Examples
App & widget lifecycle
App & widget lifecycle

<! AUTOGENERATED by tools/extract api.py — content above HUMAN NOTES is overwritten Source: Upload File upload widget for Plauna Provides advanced file upload with drag and drop, progress, and preview Classes Method Signature Summary <! HUMAN NOTES Notes & Examples App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. See also: Plauna Architecture · Plauna Overview App & widget lifecycle Plauna apps and widgets follow a mount → update → unmount lifecycle; services (storage, command bus, theming) are injected rather than imported, so the same widget runs in the editor, the OS shell, and standalone. Example: Widget with full lifecycle See also: Plauna Architecture · Plauna Overview