@embedpdf/vue 0.0.0-stage → 3.0.0-next.15

package/dist/FormLayer.vue_vue_type_script_setup_true_lang-BA0_VwFc.cjs

@@ -0,0 +1,682 @@
+"use strict";
+const vue = require("vue");
+const core = require("@embedpdf/core");
+const host = require("@embedpdf/plugin-form/contract/host");
+const host$2 = require("@embedpdf/plugin-interaction/contract/host");
+const pageLayers = require("./page-layers-c-CJYAUO.cjs");
+const capabilities = require("./capabilities-DVNJmgy7.cjs");
+const page = require("./page-Doy4_Sdz.cjs");
+const web = require("@embedpdf/web");
+const pluginForm = require("@embedpdf/plugin-form");
+const documents = require("./documents-TQ1fMdWI.cjs");
+const state = require("./state-M22NDJQo.cjs");
+const coreAnnotation = require("@embedpdf/core-annotation");
+const host$1 = require("@embedpdf/plugin-render/contract/host");
+const SvgShapes_vue_vue_type_script_setup_true_lang = require("./SvgShapes.vue_vue_type_script_setup_true_lang-D_c-wINF.cjs");
+const contract = require("@embedpdf/plugin-signature/contract");
+function useForm() {
+  return capabilities.useCapability(pluginForm.FormToken);
+}
+function useFormEvent(select, handler) {
+  capabilities.useCapabilityEvent(pluginForm.FormToken, select, handler);
+}
+const useFormState = state.stateComposable(pluginForm.formState);
+const useFormSettings = state.settingsComposable(pluginForm.FormToken);
+function useFormValue(field) {
+  return capabilities.useOptionalSelector(pluginForm.FormToken, (form) => form.getValue(vue.toValue(field)), null);
+}
+function useFormColors() {
+  const accent = documents.useViewerSettings((settings) => settings.accent);
+  const focus = useFormSettings((settings) => settings.focus);
+  const fields = useFormSettings((settings) => settings.fields);
+  return vue.computed(() => web.formColorsOf({ focus: focus.value, fields: fields.value }, accent.value));
+}
+function useWidgetActivation(widget) {
+  const form = capabilities.useCapability(host.FormToken);
+  return () => {
+    const target = widget();
+    if (target) void form.activateWidget(target);
+  };
+}
+function useWidgetBox(item, colors, options = {}) {
+  const page$1 = page.usePage();
+  const form = capabilities.useCapability(host.FormToken);
+  const element = vue.ref(null);
+  const edge = options.edge ?? true;
+  vue.watch(
+    element,
+    (box, _previous, onCleanup) => {
+      if (!box) return;
+      const release = web.isolatePointerDown(box);
+      const unbind = web.bindWidgetEvents(box, (event) => {
+        const { fieldRef, annotationRef } = item();
+        if (annotationRef) form.notifyWidgetEvent(fieldRef, annotationRef, event);
+      });
+      onCleanup(() => {
+        release();
+        unbind();
+      });
+    },
+    { immediate: true, flush: "post" }
+  );
+  const frame = vue.computed(() => web.rectInPixels(item().box, page$1.value.transform));
+  const style = vue.computed(
+    () => web.widgetBoxStyleOf(item(), frame.value, colors(), { edge })
+  );
+  return { element, frame, style };
+}
+const _hoisted_1$7 = ["aria-label", "disabled"];
+const _sfc_main$9 = /* @__PURE__ */ vue.defineComponent({
+  __name: "ButtonControl",
+  props: {
+    item: {},
+    colors: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const activate = useWidgetActivation(() => props.item.annotationRef);
+    const { element: box, style: boxStyle } = useWidgetBox(
+      () => props.item,
+      () => props.colors,
+      { edge: false }
+    );
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        ref_key: "box",
+        ref: box,
+        style: vue.normalizeStyle([vue.unref(boxStyle), { cursor: __props.item.disabled ? "default" : "pointer" }])
+      }, [
+        vue.createElementVNode("button", {
+          type: "button",
+          "aria-label": __props.item.label,
+          disabled: __props.item.disabled,
+          style: vue.normalizeStyle({
+            ...vue.unref(web.FORM_CONTROL_FILL),
+            padding: "0",
+            border: "0",
+            background: "transparent",
+            cursor: "inherit",
+            pointerEvents: __props.item.disabled ? "none" : "auto"
+          }),
+          onClick: _cache[0] || (_cache[0] = //@ts-ignore
+          (...args) => vue.unref(activate) && vue.unref(activate)(...args))
+        }, null, 12, _hoisted_1$7)
+      ], 4);
+    };
+  }
+});
+const _sfc_main$8 = /* @__PURE__ */ vue.defineComponent({
+  __name: "FormFocusRing",
+  props: {
+    visible: { type: Boolean },
+    color: {}
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return __props.visible ? (vue.openBlock(), vue.createElementBlock("span", {
+        key: 0,
+        "aria-hidden": "true",
+        "data-embedpdf-form-focus-ring": "",
+        style: vue.normalizeStyle(vue.unref(web.formFocusRingStyleOf)(__props.color))
+      }, null, 4)) : vue.createCommentVNode("", true);
+    };
+  }
+});
+const _hoisted_1$6 = ["value", "aria-label", "disabled"];
+const _hoisted_2$3 = {
+  key: 0,
+  value: ""
+};
+const _hoisted_3 = ["value"];
+const _sfc_main$7 = /* @__PURE__ */ vue.defineComponent({
+  __name: "ComboControl",
+  props: {
+    item: {},
+    colors: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const form = capabilities.useCapability(host.FormToken);
+    const activate = useWidgetActivation(() => props.item.annotationRef);
+    const { element: box, style: boxStyle } = useWidgetBox(
+      () => props.item,
+      () => props.colors
+    );
+    const focused = vue.ref(false);
+    const selectionKey = vue.computed(() => props.item.selected.join("\0"));
+    function onChange(event) {
+      const value = event.currentTarget.value;
+      void form.setValue(props.item.fieldRef, { value: value || null });
+    }
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        ref_key: "box",
+        ref: box,
+        style: vue.normalizeStyle(vue.unref(boxStyle)),
+        onClick: _cache[2] || (_cache[2] = //@ts-ignore
+        (...args) => vue.unref(activate) && vue.unref(activate)(...args))
+      }, [
+        (vue.openBlock(), vue.createElementBlock("select", {
+          key: selectionKey.value,
+          value: __props.item.selected[0] ?? "",
+          "aria-label": __props.item.label,
+          disabled: __props.item.disabled,
+          style: vue.normalizeStyle({
+            ...vue.unref(web.FORM_CONTROL_FILL),
+            opacity: 0,
+            cursor: __props.item.disabled ? "default" : "pointer",
+            ...__props.item.disabled ? { pointerEvents: "none" } : {}
+          }),
+          onFocus: _cache[0] || (_cache[0] = ($event) => focused.value = true),
+          onBlur: _cache[1] || (_cache[1] = ($event) => focused.value = false),
+          onChange
+        }, [
+          __props.item.selected.length === 0 ? (vue.openBlock(), vue.createElementBlock("option", _hoisted_2$3)) : vue.createCommentVNode("", true),
+          (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.item.options, (option, index) => {
+            return vue.openBlock(), vue.createElementBlock("option", {
+              key: index,
+              value: option.value
+            }, vue.toDisplayString(option.label), 9, _hoisted_3);
+          }), 128))
+        ], 44, _hoisted_1$6)),
+        vue.createVNode(_sfc_main$8, {
+          visible: focused.value,
+          color: __props.colors.focus
+        }, null, 8, ["visible", "color"])
+      ], 4);
+    };
+  }
+});
+const _hoisted_1$5 = ["src"];
+const _hoisted_2$2 = ["viewBox"];
+const _sfc_main$6 = /* @__PURE__ */ vue.defineComponent({
+  __name: "FieldPictures",
+  setup(__props) {
+    const NO_WIDGETS = Object.freeze([]);
+    const page$1 = page.usePage();
+    const form = capabilities.useOptionalCapability(host.FormToken);
+    const widgets = capabilities.useOptionalSelector(
+      host.FormToken,
+      (form2) => form2.listShownWidgets(page$1.value.ref),
+      NO_WIDGETS,
+      core.shallowEqual
+    );
+    const epoch = capabilities.useOptionalSelector(
+      host.FormToken,
+      (form2) => form2.getAppearanceEpoch(page$1.value.ref),
+      ""
+    );
+    const scale = capabilities.useOptionalSelector(
+      host$1.RenderToken,
+      (lens) => lens.getAppearanceScale(page$1.value.transform.renderScale),
+      0
+    );
+    const urls = vue.shallowRef(null);
+    const shown = web.createShownUrls();
+    vue.onUnmounted(() => shown.release());
+    vue.watch(
+      [form, () => page$1.value.ref, scale, epoch],
+      ([host2, pageRef, at], _previous, onCleanup) => {
+        if (!host2 || !at) return;
+        onCleanup(
+          web.loadAppearanceUrls(
+            shown,
+            (signal) => host2.renderAppearances(pageRef, at, signal),
+            core.annotationKey,
+            (loaded) => urls.value = loaded
+          )
+        );
+      },
+      { immediate: true }
+    );
+    const looks = vue.computed(
+      () => widgets.value.flatMap((widget) => {
+        const key = core.annotationKey(widget.ref);
+        const look = web.pictureOrPainting({
+          pending: widget.pending,
+          picture: urls.value && web.shownAppearance(urls.value, key, widget.appearanceState),
+          version: widget.pictureVersion,
+          loaded: urls.value !== null,
+          paint: () => {
+            var _a;
+            return ((_a = form.value) == null ? void 0 : _a.getWidgetPainting(widget.ref)) ?? null;
+          }
+        });
+        if (!look) return [];
+        if (look.kind === "picture") {
+          return [
+            {
+              kind: "picture",
+              key,
+              url: look.picture.url,
+              frame: web.rectInPixels(look.picture.box, page$1.value.transform)
+            }
+          ];
+        }
+        const { x, y, width, height } = widget.rect;
+        return [
+          {
+            kind: "painting",
+            key,
+            viewBox: `${x} ${y} ${width} ${height}`,
+            shapes: web.svgShapesOf(look.painting.scene, { miterLimit: coreAnnotation.MITER_LIMIT }),
+            frame: web.rectInPixels(widget.rect, page$1.value.transform)
+          }
+        ];
+      })
+    );
+    return (_ctx, _cache) => {
+      return vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(looks.value, (look) => {
+        return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+          key: look.key
+        }, [
+          look.kind === "picture" ? (vue.openBlock(), vue.createElementBlock("img", {
+            key: 0,
+            src: look.url,
+            alt: "",
+            draggable: "false",
+            style: vue.normalizeStyle({
+              position: "absolute",
+              left: `${look.frame.left}px`,
+              top: `${look.frame.top}px`,
+              width: `${look.frame.width}px`,
+              height: `${look.frame.height}px`,
+              // A global `img { max-width: 100% }` reset would clamp it.
+              maxWidth: "none",
+              maxHeight: "none",
+              pointerEvents: "none"
+            })
+          }, null, 12, _hoisted_1$5)) : (vue.openBlock(), vue.createElementBlock("svg", {
+            key: 1,
+            viewBox: look.viewBox,
+            style: vue.normalizeStyle({
+              position: "absolute",
+              left: `${look.frame.left}px`,
+              top: `${look.frame.top}px`,
+              width: `${look.frame.width}px`,
+              height: `${look.frame.height}px`,
+              overflow: "visible",
+              pointerEvents: "none"
+            })
+          }, [
+            vue.createVNode(SvgShapes_vue_vue_type_script_setup_true_lang._sfc_main, {
+              shapes: look.shapes
+            }, null, 8, ["shapes"])
+          ], 12, _hoisted_2$2))
+        ], 64);
+      }), 128);
+    };
+  }
+});
+const _hoisted_1$4 = ["aria-label", "multiple", "size", "disabled"];
+const _hoisted_2$1 = ["value"];
+const _sfc_main$5 = /* @__PURE__ */ vue.defineComponent({
+  __name: "NativeListBox",
+  props: {
+    label: {},
+    disabled: { type: Boolean },
+    multi: { type: Boolean },
+    options: {},
+    selected: {},
+    onSelect: { type: Function }
+  },
+  emits: ["focus", "blur"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const selection = web.createOptimisticSelection(props.selected);
+    const shown = vue.shallowRef(selection.get());
+    vue.onUnmounted(selection.subscribe(() => shown.value = selection.get()));
+    vue.watch(
+      () => props.selected,
+      (values) => selection.setConfirmed(values)
+    );
+    const control = vue.ref(null);
+    vue.watch(
+      control,
+      (element, _previous, onCleanup) => {
+        if (element) onCleanup(web.isolateWheel(element));
+      },
+      { immediate: true, flush: "post" }
+    );
+    vue.watch(
+      [control, shown, () => props.options],
+      ([element, values]) => {
+        if (element) web.showSelectedOptions(element, values);
+      },
+      { immediate: true, flush: "post" }
+    );
+    function onChange(event) {
+      const element = event.currentTarget;
+      selection.choose(
+        Array.from(element.selectedOptions).map((option) => option.value),
+        props.onSelect
+      );
+    }
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("select", {
+        ref_key: "control",
+        ref: control,
+        "aria-label": __props.label,
+        multiple: __props.multi,
+        size: Math.max(2, __props.options.length),
+        disabled: __props.disabled,
+        onFocus: _cache[0] || (_cache[0] = ($event) => emit("focus")),
+        onBlur: _cache[1] || (_cache[1] = ($event) => emit("blur")),
+        onChange
+      }, [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.options, (option, index) => {
+          return vue.openBlock(), vue.createElementBlock("option", {
+            key: index,
+            value: option.value
+          }, vue.toDisplayString(option.label), 9, _hoisted_2$1);
+        }), 128))
+      ], 40, _hoisted_1$4);
+    };
+  }
+});
+const _sfc_main$4 = /* @__PURE__ */ vue.defineComponent({
+  __name: "ListControl",
+  props: {
+    item: {},
+    colors: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const form = capabilities.useCapability(host.FormToken);
+    const activate = useWidgetActivation(() => props.item.annotationRef);
+    const {
+      element: box,
+      frame,
+      style: boxStyle
+    } = useWidgetBox(
+      () => props.item,
+      () => props.colors,
+      { edge: false }
+    );
+    const focused = vue.ref(false);
+    const select = (values) => form.setValue(props.item.fieldRef, { selectedValues: values });
+    const listStyle = vue.computed(() => web.listBoxControlStyleOf(props.item, frame.value, props.colors));
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        ref_key: "box",
+        ref: box,
+        style: vue.normalizeStyle(vue.unref(boxStyle)),
+        onClick: _cache[2] || (_cache[2] = //@ts-ignore
+        (...args) => vue.unref(activate) && vue.unref(activate)(...args))
+      }, [
+        vue.createVNode(_sfc_main$5, {
+          label: __props.item.label,
+          disabled: __props.item.disabled,
+          multi: __props.item.multi,
+          options: __props.item.options,
+          selected: __props.item.selected,
+          "on-select": select,
+          style: vue.normalizeStyle(listStyle.value),
+          onFocus: _cache[0] || (_cache[0] = ($event) => focused.value = true),
+          onBlur: _cache[1] || (_cache[1] = ($event) => focused.value = false)
+        }, null, 8, ["label", "disabled", "multi", "options", "selected", "style"]),
+        vue.createVNode(_sfc_main$8, {
+          visible: focused.value,
+          color: __props.colors.focus
+        }, null, 8, ["visible", "color"])
+      ], 4);
+    };
+  }
+});
+const _hoisted_1$3 = ["aria-label", "data-signed"];
+const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
+  __name: "SignatureControl",
+  props: {
+    item: {},
+    colors: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const { element: box, style: boxStyle } = useWidgetBox(
+      () => props.item,
+      () => props.colors
+    );
+    const signature = capabilities.useOptionalCapability(contract.SignatureToken);
+    const known = capabilities.useOptionalSelector(
+      contract.SignatureToken,
+      (capability) => {
+        var _a;
+        return ((_a = capability.getSignature(props.item.fieldRef)) == null ? void 0 : _a.signed) ?? null;
+      },
+      null
+    );
+    const signed = vue.computed(() => known.value ?? props.item.signed);
+    const actionable = vue.computed(
+      () => signature.value !== null && (signed.value || !props.item.disabled)
+    );
+    function onClick() {
+      const plugin = signature.value;
+      if (!plugin) return;
+      if (signed.value) plugin.requestInspection(props.item.fieldRef);
+      else plugin.setTarget(props.item.fieldRef);
+    }
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        ref_key: "box",
+        ref: box,
+        style: vue.normalizeStyle([vue.unref(boxStyle), { cursor: actionable.value ? "pointer" : "default" }])
+      }, [
+        actionable.value ? (vue.openBlock(), vue.createElementBlock("button", {
+          key: 0,
+          type: "button",
+          "aria-label": __props.item.label,
+          "data-signed": signed.value ? "" : void 0,
+          style: vue.normalizeStyle({
+            ...vue.unref(web.FORM_CONTROL_FILL),
+            padding: "0",
+            border: "0",
+            background: "transparent",
+            cursor: "inherit"
+          }),
+          onClick
+        }, null, 12, _hoisted_1$3)) : vue.createCommentVNode("", true)
+      ], 4);
+    };
+  }
+});
+const _hoisted_1$2 = ["value", "maxlength", "aria-label", "disabled"];
+const _hoisted_2 = ["type", "value", "maxlength", "aria-label", "disabled"];
+const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
+  __name: "TextControl",
+  props: {
+    item: {},
+    colors: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const form = capabilities.useCapability(host.FormToken);
+    const activate = useWidgetActivation(() => props.item.annotationRef);
+    const { element: box, frame, style: boxStyle } = useWidgetBox(
+      () => props.item,
+      () => props.colors
+    );
+    const editor = web.createTextFieldEditor(form, props.item.fieldRef, props.item.value);
+    const state2 = vue.shallowRef(editor.getState());
+    vue.onUnmounted(editor.subscribe(() => state2.value = editor.getState()));
+    vue.watch(
+      () => props.item.value,
+      (value) => editor.setValue(value)
+    );
+    const layout = vue.computed(
+      () => props.item.annotationRef ? form.getTextEditorLayout(props.item.annotationRef, state2.value.draft) : null
+    );
+    const mounts = web.createFontMounts();
+    vue.onUnmounted(() => mounts.release());
+    vue.watchEffect(() => {
+      if (layout.value) mounts.mount([layout.value.program]);
+    });
+    const editorStyle = vue.computed(
+      () => web.textFieldEditorStyleOf(props.item, frame.value, props.colors, state2.value.focused, layout.value)
+    );
+    const onInput = (event) => editor.input(event.target.value);
+    function onKeydown(event) {
+      if (editor.keyDown(event.key, props.item.multiline)) {
+        event.currentTarget.blur();
+      }
+    }
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        ref_key: "box",
+        ref: box,
+        style: vue.normalizeStyle(vue.unref(boxStyle)),
+        onClick: _cache[4] || (_cache[4] = //@ts-ignore
+        (...args) => vue.unref(activate) && vue.unref(activate)(...args))
+      }, [
+        __props.item.multiline ? (vue.openBlock(), vue.createElementBlock("textarea", {
+          key: 0,
+          value: state2.value.draft,
+          maxlength: __props.item.maxLength ?? void 0,
+          "aria-label": __props.item.label,
+          disabled: __props.item.disabled,
+          style: vue.normalizeStyle(editorStyle.value),
+          onFocus: _cache[0] || (_cache[0] = //@ts-ignore
+          (...args) => vue.unref(editor).focus && vue.unref(editor).focus(...args)),
+          onInput,
+          onBlur: _cache[1] || (_cache[1] = //@ts-ignore
+          (...args) => vue.unref(editor).blur && vue.unref(editor).blur(...args)),
+          onKeydown
+        }, null, 44, _hoisted_1$2)) : (vue.openBlock(), vue.createElementBlock("input", {
+          key: 1,
+          type: __props.item.password ? "password" : "text",
+          value: state2.value.draft,
+          maxlength: __props.item.maxLength ?? void 0,
+          "aria-label": __props.item.label,
+          disabled: __props.item.disabled,
+          style: vue.normalizeStyle(editorStyle.value),
+          onFocus: _cache[2] || (_cache[2] = //@ts-ignore
+          (...args) => vue.unref(editor).focus && vue.unref(editor).focus(...args)),
+          onInput,
+          onBlur: _cache[3] || (_cache[3] = //@ts-ignore
+          (...args) => vue.unref(editor).blur && vue.unref(editor).blur(...args)),
+          onKeydown
+        }, null, 44, _hoisted_2))
+      ], 4);
+    };
+  }
+});
+const _hoisted_1$1 = ["role", "aria-checked", "aria-label", "tabindex"];
+const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
+  __name: "ToggleControl",
+  props: {
+    item: {},
+    colors: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const form = capabilities.useCapability(host.FormToken);
+    const activate = useWidgetActivation(() => props.item.annotationRef);
+    const { element: box, style: boxStyle } = useWidgetBox(
+      () => props.item,
+      () => props.colors
+    );
+    const focused = vue.ref(false);
+    const press = () => web.pressToggle(form, props.item, activate);
+    function onKeydown(event) {
+      if (event.key !== " " && event.key !== "Enter") return;
+      event.preventDefault();
+      press();
+    }
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", {
+        ref_key: "box",
+        ref: box,
+        role: __props.item.kind === "checkbox" ? "checkbox" : "radio",
+        "aria-checked": __props.item.checked,
+        "aria-label": __props.item.label,
+        tabindex: __props.item.disabled ? -1 : 0,
+        style: vue.normalizeStyle([vue.unref(boxStyle), { cursor: __props.item.disabled ? "default" : "pointer", outline: "none" }]),
+        onClick: press,
+        onKeydown,
+        onFocus: _cache[0] || (_cache[0] = ($event) => focused.value = true),
+        onBlur: _cache[1] || (_cache[1] = ($event) => focused.value = false)
+      }, [
+        vue.createVNode(_sfc_main$8, {
+          visible: focused.value,
+          color: __props.colors.focus
+        }, null, 8, ["visible", "color"])
+      ], 44, _hoisted_1$1);
+    };
+  }
+});
+const _hoisted_1 = { style: { position: "absolute", inset: "0", pointerEvents: "none" } };
+const _sfc_main = /* @__PURE__ */ vue.defineComponent({
+  __name: "FormLayer",
+  setup(__props) {
+    const NO_WIDGETS = Object.freeze([]);
+    const page$1 = page.usePage();
+    const form = capabilities.useOptionalCapability(host.FormToken);
+    pageLayers.usePaintsPagePart(
+      vue.computed(() => form.value ? page$1.value.ref : null),
+      "formFields"
+    );
+    const colors = useFormColors();
+    const active = capabilities.useOptionalSelector(
+      host$2.InteractionToken,
+      (interaction) => interaction.activeToolEnables("form-fill"),
+      false
+    );
+    const items = capabilities.useOptionalSelector(
+      host.FormToken,
+      (lens) => lens.listWidgets(page$1.value.ref),
+      NO_WIDGETS,
+      core.shallowEqual
+    );
+    vue.watch(
+      [form, () => page$1.value.ref],
+      ([lens, pageRef]) => {
+        if (lens) void lens.ensureLoaded(pageRef);
+      },
+      { immediate: true }
+    );
+    const keyOf = (item) => `${item.key}:${item.annotObjectNumber}`;
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+        vue.createVNode(_sfc_main$6),
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(active) ? vue.unref(items) : [], (item) => {
+          return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
+            key: keyOf(item)
+          }, [
+            item.control === "text" ? (vue.openBlock(), vue.createBlock(_sfc_main$2, {
+              key: 0,
+              item,
+              colors: vue.unref(colors)
+            }, null, 8, ["item", "colors"])) : item.control === "toggle" ? (vue.openBlock(), vue.createBlock(_sfc_main$1, {
+              key: 1,
+              item,
+              colors: vue.unref(colors)
+            }, null, 8, ["item", "colors"])) : item.control === "choice" && item.kind === "list" ? (vue.openBlock(), vue.createBlock(_sfc_main$4, {
+              key: 2,
+              item,
+              colors: vue.unref(colors)
+            }, null, 8, ["item", "colors"])) : item.control === "choice" ? (vue.openBlock(), vue.createBlock(_sfc_main$7, {
+              key: 3,
+              item,
+              colors: vue.unref(colors)
+            }, null, 8, ["item", "colors"])) : item.control === "button" ? (vue.openBlock(), vue.createBlock(_sfc_main$9, {
+              key: 4,
+              item,
+              colors: vue.unref(colors)
+            }, null, 8, ["item", "colors"])) : item.control === "signature" ? (vue.openBlock(), vue.createBlock(_sfc_main$3, {
+              key: 5,
+              item,
+              colors: vue.unref(colors)
+            }, null, 8, ["item", "colors"])) : vue.createCommentVNode("", true)
+          ], 64);
+        }), 128))
+      ]);
+    };
+  }
+});
+exports._sfc_main = _sfc_main;
+exports.useForm = useForm;
+exports.useFormEvent = useFormEvent;
+exports.useFormSettings = useFormSettings;
+exports.useFormState = useFormState;
+exports.useFormValue = useFormValue;
+//# sourceMappingURL=FormLayer.vue_vue_type_script_setup_true_lang-BA0_VwFc.cjs.map