@apex-stack/core 0.2.1 → 0.3.0

package/components/Badge.alpine

@@ -0,0 +1,14 @@
+<template x-data>
+  <span class="ax-badge" :class="'ax-badge--' + (variant || 'default')"><slot>Badge</slot></span>
+</template>
+
+<style scoped>
+  .ax-badge {
+    display: inline-flex; align-items: center; gap: 0.3rem;
+    padding: 0.15rem 0.55rem; font-size: 0.78rem; font-weight: 600; line-height: 1.4;
+    border-radius: 999px; border: 1px solid var(--ax-border, #e2e8f0);
+    background: var(--ax-card, #f1f5f9); color: var(--ax-muted, #55617e);
+  }
+  .ax-badge--primary { background: var(--ax-primary, #4f46e5); color: var(--ax-primary-fg, #fff); border-color: transparent; }
+  .ax-badge--success { background: var(--ax-success, #0f9d6f); color: #fff; border-color: transparent; }
+</style>

package/components/Button.alpine

@@ -0,0 +1,22 @@
+<template x-data>
+  <button class="ax-btn" :class="'ax-btn--' + (variant || 'primary')" :type="type || 'button'">
+    <slot>Button</slot>
+  </button>
+</template>
+
+<style scoped>
+  /* Styles inherit the Apex theme via --ax-* tokens (with sane fallbacks, so the
+     component looks right even before you apply a theme). */
+  .ax-btn {
+    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
+    padding: 0.55rem 1rem; font: inherit; font-weight: 600; line-height: 1; cursor: pointer;
+    border: 1px solid transparent; border-radius: var(--ax-radius, 0.6rem);
+    transition: filter 0.15s, background 0.15s, color 0.15s;
+  }
+  .ax-btn--primary { background: var(--ax-primary, #4f46e5); color: var(--ax-primary-fg, #fff); }
+  .ax-btn--danger  { background: var(--ax-danger, #dc2626); color: #fff; }
+  .ax-btn--ghost   { background: transparent; color: var(--ax-fg, #0a0e1a); border-color: var(--ax-border, #e2e8f0); }
+  .ax-btn:hover { filter: brightness(1.06); }
+  .ax-btn--ghost:hover { background: var(--ax-card, #f8fafc); filter: none; }
+  .ax-btn:disabled { opacity: 0.55; cursor: not-allowed; filter: none; }
+</style>

package/components/Card.alpine

@@ -0,0 +1,11 @@
+<template>
+  <div class="ax-card"><slot></slot></div>
+</template>
+
+<style scoped>
+  .ax-card {
+    background: var(--ax-card, #f8fafc); color: var(--ax-card-fg, #0a0e1a);
+    border: 1px solid var(--ax-border, #e2e8f0); border-radius: var(--ax-radius, 0.6rem);
+    padding: 1.25rem;
+  }
+</style>

package/components/registry.json

@@ -0,0 +1,13 @@
+{
+  "button": {
+    "name": "Button",
+    "file": "Button.alpine",
+    "description": "Themeable button with primary/ghost/danger variants."
+  },
+  "card": {
+    "name": "Card",
+    "file": "Card.alpine",
+    "description": "A surface container that inherits the theme."
+  },
+  "badge": { "name": "Badge", "file": "Badge.alpine", "description": "A small status/label pill." }
+}

package/dist/add-2SBHPLEH.js

@@ -0,0 +1,81 @@
+import {
+  banner,
+  color
+} from "./chunk-QIXJSQLW.js";
+
+// src/commands/add.ts
+import { cpSync, existsSync, mkdirSync, readFileSync } from "fs";
+import { dirname, join, resolve } from "path";
+import { fileURLToPath } from "url";
+import { defineCommand } from "citty";
+var REGISTRY_DIR = fileURLToPath(new URL("../components", import.meta.url));
+function loadRegistry() {
+  const p = join(REGISTRY_DIR, "registry.json");
+  if (!existsSync(p)) return {};
+  try {
+    return JSON.parse(readFileSync(p, "utf8"));
+  } catch {
+    return {};
+  }
+}
+var addCommand = defineCommand({
+  meta: {
+    name: "add",
+    description: "Add a themeable component into your project (copies the .alpine source)"
+  },
+  args: {
+    name: { type: "positional", required: false, description: "Component to add (e.g. button)" },
+    root: { type: "string", description: "Project root", default: "." },
+    force: { type: "boolean", default: false, description: "Overwrite an existing component file" }
+  },
+  run({ args }) {
+    const registry = loadRegistry();
+    const log = console.log;
+    process.stdout.write(banner());
+    const keys = Object.keys(registry);
+    if (!keys.length) {
+      console.error(`  ${color.red("\u2717")} No component registry bundled in this build.
+`);
+      process.exit(1);
+    }
+    const name = args.name ? String(args.name).toLowerCase() : "";
+    if (!name) {
+      log(`  ${color.bold("Available components")}  ${color.gray("\u2014 apex add <name>")}
+`);
+      for (const k of keys) {
+        log(`    ${color.cyan(k.padEnd(12))} ${color.gray(registry[k]?.description ?? "")}`);
+      }
+      log("");
+      return;
+    }
+    const entry = registry[name];
+    if (!entry) {
+      console.error(
+        `  ${color.red("\u2717")} Unknown component "${name}". Available: ${keys.join(", ")}
+`
+      );
+      process.exit(1);
+    }
+    const root = resolve(process.cwd(), String(args.root));
+    const dest = join(root, "components", `${entry.name}.alpine`);
+    if (existsSync(dest) && !args.force) {
+      log(
+        `  ${color.gray("\u2022")} ${entry.name} already exists at components/${entry.name}.alpine ${color.gray("(use --force to overwrite)")}
+`
+      );
+      return;
+    }
+    mkdirSync(dirname(dest), { recursive: true });
+    cpSync(join(REGISTRY_DIR, entry.file), dest);
+    log(`  ${color.green("+")} Added ${color.bold(`components/${entry.name}.alpine`)}`);
+    log(`
+  Use it:  ${color.cyan(`<${entry.name} />`)}  ${color.gray("in any page/component.")}`);
+    log(
+      `  ${color.gray("It inherits your theme via --ax-* tokens (see")} ${color.cyan("@apex-stack/theme")}${color.gray(").")}
+`
+    );
+  }
+});
+export {
+  addCommand
+};

package/dist/cli.js

@@ -133,6 +133,7 @@ var COMMANDS = [
   ["build", "Build for production (static, islands, or server)"],
   ["start", "Run a production server build"],
   ["make", "Generate a page, component, route, store, middleware\u2026"],
+  ["add", "Add a themeable component (button, card, badge\u2026)"],
   ["upgrade", "Adopt new scaffold defaults (non-destructive)"],
   ["migrate", "Apply pending database migrations"],
   ["mcp", "Inspect the MCP server \u2014 list or call tools"]
@@ -149,6 +150,7 @@ var main = defineCommand2({
     build: () => import("./build-VHS6KZBK.js").then((m) => m.buildCommand),
     start: () => import("./start-3O3E43PT.js").then((m) => m.startCommand),
     make: () => import("./make-VAYO5GWA.js").then((m) => m.makeCommand),
+    add: () => import("./add-2SBHPLEH.js").then((m) => m.addCommand),
     upgrade: () => import("./upgrade-WC5F5FKY.js").then((m) => m.upgradeCommand),
     migrate: () => import("./migrate-X6LIHMIE.js").then((m) => m.migrateCommand),
     mcp: () => import("./mcp-CH7L4GF3.js").then((m) => m.mcpCommand)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apex-stack/core",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "The full-stack meta-framework for Alpine.js — CLI and runtime",
   "type": "module",
   "license": "MIT",
@@ -38,7 +38,8 @@
   "files": [
     "dist",
     "templates",
-    "vscode"
+    "vscode",
+    "components"
   ],
   "dependencies": {
     "@modelcontextprotocol/sdk": "^1.29.0",