@cratis/scene.blueprint.default 4.31.0 → 4.32.0

package/foundation/foundationComponentMetadata.ts

@@ -0,0 +1,17 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ComponentCategory } from '@cratis/scene.model';
+import { ComponentMetadata, componentMetadata as m } from '@cratis/scene.react';
+import { ComponentName } from '../ComponentName';
+
+/**
+ * The category, icon, keywords and picker badge of every foundation component (CMP1), keyed by bare component name.
+ * The names are those of `ComponentName`; the metadata of the rest of the package lives in `defaultBlueprintComponentMetadata`.
+ */
+export const foundationComponentMetadata: Record<string, ComponentMetadata> = {
+    [ComponentName.EmptyState]: m('Empty state', ComponentCategory.Feedback, 'inbox', ['no data', 'nothing', 'blank slate', 'zero state']),
+    [ComponentName.StatCard]: m('Stat card', ComponentCategory.DataDisplay, 'gauge', ['kpi', 'metric', 'figure', 'number', 'dashboard']),
+    [ComponentName.TrendChip]: m('Trend chip', ComponentCategory.DataDisplay, 'trending-up', ['delta', 'change', 'arrow', 'comparison']),
+    [ComponentName.StatusChip]: m('Status chip', ComponentCategory.DataDisplay, 'badge-check', ['badge', 'state', 'tag', 'label']),
+};

package/foundation/foundationDescriptors.ts

@@ -0,0 +1,119 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { BindingSourceKind, ComponentDescriptor, PropertyDescriptor, PropertyEditorKind, PropertyValueType } from '@cratis/scene.model';
+import { componentRegistryKey } from '@cratis/scene.react';
+import { ComponentName } from '../ComponentName';
+import { defaultBlueprintName } from '../packageName';
+import { ComponentState } from './ComponentState';
+import { NumberFormat } from './formatting';
+import { PermissionRule } from './PermissionRule';
+import { StatusTone } from './StatusChip';
+
+/** Data properties take what a screen binds them to: a query's result, a data context or another component's output. */
+export const bindable = [BindingSourceKind.DataContext, BindingSourceKind.QueryResult, BindingSourceKind.ComponentProperty];
+
+const text = (path: string, label: string, group: string, description?: string, extra: Partial<PropertyDescriptor> = {}): PropertyDescriptor =>
+    ({ path, label, group, valueType: PropertyValueType.String, ...(group === 'Data' ? { acceptedBindingKinds: bindable } : {}), ...(description === undefined ? {} : { description }), ...extra });
+
+const number = (path: string, label: string, group: string, description?: string, extra: Partial<PropertyDescriptor> = {}): PropertyDescriptor =>
+    ({ path, label, group, valueType: PropertyValueType.Number, editorKind: PropertyEditorKind.Number, ...(group === 'Data' ? { acceptedBindingKinds: bindable } : {}), ...(description === undefined ? {} : { description }), ...extra });
+
+const flag = (path: string, label: string, group: string, description?: string, extra: Partial<PropertyDescriptor> = {}): PropertyDescriptor =>
+    ({ path, label, group, valueType: PropertyValueType.Boolean, editorKind: PropertyEditorKind.Boolean, ...(description === undefined ? {} : { description }), ...extra });
+
+const choice = (path: string, label: string, group: string, values: Record<string, string>, defaultValue: string, description?: string): PropertyDescriptor =>
+    ({
+        path, label, group, valueType: PropertyValueType.Enum, editorKind: PropertyEditorKind.Enum, default: defaultValue,
+        choices: Object.entries(values).map(([value, name]) => ({ value, label: name })), ...(description === undefined ? {} : { description }),
+    });
+
+export const list = (path: string, label: string, group: string, itemLabel: string, properties: PropertyDescriptor[], description?: string): PropertyDescriptor =>
+    ({ path, label, group, valueType: PropertyValueType.Collection, default: [], item: { label: itemLabel, properties }, ...(description === undefined ? {} : { description }) });
+
+const rule = (path: string, label: string, description: string): PropertyDescriptor =>
+    choice(path, label, 'Permissions', { [PermissionRule.Enabled]: 'Enabled', [PermissionRule.Disabled]: 'Disabled', [PermissionRule.Hidden]: 'Hidden' }, PermissionRule.Enabled, description);
+
+/** The properties every data-showing foundation component shares: the standard states (spec Part B 1.4) and the cross-cutting rules of 1.5. */
+export const standardStateProperties: PropertyDescriptor[] = [
+    choice('state', 'Preview state', 'State', {
+        [ComponentState.Ready]: 'Ready', [ComponentState.Loading]: 'Loading', [ComponentState.Empty]: 'Empty',
+        [ComponentState.Error]: 'Error', [ComponentState.NoPermission]: 'No permission', [ComponentState.Partial]: 'Partial',
+    }, ComponentState.Ready, 'Forces a state so each can be designed and previewed; empty means the state follows the bound data.'),
+    text('error', 'Error message', 'State', 'The message of the error state; setting it puts the component in that state.'),
+    flag('loading', 'Loading', 'State', 'Shows the skeleton while the data has not answered.'),
+    flag('forbidden', 'Not allowed', 'State', 'Shows the no-permission state, which explains what is missing and shows no data.'),
+    text('permissionSubject', 'What access is missing', 'State', 'Names what the user cannot see in the no-permission message.'),
+    { path: 'failedRegions', label: 'Failed regions', group: 'State', valueType: PropertyValueType.Json, editorKind: PropertyEditorKind.StringList, default: [], description: 'The parts that failed to load; any entry puts the component in the partial state.' },
+    text('emptyHeadline', 'Empty headline', 'State'),
+    text('emptyHint', 'Empty hint', 'State'),
+    text('emptyActionLabel', 'Empty action', 'State', 'The primary action offered when there is nothing to show.'),
+    rule('actionPermission', 'Empty action permission', 'Whether the empty state offers its action, refuses it with a reason, or does not render it.'),
+    text('label', 'Label', 'Accessibility', 'The accessible name of the region.'),
+    text('locale', 'Locale', 'Content', 'The locale dates, numbers and currency are formatted in; empty follows the document.'),
+    choice('density', 'Density', 'Appearance', { comfortable: 'Comfortable', compact: 'Compact' }, 'comfortable'),
+    { path: 'strings', label: 'Text overrides', group: 'Content', valueType: PropertyValueType.Object, editorKind: PropertyEditorKind.StringMap, description: 'Replaces the text the component says itself, for localization.' },
+];
+
+const key = (name: ComponentName) => componentRegistryKey(defaultBlueprintName, name);
+
+const formats = { [NumberFormat.Number]: 'Number', [NumberFormat.Currency]: 'Currency', [NumberFormat.Percent]: 'Percent', [NumberFormat.Compact]: 'Compact' };
+
+/** What can be edited on the foundation components (Part B 4). Each declares the shape of its data, never values (SD1). */
+export const foundationDescriptors: ComponentDescriptor[] = [
+    {
+        component: key(ComponentName.EmptyState),
+        displayName: 'Empty state',
+        description: 'An icon, a headline, a hint and one primary action; embeddable in any region.',
+        properties: [
+            text('headline', 'Headline', 'Content', undefined, { default: 'Nothing here yet' }),
+            text('hint', 'Hint', 'Content'),
+            text('icon', 'Icon', 'Appearance'),
+            text('actionLabel', 'Primary action', 'Behavior', 'The label of the one action the state offers; its behaviors say what it does.'),
+            rule('actionPermission', 'Action permission', 'Whether the action works, refuses with a reason, or is not rendered.'),
+            text('locale', 'Locale', 'Content'),
+            { path: 'strings', label: 'Text overrides', group: 'Content', valueType: PropertyValueType.Object, editorKind: PropertyEditorKind.StringMap },
+        ],
+    },
+    {
+        component: key(ComponentName.StatCard),
+        displayName: 'Stat card',
+        description: 'One key figure with its label, trend and the period the trend is compared to.',
+        properties: [
+            text('label', 'Label', 'Content', 'What the figure measures.', { constraints: { required: true } }),
+            number('value', 'Value', 'Data', 'The figure; bind it to a query result.'),
+            choice('format', 'Format', 'Appearance', formats, NumberFormat.Number),
+            text('currency', 'Currency', 'Appearance', 'The ISO 4217 code when the format is currency.'),
+            number('fractionDigits', 'Fraction digits', 'Appearance'),
+            number('change', 'Change', 'Data', 'How much the figure moved, as a percentage; bind it to a query result.'),
+            choice('goodDirection', 'Good direction', 'Appearance', { up: 'Up is good', down: 'Down is good' }, 'up', 'Which movement is good: a falling response time is.'),
+            text('comparison', 'Compared to', 'Content', 'The period the change is compared to, for example "last month".'),
+            ...standardStateProperties.filter(property => property.path !== 'label'),
+        ],
+    },
+    {
+        component: key(ComponentName.TrendChip),
+        displayName: 'Trend chip',
+        description: 'A change drawn as a direction, a magnitude and whether the movement is good.',
+        properties: [
+            number('change', 'Change', 'Data', 'The movement; bind it to a query result.'),
+            choice('format', 'Format', 'Appearance', formats, NumberFormat.Percent),
+            choice('goodDirection', 'Good direction', 'Appearance', { up: 'Up is good', down: 'Down is good' }, 'up'),
+            text('comparison', 'Compared to', 'Content'),
+            text('locale', 'Locale', 'Content'),
+            { path: 'strings', label: 'Text overrides', group: 'Content', valueType: PropertyValueType.Object, editorKind: PropertyEditorKind.StringMap },
+        ],
+    },
+    {
+        component: key(ComponentName.StatusChip),
+        displayName: 'Status chip',
+        description: 'A status shown as a semantic color, an icon and its text; the text is always shown.',
+        properties: [
+            text('status', 'Status', 'Data', 'The status text; bind it to a query result.', { constraints: { required: true } }),
+            choice('tone', 'Tone', 'Appearance', {
+                [StatusTone.Success]: 'Success', [StatusTone.Warning]: 'Warning', [StatusTone.Danger]: 'Danger', [StatusTone.Info]: 'Info', [StatusTone.Neutral]: 'Neutral',
+            }, StatusTone.Neutral, 'The tone picks the icon and the theme color.'),
+        ],
+    },
+];
+

package/foundation/foundationSamples.ts

@@ -0,0 +1,44 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ExternalComponent } from '@cratis/scene.model';
+import { componentRegistryKey } from '@cratis/scene.react';
+import { ComponentName } from '../ComponentName';
+import { defaultBlueprintName } from '../packageName';
+import { ComponentState } from './ComponentState';
+
+/**
+ * What a story or a specification feeds each foundation component to see it populated.
+ *
+ * These are design-time and test-time values, never part of what a component is: a component declares the shape of its data
+ * and a screen binds it to a query (spec SD1). The domain blueprints supply real preview data as sample-data packs; this is
+ * only enough to draw each component in each state.
+ */
+export interface FoundationSample {
+    /** The properties that make the component populated. */
+    properties: Record<string, unknown>;
+
+    /** Text that only appears when the component shows its data, so a specification can prove the no-permission state shows none of it. */
+    data: string[];
+
+    /** Whether the component shows data and so owns the five standard states; chips and the empty state themselves do not. */
+    stateful: boolean;
+}
+
+export const foundationSamples: Record<string, FoundationSample> = {
+    [ComponentName.EmptyState]: { properties: { headline: 'No invoices yet', hint: 'Invoices you create appear here.', icon: 'file', actionLabel: 'New invoice' }, data: [], stateful: false },
+    [ComponentName.StatCard]: { properties: { label: 'Open pipeline', value: 1234567, format: 'currency', currency: 'USD', change: 12.5, comparison: 'last month', locale: 'en-US' }, data: ['$1,234,567'], stateful: true },
+    [ComponentName.TrendChip]: { properties: { change: -3.2, goodDirection: 'down', comparison: 'last week', locale: 'en-US' }, data: [], stateful: false },
+    [ComponentName.StatusChip]: { properties: { status: 'Awaiting approval', tone: 'warning' }, data: [], stateful: false },
+};
+
+/** A scene element for a foundation component, populated with its sample unless properties are given, with the state forced when asked. */
+export function foundationElement(name: string, properties?: Record<string, unknown>, state?: ComponentState): ExternalComponent {
+    const sample = foundationSamples[name];
+    return {
+        id: `${name}-sample`,
+        componentName: componentRegistryKey(defaultBlueprintName, name),
+        properties: { ...(properties ?? sample?.properties ?? {}), ...(state === undefined ? {} : { state }) },
+        slots: {},
+    } as unknown as ExternalComponent;
+}

package/foundation/foundationStrings.ts

@@ -0,0 +1,112 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ExternalComponent } from '@cratis/scene.model';
+
+/**
+ * Every piece of text the foundation components say themselves, as opposed to text a screen author or a bound query
+ * supplies. Nothing is hard-coded in a component (spec Part B 1.5): a component reads its text from here, merged with
+ * the `strings` property of the element, so an application localizes by supplying a table - and a bound string
+ * (a `{name}` placeholder is replaced by the values the component passes) arrives the same way any other property does.
+ */
+export const foundationStrings = {
+    loading: 'Loading',
+    emptyHeadline: 'Nothing here yet',
+    emptyHint: 'There is nothing to show for now.',
+    errorHeadline: 'This could not be loaded',
+    errorHint: 'Something went wrong while loading. Try again in a moment.',
+    retry: 'Try again',
+    noPermissionHeadline: 'You do not have access',
+    noPermissionHint: 'Ask an administrator to grant you access to {subject}.',
+    noPermissionSubject: 'this content',
+    partialHeadline: 'Some parts could not be loaded',
+    partialHint: 'The unavailable parts are: {regions}.',
+    disabledNoPermission: 'You do not have permission to do this',
+    trendUp: 'up {value}',
+    trendDown: 'down {value}',
+    trendFlat: 'unchanged',
+    trendComparison: 'compared to {period}',
+    statusSuccess: 'Success',
+    statusWarning: 'Warning',
+    statusDanger: 'Problem',
+    statusInfo: 'Information',
+    statusNeutral: 'Status',
+    chartNoData: 'No data to chart',
+    chartDataTable: 'Chart data',
+    chartSeries: 'Series',
+    chartCategory: 'Category',
+    filterAdd: 'Add condition',
+    filterAddGroup: 'Add group',
+    filterRemove: 'Remove condition',
+    filterRemoveGroup: 'Remove group',
+    filterMatchAll: 'Match all (AND)',
+    filterMatchAny: 'Match any (OR)',
+    filterField: 'Field',
+    filterOperator: 'Operator',
+    filterValue: 'Value',
+    filterClear: 'Clear filters',
+    filterSummary: '{count} active filters',
+    columnsChoose: 'Columns',
+    columnsLocked: 'always shown',
+    columnsReset: 'Show all columns',
+    viewsLabel: 'Saved views',
+    viewsDefault: 'All items',
+    viewsSave: 'Save current view',
+    viewsManage: 'Manage views',
+    checklistProgress: '{done} of {total} complete',
+    checklistOwner: 'Owner',
+    checklistDue: 'Due',
+    activityEmpty: 'No activity yet',
+    avatarOverflow: '{count} more',
+    avatarPeople: '{count} people',
+    uploadDrop: 'Drop files here or',
+    uploadBrowse: 'Browse files',
+    uploadRemove: 'Remove {name}',
+    uploadTooLarge: '{name} is larger than {limit}',
+    uploadWrongType: '{name} is not an accepted file type',
+    uploadUploading: 'Uploading',
+    uploadDone: 'Uploaded',
+    uploadFailed: 'Upload failed',
+    approvalPending: 'Pending',
+    approvalCurrent: 'Awaiting decision',
+    approvalApproved: 'Approved',
+    approvalRejected: 'Rejected',
+    approvalSkipped: 'Skipped',
+    approvalChain: 'Approval chain',
+    orgExpand: 'Expand {name}',
+    orgCollapse: 'Collapse {name}',
+    orgReports: '{count} reports',
+    matrixAllowed: 'Allowed',
+    matrixDenied: 'Not allowed',
+    matrixGrant: 'Grant {permission} to {role}',
+    matrixReadOnly: 'Read-only',
+} as const;
+
+/** The name of one of the foundation strings. */
+export type FoundationStringName = keyof typeof foundationStrings;
+
+/** The text table a foundation component works with. */
+export type FoundationStrings = Record<FoundationStringName, string>;
+
+/**
+ * The foundation strings with the element's own `strings` property laid over them.
+ *
+ * Only string values of known names are taken, so a typo in an application's table falls back to the default text
+ * rather than rendering nothing.
+ */
+export function readFoundationStrings(element: ExternalComponent): FoundationStrings {
+    const supplied = element.properties.strings;
+    const result: FoundationStrings = { ...foundationStrings };
+    if (typeof supplied !== 'object' || supplied === null || Array.isArray(supplied)) return result;
+
+    for (const [name, value] of Object.entries(supplied as Record<string, unknown>)) {
+        if (name in foundationStrings && typeof value === 'string') result[name as FoundationStringName] = value;
+    }
+
+    return result;
+}
+
+/** Replaces each `{name}` in a string with the value of the same name, leaving an unknown placeholder visible rather than blank. */
+export function formatText(text: string, values: Record<string, string | number> = {}): string {
+    return text.replace(/\{(\w+)\}/g, (placeholder, name: string) => (name in values ? String(values[name]) : placeholder));
+}

package/foundation/index.ts

@@ -0,0 +1,18 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+export * from './foundationStrings';
+export * from './ComponentState';
+export * from './PermissionRule';
+export * from './formatting';
+export * from './FoundationIcon';
+export * from './ActionButton';
+export * from './StateFrame';
+export * from './EmptyState';
+export * from './TrendChip';
+export * from './StatusChip';
+export * from './StatCard';
+export * from './foundationDescriptors';
+export * from './foundationComponentMetadata';
+export * from './foundationSamples';
+export * from './FoundationStates';

package/index.ts

@@ -7,6 +7,7 @@ export * from './configuration';
 export * from './layouts';
 export * from './gallery';
 export * from './shell';
+export * from './foundation';
 export * from './themes';
 export * from './defaultBlueprintComponents';
 export * from './defaultBlueprint';

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cratis/scene.blueprint.default",
-    "version": "4.31.0",
+    "version": "4.32.0",
     "description": "The default blueprint: application shell layouts, the screen and dialog templates that go inside them, the components that fill their slots, and two themes.",
     "keywords": [
         "cratis",
@@ -48,21 +48,22 @@
         "lint": "yarn g:lint",
         "lint:ci": "yarn g:lint:ci",
         "test": "yarn g:test",
+        "test:browser": "yarn g:test --config ./vitest.browser.config.mts",
         "ci": "yarn g:ci",
         "up": "yarn g:up",
         "dev": "storybook dev -p 6006",
         "build-storybook": "storybook build"
     },
     "dependencies": {
-        "@cratis/scene.engine": "4.31.0",
-        "@cratis/scene.model": "4.31.0",
-        "@cratis/scene.react": "4.31.0"
+        "@cratis/scene.engine": "4.32.0",
+        "@cratis/scene.model": "4.32.0",
+        "@cratis/scene.react": "4.32.0"
     },
     "devDependencies": {
-        "@cratis/scene.engine": "4.31.0",
-        "@cratis/scene.model": "4.31.0",
-        "@cratis/scene.primereact": "4.31.0",
-        "@cratis/scene.react": "4.31.0",
+        "@cratis/scene.engine": "4.32.0",
+        "@cratis/scene.model": "4.32.0",
+        "@cratis/scene.primereact": "4.32.0",
+        "@cratis/scene.react": "4.32.0",
         "@primereact/core": "11.2.0",
         "@primereact/headless": "11.2.0",
         "@primeuix/themes": "^3.0.1",

package/shell/layout.css

@@ -1059,3 +1059,244 @@
     align-items: center;
     gap: 0.5rem;
 }
+
+/*
+ * FOUNDATION COMPONENTS
+ * ---------------------
+ * The stat card, chips, empty state and the other composites of the foundation set (spec Part B 4). They may be placed
+ * anywhere - inside the shell, in a dialog, on a page with no shell at all - so they alias the Scene tokens themselves instead of
+ * relying on the `--layout-*` block above, which only exists under the shell. Colors and radii come from tokens only; the
+ * spacing is one scale (`--foundation-space-*`). Direction-sensitive rules use logical properties so right-to-left needs no
+ * second stylesheet.
+ */
+.foundation {
+    --foundation-text: var(--scene-text-color, #1f2430);
+    --foundation-muted: var(--scene-text-muted-color, #5b6472);
+    --foundation-surface: var(--scene-surface-card, #ffffff);
+    --foundation-background: var(--scene-surface-background, #f4f5f7);
+    --foundation-border: var(--scene-surface-border, #d5d9df);
+    --foundation-hover: var(--scene-surface-hover, #eceef1);
+    --foundation-primary: var(--scene-primary-color, #4f46e5);
+    --foundation-primary-contrast: var(--scene-primary-contrast-color, #ffffff);
+    --foundation-highlight: var(--scene-highlight-background, #eef2ff);
+    --foundation-highlight-text: var(--scene-highlight-color, #3730a3);
+    --foundation-radius: var(--scene-content-border-radius, 0.5rem);
+    --foundation-focus: var(--scene-focus-ring, 0 0 0 2px rgb(79 70 229 / 0.55));
+    --foundation-success: var(--scene-status-success-color, #166534);
+    --foundation-success-background: var(--scene-status-success-background, #dcfce7);
+    --foundation-warning: var(--scene-status-warning-color, #854d0e);
+    --foundation-warning-background: var(--scene-status-warning-background, #fef3c7);
+    --foundation-danger: var(--scene-status-danger-color, #991b1b);
+    --foundation-danger-background: var(--scene-status-danger-background, #fee2e2);
+    --foundation-info: var(--scene-status-info-color, #1e40af);
+    --foundation-info-background: var(--scene-status-info-background, #dbeafe);
+    --foundation-space-1: 0.25rem;
+    --foundation-space-2: 0.5rem;
+    --foundation-space-3: 0.75rem;
+    --foundation-space-4: 1rem;
+    --foundation-space-6: 1.5rem;
+    --foundation-row-height: 2.75rem;
+
+    box-sizing: border-box;
+    color: var(--foundation-text);
+    font-family: inherit;
+}
+
+.foundation[data-density='compact'] {
+    --foundation-row-height: 2rem;
+    --foundation-space-3: 0.5rem;
+}
+
+.foundation *,
+.foundation *::before,
+.foundation *::after {
+    box-sizing: border-box;
+}
+
+.foundation-visually-hidden {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+}
+
+.foundation-icon {
+    flex: none;
+    inline-size: 1em;
+    block-size: 1em;
+}
+
+.foundation :focus-visible {
+    outline: 2px solid var(--foundation-primary);
+    outline-offset: 2px;
+    box-shadow: var(--foundation-focus);
+}
+
+.foundation-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--foundation-space-2);
+    min-block-size: 2.25rem;
+    padding-inline: var(--foundation-space-4);
+    border: 1px solid var(--foundation-primary);
+    border-radius: var(--foundation-radius);
+    background: var(--foundation-primary);
+    color: var(--foundation-primary-contrast);
+    font: inherit;
+    font-weight: 600;
+    cursor: pointer;
+}
+
+.foundation-button[data-emphasis='secondary'] {
+    background: var(--foundation-surface);
+    color: var(--foundation-primary);
+}
+
+.foundation-button[data-emphasis='quiet'] {
+    border-color: transparent;
+    background: transparent;
+    color: var(--foundation-primary);
+}
+
+.foundation-button:hover:not([aria-disabled='true']) {
+    filter: brightness(0.95);
+}
+
+.foundation-button[aria-disabled='true'] {
+    opacity: 0.6;
+    cursor: not-allowed;
+}
+
+/* Standard states: skeleton, empty, message (error / no permission / partial). */
+.foundation-skeleton {
+    display: flex;
+    flex-direction: column;
+    gap: var(--foundation-space-3);
+    padding: var(--foundation-space-4);
+}
+
+.foundation-skeleton-block {
+    display: block;
+    block-size: 0.875rem;
+    border-radius: var(--foundation-radius);
+    background: linear-gradient(90deg, var(--foundation-hover) 25%, var(--foundation-border) 50%, var(--foundation-hover) 75%);
+    background-size: 200% 100%;
+    animation: foundation-shimmer 1.4s linear infinite;
+}
+
+@keyframes foundation-shimmer {
+    from { background-position: 200% 0; }
+    to { background-position: -200% 0; }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .foundation-skeleton-block { animation: none; }
+}
+
+.foundation-empty {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--foundation-space-2);
+    padding: var(--foundation-space-6);
+    text-align: center;
+}
+
+.foundation-empty-icon {
+    display: inline-flex;
+    padding: var(--foundation-space-3);
+    border-radius: 50%;
+    background: var(--foundation-highlight);
+    color: var(--foundation-highlight-text);
+    font-size: 1.5rem;
+}
+
+.foundation-empty-hint {
+    color: var(--foundation-muted);
+    max-inline-size: 36ch;
+}
+
+.foundation-message {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--foundation-space-3);
+    padding: var(--foundation-space-3) var(--foundation-space-4);
+    border: 1px solid var(--foundation-border);
+    border-radius: var(--foundation-radius);
+    background: var(--foundation-surface);
+}
+
+.foundation-message[data-tone='danger'] { border-color: var(--foundation-danger); color: var(--foundation-danger); background: var(--foundation-danger-background); }
+.foundation-message[data-tone='warning'] { border-color: var(--foundation-warning); color: var(--foundation-warning); background: var(--foundation-warning-background); }
+
+.foundation-message-text {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    gap: var(--foundation-space-1);
+}
+
+/* Chips: status and trend. Tone is color plus icon plus text, never color alone. */
+.foundation-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--foundation-space-1);
+    padding: var(--foundation-space-1) var(--foundation-space-2);
+    border: 1px solid currentColor;
+    border-radius: 999px;
+    font-size: 0.875rem;
+    font-weight: 600;
+    line-height: 1.5;
+    white-space: nowrap;
+}
+
+.foundation-chip[data-tone='success'] { color: var(--foundation-success); background: var(--foundation-success-background); }
+.foundation-chip[data-tone='warning'] { color: var(--foundation-warning); background: var(--foundation-warning-background); }
+.foundation-chip[data-tone='danger'] { color: var(--foundation-danger); background: var(--foundation-danger-background); }
+.foundation-chip[data-tone='info'] { color: var(--foundation-info); background: var(--foundation-info-background); }
+.foundation-chip[data-tone='neutral'] { color: var(--foundation-muted); background: var(--foundation-hover); }
+
+.foundation-trend-comparison {
+    font-weight: 400;
+}
+
+.foundation-trend-chip { display: inline-flex; }
+
+/* Stat card. */
+.foundation-stat-card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--foundation-space-2);
+    min-inline-size: 10rem;
+    padding: var(--foundation-space-4);
+    border: 1px solid var(--foundation-border);
+    border-radius: var(--foundation-radius);
+    background: var(--foundation-surface);
+}
+
+.foundation-stat-label {
+    margin: 0;
+    color: var(--foundation-muted);
+    font-size: 0.875rem;
+    font-weight: 600;
+}
+
+.foundation-stat-value {
+    margin: 0;
+    font-size: 2rem;
+    font-weight: 700;
+    line-height: 1.2;
+    font-variant-numeric: tabular-nums;
+}
+
+.foundation-empty-state {
+    border: 1px dashed var(--foundation-border);
+    border-radius: var(--foundation-radius);
+    background: var(--foundation-surface);
+}

package/themes/dark.ts

@@ -34,5 +34,13 @@ export const darkTheme: Theme = {
         'highlight.color': '#c7ccff',
         'content.borderRadius': '0.5rem',
         'focus.ring': '0 0 0 2px rgb(129 140 248 / 0.45)',
+        'status.successColor': '#86efac',
+        'status.successBackground': '#14301f',
+        'status.warningColor': '#fcd34d',
+        'status.warningBackground': '#33290f',
+        'status.dangerColor': '#fca5a5',
+        'status.dangerBackground': '#3a1616',
+        'status.infoColor': '#93c5fd',
+        'status.infoBackground': '#162a4a',
     },
 };

package/themes/light.ts

@@ -32,10 +32,18 @@ export const lightTheme: Theme = {
         'surface.hover': '#eceef1',
         'surface.overlay': '#ffffff',
         'text.color': '#1f2430',
-        'text.mutedColor': '#6b7280',
+        'text.mutedColor': '#5b6472',
         'highlight.background': '#eef2ff',
         'highlight.color': '#3730a3',
         'content.borderRadius': '0.5rem',
         'focus.ring': '0 0 0 2px rgb(79 70 229 / 0.4)',
+        'status.successColor': '#166534',
+        'status.successBackground': '#dcfce7',
+        'status.warningColor': '#854d0e',
+        'status.warningBackground': '#fef3c7',
+        'status.dangerColor': '#991b1b',
+        'status.dangerBackground': '#fee2e2',
+        'status.infoColor': '#1e40af',
+        'status.infoBackground': '#dbeafe',
     },
 };