create-lego-box 0.1.0

package/templates/packages/create-pilet/templates/src/pages/demo.tsx

@@ -0,0 +1,220 @@
+import * as React from 'react';
+import type { PiletApi } from '@lego-box/shell/pilet';
+import { Button, Card, CardHeader, CardTitle, CardDescription, CardContent, Badge, Loading } from '@lego-box/ui-kit';
+
+/**
+ * Demo page: verifies shell exposes auth, casl, pocketbase, and test API to the pilet.
+ * Shows permissions list (like Profile page), Fetch Audit Logs, and all integrations.
+ */
+export function DemoPage({ api }: { api: PiletApi }) {
+  const [testMsg, setTestMsg] = React.useState('');
+  const [auditLogs, setAuditLogs] = React.useState<Record<string, unknown>[]>([]);
+  const [auditLoading, setAuditLoading] = React.useState(false);
+  const [auditError, setAuditError] = React.useState<string | null>(null);
+  const [allPermissions, setAllPermissions] = React.useState<Array<{ id: string; action: string; collection: string }>>([]);
+  const [permsLoading, setPermsLoading] = React.useState(true);
+
+  const auth = api?.auth;
+  const casl = api?.casl;
+  const pb = api?.pocketbase;
+
+  const can = React.useCallback(
+    (action: string, subject: string) => casl?.can?.(action, subject) ?? auth?.can?.(action, subject) ?? false,
+    [auth, casl]
+  );
+
+  const userId = auth?.getId?.() ?? null;
+  const email = auth?.getEmail?.() ?? null;
+  const role = auth?.getRole?.() ?? null;
+  const permissions = auth?.getPermissions?.() ?? [];
+  const user = auth?.getUser?.();
+  const isAuth = auth?.isAuthenticated?.() ?? false;
+
+  // Fetch all permissions from shared PocketBase (for full permissions list like Profile page)
+  React.useEffect(() => {
+    if (!pb || !isAuth) {
+      setPermsLoading(false);
+      return;
+    }
+    pb.collection('permissions')
+      .getFullList({ sort: 'collection,action', $autoCancel: false })
+      .then((records: unknown[]) => {
+        const items = (records as Array<{ id: string; action: string; collection: string }>).map((r) => ({
+          id: r.id,
+          action: r.action,
+          collection: r.collection,
+        }));
+        setAllPermissions(items);
+      })
+      .catch((err: Error) => {
+        console.error('[DemoPage] Error fetching permissions:', err);
+      })
+      .finally(() => setPermsLoading(false));
+  }, [pb, isAuth]);
+
+  const handleFetchAuditLogs = React.useCallback(() => {
+    if (!pb) {
+      setAuditError('PocketBase instance not available. Use the shared instance from the shell.');
+      return;
+    }
+    setAuditLoading(true);
+    setAuditError(null);
+    pb.collection('audit_logs')
+      .getFullList({ sort: '-created', $autoCancel: false })
+      .then((records: unknown[]) => {
+        setAuditLogs(records as Record<string, unknown>[]);
+      })
+      .catch((err: Error) => {
+        setAuditError(err.message || 'Failed to fetch audit logs');
+      })
+      .finally(() => setAuditLoading(false));
+  }, [pb]);
+
+  const permissionsByCollection = React.useMemo(() => {
+    const grouped: Record<string, Array<{ id: string; action: string; collection: string }>> = {};
+    allPermissions.forEach((p) => {
+      if (!grouped[p.collection]) grouped[p.collection] = [];
+      grouped[p.collection].push(p);
+    });
+    Object.keys(grouped).forEach((k) => grouped[k].sort((a, b) => a.action.localeCompare(b.action)));
+    return grouped;
+  }, [allPermissions]);
+
+  const collections = Object.keys(permissionsByCollection).sort();
+
+  return (
+    <div className="space-y-6 p-4 max-w-4xl mx-auto">
+      <h2 className="text-3xl font-bold tracking-tight">Pilet Demo</h2>
+      <p className="text-muted-foreground">
+        This page verifies the pilet can use the shell&apos;s auth, casl, pocketbase, and test API.
+      </p>
+
+      {/* Auth API */}
+      <Card className="p-4">
+        <CardHeader>
+          <CardTitle>Auth API (from shell)</CardTitle>
+          <CardDescription>
+            User info and auth utilities exposed via app.auth
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="space-y-2">
+          <p><strong>auth.isAuthenticated():</strong> {String(isAuth)}</p>
+          <p><strong>auth.getId():</strong> {userId ?? '—'}</p>
+          <p><strong>auth.getEmail():</strong> {email ?? '—'}</p>
+          <p><strong>auth.getRole():</strong> {role ?? '—'}</p>
+          <p><strong>auth.getUser() – name:</strong> {user?.name ?? '—'}</p>
+          <p><strong>auth.getPermissions() count:</strong> {permissions.length}</p>
+        </CardContent>
+      </Card>
+
+      {/* CASL / Permissions List (like Profile page) */}
+      <Card className="p-4">
+        <CardHeader>
+          <CardTitle>CASL Permissions (app.auth.can / app.casl.can)</CardTitle>
+          <CardDescription>
+            Your assigned permissions across all collections. Check marks indicate granted access.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          {permsLoading ? (
+            <Loading message="Loading permissions..." fullPage={false} />
+          ) : collections.length === 0 ? (
+            <p className="text-sm text-muted-foreground">No permissions defined.</p>
+          ) : (
+            <div className="space-y-6">
+              {collections.map((collection) => {
+                const perms = permissionsByCollection[collection] ?? [];
+                return (
+                  <div key={collection}>
+                    <h4 className="text-sm font-medium text-muted-foreground capitalize mb-2">
+                      {collection}
+                    </h4>
+                    <div className="space-y-2">
+                      {perms.map((perm) => {
+                        const allowed = can(perm.action, perm.collection);
+                        return (
+                          <div
+                            key={perm.id}
+                            className="flex items-center justify-between py-2 px-3 rounded-lg bg-muted/50"
+                          >
+                            <div className="flex items-center gap-3">
+                              {allowed ? (
+                                <span className="text-green-600 dark:text-green-400">✓</span>
+                              ) : (
+                                <span className="text-red-500 dark:text-red-400">✗</span>
+                              )}
+                              <span className="text-sm font-medium capitalize">
+                                {perm.action} {perm.collection}
+                              </span>
+                            </div>
+                            <Badge variant={allowed ? 'success' : 'destructive'}>
+                              {allowed ? 'Granted' : 'Denied'}
+                            </Badge>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* PocketBase – shared instance */}
+      <Card className="p-4">
+        <CardHeader>
+          <CardTitle>PocketBase (shared instance from shell)</CardTitle>
+          <CardDescription>
+            Fetches audit_logs using the shared PocketBase instance – no new instance created.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Button
+            onClick={handleFetchAuditLogs}
+            disabled={!pb || auditLoading}
+          >
+            {auditLoading ? 'Fetching...' : 'Fetch Audit Logs'}
+          </Button>
+          {auditError && (
+            <p className="mt-2 text-sm text-destructive">{auditError}</p>
+          )}
+          {auditLogs.length > 0 && (
+            <div className="mt-4 space-y-2 max-h-60 overflow-y-auto">
+              <p className="text-sm font-medium">{auditLogs.length} audit log(s)</p>
+              {auditLogs.slice(0, 5).map((log, i) => (
+                <div key={i} className="text-xs p-2 rounded bg-muted/50 font-mono truncate">
+                  {String(log.action ?? '')} / {String(log.resource ?? '')} – {String(log.timestamp ?? '')}
+                </div>
+              ))}
+              {auditLogs.length > 5 && (
+                <p className="text-xs text-muted-foreground">… and {auditLogs.length - 5} more</p>
+              )}
+            </div>
+          )}
+        </CardContent>
+      </Card>
+
+      {/* Test API */}
+      <Card className="p-4">
+        <CardHeader>
+          <CardTitle>Test API</CardTitle>
+          <CardDescription>
+            app.test.getTesting() validates the plugin wrapper is working.
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Button
+            onClick={() => setTestMsg(api?.test?.getTesting?.() ?? '')}
+          >
+            Call getTesting()
+          </Button>
+          {testMsg && (
+            <p className="mt-2 text-sm text-muted-foreground">{testMsg}</p>
+          )}
+        </CardContent>
+      </Card>
+    </div>
+  );
+}

package/templates/packages/create-pilet/templates/src/pages/home.tsx

@@ -0,0 +1,20 @@
+import { Button } from '@lego-box/ui-kit';
+
+export function HomePage() {
+  return (
+    <div className="space-y-4">
+      <h2 className="text-3xl font-bold tracking-tight">
+        Welcome to my World
+      </h2>
+      <p className="text-muted-foreground">
+        This page demonstrates the shared UI Kit integration.
+      </p>
+      <div className="flex gap-2">
+        <Button variant="default">Default Button</Button>
+        <Button variant="outline">Outline Button</Button>
+        <Button variant="secondary">Secondary Button</Button>
+        <Button variant="ghost">Ghost Button</Button>
+      </div>
+    </div>
+  );
+}

package/templates/packages/create-pilet/templates/tailwind.config.js

@@ -0,0 +1,54 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ['class'],
+  content: ['./src/**/*.{ts,tsx}'],
+  theme: {
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+        success: {
+          DEFAULT: 'hsl(var(--success))',
+          foreground: 'hsl(var(--success-foreground))',
+        },
+        warning: {
+          DEFAULT: 'hsl(var(--warning))',
+          foreground: 'hsl(var(--warning-foreground))',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+    },
+  },
+  plugins: [],
+};

package/templates/packages/create-pilet/templates/tsconfig.json

@@ -0,0 +1 @@
+{"extends":"../../tsconfig.base.json","compilerOptions":{"jsx":"react-jsx","types":["piral-cli"]},"include":["src"]}

package/templates/packages/create-pilet/templates/webpack.config.js

@@ -0,0 +1,34 @@
+const path = require('path');
+
+/**
+ * Force react and react-dom to resolve from the shell's global (window.React / window.ReactDOM)
+ * so the pilet uses the same React instance as the shell and avoids "dispatcher is null".
+ * Override any existing react/react-dom externals so we always use root.
+ * Also resolve 'strip-ansi' for piral-cli-webpack5's webpack-hot-middleware (pnpm isolation).
+ */
+module.exports = function (config) {
+  config.resolve = config.resolve || {};
+  config.resolve.alias = {
+    ...config.resolve.alias,
+    'strip-ansi': path.dirname(require.resolve('strip-ansi/package.json')),
+  };
+
+  const prev = config.externals;
+  const globalReact = {
+    react: 'root React',
+    'react-dom': 'root ReactDOM',
+    'react-dom/client': 'root ReactDOM',
+  };
+  if (Array.isArray(prev)) {
+    // Ensure our root React override is applied; webpack uses first match, so add object last to override string entries
+    const withoutReact = prev.filter(
+      (e) => typeof e !== 'object' || (e && typeof e === 'object' && !('react' in e) && !('react-dom' in e))
+    );
+    config.externals = [...withoutReact, globalReact];
+  } else if (prev && typeof prev === 'object' && !Array.isArray(prev)) {
+    config.externals = { ...prev, ...globalReact };
+  } else {
+    config.externals = globalReact;
+  }
+  return config;
+};

package/templates/packages/create-pilet/templates.js

@@ -0,0 +1,117 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const BUNDLED_TEMPLATES_DIR = path.resolve(__dirname, 'templates');
+
+function getTemplateRoot() {
+  return BUNDLED_TEMPLATES_DIR;
+}
+
+function readTemplateFile(relativePath) {
+  const fullPath = path.join(getTemplateRoot(), relativePath);
+  return fs.readFileSync(fullPath, 'utf-8');
+}
+
+function toTitleCase(str) {
+  if (!str) return str;
+  return str
+    .replace(/[-_]/g, ' ')
+    .replace(/([a-z])([A-Z])/g, '$1 $2')
+    .replace(/\b\w/g, (c) => c.toUpperCase());
+}
+
+export function loadTemplate(sourcePath, variables) {
+  let content = readTemplateFile(sourcePath);
+  for (const [key, value] of Object.entries(variables)) {
+    if (value !== undefined && value !== null) {
+      content = content.replace(new RegExp(`{{${key}}}`, 'g'), String(value));
+    }
+  }
+  return content;
+}
+
+export function getTemplateFiles() {
+  return [
+    'package.json',
+    'tsconfig.json',
+    'webpack.config.js',
+    '.krasrc',
+    'tailwind.config.js',
+    'src/index.tsx',
+    'src/pages/home.tsx',
+    'src/pages/demo.tsx',
+    'src/pages/Test1Page.tsx',
+    'src/pages/Test2Page.tsx',
+  ];
+}
+
+export function generateFileContent(sourcePath, variables, mode) {
+  const titleCaseName = toTitleCase(variables.PILET_NAME);
+
+  if (sourcePath === 'package.json') {
+    const pkg = JSON.parse(readTemplateFile(sourcePath));
+    pkg.name = variables.PILET_NAME;
+    pkg.description = variables.DESCRIPTION || '';
+    if (variables.AUTHOR) pkg.author = variables.AUTHOR;
+    pkg.devDependencies['@lego-box/shell'] = variables.SHELL_DEPENDENCY;
+    pkg.devDependencies['@lego-box/ui-kit'] = variables.UI_KIT_DEPENDENCY;
+    return JSON.stringify(pkg, null, 2);
+  }
+
+  if (sourcePath === '.krasrc') {
+    const krasrc = JSON.parse(readTemplateFile(sourcePath));
+    krasrc.injectors.pilet.assetUrl = `http://localhost:${variables.PORT}`;
+    return JSON.stringify(krasrc, null, 2);
+  }
+
+  if (sourcePath === 'tsconfig.json') {
+    const tsconfig = JSON.parse(readTemplateFile(sourcePath));
+    if (mode === 'published') {
+      delete tsconfig.extends;
+      tsconfig.compilerOptions = {
+        target: 'ES2020',
+        lib: ['ES2020', 'DOM', 'DOM.Iterable'],
+        module: 'ESNext',
+        moduleResolution: 'bundler',
+        jsx: 'react-jsx',
+        strict: true,
+        esModuleInterop: true,
+        skipLibCheck: true,
+        forceConsistentCasingInFileNames: true,
+        resolveJsonModule: true,
+        isolatedModules: true,
+        declaration: true,
+        declarationMap: true,
+        types: ['piral-cli'],
+      };
+      tsconfig.include = ['src'];
+    }
+    return JSON.stringify(tsconfig, null, 2);
+  }
+
+  if (sourcePath === 'src/index.tsx') {
+    let content = readTemplateFile(sourcePath);
+    content = content.replace(/'pilet-demo'/g, `'${variables.PILET_NAME}'`);
+    content = content.replace(/"pilet-demo"/g, `"${variables.PILET_NAME}"`);
+    content = content.replace(/label: 'Pilet Demo'/g, `label: '${titleCaseName}'`);
+    content = content.replace(/label: "Pilet Demo"/g, `label: "${titleCaseName}"`);
+    content = content.replace(/\[pilet-demo\]/g, `[${variables.PILET_NAME}]`);
+    return content;
+  }
+
+  if (sourcePath === 'src/pages/home.tsx') {
+    let content = readTemplateFile(sourcePath);
+    content = content.replace(/Welcome to my World/g, `Welcome to ${titleCaseName}`);
+    return content;
+  }
+
+  if (sourcePath === 'src/pages/Test1Page.tsx' || sourcePath === 'src/pages/Test2Page.tsx') {
+    let content = readTemplateFile(sourcePath);
+    content = content.replace(/pilet-demo/g, variables.PILET_NAME);
+    return content;
+  }
+
+  return readTemplateFile(sourcePath);
+}

package/templates/packages/ui-kit/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@lego-box/ui-kit",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Extensible UI kit - extends @lego-box/ui-kit-base, add your custom components here",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "dev": "tsup --watch",
+    "build": "tsup",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@lego-box/ui-kit-base": "npm:@lego-box/ui-kit@^0.1.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
+    "tailwind-merge": "^2.2.0",
+    "lucide-react": "^0.400.0"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "tsup": "^8.0.0",
+    "tailwindcss": "^3.4.0",
+    "autoprefixer": "^10.4.16",
+    "postcss": "^8.4.32",
+    "tailwindcss-animate": "^1.0.7",
+    "typescript": "^5.3.3"
+  }
+}

package/templates/packages/ui-kit/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

package/templates/packages/ui-kit/src/components/example-custom-component.tsx

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { cn } from '@lego-box/ui-kit-base';
+
+/**
+ * Example custom component - add your own components here.
+ * Delete this file and create your own when building your app.
+ */
+export function ExampleCustomComponent({
+  className,
+  children,
+}: {
+  className?: string;
+  children?: React.ReactNode;
+}) {
+  return (
+    <div className={cn('rounded-lg border p-4', className)}>
+      <p className="text-sm text-muted-foreground">Custom component placeholder</p>
+      {children}
+    </div>
+  );
+}

package/templates/packages/ui-kit/src/components/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Custom components - add your app-specific components here.
+ * Example: export { MyCustomCard } from './my-custom-card';
+ */
+
+export { ExampleCustomComponent } from './example-custom-component';

package/templates/packages/ui-kit/src/index.css

@@ -0,0 +1,75 @@
+@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&display=swap');
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --primary: 217 91% 60%;
+    --primary-foreground: 0 0% 100%;
+    --primary-50: 217 91% 97%;
+    --primary-100: 217 91% 93%;
+    --primary-200: 217 91% 85%;
+    --primary-300: 217 91% 75%;
+    --primary-400: 217 91% 68%;
+    --primary-500: 217 91% 60%;
+    --primary-600: 217 75% 50%;
+    --secondary: 258 90% 66%;
+    --secondary-foreground: 0 0% 100%;
+    --secondary-50: 258 90% 97%;
+    --secondary-100: 258 90% 93%;
+    --secondary-200: 258 90% 85%;
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 100%;
+    --success: 158 64% 52%;
+    --success-foreground: 0 0% 100%;
+    --warning: 38 92% 50%;
+    --warning-foreground: 0 0% 100%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --border: 210 40% 88%;
+    --input: 210 40% 88%;
+    --ring: 217 91% 60%;
+    --radius: 0.5rem;
+  }
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 6.9%;
+    --card-foreground: 210 40% 98%;
+    --primary: 217 91% 60%;
+    --primary-foreground: 0 0% 100%;
+    --primary-50: 217 70% 15%;
+    --primary-100: 217 70% 20%;
+    --primary-200: 217 70% 30%;
+    --secondary: 258 90% 66%;
+    --secondary-foreground: 0 0% 100%;
+    --secondary-50: 258 70% 15%;
+    --secondary-100: 258 70% 20%;
+    --destructive: 0 84% 60%;
+    --destructive-foreground: 0 0% 100%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 217 91% 60%;
+    --radius: 0.5rem;
+  }
+}
+
+@layer base {
+  * { @apply border-border; }
+  body {
+    @apply bg-background text-foreground;
+    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+  }
+}

package/templates/packages/ui-kit/src/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Extensible UI Kit - extends @lego-box/ui-kit-base with your custom components.
+ * Add new components in src/components/ and export them here.
+ * Contribute upstream: https://github.com/lego-box/lego-box
+ */
+
+export * from '@lego-box/ui-kit-base';
+export * from './components';
+
+import './index.css';

package/templates/packages/ui-kit/tailwind.config.js

@@ -0,0 +1,26 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ['class'],
+  content: ['./src/**/*.{ts,tsx}'],
+  theme: {
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: { DEFAULT: 'hsl(var(--primary))', foreground: 'hsl(var(--primary-foreground))' },
+        secondary: { DEFAULT: 'hsl(var(--secondary))', foreground: 'hsl(var(--secondary-foreground))' },
+        destructive: { DEFAULT: 'hsl(var(--destructive))', foreground: 'hsl(var(--destructive-foreground))' },
+        muted: { DEFAULT: 'hsl(var(--muted))', foreground: 'hsl(var(--muted-foreground))' },
+        accent: { DEFAULT: 'hsl(var(--accent))', foreground: 'hsl(var(--accent-foreground))' },
+        card: { DEFAULT: 'hsl(var(--card))', foreground: 'hsl(var(--card-foreground))' },
+        success: { DEFAULT: 'hsl(var(--success))', foreground: 'hsl(var(--success-foreground))' },
+        warning: { DEFAULT: 'hsl(var(--warning))', foreground: 'hsl(var(--warning-foreground))' },
+      },
+      borderRadius: { lg: 'var(--radius)', md: 'calc(var(--radius) - 2px)', sm: 'calc(var(--radius) - 4px)' },
+    },
+  },
+  plugins: [],
+};

package/templates/packages/ui-kit/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "include": ["src"]
+}

package/templates/packages/ui-kit/tsup.config.ts

@@ -0,0 +1,15 @@
+import { defineConfig } from 'tsup';
+
+export default defineConfig({
+  entry: ['src/index.ts'],
+  format: ['cjs', 'esm'],
+  dts: true,
+  splitting: false,
+  sourcemap: true,
+  clean: true,
+  external: ['react', 'react-dom', 'lucide-react', '@lego-box/ui-kit-base'],
+  esbuildOptions(options) {
+    options.banner = { js: '"use client";' };
+  },
+  injectStyle: true,
+});

package/templates/pilets/my-pilet/.krasrc

@@ -0,0 +1 @@
+{"injectors":{"pilet":{"assetUrl":"http://localhost:9000"}}}