@cratis/scene.blueprint.default 4.35.0 → 4.37.0

package/foundation/activityModel.ts

@@ -0,0 +1,65 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/** What kind of thing happened, which decides the icon and the word that tells it apart without color. */
+export enum ActivityKind {
+    Comment = 'comment',
+    Change = 'change',
+    Status = 'status',
+    System = 'system',
+}
+
+/** One thing that happened to a record. */
+export interface ActivityEntry {
+    id: string;
+    actor: string;
+    action: string;
+    kind: ActivityKind;
+    at: string;
+    body?: string;
+}
+
+/** The entries of one day, in the order the feed shows them. */
+export interface ActivityDay {
+    day: string;
+    entries: ActivityEntry[];
+}
+
+/** Reads entries out of a property value, dropping those without an id or a time that parses. */
+export function readActivity(value: unknown): ActivityEntry[] {
+    if (!Array.isArray(value)) return [];
+
+    return value.flatMap((entry): ActivityEntry[] => {
+        if (typeof entry !== 'object' || entry === null || Array.isArray(entry)) return [];
+        const { id, actor, action, kind, at, body } = entry as Record<string, unknown>;
+        if (typeof id !== 'string' || typeof at !== 'string' || Number.isNaN(new Date(at).getTime())) return [];
+
+        return [{
+            id, at,
+            actor: typeof actor === 'string' ? actor : '',
+            action: typeof action === 'string' ? action : '',
+            kind: (Object.values(ActivityKind) as string[]).includes(kind as string) ? (kind as ActivityKind) : ActivityKind.System,
+            ...(typeof body === 'string' && body.length > 0 ? { body } : {}),
+        }];
+    });
+}
+
+/** The calendar day of an instant in a time zone, as `YYYY-MM-DD`. */
+export function dayOf(at: string, timeZone?: string): string {
+    return new Intl.DateTimeFormat('en-CA', { timeZone, year: 'numeric', month: '2-digit', day: '2-digit' }).format(new Date(at));
+}
+
+/** Sorts the entries by time (newest first unless `ascending`) and groups them by calendar day, so a long feed has headings to scan by. */
+export function groupByDay(entries: ActivityEntry[], ascending = false, timeZone?: string): ActivityDay[] {
+    const sorted = [...entries].sort((first, second) => (new Date(first.at).getTime() - new Date(second.at).getTime()) * (ascending ? 1 : -1));
+    const days: ActivityDay[] = [];
+
+    for (const entry of sorted) {
+        const day = dayOf(entry.at, timeZone);
+        const last = days[days.length - 1];
+        if (last?.day === day) last.entries.push(entry);
+        else days.push({ day, entries: [entry] });
+    }
+
+    return days;
+}

package/foundation/approvalModel.ts

@@ -0,0 +1,88 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/** Where one step of an approval chain stands. */
+export enum ApprovalState {
+    Pending = 'pending',
+    Current = 'current',
+    Approved = 'approved',
+    Rejected = 'rejected',
+    Skipped = 'skipped',
+}
+
+/** One step of an approval chain: who decides, and what they decided. */
+export interface ApprovalStep {
+    label: string;
+    approver?: string;
+    state: ApprovalState;
+    at?: string;
+    comment?: string;
+}
+
+/** A step as it is drawn, after the chain's own rules are applied. */
+export interface EffectiveStep extends ApprovalStep {
+    /** True when an earlier rejection stopped the chain before this step was reached. */
+    notReached: boolean;
+}
+
+/** How the chain as a whole stands. */
+export enum ChainOutcome {
+    /** Every step approved. */
+    Approved = 'approved',
+
+    /** A step rejected: the chain stops there. */
+    Rejected = 'rejected',
+
+    /** At least one step is decided and the rest are waiting. */
+    InProgress = 'inProgress',
+
+    /** Nothing decided yet. */
+    Pending = 'pending',
+}
+
+/** Reads steps out of a property value, dropping entries without a label; an unknown state is pending. */
+export function readSteps(value: unknown): ApprovalStep[] {
+    if (!Array.isArray(value)) return [];
+
+    return value.flatMap((entry): ApprovalStep[] => {
+        if (typeof entry !== 'object' || entry === null || Array.isArray(entry)) return [];
+        const { label, approver, state, at, comment } = entry as Record<string, unknown>;
+        if (typeof label !== 'string' || label.length === 0) return [];
+
+        return [{
+            label,
+            state: (Object.values(ApprovalState) as string[]).includes(state as string) ? (state as ApprovalState) : ApprovalState.Pending,
+            ...(typeof approver === 'string' ? { approver } : {}),
+            ...(typeof at === 'string' ? { at } : {}),
+            ...(typeof comment === 'string' && comment.length > 0 ? { comment } : {}),
+        }];
+    });
+}
+
+/**
+ * Applies the chain's rules to the steps as written.
+ *
+ * A rejection stops the chain: every step after the first rejected one has not been reached, so it is drawn skipped however it was written.
+ * With no step marked current and no rejection, the first step that is not yet decided is the current one - the person the chain is waiting
+ * for - so a chain written only as approved and pending steps still says whose turn it is. Only one step is ever current.
+ */
+export function effectiveSteps(steps: ApprovalStep[]): EffectiveStep[] {
+    const rejected = steps.findIndex(step => step.state === ApprovalState.Rejected);
+    const explicitCurrent = steps.findIndex(step => step.state === ApprovalState.Current);
+    const waiting = rejected >= 0 ? -1 : explicitCurrent >= 0 ? explicitCurrent : steps.findIndex(step => step.state === ApprovalState.Pending);
+
+    return steps.map((step, index) => {
+        if (rejected >= 0 && index > rejected) return { ...step, state: ApprovalState.Skipped, notReached: true };
+        if (step.state === ApprovalState.Current && index !== waiting) return { ...step, state: ApprovalState.Pending, notReached: false };
+        if (index === waiting && step.state === ApprovalState.Pending) return { ...step, state: ApprovalState.Current, notReached: false };
+        return { ...step, notReached: false };
+    });
+}
+
+/** The state of the chain as a whole. A skipped step counts as decided, because it was never going to be asked. */
+export function chainOutcome(steps: ApprovalStep[]): ChainOutcome {
+    const effective = effectiveSteps(steps);
+    if (effective.some(step => step.state === ApprovalState.Rejected)) return ChainOutcome.Rejected;
+    if (effective.length > 0 && effective.every(step => step.state === ApprovalState.Approved || step.state === ApprovalState.Skipped)) return ChainOutcome.Approved;
+    return effective.some(step => step.state === ApprovalState.Approved) ? ChainOutcome.InProgress : ChainOutcome.Pending;
+}

package/foundation/avatarModel.ts

@@ -0,0 +1,36 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/** A person shown as an avatar. */
+export interface AvatarPerson {
+    name: string;
+    imageUrl?: string;
+}
+
+/** Reads people out of a property value, dropping entries without a name. */
+export function readPeople(value: unknown): AvatarPerson[] {
+    if (!Array.isArray(value)) return [];
+
+    return value.flatMap((entry): AvatarPerson[] => {
+        if (typeof entry !== 'object' || entry === null || Array.isArray(entry)) return [];
+        const { name, imageUrl } = entry as Record<string, unknown>;
+        if (typeof name !== 'string' || name.trim().length === 0) return [];
+        return [{ name: name.trim(), ...(typeof imageUrl === 'string' && imageUrl.length > 0 ? { imageUrl } : {}) }];
+    });
+}
+
+/** The initials of a name: the first letter of the first and last words, so "Ada King Lovelace" is AL and "Ada" is A. */
+export function initialsOf(name: string): string {
+    const words = name.split(/\s+/).filter(word => word.length > 0);
+    if (words.length === 0) return '';
+
+    const first = Array.from(words[0])[0] ?? '';
+    const last = words.length > 1 ? Array.from(words[words.length - 1])[0] ?? '' : '';
+    return `${first}${last}`.toLocaleUpperCase();
+}
+
+/** Splits people into those shown and how many are folded into the "+N" chip; at least one is always shown when there are any. */
+export function visiblePeople(people: AvatarPerson[], maximum: number): { shown: AvatarPerson[]; hidden: number } {
+    const limit = Math.max(1, Math.floor(maximum));
+    return people.length <= limit ? { shown: people, hidden: 0 } : { shown: people.slice(0, limit), hidden: people.length - limit };
+}

package/foundation/checklistModel.ts

@@ -0,0 +1,62 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/** One task of a checklist. */
+export interface ChecklistItem {
+    id: string;
+    label: string;
+    owner?: string;
+    due?: string;
+    done: boolean;
+}
+
+/** A titled group of tasks. */
+export interface ChecklistGroup {
+    title: string;
+    items: ChecklistItem[];
+}
+
+/** Reads checklist groups out of a property value; a task needs an id and a label, and is open unless it says it is done. */
+export function readChecklist(value: unknown): ChecklistGroup[] {
+    if (!Array.isArray(value)) return [];
+
+    return value.flatMap((entry): ChecklistGroup[] => {
+        if (typeof entry !== 'object' || entry === null || Array.isArray(entry)) return [];
+        const { title, items } = entry as Record<string, unknown>;
+        if (typeof title !== 'string' || !Array.isArray(items)) return [];
+
+        return [{
+            title,
+            items: items.flatMap((item): ChecklistItem[] => {
+                if (typeof item !== 'object' || item === null || Array.isArray(item)) return [];
+                const { id, label, owner, due, done } = item as Record<string, unknown>;
+                if (typeof id !== 'string' || typeof label !== 'string') return [];
+                return [{ id, label, done: done === true, ...(typeof owner === 'string' ? { owner } : {}), ...(typeof due === 'string' ? { due } : {}) }];
+            }),
+        }];
+    });
+}
+
+/** How many of a group's tasks are done. */
+export const completed = (group: ChecklistGroup): number => group.items.filter(item => item.done).length;
+
+/** Whether an open task is past its due date, today counting as not yet late. */
+export function isOverdue(item: ChecklistItem, now: Date): boolean {
+    if (item.done || item.due === undefined) return false;
+
+    const due = new Date(item.due);
+    if (Number.isNaN(due.getTime())) return false;
+
+    const endOfDue = new Date(due);
+    endOfDue.setUTCHours(23, 59, 59, 999);
+    return endOfDue.getTime() < now.getTime();
+}
+
+/** Marks one task done or open, leaving every other as it was. */
+export const toggleTask = (groups: ChecklistGroup[], id: string): ChecklistGroup[] =>
+    groups.map(group => (group.items.some(item => item.id === id)
+        ? { ...group, items: group.items.map(item => (item.id === id ? { ...item, done: !item.done } : item)) }
+        : group));
+
+/** The ids of every done task: what the checklist publishes. */
+export const doneTaskIds = (groups: ChecklistGroup[]): string[] => groups.flatMap(group => group.items.filter(item => item.done).map(item => item.id));

package/foundation/formatting.ts

@@ -67,3 +67,12 @@ export function formatDate(value: unknown, locale: string, withTime = false): st
         return date.toISOString();
     }
 }
+
+/** Formats a calendar day (`YYYY-MM-DD`) for a locale, as that day and never shifted by the reader's time zone. */
+export function formatDay(day: string, locale: string): string {
+    try {
+        return new Intl.DateTimeFormat(locale, { dateStyle: 'full', timeZone: 'UTC' }).format(new Date(`${day}T12:00:00Z`));
+    } catch {
+        return day;
+    }
+}

package/foundation/foundationComponentMetadata.ts

@@ -18,4 +18,11 @@ export const foundationComponentMetadata: Record<string, ComponentMetadata> = {
     [ComponentName.FilterBuilder]: m('Filter builder', ComponentCategory.Input, 'list-filter', ['filter', 'query', 'conditions', 'and or', 'search']),
     [ComponentName.ColumnChooser]: m('Column chooser', ComponentCategory.Actions, 'columns-3', ['columns', 'fields', 'show hide', 'table']),
     [ComponentName.SavedViewsMenu]: m('Saved views menu', ComponentCategory.Actions, 'bookmark', ['views', 'presets', 'saved filters']),
+    [ComponentName.ChecklistSection]: m('Checklist', ComponentCategory.DataDisplay, 'list-checks', ['tasks', 'todo', 'onboarding', 'progress', 'steps']),
+    [ComponentName.ActivityFeed]: m('Activity feed', ComponentCategory.DataDisplay, 'activity', ['timeline', 'history', 'comments', 'audit', 'log']),
+    [ComponentName.AvatarStack]: m('Avatar stack', ComponentCategory.DataDisplay, 'users', ['people', 'members', 'assignees', 'team']),
+    [ComponentName.FileUploader]: m('File uploader', ComponentCategory.Input, 'upload', ['attachments', 'files', 'drop zone', 'documents']),
+    [ComponentName.ApprovalChainStepper]: m('Approval chain', ComponentCategory.Navigation, 'workflow', ['approvals', 'steps', 'workflow', 'sign off', 'stepper']),
+    [ComponentName.OrgTree]: m('Org tree', ComponentCategory.DataDisplay, 'network', ['organization', 'hierarchy', 'org chart', 'reports to', 'tree']),
+    [ComponentName.PermissionMatrix]: m('Permission matrix', ComponentCategory.Input, 'shield-check', ['roles', 'permissions', 'access', 'grants', 'rbac']),
 };

package/foundation/foundationDescriptors.ts

@@ -5,6 +5,8 @@ import { BindingSourceKind, ComponentDescriptor, PropertyDescriptor, PropertyEdi
 import { componentRegistryKey, valueOutputProperty } from '@cratis/scene.react';
 import { ComponentName } from '../ComponentName';
 import { defaultBlueprintName } from '../packageName';
+import { ActivityKind } from './activityModel';
+import { ApprovalState } from './approvalModel';
 import { ChartKind } from './chartGeometry';
 import { ComponentState } from './ComponentState';
 import { FilterFieldType } from './filterModel';
@@ -200,5 +202,156 @@ export const foundationDescriptors: ComponentDescriptor[] = [
             ...standardStateProperties,
         ],
     },
+    {
+        component: key(ComponentName.ChecklistSection),
+        displayName: 'Checklist',
+        description: 'Sections of tasks with an owner and due date each and a progress bar per section. Publishes the ids of the done tasks as the value output.',
+        properties: [
+            {
+                ...list('sections', 'Sections', 'Data', 'Section', [
+                    text('title', 'Title', 'Content', undefined, { constraints: { required: true } }),
+                    list('items', 'Tasks', 'Data', 'Task', [
+                        text('id', 'Id', 'Data', undefined, { constraints: { required: true } }),
+                        text('label', 'Task', 'Content', undefined, { constraints: { required: true } }),
+                        text('owner', 'Owner', 'Data'),
+                        text('due', 'Due date', 'Data', 'An ISO 8601 date.'),
+                        flag('done', 'Done', 'Data'),
+                    ]),
+                ], 'The groups of tasks.'),
+                acceptedBindingKinds: bindable,
+            },
+            text('today', 'Today', 'Content', 'The date overdue is judged against; empty is the current date.'),
+            rule('editPermission', 'Edit permission', 'Enabled lets the user tick tasks; otherwise they are shown read-only.'),
+            valueOutputProperty(PropertyValueType.Json, 'The ids of the done tasks, published as the user ticks them.'),
+            ...standardStateProperties,
+        ],
+    },
+    {
+        component: key(ComponentName.ActivityFeed),
+        displayName: 'Activity feed',
+        description: 'What happened to a record, grouped by day. Content is supplied by the application; this lays it out.',
+        properties: [
+            {
+                ...list('entries', 'Entries', 'Data', 'Entry', [
+                    text('id', 'Id', 'Data', undefined, { constraints: { required: true } }),
+                    text('actor', 'Who', 'Data'),
+                    text('action', 'What', 'Data'),
+                    choice('kind', 'Kind', 'Data', {
+                        [ActivityKind.Comment]: 'Comment', [ActivityKind.Change]: 'Change', [ActivityKind.Status]: 'Status', [ActivityKind.System]: 'System',
+                    }, ActivityKind.System),
+                    text('at', 'When', 'Data', 'An ISO 8601 date and time.', { constraints: { required: true } }),
+                    text('body', 'Text', 'Data', 'A comment\'s text or the detail of a change.', { editorOptions: { multiline: true } }),
+                ], 'What happened.'),
+                acceptedBindingKinds: bindable,
+            },
+            choice('order', 'Order', 'Appearance', { descending: 'Newest first', ascending: 'Oldest first' }, 'descending'),
+            text('timeZone', 'Time zone', 'Content', 'The IANA zone days are cut in; empty is the reader\'s.'),
+            ...standardStateProperties,
+        ],
+    },
+    {
+        component: key(ComponentName.AvatarStack),
+        displayName: 'Avatar stack',
+        description: 'Overlapping avatars for the people on a record, with a "+N" chip for the rest.',
+        properties: [
+            {
+                ...list('people', 'People', 'Data', 'Person', [
+                    text('name', 'Name', 'Data', undefined, { constraints: { required: true } }),
+                    text('imageUrl', 'Picture', 'Data', 'Without one the initials are shown.'),
+                ], 'Who is shown.'),
+                acceptedBindingKinds: bindable,
+            },
+            number('max', 'Shown at most', 'Appearance', 'How many avatars before the rest fold into "+N".', { default: 4, constraints: { minimum: 1, integer: true } }),
+            choice('size', 'Size', 'Appearance', { small: 'Small', medium: 'Medium' }, 'medium'),
+            ...standardStateProperties,
+        ],
+    },
+    {
+        component: key(ComponentName.FileUploader),
+        displayName: 'File uploader',
+        description: 'A drop zone and a button to choose files, checked against type and size before anything is sent. Publishes the selection as the value output.',
+        properties: [
+            text('accept', 'Accepted types', 'Behavior', 'Extensions, MIME types and wildcards separated by commas, for example ".pdf, image/*".'),
+            number('maxSizeMb', 'Largest file (MB)', 'Behavior', undefined, { constraints: { minimum: 0 } }),
+            flag('multiple', 'Several files', 'Behavior', undefined, { default: true }),
+            text('serverUrl', 'Upload address', 'Behavior', 'Handed to the host\'s upload handler.'),
+            rule('actionPermission', 'Upload permission', 'Whether files can be chosen or dropped, refused with a reason, or the control is hidden.'),
+            valueOutputProperty(PropertyValueType.Json, 'The files chosen - name, size, type and status - published as they change.'),
+            ...standardStateProperties.filter(property => property.path !== 'actionPermission'),
+        ],
+    },
+    {
+        component: key(ComponentName.ApprovalChainStepper),
+        displayName: 'Approval chain',
+        description: 'The steps a request goes through, who decides each and where it stands. A rejection stops the chain; the first undecided step is the current one.',
+        properties: [
+            {
+                ...list('steps', 'Steps', 'Data', 'Step', [
+                    text('label', 'Step', 'Content', undefined, { constraints: { required: true } }),
+                    text('approver', 'Approver', 'Data'),
+                    choice('state', 'State', 'Data', {
+                        [ApprovalState.Pending]: 'Pending', [ApprovalState.Current]: 'Awaiting decision', [ApprovalState.Approved]: 'Approved', [ApprovalState.Rejected]: 'Rejected', [ApprovalState.Skipped]: 'Skipped',
+                    }, ApprovalState.Pending),
+                    text('at', 'Decided at', 'Data', 'An ISO 8601 date and time.'),
+                    text('comment', 'Comment', 'Data'),
+                ], 'The approvers in order.'),
+                acceptedBindingKinds: bindable,
+            },
+            choice('orientation', 'Orientation', 'Appearance', { horizontal: 'Horizontal', vertical: 'Vertical' }, 'horizontal', 'A phone always reads vertically.'),
+            ...standardStateProperties,
+        ],
+    },
+    {
+        component: key(ComponentName.OrgTree),
+        displayName: 'Org tree',
+        description: 'An organization as an expandable tree built from rows of who reports to whom. Publishes the selected id as the value output.',
+        properties: [
+            {
+                ...list('nodes', 'People', 'Data', 'Person', [
+                    text('id', 'Id', 'Data', undefined, { constraints: { required: true }, editorKind: PropertyEditorKind.Field }),
+                    text('label', 'Name', 'Data', undefined, { editorKind: PropertyEditorKind.Field }),
+                    text('title', 'Title', 'Data', undefined, { editorKind: PropertyEditorKind.Field }),
+                    text('parentId', 'Reports to', 'Data', 'The id of the person above; empty for the top.', { editorKind: PropertyEditorKind.Field }),
+                ], 'One row per person or unit.'),
+                acceptedBindingKinds: bindable,
+            },
+            number('expandedDepth', 'Levels open at first', 'Appearance', undefined, { default: 2, constraints: { minimum: 1, integer: true } }),
+            text('selected', 'Selected', 'Data', 'The id of the selected node; bind it to start from one.'),
+            valueOutputProperty(PropertyValueType.String, 'The id of the selected node, published as the user selects.'),
+            ...standardStateProperties,
+        ],
+    },
+    {
+        component: key(ComponentName.PermissionMatrix),
+        displayName: 'Permission matrix',
+        description: 'Roles across, permissions down, a checkbox where they meet. Publishes the grants as the value output.',
+        properties: [
+            {
+                ...list('roles', 'Roles', 'Data', 'Role', [
+                    text('id', 'Id', 'Data', undefined, { constraints: { required: true } }),
+                    text('label', 'Name', 'Data'),
+                ], 'The columns.'),
+                acceptedBindingKinds: bindable,
+            },
+            {
+                ...list('permissions', 'Permissions', 'Data', 'Permission', [
+                    text('id', 'Id', 'Data', undefined, { constraints: { required: true } }),
+                    text('label', 'Name', 'Data'),
+                    text('group', 'Group', 'Data', 'A heading the permission is listed under.'),
+                ], 'The rows.'),
+                acceptedBindingKinds: bindable,
+            },
+            {
+                ...list('grants', 'Grants', 'Data', 'Grant', [
+                    text('role', 'Role', 'Data', 'The id of a role.', { constraints: { required: true } }),
+                    text('permission', 'Permission', 'Data', 'The id of a permission.', { constraints: { required: true } }),
+                ], 'What each role holds.'),
+                acceptedBindingKinds: bindable,
+            },
+            rule('editPermission', 'Edit permission', 'Enabled lets the user change grants; otherwise the matrix is read-only.'),
+            valueOutputProperty(PropertyValueType.Json, 'The grants as the user has changed them: rows of role and permission, published as they change.'),
+            ...standardStateProperties,
+        ],
+    },
 ];
 

package/foundation/foundationSamples.ts

@@ -49,6 +49,65 @@ export const foundationSamples: Record<string, FoundationSample> = {
         properties: { views: [{ id: 'all', label: 'All leads' }, { id: 'mine', label: 'Mine' }, { id: 'overdue', label: 'Overdue' }], activeView: 'mine' },
         data: ['Mine'], stateful: true,
     },
+    [ComponentName.ChecklistSection]: {
+        properties: {
+            today: '2026-03-10', locale: 'en-US',
+            sections: [
+                { title: 'Before day one', items: [{ id: 't1', label: 'Send the contract', owner: 'Grace', due: '2026-03-01', done: true }, { id: 't2', label: 'Order a laptop', owner: 'Linus', due: '2026-03-05' }] },
+                { title: 'First week', items: [{ id: 't3', label: 'Security training', owner: 'Ada', due: '2026-03-20' }] },
+            ],
+        },
+        data: ['Send the contract', '1 of 2 complete'], stateful: true,
+    },
+    [ComponentName.ActivityFeed]: {
+        properties: {
+            locale: 'en-US', timeZone: 'UTC',
+            entries: [
+                { id: 'a1', actor: 'Ada Lovelace', action: 'commented', kind: 'comment', at: '2026-03-10T09:30:00Z', body: 'Sent the revised quote.' },
+                { id: 'a2', actor: 'Grace Hopper', action: 'changed the owner to Linus', kind: 'change', at: '2026-03-09T16:00:00Z' },
+                { id: 'a3', actor: 'System', action: 'marked the deal as qualified', kind: 'status', at: '2026-03-09T08:00:00Z' },
+            ],
+        },
+        data: ['Sent the revised quote.'], stateful: true,
+    },
+    [ComponentName.AvatarStack]: {
+        properties: { people: [{ name: 'Ada Lovelace' }, { name: 'Grace Hopper' }, { name: 'Linus Torvalds' }, { name: 'Margaret Hamilton' }, { name: 'Alan Turing' }, { name: 'Barbara Liskov' }], max: 4 },
+        data: ['+2'], stateful: true,
+    },
+    [ComponentName.FileUploader]: {
+        properties: { accept: '.pdf, image/*', maxSizeMb: 10, multiple: true },
+        data: [], stateful: true,
+    },
+    [ComponentName.ApprovalChainStepper]: {
+        properties: {
+            locale: 'en-US',
+            steps: [
+                { label: 'Team lead', approver: 'Grace Hopper', state: 'approved', at: '2026-03-09T10:00:00Z', comment: 'Looks fine.' },
+                { label: 'Finance', approver: 'Linus Torvalds', state: 'current' },
+                { label: 'Director', approver: 'Ada Lovelace', state: 'pending' },
+            ],
+        },
+        data: ['Grace Hopper', 'Looks fine.'], stateful: true,
+    },
+    [ComponentName.OrgTree]: {
+        properties: {
+            nodes: [
+                { id: 'ceo', label: 'Ada Lovelace', title: 'Chief executive' },
+                { id: 'cto', label: 'Grace Hopper', title: 'Chief technology officer', parentId: 'ceo' },
+                { id: 'cfo', label: 'Linus Torvalds', title: 'Chief financial officer', parentId: 'ceo' },
+                { id: 'dev', label: 'Margaret Hamilton', title: 'Engineering manager', parentId: 'cto' },
+            ],
+        },
+        data: ['Chief technology officer'], stateful: true,
+    },
+    [ComponentName.PermissionMatrix]: {
+        properties: {
+            roles: [{ id: 'admin', label: 'Administrator' }, { id: 'sales', label: 'Sales' }],
+            permissions: [{ id: 'view', label: 'View deals', group: 'Deals' }, { id: 'edit', label: 'Edit deals', group: 'Deals' }, { id: 'users', label: 'Manage users', group: 'Administration' }],
+            grants: [{ role: 'admin', permission: 'view' }, { role: 'admin', permission: 'edit' }, { role: 'admin', permission: 'users' }, { role: 'sales', permission: 'view' }],
+        },
+        data: ['Edit deals', 'Manage users'], stateful: true,
+    },
 };
 
 /** A scene element for a foundation component, populated with its sample unless properties are given, with the state forced when asked. */

package/foundation/foundationStrings.ts

@@ -80,11 +80,26 @@ export const foundationStrings = {
     viewsNone: 'There are no saved views',
     checklistProgress: '{done} of {total} complete',
     checklistOwner: 'Owner',
+    checklistOverdue: 'Overdue',
+    checklistDone: 'Done',
+    checklistOpen: 'Open',
+    checklistItemProgress: 'Progress of {title}',
+    checklistNone: 'This checklist has no tasks',
     checklistDue: 'Due',
     activityEmpty: 'No activity yet',
+    activityComment: 'Comment',
+    activityChange: 'Change',
+    activityStatus: 'Status',
+    activitySystem: 'System',
+    activityBy: 'by {actor}',
     avatarOverflow: '{count} more',
     avatarPeople: '{count} people',
     uploadDrop: 'Drop files here or',
+    uploadLimits: 'Up to {limit} each',
+    uploadAccepts: 'Accepts {types}',
+    uploadSelected: 'Selected files',
+    uploadQueued: 'Ready to upload',
+    uploadSingle: 'Only one file can be uploaded at a time',
     uploadBrowse: 'Browse files',
     uploadRemove: 'Remove {name}',
     uploadTooLarge: '{name} is larger than {limit}',
@@ -98,13 +113,24 @@ export const foundationStrings = {
     approvalRejected: 'Rejected',
     approvalSkipped: 'Skipped',
     approvalChain: 'Approval chain',
+    approvalStep: 'Step {n} of {total}',
+    approvalNotReached: 'Not reached',
+    approvalOutcomeApproved: 'Approved by everyone',
+    approvalOutcomeRejected: 'Rejected',
+    approvalOutcomeInProgress: 'Waiting for a decision',
+    approvalOutcomePending: 'Not started',
     orgExpand: 'Expand {name}',
     orgCollapse: 'Collapse {name}',
     orgReports: '{count} reports',
+    orgTree: 'Organization',
+    orgNone: 'There is nobody in the organization yet',
     matrixAllowed: 'Allowed',
     matrixDenied: 'Not allowed',
     matrixGrant: 'Grant {permission} to {role}',
     matrixReadOnly: 'Read-only',
+    matrixPermission: 'Permission',
+    matrixScroll: 'Permission matrix, scrolls sideways',
+    matrixGroupAll: 'Other',
 } as const;
 
 /** The name of one of the foundation strings. */

package/foundation/index.ts

@@ -21,6 +21,21 @@ export * from './columnModel';
 export * from './ColumnChooser';
 export * from './viewModel';
 export * from './SavedViewsMenu';
+export * from './checklistModel';
+export * from './ChecklistSection';
+export * from './activityModel';
+export * from './ActivityFeed';
+export * from './avatarModel';
+export * from './AvatarStack';
+export * from './uploadModel';
+export * from './FileUploaderHandler';
+export * from './FileUploader';
+export * from './approvalModel';
+export * from './ApprovalChainStepper';
+export * from './orgModel';
+export * from './OrgTree';
+export * from './permissionModel';
+export * from './PermissionMatrix';
 export * from './foundationDescriptors';
 export * from './foundationComponentMetadata';
 export * from './foundationSamples';