diff --git a/libs/core/src/stories/resources/mcp-patterns.json b/libs/core/src/stories/resources/mcp-patterns.json index e81fef93f..03b913a60 100644 --- a/libs/core/src/stories/resources/mcp-patterns.json +++ b/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": "\n \n \n \n No referrals\n Referrals will display here as they join Kajabi using your referral links.\n \n Learn more\n Refer now\n \n", + "code": "\n \n \n \n \n No documents\n Documents will display here once you add them.\n \n \n Upload documents\n Learn more\n \n", "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." ] } ]