@stacksjs/stx 0.2.21 → 0.2.24

package/dist/story/cli.d.ts

@@ -19,7 +19,7 @@ export declare function runStoryCLI(args?: string[]): Promise<void>;
  *       open: { alias: 'o', description: 'Open browser automatically' },
  *       host: { description: 'Host to bind to' }
  *     },
- *     action: (options: { port?: number, open?: boolean, host?: string }) => unknown
+ *     action: (options: { port?: number, open?: boolean, host?: string }): Promise<void> => Promise<unknown>
  *   },
  *   'story:dev': {
  *     description: 'Start story development server',
@@ -28,12 +28,12 @@ export declare function runStoryCLI(args?: string[]): Promise<void>;
  *       open: { alias: 'o', description: 'Open browser automatically' },
  *       host: { description: 'Host to bind to' }
  *     },
- *     action: (options: { port?: number, open?: boolean, host?: string }) => unknown
+ *     action: (options: { port?: number, open?: boolean, host?: string }): Promise<void> => Promise<unknown>
  *   },
  *   'story:build': {
  *     description: 'Build static story site',
  *     options: { outDir: { alias: 'o', description: 'Output directory' } },
- *     action: (options: { outDir?: string }) => unknown
+ *     action: (options: { outDir?: string }): Promise<void> => Promise<unknown>
  *   },
  *   'story:preview': {
  *     description: 'Preview built story site',
@@ -41,7 +41,7 @@ export declare function runStoryCLI(args?: string[]): Promise<void>;
  *       port: { alias: 'p', description: 'Server port (default: 4173)' },
  *       open: { alias: 'o', description: 'Open browser automatically' }
  *     },
- *     action: (options: { port?: number, open?: boolean }) => unknown
+ *     action: (options: { port?: number, open?: boolean }): Promise<void> => Promise<unknown>
  *   },
  *   'story:test': {
  *     description: 'Run visual regression tests',
@@ -49,7 +49,7 @@ export declare function runStoryCLI(args?: string[]): Promise<void>;
  *       update: { alias: 'u', description: 'Update snapshots' },
  *       filter: { alias: 'f', description: 'Filter components by name' }
  *     },
- *     action: (options: { update?: boolean, filter?: string }) => unknown
+ *     action: (options: { update?: boolean, filter?: string }): Promise<void> => Promise<unknown>
  *   }
  * }
  * ```
@@ -58,21 +58,21 @@ export declare const storyCommands: {
   /**
    * Main story command (defaults to dev)
    */
-  'story': { /** @defaultValue 'Component showcase and testing' */ description: string; options: { port: { /** @defaultValue 'p' */ alias: string; type: 'number'; /** @defaultValue 'Server port (default: 6006)' */ description: string }; open: { /** @defaultValue 'o' */ alias: string; type: 'boolean'; /** @defaultValue 'Open browser automatically' */ description: string }; host: { type: 'string'; /** @defaultValue 'Host to bind to' */ description: string } }; action: (options: { port?: number, open?: boolean, host?: string }) => unknown };
+  'story': { /** @defaultValue 'Component showcase and testing' */ description: string; options: { port: { /** @defaultValue 'p' */ alias: string; type: 'number'; /** @defaultValue 'Server port (default: 6006)' */ description: string }; open: { /** @defaultValue 'o' */ alias: string; type: 'boolean'; /** @defaultValue 'Open browser automatically' */ description: string }; host: { type: 'string'; /** @defaultValue 'Host to bind to' */ description: string } }; action: (options: { port?: number, open?: boolean, host?: string }): Promise<void> => Promise<unknown> };
   /**
    * Story dev subcommand
    */
-  'story:dev': { /** @defaultValue 'Start story development server' */ description: string; options: { port: { /** @defaultValue 'p' */ alias: string; type: 'number'; /** @defaultValue 'Server port (default: 6006)' */ description: string }; open: { /** @defaultValue 'o' */ alias: string; type: 'boolean'; /** @defaultValue 'Open browser automatically' */ description: string }; host: { type: 'string'; /** @defaultValue 'Host to bind to' */ description: string } }; action: (options: { port?: number, open?: boolean, host?: string }) => unknown };
+  'story:dev': { /** @defaultValue 'Start story development server' */ description: string; options: { port: { /** @defaultValue 'p' */ alias: string; type: 'number'; /** @defaultValue 'Server port (default: 6006)' */ description: string }; open: { /** @defaultValue 'o' */ alias: string; type: 'boolean'; /** @defaultValue 'Open browser automatically' */ description: string }; host: { type: 'string'; /** @defaultValue 'Host to bind to' */ description: string } }; action: (options: { port?: number, open?: boolean, host?: string }): Promise<void> => Promise<unknown> };
   /**
    * Story build subcommand
    */
-  'story:build': { /** @defaultValue 'Build static story site' */ description: string; options: { outDir: { /** @defaultValue 'o' */ alias: string; type: 'string'; /** @defaultValue 'Output directory' */ description: string } }; action: (options: { outDir?: string }) => unknown };
+  'story:build': { /** @defaultValue 'Build static story site' */ description: string; options: { outDir: { /** @defaultValue 'o' */ alias: string; type: 'string'; /** @defaultValue 'Output directory' */ description: string } }; action: (options: { outDir?: string }): Promise<void> => Promise<unknown> };
   /**
    * Story preview subcommand
    */
-  'story:preview': { /** @defaultValue 'Preview built story site' */ description: string; options: { port: { /** @defaultValue 'p' */ alias: string; type: 'number'; /** @defaultValue 'Server port (default: 4173)' */ description: string }; open: { /** @defaultValue 'o' */ alias: string; type: 'boolean'; /** @defaultValue 'Open browser automatically' */ description: string } }; action: (options: { port?: number, open?: boolean }) => unknown };
+  'story:preview': { /** @defaultValue 'Preview built story site' */ description: string; options: { port: { /** @defaultValue 'p' */ alias: string; type: 'number'; /** @defaultValue 'Server port (default: 4173)' */ description: string }; open: { /** @defaultValue 'o' */ alias: string; type: 'boolean'; /** @defaultValue 'Open browser automatically' */ description: string } }; action: (options: { port?: number, open?: boolean }): Promise<void> => Promise<unknown> };
   /**
    * Story test subcommand
    */
-  'story:test': { /** @defaultValue 'Run visual regression tests' */ description: string; options: { update: { /** @defaultValue 'u' */ alias: string; type: 'boolean'; /** @defaultValue 'Update snapshots' */ description: string }; filter: { /** @defaultValue 'f' */ alias: string; type: 'string'; /** @defaultValue 'Filter components by name' */ description: string } }; action: (options: { update?: boolean, filter?: string }) => unknown }
+  'story:test': { /** @defaultValue 'Run visual regression tests' */ description: string; options: { update: { /** @defaultValue 'u' */ alias: string; type: 'boolean'; /** @defaultValue 'Update snapshots' */ description: string }; filter: { /** @defaultValue 'f' */ alias: string; type: 'string'; /** @defaultValue 'Filter components by name' */ description: string } }; action: (options: { update?: boolean, filter?: string }): Promise<void> => Promise<unknown> }
 };

package/dist/story/output.d.ts

@@ -70,6 +70,34 @@ export declare function formatDuration(ms: number): string;
  * Format file size in human-readable format
  */
 export declare function formatSize(bytes: number): string;
+// Colors
+declare const colors: {
+  black: string;
+  red: string;
+  green: string;
+  yellow: string;
+  blue: string;
+  magenta: string;
+  cyan: string;
+  white: string;
+  gray: string;
+  brightRed: string;
+  brightGreen: string;
+  brightYellow: string;
+  brightBlue: string;
+  brightMagenta: string;
+  brightCyan: string;
+  brightWhite: string
+};
+// Styles
+declare const styles: {
+  bold: string;
+  dim: string;
+  italic: string;
+  underline: string;
+  inverse: string;
+  strikethrough: string
+};
 // Convenience functions
 export declare const red: (text: string) => string;
 export declare const green: (text: string) => string;

package/dist/story/ui/code-panel.d.ts

@@ -12,31 +12,6 @@ export declare function getComponentSource(filePath: string): Promise<string>;
  * Get story code with current props
  */
 export declare function getStoryCode(componentName: string, props: Record<string, any>): string;
-/**
- * Get props as JSON
- */
-export declare function getPropsJson(props: Record<string, any>): string;
-/**
- * Apply syntax highlighting to code
- * Uses simple regex-based highlighting without external deps
- */
-export declare function highlightCode(code: string, language: string): string;
-/**
- * Get syntax highlighting styles
- */
-export declare function getHighlightStyles(): string;
-/**
- * Get code panel styles
- */
-export declare function getCodePanelStyles(): string;
-/**
- * Copy code to clipboard (client-side)
- */
-export declare function getCopyCodeScript(): string;
-/**
- * Open in VS Code (client-side)
- */
-export declare function getOpenInVSCodeScript(filePath: string): string;
 /**
  * Code panel tabs
  */

package/dist/streaming.d.ts

@@ -28,6 +28,58 @@ export declare function streamTemplateSimple(templatePath: string, data?: Record
  * @param options stx options
  */
 export declare function createStreamRenderer(templatePath: string, options?: StxOptions): Promise<StreamRenderer>;
+/**
+ * Register streaming and hydration directives
+ */
+export declare function registerStreamingDirectives(options?: StxOptions): CustomDirective[];
+/**
+ * Process section directives
+ * @param content Template content
+ * @param context Data context
+ * @param filePath Template file path
+ * @param _options stx options
+ */
+// eslint-disable-next-line pickier/no-unused-vars
+export declare function processSectionDirectives(content: string, context: Record<string, any>, filePath: string, _options?: StxOptions): Promise<string>;
+/**
+ * Wrap a ReadableStream<string> in a proper Response with chunked transfer encoding headers.
+ *
+ * Makes it trivial to use streaming from a Bun server handler:
+ *
+ * @example
+ * ```typescript
+ * const server = Bun.serve({
+ *   async fetch(req) {
+ *     const stream = await streamTemplate('index.stx', { title: 'Home' })
+ *     return streamToResponse(stream)
+ *   }
+ * })
+ * ```
+ *
+ * @param stream - The template ReadableStream
+ * @param init - Optional additional ResponseInit (headers, status, etc.)
+ * @returns A Response with proper streaming headers
+ */
+export declare function streamToResponse(stream: ReadableStream<string>, init?: ResponseInit): Response;
+/**
+ * Generate client-side hydration runtime script.
+ *
+ * This script handles:
+ * - Finding islands in the DOM
+ * - Loading island components based on priority
+ * - Hydrating islands with their props
+ *
+ * Usage: Include the generated script in your page, then call
+ * `window.__stx.hydrate()` when ready.
+ *
+ * @example
+ * ```html
+ * <script>
+ *   {{ generateHydrationRuntime({ mode: 'full' }) }}
+ * </script>
+ * ```
+ */
+export declare function generateHydrationRuntime(config?: HydrationRuntimeConfig): string;
 /**
  * Custom directive for marking suspense boundaries in streaming templates.
  *
@@ -49,3 +101,11 @@ export declare const streamingSuspenseDirective: CustomDirective;
  * Custom directive for creating islands (for partial hydration)
  */
 export declare const islandDirective: CustomDirective;
+/**
+ * Configuration for hydration runtime generation
+ */
+export declare interface HydrationRuntimeConfig {
+  mode: 'full' | 'loader'
+  components?: Record<string, string>
+  dynamicImports?: boolean
+}

package/dist/stx.d.ts

@@ -340,6 +340,21 @@ interface StxModal {
 
 declare const modal: StxModal
 
+// ============================================================================
+// Drawer system
+// ============================================================================
+
+interface StxDrawer {
+  /** Open a drawer by its id */
+  open: (id: string) => void
+  /** Close a drawer by its id */
+  close: (id: string) => void
+  /** Toggle a drawer by its id */
+  toggle: (id: string) => void
+}
+
+declare const drawer: StxDrawer
+
 // ============================================================================
 // Alert & Confirm dialogs
 // ============================================================================
@@ -478,6 +493,9 @@ interface StxRuntimeRegistry {
   // Modal
   modal: StxModal
 
+  // Drawer
+  drawer: StxDrawer
+
   // Dialogs
   alert: typeof stxAlert
   confirm: typeof stxConfirm

package/dist/testing.d.ts

@@ -86,142 +86,116 @@ export declare function createTestContext(options?: {
 export declare function cleanup(): void;
 /**
  * Fire events on elements.
- * @defaultValue
- * ```ts
- * {
- *   async click: (
- *     target: HTMLElement | ElementWrapper | ComponentWrapper | null,
- *     options?: MouseEventInit,
- *   ) => unknown,
- *   async dblClick: (
- *     target: HTMLElement | ElementWrapper | ComponentWrapper | null,
- *     options?: MouseEventInit,
- *   ) => unknown,
- *   async input: (
- *     target: HTMLElement | ElementWrapper | ComponentWrapper | null,
- *     value: string,
- *   ) => unknown,
- *   async change: (
- *     target: HTMLElement | ElementWrapper | ComponentWrapper | null,
- *     value?: string,
- *   ) => unknown,
- *   async submit: (
- *     target: HTMLElement | ElementWrapper | ComponentWrapper | null,
- *   ) => unknown,
- *   async focus: (
- *     target: HTMLElement | ElementWrapper | ComponentWrapper | null,
- *   ) => unknown,
- *   async blur: (
- *     target: HTMLElement | ElementWrapper | ComponentWrapper | null,
- *   ) => unknown,
- *   async keyDown: (
- *     target: HTMLElement | ElementWrapper | ComponentWrapper | null,
- *     key: string,
- *     options?: KeyboardEventInit,
- *   ) => unknown,
- *   async keyUp: (
- *     target: HTMLElement | ElementWrapper | ComponentWrapper | null,
- *     key: string,
- *     options?: KeyboardEventInit,
- *   ) => unknown,
- *   async custom: (
- *     target: HTMLElement | ElementWrapper | ComponentWrapper | null,
- *     eventName: string,
- *     options?: FireEventOptions,
- *   ) => unknown
- * }
- * ```
  */
 export declare const fireEvent: {
   /**
    * Fire a click event.
    */
-  async click: ( target: HTMLElement | ElementWrapper | ComponentWrapper | null, options?: MouseEventInit, ) => unknown;
+  async click: (
+    target: HTMLElement | ElementWrapper | ComponentWrapper | null,
+    options?: MouseEventInit,
+  ) => Promise<void>;
   /**
    * Fire a double click event.
    */
-  async dblClick: ( target: HTMLElement | ElementWrapper | ComponentWrapper | null, options?: MouseEventInit, ) => unknown;
+  async dblClick: (
+    target: HTMLElement | ElementWrapper | ComponentWrapper | null,
+    options?: MouseEventInit,
+  ) => Promise<void>;
   /**
    * Fire an input event.
    */
-  async input: ( target: HTMLElement | ElementWrapper | ComponentWrapper | null, value: string, ) => unknown;
+  async input: (
+    target: HTMLElement | ElementWrapper | ComponentWrapper | null,
+    value: string,
+  ) => Promise<void>;
   /**
    * Fire a change event.
    */
-  async change: ( target: HTMLElement | ElementWrapper | ComponentWrapper | null, value?: string, ) => unknown;
+  async change: (
+    target: HTMLElement | ElementWrapper | ComponentWrapper | null,
+    value?: string,
+  ) => Promise<void>;
   /**
    * Fire a submit event.
    */
-  async submit: ( target: HTMLElement | ElementWrapper | ComponentWrapper | null, ) => unknown;
+  async submit: (
+    target: HTMLElement | ElementWrapper | ComponentWrapper | null,
+  ) => Promise<void>;
   /**
    * Fire a focus event.
    */
-  async focus: ( target: HTMLElement | ElementWrapper | ComponentWrapper | null, ) => unknown;
+  async focus: (
+    target: HTMLElement | ElementWrapper | ComponentWrapper | null,
+  ) => Promise<void>;
   /**
    * Fire a blur event.
    */
-  async blur: ( target: HTMLElement | ElementWrapper | ComponentWrapper | null, ) => unknown;
+  async blur: (
+    target: HTMLElement | ElementWrapper | ComponentWrapper | null,
+  ) => Promise<void>;
   /**
    * Fire a keydown event.
    */
-  async keyDown: ( target: HTMLElement | ElementWrapper | ComponentWrapper | null, key: string, options?: KeyboardEventInit, ) => unknown;
+  async keyDown: (
+    target: HTMLElement | ElementWrapper | ComponentWrapper | null,
+    key: string,
+    options?: KeyboardEventInit,
+  ) => Promise<void>;
   /**
    * Fire a keyup event.
    */
-  async keyUp: ( target: HTMLElement | ElementWrapper | ComponentWrapper | null, key: string, options?: KeyboardEventInit, ) => unknown;
+  async keyUp: (
+    target: HTMLElement | ElementWrapper | ComponentWrapper | null,
+    key: string,
+    options?: KeyboardEventInit,
+  ) => Promise<void>;
   /**
    * Fire a custom event.
    */
-  async custom: ( target: HTMLElement | ElementWrapper | ComponentWrapper | null, eventName: string, options?: FireEventOptions, ) => unknown
+  async custom: (
+    target: HTMLElement | ElementWrapper | ComponentWrapper | null,
+    eventName: string,
+    options?: FireEventOptions,
+  ) => Promise<void>
 };
 /**
  * Create custom matchers for testing.
- * @defaultValue
- * ```ts
- * {
- *   toContainText: (wrapper: ComponentWrapper | ElementWrapper, text: string) => unknown,
- *   toHaveClass: (wrapper: ComponentWrapper | ElementWrapper, className: string) => unknown,
- *   toHaveAttribute: (
- *     wrapper: ComponentWrapper | ElementWrapper,
- *     name: string,
- *     value?: string,
- *   ) => unknown,
- *   toBeVisible: (wrapper: ComponentWrapper | ElementWrapper) => unknown,
- *   toExist: (wrapper: ComponentWrapper | ElementWrapper | null) => unknown,
- *   toHaveEmitted: (wrapper: ComponentWrapper, event: string, times?: number) => unknown,
- *   toHaveEmittedWith: (wrapper: ComponentWrapper, event: string, payload: unknown) => unknown
- * }
- * ```
+ * @defaultValue `{ toHaveEmittedWith: () => unknown }`
  */
 export declare const matchers: {
   /**
    * Check if wrapper contains text.
    */
-  toContainText: (wrapper: ComponentWrapper | ElementWrapper, text: string) => unknown;
+  toContainText: (wrapper: ComponentWrapper | ElementWrapper, text: string) => boolean;
   /**
    * Check if wrapper has class.
    */
-  toHaveClass: (wrapper: ComponentWrapper | ElementWrapper, className: string) => unknown;
+  toHaveClass: (wrapper: ComponentWrapper | ElementWrapper, className: string) => boolean;
   /**
    * Check if wrapper has attribute.
    */
-  toHaveAttribute: ( wrapper: ComponentWrapper | ElementWrapper, name: string, value?: string, ) => unknown;
+  toHaveAttribute: (
+    wrapper: ComponentWrapper | ElementWrapper,
+    name: string,
+    value?: string,
+  ) => boolean;
   /**
    * Check if wrapper is visible.
    */
-  toBeVisible: (wrapper: ComponentWrapper | ElementWrapper) => unknown;
+  toBeVisible: (wrapper: ComponentWrapper | ElementWrapper) => boolean;
   /**
    * Check if wrapper exists.
    */
-  toExist: (wrapper: ComponentWrapper | ElementWrapper | null) => unknown;
+  toExist: (wrapper: ComponentWrapper | ElementWrapper | null) => boolean;
   /**
    * Check if event was emitted.
    */
-  toHaveEmitted: (wrapper: ComponentWrapper, event: string, times?: number) => unknown;
+  toHaveEmitted: (wrapper: ComponentWrapper, event: string, times?: number) => boolean;
   /**
    * Check if event was emitted with payload.
    */
-  toHaveEmittedWith: (wrapper: ComponentWrapper, event: string, payload: unknown) => unknown
+  toHaveEmittedWith: (wrapper: ComponentWrapper, event: string, payload: unknown) => boolean
 };
 /** Mount options */
 export declare interface MountOptions {

package/dist/types/config-types.d.ts

@@ -250,6 +250,12 @@ export declare interface AppHeadConfig {
 export declare interface StxConfig {
   app?: {
     head?: AppHeadConfig
+    window?: {
+      width?: number
+      height?: number
+      darkMode?: boolean
+      hotReload?: boolean
+    }
   }
   root?: string
   pagesDir?: string

package/dist/visual-editor.d.ts

@@ -26,6 +26,10 @@ export declare function getDefaultPalette(): PaletteItem[];
  * Generate insert result for a palette item.
  */
 export declare function insertPaletteItem(item: PaletteItem, position: EditorPosition, indentation?: string): InsertResult;
+// =============================================================================
+// Helper Functions
+// =============================================================================
+declare function hasEndTag(directiveName: string): boolean;
 /** Template outline node */
 export declare interface OutlineNode {
   type: OutlineNodeType

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stacksjs/stx",
   "type": "module",
-  "version": "0.2.21",
+  "version": "0.2.24",
   "description": "A performant UI Framework. Powered by Bun.",
   "author": "Chris Breuer <chris@stacksjs.org>",
   "license": "MIT",
@@ -116,12 +116,12 @@
   "dependencies": {
     "@cwcss/crosswind": "^0.2.0",
     "@stacksjs/clapp": "^0.2.0",
-    "@stacksjs/desktop": "0.2.21",
-    "@stacksjs/sanitizer": "0.2.21",
+    "@stacksjs/desktop": "0.2.24",
+    "@stacksjs/sanitizer": "0.2.24",
     "@stacksjs/ts-craft": "^0.0.2",
-    "bun-plugin-stx": "0.2.21",
+    "bun-plugin-stx": "0.2.24",
     "bunfig": "^0.15.6",
-    "stx-router": "0.2.21",
+    "stx-router": "0.2.24",
     "ts-broadcasting": "^0.0.4",
     "ts-syntax-highlighter": "^0.2.1"
   }

package/stx.d.ts

@@ -340,6 +340,21 @@ interface StxModal {
 
 declare const modal: StxModal
 
+// ============================================================================
+// Drawer system
+// ============================================================================
+
+interface StxDrawer {
+  /** Open a drawer by its id */
+  open: (id: string) => void
+  /** Close a drawer by its id */
+  close: (id: string) => void
+  /** Toggle a drawer by its id */
+  toggle: (id: string) => void
+}
+
+declare const drawer: StxDrawer
+
 // ============================================================================
 // Alert & Confirm dialogs
 // ============================================================================
@@ -478,6 +493,9 @@ interface StxRuntimeRegistry {
   // Modal
   modal: StxModal
 
+  // Drawer
+  drawer: StxDrawer
+
   // Dialogs
   alert: typeof stxAlert
   confirm: typeof stxConfirm