@cratis/scene.blueprint.default 4.41.0 → 4.42.0

package/foundation/ActionButton.tsx

@@ -15,7 +15,7 @@ export interface ActionButtonProps {
     onClick?: (event: { stopPropagation(): void }) => void;
 
     /** The emphasis of the button. */
-    emphasis?: 'primary' | 'secondary' | 'quiet';
+    emphasis?: 'primary' | 'secondary' | 'quiet' | 'danger';
 
     children: ReactNode;
 }

package/foundation/ActionButtonControl.tsx

@@ -0,0 +1,37 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { readOptionalString } from '../shell/elementProperties';
+import { ActionButton } from './ActionButton';
+import { readFoundationStrings } from './foundationStrings';
+import { readPermissionRule } from './PermissionRule';
+
+const emphases = ['primary', 'secondary', 'quiet', 'danger'] as const;
+
+/**
+ * The `actionButton` component: one action of a screen or a dialog, drawn the way every action of the foundation is.
+ *
+ * `label` is what it does - a verb, never "OK" - and `emphasis` is `primary`, `secondary`, `quiet` or `danger` (the confirming button of a destructive
+ * dialog). It honours the permission rule of spec Part B 1.5 through `permission`: enabled, disabled (shown, refusing, and saying why) or not rendered.
+ * Pressing it runs the behaviors attached to the element, which is how a document makes it close a dialog, navigate or execute a command; with
+ * `targetScreen` and no behavior it goes to that screen, as the shell's links do.
+ */
+export function ActionButtonControl({ element, interactions }: RegisteredComponentProps) {
+    const strings = readFoundationStrings(element);
+    const requested = readOptionalString(element, 'emphasis');
+    const emphasis = (emphases as readonly string[]).includes(requested ?? '') ? (requested as typeof emphases[number]) : 'primary';
+    const target = readOptionalString(element, 'targetScreen');
+
+    return (
+        <span className='foundation foundation-action' data-scene-id={element.id}>
+            <ActionButton rule={readPermissionRule(element)} emphasis={emphasis} disabledReason={readOptionalString(element, 'disabledReason') ?? strings.disabledNoPermission}
+                onClick={event => {
+                    if (interactions?.onClick) interactions.onClick(event);
+                    else if (target && typeof window !== 'undefined') window.location.hash = `#/${target}`;
+                }}>
+                {readOptionalString(element, 'label') ?? ''}
+            </ActionButton>
+        </span>
+    );
+}

package/foundation/DialogFrame.tsx

@@ -0,0 +1,138 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { useCallback, useContext, useEffect, useId, useRef } from 'react';
+import { RegisteredComponentProps, SceneNavigationContextInternal } from '@cratis/scene.react';
+import { readOptionalString, readStrings } from '../shell/elementProperties';
+import { FoundationIcon } from './FoundationIcon';
+import { formatText, readFoundationStrings } from './foundationStrings';
+import { isRightToLeft, readLocale } from './formatting';
+import { useCompactWidth } from './useCompactWidth';
+
+/** Where a dialog is drawn: in the middle of the page, as a drawer from the inline end, or filling the page. */
+export enum DialogPlacement {
+    Center = 'center',
+    Side = 'side',
+    Full = 'full',
+}
+
+/** What a dialog is about: an ordinary one, or one that cannot be undone and is drawn in the danger colors. */
+export enum DialogTone {
+    Default = 'default',
+    Danger = 'danger',
+}
+
+const focusable = 'input:not([disabled]):not([type="hidden"]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), [href], [tabindex]:not([tabindex="-1"])';
+
+/** Reads the placement property, falling back to the center for anything that is not one of the three. */
+export function readDialogPlacement(element: RegisteredComponentProps['element']): DialogPlacement {
+    const value = readOptionalString(element, 'placement');
+    return value === DialogPlacement.Side || value === DialogPlacement.Full ? value : DialogPlacement.Center;
+}
+
+/** The placement a dialog is drawn with in a window of the given width class: a phone gets every dialog at full height and width (spec Part B 2.10, 1.5). */
+export const placementFor = (requested: DialogPlacement, compact: boolean): DialogPlacement => (compact ? DialogPlacement.Full : requested);
+
+/** The elements a dialog's focus can rest on, in document order, that are not hidden. */
+const focusableIn = (host: HTMLElement): HTMLElement[] => Array.from(host.querySelectorAll<HTMLElement>(focusable)).filter(candidate => !candidate.hidden && candidate.closest('[hidden]') === null);
+
+/**
+ * The `dialogFrame` component: the head of a dialog template and everything that makes what the host draws around it behave as a dialog.
+ *
+ * It draws the heading (`title`, `subtitle`), an optional `message` and `consequences` list - what a confirmation says will happen - and a close button.
+ * The host draws the box a dialog template opens in (a `role="dialog" aria-modal="true"` element); this component takes that element on and gives it the
+ * parts of a dialog that must not differ from one template to the next:
+ *
+ * - it is named by the heading, takes focus when it opens (the first field, else the primary action, else the close button), keeps Tab inside it, and
+ *   gives focus back to whatever opened it when it goes;
+ * - Escape and the close button run the behaviors attached to this element (a `CloseDialog` action), and close the dialog themselves when none is attached;
+ * - `placement` is `center` (default), `side` (a drawer from the inline end, which a right-to-left locale mirrors) or `full`; on a phone every dialog fills the page;
+ * - `tone` `danger` draws a dialog that cannot be undone in the danger colors.
+ *
+ * Every text it says comes from the strings table and the locale of the element, so an application localizes it like any foundation component.
+ */
+export function DialogFrame({ element, interactions }: RegisteredComponentProps) {
+    const frame = useRef<HTMLElement>(null);
+    const heading = useId();
+    const navigation = useContext(SceneNavigationContextInternal);
+    const compact = useCompactWidth();
+    const strings = readFoundationStrings(element);
+    const locale = readLocale(element);
+    const title = readOptionalString(element, 'title') ?? '';
+    const subtitle = readOptionalString(element, 'subtitle');
+    const message = readOptionalString(element, 'message');
+    const consequences = readStrings(element, 'consequences');
+    const placement = placementFor(readDialogPlacement(element), compact);
+    const tone = element.properties.tone === DialogTone.Danger ? DialogTone.Danger : DialogTone.Default;
+
+    const onClick = interactions?.onClick;
+    const close = useCallback(() => {
+        if (onClick) onClick({ stopPropagation: () => undefined });
+        else navigation?.closeDialog();
+    }, [onClick, navigation]);
+    const closeRef = useRef(close);
+    closeRef.current = close;
+
+    useEffect(() => {
+        const host = frame.current?.closest<HTMLElement>('[role="dialog"]');
+        if (!host) return;
+
+        const opener = document.activeElement instanceof HTMLElement ? document.activeElement : undefined;
+        const before = { className: host.className, labelledBy: host.getAttribute('aria-labelledby'), placement: host.getAttribute('data-placement'), tone: host.getAttribute('data-tone') };
+        host.classList.add('foundation', 'foundation-dialog-host');
+        host.setAttribute('aria-labelledby', heading);
+        host.setAttribute('data-placement', placement);
+        host.setAttribute('data-tone', tone);
+        host.dir = isRightToLeft(locale) ? 'rtl' : host.dir;
+
+        const closeButton = frame.current?.querySelector<HTMLElement>('.foundation-dialog-close');
+        const targets = focusableIn(host);
+        (targets.find(target => /^(INPUT|SELECT|TEXTAREA)$/.test(target.tagName)) ?? targets.find(target => target !== closeButton) ?? closeButton)?.focus();
+
+        const onKeyDown = (event: KeyboardEvent) => {
+            if (event.key === 'Escape') {
+                event.preventDefault();
+                closeRef.current();
+            } else if (event.key === 'Tab') {
+                const inside = focusableIn(host);
+                if (inside.length === 0) { event.preventDefault(); return; }
+                const first = inside[0];
+                const last = inside[inside.length - 1];
+                if (event.shiftKey && (document.activeElement === first || !host.contains(document.activeElement))) { event.preventDefault(); last.focus(); }
+                else if (!event.shiftKey && (document.activeElement === last || !host.contains(document.activeElement))) { event.preventDefault(); first.focus(); }
+            }
+        };
+
+        host.addEventListener('keydown', onKeyDown);
+        return () => {
+            host.removeEventListener('keydown', onKeyDown);
+            host.className = before.className;
+            for (const [name, value] of [['aria-labelledby', before.labelledBy], ['data-placement', before.placement], ['data-tone', before.tone]] as const) {
+                if (value === null) host.removeAttribute(name);
+                else host.setAttribute(name, value);
+            }
+
+            if (opener?.isConnected) opener.focus();
+        };
+    }, [heading, placement, tone, locale]);
+
+    return (
+        <header ref={frame} className='foundation foundation-dialog-frame' data-scene-id={element.id} data-placement={placement} data-tone={tone} lang={locale} dir={isRightToLeft(locale) ? 'rtl' : undefined}>
+            <div className='foundation-dialog-heading'>
+                <div className='foundation-dialog-titles'>
+                    <h2 id={heading} className='foundation-dialog-title'>{title}</h2>
+                    {subtitle && <p className='foundation-dialog-subtitle'>{subtitle}</p>}
+                </div>
+                <button type='button' className='foundation-dialog-close' aria-label={formatText(strings.dialogClose, { title })} onClick={close}>
+                    <FoundationIcon name='close' />
+                </button>
+            </div>
+            {message && <p className='foundation-dialog-message'>{message}</p>}
+            {consequences.length > 0 && (
+                <ul className='foundation-dialog-consequences' aria-label={strings.dialogConsequences}>
+                    {consequences.map(consequence => <li key={consequence}>{consequence}</li>)}
+                </ul>
+            )}
+        </header>
+    );
+}

package/foundation/FormScreenBody.tsx

@@ -73,6 +73,9 @@ function FieldInput({ field, value, error, readOnly, locale, required, choose, s
         case FormFieldType.Currency:
             input = <input {...common} type='number' inputMode='decimal' value={text} placeholder={field.placeholder} onChange={event => set(event.target.value === '' ? '' : Number(event.target.value))} />;
             break;
+        case FormFieldType.Password:
+            input = <input {...common} type='password' autoComplete='current-password' value={text} placeholder={field.placeholder} onChange={event => set(event.target.value)} />;
+            break;
         case FormFieldType.Date:
             input = <input {...common} type='date' lang={locale} value={text} onChange={event => set(event.target.value)} />;
             break;
@@ -97,9 +100,9 @@ function FieldInput({ field, value, error, readOnly, locale, required, choose, s
  * unsaved-changes guard.
  *
  * `sections` (`title`, `columns`, `fields`) and `values` come from the screen; a field is `text`, `number`, `currency`, `date`, `select`, `multiSelect`, `lookup`,
- * `toggle`, `file`, `richText` or `address`. Validation is inline on blur and a summary on submit (an alert listing each field as a link back to it); a server's
+ * `toggle`, `file`, `richText`, `address` or `password`. Validation is inline on blur and a summary on submit (an alert listing each field as a link back to it); a server's
  * `errors` map onto the fields, and one for a field the form lacks is shown as a general error so it is never lost. Required fields are marked with an asterisk
- * *and* the word. `mode` is `create`, `edit`, `readOnly` or `settings` - settings has one Save for each section. The edited values are the `value` output; Save
+ * *and* the word. `saveAndNew` false leaves out "Save and new" (a dialog that creates one record). `mode` is `create`, `edit`, `readOnly` or `settings` - settings has one Save for each section. The edited values are the `value` output; Save
  * runs the behaviors attached to the element. While values differ from the saved ones the form says so, warns the browser before the page is left, and offers
  * "Discard changes". The action bar sticks to the bottom as the form scrolls.
  */
@@ -185,7 +188,7 @@ export function FormScreenBody({ element, interactions, bindingOutputs }: Regist
                             <span className='foundation-wizard-spacer' />
                             {dirty && <ActionButton emphasis='quiet' disabledReason={strings.disabledNoPermission} onClick={() => { setValues(saved); setTouched(new Set()); setSubmitted(false); }}>{strings.formDiscard}</ActionButton>}
                             <ActionButton emphasis='secondary' disabledReason={strings.disabledNoPermission} onClick={() => interactions?.onClick?.({ stopPropagation: () => undefined })}>{strings.formCancel}</ActionButton>
-                            {mode === FormMode.Create && <ActionButton rule={canSave} emphasis='secondary' disabledReason={strings.disabledNoPermission} onClick={() => { submit(); }}>{strings.formSaveAndNew}</ActionButton>}
+                            {mode === FormMode.Create && element.properties.saveAndNew !== false && <ActionButton rule={canSave} emphasis='secondary' disabledReason={strings.disabledNoPermission} onClick={() => { submit(); }}>{strings.formSaveAndNew}</ActionButton>}
                             <ActionButton rule={canSave} disabledReason={strings.disabledNoPermission} onClick={() => submit()}>{strings.formSave}</ActionButton>
                         </div>
                     )}

package/foundation/Notice.tsx

@@ -0,0 +1,33 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { RegisteredComponentProps } from '@cratis/scene.react';
+import { readOptionalString } from '../shell/elementProperties';
+import { FoundationIcon } from './FoundationIcon';
+import { readLocale } from './formatting';
+import { StatusTone, readStatusTone, statusToneIcons } from './StatusChip';
+
+/**
+ * The `notice` component: one message about the region it sits in - a sign-in error, a warning above a form, a note under a field.
+ *
+ * It is a live region: a danger or warning notice is an `alert` and any other a `status`, and the region is on the page even while empty, so the
+ * message is announced when it arrives rather than only when the page loads. With no `text` nothing is drawn but the empty region, which is what a
+ * sign-in screen's error area is until a sign-in fails. `tone` picks the icon and the status colors; the message is always words, never color alone.
+ */
+export function Notice({ element }: RegisteredComponentProps) {
+    const tone = readStatusTone(element.properties.tone ?? StatusTone.Danger);
+    const text = readOptionalString(element, 'text') ?? '';
+    const title = readOptionalString(element, 'title');
+    const urgent = tone === StatusTone.Danger || tone === StatusTone.Warning;
+
+    return (
+        <div className='foundation foundation-notice' data-scene-id={element.id} data-tone={tone} data-empty={text === '' || undefined} role={urgent ? 'alert' : 'status'} lang={readLocale(element)}>
+            {text !== '' && (
+                <>
+                    <FoundationIcon name={statusToneIcons[tone]} />
+                    <p>{title && <strong>{title} </strong>}{text}</p>
+                </>
+            )}
+        </div>
+    );
+}

package/foundation/formModel.ts

@@ -14,6 +14,7 @@ export enum FormFieldType {
     File = 'file',
     RichText = 'richText',
     Address = 'address',
+    Password = 'password',
 }
 
 /** One field of a form section. */

package/foundation/foundationComponentMetadata.ts

@@ -28,6 +28,9 @@ export const foundationComponentMetadata: Record<string, ComponentMetadata> = {
     [ComponentName.DataList]: m('Data list', ComponentCategory.DataDisplay, 'table', ['table', 'grid', 'records', 'cards', 'collection', 'list']),
     [ComponentName.TabSet]: m('Tab set', ComponentCategory.Navigation, 'panel-top', ['tabs', 'sections', 'panels']),
     [ComponentName.SubNavigation]: m('Sub-navigation', ComponentCategory.Navigation, 'panel-left', ['module', 'sections', 'rail', 'tabs']),
+    [ComponentName.DialogFrame]: m('Dialog frame', ComponentCategory.Feedback, 'panel-top', ['dialog', 'modal', 'sheet', 'drawer', 'confirm', 'header']),
+    [ComponentName.ActionButton]: m('Action button', ComponentCategory.Actions, 'mouse-pointer-click', ['button', 'action', 'submit', 'cancel', 'confirm']),
+    [ComponentName.Notice]: m('Notice', ComponentCategory.Feedback, 'circle-alert', ['message', 'error', 'alert', 'banner', 'warning']),
     [ComponentName.BulkBar]: m('Bulk bar', ComponentCategory.Actions, 'check-check', ['selection', 'bulk', 'batch', 'actions']),
     [ComponentName.GlobalSearch]: m('Search', ComponentCategory.Input, 'search', ['search', 'find', 'query']),
     [ComponentName.NotificationsButton]: m('Notifications button', ComponentCategory.Actions, 'bell', ['bell', 'alerts', 'unread']),

package/foundation/foundationDescriptors.ts

@@ -434,6 +434,46 @@ export const foundationDescriptors: ComponentDescriptor[] = [
             ...standardStateProperties.filter(property => property.path !== 'label'),
         ],
     },
+    {
+        component: key(ComponentName.DialogFrame),
+        displayName: 'Dialog frame',
+        description: 'The head of a dialog: its title, a message and the consequences it states, and a close button. It makes the dialog it opens in keep focus inside, restore it, close on Escape and be drawn centered, as a side sheet or full height.',
+        properties: [
+            text('title', 'Title', 'Content', undefined, { constraints: { required: true } }),
+            text('subtitle', 'Subtitle', 'Content'),
+            text('message', 'Message', 'Content', 'What the dialog asks or says.'),
+            { path: 'consequences', label: 'Consequences', group: 'Content', valueType: PropertyValueType.Json, editorKind: PropertyEditorKind.StringList, default: [], description: 'What will happen if the person goes ahead, one line each.' },
+            choice('placement', 'Placement', 'Appearance', { center: 'Centered', side: 'Side sheet', full: 'Full height' }, 'center', 'Where the dialog is drawn; on a phone every dialog fills the page.'),
+            choice('tone', 'Tone', 'Appearance', { default: 'Default', danger: 'Destructive' }, 'default', 'A destructive dialog is drawn in the danger colors.'),
+            text('locale', 'Locale', 'Content'),
+            { path: 'strings', label: 'Text overrides', group: 'Content', valueType: PropertyValueType.Object, editorKind: PropertyEditorKind.StringMap },
+        ],
+    },
+    {
+        component: key(ComponentName.ActionButton),
+        displayName: 'Action button',
+        description: 'One action, drawn as every action of the foundation is, that is enabled, disabled with its reason, or hidden by the permission of the user.',
+        properties: [
+            text('label', 'Label', 'Content', 'What it does - a verb, never "OK".', { constraints: { required: true } }),
+            choice('emphasis', 'Emphasis', 'Appearance', { primary: 'Primary', secondary: 'Secondary', quiet: 'Quiet', danger: 'Destructive' }, 'primary'),
+            rule('permission', 'Permission', 'Whether the action works, refuses with a reason or is not shown.'),
+            text('disabledReason', 'Reason when disabled', 'Permissions'),
+            text('targetScreen', 'Go to screen', 'Behavior', 'The screen it goes to when no behavior is attached.'),
+            text('locale', 'Locale', 'Content'),
+            { path: 'strings', label: 'Text overrides', group: 'Content', valueType: PropertyValueType.Object, editorKind: PropertyEditorKind.StringMap },
+        ],
+    },
+    {
+        component: key(ComponentName.Notice),
+        displayName: 'Notice',
+        description: 'One message about the region it sits in, announced when it arrives. Empty until it has something to say.',
+        properties: [
+            text('text', 'Message', 'Data', 'Bind to the error or note to show; empty draws nothing.'),
+            text('title', 'Title', 'Content'),
+            choice('tone', 'Tone', 'Appearance', { danger: 'Error', warning: 'Warning', info: 'Information', success: 'Success', neutral: 'Neutral' }, 'danger'),
+            text('locale', 'Locale', 'Content'),
+        ],
+    },
     {
         component: key(ComponentName.BulkBar),
         displayName: 'Bulk bar',
@@ -521,6 +561,7 @@ export const foundationDescriptors: ComponentDescriptor[] = [
         displayName: 'Form',
         description: 'Titled sections of fields in a one-to-three column grid, with inline validation, a save bar, the unsaved-changes guard and four modes.',
         properties: [
+            flag('saveAndNew', 'Offer Save and new', 'Behavior', 'Whether a create form offers Save and new next to Save; a dialog that creates one record leaves it out.', { default: true }),
             {
                 ...list('sections', 'Sections', 'Data', 'Section', [
                     text('id', 'Id', 'Data'),

package/foundation/foundationSamples.ts

@@ -131,6 +131,9 @@ export const foundationSamples: Record<string, FoundationSample> = {
         properties: { items: [{ id: 'accounts', label: 'Accounts' }, { id: 'contacts', label: 'Contacts', badge: '12' }, { id: 'deals', label: 'Deals' }] },
         data: ['Accounts', 'Contacts'], stateful: true,
     },
+    [ComponentName.DialogFrame]: { properties: { title: 'Archive product', message: 'Bamboo Watch will stop appearing in the catalog.', consequences: ['Existing orders keep it', 'It can be restored from the archive'], tone: 'danger' }, data: [], stateful: false },
+    [ComponentName.ActionButton]: { properties: { label: 'Archive product', emphasis: 'danger' }, data: [], stateful: false },
+    [ComponentName.Notice]: { properties: { text: 'The email or password is not right.', tone: 'danger' }, data: [], stateful: false },
     [ComponentName.BulkBar]: { properties: { selection: ['1', '2'], actions: ['Assign', 'Archive'] }, data: [], stateful: false },
     [ComponentName.GlobalSearch]: { properties: { placeholder: 'Search accounts', label: 'Search accounts' }, data: [], stateful: false },
     [ComponentName.NotificationsButton]: { properties: { count: 3 }, data: [], stateful: false },

package/foundation/foundationStrings.ts

@@ -203,6 +203,8 @@ export const foundationStrings = {
     matrixPermission: 'Permission',
     matrixScroll: 'Permission matrix, scrolls sideways',
     matrixGroupAll: 'Other',
+    dialogClose: 'Close {title}',
+    dialogConsequences: 'What will happen',
 } as const;
 
 /** The name of one of the foundation strings. */

package/foundation/index.ts

@@ -43,6 +43,9 @@ export * from './DataList';
 export * from './tabModel';
 export * from './TabSet';
 export * from './SubNavigation';
+export * from './DialogFrame';
+export * from './Notice';
+export * from './ActionButtonControl';
 export * from './BulkBar';
 export * from './GlobalSearch';
 export * from './NotificationsButton';

package/foundation/templates/dialogTemplates.ts

@@ -0,0 +1,114 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { Behavior, DialogTemplate, ExternalComponent, InteractionActionKind, InteractionTriggerKind } from '@cratis/scene.model';
+import { panel } from '../../gallery/elements';
+import { defaultBlueprintTemplateProvenance } from '../../templateProvenance';
+import { component, foundationTemplateProvenance, fromQuery, thumbnailOf } from './templateParts';
+
+/** What a Cancel or Close control does: close the dialog the screen opened it from, in Scene, in Stage and in the preview alike. */
+export const closeDialogBehaviors: Behavior[] = [{ bindings: [{ trigger: { kind: InteractionTriggerKind.Click }, actions: [{ kind: InteractionActionKind.CloseDialog }] }] }];
+
+/** An element that closes the dialog when it is clicked. */
+export const closingDialog = <T extends ExternalComponent>(element: T): T => ({ ...element, behaviors: closeDialogBehaviors });
+
+/**
+ * The provenance, type and category every foundation dialog carries. A dialog built from the foundation and core components needs no component library; one that
+ * uses PrimeReact widgets (`needsPrimeReact`) declares the packages it requires.
+ */
+export const dialogMetadata = (name: string, needsPrimeReact = false) =>
+    ({ ...(needsPrimeReact ? defaultBlueprintTemplateProvenance : foundationTemplateProvenance), type: 'Dialog', category: 'Foundation / Dialog', thumbnail: thumbnailOf(name) });
+
+/** One action of the foundation, by the id it is known by. */
+export const actionButton = (id: string, properties: Record<string, unknown>): ExternalComponent => component(id, 'actionButton', properties);
+
+/** The footer of a dialog: its buttons, the one that confirms last, so it is the one the eye ends on. */
+export const dialogActions = (id: string, buttons: ExternalComponent[]) => panel(`${id}-actions`, buttons);
+
+/**
+ * The quick-create dialog: a short form - six fields at most - opened from a list's header or from a lookup, to make one record without leaving the page.
+ * Cancel closes it, Create validates and saves. `FormDialog` is the general form dialog this one is the focused form of: the same shape with the heading,
+ * focus handling and the form of the foundation, which is why it is offered as the alias a quick-create button chooses.
+ */
+export const quickCreateDialogTemplate: DialogTemplate = {
+    name: 'QuickCreateDialog',
+    slots: [{ name: 'header' }, { name: 'body' }, { name: 'actions' }],
+    content: {
+        header: [component('quick-create-frame', 'dialogFrame', { title: 'New contact', subtitle: 'Only what is needed to get started' })],
+        body: [closingDialog(component('quick-create-form', 'formScreenBody', {
+            mode: 'create', saveAndNew: false, strings: { formSave: 'Create' },
+            sections: fromQuery('QuickCreateSections'), values: fromQuery('QuickCreateValues', '0'), errors: fromQuery('FormErrors', '0'),
+        }))],
+        actions: [],
+    },
+    displayName: 'Quick create',
+    description: 'A short form of six fields at most with Cancel and Create, opened without leaving the page.',
+    metadata: dialogMetadata('QuickCreateDialog'),
+};
+
+/**
+ * The lookup dialog: search, a table or list, and single or multiple selection, with Cancel and Select. Any lookup field opens it, so one dialog serves them all;
+ * `selectionMode` on the list is `single` (the default here) or `multiple`.
+ */
+export const lookupDialogTemplate: DialogTemplate = {
+    name: 'LookupDialog',
+    slots: [{ name: 'header' }, { name: 'body' }, { name: 'actions' }],
+    content: {
+        header: [component('lookup-frame', 'dialogFrame', { title: 'Select an account', subtitle: 'Search, then choose one' })],
+        body: [
+            component('lookup-search', 'globalSearch', { placeholder: 'Search accounts', label: 'Search accounts' }),
+            component('lookup-list', 'dataList', { label: 'Accounts', rows: fromQuery('LookupRows'), columns: fromQuery('LookupColumns'), titleField: 'name', selectionMode: 'single', pageSize: 6 }),
+        ],
+        actions: [dialogActions('lookup', [
+            closingDialog(actionButton('lookup-cancel', { label: 'Cancel', emphasis: 'secondary' })),
+            closingDialog(actionButton('lookup-select', { label: 'Select', emphasis: 'primary' })),
+        ])],
+    },
+    displayName: 'Lookup',
+    description: 'A search and a list to choose one or several records from, with Cancel and Select.',
+    metadata: dialogMetadata('LookupDialog'),
+};
+
+/**
+ * The side sheet: a drawer from the inline end with a header, a scrollable body and footer actions. It hosts what a page hosts - a form, or a record's
+ * tabs and related records - so a record can be edited or read from beside the list it came from.
+ */
+export const sideSheetTemplate: DialogTemplate = {
+    name: 'SideSheet',
+    slots: [{ name: 'header' }, { name: 'body' }, { name: 'actions' }],
+    content: {
+        header: [component('sheet-frame', 'dialogFrame', { title: 'Account details', subtitle: 'Edit without leaving the list', placement: 'side' })],
+        body: [closingDialog(component('sheet-form', 'formScreenBody', { mode: 'edit', sections: fromQuery('RecordSections'), values: fromQuery('RecordValues', '0'), errors: fromQuery('FormErrors', '0') }))],
+        actions: [dialogActions('sheet', [
+            closingDialog(actionButton('sheet-close', { label: 'Close', emphasis: 'secondary' })),
+            actionButton('sheet-open', { label: 'Open full page', emphasis: 'primary', targetScreen: 'RecordPage' }),
+        ])],
+    },
+    displayName: 'Side sheet',
+    description: 'A drawer from the side hosting a record or a form, with footer actions.',
+    metadata: dialogMetadata('SideSheet'),
+};
+
+/**
+ * The filter dialog: the advanced filter builder in a dialog. On a phone it fills the page, which makes it the phone's alternative to the filter panel
+ * a list shows beside its table.
+ */
+export const filterDialogTemplate: DialogTemplate = {
+    name: 'FilterDialog',
+    slots: [{ name: 'header' }, { name: 'body' }, { name: 'actions' }],
+    content: {
+        header: [component('filter-frame', 'dialogFrame', { title: 'Filters', subtitle: 'Show only the deals that match' })],
+        body: [component('filter-builder', 'filterBuilder', { fields: fromQuery('DealFilterFields'), filter: fromQuery('DealFilter', '0') })],
+        actions: [dialogActions('filter', [
+            actionButton('filter-reset', { label: 'Reset', emphasis: 'secondary' }),
+            closingDialog(actionButton('filter-cancel', { label: 'Cancel', emphasis: 'secondary' })),
+            closingDialog(actionButton('filter-apply', { label: 'Apply filters', emphasis: 'primary' })),
+        ])],
+    },
+    displayName: 'Filters',
+    description: 'The advanced filter builder in a dialog, the phone alternative to the filter panel.',
+    metadata: dialogMetadata('FilterDialog'),
+};
+
+/** The dialogs the foundation adds to the three the gallery already had. */
+export const foundationDialogTemplates: DialogTemplate[] = [quickCreateDialogTemplate, lookupDialogTemplate, sideSheetTemplate, filterDialogTemplate];

package/foundation/templates/index.ts

@@ -11,6 +11,8 @@ import { wizardScreenTemplate } from './wizardScreenTemplate';
 import { workspaceScreenTemplate } from './workspaceScreenTemplate';
 
 export * from './templateParts';
+export * from './dialogTemplates';
+export * from './stateScreenTemplates';
 export * from './boardScreenTemplate';
 export * from './dashboardScreenTemplate';
 export * from './formScreenTemplate';

package/foundation/templates/stateScreenTemplates.ts

@@ -0,0 +1,107 @@
+// Copyright (c) Cratis. All rights reserved.
+// Licensed under the MIT license. See LICENSE file in the project root for full license information.
+
+import { ScreenTemplate, TemplateMetadata } from '@cratis/scene.model';
+import { externalComponent, panel } from '../../gallery/elements';
+import { actionButton } from './dialogTemplates';
+import { column, slotLeaf } from '../../layouts/flowBuilders';
+import { component, foundationTemplateProvenance, fromQuery, thumbnailOf } from './templateParts';
+
+const metadataOf = (name: string, type: 'Auth' | 'State'): TemplateMetadata => ({ ...foundationTemplateProvenance, type, category: `Foundation / ${type}`, thumbnail: thumbnailOf(name) });
+
+/** The way back every state screen offers: home, which is always somewhere the person is allowed to be. */
+const backToDashboard = (id: string) => actionButton(id, { label: 'Back to the dashboard', emphasis: 'secondary', targetScreen: 'DashboardScreen' });
+
+/**
+ * The sign-in screen: the logo, the sign-in form, a slot for the identity providers the application offers (`providers` - buttons, each starting its
+ * provider's flow, which the application fills), an error area that is a live region and says why a sign-in failed, and a link to help. The form is
+ * made of the foundation's form components, so it validates and announces like every other form.
+ */
+export const loginScreenTemplate: ScreenTemplate = {
+    name: 'LoginScreen',
+    fitsSlot: 'content',
+    slots: [{ name: 'logo' }, { name: 'error' }, { name: 'form' }, { name: 'providers' }, { name: 'help' }],
+    arrangement: { root: column([slotLeaf('logo'), slotLeaf('error'), slotLeaf('form'), slotLeaf('providers'), slotLeaf('help')], 16) },
+    content: {
+        logo: [externalComponent('login-logo', 'logo', { label: 'Contoso', initials: 'C' })],
+        error: [component('login-error', 'notice', { text: fromQuery('SignInError', '0.message'), tone: 'danger' })],
+        form: [component('login-form', 'formScreenBody', {
+            mode: 'create', saveAndNew: false, strings: { formSave: 'Sign in', formCancel: 'Clear' },
+            sections: fromQuery('SignInSections'), values: fromQuery('SignInValues', '0'), errors: fromQuery('FormErrors', '0'),
+        })],
+        providers: [panel('login-providers', [actionButton('login-microsoft', { label: 'Continue with Microsoft', emphasis: 'secondary' }), actionButton('login-github', { label: 'Continue with GitHub', emphasis: 'secondary' })])],
+        help: [actionButton('login-help', { label: 'Need help signing in?', emphasis: 'quiet', targetScreen: 'ForbiddenScreen' })],
+    },
+    displayName: 'Sign in',
+    description: 'A sign-in form with a slot for identity providers, an error area and a help link.',
+    metadata: metadataOf('LoginScreen', 'Auth'),
+};
+
+/** The wrong address: what happened in words, a search, and the way home. */
+export const notFoundScreenTemplate: ScreenTemplate = {
+    name: 'NotFoundScreen',
+    fitsSlot: 'content',
+    slots: [{ name: 'message' }, { name: 'search' }, { name: 'actions' }],
+    arrangement: { root: column([slotLeaf('message'), slotLeaf('search'), slotLeaf('actions')], 16) },
+    content: {
+        message: [component('not-found-message', 'emptyState', { icon: 'file', headline: 'That page is not here', hint: 'The link may be old, or the thing it pointed at may have been removed.' })],
+        search: [component('not-found-search', 'globalSearch', { label: 'Search the application', placeholder: 'Search instead' })],
+        actions: [backToDashboard('not-found-home')],
+    },
+    displayName: 'Not found',
+    description: 'A wrong address explained, with a search and a link home.',
+    metadata: metadataOf('NotFoundScreen', 'State'),
+};
+
+/**
+ * The refusal: signed in, and still not allowed. It says so and offers to ask for access, and it shows nothing of what was refused - the template binds
+ * no data at all, so there is nothing to leak.
+ */
+export const forbiddenScreenTemplate: ScreenTemplate = {
+    name: 'ForbiddenScreen',
+    fitsSlot: 'content',
+    slots: [{ name: 'message' }, { name: 'actions' }],
+    arrangement: { root: column([slotLeaf('message'), slotLeaf('actions')], 16) },
+    content: {
+        message: [component('forbidden-message', 'emptyState', {
+            icon: 'lock', headline: 'You do not have access to this', hint: 'Your account is signed in, but it is not allowed here. An administrator can change that.', actionLabel: 'Request access',
+        })],
+        actions: [backToDashboard('forbidden-home')],
+    },
+    displayName: 'Forbidden',
+    description: 'A refusal that offers to request access and shows none of what was refused.',
+    metadata: metadataOf('ForbiddenScreen', 'State'),
+};
+
+/** The failure on our side: a plain message, a retry, and the support reference id a person can quote. */
+export const errorScreenTemplate: ScreenTemplate = {
+    name: 'ErrorScreen',
+    fitsSlot: 'content',
+    slots: [{ name: 'message' }, { name: 'reference' }, { name: 'actions' }],
+    arrangement: { root: column([slotLeaf('message'), slotLeaf('reference'), slotLeaf('actions')], 16) },
+    content: {
+        message: [component('error-message', 'emptyState', {
+            icon: 'alert', headline: 'Something went wrong on our side', hint: 'The team has been told. Nothing you were working on was lost.', actionLabel: 'Try again',
+        })],
+        reference: [panel('error-reference', [
+            externalComponent('error-reference-label', 'text', { text: 'Support reference' }),
+            externalComponent('error-reference-id', 'text', { text: fromQuery('SupportReference', '0.id') }),
+        ])],
+        actions: [backToDashboard('error-home')],
+    },
+    displayName: 'Error',
+    description: 'A generic failure with a retry and the support reference id to quote.',
+    metadata: metadataOf('ErrorScreen', 'State'),
+};
+
+/** The four auth and state screens of Part B 2.11. The legacy `Login`, `NotFound`, `AccessDenied` and `Error` remain as they were. */
+export const stateScreenTemplates: ScreenTemplate[] = [loginScreenTemplate, notFoundScreenTemplate, forbiddenScreenTemplate, errorScreenTemplate];
+
+/** The earlier template each spec-named one stands beside: the old name keeps working, and is the alias of the new. */
+export const foundationTemplateAliases: Record<string, string> = {
+    LoginScreen: 'Login',
+    NotFoundScreen: 'NotFound',
+    ForbiddenScreen: 'AccessDenied',
+    ErrorScreen: 'Error',
+    QuickCreateDialog: 'FormDialog',
+};