@zea.cl/cranium-sdk 0.3.4

package/bin/cranium-add.mjs

@@ -0,0 +1,212 @@
+#!/usr/bin/env node
+
+/**
+ * cranium-add — Add a ZEA module to a Cranium microfrontend app
+ *
+ * Usage: npx cranium-add thalamus
+ *
+ * Steps for 'thalamus':
+ *   1. Install @zea/thalamus-sdk
+ *   2. Run thalamus-init (browser OAuth flow → saves .zea-config.json)
+ *   3. Patch src/App.tsx with auth gate + UserMenu
+ */
+
+import { readFileSync, writeFileSync, existsSync } from 'fs'
+import { execSync, spawn } from 'child_process'
+import { resolve } from 'path'
+
+const MODULE = process.argv[2]
+
+if (!MODULE) {
+  console.log('')
+  console.log('🦴  cranium-add — Add a ZEA module to your Cranium app')
+  console.log('')
+  console.log('Usage: npx cranium-add <module>')
+  console.log('')
+  console.log('Available modules:')
+  console.log('  thalamus    Add ZEA auth (OAuth2 PKCE login, user menu)')
+  console.log('')
+  process.exit(0)
+}
+
+if (MODULE !== 'thalamus') {
+  console.log(`❌  Unknown module: ${MODULE}`)
+  console.log('   Available: thalamus')
+  process.exit(1)
+}
+
+const PROJECT_DIR = process.cwd()
+const SDK_PATH = resolve(import.meta.dirname || __dirname, '..')
+
+// Read Cranium app port from vite.config.ts
+function getAppPort() {
+  const vitePath = resolve(PROJECT_DIR, 'vite.config.ts')
+  try {
+    const vite = readFileSync(vitePath, 'utf8')
+    const m = vite.match(/port:\s*(\d+)/)
+    if (m) return parseInt(m[1], 10)
+  } catch {}
+  return 5499
+}
+const APP_PORT = getAppPort()
+
+console.log('')
+console.log('🦴  cranium-add thalamus')
+console.log('')
+
+// ── Step 1: Install @zea/thalamus-sdk ──
+console.log('📦  Installing @zea/thalamus-sdk...')
+try {
+  execSync('npm install @zea/thalamus-sdk', { stdio: 'inherit', cwd: PROJECT_DIR })
+  console.log('')
+} catch {
+  // Try local path fallback
+  try {
+    execSync(`npm install file:${resolve(SDK_PATH, '../../thalamus/sdk')}`, { stdio: 'inherit', cwd: PROJECT_DIR })
+    console.log('')
+  } catch (e2) {
+    console.log('⚠️  Could not install @zea/thalamus-sdk. Run manually:')
+    console.log('   npm install @zea/thalamus-sdk')
+    process.exit(1)
+  }
+}
+
+// ── Step 2: Run thalamus-init (auth setup) ──
+console.log('🧠  Starting Thalamus setup...')
+console.log(`   Cranium app port: ${APP_PORT}`)
+console.log('   A browser window will open for authentication.')
+console.log('')
+
+await new Promise((resolvePromise, rejectPromise) => {
+  const child = spawn('npx', ['thalamus-init'], {
+    stdio: 'inherit',
+    cwd: PROJECT_DIR,
+    shell: true,
+    env: { ...process.env, PORT: String(APP_PORT) },
+  })
+
+  child.on('close', (code) => {
+    if (code === 0) {
+      resolvePromise()
+    } else {
+      console.log('')
+      console.log('⚠️  thalamus-init exited with code', code)
+      console.log('   You can run it manually: npx thalamus-init')
+      console.log('   Then re-run: npx cranium-add thalamus')
+      process.exit(1)
+    }
+  })
+
+  child.on('error', (err) => {
+    rejectPromise(err)
+  })
+})
+
+// ── Step 3: Read .zea-config.json ──
+const zeaConfigPath = resolve(PROJECT_DIR, '.zea-config.json')
+if (!existsSync(zeaConfigPath)) {
+  console.log('')
+  console.log('⚠️  .zea-config.json not found after thalamus-init.')
+  console.log('   Make sure the setup completed successfully.')
+  process.exit(1)
+}
+
+const zeaConfig = JSON.parse(readFileSync(zeaConfigPath, 'utf8'))
+const { clientId, redirectUri, baseUrl } = zeaConfig
+
+if (!clientId || !baseUrl) {
+  console.log('')
+  console.log('⚠️  Missing clientId or baseUrl in .zea-config.json')
+  process.exit(1)
+}
+
+console.log('')
+console.log('✅  Thalamus configured:')
+console.log(`   Client ID : ${clientId}`)
+console.log(`   Base URL  : ${baseUrl}`)
+console.log('')
+
+// ── Step 4: Patch src/App.tsx ──
+const appPath = resolve(PROJECT_DIR, 'src', 'App.tsx')
+if (!existsSync(appPath)) {
+  console.log('⚠️  src/App.tsx not found. Are you in a Cranium project?')
+  process.exit(1)
+}
+
+const thalamusConfig = JSON.stringify({
+  clientId,
+  redirectUri: redirectUri || `http://localhost:5499`,
+  baseUrl,
+})
+
+const newAppTsx = `import { CraniumShell } from '@zea/cranium-sdk'
+import '@zea/cranium-sdk/styles/base.css'
+import { useThalamus, LoginButton, UserMenu } from '@zea/thalamus-sdk'
+
+const thalamusConfig = ${thalamusConfig}
+
+function LoadingScreen() {
+  return (
+    <div style={{
+      display: 'flex', alignItems: 'center', justifyContent: 'center',
+      height: '100vh', background: '#0d1117', color: '#8b949e', fontSize: 14,
+    }}>
+      Loading...
+    </div>
+  )
+}
+
+function LoginScreen() {
+  return (
+    <div style={{
+      display: 'grid', gridTemplateColumns: '1fr 1fr',
+      height: '100vh', width: '100vw', background: '#0d1117',
+      fontFamily: 'system-ui, sans-serif',
+    }}>
+      {/* Left — Welcome */}
+      <div style={{
+        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
+        padding: 48, gap: 20,
+      }}>
+        <div style={{ fontSize: 64 }}>🦴</div>
+        <h1 style={{ fontSize: 28, fontWeight: 700, color: '#e6edf3', margin: 0 }}>
+          Welcome to Cranium
+        </h1>
+        <p style={{ fontSize: 14, color: '#8b949e', textAlign: 'center', maxWidth: 320, margin: 0, lineHeight: 1.6 }}>
+          Your microfrontend workspace. Sign in to access your pieces, tools, and dashboards.
+        </p>
+      </div>
+      {/* Right — Login */}
+      <div style={{
+        display: 'flex', alignItems: 'center', justifyContent: 'center',
+        background: '#161b22', borderLeft: '1px solid #21262d',
+      }}>
+        <LoginButton config={thalamusConfig} label="Login with ZEA" />
+      </div>
+    </div>
+  )
+}
+
+export default function App() {
+  const { isAuthenticated, isLoading } = useThalamus(thalamusConfig)
+
+  if (isLoading) return <LoadingScreen />
+  if (!isAuthenticated) return <LoginScreen />
+
+  return (
+    <CraniumShell
+      config={{
+        apiKey: 'your-api-key',
+        baseUrl: 'http://cranium.zea.localhost',
+      }}
+    />
+  )
+}
+`
+
+writeFileSync(appPath, newAppTsx)
+
+console.log('✅  src/App.tsx updated with Thalamus auth')
+console.log('')
+console.log('🚀  Ready! Run: npm run dev')
+console.log('')

package/bin/cranium-init.mjs

@@ -0,0 +1,80 @@
+#!/usr/bin/env node
+
+import { writeFileSync, mkdirSync } from 'fs'
+import { execSync, exec, spawn } from 'child_process'
+import { resolve, dirname } from 'path'
+import { fileURLToPath } from 'url'
+
+const __dirname = dirname(fileURLToPath(import.meta.url))
+const SDK_PATH = resolve(__dirname, '..')
+const PORT = '5499'
+
+console.log('')
+console.log('🦴  ZEA Cranium — Microfrontend App Creator')
+console.log('')
+
+// Create scaffold
+mkdirSync('src', { recursive: true })
+
+writeFileSync('package.json', JSON.stringify({
+  name: 'my-cranium-app', private: true, type: 'module',
+  scripts: { dev: 'vite', build: 'tsc && vite build' },
+}, null, 2))
+
+writeFileSync('vite.config.ts', `import { defineConfig } from 'vite'\nimport react from '@vitejs/plugin-react'\nexport default defineConfig({ plugins: [react()], server: { port: ${PORT} } })\n`)
+
+writeFileSync('tsconfig.json', JSON.stringify({
+  compilerOptions: { target: 'ES2022', module: 'ESNext', moduleResolution: 'bundler', jsx: 'react-jsx', strict: true, skipLibCheck: true, noEmit: true },
+  include: ['src'],
+}, null, 2))
+
+writeFileSync('index.html', '<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"/><meta name="viewport" content="width=device-width,initial-scale=1.0"/><title>My Cranium App</title><style>body{margin:0;padding:0;overflow:hidden;background:#0d1117}</style></head><body><div id="root"></div><script type="module" src="/src/main.tsx"></script></body></html>\n')
+
+writeFileSync('src/main.tsx', `import React from 'react'\nimport ReactDOM from 'react-dom/client'\nimport App from './App'\nReactDOM.createRoot(document.getElementById('root')!).render(<React.StrictMode><App /></React.StrictMode>)\n`)
+
+writeFileSync('src/App.tsx', `import { CraniumShell } from '@zea/cranium-sdk'\nimport '@zea/cranium-sdk/styles/base.css'\n\nexport default function App() {\n  return (\n    <CraniumShell\n      config={{\n        apiKey: 'your-api-key',\n        baseUrl: 'http://cranium.zea.localhost',\n      }}\n    />\n  )\n}\n`)
+
+writeFileSync('.gitignore', 'node_modules\ndist\n.env\n')
+
+console.log('✅  Scaffold created')
+console.log('')
+
+// Install ALL dependencies in one go
+console.log('📦  Installing dependencies...')
+try {
+  const deps = [
+    'react', 'react-dom',
+    SDK_PATH,  // @zea/cranium-sdk from local path
+  ]
+  const devDeps = [
+    'vite', '@vitejs/plugin-react', 'typescript',
+    '@types/react', '@types/react-dom',
+  ]
+
+  execSync(`npm install ${deps.join(' ')}`, { stdio: 'inherit' })
+  execSync(`npm install -D ${devDeps.join(' ')}`, { stdio: 'inherit' })
+
+  console.log('')
+  console.log('✅  Everything installed!')
+  console.log('')
+  console.log('🚀  Starting dev server...')
+  console.log('')
+
+  // Auto start dev server and open browser
+  const vite = spawn('npx', ['vite', '--host', '0.0.0.0', '--port', PORT], { stdio: 'inherit', shell: true })
+
+  setTimeout(() => {
+    const cmd = process.platform === 'darwin' ? 'open' : process.platform === 'win32' ? 'start' : 'xdg-open'
+    exec(`${cmd} http://localhost:${PORT}`)
+  }, 2000)
+
+  // Keep process alive
+  process.on('SIGINT', () => { vite.kill(); process.exit(0) })
+  process.on('SIGTERM', () => { vite.kill(); process.exit(0) })
+} catch (e) {
+  console.log('')
+  console.log('⚠️  Install failed. Run manually:')
+  console.log(`   npm install react react-dom ${SDK_PATH}`)
+  console.log('   npm install -D vite @vitejs/plugin-react typescript @types/react @types/react-dom')
+  console.log('   npm run dev')
+}

package/dist/components/index.d.mts

@@ -0,0 +1,38 @@
+import React from 'react';
+import { C as CraniumOptions } from '../types-C91Zqt3G.mjs';
+
+interface CraniumTheme {
+    bg?: string;
+    b1?: string;
+    bc?: string;
+    tx?: string;
+    mu?: string;
+    pr?: string;
+    fc?: string;
+    ha?: string;
+}
+interface SidebarSection {
+    id: string;
+    label: string;
+    content: React.ReactNode;
+}
+interface CraniumShellProps {
+    config: CraniumOptions;
+    /** Theme overrides. Defaults to ZEA dark theme */
+    theme?: CraniumTheme;
+    brandName?: string;
+    rightPiece?: React.ReactNode;
+    /** Sidebar sections injected by cranium-add (below dynamic pieces) */
+    sidebarSections?: SidebarSection[];
+    sidebarWidth?: number;
+    rightWidth?: number;
+    showRight?: boolean;
+    className?: string;
+    headerContent?: React.ReactNode;
+    subHeaderContent?: React.ReactNode;
+    footerContent?: React.ReactNode;
+    renderIcon?: (icon: string) => React.ReactNode;
+}
+declare function CraniumShell({ config, theme, brandName, rightPiece, sidebarSections, sidebarWidth: iSW, rightWidth: iRW, showRight: iR, className, headerContent, subHeaderContent, footerContent, renderIcon }: CraniumShellProps): React.JSX.Element;
+
+export { CraniumShell, type CraniumShellProps, type CraniumTheme, type SidebarSection };

package/dist/components/index.d.ts

@@ -0,0 +1,38 @@
+import React from 'react';
+import { C as CraniumOptions } from '../types-C91Zqt3G.js';
+
+interface CraniumTheme {
+    bg?: string;
+    b1?: string;
+    bc?: string;
+    tx?: string;
+    mu?: string;
+    pr?: string;
+    fc?: string;
+    ha?: string;
+}
+interface SidebarSection {
+    id: string;
+    label: string;
+    content: React.ReactNode;
+}
+interface CraniumShellProps {
+    config: CraniumOptions;
+    /** Theme overrides. Defaults to ZEA dark theme */
+    theme?: CraniumTheme;
+    brandName?: string;
+    rightPiece?: React.ReactNode;
+    /** Sidebar sections injected by cranium-add (below dynamic pieces) */
+    sidebarSections?: SidebarSection[];
+    sidebarWidth?: number;
+    rightWidth?: number;
+    showRight?: boolean;
+    className?: string;
+    headerContent?: React.ReactNode;
+    subHeaderContent?: React.ReactNode;
+    footerContent?: React.ReactNode;
+    renderIcon?: (icon: string) => React.ReactNode;
+}
+declare function CraniumShell({ config, theme, brandName, rightPiece, sidebarSections, sidebarWidth: iSW, rightWidth: iRW, showRight: iR, className, headerContent, subHeaderContent, footerContent, renderIcon }: CraniumShellProps): React.JSX.Element;
+
+export { CraniumShell, type CraniumShellProps, type CraniumTheme, type SidebarSection };