@dxos/plugin-status-bar 0.7.4 → 0.7.5-labs.071a3e2

package/dist/types/src/StatusBarPlugin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBarPlugin.d.ts","sourceRoot":"","sources":["../../../src/StatusBarPlugin.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,KAAK,gBAAgB,EAAE,KAAK,eAAe,EAAE,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAM7G,MAAM,MAAM,uBAAuB,GAAG,eAAe,GAAG,oBAAoB,CAAC;AAE7E,eAAO,MAAM,eAAe,QAAO,gBAAgB,CAAC,uBAAuB,CAkB1E,CAAC"}
+{"version":3,"file":"StatusBarPlugin.d.ts","sourceRoot":"","sources":["../../../src/StatusBarPlugin.tsx"],"names":[],"mappings":"AAqBA,eAAO,MAAM,eAAe,4CAkCxB,CAAC"}

package/dist/types/src/components/FeedbackForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FeedbackForm.d.ts","sourceRoot":"","sources":["../../../../src/components/FeedbackForm.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAsB,MAAM,OAAO,CAAC;AA+B3C,eAAO,MAAM,YAAY,gBAAiB;IAAE,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,sBAwFhE,CAAC"}
+{"version":3,"file":"FeedbackForm.d.ts","sourceRoot":"","sources":["../../../../src/components/FeedbackForm.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAsB,MAAM,OAAO,CAAC;AAa3C,eAAO,MAAM,YAAY,gBAAiB;IAAE,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,sBAwFhE,CAAC"}

package/dist/types/src/components/StatusBar.d.ts

@@ -1,40 +1,26 @@
-import React, { type ReactNode } from 'react';
-declare const StatusBarButton: React.ForwardRefExoticComponent<Omit<{
-    children: ReactNode;
+import React, { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type ThemedClassName } from '@dxos/react-ui';
+type StatusBarButtonProps = ThemedClassName<ComponentPropsWithRef<'button'> & {
     asChild?: boolean;
-}, "className"> & {
-    classNames?: import("@dxos/react-ui").ClassNameValue;
-} & React.HTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+}>;
+declare const StatusBarButton: React.ForwardRefExoticComponent<Omit<StatusBarButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export default StatusBarButton;
+type StatusBarItemProps = ThemedClassName<ComponentPropsWithRef<'div'>>;
 export declare const StatusBar: {
-    Container: React.ForwardRefExoticComponent<Omit<{
-        children: ReactNode;
-    }, "className"> & {
-        classNames?: import("@dxos/react-ui").ClassNameValue;
-    } & React.RefAttributes<HTMLDivElement>>;
     Text: React.ForwardRefExoticComponent<Omit<{
         children: ReactNode;
     }, "className"> & {
         classNames?: import("@dxos/react-ui").ClassNameValue;
     } & React.RefAttributes<HTMLSpanElement>>;
-    Item: React.ForwardRefExoticComponent<Omit<{
-        children: ReactNode;
-    }, "className"> & {
-        classNames?: import("@dxos/react-ui").ClassNameValue;
-    } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-    Button: React.ForwardRefExoticComponent<Omit<{
-        children: ReactNode;
-        asChild?: boolean;
-    }, "className"> & {
-        classNames?: import("@dxos/react-ui").ClassNameValue;
-    } & React.HTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+    Item: React.ForwardRefExoticComponent<Omit<StatusBarItemProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    Button: React.ForwardRefExoticComponent<Omit<StatusBarButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
     StartContent: React.ForwardRefExoticComponent<Omit<{
-        children: ReactNode;
+        children?: ReactNode | undefined;
     }, "className"> & {
         classNames?: import("@dxos/react-ui").ClassNameValue;
     } & React.RefAttributes<HTMLDivElement>>;
     EndContent: React.ForwardRefExoticComponent<Omit<{
-        children: ReactNode;
+        children?: ReactNode | undefined;
     }, "className"> & {
         classNames?: import("@dxos/react-ui").ClassNameValue;
     } & React.RefAttributes<HTMLDivElement>>;

package/dist/types/src/components/StatusBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBar.d.ts","sourceRoot":"","sources":["../../../../src/components/StatusBar.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,EAAmC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAgB/E,QAAA,MAAM,eAAe;cAHmC,SAAS;cAAY,OAAO;;;qFAsBnF,CAAC;AAEF,eAAe,eAAe,CAAC;AAwD/B,eAAO,MAAM,SAAS;;kBAvCqC,SAAS;;;;;kBAjDd,SAAS;;;;;kBAkCT,SAAS;;;;;kBA1BP,SAAS;kBAAY,OAAO;;;;;kBAgE/B,SAAS;;;;;kBAQX,SAAS;;;;CAe3D,CAAC"}
+{"version":3,"file":"StatusBar.d.ts","sourceRoot":"","sources":["../../../../src/components/StatusBar.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,EAAE,KAAK,qBAAqB,EAAsC,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9G,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAWtD,KAAK,oBAAoB,GAAG,eAAe,CAAC,qBAAqB,CAAC,QAAQ,CAAC,GAAG;IAAE,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC,CAAC;AAErG,QAAA,MAAM,eAAe,6GAmBpB,CAAC;AAEF,eAAe,eAAe,CAAC;AAE/B,KAAK,kBAAkB,GAAG,eAAe,CAAC,qBAAqB,CAAC,KAAK,CAAC,CAAC,CAAC;AA+BxE,eAAO,MAAM,SAAS;;kBAhEgC,SAAS;;;;;;;;;;;;;;;;CAsE9D,CAAC"}

package/dist/types/src/components/StatusBarPanel.d.ts

@@ -1,3 +1,4 @@
 import React from 'react';
+export declare const StatusBarActions: () => React.JSX.Element;
 export declare const StatusBarPanel: () => React.JSX.Element;
 //# sourceMappingURL=StatusBarPanel.d.ts.map

package/dist/types/src/components/StatusBarPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StatusBarPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/StatusBarPanel.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAQxC,eAAO,MAAM,cAAc,yBA8B1B,CAAC"}
+{"version":3,"file":"StatusBarPanel.d.ts","sourceRoot":"","sources":["../../../../src/components/StatusBarPanel.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAUxC,eAAO,MAAM,gBAAgB,yBA2B5B,CAAC;AAEF,eAAO,MAAM,cAAc,yBAQ1B,CAAC"}

package/dist/types/src/components/VersionNumber.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const VersionNumber: () => React.JSX.Element;
+//# sourceMappingURL=VersionNumber.d.ts.map

package/dist/types/src/components/VersionNumber.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VersionNumber.d.ts","sourceRoot":"","sources":["../../../../src/components/VersionNumber.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,eAAO,MAAM,aAAa,yBAoEzB,CAAC"}

package/dist/types/src/index.d.ts

@@ -1,5 +1,4 @@
-import { StatusBarPlugin } from './StatusBarPlugin';
-export default StatusBarPlugin;
-export * from './StatusBarPlugin';
 export * from './components';
+export * from './meta';
+export * from './StatusBarPlugin';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAEpD,eAAe,eAAe,CAAC;AAE/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,mBAAmB,CAAC"}

package/dist/types/src/meta.d.ts

@@ -1,9 +1,8 @@
 export declare const STATUS_BAR_PLUGIN = "dxos.org/plugin/status-bar";
-declare const _default: {
+export declare const meta: {
     id: string;
     name: string;
     description: string;
     icon: string;
 };
-export default _default;
 //# sourceMappingURL=meta.d.ts.map

package/dist/types/src/meta.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/meta.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,iBAAiB,+BAA+B,CAAC;;;;;;;AAE9D,wBAKuB"}
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/meta.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,iBAAiB,+BAA+B,CAAC;AAE9D,eAAO,MAAM,IAAI;;;;;CAKK,CAAC"}

package/dist/types/src/translations.d.ts

@@ -1,6 +1,6 @@
 import { type useTranslation } from '@dxos/react-ui';
 import { STATUS_BAR_PLUGIN } from './meta';
-type StatusBarTranslationKeys = 'plugin name' | 'email input label' | 'email input placeholder' | 'feedback text area label' | 'feedback text area placeholder' | 'send feedback label' | 'name label' | 'name placeholder';
+type StatusBarTranslationKeys = 'plugin name' | 'email input label' | 'email input placeholder' | 'feedback text area label' | 'feedback text area placeholder' | 'send feedback label' | 'name label' | 'name placeholder' | 'warning title' | 'technology preview message' | 'learn more label' | 'released message' | 'see release label' | 'powered by dxos message' | 'discord label' | 'feedback label';
 type RequiredTranslation = {
     [key in StatusBarTranslationKeys]: string;
 };

package/dist/types/src/translations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAE3C,KAAK,wBAAwB,GACzB,aAAa,GACb,mBAAmB,GACnB,yBAAyB,GACzB,0BAA0B,GAC1B,gCAAgC,GAChC,qBAAqB,GACrB,YAAY,GACZ,kBAAkB,CAAC;AAEvB,KAAK,mBAAmB,GAAG;KAAG,GAAG,IAAI,wBAAwB,GAAG,MAAM;CAAE,CAAC;AACzE,KAAK,gBAAgB,GAAG;IAAE,CAAC,iBAAiB,CAAC,EAAE,mBAAmB,CAAA;CAAE,CAAC;AAKrE,eAAO,MAAM,aAAa,MAAO,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,GAAG,CAAC,WAAW,wBAAwB,WAAW,CAAC;;AAetH,wBAA8B"}
+{"version":3,"file":"translations.d.ts","sourceRoot":"","sources":["../../../src/translations.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAErD,OAAO,EAAE,iBAAiB,EAAE,MAAM,QAAQ,CAAC;AAE3C,KAAK,wBAAwB,GACzB,aAAa,GACb,mBAAmB,GACnB,yBAAyB,GACzB,0BAA0B,GAC1B,gCAAgC,GAChC,qBAAqB,GACrB,YAAY,GACZ,kBAAkB,GAClB,eAAe,GACf,4BAA4B,GAC5B,kBAAkB,GAClB,kBAAkB,GAClB,mBAAmB,GACnB,yBAAyB,GACzB,eAAe,GACf,gBAAgB,CAAC;AAErB,KAAK,mBAAmB,GAAG;KAAG,GAAG,IAAI,wBAAwB,GAAG,MAAM;CAAE,CAAC;AACzE,KAAK,gBAAgB,GAAG;IAAE,CAAC,iBAAiB,CAAC,EAAE,mBAAmB,CAAA;CAAE,CAAC;AAKrE,eAAO,MAAM,aAAa,MAAO,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,GAAG,CAAC,WAAW,wBAAwB,WAAW,CAAC;;AAuBtH,wBAA8B"}

package/dist/types/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"version":"5.7.3"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-status-bar",
-  "version": "0.7.4",
+  "version": "0.7.5-labs.071a3e2",
   "description": "Status bar plugin",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -12,20 +12,11 @@
       "types": "./dist/types/src/index.d.ts",
       "browser": "./dist/lib/browser/index.mjs",
       "node": "./dist/lib/node-esm/index.mjs"
-    },
-    "./meta": {
-      "types": "./dist/types/src/meta.d.ts",
-      "browser": "./dist/lib/browser/meta.mjs",
-      "node": "./dist/lib/node-esm/meta.mjs"
     }
   },
   "types": "dist/types/src/index.d.ts",
   "typesVersions": {
-    "*": {
-      "meta": [
-        "dist/types/src/meta.d.ts"
-      ]
-    }
+    "*": {}
   },
   "files": [
     "dist",
@@ -33,16 +24,19 @@
   ],
   "dependencies": {
     "@effect/schema": "^0.75.5",
-    "@fluentui/react-tabster": "^9.19.0",
+    "@fluentui/react-tabster": "9.23.3",
     "@preact/signals-core": "^1.6.0",
-    "@radix-ui/react-slot": "^1.0.1",
-    "effect": "^3.9.2",
+    "@radix-ui/react-slot": "1.1.2",
+    "date-fns": "^3.3.1",
+    "effect": "^3.12.3",
     "react-resize-detector": "^11.0.1",
-    "@dxos/app-framework": "0.7.4",
-    "@dxos/async": "0.7.4",
-    "@dxos/echo-schema": "0.7.4",
-    "@dxos/react-ui-form": "0.7.4",
-    "@dxos/schema": "0.7.4"
+    "@dxos/app-framework": "0.7.5-labs.071a3e2",
+    "@dxos/echo-schema": "0.7.5-labs.071a3e2",
+    "@dxos/plugin-observability": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-form": "0.7.5-labs.071a3e2",
+    "@dxos/react-client": "0.7.5-labs.071a3e2",
+    "@dxos/async": "0.7.5-labs.071a3e2",
+    "@dxos/schema": "0.7.5-labs.071a3e2"
   },
   "devDependencies": {
     "@phosphor-icons/react": "^2.1.5",
@@ -51,16 +45,16 @@
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
     "vite": "5.4.7",
-    "@dxos/react-ui": "0.7.4",
-    "@dxos/react-ui-theme": "0.7.4",
-    "@dxos/storybook-utils": "0.7.4"
+    "@dxos/react-ui": "0.7.5-labs.071a3e2",
+    "@dxos/storybook-utils": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-theme": "0.7.5-labs.071a3e2"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",
     "react": "~18.2.0",
     "react-dom": "~18.2.0",
-    "@dxos/react-ui-theme": "0.7.4",
-    "@dxos/react-ui": "0.7.4"
+    "@dxos/react-ui": "0.7.5-labs.071a3e2",
+    "@dxos/react-ui-theme": "0.7.5-labs.071a3e2"
   },
   "publishConfig": {
     "access": "public"

package/src/StatusBarPlugin.tsx

@@ -4,30 +4,53 @@
 
 import React from 'react';
 
-import { type PluginDefinition, type SurfaceProvides, type TranslationsProvides } from '@dxos/app-framework';
+import {
+  Capabilities,
+  contributes,
+  createSurface,
+  defineModule,
+  definePlugin,
+  Events,
+  Surface,
+} from '@dxos/app-framework';
 
-import { StatusBarPanel } from './components';
-import meta from './meta';
+import { StatusBarActions, StatusBarPanel } from './components';
+import { VersionNumber } from './components/VersionNumber';
+import { meta, STATUS_BAR_PLUGIN } from './meta';
 import translations from './translations';
 
-export type StatusBarPluginProvides = SurfaceProvides & TranslationsProvides;
-
-export const StatusBarPlugin = (): PluginDefinition<StatusBarPluginProvides> => {
-  return {
-    meta,
-    provides: {
-      translations,
-      surface: {
-        component: ({ role }) => {
-          switch (role) {
-            case 'status-bar': {
-              return <StatusBarPanel />;
-            }
-          }
-
-          return null;
-        },
-      },
-    },
-  };
-};
+export const StatusBarPlugin = () =>
+  definePlugin(meta, [
+    defineModule({
+      id: `${meta.id}/module/translations`,
+      activatesOn: Events.SetupTranslations,
+      activate: () => contributes(Capabilities.Translations, translations),
+    }),
+    defineModule({
+      id: `${meta.id}/module/react-surface`,
+      activatesOn: Events.SetupSurfaces,
+      activate: () =>
+        contributes(Capabilities.ReactSurface, [
+          createSurface({
+            id: meta.id,
+            role: 'status-bar',
+            component: () => <StatusBarPanel />,
+          }),
+          createSurface({
+            id: meta.id,
+            role: 'status-bar--r0-footer',
+            component: () => <Surface role='status' />,
+          }),
+          createSurface({
+            id: meta.id,
+            role: 'status-bar--r1-footer',
+            component: () => <StatusBarActions />,
+          }),
+          createSurface({
+            id: `${STATUS_BAR_PLUGIN}/header-end`,
+            role: 'header-end',
+            component: () => <VersionNumber />,
+          }),
+        ]),
+    }),
+  ]);

package/src/components/FeedbackForm.tsx

@@ -2,11 +2,11 @@
 // Copyright 2024 DXOS.org
 //
 
-import { Schema as S } from '@effect/schema';
 import { PaperPlaneTilt, X } from '@phosphor-icons/react';
 import React, { useCallback } from 'react';
 
-import { useIntentDispatcher } from '@dxos/app-framework';
+import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
+import { ObservabilityAction, UserFeedback } from '@dxos/plugin-observability/types';
 import { Button, Input, Popover, useTranslation } from '@dxos/react-ui';
 import { useForm } from '@dxos/react-ui-form';
 import { getSize } from '@dxos/react-ui-theme';
@@ -14,43 +14,24 @@ import { getSize } from '@dxos/react-ui-theme';
 import { STATUS_BAR_PLUGIN } from '../meta';
 import { mkTranslation } from '../translations';
 
-const Email = S.String.pipe(
-  S.nonEmptyString({ message: () => 'Email is required.' }),
-  S.pattern(/^(?!\.)(?!.*\.\.)([A-Z0-9_+-.]*)[A-Z0-9_+-]@([A-Z0-9][A-Z0-9-]*\.)+[A-Z]{2,}$/i, {
-    message: () => 'Invalid email address.',
-  }),
-);
-
-const nonEmpty = (field: string) => S.nonEmptyString({ message: () => `${field} is required.` });
-const maxLength = (field: string, length: number) => S.maxLength(length, { message: () => `${field} is too long.` });
-
-// Types and validation.
-const FeedbackFormSchema = S.Struct({
-  name: S.String.pipe(nonEmpty('Name'), maxLength('Name', 256)),
-  email: Email.pipe(maxLength('Email', 256)),
-  message: S.String.pipe(nonEmpty('Feedback'), maxLength('Feedback', 32_768)),
-});
-
-type FeedbackFormType = S.Schema.Type<typeof FeedbackFormSchema>;
-
-const initialValues: FeedbackFormType = { name: '', email: '', message: '' };
+const initialValues: UserFeedback = { name: '', email: '', message: '' };
 
 export const FeedbackForm = ({ onClose }: { onClose: () => void }) => {
   const { t } = useTranslation(STATUS_BAR_PLUGIN);
   const translation = mkTranslation(t);
-  const dispatch = useIntentDispatcher();
+  const { dispatchPromise: dispatch } = useIntentDispatcher();
 
   const onSave = useCallback(
-    (values: FeedbackFormType) => {
-      void dispatch({ action: 'dxos.org/plugin/observability/capture-feedback', data: values });
+    (values: UserFeedback) => {
+      void dispatch(createIntent(ObservabilityAction.CaptureUserFeedback, values));
       onClose();
     },
     [dispatch, onClose],
   );
 
-  const { handleSave, canSave, getStatus, ...inputProps } = useForm<FeedbackFormType>({
+  const { handleSave, canSave, getStatus, ...inputProps } = useForm<UserFeedback>({
     initialValues,
-    schema: FeedbackFormSchema,
+    schema: UserFeedback,
     onSave,
   });
 

package/src/components/StatusBar.stories.tsx

@@ -13,7 +13,7 @@ import { withTheme } from '@dxos/storybook-utils';
 import { StatusBar } from './StatusBar';
 
 export const DefaultStory = () => (
-  <StatusBar.Container>
+  <div>
     <StatusBar.EndContent>
       <StatusBar.Button>
         <Icon icon='ph--mailbox--regular' size={4} />
@@ -30,7 +30,7 @@ export const DefaultStory = () => (
         <StatusBar.Text>Online</StatusBar.Text>
       </StatusBar.Item>
     </StatusBar.EndContent>
-  </StatusBar.Container>
+  </div>
 );
 
 export const Default = {};

package/src/components/StatusBar.tsx

@@ -2,9 +2,8 @@
 // Copyright 2024 DXOS.org
 //
 
-import { useFocusableGroup } from '@fluentui/react-tabster';
 import { Slot } from '@radix-ui/react-slot';
-import React, { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import React, { type ComponentPropsWithRef, forwardRef, type PropsWithChildren, type ReactNode } from 'react';
 
 import { type ThemedClassName } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
@@ -17,14 +16,13 @@ const StatusBarText = forwardRef<HTMLSpanElement, StatusBarTextProps>(({ classNa
   </span>
 ));
 
-type StatusBarButtonProps = ThemedClassName<{ children: ReactNode; asChild?: boolean }> &
-  HTMLAttributes<HTMLButtonElement>;
+type StatusBarButtonProps = ThemedClassName<ComponentPropsWithRef<'button'> & { asChild?: boolean }>;
 
 const StatusBarButton = forwardRef<HTMLButtonElement, StatusBarButtonProps>(
   ({ classNames, children, asChild, ...props }, forwardedRef) => {
     const classes = mx(
-      'flex items-center gap-2 p-1 px-2 rounded-sm',
-      'select-none cursor-pointer ch-focus-ring',
+      'flex items-center justify-center gap-2 p-1 px-2 rounded-sm',
+      'select-none cursor-pointer dx-focus-ring text-description text-xs',
       'hover:bg-neutral-75 active:bg-neutral-150 dark:hover:bg-neutral-750 dark:active:bg-neutral-700',
       classNames,
     );
@@ -43,13 +41,13 @@ const StatusBarButton = forwardRef<HTMLButtonElement, StatusBarButtonProps>(
 
 export default StatusBarButton;
 
-type StatusBarItemProps = ThemedClassName<{ children: ReactNode }> & HTMLAttributes<HTMLDivElement>;
+type StatusBarItemProps = ThemedClassName<ComponentPropsWithRef<'div'>>;
 
 const StatusBarItem = forwardRef<HTMLDivElement, StatusBarItemProps>(
   ({ classNames, children, ...props }, forwardedRef) => (
     <div
       role='menuitem'
-      className={mx('flex items-center gap-2 p-1 px-2 rounded-sm select-none', classNames)}
+      className={mx('flex items-center justify-center gap-2 p-1 px-2 rounded-sm select-none', classNames)}
       ref={forwardedRef}
       {...props}
     >
@@ -58,30 +56,7 @@ const StatusBarItem = forwardRef<HTMLDivElement, StatusBarItemProps>(
   ),
 );
 
-type StatusBarContainerProps = ThemedClassName<{ children: ReactNode }>;
-
-// TODO(zan): tabable group with tabster.
-const StatusBarContainer = forwardRef<HTMLDivElement, StatusBarContainerProps>(
-  ({ classNames, children }, forwardedRef) => {
-    const groupAttrs = useFocusableGroup({ tabBehavior: 'limited' });
-    return (
-      <div
-        role='menubar'
-        tabIndex={0}
-        {...groupAttrs}
-        className={mx(
-          'bs-[--statusbar-size] flex justify-end items-center gap-2 bg-base text-description text-lg pointer-fine:text-xs ch-focus-ring-inset',
-          classNames,
-        )}
-        ref={forwardedRef}
-      >
-        {children}
-      </div>
-    );
-  },
-);
-
-type StartContentProps = ThemedClassName<{ children: ReactNode }>;
+type StartContentProps = ThemedClassName<PropsWithChildren<{}>>;
 
 const StartContent = forwardRef<HTMLDivElement, StartContentProps>(({ classNames, children }, forwardedRef) => (
   <div role='none' className={mx('flex-grow flex items-center space-x-2', classNames)} ref={forwardedRef}>
@@ -89,7 +64,7 @@ const StartContent = forwardRef<HTMLDivElement, StartContentProps>(({ classNames
   </div>
 ));
 
-type EndContentProps = ThemedClassName<{ children: ReactNode }>;
+type EndContentProps = ThemedClassName<PropsWithChildren<{}>>;
 
 const EndContent = forwardRef<HTMLDivElement, EndContentProps>(({ classNames, children }, forwardedRef) => (
   <div role='none' className={mx('flex-grow flex items-center justify-end', classNames)} ref={forwardedRef}>
@@ -98,7 +73,6 @@ const EndContent = forwardRef<HTMLDivElement, EndContentProps>(({ classNames, ch
 ));
 
 export const StatusBar = {
-  Container: StatusBarContainer,
   Text: StatusBarText,
   Item: StatusBarItem,
   Button: StatusBarButton,

package/src/components/StatusBarPanel.tsx

@@ -5,39 +5,48 @@
 import React, { useState } from 'react';
 
 import { Surface } from '@dxos/app-framework';
-import { Icon, Popover } from '@dxos/react-ui';
+import { Icon, Popover, useTranslation } from '@dxos/react-ui';
 
 import { FeedbackForm } from './FeedbackForm';
 import { StatusBar } from './StatusBar';
+import { VersionNumber } from './VersionNumber';
+import { STATUS_BAR_PLUGIN } from '../meta';
 
-export const StatusBarPanel = () => {
+export const StatusBarActions = () => {
+  const { t } = useTranslation(STATUS_BAR_PLUGIN);
   const [open, setOpen] = useState(false);
-
-  // TODO(wittjosiah): Factor out feedback and discord buttons.
   return (
     <Popover.Root open={open} onOpenChange={setOpen}>
-      <StatusBar.Container>
-        <StatusBar.EndContent>
-          <Surface role='status' />
-          <Popover.Trigger asChild>
-            <StatusBar.Button aria-label='Give feedback about composer' data-joyride='welcome/feedback'>
-              <Icon icon='ph--paper-plane-tilt--regular' size={4} />
-              <StatusBar.Text classNames='hidden sm:block'>Feedback</StatusBar.Text>
-            </StatusBar.Button>
-          </Popover.Trigger>
-          {/* TODO(zan): Configure this label? */}
-          <StatusBar.Button aria-label='Open DXOS Discord' asChild>
-            <a href='https://dxos.org/discord' target='_blank' rel='noopener noreferrer'>
-              <Icon icon='ph--discord-logo--regular' size={4} />
-              <StatusBar.Text classNames='hidden sm:block'>Discord</StatusBar.Text>
-            </a>
-          </StatusBar.Button>
-        </StatusBar.EndContent>
-      </StatusBar.Container>
-      <Popover.Content classNames='shadow-lg'>
-        <FeedbackForm onClose={() => setOpen(false)} />
-        <Popover.Arrow />
-      </Popover.Content>
+      <Popover.Trigger asChild>
+        <StatusBar.Button data-joyride='welcome/feedback'>
+          <Icon icon='ph--paper-plane-tilt--regular' size={4} />
+          <StatusBar.Text classNames='hidden sm:block'>{t('feedback label')}</StatusBar.Text>
+        </StatusBar.Button>
+      </Popover.Trigger>
+      {/* TODO(zan): Configure this label? */}
+      <StatusBar.Button asChild>
+        <a href='https://dxos.org/discord' target='_blank' rel='noopener noreferrer'>
+          <Icon icon='ph--discord-logo--regular' size={4} />
+          <StatusBar.Text classNames='hidden sm:block'>{t('discord label')}</StatusBar.Text>
+        </a>
+      </StatusBar.Button>
+      <VersionNumber />
+      <Popover.Portal>
+        <Popover.Content classNames='shadow-lg'>
+          <FeedbackForm onClose={() => setOpen(false)} />
+          <Popover.Arrow />
+        </Popover.Content>
+      </Popover.Portal>
     </Popover.Root>
   );
 };
+
+export const StatusBarPanel = () => {
+  return (
+    <>
+      <StatusBarActions />
+      <span role='separator' className='grow' />
+      <Surface role='status' />
+    </>
+  );
+};

package/src/components/VersionNumber.tsx

@@ -0,0 +1,86 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { formatDistance } from 'date-fns/formatDistance';
+import React from 'react';
+
+import { useConfig } from '@dxos/react-client';
+import { Link, Message, Popover, Trans, useTranslation, Icon } from '@dxos/react-ui';
+
+import { StatusBar } from './StatusBar';
+import { STATUS_BAR_PLUGIN } from '../meta';
+
+const repo = 'https://github.com/dxos/dxos';
+
+const VERSION_REGEX = /([\d.]+)/;
+
+export const VersionNumber = () => {
+  const config = useConfig();
+  const { t } = useTranslation(STATUS_BAR_PLUGIN);
+  const { version, timestamp, commitHash } = config.values.runtime?.app?.build ?? {};
+  const [_, v] = version?.match(VERSION_REGEX) ?? [];
+
+  const releaseUrl =
+    config.values.runtime?.app?.env?.DX_ENVIRONMENT === 'production'
+      ? `${repo}/releases/tag/v${version}`
+      : `${repo}/commit/${commitHash}`;
+
+  const previewUrl = 'https://docs.dxos.org/composer#technology-preview';
+
+  return (
+    <Popover.Root>
+      <Popover.Trigger asChild>
+        <StatusBar.Button classNames='text-xs'>v{v}</StatusBar.Button>
+      </Popover.Trigger>
+      <Popover.Portal>
+        <Popover.Content
+          side='top'
+          role='message'
+          classNames='z-[12] bg-warning-500 max-is-[min(calc(100vw-16px),40ch)]'
+        >
+          <Message.Root valence='warning' className='rounded-be-none p-5'>
+            <Message.Title>
+              <Icon icon='ph--warning--duotone' size={6} classNames='inline mie-2' />
+              <span>{t('warning title')}</span>
+            </Message.Title>
+            <Message.Body>
+              {t('technology preview message')}
+              <br />
+              <Link href={previewUrl} target='_blank' rel='noreferrer' variant='neutral'>
+                {t('learn more label')}
+                <Icon icon='ph--arrow-square-out--bold' classNames='inline mis-1' />
+              </Link>
+            </Message.Body>
+          </Message.Root>
+          <div role='none' className='plb-4 pli-5 space-b-2 text-baseText'>
+            {timestamp && (
+              <p>
+                {t('released message', {
+                  released: formatDistance(new Date(timestamp), new Date(), { addSuffix: true }),
+                })}
+                <br />
+                <Link href={releaseUrl} target='_blank' rel='noreferrer' variant='neutral'>
+                  {t('see release label')}
+                  <Icon icon='ph--arrow-square-out--bold' classNames='inline mis-1' />
+                </Link>
+              </p>
+            )}
+            <p>
+              <Trans
+                {...{
+                  t,
+                  i18nKey: 'powered by dxos message',
+                  components: {
+                    dxos: <Link href='https://dxos.org' target='_blank' rel='noreferrer' variant='neutral' />,
+                  },
+                }}
+              />
+            </p>
+          </div>
+          <Popover.Arrow />
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  );
+};