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

package/dist/strip-C3wLonKB.js

@@ -0,0 +1,744 @@
+import { defineComponent, ref, watch, computed, openBlock, createElementBlock, normalizeStyle, unref, Fragment, renderList, createCommentVNode, createElementVNode, toDisplayString, renderSlot, createVNode, createBlock, resolveDynamicComponent, withCtx, normalizeProps, guardReactiveProps, useSlots, onUpdated, mergeProps, createSlots, isVNode, Comment, toValue } from "vue";
+import { groupMenuView, normalizeBar, layoutToolbar, stripGroupsOf, sameStripGroups } from "@embedpdf/core-ui";
+import { CommandsToken } from "@embedpdf/plugin-commands/contract/host";
+import { unregisteredCommand, resolvedCommandsEqual } from "@embedpdf/plugin-commands/contract";
+import { paintDefault, focusablesIn, observeOutsidePress, attachMenuKeys, observeLength, observeContentLength, createToolbarLengths, attachToolbarFocus, toolbarMeasureKey, TOOLBAR_ITEM_ATTRIBUTE } from "@embedpdf/web";
+import { l as useViewerBinding, a as useCapability, d as useDocumentId, g as useKernelValue } from "./capabilities-C7YzgPCX.js";
+const SURFACE = paintDefault("toolbar-surface");
+const BORDER = paintDefault("toolbar-border");
+const ACTIVE = paintDefault("toolbar-active");
+const _hoisted_1$5 = ["role", "aria-checked", "disabled", "onClick"];
+const _hoisted_2$2 = { key: 0 };
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  __name: "DefaultOverflowMenu",
+  props: {
+    view: {},
+    orientation: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const menu = ref(null);
+    watch(
+      [menu, () => props.view.isOpen],
+      ([element, isOpen], _previous, onCleanup) => {
+        if (!isOpen || !element) return;
+        const container = element.parentElement ?? element;
+        const trigger = focusablesIn(container).find((candidate) => !element.contains(candidate)) ?? null;
+        const close = () => props.view.close();
+        const stopOutside = observeOutsidePress(container, close);
+        const detachKeys = attachMenuKeys(element, { trigger, close });
+        onCleanup(() => {
+          stopOutside();
+          detachKeys();
+        });
+      },
+      { immediate: true, flush: "post" }
+    );
+    const placement = computed(
+      () => props.orientation === "vertical" ? { top: 0, insetInlineStart: "100%" } : { top: "100%", insetInlineEnd: 0 }
+    );
+    const sections = computed(
+      () => props.view.sections.map((section) => ({
+        radio: section.role === "radio",
+        rows: section.rows.flatMap((row) => {
+          const command = props.view.resolve(row.command);
+          return command ? [{ row, command }] : [];
+        })
+      }))
+    );
+    function choose(row) {
+      props.view.execute(row.command);
+      if (row.type !== "submenu") props.view.close();
+    }
+    return (_ctx, _cache) => {
+      return __props.view.isOpen ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        ref_key: "menu",
+        ref: menu,
+        role: "menu",
+        style: normalizeStyle({
+          position: "absolute",
+          ...placement.value,
+          zIndex: 41,
+          minWidth: "200px",
+          padding: "4px",
+          background: unref(SURFACE),
+          border: `1px solid ${unref(BORDER)}`,
+          borderRadius: "6px",
+          boxShadow: "0 4px 16px rgba(0,0,0,0.15)"
+        })
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(sections.value, (section, index) => {
+          return openBlock(), createElementBlock(Fragment, { key: index }, [
+            index > 0 ? (openBlock(), createElementBlock("div", {
+              key: 0,
+              style: normalizeStyle({ height: "1px", background: unref(BORDER), margin: "4px 0" })
+            }, null, 4)) : createCommentVNode("", true),
+            (openBlock(true), createElementBlock(Fragment, null, renderList(section.rows, ({ row, command }) => {
+              return openBlock(), createElementBlock("button", {
+                key: row.command,
+                type: "button",
+                role: section.radio ? "menuitemradio" : "menuitem",
+                "aria-checked": section.radio ? command.active : void 0,
+                disabled: !command.enabled,
+                tabindex: "-1",
+                style: normalizeStyle({
+                  display: "flex",
+                  width: "100%",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  gap: "16px",
+                  padding: "6px 8px",
+                  border: "none",
+                  color: "inherit",
+                  font: "inherit",
+                  background: "transparent",
+                  cursor: command.enabled ? "pointer" : "default",
+                  opacity: command.enabled ? 1 : 0.4,
+                  whiteSpace: "nowrap"
+                }),
+                onClick: ($event) => choose(row)
+              }, [
+                createElementVNode("span", null, toDisplayString(command.active && section.radio ? "• " : "") + toDisplayString(command.label), 1),
+                row.type === "submenu" ? (openBlock(), createElementBlock("span", _hoisted_2$2, "▸")) : createCommentVNode("", true)
+              ], 12, _hoisted_1$5);
+            }), 128))
+          ], 64);
+        }), 128))
+      ], 4)) : createCommentVNode("", true);
+    };
+  }
+});
+const _hoisted_1$4 = ["aria-expanded"];
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  __name: "DefaultOverflowTrigger",
+  props: {
+    isOpen: { type: Boolean }
+  },
+  emits: ["toggle"],
+  setup(__props, { emit: __emit }) {
+    const emit = __emit;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("button", {
+        type: "button",
+        "aria-haspopup": "menu",
+        "aria-expanded": __props.isOpen,
+        title: "More",
+        style: normalizeStyle({
+          display: "inline-flex",
+          alignItems: "center",
+          padding: "4px 8px",
+          color: "inherit",
+          font: "inherit",
+          border: `1px solid ${unref(BORDER)}`,
+          borderRadius: "4px",
+          background: __props.isOpen ? unref(ACTIVE) : "transparent",
+          cursor: "pointer"
+        }),
+        onClick: _cache[0] || (_cache[0] = ($event) => emit("toggle"))
+      }, " ⋯ ", 12, _hoisted_1$4);
+    };
+  }
+});
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  __name: "Measured",
+  props: {
+    measureKey: {},
+    orientation: {}
+  },
+  emits: ["length"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const element = ref(null);
+    watch(
+      [element, () => props.measureKey, () => props.orientation],
+      ([measured, key, orientation], _previous, onCleanup) => {
+        if (measured) {
+          onCleanup(observeLength(measured, orientation, (length) => emit("length", key, length)));
+        }
+      },
+      { immediate: true, flush: "post" }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", {
+        ref_key: "element",
+        ref: element,
+        style: { display: "inline-flex", flexShrink: 0 }
+      }, [
+        renderSlot(_ctx.$slots, "default")
+      ], 512);
+    };
+  }
+});
+const _hoisted_1$3 = ["value"];
+const _hoisted_2$1 = ["value", "disabled"];
+const _hoisted_3 = {
+  key: 1,
+  style: { position: "relative", display: "inline-flex" }
+};
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  __name: "DefaultCollapsed",
+  props: {
+    view: {},
+    orientation: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const active = computed(() => {
+      var _a;
+      return ((_a = props.view.commands.find((command) => command.active)) == null ? void 0 : _a.id) ?? "";
+    });
+    const isOpen = ref(false);
+    const menu = computed(() => groupMenuView(props.view, isOpen.value, () => isOpen.value = false));
+    function onChange(event) {
+      props.view.execute(event.target.value);
+    }
+    return (_ctx, _cache) => {
+      return __props.view.collapse === "select" ? (openBlock(), createElementBlock("select", {
+        key: 0,
+        value: active.value,
+        style: normalizeStyle({
+          padding: "4px 6px",
+          font: "inherit",
+          borderRadius: "4px",
+          border: `1px solid ${unref(BORDER)}`,
+          background: unref(SURFACE)
+        }),
+        onChange
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(__props.view.commands, (command) => {
+          return openBlock(), createElementBlock("option", {
+            key: command.id,
+            value: command.id,
+            disabled: !command.enabled
+          }, toDisplayString(command.label), 9, _hoisted_2$1);
+        }), 128))
+      ], 44, _hoisted_1$3)) : (openBlock(), createElementBlock("span", _hoisted_3, [
+        createVNode(_sfc_main$7, {
+          "is-open": isOpen.value,
+          onToggle: _cache[0] || (_cache[0] = ($event) => isOpen.value = !isOpen.value)
+        }, null, 8, ["is-open"]),
+        createVNode(_sfc_main$8, {
+          view: menu.value,
+          orientation: __props.orientation
+        }, null, 8, ["view", "orientation"])
+      ]));
+    };
+  }
+});
+const _hoisted_1$2 = ["disabled", "aria-pressed", "aria-haspopup", "title"];
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  __name: "DefaultCommand",
+  props: {
+    command: {},
+    run: { type: Function }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("button", {
+        type: "button",
+        disabled: !__props.command.enabled,
+        "aria-pressed": __props.command.active || void 0,
+        "aria-haspopup": __props.command.menu ? "menu" : void 0,
+        title: __props.command.label,
+        style: normalizeStyle({
+          display: "inline-flex",
+          alignItems: "center",
+          gap: "4px",
+          padding: "4px 8px",
+          whiteSpace: "nowrap",
+          color: "inherit",
+          font: "inherit",
+          background: __props.command.active ? unref(ACTIVE) : "transparent",
+          border: `1px solid ${unref(BORDER)}`,
+          borderRadius: "4px",
+          cursor: __props.command.enabled ? "pointer" : "default",
+          opacity: __props.command.enabled ? 1 : 0.4
+        }),
+        onClick: _cache[0] || (_cache[0] = ($event) => __props.run())
+      }, toDisplayString(__props.command.label), 13, _hoisted_1$2);
+    };
+  }
+});
+const _hoisted_1$1 = { style: { position: "relative", display: "inline-flex" } };
+const _hoisted_2 = ["aria-expanded"];
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  __name: "DefaultGroupTrigger",
+  props: {
+    view: {},
+    orientation: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const isOpen = ref(false);
+    const someActive = computed(() => props.view.commands.some((command) => command.active));
+    const menu = computed(() => groupMenuView(props.view, isOpen.value, () => isOpen.value = false));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("span", _hoisted_1$1, [
+        createElementVNode("button", {
+          type: "button",
+          "aria-haspopup": "menu",
+          "aria-expanded": isOpen.value,
+          title: "More",
+          style: normalizeStyle({
+            display: "inline-flex",
+            alignItems: "center",
+            padding: "4px 6px",
+            color: "inherit",
+            font: "inherit",
+            border: `1px solid ${unref(BORDER)}`,
+            borderRadius: "4px",
+            background: isOpen.value || someActive.value ? unref(ACTIVE) : "transparent",
+            cursor: "pointer"
+          }),
+          onClick: _cache[0] || (_cache[0] = ($event) => isOpen.value = !isOpen.value)
+        }, " ▾ ", 12, _hoisted_2),
+        createVNode(_sfc_main$8, {
+          view: menu.value,
+          orientation: __props.orientation
+        }, null, 8, ["view", "orientation"])
+      ]);
+    };
+  }
+});
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  __name: "NativeSlotSocket",
+  props: {
+    name: {},
+    measureKey: {},
+    orientation: {}
+  },
+  emits: ["length"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const socket = ref(null);
+    watch(
+      [socket, () => props.measureKey, () => props.orientation],
+      ([element, key, orientation], _previous, onCleanup) => {
+        if (element) {
+          onCleanup(observeLength(element, orientation, (length) => emit("length", key, length)));
+        }
+      },
+      { immediate: true, flush: "post" }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent("slot"), {
+        ref_key: "socket",
+        ref: socket,
+        name: __props.name,
+        style: { display: "inline-flex", alignItems: "center", flexShrink: 0 }
+      }, {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 8, ["name"]);
+    };
+  }
+});
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "ToolbarPart",
+  props: {
+    part: {},
+    layer: {},
+    orientation: {}
+  },
+  emits: ["length"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const measure = (length) => {
+      if (props.part.kind === "custom") emit("length", props.part.measureKey, length);
+    };
+    return (_ctx, _cache) => {
+      return __props.part.kind === "command" ? renderSlot(_ctx.$slots, "command", {
+        command: __props.part.command,
+        variant: __props.part.variant,
+        run: __props.part.run
+      }, () => [
+        createVNode(_sfc_main$4, {
+          command: __props.part.command,
+          run: __props.part.run
+        }, null, 8, ["command", "run"])
+      ], void 0, 0) : __props.part.kind === "custom" && _ctx.$slots.custom ? renderSlot(_ctx.$slots, "custom", normalizeProps(guardReactiveProps({ name: __props.part.name, variant: __props.part.variant, layer: __props.layer, measure })), () => [
+        __props.part.terminal ? renderSlot(_ctx.$slots, "command", {
+          command: __props.part.terminal,
+          variant: "icon",
+          run: __props.part.runTerminal
+        }, () => [
+          createVNode(_sfc_main$4, {
+            command: __props.part.terminal,
+            run: __props.part.runTerminal
+          }, null, 8, ["command", "run"])
+        ], void 0, 0) : createCommentVNode("", true)
+      ], void 0, 1) : __props.part.kind === "custom" ? (openBlock(), createBlock(_sfc_main$2, {
+        key: 2,
+        name: __props.part.name,
+        "measure-key": __props.part.measureKey,
+        orientation: __props.orientation,
+        onLength: _cache[0] || (_cache[0] = (key, length) => emit("length", key, length))
+      }, {
+        default: withCtx(() => [
+          __props.part.terminal ? renderSlot(_ctx.$slots, "command", {
+            command: __props.part.terminal,
+            variant: "icon",
+            run: __props.part.runTerminal
+          }, () => [
+            createVNode(_sfc_main$4, {
+              command: __props.part.terminal,
+              run: __props.part.runTerminal
+            }, null, 8, ["command", "run"])
+          ], void 0, 0) : createCommentVNode("", true)
+        ]),
+        _: 3
+      }, 8, ["name", "measure-key", "orientation"])) : __props.part.kind === "collapsed" ? renderSlot(_ctx.$slots, "collapsed", {
+        view: __props.part.view
+      }, () => [
+        createVNode(_sfc_main$5, {
+          view: __props.part.view,
+          orientation: __props.orientation
+        }, null, 8, ["view", "orientation"])
+      ], void 0, 3) : renderSlot(_ctx.$slots, "group-trigger", {
+        view: __props.part.view
+      }, () => [
+        createVNode(_sfc_main$3, {
+          view: __props.part.view,
+          orientation: __props.orientation
+        }, null, 8, ["view", "orientation"])
+      ], void 0, 4);
+    };
+  }
+});
+const _hoisted_1 = ["aria-orientation", "aria-label"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "Toolbar",
+  props: {
+    bar: {},
+    orientation: { default: "horizontal" },
+    gap: { default: 8 },
+    separatorWidth: { default: 1 },
+    "aria-label": {}
+  },
+  setup(__props) {
+    const props = __props;
+    const slots = useSlots();
+    const { track } = useViewerBinding();
+    const commands = useCapability(CommandsToken);
+    const documentId = useDocumentId();
+    const vertical = computed(() => props.orientation === "vertical");
+    const ariaLabel = computed(
+      () => props.ariaLabel
+    );
+    const container = ref(null);
+    const containerLength = ref(0);
+    watch(
+      [container, () => props.orientation],
+      ([element, orientation], _previous, onCleanup) => {
+        if (element) {
+          onCleanup(
+            observeContentLength(element, orientation, (length) => containerLength.value = length)
+          );
+        }
+      },
+      { immediate: true, flush: "post" }
+    );
+    const lengths = createToolbarLengths();
+    const measured = ref(0);
+    function onLength(key, length) {
+      if (lengths.report(props.orientation, key, length)) measured.value += 1;
+    }
+    let roving = null;
+    watch(
+      [container, () => props.orientation],
+      ([element, orientation], _previous, onCleanup) => {
+        if (!element) return;
+        const focus = attachToolbarFocus(element, orientation);
+        roving = focus;
+        onCleanup(() => {
+          focus.detach();
+          roving = null;
+        });
+      },
+      { immediate: true, flush: "post" }
+    );
+    onUpdated(() => roving == null ? void 0 : roving.refresh());
+    const normalized = computed(() => normalizeBar(props.bar));
+    const resolve = (id) => commands.resolveCommand(id, documentId.value ?? void 0);
+    const execute = (id) => void commands.execute(id, { documentId: documentId.value ?? void 0 });
+    const layout = computed(() => {
+      track();
+      void measured.value;
+      return layoutToolbar({
+        bar: normalized.value,
+        resolve,
+        unregistered: unregisteredCommand,
+        execute,
+        menuTarget: (id) => commands.getMenuTarget(id),
+        metrics: lengths.metrics(props.orientation, props.gap, props.separatorWidth),
+        measureKey: toolbarMeasureKey,
+        containerLength: containerLength.value,
+        orientation: props.orientation
+      });
+    });
+    const overflowOpen = ref(false);
+    const toggleOverflow = () => overflowOpen.value = !overflowOpen.value;
+    const noop = () => {
+    };
+    watch(
+      () => layout.value.hasOverflow,
+      (hasOverflow) => {
+        if (!hasOverflow) overflowOpen.value = false;
+      }
+    );
+    const overflowView = computed(
+      () => ({
+        sections: layout.value.overflow,
+        isOpen: overflowOpen.value,
+        close: () => overflowOpen.value = false,
+        resolve,
+        execute
+      })
+    );
+    const sectionStyle = (name) => ({
+      display: "flex",
+      flexDirection: vertical.value ? "column" : "row",
+      alignItems: "center",
+      gap: `${props.gap}px`,
+      flex: "0 0 auto",
+      ...name !== "center" ? null : vertical.value ? { marginTop: "auto", marginBottom: "auto" } : { marginLeft: "auto", marginRight: "auto" }
+    });
+    const separatorStyle = computed(() => ({
+      ...vertical.value ? { height: "1px" } : { width: "1px" },
+      alignSelf: "stretch",
+      background: "currentColor",
+      opacity: 0.2
+    }));
+    const TOOLBAR_ITEM = { [TOOLBAR_ITEM_ATTRIBUTE]: "" };
+    const ITEM_STYLE = { display: "contents" };
+    function draws(content) {
+      return (Array.isArray(content) ? content : [content]).some((node) => {
+        if (node === null || node === void 0 || typeof node === "boolean") return false;
+        if (!isVNode(node)) return true;
+        if (node.type === Comment) return false;
+        if (node.type === Fragment) return draws(node.children);
+        return true;
+      });
+    }
+    function measuredHere(part) {
+      if (part.kind !== "custom") return true;
+      const custom = slots.custom;
+      if (!custom) return false;
+      const scope = { name: part.name, variant: part.variant, measure: noop };
+      return draws(custom({ ...scope, layer: "measure" })) || !draws(custom({ ...scope, layer: "live" }));
+    }
+    const measureLayerStyle = computed(() => ({
+      position: "absolute",
+      left: 0,
+      top: 0,
+      height: 0,
+      overflow: "hidden",
+      visibility: "hidden",
+      pointerEvents: "none",
+      display: "flex",
+      whiteSpace: "nowrap",
+      ...vertical.value ? { flexDirection: "column", alignItems: "flex-start" } : null
+    }));
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        ref_key: "container",
+        ref: container,
+        role: "toolbar",
+        "aria-orientation": __props.orientation,
+        "aria-label": ariaLabel.value,
+        style: normalizeStyle({
+          position: "relative",
+          display: "flex",
+          flexDirection: vertical.value ? "column" : "row",
+          alignItems: "center"
+        })
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(layout.value.sections, (section) => {
+          return openBlock(), createElementBlock("div", {
+            key: section.name,
+            style: normalizeStyle(sectionStyle(section.name))
+          }, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(section.groups, (group, index) => {
+              return openBlock(), createElementBlock(Fragment, {
+                key: group.id
+              }, [
+                index > 0 ? renderSlot(_ctx.$slots, "separator", {}, () => [
+                  createElementVNode("span", {
+                    style: normalizeStyle(separatorStyle.value)
+                  }, null, 4)
+                ], void 0, 0) : createCommentVNode("", true),
+                (openBlock(true), createElementBlock(Fragment, null, renderList(group.parts, (part) => {
+                  return openBlock(), createElementBlock("span", mergeProps({
+                    key: part.key
+                  }, { ref_for: true }, TOOLBAR_ITEM, { style: ITEM_STYLE }), [
+                    createVNode(_sfc_main$1, {
+                      part,
+                      layer: "live",
+                      orientation: __props.orientation,
+                      onLength
+                    }, createSlots({ _: 2 }, [
+                      _ctx.$slots.command ? {
+                        name: "command",
+                        fn: withCtx((scope) => [
+                          renderSlot(_ctx.$slots, "command", mergeProps({ ref_for: true }, scope))
+                        ]),
+                        key: "0"
+                      } : void 0,
+                      _ctx.$slots.custom ? {
+                        name: "custom",
+                        fn: withCtx((scope) => [
+                          renderSlot(_ctx.$slots, "custom", mergeProps({ ref_for: true }, scope))
+                        ]),
+                        key: "1"
+                      } : void 0,
+                      _ctx.$slots.collapsed ? {
+                        name: "collapsed",
+                        fn: withCtx((scope) => [
+                          renderSlot(_ctx.$slots, "collapsed", mergeProps({ ref_for: true }, scope))
+                        ]),
+                        key: "2"
+                      } : void 0,
+                      _ctx.$slots["group-trigger"] ? {
+                        name: "group-trigger",
+                        fn: withCtx((scope) => [
+                          renderSlot(_ctx.$slots, "group-trigger", mergeProps({ ref_for: true }, scope))
+                        ]),
+                        key: "3"
+                      } : void 0
+                    ]), 1032, ["part", "orientation"])
+                  ], 16);
+                }), 128))
+              ], 64);
+            }), 128)),
+            section.name === "end" && layout.value.hasOverflow ? (openBlock(), createElementBlock("span", mergeProps({
+              key: 0,
+              ref_for: true
+            }, TOOLBAR_ITEM, { style: { position: "relative", display: "inline-flex" } }), [
+              renderSlot(_ctx.$slots, "overflow-trigger", {
+                isOpen: overflowOpen.value,
+                toggle: toggleOverflow
+              }, () => [
+                createVNode(_sfc_main$7, {
+                  "is-open": overflowOpen.value,
+                  onToggle: toggleOverflow
+                }, null, 8, ["is-open"])
+              ]),
+              renderSlot(_ctx.$slots, "overflow-menu", { view: overflowView.value }, () => [
+                createVNode(_sfc_main$8, {
+                  view: overflowView.value,
+                  orientation: __props.orientation
+                }, null, 8, ["view", "orientation"])
+              ])
+            ], 16)) : createCommentVNode("", true)
+          ], 4);
+        }), 128)),
+        createElementVNode("div", {
+          "aria-hidden": "true",
+          inert: "",
+          style: normalizeStyle(measureLayerStyle.value)
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(layout.value.measured, (part) => {
+            return openBlock(), createElementBlock(Fragment, {
+              key: part.measureKey
+            }, [
+              measuredHere(part) ? (openBlock(), createBlock(_sfc_main$6, {
+                key: 0,
+                "measure-key": part.measureKey,
+                orientation: __props.orientation,
+                onLength
+              }, {
+                default: withCtx(() => [
+                  createVNode(_sfc_main$1, {
+                    part,
+                    layer: "measure",
+                    orientation: __props.orientation,
+                    onLength
+                  }, createSlots({ _: 2 }, [
+                    _ctx.$slots.command ? {
+                      name: "command",
+                      fn: withCtx((scope) => [
+                        renderSlot(_ctx.$slots, "command", mergeProps({ ref_for: true }, scope))
+                      ]),
+                      key: "0"
+                    } : void 0,
+                    _ctx.$slots.custom ? {
+                      name: "custom",
+                      fn: withCtx((scope) => [
+                        renderSlot(_ctx.$slots, "custom", mergeProps({ ref_for: true }, scope))
+                      ]),
+                      key: "1"
+                    } : void 0,
+                    _ctx.$slots.collapsed ? {
+                      name: "collapsed",
+                      fn: withCtx((scope) => [
+                        renderSlot(_ctx.$slots, "collapsed", mergeProps({ ref_for: true }, scope))
+                      ]),
+                      key: "2"
+                    } : void 0,
+                    _ctx.$slots["group-trigger"] ? {
+                      name: "group-trigger",
+                      fn: withCtx((scope) => [
+                        renderSlot(_ctx.$slots, "group-trigger", mergeProps({ ref_for: true }, scope))
+                      ]),
+                      key: "3"
+                    } : void 0
+                  ]), 1032, ["part", "orientation"])
+                ]),
+                _: 2
+              }, 1032, ["measure-key", "orientation"])) : createCommentVNode("", true)
+            ], 64);
+          }), 128)),
+          createVNode(_sfc_main$6, {
+            "measure-key": unref(toolbarMeasureKey).overflowTrigger,
+            orientation: __props.orientation,
+            onLength
+          }, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "overflow-trigger", {
+                isOpen: false,
+                toggle: noop
+              }, () => [
+                createVNode(_sfc_main$7, { "is-open": false })
+              ])
+            ]),
+            _: 3
+          }, 8, ["measure-key", "orientation"])
+        ], 4)
+      ], 12, _hoisted_1);
+    };
+  }
+});
+const sameGroups = (left, right) => sameStripGroups(left, right, resolvedCommandsEqual);
+const NO_GROUPS = Object.freeze([]);
+function useStripView(bar) {
+  const commands = useCapability(CommandsToken);
+  const documentId = useDocumentId();
+  const normalized = computed(() => {
+    const schema = toValue(bar);
+    return schema ? normalizeBar(schema) : null;
+  });
+  const groups = useKernelValue(
+    () => normalized.value ? stripGroupsOf(
+      normalized.value,
+      (id) => commands.resolveCommand(id, documentId.value ?? void 0)
+    ) : NO_GROUPS,
+    sameGroups
+  );
+  return computed(
+    () => groups.value.length === 0 ? null : {
+      groups: groups.value,
+      execute: (id) => void commands.execute(id, { documentId: documentId.value ?? void 0 })
+    }
+  );
+}
+export {
+  _sfc_main as _,
+  useStripView as u
+};
+//# sourceMappingURL=strip-C3wLonKB.js.map