your-ai-workflow-firebase-os 1.2.49 → 1.2.51

package/package.json

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

@@ -295,13 +295,24 @@ change the owner can use and a change they cannot.
    first. Never write a form of your own with inputs and a submit handler —
    its entries would never reach the Inbox.
 6. Build what was asked and nothing more. Do not add extra pages, extra views,
-   extra forms, sample data or metrics the owner did not mention. Inside a page
+   extra forms, sample data or metrics the owner did not mention. Write the
+   page for the people who will VISIT it: never reprint words off the owner's
+   own admin screens on it — no "Copy this into your assistant's chat", no
+   "Ask your assistant", no prompt box, no instruction addressed to the owner
+   or to you. Those headings belong to the tools the owner asks for the page
+   WITH; on the page itself they are nonsense to a visitor, and the build
+   warns about them. Inside a page
    you design freely — "an impressive hero" is yours to make good — the limit
    is on adding THINGS, not on doing the asked thing well. Lay the page out as
    ONE clean column of sections using the full width: never nest a panel
    inside another panel, never absolutely position sections over each other,
    and never give a section a fixed height that clips it — more stages, more
    columns or more cards just make the page taller, and the page scrolls.
+   Above all, never cap the PAGE itself: no \`h-screen\`, \`max-h-screen\` or
+   \`h-[100vh]\` wrapper and no \`overflow-hidden\`/\`overflow-y-auto\` around
+   the whole page — on a phone that box swallows everything below one screen
+   and the visitor cannot scroll to the end. The build warns, and the app
+   force-grows such a box at runtime.
 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 plus its two registry.ts lines (and, only when the
@@ -332,6 +343,19 @@ change the owner can use and a change they cannot.
    CSS in a component — one global rule restyles and re-pads every page of
    the app at once. The app also disables any \`<style>\` tag inside a
    content slot at runtime, so global CSS cannot work — do not try it.
+   Pictures: every \`<img>\` gets \`loading="lazy"\` (except one at the very top
+   of the page), \`decoding="async"\` and a \`width\` and \`height\` — a public
+   page that pulls in several full-size pictures at once takes seconds to
+   appear on a phone. Use the links the owner gave you as they are; the app
+   already shrinks what they upload. Never add a picture from anywhere else.
+   And NEVER change the size of the page title: the big heading at the top of
+   every page is the library's, it sizes itself to fit the words and the
+   screen, and it is not yours to touch — not with a \`font-size\` on \`h1\`,
+   \`h2\`, \`h3\` or \`.page-title\` in \`theme.css\` (the build fails on that
+   rule, and the app ignores it anyway), and not with an \`<h1>\` in a content
+   file (they are hidden inside the slot). Headings you write inside your own
+   content are yours to size freely — \`SectionHeading\`, or an \`<h2>\` /
+   \`<h3>\` of your own.
 
 Before you answer, re-read the request and this list, and delete anything you
 built that breaks a line of it.
@@ -357,7 +381,10 @@ stops the build with one sentence that says the fix.
   content file (global CSS — it restyles and re-pads every page of the app,
   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.
+  directory — is invisible to the app, so the build stops and names the move;
+  and a rule in \`theme.css\` that sizes \`h1\`, \`h2\`, \`h3\` or
+  \`.page-title\` — it would resize every page title in the app, so the build
+  stops and says to delete it.
 - 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. So does a hard-coded colour
@@ -465,14 +492,19 @@ address to wire — the page finds its content by that key.
 
 ### The pages that already exist, and the one file each is filled by
 
-Three pages already exist and are NEVER created, re-created or re-addressed.
+Four pages already exist and are NEVER created, re-created or re-addressed.
 Each is filled by exactly one file, the same way as any other page:
 
-| page          | web address | the one file to write                                              |
-| ------------- | ----------- | ------------------------------------------------------------------ |
-| Home          | \`/\`         | \`src/your-ai-workflow-firebase-os/Home.tsx\` (edit it, do not add one) |
-| Contact       | \`/contact\`  | \`microcomponents/ContactContent.tsx\`                                |
-| Support       | \`/support\`  | \`microcomponents/SupportContent.tsx\`                                |
+| page          | web address  | the one file to write                                              |
+| ------------- | ------------ | ------------------------------------------------------------------ |
+| Home          | \`/\`          | \`src/your-ai-workflow-firebase-os/Home.tsx\` (edit it, do not add one) |
+| Contact       | \`/contact\`   | \`microcomponents/ContactContent.tsx\`                                |
+| Support       | \`/support\`   | \`microcomponents/SupportContent.tsx\`                                |
+| Dashboard     | \`/dashboard\` | \`microcomponents/DashboardContent.tsx\`                              |
+
+The dashboard is the screen a signed-in person lands on. It ships empty, and
+\`DashboardContent.tsx\` draws inside its panel, below the welcome heading and
+the dashboard menu the page already renders.
 
 Contact and Support show their form as a pop-up until one of those files
 exists; the moment it does, the page draws that file instead. So "put the
@@ -516,7 +548,11 @@ everywhere, including the home page.
    See "Presets" below.
 9. In \`theme.css\`, change CSS variables only. Never redefine \`.glass-panel\`,
    \`.text-gradient\` or \`.btn-primary\` — they ship compiled in the library and
-   redefining them breaks the app's chrome everywhere.
+   redefining them breaks the app's chrome everywhere. Never add a
+   \`font-size\` to \`h1\`, \`h2\`, \`h3\` or \`.page-title\` there either: that
+   resizes every page title in the app, the build now fails on it, and the
+   app pins the title's size regardless. The heading WEIGHT rules already in
+   that file are the theme's own — leave them as they are.
 
 ## Changing the home page
 
@@ -545,6 +581,11 @@ the Assets screen, copy its link there, and paste the link back to you — then
 put it in. This is for pictures on pages only — the logo and the favicon are
 never yours to change (see the theme section).
 
+A sentence pasted from the Pages screen can carry several pictures, and each
+one says where it goes — \"where it goes: across the top, behind the heading\".
+Put every picture it names on the page, each one where the sentence says. Only
+a picture with nothing said about it is yours to place.
+
 You can reuse the built-in forms anywhere on the page you design:
 
 \`\`\`tsx

package/src/index.css

@@ -472,27 +472,33 @@ h3,
 
   /* The page-title h1 (components/PageTitle.tsx). Fluid on a phone — the
      component shrinks a long title to fit the line and only sets data-fold
-     when even the floor size cannot hold it — but from md up the sizes are
-     the pre-PageTitle breakpoint steps (36px/48px), so desktop looks exactly
-     as it always did. No .text-2xl/.text-3xl here on purpose: those classes
+     when even the floor size cannot hold it — and 36px is the ceiling at
+     every width above that. The old lg step took the title to 48px on a wide
+     screen, which read as shouting; a page title stops growing once the line
+     is comfortable. No .text-2xl/.text-3xl here on purpose: those classes
      carry weight rules that would fight these sizes — the weight comes from
      the unlayered .page-title rule further up, which pins the h2 weight the
-     title has always rendered at. */
+     title has always rendered at.
+
+     `!important`, and inside a layer, is the whole point: a page title is
+     the app's chrome, not the assistant's to resize, and it kept being
+     resized anyway. The consumer's theme.css is unlayered, so an `h1 {
+     font-size: 3rem }` written there — with or without !important — beat
+     these rules and every page title in the app grew. An important
+     declaration inside a layer outranks any unlayered one, so nothing
+     written in theme.css can reach the title now. The one thing that still
+     can is PageTitle's own shrink-to-fit, which sets the size inline WITH
+     priority for exactly this reason. */
   .page-title {
-    font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.25rem);
-    line-height: 1.2;
+    font-size: clamp(1.5rem, 1.05rem + 1.9vw, 2.25rem) !important;
+    line-height: 1.2 !important;
     white-space: nowrap;
   }
 
-  /* The line heights are the old text-4xl / text-5xl ones, not a single
-     ratio: at 48px a 1.2 line box stands ~10px taller than the title always
-     did and pushes the route row down with it. */
+  /* The line height is the old text-4xl one, not a single ratio: 1.2 at 36px
+     stands taller than the title always did and pushes the route row down. */
   @media (min-width: 768px) {
-    .page-title { font-size: 2.25rem; line-height: 2.5rem; }
-  }
-
-  @media (min-width: 1024px) {
-    .page-title { font-size: 3rem; line-height: 1; }
+    .page-title { font-size: 2.25rem !important; line-height: 2.5rem !important; }
   }
 
   .page-title[data-fold] {