From 7a9f868113e7479d5379f16960481cee06fa2754 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Sun, 19 Jul 2026 18:24:35 +0000 Subject: [PATCH 1/8] docs(mcp-patterns): update empty-state-pine to bordered icon square with stacked actions Co-authored-by: Sam Croswell --- libs/core/src/stories/resources/mcp-patterns.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/libs/core/src/stories/resources/mcp-patterns.json b/libs/core/src/stories/resources/mcp-patterns.json index e81fef93f..46b8aa52e 100644 --- a/libs/core/src/stories/resources/mcp-patterns.json +++ b/libs/core/src/stories/resources/mcp-patterns.json @@ -98,13 +98,13 @@ "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 bordered 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: white bordered ~60x60 icon square, 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.", + "Pick a semantic icon (document, users, folder, add) and keep the badge as a bordered square using --pine-color-background-container so it stays theme-safe.", "Use fit on the outer box so the empty panel spans the content area width." ] } From b7fd5082817b411f0a41865899c5cf5db0540c59 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Sun, 19 Jul 2026 20:03:41 +0000 Subject: [PATCH 2/8] docs(mcp-patterns): shrink empty-state icon square to 48x48 Co-authored-by: Sam Croswell --- libs/core/src/stories/resources/mcp-patterns.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/libs/core/src/stories/resources/mcp-patterns.json b/libs/core/src/stories/resources/mcp-patterns.json index 46b8aa52e..ae218d93f 100644 --- a/libs/core/src/stories/resources/mcp-patterns.json +++ b/libs/core/src/stories/resources/mcp-patterns.json @@ -100,9 +100,9 @@ "category": "admin", "description": "Pine-native zero-data panel with a bordered 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 \n No documents\n Documents will display here once you add them.\n \n \n Upload documents\n Learn more\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": [ - "Layout: white bordered ~60x60 icon square, semibold 2xl title, md body copy, primary action stacked above a tertiary Learn more button.", + "Layout: white bordered 48x48 icon square 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 (document, users, folder, add) and keep the badge as a bordered square using --pine-color-background-container so it stays theme-safe.", "Use fit on the outer box so the empty panel spans the content area width." From bd55dcda278562647704bb036184633e893d05e9 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Sun, 19 Jul 2026 20:11:11 +0000 Subject: [PATCH 3/8] docs(mcp-patterns): use less-rounded corners on empty-state icon square Co-authored-by: Sam Croswell --- libs/core/src/stories/resources/mcp-patterns.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/core/src/stories/resources/mcp-patterns.json b/libs/core/src/stories/resources/mcp-patterns.json index ae218d93f..03f6d683f 100644 --- a/libs/core/src/stories/resources/mcp-patterns.json +++ b/libs/core/src/stories/resources/mcp-patterns.json @@ -100,7 +100,7 @@ "category": "admin", "description": "Pine-native zero-data panel with a bordered 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 \n No documents\n Documents will display here once you add them.\n \n \n Upload documents\n Learn more\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": [ "Layout: white bordered 48x48 icon square 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.", From 9258081608b82076a831a774a40bc516152c9c55 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Sun, 19 Jul 2026 20:17:33 +0000 Subject: [PATCH 4/8] docs(mcp-patterns): revert empty-state icon square to md corner radius Co-authored-by: Sam Croswell --- libs/core/src/stories/resources/mcp-patterns.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/core/src/stories/resources/mcp-patterns.json b/libs/core/src/stories/resources/mcp-patterns.json index 03f6d683f..ae218d93f 100644 --- a/libs/core/src/stories/resources/mcp-patterns.json +++ b/libs/core/src/stories/resources/mcp-patterns.json @@ -100,7 +100,7 @@ "category": "admin", "description": "Pine-native zero-data panel with a bordered 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 \n No documents\n Documents will display here once you add them.\n \n \n Upload documents\n Learn more\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": [ "Layout: white bordered 48x48 icon square 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.", From 0d566907aafdef784064d3d42d81d000a050168c Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Sun, 19 Jul 2026 20:21:29 +0000 Subject: [PATCH 5/8] docs(mcp-patterns): use neutral-gray fill and remove border on empty-state icon square Co-authored-by: Sam Croswell --- libs/core/src/stories/resources/mcp-patterns.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/libs/core/src/stories/resources/mcp-patterns.json b/libs/core/src/stories/resources/mcp-patterns.json index ae218d93f..ae9a0b57e 100644 --- a/libs/core/src/stories/resources/mcp-patterns.json +++ b/libs/core/src/stories/resources/mcp-patterns.json @@ -100,11 +100,11 @@ "category": "admin", "description": "Pine-native zero-data panel with a bordered 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 \n No documents\n Documents will display here once you add them.\n \n \n Upload documents\n Learn more\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": [ - "Layout: white bordered 48x48 icon square with a 24px icon, semibold 2xl title, md body copy, primary action stacked above a tertiary Learn more button.", + "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 (document, users, folder, add) and keep the badge as a bordered square using --pine-color-background-container so it stays theme-safe.", + "Pick a semantic icon (document, users, folder, add) and keep the badge as a neutral-gray square using --pine-color-background-subtle so it stays theme-safe.", "Use fit on the outer box so the empty panel spans the content area width." ] } From 7cb97030fdf404948f0b98f70c9a9eeb580db8cd Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Sun, 19 Jul 2026 20:24:58 +0000 Subject: [PATCH 6/8] docs(mcp-patterns): use darker background-inset fill on empty-state icon square Co-authored-by: Sam Croswell --- libs/core/src/stories/resources/mcp-patterns.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/libs/core/src/stories/resources/mcp-patterns.json b/libs/core/src/stories/resources/mcp-patterns.json index ae9a0b57e..143ffd717 100644 --- a/libs/core/src/stories/resources/mcp-patterns.json +++ b/libs/core/src/stories/resources/mcp-patterns.json @@ -100,11 +100,11 @@ "category": "admin", "description": "Pine-native zero-data panel with a bordered 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 \n No documents\n Documents will display here once you add them.\n \n \n Upload documents\n Learn more\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": [ "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 (document, users, folder, add) and keep the badge as a neutral-gray square using --pine-color-background-subtle so it stays theme-safe.", + "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." ] } From 7c7b3649f4ceaf7557e9927a6191643995900157 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Sun, 19 Jul 2026 20:26:17 +0000 Subject: [PATCH 7/8] docs(mcp-patterns): sync empty-state description with neutral-gray badge Co-authored-by: Sam Croswell --- libs/core/src/stories/resources/mcp-patterns.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/core/src/stories/resources/mcp-patterns.json b/libs/core/src/stories/resources/mcp-patterns.json index 143ffd717..9f836958a 100644 --- a/libs/core/src/stories/resources/mcp-patterns.json +++ b/libs/core/src/stories/resources/mcp-patterns.json @@ -98,7 +98,7 @@ "id": "empty-state-pine", "name": "Empty state (Pine)", "category": "admin", - "description": "Pine-native zero-data panel with a bordered icon square, title, description, and stacked actions (primary above a tertiary Learn more).", + "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 \n No documents\n Documents will display here once you add them.\n \n \n Upload documents\n Learn more\n \n", "notes": [ From 03f85e6965fc1b1c7082cd1db1552f15b9be9158 Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Sun, 19 Jul 2026 20:38:22 +0000 Subject: [PATCH 8/8] fix(mcp-patterns): keep empty-state badge square with flex=none in tall panels Co-authored-by: Sam Croswell --- libs/core/src/stories/resources/mcp-patterns.json | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/libs/core/src/stories/resources/mcp-patterns.json b/libs/core/src/stories/resources/mcp-patterns.json index 9f836958a..03b913a60 100644 --- a/libs/core/src/stories/resources/mcp-patterns.json +++ b/libs/core/src/stories/resources/mcp-patterns.json @@ -100,12 +100,13 @@ "category": "admin", "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 \n No documents\n Documents will display here once you add them.\n \n \n Upload documents\n Learn more\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": [ "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 (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." + "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." ] } ]