firebase-os 1.1.4 → 1.1.6

package/src/prompts/pages/publicPage.ts

@@ -0,0 +1,44 @@
+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`;
+
+  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\`).
+
+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.
+
+### ── Current Page Configuration ──────────────────────────────────────────────
+\`\`\`json
+${JSON.stringify({
+    pageName: config.pageName,
+    pageTitle: config.pageTitle,
+    route: config.route,
+    template: config.template,
+  }, null, 2)}
+\`\`\`
+
+### ── 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?]`;
+};

package/src/prompts/sharedConstants.ts

@@ -0,0 +1,12 @@
+export const THEME_INSTRUCTIONS = `### Theme & Styling (Dynamic Firestore Theme)
+Our application uses a dynamic theme engine. You MUST use these global CSS variable tokens to ensure your design matches the user's active theme:
+- **Colors**: \`var(--bg-color)\`, \`var(--fg-color)\`, \`var(--accent-color)\`, \`var(--accent-deep)\`, \`var(--panel-bg)\`, \`var(--panel-border)\`.
+- **Text**: Use the \`text-foreground\` (standard), \`text-accent\` (primary), and \`text-gradient\` (headings) classes.
+- **Glassmorphism**: Always use the \`.glass-panel\` utility class for containers/cards.`;
+
+export const COMPONENTS_LIST = `- **<Button />**, **<Input />**, **<ConfirmModal />**, **<DashboardNav />**, **<ContactPopup />**, **<CustomSelect />**.`;
+
+export const ADMIN_COMPONENTS = `- **<Button />**, **<Input />**, **<ConfirmModal />**, **<DashboardNav />**, **<CustomSelect />**.`;
+
+export const HEADING_RULES = `### ── 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.`;

package/src/prompts/tabs/board/adminboard.ts

@@ -0,0 +1,32 @@
+import { ADMIN_COMPONENTS, THEME_INSTRUCTIONS } from '../../sharedConstants';
+
+export const adminBoardPrompt = (config: any, title: string, tasksCollection: string, categoriesCollection: string) => `I need your help modifying the core Board Template which currently powers the "${config?.tabTitle || config?.tabName || title}" tab.
+
+This is a core template located at \`src/templates/TemplateBoard.tsx\`. Any changes you make here will affect ALL board views across the application. Do not completely rewrite it from scratch; instead, carefully integrate the requested features into the existing architecture.
+
+### ── Current Tab Configuration (Context) ────────────────────────────────────
+\`\`\`json
+${JSON.stringify({
+    tabName: config?.tabName,
+    tabTitle: config?.tabTitle,
+    showButton: config?.showButton,
+    buttonStyle: config?.buttonStyle,
+  }, null, 2)}
+\`\`\`
+
+### ── Data Architecture ───────────────────────────────────────────────────────
+The current tab is configured with:
+- **Tasks Collection**: \`${tasksCollection}\`
+- **Categories Collection**: \`${categoriesCollection}\`
+- **Access Level**: ADMIN ONLY.
+
+### ── Your Mission ────────────────────────────────────────────────────────────
+1. **Modify the Core Template**: Carefully edit \`src/templates/TemplateBoard.tsx\`.
+2. **Handle UX/UI**: Integrate your changes natively with the existing state, drag-and-drop logic, and UI elements.
+
+### ── Architecture & Reusable Components ────────────────────────────────────
+${ADMIN_COMPONENTS}
+
+${THEME_INSTRUCTIONS}
+
+[DESCRIBE FEATURE TO ADD HERE]`;

package/src/prompts/tabs/board/privateboard.ts

@@ -0,0 +1,36 @@
+import { COMPONENTS_LIST, THEME_INSTRUCTIONS } from '../../sharedConstants';
+
+export const privateBoardPrompt = (config: any, title: string, tasksCollection: string, categoriesCollection: string, forms: string[] = []) => `I need your help modifying the core Board Template which currently powers the "${config?.tabTitle || config?.tabName || title}" tab.
+
+This is a core template located at \`src/templates/TemplateBoard.tsx\`. Any changes you make here will affect ALL board views across the application. Do not completely rewrite it from scratch; instead, carefully integrate the requested features into the existing architecture.
+
+### ── Current Tab Configuration (Context) ────────────────────────────────────
+\`\`\`json
+${JSON.stringify({
+    tabName: config?.tabName,
+    tabTitle: config?.tabTitle,
+    showButton: config?.showButton,
+    buttonStyle: config?.buttonStyle,
+  }, null, 2)}
+\`\`\`
+
+### ── Data Architecture ───────────────────────────────────────────────────────
+The current tab is configured with:
+- **Tasks Collection**: \`${tasksCollection}\`
+- **Categories Collection**: \`${categoriesCollection}\`
+- **Access Level**: PRIVATE.
+
+### ── Form Selection ─────────────────────────────────────────────────────────
+Available PRIVATE forms:
+${forms.length > 0 ? forms.map(f => `- ${f}`).join('\n') : '- No active private forms found'}
+
+### ── Your Mission ────────────────────────────────────────────────────────────
+1. **Modify the Core Template**: Carefully edit \`src/templates/TemplateBoard.tsx\`.
+2. **Handle UX/UI**: Integrate your changes natively with the existing state, drag-and-drop logic, and UI elements.
+
+### ── Architecture & Reusable Components ────────────────────────────────────
+${COMPONENTS_LIST}
+
+${THEME_INSTRUCTIONS}
+
+[DESCRIBE FEATURE TO ADD HERE]`;

package/src/prompts/tabs/board/publicboard.ts

@@ -0,0 +1,36 @@
+import { COMPONENTS_LIST, THEME_INSTRUCTIONS } from '../../sharedConstants';
+
+export const publicBoardPrompt = (config: any, title: string, tasksCollection: string, categoriesCollection: string, forms: string[] = []) => `I need your help modifying the core Board Template which currently powers the "${config?.tabTitle || config?.tabName || title}" tab.
+
+This is a core template located at \`src/templates/TemplateBoard.tsx\`. Any changes you make here will affect ALL board views across the application. Do not completely rewrite it from scratch; instead, carefully integrate the requested features into the existing architecture.
+
+### ── Current Tab Configuration (Context) ────────────────────────────────────
+\`\`\`json
+${JSON.stringify({
+    tabName: config?.tabName,
+    tabTitle: config?.tabTitle,
+    showButton: config?.showButton,
+    buttonStyle: config?.buttonStyle,
+  }, null, 2)}
+\`\`\`
+
+### ── Data Architecture ───────────────────────────────────────────────────────
+The current tab is configured with:
+- **Tasks Collection**: \`${tasksCollection}\`
+- **Categories Collection**: \`${categoriesCollection}\`
+- **Access Level**: PUBLIC/SHARED.
+
+### ── Form Selection ─────────────────────────────────────────────────────────
+Available PUBLIC forms:
+${forms.length > 0 ? forms.map(f => `- ${f}`).join('\n') : '- No active public forms found'}
+
+### ── Your Mission ────────────────────────────────────────────────────────────
+1. **Modify the Core Template**: Carefully edit \`src/templates/TemplateBoard.tsx\`.
+2. **Handle UX/UI**: Integrate your changes natively with the existing state, drag-and-drop logic, and UI elements.
+
+### ── Architecture & Reusable Components ────────────────────────────────────
+${COMPONENTS_LIST}
+
+${THEME_INSTRUCTIONS}
+
+[DESCRIBE FEATURE TO ADD HERE]`;

package/src/prompts/tabs/calendar/admincalendar.ts

@@ -0,0 +1,32 @@
+import { ADMIN_COMPONENTS, THEME_INSTRUCTIONS } from '../../sharedConstants';
+
+export const adminCalendarPrompt = (config: any, title: string, eventsCollection: string, forms: string[] = []) => `I need your help modifying the core Calendar Template which currently powers the "${config?.tabTitle || config?.tabName || title}" tab.
+
+This is a core template located at \`src/templates/TemplateCalendar.tsx\`. Any changes you make here will affect ALL calendar views across the application. Do not completely rewrite it from scratch; instead, carefully integrate the requested features into the existing architecture.
+
+### ── Current Tab Configuration (Context) ────────────────────────────────────
+\`\`\`json
+${JSON.stringify({
+    tabName: config?.tabName,
+    tabTitle: config?.tabTitle,
+    defaultView: config?.defaultView,
+    customFields: config?.customFields,
+    showButton: config?.showButton,
+  }, null, 2)}
+\`\`\`
+
+### ── Data Architecture ───────────────────────────────────────────────────────
+The current tab is configured with:
+- **Firestore Collection**: \`${eventsCollection}\`
+- **Access Level**: ADMIN ONLY.
+
+### ── Your Mission ────────────────────────────────────────────────────────────
+1. **Modify the Core Template**: Carefully edit \`src/templates/TemplateCalendar.tsx\`.
+2. **Handle UX/UI**: Integrate your changes natively with the existing state, UI elements, and data sync logic without breaking existing functionality.
+
+### ── Architecture & Reusable Components ────────────────────────────────────
+${ADMIN_COMPONENTS}
+
+${THEME_INSTRUCTIONS}
+
+[DESCRIBE FEATURE TO ADD HERE]`;

package/src/prompts/tabs/calendar/privatecalendar.ts

@@ -0,0 +1,36 @@
+import { COMPONENTS_LIST, THEME_INSTRUCTIONS } from '../../sharedConstants';
+
+export const privateCalendarPrompt = (config: any, title: string, eventsCollection: string, forms: string[] = []) => `I need your help modifying the core Calendar Template which currently powers the "${config?.tabTitle || config?.tabName || title}" tab.
+
+This is a core template located at \`src/templates/TemplateCalendar.tsx\`. Any changes you make here will affect ALL calendar views across the application. Do not completely rewrite it from scratch; instead, carefully integrate the requested features into the existing architecture.
+
+### ── Current Tab Configuration (Context) ────────────────────────────────────
+\`\`\`json
+${JSON.stringify({
+    tabName: config?.tabName,
+    tabTitle: config?.tabTitle,
+    defaultView: config?.defaultView,
+    customFields: config?.customFields,
+    showButton: config?.showButton,
+  }, null, 2)}
+\`\`\`
+
+### ── Data Architecture ───────────────────────────────────────────────────────
+The current tab is configured with:
+- **Firestore Collection**: \`${eventsCollection}\`
+- **Access Level**: PRIVATE.
+
+### ── Form Selection ─────────────────────────────────────────────────────────
+Available PRIVATE forms:
+${forms.length > 0 ? forms.map(f => `- ${f}`).join('\n') : '- No active private forms found'}
+
+### ── Your Mission ────────────────────────────────────────────────────────────
+1. **Modify the Core Template**: Carefully edit \`src/templates/TemplateCalendar.tsx\`.
+2. **Handle UX/UI**: Integrate your changes natively with the existing state, UI elements, and data sync logic without breaking existing functionality.
+
+### ── Architecture & Reusable Components ────────────────────────────────────
+${COMPONENTS_LIST}
+
+${THEME_INSTRUCTIONS}
+
+[DESCRIBE FEATURE TO ADD HERE]`;

package/src/prompts/tabs/calendar/publiccalendar.ts

@@ -0,0 +1,36 @@
+import { COMPONENTS_LIST, THEME_INSTRUCTIONS } from '../../sharedConstants';
+
+export const publicCalendarPrompt = (config: any, title: string, eventsCollection: string, forms: string[] = []) => `I need your help modifying the core Calendar Template which currently powers the "${config?.tabTitle || config?.tabName || title}" tab.
+
+This is a core template located at \`src/templates/TemplateCalendar.tsx\`. Any changes you make here will affect ALL calendar views across the application. Do not completely rewrite it from scratch; instead, carefully integrate the requested features into the existing architecture.
+
+### ── Current Tab Configuration (Context) ────────────────────────────────────
+\`\`\`json
+${JSON.stringify({
+    tabName: config?.tabName,
+    tabTitle: config?.tabTitle,
+    defaultView: config?.defaultView,
+    customFields: config?.customFields,
+    showButton: config?.showButton,
+  }, null, 2)}
+\`\`\`
+
+### ── Data Architecture ───────────────────────────────────────────────────────
+The current tab is configured with:
+- **Firestore Collection**: \`${eventsCollection}\`
+- **Access Level**: PUBLIC/SHARED.
+
+### ── Form Selection ─────────────────────────────────────────────────────────
+Available PUBLIC forms:
+${forms.length > 0 ? forms.map(f => `- ${f}`).join('\n') : '- No active public forms found'}
+
+### ── Your Mission ────────────────────────────────────────────────────────────
+1. **Modify the Core Template**: Carefully edit \`src/templates/TemplateCalendar.tsx\`.
+2. **Handle UX/UI**: Integrate your changes natively with the existing state, UI elements, and data sync logic without breaking existing functionality.
+
+### ── Architecture & Reusable Components ────────────────────────────────────
+${COMPONENTS_LIST}
+
+${THEME_INSTRUCTIONS}
+
+[DESCRIBE FEATURE TO ADD HERE]`;

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

@@ -0,0 +1,54 @@
+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`;
+
+  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\`).
+
+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.
+
+### ── 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)}
+\`\`\`
+
+### ── 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 Content Layer**: Design a new micro-component at \`src/microcomponents/${microName}.tsx\`.
+2. **Handle UX/UI**: Inside this component, build the interface (lists, charts, management forms, or any feature requested).
+3. **Inject into Template**: Once created, import and place \`<${microName} />\` inside the main content area of \`src/templates/AdminPageTemplate.tsx\`, replacing the current empty state.
+
+### ── Guardrails ─────────────────────────────────────────────────────────────
+- **CRITICAL: DO NOT CREATE A NEW ROUTE OR NAVIGATION TAB.** You are only modifying the inner content of an existing layout.
+- **DO NOT** modify the outer layout of \`AdminPageTemplate.tsx\` (headers, back buttons, dynamic title).
+- **DO NOT** change the routing or export signatures.
+- **DO NOT** create a new page; build the feature *inside* the micro-component.
+
+### ── 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?]`;
+};

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

@@ -0,0 +1,55 @@
+export const privateCrudPrompt = (config: any, recordsCollection: string, forms: 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`;
+
+  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\`).
+
+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.
+
+### ── 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)}
+\`\`\`
+
+### ── 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 Content Layer**: Design a new micro-component at \`src/microcomponents/${microName}.tsx\`.
+2. **Handle UX/UI**: Inside this component, build the interface (lists, personal file managers, specialized forms).
+3. **Inject into Template**: Once created, import and place \`<${microName} />\` inside the main content area of \`src/templates/PrivatePageTemplate.tsx\`, replacing the current empty state.
+
+### ── Guardrails ─────────────────────────────────────────────────────────────
+- **CRITICAL: DO NOT CREATE A NEW ROUTE OR NAVIGATION TAB.** You are only modifying the inner content of an existing layout. 
+- **DO NOT** modify the outer layout of \`PrivatePageTemplate.tsx\` (navigation, top-bar, dynamic title, sidebars).
+- **DO NOT** change the database subscription logic; use the existing \`records\` state if possible or build your own within the microcomponent using the paths provided.
+- 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?]`;
+};

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

@@ -0,0 +1,53 @@
+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`;
+
+  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\`).
+
+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.
+
+### ── 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)}
+\`\`\`
+
+### ── 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 Content Layer**: Design a new micro-component at \`src/microcomponents/${microName}.tsx\`.
+2. **Handle UX/UI**: Inside this component, build the collaborative interface (group lists, message boards, shared resource trackers).
+3. **Inject into Template**: Once created, import and place \`<${microName} />\` inside the main content area of \`src/templates/SharedPageTemplate.tsx\`, replacing the current empty state.
+
+### ── Guardrails ─────────────────────────────────────────────────────────────
+- **CRITICAL: DO NOT CREATE A NEW ROUTE OR NAVIGATION TAB.** You are only modifying the inner content of an existing layout.
+- **DO NOT** modify the outer layout of \`SharedPageTemplate.tsx\` (shared navigation, header, dynamic title).
+- **DO NOT** change the real-time listener logic; build your feature *inside* the micro-component.
+- **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?]`;
+};

package/src/prompts/tabs/table/admintable.ts

@@ -0,0 +1,32 @@
+import { ADMIN_COMPONENTS, THEME_INSTRUCTIONS } from '../../sharedConstants';
+
+export const adminTablePrompt = (config: any, title: string, tableCollection: string) => `I need your help modifying the core Table Template which currently powers the "${config?.tabTitle || config?.tabName || title}" tab.
+
+This is a core template located at \`src/templates/TemplateTable.tsx\`. Any changes you make here will affect ALL table views across the application. Do not completely rewrite it from scratch; instead, carefully integrate the requested features into the existing architecture.
+
+### ── Current Tab Configuration (Context) ────────────────────────────────────
+\`\`\`json
+${JSON.stringify({
+    tabName: config?.tabName,
+    tabTitle: config?.tabTitle,
+    showButton: config?.showButton,
+    buttonStyle: config?.buttonStyle,
+    showExportButton: config?.showExportButton,
+  }, null, 2)}
+\`\`\`
+
+### ── Data Architecture ───────────────────────────────────────────────────────
+The current tab is configured with:
+- **Table Data Collection**: \`${tableCollection}\`
+- **Access Level**: ADMIN ONLY.
+
+### ── Your Mission ────────────────────────────────────────────────────────────
+1. **Modify the Core Template**: Carefully edit \`src/templates/TemplateTable.tsx\`.
+2. **Handle UX/UI**: Integrate your changes natively with the existing state (columns, rows, colors) and UI elements.
+
+### ── Architecture & Reusable Components ────────────────────────────────────
+${ADMIN_COMPONENTS}
+
+${THEME_INSTRUCTIONS}
+
+[DESCRIBE FEATURE TO ADD HERE]`;

package/src/prompts/tabs/table/privatetable.ts

@@ -0,0 +1,36 @@
+import { COMPONENTS_LIST, THEME_INSTRUCTIONS } from '../../sharedConstants';
+
+export const privateTablePrompt = (config: any, title: string, tableCollection: string, forms: string[] = []) => `I need your help modifying the core Table Template which currently powers the "${config?.tabTitle || config?.tabName || title}" tab.
+
+This is a core template located at \`src/templates/TemplateTable.tsx\`. Any changes you make here will affect ALL table views across the application. Do not completely rewrite it from scratch; instead, carefully integrate the requested features into the existing architecture.
+
+### ── Current Tab Configuration (Context) ────────────────────────────────────
+\`\`\`json
+${JSON.stringify({
+    tabName: config?.tabName,
+    tabTitle: config?.tabTitle,
+    showButton: config?.showButton,
+    buttonStyle: config?.buttonStyle,
+    showExportButton: config?.showExportButton,
+  }, null, 2)}
+\`\`\`
+
+### ── Data Architecture ───────────────────────────────────────────────────────
+The current tab is configured with:
+- **Table Data Collection**: \`${tableCollection}\`
+- **Access Level**: PRIVATE.
+
+### ── Form Selection ─────────────────────────────────────────────────────────
+Available PRIVATE forms:
+${forms.length > 0 ? forms.map(f => `- ${f}`).join('\n') : '- No active private forms found'}
+
+### ── Your Mission ────────────────────────────────────────────────────────────
+1. **Modify the Core Template**: Carefully edit \`src/templates/TemplateTable.tsx\`.
+2. **Handle UX/UI**: Integrate your changes natively with the existing state (columns, rows, colors) and UI elements.
+
+### ── Architecture & Reusable Components ────────────────────────────────────
+${COMPONENTS_LIST}
+
+${THEME_INSTRUCTIONS}
+
+[DESCRIBE FEATURE TO ADD HERE]`;

package/src/prompts/tabs/table/publictable.ts

@@ -0,0 +1,36 @@
+import { COMPONENTS_LIST, THEME_INSTRUCTIONS } from '../../sharedConstants';
+
+export const publicTablePrompt = (config: any, title: string, tableCollection: string, forms: string[] = []) => `I need your help modifying the core Table Template which currently powers the "${config?.tabTitle || config?.tabName || title}" tab.
+
+This is a core template located at \`src/templates/TemplateTable.tsx\`. Any changes you make here will affect ALL table views across the application. Do not completely rewrite it from scratch; instead, carefully integrate the requested features into the existing architecture.
+
+### ── Current Tab Configuration (Context) ────────────────────────────────────
+\`\`\`json
+${JSON.stringify({
+    tabName: config?.tabName,
+    tabTitle: config?.tabTitle,
+    showButton: config?.showButton,
+    buttonStyle: config?.buttonStyle,
+    showExportButton: config?.showExportButton,
+  }, null, 2)}
+\`\`\`
+
+### ── Data Architecture ───────────────────────────────────────────────────────
+The current tab is configured with:
+- **Table Data Collection**: \`${tableCollection}\`
+- **Access Level**: PUBLIC/SHARED.
+
+### ── Form Selection ─────────────────────────────────────────────────────────
+Available PUBLIC forms:
+${forms.length > 0 ? forms.map(f => `- ${f}`).join('\n') : '- No active public forms found'}
+
+### ── Your Mission ────────────────────────────────────────────────────────────
+1. **Modify the Core Template**: Carefully edit \`src/templates/TemplateTable.tsx\`.
+2. **Handle UX/UI**: Integrate your changes natively with the existing state (columns, rows, colors) and UI elements.
+
+### ── Architecture & Reusable Components ────────────────────────────────────
+${COMPONENTS_LIST}
+
+${THEME_INSTRUCTIONS}
+
+[DESCRIBE FEATURE TO ADD HERE]`;

package/src/setupTests.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';