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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "your-ai-workflow-firebase-os",
-  "version": "1.2.39",
+  "version": "1.2.40",
   "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

@@ -310,7 +310,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
@@ -701,20 +703,13 @@ 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.
+> 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 +719,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 +883,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 +928,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;
   }