your-ai-workflow-firebase-os 1.2.1

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "your-ai-workflow-firebase-os",
+  "version": "1.2.1",
+  "description": "A complete Firebase-powered admin OS — one React component.",
+  "type": "module",
+  "main": "dist/firebase-os.cjs.js",
+  "module": "dist/firebase-os.es.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/firebase-os.es.js",
+      "require": "./dist/firebase-os.cjs.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./styles.css": {
+      "default": "./dist/firebase-os.css"
+    },
+    "./dist/firebase-os.css": {
+      "default": "./dist/firebase-os.css"
+    }
+  },
+  "files": [
+    "dist",
+    "scripts",
+    "src"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "build": "tsc -b && vite build",
+    "build:lib": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "postinstall": "node scripts/postinstall.js"
+  },
+  "dependencies": {
+    "@eslint/js": "^9.39.4",
+    "@tailwindcss/vite": "^4.2.2",
+    "@types/node": "^24.12.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "clsx": "^2.1.1",
+    "firebase": ">=10",
+    "framer-motion": "^12.38.0",
+    "fuse.js": "^7.3.0",
+    "iconoir": "^7.11.0",
+    "iconoir-react": "^7.11.0",
+    "lucide-react": "^1.7.0",
+    "react": ">=18",
+    "react-dom": ">=18",
+    "react-dropzone": "^15.0.0",
+    "react-international-phone": "^4.8.0",
+    "react-phone-number-input": "^3.4.16",
+    "react-router-dom": ">=6",
+    "tailwind-merge": "^3.5.0",
+    "tailwindcss": "^4.2.2",
+    "typescript": "~5.9.3",
+    "vite": "^8.0.1"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "eslint": "^9.39.4",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.5.2",
+    "globals": "^17.4.0",
+    "jsdom": "^29.0.1",
+    "typescript-eslint": "^8.57.0",
+    "vite-plugin-dts": "^5.0.0",
+    "vitest": "^4.1.2"
+  },
+  "peerDependencies": {
+    "firebase": ">=10",
+    "react": ">=18",
+    "react-dom": ">=18",
+    "react-router-dom": ">=6"
+  }
+}

package/scripts/postinstall.js

@@ -0,0 +1,245 @@
+#!/usr/bin/env node
+/**
+ * your-ai-workflow-firebase-os postinstall script
+ *
+ * Runs automatically after `npm install your-ai-workflow-firebase-os`.
+ * Patches the consumer project so that <FirebaseOS /> renders correctly
+ * out of the box — no manual cleanup required.
+ *
+ * What it does:
+ *   1. Clears src/index.css and src/App.css to remove Vite default styling
+ *      that would clash with the library's design system.
+ *   2. Writes a clean src/main.tsx that removes the Vite index.css import.
+ *   3. Writes the minimal src/App.tsx that mounts <FirebaseOS />.
+ */
+
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+// Walk up from node_modules/your-ai-workflow-firebase-os/scripts/ to find the consumer project root
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+// __dirname = <consumer>/node_modules/your-ai-workflow-firebase-os/scripts
+const consumerRoot = path.resolve(__dirname, '..', '..', '..');
+
+// Only run when we are truly installed inside a consumer (not during our own dev)
+const consumerPkg = path.join(consumerRoot, 'package.json');
+if (!fs.existsSync(consumerPkg)) {
+  console.log('[your-ai-workflow-firebase-os] postinstall: no package.json found up the tree, skipping.');
+  process.exit(0);
+}
+
+let pkgJson;
+try {
+  pkgJson = JSON.parse(fs.readFileSync(consumerPkg, 'utf8'));
+} catch {
+  process.exit(0);
+}
+
+// Don't self-apply when running inside our own library project
+if (pkgJson.name === 'your-ai-workflow-firebase-os') {
+  process.exit(0);
+}
+
+const srcDir = path.join(consumerRoot, 'src');
+
+// No src/ directory means this isn't a Vite/React project — skip silently
+if (!fs.existsSync(srcDir)) {
+  process.exit(0);
+}
+
+console.log('\n[your-ai-workflow-firebase-os] Setting up project for zero-config usage...\n');
+
+// ── 1. Clear Vite's default conflicting CSS files ───────────────────────────
+const cssFiles = ['index.css', 'App.css'];
+for (const file of cssFiles) {
+  const filePath = path.join(srcDir, file);
+  if (fs.existsSync(filePath)) {
+    fs.writeFileSync(filePath, '/* cleared by your-ai-workflow-firebase-os postinstall */\n');
+    console.log(`  ✓ Cleared ${file} (was conflicting with your-ai-workflow-firebase-os styles)`);
+  }
+}
+
+// ── 2. Rewrite main.tsx — import library + theme CSS at the entry point ─────
+const mainPath = path.join(srcDir, 'main.tsx');
+if (fs.existsSync(mainPath)) {
+  const mainContent = fs.readFileSync(mainPath, 'utf8');
+  // Rewrite if it has the default Vite CSS import OR if it doesn't have our library CSS
+  if (mainContent.includes("import './index.css'") || mainContent.includes('import "./index.css"') || !mainContent.includes('your-ai-workflow-firebase-os')) {
+    const clean = `import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+
+// Firebase OS — compiled library styles (Tailwind utilities, components, layouts)
+import 'your-ai-workflow-firebase-os/styles.css'
+// Firebase OS — local theme overrides (CSS variables, data-theme, custom styles)
+import './your-ai-workflow-firebase-os/theme.css'
+
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)
+`;
+    fs.writeFileSync(mainPath, clean);
+    console.log('  ✓ Patched main.tsx with Firebase OS styles');
+  }
+}
+
+// ── 3. Hybrid Architecture: Create local overrides directory ─────────────
+const fbosDir = path.join(srcDir, 'your-ai-workflow-firebase-os');
+if (!fs.existsSync(fbosDir)) fs.mkdirSync(fbosDir, { recursive: true });
+
+// Copy raw index.css to give user full control over Tailwind and variables
+const sourceCssPath = path.join(__dirname, '..', 'src', 'index.css');
+if (fs.existsSync(sourceCssPath)) {
+  fs.copyFileSync(sourceCssPath, path.join(fbosDir, 'theme.css'));
+  console.log('  ✓ Copied theme.css to your src/your-ai-workflow-firebase-os directory');
+}
+
+// Copy configurations
+const configsDir = path.join(fbosDir, 'configs');
+if (!fs.existsSync(configsDir)) fs.mkdirSync(configsDir, { recursive: true });
+
+const copyConfig = (srcPath, destName) => {
+  const fullSrc = path.join(__dirname, '..', 'src', 'configs', srcPath);
+  if (fs.existsSync(fullSrc)) {
+    fs.copyFileSync(fullSrc, path.join(configsDir, destName));
+  }
+};
+copyConfig('theme.config.ts', 'theme.config.ts');
+copyConfig('pages/home.config.ts', 'home.config.ts');
+copyConfig('forms/contactForm.config.ts', 'contactForm.config.ts');
+copyConfig('forms/supportForm.config.ts', 'supportForm.config.ts');
+console.log('  ✓ Copied configuration files to your src/your-ai-workflow-firebase-os/configs directory');
+
+// Read and rewrite Home.tsx
+const sourceHomePath = path.join(__dirname, '..', 'src', 'pages', 'Home.tsx');
+if (fs.existsSync(sourceHomePath)) {
+  let homeContent = fs.readFileSync(sourceHomePath, 'utf8');
+  homeContent = homeContent.replace(/from '\.\.\/components\/ContactPopup'/g, "from 'your-ai-workflow-firebase-os'");
+  homeContent = homeContent.replace(/from '\.\.\/lib\/firebase'/g, "from 'your-ai-workflow-firebase-os'");
+  homeContent = homeContent.replace(/from '\.\.\/configs\/pages\/home\.config'/g, "from './configs/home.config'");
+  fs.writeFileSync(path.join(fbosDir, 'Home.tsx'), homeContent);
+  console.log('  ✓ Created local Home.tsx template override');
+}
+
+// ── 4. Write App.tsx with Hybrid Overrides Wired Up ───────────────────────
+// Note: CSS imports are in main.tsx (entry point) for correct load ordering.
+const appPath = path.join(srcDir, 'App.tsx');
+const appContent = `import { FirebaseOS } from 'your-ai-workflow-firebase-os';
+
+// Local Hybrid Overrides
+import { Home } from './your-ai-workflow-firebase-os/Home';
+import { themeConfig } from './your-ai-workflow-firebase-os/configs/theme.config';
+
+// Vite injects these from your .env file at dev/build time.
+const firebaseConfig = {
+  apiKey: import.meta.env.VITE_FIREBASE_API_KEY || '',
+  authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN || '',
+  projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID || '',
+  storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET || '',
+  messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID || '',
+  appId: import.meta.env.VITE_FIREBASE_APP_ID || '',
+};
+
+const adminEmails = (import.meta.env.VITE_ADMIN_EMAILS || '')
+  .split(',')
+  .map((e: string) => e.trim())
+  .filter(Boolean);
+
+export default function App() {
+  return (
+    <FirebaseOS
+      firebaseConfig={firebaseConfig}
+      adminEmails={adminEmails}
+      themeConfig={themeConfig}
+      components={{
+        Home: Home
+      }}
+    />
+  );
+}
+`;
+
+const existingApp = fs.existsSync(appPath) ? fs.readFileSync(appPath, 'utf8') : '';
+if (!existingApp.includes('your-ai-workflow-firebase-os')) {
+  fs.writeFileSync(appPath, appContent);
+  console.log('  ✓ Wrote App.tsx with <FirebaseOS /> hybrid architecture ready to go');
+} else {
+  console.log('  ℹ App.tsx already uses your-ai-workflow-firebase-os — skipped');
+}
+
+// ── 5. Setup Tailwind V4 in host app ───────────────────────────────────────
+// We'll update the user's package.json to include tailwindcss dependencies
+const pkgPath = path.join(consumerRoot, 'package.json');
+if (fs.existsSync(pkgPath)) {
+  const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'));
+  let pkgModified = false;
+  pkg.devDependencies = pkg.devDependencies || {};
+  
+  if (!pkg.devDependencies['tailwindcss']) {
+    pkg.devDependencies['tailwindcss'] = '^4.0.0';
+    pkgModified = true;
+  }
+  if (!pkg.devDependencies['@tailwindcss/vite']) {
+    pkg.devDependencies['@tailwindcss/vite'] = '^4.0.0';
+    pkgModified = true;
+  }
+  if (pkgModified) {
+    fs.writeFileSync(pkgPath, JSON.stringify(pkg, null, 2));
+    console.log('  ✓ Added tailwindcss and @tailwindcss/vite to your package.json');
+  }
+}
+
+const viteConfigPath = path.join(consumerRoot, 'vite.config.ts');
+if (fs.existsSync(viteConfigPath)) {
+  let viteConfig = fs.readFileSync(viteConfigPath, 'utf8');
+  if (!viteConfig.includes('@tailwindcss/vite')) {
+    // Build the patched file with real newlines (not escaped \n literals)
+    const importLine = "import tailwindcss from '@tailwindcss/vite';";
+    viteConfig = importLine + '\n' + viteConfig;
+    viteConfig = viteConfig.replace(
+      'plugins: [',
+      'plugins: [\n    tailwindcss(),'
+    );
+    fs.writeFileSync(viteConfigPath, viteConfig);
+    console.log('  ✓ Patched vite.config.ts to enable Tailwind CSS v4');
+  }
+}
+
+// ── 6. Create .env file with empty placeholders ────────────────────────────
+const envPath = path.join(consumerRoot, '.env');
+if (!fs.existsSync(envPath)) {
+  const envContent = `# 🔥 Firebase OS Configuration
+# Fill in each value below with your Firebase Web App credentials.
+# Find them in Firebase Console -> Project Settings -> General -> Your Apps
+# Leave values empty until you are ready — the app will show a Setup page.
+# After filling them in, restart the dev server (npm run dev).
+
+# Your Firebase API Key (e.g. AIzaSyD...)
+VITE_FIREBASE_API_KEY=
+# Your Firebase Auth Domain (e.g. myproject.firebaseapp.com)
+VITE_FIREBASE_AUTH_DOMAIN=
+# Your Firebase Project ID (e.g. myproject)
+VITE_FIREBASE_PROJECT_ID=
+# Your Firebase Storage Bucket (e.g. myproject.firebasestorage.app)
+VITE_FIREBASE_STORAGE_BUCKET=
+# Your Firebase Messaging Sender ID (e.g. 123456789012)
+VITE_FIREBASE_MESSAGING_SENDER_ID=
+# Your Firebase App ID (e.g. 1:123456789012:web:abcdef123456)
+VITE_FIREBASE_APP_ID=
+
+# Comma-separated list of admin email addresses (these users get admin role on first registration)
+# Example: you@email.com,colleague@email.com
+VITE_ADMIN_EMAILS=
+`;
+  fs.writeFileSync(envPath, envContent);
+  console.log('  ✓ Created .env template (fill in your Firebase credentials)');
+}
+
+console.log('\n[your-ai-workflow-firebase-os] 🎉 Hybrid Setup complete! You now have full control over styling and configs.\n');
+console.log('🚨 IMPORTANT NEXT STEPS:');
+console.log('1. Run `npm install` again to install the required Tailwind CSS dependencies.');
+console.log('2. Run `npm run dev` to start your app.\n');

package/src/App.css

@@ -0,0 +1,184 @@
+.counter {
+  font-size: 16px;
+  padding: 5px 10px;
+  border-radius: 5px;
+  color: var(--accent);
+  background: var(--accent-bg);
+  border: 2px solid transparent;
+  transition: border-color 0.3s;
+  margin-bottom: 24px;
+
+  &:hover {
+    border-color: var(--accent-border);
+  }
+  &:focus-visible {
+    outline: 2px solid var(--accent);
+    outline-offset: 2px;
+  }
+}
+
+.hero {
+  position: relative;
+
+  .base,
+  .framework,
+  .vite {
+    inset-inline: 0;
+    margin: 0 auto;
+  }
+
+  .base {
+    width: 170px;
+    position: relative;
+    z-index: 0;
+  }
+
+  .framework,
+  .vite {
+    position: absolute;
+  }
+
+  .framework {
+    z-index: 1;
+    top: 34px;
+    height: 28px;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg)
+      scale(1.4);
+  }
+
+  .vite {
+    z-index: 0;
+    top: 107px;
+    height: 26px;
+    width: auto;
+    transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg)
+      scale(0.8);
+  }
+}
+
+#center {
+  display: flex;
+  flex-direction: column;
+  gap: 25px;
+  place-content: center;
+  place-items: center;
+  flex-grow: 1;
+
+  @media (max-width: 1024px) {
+    padding: 32px 20px 24px;
+    gap: 18px;
+  }
+}
+
+#next-steps {
+  display: flex;
+  border-top: 1px solid var(--border);
+  text-align: left;
+
+  & > div {
+    flex: 1 1 0;
+    padding: 32px;
+    @media (max-width: 1024px) {
+      padding: 24px 20px;
+    }
+  }
+
+  .icon {
+    margin-bottom: 16px;
+    width: 22px;
+    height: 22px;
+  }
+
+  @media (max-width: 1024px) {
+    flex-direction: column;
+    text-align: center;
+  }
+}
+
+#docs {
+  border-right: 1px solid var(--border);
+
+  @media (max-width: 1024px) {
+    border-right: none;
+    border-bottom: 1px solid var(--border);
+  }
+}
+
+#next-steps ul {
+  list-style: none;
+  padding: 0;
+  display: flex;
+  gap: 8px;
+  margin: 32px 0 0;
+
+  .logo {
+    height: 18px;
+  }
+
+  a {
+    color: var(--text-h);
+    font-size: 16px;
+    border-radius: 6px;
+    background: var(--social-bg);
+    display: flex;
+    padding: 6px 12px;
+    align-items: center;
+    gap: 8px;
+    text-decoration: none;
+    transition: box-shadow 0.3s;
+
+    &:hover {
+      box-shadow: var(--shadow);
+    }
+    .button-icon {
+      height: 18px;
+      width: 18px;
+    }
+  }
+
+  @media (max-width: 1024px) {
+    margin-top: 20px;
+    flex-wrap: wrap;
+    justify-content: center;
+
+    li {
+      flex: 1 1 calc(50% - 8px);
+    }
+
+    a {
+      width: 100%;
+      justify-content: center;
+      box-sizing: border-box;
+    }
+  }
+}
+
+#spacer {
+  height: 88px;
+  border-top: 1px solid var(--border);
+  @media (max-width: 1024px) {
+    height: 48px;
+  }
+}
+
+.ticks {
+  position: relative;
+  width: 100%;
+
+  &::before,
+  &::after {
+    content: '';
+    position: absolute;
+    top: -4.5px;
+    border: 5px solid transparent;
+  }
+
+  &::before {
+    left: 0;
+    border-left-color: var(--border);
+  }
+  &::after {
+    right: 0;
+    border-right-color: var(--border);
+  }
+}