@dxos/app-framework 0.3.10-main.cbe7692 → 0.3.10-main.d280bad

package/dist/types/src/plugins/components/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/plugins/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC;AAChC,cAAc,mBAAmB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/plugins/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,kBAAkB,CAAC;AACjC,cAAc,kBAAkB,CAAC;AACjC,cAAc,iBAAiB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/app-framework",
-  "version": "0.3.10-main.cbe7692",
+  "version": "0.3.10-main.d280bad",
   "description": "A framework for building applications from composible plugins.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -16,26 +16,26 @@
     "@preact/signals-react": "^1.3.6",
     "deepsignal": "1.4.0-shallow.0",
     "zod": "^3.22.4",
-    "@dxos/app-graph": "0.3.10-main.cbe7692",
-    "@dxos/invariant": "0.3.10-main.cbe7692",
-    "@dxos/async": "0.3.10-main.cbe7692",
-    "@dxos/keyboard": "0.3.10-main.cbe7692",
-    "@dxos/debug": "0.3.10-main.cbe7692",
-    "@dxos/local-storage": "0.3.10-main.cbe7692",
-    "@dxos/log": "0.3.10-main.cbe7692",
-    "@dxos/react-ui-searchlist": "0.3.10-main.cbe7692"
+    "@dxos/app-graph": "0.3.10-main.d280bad",
+    "@dxos/async": "0.3.10-main.d280bad",
+    "@dxos/debug": "0.3.10-main.d280bad",
+    "@dxos/invariant": "0.3.10-main.d280bad",
+    "@dxos/keyboard": "0.3.10-main.d280bad",
+    "@dxos/local-storage": "0.3.10-main.d280bad",
+    "@dxos/log": "0.3.10-main.d280bad",
+    "@dxos/react-ui-searchlist": "0.3.10-main.d280bad"
   },
   "devDependencies": {
     "@types/react": "^18.0.21",
     "react": "^18.2.0",
-    "@dxos/react-ui": "0.3.10-main.cbe7692",
-    "@dxos/react-ui-theme": "0.3.10-main.cbe7692",
-    "@dxos/storybook-utils": "0.3.10-main.cbe7692"
+    "@dxos/react-ui": "0.3.10-main.d280bad",
+    "@dxos/react-ui-theme": "0.3.10-main.d280bad",
+    "@dxos/storybook-utils": "0.3.10-main.d280bad"
   },
   "peerDependencies": {
     "react": "*",
-    "@dxos/react-ui-theme": "0.3.10-main.cbe7692",
-    "@dxos/react-ui": "0.3.10-main.cbe7692"
+    "@dxos/react-ui-theme": "0.3.10-main.d280bad",
+    "@dxos/react-ui": "0.3.10-main.d280bad"
   },
   "publishConfig": {
     "access": "public"

package/src/plugins/components/CommandsDialog.tsx

@@ -16,7 +16,7 @@ export const CommandsDialogContent = ({ graph }: { graph?: Graph }) => {
 
   // TODO(burdon): Factor out.
   // TODO(burdon): How to access all translations across plugins?
-  const getLabel = (label: Label) => (Array.isArray(label) ? t(...label) : label);
+  const toString = (label: Label) => (Array.isArray(label) ? t(...label) : label);
 
   // Traverse graph.
   // TODO(burdon): Factor out commonality with shortcut dialog.
@@ -38,6 +38,10 @@ export const CommandsDialogContent = ({ graph }: { graph?: Graph }) => {
       },
     });
 
+    actions.sort(({ label: a }, { label: b }) => {
+      return toString(a)?.toLowerCase().localeCompare(toString(b)?.toLowerCase());
+    });
+
     // console.log(JSON.stringify(actions, undefined, 2));
     return actions;
   }, [graph]);
@@ -51,10 +55,10 @@ export const CommandsDialogContent = ({ graph }: { graph?: Graph }) => {
 
       {/* TODO(burdon): BUG: Overscrolls container. */}
       <SearchList.Root label={t('commandlist input placeholder')} classNames='flex flex-col grow overflow-hidden my-2'>
-        <SearchList.Input placeholder={t('commandlist input placeholder')} classNames={mx('px-3 my-2')} />
+        <SearchList.Input placeholder={t('commandlist input placeholder')} classNames={mx('px-1 my-2')} />
         <SearchList.Content classNames={['max-bs-[30rem] overflow-auto']}>
           {actions?.map((action) => {
-            const label = getLabel(action.label);
+            const label = toString(action.label);
             const Icon = action.icon ?? DotOutline;
             return (
               <SearchList.Item
@@ -71,7 +75,7 @@ export const CommandsDialogContent = ({ graph }: { graph?: Graph }) => {
                     void action.invoke();
                   });
                 }}
-                classNames='flex items-center gap-2 pli-2'
+                classNames='flex items-center gap-2'
                 disabled={action.properties.disabled}
                 {...(action.properties?.testId && { 'data-testid': action.properties.testId })}
               >
@@ -85,6 +89,7 @@ export const CommandsDialogContent = ({ graph }: { graph?: Graph }) => {
           })}
         </SearchList.Content>
       </SearchList.Root>
+
       <Dialog.Close asChild>
         <Button ref={buttonRef} variant='primary' classNames='mbs-2'>
           {t('close label', { ns: 'os' })}

package/src/plugins/components/SettingsDialog.tsx

@@ -31,13 +31,12 @@ export const SettingsDialogContent = () => {
     .map((plugin) => plugin!.meta)
     .sort(({ name: a }, { name: b }) => a?.localeCompare(b ?? '') ?? 0);
 
-  // TODO(burdon): Vertical layout if mobile (pattern).
-  // TODO(burdon): BUG: Dialogs do not compress if screen height is shrunk.
+  // TODO(burdon): Common treatment for dialogs (e.g., shrink height to fit, mobile, etc.)
   return (
-    <Dialog.Content classNames={['md:max-is-[40rem] overflow-hidden']}>
+    <Dialog.Content classNames={['h-full md:max-is-[40rem] overflow-hidden']}>
       <Dialog.Title>{t('settings dialog title', { ns: 'os' })}</Dialog.Title>
 
-      <div className='flex grow mlb-4 overflow-hidden max-bs-[40rem]'>
+      <div className='flex grow mlb-4 overflow-hidden'>
         <div className={mx('flex flex-col w-[200px] space-y-4 pr-4 border-r overflow-y-auto', groupBorder)}>
           <PluginList
             title='Options'
@@ -60,7 +59,7 @@ export const SettingsDialogContent = () => {
       </div>
 
       <Dialog.Close asChild>
-        <Button variant='primary' classNames='mbs-2'>
+        <Button variant='primary' classNames='mbs-2' autoFocus>
           {t('done label', { ns: 'os' })}
         </Button>
       </Dialog.Close>

package/src/plugins/components/index.ts

@@ -5,4 +5,3 @@
 export * from './CommandsDialog';
 export * from './SettingsDialog';
 export * from './SettingsValue';
-export * from './ShortcutsDialog';

package/dist/types/src/plugins/components/ShortcutsDialog.d.ts

@@ -1,2 +0,0 @@
-export declare const ShortcutsDialogContent: () => JSX.Element;
-//# sourceMappingURL=ShortcutsDialog.d.ts.map

package/dist/types/src/plugins/components/ShortcutsDialog.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ShortcutsDialog.d.ts","sourceRoot":"","sources":["../../../../../src/plugins/components/ShortcutsDialog.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,sBAAsB,mBA+ClC,CAAC"}

package/src/plugins/components/ShortcutsDialog.tsx

@@ -1,59 +0,0 @@
-//
-// Copyright 2023 DXOS.org
-//
-
-import React from 'react';
-
-import { type Label } from '@dxos/app-graph';
-import { Keyboard, keySymbols } from '@dxos/keyboard';
-import { Button, Dialog, useTranslation } from '@dxos/react-ui';
-import { mx } from '@dxos/react-ui-theme';
-
-export const ShortcutsDialogContent = () => {
-  const { t } = useTranslation('os');
-
-  const bindings = Keyboard.singleton.getBindings();
-
-  // TODO(burdon): Factor out.
-  // TODO(burdon): How to access all translations across plugins?
-  const getLabel = (label: Label) => (Array.isArray(label) ? t(...label) : label);
-
-  return (
-    <Dialog.Content classNames={['md:max-is-[30rem] overflow-hidden']}>
-      <Dialog.Title>{t('shortcuts dialog title', { ns: 'os' })}</Dialog.Title>
-
-      <table className='table-fixed border-collapse my-4'>
-        <tbody>
-          {bindings.map((binding, i) => (
-            <tr key={i}>
-              <td className='p-1 w-[120px]'>
-                <div className='flex gap-1'>
-                  {keySymbols(binding.binding).map((c, i) => (
-                    <span
-                      key={i}
-                      className={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}
-                    </span>
-                  ))}
-                </div>
-              </td>
-              <td className='p-1'>
-                <span className='grow truncate'>{getLabel(binding.data as Label)}</span>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-
-      <Dialog.Close asChild>
-        <Button variant='primary' classNames='mbs-2'>
-          {t('close label', { ns: 'os' })}
-        </Button>
-      </Dialog.Close>
-    </Dialog.Content>
-  );
-};