lucent-ui 0.25.1 → 0.27.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +55 -55
- package/dist/index.d.ts +55 -6
- package/dist/index.js +2078 -2058
- package/dist-cli/cli/mapper.js +2 -3
- package/dist-server/server/index.js +112 -3
- package/dist-server/server/recipe-registry.js +16 -0
- package/dist-server/src/components/atoms/Divider/Divider.manifest.js +1 -1
- package/dist-server/src/components/atoms/Table/Table.manifest.js +3 -3
- package/dist-server/src/components/molecules/Card/Card.manifest.js +1 -1
- package/dist-server/src/components/molecules/Menu/Menu.manifest.js +1 -1
- package/dist-server/src/components/molecules/PageLayout/PageLayout.manifest.js +2 -1
- package/dist-server/src/manifest/recipes/action-bar.recipe.js +91 -0
- package/dist-server/src/manifest/recipes/collapsible-card.recipe.js +100 -0
- package/dist-server/src/manifest/recipes/empty-state-card.recipe.js +72 -0
- package/dist-server/src/manifest/recipes/form-layout.recipe.js +98 -0
- package/dist-server/src/manifest/recipes/index.js +7 -0
- package/dist-server/src/manifest/recipes/profile-card.recipe.js +101 -0
- package/dist-server/src/manifest/recipes/settings-panel.recipe.js +167 -0
- package/dist-server/src/manifest/recipes/stats-row.recipe.js +106 -0
- package/package.json +1 -1
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
export const RECIPE = {
|
|
2
|
+
id: 'profile-card',
|
|
3
|
+
name: 'Profile Card',
|
|
4
|
+
description: 'User profile card with avatar, name/role, bio, tag chips, stats row, and action buttons.',
|
|
5
|
+
category: 'card',
|
|
6
|
+
components: ['card', 'avatar', 'text', 'chip', 'button', 'stack', 'row', 'divider'],
|
|
7
|
+
structure: `
|
|
8
|
+
Card (elevated, equal padding via style)
|
|
9
|
+
└── Stack gap="5"
|
|
10
|
+
├── Row gap="3" align="center" ← avatar + name block
|
|
11
|
+
│ ├── Avatar (lg)
|
|
12
|
+
│ └── Stack gap="1"
|
|
13
|
+
│ ├── Row gap="2" align="center"
|
|
14
|
+
│ │ ├── Text (lg, semibold, display) ← full name
|
|
15
|
+
│ │ └── Chip (success, sm) ← status badge
|
|
16
|
+
│ └── Text (sm, secondary) ← role / subtitle
|
|
17
|
+
├── Text (sm) ← bio paragraph
|
|
18
|
+
├── Row gap="2" wrap ← skill/tag chips
|
|
19
|
+
│ └── Chip[] (neutral, borderless, clickable)
|
|
20
|
+
├── Divider
|
|
21
|
+
├── Row gap="6" justify="around" ← stats
|
|
22
|
+
│ └── Stack[] gap="0" align="center"
|
|
23
|
+
│ ├── Text (2xl, bold, display) ← stat value
|
|
24
|
+
│ └── Text (xs, secondary) ← stat label
|
|
25
|
+
└── Row gap="3" ← actions
|
|
26
|
+
├── Button (primary, full width)
|
|
27
|
+
└── Button (outline, full width)
|
|
28
|
+
`.trim(),
|
|
29
|
+
code: `<Card variant="elevated" padding="none" style={{ width: 340, padding: 'var(--lucent-space-6)' }}>
|
|
30
|
+
<Stack gap="5">
|
|
31
|
+
<Row gap="3" align="center">
|
|
32
|
+
<Avatar src="/avatars/jane.jpg" alt="Jane Doe" size="lg" />
|
|
33
|
+
<Stack gap="1">
|
|
34
|
+
<Row gap="2" align="center">
|
|
35
|
+
<Text size="lg" weight="semibold" family="display">Jane Doe</Text>
|
|
36
|
+
<Chip variant="success" size="sm" dot>Pro</Chip>
|
|
37
|
+
</Row>
|
|
38
|
+
<Text size="sm" color="secondary">Software Engineer</Text>
|
|
39
|
+
</Stack>
|
|
40
|
+
</Row>
|
|
41
|
+
<Text size="sm">
|
|
42
|
+
Building design systems and component libraries.
|
|
43
|
+
Passionate about accessible, token-driven UI.
|
|
44
|
+
</Text>
|
|
45
|
+
<Row gap="2" wrap>
|
|
46
|
+
<Chip variant="neutral" borderless onClick={() => {}}>React</Chip>
|
|
47
|
+
<Chip variant="neutral" borderless onClick={() => {}}>TypeScript</Chip>
|
|
48
|
+
<Chip variant="neutral" borderless onClick={() => {}}>Design Systems</Chip>
|
|
49
|
+
</Row>
|
|
50
|
+
<Divider />
|
|
51
|
+
<Row gap="6" justify="around">
|
|
52
|
+
<Stack gap="0" align="center">
|
|
53
|
+
<Text size="2xl" weight="bold" family="display">128</Text>
|
|
54
|
+
<Text size="xs" color="secondary">Posts</Text>
|
|
55
|
+
</Stack>
|
|
56
|
+
<Stack gap="0" align="center">
|
|
57
|
+
<Text size="2xl" weight="bold" family="display">4.2k</Text>
|
|
58
|
+
<Text size="xs" color="secondary">Followers</Text>
|
|
59
|
+
</Stack>
|
|
60
|
+
<Stack gap="0" align="center">
|
|
61
|
+
<Text size="2xl" weight="bold" family="display">312</Text>
|
|
62
|
+
<Text size="xs" color="secondary">Following</Text>
|
|
63
|
+
</Stack>
|
|
64
|
+
</Row>
|
|
65
|
+
<Row gap="3">
|
|
66
|
+
<Button variant="primary" style={{ flex: 1 }}>Follow</Button>
|
|
67
|
+
<Button variant="outline" style={{ flex: 1 }}>Message</Button>
|
|
68
|
+
</Row>
|
|
69
|
+
</Stack>
|
|
70
|
+
</Card>`,
|
|
71
|
+
variants: [
|
|
72
|
+
{
|
|
73
|
+
title: 'Compact collapsible profile',
|
|
74
|
+
code: `<Card variant="filled" padding="none" hoverable style={{ width: 280 }}>
|
|
75
|
+
<Collapsible
|
|
76
|
+
trigger={
|
|
77
|
+
<Row gap="3" align="center">
|
|
78
|
+
<Avatar alt="Jane Doe" size="md" />
|
|
79
|
+
<Stack gap="1">
|
|
80
|
+
<Text as="span" size="sm" weight="semibold">Jane Doe</Text>
|
|
81
|
+
<Text as="span" size="xs" color="secondary">Software Engineer</Text>
|
|
82
|
+
</Stack>
|
|
83
|
+
</Row>
|
|
84
|
+
}
|
|
85
|
+
defaultOpen
|
|
86
|
+
>
|
|
87
|
+
<Row gap="2" justify="end">
|
|
88
|
+
<Button variant="outline" size="sm">Message</Button>
|
|
89
|
+
<Button variant="primary" size="sm">Follow</Button>
|
|
90
|
+
</Row>
|
|
91
|
+
</Collapsible>
|
|
92
|
+
</Card>`,
|
|
93
|
+
},
|
|
94
|
+
],
|
|
95
|
+
designNotes: 'Avatar and name are grouped in a Row with center alignment so the text block ' +
|
|
96
|
+
'vertically centers against the avatar regardless of line count. The name row ' +
|
|
97
|
+
'uses gap="2" for tight coupling between name and status chip. Stats use ' +
|
|
98
|
+
'justify="around" to distribute evenly without fixed widths. Action buttons ' +
|
|
99
|
+
'use flex: 1 to split the row equally. The Divider separates informational ' +
|
|
100
|
+
'content (above) from interactive content (below).',
|
|
101
|
+
};
|
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
export const RECIPE = {
|
|
2
|
+
id: 'settings-panel',
|
|
3
|
+
name: 'Settings Panel',
|
|
4
|
+
description: 'Settings card with section header, toggle rows with descriptions, select dropdown, and action buttons.',
|
|
5
|
+
category: 'settings',
|
|
6
|
+
components: ['card', 'text', 'badge', 'toggle', 'select', 'button', 'stack', 'row', 'divider', 'nav-menu', 'form-field', 'input', 'textarea'],
|
|
7
|
+
structure: `
|
|
8
|
+
Card (elevated, padding="lg")
|
|
9
|
+
└── Stack gap="5"
|
|
10
|
+
├── Row gap="2" align="center" ← section header
|
|
11
|
+
│ ├── Text (lg, semibold) ← title
|
|
12
|
+
│ └── Badge (accent) ← version/plan badge
|
|
13
|
+
├── Divider
|
|
14
|
+
├── Stack gap="4" ← toggle settings
|
|
15
|
+
│ ├── Row justify="between" ← setting row
|
|
16
|
+
│ │ ├── Stack gap="1"
|
|
17
|
+
│ │ │ ├── Text (sm, medium) ← setting label
|
|
18
|
+
│ │ │ └── Text (xs, secondary) ← description
|
|
19
|
+
│ │ └── Toggle
|
|
20
|
+
│ ├── Row justify="between"
|
|
21
|
+
│ │ ├── Stack gap="1"
|
|
22
|
+
│ │ │ ├── Text (sm, medium)
|
|
23
|
+
│ │ │ └── Text (xs, secondary)
|
|
24
|
+
│ │ └── Toggle
|
|
25
|
+
│ └── Row justify="between"
|
|
26
|
+
│ ├── Stack gap="1"
|
|
27
|
+
│ │ ├── Text (sm, medium)
|
|
28
|
+
│ │ └── Text (xs, secondary)
|
|
29
|
+
│ └── Select
|
|
30
|
+
├── Divider
|
|
31
|
+
└── Row gap="2" justify="end" ← actions
|
|
32
|
+
├── Button (ghost, sm)
|
|
33
|
+
└── Button (primary, sm)
|
|
34
|
+
`.trim(),
|
|
35
|
+
code: `<Card variant="elevated" padding="lg" style={{ width: 400 }}>
|
|
36
|
+
<Stack gap="5">
|
|
37
|
+
<Row gap="2" align="center">
|
|
38
|
+
<Text size="lg" weight="semibold">Notifications</Text>
|
|
39
|
+
<Badge variant="accent">Pro</Badge>
|
|
40
|
+
</Row>
|
|
41
|
+
<Divider />
|
|
42
|
+
<Stack gap="4">
|
|
43
|
+
<Row justify="between">
|
|
44
|
+
<Stack gap="1">
|
|
45
|
+
<Text size="sm" weight="medium">Email alerts</Text>
|
|
46
|
+
<Text size="xs" color="secondary">
|
|
47
|
+
Get notified when someone mentions you.
|
|
48
|
+
</Text>
|
|
49
|
+
</Stack>
|
|
50
|
+
<Toggle defaultChecked />
|
|
51
|
+
</Row>
|
|
52
|
+
<Row justify="between">
|
|
53
|
+
<Stack gap="1">
|
|
54
|
+
<Text size="sm" weight="medium">Push notifications</Text>
|
|
55
|
+
<Text size="xs" color="secondary">
|
|
56
|
+
Receive push notifications on your device.
|
|
57
|
+
</Text>
|
|
58
|
+
</Stack>
|
|
59
|
+
<Toggle />
|
|
60
|
+
</Row>
|
|
61
|
+
<Row justify="between">
|
|
62
|
+
<Stack gap="1">
|
|
63
|
+
<Text size="sm" weight="medium">Digest frequency</Text>
|
|
64
|
+
<Text size="xs" color="secondary">
|
|
65
|
+
How often to send summary emails.
|
|
66
|
+
</Text>
|
|
67
|
+
</Stack>
|
|
68
|
+
<Select
|
|
69
|
+
defaultValue="weekly"
|
|
70
|
+
options={[
|
|
71
|
+
{ value: 'daily', label: 'Daily' },
|
|
72
|
+
{ value: 'weekly', label: 'Weekly' },
|
|
73
|
+
{ value: 'monthly', label: 'Monthly' },
|
|
74
|
+
]}
|
|
75
|
+
size="sm"
|
|
76
|
+
style={{ width: 120 }}
|
|
77
|
+
/>
|
|
78
|
+
</Row>
|
|
79
|
+
</Stack>
|
|
80
|
+
<Divider />
|
|
81
|
+
<Row gap="2" justify="end">
|
|
82
|
+
<Button variant="ghost" size="sm">Reset</Button>
|
|
83
|
+
<Button variant="primary" size="sm">Save changes</Button>
|
|
84
|
+
</Row>
|
|
85
|
+
</Stack>
|
|
86
|
+
</Card>`,
|
|
87
|
+
variants: [
|
|
88
|
+
{
|
|
89
|
+
title: 'Drill-down with NavMenu',
|
|
90
|
+
code: `const [tab, setTab] = useState('profile');
|
|
91
|
+
|
|
92
|
+
<Card variant="elevated" padding="none" style={{ width: 560 }}>
|
|
93
|
+
<Row gap="0" align="stretch">
|
|
94
|
+
<div style={{ width: 160, borderRight: '1px solid var(--lucent-border-default)', padding: 'var(--lucent-space-3)', flexShrink: 0 }}>
|
|
95
|
+
<NavMenu orientation="vertical" size="sm">
|
|
96
|
+
<NavMenu.Item as="button" isActive={tab === 'profile'} onClick={() => setTab('profile')}>Profile</NavMenu.Item>
|
|
97
|
+
<NavMenu.Item as="button" isActive={tab === 'notifications'} onClick={() => setTab('notifications')}>Notifications</NavMenu.Item>
|
|
98
|
+
<NavMenu.Item as="button" isActive={tab === 'security'} onClick={() => setTab('security')}>Security</NavMenu.Item>
|
|
99
|
+
</NavMenu>
|
|
100
|
+
</div>
|
|
101
|
+
<div style={{ flex: 1, padding: 'var(--lucent-space-5)' }}>
|
|
102
|
+
{tab === 'profile' && (
|
|
103
|
+
<Stack gap="4">
|
|
104
|
+
<Text size="sm" weight="semibold">Profile</Text>
|
|
105
|
+
<FormField label="Display name" htmlFor="s-name">
|
|
106
|
+
<Input id="s-name" placeholder="Jane Doe" size="sm" />
|
|
107
|
+
</FormField>
|
|
108
|
+
<FormField label="Bio" htmlFor="s-bio">
|
|
109
|
+
<Textarea id="s-bio" placeholder="Tell us about yourself..." rows={2} />
|
|
110
|
+
</FormField>
|
|
111
|
+
<Row gap="2" justify="end">
|
|
112
|
+
<Button variant="primary" size="sm">Save</Button>
|
|
113
|
+
</Row>
|
|
114
|
+
</Stack>
|
|
115
|
+
)}
|
|
116
|
+
{tab === 'notifications' && (
|
|
117
|
+
<Stack gap="4">
|
|
118
|
+
<Text size="sm" weight="semibold">Notifications</Text>
|
|
119
|
+
<Row justify="between">
|
|
120
|
+
<Stack gap="1">
|
|
121
|
+
<Text size="sm" weight="medium">Email alerts</Text>
|
|
122
|
+
<Text size="xs" color="secondary">Get notified on mentions.</Text>
|
|
123
|
+
</Stack>
|
|
124
|
+
<Toggle defaultChecked />
|
|
125
|
+
</Row>
|
|
126
|
+
<Row justify="between">
|
|
127
|
+
<Stack gap="1">
|
|
128
|
+
<Text size="sm" weight="medium">Push notifications</Text>
|
|
129
|
+
<Text size="xs" color="secondary">Receive push on your device.</Text>
|
|
130
|
+
</Stack>
|
|
131
|
+
<Toggle />
|
|
132
|
+
</Row>
|
|
133
|
+
</Stack>
|
|
134
|
+
)}
|
|
135
|
+
{tab === 'security' && (
|
|
136
|
+
<Stack gap="4">
|
|
137
|
+
<Text size="sm" weight="semibold">Security</Text>
|
|
138
|
+
<Row justify="between">
|
|
139
|
+
<Stack gap="1">
|
|
140
|
+
<Text size="sm" weight="medium">Two-factor auth</Text>
|
|
141
|
+
<Text size="xs" color="secondary">Add an extra layer of security.</Text>
|
|
142
|
+
</Stack>
|
|
143
|
+
<Toggle />
|
|
144
|
+
</Row>
|
|
145
|
+
<FormField label="Current password" htmlFor="s-pass">
|
|
146
|
+
<Input id="s-pass" type="password" size="sm" />
|
|
147
|
+
</FormField>
|
|
148
|
+
<Row gap="2" justify="end">
|
|
149
|
+
<Button variant="primary" size="sm">Update password</Button>
|
|
150
|
+
</Row>
|
|
151
|
+
</Stack>
|
|
152
|
+
)}
|
|
153
|
+
</div>
|
|
154
|
+
</Row>
|
|
155
|
+
</Card>`,
|
|
156
|
+
},
|
|
157
|
+
],
|
|
158
|
+
designNotes: 'Each setting row uses Row with justify="between" to push the control to the far ' +
|
|
159
|
+
'right. The label + description pair is a Stack with gap="1" for tight coupling. ' +
|
|
160
|
+
'Dividers separate the header, settings body, and action footer into visual ' +
|
|
161
|
+
'sections. The Select is constrained to a fixed width (120px) to prevent the row ' +
|
|
162
|
+
'from shifting when option labels vary in length. Actions are right-aligned with ' +
|
|
163
|
+
'a ghost Reset so it visually recedes next to the primary Save. ' +
|
|
164
|
+
'The drill-down variant uses NavMenu as a left sidebar with a border-right separator. ' +
|
|
165
|
+
'Card uses padding="none" so the nav and content pane each control their own padding. ' +
|
|
166
|
+
'Row with align="stretch" ensures the nav border extends full height.',
|
|
167
|
+
};
|
|
@@ -0,0 +1,106 @@
|
|
|
1
|
+
export const RECIPE = {
|
|
2
|
+
id: 'stats-row',
|
|
3
|
+
name: 'Stats Row',
|
|
4
|
+
description: 'Row of individual stat cards with label, large display-font value, and trend chip with comparison.',
|
|
5
|
+
category: 'dashboard',
|
|
6
|
+
components: ['card', 'text', 'chip', 'avatar', 'stack', 'row'],
|
|
7
|
+
structure: `
|
|
8
|
+
Row gap="3" wrap
|
|
9
|
+
├── Card (outline, padding="md", flex=1)
|
|
10
|
+
│ └── Stack gap="3"
|
|
11
|
+
│ ├── Text (xs, secondary, medium) ← metric label
|
|
12
|
+
│ ├── Text (2xl, bold, display) ← value
|
|
13
|
+
│ └── Row gap="2" align="center"
|
|
14
|
+
│ ├── Chip (success/danger, sm) ← trend %
|
|
15
|
+
│ └── Text (xs, secondary) ← comparison
|
|
16
|
+
├── Card ...
|
|
17
|
+
└── Card ...
|
|
18
|
+
`.trim(),
|
|
19
|
+
code: `<Row gap="3" wrap>
|
|
20
|
+
<Card variant="outline" padding="md" style={{ flex: 1, minWidth: 180 }}>
|
|
21
|
+
<Stack gap="3">
|
|
22
|
+
<Text size="xs" color="secondary" weight="medium">Total Events</Text>
|
|
23
|
+
<Text size="2xl" weight="bold" family="display">32</Text>
|
|
24
|
+
<Row gap="2" align="center">
|
|
25
|
+
<Chip variant="success" size="sm" borderless>+20%</Chip>
|
|
26
|
+
<Text size="xs" color="secondary">25 last week</Text>
|
|
27
|
+
</Row>
|
|
28
|
+
</Stack>
|
|
29
|
+
</Card>
|
|
30
|
+
<Card variant="outline" padding="md" style={{ flex: 1, minWidth: 180 }}>
|
|
31
|
+
<Stack gap="3">
|
|
32
|
+
<Text size="xs" color="secondary" weight="medium">Total Hours</Text>
|
|
33
|
+
<Text size="2xl" weight="bold" family="display">38.2 hr</Text>
|
|
34
|
+
<Row gap="2" align="center">
|
|
35
|
+
<Chip variant="danger" size="sm" borderless>-8%</Chip>
|
|
36
|
+
<Text size="xs" color="secondary">42.0 hr last week</Text>
|
|
37
|
+
</Row>
|
|
38
|
+
</Stack>
|
|
39
|
+
</Card>
|
|
40
|
+
<Card variant="outline" padding="md" style={{ flex: 1, minWidth: 180 }}>
|
|
41
|
+
<Stack gap="3">
|
|
42
|
+
<Text size="xs" color="secondary" weight="medium">Focus Time</Text>
|
|
43
|
+
<Text size="2xl" weight="bold" family="display">16.8 hr</Text>
|
|
44
|
+
<Row gap="2" align="center">
|
|
45
|
+
<Chip variant="success" size="sm" borderless>+12%</Chip>
|
|
46
|
+
<Text size="xs" color="secondary">14.4 hr last week</Text>
|
|
47
|
+
</Row>
|
|
48
|
+
</Stack>
|
|
49
|
+
</Card>
|
|
50
|
+
</Row>`,
|
|
51
|
+
variants: [
|
|
52
|
+
{
|
|
53
|
+
title: 'Revenue cards with avatar header',
|
|
54
|
+
code: `<Row gap="3" wrap>
|
|
55
|
+
<Card variant="filled" padding="md" style={{ flex: 1, minWidth: 180 }}>
|
|
56
|
+
<Stack gap="3">
|
|
57
|
+
<Row gap="2" align="center">
|
|
58
|
+
<Avatar alt="Airbnb" size="sm" />
|
|
59
|
+
<Stack gap="0">
|
|
60
|
+
<Text size="sm" weight="semibold">Airbnb</Text>
|
|
61
|
+
<Text size="xs" color="secondary">Travel and tourism</Text>
|
|
62
|
+
</Stack>
|
|
63
|
+
</Row>
|
|
64
|
+
<Row justify="between" align="end">
|
|
65
|
+
<Stack gap="1">
|
|
66
|
+
<Row gap="2" align="baseline">
|
|
67
|
+
<Text size="lg" weight="bold" family="display">$33.2k</Text>
|
|
68
|
+
<Chip variant="success" size="sm" borderless>+37%</Chip>
|
|
69
|
+
</Row>
|
|
70
|
+
<Text size="xs" color="secondary">Recurring Revenue</Text>
|
|
71
|
+
</Stack>
|
|
72
|
+
</Row>
|
|
73
|
+
</Stack>
|
|
74
|
+
</Card>
|
|
75
|
+
<Card variant="filled" padding="md" style={{ flex: 1, minWidth: 180 }}>
|
|
76
|
+
<Stack gap="3">
|
|
77
|
+
<Row gap="2" align="center">
|
|
78
|
+
<Avatar alt="MailChimp" size="sm" />
|
|
79
|
+
<Stack gap="0">
|
|
80
|
+
<Text size="sm" weight="semibold">MailChimp</Text>
|
|
81
|
+
<Text size="xs" color="secondary">Email Marketing</Text>
|
|
82
|
+
</Stack>
|
|
83
|
+
</Row>
|
|
84
|
+
<Row justify="between" align="end">
|
|
85
|
+
<Stack gap="1">
|
|
86
|
+
<Row gap="2" align="baseline">
|
|
87
|
+
<Text size="lg" weight="bold" family="display">$3.2k</Text>
|
|
88
|
+
<Chip variant="danger" size="sm" borderless>-23%</Chip>
|
|
89
|
+
</Row>
|
|
90
|
+
<Text size="xs" color="secondary">Recurring Revenue</Text>
|
|
91
|
+
</Stack>
|
|
92
|
+
</Row>
|
|
93
|
+
</Stack>
|
|
94
|
+
</Card>
|
|
95
|
+
</Row>`,
|
|
96
|
+
},
|
|
97
|
+
],
|
|
98
|
+
designNotes: 'Each stat lives in its own Card so it reads as a discrete metric. flex: 1 with ' +
|
|
99
|
+
'minWidth ensures equal sizing that wraps gracefully. gap="3" in the Stack creates ' +
|
|
100
|
+
'three clear visual tiers: label (top), value (middle), trend context (bottom). ' +
|
|
101
|
+
'Display font on the value creates instant hierarchy. The trend row pairs a ' +
|
|
102
|
+
'color-coded Chip (success/danger) with a secondary comparison value so the user ' +
|
|
103
|
+
'gets both relative change and absolute context. The revenue variant adds an ' +
|
|
104
|
+
'Avatar + name header for entity-scoped metrics — align="baseline" on the ' +
|
|
105
|
+
'value + chip row keeps the trend visually anchored to the number.',
|
|
106
|
+
};
|