@dxos/plugin-deck 0.9.1-main.c7dcc2e112 → 0.10.0

package/dist/lib/neutral/chunk-Z2B5RSVI.mjs

@@ -0,0 +1,1096 @@
+import {
+  layoutAppliesTopbar
+} from "./chunk-PP32NEVY.mjs";
+
+// src/containers/Sidebar/SidebarButton.tsx
+import React, { useCallback } from "react";
+import { useOperationInvoker } from "@dxos/app-framework/ui";
+import { LayoutOperation } from "@dxos/app-toolkit";
+import { IconButton, useTranslation } from "@dxos/react-ui";
+import { getLinkedVariant } from "@dxos/react-ui-attention";
+import { useDeckCompanions, useDeckState } from "#hooks";
+import { meta } from "#meta";
+var ToggleSidebarButton = ({ classNames, variant = "ghost" }) => {
+  const { updateState } = useDeckState();
+  const { t } = useTranslation(meta.profile.key);
+  const handleClick = useCallback(() => {
+    updateState((state) => ({
+      ...state,
+      sidebarState: state.sidebarState === "expanded" ? "collapsed" : "expanded"
+    }));
+  }, [
+    updateState
+  ]);
+  return /* @__PURE__ */ React.createElement(IconButton, {
+    variant,
+    icon: "ph--sidebar--regular",
+    iconOnly: true,
+    size: 4,
+    label: t("open-navigation-sidebar.label"),
+    onClick: handleClick,
+    classNames
+  });
+};
+var CloseSidebarButton = () => {
+  const { updateState } = useDeckState();
+  const { t } = useTranslation(meta.profile.key);
+  const handleClick = useCallback(() => {
+    updateState((state) => ({
+      ...state,
+      sidebarState: "collapsed"
+    }));
+  }, [
+    updateState
+  ]);
+  return /* @__PURE__ */ React.createElement(IconButton, {
+    variant: "ghost",
+    icon: "ph--caret-line-left--regular",
+    iconOnly: true,
+    size: 4,
+    label: t("close-navigation-sidebar.button"),
+    onClick: handleClick,
+    classNames: "rounded-none px-1 dx-focus-ring-inset pe-[max(.5rem,env(safe-area-inset-left))]"
+  });
+};
+var ToggleComplementarySidebarButton = ({ inR0, classNames, current }) => {
+  const { invokePromise } = useOperationInvoker();
+  const { state, updateState } = useDeckState();
+  const { t } = useTranslation(meta.profile.key);
+  const companions = useDeckCompanions();
+  const handleClick = useCallback(() => {
+    const nextState = state.complementarySidebarState === "expanded" ? "collapsed" : "expanded";
+    updateState((state2) => ({
+      ...state2,
+      complementarySidebarState: nextState
+    }));
+    const subject = state.complementarySidebarPanel ?? (companions[0] && getLinkedVariant(companions[0].id));
+    if (nextState === "expanded" && !current && subject) {
+      void invokePromise(LayoutOperation.UpdateComplementary, {
+        subject
+      });
+    }
+  }, [
+    state,
+    updateState,
+    current,
+    companions,
+    invokePromise
+  ]);
+  const label3 = t(state.complementarySidebarState === "expanded" ? "close-complementary-sidebar.label" : "open-complementary-sidebar.label");
+  return /* @__PURE__ */ React.createElement(IconButton, {
+    variant: "ghost",
+    classNames: [
+      "[&>svg]:-scale-x-100",
+      classNames
+    ],
+    icon: "ph--sidebar-simple--regular",
+    iconOnly: true,
+    label: label3,
+    tooltipSide: inR0 ? "left" : void 0,
+    onClick: handleClick
+  });
+};
+
+// src/containers/Sidebar/ComplementarySidebar.tsx
+import React3, { useCallback as useCallback2, useEffect as useEffect2, useMemo, useState } from "react";
+import { Surface, useOperationInvoker as useOperationInvoker2 } from "@dxos/app-framework/ui";
+import { LayoutOperation as LayoutOperation2 } from "@dxos/app-toolkit";
+import { AppSurface } from "@dxos/app-toolkit/ui";
+import { IconButton as IconButton2, Main, Panel, Toolbar, toLocalizedString, useTranslation as useTranslation3 } from "@dxos/react-ui";
+import { getLinkedVariant as getLinkedVariant2 } from "@dxos/react-ui-attention";
+import { Tabs } from "@dxos/react-ui-tabs";
+import { iconSize, mx as mx2 } from "@dxos/ui-theme";
+import { useBreakpoints, useDeckCompanions as useDeckCompanions2, useDeckState as useDeckState2 } from "#hooks";
+import { meta as meta3 } from "#meta";
+import { getMode } from "#types";
+
+// src/containers/Deck/PlankFallback.tsx
+import React2, { useEffect } from "react";
+import { log } from "@dxos/log";
+import { ErrorFallback, useTranslation as useTranslation2 } from "@dxos/react-ui";
+import { descriptionMessage, mx } from "@dxos/ui-theme";
+import { meta as meta2 } from "#meta";
+var __dxlog_file = "/__w/dxos/dxos/packages/plugins/plugin-deck/src/containers/Deck/PlankFallback.tsx";
+var PlankLoading = () => /* @__PURE__ */ React2.createElement("div", {
+  className: "grid place-items-center dx-attention-surface"
+});
+var PlankErrorFallback = ({ error }) => {
+  const { t } = useTranslation2(meta2.profile.key);
+  useEffect(() => {
+    if (error) {
+      log.error("plank error", {
+        error
+      }, { "~LogMeta": "~LogMeta", F: __dxlog_file, L: 17, S: void 0 });
+    }
+  }, [
+    error
+  ]);
+  if (process.env.NODE_ENV === "development") {
+    return /* @__PURE__ */ React2.createElement(ErrorFallback, {
+      title: "Plank Error",
+      error
+    });
+  }
+  return /* @__PURE__ */ React2.createElement("div", {
+    role: "alert",
+    "data-testid": "plank-content-error",
+    className: "dx-attention-surface overflow-y-auto p-8 grid place-items-center"
+  }, /* @__PURE__ */ React2.createElement("div", {
+    className: "flex flex-col items-center gap-2"
+  }, /* @__PURE__ */ React2.createElement("p", {
+    className: mx(descriptionMessage, "break-all rounded-md p-4")
+  }, t("error-fallback.message"))));
+};
+
+// src/containers/Sidebar/ComplementarySidebar.tsx
+var label = [
+  "complementary-sidebar.title",
+  {
+    ns: meta3.profile.key
+  }
+];
+var ComplementarySidebar = ({ current }) => {
+  const { invokePromise } = useOperationInvoker2();
+  const { t } = useTranslation3(meta3.profile.key);
+  const { state, deck, updateState } = useDeckState2();
+  const layoutMode = getMode(deck);
+  const breakpoint = useBreakpoints();
+  const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
+  const companions = useDeckCompanions2();
+  const activeCompanion = companions.find((companion) => getLinkedVariant2(companion.id) === current);
+  const activeId = activeCompanion && getLinkedVariant2(activeCompanion.id);
+  const [internalValue, setInternalValue] = useState(activeId);
+  useEffect2(() => {
+    setInternalValue(activeId);
+  }, [
+    activeId
+  ]);
+  const handleTabClick = useCallback2((event) => {
+    const nextValue = event.currentTarget.getAttribute("data-value");
+    if (nextValue === activeId) {
+      updateState((state2) => ({
+        ...state2,
+        complementarySidebarState: state2.complementarySidebarState === "expanded" ? "collapsed" : "expanded"
+      }));
+    } else {
+      setInternalValue(nextValue);
+      updateState((state2) => ({
+        ...state2,
+        complementarySidebarState: "expanded"
+      }));
+      void invokePromise(LayoutOperation2.UpdateComplementary, {
+        subject: nextValue
+      });
+    }
+  }, [
+    state.complementarySidebarState,
+    activeId,
+    invokePromise,
+    updateState
+  ]);
+  const data = useMemo(() => activeCompanion && {
+    id: activeCompanion.id,
+    subject: activeCompanion.data
+  }, [
+    activeCompanion?.id,
+    activeCompanion?.data
+  ]);
+  useEffect2(() => {
+    if (!activeId) {
+      void invokePromise(LayoutOperation2.UpdateComplementary, {
+        state: "collapsed"
+      });
+    }
+  }, [
+    activeId,
+    invokePromise
+  ]);
+  return /* @__PURE__ */ React3.createElement(Main.ComplementarySidebar, {
+    label,
+    classNames: [
+      topbar && "top-[calc(env(safe-area-inset-top)+var(--dx-rail-size))]"
+    ]
+  }, /* @__PURE__ */ React3.createElement(Tabs.Root, {
+    classNames: "contents",
+    orientation: "vertical",
+    value: internalValue
+  }, /* @__PURE__ */ React3.createElement("div", {
+    "data-tauri-drag-region": true,
+    style: iconSize(5),
+    className: mx2("absolute z-1 inset-y-0 end-0 w-(--dx-r0-size)!", "py-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)] border-s border-subdued-separator", "grid grid-cols-1 grid-rows-[1fr_min-content] bg-r0-surface dx-contain-layout dx-app-drag")
+  }, /* @__PURE__ */ React3.createElement(Tabs.Tablist, {
+    classNames: "grid grid-cols-1 auto-rows-(--dx-rail-action) overflow-y-auto scrollbar-none gap-1 p-1"
+  }, companions.map((companion) => /* @__PURE__ */ React3.createElement(Tabs.Tab, {
+    key: getLinkedVariant2(companion.id),
+    value: getLinkedVariant2(companion.id),
+    asChild: true
+  }, /* @__PURE__ */ React3.createElement(IconButton2, {
+    classNames: "w-(--dx-rail-action) h-(--dx-rail-action) min-h-0 px-0",
+    label: toLocalizedString(companion.properties.label, t),
+    icon: companion.properties.icon,
+    iconOnly: true,
+    tooltipSide: "left",
+    "data-value": getLinkedVariant2(companion.id),
+    ...companion.properties.joyride && {
+      "data-joyride": companion.properties.joyride
+    },
+    variant: activeId === getLinkedVariant2(companion.id) ? state.complementarySidebarState === "expanded" ? "primary" : "ghost" : "ghost",
+    onClick: handleTabClick
+  })))), /* @__PURE__ */ React3.createElement("div", {
+    className: "grid grid-cols-1 auto-rows-(--dx-rail-item) py-0.5 gap-0.5 overflow-y-auto scrollbar-none",
+    style: iconSize(4)
+  }, /* @__PURE__ */ React3.createElement(Surface.Surface, {
+    type: AppSurface.StatusIndicator
+  })), /* @__PURE__ */ React3.createElement("div", {
+    className: "hidden lg:grid grid-cols-1 auto-rows-(--dx-rail-action) p-1"
+  }, /* @__PURE__ */ React3.createElement(ToggleComplementarySidebarButton, null))), activeId && companions.map((companion) => /* @__PURE__ */ React3.createElement(Tabs.Panel, {
+    key: getLinkedVariant2(companion.id),
+    value: getLinkedVariant2(companion.id),
+    classNames: [
+      'absolute data-[state="inactive"]:-z-[1] overflow-hidden',
+      "inset-y-0 start-0 w-full lg:w-(--dx-r1-size)"
+    ],
+    ...state.complementarySidebarState !== "expanded" && {
+      inert: true
+    }
+  }, /* @__PURE__ */ React3.createElement(ComplementarySidebarPanel, {
+    companion,
+    activeId,
+    data
+  })))));
+};
+var ComplementarySidebarPanel = ({ companion, activeId, data }) => {
+  const { t } = useTranslation3(meta3.profile.key);
+  if (getLinkedVariant2(companion.id) !== activeId && !data) {
+    return null;
+  }
+  return /* @__PURE__ */ React3.createElement(Panel.Root, null, /* @__PURE__ */ React3.createElement(Panel.Toolbar, {
+    asChild: true,
+    size: "lg"
+  }, /* @__PURE__ */ React3.createElement(Toolbar.Root, {
+    style: iconSize(5),
+    classNames: "bg-header-surface"
+  }, /* @__PURE__ */ React3.createElement(IconButton2, {
+    classNames: "w-(--dx-rail-action) h-(--dx-rail-action) min-h-0 px-0",
+    label: toLocalizedString(companion.properties.label, t),
+    icon: companion.properties.icon,
+    iconOnly: true,
+    tooltipSide: "left",
+    "data-value": getLinkedVariant2(companion.id),
+    variant: "default"
+  }), /* @__PURE__ */ React3.createElement("div", {
+    className: "px-1"
+  }, toLocalizedString(companion.properties.label, t)))), /* @__PURE__ */ React3.createElement(Panel.Content, {
+    classNames: "bg-r1-surface"
+  }, /* @__PURE__ */ React3.createElement(Surface.Surface, {
+    type: AppSurface.deckCompanion(getLinkedVariant2(companion.id)),
+    data,
+    fallback: PlankErrorFallback,
+    placeholder: /* @__PURE__ */ React3.createElement(PlankLoading, null)
+  })));
+};
+
+// src/containers/Sidebar/Sidebar.tsx
+import React4, { useMemo as useMemo2 } from "react";
+import { Surface as Surface2 } from "@dxos/app-framework/ui";
+import { AppSurface as AppSurface2 } from "@dxos/app-toolkit/ui";
+import { Main as Main2 } from "@dxos/react-ui";
+import { useBreakpoints as useBreakpoints2, useDeckState as useDeckState3 } from "#hooks";
+import { meta as meta4 } from "#meta";
+import { getMode as getMode2 } from "#types";
+var label2 = [
+  "sidebar.title",
+  {
+    ns: meta4.profile.key
+  }
+];
+var Sidebar = () => {
+  const { state, deck } = useDeckState3();
+  const { popoverAnchorId, activeDeck: current } = state;
+  const breakpoint = useBreakpoints2();
+  const layoutMode = getMode2(deck);
+  const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
+  const navigationData = useMemo2(() => ({
+    popoverAnchorId,
+    topbar,
+    current
+  }), [
+    popoverAnchorId,
+    topbar,
+    current
+  ]);
+  return /* @__PURE__ */ React4.createElement(Main2.NavigationSidebar, {
+    label: label2,
+    classNames: [
+      "grid",
+      topbar && "top-[calc(env(safe-area-inset-top)+var(--dx-rail-size))]"
+    ]
+  }, /* @__PURE__ */ React4.createElement(Surface2.Surface, {
+    type: AppSurface2.Navigation,
+    data: navigationData,
+    limit: 1
+  }));
+};
+
+// src/containers/Deck/DeckContent.tsx
+import React7, { useCallback as useCallback3, useEffect as useEffect3, useRef } from "react";
+import { AttentionCapabilities } from "@dxos/plugin-attention";
+import { Main as Main3, useMediaQuery } from "@dxos/react-ui";
+import { useBreakpoints as useBreakpoints3 } from "#hooks";
+
+// src/containers/Deck/Banner.tsx
+import React5 from "react";
+import { Surface as Surface3 } from "@dxos/app-framework/ui";
+import { AppSurface as AppSurface3 } from "@dxos/app-toolkit/ui";
+import { useTranslation as useTranslation4 } from "@dxos/react-ui";
+import { mx as mx3, osTranslations } from "@dxos/ui-theme";
+import { meta as meta5 } from "#meta";
+import { VersionInfo } from "#types";
+var Banner = ({ variant, classNames }) => {
+  const { t } = useTranslation4(meta5.profile.key);
+  return /* @__PURE__ */ React5.createElement("header", {
+    className: mx3("flex items-stretch relative py-1 ps-1 pe-2", variant === "topbar" && "fixed inset-x-0 top-[env(safe-area-inset-top)] h-(--dx-rail-size) border-b border-separator", classNames)
+  }, variant === "sidebar" ? /* @__PURE__ */ React5.createElement(CloseSidebarButton, null) : /* @__PURE__ */ React5.createElement(ToggleSidebarButton, null), /* @__PURE__ */ React5.createElement("span", {
+    className: "self-center grow ms-1"
+  }, t("current-app.name", {
+    ns: osTranslations
+  })), variant === "topbar" && /* @__PURE__ */ React5.createElement("div", {
+    className: "absolute inset-0 pointer-events-none"
+  }, /* @__PURE__ */ React5.createElement("div", {
+    className: "grid h-full pointer-fine:p-1 max-w-md mx-auto pointer-events-auto"
+  }, /* @__PURE__ */ React5.createElement(Surface3.Surface, {
+    type: AppSurface3.SearchInput,
+    limit: 1
+  }))), /* @__PURE__ */ React5.createElement("span", {
+    className: "grow"
+  }), /* @__PURE__ */ React5.createElement(Surface3.Surface, {
+    type: VersionInfo,
+    limit: 1
+  }));
+};
+
+// src/containers/Deck/DeckRoot.tsx
+import { createContext } from "@radix-ui/react-context";
+import React6 from "react";
+var DECK_NAME = "Deck";
+var DECK_ROOT_NAME = "DeckRoot";
+var [DeckProvider, useDeckContext] = createContext(DECK_NAME);
+var DeckRoot = ({ children, ...context }) => {
+  return /* @__PURE__ */ React6.createElement(DeckProvider, context, children);
+};
+DeckRoot.displayName = DECK_ROOT_NAME;
+
+// src/containers/Deck/DeckContent.tsx
+var DECK_CONTENT_NAME = "DeckContent";
+var DeckContent = ({ children }) => {
+  const { state: { sidebarState, complementarySidebarState, complementarySidebarPanel }, deck: { active, fullscreen, solo }, updateState, layoutMode, settings, pluginManager, onLayoutChange } = useDeckContext(DECK_CONTENT_NAME);
+  const breakpoint = useBreakpoints3();
+  const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
+  useEffect3(() => {
+    const attention = pluginManager.capabilities.get(AttentionCapabilities.Attention);
+    const attended = attention.getCurrent();
+    const firstId = solo ?? active[0];
+    if (attended.length === 0 && firstId) {
+      document.querySelector(`article[data-attendable-id="${firstId}"] button`)?.focus();
+    }
+  }, []);
+  const [isNotMobile] = useMediaQuery("md");
+  const shouldRevert = useRef(false);
+  useEffect3(() => {
+    if (!isNotMobile && layoutMode === "multi") {
+      const attention = pluginManager.capabilities.get(AttentionCapabilities.Attention);
+      const attended = attention.getCurrent();
+      shouldRevert.current = true;
+      onLayoutChange({
+        subject: attended[0],
+        mode: "solo"
+      });
+    } else if (isNotMobile && layoutMode === "solo" && shouldRevert.current) {
+      onLayoutChange({
+        revert: true
+      });
+    }
+  }, [
+    isNotMobile,
+    layoutMode,
+    onLayoutChange
+  ]);
+  useEffect3(() => {
+    if (!settings?.enableDeck && layoutMode === "multi") {
+      onLayoutChange({
+        subject: active[0],
+        mode: "solo"
+      });
+    }
+  }, [
+    settings?.enableDeck,
+    onLayoutChange,
+    active,
+    layoutMode
+  ]);
+  const handleNavigationSidebarStateChange = useCallback3((next) => {
+    updateState((s) => ({
+      ...s,
+      sidebarState: next
+    }));
+  }, [
+    updateState
+  ]);
+  const handleComplementarySidebarStateChange = useCallback3((next) => {
+    updateState((s) => ({
+      ...s,
+      complementarySidebarState: next
+    }));
+  }, [
+    updateState
+  ]);
+  return /* @__PURE__ */ React7.createElement(Main3.Root, {
+    navigationSidebarState: fullscreen ? "closed" : sidebarState,
+    complementarySidebarState: fullscreen ? "closed" : complementarySidebarState,
+    onNavigationSidebarStateChange: handleNavigationSidebarStateChange,
+    onComplementarySidebarStateChange: handleComplementarySidebarStateChange
+  }, /* @__PURE__ */ React7.createElement(Sidebar, null), /* @__PURE__ */ React7.createElement(ComplementarySidebar, {
+    current: complementarySidebarPanel
+  }), /* @__PURE__ */ React7.createElement(Main3.Overlay, null), children, topbar && /* @__PURE__ */ React7.createElement(Banner, {
+    variant: "topbar"
+  }));
+};
+DeckContent.displayName = DECK_CONTENT_NAME;
+
+// src/containers/Deck/DeckViewport.tsx
+import React10, { useCallback as useCallback7, useEffect as useEffect6, useRef as useRef3 } from "react";
+import { Surface as Surface5, useOperationInvoker as useOperationInvoker5 } from "@dxos/app-framework/ui";
+import { LayoutOperation as LayoutOperation5 } from "@dxos/app-toolkit";
+import { addEventListener } from "@dxos/async";
+import { invariant } from "@dxos/invariant";
+import { IconButton as IconButton4, Main as Main4, ScrollArea, useOnTransition, useTranslation as useTranslation6 } from "@dxos/react-ui";
+import { mainIntrinsicSize, mainPaddingTransitions } from "@dxos/react-ui";
+import { Mosaic } from "@dxos/react-ui-mosaic";
+import { hoverableControls, hoverableFocusedWithinControls, mx as mx4 } from "@dxos/ui-theme";
+import { useBreakpoints as useBreakpoints5, useDeckState as useDeckState5 } from "#hooks";
+import { meta as meta8 } from "#meta";
+import { DeckOperation as DeckOperation2, Keyshortcuts, getMode as getMode3 } from "#types";
+
+// src/containers/Deck/DeckPlank.tsx
+import { useFocusFinders } from "@fluentui/react-tabster";
+import React9, { memo, useCallback as useCallback6, useEffect as useEffect5, useMemo as useMemo4, useRef as useRef2, useState as useState2 } from "react";
+import { Surface as Surface4 } from "@dxos/app-framework/ui";
+import { AppSurface as AppSurface4 } from "@dxos/app-toolkit/ui";
+import { Splitter } from "@dxos/react-ui";
+import { Companion, Plank } from "#components";
+import { useCompanionSplit } from "#hooks";
+
+// src/containers/Deck/PlankControls.tsx
+import React8, { forwardRef, useCallback as useCallback4 } from "react";
+import { useOperationInvoker as useOperationInvoker3 } from "@dxos/app-framework/ui";
+import { LayoutOperation as LayoutOperation3 } from "@dxos/app-toolkit";
+import { ButtonGroup, IconButton as IconButton3, useTranslation as useTranslation5 } from "@dxos/react-ui";
+import { meta as meta6 } from "#meta";
+var plankControlSpacing = "px-2";
+var PlankCompanionControls = /* @__PURE__ */ forwardRef(({ primary }, forwardedRef) => {
+  const { t } = useTranslation5(meta6.profile.key);
+  const { invokePromise } = useOperationInvoker3();
+  const handleCloseCompanion = useCallback4(() => {
+    return invokePromise(LayoutOperation3.UpdateCompanion, {
+      subject: null
+    });
+  }, [
+    invokePromise
+  ]);
+  return /* @__PURE__ */ React8.createElement("div", {
+    ref: forwardedRef,
+    className: "contents dx-app-no-drag"
+  }, /* @__PURE__ */ React8.createElement(PlankControl, {
+    label: t("close-companion.label"),
+    variant: "ghost",
+    icon: "ph--x--regular",
+    onClick: handleCloseCompanion,
+    classNames: plankControlSpacing
+  }));
+});
+var PlankControl = ({ icon, label: label3, ...props }) => {
+  return /* @__PURE__ */ React8.createElement(IconButton3, {
+    label: label3,
+    icon,
+    iconOnly: true,
+    variant: "ghost",
+    tooltipSide: "bottom",
+    ...props
+  });
+};
+var PlankControls = /* @__PURE__ */ forwardRef(({ children, classNames, variant = "default", capabilities, layoutMode, pin, close = false, onClick, ...props }, forwardedRef) => {
+  const { t } = useTranslation5(meta6.profile.key);
+  const buttonClassNames = variant === "hide-disabled" ? `disabled:hidden ${plankControlSpacing}` : plankControlSpacing;
+  const layoutIsAnySolo = !!layoutMode?.startsWith("solo");
+  return /* @__PURE__ */ React8.createElement(ButtonGroup, {
+    ...props,
+    classNames: [
+      "dx-app-no-drag opacity-100!",
+      classNames
+    ],
+    ref: forwardedRef
+  }, capabilities.deck ? /* @__PURE__ */ React8.createElement(React8.Fragment, null, capabilities.solo && /* @__PURE__ */ React8.createElement(React8.Fragment, null, layoutMode === "solo" && /* @__PURE__ */ React8.createElement(PlankControl, {
+    label: t("show-fullscreen-plank.label"),
+    classNames: buttonClassNames,
+    icon: "ph--corners-out--regular",
+    onClick: () => onClick?.("solo--fullscreen")
+  }), /* @__PURE__ */ React8.createElement(PlankControl, {
+    label: t(layoutMode === "solo--fullscreen" ? "exit-fullscreen.label" : layoutIsAnySolo ? "show-deck-plank.label" : "show-solo-plank.label"),
+    classNames: buttonClassNames,
+    icon: layoutMode === "solo--fullscreen" ? "ph--corners-in--regular" : layoutIsAnySolo ? "ph--arrows-in-line-horizontal--regular" : "ph--arrows-out-line-horizontal--regular",
+    onClick: () => onClick?.(layoutMode === "solo--fullscreen" ? "solo--fullscreen" : "solo")
+  })), !layoutIsAnySolo && layoutMode !== "multi" && /* @__PURE__ */ React8.createElement(React8.Fragment, null, /* @__PURE__ */ React8.createElement(PlankControl, {
+    label: t("increment-start.label"),
+    disabled: !capabilities.incrementStart,
+    classNames: buttonClassNames,
+    icon: "ph--caret-left--regular",
+    onClick: () => onClick?.("increment-start")
+  }), /* @__PURE__ */ React8.createElement(PlankControl, {
+    label: t("increment-end.label"),
+    disabled: !capabilities.incrementEnd,
+    classNames: buttonClassNames,
+    icon: "ph--caret-right--regular",
+    onClick: () => onClick?.("increment-end")
+  }))) : capabilities.fullscreen && /* @__PURE__ */ React8.createElement(PlankControl, {
+    label: t(layoutMode === "solo--fullscreen" ? "exit-fullscreen.label" : "show-fullscreen-plank.label"),
+    classNames: buttonClassNames,
+    icon: layoutMode === "solo--fullscreen" ? "ph--corners-in--regular" : "ph--corners-out--regular",
+    onClick: () => onClick?.("solo--fullscreen")
+  }), close && !layoutIsAnySolo && /* @__PURE__ */ React8.createElement(PlankControl, {
+    label: t(`${typeof close === "string" ? "minify" : "close"}.label`),
+    classNames: buttonClassNames,
+    "data-testid": "plankHeading.close",
+    icon: close === "minify-start" ? "ph--caret-line-left--regular" : close === "minify-end" ? "ph--caret-line-right--regular" : "ph--x--regular",
+    onClick: () => onClick?.("close")
+  }), capabilities.companion && /* @__PURE__ */ React8.createElement(ButtonGroup, null, /* @__PURE__ */ React8.createElement(PlankControl, {
+    label: t("open-companion.label"),
+    classNames: buttonClassNames,
+    "data-testid": "plankHeading.companion",
+    icon: "ph--square-split-horizontal--regular",
+    onClick: () => onClick?.("companion")
+  }), /* @__PURE__ */ React8.createElement(PlankControl, {
+    label: t("open-companion-vertical.label"),
+    classNames: buttonClassNames,
+    "data-testid": "plankHeading.companion-vertical",
+    icon: "ph--square-split-vertical--regular",
+    onClick: () => onClick?.("companion-vertical")
+  })), children);
+});
+
+// src/containers/Deck/useDeckPlank.ts
+import { useCallback as useCallback5, useEffect as useEffect4, useMemo as useMemo3 } from "react";
+import { useOperationInvoker as useOperationInvoker4 } from "@dxos/app-framework/ui";
+import { LayoutOperation as LayoutOperation4 } from "@dxos/app-toolkit";
+import { useAppGraph } from "@dxos/app-toolkit/ui";
+import { Graph, useActionRunner, useActions, useNode } from "@dxos/plugin-graph";
+import { getLinkedVariant as getLinkedVariant3, useAttention } from "@dxos/react-ui-attention";
+import { useBreakpoints as useBreakpoints4, useCompanions, useDeckState as useDeckState4, useSelectedCompanion, useSelectedCompanionVariant } from "#hooks";
+import { meta as meta7 } from "#meta";
+import { DeckOperation, PLANK_COMPANION_TYPE } from "#types";
+var PLANK_ACTION_DISPOSITIONS = [
+  "list-item",
+  "list-item-primary",
+  "heading-list-item"
+];
+var useDeckPlank = ({ id, part, layoutMode, active, companionShown, deckEnabled }) => {
+  const { graph } = useAppGraph();
+  const { invokePromise } = useOperationInvoker4();
+  const { state, deck } = useDeckState4();
+  const runAction = useActionRunner();
+  const breakpoint = useBreakpoints4();
+  const node = useNode(graph, id);
+  const actions = useActions(graph, node?.id);
+  const companions = useCompanions(id);
+  const { hasAttention } = useAttention(id);
+  const selectedVariant = useSelectedCompanionVariant();
+  const showCompanion = !!companionShown && (layoutMode !== "multi" || hasAttention);
+  const { companionId } = useSelectedCompanion(companions, showCompanion ? selectedVariant : void 0);
+  const resolvedCompanionId = showCompanion ? companionId : void 0;
+  const currentCompanion = companions.find((companion) => companion.id === resolvedCompanionId);
+  const hasCompanion = !!(resolvedCompanionId && currentCompanion);
+  const companionOrientation = deck.companionOrientation ?? "horizontal";
+  const index = active ? active.findIndex((entryId) => entryId === id) : -1;
+  const isOrdered = !!active && index >= 0;
+  const canIncrementStart = isOrdered && index > 0;
+  const canIncrementEnd = isOrdered && index < (active?.length ?? 1) - 1;
+  const isCompanionNode = node?.type === PLANK_COMPANION_TYPE;
+  const capabilities = useMemo3(() => ({
+    deck: deckEnabled ?? true,
+    solo: breakpoint !== "mobile" && (part === "solo" || part === "multi"),
+    incrementStart: canIncrementStart,
+    incrementEnd: canIncrementEnd,
+    fullscreen: !isCompanionNode,
+    // Offer to open the companion (solo, or the attended plank in multi) when one exists and isn't shown.
+    companion: !isCompanionNode && companions.length > 0 && !hasCompanion && (layoutMode !== "multi" || hasAttention)
+  }), [
+    deckEnabled,
+    breakpoint,
+    part,
+    canIncrementStart,
+    canIncrementEnd,
+    isCompanionNode,
+    layoutMode,
+    companions.length,
+    hasCompanion,
+    hasAttention
+  ]);
+  useEffect4(() => {
+    const frame = requestAnimationFrame(() => {
+      if (node) {
+        void Graph.expand(graph, node.id, "child");
+      }
+    });
+    return () => cancelAnimationFrame(frame);
+  }, [
+    graph,
+    node
+  ]);
+  const variant = isCompanionNode ? getLinkedVariant3(id) : void 0;
+  const sigilActions = useMemo3(() => {
+    if (!node) {
+      return void 0;
+    }
+    if (variant) {
+      return [];
+    }
+    return [
+      actions.filter((action) => PLANK_ACTION_DISPOSITIONS.includes(action.properties.disposition))
+    ].filter((group) => group.length > 0);
+  }, [
+    actions,
+    node,
+    variant
+  ]);
+  const onAction = useCallback5((action) => {
+    if (typeof action.data === "function") {
+      void runAction(action, {
+        parent: node,
+        caller: meta7.profile.key
+      });
+    }
+  }, [
+    node,
+    runAction
+  ]);
+  const onAdjust = useCallback5((type) => {
+    if (type === "close") {
+      if (part === "complementary") {
+        return invokePromise(LayoutOperation4.UpdateComplementary, {
+          state: "collapsed"
+        });
+      }
+      if (active) {
+        const closeIndex = active.indexOf(id);
+        const toClose = closeIndex !== -1 ? active.slice(closeIndex) : [
+          id
+        ];
+        return invokePromise(LayoutOperation4.Close, {
+          subject: toClose
+        });
+      }
+      return invokePromise(LayoutOperation4.Close, {
+        subject: [
+          id
+        ]
+      });
+    }
+    return invokePromise(DeckOperation.Adjust, {
+      type,
+      id
+    });
+  }, [
+    invokePromise,
+    part,
+    active,
+    id
+  ]);
+  const onResize = useCallback5((size) => invokePromise(DeckOperation.UpdatePlankSize, {
+    id,
+    size
+  }), [
+    invokePromise,
+    id
+  ]);
+  const onScrollIntoView = useCallback5((subject) => invokePromise(LayoutOperation4.ScrollIntoView, {
+    subject
+  }), [
+    invokePromise
+  ]);
+  const onUpdateCompanion = useCallback5((companion) => invokePromise(LayoutOperation4.UpdateCompanion, {
+    subject: companion
+  }), [
+    invokePromise
+  ]);
+  return {
+    node,
+    companions,
+    resolvedCompanionId,
+    currentCompanion,
+    hasCompanion,
+    companionOrientation,
+    capabilities,
+    sigilActions,
+    popoverAnchorId: state.popoverAnchorId,
+    scrollIntoView: state.scrollIntoView,
+    onAction,
+    onAdjust,
+    onResize,
+    onScrollIntoView,
+    onUpdateCompanion
+  };
+};
+
+// src/containers/Deck/DeckPlank.tsx
+var PLANK_LOADING = /* @__PURE__ */ React9.createElement(PlankLoading, null);
+var DeckPlank = /* @__PURE__ */ memo(({ id, part, layoutMode, active, companionShown, settings, path, classNames }) => {
+  const { findFirstFocusable } = useFocusFinders();
+  const rootRef = useRef2(null);
+  const { node, companions, resolvedCompanionId, hasCompanion, companionOrientation, capabilities, sigilActions, popoverAnchorId, scrollIntoView, onAction, onAdjust, onScrollIntoView, onUpdateCompanion } = useDeckPlank({
+    id,
+    part,
+    layoutMode,
+    active,
+    companionShown,
+    deckEnabled: settings?.enableDeck
+  });
+  const { size: companionSize, onSizeChange: onCompanionSizeChange } = useCompanionSplit(companionOrientation);
+  useEffect5(() => {
+    if (scrollIntoView === id) {
+      rootRef.current?.focus();
+      onScrollIntoView(void 0);
+    }
+  }, [
+    scrollIntoView,
+    id,
+    onScrollIntoView
+  ]);
+  const handleKeyDown = useCallback6((event) => {
+    if (event.target === event.currentTarget) {
+      switch (event.key) {
+        case "Escape":
+          event.currentTarget.closest("main")?.focus();
+          break;
+        case "Enter":
+          findFirstFocusable(event.currentTarget)?.focus();
+          break;
+      }
+    }
+  }, [
+    findFirstFocusable
+  ]);
+  const articleData = useMemo4(() => ({
+    path
+  }), [
+    path
+  ]);
+  const [companionMounted, setCompanionMounted] = useState2(hasCompanion);
+  useEffect5(() => {
+    if (hasCompanion) {
+      setCompanionMounted(true);
+      return;
+    }
+    const timer = setTimeout(() => setCompanionMounted(false), 250);
+    return () => clearTimeout(timer);
+  }, [
+    hasCompanion
+  ]);
+  const companionControls = useMemo4(() => /* @__PURE__ */ React9.createElement(PlankCompanionControls, {
+    primary: id
+  }), [
+    id
+  ]);
+  if (!node) {
+    return PLANK_LOADING;
+  }
+  const controls = /* @__PURE__ */ React9.createElement(PlankControls, {
+    capabilities,
+    layoutMode,
+    close: part === "complementary" ? "minify-end" : true,
+    onClick: onAdjust
+  });
+  const navbarEnd = part !== "complementary" ? /* @__PURE__ */ React9.createElement(Surface4.Surface, {
+    type: AppSurface4.NavbarEnd,
+    data: {
+      subject: node.data
+    }
+  }) : void 0;
+  const sigilFooter = /* @__PURE__ */ React9.createElement(Surface4.Surface, {
+    type: AppSurface4.MenuFooter,
+    data: {
+      subject: node.data
+    }
+  });
+  const headless = layoutMode === "solo--fullscreen";
+  return /* @__PURE__ */ React9.createElement(Splitter.Root, {
+    orientation: companionOrientation,
+    anchor: "end",
+    mode: hasCompanion ? "split" : "start",
+    resizable: hasCompanion,
+    size: companionSize,
+    minSize: 20,
+    onSizeChange: onCompanionSizeChange,
+    classNames
+  }, /* @__PURE__ */ React9.createElement(Splitter.Panel, {
+    position: "start"
+  }, /* @__PURE__ */ React9.createElement(Plank, {
+    ref: rootRef,
+    node,
+    attendableId: id,
+    related: part === "complementary",
+    actions: sigilActions,
+    onAction,
+    popoverAnchorId,
+    articleData,
+    controls,
+    navbarEnd,
+    sigilFooter,
+    fallback: PlankErrorFallback,
+    placeholder: PLANK_LOADING,
+    headless,
+    onKeyDown: handleKeyDown
+  })), companionMounted && /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(Splitter.Handle, null), /* @__PURE__ */ React9.createElement(Splitter.Panel, {
+    position: "end"
+  }, /* @__PURE__ */ React9.createElement(Companion, {
+    companions,
+    value: resolvedCompanionId,
+    onValueChange: onUpdateCompanion,
+    attendableId: id,
+    companionTo: node.data,
+    controls: companionControls
+  }))));
+});
+DeckPlank.displayName = "DeckPlank";
+
+// src/containers/Deck/DeckViewport.tsx
+var __dxlog_file2 = "/__w/dxos/dxos/packages/plugins/plugin-deck/src/containers/Deck/DeckViewport.tsx";
+var DECK_VIEWPORT_NAME = "DeckViewport";
+var DEFAULT_PLANK_SIZE = 50;
+var MIN_PLANK_SIZE = 20;
+var MAX_PLANK_SIZE = 120;
+var DeckViewport = ({ children }) => {
+  const { state: { sidebarState, complementarySidebarState }, settings, layoutMode } = useDeckContext(DECK_VIEWPORT_NAME);
+  const breakpoint = useBreakpoints5();
+  const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
+  return /* @__PURE__ */ React10.createElement(Main4.Content, {
+    bounce: true,
+    handlesFocus: true,
+    classNames: [
+      "grid top-[env(safe-area-inset-top)]!",
+      topbar && "top-[calc(env(safe-area-inset-top)+var(--dx-rail-size))]!"
+    ],
+    style: {
+      "--main-spacing": settings?.encapsulatedPlanks ? "0.75rem" : "0",
+      "--main-sidebar-width": sidebarState === "expanded" ? "var(--dx-nav-sidebar-size)" : sidebarState === "collapsed" ? "var(--dx-l0-size)" : "0",
+      "--main-complementary-width": complementarySidebarState === "expanded" ? "var(--dx-complementary-sidebar-size)" : complementarySidebarState === "collapsed" ? "var(--dx-rail-size)" : "0"
+    }
+  }, children);
+};
+DeckViewport.displayName = DECK_VIEWPORT_NAME;
+var DeckContentEmpty = () => {
+  const breakpoint = useBreakpoints5();
+  const { deck } = useDeckState5();
+  const layoutMode = getMode3(deck);
+  const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
+  return /* @__PURE__ */ React10.createElement("div", {
+    className: "grid place-items-center p-8 relative bg-deck-surface",
+    "data-testid": "layoutPlugin.firstRunMessage"
+  }, /* @__PURE__ */ React10.createElement(Surface5.Surface, {
+    type: Keyshortcuts
+  }), !topbar && /* @__PURE__ */ React10.createElement(ToggleSidebarButton2, null));
+};
+var DeckSoloMode = () => {
+  const { deck, settings, layoutMode, onLayoutChange } = useDeckContext("DeckSoloMode");
+  const { companionOpen, fullscreen, solo } = deck;
+  const breakpoint = useBreakpoints5();
+  const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
+  invariant(solo, void 0, { "~LogMeta": "~LogMeta", F: __dxlog_file2, L: 71, S: void 0, A: ["solo", ""] });
+  useEffect6(() => {
+    if (!fullscreen) {
+      return;
+    }
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        event.stopPropagation();
+        onLayoutChange({
+          mode: "solo--fullscreen"
+        });
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [
+    fullscreen,
+    onLayoutChange
+  ]);
+  return /* @__PURE__ */ React10.createElement("div", {
+    className: "relative overflow-hidden bg-deck-surface"
+  }, /* @__PURE__ */ React10.createElement(DeckSidebarToggles, {
+    topbar,
+    fullscreen
+  }), fullscreen && /* @__PURE__ */ React10.createElement(ExitFullscreenButton, {
+    onExit: () => onLayoutChange({
+      mode: "solo--fullscreen"
+    })
+  }), /* @__PURE__ */ React10.createElement(DeckPlank, {
+    id: solo,
+    part: "solo",
+    layoutMode,
+    companionShown: !fullscreen && companionOpen,
+    settings,
+    classNames: mx4("absolute inset-0", mainIntrinsicSize)
+  }));
+};
+var getPlankId = (id) => id;
+var DeckPlankTile = (props) => {
+  const id = props.data;
+  const { deck, settings, layoutMode } = useDeckContext("DeckPlankTile");
+  const { invokePromise } = useOperationInvoker5();
+  const handleSizeChange = useCallback7((size) => {
+    if (typeof size === "number") {
+      void invokePromise(DeckOperation2.UpdatePlankSize, {
+        id,
+        size: Math.round(size)
+      });
+    }
+  }, [
+    invokePromise,
+    id
+  ]);
+  return /* @__PURE__ */ React10.createElement(Mosaic.Tile, {
+    ...props,
+    classNames: "relative h-full",
+    size: deck.plankSizing[id] ?? DEFAULT_PLANK_SIZE,
+    minSize: MIN_PLANK_SIZE,
+    maxSize: MAX_PLANK_SIZE,
+    onSizeChange: handleSizeChange
+  }, /* @__PURE__ */ React10.createElement(DeckPlank, {
+    id,
+    part: "multi",
+    layoutMode,
+    active: deck.active,
+    companionShown: deck.companionOpen,
+    settings,
+    classNames: "size-full"
+  }), /* @__PURE__ */ React10.createElement(Mosaic.ResizeHandle, null));
+};
+var DeckMultiMode = () => {
+  const { deck, layoutMode } = useDeckContext("DeckMultiMode");
+  const { active, fullscreen } = deck;
+  const { state } = useDeckState5();
+  const { invokePromise } = useOperationInvoker5();
+  const breakpoint = useBreakpoints5();
+  const topbar = layoutAppliesTopbar(breakpoint, layoutMode);
+  const viewportRef = useRef3(null);
+  const scrollLeftRef = useRef3(null);
+  useEffect6(() => addEventListener(window, "resize", () => {
+    scrollLeftRef.current = null;
+  }), []);
+  const restoreScroll = useCallback7(() => {
+    if (viewportRef.current && scrollLeftRef.current != null) {
+      viewportRef.current.scrollLeft = scrollLeftRef.current;
+    }
+  }, []);
+  useOnTransition(layoutMode, (mode) => mode !== "multi", "multi", restoreScroll);
+  useEffect6(() => {
+    const viewport = viewportRef.current;
+    if (!viewport) {
+      return;
+    }
+    return addEventListener(viewport, "scroll", () => {
+      scrollLeftRef.current = viewport.scrollLeft;
+    });
+  }, []);
+  useEffect6(() => {
+    const id = state.scrollIntoView;
+    const viewport = viewportRef.current;
+    if (!id || !viewport) {
+      return;
+    }
+    const tile = viewport.querySelector(`[data-object-id="${CSS.escape(id)}"]`);
+    if (tile) {
+      const offset = tile.getBoundingClientRect().left - viewport.getBoundingClientRect().left + viewport.scrollLeft;
+      viewport.scrollTo({
+        left: offset,
+        behavior: "smooth"
+      });
+    }
+    void invokePromise(LayoutOperation5.ScrollIntoView, {
+      subject: void 0
+    });
+  }, [
+    state.scrollIntoView,
+    invokePromise
+  ]);
+  return /* @__PURE__ */ React10.createElement("div", {
+    className: "relative bg-deck-surface overflow-hidden"
+  }, /* @__PURE__ */ React10.createElement(DeckSidebarToggles, {
+    topbar,
+    fullscreen
+  }), /* @__PURE__ */ React10.createElement(Mosaic.Root, null, /* @__PURE__ */ React10.createElement(Mosaic.Container, {
+    orientation: "horizontal",
+    classNames: [
+      "absolute inset-0",
+      mainPaddingTransitions
+    ]
+  }, /* @__PURE__ */ React10.createElement(ScrollArea.Root, {
+    orientation: "horizontal",
+    classNames: "size-full"
+  }, /* @__PURE__ */ React10.createElement(ScrollArea.Viewport, {
+    ref: viewportRef
+  }, /* @__PURE__ */ React10.createElement(Mosaic.Stack, {
+    orientation: "horizontal",
+    classNames: "h-full gap-(--main-spacing) px-(--main-spacing)",
+    getId: getPlankId,
+    items: active,
+    Tile: DeckPlankTile,
+    draggable: false
+  }))))));
+};
+var sidebarToggleStyles = "h-(--dx-rail-item) w-(--dx-rail-item) absolute bottom-2 z-[1] bg-deck-surface! lg:hidden";
+var ToggleSidebarButton2 = () => /* @__PURE__ */ React10.createElement(ToggleSidebarButton, {
+  classNames: mx4(sidebarToggleStyles, "left-2")
+});
+var ToggleComplementarySidebarButton2 = () => /* @__PURE__ */ React10.createElement(ToggleComplementarySidebarButton, {
+  classNames: mx4(sidebarToggleStyles, "right-2")
+});
+var ExitFullscreenButton = ({ onExit }) => {
+  const { t } = useTranslation6(meta8.profile.key);
+  return /* @__PURE__ */ React10.createElement("div", {
+    className: mx4("fixed top-2 right-2 z-[1]", hoverableControls, hoverableFocusedWithinControls, "transition-opacity opacity-(--controls-opacity)")
+  }, /* @__PURE__ */ React10.createElement(IconButton4, {
+    label: t("exit-fullscreen.label"),
+    icon: "ph--corners-in--regular",
+    iconOnly: true,
+    variant: "ghost",
+    tooltipSide: "bottom",
+    onClick: onExit
+  }));
+};
+var DeckSidebarToggles = ({ topbar, fullscreen }) => {
+  if (topbar || fullscreen) {
+    return null;
+  }
+  return /* @__PURE__ */ React10.createElement(React10.Fragment, null, /* @__PURE__ */ React10.createElement(ToggleSidebarButton2, null), /* @__PURE__ */ React10.createElement(ToggleComplementarySidebarButton2, null));
+};
+
+// src/containers/Deck/Deck.tsx
+var Deck = {
+  Root: DeckRoot,
+  Content: DeckContent,
+  Viewport: DeckViewport,
+  ContentEmpty: DeckContentEmpty,
+  MultiMode: DeckMultiMode,
+  SoloMode: DeckSoloMode
+};
+
+export {
+  PlankErrorFallback,
+  ToggleSidebarButton,
+  CloseSidebarButton,
+  ToggleComplementarySidebarButton,
+  ComplementarySidebar,
+  Sidebar,
+  Deck
+};
+//# sourceMappingURL=chunk-Z2B5RSVI.mjs.map