@dxos/app-framework 0.3.10-main.90b298e → 0.3.10-main.c5193cc

package/dist/lib/node/index.cjs

@@ -28,6 +28,7 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var node_exports = {};
 __export(node_exports, {
+  CommandsDialogContent: () => CommandsDialogContent,
   ErrorBoundary: () => ErrorBoundary,
   IntentProvider: () => import_chunk_BOQBLWMX.IntentProvider,
   Layout: () => Layout,
@@ -38,6 +39,9 @@ __export(node_exports, {
   Resource: () => Resource,
   ResourceKey: () => ResourceKey,
   ResourceLanguage: () => ResourceLanguage,
+  SettingsDialogContent: () => SettingsDialogContent,
+  SettingsValue: () => SettingsValue,
+  ShortcutsDialogContent: () => ShortcutsDialogContent,
   Surface: () => Surface,
   SurfaceProvider: () => import_chunk_DC3GU6QR.SurfaceProvider,
   createApp: () => createApp,
@@ -71,15 +75,30 @@ var import_chunk_BOQBLWMX = require("./chunk-BOQBLWMX.cjs");
 var import_chunk_VDKZ7AAF = require("./chunk-VDKZ7AAF.cjs");
 var import_zod = require("zod");
 var import_zod2 = require("zod");
-var import_react = require("react");
-var import_react2 = require("deepsignal/react");
+var import_react = require("@phosphor-icons/react");
+var import_react2 = __toESM(require("react"));
+var import_keyboard = require("@dxos/keyboard");
+var import_react_ui = require("@dxos/react-ui");
+var import_react_ui_searchlist = require("@dxos/react-ui-searchlist");
+var import_react_ui_theme = require("@dxos/react-ui-theme");
 var import_react3 = __toESM(require("react"));
+var import_react_ui2 = require("@dxos/react-ui");
+var import_react_ui_theme2 = require("@dxos/react-ui-theme");
+var import_react4 = require("react");
+var import_react5 = require("deepsignal/react");
+var import_react6 = __toESM(require("react"));
 var import_local_storage = require("@dxos/local-storage");
 var import_log = require("@dxos/log");
-var import_react4 = __toESM(require("react"));
-var import_react5 = __toESM(require("react"));
-var import_react6 = require("react");
 var import_react7 = __toESM(require("react"));
+var import_react8 = __toESM(require("react"));
+var import_react9 = require("react");
+var import_react10 = __toESM(require("react"));
+var import_react_ui3 = require("@dxos/react-ui");
+var import_react11 = __toESM(require("react"));
+var import_keyboard2 = require("@dxos/keyboard");
+var import_react_ui4 = require("@dxos/react-ui");
+var import_react_ui_theme3 = require("@dxos/react-ui-theme");
+var import_react12 = __toESM(require("react"));
 var import_invariant = require("@dxos/invariant");
 var parseGraphPlugin = (plugin) => plugin.provides.graph?.root ? plugin : void 0;
 var parseGraphBuilderPlugin = (plugin) => plugin.provides.graph?.builder ? plugin : void 0;
@@ -87,11 +106,12 @@ var Layout = import_zod.z.object({
   fullscreen: import_zod.z.boolean(),
   sidebarOpen: import_zod.z.boolean(),
   complementarySidebarOpen: import_zod.z.boolean(),
-  dialogContent: import_zod.z.any().optional().describe("Data to be passed to the dialog Surface."),
+  // TODO(burdon): Why do we have a single root?
   dialogOpen: import_zod.z.boolean(),
-  popoverAnchorId: import_zod.z.string().optional(),
-  popoverContent: import_zod.z.any().optional().describe("Data to be passed to the popover Surface."),
+  dialogContent: import_zod.z.any().optional().describe("Data to be passed to the dialog Surface."),
   popoverOpen: import_zod.z.boolean(),
+  popoverContent: import_zod.z.any().optional().describe("Data to be passed to the popover Surface."),
+  popoverAnchorId: import_zod.z.string().optional(),
   // TODO(wittjosiah): Array?
   active: import_zod.z.string().optional().describe("Id of the currently active item."),
   // TODO(wittjosiah): History?
@@ -112,6 +132,12 @@ var LayoutAction;
   LayoutAction2[LayoutAction2["OPEN_POPOVER"] = `${LAYOUT_ACTION}/open-popover`] = "OPEN_POPOVER";
   LayoutAction2[LayoutAction2["CLOSE_POPOVER"] = `${LAYOUT_ACTION}/close-popover`] = "CLOSE_POPOVER";
   LayoutAction2[LayoutAction2["ACTIVATE"] = `${LAYOUT_ACTION}/activate`] = "ACTIVATE";
+  LayoutAction2[LayoutAction2[
+    // TODO(burdon): Move to new plugin.
+    "OPEN_COMMANDS"
+  ] = `${LAYOUT_ACTION}/open-commands`] = "OPEN_COMMANDS";
+  LayoutAction2[LayoutAction2["OPEN_SETTINGS"] = `${LAYOUT_ACTION}/open-settings`] = "OPEN_SETTINGS";
+  LayoutAction2[LayoutAction2["OPEN_SHORTCUTS"] = `${LAYOUT_ACTION}/open-shortcuts`] = "OPEN_SHORTCUTS";
 })(LayoutAction || (LayoutAction = {}));
 var parseMetadataRecordsPlugin = (plugin) => {
   return plugin.provides.metadata?.records ? plugin : void 0;
@@ -129,6 +155,86 @@ var parseTranslationsPlugin = (plugin) => {
   const { success } = import_zod2.z.array(Resource).safeParse(plugin.provides.translations);
   return success ? plugin : void 0;
 };
+var CommandsDialogContent = ({ graph }) => {
+  const { t } = (0, import_react_ui.useTranslation)("os");
+  const toString = (label) => Array.isArray(label) ? t(...label) : label;
+  const actions = (0, import_react2.useMemo)(() => {
+    const current = import_keyboard.Keyboard.singleton.getCurrentContext();
+    const actionMap = /* @__PURE__ */ new Set();
+    const actions2 = [];
+    graph?.traverse({
+      visitor: (node, path) => {
+        if (current.startsWith(path.join("/"))) {
+          node.actions.forEach((action) => {
+            if (!actionMap.has(action.id)) {
+              actionMap.add(action.id);
+              actions2.push(action);
+            }
+          });
+        }
+      }
+    });
+    actions2.sort(({ label: a }, { label: b }) => {
+      return toString(a)?.toLowerCase().localeCompare(toString(b)?.toLowerCase());
+    });
+    return actions2;
+  }, [
+    graph
+  ]);
+  const buttonRef = (0, import_react2.useRef)(null);
+  return /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Dialog.Content, {
+    classNames: [
+      "md:max-is-[30rem] overflow-hidden"
+    ]
+  }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Dialog.Title, null, t("commands dialog title", {
+    ns: "os"
+  })), /* @__PURE__ */ import_react2.default.createElement(import_react_ui_searchlist.SearchList.Root, {
+    label: t("commandlist input placeholder"),
+    classNames: "flex flex-col grow overflow-hidden my-2"
+  }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui_searchlist.SearchList.Input, {
+    placeholder: t("commandlist input placeholder"),
+    classNames: (0, import_react_ui_theme.mx)("px-1 my-2")
+  }), /* @__PURE__ */ import_react2.default.createElement(import_react_ui_searchlist.SearchList.Content, {
+    classNames: [
+      "max-bs-[30rem] overflow-auto"
+    ]
+  }, actions?.map((action) => {
+    const label = toString(action.label);
+    const Icon = action.icon ?? import_react.DotOutline;
+    return /* @__PURE__ */ import_react2.default.createElement(import_react_ui_searchlist.SearchList.Item, {
+      value: label,
+      key: action.id,
+      onSelect: () => {
+        if (action.properties.disabled) {
+          return;
+        }
+        buttonRef.current?.click();
+        setTimeout(() => {
+          void action.invoke();
+        });
+      },
+      classNames: "flex items-center gap-2",
+      disabled: action.properties.disabled,
+      ...action.properties?.testId && {
+        "data-testid": action.properties.testId
+      }
+    }, /* @__PURE__ */ import_react2.default.createElement(Icon, {
+      className: (0, import_react_ui_theme.mx)((0, import_react_ui_theme.getSize)(4), "shrink-0", !action.icon && "invisible")
+    }), /* @__PURE__ */ import_react2.default.createElement("span", {
+      className: "grow truncate"
+    }, label), action.keyBinding && /* @__PURE__ */ import_react2.default.createElement("span", {
+      className: (0, import_react_ui_theme.mx)("shrink-0", import_react_ui_theme.descriptionText)
+    }, (0, import_keyboard.keySymbols)(action.keyBinding).join("")));
+  }))), /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Dialog.Close, {
+    asChild: true
+  }, /* @__PURE__ */ import_react2.default.createElement(import_react_ui.Button, {
+    ref: buttonRef,
+    variant: "primary",
+    classNames: "mbs-2"
+  }, t("close label", {
+    ns: "os"
+  }))));
+};
 var pluginMeta = (meta) => meta;
 var Plugin;
 (function(Plugin2) {
@@ -138,17 +244,15 @@ var Plugin;
     });
   };
 })(Plugin || (Plugin = {}));
-var PluginContext = /* @__PURE__ */ (0, import_react.createContext)({
+var PluginContext = /* @__PURE__ */ (0, import_react4.createContext)({
   ready: false,
   enabled: [],
   plugins: [],
   available: [],
-  enablePlugin: () => {
-  },
-  disablePlugin: () => {
+  setPlugin: () => {
   }
 });
-var usePlugins = () => (0, import_react.useContext)(PluginContext);
+var usePlugins = () => (0, import_react4.useContext)(PluginContext);
 var usePlugin = (id) => {
   const { plugins } = usePlugins();
   return (0, import_chunk_VDKZ7AAF.findPlugin)(plugins, id);
@@ -169,14 +273,15 @@ var PluginHost = ({ order, plugins: definitions, core = [], defaults = [], fallb
     ],
     plugins: [],
     available: order.filter(({ id }) => !core.includes(id)),
-    enablePlugin: (id) => {
-      state.values.enabled = [
-        ...state.values.enabled,
-        id
-      ];
-    },
-    disablePlugin: (id) => {
-      state.values.enabled = state.values.enabled.filter((enabled) => enabled !== id);
+    setPlugin: (id, enabled) => {
+      if (enabled) {
+        state.values.enabled = [
+          ...state.values.enabled,
+          id
+        ];
+      } else {
+        state.values.enabled = state.values.enabled.filter((enabled2) => enabled2 !== id);
+      }
     }
   });
   state.prop(state.values.$enabled, "enabled", import_local_storage.LocalStorageStore.json);
@@ -187,16 +292,16 @@ var PluginHost = ({ order, plugins: definitions, core = [], defaults = [], fallb
     },
     provides: {
       plugins: state.values,
-      context: ({ children }) => /* @__PURE__ */ import_react3.default.createElement(PluginProvider, {
+      context: ({ children }) => /* @__PURE__ */ import_react6.default.createElement(PluginProvider, {
         value: state.values
       }, children),
       root: () => {
-        (0, import_react3.useEffect)(() => {
+        (0, import_react6.useEffect)(() => {
           (0, import_log.log)("initializing plugins", {
             enabled: state.values.enabled
           }, {
             F: __dxlog_file,
-            L: 66,
+            L: 67,
             S: void 0,
             C: (f, a) => f(...a)
           });
@@ -221,7 +326,7 @@ var PluginHost = ({ order, plugins: definitions, core = [], defaults = [], fallb
               plugins
             }, {
               F: __dxlog_file,
-              L: 91,
+              L: 92,
               S: void 0,
               C: (f, a) => f(...a)
             });
@@ -232,11 +337,11 @@ var PluginHost = ({ order, plugins: definitions, core = [], defaults = [], fallb
               plugins
             }, {
               F: __dxlog_file,
-              L: 98,
+              L: 99,
               S: void 0,
               C: (f, a) => f(...a)
             });
-            state.values.plugins = (0, import_react2.shallow)(plugins);
+            state.values.plugins = (0, import_react5.shallow)(plugins);
             state.values.ready = true;
           });
           return () => {
@@ -245,10 +350,10 @@ var PluginHost = ({ order, plugins: definitions, core = [], defaults = [], fallb
           };
         }, []);
         if (!state.values.ready) {
-          return /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, fallback);
+          return /* @__PURE__ */ import_react6.default.createElement(import_react6.default.Fragment, null, fallback);
         }
         const ComposedContext = composeContext(state.values.plugins);
-        return /* @__PURE__ */ import_react3.default.createElement(ComposedContext, null, rootComponents(state.values.plugins));
+        return /* @__PURE__ */ import_react6.default.createElement(ComposedContext, null, rootComponents(state.values.plugins));
       }
     }
   };
@@ -267,7 +372,7 @@ var rootComponents = (plugins) => {
   return plugins.map((plugin) => {
     const Component2 = plugin.provides.root;
     if (Component2) {
-      return /* @__PURE__ */ import_react3.default.createElement(Component2, {
+      return /* @__PURE__ */ import_react6.default.createElement(Component2, {
         key: plugin.meta.id
       });
     } else {
@@ -281,10 +386,10 @@ var composeContext = (plugins) => {
 var compose = (contexts) => {
   return [
     ...contexts
-  ].reduce((Acc, Next) => ({ children }) => /* @__PURE__ */ import_react3.default.createElement(Acc, null, /* @__PURE__ */ import_react3.default.createElement(Next, null, children)));
+  ].reduce((Acc, Next) => ({ children }) => /* @__PURE__ */ import_react6.default.createElement(Acc, null, /* @__PURE__ */ import_react6.default.createElement(Next, null, children)));
 };
 var isObject = (data) => !!data && typeof data === "object";
-var ErrorBoundary = class extends import_react4.Component {
+var ErrorBoundary = class extends import_react7.Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -303,7 +408,7 @@ var ErrorBoundary = class extends import_react4.Component {
   }
   render() {
     if (this.state.error) {
-      return /* @__PURE__ */ import_react4.default.createElement(this.props.fallback, {
+      return /* @__PURE__ */ import_react7.default.createElement(this.props.fallback, {
         error: this.state.error,
         reset: this.resetError
       });
@@ -316,30 +421,30 @@ var ErrorBoundary = class extends import_react4.Component {
     });
   }
 };
-var Surface = /* @__PURE__ */ (0, import_react5.forwardRef)(({ role, name = role, fallback, ...rest }, forwardedRef) => {
+var Surface = /* @__PURE__ */ (0, import_react8.forwardRef)(({ role, name = role, fallback, ...rest }, forwardedRef) => {
   const props = {
     role,
     name,
     fallback,
     ...rest
   };
-  const context = (0, import_react6.useContext)(SurfaceContext);
+  const context = (0, import_react9.useContext)(SurfaceContext);
   const data = props.data ?? (name && context?.surfaces?.[name]?.data || {});
-  return /* @__PURE__ */ import_react5.default.createElement(import_react5.default.Fragment, null, fallback ? /* @__PURE__ */ import_react5.default.createElement(ErrorBoundary, {
+  return /* @__PURE__ */ import_react8.default.createElement(import_react8.default.Fragment, null, fallback ? /* @__PURE__ */ import_react8.default.createElement(ErrorBoundary, {
     data,
     fallback
-  }, /* @__PURE__ */ import_react5.default.createElement(SurfaceResolver, {
+  }, /* @__PURE__ */ import_react8.default.createElement(SurfaceResolver, {
     ...props,
     ref: forwardedRef
-  })) : /* @__PURE__ */ import_react5.default.createElement(SurfaceResolver, {
+  })) : /* @__PURE__ */ import_react8.default.createElement(SurfaceResolver, {
     ...props,
     ref: forwardedRef
   }));
 });
-var SurfaceContext = /* @__PURE__ */ (0, import_react6.createContext)(null);
-var SurfaceResolver = /* @__PURE__ */ (0, import_react5.forwardRef)((props, forwardedRef) => {
+var SurfaceContext = /* @__PURE__ */ (0, import_react9.createContext)(null);
+var SurfaceResolver = /* @__PURE__ */ (0, import_react8.forwardRef)((props, forwardedRef) => {
   const { components } = (0, import_chunk_DC3GU6QR.useSurface)();
-  const parent = (0, import_react6.useContext)(SurfaceContext);
+  const parent = (0, import_react9.useContext)(SurfaceContext);
   const nodes = resolveNodes(components, props, parent, forwardedRef);
   const currentContext = {
     ...props,
@@ -348,9 +453,9 @@ var SurfaceResolver = /* @__PURE__ */ (0, import_react5.forwardRef)((props, forw
       ...props.surfaces
     }
   };
-  return /* @__PURE__ */ import_react5.default.createElement(SurfaceContext.Provider, {
+  return /* @__PURE__ */ import_react8.default.createElement(SurfaceContext.Provider, {
     value: currentContext
-  }, nodes.length > 0 ? nodes : props.contentFallback ? /* @__PURE__ */ import_react5.default.createElement(props.contentFallback, null) : null);
+  }, nodes.length > 0 ? nodes : props.contentFallback ? /* @__PURE__ */ import_react8.default.createElement(props.contentFallback, null) : null);
 });
 var resolveNodes = (components, props, context, forwardedRef) => {
   const data = {
@@ -368,7 +473,7 @@ var resolveNodes = (components, props, context, forwardedRef) => {
     return "node" in result ? [
       key,
       result
-    ] : /* @__PURE__ */ (0, import_react5.isValidElement)(result) ? [
+    ] : /* @__PURE__ */ (0, import_react8.isValidElement)(result) ? [
       key,
       {
         node: result
@@ -385,11 +490,138 @@ var resolveNodes = (components, props, context, forwardedRef) => {
       return 1;
     }
     return 0;
-  }).map(([key, result]) => /* @__PURE__ */ import_react5.default.createElement(import_react5.Fragment, {
+  }).map(([key, result]) => /* @__PURE__ */ import_react8.default.createElement(import_react8.Fragment, {
     key
   }, result.node));
   return props.limit ? nodes.slice(0, props.limit) : nodes;
 };
+var SettingsDialogContent = () => {
+  const { t } = (0, import_react_ui2.useTranslation)("os");
+  const [plugin, setPlugin] = (0, import_react3.useState)("dxos.org/plugin/registry");
+  const { plugins, enabled } = usePlugins();
+  const core = [
+    "dxos.org/plugin/layout",
+    "dxos.org/plugin/client",
+    "dxos.org/plugin/space",
+    "dxos.org/plugin/registry"
+  ];
+  const filteredPlugins = enabled.map((id) => plugins.find((plugin2) => plugin2.meta.id === id)).filter((plugin2) => plugin2?.provides?.settings).map((plugin2) => plugin2.meta).sort(({ name: a }, { name: b }) => a?.localeCompare(b ?? "") ?? 0);
+  return /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Dialog.Content, {
+    classNames: [
+      "h-full md:max-is-[40rem] overflow-hidden"
+    ]
+  }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Dialog.Title, null, t("settings dialog title", {
+    ns: "os"
+  })), /* @__PURE__ */ import_react3.default.createElement("div", {
+    className: "flex grow mlb-4 overflow-hidden"
+  }, /* @__PURE__ */ import_react3.default.createElement("div", {
+    className: (0, import_react_ui_theme2.mx)("flex flex-col w-[200px] space-y-4 pr-4 border-r overflow-y-auto", import_react_ui_theme2.groupBorder)
+  }, /* @__PURE__ */ import_react3.default.createElement(PluginList, {
+    title: "Options",
+    plugins: core.map((id) => plugins.find((p) => p.meta.id === id).meta),
+    selected: plugin,
+    onSelect: (plugin2) => setPlugin(plugin2)
+  }), /* @__PURE__ */ import_react3.default.createElement(PluginList, {
+    title: "Plugins",
+    plugins: filteredPlugins,
+    selected: plugin,
+    onSelect: (plugin2) => setPlugin(plugin2)
+  })), /* @__PURE__ */ import_react3.default.createElement("div", {
+    className: (0, import_react_ui_theme2.mx)("flex flex-col w-full md:px-4 divide-y overflow-y-auto", import_react_ui_theme2.groupBorder)
+  }, /* @__PURE__ */ import_react3.default.createElement(Surface, {
+    role: "settings",
+    data: {
+      plugin
+    }
+  }))), /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Dialog.Close, {
+    asChild: true
+  }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.Button, {
+    variant: "primary",
+    classNames: "mbs-2",
+    autoFocus: true
+  }, t("done label", {
+    ns: "os"
+  }))));
+};
+var PluginList = ({ title, plugins, selected, onSelect }) => {
+  return /* @__PURE__ */ import_react3.default.createElement("div", {
+    role: "none"
+  }, /* @__PURE__ */ import_react3.default.createElement("h2", {
+    className: "my-1 px-2 text-sm text-neutral-500"
+  }, title), /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.List, {
+    selectable: true
+  }, plugins.map((plugin) => /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.ListItem.Root, {
+    key: plugin.id,
+    onClick: () => onSelect(plugin.id),
+    selected: plugin.id === selected,
+    classNames: [
+      "px-2 rounded",
+      plugin.id === selected && import_react_ui_theme2.ghostSelected,
+      import_react_ui_theme2.ghostHover
+    ]
+  }, /* @__PURE__ */ import_react3.default.createElement(import_react_ui2.ListItem.Heading, {
+    classNames: [
+      "flex w-full items-center cursor-pointer"
+    ]
+  }, plugin.name)))));
+};
+var SettingsValue = ({ label, description, children }) => {
+  return /* @__PURE__ */ import_react10.default.createElement("div", {
+    role: "none",
+    className: "flex w-full gap-4 py-1"
+  }, /* @__PURE__ */ import_react10.default.createElement(import_react_ui3.Input.Root, null, /* @__PURE__ */ import_react10.default.createElement("div", {
+    role: "none",
+    className: "flex flex-col w-full"
+  }, /* @__PURE__ */ import_react10.default.createElement(import_react_ui3.Input.Label, {
+    classNames: "flex min-h-[40px] items-center"
+  }, label), description && /* @__PURE__ */ import_react10.default.createElement(import_react_ui3.Input.DescriptionAndValidation, {
+    classNames: "mbs-0.5"
+  }, /* @__PURE__ */ import_react10.default.createElement(import_react_ui3.Input.Description, null, description))), /* @__PURE__ */ import_react10.default.createElement("div", {
+    role: "none"
+  }, /* @__PURE__ */ import_react10.default.createElement("div", {
+    role: "none",
+    className: "flex min-h-[40px] items-center"
+  }, children))));
+};
+var ShortcutsDialogContent = () => {
+  const { t } = (0, import_react_ui4.useTranslation)("os");
+  const toString = (label) => Array.isArray(label) ? t(...label) : label;
+  const bindings = import_keyboard2.Keyboard.singleton.getBindings();
+  bindings.sort((a, b) => {
+    return toString(a.data)?.toLowerCase().localeCompare(toString(b.data)?.toLowerCase());
+  });
+  return /* @__PURE__ */ import_react11.default.createElement(import_react_ui4.Dialog.Content, {
+    classNames: [
+      "max-bs-[40rem] md:max-is-[30rem] overflow-hidden"
+    ]
+  }, /* @__PURE__ */ import_react11.default.createElement(import_react_ui4.Dialog.Title, null, t("shortcuts dialog title", {
+    ns: "os"
+  })), /* @__PURE__ */ import_react11.default.createElement("div", {
+    className: "grow overflow-y-auto py-2"
+  }, /* @__PURE__ */ import_react11.default.createElement("table", {
+    className: "table-fixed border-collapse my-4"
+  }, /* @__PURE__ */ import_react11.default.createElement("tbody", null, bindings.map((binding, i) => /* @__PURE__ */ import_react11.default.createElement("tr", {
+    key: i
+  }, /* @__PURE__ */ import_react11.default.createElement("td", {
+    className: "p-1 w-[120px]"
+  }, /* @__PURE__ */ import_react11.default.createElement("div", {
+    className: "flex gap-1"
+  }, (0, import_keyboard2.keySymbols)(binding.binding).map((c, i2) => /* @__PURE__ */ import_react11.default.createElement("span", {
+    key: i2,
+    className: (0, import_react_ui_theme3.mx)("inline-flex w-[24px] h-[24px] justify-center items-center text-xs", "rounded border border-neutral-300 dark:border-neutral-600 bg-neutral-50 dark:bg-neutral-850")
+  }, c)))), /* @__PURE__ */ import_react11.default.createElement("td", {
+    className: "p-1"
+  }, /* @__PURE__ */ import_react11.default.createElement("span", {
+    className: "grow truncate"
+  }, toString(binding.data)))))))), /* @__PURE__ */ import_react11.default.createElement(import_react_ui4.Dialog.Close, {
+    asChild: true
+  }, /* @__PURE__ */ import_react11.default.createElement(import_react_ui4.Button, {
+    variant: "primary",
+    classNames: "mbs-2"
+  }, t("close label", {
+    ns: "os"
+  }))));
+};
 var __dxlog_file2 = "/home/runner/work/dxos/dxos/packages/sdk/app-framework/src/App.tsx";
 var createApp = ({ order, plugins, core = order.map(({ id }) => id), ...params }) => {
   const host = PluginHost({
@@ -430,10 +662,11 @@ var createApp = ({ order, plugins, core = order.map(({ id }) => id), ...params }
   });
   const Context = host.provides.context;
   const Root = host.provides.root;
-  return () => /* @__PURE__ */ import_react7.default.createElement(Context, null, /* @__PURE__ */ import_react7.default.createElement(Root, null));
+  return () => /* @__PURE__ */ import_react12.default.createElement(Context, null, /* @__PURE__ */ import_react12.default.createElement(Root, null));
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  CommandsDialogContent,
   ErrorBoundary,
   IntentProvider,
   Layout,
@@ -444,6 +677,9 @@ var createApp = ({ order, plugins, core = order.map(({ id }) => id), ...params }
   Resource,
   ResourceKey,
   ResourceLanguage,
+  SettingsDialogContent,
+  SettingsValue,
+  ShortcutsDialogContent,
   Surface,
   SurfaceProvider,
   createApp,