@dxos/plugin-deck 0.6.14-main.7bd9c89 → 0.6.14-staging.934c9de

package/dist/lib/browser/index.mjs

@@ -25,10 +25,10 @@ var SURFACE_PREFIX = "surface:";
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/DeckLayout.tsx
 import { Sidebar as MenuIcon } from "@phosphor-icons/react";
-import React13, { useCallback as useCallback2, useEffect as useEffect5, useMemo as useMemo3, useRef as useRef2 } from "react";
+import { untracked } from "@preact/signals-core";
+import React13, { useCallback as useCallback2, useEffect as useEffect5, useMemo as useMemo5, useRef as useRef2 } from "react";
 import { Surface as Surface9, firstIdInPart, usePlugin } from "@dxos/app-framework";
 import { Button as Button3, Dialog, Main as Main3, Popover as Popover2, useOnTransition, useTranslation as useTranslation5 } from "@dxos/react-ui";
-import { useAttended as useAttended3 } from "@dxos/react-ui-attention";
 import { Deck } from "@dxos/react-ui-deck";
 import { getSize, mainPaddingTransitions as mainPaddingTransitions2 } from "@dxos/react-ui-theme";
 
@@ -36,6 +36,7 @@ import { getSize, mainPaddingTransitions as mainPaddingTransitions2 } from "@dxo
 import React from "react";
 import { Surface } from "@dxos/app-framework";
 import { useGraph } from "@dxos/plugin-graph";
+import { useAttended } from "@dxos/react-ui-attention";
 
 // packages/plugins/plugin-deck/src/hooks/useNode.ts
 import { useEffect, useState } from "react";
@@ -99,7 +100,8 @@ var useMainSize = () => {
 };
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/ActiveNode.tsx
-var ActiveNode = ({ id }) => {
+var ActiveNode = () => {
+  const [id] = useAttended();
   const { graph } = useGraph();
   const activeNode = useNode(graph, id);
   useNodeActionExpander(activeNode);
@@ -116,22 +118,22 @@ var ActiveNode = ({ id }) => {
 };
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/ComplementarySidebar.tsx
-import React5, { useMemo } from "react";
+import React5, { useMemo as useMemo2 } from "react";
 import { NavigationAction as NavigationAction2, SLUG_PATH_SEPARATOR as SLUG_PATH_SEPARATOR2, Surface as Surface3, useIntentDispatcher as useIntentDispatcher2 } from "@dxos/app-framework";
 import { useGraph as useGraph3 } from "@dxos/plugin-graph";
 import { Main } from "@dxos/react-ui";
-import { useAttended } from "@dxos/react-ui-attention";
+import { useAttended as useAttended2 } from "@dxos/react-ui-attention";
 import { deckGrid } from "@dxos/react-ui-deck";
 import { mx as mx2 } from "@dxos/react-ui-theme";
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/NodePlankHeading.tsx
-import React2, { Fragment, useEffect as useEffect3 } from "react";
-import { LayoutAction, NavigationAction, SLUG_PATH_SEPARATOR, Surface as Surface2, useIntentDispatcher, indexInPart, partLength } from "@dxos/app-framework";
+import React2, { Fragment, memo, useEffect as useEffect3, useMemo } from "react";
+import { LayoutAction, NavigationAction, SLUG_PATH_SEPARATOR, Surface as Surface2, useIntentDispatcher } from "@dxos/app-framework";
 import { useGraph as useGraph2 } from "@dxos/plugin-graph";
 import { Icon, Popover, toLocalizedString, useMediaQuery, useTranslation } from "@dxos/react-ui";
 import { PlankHeading } from "@dxos/react-ui-deck";
 import { TextTooltip } from "@dxos/react-ui-text-tooltip";
-var NodePlankHeading = ({ node, id, layoutParts, layoutPart, popoverAnchorId, pending, flatDeck, actions = [] }) => {
+var NodePlankHeading = /* @__PURE__ */ memo(({ coordinate, node, canIncrementStart, canIncrementEnd, popoverAnchorId, pending, flatDeck, actions = [] }) => {
   const { t } = useTranslation(DECK_PLUGIN);
   const { graph } = useGraph2();
   const icon = node?.properties?.icon ?? "ph--placeholder--regular";
@@ -152,15 +154,18 @@ var NodePlankHeading = ({ node, id, layoutParts, layoutPart, popoverAnchorId, pe
   }, [
     node
   ]);
-  const attendableId = id?.split(SLUG_PATH_SEPARATOR).at(0);
-  const layoutCoordinate = layoutPart !== void 0 && id !== void 0 ? {
-    part: layoutPart,
-    entryId: id
-  } : void 0;
-  const index = indexInPart(layoutParts, layoutCoordinate);
-  const length = partLength(layoutParts, layoutPart);
-  const canIncrementStart = layoutPart === "main" && index !== void 0 && index > 0 && length !== void 0 && length > 1;
-  const canIncrementEnd = layoutPart === "main" && index !== void 0 && index < length - 1 && length !== void 0;
+  const layoutPart = coordinate.part;
+  const attendableId = coordinate.entryId.split(SLUG_PATH_SEPARATOR).at(0);
+  const capabilities = useMemo(() => ({
+    solo: (layoutPart === "solo" || layoutPart === "main") && isNotMobile,
+    incrementStart: canIncrementStart,
+    incrementEnd: canIncrementEnd
+  }), [
+    isNotMobile,
+    layoutPart,
+    canIncrementStart,
+    canIncrementEnd
+  ]);
   return /* @__PURE__ */ React2.createElement(PlankHeading.Root, (layoutPart !== "main" || !flatDeck) && {
     classNames: "pie-1 border-b border-separator"
   }, /* @__PURE__ */ React2.createElement(ActionRoot, null, node ? /* @__PURE__ */ React2.createElement(PlankHeading.ActionsMenu, {
@@ -203,11 +208,7 @@ var NodePlankHeading = ({ node, id, layoutParts, layoutPart, popoverAnchorId, pe
       object: node.data
     }
   }), /* @__PURE__ */ React2.createElement(PlankHeading.Controls, {
-    capabilities: {
-      solo: (layoutPart === "solo" || layoutPart === "main") && isNotMobile,
-      incrementStart: canIncrementStart,
-      incrementEnd: canIncrementEnd
-    },
+    capabilities,
     isSolo: layoutPart === "solo",
     onClick: (eventType) => {
       if (!layoutPart) {
@@ -221,38 +222,45 @@ var NodePlankHeading = ({ node, id, layoutParts, layoutPart, popoverAnchorId, pe
               type: eventType,
               layoutCoordinate: {
                 part: "main",
-                entryId: id
+                entryId: coordinate.entryId
               }
             }
           }
         ]);
-      }
-      return dispatch(eventType === "close" ? layoutPart === "complementary" ? {
-        action: LayoutAction.SET_LAYOUT,
-        data: {
-          element: "complementary",
-          state: false
+      } else if (eventType === "close") {
+        if (layoutPart === "complementary") {
+          return dispatch({
+            action: LayoutAction.SET_LAYOUT,
+            data: {
+              element: "complementary",
+              state: false
+            }
+          });
+        } else {
+          return dispatch({
+            action: NavigationAction.CLOSE,
+            data: {
+              activeParts: {
+                [layoutPart]: [
+                  coordinate.entryId
+                ]
+              }
+            }
+          });
         }
-      } : {
-        action: NavigationAction.CLOSE,
-        data: {
-          activeParts: {
-            [layoutPart]: [
-              id
-            ]
+      } else {
+        return dispatch({
+          action: NavigationAction.ADJUST,
+          data: {
+            type: eventType,
+            layoutCoordinate: coordinate
           }
-        }
-      } : {
-        action: NavigationAction.ADJUST,
-        data: {
-          type: eventType,
-          layoutCoordinate
-        }
-      });
+        });
+      }
     },
     close: layoutPart === "complementary" ? "minify-end" : true
   }));
-};
+});
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/PlankError.tsx
 import React4, { useEffect as useEffect4, useState as useState2 } from "react";
@@ -288,15 +296,14 @@ var PlankContentError = ({ error }) => {
     )
   }, error ? error.toString() : t("error fallback message")));
 };
-var PlankError = ({ layoutCoordinate, id, node, error, flatDeck }) => {
+var PlankError = ({ layoutCoordinate, node, error, flatDeck }) => {
   const [timedOut, setTimedOut] = useState2(false);
   useEffect4(() => {
     setTimeout(() => setTimedOut(true), 5e3);
   }, []);
   return /* @__PURE__ */ React4.createElement(React4.Fragment, null, /* @__PURE__ */ React4.createElement(NodePlankHeading, {
+    coordinate: layoutCoordinate,
     node,
-    id,
-    layoutPart: layoutCoordinate.part,
     pending: !timedOut,
     flatDeck
   }), timedOut ? /* @__PURE__ */ React4.createElement(PlankContentError, {
@@ -333,16 +340,16 @@ var getPanel = (id) => {
   const panel = panels.find((p) => p.id === id) ?? panels[0];
   return panel.id;
 };
-var ComplementarySidebar = ({ layoutParts, flatDeck }) => {
+var ComplementarySidebar = ({ panel, flatDeck }) => {
   const { popoverAnchorId } = useLayout();
-  const attended = useAttended();
-  const part = getPanel(layoutParts.complementary?.[0].id);
+  const attended = useAttended2();
+  const part = getPanel(panel);
   const id = attended[0] ? `${attended[0]}${SLUG_PATH_SEPARATOR2}${part}` : void 0;
   const { graph } = useGraph3();
   const node = useNode(graph, id);
   const dispatch = useIntentDispatcher2();
   useNodeActionExpander(node);
-  const actions = useMemo(() => panels.map(({ id: id2, icon }) => ({
+  const actions = useMemo2(() => panels.map(({ id: id2, icon }) => ({
     id: `complementary-${id2}`,
     data: () => {
       void dispatch({
@@ -368,23 +375,29 @@ var ComplementarySidebar = ({ layoutParts, flatDeck }) => {
   })), [
     part
   ]);
+  const coordinate = useMemo2(() => ({
+    entryId: id ?? "unknown",
+    part: "complementary"
+  }), [
+    id
+  ]);
   return /* @__PURE__ */ React5.createElement(Main.ComplementarySidebar, null, /* @__PURE__ */ React5.createElement("div", {
     role: "none",
     className: mx2(deckGrid, "grid-cols-1 bs-full")
   }, /* @__PURE__ */ React5.createElement(NodePlankHeading, {
+    coordinate,
     node,
-    id,
-    layoutParts,
-    layoutPart: "complementary",
     popoverAnchorId,
     flatDeck,
     actions
   }), /* @__PURE__ */ React5.createElement("div", {
-    className: "row-span-2 divide-y divide-separator"
+    className: "row-span-2 divide-y divide-separator overflow-x-hidden overflow-y-scroll"
   }, node && /* @__PURE__ */ React5.createElement(Surface3, {
+    key: id,
     role: `complementary--${part}`,
     data: {
-      subject: node.properties.object,
+      id,
+      subject: node.properties.object ?? node.properties.space,
       popoverAnchorId
     },
     fallback: PlankContentError,
@@ -449,8 +462,8 @@ var Fullscreen = ({ id }) => {
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/Plank.tsx
 import { Plus } from "@phosphor-icons/react";
-import React9, { useCallback, useLayoutEffect, useRef } from "react";
-import { LayoutAction as LayoutAction2, NavigationAction as NavigationAction3, Surface as Surface6, useIntentDispatcher as useIntentDispatcher3 } from "@dxos/app-framework";
+import React9, { memo as memo2, useCallback, useLayoutEffect, useMemo as useMemo3, useRef } from "react";
+import { LayoutAction as LayoutAction2, NavigationAction as NavigationAction3, Surface as Surface6, useIntentDispatcher as useIntentDispatcher3, indexInPart, partLength } from "@dxos/app-framework";
 import { debounce } from "@dxos/async";
 import { useGraph as useGraph5 } from "@dxos/plugin-graph";
 import { Button, Tooltip, useTranslation as useTranslation4 } from "@dxos/react-ui";
@@ -465,7 +478,7 @@ var DeckContext = createContext2(null);
 var useDeckContext = () => useContext2(DeckContext) ?? raise2(new Error("Missing DeckContext"));
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/Plank.tsx
-var Plank = ({ entry, layoutParts, part, flatDeck, searchEnabled, layoutMode }) => {
+var Plank = /* @__PURE__ */ memo2(({ entry, layoutParts, part, flatDeck, searchEnabled, layoutMode }) => {
   const { t } = useTranslation4(DECK_PLUGIN);
   const dispatch = useIntentDispatcher3();
   const { popoverAnchorId, scrollIntoView } = useLayout();
@@ -475,10 +488,17 @@ var Plank = ({ entry, layoutParts, part, flatDeck, searchEnabled, layoutMode })
   const rootElement = useRef(null);
   const resizeable = layoutMode === "deck";
   const attendableAttrs = useAttendableAttributes(entry.id);
-  const coordinate = {
+  const coordinate = useMemo3(() => ({
     part,
     entryId: entry.id
-  };
+  }), [
+    entry.id,
+    part
+  ]);
+  const index = indexInPart(layoutParts, coordinate);
+  const length = partLength(layoutParts, part);
+  const canIncrementStart = part === "main" && index !== void 0 && index > 0 && length !== void 0 && length > 1;
+  const canIncrementEnd = part === "main" && index !== void 0 && index < length - 1 && length !== void 0;
   const size = plankSizing?.[entry.id];
   const setSize = useCallback(debounce((newSize) => {
     void dispatch({
@@ -514,6 +534,19 @@ var Plank = ({ entry, layoutParts, part, flatDeck, searchEnabled, layoutMode })
   const isSolo = layoutMode === "solo" && part === "solo";
   const isSuppressed = layoutMode === "solo" && part !== "solo" || layoutMode === "deck" && part === "solo";
   const sizeAttrs = useMainSize();
+  const data = useMemo3(() => node && {
+    ...entry.path ? {
+      subject: node.data,
+      path: entry.path
+    } : {
+      object: node.data
+    },
+    coordinate,
+    popoverAnchorId
+  }, [
+    node
+  ]);
+  const placeholder = useMemo3(() => /* @__PURE__ */ React9.createElement(PlankLoading, null), []);
   return /* @__PURE__ */ React9.createElement(NaturalPlank.Root, {
     size,
     setSize,
@@ -536,30 +569,20 @@ var Plank = ({ entry, layoutParts, part, flatDeck, searchEnabled, layoutMode })
       inlineSize: ""
     } : {}
   }, node ? /* @__PURE__ */ React9.createElement(React9.Fragment, null, /* @__PURE__ */ React9.createElement(NodePlankHeading, {
-    id: entry.id,
+    coordinate,
     node,
-    layoutPart: coordinate.part,
-    layoutParts,
+    canIncrementStart,
+    canIncrementEnd,
     popoverAnchorId,
     flatDeck
   }), /* @__PURE__ */ React9.createElement(Surface6, {
     role: "article",
-    data: {
-      ...entry.path ? {
-        subject: node.data,
-        path: entry.path
-      } : {
-        object: node.data
-      },
-      coordinate,
-      popoverAnchorId
-    },
+    data,
     limit: 1,
     fallback: PlankContentError,
-    placeholder: /* @__PURE__ */ React9.createElement(PlankLoading, null)
+    placeholder
   })) : /* @__PURE__ */ React9.createElement(PlankError, {
     layoutCoordinate: coordinate,
-    id: entry.id,
     flatDeck
   })), searchEnabled && resizeable ? /* @__PURE__ */ React9.createElement("div", {
     role: "none",
@@ -595,35 +618,31 @@ var Plank = ({ entry, layoutParts, part, flatDeck, searchEnabled, layoutMode })
   })) : resizeable ? /* @__PURE__ */ React9.createElement(NaturalPlank.ResizeHandle, {
     classNames: "row-span-3"
   }) : null);
-};
+});
 
 // packages/plugins/plugin-deck/src/components/DeckLayout/Sidebar.tsx
-import React10, { useMemo as useMemo2 } from "react";
+import React10, { useMemo as useMemo4 } from "react";
 import { openIds, Surface as Surface7 } from "@dxos/app-framework";
 import { Main as Main2 } from "@dxos/react-ui";
-import { useAttended as useAttended2 } from "@dxos/react-ui-attention";
 var Sidebar = ({ layoutParts }) => {
   const { layoutMode, popoverAnchorId } = useLayout();
-  const attended = useAttended2();
-  const activeIds = useMemo2(() => {
+  const activeIds = useMemo4(() => {
     if (layoutMode === "solo") {
-      return new Set(layoutParts?.solo?.map((e) => e.id) ?? []);
+      return Array.from(new Set(layoutParts?.solo?.map((e) => e.id) ?? []));
     } else if (layoutMode === "deck") {
-      return new Set(layoutParts?.main?.map((e) => e.id) ?? []);
+      return Array.from(new Set(layoutParts?.main?.map((e) => e.id) ?? []));
     }
-    return new Set(openIds(layoutParts));
+    return Array.from(new Set(openIds(layoutParts)));
   }, [
     layoutParts,
     layoutMode
   ]);
-  const navigationData = useMemo2(() => ({
+  const navigationData = useMemo4(() => ({
     popoverAnchorId,
-    activeIds,
-    attended
+    activeIds
   }), [
     popoverAnchorId,
-    activeIds,
-    attended
+    activeIds
   ]);
   return /* @__PURE__ */ React10.createElement(Main2.NavigationSidebar, null, /* @__PURE__ */ React10.createElement(Surface7, {
     role: "navigation",
@@ -740,14 +759,15 @@ var DeckLayout = ({ layoutParts, toasts, flatDeck, overscroll, showHints, slots,
   const { layoutMode, sidebarOpen, complementarySidebarOpen, dialogOpen, dialogContent, dialogBlockAlign, popoverOpen, popoverContent, popoverAnchorId } = context;
   const { t } = useTranslation5(DECK_PLUGIN);
   const { plankSizing } = useDeckContext();
-  const attended = useAttended3();
+  const attentionPlugin = usePlugin("dxos.org/plugin/attention");
   const searchPlugin = usePlugin("dxos.org/plugin/search");
-  const fullScreenSlug = useMemo3(() => firstIdInPart(layoutParts, "fullScreen"), [
+  const fullScreenSlug = useMemo5(() => firstIdInPart(layoutParts, "fullScreen"), [
     layoutParts
   ]);
   const scrollLeftRef = useRef2();
   const deckRef = useRef2(null);
   useEffect5(() => {
+    const attended = untracked(() => attentionPlugin?.provides.attention.attended ?? []);
     const firstId = layoutMode === "solo" ? firstIdInPart(layoutParts, "solo") : firstIdInPart(layoutParts, "main");
     if (attended.length === 0 && firstId) {
       document.querySelector(`article[data-attendable-id="${firstId}"] button`)?.focus();
@@ -775,16 +795,8 @@ var DeckLayout = ({ layoutParts, toasts, flatDeck, overscroll, showHints, slots,
   }, [
     layoutMode
   ]);
-  const firstAttendedId = attended[0];
-  useEffect5(() => {
-    if (layoutMode === "deck" && firstAttendedId) {
-    }
-  }, [
-    layoutMode,
-    firstAttendedId
-  ]);
   const isEmpty = layoutParts.main?.length === 0 && layoutParts.solo?.length === 0;
-  const padding = useMemo3(() => {
+  const padding = useMemo5(() => {
     if (layoutMode === "deck" && overscroll === "centering") {
       return calculateOverscroll(layoutParts.main, plankSizing, sidebarOpen, complementarySidebarOpen);
     }
@@ -813,9 +825,7 @@ var DeckLayout = ({ layoutParts, toasts, flatDeck, overscroll, showHints, slots,
         context.popoverAnchorId = void 0;
       }
     }
-  }, /* @__PURE__ */ React13.createElement(ActiveNode, {
-    id: firstAttendedId
-  }), /* @__PURE__ */ React13.createElement(Main3.Root, {
+  }, /* @__PURE__ */ React13.createElement(ActiveNode, null), /* @__PURE__ */ React13.createElement(Main3.Root, {
     navigationSidebarOpen: context.sidebarOpen,
     onNavigationSidebarOpenChange: (next) => context.sidebarOpen = next,
     complementarySidebarOpen: context.complementarySidebarOpen,
@@ -848,8 +858,7 @@ var DeckLayout = ({ layoutParts, toasts, flatDeck, overscroll, showHints, slots,
   })), /* @__PURE__ */ React13.createElement(Sidebar, {
     layoutParts
   }), /* @__PURE__ */ React13.createElement(ComplementarySidebar, {
-    context: "comments",
-    layoutParts,
+    panel: layoutParts.complementary?.[0].id,
     flatDeck
   }), /* @__PURE__ */ React13.createElement(Main3.Overlay, null), isEmpty && /* @__PURE__ */ React13.createElement(Main3.Content, {
     handlesFocus: true
@@ -921,8 +930,8 @@ var DeckLayout = ({ layoutParts, toasts, flatDeck, overscroll, showHints, slots,
 
 // packages/plugins/plugin-deck/src/components/LayoutSettings.tsx
 import React14 from "react";
-import { SettingsValue } from "@dxos/plugin-settings";
 import { Input, Select, useTranslation as useTranslation6 } from "@dxos/react-ui";
+import { FormInput } from "@dxos/react-ui-data";
 
 // packages/plugins/plugin-deck/src/types.ts
 var NewPlankPositions = [
@@ -938,7 +947,7 @@ var OverscrollOptions = [
 var isSocket = !!globalThis.__args;
 var LayoutSettings = ({ settings }) => {
   const { t } = useTranslation6(DECK_PLUGIN);
-  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(SettingsValue, {
+  return /* @__PURE__ */ React14.createElement(React14.Fragment, null, /* @__PURE__ */ React14.createElement(FormInput, {
     label: t("select new plank positioning label")
   }, /* @__PURE__ */ React14.createElement(Select.Root, {
     value: settings.newPlankPositioning ?? "start",
@@ -948,7 +957,7 @@ var LayoutSettings = ({ settings }) => {
   }), /* @__PURE__ */ React14.createElement(Select.Portal, null, /* @__PURE__ */ React14.createElement(Select.Content, null, /* @__PURE__ */ React14.createElement(Select.Viewport, null, NewPlankPositions.map((position) => /* @__PURE__ */ React14.createElement(Select.Option, {
     key: position,
     value: position
-  }, t(`settings new plank position ${position} label`)))))))), /* @__PURE__ */ React14.createElement(SettingsValue, {
+  }, t(`settings new plank position ${position} label`)))))))), /* @__PURE__ */ React14.createElement(FormInput, {
     label: t("settings overscroll label")
   }, /* @__PURE__ */ React14.createElement(Select.Root, {
     value: settings.overscroll ?? "none",
@@ -958,22 +967,22 @@ var LayoutSettings = ({ settings }) => {
   }), /* @__PURE__ */ React14.createElement(Select.Portal, null, /* @__PURE__ */ React14.createElement(Select.Content, null, /* @__PURE__ */ React14.createElement(Select.Viewport, null, OverscrollOptions.map((option) => /* @__PURE__ */ React14.createElement(Select.Option, {
     key: option,
     value: option
-  }, t(`settings overscroll ${option} label`)))))))), /* @__PURE__ */ React14.createElement(SettingsValue, {
+  }, t(`settings overscroll ${option} label`)))))))), /* @__PURE__ */ React14.createElement(FormInput, {
     label: t("settings show hints label")
   }, /* @__PURE__ */ React14.createElement(Input.Switch, {
     checked: settings.showHints,
     onCheckedChange: (checked) => settings.showHints = checked
-  })), !isSocket && /* @__PURE__ */ React14.createElement(SettingsValue, {
+  })), !isSocket && /* @__PURE__ */ React14.createElement(FormInput, {
     label: t("settings native redirect label")
   }, /* @__PURE__ */ React14.createElement(Input.Switch, {
     checked: settings.enableNativeRedirect,
     onCheckedChange: (checked) => settings.enableNativeRedirect = checked
-  })), /* @__PURE__ */ React14.createElement(SettingsValue, {
+  })), /* @__PURE__ */ React14.createElement(FormInput, {
     label: t("settings custom slots")
   }, /* @__PURE__ */ React14.createElement(Input.Switch, {
     checked: settings.customSlots,
     onCheckedChange: (checked) => settings.customSlots = checked
-  })), /* @__PURE__ */ React14.createElement(SettingsValue, {
+  })), /* @__PURE__ */ React14.createElement(FormInput, {
     label: t("settings flat deck")
   }, /* @__PURE__ */ React14.createElement(Input.Switch, {
     checked: settings.flatDeck,
@@ -1306,29 +1315,23 @@ var DeckPlugin = ({ observability } = {}) => {
       clientPlugin = resolvePlugin(plugins, parseClientPlugin);
       layout.prop({
         key: "layoutMode",
-        storageKey: "layout-mode",
         type: LocalStorageStore.enum()
       }).prop({
         key: "sidebarOpen",
-        storageKey: "sidebar-open",
         type: LocalStorageStore.bool()
       }).prop({
         key: "complementarySidebarOpen",
-        storageKey: "complementary-sidebar-open",
         type: LocalStorageStore.bool()
       });
       deck.prop({
         key: "plankSizing",
-        storageKey: "plank-sizing",
         type: LocalStorageStore.json()
       });
       location.prop({
         key: "active",
-        storageKey: "active",
         type: LocalStorageStore.json()
       }).prop({
         key: "closed",
-        storageKey: "closed",
         type: LocalStorageStore.json()
       });
       unsubscriptionCallbacks.push(clientPlugin?.provides.client.shell.onReset(() => {
@@ -1338,31 +1341,24 @@ var DeckPlugin = ({ observability } = {}) => {
       }));
       settings.prop({
         key: "showHints",
-        storageKey: "show-hints",
         type: LocalStorageStore.bool()
       }).prop({
         key: "customSlots",
-        storageKey: "customSlots",
         type: LocalStorageStore.bool()
       }).prop({
         key: "flatDeck",
-        storageKey: "flatDeck",
         type: LocalStorageStore.bool()
       }).prop({
         key: "enableNativeRedirect",
-        storageKey: "enable-native-redirect",
         type: LocalStorageStore.bool()
       }).prop({
         key: "disableDeck",
-        storageKey: "disable-deck",
         type: LocalStorageStore.bool()
       }).prop({
         key: "newPlankPositioning",
-        storageKey: "newPlankPositioning",
         type: LocalStorageStore.enum()
       }).prop({
         key: "overscroll",
-        storageKey: "overscroll",
         type: LocalStorageStore.enum()
       });
       if (!isSocket2 && settings.values.enableNativeRedirect) {
@@ -1511,7 +1507,7 @@ var DeckPlugin = ({ observability } = {}) => {
                 } else {
                   log.warn("Invalid layout mode", intent?.data?.layoutMode, {
                     F: __dxlog_file,
-                    L: 404,
+                    L: 392,
                     S: void 0,
                     C: (f, a) => f(...a)
                   });