@elaraai/e3-ui-components 1.0.83 → 1.0.84

package/dist/index.js

@@ -20,19 +20,19 @@ var __privateWrapper = (obj, member, setter, getter) => ({
 var _focused, _cleanup, _setup, _a, _provider, _providerCalled, _b, _online, _cleanup2, _setup2, _c, _gcTimeout, _d, _initialState, _revertState, _cache, _client, _retryer, _defaultOptions, _abortSignalConsumed, _Query_instances, isInitialPausedFetch_fn, dispatch_fn, _e, _client2, _observers, _mutationCache, _retryer2, _Mutation_instances, dispatch_fn2, _f, _mutations, _scopes, _mutationId, _g, _queries, _h, _queryCache, _mutationCache2, _defaultOptions2, _queryDefaults, _mutationDefaults, _mountCount, _unsubscribeFocus, _unsubscribeOnline, _i, _j;
 import { variant, SortedMap, compareFor, EastError, fromEastTypeValue, East, none as none$1, some, OptionType, BooleanType, NullType, ConflictError, equalFor, toEastTypeValue, PatchType, diffFor, applyFor, encodeBeast2For, decodeBeast2For, BlobType, StringType, IntegerType, isTypeValueEqual, StructType, walkPatch, pathToString, pathDisplay, parseFor, printFor, FloatType, equivalentFor, prunePatchFor, detectConflictsFor, mergeWithResolutionsFor, validatePatchFor, canonicalTypeValue, ArrayType, EastTypeValueType, defaultValue, DateTimeType } from "@elaraai/east";
 import { EastTypeType, formatDateTime, parseDateTimeFormatted, tokenizeDateTimeFormat } from "@elaraai/east/internal";
-import { DataBindModeType, DataBindPrimitives, bindPlatformFn, DataPagedPrimitives, bindPagedPlatformFn, bindPagedPinnedPlatformFn, FuncBindPrimitives, FuncErrorType, FuncStatusType, funcBindPlatformFn, RecordBindPrimitives, recordBindPlatformFn, Diff, Ontology, FuncBindHandleType, Experiment, decisionBindPlatformFn, DecisionBindPrimitives, DecisionConstraintType, DiffBindingType, CommitStateType, VerdictType, AnswerType, judgementInputType, DecisionType, DecisionQueue, DecisionJournal } from "@elaraai/e3-ui/internal";
+import { DataBindModeType, DataBindPrimitives, bindPlatformFn, DataPagedPrimitives, bindPagedPlatformFn, bindPagedPinnedPlatformFn, FuncBindPrimitives, FuncErrorType, FuncStatusType, funcBindPlatformFn, RecordBindPrimitives, recordBindPlatformFn, Diff, Ontology, FuncBindHandleType, Experiment, decisionBindPlatformFn, DecisionBindPrimitives, DecisionConstraintType, DiffBindingType, CommitStateType, VerdictType, AnswerType, judgementInputType, DecisionType, DecisionQueue, DecisionJournal, StudioKeyType, StudioPageComponent, saveCells, Studio, nameWriteRefusal, libraryTemplates, libraryPages, libraryProjects, publishRefusal, publishSummary, inspectorSelection, canvasTiles, palettePages, paletteCards, builderKeys, StudioCellType, StudioBuilderComponent, StudioLibraryComponent } from "@elaraai/e3-ui/internal";
 import { registerReactiveTracker, registerPlatformImplementation, StateRuntime, getRegisteredPlatformImplementations, boundSliceConfig } from "@elaraai/east-ui-components/platform";
 import { TreePathType, DatasetStatusType, pathToString as pathToString$1 } from "@elaraai/e3-types";
 import { workspaceStatus, datasetListAt, datasetList, dataflowExecuteLaunch, datasetSet, datasetGet, ApiError, DatasetHashMismatchError, datasetGetStatus, datasetFindKey, datasetGetPage, workspaceFunctionCall, workspaceFunctionList, workspaceRecordHistory, workspaceRecordMutate, workspaceRecordDescribe, repoCreate, repoGc, repoGcStart, repoGcStatus, repoList, repoRemove, repoStatus, packageExport, packageGet, packageImport, packageList, packageRemove, workspaceCreate, workspaceDeploy, workspaceExport, workspaceGet, workspaceList, workspaceRemove, datasetListRecursive, datasetListRecursivePaths, datasetListWithStatus, taskExecutionList, taskGet, taskList, dataflowCancel, dataflowExecute, dataflowExecutePoll, dataflowGraph, taskLogs } from "@elaraai/e3-api-client";
 import { SeekQueryType, SeekRangeType, slicePredicateMatches, ValueTree } from "@elaraai/east-ui";
 import { jsx as jsx$1, Fragment, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import React__default, { useId, useMemo, useContext, createContext, useRef, useState, useEffect, useCallback, useSyncExternalStore, memo, forwardRef, useLayoutEffect, Fragment as Fragment$1, Component } from "react";
-import { Box, Flex, Text, HStack, Input, useSlotRecipe, useRecipe, VStack, useToken, Drawer, Portal, Field, NativeSelect, Textarea, chakra, Tooltip, SegmentGroup, Menu, HoverCard, useChakraContext, Spinner, Code, Clipboard, IconButton, Button, Tabs, Badge, useTabs } from "@chakra-ui/react";
-import { formatters, useFormatters, useDataStable, implementUIComponent, getSomeorUndefined, formatPredicate, SliceEditPopover, SlicePredicateBuilder, EastChakraSelect, EastChakraStringInput, EastChakraDateTimeInput, EastChakraFloatInput, EastChakraIntegerInput, useSliceReactivity, useContainerBelow, usePersistedState, SliceRailCluster, EastChakraComponent, ClauseChip, StateImpl, NavImpl, SliceImpl, SliceApplyImpl, OverlayImpl, ClipboardImpl, DownloadImpl, ShareImpl, LoadingIcon, DatasetKeySearch, EastChakraValueTree, keyRangePredicates, createUIStore, UIStoreProvider } from "@elaraai/east-ui-components";
+import React__default, { useId, useMemo, useContext, createContext, useRef, useState, useEffect, useCallback, useSyncExternalStore, memo, forwardRef, useLayoutEffect, Fragment as Fragment$1, createElement as createElement$1, Component } from "react";
+import { Box, Flex, Text, HStack, Input, useSlotRecipe, useRecipe, VStack, useToken, Drawer, Portal, Field, NativeSelect, Textarea, chakra, Tooltip, SegmentGroup, Menu, HoverCard, useChakraContext, Spinner, createListCollection, Select, Button, Code, Clipboard, IconButton, Tabs, Badge, useTabs } from "@chakra-ui/react";
+import { formatters, useFormatters, useDataStable, implementUIComponent, getSomeorUndefined, formatPredicate, SliceEditPopover, SlicePredicateBuilder, EastChakraSelect, EastChakraStringInput, EastChakraDateTimeInput, EastChakraFloatInput, EastChakraIntegerInput, useSliceReactivity, useContainerBelow, usePersistedState, SliceRailCluster, EastChakraComponent, ClauseChip, StateRuntime as StateRuntime$1, EmptyStateView, BannerView, SnapGridTiles, useTrackedEvaluation, DockPane, EastChakraLibrary, SnapGridEditor, LibraryLayoutSwitch, Toolbar, StateImpl, NavImpl, SliceImpl, SliceApplyImpl, OverlayImpl, ClipboardImpl, DownloadImpl, ShareImpl, LoadingIcon, DatasetKeySearch, EastChakraValueTree, keyRangePredicates, createUIStore, UIStoreProvider } from "@elaraai/east-ui-components";
 import { DatasetKeySearch as DatasetKeySearch2 } from "@elaraai/east-ui-components";
 import { createPortal } from "react-dom";
-import { sliceMatches, pruneRetainedPages } from "@elaraai/east-ui/internal";
+import { sliceMatches, EditingDraftFieldType, Editing, pruneRetainedPages } from "@elaraai/east-ui/internal";
 import { QueryClient as QueryClient$1, QueryClientProvider, useMutation, useQuery, useQueryClient, keepPreviousData } from "@tanstack/react-query";
 import { useVirtualizer } from "@tanstack/react-virtual";
 var Subscribable = class {
@@ -4846,7 +4846,7 @@ function createInMemoryFunctionApi(functions2) {
         name: def.name,
         inputTypes: def.inputTypes,
         outputType: def.outputType,
-        runner: variant("east_node", { platforms: [] })
+        runner: variant("east_node", { platforms: [], decode: variant("lazy", null) })
       }));
     },
     async call(_workspace, fnName, req) {
@@ -8450,6 +8450,16 @@ var faMinus = {
   iconName: "minus",
   icon: [448, 512, [8211, 8722, 10134, "subtract"], "f068", "M0 256c0-17.7 14.3-32 32-32l384 0c17.7 0 32 14.3 32 32s-14.3 32-32 32L32 288c-17.7 0-32-14.3-32-32z"]
 };
+var faMagnifyingGlass = {
+  prefix: "fas",
+  iconName: "magnifying-glass",
+  icon: [512, 512, [128269, "search"], "f002", "M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376C296.3 401.1 253.9 416 208 416 93.1 416 0 322.9 0 208S93.1 0 208 0 416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"]
+};
+var faArrowsUpToLine = {
+  prefix: "fas",
+  iconName: "arrows-up-to-line",
+  icon: [448, 512, [], "e4c2", "M32 0C14.3 0 0 14.3 0 32S14.3 64 32 64l384 0c17.7 0 32-14.3 32-32S433.7 0 416 0L32 0zm86.6 137.4c-12.5-12.5-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L64 237.3 64 480c0 17.7 14.3 32 32 32s32-14.3 32-32l0-242.7 9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-64-64zm256 0c-12.5-12.5-32.8-12.5-45.3 0l-64 64c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l9.4-9.4 0 242.7c0 17.7 14.3 32 32 32s32-14.3 32-32l0-242.7 9.4 9.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-64-64z"]
+};
 var faEquals = {
   prefix: "fas",
   iconName: "equals",
@@ -8460,6 +8470,16 @@ var faChevronUp = {
   iconName: "chevron-up",
   icon: [448, 512, [], "f077", "M201.4 105.4c12.5-12.5 32.8-12.5 45.3 0l192 192c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 173.3 54.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l192-192z"]
 };
+var faFolderOpen = {
+  prefix: "fas",
+  iconName: "folder-open",
+  icon: [576, 512, [128194, 128449, 61717], "f07c", "M56 225.6L32.4 296.2 32.4 96c0-35.3 28.7-64 64-64l138.7 0c13.8 0 27.3 4.5 38.4 12.8l38.4 28.8c5.5 4.2 12.3 6.4 19.2 6.4l117.3 0c35.3 0 64 28.7 64 64l0 16-365.4 0c-41.3 0-78 26.4-91.1 65.6zM477.8 448L99 448c-32.8 0-55.9-32.1-45.5-63.2l48-144C108 221.2 126.4 208 147 208l378.8 0c32.8 0 55.9 32.1 45.5 63.2l-48 144c-6.5 19.6-24.9 32.8-45.5 32.8z"]
+};
+var faArrowsUpDown = {
+  prefix: "fas",
+  iconName: "arrows-up-down",
+  icon: [256, 512, ["arrows-v"], "f07d", "M150.6-22.6c-12.5-12.5-32.8-12.5-45.3 0l-96 96c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L96 77.3 96 434.7 54.6 393.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l96 96c6 6 14.1 9.4 22.6 9.4s16.6-3.4 22.6-9.4l96-96c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-41.4 41.4 0-357.5 41.4 41.4c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-96-96z"]
+};
 var faCode = {
   prefix: "fas",
   iconName: "code",
@@ -8470,6 +8490,16 @@ var faTerminal = {
   iconName: "terminal",
   icon: [512, 512, [], "f120", "M9.4 118.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3l-160 160c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L146.7 256 9.4 118.6zM224 384l256 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-256 0c-17.7 0-32-14.3-32-32s14.3-32 32-32z"]
 };
+var faFolder = {
+  prefix: "fas",
+  iconName: "folder",
+  icon: [512, 512, [128193, 128447, 61716, "folder-blank"], "f07b", "M64 448l384 0c35.3 0 64-28.7 64-64l0-240c0-35.3-28.7-64-64-64L298.7 80c-6.9 0-13.7-2.2-19.2-6.4L241.1 44.8C230 36.5 216.5 32 202.7 32L64 32C28.7 32 0 60.7 0 96L0 384c0 35.3 28.7 64 64 64z"]
+};
+var faArrowsToDot = {
+  prefix: "fas",
+  iconName: "arrows-to-dot",
+  icon: [512, 512, [], "e4be", "M256 0c17.7 0 32 14.3 32 32l0 32 32 0c12.9 0 24.6 7.8 29.6 19.8s2.2 25.7-6.9 34.9l-64 64c-12.5 12.5-32.8 12.5-45.3 0l-64-64c-9.2-9.2-11.9-22.9-6.9-34.9S179.1 64 192 64l32 0 0-32c0-17.7 14.3-32 32-32zM169.4 393.4l64-64c12.5-12.5 32.8-12.5 45.3 0l64 64c9.2 9.2 11.9 22.9 6.9 34.9S332.9 448 320 448l-32 0 0 32c0 17.7-14.3 32-32 32s-32-14.3-32-32l0-32-32 0c-12.9 0-24.6-7.8-29.6-19.8s-2.2-25.7 6.9-34.9zM32 224l32 0 0-32c0-12.9 7.8-24.6 19.8-29.6s25.7-2.2 34.9 6.9l64 64c12.5 12.5 12.5 32.8 0 45.3l-64 64c-9.2 9.2-22.9 11.9-34.9 6.9S64 332.9 64 320l0-32-32 0c-17.7 0-32-14.3-32-32s14.3-32 32-32zm297.4 54.6c-12.5-12.5-12.5-32.8 0-45.3l64-64c9.2-9.2 22.9-11.9 34.9-6.9S448 179.1 448 192l0 32 32 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-32 0 0 32c0 12.9-7.8 24.6-19.8 29.6s-25.7 2.2-34.9-6.9l-64-64zM256 224a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"]
+};
 var faArrowUp = {
   prefix: "fas",
   iconName: "arrow-up",
@@ -8505,16 +8535,31 @@ var faPen = {
   iconName: "pen",
   icon: [512, 512, [128394], "f304", "M352.9 21.2L308 66.1 445.9 204 490.8 159.1C504.4 145.6 512 127.2 512 108s-7.6-37.6-21.2-51.1L455.1 21.2C441.6 7.6 423.2 0 404 0s-37.6 7.6-51.1 21.2zM274.1 100L58.9 315.1c-10.7 10.7-18.5 24.1-22.6 38.7L.9 481.6c-2.3 8.3 0 17.3 6.2 23.4s15.1 8.5 23.4 6.2l127.8-35.5c14.6-4.1 27.9-11.8 38.7-22.6L412 237.9 274.1 100z"]
 };
+var faMobileScreen = {
+  prefix: "fas",
+  iconName: "mobile-screen",
+  icon: [384, 512, ["mobile-android-alt"], "f3cf", "M16 64C16 28.7 44.7 0 80 0L304 0c35.3 0 64 28.7 64 64l0 384c0 35.3-28.7 64-64 64L80 512c-35.3 0-64-28.7-64-64L16 64zM128 440c0 13.3 10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-80 0c-13.3 0-24 10.7-24 24zM304 64l-224 0 0 304 224 0 0-304z"]
+};
 var faChevronDown = {
   prefix: "fas",
   iconName: "chevron-down",
   icon: [448, 512, [], "f078", "M201.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 338.7 54.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"]
 };
+var faArrowDownZA = {
+  prefix: "fas",
+  iconName: "arrow-down-z-a",
+  icon: [512, 512, ["sort-alpha-desc", "sort-alpha-down-alt"], "f881", "M230.6 390.6l-80 80c-12.5 12.5-32.8 12.5-45.3 0l-80-80c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L96 370.7 96 64c0-17.7 14.3-32 32-32s32 14.3 32 32l0 306.7 25.4-25.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3zM288 64c0-17.7 14.3-32 32-32l128 0c12.9 0 24.6 7.8 29.6 19.8s2.2 25.7-6.9 34.9L397.3 160 448 160c17.7 0 32 14.3 32 32s-14.3 32-32 32l-128 0c-12.9 0-24.6-7.8-29.6-19.8s-2.2-25.7 6.9-34.9L370.8 96 320 96c-17.7 0-32-14.3-32-32zM412.6 273.7l80 160c7.9 15.8 1.5 35-14.3 42.9s-35 1.5-42.9-14.3l-7.2-14.3-88.4 0-7.2 14.3c-7.9 15.8-27.1 22.2-42.9 14.3s-22.2-27.1-14.3-42.9l80-160c5.4-10.8 16.5-17.7 28.6-17.7s23.2 6.8 28.6 17.7zM384 359.6l-20.2 40.4 40.4 0-20.2-40.4z"]
+};
 var faTriangleExclamation = {
   prefix: "fas",
   iconName: "triangle-exclamation",
   icon: [512, 512, [9888, "exclamation-triangle", "warning"], "f071", "M256 0c14.7 0 28.2 8.1 35.2 21l216 400c6.7 12.4 6.4 27.4-.8 39.5S486.1 480 472 480L40 480c-14.1 0-27.2-7.4-34.4-19.5s-7.5-27.1-.8-39.5l216-400c7-12.9 20.5-21 35.2-21zm0 352a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm0-192c-18.2 0-32.7 15.5-31.4 33.7l7.4 104c.9 12.5 11.4 22.3 23.9 22.3 12.6 0 23-9.7 23.9-22.3l7.4-104c1.3-18.2-13.1-33.7-31.4-33.7z"]
 };
+var faLock = {
+  prefix: "fas",
+  iconName: "lock",
+  icon: [384, 512, [128274], "f023", "M128 96l0 64 128 0 0-64c0-35.3-28.7-64-64-64s-64 28.7-64 64zM64 160l0-64C64 25.3 121.3-32 192-32S320 25.3 320 96l0 64c35.3 0 64 28.7 64 64l0 224c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 224c0-35.3 28.7-64 64-64z"]
+};
 var faDownload = {
   prefix: "fas",
   iconName: "download",
@@ -8530,16 +8575,36 @@ var faCopy = {
   iconName: "copy",
   icon: [448, 512, [], "f0c5", "M192 0c-35.3 0-64 28.7-64 64l0 256c0 35.3 28.7 64 64 64l192 0c35.3 0 64-28.7 64-64l0-200.6c0-17.4-7.1-34.1-19.7-46.2L370.6 17.8C358.7 6.4 342.8 0 326.3 0L192 0zM64 128c-35.3 0-64 28.7-64 64L0 448c0 35.3 28.7 64 64 64l192 0c35.3 0 64-28.7 64-64l0-16-64 0 0 16-192 0 0-256 16 0 0-64-16 0z"]
 };
+var faCaretDown = {
+  prefix: "fas",
+  iconName: "caret-down",
+  icon: [320, 512, [], "f0d7", "M140.3 376.8c12.6 10.2 31.1 9.5 42.8-2.2l128-128c9.2-9.2 11.9-22.9 6.9-34.9S301.4 192 288.5 192l-256 0c-12.9 0-24.6 7.8-29.6 19.8S.7 237.5 9.9 246.6l128 128 2.4 2.2z"]
+};
+var faDesktop = {
+  prefix: "fas",
+  iconName: "desktop",
+  icon: [512, 512, [128421, 61704, "desktop-alt"], "f390", "M64 32C28.7 32 0 60.7 0 96L0 352c0 35.3 28.7 64 64 64l144 0-16 48-72 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l272 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-72 0-16-48 144 0c35.3 0 64-28.7 64-64l0-256c0-35.3-28.7-64-64-64L64 32zM96 96l320 0c17.7 0 32 14.3 32 32l0 160c0 17.7-14.3 32-32 32L96 320c-17.7 0-32-14.3-32-32l0-160c0-17.7 14.3-32 32-32z"]
+};
 var faArrowDown = {
   prefix: "fas",
   iconName: "arrow-down",
   icon: [384, 512, [8595], "f063", "M169.4 502.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 402.7 224 32c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 370.7-105.4-105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"]
 };
+var faArrowDownAZ = {
+  prefix: "fas",
+  iconName: "arrow-down-a-z",
+  icon: [512, 512, ["sort-alpha-asc", "sort-alpha-down"], "f15d", "M230.6 390.6l-80 80c-12.5 12.5-32.8 12.5-45.3 0l-80-80c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L96 370.7 96 64c0-17.7 14.3-32 32-32s32 14.3 32 32l0 306.7 25.4-25.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3zm182-340.9c50.7 101.3 77.3 154.7 80 160 7.9 15.8 1.5 35-14.3 42.9s-35 1.5-42.9-14.3l-7.2-14.3-88.4 0-7.2 14.3c-7.9 15.8-27.1 22.2-42.9 14.3s-22.2-27.1-14.3-42.9c2.7-5.3 29.3-58.7 80-160 5.4-10.8 16.5-17.7 28.6-17.7s23.2 6.8 28.6 17.7zM384 135.6l-20.2 40.4 40.4 0-20.2-40.4zM288 320c0-17.7 14.3-32 32-32l128 0c12.9 0 24.6 7.8 29.6 19.8s2.2 25.7-6.9 34.9L397.3 416 448 416c17.7 0 32 14.3 32 32s-14.3 32-32 32l-128 0c-12.9 0-24.6-7.8-29.6-19.8s-2.2-25.7 6.9-34.9l73.4-73.4-50.7 0c-17.7 0-32-14.3-32-32z"]
+};
 var faCircleInfo = {
   prefix: "fas",
   iconName: "circle-info",
   icon: [512, 512, ["info-circle"], "f05a", "M256 512a256 256 0 1 0 0-512 256 256 0 1 0 0 512zM224 160a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm-8 64l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z"]
 };
+var faTabletScreenButton = {
+  prefix: "fas",
+  iconName: "tablet-screen-button",
+  icon: [448, 512, ["tablet-alt"], "f3fa", "M0 64C0 28.7 28.7 0 64 0L384 0c35.3 0 64 28.7 64 64l0 384c0 35.3-28.7 64-64 64L64 512c-35.3 0-64-28.7-64-64L0 64zM256 432a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM384 64l-320 0 0 288 320 0 0-288z"]
+};
 function createDefaultRecordApi(apiUrl, repo, getToken) {
   const opts = () => ({ token: getToken() });
   return {
@@ -8551,7 +8616,7 @@ function createDefaultRecordApi(apiUrl, repo, getToken) {
         args: req.args,
         actor: none$1,
         limits: none$1
-      }, opts());
+      }, opts(), req.idempotencyKey);
     },
     async history(workspace, record, limit2, from2) {
       return workspaceRecordHistory(apiUrl, repo, workspace, record, limit2, opts(), from2);
@@ -8605,7 +8670,9 @@ function errorOfMutationResult(result) {
     case "conflict":
       return {
         kind: variant("conflict", { attempts: outcome.value.attempts }),
-        message: `compare-and-swap conflicted after ${outcome.value.attempts} attempts; try again`,
+        // A write the record no longer matches would disagree again: only
+        // a lost race is worth trying again as it was.
+        message: outcome.value.detail.type === "some" ? `the write no longer matches the record (${outcome.value.detail.value}); re-read it and resubmit` : `compare-and-swap conflicted after ${outcome.value.attempts} attempts; try again`,
         stderr: ""
       };
     default:
@@ -8631,13 +8698,13 @@ class RecordRuntime extends TrackedChannelStore {
     __publicField(this, "signatureCache", /* @__PURE__ */ new Map());
     // History per channel, fetched once + refreshed on commit.
     __publicField(this, "histories", /* @__PURE__ */ new Map());
-    __publicField(this, "historyInFlight", /* @__PURE__ */ new Set());
+    __publicField(this, "historyInFlight", /* @__PURE__ */ new Map());
     // Channels whose last history fetch failed. Guards `history()` from
     // re-issuing the request on every render (a failing endpoint would
     // otherwise spin); cleared on the next commit / on clear() so a later
     // mutation retries.
     __publicField(this, "historyFailed", /* @__PURE__ */ new Set());
-    // Compiled-handle cache (issue #106 perf): buildHandle compiles 8 + (one per
+    // Compiled-handle cache (issue #106 perf): buildHandle compiles 8 + (two per
     // mutation) East.functions per bind, and binds re-run every reactive frame.
     // The method IR is a pure function of the record name (which fixes the handle
     // type), and the methods resolve cache/api/ws LIVE, so a cached handle still
@@ -8715,11 +8782,17 @@ class RecordRuntime extends TrackedChannelStore {
     }
     return null;
   }
-  /** Fetch a record's history once per channel (deduped); notify on settle. */
-  fetchHistory(workspace, record, key) {
-    if (this.historyInFlight.has(key)) return;
-    this.historyInFlight.add(key);
-    void (async () => {
+  /**
+   * Fetch a record's history once per channel (deduped); notify on settle.
+   *
+   * @param again - Fetch once more after a fetch in flight, which may have
+   *   read the chain before what the caller fetches it for
+   * @returns The fetch, settled once the history or its failure is in
+   */
+  fetchHistory(workspace, record, key, again = false) {
+    const inFlight = this.historyInFlight.get(key);
+    if (inFlight !== void 0) return again ? inFlight.then(() => this.fetchHistory(workspace, record, key)) : inFlight;
+    const fetch = (async () => {
       const api3 = this.api;
       try {
         if (!api3) throw new Error("no RecordApi installed");
@@ -8733,43 +8806,67 @@ class RecordRuntime extends TrackedChannelStore {
         this.notify(key);
       }
     })();
+    this.historyInFlight.set(key, fetch);
+    return fetch;
   }
   // ----- closure semantics -------------------------------------------------
-  launchMutation(workspace, record, mutation, argTypes, args) {
+  /**
+   * Run one mutation on the record's channel, and settle to the server's
+   * outcome.
+   *
+   * @remarks
+   * The channel shows the write as it shows every launch, latest-wins; the
+   * outcome returned is the server's own, whatever became of the channel. A
+   * commit refreshes the record's bytes and drops its history. A conflict
+   * fetches both again before the outcome settles, so an awaiting caller
+   * reads the state and the history its write lost to.
+   *
+   * @param idempotencyKey - The write's request id, when it has one
+   * @returns The outcome
+   */
+  runMutation(workspace, record, mutation, argTypes, args, idempotencyKey) {
     const key = recordChannelKey(workspace, record);
     const { entry, settle } = this.beginLaunch(key, (e3) => {
       delete e3.error;
     });
     const run = (async () => {
-      var _a2;
+      var _a2, _b2;
       const invalid = await this.validate(workspace, record, mutation, argTypes);
       if (invalid) {
         settle((e3) => {
           e3.status = "failed";
           e3.error = invalid;
         });
-        return;
+        return invalid.kind.type === "transport" ? variant("transport", { message: invalid.message }) : variant("invalid", { message: invalid.message });
       }
       const api3 = this.api;
       if (!api3) {
+        const error3 = transportError("no RecordApi installed");
         settle((e3) => {
           e3.status = "failed";
-          e3.error = transportError("no RecordApi installed");
+          e3.error = error3;
         });
-        return;
+        return variant("transport", { message: error3.message });
       }
       let result;
       try {
         const encoded = args.map((arg, i) => encodeBeast2For(argTypes[i])(arg));
-        result = await api3.mutate(workspace, record, mutation, { args: encoded });
+        result = await api3.mutate(
+          workspace,
+          record,
+          mutation,
+          idempotencyKey === void 0 ? { args: encoded } : { args: encoded, idempotencyKey }
+        );
       } catch (err) {
+        const error3 = transportError(err instanceof Error ? err.message : String(err));
         settle((e3) => {
           e3.status = "failed";
-          e3.error = transportError(err instanceof Error ? err.message : String(err));
+          e3.error = error3;
         });
-        return;
+        return variant("transport", { message: error3.message });
       }
-      if (result.outcome.type === "committed") {
+      const outcome = result.outcome;
+      if (outcome.type === "committed") {
         settle((e3) => {
           e3.status = "committed";
           delete e3.error;
@@ -8783,13 +8880,21 @@ class RecordRuntime extends TrackedChannelStore {
           e3.status = "failed";
           e3.error = errorOfMutationResult(result);
         });
+        if (outcome.type === "conflict") {
+          this.histories.delete(key);
+          this.historyFailed.delete(key);
+          await Promise.all([(_b2 = this.cache) == null ? void 0 : _b2.refresh(workspace), this.fetchHistory(workspace, record, key, true)]);
+        }
       }
+      return outcome;
     })();
-    entry.inflight = run;
-    void run.finally(() => {
+    const inflight = run.then(() => void 0, () => void 0);
+    entry.inflight = inflight;
+    void inflight.then(() => {
       const current = this.entries.get(key);
-      if (current && current.inflight === run) delete current.inflight;
+      if (current && current.inflight === inflight) delete current.inflight;
     });
+    return run;
   }
   /**
    * The low-level primitives backing handle methods, bound to THIS runtime.
@@ -8835,7 +8940,7 @@ class RecordRuntime extends TrackedChannelStore {
         runtime.track(key);
         const cached = runtime.histories.get(key);
         if (cached === void 0) {
-          if (!runtime.historyFailed.has(key)) runtime.fetchHistory(ws, name, key);
+          if (!runtime.historyFailed.has(key)) void runtime.fetchHistory(ws, name, key);
           return none$1;
         }
         return some(cached);
@@ -8879,8 +8984,21 @@ class RecordRuntime extends TrackedChannelStore {
         const obj = argsStruct;
         const argTypes = fields.map((f2) => f2.type);
         const args = fields.map((f2) => obj[f2.name]);
-        runtime.launchMutation(runtime.resolveWorkspace(), recordNameArg, mutationNameArg, argTypes, args);
+        void runtime.runMutation(runtime.resolveWorkspace(), recordNameArg, mutationNameArg, argTypes, args);
         return null;
+      }),
+      RecordBindPrimitives.commit.implement((argsStructType) => async (recordNameArg, mutationNameArg, requestArg, argsStruct) => {
+        const fields = argsStructType.value;
+        const obj = argsStruct;
+        const request = requestArg;
+        return runtime.runMutation(
+          runtime.resolveWorkspace(),
+          recordNameArg,
+          mutationNameArg,
+          fields.map((f2) => f2.type),
+          fields.map((f2) => obj[f2.name]),
+          request === "" ? void 0 : request
+        );
       })
     ];
   }
@@ -8892,6 +9010,7 @@ class RecordRuntime extends TrackedChannelStore {
    * serializable East data (issue #106).
    */
   buildHandle(handleType, name) {
+    var _a2;
     const cached = this.handleCache.get(name);
     if (cached) return cached;
     const sig = signatureOfRecordHandleType(handleType);
@@ -8901,6 +9020,7 @@ class RecordRuntime extends TrackedChannelStore {
     const statusRet = fnOut(fields, "status");
     const historyRet = fnOut(fields, "history");
     const mfields = fields.find((f2) => f2.name === "mutate").type.value;
+    const cfields = (_a2 = fields.find((f2) => f2.name === "commit")) == null ? void 0 : _a2.type.value;
     const nameExpr = East.value(name, StringType);
     const platform = this.buildPrimitives();
     const P2 = RecordBindPrimitives;
@@ -8918,6 +9038,7 @@ class RecordRuntime extends TrackedChannelStore {
         $3.return(P2.mutateCancel(nameExpr));
       }), platform)
     };
+    const commit = {};
     for (const [mutationName, argTypes] of sig.mutations) {
       const argTypesEast = argTypes.map((t4) => fromEastTypeValue(t4));
       const ArgsStruct = StructType(Object.fromEntries(argTypesEast.map((t4, i) => [`arg${i}`, t4])));
@@ -8929,6 +9050,14 @@ class RecordRuntime extends TrackedChannelStore {
         });
         $3.return(P2.mutate([ArgsStruct], nameExpr, mutationNameExpr, East.value(obj, ArgsStruct)));
       }), platform);
+      if (cfields === void 0) continue;
+      commit[mutationName] = East.compileAsync(East.asyncFunction([StringType, ...argTypesEast], fnOut(cfields, mutationName), ($3, request, ...args) => {
+        const obj = {};
+        args.forEach((a2, i) => {
+          obj[`arg${i}`] = a2;
+        });
+        $3.return(P2.commit([ArgsStruct], nameExpr, mutationNameExpr, request, East.value(obj, ArgsStruct)));
+      }), platform);
     }
     const handle = {
       read: East.compile(East.function([], stateTypeEast, ($3) => {
@@ -8941,6 +9070,7 @@ class RecordRuntime extends TrackedChannelStore {
         $3.return(P2.history(nameExpr));
       }), platform),
       mutate,
+      ...cfields !== void 0 && { commit },
       start: East.compile(East.function([], NullType, ($3) => {
         $3.return(P2.start(nameExpr));
       }), platform),
@@ -8985,7 +9115,7 @@ function createScopedRecordPlatform(records) {
   ];
 }
 function createInMemoryRecordApi(cache3, workspace, defs2) {
-  const compiled = /* @__PURE__ */ new Map();
+  const compiled2 = /* @__PURE__ */ new Map();
   for (const def of defs2) {
     const stateType = toEastTypeValue(def.stateType);
     const mutations = /* @__PURE__ */ new Map();
@@ -9001,12 +9131,12 @@ function createInMemoryRecordApi(cache3, workspace, defs2) {
       at: /* @__PURE__ */ new Date(0),
       delta: none$1
     };
-    compiled.set(def.name, { stateType, mutations, commits: [genesis], seq: 0 });
+    compiled2.set(def.name, { stateType, mutations, commits: [genesis], seq: 0 });
     void cache3.write(workspace, recordPath(def.name), encodeBeast2For(stateType)(def.initial));
   }
   return {
     async describe(_ws, record) {
-      const c2 = compiled.get(record);
+      const c2 = compiled2.get(record);
       if (!c2) throw new Error(`no in-memory record "${record}"`);
       return {
         name: record,
@@ -9014,14 +9144,24 @@ function createInMemoryRecordApi(cache3, workspace, defs2) {
       };
     },
     async mutate(ws, record, mutation, req) {
-      const c2 = compiled.get(record);
+      var _a2;
+      const c2 = compiled2.get(record);
       if (!c2) throw new Error(`no in-memory record "${record}"`);
       const m2 = c2.mutations.get(mutation);
       if (!m2) return { outcome: variant("invalid", { message: `no mutation "${mutation}"` }) };
+      if (req.idempotencyKey !== void 0 && ((_a2 = c2.keyed) == null ? void 0 : _a2.key) === req.idempotencyKey) return c2.keyed.result;
       const current = cache3.read(ws, recordPath(record));
       const state = current !== void 0 ? decodeBeast2For(c2.stateType)(current) : void 0;
       const args = req.args.map((bytes, i) => decodeBeast2For(m2.argTypes[i])(bytes));
-      const next2 = m2.reduce(state, ...args);
+      let next2;
+      try {
+        next2 = m2.reduce(state, ...args);
+      } catch (err) {
+        if (err instanceof ConflictError) {
+          return { outcome: variant("conflict", { attempts: 1n, detail: some(`primary: ${err.message}`) }) };
+        }
+        return { outcome: variant("failed", { exitCode: 1n, stderr: err instanceof Error ? err.message : String(err) }) };
+      }
       await cache3.write(ws, recordPath(record), encodeBeast2For(c2.stateType)(next2));
       c2.seq += 1;
       const hash2 = `${record}-${c2.seq}`.padEnd(64, "0");
@@ -9034,10 +9174,12 @@ function createInMemoryRecordApi(cache3, workspace, defs2) {
         at: /* @__PURE__ */ new Date(0),
         delta: none$1
       });
-      return { outcome: variant("committed", { commitHash: hash2, stateHash: `${record}-state-${c2.seq}`.padEnd(64, "0") }) };
+      const result = { outcome: variant("committed", { commitHash: hash2, stateHash: `${record}-state-${c2.seq}`.padEnd(64, "0") }) };
+      c2.keyed = req.idempotencyKey !== void 0 ? { key: req.idempotencyKey, result } : void 0;
+      return result;
     },
     async history(_ws, record, limit2) {
-      const c2 = compiled.get(record);
+      const c2 = compiled2.get(record);
       if (!c2) throw new Error(`no in-memory record "${record}"`);
       const commits = limit2 !== void 0 ? c2.commits.slice(0, limit2) : c2.commits;
       return { commits };
@@ -64183,6 +64325,1711 @@ const EastChakraDecisionJournal = memo(function EastChakraDecisionJournal2({ val
   ] });
 });
 implementUIComponent(DecisionJournal.Component, EastChakraDecisionJournal);
+const studioMessages = {
+  statusDraft: () => "Draft",
+  statusLive: () => "Live",
+  statusLiveEdited: () => "Live · edited",
+  statusTemplate: () => "Template",
+  publish: () => "Publish",
+  noPageOpen: () => "No page open",
+  noPageOpenHint: ({ project, page }) => `${project} has no page ${page}. Open a page from the palette's Pages tab, or start one from the page library.`,
+  components: () => "Components",
+  componentNoun: () => ({ singular: "component", plural: "components" }),
+  pageNoun: () => ({ singular: "page", plural: "pages" }),
+  logicFixed: () => "Logic fixed by the developer",
+  category: () => "Category",
+  tags: () => "Tags",
+  collections: () => "Collections",
+  inspector: () => "Inspector",
+  spanBadge: ({ span }) => `${span}/12`,
+  noComponent: ({ key }) => `No component "${key}"`,
+  noComponentHint: () => "This surface lists no component with this key.",
+  twoComponents: ({ key }) => `Two components share the key "${key}"`,
+  twoComponentsHint: () => "A surface lists each component once.",
+  notPublished: ({ page }) => `${page} is not published yet`,
+  notPublishedHint: () => "Publish it to show it here.",
+  noPage: ({ page }) => `No page ${page}`,
+  noPageHint: ({ project }) => `The project ${project} has no page by this name.`,
+  blankSummary: () => "12-col · empty",
+  placements: ({ n: n2, count }) => `${count} ${n2 === 1 ? "component" : "components"}`,
+  openInBuilder: () => "Open in builder →",
+  newPageFromTemplate: () => "New page from template",
+  selectedComponent: () => "Selected component",
+  logicChanged: () => "logic changed since this page went live",
+  data: () => "Data",
+  readsNothing: () => "reads no data",
+  configuration: () => "Configuration",
+  fixedByDeveloper: () => "fixed by developer",
+  noDescription: () => "No description",
+  layout: () => "Layout",
+  columnSpan: () => "Column span",
+  spanOf: ({ span }) => `${span} / 12`,
+  decreaseSpan: () => "Decrease span",
+  increaseSpan: () => "Increase span",
+  row: () => "Row",
+  height: () => "Height",
+  auto: () => "Auto",
+  px: ({ px }) => `${px} px`,
+  align: () => "Align",
+  alignTop: () => "Top",
+  alignCenter: () => "Center",
+  alignStretch: () => "Stretch",
+  published: () => "Published component · logic immutable",
+  nothingSelected: () => "Nothing selected",
+  nothingSelectedHint: () => "Click a component on the grid to see what it reads and its layout.",
+  searchLibrary: ({ pages, templates, np, nt }) => `Search ${pages} ${np === 1 ? "page" : "pages"} and ${templates} ${nt === 1 ? "template" : "templates"}…`,
+  searchLabel: () => "Search pages and templates",
+  clearSearch: () => "Clear search",
+  sortByName: () => "Sort · Name",
+  nameAz: () => "Name A–Z",
+  nameZa: () => "Name Z–A",
+  newPageIn: ({ project }) => `New page in ${project}`,
+  newPage: () => "New page",
+  projects: () => "Projects",
+  pages: () => "Pages",
+  live: () => "Live",
+  draft: () => "Draft",
+  templates: () => "Templates",
+  cloneToStart: () => "clone to start a page",
+  pagesIn: ({ shown, total, project, narrowed }) => narrowed ? `${shown} of ${total} in ${project}` : `${total} in ${project}`,
+  pageName: () => "Page name",
+  pageNameMissing: () => "Give the page a name to create it.",
+  template: () => "Template",
+  blankGrid: () => "Blank grid",
+  createPage: () => "Create page",
+  cancel: () => "Cancel",
+  nameTaken: ({ name }) => `${name} is already a page or a template here.`,
+  saveAsTemplate: () => "Save as template",
+  templateName: () => "Template name",
+  templateNameMissing: () => "Give the template a name to save it.",
+  saveTemplate: () => "Save template",
+  templateNameFor: ({ page }) => `${page} template`,
+  templateOpen: () => "A template is open — open a page to save it as a template",
+  preview: () => "Preview",
+  devices: () => "Device",
+  device: ({ device }) => device === "desktop" ? "Desktop" : device === "tablet" ? "Tablet" : "Mobile",
+  env: () => "Env",
+  exit: () => "Exit",
+  readyToPublish: () => "Ready to publish",
+  upToDate: () => "Up to date",
+  templateNotPublished: () => "Templates are not published",
+  version: ({ version: version2 }) => `v${version2}`,
+  liveVersion: () => "live",
+  templateKind: () => "template",
+  changesSince: ({ n: n2, count, version: version2 }) => `${count} ${n2 === 1 ? "change" : "changes"} since ${version2}`,
+  changesFirst: ({ n: n2, count }) => `${count} ${n2 === 1 ? "change" : "changes"} · first version`,
+  noChangesSince: ({ version: version2 }) => `No changes since ${version2}`,
+  changeVerb: ({ change }) => {
+    switch (change) {
+      case "added":
+        return "Added";
+      case "removed":
+        return "Removed";
+      case "moved":
+        return "Moved";
+      case "resized":
+      case "height":
+        return "Resized";
+      case "aligned":
+        return "Aligned";
+      case "retitled":
+        return "Retitled";
+    }
+  },
+  logicUnchanged: () => "Component logic unchanged — only layout changed. Safe to publish.",
+  logicChangedIn: ({ version: version2, components: components2 }) => {
+    const names = components2.length < 2 ? components2.join("") : `${components2.slice(0, -1).join(", ")} and ${components2.at(-1)}`;
+    const its = components2.length === 1 ? "its" : "their";
+    return `Logic changed since ${version2} in ${names} — ${its} placements publish with ${its} new code`;
+  },
+  audience: () => "Audience",
+  rollout: () => "Rollout",
+  saveAsDraft: () => "Save as draft",
+  publishTo: ({ version: version2, env }) => version2 === void 0 ? "Publish" : env === void 0 ? `Publish ${version2}` : `Publish ${version2} to ${env}`
+};
+const StudioMessagesContext = createContext(studioMessages);
+function useStudioMessages() {
+  return useContext(StudioMessagesContext);
+}
+function StudioMessagesProvider({ messages, children: children2 }) {
+  const parent4 = useStudioMessages();
+  const value = useMemo(() => ({ ...parent4, ...messages }), [parent4, messages]);
+  return createElement$1(StudioMessagesContext.Provider, { value }, children2);
+}
+const LEAST_SPAN = 2;
+const HEIGHTS = [160, 240, 320, 400, 480];
+const ALIGNS = [
+  { align: "top", icon: faArrowsUpToLine, name: (m2) => m2.alignTop() },
+  { align: "center", icon: faArrowsToDot, name: (m2) => m2.alignCenter() },
+  { align: "stretch", icon: faArrowsUpDown, name: (m2) => m2.alignStretch() }
+];
+function RowField({ row, onRow, css: css2, id: id3 }) {
+  const [text, setText] = useState(String(row));
+  useEffect(() => {
+    setText(String(row));
+  }, [row]);
+  const commit = () => {
+    const asked = Number.parseInt(text, 10);
+    if (!Number.isInteger(asked) || asked < 1 || asked === row) {
+      setText(String(row));
+      return;
+    }
+    onRow(asked);
+  };
+  const onKeyDown = (e3) => {
+    if (e3.key === "Enter") {
+      e3.preventDefault();
+      commit();
+    } else if (e3.key === "Escape") {
+      e3.preventDefault();
+      setText(String(row));
+    } else if (e3.key === "ArrowUp") {
+      e3.preventDefault();
+      onRow(row + 1);
+    } else if (e3.key === "ArrowDown" && row > 1) {
+      e3.preventDefault();
+      onRow(row - 1);
+    }
+  };
+  return /* @__PURE__ */ jsx$1(
+    chakra.input,
+    {
+      id: id3,
+      css: css2,
+      value: text,
+      inputMode: "numeric",
+      autoComplete: "off",
+      "data-inspector-row": "",
+      onChange: (e3) => setText(e3.target.value.replace(/[^0-9]/g, "")),
+      onBlur: commit,
+      onKeyDown
+    }
+  );
+}
+const StudioInspector = memo(function StudioInspector2({ value }) {
+  const styles2 = useSlotRecipe({ key: "studioInspector" })();
+  const stepper = useSlotRecipe({ key: "stepper" })({ tone: "brand", size: "md" });
+  const seg = useSlotRecipe({ key: "seg" })();
+  const input = useRecipe({ key: "input" })({ variant: "numeric", size: "sm" });
+  const m2 = useStudioMessages();
+  const words = useFormatters();
+  const rowId = useId();
+  const selection2 = value.selection.type === "some" ? value.selection.value : void 0;
+  const onRequest = value.onRequest;
+  const key = selection2 == null ? void 0 : selection2.key;
+  const ask = useCallback((change) => {
+    if (key === void 0) return;
+    try {
+      onRequest({ key, change });
+    } catch (err) {
+      console.error("[Studio.Builder] the inspector's layout request failed:", err);
+    }
+  }, [key, onRequest]);
+  const height2 = selection2 !== void 0 && selection2.layout.height.type === "some" ? Number(selection2.layout.height.value) : void 0;
+  const heights = useMemo(() => createListCollection({
+    items: [
+      { value: "auto", label: m2.auto(), px: void 0 },
+      ...[.../* @__PURE__ */ new Set([...HEIGHTS, ...height2 !== void 0 ? [height2] : []])].sort((a2, b2) => a2 - b2).map((px) => ({ value: String(px), label: m2.px({ px: words.bare(px) }), px }))
+    ]
+  }), [height2, m2, words]);
+  if (selection2 === void 0) {
+    return /* @__PURE__ */ jsx$1(Box, { css: styles2.root, "data-studio-inspector": "", children: /* @__PURE__ */ jsxs(Box, { css: styles2.empty, "data-inspector": "empty", children: [
+      /* @__PURE__ */ jsx$1(Box, { as: "span", css: styles2.emptyTitle, children: m2.nothingSelected() }),
+      /* @__PURE__ */ jsx$1(Box, { as: "span", css: styles2.emptyHint, children: m2.nothingSelectedHint() })
+    ] }) });
+  }
+  const layout4 = selection2.layout;
+  const span = Number(layout4.span);
+  const most = Number(layout4.most);
+  const description = selection2.description.type === "some" ? selection2.description.value : void 0;
+  const aligned = layout4.align.type;
+  const heightKey = height2 === void 0 ? "auto" : String(height2);
+  return /* @__PURE__ */ jsxs(Box, { css: styles2.root, "data-studio-inspector": "", children: [
+    /* @__PURE__ */ jsxs(Box, { css: styles2.selection, "data-inspector": "selection", children: [
+      /* @__PURE__ */ jsx$1(Box, { as: "span", css: styles2.eyebrow, children: m2.selectedComponent() }),
+      /* @__PURE__ */ jsx$1(Box, { as: "span", css: styles2.name, "data-inspector-name": "", children: selection2.name }),
+      /* @__PURE__ */ jsx$1(Box, { as: "span", css: styles2.meta, "data-inspector-meta": "", children: selection2.component }),
+      selection2.changed && /* @__PURE__ */ jsxs(Box, { as: "span", css: styles2.warning, "data-inspector-changed": "", children: [
+        /* @__PURE__ */ jsx$1(FontAwesomeIcon, { icon: faTriangleExclamation }),
+        m2.logicChanged()
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { css: styles2.data, "data-inspector": "data", children: [
+      /* @__PURE__ */ jsx$1(Box, { as: "span", css: styles2.eyebrow, children: m2.data() }),
+      selection2.reads.length > 0 ? /* @__PURE__ */ jsx$1(Box, { as: "ul", css: styles2.reads, "aria-label": m2.data(), children: selection2.reads.map((path2) => {
+        const keypath = pathToString$1(path2);
+        return /* @__PURE__ */ jsx$1(Box, { as: "li", css: styles2.read, children: keypath }, keypath);
+      }) }) : /* @__PURE__ */ jsx$1(Box, { as: "span", css: styles2.noReads, children: m2.readsNothing() })
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { css: styles2.config, "data-inspector": "config", children: [
+      /* @__PURE__ */ jsxs(Box, { css: styles2.configHead, children: [
+        /* @__PURE__ */ jsx$1(Box, { as: "span", css: styles2.eyebrow, children: m2.configuration() }),
+        /* @__PURE__ */ jsxs(Box, { as: "span", css: styles2.lockNote, children: [
+          /* @__PURE__ */ jsx$1(FontAwesomeIcon, { icon: faLock }),
+          m2.fixedByDeveloper()
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx$1(Box, { as: "p", css: styles2.description, "data-empty": description === void 0 ? "" : void 0, children: description ?? m2.noDescription() })
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { css: styles2.layout, "data-inspector": "layout", children: [
+      /* @__PURE__ */ jsx$1(Box, { as: "span", css: styles2.eyebrow, children: m2.layout() }),
+      /* @__PURE__ */ jsxs(Box, { css: styles2.field, children: [
+        /* @__PURE__ */ jsx$1(Box, { as: "span", css: styles2.fieldLabel, children: m2.columnSpan() }),
+        /* @__PURE__ */ jsxs(Box, { css: stepper.root, role: "group", "aria-label": m2.columnSpan(), children: [
+          /* @__PURE__ */ jsx$1(
+            chakra.button,
+            {
+              type: "button",
+              css: stepper.button,
+              "aria-label": m2.decreaseSpan(),
+              title: m2.decreaseSpan(),
+              disabled: span <= LEAST_SPAN,
+              onClick: () => ask(variant("span", BigInt(span - 1))),
+              children: /* @__PURE__ */ jsx$1(FontAwesomeIcon, { icon: faMinus })
+            }
+          ),
+          /* @__PURE__ */ jsx$1(Box, { as: "output", css: stepper.value, "data-inspector-span": "", children: m2.spanOf({ span: words.number(span) }) }),
+          /* @__PURE__ */ jsx$1(
+            chakra.button,
+            {
+              type: "button",
+              css: stepper.button,
+              "aria-label": m2.increaseSpan(),
+              title: m2.increaseSpan(),
+              disabled: span >= most,
+              onClick: () => ask(variant("span", BigInt(span + 1))),
+              children: /* @__PURE__ */ jsx$1(FontAwesomeIcon, { icon: faPlus })
+            }
+          )
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Box, { css: styles2.field, children: [
+        /* @__PURE__ */ jsx$1(chakra.label, { css: styles2.fieldLabel, htmlFor: rowId, children: m2.row() }),
+        /* @__PURE__ */ jsx$1(RowField, { row: Number(layout4.row), onRow: (row) => ask(variant("row", BigInt(row))), css: [input, styles2.rowField], id: rowId })
+      ] }),
+      /* @__PURE__ */ jsxs(Box, { css: styles2.field, children: [
+        /* @__PURE__ */ jsx$1(Box, { as: "span", css: styles2.fieldLabel, children: m2.height() }),
+        /* @__PURE__ */ jsxs(
+          Select.Root,
+          {
+            collection: heights,
+            value: [heightKey],
+            size: "sm",
+            variant: "numeric",
+            css: styles2.heightField,
+            onValueChange: (details) => {
+              const picked = heights.items.find((item) => item.value === details.value[0]);
+              if (picked === void 0 || picked.value === heightKey) return;
+              const px = picked.px;
+              queueMicrotask(() => ask(variant("height", px === void 0 ? none$1 : some(BigInt(px)))));
+            },
+            children: [
+              /* @__PURE__ */ jsx$1(Select.HiddenSelect, {}),
+              /* @__PURE__ */ jsxs(Select.Control, { children: [
+                /* @__PURE__ */ jsx$1(Select.Trigger, { "aria-label": m2.height(), "data-inspector-height": "", children: /* @__PURE__ */ jsx$1(Select.ValueText, {}) }),
+                /* @__PURE__ */ jsx$1(Select.IndicatorGroup, { children: /* @__PURE__ */ jsx$1(Select.Indicator, {}) })
+              ] }),
+              /* @__PURE__ */ jsx$1(Portal, { children: /* @__PURE__ */ jsx$1(Select.Positioner, { children: /* @__PURE__ */ jsx$1(Select.Content, { children: heights.items.map((item) => /* @__PURE__ */ jsxs(Select.Item, { item, children: [
+                item.label,
+                /* @__PURE__ */ jsx$1(Select.ItemIndicator, {})
+              ] }, item.value)) }) }) })
+            ]
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs(Box, { css: styles2.field, children: [
+        /* @__PURE__ */ jsx$1(Box, { as: "span", css: styles2.fieldLabel, children: m2.align() }),
+        /* @__PURE__ */ jsx$1(Box, { css: seg.root, role: "group", "aria-label": m2.align(), children: ALIGNS.map(({ align, icon: icon3, name }) => /* @__PURE__ */ jsx$1(
+          chakra.button,
+          {
+            type: "button",
+            css: seg.item,
+            "data-state": aligned === align ? "on" : "off",
+            "aria-pressed": aligned === align,
+            "aria-label": name(m2),
+            title: name(m2),
+            onClick: () => ask(variant("align", variant(align, null))),
+            children: /* @__PURE__ */ jsx$1(FontAwesomeIcon, { icon: icon3 })
+          },
+          align
+        )) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { css: styles2.footer, "data-inspector": "footer", children: [
+      /* @__PURE__ */ jsx$1(FontAwesomeIcon, { icon: faLock }),
+      m2.published()
+    ] })
+  ] });
+});
+const encodeKey = encodeBeast2For(StudioKeyType);
+const decodeKey = decodeBeast2For(StudioKeyType);
+function useOpenPage(key, first2) {
+  const store = StateRuntime$1.getStore();
+  const subscribe = useCallback((notify3) => store.subscribe(key, notify3), [store, key]);
+  const snapshot = useCallback(() => store.read(key), [store, key]);
+  const bytes = useSyncExternalStore(subscribe, snapshot);
+  const open = useMemo(() => bytes === void 0 ? first2 : decodeKey(bytes), [bytes, first2]);
+  const write = useCallback((next2) => {
+    store.write(key, encodeKey(next2));
+  }, [store, key]);
+  return [open, write];
+}
+const pageEqual = equivalentFor(StudioPageComponent.schema);
+const keyEqual$1 = equalFor(StudioKeyType);
+function StudioComponentView({ component: component2, storageKey }) {
+  const render3 = useCallback(() => component2.render(), [component2]);
+  const { result } = useTrackedEvaluation(render3);
+  if (!result.ok) {
+    const message = result.error instanceof Error ? result.error.message : String(result.error);
+    return /* @__PURE__ */ jsx$1(BannerView, { status: "error", title: component2.name, description: message });
+  }
+  return /* @__PURE__ */ jsx$1(EastChakraComponent, { value: result.value, storageKey });
+}
+function StudioPlacement({ component: key, listed, storageKey }) {
+  const m2 = useStudioMessages();
+  if (listed.length > 1) {
+    return /* @__PURE__ */ jsx$1(BannerView, { status: "error", title: m2.twoComponents({ key }), description: m2.twoComponentsHint() });
+  }
+  const component2 = listed[0];
+  if (component2 === void 0) {
+    return /* @__PURE__ */ jsx$1(
+      EmptyStateView,
+      {
+        icon: { prefix: "fas", name: "puzzle-piece" },
+        title: m2.noComponent({ key }),
+        description: m2.noComponentHint()
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx$1(StudioComponentView, { component: component2, storageKey });
+}
+function StudioLayout({ cells, components: components2, storageKey }) {
+  const listed = useMemo(() => {
+    const byKey = /* @__PURE__ */ new Map();
+    for (const component2 of components2) {
+      const same2 = byKey.get(component2.key);
+      if (same2 === void 0) byKey.set(component2.key, [component2]);
+      else same2.push(component2);
+    }
+    return byKey;
+  }, [components2]);
+  const tiles = useMemo(() => cells.map((cell) => {
+    var _a2;
+    const first2 = (_a2 = listed.get(cell.component)) == null ? void 0 : _a2[0];
+    return {
+      key: cell.key,
+      row: cell.row,
+      span: cell.span,
+      height: cell.height,
+      align: cell.align,
+      frame: first2 === void 0 ? true : first2.frame.type === "card",
+      cell
+    };
+  }), [cells, listed]);
+  return /* @__PURE__ */ jsx$1(
+    SnapGridTiles,
+    {
+      cells: tiles,
+      content: (tile) => /* @__PURE__ */ jsx$1(StudioPlacement, { component: tile.cell.component, listed: listed.get(tile.cell.component) ?? [], storageKey: `${storageKey}.${tile.key}` })
+    }
+  );
+}
+const EastChakraStudioPage = memo(function EastChakraStudioPage2({ value, storageKey }) {
+  const m2 = useStudioMessages();
+  const key = value.page;
+  let entry;
+  for (const [at, found] of value.pages) {
+    if (keyEqual$1(at, key)) {
+      entry = found;
+      break;
+    }
+  }
+  if (entry === void 0) {
+    return /* @__PURE__ */ jsx$1(
+      EmptyStateView,
+      {
+        icon: { prefix: "fas", name: "file-circle-question" },
+        title: m2.noPage({ page: key.page }),
+        description: m2.noPageHint({ project: key.project })
+      }
+    );
+  }
+  const layout4 = entry.type === "template" ? entry.value : value.version.type === "draft" ? entry.value.draft : entry.value.live.type === "some" ? entry.value.live.value.page : void 0;
+  if (layout4 === void 0) {
+    return /* @__PURE__ */ jsx$1(
+      EmptyStateView,
+      {
+        icon: { prefix: "fas", name: "file-circle-question" },
+        title: m2.notPublished({ page: key.page }),
+        description: m2.notPublishedHint()
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx$1(StudioLayout, { cells: layout4.cells, components: value.components, storageKey });
+}, (prev2, next2) => pageEqual(prev2.value, next2.value) && prev2.storageKey === next2.storageKey);
+implementUIComponent(StudioPageComponent, EastChakraStudioPage);
+const StudioPalette = memo(function StudioPalette2({
+  components: components2,
+  cards,
+  pages,
+  open,
+  ids,
+  onSelect,
+  onOpen,
+  storageKey
+}) {
+  const m2 = useStudioMessages();
+  const words = useFormatters();
+  const componentsLibrary = useMemo(() => ({
+    id: ids.components,
+    hint: none$1,
+    items: components2.map((component2) => {
+      const card = cards.get(component2.key);
+      return {
+        key: component2.key,
+        label: component2.name,
+        sublabel: card === void 0 ? none$1 : some(card.meta),
+        icon: some(component2.icon),
+        status: none$1,
+        trailing: some({ icon: "lock", label: m2.logicFixed(), tone: none$1 }),
+        draggable: true,
+        filtered: false,
+        placed: (card == null ? void 0 : card.placed) ?? false,
+        media: none$1,
+        avatar: none$1,
+        byline: none$1,
+        action: none$1,
+        search: some(`${component2.name} ${component2.category} ${component2.tags.join(" ")}`),
+        groups: /* @__PURE__ */ new Map([["category", component2.category]]),
+        facets: /* @__PURE__ */ new Map([["category", [component2.category]], ["tags", component2.tags], ["collections", component2.collections]]),
+        dims: /* @__PURE__ */ new Map()
+      };
+    }),
+    groupOptions: [{ key: "category", label: m2.category() }],
+    groupSummaries: /* @__PURE__ */ new Map(),
+    dimOptions: [],
+    defaultDimensions: [],
+    filterOptions: [
+      { key: "category", label: m2.category() },
+      { key: "tags", label: m2.tags() },
+      { key: "collections", label: m2.collections() }
+    ],
+    searchable: true,
+    noun: some(m2.componentNoun()),
+    addLabel: none$1,
+    onAdd: none$1,
+    onCardClick: some((key) => {
+      onSelect(key);
+      return null;
+    }),
+    slice: none$1,
+    style: some({ height: some("fill"), maxHeight: none$1, virtualization: some(false), columns: none$1, mediaPlacement: none$1, mediaSize: none$1 }),
+    variant: none$1,
+    layout: none$1,
+    toolbar: true
+  }), [ids.components, components2, cards, m2, onSelect]);
+  const pagesLibrary = useMemo(() => ({
+    id: ids.pages,
+    hint: none$1,
+    items: pages.map((page) => ({
+      key: page.page,
+      label: page.title,
+      sublabel: some(page.meta),
+      icon: some("file-lines"),
+      status: none$1,
+      trailing: some({
+        icon: "circle",
+        label: page.live ? m2.live() : m2.draft(),
+        tone: some(page.live ? variant("success", null) : variant("neutral", null))
+      }),
+      draggable: false,
+      filtered: false,
+      placed: page.page === open,
+      media: none$1,
+      avatar: none$1,
+      byline: none$1,
+      action: none$1,
+      search: some(page.title),
+      groups: /* @__PURE__ */ new Map(),
+      facets: /* @__PURE__ */ new Map(),
+      dims: /* @__PURE__ */ new Map()
+    })),
+    groupOptions: [],
+    groupSummaries: /* @__PURE__ */ new Map(),
+    dimOptions: [],
+    defaultDimensions: [],
+    filterOptions: [],
+    searchable: true,
+    noun: some(m2.pageNoun()),
+    addLabel: none$1,
+    onAdd: none$1,
+    onCardClick: some((key) => {
+      onOpen(key);
+      return null;
+    }),
+    slice: none$1,
+    style: some({ height: some("fill"), maxHeight: none$1, virtualization: some(false), columns: none$1, mediaPlacement: none$1, mediaSize: none$1 }),
+    variant: none$1,
+    layout: none$1,
+    toolbar: true
+  }), [ids.pages, pages, open, m2, onOpen]);
+  return /* @__PURE__ */ jsx$1(
+    DockPane,
+    {
+      storageKey: `${storageKey}.palette`,
+      icon: "shapes",
+      label: m2.components(),
+      badge: words.number(components2.length),
+      expandedSize: "264px",
+      railSize: "44px",
+      side: "start",
+      surface: "shell",
+      tabs: [
+        { key: "components", label: m2.components(), body: /* @__PURE__ */ jsx$1(EastChakraLibrary, { value: componentsLibrary, storageKey: `${storageKey}.palette.components` }) },
+        { key: "pages", label: m2.pages(), body: /* @__PURE__ */ jsx$1(EastChakraLibrary, { value: pagesLibrary, storageKey: `${storageKey}.palette.pages` }) }
+      ]
+    }
+  );
+});
+const DEVICES = [
+  { device: "desktop", icon: faDesktop, width: 1440 },
+  { device: "tablet", icon: faTabletScreenButton, width: 1024 },
+  { device: "mobile", icon: faMobileScreen, width: 390 }
+];
+const StudioPublishPreview = memo(function StudioPublishPreview2({ value, page }) {
+  const styles2 = useSlotRecipe({ key: "studioPublish" })();
+  const m2 = useStudioMessages();
+  const words = useFormatters();
+  const [device, setDevice] = useState("desktop");
+  const [phase, setPhase] = useState({ kind: "idle" });
+  const latest = useRef(value);
+  latest.current = value;
+  const summary = value.summary;
+  const standing = summary.standing.type;
+  const live = summary.live.type === "some" ? summary.live.value : void 0;
+  const liveVersion = live === void 0 ? "" : m2.version({ version: words.number(live) });
+  const nextVersion = m2.version({ version: words.number(live === void 0 ? 1n : live + 1n) });
+  const env = value.env.type === "some" ? value.env.value : void 0;
+  const exit = value.onExit.type === "some" ? value.onExit.value : void 0;
+  const busy = phase.kind === "applying" || phase.kind === "publishing";
+  const width2 = DEVICES.find((d2) => d2.device === device).width;
+  const publish = useCallback(async () => {
+    setPhase({ kind: "publishing" });
+    let reason;
+    try {
+      const refused = await latest.current.onPublish();
+      reason = refused.type === "some" ? refused.value : void 0;
+    } catch (err) {
+      reason = err instanceof Error ? err.message : String(err);
+    }
+    setPhase(reason === void 0 ? { kind: "idle" } : { kind: "refused", reason });
+  }, []);
+  const ask = (then2) => {
+    const id3 = Array.from(crypto.getRandomValues(new Uint8Array(8)), (b2) => b2.toString(16).padStart(2, "0")).join("");
+    setPhase({ kind: "applying", id: id3, publish: then2 === "publish" });
+    const onApply = value.onApply;
+    queueMicrotask(() => {
+      try {
+        onApply(id3);
+      } catch (err) {
+        setPhase({ kind: "refused", reason: err instanceof Error ? err.message : String(err) });
+      }
+    });
+  };
+  const answer = value.apply;
+  useEffect(() => {
+    if (phase.kind !== "applying") return;
+    if (answer.type === "applied" && answer.value === phase.id) {
+      if (phase.publish) void publish();
+      else setPhase({ kind: "idle" });
+    } else if (answer.type === "refused" && answer.value.id === phase.id) {
+      setPhase({ kind: "refused", reason: answer.value.reason });
+    }
+  }, [answer, phase, publish]);
+  const changes = summary.changes;
+  const changed = summary.changed;
+  const count = changes.length;
+  const head = standing === "ready" ? m2.readyToPublish() : standing === "current" ? m2.upToDate() : m2.templateNotPublished();
+  const listHead = live === void 0 ? m2.changesFirst({ n: count, count: words.number(count) }) : count === 0 ? m2.noChangesSince({ version: liveVersion }) : m2.changesSince({ n: count, count: words.number(count), version: liveVersion });
+  const tone = changed.length === 0 ? "change" : "warning";
+  const audience = value.audience.type === "some" ? value.audience.value : void 0;
+  const rollout = value.rollout.type === "some" ? value.rollout.value : void 0;
+  return /* @__PURE__ */ jsxs(Box, { css: styles2.root, "data-studio-publish": "", children: [
+    /* @__PURE__ */ jsxs(Box, { css: styles2.bar, "data-publish-bar": "", children: [
+      /* @__PURE__ */ jsxs(Box, { as: "span", css: styles2.barLabel, children: [
+        /* @__PURE__ */ jsx$1(Box, { as: "span", css: styles2.barDot, "aria-hidden": true }),
+        m2.preview()
+      ] }),
+      /* @__PURE__ */ jsx$1(Box, { css: styles2.devices, role: "group", "aria-label": m2.devices(), "data-publish-devices": "", children: DEVICES.map(({ device: d2, icon: icon3 }) => /* @__PURE__ */ jsxs(
+        chakra.button,
+        {
+          type: "button",
+          css: styles2.device,
+          "data-state": device === d2 ? "on" : "off",
+          "aria-pressed": device === d2,
+          "data-publish-device": d2,
+          onClick: () => setDevice(d2),
+          children: [
+            /* @__PURE__ */ jsx$1(Box, { as: "span", css: styles2.deviceIcon, "aria-hidden": true, children: /* @__PURE__ */ jsx$1(FontAwesomeIcon, { icon: icon3 }) }),
+            m2.device({ device: d2 })
+          ]
+        },
+        d2
+      )) }),
+      env !== void 0 && /* @__PURE__ */ jsxs(Box, { as: "span", css: styles2.env, "data-publish-env": "", children: [
+        m2.env(),
+        " ·",
+        /* @__PURE__ */ jsx$1(Box, { as: "span", css: styles2.envName, children: env }),
+        /* @__PURE__ */ jsx$1(Box, { as: "span", css: styles2.envCaret, "aria-hidden": true, children: /* @__PURE__ */ jsx$1(FontAwesomeIcon, { icon: faChevronDown }) })
+      ] }),
+      /* @__PURE__ */ jsx$1(
+        chakra.button,
+        {
+          type: "button",
+          css: styles2.exit,
+          disabled: exit === void 0,
+          "data-publish-exit": "",
+          onClick: () => {
+            if (exit !== void 0) queueMicrotask(() => exit());
+          },
+          children: m2.exit()
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs(Box, { css: styles2.body, children: [
+      /* @__PURE__ */ jsx$1(Box, { css: styles2.main, "data-publish-main": "", children: /* @__PURE__ */ jsxs(Box, { css: styles2.frame, style: { maxWidth: `${width2}px` }, "data-publish-frame": device, children: [
+        /* @__PURE__ */ jsxs(Box, { css: styles2.head, children: [
+          /* @__PURE__ */ jsx$1(Box, { as: "span", css: styles2.eyebrow, children: value.project }),
+          /* @__PURE__ */ jsx$1(Box, { as: "h2", css: styles2.title, children: value.title })
+        ] }),
+        page
+      ] }) }),
+      /* @__PURE__ */ jsxs(Box, { as: "aside", css: styles2.aside, "aria-label": head, "data-publish-aside": "", children: [
+        /* @__PURE__ */ jsxs(Box, { css: styles2.asideHead, children: [
+          /* @__PURE__ */ jsx$1(Box, { as: "span", css: styles2.asideTitle, "data-publish-head": "", children: head }),
+          /* @__PURE__ */ jsxs(Box, { as: "span", css: styles2.asideSub, "data-publish-versions": "", children: [
+            value.title,
+            " ·",
+            " ",
+            standing === "template" ? m2.templateKind() : standing === "current" ? `${liveVersion} ${m2.liveVersion()}` : live === void 0 ? /* @__PURE__ */ jsx$1(Box, { as: "span", css: styles2.asideVersion, children: nextVersion }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+              liveVersion,
+              " → ",
+              /* @__PURE__ */ jsx$1(Box, { as: "span", css: styles2.asideVersion, children: nextVersion })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs(Box, { css: styles2.asideBody, children: [
+          standing !== "template" && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx$1(Box, { as: "span", css: styles2.listHead, "data-publish-count": "", children: listHead }),
+            count > 0 && /* @__PURE__ */ jsx$1(Box, { as: "ul", css: styles2.list, "aria-label": listHead, "data-publish-changes": "", children: changes.map((row, i) => {
+              const kind = row.change.type;
+              return /* @__PURE__ */ jsxs(Box, { as: "li", css: styles2.change, "data-publish-change": kind, children: [
+                /* @__PURE__ */ jsx$1(Box, { as: "span", css: styles2.sign, "data-sign": kind, "aria-hidden": true, children: kind === "added" ? "+" : kind === "removed" ? "−" : "±" }),
+                /* @__PURE__ */ jsxs(Box, { css: styles2.changeText, children: [
+                  /* @__PURE__ */ jsxs(Box, { as: "span", css: styles2.changeLine, children: [
+                    m2.changeVerb({ change: kind }),
+                    " ",
+                    /* @__PURE__ */ jsx$1(Box, { as: "strong", css: styles2.changeName, children: row.name })
+                  ] }),
+                  /* @__PURE__ */ jsx$1(Box, { as: "span", css: styles2.changeDetail, children: row.change.value.detail })
+                ] })
+              ] }, `${row.change.value.cell}-${kind}-${i}`);
+            }) }),
+            standing === "ready" && live !== void 0 && /* @__PURE__ */ jsxs(
+              Box,
+              {
+                css: styles2.banner,
+                layerStyle: tone === "change" ? "banner.change" : "banner.guard",
+                "data-tone": tone,
+                role: tone === "warning" ? "alert" : "status",
+                "data-publish-banner": tone,
+                children: [
+                  /* @__PURE__ */ jsx$1(Box, { as: "span", css: styles2.bannerGlyph, "aria-hidden": true, children: tone === "change" ? "△" : "!" }),
+                  /* @__PURE__ */ jsx$1(Box, { as: "span", css: styles2.bannerText, children: tone === "change" ? m2.logicUnchanged() : m2.logicChangedIn({ version: liveVersion, components: changed }) })
+                ]
+              }
+            )
+          ] }),
+          (audience !== void 0 || rollout !== void 0) && /* @__PURE__ */ jsxs(Box, { css: styles2.facts, "data-publish-facts": "", children: [
+            audience !== void 0 && /* @__PURE__ */ jsxs(Box, { css: styles2.fact, children: [
+              /* @__PURE__ */ jsx$1(Box, { as: "span", css: styles2.factLabel, children: m2.audience() }),
+              /* @__PURE__ */ jsx$1(Box, { as: "span", css: styles2.factValue, children: audience })
+            ] }),
+            rollout !== void 0 && /* @__PURE__ */ jsxs(Box, { css: styles2.fact, children: [
+              /* @__PURE__ */ jsx$1(Box, { as: "span", css: styles2.factLabel, children: m2.rollout() }),
+              /* @__PURE__ */ jsx$1(Box, { as: "span", css: styles2.factValue, children: rollout })
+            ] })
+          ] }),
+          phase.kind === "refused" && /* @__PURE__ */ jsx$1(Box, { as: "span", role: "alert", css: styles2.refusal, "data-publish-refused": "", children: phase.reason })
+        ] }),
+        /* @__PURE__ */ jsxs(Box, { css: styles2.foot, "data-publish-foot": "", children: [
+          /* @__PURE__ */ jsx$1(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              size: "sm",
+              "data-publish-save": "",
+              disabled: !summary.unsaved || busy,
+              loading: phase.kind === "applying" && !phase.publish,
+              onClick: () => ask("save"),
+              children: m2.saveAsDraft()
+            }
+          ),
+          /* @__PURE__ */ jsx$1(
+            Button,
+            {
+              type: "button",
+              size: "sm",
+              colorPalette: "brand",
+              "data-publish-publish": "",
+              disabled: standing !== "ready" || busy,
+              loading: phase.kind === "applying" && phase.publish || phase.kind === "publishing",
+              onClick: () => {
+                if (summary.unsaved) ask("publish");
+                else void publish();
+              },
+              children: m2.publishTo({ version: standing === "template" ? void 0 : nextVersion, env })
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+});
+function NamePopover({
+  open,
+  onOpenChange,
+  trigger,
+  label,
+  placeholder,
+  initial: initial2,
+  taken,
+  missing,
+  confirm,
+  children: children2,
+  onConfirm
+}) {
+  const edit = useSlotRecipe({ key: "sliceEdit" })();
+  const input = useRecipe({ key: "input" })({});
+  const m2 = useStudioMessages();
+  const id3 = useId();
+  const [name, setName] = useState(initial2);
+  const [refused, setRefused] = useState(void 0);
+  const [busy, setBusy] = useState(false);
+  const [wasOpen, setWasOpen] = useState(open);
+  if (open !== wasOpen) {
+    setWasOpen(open);
+    if (open) {
+      setName(initial2);
+      setRefused(void 0);
+      setBusy(false);
+    }
+  }
+  const trimmed = name.trim();
+  const isTaken = trimmed !== "" && taken.has(trimmed);
+  const submit = async () => {
+    if (trimmed === "" || isTaken || busy) return;
+    setBusy(true);
+    setRefused(void 0);
+    try {
+      const why = await onConfirm(trimmed);
+      if (why === void 0) onOpenChange(false);
+      else setRefused(why);
+    } catch (err) {
+      setRefused(err instanceof Error ? err.message : String(err));
+    } finally {
+      setBusy(false);
+    }
+  };
+  return /* @__PURE__ */ jsx$1(
+    SliceEditPopover,
+    {
+      open,
+      onOpenChange,
+      trigger,
+      label,
+      footActions: /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx$1(Button, { type: "button", variant: "outline", size: "xs", disabled: busy, onClick: () => onOpenChange(false), children: m2.cancel() }),
+        /* @__PURE__ */ jsx$1(
+          Button,
+          {
+            type: "submit",
+            form: `${id3}-form`,
+            variant: "outline",
+            size: "xs",
+            loading: busy,
+            disabled: trimmed === "" || isTaken,
+            children: confirm
+          }
+        )
+      ] }),
+      children: /* @__PURE__ */ jsxs(
+        chakra.form,
+        {
+          id: `${id3}-form`,
+          display: "contents",
+          noValidate: true,
+          onSubmit: (e3) => {
+            e3.preventDefault();
+            void submit();
+          },
+          children: [
+            /* @__PURE__ */ jsxs(Box, { display: "flex", flexDirection: "column", gap: "{spacing.1}", children: [
+              /* @__PURE__ */ jsx$1(
+                chakra.input,
+                {
+                  css: input,
+                  value: name,
+                  placeholder,
+                  "aria-label": placeholder,
+                  autoComplete: "off",
+                  autoFocus: true,
+                  "aria-invalid": isTaken ? true : void 0,
+                  "aria-describedby": trimmed === "" || isTaken ? `${id3}-hint` : void 0,
+                  onChange: (e3) => setName(e3.target.value)
+                }
+              ),
+              trimmed === "" && /* @__PURE__ */ jsx$1(Box, { as: "span", id: `${id3}-hint`, css: edit.hint, children: missing }),
+              isTaken && /* @__PURE__ */ jsx$1(Box, { as: "span", id: `${id3}-hint`, css: edit.hintError, children: m2.nameTaken({ name: trimmed }) })
+            ] }),
+            children2,
+            refused !== void 0 && /* @__PURE__ */ jsx$1(Box, { as: "span", role: "alert", css: edit.hintError, "data-refused": "", children: refused })
+          ]
+        }
+      )
+    }
+  );
+}
+const StudioSaveTemplate = memo(function StudioSaveTemplate2({ value }) {
+  const edit = useSlotRecipe({ key: "sliceEdit" })();
+  const m2 = useStudioMessages();
+  const [open, setOpen] = useState(false);
+  const onSave = value.onSave;
+  return /* @__PURE__ */ jsx$1(
+    NamePopover,
+    {
+      open,
+      onOpenChange: (next2) => setOpen(next2 && value.enabled),
+      trigger: /* @__PURE__ */ jsx$1(
+        Button,
+        {
+          variant: "outline",
+          disabled: !value.enabled,
+          "data-studio-save-template": "",
+          ...value.enabled ? {} : { title: m2.templateOpen() },
+          children: m2.saveAsTemplate()
+        }
+      ),
+      label: /* @__PURE__ */ jsxs(Fragment, { children: [
+        m2.saveAsTemplate(),
+        " · ",
+        /* @__PURE__ */ jsx$1(Box, { as: "span", css: edit.clauseField, children: value.title })
+      ] }),
+      placeholder: m2.templateName(),
+      initial: m2.templateNameFor({ page: value.title }),
+      taken: value.taken,
+      missing: m2.templateNameMissing(),
+      confirm: m2.saveTemplate(),
+      onConfirm: async (name) => {
+        const refused = await onSave(name);
+        return refused.type === "some" ? refused.value : void 0;
+      }
+    }
+  );
+});
+function compileStudio() {
+  return {
+    /** Each listed component's palette card. */
+    paletteCards: East.compile(paletteCards, []),
+    /** A project's pages, as the palette lists them. */
+    palettePages: East.compile(palettePages, []),
+    /** Each listed component's tile on the canvas. */
+    canvasTiles: East.compile(canvasTiles, []),
+    /** The selected placement, as the inspector shows it. */
+    inspectorSelection: East.compile(inspectorSelection, []),
+    /** What the publish preview shows of the open entry. */
+    publishSummary: East.compile(publishSummary, []),
+    /** What refused a publish. */
+    publishRefusal: East.compile(publishRefusal, []),
+    /** The projects the record holds. */
+    libraryProjects: East.compile(libraryProjects, []),
+    /** A project's pages, as the page library draws them. */
+    libraryPages: East.compile(libraryPages, []),
+    /** A project's templates, as the page library draws them. */
+    libraryTemplates: East.compile(libraryTemplates, []),
+    /** What refused a write under a new name. */
+    nameWriteRefusal: East.compile(nameWriteRefusal, []),
+    /** The changes from one layout of a page to another. */
+    changes: East.compile(Studio.changes, []),
+    /** The patch that publishes a page. */
+    publish: East.compile(Studio.publish, []),
+    /** The patch that starts a page. */
+    newPage: East.compile(Studio.newPage, []),
+    /** The patch that saves a page's draft as a template. */
+    saveTemplate: East.compile(Studio.saveTemplate, []),
+    /** The canvas's Apply: a batch of placements, one patch through the record's patch write. */
+    save: East.compileAsync(saveCells, [])
+  };
+}
+let compiled;
+function studioEast() {
+  compiled ?? (compiled = compileStudio());
+  return compiled;
+}
+const CellsType = ArrayType(StudioCellType);
+const encodeCells = encodeBeast2For(CellsType);
+const decodeCells = decodeBeast2For(CellsType);
+const encodeCell = encodeBeast2For(StudioCellType);
+const decodeBatch = decodeBeast2For(Editing.Types.ChangeSet(StudioCellType));
+const CELL_TYPE = toEastTypeValue(StudioCellType);
+const CELL_DRAFT_TYPE = toEastTypeValue(EditingDraftFieldType(StudioCellType));
+const keyEqual = equalFor(StudioKeyType);
+const printKey = printFor(StudioKeyType);
+const NOTHING_SELECTED = { selected: none$1, request: none$1 };
+const EastChakraStudioBuilder = memo(function EastChakraStudioBuilder2({ value, storageKey }) {
+  const styles2 = useSlotRecipe({ key: "studioBuilder" })();
+  const statusRecipe = useSlotRecipe({ key: "status" });
+  const m2 = useStudioMessages();
+  const words = useFormatters();
+  const east = studioEast();
+  const { pages: handle, components: components2, project } = value;
+  const id3 = value.id.type === "some" ? value.id.value : void 0;
+  const keys = useMemo(() => builderKeys(id3), [id3]);
+  const read = useCallback(() => handle.read(), [handle]);
+  const { result } = useTrackedEvaluation(read);
+  const pages = result.ok ? result.value : void 0;
+  const first2 = useMemo(() => {
+    if (pages !== void 0) {
+      for (const [key, entry2] of pages) {
+        if (key.project === project && entry2.type === "page") return key;
+      }
+    }
+    return { project, page: "" };
+  }, [pages, project]);
+  const [open, writeOpen] = useOpenPage(keys.page, first2);
+  const openName = printKey(open);
+  let entry;
+  if (pages !== void 0) {
+    for (const [key, found] of pages) {
+      if (keyEqual(key, open)) {
+        entry = found;
+        break;
+      }
+    }
+  }
+  const [ui, setUi] = useState(NOTHING_SELECTED);
+  const [applying2, setApplying] = useState(variant("idle", null));
+  const [drafted, setDrafted] = useState(void 0);
+  const [previewing, setPreviewing] = useState(false);
+  const shown = useRef(openName);
+  useEffect(() => {
+    if (shown.current === openName) return;
+    shown.current = openName;
+    setUi(NOTHING_SELECTED);
+  }, [openName]);
+  const saved = useMemo(() => entry === void 0 ? [] : entry.type === "page" ? entry.value.draft.cells : entry.value.cells, [entry]);
+  const cells = drafted !== void 0 && drafted.page === openName ? drafted.cells : saved;
+  const liveCells = useMemo(() => entry !== void 0 && entry.type === "page" && entry.value.live.type === "some" ? some(entry.value.live.value.page.cells) : none$1, [entry]);
+  const title = entry === void 0 ? "" : entry.type === "page" ? entry.value.draft.title : entry.value.title;
+  const tiles = useMemo(() => east.canvasTiles(components2), [east, components2]);
+  const componentOf = useRef(/* @__PURE__ */ new Map());
+  const cellView = useCallback((cell) => {
+    componentOf.current.set(cell.key, cell.component);
+    const tile = tiles.get(cell.component);
+    return {
+      key: cell.key,
+      row: cell.row,
+      span: cell.span,
+      height: cell.height,
+      minHeight: none$1,
+      align: cell.align,
+      // A frameless component renders bare; one the surface does not
+      // list is its placeholder, in a tile.
+      frame: tile === void 0 ? true : tile.frame,
+      label: cell.title.type === "some" ? cell.title : tile === void 0 ? none$1 : some(tile.name),
+      icon: tile === void 0 ? none$1 : some(tile.icon),
+      meta: tile === void 0 ? some(cell.component) : some(tile.meta)
+    };
+  }, [tiles]);
+  const snapshot = useMemo(() => encodeCells([...saved]), [saved]);
+  const editing = useMemo(() => ({
+    sourceId: `studio.page:${openName}`,
+    entryType: CELL_TYPE,
+    idField: some("key"),
+    draftType: CELL_DRAFT_TYPE,
+    children: none$1,
+    keyType: none$1,
+    snapshot: some(snapshot),
+    readEntry: (entryId) => {
+      const cell = saved.find((c2) => c2.key === entryId);
+      return cell === void 0 ? none$1 : some(encodeCell(cell));
+    },
+    onPatch: none$1,
+    // Apply: the batch, one patch on the page through the record's patch write.
+    onApply: some(variant("async", (bytes) => east.save(handle, open, decodeBatch(bytes)))),
+    mode: variant("batch", null),
+    fields: { key: "key", row: "row", span: "span", height: some("height"), align: some("align") },
+    derive: (bytes) => decodeCells(bytes).map(cellView),
+    // A component dropped from the palette: a placement at its span,
+    // storing its fingerprint; the canvas fits the span to the row.
+    create: some((card, at) => {
+      const component2 = components2.find((c2) => c2.key === card.key);
+      if (component2 === void 0) throw new Error(`No component "${card.key}" is listed`);
+      return encodeCell({
+        key: at.key,
+        row: at.row,
+        span: component2.span,
+        height: none$1,
+        align: variant("top", null),
+        title: none$1,
+        component: component2.key,
+        fingerprint: component2.fingerprint
+      });
+    }),
+    ready: none$1,
+    // The rows the canvas draws, for the palette's counts, the inspector and the preview.
+    onDrafted: some((bytes) => {
+      setDrafted({ page: openName, cells: decodeCells(bytes) });
+      return null;
+    })
+  }), [openName, snapshot, saved, east, handle, open, cellView, components2]);
+  const uiBind = useMemo(() => ({
+    read: () => ui,
+    write: (next2) => {
+      setUi(next2);
+      return null;
+    },
+    has: () => true
+  }), [ui]);
+  const applyBind = useMemo(() => ({
+    read: () => applying2,
+    write: (next2) => {
+      setApplying(next2);
+      return null;
+    },
+    has: () => true
+  }), [applying2]);
+  const canvas = useMemo(() => ({
+    cells: saved.map(cellView),
+    variant: none$1,
+    width: some("1440px"),
+    height: some("fill"),
+    maxHeight: none$1,
+    zoom: none$1,
+    guides: true,
+    editing: some(editing),
+    ui: some(uiBind),
+    view: none$1,
+    apply: some(applyBind),
+    id: none$1,
+    sources: [keys.components],
+    canDrop: none$1,
+    widths: [
+      { label: m2.device({ device: "desktop" }), icon: some("desktop"), width: "1440px" },
+      { label: m2.device({ device: "tablet" }), icon: some("tablet-screen-button"), width: "1024px" }
+    ],
+    toolbar: { start: [], end: [] },
+    panes: { start: none$1, end: none$1 },
+    surface: some(variant("shell", null))
+  }), [saved, cellView, editing, uiBind, applyBind, keys.components, m2]);
+  const listedByKey = useMemo(() => {
+    const byKey = /* @__PURE__ */ new Map();
+    for (const component2 of components2) {
+      const same2 = byKey.get(component2.key);
+      if (same2 === void 0) byKey.set(component2.key, [component2]);
+      else same2.push(component2);
+    }
+    return byKey;
+  }, [components2]);
+  const renderContent = useCallback((cell) => {
+    const component2 = componentOf.current.get(cell.key) ?? "";
+    return /* @__PURE__ */ jsx$1(StudioPlacement, { component: component2, listed: listedByKey.get(component2) ?? [], storageKey: `${storageKey}.canvas.${cell.key}` });
+  }, [listedByKey, storageKey]);
+  const status = entry === void 0 ? void 0 : entry.type === "template" ? { label: m2.statusTemplate(), tone: "neutral", ring: false } : entry.value.live.type === "none" ? { label: m2.statusDraft(), tone: "neutral", ring: true } : east.changes(entry.value.live.value.page, entry.value.draft).length === 0 ? { label: m2.statusLive(), tone: "success", ring: false } : { label: m2.statusLiveEdited(), tone: "warning", ring: false };
+  const statusStyles = status === void 0 ? void 0 : statusRecipe({ status: status.tone, size: "md", ring: status.ring });
+  const taken = useMemo(() => {
+    const names = /* @__PURE__ */ new Set();
+    if (pages !== void 0) {
+      for (const [key] of pages) {
+        if (key.project === open.project) names.add(key.page);
+      }
+    }
+    return names;
+  }, [pages, open.project]);
+  const saveTemplate = useMemo(() => ({
+    title,
+    enabled: entry !== void 0 && entry.type === "page",
+    taken,
+    // The open page, as last saved, as a template under a name — one commit.
+    onSave: async (name) => {
+      const now2 = handle.read();
+      const patch = east.saveTemplate(now2, open, { project: open.project, page: name }, name);
+      const outcome = await handle.commit.patch("", patch);
+      return east.nameWriteRefusal(outcome, name);
+    }
+  }), [title, entry, taken, handle, east, open]);
+  const toolbar = {
+    start: [status !== void 0 && statusStyles !== void 0 && {
+      key: "status",
+      side: "start",
+      version: status.label,
+      forms: [
+        /* @__PURE__ */ jsxs(HStack, { css: statusStyles.root, "data-studio-status": status.tone, children: [
+          /* @__PURE__ */ jsx$1(Box, { as: "span", css: statusStyles.indicator }),
+          /* @__PURE__ */ jsx$1(Box, { css: statusStyles.label, children: status.label })
+        ] })
+      ]
+    }],
+    end: [
+      { key: "save-template", side: "end", forms: [/* @__PURE__ */ jsx$1(StudioSaveTemplate, { value: saveTemplate })] },
+      {
+        key: "preview",
+        side: "end",
+        forms: [/* @__PURE__ */ jsx$1(Button, { variant: "outline", "data-studio-preview": "", onClick: () => setPreviewing(true), children: m2.preview() })]
+      },
+      {
+        key: "publish",
+        side: "end",
+        forms: [/* @__PURE__ */ jsx$1(Button, { variant: "outline", "data-studio-open-publish": "", onClick: () => setPreviewing(true), children: m2.publish() })]
+      }
+    ]
+  };
+  const listed = useMemo(() => components2.filter((c2) => !c2.deprecated), [components2]);
+  const cards = useMemo(() => east.paletteCards(listed, [...cells], ui.selected), [east, listed, cells, ui.selected]);
+  const projectPages = useMemo(() => pages === void 0 ? [] : east.palettePages(pages, project), [east, pages, project]);
+  const selectFirst = useCallback((component2) => {
+    const placement = cells.find((c2) => c2.component === component2);
+    if (placement !== void 0) setUi({ selected: some(placement.key), request: none$1 });
+  }, [cells]);
+  const openPage = useCallback((page) => {
+    writeOpen({ project, page });
+    setUi(NOTHING_SELECTED);
+  }, [writeOpen, project]);
+  const paletteIds = useMemo(() => ({ components: keys.components, pages: keys.pages }), [keys.components, keys.pages]);
+  const selection2 = useMemo(
+    () => east.inspectorSelection(components2, [...cells], liveCells, ui.selected),
+    [east, components2, cells, liveCells, ui.selected]
+  );
+  const onRequest = useCallback((request) => {
+    setUi({ selected: some(request.key), request: some(request) });
+    return null;
+  }, []);
+  const inspector = useMemo(() => ({ selection: selection2, onRequest }), [selection2, onRequest]);
+  const selected2 = selection2.type === "some" ? selection2.value : void 0;
+  const summary = useMemo(
+    () => entry === void 0 ? void 0 : east.publishSummary(components2, entry.type === "page" ? entry.value.live : none$1, { title, cells: [...cells] }, [...saved], entry.type === "template"),
+    [east, components2, entry, title, cells, saved]
+  );
+  const preview = useMemo(() => summary === void 0 ? void 0 : {
+    project: open.project,
+    title,
+    summary,
+    env: value.env,
+    audience: value.audience,
+    rollout: value.rollout,
+    apply: applying2,
+    // The canvas applies its drafts, and answers under the id.
+    onApply: (ask) => {
+      setApplying(variant("asked", ask));
+      return null;
+    },
+    // The publish, from the record as it stands when it commits — what an
+    // Apply just before it left.
+    onPublish: async () => {
+      const now2 = handle.read();
+      const patch = east.publish(now2, open, components2);
+      const outcome = await handle.commit.patch("", patch);
+      return east.publishRefusal(outcome);
+    },
+    onExit: some(() => {
+      setPreviewing(false);
+      return null;
+    })
+  }, [summary, open, title, value.env, value.audience, value.rollout, applying2, handle, east, components2]);
+  if (!result.ok) {
+    const message = result.error instanceof Error ? result.error.message : String(result.error);
+    return /* @__PURE__ */ jsx$1(BannerView, { status: "error", title: message });
+  }
+  if (entry === void 0) {
+    return /* @__PURE__ */ jsx$1(
+      EmptyStateView,
+      {
+        icon: { prefix: "fas", name: "file-circle-question" },
+        title: m2.noPageOpen(),
+        description: m2.noPageOpenHint({ project, page: open.page })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(Box, { css: styles2.root, "data-studio-builder": "", children: [
+    /* @__PURE__ */ jsx$1(Box, { css: styles2.canvas, hidden: previewing, "data-studio-canvas": "", children: /* @__PURE__ */ jsx$1(
+      SnapGridEditor,
+      {
+        value: canvas,
+        storageKey: `${storageKey}.canvas`,
+        toolbar,
+        renderContent,
+        panes: {
+          start: /* @__PURE__ */ jsx$1(
+            StudioPalette,
+            {
+              components: listed,
+              cards,
+              pages: projectPages,
+              open: open.project === project ? open.page : "",
+              ids: paletteIds,
+              onSelect: selectFirst,
+              onOpen: openPage,
+              storageKey
+            }
+          ),
+          end: /* @__PURE__ */ jsx$1(
+            DockPane,
+            {
+              storageKey: `${storageKey}.inspector`,
+              icon: "sliders",
+              label: m2.inspector(),
+              badge: selected2 === void 0 ? "" : m2.spanBadge({ span: words.number(Number(selected2.layout.span)) }),
+              active: selected2 !== void 0,
+              detail: selected2 === void 0 ? m2.nothingSelected() : selected2.name,
+              expandedSize: "300px",
+              railSize: "44px",
+              side: "end",
+              surface: "shell",
+              body: /* @__PURE__ */ jsx$1(StudioInspector, { value: inspector })
+            }
+          )
+        }
+      }
+    ) }),
+    previewing && preview !== void 0 && /* @__PURE__ */ jsx$1(
+      StudioPublishPreview,
+      {
+        value: preview,
+        page: /* @__PURE__ */ jsx$1(StudioLayout, { cells, components: components2, storageKey: `${storageKey}.preview` })
+      }
+    )
+  ] });
+});
+implementUIComponent(StudioBuilderComponent, EastChakraStudioBuilder);
+const RANK = { newPage: 0, sort: 1, newPageIcon: 2, searchMid: 3, searchNarrow: 4 };
+const SORTS = [
+  { key: "az", icon: faArrowDownAZ, name: (m2) => m2.nameAz() },
+  { key: "za", icon: faArrowDownZA, name: (m2) => m2.nameZa() }
+];
+const BLANK = "\0blank";
+function SortMenu({ sort: sort2, onPick, compact, trigger, caret: caret2, check }) {
+  const m2 = useStudioMessages();
+  const current = SORTS.find((s2) => s2.key === sort2) ?? SORTS[0];
+  const words = m2.sortByName();
+  return /* @__PURE__ */ jsxs(Menu.Root, { positioning: { placement: "bottom-end" }, children: [
+    /* @__PURE__ */ jsx$1(Menu.Trigger, { asChild: true, children: /* @__PURE__ */ jsx$1(
+      chakra.button,
+      {
+        type: "button",
+        css: trigger,
+        "data-page-library-sort": "",
+        ...compact ? { "aria-label": words, title: words } : {},
+        children: compact ? /* @__PURE__ */ jsx$1(FontAwesomeIcon, { icon: current.icon }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          words,
+          /* @__PURE__ */ jsx$1(Box, { as: "span", css: caret2, "aria-hidden": true, children: /* @__PURE__ */ jsx$1(FontAwesomeIcon, { icon: faCaretDown }) })
+        ] })
+      }
+    ) }),
+    /* @__PURE__ */ jsx$1(Portal, { children: /* @__PURE__ */ jsx$1(Menu.Positioner, { children: /* @__PURE__ */ jsx$1(Menu.Content, { children: /* @__PURE__ */ jsx$1(Menu.RadioItemGroup, { value: sort2, onValueChange: (d2) => {
+      const picked = SORTS.find((s2) => s2.key === d2.value);
+      if (picked !== void 0 && picked.key !== sort2) onPick(picked.key);
+    }, children: SORTS.map((s2) => /* @__PURE__ */ jsxs(Menu.RadioItem, { value: s2.key, children: [
+      /* @__PURE__ */ jsx$1(Box, { as: "span", css: check, children: s2.key === sort2 && /* @__PURE__ */ jsx$1(FontAwesomeIcon, { icon: faCheck }) }),
+      s2.name(m2)
+    ] }, s2.key)) }) }) }) })
+  ] });
+}
+const EastChakraStudioLibrary = memo(function EastChakraStudioLibrary2({ value, storageKey }) {
+  const styles2 = useSlotRecipe({ key: "studioLibrary" })();
+  const library2 = useSlotRecipe({ key: "library" })();
+  const edit = useSlotRecipe({ key: "sliceEdit" })();
+  const status = useSlotRecipe({ key: "status" });
+  const liveDot = status({ status: "success" });
+  const draftDot = status({ status: "neutral", ring: true });
+  const button = useRecipe({ key: "button" });
+  const m2 = useStudioMessages();
+  const words = useFormatters();
+  const id3 = useId();
+  const east = studioEast();
+  const { pages: handle, components: components2 } = value;
+  const home = value.project;
+  const keys = useMemo(() => builderKeys(value.id.type === "some" ? value.id.value : void 0), [value.id]);
+  const tellHost = value.onOpen.type === "some" ? value.onOpen.value : void 0;
+  const read = useCallback(() => handle.read(), [handle]);
+  const { result } = useTrackedEvaluation(read);
+  const records = result.ok ? result.value : void 0;
+  const [project, setProject] = useState(home);
+  const [text, setText] = useState("");
+  const [sort2, setSort] = useState("az");
+  const [layout4, setLayout] = useState("grid");
+  const [popover, setPopover] = useState(void 0);
+  const needle = text.toLowerCase();
+  const first2 = useMemo(() => {
+    if (records !== void 0) {
+      for (const [key, entry] of records) {
+        if (key.project === home && entry.type === "page") return key;
+      }
+    }
+    return { project: home, page: "" };
+  }, [records, home]);
+  const [open, writeOpen] = useOpenPage(keys.page, first2);
+  const za = sort2 === "za";
+  const everyPage = useMemo(() => records === void 0 ? [] : east.libraryPages(records, project), [east, records, project]);
+  const everyTemplate = useMemo(
+    () => records === void 0 ? [] : east.libraryTemplates(records, project, components2),
+    [east, records, project, components2]
+  );
+  const pageRows2 = useMemo(() => {
+    const matching2 = everyPage.filter((p2) => p2.title.toLowerCase().includes(needle));
+    return za ? matching2.reverse() : matching2;
+  }, [everyPage, needle, za]);
+  const paneRows = useMemo(() => {
+    const byName = records === void 0 ? [] : east.palettePages(records, project);
+    return za ? [...byName].reverse() : byName;
+  }, [east, records, project, za]);
+  const templateRows = useMemo(() => {
+    const matching2 = everyTemplate.filter((t4) => t4.title.toLowerCase().includes(needle));
+    const ordered = za ? matching2.reverse() : matching2;
+    const blank = { name: "", title: m2.blankGrid(), summary: m2.blankSummary(), cells: [] };
+    return m2.blankGrid().toLowerCase().includes(needle) ? [blank, ...ordered] : ordered;
+  }, [everyTemplate, needle, za, m2]);
+  const projects = useMemo(() => records === void 0 ? [home] : east.libraryProjects(records, home), [east, records, home]);
+  const taken = useMemo(() => {
+    const names = /* @__PURE__ */ new Set();
+    if (records !== void 0) {
+      for (const [key] of records) {
+        if (key.project === project) names.add(key.page);
+      }
+    }
+    return names;
+  }, [records, project]);
+  const openPage = useCallback((name) => {
+    const key = { project, page: name };
+    writeOpen(key);
+    if (tellHost !== void 0) queueMicrotask(() => tellHost(key));
+  }, [project, writeOpen, tellHost]);
+  const startFrom = useCallback((name) => setPopover(name), []);
+  const startBlank = useCallback(() => setPopover(""), []);
+  const wireframes = useMemo(() => {
+    const out = /* @__PURE__ */ new Map();
+    const layouts = [
+      ...templateRows.map((t4) => [`template:${t4.name}`, t4.cells]),
+      ...pageRows2.map((p2) => [`page:${p2.page}`, p2.cells])
+    ];
+    for (const [card, cells] of layouts) {
+      out.set(card, cells.map((c2) => ({
+        key: c2.key,
+        row: c2.row,
+        span: c2.span,
+        height: some(c2.height.type === "some" ? c2.height.value / 12n : 12n),
+        align: c2.align,
+        frame: true
+      })));
+    }
+    return out;
+  }, [templateRows, pageRows2]);
+  const templateMedia = useCallback((item) => /* @__PURE__ */ jsx$1(SnapGridTiles, { wireframe: true, cells: wireframes.get(`template:${item.key}`) ?? [], content: () => null }), [wireframes]);
+  const pageMedia = useCallback((item) => /* @__PURE__ */ jsx$1(SnapGridTiles, { wireframe: true, cells: wireframes.get(`page:${item.key}`) ?? [], content: () => null }), [wireframes]);
+  const templatesGallery = useMemo(() => ({
+    id: `${storageKey}.templates`,
+    hint: none$1,
+    items: templateRows.map((t4) => ({
+      key: t4.name,
+      label: t4.title,
+      sublabel: some(t4.summary),
+      icon: none$1,
+      status: none$1,
+      trailing: none$1,
+      draggable: false,
+      filtered: false,
+      placed: false,
+      media: none$1,
+      avatar: none$1,
+      byline: none$1,
+      action: none$1,
+      search: none$1,
+      groups: /* @__PURE__ */ new Map(),
+      facets: /* @__PURE__ */ new Map(),
+      dims: /* @__PURE__ */ new Map()
+    })),
+    groupOptions: [],
+    groupSummaries: /* @__PURE__ */ new Map(),
+    dimOptions: [],
+    defaultDimensions: [],
+    filterOptions: [],
+    searchable: false,
+    noun: none$1,
+    addLabel: none$1,
+    onAdd: none$1,
+    onCardClick: some((name) => {
+      startFrom(name);
+      return null;
+    }),
+    slice: none$1,
+    style: some({ height: none$1, maxHeight: none$1, virtualization: none$1, columns: some(4n), mediaPlacement: none$1, mediaSize: some("80px") }),
+    variant: some(variant("gallery", null)),
+    layout: none$1,
+    toolbar: false
+  }), [storageKey, templateRows, startFrom]);
+  const pagesGallery = useMemo(() => ({
+    id: `${storageKey}.pages`,
+    hint: none$1,
+    items: pageRows2.map((p2) => ({
+      key: p2.page,
+      label: p2.title,
+      sublabel: some(m2.placements({ n: p2.cells.length, count: words.number(p2.cells.length) })),
+      icon: none$1,
+      status: some(p2.live ? { label: m2.live(), tone: variant("success", null), ring: false } : { label: m2.draft(), tone: variant("neutral", null), ring: true }),
+      trailing: none$1,
+      draggable: false,
+      filtered: false,
+      placed: false,
+      media: none$1,
+      avatar: none$1,
+      byline: none$1,
+      action: some(m2.openInBuilder()),
+      search: none$1,
+      groups: /* @__PURE__ */ new Map(),
+      facets: /* @__PURE__ */ new Map(),
+      dims: /* @__PURE__ */ new Map()
+    })),
+    groupOptions: [],
+    groupSummaries: /* @__PURE__ */ new Map(),
+    dimOptions: [],
+    defaultDimensions: [],
+    filterOptions: [],
+    searchable: false,
+    noun: none$1,
+    addLabel: some(m2.newPageFromTemplate()),
+    onAdd: some(() => {
+      startBlank();
+      return null;
+    }),
+    onCardClick: some((name) => {
+      openPage(name);
+      return null;
+    }),
+    slice: none$1,
+    style: some({ height: none$1, maxHeight: none$1, virtualization: none$1, columns: some(2n), mediaPlacement: some(variant("start", null)), mediaSize: some("156px") }),
+    variant: some(variant("gallery", null)),
+    layout: some(layout4 === "list" ? variant("list", null) : variant("grid", null)),
+    toolbar: false
+  }), [storageKey, pageRows2, m2, words, startBlank, openPage, layout4]);
+  const from2 = popover !== void 0 && popover !== "" ? popover : BLANK;
+  const [template, setTemplate] = useState(from2);
+  const [openedFrom, setOpenedFrom] = useState(popover);
+  if (popover !== openedFrom) {
+    setOpenedFrom(popover);
+    if (popover !== void 0) setTemplate(from2);
+  }
+  const picker = useMemo(() => createListCollection({
+    items: [{ value: BLANK, label: m2.blankGrid() }, ...everyTemplate.map((t4) => ({ value: t4.name, label: t4.title }))]
+  }), [everyTemplate, m2]);
+  const create2 = async (name) => {
+    const now2 = handle.read();
+    const key = { project, page: name };
+    const patch = east.newPage(now2, key, name, template === BLANK ? none$1 : some({ project, page: template }));
+    const outcome = await handle.commit.patch("", patch);
+    const refused = east.nameWriteRefusal(outcome, name);
+    return refused.type === "some" ? refused.value : void 0;
+  };
+  const np = everyPage.length;
+  const nt = everyTemplate.length + 1;
+  const shown = pageRows2.length;
+  const current = open.project === project ? open.page : "";
+  const searchBox = (size3) => /* @__PURE__ */ jsxs(Box, { css: library2.searchBox, "data-size": size3, children: [
+    /* @__PURE__ */ jsx$1(Box, { as: "span", css: library2.searchIcon, "aria-hidden": true, children: /* @__PURE__ */ jsx$1(FontAwesomeIcon, { icon: faMagnifyingGlass }) }),
+    /* @__PURE__ */ jsx$1(
+      chakra.input,
+      {
+        css: library2.searchInput,
+        placeholder: m2.searchLibrary({ pages: words.number(np), templates: words.number(nt), np, nt }),
+        "aria-label": m2.searchLabel(),
+        value: text,
+        "data-page-library-search": "",
+        onChange: (e3) => setText(e3.target.value),
+        onKeyDown: (e3) => {
+          if (e3.key === "Escape" && text !== "") {
+            e3.preventDefault();
+            setText("");
+          }
+        }
+      }
+    ),
+    text !== "" && /* @__PURE__ */ jsx$1(chakra.button, { type: "button", css: library2.searchClear, "aria-label": m2.clearSearch(), onClick: () => setText(""), children: /* @__PURE__ */ jsx$1(FontAwesomeIcon, { icon: faXmark }) })
+  ] });
+  const sortMenu = (compact) => /* @__PURE__ */ jsx$1(
+    SortMenu,
+    {
+      sort: sort2,
+      compact,
+      trigger: button({ variant: "outline", size: "sm" }),
+      caret: styles2.caret,
+      check: library2.menuCheck,
+      onPick: setSort
+    }
+  );
+  const newPage = (form) => /* @__PURE__ */ jsx$1(
+    NamePopover,
+    {
+      open: popover !== void 0,
+      onOpenChange: (next2) => setPopover(next2 ? "" : void 0),
+      trigger: /* @__PURE__ */ jsxs(
+        chakra.button,
+        {
+          type: "button",
+          css: button({ variant: "solid", size: "sm" }),
+          colorPalette: "brand",
+          "data-page-library-new": "",
+          ...form !== "full" ? { title: m2.newPageIn({ project }) } : {},
+          ...form === "icon" ? { "aria-label": m2.newPageIn({ project }) } : {},
+          children: [
+            /* @__PURE__ */ jsx$1(Box, { as: "span", css: styles2.buttonIcon, "aria-hidden": true, children: /* @__PURE__ */ jsx$1(FontAwesomeIcon, { icon: faPlus }) }),
+            form === "full" ? m2.newPageIn({ project }) : form === "short" ? m2.newPage() : null
+          ]
+        }
+      ),
+      label: /* @__PURE__ */ jsxs(Fragment, { children: [
+        m2.newPage(),
+        " · ",
+        /* @__PURE__ */ jsx$1(Box, { as: "span", css: edit.clauseField, children: project })
+      ] }),
+      placeholder: m2.pageName(),
+      initial: "",
+      taken,
+      missing: m2.pageNameMissing(),
+      confirm: m2.createPage(),
+      onConfirm: create2,
+      children: /* @__PURE__ */ jsxs(Select.Root, { collection: picker, value: [template], onValueChange: (d2) => setTemplate(d2.value[0] ?? BLANK), children: [
+        /* @__PURE__ */ jsx$1(Select.HiddenSelect, {}),
+        /* @__PURE__ */ jsx$1(Select.Label, { children: m2.template() }),
+        /* @__PURE__ */ jsxs(Select.Control, { children: [
+          /* @__PURE__ */ jsx$1(Select.Trigger, { "data-page-library-template": "", children: /* @__PURE__ */ jsx$1(Select.ValueText, {}) }),
+          /* @__PURE__ */ jsx$1(Select.IndicatorGroup, { children: /* @__PURE__ */ jsx$1(Select.Indicator, {}) })
+        ] }),
+        /* @__PURE__ */ jsx$1(Portal, { children: /* @__PURE__ */ jsx$1(Select.Positioner, { children: /* @__PURE__ */ jsx$1(Select.Content, { children: picker.items.map((item) => /* @__PURE__ */ jsxs(Select.Item, { item, children: [
+          item.label,
+          /* @__PURE__ */ jsx$1(Select.ItemIndicator, {})
+        ] }, item.value)) }) }) })
+      ] })
+    }
+  );
+  const toolbarItems = [
+    {
+      key: "search",
+      forms: [searchBox("wide"), searchBox("mid"), searchBox("narrow")],
+      rank: [RANK.searchMid, RANK.searchNarrow]
+    },
+    { key: "sort", side: "end", forms: [sortMenu(false), sortMenu(true)], rank: RANK.sort, version: sort2 },
+    {
+      key: "layout",
+      side: "end",
+      forms: [/* @__PURE__ */ jsx$1(LibraryLayoutSwitch, { layout: layout4, onPick: setLayout })]
+    },
+    { key: "rule", side: "end", forms: [/* @__PURE__ */ jsx$1(Box, { as: "span", css: styles2.divider, "aria-hidden": true })] },
+    {
+      key: "new",
+      side: "end",
+      forms: [newPage("full"), newPage("short"), newPage("icon")],
+      rank: [RANK.newPage, RANK.newPageIcon],
+      version: project
+    }
+  ];
+  if (!result.ok) {
+    const message = result.error instanceof Error ? result.error.message : String(result.error);
+    return /* @__PURE__ */ jsx$1(BannerView, { status: "error", title: message });
+  }
+  return /* @__PURE__ */ jsxs(Box, { css: styles2.root, "data-studio-page-library": "", children: [
+    /* @__PURE__ */ jsx$1(Box, { css: styles2.toolbar, "data-slot": "toolbar", children: /* @__PURE__ */ jsx$1(Toolbar, { items: toolbarItems }) }),
+    /* @__PURE__ */ jsxs(Box, { css: styles2.body, children: [
+      /* @__PURE__ */ jsxs(Box, { css: styles2.pane, "data-page-library-pane": "", children: [
+        /* @__PURE__ */ jsxs(Box, { css: styles2.paneSection, role: "group", "aria-labelledby": `${id3}-projects`, children: [
+          /* @__PURE__ */ jsx$1(Box, { css: styles2.paneHead, children: /* @__PURE__ */ jsx$1(Box, { as: "span", id: `${id3}-projects`, css: styles2.paneCaption, children: m2.projects() }) }),
+          projects.map((p2) => {
+            const active = p2 === project;
+            return /* @__PURE__ */ jsxs(
+              chakra.button,
+              {
+                type: "button",
+                css: styles2.paneRow,
+                "data-page-library-project": p2,
+                ...active ? { "data-active": "", "aria-current": "true" } : {},
+                onClick: () => {
+                  if (!active) setProject(p2);
+                },
+                children: [
+                  /* @__PURE__ */ jsx$1(Box, { as: "span", css: styles2.paneIcon, "aria-hidden": true, children: /* @__PURE__ */ jsx$1(FontAwesomeIcon, { icon: active ? faFolderOpen : faFolder }) }),
+                  /* @__PURE__ */ jsx$1(Box, { as: "span", css: styles2.paneTitle, children: p2 })
+                ]
+              },
+              p2
+            );
+          })
+        ] }),
+        /* @__PURE__ */ jsx$1(Box, { css: styles2.paneRule, "aria-hidden": true }),
+        /* @__PURE__ */ jsxs(Box, { css: styles2.paneSection, role: "group", "aria-labelledby": `${id3}-pages`, children: [
+          /* @__PURE__ */ jsxs(Box, { css: styles2.paneHead, children: [
+            /* @__PURE__ */ jsx$1(Box, { as: "span", id: `${id3}-pages`, css: styles2.paneCaption, children: m2.pages() }),
+            /* @__PURE__ */ jsx$1(Box, { as: "span", css: styles2.paneCount, children: words.number(np) })
+          ] }),
+          paneRows.map((p2) => {
+            const dot = p2.live ? liveDot : draftDot;
+            const state = p2.live ? m2.live() : m2.draft();
+            return /* @__PURE__ */ jsxs(
+              chakra.button,
+              {
+                type: "button",
+                css: styles2.paneRow,
+                "data-page": "",
+                "data-page-library-page": p2.page,
+                ...p2.page === current ? { "data-current": "", "aria-current": "page" } : {},
+                onClick: () => openPage(p2.page),
+                children: [
+                  /* @__PURE__ */ jsx$1(Box, { as: "span", css: styles2.paneTitle, children: p2.title }),
+                  /* @__PURE__ */ jsx$1(Box, { as: "span", css: dot.root, role: "img", "aria-label": state, title: state, children: /* @__PURE__ */ jsx$1(Box, { as: "span", css: dot.indicator }) })
+                ]
+              },
+              p2.page
+            );
+          })
+        ] }),
+        /* @__PURE__ */ jsxs(Box, { css: styles2.legend, "data-page-library-legend": "", children: [
+          /* @__PURE__ */ jsxs(Box, { as: "span", css: liveDot.root, children: [
+            /* @__PURE__ */ jsx$1(Box, { as: "span", css: liveDot.indicator }),
+            /* @__PURE__ */ jsx$1(Box, { as: "span", css: liveDot.label, children: m2.live() })
+          ] }),
+          /* @__PURE__ */ jsxs(Box, { as: "span", css: draftDot.root, children: [
+            /* @__PURE__ */ jsx$1(Box, { as: "span", css: draftDot.indicator }),
+            /* @__PURE__ */ jsx$1(Box, { as: "span", css: draftDot.label, children: m2.draft() })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs(Box, { css: styles2.main, children: [
+        /* @__PURE__ */ jsxs(Box, { as: "section", css: styles2.section, "data-section": "templates", "aria-labelledby": `${id3}-templates`, children: [
+          /* @__PURE__ */ jsxs(Box, { css: styles2.sectionHead, children: [
+            /* @__PURE__ */ jsx$1(Box, { as: "h3", id: `${id3}-templates`, css: styles2.sectionTitle, children: m2.templates() }),
+            /* @__PURE__ */ jsx$1(Box, { as: "span", css: styles2.sectionSub, children: m2.cloneToStart() })
+          ] }),
+          /* @__PURE__ */ jsx$1(EastChakraLibrary, { value: templatesGallery, storageKey: `${storageKey}.templates`, renderMedia: templateMedia })
+        ] }),
+        /* @__PURE__ */ jsxs(Box, { as: "section", css: styles2.section, "data-section": "pages", "aria-labelledby": `${id3}-rows`, children: [
+          /* @__PURE__ */ jsxs(Box, { css: styles2.sectionHead, children: [
+            /* @__PURE__ */ jsx$1(Box, { as: "h3", id: `${id3}-rows`, css: styles2.sectionTitle, children: m2.pages() }),
+            /* @__PURE__ */ jsx$1(Box, { as: "span", css: styles2.sectionSub, "data-page-library-shown": "", children: m2.pagesIn({ shown: words.number(shown), total: words.number(np), project, narrowed: shown !== np }) })
+          ] }),
+          /* @__PURE__ */ jsx$1(EastChakraLibrary, { value: pagesGallery, storageKey: `${storageKey}.pages`, renderMedia: pageMedia })
+        ] })
+      ] })
+    ] })
+  ] });
+});
+implementUIComponent(StudioLibraryComponent, EastChakraStudioLibrary);
 function formatApiError(error3) {
   if (error3 instanceof ApiError && error3.details != null) {
     const details = error3.details;
@@ -66102,6 +67949,9 @@ export {
   EastChakraDiff,
   EastChakraExperiment,
   EastChakraOntology,
+  EastChakraStudioBuilder,
+  EastChakraStudioLibrary,
+  EastChakraStudioPage,
   EastValueViewer,
   ErrorBoundary,
   FuncPlatform,
@@ -66118,6 +67968,7 @@ export {
   RecordRuntime,
   StagedStore,
   StatusDisplay,
+  StudioMessagesProvider,
   TaskPreview,
   UITaskPreview,
   VirtualizedLogViewer,
@@ -66169,6 +68020,7 @@ export {
   realClock,
   recordChannelKey,
   signatureOfFuncHandleType,
+  studioMessages,
   trackDatasetPath,
   useDataflowCancel,
   useDataflowExecute,
@@ -66208,6 +68060,7 @@ export {
   useRepoList,
   useRepoRemove,
   useRepoStatus,
+  useStudioMessages,
   useTaskDetails,
   useTaskExecutionList,
   useTaskGet,