@cratis/scene.blueprint.default 4.32.0 → 4.33.0

package/foundation/chartGeometry.ts

@@ -0,0 +1,108 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/** The kinds of chart the wrapper draws (spec Part B 2.3: line, bar, stacked, donut, funnel). */
+export enum ChartKind {
+    Line = 'line',
+    Bar = 'bar',
+    Stacked = 'stacked',
+    Donut = 'donut',
+    Funnel = 'funnel',
+}
+
+/** One named series of values, one per category. */
+export interface ChartSeries {
+    name: string;
+    values: number[];
+}
+
+/** A rounded-up axis maximum and the tick values below it, so an axis reads 0, 25, 50, 75, 100 and not 0, 23.4, 46.8. */
+export interface ChartScale {
+    maximum: number;
+    ticks: number[];
+}
+
+/** Builds a scale from zero to a rounded-up maximum of the values, in about `target` steps. */
+export function niceScale(maximum: number, target = 4): ChartScale {
+    if (!Number.isFinite(maximum) || maximum <= 0) return { maximum: 1, ticks: [0, 1] };
+
+    const rough = maximum / target;
+    const magnitude = 10 ** Math.floor(Math.log10(rough));
+    const residual = rough / magnitude;
+    const step = (residual <= 1 ? 1 : residual <= 2 ? 2 : residual <= 5 ? 5 : 10) * magnitude;
+    const top = Math.ceil(maximum / step) * step;
+    const ticks: number[] = [];
+    for (let tick = 0; tick <= top + step / 2; tick += step) ticks.push(Number(tick.toFixed(10)));
+    return { maximum: top, ticks };
+}
+
+/** Reads series out of a property value, dropping anything that is not a named list of numbers, so a half-bound chart draws what it has. */
+export function readSeries(value: unknown): ChartSeries[] {
+    if (!Array.isArray(value)) return [];
+
+    return value.flatMap((entry): ChartSeries[] => {
+        if (typeof entry !== 'object' || entry === null || Array.isArray(entry)) return [];
+        const { name, values } = entry as Record<string, unknown>;
+        if (typeof name !== 'string' || !Array.isArray(values)) return [];
+        return [{ name, values: values.map(item => (typeof item === 'number' && Number.isFinite(item) ? item : 0)) }];
+    });
+}
+
+/** The extent of the values a chart of this kind has to fit: stacked series add up, the others are compared one by one. */
+export function dataMaximum(kind: ChartKind, series: ChartSeries[], categoryCount: number): number {
+    if (kind === ChartKind.Stacked) {
+        return Math.max(0, ...Array.from({ length: categoryCount }, (_, index) => series.reduce((sum, item) => sum + Math.max(0, item.values[index] ?? 0), 0)));
+    }
+
+    return Math.max(0, ...series.flatMap(item => item.values));
+}
+
+/** A slice of a donut, in radians clockwise from the top. */
+export interface DonutSlice {
+    index: number;
+    value: number;
+    share: number;
+    start: number;
+    end: number;
+}
+
+/** Divides the positive values into slices that together make one turn. */
+export function donutSlices(values: number[]): DonutSlice[] {
+    const positive = values.map(value => Math.max(0, value));
+    const total = positive.reduce((sum, value) => sum + value, 0);
+    if (total === 0) return [];
+
+    let angle = 0;
+    return positive.flatMap((value, index) => {
+        if (value === 0) return [];
+        const share = value / total;
+        const slice = { index, value, share, start: angle, end: angle + share * Math.PI * 2 };
+        angle = slice.end;
+        return [slice];
+    });
+}
+
+/** The SVG path of a ring segment between two radii; a full turn is drawn as two halves, because one arc cannot start and end on the same point. */
+export function ringPath(centerX: number, centerY: number, outer: number, inner: number, start: number, end: number): string {
+    const point = (radius: number, angle: number) => `${(centerX + radius * Math.sin(angle)).toFixed(2)} ${(centerY - radius * Math.cos(angle)).toFixed(2)}`;
+    if (end - start >= Math.PI * 2 - 1e-6) {
+        const middle = start + Math.PI;
+        return `${ringPath(centerX, centerY, outer, inner, start, middle)} ${ringPath(centerX, centerY, outer, inner, middle, end)}`;
+    }
+
+    const large = end - start > Math.PI ? 1 : 0;
+    return `M ${point(outer, start)} A ${outer} ${outer} 0 ${large} 1 ${point(outer, end)} L ${point(inner, end)} A ${inner} ${inner} 0 ${large} 0 ${point(inner, start)} Z`;
+}
+
+/** One stage of a funnel: a centered bar whose width is its share of the widest stage. */
+export interface FunnelStage {
+    index: number;
+    value: number;
+    widthRatio: number;
+}
+
+/** Sizes the stages of a funnel against the largest value. */
+export function funnelStages(values: number[]): FunnelStage[] {
+    const maximum = Math.max(0, ...values);
+    return values.map((value, index) => ({ index, value, widthRatio: maximum === 0 ? 0 : Math.max(0, value) / maximum }));
+}

package/foundation/columnModel.ts

@@ -0,0 +1,39 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/** One column a table could show. */
+export interface ChooserColumn {
+    id: string;
+    label: string;
+    visible: boolean;
+    locked: boolean;
+}
+
+/** Reads columns out of a property value; a column is visible unless it says otherwise, and a locked column is always visible. */
+export function readColumns(value: unknown): ChooserColumn[] {
+    if (!Array.isArray(value)) return [];
+
+    return value.flatMap((entry): ChooserColumn[] => {
+        if (typeof entry !== 'object' || entry === null || Array.isArray(entry)) return [];
+        const { id, label, visible, locked } = entry as Record<string, unknown>;
+        if (typeof id !== 'string' || id.length === 0) return [];
+        return [{ id, label: typeof label === 'string' && label.length > 0 ? label : id, visible: locked === true || visible !== false, locked: locked === true }];
+    });
+}
+
+/** The ids of the visible columns, in order: what the chooser publishes and a table binds its columns to. */
+export const visibleColumnIds = (columns: ChooserColumn[]): string[] => columns.filter(column => column.visible).map(column => column.id);
+
+/** Moves a column one place up or down, staying where it is at either end. */
+export function moveColumn(columns: ChooserColumn[], index: number, direction: -1 | 1): ChooserColumn[] {
+    const target = index + direction;
+    if (target < 0 || target >= columns.length) return columns;
+
+    const result = [...columns];
+    [result[index], result[target]] = [result[target], result[index]];
+    return result;
+}
+
+/** Shows or hides a column; a locked column cannot be hidden. */
+export const toggleColumn = (columns: ChooserColumn[], index: number): ChooserColumn[] =>
+    columns.map((column, position) => (position === index && !column.locked ? { ...column, visible: !column.visible } : column));

package/foundation/filterModel.ts

@@ -0,0 +1,111 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/** What a filterable field holds, which decides the operators offered for it. */
+export enum FilterFieldType {
+    Text = 'text',
+    Number = 'number',
+    Date = 'date',
+    Select = 'select',
+    Boolean = 'boolean',
+}
+
+/** A field a filter can be built on. */
+export interface FilterField {
+    name: string;
+    label: string;
+    type: FilterFieldType;
+    options: string[];
+}
+
+/** One test of a field. */
+export interface FilterCondition {
+    field: string;
+    operator: string;
+    value: string;
+}
+
+/** Conditions and nested groups joined by AND or OR. */
+export interface FilterGroup {
+    operator: 'and' | 'or';
+    conditions: FilterCondition[];
+    groups: FilterGroup[];
+}
+
+/** The deepest a group may nest; deeper filters are unreadable, and a runaway value is cut rather than rendered forever. */
+export const maximumFilterDepth = 3;
+
+/** An empty group. */
+export const emptyFilter = (): FilterGroup => ({ operator: 'and', conditions: [], groups: [] });
+
+/** The operators of each field type, in the order they are offered; the first is the default. */
+export const filterOperators: Record<FilterFieldType, string[]> = {
+    [FilterFieldType.Text]: ['contains', 'equals', 'notEquals', 'startsWith', 'isEmpty'],
+    [FilterFieldType.Number]: ['equals', 'notEquals', 'greater', 'greaterOrEqual', 'less', 'lessOrEqual'],
+    [FilterFieldType.Date]: ['on', 'before', 'after'],
+    [FilterFieldType.Select]: ['is', 'isNot'],
+    [FilterFieldType.Boolean]: ['true', 'false'],
+};
+
+/** The operators that need no value to compare with. */
+export const valuelessOperators = ['isEmpty', 'true', 'false'];
+
+/** Reads fields out of a property value, dropping entries without a name, and defaulting what is unknown to text. */
+export function readFilterFields(value: unknown): FilterField[] {
+    if (!Array.isArray(value)) return [];
+
+    return value.flatMap((entry): FilterField[] => {
+        if (typeof entry !== 'object' || entry === null || Array.isArray(entry)) return [];
+        const { name, label, type, options } = entry as Record<string, unknown>;
+        if (typeof name !== 'string' || name.length === 0) return [];
+        return [{
+            name,
+            label: typeof label === 'string' && label.length > 0 ? label : name,
+            type: (Object.values(FilterFieldType) as string[]).includes(type as string) ? (type as FilterFieldType) : FilterFieldType.Text,
+            options: Array.isArray(options) ? options.filter((option): option is string => typeof option === 'string') : [],
+        }];
+    });
+}
+
+/** Reads a filter out of a property value, keeping the conditions on known fields with operators their type offers. */
+export function normalizeFilter(value: unknown, fields: FilterField[], depth = 1): FilterGroup {
+    if (typeof value !== 'object' || value === null || Array.isArray(value)) return emptyFilter();
+
+    const { operator, conditions, groups } = value as Record<string, unknown>;
+    return {
+        operator: operator === 'or' ? 'or' : 'and',
+        conditions: Array.isArray(conditions) ? conditions.flatMap((entry): FilterCondition[] => {
+            if (typeof entry !== 'object' || entry === null) return [];
+            const condition = entry as Record<string, unknown>;
+            const field = fields.find(candidate => candidate.name === condition.field);
+            if (!field) return [];
+            const operators = filterOperators[field.type];
+            return [{
+                field: field.name,
+                operator: typeof condition.operator === 'string' && operators.includes(condition.operator) ? condition.operator : operators[0],
+                value: typeof condition.value === 'string' ? condition.value : typeof condition.value === 'number' ? String(condition.value) : '',
+            }];
+        }) : [],
+        groups: depth < maximumFilterDepth && Array.isArray(groups) ? groups.map(group => normalizeFilter(group, fields, depth + 1)) : [],
+    };
+}
+
+/** How many conditions are in force: a condition that needs a value and has none is not filtering anything. */
+export function countActiveConditions(group: FilterGroup): number {
+    const own = group.conditions.filter(condition => valuelessOperators.includes(condition.operator) || condition.value.trim().length > 0).length;
+    return own + group.groups.reduce((sum, nested) => sum + countActiveConditions(nested), 0);
+}
+
+/** Applies a change to the group at a path of nested group indexes, leaving the rest as it was. */
+export function updateGroupAt(root: FilterGroup, path: number[], change: (group: FilterGroup) => FilterGroup): FilterGroup {
+    if (path.length === 0) return change(root);
+
+    const [index, ...rest] = path;
+    return { ...root, groups: root.groups.map((group, position) => (position === index ? updateGroupAt(group, rest, change) : group)) };
+}
+
+/** A new condition on the first field, with that field's default operator. */
+export function newCondition(fields: FilterField[]): FilterCondition {
+    const field = fields[0];
+    return { field: field?.name ?? '', operator: field ? filterOperators[field.type][0] : 'contains', value: '' };
+}

package/foundation/foundationComponentMetadata.ts

@@ -14,4 +14,8 @@ export const foundationComponentMetadata: Record<string, ComponentMetadata> = {
     [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']),
+    [ComponentName.ChartWrapper]: m('Chart', ComponentCategory.DataDisplay, 'chart-line', ['graph', 'line', 'bar', 'stacked', 'donut', 'pie', 'funnel', 'plot']),
+    [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']),
 };

package/foundation/foundationDescriptors.ts

@@ -2,10 +2,12 @@
 // 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 { componentRegistryKey, valueOutputProperty } from '@cratis/scene.react';
 import { ComponentName } from '../ComponentName';
 import { defaultBlueprintName } from '../packageName';
+import { ChartKind } from './chartGeometry';
 import { ComponentState } from './ComponentState';
+import { FilterFieldType } from './filterModel';
 import { NumberFormat } from './formatting';
 import { PermissionRule } from './PermissionRule';
 import { StatusTone } from './StatusChip';
@@ -115,5 +117,88 @@ export const foundationDescriptors: ComponentDescriptor[] = [
             }, StatusTone.Neutral, 'The tone picks the icon and the theme color.'),
         ],
     },
+    {
+        component: key(ComponentName.ChartWrapper),
+        displayName: 'Chart',
+        description: 'One chart - line, bar, stacked, donut or funnel - with a legend and a table of the same data. A donut and a funnel draw the first series.',
+        properties: [
+            text('title', 'Title', 'Content'),
+            choice('kind', 'Chart type', 'Appearance', {
+                [ChartKind.Line]: 'Line', [ChartKind.Bar]: 'Bar', [ChartKind.Stacked]: 'Stacked bar', [ChartKind.Donut]: 'Donut', [ChartKind.Funnel]: 'Funnel',
+            }, ChartKind.Line),
+            { path: 'categories', label: 'Categories', group: 'Data', valueType: PropertyValueType.Json, editorKind: PropertyEditorKind.StringList, default: [], acceptedBindingKinds: bindable, description: 'The label of each point, bar or slice, in order.' },
+            {
+                ...list('series', 'Series', 'Data', 'Series', [
+                    text('name', 'Name', 'Data', undefined, { constraints: { required: true } }),
+                    { path: 'values', label: 'Values', group: 'Data', valueType: PropertyValueType.Json, editorKind: PropertyEditorKind.NumberList, default: [], description: 'One value for each category.' },
+                ], 'What is plotted: a named list of values, one per category.'),
+                acceptedBindingKinds: bindable,
+            },
+            choice('format', 'Value format', 'Appearance', formats, NumberFormat.Number),
+            text('currency', 'Currency', 'Appearance', 'The ISO 4217 code when the format is currency.'),
+            ...standardStateProperties.filter(property => property.path !== 'label'),
+        ],
+    },
+    {
+        component: key(ComponentName.FilterBuilder),
+        displayName: 'Filter builder',
+        description: 'Conditions on fields, joined by AND or OR in groups that nest three deep. The filter is published as the value output; the component filters nothing itself.',
+        properties: [
+            {
+                ...list('fields', 'Fields', 'Data', 'Field', [
+                    text('name', 'Name', 'Data', 'The result field the condition tests.', { constraints: { required: true }, editorKind: PropertyEditorKind.Field }),
+                    text('label', 'Label', 'Content'),
+                    choice('type', 'Type', 'Data', {
+                        [FilterFieldType.Text]: 'Text', [FilterFieldType.Number]: 'Number', [FilterFieldType.Date]: 'Date', [FilterFieldType.Select]: 'Select', [FilterFieldType.Boolean]: 'Yes / no',
+                    }, FilterFieldType.Text, 'Decides the operators offered.'),
+                    { path: 'options', label: 'Options', group: 'Data', valueType: PropertyValueType.Json, editorKind: PropertyEditorKind.StringList, default: [], description: 'The choices of a select field.' },
+                ], 'What can be filtered.'),
+                acceptedBindingKinds: bindable,
+            },
+            { path: 'filter', label: 'Initial filter', group: 'Data', valueType: PropertyValueType.Object, acceptedBindingKinds: bindable, description: 'A filter to start from, usually bound to the active saved view.' },
+            rule('editPermission', 'Edit permission', 'Enabled lets the user change the filter; disabled shows it read-only.'),
+            valueOutputProperty(PropertyValueType.Object, 'The filter as the user has built it: { operator, conditions, groups }, published as it changes.'),
+            ...standardStateProperties,
+        ],
+    },
+    {
+        component: key(ComponentName.ColumnChooser),
+        displayName: 'Column chooser',
+        description: 'Which columns a table shows, and in what order. Publishes the ordered ids of the visible columns as the value output.',
+        properties: [
+            {
+                ...list('columns', 'Columns', 'Data', 'Column', [
+                    text('id', 'Id', 'Data', 'The result field the column shows.', { constraints: { required: true }, editorKind: PropertyEditorKind.Field }),
+                    text('label', 'Label', 'Content'),
+                    flag('visible', 'Visible', 'Content', 'Whether the column starts shown.', { default: true }),
+                    flag('locked', 'Always shown', 'Content', 'A locked column cannot be hidden: the identifying column is.'),
+                ], 'What could be shown.'),
+                acceptedBindingKinds: bindable,
+            },
+            valueOutputProperty(PropertyValueType.Json, 'The ids of the visible columns, in order, published as the user changes them.'),
+            ...standardStateProperties,
+        ],
+    },
+    {
+        component: key(ComponentName.SavedViewsMenu),
+        displayName: 'Saved views menu',
+        description: 'A list\'s saved views as a menu button, with the current view as its label. Publishes the chosen view id as the value output.',
+        properties: [
+            {
+                ...list('views', 'Views', 'Data', 'View', [
+                    text('id', 'Id', 'Data', undefined, { constraints: { required: true } }),
+                    text('label', 'Label', 'Content'),
+                    text('description', 'Description', 'Content'),
+                ], 'The choices.'),
+                acceptedBindingKinds: bindable,
+            },
+            text('activeView', 'Active view', 'Data', 'The id of the view in force; bind it to start from a view.'),
+            rule('savePermission', 'Save permission', 'Whether "Save current view" works, refuses with a reason, or is not shown.'),
+            rule('managePermission', 'Manage permission', 'Whether "Manage views" works, refuses with a reason, or is not shown.'),
+            valueOutputProperty(PropertyValueType.String, 'The id of the chosen view, published as the user chooses.'),
+            { path: 'action', label: 'Requested action', group: 'Outputs', valueType: PropertyValueType.String, readOnly: true, output: true, description: '"save" or "manage" when the user asks for it; the host acts on it.' },
+            ...standardStateProperties,
+        ],
+    },
 ];
 

package/foundation/foundationSamples.ts

@@ -30,6 +30,25 @@ export const foundationSamples: Record<string, FoundationSample> = {
     [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 },
+    [ComponentName.ChartWrapper]: {
+        properties: { title: 'Revenue by quarter', kind: 'line', categories: ['Q1', 'Q2', 'Q3', 'Q4'], series: [{ name: 'Revenue', values: [120, 180, 150, 240] }, { name: 'Target', values: [100, 150, 200, 220] }], locale: 'en-US' },
+        data: ['Revenue by quarter'], stateful: true,
+    },
+    [ComponentName.FilterBuilder]: {
+        properties: {
+            fields: [{ name: 'owner', label: 'Owner', type: 'text' }, { name: 'status', label: 'Status', type: 'select', options: ['Open', 'Won', 'Lost'] }, { name: 'value', label: 'Value', type: 'number' }],
+            filter: { operator: 'and', conditions: [{ field: 'status', operator: 'is', value: 'Open' }, { field: 'owner', operator: 'contains', value: 'Ada' }], groups: [] },
+        },
+        data: ['2 active filters'], stateful: true,
+    },
+    [ComponentName.ColumnChooser]: {
+        properties: { columns: [{ id: 'name', label: 'Name', locked: true }, { id: 'owner', label: 'Owner' }, { id: 'status', label: 'Status', visible: false }] },
+        data: ['3 shown'], stateful: true,
+    },
+    [ComponentName.SavedViewsMenu]: {
+        properties: { views: [{ id: 'all', label: 'All leads' }, { id: 'mine', label: 'Mine' }, { id: 'overdue', label: 'Overdue' }], activeView: 'mine' },
+        data: ['Mine'], 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

@@ -45,14 +45,39 @@ export const foundationStrings = {
     filterOperator: 'Operator',
     filterValue: 'Value',
     filterClear: 'Clear filters',
+    filterCondition: 'Condition {n}',
+    filterGroup: 'Group {n}',
+    filterNoFields: 'There are no fields to filter on',
+    opContains: 'contains',
+    opEquals: 'equals',
+    opNotEquals: 'does not equal',
+    opStartsWith: 'starts with',
+    opIsEmpty: 'is empty',
+    opGreater: 'is greater than',
+    opGreaterOrEqual: 'is at least',
+    opLess: 'is less than',
+    opLessOrEqual: 'is at most',
+    opBefore: 'is before',
+    opAfter: 'is after',
+    opOn: 'is on',
+    opIs: 'is',
+    opIsNot: 'is not',
+    opTrue: 'is yes',
+    opFalse: 'is no',
     filterSummary: '{count} active filters',
+    filterSummaryOne: '1 active filter',
     columnsChoose: 'Columns',
     columnsLocked: 'always shown',
     columnsReset: 'Show all columns',
+    columnsMoveUp: 'Move {name} up',
+    columnsMoveDown: 'Move {name} down',
+    columnsShown: '{shown} of {total} shown',
+    columnsNone: 'There are no columns to choose from',
     viewsLabel: 'Saved views',
     viewsDefault: 'All items',
     viewsSave: 'Save current view',
     viewsManage: 'Manage views',
+    viewsNone: 'There are no saved views',
     checklistProgress: '{done} of {total} complete',
     checklistOwner: 'Owner',
     checklistDue: 'Due',

package/foundation/index.ts

@@ -12,6 +12,15 @@ export * from './EmptyState';
 export * from './TrendChip';
 export * from './StatusChip';
 export * from './StatCard';
+export * from './chartGeometry';
+export * from './useElementWidth';
+export * from './ChartWrapper';
+export * from './filterModel';
+export * from './FilterBuilder';
+export * from './columnModel';
+export * from './ColumnChooser';
+export * from './viewModel';
+export * from './SavedViewsMenu';
 export * from './foundationDescriptors';
 export * from './foundationComponentMetadata';
 export * from './foundationSamples';

package/foundation/useElementWidth.ts

@@ -0,0 +1,31 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { RefObject, useLayoutEffect, useState } from 'react';
+
+/**
+ * The width of an element, kept up to date, so a chart can draw at the size it is shown at instead of scaling a fixed drawing -
+ * which would shrink its labels with it on a phone. Where there is no `ResizeObserver` (a test environment) the fallback is used.
+ */
+export function useElementWidth(reference: RefObject<HTMLElement | null>, fallback: number): number {
+    const [width, setWidth] = useState(fallback);
+
+    useLayoutEffect(() => {
+        const element = reference.current;
+        if (!element) return;
+
+        const measure = () => {
+            const measured = Math.round(element.getBoundingClientRect().width);
+            if (measured > 0) setWidth(measured);
+        };
+
+        measure();
+        if (typeof ResizeObserver === 'undefined') return;
+
+        const observer = new ResizeObserver(measure);
+        observer.observe(element);
+        return () => observer.disconnect();
+    }, [reference]);
+
+    return width;
+}

package/foundation/viewModel.ts

@@ -0,0 +1,21 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+/** One saved view of a list: a named combination of filters, sort and columns. The definition lives with the application. */
+export interface SavedView {
+    id: string;
+    label: string;
+    description?: string;
+}
+
+/** Reads saved views out of a property value, dropping entries without an id. */
+export function readViews(value: unknown): SavedView[] {
+    if (!Array.isArray(value)) return [];
+
+    return value.flatMap((entry): SavedView[] => {
+        if (typeof entry !== 'object' || entry === null || Array.isArray(entry)) return [];
+        const { id, label, description } = entry as Record<string, unknown>;
+        if (typeof id !== 'string' || id.length === 0) return [];
+        return [{ id, label: typeof label === 'string' && label.length > 0 ? label : id, ...(typeof description === 'string' ? { description } : {}) }];
+    });
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@cratis/scene.blueprint.default",
-    "version": "4.32.0",
+    "version": "4.33.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",
@@ -55,15 +55,15 @@
         "build-storybook": "storybook build"
     },
     "dependencies": {
-        "@cratis/scene.engine": "4.32.0",
-        "@cratis/scene.model": "4.32.0",
-        "@cratis/scene.react": "4.32.0"
+        "@cratis/scene.engine": "4.33.0",
+        "@cratis/scene.model": "4.33.0",
+        "@cratis/scene.react": "4.33.0"
     },
     "devDependencies": {
-        "@cratis/scene.engine": "4.32.0",
-        "@cratis/scene.model": "4.32.0",
-        "@cratis/scene.primereact": "4.32.0",
-        "@cratis/scene.react": "4.32.0",
+        "@cratis/scene.engine": "4.33.0",
+        "@cratis/scene.model": "4.33.0",
+        "@cratis/scene.primereact": "4.33.0",
+        "@cratis/scene.react": "4.33.0",
         "@primereact/core": "11.2.0",
         "@primereact/headless": "11.2.0",
         "@primeuix/themes": "^3.0.1",