pika-ux 1.0.0-beta.1 → 1.0.0-beta.10

package/dist/cli/index.js

@@ -0,0 +1,320 @@
+#!/usr/bin/env node
+import { Command } from 'commander';
+import chalk2 from 'chalk';
+import { readFileSync } from 'fs';
+import { fileURLToPath } from 'url';
+import path2 from 'path';
+import inquirer from 'inquirer';
+import fs from 'fs-extra';
+import { exec } from 'child_process';
+import { promisify } from 'util';
+import ora from 'ora';
+import semver from 'semver';
+import { glob } from 'glob';
+import { createRequire } from 'module';
+
+var Logger = class {
+  spinner = null;
+  info(message, ...args) {
+    console.log(chalk2.blue("\u2139"), message, ...args);
+  }
+  success(message, ...args) {
+    console.log(chalk2.green("\u2713"), message, ...args);
+  }
+  warn(message, ...args) {
+    console.log(chalk2.yellow("\u26A0"), message, ...args);
+  }
+  error(message, ...args) {
+    console.error(chalk2.red("\u2717"), message, ...args);
+  }
+  debug(message, ...args) {
+    if (process.env.DEBUG || process.env.PIKA_DEBUG) {
+      console.log(chalk2.gray("\u{1F41B}"), message, ...args);
+    }
+  }
+  startSpinner(text) {
+    this.spinner = ora(text).start();
+    return this.spinner;
+  }
+  stopSpinner(success = true, text) {
+    if (this.spinner) {
+      if (success) {
+        this.spinner.succeed(text);
+      } else {
+        this.spinner.fail(text);
+      }
+      this.spinner = null;
+    }
+  }
+  updateSpinner(text) {
+    if (this.spinner) {
+      this.spinner.text = text;
+    }
+  }
+  newLine() {
+    console.log();
+  }
+  divider() {
+    console.log(chalk2.gray("\u2500".repeat(50)));
+  }
+};
+var logger = new Logger();
+var execAsync = promisify(exec);
+async function validatePnpm() {
+  try {
+    await execAsync("pnpm --version");
+  } catch (error) {
+    logger.error("pnpm is not installed.");
+    logger.info("Please install pnpm:");
+    console.log("  npm install -g pnpm");
+    console.log("  # or (Unix/Mac):");
+    console.log("  curl -fsSL https://get.pnpm.io/install.sh | sh -");
+    console.log("  # or (Windows):");
+    console.log("  iwr https://get.pnpm.io/install.ps1 -useb | iex");
+    process.exit(1);
+  }
+}
+async function validateNodeVersion() {
+  const currentVersion = process.version;
+  const requiredVersion = "22.0.0";
+  if (!semver.gte(currentVersion, requiredVersion)) {
+    logger.error(`Node.js version ${requiredVersion} or higher is required.`);
+    logger.info(`Current version: ${currentVersion}`);
+    logger.info("Please upgrade Node.js:");
+    console.log("  Use nvm: nvm install 22");
+    console.log("  Or download from: https://nodejs.org/");
+    process.exit(1);
+  }
+}
+function validateProjectName(name) {
+  if (!name.trim()) {
+    return "Project name is required";
+  }
+  if (!/^[a-zA-Z]/.test(name)) {
+    return "Project name must start with a letter";
+  }
+  if (!/^[a-zA-Z][a-zA-Z0-9_-]*$/.test(name)) {
+    return "Project name may only contain letters, numbers, underscores, and hyphens";
+  }
+  return true;
+}
+function toHumanReadable(projectName) {
+  const parts = projectName.replace(/([a-z])([A-Z])/g, "$1 $2").split(/[-_\s]+/).filter((part) => part.length > 0);
+  return parts.map((part) => part.charAt(0).toUpperCase() + part.slice(1).toLowerCase()).join(" ");
+}
+async function processTemplateFiles(sourceDir, targetDir, variables) {
+  logger.debug(`Processing template files from: ${sourceDir}`);
+  logger.debug(`Target directory: ${targetDir}`);
+  let files;
+  try {
+    files = await glob("**/*", {
+      cwd: sourceDir,
+      dot: true,
+      nodir: true,
+      absolute: false
+    });
+    logger.debug(`Glob found ${files.length} files`);
+  } catch (error) {
+    logger.debug(`Glob error: ${error}`);
+    throw new Error(`Failed to read template directory: ${error}`);
+  }
+  if (files.length === 0) {
+    logger.warn(`No files found in template directory: ${sourceDir}`);
+    try {
+      const dirContents = await fs.readdir(sourceDir);
+      logger.debug(`Directory contents: ${dirContents.join(", ")}`);
+    } catch (e) {
+      logger.debug(`Could not read directory: ${e}`);
+    }
+  }
+  for (const file of files) {
+    const sourcePath = path2.join(sourceDir, file);
+    const targetPath = path2.join(targetDir, file);
+    logger.debug(`Copying: ${file}`);
+    await fs.ensureDir(path2.dirname(targetPath));
+    let content = await fs.readFile(sourcePath, "utf8");
+    content = content.replace(/\{projectName\}/g, variables.projectName).replace(/\{humanReadableProjectName\}/g, variables.humanReadableProjectName).replace(/\{pikaUxVersion\}/g, variables.pikaUxVersion);
+    await fs.writeFile(targetPath, content, "utf8");
+  }
+  logger.debug(`Processed ${files.length} template files`);
+}
+async function copyAndProcessTemplate(templateDir, targetDir, variables) {
+  await fs.ensureDir(targetDir);
+  await processTemplateFiles(templateDir, targetDir, variables);
+}
+var execAsync2 = promisify(exec);
+var __filename = fileURLToPath(import.meta.url);
+var __dirname = path2.dirname(__filename);
+var require2 = createRequire(import.meta.url);
+async function createCommand(options = {}) {
+  try {
+    logger.newLine();
+    console.log(chalk2.bold.cyan("Create Pika Webcomponent Application"));
+    logger.divider();
+    let projectName = options.projectName;
+    if (!projectName) {
+      const nameAnswer = await inquirer.prompt([
+        {
+          type: "input",
+          name: "projectName",
+          message: "Project name:",
+          default: "my-webcomponent",
+          validate: validateProjectName
+        }
+      ]);
+      projectName = nameAnswer.projectName;
+    } else {
+      const validation = validateProjectName(projectName);
+      if (validation !== true) {
+        logger.error(validation);
+        process.exit(1);
+      }
+    }
+    const suggestedName = toHumanReadable(projectName);
+    let humanReadableName = options.humanReadableName;
+    if (!humanReadableName) {
+      const humanNameAnswer = await inquirer.prompt([
+        {
+          type: "input",
+          name: "humanReadableName",
+          message: "Human-readable project name:",
+          default: suggestedName
+        }
+      ]);
+      humanReadableName = humanNameAnswer.humanReadableName;
+    }
+    const targetPath = path2.resolve(process.cwd(), projectName);
+    if (await fs.pathExists(targetPath)) {
+      const { overwrite } = await inquirer.prompt([
+        {
+          type: "confirm",
+          name: "overwrite",
+          message: `Directory "${projectName}" already exists. Overwrite?`,
+          default: false
+        }
+      ]);
+      if (!overwrite) {
+        logger.warn("Project creation cancelled.");
+        process.exit(0);
+      }
+      await fs.remove(targetPath);
+    }
+    const spinner = logger.startSpinner("Creating project...");
+    try {
+      let pikaUxVersion = "1.0.0-beta.4";
+      try {
+        const pikaUxPackageJsonPath = require2.resolve("pika-ux/package.json");
+        const pikaUxPackageJson = await fs.readJson(pikaUxPackageJsonPath);
+        pikaUxVersion = pikaUxPackageJson.version;
+      } catch (error) {
+        logger.debug("Could not determine pika-ux version, using fallback");
+      }
+      let templateDir;
+      try {
+        const pikaUxRoot = path2.dirname(require2.resolve("pika-ux/package.json"));
+        templateDir = path2.join(pikaUxRoot, "dist/cli/template-files");
+        logger.debug(`Template directory resolved to: ${templateDir}`);
+      } catch (error) {
+        templateDir = path2.join(__dirname, "template-files");
+        logger.debug(`Using fallback template directory: ${templateDir}`);
+      }
+      if (!await fs.pathExists(templateDir)) {
+        throw new Error(`Template directory not found: ${templateDir}`);
+      }
+      logger.updateSpinner("Processing template files...");
+      await copyAndProcessTemplate(templateDir, targetPath, {
+        projectName,
+        humanReadableProjectName: humanReadableName,
+        pikaUxVersion
+      });
+      logger.debug(`Files copied to: ${targetPath}`);
+      logger.stopSpinner(true, "Template files processed");
+      const installSpinner = logger.startSpinner("Installing dependencies with pnpm...");
+      try {
+        await execAsync2("pnpm install", { cwd: targetPath });
+        logger.stopSpinner(true, "Dependencies installed");
+      } catch (error) {
+        logger.stopSpinner(false, "Failed to install dependencies");
+        logger.warn("You can install dependencies manually:");
+        console.log(`  cd ${projectName} && pnpm install`);
+      }
+      showCompletionMessage(projectName, targetPath);
+    } catch (error) {
+      logger.stopSpinner(false, "Failed to create project");
+      throw error;
+    }
+  } catch (error) {
+    logger.error("Failed to create webcomponent application:");
+    console.error(error);
+    process.exit(1);
+  }
+}
+function showCompletionMessage(projectName, projectPath) {
+  logger.newLine();
+  console.log(chalk2.green.bold(`\u2713 Successfully created ${projectName}!`));
+  logger.newLine();
+  console.log(chalk2.bold("Next steps:"));
+  const relativePath = path2.relative(process.cwd(), projectPath).split(path2.sep).join("/");
+  console.log(chalk2.gray(`  cd ${relativePath}`));
+  console.log(chalk2.gray("  pnpm dev      # Start development server"));
+  console.log(chalk2.gray("  pnpm build    # Build for production"));
+  logger.newLine();
+  console.log(chalk2.bold("Available commands:"));
+  console.log(chalk2.gray("  pnpm dev      - Start Vite dev server"));
+  console.log(chalk2.gray("  pnpm build    - Build for production"));
+  console.log(chalk2.gray("  pnpm preview  - Preview production build"));
+  console.log(chalk2.gray("  pnpm check    - Run type checking"));
+  logger.newLine();
+  console.log(chalk2.bold("Learn more:"));
+  console.log(chalk2.gray("  \u2022 Pika UX Components: https://github.com/rithum/pika"));
+  console.log(chalk2.gray("  \u2022 Svelte Documentation: https://svelte.dev"));
+  console.log(chalk2.gray("  \u2022 Tailwind CSS: https://tailwindcss.com"));
+  logger.newLine();
+}
+
+// tools/cli/index.ts
+var __filename2 = fileURLToPath(import.meta.url);
+var __dirname2 = path2.dirname(__filename2);
+var packageJson = JSON.parse(readFileSync(path2.join(__dirname2, "../../package.json"), "utf8"));
+var program = new Command();
+program.name("pika-ux").description("CLI tool for creating Pika webcomponent applications").version(packageJson.version);
+program.command("create").description("Create a new Pika webcomponent application").argument("[name]", "Project name").action(async (name) => {
+  await validateNodeVersion();
+  await validatePnpm();
+  await createCommand({ projectName: name });
+});
+program.on("--help", () => {
+  console.log("");
+  console.log(chalk2.bold("Examples:"));
+  console.log(chalk2.gray("  $ pika-ux create"));
+  console.log(chalk2.gray("  $ pika-ux create my-webcomponent"));
+  console.log("");
+  console.log(chalk2.dim('Tip: You can also use "pikaux" for shorter typing'));
+  console.log("");
+});
+program.exitOverride((err) => {
+  if (err.code === "commander.version" || err.code === "commander.help" || err.code === "commander.helpDisplayed") {
+    process.exit(0);
+  }
+  logger.error(`Command failed: ${err.message}`);
+  process.exit(1);
+});
+process.on("uncaughtException", (error) => {
+  logger.error("Uncaught Exception:", error);
+  process.exit(1);
+});
+process.on("unhandledRejection", (reason, promise) => {
+  logger.error("Unhandled Rejection at:", promise, "reason:", reason);
+  process.exit(1);
+});
+console.log(
+  chalk2.cyan(`
+\u2554\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2557
+\u2551                                       \u2551
+\u2551     \u{1F3A8} Pika UX Webcomponent CLI       \u2551
+\u2551   Create webcomponents with ease      \u2551
+\u2551                                       \u2551
+\u255A\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u255D
+`)
+);
+program.parse();

package/dist/cli/template-files/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

package/dist/cli/template-files/.npmrc

@@ -0,0 +1,5 @@
+auto-install-peers = true
+registry=https://registry.npmjs.org/
+link-workspace-packages = true
+prefer-workspace-packages = true
+recursive-install = true

package/dist/cli/template-files/.nvmrc

@@ -0,0 +1 @@
+22

package/dist/cli/template-files/.prettierignore

@@ -0,0 +1,15 @@
+.DS_Store
+.svelte-kit
+node_modules
+/build
+/package
+.env
+.env.*
+!.env.example
+vite.config.js*
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+pnpm-workspace.yaml
+package-lock.json
+yarn.lock

package/dist/cli/template-files/.prettierrc

@@ -0,0 +1,7 @@
+{
+    "singleQuote": true,
+    "trailingComma": "none",
+    "printWidth": 180,
+    "tabWidth": 4,
+    "useTabs": false
+}

package/dist/cli/template-files/README.md

@@ -0,0 +1,63 @@
+# {humanReadableProjectName}
+
+A webcomponent application built with Pika UX components.
+
+## Overview
+
+This project creates custom webcomponents that can be dynamically injected into a Pika chat application. Components can appear:
+
+- **In-conversation**: Embedded within the chat message flow
+- **Spotlight section**: Displayed above the chat input field
+
+## Getting Started
+
+```bash
+# Install dependencies
+pnpm install
+
+# Start development server
+pnpm dev
+
+# Build for production
+pnpm build
+
+# Preview production build
+pnpm preview
+
+# Type checking
+pnpm check
+```
+
+## Project Structure
+
+```
+{projectName}/
+├── src/
+│   ├── lib/          # Reusable components
+│   ├── App.svelte    # Main application component
+│   ├── main.ts       # Application entry point
+│   └── app.css       # Global styles
+├── package.json
+└── vite.config.ts
+```
+
+## Development
+
+This project uses:
+
+- **Svelte 5**: Modern reactive framework
+- **Pika UX**: Component library with shadcn-style components
+- **Tailwind CSS v4**: Utility-first styling
+- **Vite**: Fast build tool and dev server
+- **TypeScript**: Type-safe development
+
+## Building Webcomponents
+
+Create your webcomponents in `src/lib/` and export them from your main application. These components can then be integrated with Pika chat applications for dynamic UI injection.
+
+## Learn More
+
+- [Pika Framework Documentation](https://pika.tools)
+- [Pika UX Components](https://github.com/rithum/pika/tree/main/packages/pika-ux)
+- [Svelte Documentation](https://svelte.dev)
+- [Tailwind CSS](https://tailwindcss.com)

package/dist/cli/template-files/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>{humanReadableProjectName}</title>
+    </head>
+    <body>
+        <div id="app"></div>
+        <script type="module" src="/src/main.ts"></script>
+    </body>
+</html>

package/dist/cli/template-files/package.json

@@ -0,0 +1,35 @@
+{
+    "name": "{projectName}",
+    "private": true,
+    "version": "0.0.0",
+    "type": "module",
+    "scripts": {
+        "dev": "vite",
+        "build": "vite build",
+        "preview": "vite preview",
+        "check": "svelte-check --tsconfig ./tsconfig.app.json && tsc -p tsconfig.node.json"
+    },
+    "devDependencies": {
+        "@iconify-json/ci": "catalog:",
+        "@iconify-json/lucide": "catalog:",
+        "@internationalized/date": "catalog:",
+        "@lucide/svelte": "catalog:",
+        "@sveltejs/vite-plugin-svelte": "catalog:",
+        "@tailwindcss/typography": "catalog:",
+        "@tailwindcss/vite": "catalog:",
+        "@types/node": "catalog:",
+        "@tsconfig/svelte": "catalog:",
+        "bits-ui": "catalog:",
+        "clsx": "catalog:",
+        "pika-ux": "{pikaUxVersion}",
+        "svelte": "catalog:",
+        "svelte-check": "catalog:",
+        "tailwind-merge": "catalog:",
+        "tailwind-variants": "catalog:",
+        "tailwindcss": "catalog:",
+        "tw-animate-css": "catalog:",
+        "typescript": "catalog:",
+        "unplugin-icons": "catalog:",
+        "vite": "catalog:"
+    }
+}

package/dist/cli/template-files/pnpm-workspace.yaml

@@ -0,0 +1,21 @@
+catalog:
+  '@iconify-json/ci': ^1.2.2
+  '@iconify-json/lucide': ^1.2.68
+  '@internationalized/date': ^3.8.1
+  '@lucide/svelte': ^0.544.0
+  '@sveltejs/vite-plugin-svelte': ^6.2.0
+  '@tailwindcss/typography': ^0.5.16
+  '@tailwindcss/vite': ^4.1.13
+  '@types/node': ^22.15.17
+  '@tsconfig/svelte': ^5.0.5
+  bits-ui: ^2.9.1
+  clsx: ^2.1.1
+  svelte: ^5.39.4
+  svelte-check: ^4.3.1
+  tailwind-merge: ^3.3.1
+  tailwind-variants: ^3.1.1
+  tailwindcss: ^4.1.11
+  tw-animate-css: ^1.4.0
+  typescript: ^5.9.2
+  unplugin-icons: ^22.4.1
+  vite: ^7.1.7

package/dist/cli/template-files/src/App.svelte

@@ -0,0 +1,10 @@
+<script lang="ts">
+    import './app.css';
+    import Counter from './lib/counter.svelte';
+</script>
+
+<main class="flex flex-col items-center justify-center h-screen">
+    <div class="card">
+        <Counter />
+    </div>
+</main>

package/dist/cli/template-files/src/app.css

@@ -0,0 +1,3 @@
+@import 'pika-ux/app.css';
+
+@source '../node_modules/pika-ux/src';

package/dist/cli/template-files/src/lib/counter.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+    import Button from 'pika-ux/shadcn/button/button.svelte';
+    import ThumbsUp from '$icons/lucide/thumbs-up';
+    let count: number = $state(0);
+    const increment = () => {
+        count += 1;
+    };
+</script>
+
+<Button variant="outline" onclick={increment}>
+    <ThumbsUp /> count is {count}
+</Button>

package/dist/cli/template-files/src/main.ts

@@ -0,0 +1,9 @@
+import { mount } from 'svelte'
+import './app.css'
+import App from './App.svelte'
+
+const app = mount(App, {
+  target: document.getElementById('app')!,
+})
+
+export default app

package/dist/cli/template-files/svelte.config.js

@@ -0,0 +1,8 @@
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'
+
+/** @type {import("@sveltejs/vite-plugin-svelte").SvelteConfig} */
+export default {
+  // Consult https://svelte.dev/docs#compile-time-svelte-preprocess
+  // for more information about preprocessors
+  preprocess: vitePreprocess(),
+}

package/dist/cli/template-files/tsconfig.app.json

@@ -0,0 +1,44 @@
+{
+  "extends": "@tsconfig/svelte/tsconfig.json",
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "types": [
+      "svelte",
+      "vite/client",
+      "unplugin-icons/types/svelte",
+      "pika-ux/icons/ci/index.d.ts",
+      "pika-ux/icons/lucide/index.d.ts"
+    ],
+    "noEmit": true,
+    /**
+     * Typecheck JS in `.svelte` and `.js` files by default.
+     * Disable checkJs if you'd like to use dynamic types in JS.
+     * Note that setting allowJs false does not prevent the use
+     * of JS in `.svelte` files.
+     */
+    "allowJs": true,
+    "checkJs": true,
+    "moduleDetection": "force",
+    "baseUrl": ".",
+    "paths": {
+      "$lib": [
+        "./src/lib"
+      ],
+      "$lib/*": [
+        "./src/lib/*"
+      ],
+      "$icons/*": [
+        "~icons/*"
+      ]
+    }
+  },
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.d.ts",
+    "src/**/*.js",
+    "src/**/*.svelte"
+  ]
+}

package/dist/cli/template-files/tsconfig.json

@@ -0,0 +1,25 @@
+{
+  "files": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.node.json"
+    }
+  ],
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "$lib": [
+        "./src/lib"
+      ],
+      "$lib/*": [
+        "./src/lib/*"
+      ],
+      "$icons/*": [
+        "./~icons/*"
+      ]
+    }
+  }
+}

package/dist/cli/template-files/tsconfig.node.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": [
+      "ES2022"
+    ],
+    "module": "ESNext",
+    "types": [],
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": [
+    "vite.config.ts"
+  ]
+}