@cratis/scene.blueprint.default 4.35.0 → 4.37.0

package/dist/esm/foundation/ChecklistSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChecklistSection.js","sources":["../../../foundation/ChecklistSection.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { useEffect, useMemo, useState } from 'react';\nimport { RegisteredComponentProps, useValueOutput } from '@cratis/scene.react';\nimport { ChecklistGroup, completed, doneTaskIds, isOverdue, readChecklist, toggleTask } from './checklistModel';\nimport { ComponentState, readComponentState } from './ComponentState';\nimport { FoundationIcon } from './FoundationIcon';\nimport { formatDate, readLocale } from './formatting';\nimport { formatText, readFoundationStrings } from './foundationStrings';\nimport { readPermissionRule } from './PermissionRule';\nimport { FoundationFrame } from './StateFrame';\n\n/**\n * The `checklistSection` component: sections of tasks, each with its owner and due date, and a progress bar per section.\n *\n * `sections` give the structure (`title`, and `items` with `id`, `label`, `owner`, `due`, `done`). Ticking a task publishes the ids of all\n * done tasks as the `value` output and runs the behaviors attached to the element. An open task past its due date says \"Overdue\" in\n * words as well as in color. Progress is a labelled progress bar, so \"2 of 5 complete\" is read, not just seen. With `editPermission`\n * not enabled the tasks are shown and cannot be changed.\n */\nexport function ChecklistSection({ element, interactions, bindingOutputs }: RegisteredComponentProps) {\n    const supplied = useMemo(() => readChecklist(element.properties.sections), [element.properties.sections]);\n    const suppliedKey = JSON.stringify(supplied);\n    const [groups, setGroups] = useState<ChecklistGroup[]>(supplied);\n    const strings = readFoundationStrings(element);\n    const locale = readLocale(element);\n    const state = readComponentState(element, supplied.some(group => group.items.length > 0));\n    const locked = readPermissionRule(element, 'editPermission') !== 'enabled';\n    const now = useMemo(() => (typeof element.properties.today === 'string' ? new Date(element.properties.today) : new Date()), [element.properties.today]);\n\n    useEffect(() => setGroups(supplied), [suppliedKey]);\n    useValueOutput(bindingOutputs, doneTaskIds(groups));\n\n    return (\n        <FoundationFrame element={element} interactions={interactions} name='checklist' state={state} skeleton={[40, 100, 90, 95]}>\n            {(state === ComponentState.Ready || state === ComponentState.Partial) && groups.map((group, groupIndex) => {\n                const done = completed(group);\n                const total = group.items.length;\n                return (\n                    <section key={group.title + groupIndex} className='foundation-checklist-group' aria-labelledby={`${element.id}-group-${groupIndex}`}>\n                        <header className='foundation-checklist-header'>\n                            <h3 id={`${element.id}-group-${groupIndex}`}>{group.title}</h3>\n                            <span className='foundation-count'>{formatText(strings.checklistProgress, { done, total })}</span>\n                        </header>\n                        <div className='foundation-progress' role='progressbar' aria-label={formatText(strings.checklistItemProgress, { title: group.title })}\n                            aria-valuemin={0} aria-valuemax={total} aria-valuenow={done} aria-valuetext={formatText(strings.checklistProgress, { done, total })}>\n                            <span className='foundation-progress-bar' style={{ inlineSize: total === 0 ? '0%' : `${(done / total) * 100}%` }} />\n                        </div>\n                        {total === 0 ? <p className='foundation-count'>{strings.checklistNone}</p> : (\n                            <ul className='foundation-checklist-items'>\n                                {group.items.map(item => {\n                                    const overdue = isOverdue(item, now);\n                                    return (\n                                        <li key={item.id} className='foundation-checklist-item' data-done={item.done} data-overdue={overdue}>\n                                            <label className='foundation-check'>\n                                                <input type='checkbox' checked={item.done} disabled={locked} onChange={() => { setGroups(toggleTask(groups, item.id)); interactions?.onChange?.(); }} />\n                                                <span className='foundation-checklist-label'>{item.label}</span>\n                                            </label>\n                                            <span className='foundation-checklist-meta'>\n                                                {item.owner && <span><span className='foundation-visually-hidden'>{`${strings.checklistOwner}: `}</span><FoundationIcon name='user' /> {item.owner}</span>}\n                                                {item.due && (\n                                                    <span>\n                                                        <span className='foundation-visually-hidden'>{`${strings.checklistDue}: `}</span>\n                                                        <time dateTime={item.due}>{formatDate(item.due, locale)}</time>\n                                                        {overdue && <strong className='foundation-overdue'> · <FoundationIcon name='alert' /> {strings.checklistOverdue}</strong>}\n                                                    </span>\n                                                )}\n                                            </span>\n                                        </li>\n                                    );\n                                })}\n                            </ul>\n                        )}\n                    </section>\n                );\n            })}\n        </FoundationFrame>\n    );\n}\n"],"names":["ChecklistSection","element","interactions","bindingOutputs","supplied","useMemo","readChecklist","properties","sections","suppliedKey","JSON","stringify","groups","setGroups","useState","strings","readFoundationStrings","locale","readLocale","state","readComponentState","some","group","items","length","locked","readPermissionRule","now","today","Date","useEffect","useValueOutput","doneTaskIds","_jsx","FoundationFrame","name","skeleton","ComponentState","Ready","Partial","map","groupIndex","done","completed","total","_jsxs","section","className","aria-labelledby","id","header","h3","title","span","formatText","checklistProgress","div","role","aria-label","checklistItemProgress","aria-valuemin","aria-valuemax","aria-valuenow","aria-valuetext","style","inlineSize","p","checklistNone","ul","item","overdue","isOverdue","li","data-done","data-overdue","label","input","type","checked","disabled","onChange","toggleTask","owner","checklistOwner","FoundationIcon","due","checklistDue","time","dateTime","formatDate","strong","checklistOverdue"],"mappings":"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"}

package/dist/esm/foundation/FileUploader.d.ts

@@ -0,0 +1,3 @@
+import { RegisteredComponentProps } from '@cratis/scene.react';
+export declare function FileUploader({ element, interactions, bindingOutputs }: RegisteredComponentProps): import("react").JSX.Element;
+//# sourceMappingURL=FileUploader.d.ts.map

package/dist/esm/foundation/FileUploader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUploader.d.ts","sourceRoot":"","sources":["../../../foundation/FileUploader.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,wBAAwB,EAAkB,MAAM,qBAAqB,CAAC;AA0B/E,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE,wBAAwB,+BA2F/F"}

package/dist/esm/foundation/FileUploader.js

@@ -0,0 +1,216 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useState, useRef } from 'react';
+import { useValueOutput } from '@cratis/scene.react';
+import { readOptionalString } from '../shell/elementProperties.js';
+import { ActionButton } from './ActionButton.js';
+import { readComponentState, ComponentState } from './ComponentState.js';
+import { useFileUploaderHandler } from './FileUploaderHandler.js';
+import { FoundationIcon } from './FoundationIcon.js';
+import { readLocale } from './formatting.js';
+import { readFoundationStrings, formatText } from './foundationStrings.js';
+import { readPermissionRule } from './PermissionRule.js';
+import { FoundationFrame } from './StateFrame.js';
+import { formatBytes, UploadStatus, checkSelection, UploadRefusal } from './uploadModel.js';
+
+/**
+ * The `fileUploader` component: a drop zone and a button to choose files, checked against type and size before anything is sent.
+ *
+ * `accept` is an `accept` list, `maxSizeMb` the largest file, and `multiple` whether more than one is allowed. The zone is a real file
+ * input behind a labelled button, so it works from the keyboard and with a screen reader; dropping onto it does the same as choosing.
+ * Refusals are announced with their reason. Accepted files are listed with a remove button and a status in words; the selection
+ * (name, size, type) is published as the `value` output. With a `FileUploaderHandlerProvider` in scope the files are sent through it and
+ * marked uploading, done or failed; without one the component only collects. `actionPermission` gates choosing files.
+ */ function FileUploader({ element, interactions, bindingOutputs }) {
+    const strings = readFoundationStrings(element);
+    const locale = readLocale(element);
+    const handler = useFileUploaderHandler();
+    const [entries, setEntries] = useState([]);
+    const [problems, setProblems] = useState([]);
+    const [dragging, setDragging] = useState(false);
+    const input = useRef(null);
+    const accept = readOptionalString(element, 'accept') ?? '';
+    const maximumBytes = (typeof element.properties.maxSizeMb === 'number' ? element.properties.maxSizeMb : 0) * 1024 * 1024;
+    const multiple = element.properties.multiple !== false;
+    const rule = readPermissionRule(element, 'actionPermission');
+    const state = readComponentState(element, true);
+    const serverUrl = readOptionalString(element, 'serverUrl');
+    useValueOutput(bindingOutputs, entries.map((entry)=>({
+            name: entry.file.name,
+            size: entry.file.size,
+            type: entry.file.type,
+            status: entry.status
+        })));
+    const send = async (files)=>{
+        if (!handler) return;
+        const mark = (status)=>setEntries((current)=>current.map((entry)=>files.includes(entry.file) ? {
+                        ...entry,
+                        status
+                    } : entry));
+        mark(UploadStatus.Uploading);
+        try {
+            await handler(files, serverUrl);
+            mark(UploadStatus.Done);
+        } catch  {
+            mark(UploadStatus.Failed);
+        }
+    };
+    const take = (chosen)=>{
+        const { accepted, refused } = checkSelection(chosen, {
+            accept,
+            maximumBytes,
+            multiple
+        }, entries.length);
+        setProblems(refused.map(({ file, reason })=>reason === UploadRefusal.WrongType ? formatText(strings.uploadWrongType, {
+                name: file.name
+            }) : reason === UploadRefusal.TooLarge ? formatText(strings.uploadTooLarge, {
+                name: file.name,
+                limit: formatBytes(maximumBytes, locale)
+            }) : strings.uploadSingle));
+        if (accepted.length === 0) return;
+        setEntries((current)=>[
+                ...current,
+                ...accepted.map((file)=>({
+                        file,
+                        status: UploadStatus.Queued
+                    }))
+            ]);
+        interactions?.onChange?.();
+        void send(accepted);
+    };
+    const choose = (event)=>{
+        take(Array.from(event.target.files ?? []));
+        event.target.value = '';
+    };
+    const drop = (event)=>{
+        event.preventDefault();
+        setDragging(false);
+        if (rule === 'enabled') take(Array.from(event.dataTransfer.files));
+    };
+    const statusText = {
+        queued: strings.uploadQueued,
+        uploading: strings.uploadUploading,
+        done: strings.uploadDone,
+        failed: strings.uploadFailed
+    };
+    const limits = [
+        accept ? formatText(strings.uploadAccepts, {
+            types: accept
+        }) : '',
+        maximumBytes > 0 ? formatText(strings.uploadLimits, {
+            limit: formatBytes(maximumBytes, locale)
+        }) : ''
+    ].filter(Boolean).join(' · ');
+    return /*#__PURE__*/ jsx(FoundationFrame, {
+        element: element,
+        interactions: interactions,
+        name: "file-uploader",
+        state: state,
+        skeleton: [
+            100,
+            40
+        ],
+        children: state !== ComponentState.Loading && /*#__PURE__*/ jsxs(Fragment, {
+            children: [
+                /*#__PURE__*/ jsxs("div", {
+                    className: "foundation-dropzone",
+                    "data-dragging": dragging,
+                    onDragOver: (event)=>{
+                        event.preventDefault();
+                        setDragging(true);
+                    },
+                    onDragLeave: ()=>setDragging(false),
+                    onDrop: drop,
+                    children: [
+                        /*#__PURE__*/ jsx(FoundationIcon, {
+                            name: "upload"
+                        }),
+                        /*#__PURE__*/ jsx("span", {
+                            children: strings.uploadDrop
+                        }),
+                        /*#__PURE__*/ jsx("input", {
+                            ref: input,
+                            className: "foundation-visually-hidden",
+                            type: "file",
+                            tabIndex: -1,
+                            accept: accept || undefined,
+                            multiple: multiple,
+                            disabled: rule !== 'enabled',
+                            onChange: choose,
+                            "aria-hidden": "true"
+                        }),
+                        /*#__PURE__*/ jsx(ActionButton, {
+                            rule: rule,
+                            emphasis: "secondary",
+                            disabledReason: strings.disabledNoPermission,
+                            onClick: ()=>input.current?.click(),
+                            children: strings.uploadBrowse
+                        }),
+                        limits && /*#__PURE__*/ jsx("span", {
+                            className: "foundation-count",
+                            children: limits
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ jsx("div", {
+                    "aria-live": "polite",
+                    className: "foundation-upload-problems",
+                    children: problems.map((problem)=>/*#__PURE__*/ jsx("p", {
+                            className: "foundation-message-text",
+                            "data-tone": "danger",
+                            children: problem
+                        }, problem))
+                }),
+                entries.length > 0 && /*#__PURE__*/ jsx("ul", {
+                    className: "foundation-upload-list",
+                    "aria-label": strings.uploadSelected,
+                    children: entries.map((entry, index)=>/*#__PURE__*/ jsxs("li", {
+                            className: "foundation-upload-item",
+                            "data-status": entry.status,
+                            children: [
+                                /*#__PURE__*/ jsx(FoundationIcon, {
+                                    name: "file"
+                                }),
+                                /*#__PURE__*/ jsx("span", {
+                                    className: "foundation-upload-name",
+                                    children: entry.file.name
+                                }),
+                                /*#__PURE__*/ jsx("span", {
+                                    className: "foundation-count",
+                                    children: formatBytes(entry.file.size, locale)
+                                }),
+                                /*#__PURE__*/ jsx("span", {
+                                    className: "foundation-upload-status",
+                                    children: statusText[entry.status]
+                                }),
+                                entry.status === UploadStatus.Failed && /*#__PURE__*/ jsx("button", {
+                                    type: "button",
+                                    className: "foundation-link",
+                                    onClick: ()=>void send([
+                                            entry.file
+                                        ]),
+                                    children: strings.retry
+                                }),
+                                /*#__PURE__*/ jsx("button", {
+                                    type: "button",
+                                    className: "foundation-icon-button",
+                                    "aria-label": formatText(strings.uploadRemove, {
+                                        name: entry.file.name
+                                    }),
+                                    onClick: ()=>{
+                                        setEntries((current)=>current.filter((existing)=>existing !== entry));
+                                        interactions?.onChange?.();
+                                    },
+                                    children: /*#__PURE__*/ jsx(FoundationIcon, {
+                                        name: "close"
+                                    })
+                                })
+                            ]
+                        }, entry.file.name + index))
+                })
+            ]
+        })
+    });
+}
+
+export { FileUploader };
+//# sourceMappingURL=FileUploader.js.map

package/dist/esm/foundation/FileUploader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUploader.js","sources":["../../../foundation/FileUploader.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { ChangeEvent, DragEvent, useRef, useState } from 'react';\nimport { RegisteredComponentProps, useValueOutput } from '@cratis/scene.react';\nimport { readOptionalString } from '../shell/elementProperties';\nimport { ActionButton } from './ActionButton';\nimport { ComponentState, readComponentState } from './ComponentState';\nimport { useFileUploaderHandler } from './FileUploaderHandler';\nimport { FoundationIcon } from './FoundationIcon';\nimport { readLocale } from './formatting';\nimport { formatText, readFoundationStrings } from './foundationStrings';\nimport { readPermissionRule } from './PermissionRule';\nimport { FoundationFrame } from './StateFrame';\nimport { UploadRefusal, UploadStatus, checkSelection, formatBytes } from './uploadModel';\n\ninterface Entry {\n    file: File;\n    status: UploadStatus;\n}\n\n/**\n * The `fileUploader` component: a drop zone and a button to choose files, checked against type and size before anything is sent.\n *\n * `accept` is an `accept` list, `maxSizeMb` the largest file, and `multiple` whether more than one is allowed. The zone is a real file\n * input behind a labelled button, so it works from the keyboard and with a screen reader; dropping onto it does the same as choosing.\n * Refusals are announced with their reason. Accepted files are listed with a remove button and a status in words; the selection\n * (name, size, type) is published as the `value` output. With a `FileUploaderHandlerProvider` in scope the files are sent through it and\n * marked uploading, done or failed; without one the component only collects. `actionPermission` gates choosing files.\n */\nexport function FileUploader({ element, interactions, bindingOutputs }: RegisteredComponentProps) {\n    const strings = readFoundationStrings(element);\n    const locale = readLocale(element);\n    const handler = useFileUploaderHandler();\n    const [entries, setEntries] = useState<Entry[]>([]);\n    const [problems, setProblems] = useState<string[]>([]);\n    const [dragging, setDragging] = useState(false);\n    const input = useRef<HTMLInputElement>(null);\n    const accept = readOptionalString(element, 'accept') ?? '';\n    const maximumBytes = (typeof element.properties.maxSizeMb === 'number' ? element.properties.maxSizeMb : 0) * 1024 * 1024;\n    const multiple = element.properties.multiple !== false;\n    const rule = readPermissionRule(element, 'actionPermission');\n    const state = readComponentState(element, true);\n    const serverUrl = readOptionalString(element, 'serverUrl');\n\n    useValueOutput(bindingOutputs, entries.map(entry => ({ name: entry.file.name, size: entry.file.size, type: entry.file.type, status: entry.status })));\n\n    const send = async (files: File[]) => {\n        if (!handler) return;\n        const mark = (status: UploadStatus) => setEntries(current => current.map(entry => (files.includes(entry.file) ? { ...entry, status } : entry)));\n        mark(UploadStatus.Uploading);\n        try {\n            await handler(files, serverUrl);\n            mark(UploadStatus.Done);\n        } catch {\n            mark(UploadStatus.Failed);\n        }\n    };\n\n    const take = (chosen: File[]) => {\n        const { accepted, refused } = checkSelection(chosen, { accept, maximumBytes, multiple }, entries.length);\n        setProblems(refused.map(({ file, reason }) => reason === UploadRefusal.WrongType ? formatText(strings.uploadWrongType, { name: file.name })\n            : reason === UploadRefusal.TooLarge ? formatText(strings.uploadTooLarge, { name: file.name, limit: formatBytes(maximumBytes, locale) }) : strings.uploadSingle));\n        if (accepted.length === 0) return;\n\n        setEntries(current => [...current, ...accepted.map(file => ({ file, status: UploadStatus.Queued }))]);\n        interactions?.onChange?.();\n        void send(accepted);\n    };\n\n    const choose = (event: ChangeEvent<HTMLInputElement>) => {\n        take(Array.from(event.target.files ?? []));\n        event.target.value = '';\n    };\n    const drop = (event: DragEvent) => {\n        event.preventDefault();\n        setDragging(false);\n        if (rule === 'enabled') take(Array.from(event.dataTransfer.files));\n    };\n    const statusText: Record<UploadStatus, string> = {\n        queued: strings.uploadQueued, uploading: strings.uploadUploading, done: strings.uploadDone, failed: strings.uploadFailed,\n    };\n    const limits = [accept ? formatText(strings.uploadAccepts, { types: accept }) : '', maximumBytes > 0 ? formatText(strings.uploadLimits, { limit: formatBytes(maximumBytes, locale) }) : ''].filter(Boolean).join(' · ');\n\n    return (\n        <FoundationFrame element={element} interactions={interactions} name='file-uploader' state={state} skeleton={[100, 40]}>\n            {state !== ComponentState.Loading && (\n                <>\n                    <div className='foundation-dropzone' data-dragging={dragging} onDragOver={event => { event.preventDefault(); setDragging(true); }} onDragLeave={() => setDragging(false)} onDrop={drop}>\n                        <FoundationIcon name='upload' />\n                        <span>{strings.uploadDrop}</span>\n                        <input ref={input} className='foundation-visually-hidden' type='file' tabIndex={-1} accept={accept || undefined} multiple={multiple} disabled={rule !== 'enabled'} onChange={choose} aria-hidden='true' />\n                        <ActionButton rule={rule} emphasis='secondary' disabledReason={strings.disabledNoPermission} onClick={() => input.current?.click()}>\n                            {strings.uploadBrowse}\n                        </ActionButton>\n                        {limits && <span className='foundation-count'>{limits}</span>}\n                    </div>\n                    <div aria-live='polite' className='foundation-upload-problems'>\n                        {problems.map(problem => <p key={problem} className='foundation-message-text' data-tone='danger'>{problem}</p>)}\n                    </div>\n                    {entries.length > 0 && (\n                        <ul className='foundation-upload-list' aria-label={strings.uploadSelected}>\n                            {entries.map((entry, index) => (\n                                <li key={entry.file.name + index} className='foundation-upload-item' data-status={entry.status}>\n                                    <FoundationIcon name='file' />\n                                    <span className='foundation-upload-name'>{entry.file.name}</span>\n                                    <span className='foundation-count'>{formatBytes(entry.file.size, locale)}</span>\n                                    <span className='foundation-upload-status'>{statusText[entry.status]}</span>\n                                    {entry.status === UploadStatus.Failed && <button type='button' className='foundation-link' onClick={() => void send([entry.file])}>{strings.retry}</button>}\n                                    <button type='button' className='foundation-icon-button' aria-label={formatText(strings.uploadRemove, { name: entry.file.name })}\n                                        onClick={() => { setEntries(current => current.filter(existing => existing !== entry)); interactions?.onChange?.(); }}>\n                                        <FoundationIcon name='close' />\n                                    </button>\n                                </li>\n                            ))}\n                        </ul>\n                    )}\n                </>\n            )}\n        </FoundationFrame>\n    );\n}\n"],"names":["FileUploader","element","interactions","bindingOutputs","strings","readFoundationStrings","locale","readLocale","handler","useFileUploaderHandler","entries","setEntries","useState","problems","setProblems","dragging","setDragging","input","useRef","accept","readOptionalString","maximumBytes","properties","maxSizeMb","multiple","rule","readPermissionRule","state","readComponentState","serverUrl","useValueOutput","map","entry","name","file","size","type","status","send","files","mark","current","includes","UploadStatus","Uploading","Done","Failed","take","chosen","accepted","refused","checkSelection","length","reason","UploadRefusal","WrongType","formatText","uploadWrongType","TooLarge","uploadTooLarge","limit","formatBytes","uploadSingle","Queued","onChange","choose","event","Array","from","target","value","drop","preventDefault","dataTransfer","statusText","queued","uploadQueued","uploading","uploadUploading","done","uploadDone","failed","uploadFailed","limits","uploadAccepts","types","uploadLimits","filter","Boolean","join","_jsx","FoundationFrame","skeleton","ComponentState","Loading","_jsxs","_Fragment","div","className","data-dragging","onDragOver","onDragLeave","onDrop","FoundationIcon","span","uploadDrop","ref","tabIndex","undefined","disabled","aria-hidden","ActionButton","emphasis","disabledReason","disabledNoPermission","onClick","click","uploadBrowse","aria-live","problem","p","data-tone","ul","aria-label","uploadSelected","index","li","data-status","button","retry","uploadRemove","existing"],"mappings":"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"}

package/dist/esm/foundation/FileUploaderHandler.d.ts

@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+export type FileUploaderHandler = (files: File[], serverUrl?: string) => Promise<void>;
+export declare function FileUploaderHandlerProvider({ handler, children }: {
+    handler?: FileUploaderHandler;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare const useFileUploaderHandler: () => FileUploaderHandler | undefined;
+//# sourceMappingURL=FileUploaderHandler.d.ts.map

package/dist/esm/foundation/FileUploaderHandler.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUploaderHandler.d.ts","sourceRoot":"","sources":["../../../foundation/FileUploaderHandler.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAA6B,MAAM,OAAO,CAAC;AAQ7D,MAAM,MAAM,mBAAmB,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,SAAS,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;AAKvF,wBAAgB,2BAA2B,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,EAAE;IAAE,OAAO,CAAC,EAAE,mBAAmB,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAExH;AAGD,eAAO,MAAM,sBAAsB,QAAO,mBAAmB,GAAG,SAAgC,CAAC"}

package/dist/esm/foundation/FileUploaderHandler.js

@@ -0,0 +1,14 @@
+import { jsx } from 'react/jsx-runtime';
+import { useContext, createContext } from 'react';
+
+const Context = /*#__PURE__*/ createContext(undefined);
+/** Provides the upload handler to the file uploaders below it. */ function FileUploaderHandlerProvider({ handler, children }) {
+    return /*#__PURE__*/ jsx(Context.Provider, {
+        value: handler,
+        children: children
+    });
+}
+/** The handler in scope, if any. */ const useFileUploaderHandler = ()=>useContext(Context);
+
+export { FileUploaderHandlerProvider, useFileUploaderHandler };
+//# sourceMappingURL=FileUploaderHandler.js.map

package/dist/esm/foundation/FileUploaderHandler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUploaderHandler.js","sources":["../../../foundation/FileUploaderHandler.tsx"],"sourcesContent":["// Copyright (c) Cratis. All rights reserved.\n// Licensed under the MIT license. See LICENSE file in the project root for full license information.\n\nimport { ReactNode, createContext, useContext } from 'react';\n\n/**\n * What sends the accepted files somewhere: a host's server client, kept out of the portable package.\n *\n * The signature is the one `@cratis/scene.primereact` uses for its `fileUpload`, so a host hands the same function to both. A handler that\n * rejects marks the files as failed, with a retry; without a handler the uploader only collects and publishes the selection.\n */\nexport type FileUploaderHandler = (files: File[], serverUrl?: string) => Promise<void>;\n\nconst Context = createContext<FileUploaderHandler | undefined>(undefined);\n\n/** Provides the upload handler to the file uploaders below it. */\nexport function FileUploaderHandlerProvider({ handler, children }: { handler?: FileUploaderHandler; children: ReactNode }) {\n    return <Context.Provider value={handler}>{children}</Context.Provider>;\n}\n\n/** The handler in scope, if any. */\nexport const useFileUploaderHandler = (): FileUploaderHandler | undefined => useContext(Context);\n"],"names":["Context","createContext","undefined","FileUploaderHandlerProvider","handler","children","_jsx","Provider","value","useFileUploaderHandler","useContext"],"mappings":";;;AAaA,MAAMA,wBAAUC,aAAAA,CAA+CC,SAAAA,CAAAA;AAE/D,mEACO,SAASC,2BAAAA,CAA4B,EAAEC,OAAO,EAAEC,QAAQ,EAA0D,EAAA;IACrH,qBAAOC,GAAA,CAACN,QAAQO,QAAQ,EAAA;QAACC,KAAAA,EAAOJ,OAAAA;AAAUC,QAAAA,QAAAA,EAAAA;;AAC9C;AAEA,qCACO,MAAMI,sBAAAA,GAAyB,IAAuCC,WAAWV,OAAAA;;"}

package/dist/esm/foundation/Foundation.stories.d.ts

@@ -34,4 +34,20 @@ export declare const ColumnChooserLight: Story;
 export declare const ColumnChooserDark: Story;
 export declare const SavedViewsMenuLight: Story;
 export declare const SavedViewsMenuDark: Story;
+export declare const ChecklistLight: Story;
+export declare const ChecklistDark: Story;
+export declare const ActivityFeedLight: Story;
+export declare const ActivityFeedDark: Story;
+export declare const AvatarStackLight: Story;
+export declare const AvatarStackDark: Story;
+export declare const FileUploaderLight: Story;
+export declare const FileUploaderDark: Story;
+export declare const ApprovalChainLight: Story;
+export declare const ApprovalChainDark: Story;
+export declare const OrgTreeLight: Story;
+export declare const OrgTreeDark: Story;
+export declare const PermissionMatrixLight: Story;
+export declare const PermissionMatrixDark: Story;
+export declare const ApprovalChainRejectedLight: Story;
+export declare const PermissionMatrixReadOnlyDark: Story;
 //# sourceMappingURL=Foundation.stories.d.ts.map

package/dist/esm/foundation/Foundation.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Foundation.stories.d.ts","sourceRoot":"","sources":["../../../foundation/Foundation.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAMtD,QAAA,MAAM,IAAI;;;;QAGQ,MAAM;;CACiB,CAAC;eAE3B,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,eAAe,EAAE,KAAyE,CAAC;AACxG,eAAO,MAAM,cAAc,EAAE,KAAwE,CAAC;AACtG,eAAO,MAAM,aAAa,EAAE,KAAuE,CAAC;AACpG,eAAO,MAAM,YAAY,EAAE,KAAsE,CAAC;AAClG,eAAO,MAAM,mBAAmB,EAAE,KAAiJ,CAAC;AACpL,eAAO,MAAM,cAAc,EAAE,KAAwE,CAAC;AACtG,eAAO,MAAM,aAAa,EAAE,KAAuE,CAAC;AACpG,eAAO,MAAM,eAAe,EAAE,KAAyE,CAAC;AACxG,eAAO,MAAM,cAAc,EAAE,KAAwE,CAAC;AACtG,eAAO,MAAM,cAAc,EAAE,KAA2E,CAAC;AACzG,eAAO,MAAM,aAAa,EAAE,KAA0E,CAAC;AACvG,eAAO,MAAM,aAAa,EAAE,KAAwG,CAAC;AACrI,eAAO,MAAM,YAAY,EAAE,KAAuG,CAAC;AACnI,eAAO,MAAM,iBAAiB,EAAE,KAA4G,CAAC;AAC7I,eAAO,MAAM,gBAAgB,EAAE,KAA2G,CAAC;AAC3I,eAAO,MAAM,eAAe,EAAE,KAA0G,CAAC;AACzI,eAAO,MAAM,cAAc,EAAE,KAAyG,CAAC;AACvI,eAAO,MAAM,gBAAgB,EAAE,KAA2N,CAAC;AAC3P,eAAO,MAAM,eAAe,EAAE,KAA0N,CAAC;AACzP,eAAO,MAAM,kBAAkB,EAAE,KAA4E,CAAC;AAC9G,eAAO,MAAM,iBAAiB,EAAE,KAA2E,CAAC;AAC5G,eAAO,MAAM,kBAAkB,EAAE,KAA4E,CAAC;AAC9G,eAAO,MAAM,iBAAiB,EAAE,KAA2E,CAAC;AAC5G,eAAO,MAAM,mBAAmB,EAAE,KAA6E,CAAC;AAChH,eAAO,MAAM,kBAAkB,EAAE,KAA4E,CAAC"}
+{"version":3,"file":"Foundation.stories.d.ts","sourceRoot":"","sources":["../../../foundation/Foundation.stories.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAEvD,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAMtD,QAAA,MAAM,IAAI;;;;QAGQ,MAAM;;CACiB,CAAC;eAE3B,IAAI;AAEnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,eAAe,EAAE,KAAyE,CAAC;AACxG,eAAO,MAAM,cAAc,EAAE,KAAwE,CAAC;AACtG,eAAO,MAAM,aAAa,EAAE,KAAuE,CAAC;AACpG,eAAO,MAAM,YAAY,EAAE,KAAsE,CAAC;AAClG,eAAO,MAAM,mBAAmB,EAAE,KAAiJ,CAAC;AACpL,eAAO,MAAM,cAAc,EAAE,KAAwE,CAAC;AACtG,eAAO,MAAM,aAAa,EAAE,KAAuE,CAAC;AACpG,eAAO,MAAM,eAAe,EAAE,KAAyE,CAAC;AACxG,eAAO,MAAM,cAAc,EAAE,KAAwE,CAAC;AACtG,eAAO,MAAM,cAAc,EAAE,KAA2E,CAAC;AACzG,eAAO,MAAM,aAAa,EAAE,KAA0E,CAAC;AACvG,eAAO,MAAM,aAAa,EAAE,KAAwG,CAAC;AACrI,eAAO,MAAM,YAAY,EAAE,KAAuG,CAAC;AACnI,eAAO,MAAM,iBAAiB,EAAE,KAA4G,CAAC;AAC7I,eAAO,MAAM,gBAAgB,EAAE,KAA2G,CAAC;AAC3I,eAAO,MAAM,eAAe,EAAE,KAA0G,CAAC;AACzI,eAAO,MAAM,cAAc,EAAE,KAAyG,CAAC;AACvI,eAAO,MAAM,gBAAgB,EAAE,KAA2N,CAAC;AAC3P,eAAO,MAAM,eAAe,EAAE,KAA0N,CAAC;AACzP,eAAO,MAAM,kBAAkB,EAAE,KAA4E,CAAC;AAC9G,eAAO,MAAM,iBAAiB,EAAE,KAA2E,CAAC;AAC5G,eAAO,MAAM,kBAAkB,EAAE,KAA4E,CAAC;AAC9G,eAAO,MAAM,iBAAiB,EAAE,KAA2E,CAAC;AAC5G,eAAO,MAAM,mBAAmB,EAAE,KAA6E,CAAC;AAChH,eAAO,MAAM,kBAAkB,EAAE,KAA4E,CAAC;AAC9G,eAAO,MAAM,cAAc,EAAE,KAA+E,CAAC;AAC7G,eAAO,MAAM,aAAa,EAAE,KAA8E,CAAC;AAC3G,eAAO,MAAM,iBAAiB,EAAE,KAA2E,CAAC;AAC5G,eAAO,MAAM,gBAAgB,EAAE,KAA0E,CAAC;AAC1G,eAAO,MAAM,gBAAgB,EAAE,KAA0E,CAAC;AAC1G,eAAO,MAAM,eAAe,EAAE,KAAyE,CAAC;AACxG,eAAO,MAAM,iBAAiB,EAAE,KAA2E,CAAC;AAC5G,eAAO,MAAM,gBAAgB,EAAE,KAA0E,CAAC;AAC1G,eAAO,MAAM,kBAAkB,EAAE,KAAmF,CAAC;AACrH,eAAO,MAAM,iBAAiB,EAAE,KAAkF,CAAC;AACnH,eAAO,MAAM,YAAY,EAAE,KAAsE,CAAC;AAClG,eAAO,MAAM,WAAW,EAAE,KAAqE,CAAC;AAChG,eAAO,MAAM,qBAAqB,EAAE,KAA+E,CAAC;AACpH,eAAO,MAAM,oBAAoB,EAAE,KAA8E,CAAC;AAClH,eAAO,MAAM,0BAA0B,EAAE,KAAgP,CAAC;AAC1R,eAAO,MAAM,4BAA4B,EAAE,KAA0H,CAAC"}

package/dist/esm/foundation/Foundation.stories.js

@@ -31,4 +31,20 @@ export const ColumnChooserLight = { args: { component: ComponentName.ColumnChoos
 export const ColumnChooserDark = { args: { component: ComponentName.ColumnChooser, theme: 'dark' } };
 export const SavedViewsMenuLight = { args: { component: ComponentName.SavedViewsMenu, theme: 'light' } };
 export const SavedViewsMenuDark = { args: { component: ComponentName.SavedViewsMenu, theme: 'dark' } };
+export const ChecklistLight = { args: { component: ComponentName.ChecklistSection, theme: 'light' } };
+export const ChecklistDark = { args: { component: ComponentName.ChecklistSection, theme: 'dark' } };
+export const ActivityFeedLight = { args: { component: ComponentName.ActivityFeed, theme: 'light' } };
+export const ActivityFeedDark = { args: { component: ComponentName.ActivityFeed, theme: 'dark' } };
+export const AvatarStackLight = { args: { component: ComponentName.AvatarStack, theme: 'light' } };
+export const AvatarStackDark = { args: { component: ComponentName.AvatarStack, theme: 'dark' } };
+export const FileUploaderLight = { args: { component: ComponentName.FileUploader, theme: 'light' } };
+export const FileUploaderDark = { args: { component: ComponentName.FileUploader, theme: 'dark' } };
+export const ApprovalChainLight = { args: { component: ComponentName.ApprovalChainStepper, theme: 'light' } };
+export const ApprovalChainDark = { args: { component: ComponentName.ApprovalChainStepper, theme: 'dark' } };
+export const OrgTreeLight = { args: { component: ComponentName.OrgTree, theme: 'light' } };
+export const OrgTreeDark = { args: { component: ComponentName.OrgTree, theme: 'dark' } };
+export const PermissionMatrixLight = { args: { component: ComponentName.PermissionMatrix, theme: 'light' } };
+export const PermissionMatrixDark = { args: { component: ComponentName.PermissionMatrix, theme: 'dark' } };
+export const ApprovalChainRejectedLight = { args: { component: ComponentName.ApprovalChainStepper, theme: 'light', properties: { steps: [{ label: 'Team lead', state: 'approved' }, { label: 'Finance', state: 'rejected', comment: 'Over budget.' }, { label: 'Director' }] } } };
+export const PermissionMatrixReadOnlyDark = { args: { component: ComponentName.PermissionMatrix, theme: 'dark', properties: { editPermission: 'disabled' } } };
 //# sourceMappingURL=Foundation.stories.js.map

package/dist/esm/foundation/Foundation.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"Foundation.stories.js","sourceRoot":"","sources":["../../../foundation/Foundation.stories.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Foundation.stories.js","sourceRoot":"","sources":["../../../foundation/Foundation.stories.tsx"],"names":[],"mappings":"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"}

package/dist/esm/foundation/OrgTree.d.ts

@@ -0,0 +1,3 @@
+import { RegisteredComponentProps } from '@cratis/scene.react';
+export declare function OrgTree({ element, interactions, bindingOutputs }: RegisteredComponentProps): import("react").JSX.Element;
+//# sourceMappingURL=OrgTree.d.ts.map

package/dist/esm/foundation/OrgTree.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrgTree.d.ts","sourceRoot":"","sources":["../../../foundation/OrgTree.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,wBAAwB,EAAkB,MAAM,qBAAqB,CAAC;AAe/E,wBAAgB,OAAO,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,cAAc,EAAE,EAAE,wBAAwB,+BAiF1F"}

package/dist/esm/foundation/OrgTree.js

@@ -0,0 +1,186 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo, useState, useEffect } from 'react';
+import { useValueOutput } from '@cratis/scene.react';
+import { readComponentState, ComponentState } from './ComponentState.js';
+import { FoundationIcon } from './FoundationIcon.js';
+import { readFoundationStrings, formatText } from './foundationStrings.js';
+import { readOrgNodes, buildOrgTree, expandedToDepth, visibleNodes, placements, descendantCount } from './orgModel.js';
+import { FoundationFrame } from './StateFrame.js';
+
+/**
+ * The `orgTree` component: an organization as an expandable tree of people and units.
+ *
+ * `nodes` are flat rows - `id`, `label`, `title`, `parentId` - as a query returns them; the tree is built from them, so someone whose manager is
+ * missing becomes a root and a reporting cycle is cut instead of looping. It follows the ARIA tree pattern: one tab stop, Up and Down move,
+ * Right expands or enters, Left collapses or goes to the parent, Home and End jump, Enter or Space selects. Each item says how many reports it
+ * has in words. The selected id is published as the `value` output; `expandedDepth` is how many levels are open at first.
+ */ function OrgTree({ element, interactions, bindingOutputs }) {
+    const nodes = useMemo(()=>readOrgNodes(element.properties.nodes), [
+        element.properties.nodes
+    ]);
+    const roots = useMemo(()=>buildOrgTree(nodes), [
+        nodes
+    ]);
+    const depth = typeof element.properties.expandedDepth === 'number' ? element.properties.expandedDepth : 2;
+    const initial = useMemo(()=>expandedToDepth(roots, depth), [
+        roots,
+        depth
+    ]);
+    const [expanded, setExpanded] = useState(initial);
+    const [selected, setSelected] = useState(typeof element.properties.selected === 'string' ? element.properties.selected : undefined);
+    const [focused, setFocused] = useState(undefined);
+    const strings = readFoundationStrings(element);
+    const state = readComponentState(element, nodes.length > 0);
+    const visible = visibleNodes(roots, expanded);
+    const placed = useMemo(()=>placements(roots), [
+        roots
+    ]);
+    const tabStop = visible.find((node)=>node.id === focused)?.id ?? visible.find((node)=>node.id === selected)?.id ?? visible[0]?.id;
+    const emptyElement = state === ComponentState.Empty ? {
+        ...element,
+        properties: {
+            emptyHeadline: strings.orgNone,
+            ...element.properties
+        }
+    } : element;
+    useEffect(()=>setExpanded(initial), [
+        initial
+    ]);
+    useValueOutput(bindingOutputs, selected);
+    const move = (node, event)=>{
+        const index = visible.indexOf(node);
+        const focus = (target)=>{
+            if (!target) return;
+            event.preventDefault();
+            setFocused(target.id);
+            requestAnimationFrame(()=>document.getElementById(`${element.id}-${target.id}`)?.focus());
+        };
+        const toggle = (open)=>setExpanded((current)=>{
+                const next = new Set(current);
+                if (open) next.add(node.id);
+                else next.delete(node.id);
+                return next;
+            });
+        const parent = placed.get(node.id)?.parent;
+        switch(event.key){
+            case 'ArrowDown':
+                focus(visible[index + 1]);
+                break;
+            case 'ArrowUp':
+                focus(visible[index - 1]);
+                break;
+            case 'Home':
+                focus(visible[0]);
+                break;
+            case 'End':
+                focus(visible[visible.length - 1]);
+                break;
+            case 'ArrowRight':
+                if (node.children.length > 0 && !expanded.has(node.id)) {
+                    event.preventDefault();
+                    toggle(true);
+                } else focus(node.children[0]);
+                break;
+            case 'ArrowLeft':
+                if (node.children.length > 0 && expanded.has(node.id)) {
+                    event.preventDefault();
+                    toggle(false);
+                } else focus(parent);
+                break;
+            case 'Enter':
+            case ' ':
+                event.preventDefault();
+                setSelected(node.id);
+                interactions?.onSelect?.();
+                break;
+        }
+    };
+    return /*#__PURE__*/ jsx(FoundationFrame, {
+        element: emptyElement,
+        interactions: interactions,
+        name: "org-tree",
+        state: state,
+        skeleton: [
+            50,
+            70,
+            70,
+            60
+        ],
+        children: (state === ComponentState.Ready || state === ComponentState.Partial) && /*#__PURE__*/ jsx("ul", {
+            role: "tree",
+            "aria-label": strings.orgTree,
+            className: "foundation-tree",
+            children: visible.map((node)=>{
+                const siblings = placed.get(node.id)?.siblings ?? [
+                    node
+                ];
+                const reports = descendantCount(node);
+                const open = expanded.has(node.id);
+                return /*#__PURE__*/ jsxs("li", {
+                    id: `${element.id}-${node.id}`,
+                    role: "treeitem",
+                    tabIndex: node.id === tabStop ? 0 : -1,
+                    "aria-level": node.depth,
+                    "aria-setsize": siblings.length,
+                    "aria-posinset": siblings.findIndex((sibling)=>sibling.id === node.id) + 1,
+                    "aria-expanded": node.children.length > 0 ? open : undefined,
+                    "aria-selected": node.id === selected,
+                    className: "foundation-tree-item",
+                    "data-selected": node.id === selected,
+                    style: {
+                        paddingInlineStart: `calc(var(--foundation-space-4) * ${node.depth - 1})`
+                    },
+                    onKeyDown: (event)=>move(node, event),
+                    onFocus: ()=>setFocused(node.id),
+                    onClick: ()=>{
+                        setSelected(node.id);
+                        interactions?.onSelect?.();
+                    },
+                    children: [
+                        node.children.length > 0 ? /*#__PURE__*/ jsx("button", {
+                            type: "button",
+                            tabIndex: -1,
+                            className: "foundation-icon-button",
+                            "aria-hidden": "true",
+                            onClick: (event)=>{
+                                event.stopPropagation();
+                                setExpanded((current)=>{
+                                    const next = new Set(current);
+                                    if (open) next.delete(node.id);
+                                    else next.add(node.id);
+                                    return next;
+                                });
+                            },
+                            children: /*#__PURE__*/ jsx(FoundationIcon, {
+                                name: open ? 'chevron-down' : 'chevron-right'
+                            })
+                        }) : /*#__PURE__*/ jsx("span", {
+                            className: "foundation-tree-spacer"
+                        }),
+                        /*#__PURE__*/ jsxs("span", {
+                            className: "foundation-tree-text",
+                            children: [
+                                /*#__PURE__*/ jsx("strong", {
+                                    children: node.label
+                                }),
+                                node.title && /*#__PURE__*/ jsx("span", {
+                                    className: "foundation-count",
+                                    children: node.title
+                                })
+                            ]
+                        }),
+                        reports > 0 && /*#__PURE__*/ jsx("span", {
+                            className: "foundation-count",
+                            children: formatText(strings.orgReports, {
+                                count: reports
+                            })
+                        })
+                    ]
+                }, node.id);
+            })
+        })
+    });
+}
+
+export { OrgTree };
+//# sourceMappingURL=OrgTree.js.map