docs(mcp-patterns): update empty-state-pine to bordered icon square with stacked actions

libs/core/src/stories/resources/mcp-patterns.json

@@ -98,14 +98,15 @@
       "id": "empty-state-pine",
       "name": "Empty state (Pine)",
       "category": "admin",
-      "description": "Pine-native zero-data panel with icon badge, title, description, and actions — matches kajabi_partner ReferralsTableEmptyState.",
+      "description": "Pine-native zero-data panel with a neutral-gray icon square, title, description, and stacked actions (primary above a tertiary Learn more).",
       "when": "Replace Sage EmptyState on migrated admin screens when a list or table has no rows.",
-      "code": "<pds-box padding=\"xl\" background-color=\"var(--pine-color-background-container)\" border-radius=\"lg\" direction=\"column\" align-items=\"center\" justify-content=\"center\" gap=\"md\" fit>\n  <pds-box border-radius=\"circle\" background-color=\"var(--pine-color-red-300)\" padding=\"xl\">\n    <pds-icon name=\"users\" size=\"40px\" color=\"white\"></pds-icon>\n  </pds-box>\n  <pds-text weight=\"semibold\" align=\"center\" size=\"2xl\">No referrals</pds-text>\n  <pds-text align=\"center\" size=\"md\" color=\"--pine-color-text-secondary\">Referrals will display here as they join Kajabi using your referral links.</pds-text>\n  <pds-box gap=\"sm\">\n    <pds-button variant=\"secondary\">Learn more</pds-button>\n    <pds-button variant=\"primary\">Refer now</pds-button>\n  </pds-box>\n</pds-box>",
+      "code": "<pds-box padding=\"xl\" background-color=\"var(--pine-color-background-container)\" border-radius=\"lg\" direction=\"column\" align-items=\"center\" justify-content=\"center\" gap=\"md\" fit>\n  <pds-box flex=\"none\" border-radius=\"md\" background-color=\"var(--pine-color-background-inset)\" min-width=\"48px\" min-height=\"48px\" align-items=\"center\" justify-content=\"center\">\n    <pds-icon name=\"document\" size=\"24px\" color=\"var(--pine-color-text-secondary)\"></pds-icon>\n  </pds-box>\n  <pds-box flex=\"none\" direction=\"column\" align-items=\"center\" gap=\"xs\">\n    <pds-text weight=\"semibold\" align=\"center\" size=\"2xl\">No documents</pds-text>\n    <pds-text align=\"center\" size=\"md\" color=\"--pine-color-text-secondary\">Documents will display here once you add them.</pds-text>\n  </pds-box>\n  <pds-box flex=\"none\" direction=\"column\" gap=\"sm\" align-items=\"stretch\">\n    <pds-button variant=\"primary\">Upload documents</pds-button>\n    <pds-button variant=\"tertiary\">Learn more</pds-button>\n  </pds-box>\n</pds-box>",
       "notes": [
-        "Matches ReferralsTableEmptyState: circular icon badge, semibold 2xl title, md body copy, secondary + primary actions.",
+        "Layout: neutral-gray 48x48 icon square (no border) with a 24px icon, semibold 2xl title, md body copy, primary action stacked above a tertiary Learn more button.",
         "Many kajabi-products screens still use Sage EmptyState (e.g. ExpertAgentsList) — migrate to this layout when converting the file.",
-        "Pick a semantic icon (users, folder, add) and a token background color for the badge circle.",
-        "Use fit on the outer box so the empty panel spans the content area width."
+        "Pick a semantic icon (document, users, folder, add) and keep the badge as a neutral-gray square using --pine-color-background-inset so it stays theme-safe.",
+        "Use fit on the outer box so the empty panel spans the content area width.",
+        "Keep flex=\"none\" on the badge, text, and actions boxes — pds-box defaults to flex-grow:1, so without it the 48x48 badge stretches (stops being square) and the sections spread apart in a tall panel."
       ]
     }
   ]