@aprovan/patchwork 0.1.0

package/packages/images/ink/src/setup.ts

@@ -0,0 +1,123 @@
+/**
+ * @aprovan/patchwork-image-ink
+ *
+ * Setup function for the Ink terminal UI image.
+ * Handles terminal environment configuration for CLI widgets.
+ */
+
+import type { WriteStream } from 'node:tty';
+
+export interface SetupOptions {
+  /** Output stream (default: process.stdout) */
+  stdout?: WriteStream;
+  /** Input stream (default: process.stdin) */
+  stdin?: NodeJS.ReadStream;
+  /** Enable color support detection override */
+  colorMode?: 'detect' | 'ansi' | 'ansi256' | 'truecolor' | 'none';
+  /** Enable debug mode (default: false) */
+  debug?: boolean;
+}
+
+export interface InkEnvironment {
+  stdout: WriteStream;
+  stdin: NodeJS.ReadStream;
+  colorSupport: 'none' | 'ansi' | 'ansi256' | 'truecolor';
+  isInteractive: boolean;
+  columns: number;
+  rows: number;
+}
+
+/**
+ * Detect terminal color support
+ */
+function detectColorSupport(
+  stdout: WriteStream,
+): 'none' | 'ansi' | 'ansi256' | 'truecolor' {
+  // Check for NO_COLOR environment variable
+  if (process.env['NO_COLOR'] !== undefined) {
+    return 'none';
+  }
+
+  // Check for FORCE_COLOR
+  const forceColor = process.env['FORCE_COLOR'];
+  if (forceColor !== undefined) {
+    if (forceColor === '0') return 'none';
+    if (forceColor === '1') return 'ansi';
+    if (forceColor === '2') return 'ansi256';
+    if (forceColor === '3') return 'truecolor';
+  }
+
+  // Check COLORTERM for true color
+  if (
+    process.env['COLORTERM'] === 'truecolor' ||
+    process.env['COLORTERM'] === '24bit'
+  ) {
+    return 'truecolor';
+  }
+
+  // Check terminal capabilities
+  if (!stdout.isTTY) {
+    return 'none';
+  }
+
+  // Check TERM for 256 color support
+  const term = process.env['TERM'] || '';
+  if (term.includes('256color') || term.includes('256')) {
+    return 'ansi256';
+  }
+
+  // Default to basic ANSI if TTY
+  return 'ansi';
+}
+
+/**
+ * Setup the Ink terminal UI image runtime environment
+ *
+ * @param options - Optional configuration
+ * @returns Environment configuration for Ink
+ */
+export function setup(options: SetupOptions = {}): InkEnvironment {
+  const {
+    stdout = process.stdout as WriteStream,
+    stdin = process.stdin,
+    colorMode = 'detect',
+    debug = false,
+  } = options;
+
+  // Detect or use specified color mode
+  let colorSupport: 'none' | 'ansi' | 'ansi256' | 'truecolor';
+  if (colorMode === 'detect') {
+    colorSupport = detectColorSupport(stdout);
+  } else {
+    colorSupport = colorMode;
+  }
+
+  // Get terminal dimensions
+  const columns = stdout.columns || 80;
+  const rows = stdout.rows || 24;
+
+  // Check if interactive
+  const isInteractive = stdin.isTTY ?? false;
+
+  if (debug) {
+    console.error(`[patchwork-ink] Color support: ${colorSupport}`);
+    console.error(`[patchwork-ink] Terminal size: ${columns}x${rows}`);
+    console.error(`[patchwork-ink] Interactive: ${isInteractive}`);
+  }
+
+  return {
+    stdout,
+    stdin,
+    colorSupport,
+    isInteractive,
+    columns,
+    rows,
+  };
+}
+
+/**
+ * Cleanup - no-op for CLI but provided for API consistency
+ */
+export function cleanup(): void {
+  // No cleanup needed for terminal
+}

package/packages/images/ink/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "lib": ["ES2020"],
+    "moduleResolution": "bundler"
+  },
+  "include": ["src/**/*"]
+}

package/packages/images/ink/tsup.config.ts

@@ -0,0 +1,11 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['src/index.ts', 'src/setup.ts', 'src/runner.ts'],
+  format: ['esm'],
+  dts: true,
+  sourcemap: true,
+  clean: true,
+  target: 'node20',
+  external: ['react', 'ink', 'chalk'],
+});

package/packages/images/shadcn/node_modules/.bin/jiti

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/patchwork/patchwork/node_modules/.pnpm/jiti@1.21.7/node_modules/jiti/bin/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/jiti@1.21.7/node_modules/jiti/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/jiti@1.21.7/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/patchwork/patchwork/node_modules/.pnpm/jiti@1.21.7/node_modules/jiti/bin/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/jiti@1.21.7/node_modules/jiti/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/jiti@1.21.7/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../../node_modules/.pnpm/jiti@1.21.7/node_modules/jiti/bin/jiti.js" "$@"
+else
+  exec node  "$basedir/../../../../../node_modules/.pnpm/jiti@1.21.7/node_modules/jiti/bin/jiti.js" "$@"
+fi

package/packages/images/shadcn/node_modules/.bin/tsc

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/patchwork/patchwork/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/typescript@5.9.3/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/patchwork/patchwork/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/typescript@5.9.3/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../typescript/bin/tsc" "$@"
+else
+  exec node  "$basedir/../typescript/bin/tsc" "$@"
+fi

package/packages/images/shadcn/node_modules/.bin/tsserver

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/patchwork/patchwork/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/typescript@5.9.3/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/patchwork/patchwork/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/typescript@5.9.3/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../typescript/bin/tsserver" "$@"
+else
+  exec node  "$basedir/../typescript/bin/tsserver" "$@"
+fi

package/packages/images/shadcn/node_modules/.bin/tsup

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/patchwork/patchwork/node_modules/.pnpm/tsup@8.5.1_jiti@1.21.7_postcss@8.5.6_tsx@4.21.0_typescript@5.9.3/node_modules/tsup/dist/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/tsup@8.5.1_jiti@1.21.7_postcss@8.5.6_tsx@4.21.0_typescript@5.9.3/node_modules/tsup/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/tsup@8.5.1_jiti@1.21.7_postcss@8.5.6_tsx@4.21.0_typescript@5.9.3/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/patchwork/patchwork/node_modules/.pnpm/tsup@8.5.1_jiti@1.21.7_postcss@8.5.6_tsx@4.21.0_typescript@5.9.3/node_modules/tsup/dist/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/tsup@8.5.1_jiti@1.21.7_postcss@8.5.6_tsx@4.21.0_typescript@5.9.3/node_modules/tsup/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/tsup@8.5.1_jiti@1.21.7_postcss@8.5.6_tsx@4.21.0_typescript@5.9.3/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../tsup/dist/cli-default.js" "$@"
+else
+  exec node  "$basedir/../tsup/dist/cli-default.js" "$@"
+fi

package/packages/images/shadcn/node_modules/.bin/tsup-node

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/patchwork/patchwork/node_modules/.pnpm/tsup@8.5.1_jiti@1.21.7_postcss@8.5.6_tsx@4.21.0_typescript@5.9.3/node_modules/tsup/dist/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/tsup@8.5.1_jiti@1.21.7_postcss@8.5.6_tsx@4.21.0_typescript@5.9.3/node_modules/tsup/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/tsup@8.5.1_jiti@1.21.7_postcss@8.5.6_tsx@4.21.0_typescript@5.9.3/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/patchwork/patchwork/node_modules/.pnpm/tsup@8.5.1_jiti@1.21.7_postcss@8.5.6_tsx@4.21.0_typescript@5.9.3/node_modules/tsup/dist/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/tsup@8.5.1_jiti@1.21.7_postcss@8.5.6_tsx@4.21.0_typescript@5.9.3/node_modules/tsup/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/tsup@8.5.1_jiti@1.21.7_postcss@8.5.6_tsx@4.21.0_typescript@5.9.3/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../tsup/dist/cli-node.js" "$@"
+else
+  exec node  "$basedir/../tsup/dist/cli-node.js" "$@"
+fi

package/packages/images/shadcn/node_modules/.bin/tsx

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/patchwork/patchwork/node_modules/.pnpm/tsx@4.21.0/node_modules/tsx/dist/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/tsx@4.21.0/node_modules/tsx/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/tsx@4.21.0/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/patchwork/patchwork/node_modules/.pnpm/tsx@4.21.0/node_modules/tsx/dist/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/tsx@4.21.0/node_modules/tsx/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/tsx@4.21.0/node_modules:/home/runner/work/patchwork/patchwork/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../../node_modules/.pnpm/tsx@4.21.0/node_modules/tsx/dist/cli.mjs" "$@"
+else
+  exec node  "$basedir/../../../../../node_modules/.pnpm/tsx@4.21.0/node_modules/tsx/dist/cli.mjs" "$@"
+fi

package/packages/images/shadcn/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "@aprovan/patchwork-image-shadcn",
+  "version": "0.1.0",
+  "description": "Patchwork image: ShadCN/ui with Tailwind CSS and Radix UI",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist",
+    "package.json"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "patchwork": {
+    "platform": "browser",
+    "dependencies": {
+      "react": "^18.0.0",
+      "react-dom": "^18.0.0"
+    },
+    "esbuild": {
+      "target": "es2020",
+      "format": "esm",
+      "jsx": "transform",
+      "jsxFactory": "React.createElement",
+      "jsxFragment": "React.Fragment"
+    },
+    "framework": {
+      "globals": {
+        "react": "React",
+        "react-dom": "ReactDOM"
+      },
+      "preload": [
+        "https://esm.sh/react@18",
+        "https://esm.sh/react-dom@18/client"
+      ],
+      "deps": {
+        "react": "18",
+        "react-dom": "18"
+      }
+    },
+    "aliases": {
+      "@/components/ui/*": "@packagedcn/react",
+      "@/components/*": "@packagedcn/react",
+      "@/lib/utils": "@packagedcn/react"
+    }
+  },
+  "dependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "@radix-ui/react-dialog": "^1.0.0",
+    "@radix-ui/react-dropdown-menu": "^2.0.0",
+    "@radix-ui/react-slot": "^1.0.0",
+    "@radix-ui/react-tooltip": "^1.0.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
+    "tailwind-merge": "^2.0.0",
+    "lucide-react": "^0.400.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.5",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "tsup": "^8.3.5",
+    "typescript": "^5.7.3"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  }
+}

package/packages/images/shadcn/src/html.ts

@@ -0,0 +1,341 @@
+/**
+ * @aprovan/patchwork-image-shadcnshadcn - HTML Generation
+ *
+ * Generates complete HTML documents for browser widget rendering.
+ * The image owns the full HTML template including CSS, import maps, and mounting code.
+ *
+ * Uses Tailwind Play CDN for runtime CSS generation.
+ */
+
+import { DEFAULT_CSS_VARIABLES, DARK_CSS_VARIABLES } from './setup.js';
+
+export interface HtmlOptions {
+  /** Document title */
+  title?: string;
+  /** Theme: 'light' | 'dark' (default: 'dark') */
+  theme?: 'light' | 'dark';
+  /** Custom CSS to inject */
+  customCss?: string;
+  /** Widget props to pass */
+  props?: Record<string, unknown>;
+  /** Service namespaces to expose (generates bridge code) */
+  services?: string[];
+}
+
+export interface ImportMapEntry {
+  [pkg: string]: string;
+}
+
+/**
+ * Generate CSS for the selected theme
+ */
+function generateThemeCss(theme: 'light' | 'dark'): string {
+  const vars = theme === 'dark' ? DARK_CSS_VARIABLES : DEFAULT_CSS_VARIABLES;
+  const cssVarsString = Object.entries(vars)
+    .map(([key, value]) => `  ${key}: ${value};`)
+    .join('\n');
+
+  return `
+:root {
+${cssVarsString}
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  line-height: 1.5;
+  color: hsl(var(--foreground));
+  background-color: hsl(var(--background));
+}
+
+*, *::before, *::after {
+  border-color: hsl(var(--border));
+}
+`;
+}
+
+/**
+ * Return the Tailwind Play CDN script URL.
+ * Play CDN auto-initializes with MutationObserver, generating CSS on-demand.
+ */
+function getTailwindCdnScript(): string {
+  return 'https://cdn.tailwindcss.com';
+}
+
+/**
+ * Generate the mounting code for React widgets
+ */
+function generateMountCode(propsJson: string): string {
+  return `
+import { createRoot } from "react-dom/client";
+import React from "react";
+
+// Widget code will set window.__PATCHWORK_WIDGET__
+const Component = window.__PATCHWORK_WIDGET__;
+const props = ${propsJson};
+
+if (Component) {
+  const root = createRoot(document.getElementById('root'));
+  root.render(React.createElement(Component, props));
+  window.parent.postMessage({ type: 'patchwork:ready' }, '*');
+} else {
+  const root = createRoot(document.getElementById('root'));
+  root.render(
+    React.createElement('div', { style: { color: 'red', padding: '20px' } },
+      React.createElement('h2', null, 'Error: No component found'),
+      React.createElement('p', null, 'Widget must export a default component.')
+    )
+  );
+  window.parent.postMessage({ type: 'patchwork:error', message: 'No component found' }, '*');
+}
+
+window.addEventListener('error', (e) => {
+  window.parent.postMessage({ type: 'patchwork:error', message: e.message }, '*');
+});
+`;
+}
+
+/**
+ * Transform compiled widget code to set global export
+ */
+export function transformWidgetCode(code: string): string {
+  let result = code;
+
+  // Handle: export { X as default }
+  const namedMatch = result.match(/export\s*{\s*(\w+)\s+as\s+default\s*}/);
+  if (namedMatch) {
+    result = result.replace(
+      /export\s*{\s*\w+\s+as\s+default\s*};?/,
+      `window.__PATCHWORK_WIDGET__ = ${namedMatch[1]};`,
+    );
+  }
+
+  // Handle: export default X or export default function X
+  const directMatch = result.match(/export\s+default\s+(?:function\s+)?(\w+)/);
+  if (directMatch && !namedMatch) {
+    result = result.replace(
+      /export\s+default\s+(?:function\s+)?(\w+)/,
+      `window.__PATCHWORK_WIDGET__ = $1`,
+    );
+  }
+
+  // Remove remaining exports
+  return result.replace(/export\s*{[^}]*};?/g, '');
+}
+
+/**
+ * Generate service bridge code for iframe communication
+ *
+ * Creates JavaScript that sets up:
+ * 1. Message handling for service results from parent
+ * 2. Dynamic proxy objects for each service namespace
+ */
+function generateServiceBridge(services: string[]): string {
+  if (services.length === 0) return '';
+
+  const namespaceAssignments = services
+    .map((ns) => `window.${ns} = createNamespaceProxy('${ns}');`)
+    .join('\n    ');
+
+  return `
+(function() {
+  var pendingCalls = new Map();
+
+  window.__patchwork_call__ = function(namespace, method, args) {
+    return new Promise(function(resolve, reject) {
+      var id = Math.random().toString(36).slice(2);
+      pendingCalls.set(id, { resolve: resolve, reject: reject });
+      window.parent.postMessage({
+        type: 'patchwork:call',
+        id: id,
+        service: namespace,
+        method: method,
+        args: args
+      }, '*');
+      setTimeout(function() {
+        if (pendingCalls.has(id)) {
+          pendingCalls.delete(id);
+          reject(new Error('Service call timeout: ' + namespace + '.' + method));
+        }
+      }, 30000);
+    });
+  };
+
+  window.addEventListener('message', function(e) {
+    if (e.data && e.data.type === 'patchwork:response') {
+      var pending = pendingCalls.get(e.data.id);
+      if (pending) {
+        pendingCalls.delete(e.data.id);
+        if (e.data.result.success) {
+          pending.resolve(e.data.result.data);
+        } else {
+          pending.reject(new Error(e.data.result.error || 'Service call failed'));
+        }
+      }
+    }
+  });
+
+  function createNamespaceProxy(namespace) {
+    function createNestedProxy(path) {
+      var fn = function() {
+        return window.__patchwork_call__(namespace, path, Array.prototype.slice.call(arguments));
+      };
+      return new Proxy(fn, {
+        get: function(_, nestedName) {
+          if (typeof nestedName === 'symbol') return undefined;
+          var newPath = path ? path + '.' + nestedName : nestedName;
+          return createNestedProxy(newPath);
+        }
+      });
+    }
+    return new Proxy({}, {
+      get: function(_, fieldName) {
+        if (typeof fieldName === 'symbol') return undefined;
+        return createNestedProxy(fieldName);
+      }
+    });
+  }
+
+    ${namespaceAssignments}
+})();
+`;
+}
+
+/**
+ * Generate a complete HTML document for rendering a widget
+ *
+ * Uses Tailwind Play CDN which detects class usage via MutationObserver and
+ * generates CSS on-demand.
+ *
+ * @param compiledJs - The compiled widget JavaScript code
+ * @param importMap - Import map for dependencies
+ * @param options - HTML generation options
+ */
+export function generateHtml(
+  compiledJs: string,
+  importMap: ImportMapEntry,
+  options: HtmlOptions = {},
+): string {
+  const {
+    title = 'Patchwork Widget',
+    theme = 'dark',
+    customCss = '',
+    props = {},
+    services = [],
+  } = options;
+
+  const themeCss = generateThemeCss(theme);
+  const tailwindCdn = getTailwindCdnScript();
+  const widgetCode = transformWidgetCode(compiledJs);
+  const importMapJson = JSON.stringify({ imports: importMap }, null, 2);
+  const propsJson = JSON.stringify(props);
+  const mountCode = generateMountCode(propsJson);
+  const serviceBridge = generateServiceBridge(services);
+
+  return `<!DOCTYPE html>
+<html lang="en" class="${theme}">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>${title}</title>
+  <!-- Tailwind Play CDN - config must be set BEFORE script loads -->
+  <script>
+    window.tailwind = {
+      config: ${JSON.stringify({
+        darkMode: 'class',
+        theme: {
+          extend: {
+            colors: {
+              border: 'hsl(var(--border))',
+              input: 'hsl(var(--input))',
+              ring: 'hsl(var(--ring))',
+              background: 'hsl(var(--background))',
+              foreground: 'hsl(var(--foreground))',
+              primary: {
+                DEFAULT: 'hsl(var(--primary))',
+                foreground: 'hsl(var(--primary-foreground))',
+              },
+              secondary: {
+                DEFAULT: 'hsl(var(--secondary))',
+                foreground: 'hsl(var(--secondary-foreground))',
+              },
+              destructive: {
+                DEFAULT: 'hsl(var(--destructive))',
+                foreground: 'hsl(var(--destructive-foreground))',
+              },
+              muted: {
+                DEFAULT: 'hsl(var(--muted))',
+                foreground: 'hsl(var(--muted-foreground))',
+              },
+              accent: {
+                DEFAULT: 'hsl(var(--accent))',
+                foreground: 'hsl(var(--accent-foreground))',
+              },
+              popover: {
+                DEFAULT: 'hsl(var(--popover))',
+                foreground: 'hsl(var(--popover-foreground))',
+              },
+              card: {
+                DEFAULT: 'hsl(var(--card))',
+                foreground: 'hsl(var(--card-foreground))',
+              },
+            },
+            borderRadius: {
+              lg: 'var(--radius)',
+              md: 'calc(var(--radius) - 2px)',
+              sm: 'calc(var(--radius) - 4px)',
+            },
+          },
+        },
+      })}
+    };
+  </script>
+  <script src="${tailwindCdn}" crossorigin></script>
+  <script type="importmap">${importMapJson}</script>
+  <style>${themeCss}${customCss}</style>
+</head>
+<body>
+  <div id="root"></div>
+  <script>
+    // Service bridge
+    ${serviceBridge}
+  </script>
+  <script type="module">
+    // Widget code
+    ${widgetCode}
+  </script>
+  <script type="module">
+    // Mount the widget
+    ${mountCode}
+  </script>
+</body>
+</html>`;
+}
+
+/**
+ * Get the default import map for this image
+ */
+export function getDefaultImportMap(cdn = 'https://esm.sh'): ImportMapEntry {
+  return {
+    react: `${cdn}/react@18`,
+    'react/': `${cdn}/react@18/`,
+    'react-dom': `${cdn}/react-dom@18`,
+    'react-dom/': `${cdn}/react-dom@18/`,
+    'react-dom/client': `${cdn}/react-dom@18/client`,
+  };
+}
+
+/**
+ * Get framework dependencies declared by this image
+ */
+export function getFrameworkDependencies(): Record<string, string> {
+  return {
+    react: '^18.0.0',
+    'react-dom': '^18.0.0',
+  };
+}