@cocoar/vue-page-builder 2.19.0 → 2.20.0-beta.19

package/README.md

@@ -15,16 +15,23 @@ JSON.
 ## Install
 
 ```bash
-pnpm add @cocoar/vue-page-builder @cocoar/vue-ui
+pnpm add @cocoar/vue-page-builder @cocoar/vue-ui \
+  @cocoar/vue-localization @cocoar/vue-script-editor monaco-editor
 ```
 
-`@cocoar/vue-ui` and `vue` are peer dependencies. Import the stylesheet once —
+The UI, localization, ScriptEditor, Monaco and Vue packages are peers so the
+host owns their single application-wide instances. Import the stylesheet once —
 it carries the builder chrome **and** the renderer's layout styles:
 
 ```ts
 import '@cocoar/vue-page-builder/styles';
 ```
 
+The Builder uses Monaco in JavaScript and JSON mode. Register the TypeScript /
+JavaScript and JSON workers before the first Builder mounts; the complete Vite
+and SSR configurations are documented in
+[IDP_INTEGRATION.md](./IDP_INTEGRATION.md#register-all-monaco-workers-used-by-the-builder).
+
 ## Usage
 
 ```vue
@@ -58,19 +65,22 @@ const config: PageConfig = {
 </template>
 ```
 
-## Schema (v2)
+## Schema (v5)
 
 The persisted document is a tree of one uniform node grammar: `type` is an
 open registry key (built-in or consumer), everything element-specific lives in
 the `props` bag, and the host vocabulary — `id`, `style`, the value-model trio
 `name` / `defaultValue` / `validation`, and `children` for containers — stays
-at node level. The `page` root carries `schemaVersion: 2`.
+at node level. The `page` root carries `schemaVersion: 5`. Version 4 gives every
+element a stable, page-wide `name`; value elements use that same name as their
+form/DTO property and Element Code uses it as its authoring identity. Version 5
+adds builder-only origin metadata for reusable, versioned compositions.
 
 ```jsonc
 {
   "id": "3f6c…",
   "type": "page",
-  "schemaVersion": 2,
+  "schemaVersion": 5,
   "style": { "gap": "16px", "padding": "24px" },
   "children": [
     { "id": "a1b2…", "type": "heading", "props": { "text": "Sign in", "level": 2 } },
@@ -91,10 +101,204 @@ at node level. The `page` root carries `schemaVersion: 2`.
 }
 ```
 
-Pre-v2 documents (flat element props, no `schemaVersion`) are migrated
-transparently on every ingest path; nodes with unknown/unregistered types are
-kept losslessly in the tree (flagged in the builder, skipped with a one-time
-warning at runtime).
+Older documents are normalized transparently on every ingest path: pre-v2 flat
+props move into the `props` bag, v3 runtime-composition documents keep their
+meaning, and v4 deterministically adds missing element names. Unknown or
+unregistered types stay losslessly in the tree (flagged in the builder, skipped
+with a one-time warning at runtime).
+
+## Reusable compositions
+
+Any non-page subtree can be stored and reused: a brand panel, header, form
+section, footer, product card or a consumer element. Compositions are generic;
+there are no auth-specific categories or runtime components.
+
+The host owns persistence by implementing `PageCompositionRepository`. It may
+use an API, IndexedDB or another store, and every method may be sync or async:
+
+```ts
+import type { PageCompositionRepository } from '@cocoar/vue-page-builder';
+
+const compositionRepository: PageCompositionRepository = {
+  list: () => api.get('/page-compositions'),
+  get: (id, version) => api.get(`/page-compositions/${id}/${version ?? 'latest'}`),
+  create: (input) => api.post('/page-compositions', input),
+  publish: (input) => api.post(`/page-compositions/${input.id}/versions`, input),
+};
+```
+
+Pass it only to the Builder:
+
+```vue
+<CoarPageBuilder
+  v-model="authoringDocument"
+  :config="config"
+  :composition-repository="compositionRepository"
+  composition-management="consume"
+  @open-composition="({ id, version }) => openCompositionEditor(id, version)"
+/>
+```
+
+`composition-management="consume"` is intended for a host with separate
+**Pages** and **Compositions** areas. Page editors can insert an exact pinned
+version, update it or detach it, but cannot create or publish definitions. The
+host edits a definition as a standalone element subtree (usually inside a
+temporary Page root) and calls `create()` / `publish()` itself. The default
+`inline` mode additionally exposes create/publish in the Builder tab and is
+useful for compact tools or bootstrapping a definition from an existing page.
+
+Every repository summary is also exposed in the normal element palette under
+**Compositions**. Dragging one to a valid tree/canvas drop zone loads its
+displayed `latestVersion`, materializes the definition and pins that exact
+version. Selecting the linked instance root exposes its name, pinned-version
+selector, update, detach and open controls in Properties. `open-composition`
+is the host navigation seam: the Builder emits the exact pinned `{ id,
+version }`, while the host decides where its independent definition editor
+lives. The existing Compositions tab remains the overview for references,
+updates and repository problems.
+
+Instances are fully materialized normal node trees. This gives drafts an
+offline-safe snapshot and lets the Builder preserve page-local node ids and
+public names across updates. Nested compositions keep a small origin chain so
+each linked level can be updated or detached independently. Deleting an instance
+from one page never deletes the repository definition or instances on other pages.
+
+Before persisting a runtime document, remove authoring links deterministically:
+
+```ts
+import { compilePageCompositions } from '@cocoar/vue-page-builder';
+
+const runtimeDocument = compilePageCompositions(authoringDocument.value);
+```
+
+The compiled result has no repository ids, versions or source-node metadata and
+requires no composition repository at runtime. Use
+`validatePageCompositionReferences(authoringDocument, repository)` before
+publication to report missing versions and nested cycles. The package also
+exports `createInMemoryPageCompositionRepository()` for tests and local demos.
+
+## Action payloads
+
+Every action-capable element uses the same optional `ActionProps` contract:
+
+```ts
+interface ActionProps {
+  action?: string;
+  actionValues?: Record<string, unknown>;
+  actionValueField?: string;
+  actionValue?: unknown;
+}
+```
+
+`actionValues` contains JSON-safe defaults. Every individual entry can be
+switched to **fx** or bound through `bindings["actionValues.<key>"]` to a host
+context value, customer Page State, form field, named Repeat selection, current
+Repeat item/index, or a sandbox expression. `actionValue` /
+`actionValueField` remain as the backwards-compatible single-dynamic-value
+shape. The handler receives one snapshot with deterministic precedence:
+**form values < resolved `actionValues` < dynamic `actionValue`**. Explicit
+action arguments therefore win key collisions with form fields.
+
+```jsonc
+{
+  "props": {
+    "action": "auth:consent-allow",
+    "actionValues": { "approvedScopes": [] }
+  },
+  "bindings": {
+    "actionValues.approvedScopes": {
+      "source": "selection",
+      "path": "approvedScopes"
+    }
+  }
+}
+```
+
+The builder supplies this editor automatically to built-in buttons/links and
+to consumer elements registered with `action: true`. A custom action renderer
+should call `usePageElement().triggerElementAction(node.props)` so it follows
+the identical merge, validation and async-action path.
+
+## Host themes and style presets
+
+Runtime applications wrap the renderer in the generic `CoarThemeScope` from
+`@cocoar/vue-ui`. For authoring, pass the same theme as `previewTheme`; it is
+applied only to the preview canvas, never to the builder chrome.
+
+Host CSS can be exposed as controlled presets through `PageConfig`:
+
+```ts
+const config: PageConfig = {
+  stylePresets: [{
+    id: 'brand-auth-visual',
+    label: 'Brand Auth Visual',
+    className: 'brand-auth-visual',
+    allowedOn: ['page', 'stack', 'card'],
+  }],
+};
+```
+
+The page document stores only `stylePreset: 'brand-auth-visual'`; it never
+stores raw CSS or an arbitrary class. The host must load the matching CSS in
+both administration and runtime. Unknown, unsafe, or disallowed presets are an
+authoring error and are safely ignored by the renderer.
+
+## Decorative visual markup
+
+The built-in `visual-markup` element is the deliberately narrow escape hatch
+for branded, animated decoration that cannot reasonably be expressed through
+individual PageBuilder primitives. It renders HTML, inline SVG and local CSS in
+an opaque-origin iframe. It is **not** a general custom-code element:
+
+- the iframe has an empty `sandbox`, `aria-hidden="true"`, `tabindex="-1"` and
+  `pointer-events: none`;
+- JavaScript, forms, links, navigation, network access, parent-DOM access and
+  interactive controls are rejected or blocked by CSP;
+- markup and CSS use strict allowlists and hard size limits;
+- invalid visuals are hidden locally; siblings and the page form keep working;
+- Builder Preview and Runtime use the same renderer and security policy.
+
+Functional content must remain native PageBuilder elements. A visual node can
+use local `@keyframes`, transforms, media queries, `prefers-reduced-motion`, CSS
+custom properties and inline SVG. Its outer PageBuilder `style` controls its
+size, including responsive `width`, `height`, `minHeight`, `maxHeight`,
+`aspectRatio` and `size`.
+
+Select the node to edit its HTML and CSS source with the dedicated Monaco
+inspectors. These source editors remain available in code-driven authoring
+mode; ordinary computed properties still use Element Code and Quick
+Properties. Invalid source is reported on the node and in the inspector.
+
+The host may inject only explicitly approved theme values and font files:
+
+```ts
+import type { PageConfig } from '@cocoar/vue-page-builder';
+
+const config: PageConfig = {
+  allowedElements: ['page', 'row', 'column', 'visual-markup', 'text-input', 'button'],
+  visualMarkup: {
+    themeVariables: {
+      '--coar-accent': '#10b981',
+      '--visual-surface': '#ffffff',
+      '--visual-text': '#16202e',
+    },
+    fonts: [{
+      id: 'brand-variable',
+      family: 'Brand Sans Variable',
+      source: approvedFontDataUrl, // data:font/...;base64 or a host-created blob URL
+      format: 'woff2',
+      weight: '100 900',
+      style: 'normal',
+      display: 'swap',
+    }],
+  },
+};
+```
+
+Font storage, tenant authorization and URL creation remain host
+responsibilities. For deterministic opaque-iframe loading, a `data:font/...`
+URL is the simplest option. Do not place secrets in theme values, fonts, markup
+or CSS: they become part of the generated `srcdoc`.
 
 ## Custom elements
 
@@ -130,9 +334,14 @@ const config: PageConfig = {
 
 ## Field contract
 
-Pages are usually projections of a DTO — the field names and types are known
-up front. Declare them as `config.fields` and authors *pick* fields instead of
-inventing names: the props panel's field name becomes a select filtered to the
+Every element has one page-wide unique `name`, which is its exact Page-Code
+key (`elements.pageTitle`). For value elements, the same name is also the form
+and DTO property (`elements.username` and `fields.username`); there is no
+second field-name or identifier property.
+
+Pages are usually projections of a DTO — the value-element names and types are
+known up front. Declare them as `config.fields` and authors *pick* fields instead
+of inventing names: the props panel's Name becomes a select filtered to the
 value types each element can edit (`ElementValueSpec.types`; the rating above
 declares `types: ['number']` and shows up for number fields), the palette
 gains a draggable **Fields** group that drops pre-bound default elements, an
@@ -154,6 +363,137 @@ const config: PageConfig = {
 };
 ```
 
+## Page-owned translations
+
+Human-readable element properties use stable translation keys instead of
+embedding one object per language into every node. The root owns the editable
+catalogue and Element Code keeps only a data-safe reference:
+
+```jsonc
+{
+  "type": "page",
+  "translations": {
+    "de": { "page.submit.label": "Anmelden" },
+    "en": { "page.submit.label": "Sign in" }
+  }
+}
+```
+
+```js
+element.props.label = i18n.text('page.submit.label', undefined, 'Sign in');
+```
+
+The Builder's **Translations** tab edits the catalogue, reports missing/unused
+keys and shares its language with the preview. Localizability is explicit
+element metadata (`valueKind: 'localized-text'`), so layout strings such as
+`style.width` never accidentally get translation UI. Monaco completes the
+keys present in the page document. At runtime page messages win, then the
+host's `@cocoar/vue-localization` store is consulted, followed by the binding
+fallback and finally the key itself. The legacy `LocalizedValue` shape remains
+readable for existing documents, but new authoring uses translation bindings.
+
+## JavaScript property bindings
+
+Bindable properties can retain a static fallback and opt into a pure
+JavaScript expression. In the right-hand Properties panel, a compact `fx`
+control in the property's label row switches modes without opening an editor
+(struck through = static, accent colour = expression). Its explicit Edit action
+opens the shared lazy Monaco dialog. Disabled expressions remain persisted with
+`enabled: false`, so switching modes never loses authored code. The optional
+Logic overview opens that same dialog and edits the same record:
+
+```ts
+const submit = {
+  id: 'submit',
+  type: 'button',
+  props: { label: 'Sign in', disabled: false },
+  bindings: {
+    disabled: {
+      source: 'expression',
+      expression: '!fields.username?.trim() || !fields.password',
+    },
+  },
+};
+```
+
+The builder never evaluates this source. A host-owned sandbox session extracts
+definitions with `collectPageRuntimeExpressions()`, evaluates them, and passes
+the data-only result map to `CoarPageRenderer.expressionValues` (or
+`CoarPageBuilder.previewExpressionValues`). Static props remain active during
+startup and after runtime failures. Monaco is lazy-loaded in JavaScript mode;
+host field/context contracts provide its IntelliSense declarations.
+
+## Browser Page Runtime
+
+The package contains the SES Worker runtime used by Page State, constrained Page
+Root Code and per-element code.
+Create the host once in the consumer application. It is a capability catalogue,
+not shared page state; every `usePageCodeRuntime()` call owns an isolated Worker
+session and disposes it with the Vue component.
+
+```ts
+import {
+  definePageRuntimeHost,
+  withRuntimeEndowmentContext,
+} from '@cocoar/vue-page-builder';
+
+export const pageRuntimeHost = definePageRuntimeHost({
+  endowments: {
+    api: {
+      loadOptions: withRuntimeEndowmentContext(
+        ({ signal, tenantId }, source: unknown) =>
+          applicationApi.loadOptions(String(source), { tenantId, signal }),
+      ),
+    },
+  },
+  grants: ({ pageId, definition }) =>
+    pageId.startsWith('auth:') && definition.id.startsWith('element-action:')
+      ? ['api']
+      : [],
+});
+```
+
+```ts
+const runtime = usePageCodeRuntime({
+  pageId,
+  tenantId,
+  schema,
+  context,
+  viewport,
+  runtimeHost: pageRuntimeHost,
+});
+```
+
+Pass `runtime.pageCodeValues` and `runtime.onRuntimeChange` to the renderer and
+route unknown action ids through `runtime.runPageAction`. If no host is passed,
+the package uses a no-capability host: there is no ambient `fetch`, `window`, DOM
+or application API inside tenant code.
+
+The consuming Vite build emits the SES runtime as a same-origin
+`pageScriptRuntime.worker-<hash>.js` module asset. Keep the document CSP free of
+`unsafe-eval`; see `IDP_INTEGRATION.md` for the Worker-response CSP requirement.
+For Vite development, exclude only the dedicated runtime entry from dependency
+pre-bundling:
+
+```ts
+optimizeDeps: { exclude: ['@cocoar/vue-page-builder/runtime-worker'] }
+```
+
+`CoarPageBuilder` owns its embedded preview runtime. A selected fixture now
+provides context, view state, locale and viewport as one effective preview
+contract; the Builder evaluates Page State, Page Root Code and Element Code in
+that same isolated session. Pass `previewRuntimeHost` only when preview actions
+need the application's explicitly granted capabilities.
+
+The package also exports four optional integration presets:
+`createAuthPageDocument()` and `createAuthPageConfig()` for `login`,
+`password-forgot`, `logout` and `consent`. They are example/default documents;
+all underlying elements, repeaters, feedback zones and runtime APIs remain
+generic.
+
+See [IDP_INTEGRATION.md](./IDP_INTEGRATION.md) for the complete draft/publish,
+host-action and security contract.
+
 ## Documentation
 
 Full docs — schema reference, `PageConfig` contract, element registry guide,

package/dist/BuilderElementCodeDialog-ByhAkwmS.js

@@ -0,0 +1,64 @@
+import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { c as t, o as n } from "./pageCode-hhTSp3xO.js";
+import { n as r, t as i } from "./pageCodeAuthoring-Fg3yqXt3.js";
+import { computed as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, openBlock as d, ref as f, toDisplayString as p, unref as m, withCtx as h } from "vue";
+import { CoarButton as g } from "@cocoar/vue-ui";
+import { CoarScriptEditor as _ } from "@cocoar/vue-script-editor";
+//#region src/builder/BuilderElementCodeDialog.vue?vue&type=script&setup=true&lang.ts
+var v = { class: "pb-element-code-dialog" }, y = { class: "pb-element-code-dialog__meta" }, b = { class: "pb-element-code-dialog__editor" }, x = /* @__PURE__ */ e(/* @__PURE__ */ u({
+	__name: "BuilderElementCodeDialog",
+	props: {
+		schema: {},
+		node: {},
+		source: {},
+		stateCode: {},
+		config: {},
+		hostLibs: {},
+		close: { type: Function }
+	},
+	setup(e) {
+		let u = e, x = f(n(u.source)), S = a(() => i(t(u.stateCode), u.node)), C = a(() => [...r(u.schema, u.node, u.config), ...u.hostLibs ?? []]);
+		return (t, n) => (d(), o("div", v, [
+			s("div", y, [s("div", null, [n[3] ||= s("span", null, "Element", -1), s("strong", null, p(e.node.name) + " · " + p(e.node.type), 1)]), n[4] ||= s("div", null, [s("span", null, "Mutable target"), s("code", null, "element")], -1)]),
+			s("div", b, [l(m(_), {
+				modelValue: x.value,
+				"onUpdate:modelValue": n[0] ||= (e) => x.value = e,
+				language: "javascript",
+				"script-mode": !0,
+				preamble: S.value,
+				"extra-libs": C.value,
+				height: "clamp(360px, 58vh, 620px)",
+				placeholder: "defineElement({ compute, actions })"
+			}, null, 8, [
+				"modelValue",
+				"preamble",
+				"extra-libs"
+			])]),
+			n[7] ||= s("p", { class: "pb-element-code-dialog__hint" }, [
+				c(" Locked lines belong to the PageBuilder and cannot be renamed or deleted. Edit only the "),
+				s("code", null, "compute"),
+				c(" and "),
+				s("code", null, "click"),
+				c(" bodies between them. Configuration and runtime inputs are separated: "),
+				s("code", null, "element.*"),
+				c(" is only this element, shared inputs live on "),
+				s("code", null, "page.*"),
+				c(", and the event payload lives on "),
+				s("code", null, "action.payload"),
+				c(". ")
+			], -1),
+			s("footer", null, [l(m(g), {
+				variant: "secondary",
+				onClick: n[1] ||= (t) => e.close()
+			}, {
+				default: h(() => [...n[5] ||= [c("Cancel", -1)]]),
+				_: 1
+			}), l(m(g), { onClick: n[2] ||= (t) => e.close(x.value) }, {
+				default: h(() => [...n[6] ||= [c("Apply element code", -1)]]),
+				_: 1
+			})])
+		]));
+	}
+}), [["__scopeId", "data-v-037d2ed2"]]);
+//#endregion
+export { x as default };

package/dist/BuilderExpressionDialog-DjGebYyv.js

@@ -0,0 +1,61 @@
+import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { i as t, n, t as r } from "./expressionAuthoring-DHVx3i-G.js";
+import { computed as i, createElementBlock as a, createElementVNode as o, createTextVNode as s, createVNode as c, defineComponent as l, openBlock as u, ref as d, toDisplayString as f, unref as p, withCtx as m } from "vue";
+import { CoarButton as h } from "@cocoar/vue-ui";
+import { CoarScriptEditor as g } from "@cocoar/vue-script-editor";
+//#region src/builder/BuilderExpressionDialog.vue?vue&type=script&setup=true&lang.ts
+var _ = { class: "pb-expression-dialog" }, v = { class: "pb-expression-dialog__meta" }, y = { class: "pb-expression-dialog__editor" }, b = /* @__PURE__ */ e(/* @__PURE__ */ l({
+	__name: "BuilderExpressionDialog",
+	props: {
+		nodeId: {},
+		target: {},
+		expression: {},
+		config: {},
+		close: { type: Function }
+	},
+	setup(e) {
+		let l = e, b = d(l.expression), x = i(() => t(l.config)), S = i(() => n(l.target));
+		return (t, n) => (u(), a("div", _, [
+			o("div", v, [o("div", null, [n[3] ||= o("span", null, "Property", -1), o("strong", null, f(e.nodeId) + " · " + f(e.target), 1)]), o("div", null, [n[4] ||= o("span", null, "Result", -1), o("code", null, f(S.value), 1)])]),
+			o("div", y, [c(p(g), {
+				modelValue: b.value,
+				"onUpdate:modelValue": n[0] ||= (e) => b.value = e,
+				language: "javascript",
+				"script-mode": !0,
+				preamble: p(r),
+				"extra-libs": x.value,
+				height: "clamp(320px, 52vh, 520px)",
+				placeholder: "Enter a JavaScript expression…"
+			}, null, 8, [
+				"modelValue",
+				"preamble",
+				"extra-libs"
+			])]),
+			n[7] ||= o("p", { class: "pb-expression-dialog__hint" }, [
+				s(" Available: "),
+				o("code", null, "fields"),
+				s(", "),
+				o("code", null, "form"),
+				s(", "),
+				o("code", null, "context"),
+				s(", "),
+				o("code", null, "resources"),
+				s(", "),
+				o("code", null, "viewport"),
+				s(". IntelliSense shows the fields and context allowed by this page's host configuration. ")
+			], -1),
+			o("footer", null, [c(p(h), {
+				variant: "secondary",
+				onClick: n[1] ||= (t) => e.close()
+			}, {
+				default: m(() => [...n[5] ||= [s("Cancel", -1)]]),
+				_: 1
+			}), c(p(h), { onClick: n[2] ||= (t) => e.close(b.value) }, {
+				default: m(() => [...n[6] ||= [s("Apply expression", -1)]]),
+				_: 1
+			})])
+		]));
+	}
+}), [["__scopeId", "data-v-463025ca"]]);
+//#endregion
+export { b as default };

package/dist/BuilderLogicPanel-Cxd04A93.js

@@ -0,0 +1,68 @@
+import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { a as t, c as n, t as r } from "./builderContext-5hKJ8y8r.js";
+import { c as i } from "./pageCode-hhTSp3xO.js";
+import { a } from "./pageCodeAuthoring-Fg3yqXt3.js";
+import { computed as o, createCommentVNode as s, createElementBlock as c, createElementVNode as l, createTextVNode as u, createVNode as d, defineComponent as f, inject as p, openBlock as m, ref as h, unref as g, watch as _, withCtx as v } from "vue";
+import { CoarButton as y } from "@cocoar/vue-ui";
+import { CoarScriptEditor as b } from "@cocoar/vue-script-editor";
+//#region src/builder/BuilderLogicPanel.vue?vue&type=script&setup=true&lang.ts
+var x = { class: "pb-page-code" }, S = { class: "pb-page-code__toolbar" }, C = { class: "pb-page-code__actions" }, w = {
+	key: 0,
+	class: "pb-page-code__dirty"
+}, T = { class: "pb-page-code__editor" }, E = /* @__PURE__ */ e(/* @__PURE__ */ f({
+	__name: "BuilderLogicPanel",
+	setup(e) {
+		let f = p(r), E = p(t), D = p(n), O = o(() => i(f.schema.value.stateCode)), k = h(O.value), A = o(() => k.value !== O.value), j = o(() => [...a(E.value), ...D?.value ?? []]);
+		_(O, (e) => {
+			A.value || (k.value = e);
+		});
+		function M() {
+			f.patch([], { stateCode: k.value });
+		}
+		function N() {
+			k.value = O.value;
+		}
+		return (e, t) => (m(), c("section", x, [
+			l("header", S, [t[3] ||= l("div", null, [l("strong", null, "Page State"), l("span", null, "Customer-authored shared state for this page and all of its element scripts.")], -1), l("div", C, [
+				A.value ? (m(), c("span", w, "Unsaved changes")) : s("", !0),
+				d(g(y), {
+					size: "s",
+					variant: "secondary",
+					disabled: !A.value,
+					onClick: N
+				}, {
+					default: v(() => [...t[1] ||= [u("Revert", -1)]]),
+					_: 1
+				}, 8, ["disabled"]),
+				d(g(y), {
+					size: "s",
+					disabled: !A.value,
+					onClick: M
+				}, {
+					default: v(() => [...t[2] ||= [u("Apply state", -1)]]),
+					_: 1
+				}, 8, ["disabled"])
+			])]),
+			l("div", T, [d(g(b), {
+				modelValue: k.value,
+				"onUpdate:modelValue": t[0] ||= (e) => k.value = e,
+				language: "javascript",
+				"script-mode": !0,
+				"extra-libs": j.value,
+				height: "100%",
+				placeholder: "definePageState({ ... })"
+			}, null, 8, ["modelValue", "extra-libs"])]),
+			t[4] ||= l("footer", null, [l("span", null, [
+				u("The locked "),
+				l("code", null, "definePageState"),
+				u(" frame belongs to the Builder; only its object body is editable.")
+			]), l("span", null, [
+				u("Element actions may mutate "),
+				l("code", null, "state"),
+				u("; dependent element scripts update reactively.")
+			])], -1)
+		]));
+	}
+}), [["__scopeId", "data-v-d2484ca8"]]);
+//#endregion
+export { E as default };

package/dist/BuilderPageRootCodeDialog-7uXyUGGD.js

@@ -0,0 +1,61 @@
+import { t as e } from "./_plugin-vue_export-helper-BTgDAbhb.js";
+import { c as t, s as n } from "./pageCode-hhTSp3xO.js";
+import { i as r, r as i } from "./pageCodeAuthoring-Fg3yqXt3.js";
+import { computed as a, createElementBlock as o, createElementVNode as s, createTextVNode as c, createVNode as l, defineComponent as u, openBlock as d, ref as f, unref as p, withCtx as m } from "vue";
+import { CoarButton as h } from "@cocoar/vue-ui";
+import { CoarScriptEditor as g } from "@cocoar/vue-script-editor";
+//#region src/builder/BuilderPageRootCodeDialog.vue?vue&type=script&setup=true&lang.ts
+var _ = { class: "pb-page-root-code-dialog" }, v = { class: "pb-page-root-code-dialog__editor" }, y = /* @__PURE__ */ e(/* @__PURE__ */ u({
+	__name: "BuilderPageRootCodeDialog",
+	props: {
+		schema: {},
+		source: {},
+		stateCode: {},
+		config: {},
+		hostLibs: {},
+		close: { type: Function }
+	},
+	setup(e) {
+		let u = e, y = f(n(u.source)), b = a(() => i(t(u.stateCode))), x = a(() => [...r(u.schema, u.config), ...u.hostLibs ?? []]);
+		return (t, n) => (d(), o("div", _, [
+			n[5] ||= s("div", { class: "pb-page-root-code-dialog__meta" }, [s("div", null, [s("span", null, "Element"), s("strong", null, "Page Root")]), s("div", null, [s("span", null, "Mutable target"), s("code", null, "page")])], -1),
+			s("div", v, [l(p(g), {
+				modelValue: y.value,
+				"onUpdate:modelValue": n[0] ||= (e) => y.value = e,
+				language: "javascript",
+				"script-mode": !0,
+				preamble: b.value,
+				"extra-libs": x.value,
+				height: "clamp(360px, 58vh, 620px)",
+				placeholder: "definePageRoot({ compute })"
+			}, null, 8, [
+				"modelValue",
+				"preamble",
+				"extra-libs"
+			])]),
+			n[6] ||= s("p", { class: "pb-page-root-code-dialog__hint" }, [
+				c(" Page Root Code can configure only "),
+				s("code", null, "page.style"),
+				c(", "),
+				s("code", null, "page.responsive"),
+				c(", and "),
+				s("code", null, "page.enterSubmits"),
+				c(". The tree, element types, names, and children remain owned by the visual builder. Reactive inputs are available on "),
+				s("code", null, "runtime.*"),
+				c(". ")
+			], -1),
+			s("footer", null, [l(p(h), {
+				variant: "secondary",
+				onClick: n[1] ||= (t) => e.close()
+			}, {
+				default: m(() => [...n[3] ||= [c("Cancel", -1)]]),
+				_: 1
+			}), l(p(h), { onClick: n[2] ||= (t) => e.close(y.value) }, {
+				default: m(() => [...n[4] ||= [c("Apply Page Code", -1)]]),
+				_: 1
+			})])
+		]));
+	}
+}), [["__scopeId", "data-v-f361c916"]]);
+//#endregion
+export { y as default };