your-ai-workflow-firebase-os 1.2.39 → 1.2.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "your-ai-workflow-firebase-os",
-  "version": "1.2.39",
+  "version": "1.2.41",
   "description": "Your AI Firebase — a complete Firebase-powered admin app in one React component.",
   "type": "module",
   "main": "dist/your-ai-workflow-firebase-os.cjs.js",

package/scripts/postinstall.js

@@ -68,7 +68,12 @@ const loadCanonical = async () => {
   try {
     const mod = await import(pathToFileURL(path.join(__dirname, '..', 'dist', 'vite.es.js')).href);
     if (typeof mod.CANONICAL_APP_TSX === 'string' && typeof mod.CANONICAL_MAIN_TSX === 'string') {
-      return { app: mod.CANONICAL_APP_TSX, main: mod.CANONICAL_MAIN_TSX, banner: mod.OWNED_BANNER || FALLBACK_OWNED_BANNER };
+      return {
+        app: mod.CANONICAL_APP_TSX,
+        main: mod.CANONICAL_MAIN_TSX,
+        banner: mod.OWNED_BANNER || FALLBACK_OWNED_BANNER,
+        registry: typeof mod.CONSUMER_REGISTRY_TS === 'string' ? mod.CONSUMER_REGISTRY_TS : null,
+      };
     }
   } catch {
     // dist/vite.es.js missing or not loadable here — fall back to the templates below.
@@ -185,17 +190,30 @@ copyMachinery('forms/registry.ts', 'registry.ts');
 copyMachinery('pages/registry.ts', 'pagesRegistry.ts');
 console.log('  ✓ Copied configuration files and registry to your src/your-ai-workflow-firebase-os/configs directory');
 
-// Copy microcomponents auto-registry
-const microcomponentsSourceDir = path.join(__dirname, '..', 'src', 'microcomponents');
+// The page-content list: microcomponents/registry.ts. Written ONCE and never
+// overwritten — since 1.2.41 the assistant appends two lines per page to it
+// (the only path from a content file to its page in a runtime without the
+// Vite plugin, like Google AI Studio), so re-copying it on install would
+// silently un-register every page. Projects created before 1.2.41 keep their
+// glob-based copy: under the plugin it is redundant either way.
+const FALLBACK_CONSUMER_REGISTRY_TS = `// Your AI Firebase — the page-content list.
+// The build finds content files automatically where the Your AI Firebase
+// Vite plugin runs; in a runtime without it (Google AI Studio) the two lines
+// per page below are the ONLY thing that loads a page's content file.
+// Add two lines for every page. Never remove another page's lines.
+//
+// Example, for the page at /pricing filled by PricingContent.tsx:
+//   import PricingContent from './PricingContent';
+//   registerMicrocomponent('pricing', PricingContent);
+import { registerMicrocomponent } from 'your-ai-workflow-firebase-os';
+export { registerMicrocomponent };
+`;
 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));
-    }
+  const registryDest = path.join(microcomponentsDestDir, 'registry.ts');
+  if (!fs.existsSync(registryDest)) {
+    fs.writeFileSync(registryDest, canonical?.registry || FALLBACK_CONSUMER_REGISTRY_TS);
   }
   const microReadme = path.join(microcomponentsDestDir, 'README.md');
   if (!fs.existsSync(microReadme)) {
@@ -209,6 +227,9 @@ if (fs.existsSync(microcomponentsSourceDir)) {
       'Requirements:',
       '- DEFAULT export, or the registry ignores the file.',
       '- The name must match the tab/page name in PascalCase + `Content`.',
+      '- Two lines in `registry.ts` (import + `registerMicrocomponent`) — the',
+      '  build also finds the file on its own, but in a runtime without the',
+      '  Vite plugin (Google AI Studio) those lines are what loads it.',
       '- No `<h1>`, no `<DashboardNav />` — the page already renders both.',
       '- Renders inside an existing panel: no page wrapper, no `min-h-screen`.',
       '',
@@ -216,7 +237,7 @@ if (fs.existsSync(microcomponentsSourceDir)) {
       ''
     ].join('\n'));
   }
-  console.log('  ✓ Copied microcomponents auto-registry to your src/your-ai-workflow-firebase-os/microcomponents directory');
+  console.log('  ✓ Ensured the page-content list (microcomponents/registry.ts) exists');
 }
 
 // ── 3b. AI instruction files ─────────────────────────────────────────────
@@ -241,8 +262,10 @@ change the owner can use and a change they cannot.
 1. Every page is ONE file in \`src/your-ai-workflow-firebase-os/configs/\` named
    \`somethingTab.config.ts\` (signed-in users, the team, or admins) or
    \`somethingPage.config.ts\` (anyone), plus ONE content file in
-   \`microcomponents/\`. Nothing else. Never a second config for the same page.
-   The one exception is the home page: it is \`Home.tsx\` and has no config.
+   \`microcomponents/\` and its TWO lines in \`microcomponents/registry.ts\`
+   (import + \`registerMicrocomponent\`). Nothing else. Never a second config
+   for the same page. The one exception is the home page: it is \`Home.tsx\`
+   and has no config.
 2. "For my team", "team page", "for us", "internal" all mean
    \`pageType: 'internal'\` in a \`*Tab.config.ts\`. A \`*Tab.config.ts\` is never
    \`'public'\` — the app will not honour it.
@@ -264,12 +287,12 @@ change the owner can use and a change they cannot.
    is on adding THINGS, not on doing the asked thing well.
 7. A page the owner added on their Pages screen ALREADY EXISTS. The sentence
    they paste says so, names its web address and names its one content file —
-   write exactly that file and NOTHING else: no config file, no second
-   address, nothing to Firestore, and never a reply telling them to create or
-   fix anything. Only a page asked for in the chat, one that exists nowhere
-   yet, is YOURS to create, and then it is created as FILES — never in
-   Firestore: its config file and its content file, both named from the
-   page's name — a page called "Client onboarding" is
+   write exactly that file plus its two registry.ts lines and NOTHING else:
+   no config file, no second address, nothing to Firestore, and never a reply
+   telling them to create or fix anything. Only a page asked for in the chat,
+   one that exists nowhere yet, is YOURS to create, and then it is created as
+   FILES — never in Firestore: its config file and its content file, both
+   named from the page's name — a page called "Client onboarding" is
    \`clientOnboardingTab.config.ts\` plus \`ClientOnboardingContent.tsx\`.
    Nothing else registers a page: no registerPages.ts, no customRoutes, no
    database writes. When a config file already exists for that page or
@@ -310,7 +333,9 @@ stops the build with one sentence that says the fix.
   preset and no matching content file (the page would render empty — the
   error names the exact \`*Content.tsx\` to create); a \`<style>\` tag in a
   content file (global CSS — it restyles and re-pads every page of the app,
-  style with theme classes instead).
+  style with theme classes instead); a \`*Content.tsx\` or \`*.config.ts\`
+  saved anywhere except directly in its own folder — a subfolder, another
+  directory — is invisible to the app, so the build stops and names the move.
 - A hand-written form — a \`<form>\` or an \`onSubmit\` in a content file with
   no \`<ContactPopup />\` — prints a warning, because its entries never reach
   the Inbox and never show on the Forms screen. So does a hard-coded colour
@@ -397,8 +422,19 @@ export default function ProdTimerContent({ config, actions }: { config: any; act
 }
 \`\`\`
 
-The file is auto-discovered by its name and location. There is no registration
-step, no import to add, and no web address to wire.
+Then add TWO lines for it to
+\`src/your-ai-workflow-firebase-os/microcomponents/registry.ts\` (create that
+file if it is missing — its first line is
+\`import { registerMicrocomponent } from 'your-ai-workflow-firebase-os';\`):
+
+\`\`\`ts
+import ProdTimerContent from './ProdTimerContent';
+registerMicrocomponent('prod_timer', ProdTimerContent);
+\`\`\`
+
+The key is the file's name without \`Content\`, lowercased with \`_\` between
+words. Never remove another page's lines from registry.ts. There is no web
+address to wire — the page finds its content by that key.
 
 ### The pages that already exist, and the one file each is filled by
 
@@ -422,7 +458,9 @@ and never a new page, a new config file or a new form.
 Rules 1-6 apply to microcomponent files only. Rules 7-9 (styling) apply
 everywhere, including the home page.
 
-1. Create only that one file. Do NOT edit \`src/App.tsx\` or \`src/main.tsx\`.
+1. Create only that one file, plus its two lines in
+   \`microcomponents/registry.ts\`. Do NOT edit \`src/App.tsx\` or \`src/main.tsx\`,
+   and never remove another page's lines from registry.ts.
 2. Do NOT use the \`customRoutes\` prop and do NOT add react-router routes.
 3. Use a DEFAULT export. A named-only export is silently ignored by the registry.
 4. Do NOT render \`<DashboardNav />\`, a navbar, or any menu — the page has one.
@@ -701,20 +739,19 @@ starting layout, its form), then pasted the row's sentence and finished it:
 > already made and it is already in the menu — do not create a page, a web
 > address or a settings file for it, and do not edit any other file.
 > Write one file:
-> src/your-ai-workflow-firebase-os/microcomponents/ClientOnboardingContent.tsx,
+> src/your-ai-workflow-firebase-os/microcomponents/OnboardingContent.tsx,
 > with a default export. That file is what the page shows.
-> The page already starts from the board layout — the heading and the saving
-> are already built and stay on the page. Your file draws only what goes
-> inside the panel.
-> Your component receives everything it needs as props: ({ config, actions })
-> — actions.tasks and actions.categories hold the saved items;
-> actions.saveTask(id, data), actions.deleteTask(id),
-> actions.saveCategory(id, data) and actions.deleteCategory(id) change them;
-> actions.openInlineEditor(categoryId, item) opens the built-in editor;
-> actions.user is the signed-in person, and every item you save must include
-> uid: actions.user.uid. Read and change data ONLY through these props — do
-> not import firebase and do not write your own loading, saving or uploading
-> code.
+> Then add two lines to
+> src/your-ai-workflow-firebase-os/microcomponents/registry.ts so the app
+> loads your file: import OnboardingContent from './OnboardingContent'; and
+> registerMicrocomponent('onboarding', OnboardingContent); —
+> registerMicrocomponent is imported there from 'your-ai-workflow-firebase-os'.
+> Never remove another page's lines from that file.
+> Make it match the rest of my app: style with the app's own theme styles so
+> it looks right in light and dark. Do not pick your own colors.
+> Until your file exists the page shows a ready-made board layout. Treat it
+> as a reference, not a rule — your file replaces everything inside the
+> page, so build the whole thing the way I describe below.
 > Here is what I would like on it: columns, in this order: To do, In
 > progress, Done. Each card has a client name (short text), a contact email,
 > a start date and a short note (long text). Anyone on the team can add a
@@ -724,19 +761,20 @@ starting layout, its form), then pasted the row's sentence and finished it:
 
 Every line is a decision already made. The audience, the web address
 (\`route\`), the name (\`tabName\` / \`pageName\`), the heading (\`tabTitle\` /
-\`pageTitle\`) and "already starts from the ... layout" (\`template\`) were set
-on the Pages screen — read them from the \`config\` your content file receives,
-and never write them again. When the sentence lists props, they are real: the
-layout renders your component with exactly those, so a content file that
-ignores them and opens its own Firestore connection is wrong even if it runs. THE FILE NAME RULE: the content file is the page's
-name in PascalCase plus \`Content.tsx\` (a page called "Client onboarding" ->
-\`ClientOnboardingContent.tsx\`); use exactly the name in the request, or the
-page never finds your file. "No file uploads" means draw no upload control;
-the "button at the top" is yours to draw inside the content; and a question's
-kind in brackets — short text, long text, email, phone, number, money, yes-no,
-choose one — is the input you render (\`text\`, \`textarea\`, \`email\`, \`tel\`,
-\`number\`, \`currency\`, \`checkbox\`, \`select\`). "Build only this" means exactly
-that. Ask nothing; build it in one turn.
+\`pageTitle\`) and the starting layout (\`template\`) were set on the Pages
+screen — read them from the \`config\` your content file receives, and never
+write them again. Your component also receives \`actions\` (\`records\`,
+\`saveRecord\`, \`updateRecord\`, \`deleteRecord\`, \`uploadFile\`, \`user\`, and the
+rest listed under presets below) — read and change data ONLY through those,
+never by importing firebase yourself. THE FILE NAME RULE: write EXACTLY the
+file path the request names, letter for letter — the page is wired to that
+one name, and a file under any other name or folder is never found. "No file
+uploads" means draw no upload control; the "button at the top" is yours to
+draw inside the content; and a question's kind in brackets — short text, long
+text, email, phone, number, money, yes-no, choose one — is the input you
+render (\`text\`, \`textarea\`, \`email\`, \`tel\`, \`number\`, \`currency\`,
+\`checkbox\`, \`select\`). "Build only this" means exactly that. Ask nothing;
+build it in one turn.
 
 ### A form
 
@@ -887,19 +925,20 @@ add / upload / delete — you then write the microcomponent that fills it
 
 A preset (\`board\`, \`calendar\`, \`table\`, \`drive\`) is only a starting point:
 it renders a working board / calendar / table / file library straight away when
-there is NO content file. As soon as you add a content file, it REPLACES what the preset
-draws inside the panel — you keep the preset's title, header and data hooks
-(\`board\`: \`tasks\`, \`categories\`, \`saveTask(id, data)\`, \`deleteTask\`,
-\`saveCategory\`, \`deleteCategory\`, \`user\`; \`calendar\`: \`events\`,
-\`saveEvent\`, \`deleteEvent\`, \`openAddModal\`, \`openEditModal\`, \`currentUser\`;
-\`table\`: \`tables\`, \`activeTable\`, \`saveTable\`, \`deleteTable\`, \`updateCell\`,
-\`addRow\`, \`addColumn\`, \`user\`; \`drive\`: \`files\`, \`loading\`, \`uploadFile\`,
-\`deleteFile\`, \`user\`), and you draw the columns, cards or grid yourself. So when the owner wants their own fields,
-stages or views on "something like the board", pick \`template: 'board'\` for
-its data and build the board UI in the content file. Never treat a preset as
-the finished page — they described what they want, so build that.
-
-Whatever you save through those hooks, include \`uid: user.uid\` in the data:
+there is NO content file. As soon as you add a content file, the page renders
+YOUR file instead of the preset — the whole panel, its buttons included, is
+yours to draw, and your component receives the same \`actions\` as a
+from-scratch page (\`records\`, \`loading\`, \`saveRecord\`, \`updateRecord\`,
+\`deleteRecord\`, \`startEdit\`, \`confirmDelete\`, \`uploadFile\`, \`openAddForm\`,
+\`setAddForm\`, \`setFileHandler\`, \`user\` — every record you save must include
+\`uid: actions.user.uid\`). The preset is a REFERENCE for what to build, never
+a frame you build inside: when the owner wants their own fields, stages or
+views on "something like the board", look at the board for the shape and
+build the whole board UI in the content file with those \`actions\`. Never
+treat a preset as the finished page — they described what they want, so
+build that.
+
+Whatever you save through those actions, include \`uid: user.uid\` in the data:
 on Your-team pages only the person who created a record (or an admin) may edit
 or delete it, and a record without \`uid\` can only ever be changed by an admin.
 
@@ -931,12 +970,12 @@ useEffect(() => {
   if (userRole !== 'admin') return;                       // only admins may read the Inbox
   return onSnapshot(collection(db, 'user_submissions'), snap => {
     snap.docs.forEach(d => {
-      if (tasks.some((t: any) => t.sourceId === d.id)) return;   // already imported
+      if (actions.records.some((r: any) => r.sourceId === d.id)) return;   // already imported
       const s = d.data();
-      saveTask('', { ...s, sourceId: d.id, stage: 'Prospect', uid: user!.uid, createdAt: Date.now() });
+      actions.saveRecord({ ...s, sourceId: d.id, stage: 'Prospect', uid: user!.uid });
     });
   });
-}, [userRole, tasks.length]);
+}, [userRole, actions.records.length]);
 \`\`\`
 
 Never write to \`user_submissions\` or \`user_requests\` from a page, and never

package/src/configs/theme.config.ts

@@ -65,8 +65,10 @@ export const themeConfig = {
       foreground: '#1e1b4b',     // Primary text color
 
       accent: '#7c3aed',         // Main branding color (Purple)
-      panelBg: 'rgba(255, 255, 255, 0.70)',   // Card/Panel background
-      panelBorder: 'rgba(124, 58, 237, 0.08)', // Card/Panel borders
+      // A faint accent wash rather than white-on-white: inner cards were
+      // invisible against the page in light mode. Kept quiet on purpose.
+      panelBg: 'rgba(124, 58, 237, 0.04)',   // Card/Panel background
+      panelBorder: 'rgba(124, 58, 237, 0.15)', // Card/Panel borders
 
       buttonGradient: ['#5b21b6', '#a78bfa'], // [Start, End]
       secondaryButton: {

package/src/index.css

@@ -75,8 +75,10 @@ input[type=number] {
     --accent-deep: #6d28d9;
     /* violet-700 */
 
-    --panel-bg: rgba(255, 255, 255, 0.7);
-    --panel-border: color-mix(in srgb, var(--accent-color) 8%, transparent);
+    /* A faint accent wash, not white-on-white: inner cards were invisible
+       against the page in light mode. Kept quiet on purpose. */
+    --panel-bg: color-mix(in srgb, var(--accent-color) 4%, transparent);
+    --panel-border: color-mix(in srgb, var(--accent-color) 15%, transparent);
 
     --button-bg: linear-gradient(135deg, #5b21b6 0%, #a78bfa 100%);
     --button-fg: #ffffff;
@@ -192,6 +194,13 @@ h3,
       0 2px 6px rgba(24, 16, 64, 0.07);
   }
 
+  /* An open drop-down. Deliberately NOT .glow-focus: the 25px halo read as a
+     spotlight on what is just a list being open, and it was sliced off by any
+     panel animating its height nearby. An inset ring cannot be clipped. */
+  .select-open {
+    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent-color) 22%, transparent);
+  }
+
   .glow-focus:focus-within {
     box-shadow: 0 0 25px var(--glow-color, var(--primary-glow));
     border-color: var(--accent-color);
@@ -224,27 +233,28 @@ h3,
   }
 
   /*
-   * Fields in the admin consoles keep the accent focus, but tight. A console
-   * is panels inside panels, and the ones that open and close animate their
-   * height behind overflow: hidden — so the 15-25px halo above spills past the
-   * field and gets sliced straight off at the panel edge. A 3px ring sits well
-   * inside the panel's own padding: softer to look at, and nothing can clip
-   * it. `.console-field` goes on the box itself; `.console-select` goes on the
+   * Fields in the admin consoles keep the accent focus, but tight — and INSET.
+   * A console is panels inside panels, and the ones that open and close
+   * animate their height behind overflow: hidden, so anything drawn OUTSIDE
+   * the field's own box — a halo, even a 3px outer ring — gets sliced off at
+   * whichever panel edge is nearest. An inset ring is drawn on the inside of
+   * the field's border, so no container can ever clip it, anywhere.
+   * `.console-field` goes on the box itself; `.console-select` goes on the
    * CustomSelect wrapper, whose bordered box is the trigger inside it.
    */
   .console-field:focus,
   .console-field:focus-within,
-  .console-select .glow-focus:focus-within {
-    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color) 15%, transparent) !important;
+  .console-select .select-open {
+    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent-color) 22%, transparent) !important;
     border-color: var(--accent-color) !important;
     outline: none;
-    transform: none;
+    transform: none !important;
   }
 
   /* A field that is refusing what was typed stays red while it is focused. */
   .console-field.is-invalid:focus,
   .console-field.is-invalid:focus-within {
-    box-shadow: 0 0 0 3px color-mix(in srgb, #ef4444 18%, transparent) !important;
+    box-shadow: inset 0 0 0 2px color-mix(in srgb, #ef4444 25%, transparent) !important;
     border-color: #ef4444 !important;
   }