@vuu-ui/grid-layout 4.0.0-alpha.1

package/src/GridLayout.css.js

@@ -0,0 +1,119 @@
+const css = `
+.vuuGridLayout {
+  --vuu-layout-tabs-height: 32px;
+  --vuu-grid-gap: 6px;
+  --vuu-grid-header-height: 25px;
+  padding: var(--vuu-grid-gap);
+  display: grid;
+
+  &.vuuResizing {
+    transition: all .3s;
+  }
+
+  &.vuuFullPage {
+    width: 100vw;
+    height: 100vh;
+  }
+}
+
+.vuu-detached {
+  visibility: hidden;
+}
+
+.vuu-stacked {
+  &.has-h-splitter {
+    margin-top: calc(var(--vuu-layout-tabs-height) + 7px);
+  }
+
+  &:not(.has-h-splitter) {
+    margin-top: var(--vuu-layout-tabs-height);
+  }
+}
+
+.vuuGridLayoutItemHeader-close {
+  margin-left: auto;
+}
+
+.vuuGridLayoutStackedItemContent, .vuuGridLayoutItemContent {
+  flex: auto;
+  position: relative;
+}
+
+.vuuGridLayoutStackedItemContent > *, .vuuGridLayoutItemContent > * {
+  position: absolute;
+  inset: 0;
+}
+
+.vuuDropTarget-east {
+  --grid-dropzone-top: 0px;
+  --grid-dropzone-left: 50%;
+  --grid-dropzone-bottom: 0px;
+  --grid-dropzone-right: 0px;
+}
+
+.vuuDropTarget-west {
+  --grid-dropzone-top: 0px;
+  --grid-dropzone-left: 0px;
+  --grid-dropzone-bottom: 0px;
+  --grid-dropzone-right: 50%;
+}
+
+.vuuDropTarget-north {
+  --grid-dropzone-top: 0px;
+  --grid-dropzone-left: 0px;
+  --grid-dropzone-bottom: 50%;
+  --grid-dropzone-right: 0px;
+}
+
+.vuuDropTarget-south {
+  --grid-dropzone-top: 50%;
+  --grid-dropzone-left: 0px;
+  --grid-dropzone-bottom: 0px;
+  --grid-dropzone-right: 0px;
+}
+
+.vuuDropTarget-centre {
+  --grid-dropzone-top: 0px;
+  --grid-dropzone-left: 0px;
+  --grid-dropzone-bottom: 0px;
+  --grid-dropzone-right: 0px;
+}
+
+.vuu-stacked {
+  & > .vuuDropTarget-north, & > .vuuDropTarget-east, & > .vuuDropTarget-west {
+    --grid-dropzone-top: -32px;
+  }
+}
+
+.vuuDropTarget-centre:after, .vuuDropTarget-north:after, .vuuDropTarget-east:after, .vuuDropTarget-south:after, .vuuDropTarget-west:after {
+  content: "";
+  opacity: .3;
+  pointer-events: none;
+  top: var(--grid-dropzone-top);
+  right: var(--grid-dropzone-right);
+  bottom: var(--grid-dropzone-bottom);
+  left: var(--grid-dropzone-left);
+  z-index: 100;
+  background-color: #6495ed;
+  transition-property: top, left, right, bottom;
+  transition-duration: .3s;
+  transition-timing-function: ease-in-out;
+  position: absolute;
+}
+
+.vuuDropTarget-header:after {
+  content: "";
+  opacity: .3;
+  pointer-events: none;
+  z-index: 100;
+  background-color: red;
+  transition-property: top, left, right, bottom;
+  transition-duration: .3s;
+  transition-timing-function: ease-in-out;
+  position: absolute;
+  inset: 0;
+}
+
+
+`;
+export default css;

package/src/GridLayout.js

@@ -0,0 +1,120 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { registerComponent } from "@vuu-ui/vuu-utils";
+import { useIdMemo } from "@salt-ds/core";
+import { useComponentCssInjection } from "@salt-ds/styles";
+import { useWindow } from "@salt-ds/window";
+import clsx from "clsx";
+import { cloneElement } from "react";
+import { DragDropProviderNext } from "./drag-drop-next/DragDropProviderNext.js";
+import { getGridArea } from "./grid-layout-utils.js";
+import { GridLayoutContext } from "./GridLayoutContext.js";
+import { GridLayoutStackedItem } from "./GridLayoutStackedtem.js";
+import { GridPlaceholder } from "./GridPlaceholder.js";
+import { useGridLayout } from "./useGridLayout.js";
+import { useGridSplitterResizing } from "./useGridSplitterResizing.js";
+import { GridSplitter } from "./GridSplitter.js";
+import GridLayout from "./GridLayout.css";
+const classBase = "vuuGridLayout";
+const startsAtHorizontalSplitter = (splitter, splitters)=>"vertical" === splitter.ariaOrientation && splitters.some((candidate)=>"horizontal" === candidate.ariaOrientation && candidate.row.start === splitter.row.start && candidate.column.start <= splitter.column.start && candidate.column.end > splitter.column.start);
+const NO_DRAG_SOURCES = {};
+const GridLayout_GridLayout = ({ id: idProp, children: childrenProp, className, "full-page": fullPage, colsAndRows, onClick, onChange, placeholderContent, rowResizeDistribution = "adjacent", style: styleProp, ...htmlAttributes })=>{
+    const targetWindow = useWindow();
+    useComponentCssInjection({
+        testId: "vuu-grid-layout",
+        css: GridLayout,
+        window: targetWindow
+    });
+    const id = useIdMemo(idProp);
+    const { children, containerCallback, dispatchGridLayoutAction, gridController, gridLayoutModel, gridModel, gridSnapshot, nonContentGridItems: { placeholders, splitters, stackIds }, onCancelDrag, onCancelTabDrag, onDetachTab, onDragEnd, onDragLeave, onDragPreview, onDragStart, onDrop, onDropStackedItem, stackTemplates } = useGridLayout({
+        children: childrenProp,
+        id,
+        colsAndRows,
+        onChange
+    });
+    const splitterLayoutProps = useGridSplitterResizing({
+        gridLayoutModel,
+        gridModel,
+        gridController,
+        id,
+        onClick,
+        rowResizeDistribution
+    });
+    const style = {
+        gridTemplateColumns: gridSnapshot.columns.map(({ size })=>size).join(" "),
+        gridTemplateRows: gridSnapshot.rows.map(({ size })=>size).join(" "),
+        ...styleProp
+    };
+    const snapshotItemById = new Map(gridSnapshot.items.map((item)=>[
+            item.id,
+            item
+        ]));
+    return /*#__PURE__*/ jsx(GridLayoutContext.Provider, {
+        value: {
+            dispatchGridLayoutAction,
+            gridController,
+            gridLayoutModel,
+            gridModel,
+            gridSnapshot,
+            id,
+            onDragEnd,
+            onDragLeave,
+            onDragPreview,
+            onDragStart,
+            onDrop
+        },
+        children: /*#__PURE__*/ jsx(DragDropProviderNext, {
+            dragSources: NO_DRAG_SOURCES,
+            onCancelDrag: onCancelDrag,
+            onCancelTabDrag: onCancelTabDrag,
+            onDetachTab: onDetachTab,
+            onDrop: onDropStackedItem,
+            children: /*#__PURE__*/ jsxs("div", {
+                ...htmlAttributes,
+                ...splitterLayoutProps,
+                id: id,
+                ref: containerCallback,
+                style: style,
+                className: clsx(classBase, className, {
+                    vuuFullPage: fullPage
+                }),
+                children: [
+                    stackIds.map((stackId)=>{
+                        const template = stackTemplates.get(stackId);
+                        return template ? /*#__PURE__*/ cloneElement(template, {
+                            key: stackId
+                        }) : /*#__PURE__*/ jsx(GridLayoutStackedItem, {
+                            id: stackId
+                        }, stackId);
+                    }),
+                    children,
+                    placeholders.map(({ id: placeholderId, snapshotId })=>{
+                        const placeholder = snapshotItemById.get(snapshotId);
+                        if (!placeholder) throw Error(`[GridLayout] canonical placeholder #${placeholderId} not found`);
+                        return /*#__PURE__*/ jsx(GridPlaceholder, {
+                            id: placeholderId,
+                            style: {
+                                gridArea: `${placeholder.row.start}/${placeholder.column.start}/${placeholder.row.start + placeholder.row.span}/${placeholder.column.start + placeholder.column.span}`
+                            },
+                            children: placeholderContent
+                        }, placeholderId);
+                    }),
+                    splitters.map((splitter)=>/*#__PURE__*/ jsx(GridSplitter, {
+                            "aria-controls": splitter.controls,
+                            ariaOrientation: splitter.ariaOrientation,
+                            "data-resized-child-items-after": splitter.resizedChildItems.after.join(" "),
+                            "data-resized-child-items-before": splitter.resizedChildItems.before.join(" "),
+                            id: splitter.id,
+                            offsetStart: startsAtHorizontalSplitter(splitter, splitters),
+                            orientation: splitter.orientation,
+                            style: {
+                                gridArea: getGridArea(splitter)
+                            }
+                        }, splitter.id))
+                ]
+            })
+        })
+    });
+};
+GridLayout_GridLayout.displayName = "Grid";
+registerComponent("Grid", GridLayout_GridLayout, "container");
+export { GridLayout_GridLayout as GridLayout };

package/src/GridLayoutContext.js

@@ -0,0 +1,58 @@
+import { createContext, useContext } from "react";
+const unconfiguredGridLayoutDispatch = (action)=>console.log(`dispatch ${action.type}, have you forgotten to provide a GridLayoutProvider ?`);
+const isTypedComponentTemplate = (template)=>"component" in template;
+const sourceIsComponent = (source)=>source?.type === "component";
+const sourceIsTabbedComponent = (source)=>source?.type === "tabbed-component";
+const sourceIsTemplate = (source)=>source?.type === "template";
+const GridLayoutContext = createContext({
+    dispatchGridLayoutAction: unconfiguredGridLayoutDispatch,
+    id: "",
+    onDragLeave: ()=>void 0,
+    onDragPreview: ()=>false,
+    onDragStart: ()=>console.log("no GridLayoutProvider"),
+    onDrop: ()=>false
+});
+const useGridLayoutDispatch = ()=>{
+    const { dispatchGridLayoutAction } = useContext(GridLayoutContext);
+    return dispatchGridLayoutAction;
+};
+const useGridLayoutDropHandler = ()=>{
+    const { onDrop } = useContext(GridLayoutContext);
+    return onDrop;
+};
+const useGridLayoutDragPreviewHandler = ()=>{
+    const { onDragPreview } = useContext(GridLayoutContext);
+    return onDragPreview;
+};
+const useGridLayoutDragLeaveHandler = ()=>{
+    const { onDragLeave } = useContext(GridLayoutContext);
+    return onDragLeave;
+};
+const useGridLayoutDragEndHandler = ()=>{
+    const { onDragEnd } = useContext(GridLayoutContext);
+    return onDragEnd;
+};
+const useGridLayoutDragStartHandler = ()=>{
+    const { onDragStart } = useContext(GridLayoutContext);
+    return onDragStart;
+};
+const useGridModel = ()=>{
+    const { gridModel } = useContext(GridLayoutContext);
+    if (gridModel) return gridModel;
+    throw Error("[useGridModel] no gridModel, did you forget to use a GridLayout");
+};
+const useGridController = ()=>{
+    const { gridController } = useContext(GridLayoutContext);
+    if (gridController) return gridController;
+    throw Error("[useGridController] no gridController, did you forget to use a GridLayout");
+};
+const useGridSnapshot = ()=>{
+    const { gridSnapshot } = useContext(GridLayoutContext);
+    if (gridSnapshot) return gridSnapshot;
+    throw Error("[useGridSnapshot] no gridSnapshot, did you forget to use a GridLayout");
+};
+const useGridLayoutId = ()=>{
+    const { id } = useContext(GridLayoutContext);
+    return id;
+};
+export { GridLayoutContext, isTypedComponentTemplate, sourceIsComponent, sourceIsTabbedComponent, sourceIsTemplate, useGridController, useGridLayoutDispatch, useGridLayoutDragEndHandler, useGridLayoutDragLeaveHandler, useGridLayoutDragPreviewHandler, useGridLayoutDragStartHandler, useGridLayoutDropHandler, useGridLayoutId, useGridModel, useGridSnapshot };

package/src/GridLayoutDocument.js

@@ -0,0 +1,307 @@
+import { normalizeGridSnapshot } from "./grid-snapshot-adapters.js";
+import { toJsonValue } from "./json-value.js";
+const GRID_LAYOUT_DOCUMENT_KIND = "grid-layout";
+const GRID_LAYOUT_DOCUMENT_VERSION = 2;
+const cloneAndFreeze = (value)=>{
+    if ("object" != typeof value || null === value) return value;
+    if (Array.isArray(value)) return Object.freeze(value.map(cloneAndFreeze));
+    return Object.freeze(Object.fromEntries(Object.entries(value).map(([key, entry])=>[
+            key,
+            cloneAndFreeze(entry)
+        ])));
+};
+const immutableGridLayoutDocument = (document)=>cloneAndFreeze(document);
+class GridLayoutDocumentCodecError extends Error {
+    issue;
+    constructor(issue){
+        super(`${issue.path}: ${issue.message}`), this.issue = issue;
+        this.name = "GridLayoutDocumentCodecError";
+    }
+}
+const failure = (code, message, path, version)=>({
+        error: {
+            code,
+            message,
+            path,
+            version
+        },
+        ok: false
+    });
+const isRecord = (value)=>"object" == typeof value && null !== value && !Array.isArray(value);
+const compareIds = (left, right)=>left < right ? -1 : left > right ? 1 : 0;
+const durableItem = ({ column, componentInstanceId, contentVisible, dropTarget, header, id, minHeight, minWidth, resizeable, row, title })=>({
+        column: {
+            ...column
+        },
+        ...void 0 === componentInstanceId ? {} : {
+            componentInstanceId
+        },
+        ...void 0 === contentVisible ? {} : {
+            contentVisible
+        },
+        ...void 0 === dropTarget ? {} : {
+            dropTarget
+        },
+        ...void 0 === header ? {} : {
+            header
+        },
+        id,
+        ...void 0 === minHeight ? {} : {
+            minHeight
+        },
+        ...void 0 === minWidth ? {} : {
+            minWidth
+        },
+        ...void 0 === resizeable ? {} : {
+            resizeable
+        },
+        row: {
+            ...row
+        },
+        ...void 0 === title ? {} : {
+            title
+        }
+    });
+const persistedLayoutToSnapshot = (layout)=>normalizeGridSnapshot({
+        columns: layout.columns.map((size)=>({
+                size: size
+            })),
+        gridId: layout.id,
+        items: layout.items,
+        revision: 0,
+        rows: layout.rows.map((size)=>({
+                size: size
+            })),
+        stacks: layout.stacks
+    });
+const encodeGridLayoutDocument = (snapshot, registry, { componentSettings, placeholderIds = [] })=>{
+    let normalized;
+    try {
+        normalized = normalizeGridSnapshot(snapshot);
+    } catch (cause) {
+        return failure("INVALID_DOCUMENT", cause instanceof Error ? cause.message : "invalid grid snapshot", "$.layout");
+    }
+    const placeholderIdSet = new Set(placeholderIds);
+    if (placeholderIdSet.size !== placeholderIds.length) return failure("INVALID_DOCUMENT", "placeholder ids must be unique", "$.layout.placeholderIds");
+    const layoutItemIds = new Set(normalized.items.map(({ id })=>id));
+    for (const placeholderId of placeholderIdSet)if (!layoutItemIds.has(placeholderId)) return failure("INVALID_DOCUMENT", `placeholder "${placeholderId}" has no matching layout item`, "$.layout.placeholderIds");
+    const componentReferenceIds = new Set(normalized.items.filter(({ id })=>!placeholderIdSet.has(id)).map(({ componentInstanceId, id })=>componentInstanceId ?? id));
+    const referencedComponents = new Map();
+    for (const { componentInstanceId, id } of normalized.items){
+        if (placeholderIdSet.has(id)) continue;
+        const componentId = componentInstanceId ?? id;
+        const previousItemId = referencedComponents.get(componentId);
+        if (previousItemId) return failure("DUPLICATE_COMPONENT_ID", `component "${componentId}" is referenced by items "${previousItemId}" and "${id}"`, `$.layout.items.${id}.componentInstanceId`);
+        referencedComponents.set(componentId, id);
+    }
+    const componentIds = new Set();
+    const components = [];
+    for (const component of [
+        ...componentSettings
+    ].sort((a, b)=>compareIds(a.id, b.id))){
+        if (componentIds.has(component.id)) return failure("DUPLICATE_COMPONENT_ID", `component id "${component.id}" is duplicated`, "$.components");
+        componentIds.add(component.id);
+        if (!componentReferenceIds.has(component.id)) return failure("UNEXPECTED_COMPONENT_SETTINGS", `component "${component.id}" has no matching layout item reference`, "$.components");
+        const encoded = registry.encode(component);
+        if (!encoded.ok) return {
+            error: {
+                code: "COMPONENT_SETTINGS_ERROR",
+                componentError: encoded.error,
+                message: encoded.error.message,
+                path: `$.components.${component.id}${encoded.error.path.slice(1)}`,
+                version: encoded.error.version
+            },
+            ok: false
+        };
+        components.push(encoded.value);
+    }
+    for (const { componentInstanceId, id } of normalized.items){
+        if (placeholderIdSet.has(id) && void 0 !== componentInstanceId) return failure("INVALID_DOCUMENT", `placeholder "${id}" must not reference a component`, `$.layout.items.${id}.componentInstanceId`);
+        const componentId = componentInstanceId ?? id;
+        if (!componentIds.has(componentId) && !placeholderIdSet.has(id)) return failure("MISSING_COMPONENT_SETTINGS", `layout item "${id}" references missing component "${componentId}"`, `$.layout.items.${id}`);
+    }
+    const document = {
+        components,
+        kind: GRID_LAYOUT_DOCUMENT_KIND,
+        layout: {
+            columns: normalized.columns.map(({ size })=>size),
+            id: normalized.gridId,
+            items: normalized.items.map(durableItem).sort((a, b)=>compareIds(a.id, b.id)),
+            placeholderIds: [
+                ...placeholderIdSet
+            ].sort(),
+            rows: normalized.rows.map(({ size })=>size),
+            stacks: normalized.stacks.map((stack)=>({
+                    id: stack.id,
+                    itemIds: [
+                        ...stack.itemIds
+                    ],
+                    selectedItemId: stack.selectedItemId
+                })).sort((a, b)=>compareIds(a.id, b.id))
+        },
+        version: GRID_LAYOUT_DOCUMENT_VERSION
+    };
+    const json = toJsonValue(document);
+    return json.ok ? {
+        ok: true,
+        value: immutableGridLayoutDocument(document)
+    } : failure("INVALID_DOCUMENT", json.error.message, json.error.path);
+};
+const migrateDocument = (value)=>{
+    if ("number" != typeof value.version || !Number.isInteger(value.version)) return failure("INVALID_DOCUMENT", "document version must be an integer", "$.version");
+    if (value.version === GRID_LAYOUT_DOCUMENT_VERSION) return {
+        ok: true,
+        value
+    };
+    if (1 !== value.version) return failure("UNSUPPORTED_DOCUMENT_VERSION", `GridLayout document version ${String(value.version)} is not supported`, "$.version", "number" == typeof value.version ? value.version : void 0);
+    if (!isRecord(value.layout) || "string" != typeof value.layout.gridId) return failure("DOCUMENT_MIGRATION_FAILED", "version 1 layout.gridId must be a string", "$.layout.gridId", 1);
+    const { gridId, stacks = [], ...layout } = value.layout;
+    return {
+        ok: true,
+        value: {
+            ...value,
+            layout: {
+                ...layout,
+                id: gridId,
+                placeholderIds: [],
+                stacks
+            },
+            version: GRID_LAYOUT_DOCUMENT_VERSION
+        }
+    };
+};
+const parseComponent = (value, index)=>{
+    const path = `$.components[${index}]`;
+    if (!isRecord(value)) return failure("INVALID_DOCUMENT", "component must be an object", path);
+    const unexpectedField = Object.keys(value).find((field)=>![
+            "id",
+            "settings",
+            "type",
+            "version"
+        ].includes(field));
+    if (unexpectedField) return failure("INVALID_DOCUMENT", `unexpected component field "${unexpectedField}"`, `${path}.${unexpectedField}`);
+    if ("string" != typeof value.id || !value.id || "string" != typeof value.type || !value.type || !Number.isInteger(value.version) || "number" != typeof value.version) return failure("INVALID_DOCUMENT", "component id, type and integer version are required", path);
+    const settings = toJsonValue(value.settings, `${path}.settings`);
+    if (!settings.ok) return failure("INVALID_DOCUMENT", settings.error.message, settings.error.path);
+    return {
+        ok: true,
+        value: {
+            id: value.id,
+            settings: settings.value,
+            type: value.type,
+            version: value.version
+        }
+    };
+};
+const decodeGridLayoutDocument = (input, registry)=>{
+    const detached = toJsonValue(input);
+    if (!detached.ok || !isRecord(detached.value)) return failure("INVALID_DOCUMENT", detached.ok ? "document must be an object" : detached.error.message, detached.ok ? "$" : detached.error.path);
+    if (detached.value.kind !== GRID_LAYOUT_DOCUMENT_KIND) return failure("INVALID_DISCRIMINATOR", `expected document kind "${GRID_LAYOUT_DOCUMENT_KIND}"`, "$.kind");
+    const migrated = migrateDocument(detached.value);
+    if (!migrated.ok) return migrated;
+    const value = migrated.value;
+    const unexpectedDocumentField = Object.keys(value).find((field)=>![
+            "components",
+            "kind",
+            "layout",
+            "version"
+        ].includes(field));
+    if (unexpectedDocumentField) return failure("INVALID_DOCUMENT", `unexpected document field "${unexpectedDocumentField}"`, `$.${unexpectedDocumentField}`);
+    if (!isRecord(value.layout) || !Array.isArray(value.components)) return failure("INVALID_DOCUMENT", "document layout and components are required", "$");
+    const unexpectedLayoutField = Object.keys(value.layout).find((field)=>![
+            "columns",
+            "id",
+            "items",
+            "placeholderIds",
+            "rows",
+            "stacks"
+        ].includes(field));
+    if (unexpectedLayoutField) return failure("INVALID_DOCUMENT", `unexpected layout field "${unexpectedLayoutField}"`, `$.layout.${unexpectedLayoutField}`);
+    const { columns, id, items, placeholderIds, rows, stacks } = value.layout;
+    if ("string" != typeof id || !Array.isArray(columns) || !Array.isArray(rows) || !Array.isArray(items) || !Array.isArray(placeholderIds) || !Array.isArray(stacks)) return failure("INVALID_DOCUMENT", "layout id, columns, rows, items, placeholderIds and stacks are required", "$.layout");
+    let snapshot;
+    try {
+        snapshot = persistedLayoutToSnapshot({
+            columns: columns,
+            id,
+            items: items,
+            placeholderIds: placeholderIds,
+            rows: rows,
+            stacks: stacks
+        });
+    } catch (cause) {
+        return failure("INVALID_DOCUMENT", cause instanceof Error ? cause.message : "invalid canonical layout", "$.layout");
+    }
+    const itemIds = new Set(snapshot.items.map(({ id: itemId })=>itemId));
+    const parsedPlaceholderIds = new Set();
+    for(let index = 0; index < placeholderIds.length; index += 1){
+        const placeholderId = placeholderIds[index];
+        if ("string" != typeof placeholderId || !itemIds.has(placeholderId) || parsedPlaceholderIds.has(placeholderId)) return failure("INVALID_DOCUMENT", "placeholder id must identify one unique layout item", `$.layout.placeholderIds[${index}]`);
+        parsedPlaceholderIds.add(placeholderId);
+    }
+    const componentItemById = new Map();
+    for (const { componentInstanceId, id: itemId } of snapshot.items){
+        if (parsedPlaceholderIds.has(itemId)) {
+            if (void 0 !== componentInstanceId) return failure("INVALID_DOCUMENT", `placeholder "${itemId}" must not reference a component`, `$.layout.items.${itemId}.componentInstanceId`);
+            continue;
+        }
+        const componentId = componentInstanceId ?? itemId;
+        const previousItemId = componentItemById.get(componentId);
+        if (previousItemId) return failure("DUPLICATE_COMPONENT_ID", `component "${componentId}" is referenced by items "${previousItemId}" and "${itemId}"`, `$.layout.items.${itemId}.componentInstanceId`);
+        componentItemById.set(componentId, itemId);
+    }
+    const seen = new Set();
+    const components = [];
+    const encodedComponents = [];
+    for(let index = 0; index < value.components.length; index += 1){
+        const parsed = parseComponent(value.components[index], index);
+        if (!parsed.ok) return parsed;
+        if (seen.has(parsed.value.id)) return failure("DUPLICATE_COMPONENT_ID", `component id "${parsed.value.id}" is duplicated`, `$.components[${index}].id`);
+        if (!componentItemById.has(parsed.value.id)) return failure("UNEXPECTED_COMPONENT_SETTINGS", `component "${parsed.value.id}" has no matching layout item reference`, `$.components[${index}].id`);
+        seen.add(parsed.value.id);
+        encodedComponents.push(parsed.value);
+        const decoded = registry.decode(parsed.value);
+        if (!decoded.ok) return {
+            error: {
+                code: "COMPONENT_SETTINGS_ERROR",
+                componentError: decoded.error,
+                message: decoded.error.message,
+                path: `$.components[${index}]${decoded.error.path.slice(1)}`,
+                version: decoded.error.version
+            },
+            ok: false
+        };
+        components.push(decoded.value);
+    }
+    for (const [componentId, itemId] of componentItemById)if (!seen.has(componentId)) return failure("MISSING_COMPONENT_SETTINGS", `layout item "${itemId}" references missing component "${componentId}"`, `$.layout.items.${itemId}`);
+    for (const placeholderId of parsedPlaceholderIds)if (seen.has(placeholderId)) return failure("INVALID_DOCUMENT", `placeholder "${placeholderId}" also has component settings`, "$.layout.placeholderIds");
+    const document = {
+        components: encodedComponents.sort((a, b)=>compareIds(a.id, b.id)),
+        kind: GRID_LAYOUT_DOCUMENT_KIND,
+        layout: {
+            columns: snapshot.columns.map(({ size })=>size),
+            id: snapshot.gridId,
+            items: snapshot.items.map(durableItem).sort((a, b)=>compareIds(a.id, b.id)),
+            placeholderIds: [
+                ...parsedPlaceholderIds
+            ].sort(),
+            rows: snapshot.rows.map(({ size })=>size),
+            stacks: snapshot.stacks.map((stack)=>({
+                    ...stack,
+                    itemIds: [
+                        ...stack.itemIds
+                    ]
+                })).sort((a, b)=>compareIds(a.id, b.id))
+        },
+        version: GRID_LAYOUT_DOCUMENT_VERSION
+    };
+    return {
+        ok: true,
+        value: {
+            components,
+            document: immutableGridLayoutDocument(document),
+            snapshot
+        }
+    };
+};
+export { GRID_LAYOUT_DOCUMENT_KIND, GRID_LAYOUT_DOCUMENT_VERSION, GridLayoutDocumentCodecError, decodeGridLayoutDocument, encodeGridLayoutDocument, immutableGridLayoutDocument };