@swarm.ing/pieui 2.0.10 → 2.0.13

package/dist/cli.js

@@ -193027,6 +193027,7 @@ var require_lib4 = __commonJS((exports2, module2) => {
 // src/code/args.ts
 var parseArgs = (argv) => {
   const [command = ""] = argv;
+  const cardFlagSet = new Set(["--io", "--ajax"]);
   const outDirFlag = argv.find((arg) => arg.startsWith("--out-dir="));
   const srcDirFlag = argv.find((arg) => arg.startsWith("--src-dir="));
   const outDirIndex = argv.findIndex((arg) => arg === "--out-dir" || arg === "-o");
@@ -193038,12 +193039,17 @@ var parseArgs = (argv) => {
   let componentName;
   let createAppName;
   let eventName;
+  let cardAction;
+  let cardAjax = false;
+  let cardIo = false;
+  let pageAction;
+  let pagePath;
   let removeComponentName;
   let listFilter;
   if (command === "remove" && argv[1]) {
     removeComponentName = argv[1];
   }
-  if (command === "create-pie-app" && argv[1]) {
+  if ((command === "create-pie-app" || command === "create") && argv[1]) {
     createAppName = argv[1];
   }
   if (command === "list") {
@@ -193057,19 +193063,37 @@ var parseArgs = (argv) => {
     const filterArg = argv[1];
     listFilter = filterArg && validFilters.includes(filterArg) ? filterArg : "all";
   }
-  if (command === "add" && argv[1]) {
+  if (command === "card" && argv[1]) {
+    const validActions = ["add"];
+    if (validActions.includes(argv[1])) {
+      cardAction = argv[1];
+    }
+  }
+  if ((command === "card" && cardAction === "add" || command === "add") && argv[1]) {
+    const offset = command === "card" ? 2 : 1;
+    const cardArgv = argv.slice(offset);
+    const positionalArgs = cardArgv.filter((arg) => !cardFlagSet.has(arg));
+    cardIo = cardArgv.includes("--io");
+    cardAjax = cardArgv.includes("--ajax");
     const validTypes = [
       "simple",
       "complex",
       "simple-container",
       "complex-container"
     ];
-    if (validTypes.includes(argv[1])) {
-      componentType = argv[1];
-      componentName = argv[2];
+    if (validTypes.includes(positionalArgs[0])) {
+      componentType = positionalArgs[0];
+      componentName = positionalArgs[1];
     } else {
       componentType = "complex-container";
-      componentName = argv[1];
+      componentName = positionalArgs[0];
+    }
+  }
+  if (command === "page" && argv[1]) {
+    const validActions = ["add"];
+    if (validActions.includes(argv[1])) {
+      pageAction = argv[1];
+      pagePath = argv[2];
     }
   }
   if (command === "list-events" && argv[1]) {
@@ -193102,16 +193126,23 @@ var parseArgs = (argv) => {
     componentType,
     eventName,
     removeComponentName,
-    listFilter
+    listFilter,
+    cardAction,
+    cardAjax,
+    cardIo,
+    pageAction,
+    pagePath
   };
 };
 var printUsage = () => {
   console.log("Usage: pieui <command> [options]");
   console.log("");
   console.log("Commands:");
+  console.log("  create <AppName>                        Create a Next.js app and run pieui init inside it");
   console.log("  create-pie-app <AppName>                Create a blank Next.js web template for PieUI (bun create next-app under the hood)");
   console.log("  init                                    Initialize piecomponents directory with registry.ts");
-  console.log("  add [type] <ComponentName>              Create a new component in piecomponents directory");
+  console.log("  card add [type] <ComponentName> [--io] [--ajax] Create a new component in piecomponents directory");
+  console.log("  page add <path>                         Create app/<path>/page.tsx from the standard Pie page template");
   console.log("  push <ComponentName>                    Archive piecomponents/<ComponentName> and upload to PieUI server");
   console.log("  pull <ComponentName>                    Download archive from PieUI server and extract into piecomponents/<ComponentName>");
   console.log("  remote-remove <ComponentName>           Remove remote component from PieUI server");
@@ -193121,13 +193152,17 @@ var printUsage = () => {
   console.log("  postbuild                               Scan for components and generate manifest");
   console.log("  list [filter]                            List registered components in a table");
   console.log("");
-  console.log("Component types for add command:");
+  console.log("Component types for card add command:");
   console.log("  simple                  Simple component (only data prop)");
   console.log("  complex                 Complex component (data + children props)");
   console.log("  simple-container        Container with single content (data + content)");
   console.log("  complex-container       Container with array content (data + content[])");
   console.log("                         (default if type not specified)");
   console.log("");
+  console.log("Options for card add:");
+  console.log("  --io                         Add realtime support fields to the generated data interface");
+  console.log("  --ajax                       Add AJAX request fields to the generated data interface");
+  console.log("");
   console.log("Options for init:");
   console.log("  --out-dir <dir>, -o <dir>    Base directory for piecomponents (default: .)");
   console.log("");
@@ -193154,11 +193189,14 @@ var printUsage = () => {
   console.log("");
   console.log("Examples:");
   console.log("  pieui init");
+  console.log("  pieui create my-pie-app");
   console.log("  pieui create-pie-app my-pie-app");
   console.log("  pieui init --out-dir packages/app");
-  console.log("  pieui add MyCustomCard                        # Creates complex-container by default");
-  console.log("  pieui add simple MySimpleCard                 # Creates simple component");
-  console.log("  pieui add complex-container MyContainerCard   # Creates complex container");
+  console.log("  pieui card add MyCustomCard                   # Creates complex-container by default");
+  console.log("  pieui card add simple MySimpleCard            # Creates simple component");
+  console.log("  pieui card add complex-container MyContainerCard # Creates complex container");
+  console.log("  pieui card add simple LiveCard --io --ajax    # Adds realtime and AJAX fields");
+  console.log("  pieui page add chat                          # Creates app/chat/page.tsx");
   console.log("  pieui postbuild --append --out-dir dist");
   console.log("  pieui list                                    # List all components");
   console.log("  pieui list simple                             # List only simple components");
@@ -193175,7 +193213,7 @@ var import_fs = __toESM(require("fs"));
 var import_path = __toESM(require("path"));
 
 // src/code/templates/componentIndex.ts
-var componentIndexTemplate = (componentName) => `import { registerPieComponent } from "@piedata/pieui";
+var componentIndexTemplate = (componentName) => `import { registerPieComponent } from "@swarm.ing/pieui";
 import ${componentName} from "./ui/${componentName}";
 
 export default registerPieComponent({
@@ -193185,26 +193223,204 @@ export default registerPieComponent({
 `;
 
 // src/code/templates/componentTypes.ts
-var componentTypesTemplate = (componentName, baseInterface) => `import { ${baseInterface} } from '@piedata/pieui'
+var ioFields = `    useSocketioSupport?: boolean
+    useCentrifugeSupport?: boolean
+    useMittSupport?: boolean
+    centrifugeChannel?: string`;
+var ajaxFields = `    pathname?: string
+    depsNames: string[]
+    kwargs: Record<string, string | number | boolean>`;
+var componentTypesTemplate = (componentName, baseInterface, options = {}) => {
+  const extraSections = [options.io ? ioFields : "", options.ajax ? ajaxFields : ""].filter(Boolean).join(`
+
+`);
+  const extraFields = extraSections ? `
+
+${extraSections}` : "";
+  return `import { ${baseInterface} } from '@swarm.ing/pieui'
 
 export interface ${componentName}Data {
     name: string
     // Add your component-specific props here
+${extraFields}
 }
 
 export type ${componentName}Props = ${baseInterface}<${componentName}Data>
 `;
+};
+
+// src/code/templates/env.ts
+var envTemplate = () => `PIE_ENABLE_RENDERING_LOG=true
+PIE_API_SERVER=http://localhost:8008/
+PIE_CENTRIFUGE_SERVER=wss://localhost:8000/connection/websocket
+
+NEXT_PUBLIC_PIE_ENABLE_RENDERING_LOG=true
+NEXT_PUBLIC_PIE_API_SERVER=http://localhost:8008/
+NEXT_PUBLIC_PIE_CENTRIFUGE_SERVER=wss://localhost:8000/connection/websocket
+`;
+
+// src/code/templates/homePage.ts
+var homePageTemplate = `"use client";
+
+import PiePage from "@/app/_shared/page";
+import { Suspense } from "react";
+
+export default function HomePage() {
+  return (
+    <Suspense fallback={<></>}>
+      <PiePage />
+    </Suspense>
+  );
+}
+`;
+
+// src/code/templates/loadingScreen.ts
+var loadingScreenTemplate = `"use client";
+
+export default function LoadingScreen() {
+  return (
+    <div className="flex min-h-screen items-center justify-center text-sm text-neutral-500">
+      Loading...
+    </div>
+  );
+}
+`;
+
+// src/code/templates/rootLayout.ts
+var rootLayoutTemplate = `import type { Metadata } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+  title: "PieUI Project",
+  description: "Generated by PieUI.",
+  applicationName: "PieUI Project",
+  icons: {
+    icon: "/favicon.ico",
+    shortcut: "/favicon.ico",
+  },
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  );
+}
+`;
+
+// src/code/templates/sharedPage.ts
+var sharedPageTemplate = `"use client";
+
+import { useRouter } from "next/navigation";
+import { PieRoot } from "@swarm.ing/pieui";
+import "@/piecomponents/registry";
+import { usePathname, useSearchParams } from "next/navigation";
+
+export default function PiePage() {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const search = searchParams.toString();
+
+  return (
+    <PieRoot
+      location={{ pathname, search }}
+      config={{
+        apiServer: process.env.PIE_API_SERVER!,
+        centrifugeServer: process.env.PIE_CENTRIFUGE_SERVER!,
+        enableRenderingLog: true,
+      }}
+      onNavigate={(url) => router.push(url)}
+      fallback={<></>}
+    />
+  );
+}
+`;
 
-// src/code/templates/simpleComponent.ts
-var simpleComponentTemplate = (componentName) => `import React from 'react'
-import { PieCard } from '@piedata/pieui'
+// src/code/templates/nextConfig.ts
+var REQUIRED_NEXT_CONFIG_ENV_KEYS = [
+  "PIE_API_SERVER",
+  "PIE_CENTRIFUGE_SERVER",
+  "PIE_ENABLE_RENDERING_LOG"
+];
+var nextConfigTemplate = () => `import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  output: "standalone",
+  reactCompiler: false,
+  env: {
+    PIE_API_SERVER: process.env.PIE_API_SERVER,
+    PIE_CENTRIFUGE_SERVER: process.env.PIE_CENTRIFUGE_SERVER,
+    PIE_ENABLE_RENDERING_LOG: process.env.PIE_ENABLE_RENDERING_LOG,
+  },
+  reactStrictMode: true,
+  transpilePackages: ["@swarm.ing/pieui"],
+};
+
+export default nextConfig;
+`;
+
+// src/code/templates/pages/components/shared.ts
+var dataDestructureFor = (options = {}) => {
+  if (!options.io && !options.ajax) {
+    return "const { name } = data";
+  }
+  const fields = ["name"];
+  if (options.io) {
+    fields.push("useSocketioSupport", "useCentrifugeSupport", "useMittSupport", "centrifugeChannel");
+  }
+  if (options.ajax) {
+    fields.push("pathname", "depsNames", "kwargs");
+  }
+  return `const {
+    ${fields.join(`,
+    `)},
+} = data`;
+};
+var pieCardOpeningTagFor = (componentName, options = {}) => {
+  if (!options.io) {
+    return `<PieCard card='${componentName}' data={data}>`;
+  }
+  return `<PieCard
+            card='${componentName}'
+            data={data}
+            useSocketioSupport={useSocketioSupport}
+            useCentrifugeSupport={useCentrifugeSupport}
+            useMittSupport={useMittSupport}
+            centrifugeChannel={centrifugeChannel}
+            methods={{
+            }}
+        >`;
+};
+var ajaxSubmitDeclarationFor = (options = {}) => {
+  if (!options.ajax) {
+    return "";
+  }
+  return `
+    const ajaxSubmit = useAjaxSubmit(
+        setUiAjaxConfiguration,
+        kwargs,
+        depsNames,
+        pathname
+    )`;
+};
+
+// src/code/templates/pages/components/simpleComponent.ts
+var simpleComponentTemplate = (componentName, options = {}) => `import React from 'react'
+import { PieCard${options.ajax ? ", useAjaxSubmit, type SetUiAjaxConfigurationType" : ""} } from '@swarm.ing/pieui'
 import { ${componentName}Props } from '../types'
 
-const ${componentName} = ({ data }: ${componentName}Props) => {
-    const { name } = data
+const ${componentName} = ({ data${options.ajax ? ", setUiAjaxConfiguration" : ""} }: ${componentName}Props${options.ajax ? " & { setUiAjaxConfiguration?: SetUiAjaxConfigurationType }" : ""}) => {
+    ${dataDestructureFor(options)}
+    ${ajaxSubmitDeclarationFor(options)}
 
     return (
-        <PieCard card='${componentName}' data={data}>
+        ${pieCardOpeningTagFor(componentName, options)}
             <div>
                 <h2>${componentName}</h2>
                 {/* Add your component logic here */}
@@ -193215,17 +193431,17 @@ const ${componentName} = ({ data }: ${componentName}Props) => {
 
 export default ${componentName}
 `;
-
-// src/code/templates/complexComponent.ts
-var complexComponentTemplate = (componentName) => `import React from 'react'
-import { PieCard } from '@piedata/pieui'
+// src/code/templates/pages/components/complexComponent.ts
+var complexComponentTemplate = (componentName, options = {}) => `import React from 'react'
+import { PieCard${options.ajax ? ", useAjaxSubmit" : ""} } from '@swarm.ing/pieui'
 import { ${componentName}Props } from '../types'
 
-const ${componentName} = ({ data }: ${componentName}Props) => {
-    const { name } = data
+const ${componentName} = ({ data${options.ajax ? ", setUiAjaxConfiguration" : ""} }: ${componentName}Props) => {
+    ${dataDestructureFor(options)}
+    ${ajaxSubmitDeclarationFor(options)}
 
     return (
-        <PieCard card='${componentName}' data={data}>
+        ${pieCardOpeningTagFor(componentName, options)}
             <div>
                 <h2>${componentName}</h2>
                 {/* Add your component logic here */}
@@ -193236,10 +193452,9 @@ const ${componentName} = ({ data }: ${componentName}Props) => {
 
 export default ${componentName}
 `;
-
-// src/code/templates/simpleContainerComponent.ts
-var simpleContainerComponentTemplate = (componentName) => `import React, { useContext } from 'react'
-import { PieCard, UI, UIRendererContext } from '@piedata/pieui'
+// src/code/templates/pages/components/simpleContainerComponent.ts
+var simpleContainerComponentTemplate = (componentName, options = {}) => `import React, { useContext } from 'react'
+import { PieCard, UI, UIRendererContext${options.ajax ? ", useAjaxSubmit" : ""} } from '@swarm.ing/pieui'
 import { ${componentName}Props } from '../types'
 
 const ${componentName} = ({
@@ -193247,11 +193462,12 @@ const ${componentName} = ({
     content,
     setUiAjaxConfiguration,
 }: ${componentName}Props) => {
-    const { name } = data
+    ${dataDestructureFor(options)}
+    ${ajaxSubmitDeclarationFor(options)}
     const Renderer = useContext(UIRendererContext) ?? UI
 
     return (
-        <PieCard card='${componentName}' data={data}>
+        ${pieCardOpeningTagFor(componentName, options)}
             <div>
                 <h2>${componentName}</h2>
                 {/* Add your component logic here */}
@@ -193268,10 +193484,9 @@ const ${componentName} = ({
 
 export default ${componentName}
 `;
-
-// src/code/templates/complexContainerComponent.ts
-var complexContainerComponentTemplate = (componentName) => `import React, { useContext } from 'react'
-import { PieCard, UI, UIRendererContext } from '@piedata/pieui'
+// src/code/templates/pages/components/complexContainerComponent.ts
+var complexContainerComponentTemplate = (componentName, options = {}) => `import React, { useContext } from 'react'
+import { PieCard, UI, UIRendererContext${options.ajax ? ", useAjaxSubmit" : ""} } from '@swarm.ing/pieui'
 import { ${componentName}Props } from '../types'
 
 const ${componentName} = ({
@@ -193279,11 +193494,12 @@ const ${componentName} = ({
     content,
     setUiAjaxConfiguration,
 }: ${componentName}Props) => {
-    const { name } = data
+    ${dataDestructureFor(options)}
+    ${ajaxSubmitDeclarationFor(options)}
     const Renderer = useContext(UIRendererContext) ?? UI
 
     return (
-        <PieCard card='${componentName}' data={data}>
+        ${pieCardOpeningTagFor(componentName, options)}
             <div>
                 <h2>${componentName}</h2>
                 {/* Add your component logic here */}
@@ -193301,33 +193517,22 @@ const ${componentName} = ({
 
 export default ${componentName}
 `;
+// src/code/templates/pages/page.ts
+var pageTemplate = (pageComponentName) => `"use client";
 
-// src/code/templates/nextConfig.ts
-var REQUIRED_NEXT_CONFIG_ENV_KEYS = [
-  "PIE_API_SERVER",
-  "PIE_CENTRIFUGE_SERVER",
-  "PIE_ENABLE_RENDERING_LOG",
-  "PIE_PLATFORM"
-];
-var nextConfigTemplate = () => `import type { NextConfig } from "next";
-
-const nextConfig: NextConfig = {
-  output: "standalone",
-  reactCompiler: false,
-  env: {
-    PIE_API_SERVER: process.env.PIE_API_SERVER,
-    PIE_CENTRIFUGE_SERVER: process.env.PIE_CENTRIFUGE_SERVER,
-    PIE_ENABLE_RENDERING_LOG: process.env.PIE_ENABLE_RENDERING_LOG,
-    PIE_PLATFORM: process.env.PIE_PLATFORM || "telegram",
-  },
-  reactStrictMode: true,
-  transpilePackages: ["@piedata/pieui"],
-};
+import PiePage from "@/app/_shared/page";
+import { Suspense } from "react";
 
-export default nextConfig;
+export default function ${pageComponentName}() {
+  return (
+    <Suspense fallback={<></>}>
+      <PiePage />
+    </Suspense>
+  );
+}
 `;
 
-// src/code/templates/index.ts
+// src/code/templates/pages/index.ts
 var BASE_INTERFACE_BY_TYPE = {
   simple: "PieSimpleComponentProps",
   complex: "PieComplexComponentProps",
@@ -193335,17 +193540,17 @@ var BASE_INTERFACE_BY_TYPE = {
   "complex-container": "PieComplexContainerComponentProps"
 };
 var baseInterfaceFor = (componentType) => BASE_INTERFACE_BY_TYPE[componentType];
-var componentTemplateFor = (componentType, componentName) => {
+var componentTemplateFor = (componentType, componentName, options = {}) => {
   switch (componentType) {
     case "simple":
-      return simpleComponentTemplate(componentName);
+      return simpleComponentTemplate(componentName, options);
     case "complex":
-      return complexComponentTemplate(componentName);
+      return complexComponentTemplate(componentName, options);
     case "simple-container":
-      return simpleContainerComponentTemplate(componentName);
+      return simpleContainerComponentTemplate(componentName, options);
     case "complex-container":
     default:
-      return complexContainerComponentTemplate(componentName);
+      return complexContainerComponentTemplate(componentName, options);
   }
 };
 
@@ -193375,7 +193580,7 @@ var initCommand = (outDir) => {
   }
   const tailwindConfigPath = import_path.default.join(resolvedOutDir, "tailwind.config.js");
   const tailwindConfigTsPath = import_path.default.join(resolvedOutDir, "tailwind.config.ts");
-  const pieuiContentPath = "./node_modules/@piedata/pieui/dist/**/*.{js,mjs,ts,jsx,tsx}";
+  const pieuiContentPath = "./node_modules/@swarm.ing/pieui/dist/**/*.{js,mjs,ts,jsx,tsx}";
   let configPath = null;
   if (import_fs.default.existsSync(tailwindConfigPath)) {
     configPath = tailwindConfigPath;
@@ -193418,7 +193623,7 @@ var initCommand = (outDir) => {
   console.log("[pieui] Initialization complete!");
   console.log("[pieui] Next steps:");
   console.log('  1. Import "./piecomponents/registry" in your app entry point');
-  console.log('  2. Use "pieui add <ComponentName>" to create new components');
+  console.log('  2. Use "pieui card add <ComponentName>" to create new components');
 };
 var ensureNextConfig = (resolvedOutDir) => {
   const candidates = [
@@ -193455,12 +193660,7 @@ var ensureNextConfig = (resolvedOutDir) => {
   }
 };
 var CONFIG_OBJECT_OPEN = /(const\s+nextConfig\s*(?::\s*[A-Za-z_][\w.]*)?\s*=\s*|module\.exports\s*=\s*|export\s+default\s*)\{/;
-var envEntryFor = (key) => {
-  if (key === "PIE_PLATFORM") {
-    return `    ${key}: process.env.${key} || "telegram",`;
-  }
-  return `    ${key}: process.env.${key},`;
-};
+var envEntryFor = (key) => `    ${key}: process.env.${key},`;
 var ensureEnvKeys = (content) => {
   const missingKeys = REQUIRED_NEXT_CONFIG_ENV_KEYS.filter((key) => !content.includes(key));
   if (missingKeys.length === 0)
@@ -193493,16 +193693,16 @@ ${missingKeys.map(envEntryFor).join(`
 var ensureTranspilePieui = (content) => {
   const match = content.match(/transpilePackages\s*:\s*\[([\s\S]*?)]/);
   if (match) {
-    if (match[1].includes("@piedata/pieui"))
+    if (match[1].includes("@swarm.ing/pieui"))
       return content;
     const inner = match[1].trim();
     const separator = inner.length > 0 ? ", " : "";
-    console.log('[pieui] Adding "@piedata/pieui" to transpilePackages');
-    return content.replace(match[0], `transpilePackages: [${inner}${separator}"@piedata/pieui"]`);
+    console.log('[pieui] Adding "@swarm.ing/pieui" to transpilePackages');
+    return content.replace(match[0], `transpilePackages: [${inner}${separator}"@swarm.ing/pieui"]`);
   }
-  const inserted = insertIntoConfigObject(content, '  transpilePackages: ["@piedata/pieui"],');
+  const inserted = insertIntoConfigObject(content, '  transpilePackages: ["@swarm.ing/pieui"],');
   if (inserted) {
-    console.log('[pieui] Adding transpilePackages: ["@piedata/pieui"]');
+    console.log('[pieui] Adding transpilePackages: ["@swarm.ing/pieui"]');
     return inserted;
   }
   console.log("[pieui] Warning: could not locate nextConfig object to add transpilePackages automatically");
@@ -193557,10 +193757,10 @@ var updateRegistryFile = (registryPath, componentName, componentDir) => {
 `;
   import_fs3.default.writeFileSync(registryPath, registryContent, "utf8");
 };
-var addCommand = (componentName, componentType = "complex-container") => {
+var addCommand = (componentName, componentType = "complex-container", options = {}) => {
   if (!componentName) {
     console.error("[pieui] Error: Component name is required");
-    console.log("Usage: pieui add [type] <ComponentName>");
+    console.log("Usage: pieui card add [type] <ComponentName>");
     process.exit(1);
   }
   if (!/^[A-Z][a-zA-Z0-9]+$/.test(componentName)) {
@@ -193583,8 +193783,8 @@ var addCommand = (componentName, componentType = "complex-container") => {
     import_fs3.default.mkdirSync(import_path3.default.join(componentDir, "ui"), { recursive: true });
     import_fs3.default.mkdirSync(import_path3.default.join(componentDir, "types"), { recursive: true });
     import_fs3.default.writeFileSync(import_path3.default.join(componentDir, "index.ts"), componentIndexTemplate(componentName), "utf8");
-    import_fs3.default.writeFileSync(import_path3.default.join(componentDir, "types", "index.ts"), componentTypesTemplate(componentName, baseInterfaceFor(componentType)), "utf8");
-    import_fs3.default.writeFileSync(import_path3.default.join(componentDir, "ui", `${componentName}.tsx`), componentTemplateFor(componentType, componentName), "utf8");
+    import_fs3.default.writeFileSync(import_path3.default.join(componentDir, "types", "index.ts"), componentTypesTemplate(componentName, baseInterfaceFor(componentType), options), "utf8");
+    import_fs3.default.writeFileSync(import_path3.default.join(componentDir, "ui", `${componentName}.tsx`), componentTemplateFor(componentType, componentName, options), "utf8");
     const registryPath = resolveRegistryPath(pieComponentsDir);
     updateRegistryFile(registryPath, componentName, componentDir);
   } catch (error) {
@@ -193599,6 +193799,8 @@ var addCommand = (componentName, componentType = "complex-container") => {
   console.log(`[pieui] Updated registry.ts with new component`);
   console.log("");
   console.log(`[pieui] Component type: ${componentType}`);
+  console.log(`[pieui] IO fields: ${options.io ? "enabled" : "disabled"}`);
+  console.log(`[pieui] AJAX fields: ${options.ajax ? "enabled" : "disabled"}`);
   switch (componentType) {
     case "simple":
       console.log("  - Props: data only");
@@ -197911,7 +198113,7 @@ var postbuildCommand = async (srcDir, outDir, append) => {
   let existingEntries = [];
   if (append) {
     console.log("[pieui] Append mode enabled - loading existing pieui components");
-    const nodeModulesPath = import_path9.default.join(process.cwd(), "node_modules", "@piedata", "pieui", "dist", MANIFEST_FILENAME);
+    const nodeModulesPath = import_path9.default.join(process.cwd(), "node_modules", "@swarm.ing", "pieui", "dist", MANIFEST_FILENAME);
     if (import_fs7.default.existsSync(nodeModulesPath)) {
       try {
         const existingManifest = import_fs7.default.readFileSync(nodeModulesPath, "utf8");
@@ -198177,118 +198379,128 @@ ${text2}` : ""}`);
 [pieui] ${text}` : ""}`);
 };
 
-// src/code/commands/createPieApp.ts
+// src/code/commands/pageAdd.ts
 var import_fs11 = __toESM(require("fs"));
 var import_path13 = __toESM(require("path"));
+var normalizePagePath = (pagePath) => {
+  const trimmed = pagePath.trim();
+  if (!trimmed) {
+    throw new Error("Path is required for page add command");
+  }
+  const normalizedSlashes = trimmed.replace(/\\/g, "/");
+  const withoutRelativePrefix = normalizedSlashes.replace(/^\.\/+/, "");
+  const withoutAppPrefix = withoutRelativePrefix.replace(/^app\//, "");
+  const withoutEdgeSlashes = withoutAppPrefix.replace(/^\/+|\/+$/g, "");
+  const normalized = import_path13.default.posix.normalize(withoutEdgeSlashes);
+  if (!normalized || normalized === ".") {
+    throw new Error("Path is required for page add command");
+  }
+  if (normalized === ".." || normalized.startsWith("../") || normalized.includes("/../")) {
+    throw new Error("Page path must stay inside the app directory");
+  }
+  return normalized;
+};
+var toPascalCase = (value2) => value2.split(/[^a-zA-Z0-9]+/).filter(Boolean).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
+var pageComponentNameForPath = (pagePath) => {
+  const segments = pagePath.split("/").map((segment) => toPascalCase(segment)).filter(Boolean);
+  if (segments.length === 0) {
+    return "Page";
+  }
+  return `${segments.join("")}Page`;
+};
+var pageAddCommand = (pagePath) => {
+  const normalizedPath = normalizePagePath(pagePath);
+  const pageComponentName = pageComponentNameForPath(normalizedPath);
+  const appDir = import_path13.default.join(process.cwd(), "app");
+  const targetFile = import_path13.default.join(appDir, normalizedPath, "page.tsx");
+  const relativeTarget = import_path13.default.relative(appDir, targetFile);
+  if (relativeTarget.startsWith("..") || import_path13.default.isAbsolute(relativeTarget)) {
+    throw new Error("Page path must stay inside the app directory");
+  }
+  if (import_fs11.default.existsSync(targetFile)) {
+    console.error(`[pieui] Error: Page already exists at app/${normalizedPath}/page.tsx`);
+    process.exit(1);
+  }
+  import_fs11.default.mkdirSync(import_path13.default.dirname(targetFile), { recursive: true });
+  import_fs11.default.writeFileSync(targetFile, pageTemplate(pageComponentName), "utf8");
+  console.log(`[pieui] Page created successfully at app/${normalizedPath}/page.tsx`);
+};
+
+// src/code/commands/create.ts
+var import_fs12 = __toESM(require("fs"));
+var import_path14 = __toESM(require("path"));
 var import_child_process = require("child_process");
 var DEFAULT_TEMPLATE_SPEC = "next-app@latest";
-var SHARED_TEMPLATE_DIR_ENV = "PIEUI_SHARED_TEMPLATE_DIR";
-var AI_EXCHANGE_BOT_DIR_ENV = "PIEUI_AI_EXCHANGE_BOT_DIR";
-var BACKEND_LINK_COMMENT = "// TODO(pie-backend): Link generated Python Unicorn backend routes here once backend template sync is enabled.";
-var updateNextScriptsToBun = (packageJsonPath) => {
-  if (!import_fs11.default.existsSync(packageJsonPath))
+var clearDirectory = (targetDir) => {
+  if (!import_fs12.default.existsSync(targetDir))
     return;
-  try {
-    const pkg = JSON.parse(import_fs11.default.readFileSync(packageJsonPath, "utf8"));
-    if (!pkg.scripts)
-      return;
-    const updates = {
-      dev: "bun --bun next dev",
-      build: "bun --bun next build",
-      start: "bun --bun next start"
-    };
-    for (const [scriptName, scriptValue] of Object.entries(updates)) {
-      if (pkg.scripts[scriptName]) {
-        pkg.scripts[scriptName] = scriptValue;
-      }
-    }
-    import_fs11.default.writeFileSync(packageJsonPath, `${JSON.stringify(pkg, null, 2)}
-`, "utf8");
-  } catch {
+  for (const entry of import_fs12.default.readdirSync(targetDir)) {
+    import_fs12.default.rmSync(import_path14.default.join(targetDir, entry), { recursive: true, force: true });
   }
 };
-var appendBackendLinkComment = (pagePath) => {
-  if (!import_fs11.default.existsSync(pagePath))
-    return;
-  const page = import_fs11.default.readFileSync(pagePath, "utf8");
-  if (page.includes(BACKEND_LINK_COMMENT))
-    return;
-  import_fs11.default.writeFileSync(pagePath, `${page.trimEnd()}
-
-${BACKEND_LINK_COMMENT}
-`, "utf8");
+var writeFile = (filePath, content) => {
+  import_fs12.default.mkdirSync(import_path14.default.dirname(filePath), { recursive: true });
+  import_fs12.default.writeFileSync(filePath, content, "utf8");
 };
-var uniq = (items) => [...new Set(items)];
-var isDirectory = (target) => {
-  try {
-    return import_fs11.default.statSync(target).isDirectory();
-  } catch {
-    return false;
-  }
-};
-var resolveSharedTemplateDir = () => {
-  const explicitSharedDir = process.env[SHARED_TEMPLATE_DIR_ENV];
-  if (explicitSharedDir) {
-    const normalized = import_path13.default.resolve(explicitSharedDir);
-    if (!isDirectory(normalized)) {
-      throw new Error(`${SHARED_TEMPLATE_DIR_ENV} points to a missing directory: ${normalized}`);
-    }
-    return normalized;
-  }
-  const cwd = process.cwd();
-  const baseDirs = [cwd, import_path13.default.resolve(cwd, ".."), import_path13.default.resolve(cwd, "../..")];
-  const explicitRepoDir = process.env[AI_EXCHANGE_BOT_DIR_ENV];
-  if (explicitRepoDir) {
-    baseDirs.unshift(import_path13.default.resolve(explicitRepoDir));
-  }
-  const repoNames = ["ai-exchange-bot", "ai-exchange-web", "a-exchange-web"];
-  const repoCandidates = uniq([
-    ...baseDirs,
-    ...baseDirs.flatMap((base) => repoNames.map((name) => import_path13.default.join(base, name)))
-  ]).filter((candidate) => isDirectory(candidate));
-  const sharedSubpaths = [
-    "_shared",
-    "src/_shared",
-    "app/_shared",
-    "pages/_shared",
-    "pages/components/_shared",
-    "apps/web/_shared",
-    "apps/web/src/_shared"
+var resolveTemplatePublicDir = () => {
+  const entrypointPath = process.argv[1] ? import_path14.default.resolve(process.argv[1]) : import_path14.default.join(process.cwd(), "src", "cli.ts");
+  const entrypointDir = import_path14.default.dirname(entrypointPath);
+  const candidateDirs = [
+    import_path14.default.join(entrypointDir, "code", "public"),
+    import_path14.default.join(process.cwd(), "src", "code", "public")
   ];
-  for (const repoDir of repoCandidates) {
-    for (const subpath of sharedSubpaths) {
-      const candidate = import_path13.default.join(repoDir, subpath);
-      if (isDirectory(candidate)) {
-        return candidate;
-      }
+  for (const candidateDir of candidateDirs) {
+    if (import_fs12.default.existsSync(candidateDir)) {
+      return candidateDir;
     }
   }
-  throw new Error([
-    "Could not locate a _shared template directory from ai-exchange-bot.",
-    `Set ${SHARED_TEMPLATE_DIR_ENV}=/absolute/path/to/_shared`,
-    `or ${AI_EXCHANGE_BOT_DIR_ENV}=/absolute/path/to/ai-exchange-bot.`
-  ].join(" "));
+  throw new Error("[pieui] Could not resolve bundled public template assets");
 };
-var copySharedTemplate = (sharedTemplateDir, appDir) => {
-  const destination = import_path13.default.join(appDir, "_shared");
-  import_fs11.default.cpSync(sharedTemplateDir, destination, { recursive: true, force: true });
+var scaffoldCreateAppFiles = (appDir) => {
+  clearDirectory(import_path14.default.join(appDir, "public"));
+  writeFile(import_path14.default.join(appDir, "app", "_shared", "page.tsx"), sharedPageTemplate);
+  writeFile(import_path14.default.join(appDir, "app", "page.tsx"), homePageTemplate);
+  writeFile(import_path14.default.join(appDir, "app", "layout.tsx"), rootLayoutTemplate);
+  import_fs12.default.rmSync(import_path14.default.join(appDir, "app", "_shared", "simple.tsx"), {
+    force: true
+  });
+  import_fs12.default.rmSync(import_path14.default.join(appDir, "app", "piecache.json"), { force: true });
+  import_fs12.default.rmSync(import_path14.default.join(appDir, "app", "favicon.ico"), { force: true });
+  writeFile(import_path14.default.join(appDir, "components", "LoadingScreen.tsx"), loadingScreenTemplate);
+  import_fs12.default.rmSync(import_path14.default.join(appDir, "components", "ErrorToast.tsx"), { force: true });
+  import_fs12.default.cpSync(resolveTemplatePublicDir(), import_path14.default.join(appDir, "public"), {
+    recursive: true,
+    force: true
+  });
 };
-var createPieAppCommand = (appName) => {
+var runBunCommand = (bunBin, args, cwd) => {
+  const result = import_child_process.spawnSync(bunBin, args, {
+    cwd,
+    stdio: "inherit",
+    env: process.env
+  });
+  if (result.error) {
+    throw result.error;
+  }
+  if (result.status !== 0) {
+    throw new Error(`${args.join(" ")} failed (exit code ${result.status ?? "unknown"})`);
+  }
+};
+var createCommand = (appName) => {
   const trimmedAppName = appName.trim();
   if (!trimmedAppName) {
-    console.error("[pieui] Error: App name is required for create-pie-app command");
+    console.error("[pieui] Error: App name is required for create command");
     process.exit(1);
   }
-  const appDir = import_path13.default.resolve(process.cwd(), trimmedAppName);
-  if (import_fs11.default.existsSync(appDir)) {
+  const appDir = import_path14.default.resolve(process.cwd(), trimmedAppName);
+  if (import_fs12.default.existsSync(appDir)) {
     console.error(`[pieui] Error: Target directory already exists: ${trimmedAppName}`);
     process.exit(1);
   }
   const bunBin = process.env.PIEUI_CREATE_BUN_BIN || "bun";
   const templateSpec = process.env.PIEUI_CREATE_NEXT_APP_SPEC || DEFAULT_TEMPLATE_SPEC;
-  console.log(`[pieui] Creating blank PieUI web template in "${trimmedAppName}"...`);
-  const args = ["create", templateSpec, trimmedAppName, "--yes"];
-  const result = import_child_process.spawnSync(bunBin, args, {
+  console.log(`[pieui] Creating Next.js app in "${trimmedAppName}"...`);
+  const result = import_child_process.spawnSync(bunBin, ["create", templateSpec, trimmedAppName, "--yes"], {
     cwd: process.cwd(),
     stdio: "inherit",
     env: process.env
@@ -198297,18 +198509,13 @@ var createPieAppCommand = (appName) => {
     throw result.error;
   }
   if (result.status !== 0) {
-    throw new Error(`create-pie-app failed (exit code ${result.status ?? "unknown"})`);
-  }
-  const sharedTemplateDir = resolveSharedTemplateDir();
-  copySharedTemplate(sharedTemplateDir, appDir);
-  updateNextScriptsToBun(import_path13.default.join(appDir, "package.json"));
-  appendBackendLinkComment(import_path13.default.join(appDir, "app", "page.tsx"));
-  console.log("[pieui] Template created successfully.");
-  console.log(`[pieui] Copied _shared from: ${sharedTemplateDir}`);
-  console.log(`[pieui] Next steps:`);
-  console.log(`  1. cd ${trimmedAppName}`);
-  console.log(`  2. bun install`);
-  console.log(`  3. bun run dev`);
+    throw new Error(`create failed (exit code ${result.status ?? "unknown"})`);
+  }
+  scaffoldCreateAppFiles(appDir);
+  initCommand(trimmedAppName);
+  writeFile(import_path14.default.join(appDir, ".env"), envTemplate());
+  runBunCommand(bunBin, ["install"], appDir);
+  runBunCommand(bunBin, ["run", "dev"], appDir);
 };
 
 // src/cli.ts
@@ -198323,28 +198530,65 @@ var main = async () => {
     componentType,
     removeComponentName,
     listFilter,
-    eventName
+    eventName,
+    cardAction,
+    cardAjax,
+    cardIo,
+    pageAction,
+    pagePath
   } = parseArgs(process.argv.slice(2));
   console.log(`[pieui] CLI started with command: "${command}"`);
   switch (command) {
     case "init":
       initCommand(outDir);
       return;
-    case "create-pie-app":
+    case "create":
       if (!createAppName) {
-        console.error("[pieui] Error: App name is required for create-pie-app command");
+        console.error("[pieui] Error: App name is required for create command");
         printUsage();
         process.exit(1);
       }
-      createPieAppCommand(createAppName);
+      createCommand(createAppName);
+      return;
+    case "card":
+      if (cardAction !== "add") {
+        console.error("[pieui] Error: Supported card subcommands: add");
+        printUsage();
+        process.exit(1);
+      }
+      if (!componentName) {
+        console.error("[pieui] Error: Component name is required for card add command");
+        printUsage();
+        process.exit(1);
+      }
+      addCommand(componentName, componentType, {
+        ajax: cardAjax,
+        io: cardIo
+      });
       return;
     case "add":
       if (!componentName) {
-        console.error("[pieui] Error: Component name is required for add command");
+        console.error("[pieui] Error: Component name is required for card add command");
+        printUsage();
+        process.exit(1);
+      }
+      addCommand(componentName, componentType, {
+        ajax: cardAjax,
+        io: cardIo
+      });
+      return;
+    case "page":
+      if (pageAction !== "add") {
+        console.error("[pieui] Error: Supported page subcommands: add");
+        printUsage();
+        process.exit(1);
+      }
+      if (!pagePath) {
+        console.error("[pieui] Error: Path is required for page add command");
         printUsage();
         process.exit(1);
       }
-      addCommand(componentName, componentType);
+      pageAddCommand(pagePath);
       return;
     case "remove":
       if (!removeComponentName) {