your-ai-workflow-firebase-os 1.2.21 → 1.2.23

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "your-ai-workflow-firebase-os",
-  "version": "1.2.21",
+  "version": "1.2.23",
   "description": "A complete Firebase-powered admin OS — one React component.",
   "type": "module",
   "main": "dist/your-ai-workflow-firebase-os.cjs.js",

package/scripts/postinstall.js

@@ -114,6 +114,21 @@ 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');
 
+// Copy microcomponents auto-registry
+const microcomponentsSourceDir = path.join(__dirname, '..', 'src', 'microcomponents');
+const microcomponentsDestDir = path.join(fbosDir, 'microcomponents');
+if (fs.existsSync(microcomponentsSourceDir)) {
+  if (!fs.existsSync(microcomponentsDestDir)) fs.mkdirSync(microcomponentsDestDir, { recursive: true });
+  const files = fs.readdirSync(microcomponentsSourceDir);
+  for (const file of files) {
+    // Only copy the registry — user creates their own content files
+    if (file === 'registry.ts') {
+      fs.copyFileSync(path.join(microcomponentsSourceDir, file), path.join(microcomponentsDestDir, file));
+    }
+  }
+  console.log('  ✓ Copied microcomponents auto-registry to your src/your-ai-workflow-firebase-os/microcomponents directory');
+}
+
 // Read and rewrite Home.tsx
 const sourceHomePath = path.join(__dirname, '..', 'src', 'pages', 'Home.tsx');
 if (fs.existsSync(sourceHomePath)) {
@@ -135,6 +150,9 @@ const appContent = `import { FirebaseOS } from 'your-ai-workflow-firebase-os';
 import { Home } from './your-ai-workflow-firebase-os/Home';
 import { themeConfig } from './your-ai-workflow-firebase-os/configs/theme.config';
 
+// Auto-discovered microcomponents (zero-config: just create a .tsx file in microcomponents/)
+import { microcomponentRegistry } from './your-ai-workflow-firebase-os/microcomponents/registry';
+
 // Local Configuration Defaults (The Final Boss)
 import { defaultHomeConfig } from './your-ai-workflow-firebase-os/configs/home.config';
 import { contactFormConfig } from './your-ai-workflow-firebase-os/configs/contactForm.config';
@@ -161,6 +179,7 @@ export default function App() {
       firebaseConfig={firebaseConfig}
       adminEmails={adminEmails}
       themeConfig={themeConfig}
+      microcomponents={microcomponentRegistry}
       components={{
         Home: Home
       }}

package/src/FirebaseOS.tsx

@@ -36,6 +36,9 @@ export interface FirebaseOSProps {
   /** Custom page components mapped by route (e.g. { "/focus": FocusTimerPage }) */
   customRoutes?: Record<string, React.ComponentType<any>>;
 
+  /** Auto-discovered microcomponents mapped by parsedTabName (e.g. { timer: TimerContent }) */
+  microcomponents?: Record<string, React.ComponentType<any>>;
+
   /** Component overrides for the hybrid template architecture */
   components?: {
     Home?: React.ComponentType<any>;
@@ -80,6 +83,7 @@ export function FirebaseOS(props: FirebaseOSProps) {
     themeConfig: props.themeConfig,
     components: props.components,
     customRoutes: props.customRoutes,
+    microcomponents: props.microcomponents,
     defaultConfigs: props.defaultConfigs,
   };
 

package/src/lib/ConfigContext.tsx

@@ -20,6 +20,8 @@ export interface FirebaseOSConfig {
   onAuthChange?: (user: any) => void;
   themeConfig?: any;
   customRoutes?: Record<string, React.ComponentType<any>>;
+  /** Auto-discovered microcomponents mapped by parsedTabName (e.g. { timer: TimerContent }) */
+  microcomponents?: Record<string, React.ComponentType<any>>;
   components?: {
     Home?: React.ComponentType<any>;
     TemplateBoard?: React.ComponentType<any>;

package/src/microcomponents/registry.ts

@@ -0,0 +1,39 @@
+/**
+ * Microcomponent Auto-Registry
+ *
+ * Uses Vite's import.meta.glob to auto-discover all .tsx files in this folder.
+ * Each file is matched to a tab by convention:
+ *   - "TimerContent.tsx" → matches tab named "Timer" (parsedTabName: "timer")
+ *   - "MyDashboardContent.tsx" → matches "My Dashboard" (parsedTabName: "my_dashboard")
+ *
+ * The AI only needs to create a file here. No routing or App.tsx changes needed.
+ */
+
+const modules = import.meta.glob('./*.tsx', { eager: true }) as Record<string, { default: React.ComponentType<any> }>;
+
+/**
+ * Auto-generated registry mapping parsedTabName → React component.
+ * e.g. { timer: TimerContent, my_dashboard: MyDashboardContent }
+ */
+export const microcomponentRegistry: Record<string, React.ComponentType<any>> = {};
+
+for (const filePath in modules) {
+  const mod = modules[filePath];
+  if (!mod?.default) continue;
+
+  // Extract component name from path: "./TimerContent.tsx" → "TimerContent"
+  const fileName = filePath.replace('./', '').replace('.tsx', '');
+
+  // Skip the registry file itself
+  if (fileName === 'registry') continue;
+
+  // Convert PascalCase to snake_case tab name:
+  // "TimerContent" → strip "Content" → "Timer" → "timer"
+  // "MyDashboardContent" → "MyDashboard" → "my_dashboard"
+  const baseName = fileName.replace(/Content$/, '');
+  const tabName = baseName
+    .replace(/([a-z0-9])([A-Z])/g, '$1_$2')
+    .toLowerCase();
+
+  microcomponentRegistry[tabName] = mod.default;
+}

package/src/pages/DynamicPage.tsx

@@ -212,25 +212,36 @@ export function DynamicPage() {
     return <Navigate to="/login" state={{ from: location }} />;
   }
 
+  // Explicit customRoutes override (manual registration in App.tsx)
   const CustomRouteComponent = globalConfig.customRoutes?.[location.pathname] || (config && config.route ? globalConfig.customRoutes?.[config.route] : null);
-  if (CustomRouteComponent) {
-    return <CustomRouteComponent config={config} />;
-  }
 
   const parsedPageName = config.pageName?.toLowerCase().replace(/\s+/g, '_') || config.pageId || 'custom_page';
   const prefix = `pub_${parsedPageName}`;
 
+  // Auto-discovered microcomponent by tab name (zero-config)
+  const parsedTabName = (config.tabName || config.pageId || config.pageName || 'custom')
+    .toLowerCase().replace(/[^a-z0-9]+/g, '_');
+  const AutoComponent = globalConfig.microcomponents?.[parsedTabName];
+
+  // Priority: explicit customRoute > auto-discovered microcomponent
+  const ContentOverride = CustomRouteComponent || AutoComponent || undefined;
+
   if (config.template === 'none') {
     if (config.isAdmin) {
-      return <AdminPageTemplate config={config} />;
+      return <AdminPageTemplate config={config} customContent={ContentOverride} />;
     }
     if (config.isShared) {
-      return <SharedPageTemplate config={config} />;
+      return <SharedPageTemplate config={config} customContent={ContentOverride} />;
     }
     if (config.isPrivate) {
-      return <PrivatePageTemplate config={config} />;
+      return <PrivatePageTemplate config={config} customContent={ContentOverride} />;
     }
-    return <PublicPageTemplate config={config} />;
+    return <PublicPageTemplate config={config} customContent={ContentOverride} />;
+  }
+
+  // For non-'none' templates, customRoutes still replace the full page
+  if (CustomRouteComponent) {
+    return <CustomRouteComponent config={config} />;
   }
 
   if (config.template === 'board') {

package/src/pages/PagesAdmin.tsx

@@ -437,73 +437,81 @@ export function PagesAdmin() {
           [`user_${parsedTabName}_records`]: { prefix: 'user_files', driveCollection: 'user_files' },
         };
 
+        const cleanupPromises: Promise<any>[] = [];
+
         for (const col of collectionsClean) {
-          try {
-            const recordsSnap = await getDocs(collection(db, col));
-            const mapping = storageMap[col];
-
-            // Delete files from Storage and Drive for file-type records
-            for (const d of recordsSnap.docs) {
-              const data = d.data();
-              if (data.recordType === 'file' && data.downloadURL && mapping) {
-                try {
-                  const encodedPrefix = `${mapping.prefix}%2F`;
-                  const fileName = data.downloadURL.split(encodedPrefix)[1]?.split('?')[0];
-                  if (fileName) {
-                    const fileRef = ref(storage, `${mapping.prefix}/${decodeURIComponent(fileName)}`);
-                    await deleteObject(fileRef).catch(() => {});
-                  }
-                  // Remove matching Drive metadata doc by downloadURL
-                  const driveSnap = await getDocs(query(
-                    collection(db, mapping.driveCollection),
-                    where('downloadURL', '==', data.downloadURL)
-                  ));
-                  for (const driveDoc of driveSnap.docs) {
-                    await deleteDoc(driveDoc.ref);
-                  }
-                } catch (fileErr) {
-                  console.error('Error deleting storage file:', fileErr);
+          cleanupPromises.push((async () => {
+            try {
+              const recordsSnap = await getDocs(collection(db, col));
+              const mapping = storageMap[col];
+              const filePromises: Promise<any>[] = [];
+
+              // Delete files from Storage and Drive for file-type records
+              for (const d of recordsSnap.docs) {
+                const data = d.data();
+                if (data.recordType === 'file' && data.downloadURL && mapping) {
+                  filePromises.push((async () => {
+                    try {
+                      const encodedPrefix = `${mapping.prefix}%2F`;
+                      const fileName = data.downloadURL.split(encodedPrefix)[1]?.split('?')[0];
+                      if (fileName) {
+                        const fileRef = ref(storage, `${mapping.prefix}/${decodeURIComponent(fileName)}`);
+                        await deleteObject(fileRef).catch(() => {});
+                      }
+                      // Remove matching Drive metadata doc by downloadURL
+                      const driveSnap = await getDocs(query(
+                        collection(db, mapping.driveCollection),
+                        where('downloadURL', '==', data.downloadURL)
+                      ));
+                      await Promise.all(driveSnap.docs.map(driveDoc => deleteDoc(driveDoc.ref)));
+                    } catch (fileErr) {
+                      console.error('Error deleting storage file:', fileErr);
+                    }
+                  })());
                 }
               }
-            }
+              await Promise.all(filePromises);
 
-            // Delete all record documents in this collection
-            const deletePromises = recordsSnap.docs.map(d => deleteDoc(d.ref));
-            await Promise.all(deletePromises);
+              // Delete all record documents in this collection
+              await Promise.all(recordsSnap.docs.map(d => deleteDoc(d.ref)));
 
-            // Clear localStorage cache for this collection
-            try { localStorage.removeItem(`fbos_records_${col}`); } catch {}
-          } catch (colErr) {
-            console.error(`Error cleaning up collection ${col}:`, colErr);
-          }
+              // Clear localStorage cache for this collection
+              try { localStorage.removeItem(`fbos_records_${col}`); } catch {}
+            } catch (colErr) {
+              console.error(`Error cleaning up collection ${col}:`, colErr);
+            }
+          })());
         }
 
         // Also clean Drive collections by sourceTab (catches any orphaned file docs)
         const driveCollections = ['admin_files', 'mem_files', 'user_files'];
         for (const driveColl of driveCollections) {
-          try {
-            const orphanedSnap = await getDocs(query(
-              collection(db, driveColl),
-              where('sourceTab', '==', parsedTabName)
-            ));
-            for (const orphanDoc of orphanedSnap.docs) {
-              const data = orphanDoc.data();
-              // Also delete the actual file from Storage if we haven't already
-              if (data.downloadURL) {
-                try {
-                  const prefix = driveColl.replace('_files', '_files');
-                  const encodedPrefix = `${prefix}%2F`;
-                  const fName = data.downloadURL.split(encodedPrefix)[1]?.split('?')[0];
-                  if (fName) {
-                    const fRef = ref(storage, `${prefix}/${decodeURIComponent(fName)}`);
-                    await deleteObject(fRef).catch(() => {});
-                  }
-                } catch {}
-              }
-              await deleteDoc(orphanDoc.ref);
-            }
-          } catch {}
+          cleanupPromises.push((async () => {
+            try {
+              const orphanedSnap = await getDocs(query(
+                collection(db, driveColl),
+                where('sourceTab', '==', parsedTabName)
+              ));
+              await Promise.all(orphanedSnap.docs.map(async (orphanDoc) => {
+                const data = orphanDoc.data();
+                // Also delete the actual file from Storage if we haven't already
+                if (data.downloadURL) {
+                  try {
+                    const encodedPrefix = `${driveColl}%2F`;
+                    const fName = data.downloadURL.split(encodedPrefix)[1]?.split('?')[0];
+                    if (fName) {
+                      const fRef = ref(storage, `${driveColl}/${decodeURIComponent(fName)}`);
+                      await deleteObject(fRef).catch(() => {});
+                    }
+                  } catch {}
+                }
+                await deleteDoc(orphanDoc.ref);
+              }));
+            } catch {}
+          })());
         }
+
+        await Promise.all(cleanupPromises);
       }
 
       // Delete the tab/page document itself

package/src/prompts/pages/publicPage.ts

@@ -1,44 +1,19 @@
 export const publicPagePrompt = (config: any, forms: string[] = []) => {
   const parsedPageName = (config.pageName || config.pageId || 'custom_page')
     .toLowerCase().replace(/[^a-z0-9]+/g, '_');
-  const microName = `${parsedPageName.charAt(0).toUpperCase()}${parsedPageName.slice(1)}Content`;
+  const pascalName = parsedPageName
+    .split('_')
+    .map((w: string) => w.charAt(0).toUpperCase() + w.slice(1))
+    .join('');
+  const fileName = `${pascalName}Content`;
 
-  return `I need your help building the inner content for a newly created Public Page. This page is powered by the \`PublicPageTemplate\` (located at \`src/templates/PublicPageTemplate.tsx\`).
+  return `Create file: src/your-ai-workflow-firebase-os/microcomponents/${fileName}.tsx
 
-The page "infrastructure" (routing, header, public accessibility) is already set up and working. Your goal is to design the "Landing Content" that lives inside this page.
+export default function ${fileName}({ config }: { config: any }) {
+  return ( <div>your content here</div> );
+}
 
-### ── Current Page Configuration ──────────────────────────────────────────────
-\`\`\`json
-${JSON.stringify({
-    pageName: config.pageName,
-    pageTitle: config.pageTitle,
-    route: config.route,
-    template: config.template,
-  }, null, 2)}
-\`\`\`
+No page titles, no nav, no routing — already handled. Default export only.
 
-### ── Available Forms ────────────────────────────────────────────────────────
-The following public forms are available in the system. **These are for your information only—do NOT use them unless specifically needed.** Your priority is to listen to the user's specific input and decide if a particular modal, form, or component is actually required for the context of this page:
-${forms.length > 0 ? forms.map(f => `- ${f}`).join('\n') : '- No public forms found'}
-
-### ── Your Mission ────────────────────────────────────────────────────────────
-1. **Create the Content Layer**: Design a new micro-component at \`src/microcomponents/${microName}.tsx\`.
-2. **Build the UI**: Inside this component, build the landing page content (hero sections, feature grids, contact sections, etc.).
-3. **Inject into Template**: Once created, import and place \`<${microName} />\` inside the main content area of \`src/templates/PublicPageTemplate.tsx\`, replacing the placeholder robot icon and default text.
-
-### ── Guardrails ─────────────────────────────────────────────────────────────
-- **DO NOT** modify the outer layout of \`PublicPageTemplate.tsx\` (back buttons, page header, footer, dynamic title).
-- **DO NOT** change the routing or page exports.
-- Focus exclusively on the inner content box using the micro-component strategy.
-
-### ── Aesthetic & Performance (Theme System) ───────────────────────────────
-Build with the user's active theme in mind:
-- **CSS Variables**: \`var(--bg-color)\`, \`var(--fg-color)\`, \`var(--accent-color)\`, \`var(--panel-bg)\`, \`var(--panel-border)\`.
-- **Components**: Re-use \`<Button />\`, \`<Input />\`, \`<ConfirmModal />\`, and \`<ContactPopup />\` natively.
-- **Styles**: Use the \`glass-panel\` class for sections and \`text-gradient\` for headers.
-
-### ── Important Formatting Rules ──────────────────────────────────────────────
-- **NO REDUNDANT HEADERS**: The parent template already injects a large dynamic page title and action buttons. DO NOT add a main \`<h1>\` or \`<h2>\` page title at the top of your micro-component. Start directly with your cards, lists, or sub-sections.
-
-[WHAT SHOULD I BUILD ON THIS PUBLIC PAGE?]`;
+[WHAT TO BUILD?]`;
 };

package/src/prompts/tabs/crud/admin.ts

@@ -1,63 +1,21 @@
 export const adminCrudPrompt = (config: any, recordsCollection: string) => {
   const parsedTabName = (config.tabName || config.pageId || 'admin_page')
     .toLowerCase().replace(/[^a-z0-9]+/g, '_');
-  const microName = `${parsedTabName.charAt(0).toUpperCase()}${parsedTabName.slice(1)}Content`;
+  const pascalName = parsedTabName
+    .split('_')
+    .map((w: string) => w.charAt(0).toUpperCase() + w.slice(1))
+    .join('');
+  const fileName = `${pascalName}Content`;
 
-  return `I need your help building the inner functionality for an **already existing** Admin View. This view is powered by the \`AdminPageTemplate\` (located at \`src/templates/AdminPageTemplate.tsx\`).
+  return `Create file: src/your-ai-workflow-firebase-os/microcomponents/${fileName}.tsx
 
-The "infrastructure" (routing, header, database connection) is entirely set up and functioning. Your goal is to design the "Dashboard Content" that lives inside this specific admin view.
+export default function ${fileName}({ config }: { config: any }) {
+  return ( <div>your content here</div> );
+}
 
-### ── Current View Configuration ──────────────────────────────────────────────
-\`\`\`json
-${JSON.stringify({
-    viewName: config.tabName,
-    viewTitle: config.tabTitle,
-    route: config.route,
-    template: config.template,
-    storageEnabled: !!config.storage,
-    showActionButton: !!config.showButton,
-    buttonStyle: config.buttonAction || 'primary',
-  }, null, 2)}
-\`\`\`
+Firestore collection: \`${recordsCollection}\`
+Firebase imports: \`import { db } from 'your-ai-workflow-firebase-os'\`
+No page titles, no nav, no routing — already handled. Default export only.
 
-### ── Note on Forms ──────────────────────────────────────────────────────────
-**No forms are needed for this view.** Focus on building the administrative dashboard and management tools requested by the user.
-
-### ── Data & Storage Architecture ─────────────────────────────────────────────
-The app is already configured to handle data for this specific view using these paths:
-- **Firestore Collection**: \`${recordsCollection}\` (Use this for all view data).
-- **Storage Layer**: ${config.storage ? "Enabled. Uploads are handled via \`admin_files/\` folder in Storage and mirrored to a shared Firestore collection for tracking." : "Disabled for this view."}
-- **Access Level**: Full Admin Access. This view is only visible to users with the 'admin' role.
-
-### ── Your Mission ────────────────────────────────────────────────────────────
-1. **Create the Page**: Create a full page component at \`src/pages/\${microName}Page.tsx\`. Include \`<DashboardNav />\` from \`your-ai-workflow-firebase-os\` at the top of the content area.
-2. **Handle UX/UI**: Inside this component, build the interface (lists, charts, management forms, or any feature requested).
-3. **Register the Route**: Open \`src/App.tsx\` and map this component to the \`customRoutes\` prop of \`<FirebaseOS>\`:
-\`\`\`tsx
-import { \${microName}Page } from './pages/\${microName}Page';
-
-// Inside App.tsx:
-<FirebaseOS 
-  customRoutes={{
-    '\${config.route}': \${microName}Page
-  }}
-  // ...
-/>
-\`\`\`
-
-### ── Guardrails ─────────────────────────────────────────────────────────────
-- **CRITICAL: DO NOT CREATE A NEW ROUTE IN REACT ROUTER.** You are only mapping a component to an existing dynamic route via \\\`customRoutes\\\`.
-- **Database Logic**: You must write your own database queries inside the component using the provided collection names.
-
-### ── Aesthetic & Performance (Theme System) ───────────────────────────────
-Build with the user's active theme in mind:
-- **CSS Variables**: \`var(--bg-color)\`, \`var(--fg-color)\`, \`var(--accent-color)\`, \`var(--panel-bg)\`, \`var(--panel-border)\`.
-- **Components**: Re-use \`<Button />\`, \`<Input />\`, \`<ConfirmModal />\`, and \`<DashboardNav />\` natively.
-- **Styles**: Use \`glass-panel\` and \`text-gradient\` for a premium look.
-- **Example**: See \`src/microcomponents/AdminExampleContent.tsx\` for a structural reference.
-
-### ── Important Formatting Rules ──────────────────────────────────────────────
-- **NO REDUNDANT HEADERS**: The parent template already injects a large dynamic page title and action buttons. DO NOT add a main \`<h1>\` or \`<h2>\` page title at the top of your micro-component. Start directly with your cards, lists, or sub-sections.
-
-[WHAT FEATURES SHOULD I ADD TO THIS ADMIN VIEW?]`;
+[WHAT TO BUILD?]`;
 };

package/src/prompts/tabs/crud/private.ts

@@ -1,65 +1,21 @@
-export const privateCrudPrompt = (config: any, recordsCollection: string, forms: string[] = []) => {
+export const privateCrudPrompt = (config: any, recordsCollection: string) => {
   const parsedTabName = (config.tabName || config.pageId || 'private_page')
     .toLowerCase().replace(/[^a-z0-9]+/g, '_');
-  const microName = `${parsedTabName.charAt(0).toUpperCase()}${parsedTabName.slice(1)}Content`;
+  const pascalName = parsedTabName
+    .split('_')
+    .map((w: string) => w.charAt(0).toUpperCase() + w.slice(1))
+    .join('');
+  const fileName = `${pascalName}Content`;
 
-  return `I need your help building the inner functionality for an **already existing** Private User View. This view is powered by the \`PrivatePageTemplate\` (located at \`src/templates/PrivatePageTemplate.tsx\`).
+  return `Create file: src/your-ai-workflow-firebase-os/microcomponents/${fileName}.tsx
 
-The "infrastructure" (auth-guards, dynamic routing, navigation menus, database sync) is entirely set up and functioning. Your task is strictly to design the "Dashboard Content" that lives inside this specific user view.
+export default function ${fileName}({ config }: { config: any }) {
+  return ( <div>your content here</div> );
+}
 
-### ── Current View Configuration ──────────────────────────────────────────────
-\`\`\`json
-${JSON.stringify({
-    viewName: config.tabName,
-    viewTitle: config.tabTitle,
-    route: config.route,
-    template: config.template,
-    storageEnabled: !!config.storage,
-    showActionButton: !!config.showButton,
-    availablePrivateForms: forms,
-  }, null, 2)}
-\`\`\`
+Firestore collection: \`${recordsCollection}\` — filter by \`where('uid', '==', user.uid)\`
+Firebase: \`import { db, useAuth } from 'your-ai-workflow-firebase-os'\`
+No page titles, no nav, no routing — already handled. Default export only.
 
-### ── Available Forms ────────────────────────────────────────────────────────
-The following private forms are available in the system. **These are for your information only—do NOT use them unless specifically needed.** Your priority is to listen to the user's specific input and decide if a particular modal, form, or component is actually required for the context of this page:
-${forms.length > 0 ? forms.map(f => `- ${f}`).join('\n') : '- No private forms found'}
-
-### ── Data & Storage Architecture ─────────────────────────────────────────────
-Every user sees their own unique data on this page. The system is rigged to handle this isolation:
-- **Firestore Collection**: \`${recordsCollection}\`. The template already filters this by \`uid == current_user.uid\`. Use this for all record storage.
-- **Storage Layer**: ${config.storage ? "Enabled. User files are saved to \`user_files/\` and strictly isolated by user ID." : "Disabled for this view."}
-- **Access Level**: Private. Only the owner of the data can view or modify these records.
-
-### ── Your Mission ────────────────────────────────────────────────────────────
-1. **Create the Page**: Create a full page component at \`src/pages/\${microName}Page.tsx\`. Include \`<DashboardNav />\` from \`your-ai-workflow-firebase-os\` at the top of the content area.
-2. **Handle UX/UI**: Inside this component, build the interface (lists, charts, forms, etc).
-3. **Register the Route**: Open \`src/App.tsx\` and map this component to the \`customRoutes\` prop of \`<FirebaseOS>\`:
-\`\`\`tsx
-import { \${microName}Page } from './pages/\${microName}Page';
-
-// Inside App.tsx:
-<FirebaseOS 
-  customRoutes={{
-    '\${config.route}': \${microName}Page
-  }}
-  // ...
-/>
-\`\`\`
-
-### ── Guardrails ─────────────────────────────────────────────────────────────
-- **CRITICAL: DO NOT CREATE A NEW ROUTE IN REACT ROUTER.** You are only mapping a component to an existing dynamic route via \\\`customRoutes\\\`.
-- **Database Logic**: You must write your own database queries inside the component using the provided collection names.
-- Re-use the \`ContactPopup\` component with the available private forms if the user needs to submit requests.
-
-### ── Aesthetic & Performance (Theme System) ───────────────────────────────
-Build with the user's active theme in mind:
-- **CSS Variables**: Use \`var(--bg-color)\`, \`var(--fg-color)\`, \`var(--accent-color)\`, \`var(--panel-bg)\`, \`var(--panel-border)\`.
-- **Components**: Re-use \`<Button />\`, \`<Input />\`, \`<ConfirmModal />\`, and \`<DashboardNav />\` natively.
-- **Styles**: Use \`glass-panel\` and \`text-gradient\` for a premium look.
-- **Example**: See \`src/microcomponents/PrivateExampleContent.tsx\` for a structural reference.
-
-### ── Important Formatting Rules ──────────────────────────────────────────────
-- **NO REDUNDANT HEADERS**: The parent template already injects a large dynamic page title and action buttons. DO NOT add a main \`<h1>\` or \`<h2>\` page title at the top of your micro-component. Start directly with your cards, lists, or sub-sections.
-
-[WHAT SHOULD I BUILD INSIDE THIS PRIVATE VIEW?]`;
+[WHAT TO BUILD?]`;
 };

package/src/prompts/tabs/crud/shared.ts

@@ -1,63 +1,21 @@
 export const sharedCrudPrompt = (config: any, recordsCollection: string) => {
   const parsedTabName = (config.tabName || config.pageId || 'shared_page')
     .toLowerCase().replace(/[^a-z0-9]+/g, '_');
-  const microName = `${parsedTabName.charAt(0).toUpperCase()}${parsedTabName.slice(1)}Content`;
+  const pascalName = parsedTabName
+    .split('_')
+    .map((w: string) => w.charAt(0).toUpperCase() + w.slice(1))
+    .join('');
+  const fileName = `${pascalName}Content`;
 
-  return `I need your help building the inner functionality for an **already existing** Shared Member View. This view is powered by the \`SharedPageTemplate\` (located at \`src/templates/SharedPageTemplate.tsx\`).
+  return `Create file: src/your-ai-workflow-firebase-os/microcomponents/${fileName}.tsx
 
-The "infrastructure" (real-time sync, collaborative routing) is entirely set up and functioning. Your goal is to design the "Community Content" that lives inside this specific shared view.
+export default function ${fileName}({ config }: { config: any }) {
+  return ( <div>your content here</div> );
+}
 
-### ── Current View Configuration ──────────────────────────────────────────────
-\`\`\`json
-${JSON.stringify({
-    viewName: config.tabName,
-    viewTitle: config.tabTitle,
-    route: config.route,
-    template: config.template,
-    storageEnabled: !!config.storage,
-    showActionButton: !!config.showButton,
-  }, null, 2)}
-\`\`\`
+Firestore collection: \`${recordsCollection}\` — shared between all members.
+Firebase: \`import { db, useAuth } from 'your-ai-workflow-firebase-os'\`
+No page titles, no nav, no routing — already handled. Default export only.
 
-### ── Note on Forms ──────────────────────────────────────────────────────────
-**No forms are needed for this view.** Focus on building the collaborative features and shared content areas requested by the user.
-
-### ── Data & Storage Architecture ─────────────────────────────────────────────
-All logged-in members share the data on this page. The system is configured for collaboration:
-- **Firestore Collection**: \`${recordsCollection}\`. All authenticated users can read and create records here. The template ensures only creators can edit/delete their own items.
-- **Storage Layer**: ${config.storage ? "Enabled. Shared files are saved to \`mem_files/\` and are visible to all members." : "Disabled for this view."}
-- **Access Level**: Shared Member Access. Requires authentication.
-
-### ── Your Mission ────────────────────────────────────────────────────────────
-1. **Create the Page**: Create a full page component at \`src/pages/\${microName}Page.tsx\`. Include \`<DashboardNav />\` from \`your-ai-workflow-firebase-os\` at the top of the content area.
-2. **Handle UX/UI**: Inside this component, build the collaborative interface (group lists, message boards, shared resource trackers).
-3. **Register the Route**: Open \`src/App.tsx\` and map this component to the \`customRoutes\` prop of \`<FirebaseOS>\`:
-\`\`\`tsx
-import { \${microName}Page } from './pages/\${microName}Page';
-
-// Inside App.tsx:
-<FirebaseOS 
-  customRoutes={{
-    '\${config.route}': \${microName}Page
-  }}
-  // ...
-/>
-\`\`\`
-
-### ── Guardrails ─────────────────────────────────────────────────────────────
-- **CRITICAL: DO NOT CREATE A NEW ROUTE IN REACT ROUTER.** You are only mapping a component to an existing dynamic route via \\\`customRoutes\\\`.
-- **Database Logic**: You must write your own database queries inside the component using the provided collection names.
-- **NEVER** expose administrative control settings in this shared view.
-
-### ── Aesthetic & Performance (Theme System) ───────────────────────────────
-Build with the user's active theme in mind:
-- **CSS Variables**: \`var(--bg-color)\`, \`var(--fg-color)\`, \`var(--accent-color)\`, \`var(--panel-bg)\`, \`var(--panel-border)\`.
-- **Components**: Re-use \`<Button />\`, \`<Input />\`, \`<ConfirmModal />\`, and \`<DashboardNav />\` natively.
-- **Styles**: Use \`glass-panel\` and \`text-gradient\` for a premium look.
-- **Example**: See \`src/microcomponents/SharedExampleContent.tsx\` for a structural reference.
-
-### ── Important Formatting Rules ──────────────────────────────────────────────
-- **NO REDUNDANT HEADERS**: The parent template already injects a large dynamic page title and action buttons. DO NOT add a main \`<h1>\` or \`<h2>\` page title at the top of your micro-component. Start directly with your cards, lists, or sub-sections.
-
-[WHAT SHARED FEATURE SHOULD I BUILD IN THIS VIEW?]`;
+[WHAT TO BUILD?]`;
 };