create-skybridge 0.0.0-dev.1b2cb1b → 0.0.0-dev.1b3b81f

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-skybridge",
-  "version": "0.0.0-dev.1b2cb1b",
+  "version": "0.0.0-dev.1b3b81f",
   "type": "module",
   "license": "MIT",
   "author": "Alpic",
@@ -24,7 +24,7 @@
   "devDependencies": {
     "@types/cross-spawn": "^6.0.6",
     "typescript": "^6.0.3",
-    "vitest": "^4.1.9"
+    "vitest": "^4.1.10"
   },
   "scripts": {
     "build": "tsc",

package/templates/blank/node_modules/.bin/alpic

@@ -10,9 +10,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.148.1_@opentelemetry+api@1.9.1_@opentelemetry+core@2.8.0_@opentelemetry+api@1.9_dc7708ba103efafb508db02d69c9f925/node_modules/alpic/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.148.1_@opentelemetry+api@1.9.1_@opentelemetry+core@2.8.0_@opentelemetry+api@1.9_dc7708ba103efafb508db02d69c9f925/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.156.0_@opentelemetry+api@1.9.1_@opentelemetry+core@2.9.0_@opentelemetry+api@1.9_1e4d6b8f8010991ae8bdea8fb1777fd0/node_modules/alpic/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.156.0_@opentelemetry+api@1.9.1_@opentelemetry+core@2.9.0_@opentelemetry+api@1.9_1e4d6b8f8010991ae8bdea8fb1777fd0/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.148.1_@opentelemetry+api@1.9.1_@opentelemetry+core@2.8.0_@opentelemetry+api@1.9_dc7708ba103efafb508db02d69c9f925/node_modules/alpic/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.148.1_@opentelemetry+api@1.9.1_@opentelemetry+core@2.8.0_@opentelemetry+api@1.9_dc7708ba103efafb508db02d69c9f925/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.156.0_@opentelemetry+api@1.9.1_@opentelemetry+core@2.9.0_@opentelemetry+api@1.9_1e4d6b8f8010991ae8bdea8fb1777fd0/node_modules/alpic/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.156.0_@opentelemetry+api@1.9.1_@opentelemetry+core@2.9.0_@opentelemetry+api@1.9_1e4d6b8f8010991ae8bdea8fb1777fd0/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../alpic/bin/run.js" "$@"

package/templates/blank/node_modules/.bin/tsx

@@ -10,9 +10,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/tsx@4.23.0/node_modules/tsx/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/tsx@4.23.0/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/tsx@4.23.1/node_modules/tsx/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/tsx@4.23.1/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/tsx@4.23.0/node_modules/tsx/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/tsx@4.23.0/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/tsx@4.23.1/node_modules/tsx/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/tsx@4.23.1/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../tsx/dist/cli.mjs" "$@"

package/templates/blank/node_modules/.bin/vite

@@ -10,9 +10,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@8.1.3_@types+node@24.13.2_esbuild@0.28.1_jiti@2.7.0_terser@5.44.1_tsx@4.23.0_yaml@2.8.2/node_modules/vite/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@8.1.3_@types+node@24.13.2_esbuild@0.28.1_jiti@2.7.0_terser@5.44.1_tsx@4.23.0_yaml@2.8.2/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@8.1.5_@types+node@24.13.3_esbuild@0.28.1_jiti@2.7.0_terser@5.44.1_tsx@4.23.1_yaml@2.9.0/node_modules/vite/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@8.1.5_@types+node@24.13.3_esbuild@0.28.1_jiti@2.7.0_terser@5.44.1_tsx@4.23.1_yaml@2.9.0/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@8.1.3_@types+node@24.13.2_esbuild@0.28.1_jiti@2.7.0_terser@5.44.1_tsx@4.23.0_yaml@2.8.2/node_modules/vite/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@8.1.3_@types+node@24.13.2_esbuild@0.28.1_jiti@2.7.0_terser@5.44.1_tsx@4.23.0_yaml@2.8.2/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@8.1.5_@types+node@24.13.3_esbuild@0.28.1_jiti@2.7.0_terser@5.44.1_tsx@4.23.1_yaml@2.9.0/node_modules/vite/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@8.1.5_@types+node@24.13.3_esbuild@0.28.1_jiti@2.7.0_terser@5.44.1_tsx@4.23.1_yaml@2.9.0/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../vite/bin/vite.js" "$@"

package/templates/blank/package.json

@@ -13,14 +13,14 @@
   },
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.29.0",
-    "skybridge": "^0.0.0-dev.1b2cb1b",
-    "vite": "^8.1.3"
+    "skybridge": "^0.0.0-dev.1b3b81f",
+    "vite": "^8.1.5"
   },
   "devDependencies": {
-    "@skybridge/devtools": "^1.2.4",
-    "@types/node": "^24.13.2",
-    "alpic": "^1.147.1",
-    "tsx": "^4.23.0",
+    "@skybridge/devtools": "^1.2.7",
+    "@types/node": "^24.13.3",
+    "alpic": "^1.155.0",
+    "tsx": "^4.23.1",
     "typescript": "^6.0.3"
   },
   "engines": {

package/templates/blank/vite.config.ts

@@ -3,4 +3,10 @@ import { defineConfig } from "vite";
 
 export default defineConfig({
   plugins: [skybridge()],
+  server: {
+    forwardConsole: {
+      unhandledErrors: true,
+      logLevels: ["error"],
+    },
+  },
 });

package/templates/demo/node_modules/.bin/alpic

@@ -10,9 +10,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.148.1_@opentelemetry+api@1.9.1_@opentelemetry+core@2.8.0_@opentelemetry+api@1.9_dc7708ba103efafb508db02d69c9f925/node_modules/alpic/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.148.1_@opentelemetry+api@1.9.1_@opentelemetry+core@2.8.0_@opentelemetry+api@1.9_dc7708ba103efafb508db02d69c9f925/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.156.0_@opentelemetry+api@1.9.1_@opentelemetry+core@2.9.0_@opentelemetry+api@1.9_1e4d6b8f8010991ae8bdea8fb1777fd0/node_modules/alpic/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.156.0_@opentelemetry+api@1.9.1_@opentelemetry+core@2.9.0_@opentelemetry+api@1.9_1e4d6b8f8010991ae8bdea8fb1777fd0/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.148.1_@opentelemetry+api@1.9.1_@opentelemetry+core@2.8.0_@opentelemetry+api@1.9_dc7708ba103efafb508db02d69c9f925/node_modules/alpic/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.148.1_@opentelemetry+api@1.9.1_@opentelemetry+core@2.8.0_@opentelemetry+api@1.9_dc7708ba103efafb508db02d69c9f925/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.156.0_@opentelemetry+api@1.9.1_@opentelemetry+core@2.9.0_@opentelemetry+api@1.9_1e4d6b8f8010991ae8bdea8fb1777fd0/node_modules/alpic/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.156.0_@opentelemetry+api@1.9.1_@opentelemetry+core@2.9.0_@opentelemetry+api@1.9_1e4d6b8f8010991ae8bdea8fb1777fd0/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../alpic/bin/run.js" "$@"

package/templates/demo/node_modules/.bin/tsx

@@ -10,9 +10,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/tsx@4.23.0/node_modules/tsx/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/tsx@4.23.0/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/tsx@4.23.1/node_modules/tsx/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/tsx@4.23.1/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/tsx@4.23.0/node_modules/tsx/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/tsx@4.23.0/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/tsx@4.23.1/node_modules/tsx/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/tsx@4.23.1/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../tsx/dist/cli.mjs" "$@"

package/templates/demo/node_modules/.bin/vite

@@ -10,9 +10,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@8.1.3_@types+node@24.13.2_esbuild@0.28.1_jiti@2.7.0_terser@5.44.1_tsx@4.23.0_yaml@2.8.2/node_modules/vite/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@8.1.3_@types+node@24.13.2_esbuild@0.28.1_jiti@2.7.0_terser@5.44.1_tsx@4.23.0_yaml@2.8.2/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@8.1.5_@types+node@24.13.3_esbuild@0.28.1_jiti@2.7.0_terser@5.44.1_tsx@4.23.1_yaml@2.9.0/node_modules/vite/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@8.1.5_@types+node@24.13.3_esbuild@0.28.1_jiti@2.7.0_terser@5.44.1_tsx@4.23.1_yaml@2.9.0/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@8.1.3_@types+node@24.13.2_esbuild@0.28.1_jiti@2.7.0_terser@5.44.1_tsx@4.23.0_yaml@2.8.2/node_modules/vite/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@8.1.3_@types+node@24.13.2_esbuild@0.28.1_jiti@2.7.0_terser@5.44.1_tsx@4.23.0_yaml@2.8.2/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@8.1.5_@types+node@24.13.3_esbuild@0.28.1_jiti@2.7.0_terser@5.44.1_tsx@4.23.1_yaml@2.9.0/node_modules/vite/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@8.1.5_@types+node@24.13.3_esbuild@0.28.1_jiti@2.7.0_terser@5.44.1_tsx@4.23.1_yaml@2.9.0/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../vite/bin/vite.js" "$@"

package/templates/demo/package.json

@@ -12,27 +12,27 @@
     "deploy": "alpic deploy"
   },
   "dependencies": {
-    "@alpic-ai/ui": "^1.147.1",
+    "@alpic-ai/ui": "^1.155.0",
     "@modelcontextprotocol/sdk": "^1.29.0",
-    "lucide-react": "^1.23.0",
+    "lucide-react": "^1.25.0",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
-    "skybridge": "^0.0.0-dev.1b2cb1b",
+    "skybridge": "^0.0.0-dev.1b3b81f",
     "sonner": "^2.0.7",
     "tw-animate-css": "^1.4.0",
-    "vite": "^8.1.3",
+    "vite": "^8.1.5",
     "zod": "^4.4.3"
   },
   "devDependencies": {
-    "@skybridge/devtools": "^1.2.4",
-    "@tailwindcss/vite": "^4.3.2",
-    "@types/node": "^24.13.2",
+    "@skybridge/devtools": "^1.2.7",
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/node": "^24.13.3",
     "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.3",
-    "alpic": "^1.147.1",
-    "tailwindcss": "^4.3.2",
-    "tsx": "^4.23.0",
+    "alpic": "^1.155.0",
+    "tailwindcss": "^4.3.3",
+    "tsx": "^4.23.1",
     "typescript": "^6.0.3"
   },
   "engines": {

package/templates/demo/vite.config.ts

@@ -6,6 +6,12 @@ import { defineConfig } from "vite";
 
 export default defineConfig({
   plugins: [skybridge(), react(), tailwindcss()],
+  server: {
+    forwardConsole: {
+      unhandledErrors: true,
+      logLevels: ["error"],
+    },
+  },
   resolve: {
     alias: {
       "@": path.resolve(__dirname, "./src"),

package/templates/ecom/.ladle/components.tsx

@@ -0,0 +1,26 @@
+import type { GlobalProvider } from "@ladle/react";
+import "../src/index.css";
+import { viewFrame } from "../src/components/view-frame.css";
+import { darkTheme, lightTheme } from "../src/design/tokens";
+import { cx } from "../src/lib/cx";
+
+/**
+ * Ladle's built-in theme toggle (sun/moon in the toolbar) drives
+ * globalState.theme. We reuse it to flip the widget's own palette, so the
+ * preview theme and the widget theme always match. The Provider applies the
+ * real ViewFrame surface (viewFrame + theme class), and index.css loads the
+ * brand @font-face rules, so stories preview against the actual frame.
+ */
+export const Provider: GlobalProvider = ({ children, globalState }) => {
+  const themeClass = globalState.theme === "dark" ? darkTheme : lightTheme;
+
+  return (
+    <div
+      className={cx(viewFrame, themeClass)}
+      data-theme={globalState.theme}
+      style={{ minHeight: "100vh", padding: 32 }}
+    >
+      {children}
+    </div>
+  );
+};

package/templates/ecom/.ladle/config.mjs

@@ -0,0 +1,11 @@
+/** @type {import('@ladle/react').UserConfig} */
+export default {
+  stories: "src/**/*.stories.{ts,tsx}",
+  viteConfig: ".ladle/vite.config.ts",
+  addons: {
+    theme: {
+      enabled: true,
+      defaultState: "light",
+    },
+  },
+};

package/templates/ecom/.ladle/vite.config.ts

@@ -0,0 +1,11 @@
+import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";
+import { defineConfig } from "vite";
+
+/**
+ * Ladle-only vite config. Intentionally omits the Skybridge plugin (which
+ * transforms MCP view boilerplate and crashes Ladle's bundler) and the
+ * @vitejs/plugin-react call (Ladle provides its own).
+ */
+export default defineConfig({
+  plugins: [vanillaExtractPlugin()],
+});

package/templates/ecom/_gitignore

@@ -1,5 +1,6 @@
 node_modules/
 dist/
+build/
 .env*
 !.env.template
 .DS_store

package/templates/ecom/node_modules/.bin/alpic

@@ -10,9 +10,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.148.1_@opentelemetry+api@1.9.1_@opentelemetry+core@2.8.0_@opentelemetry+api@1.9_dc7708ba103efafb508db02d69c9f925/node_modules/alpic/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.148.1_@opentelemetry+api@1.9.1_@opentelemetry+core@2.8.0_@opentelemetry+api@1.9_dc7708ba103efafb508db02d69c9f925/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.156.0_@opentelemetry+api@1.9.1_@opentelemetry+core@2.9.0_@opentelemetry+api@1.9_1e4d6b8f8010991ae8bdea8fb1777fd0/node_modules/alpic/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.156.0_@opentelemetry+api@1.9.1_@opentelemetry+core@2.9.0_@opentelemetry+api@1.9_1e4d6b8f8010991ae8bdea8fb1777fd0/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.148.1_@opentelemetry+api@1.9.1_@opentelemetry+core@2.8.0_@opentelemetry+api@1.9_dc7708ba103efafb508db02d69c9f925/node_modules/alpic/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.148.1_@opentelemetry+api@1.9.1_@opentelemetry+core@2.8.0_@opentelemetry+api@1.9_dc7708ba103efafb508db02d69c9f925/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.156.0_@opentelemetry+api@1.9.1_@opentelemetry+core@2.9.0_@opentelemetry+api@1.9_1e4d6b8f8010991ae8bdea8fb1777fd0/node_modules/alpic/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/alpic@1.156.0_@opentelemetry+api@1.9.1_@opentelemetry+core@2.9.0_@opentelemetry+api@1.9_1e4d6b8f8010991ae8bdea8fb1777fd0/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../alpic/bin/run.js" "$@"

package/templates/ecom/node_modules/.bin/ladle

@@ -0,0 +1,21 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@ladle+react@5.1.1_@types+node@24.13.2_@types+react@19.2.17_jiti@2.7.0_lightningcss@1.3_1166394f95df9cef33a0930b8ede5a5f/node_modules/@ladle/react/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@ladle+react@5.1.1_@types+node@24.13.2_@types+react@19.2.17_jiti@2.7.0_lightningcss@1.3_1166394f95df9cef33a0930b8ede5a5f/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@ladle+react@5.1.1_@types+node@24.13.2_@types+react@19.2.17_jiti@2.7.0_lightningcss@1.3_1166394f95df9cef33a0930b8ede5a5f/node_modules/@ladle/react/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/@ladle+react@5.1.1_@types+node@24.13.2_@types+react@19.2.17_jiti@2.7.0_lightningcss@1.3_1166394f95df9cef33a0930b8ede5a5f/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../@ladle/react/lib/cli/cli.js" "$@"
+else
+  exec node  "$basedir/../@ladle/react/lib/cli/cli.js" "$@"
+fi

package/templates/ecom/node_modules/.bin/vite

@@ -10,9 +10,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@8.1.3_@types+node@24.13.2_esbuild@0.28.1_jiti@2.7.0_terser@5.44.1_tsx@4.23.0_yaml@2.8.2/node_modules/vite/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@8.1.3_@types+node@24.13.2_esbuild@0.28.1_jiti@2.7.0_terser@5.44.1_tsx@4.23.0_yaml@2.8.2/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@8.1.5_@types+node@24.13.2_esbuild@0.28.1_jiti@2.7.0_terser@5.44.1_tsx@4.23.0_yaml@2.9.0/node_modules/vite/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@8.1.5_@types+node@24.13.2_esbuild@0.28.1_jiti@2.7.0_terser@5.44.1_tsx@4.23.0_yaml@2.9.0/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@8.1.3_@types+node@24.13.2_esbuild@0.28.1_jiti@2.7.0_terser@5.44.1_tsx@4.23.0_yaml@2.8.2/node_modules/vite/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@8.1.3_@types+node@24.13.2_esbuild@0.28.1_jiti@2.7.0_terser@5.44.1_tsx@4.23.0_yaml@2.8.2/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@8.1.5_@types+node@24.13.2_esbuild@0.28.1_jiti@2.7.0_terser@5.44.1_tsx@4.23.0_yaml@2.9.0/node_modules/vite/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/vite@8.1.5_@types+node@24.13.2_esbuild@0.28.1_jiti@2.7.0_terser@5.44.1_tsx@4.23.0_yaml@2.9.0/node_modules:/home/runner/work/skybridge/skybridge/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../vite/bin/vite.js" "$@"

package/templates/ecom/package.json

@@ -9,16 +9,28 @@
     "dev:tunnel": "skybridge dev --tunnel",
     "build": "skybridge build",
     "start": "skybridge start",
-    "deploy": "alpic deploy"
+    "deploy": "alpic deploy",
+    "ladle": "ladle serve",
+    "ladle:build": "ladle build"
   },
   "dependencies": {
-    "skybridge": "workspace:*",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "skybridge": "^0.0.0-dev.1b3b81f",
     "vite": "^8.1.3",
     "zod": "^4.4.3"
   },
   "devDependencies": {
+    "@ladle/react": "^5.1.1",
     "@skybridge/devtools": "^1.2.4",
     "@types/node": "^24.13.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vanilla-extract/css": "^1.20.1",
+    "@vanilla-extract/recipes": "^0.5.7",
+    "@vanilla-extract/sprinkles": "^1.6.5",
+    "@vanilla-extract/vite-plugin": "^5.2.2",
+    "@vitejs/plugin-react": "^6.0.1",
     "alpic": "^1.147.1",
     "tsx": "^4.23.0",
     "typescript": "^6.0.3"

package/templates/ecom/src/components/chip.css.ts

@@ -0,0 +1,63 @@
+import { style } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+import { colors, primitives } from "../design/tokens";
+
+// A selectable pill used for option values (sizes, colors…). `selected`,
+// `outOfStock` and `nonExistent` are driven by the variant picker from the
+// sparse variant list.
+// @todo: tune the chip to your brand (radius, borders, selected treatment).
+export const chip = recipe({
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    gap: primitives.space["4xs"],
+    minHeight: "44px", // touch target
+    padding: `${primitives.space["4xs"]} ${primitives.space["3xs"]}`,
+    borderRadius: primitives.radius.m,
+    border: `${primitives.stroke.thin} solid ${colors.border.subtle}`,
+    backgroundColor: colors.surface.extraLight,
+    color: colors.content.intense,
+    fontFamily: primitives.font.family.primary,
+    fontSize: primitives.font.size.s,
+    cursor: "pointer",
+    transition: "border-color 150ms ease",
+    "@media": {
+      "(prefers-reduced-motion: reduce)": { transition: "none" },
+    },
+  },
+  variants: {
+    selected: {
+      true: {
+        borderColor: colors.common.accent,
+        borderWidth: primitives.stroke.medium,
+      },
+      false: {},
+    },
+    outOfStock: {
+      // Struck but still clickable; the buy CTA carries the state.
+      true: {
+        color: colors.content.subtle,
+        textDecoration: "line-through",
+      },
+      false: {},
+    },
+    nonExistent: {
+      // Faded and non-interactive, distinct from sold out above.
+      true: {
+        opacity: 0.35,
+        cursor: "default",
+      },
+      false: {},
+    },
+  },
+  defaultVariants: { selected: false, outOfStock: false, nonExistent: false },
+});
+
+// Small color/material swatch shown before the label on image chips.
+export const swatch = style({
+  width: "20px",
+  height: "20px",
+  borderRadius: primitives.radius.full,
+  objectFit: "cover",
+  display: "block",
+});

package/templates/ecom/src/components/chip.stories.tsx

@@ -0,0 +1,27 @@
+import { Chip } from "./chip";
+
+const SWATCH =
+  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Crect width='20' height='20' fill='%233b6cf0'/%3E%3C/svg%3E";
+
+const row = {
+  display: "flex",
+  gap: 8,
+  flexWrap: "wrap" as const,
+  maxWidth: 320,
+};
+
+export const States = () => (
+  <div style={row}>
+    <Chip label="M" />
+    <Chip label="L" selected />
+    <Chip label="XL" outOfStock /> {/* exists, sold out: clickable */}
+    <Chip label="XXL" nonExistent /> {/* combination does not exist */}
+  </div>
+);
+
+export const WithSwatch = () => (
+  <div style={row}>
+    <Chip label="Blue" media={SWATCH} selected />
+    <Chip label="Black" media={SWATCH} />
+  </div>
+);

package/templates/ecom/src/components/chip.tsx

@@ -0,0 +1,49 @@
+import * as styles from "./chip.css";
+
+type ChipProps = {
+  label: string;
+  selected?: boolean;
+  // Exists but sold out: struck-through and greyed, still clickable
+  outOfStock?: boolean;
+  // The combination does not exist at all (hole in the variant matrix):
+  // faded and non-interactive
+  nonExistent?: boolean;
+  onSelect?: () => void;
+  // Optional swatch image (e.g. one per color); omit for a plain text chip.
+  media?: string;
+};
+
+/**
+ * One option value as a selectable pill. Rendered as a `radio` inside the
+ * variant picker's `radiogroup`; the picker owns selection state and passes
+ * `selected`/`outOfStock`/`nonExistent` computed from the sparse variant list.
+ * An out-of-stock chip stays operable: aria-disabled announces the state to
+ * assistive tech without blocking activation. A nonexistent chip is natively
+ * disabled: the combination cannot be composed.
+ */
+export function Chip({
+  label,
+  selected,
+  outOfStock,
+  nonExistent,
+  onSelect,
+  media,
+}: ChipProps) {
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: custom radio; a styled button carries the swatch and availability states a native radio cannot, inside the picker radiogroup.
+    <button
+      type="button"
+      role="radio"
+      aria-checked={selected ?? false}
+      aria-disabled={outOfStock ?? false}
+      disabled={nonExistent ?? false}
+      className={styles.chip({ selected, outOfStock, nonExistent })}
+      onClick={onSelect}
+    >
+      {media ? (
+        <img className={styles.swatch} src={media} alt="" draggable={false} />
+      ) : null}
+      {label}
+    </button>
+  );
+}

package/templates/ecom/src/components/empty-state.stories.tsx

@@ -0,0 +1,3 @@
+import { EmptyState } from "./empty-state";
+
+export const NoResults = () => <EmptyState message="No products to show." />;

package/templates/ecom/src/components/empty-state.tsx

@@ -0,0 +1,12 @@
+import { sprinkles, text } from "../design/tokens";
+
+/** Centered message shown when there is nothing to render (e.g. no results). */
+export function EmptyState({ message }: { message: string }) {
+  return (
+    <div
+      className={sprinkles({ p: "l", textAlign: "center", color: "subtle" })}
+    >
+      <p className={text({ style: "bodyM" })}>{message}</p>
+    </div>
+  );
+}

package/templates/ecom/src/components/expandable-text.css.ts

@@ -0,0 +1,49 @@
+import { style } from "@vanilla-extract/css";
+import { recipe } from "@vanilla-extract/recipes";
+import { colors, primitives } from "../design/tokens";
+
+// @todo: collapsed height before "read more" appears. Tune to your type scale.
+const COLLAPSED_MAX_HEIGHT = "6em";
+
+export const container = style({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "flex-start",
+  gap: primitives.space["4xs"],
+});
+
+// `clamp` caps the height (applied whenever collapsed, so overflow can be
+// measured); `fade` masks the last line to a soft cutoff instead of an ellipsis
+// and is applied only when the text actually overflows (never on short copy).
+export const body = recipe({
+  base: {
+    color: colors.content.intense,
+    whiteSpace: "pre-line", // preserve paragraph breaks from the source
+  },
+  variants: {
+    clamp: {
+      true: { maxHeight: COLLAPSED_MAX_HEIGHT, overflow: "hidden" },
+      false: {},
+    },
+    fade: {
+      true: {
+        maskImage:
+          "linear-gradient(to bottom, black 0%, black 55%, transparent 100%)",
+        WebkitMaskImage:
+          "linear-gradient(to bottom, black 0%, black 55%, transparent 100%)",
+      },
+      false: {},
+    },
+  },
+  defaultVariants: { clamp: false, fade: false },
+});
+
+export const toggle = style({
+  padding: 0,
+  border: "none",
+  background: "none",
+  color: colors.common.accent,
+  fontFamily: primitives.font.family.primary,
+  fontSize: primitives.font.size.s,
+  cursor: "pointer",
+});

package/templates/ecom/src/components/expandable-text.stories.tsx

@@ -0,0 +1,20 @@
+import { ExpandableText } from "./expandable-text";
+
+const frame = { maxWidth: 360 };
+
+const LONG =
+  "A relaxed-fit jacket in water-repellent cotton.\n\nDropped shoulders, a two-way zip, and ribbed cuffs. Fully lined, with two zip pockets at the front and one inside. Designed to layer over a knit through the cooler months, and cut long enough to sit past the hip.";
+
+export const Long = () => (
+  <div style={frame}>
+    <ExpandableText>{LONG}</ExpandableText>
+  </div>
+);
+
+export const Short = () => (
+  <div style={frame}>
+    <ExpandableText>
+      A short description that never needs a toggle.
+    </ExpandableText>
+  </div>
+);

package/templates/ecom/src/components/expandable-text.tsx

@@ -0,0 +1,53 @@
+import { useLayoutEffect, useRef, useState } from "react";
+import { text } from "../design/tokens";
+import { useLabels } from "../i18n";
+import { cx } from "../lib/cx";
+import * as styles from "./expandable-text.css";
+
+/**
+ * Clamps long copy to a few lines with a "read more" toggle. Truncation is
+ * measured, not assumed: the toggle only appears when the text actually
+ * overflows the collapsed height, so short copy shows no button.
+ */
+export function ExpandableText({ children }: { children: string }) {
+  const labels = useLabels();
+  const bodyRef = useRef<HTMLParagraphElement>(null);
+  const [expanded, setExpanded] = useState(false);
+  const [overflows, setOverflows] = useState(false);
+
+  const collapsed = !expanded;
+
+  // Measure against the collapsed height (the clamp is applied whenever
+  // collapsed, so scrollHeight vs clientHeight is meaningful). Re-run when the
+  // text changes (e.g. the client switches variant) so the toggle tracks it.
+  // biome-ignore lint/correctness/useExhaustiveDependencies: children re-triggers the measure, it is not read in the body.
+  useLayoutEffect(() => {
+    const el = bodyRef.current;
+    if (el && collapsed) {
+      setOverflows(el.scrollHeight > el.clientHeight + 1);
+    }
+  }, [children, collapsed]);
+
+  return (
+    <div className={styles.container}>
+      <p
+        ref={bodyRef}
+        className={cx(
+          text({ style: "bodyS" }),
+          styles.body({ clamp: collapsed, fade: collapsed && overflows }),
+        )}
+      >
+        {children}
+      </p>
+      {overflows ? (
+        <button
+          type="button"
+          className={styles.toggle}
+          onClick={() => setExpanded((v) => !v)}
+        >
+          {expanded ? labels.readLess : labels.readMore}
+        </button>
+      ) : null}
+    </div>
+  );
+}