@dxos/plugin-status-bar 0.6.8-main.046e6cf

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

@@ -0,0 +1,50 @@
+import '@dxosTheme';
+import React from 'react';
+declare const _default: {
+    title: string;
+    component: {
+        Container: React.ForwardRefExoticComponent<Omit<{
+            children: React.ReactNode;
+        }, "className"> & {
+            classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
+        } & React.RefAttributes<HTMLDivElement>>;
+        Text: React.ForwardRefExoticComponent<Omit<{
+            children: React.ReactNode;
+        }, "className"> & {
+            classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
+        } & React.RefAttributes<HTMLSpanElement>>;
+        Item: React.ForwardRefExoticComponent<Omit<{
+            children: React.ReactNode;
+        }, "className"> & {
+            classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
+        } & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+        Button: React.ForwardRefExoticComponent<Omit<{
+            children: React.ReactNode;
+            asChild?: boolean;
+        }, "className"> & {
+            classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
+        } & React.HTMLAttributes<HTMLButtonElement> & React.RefAttributes<HTMLButtonElement>>;
+        StartContent: React.ForwardRefExoticComponent<Omit<{
+            children: React.ReactNode;
+        }, "className"> & {
+            classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
+        } & React.RefAttributes<HTMLDivElement>>;
+        EndContent: React.ForwardRefExoticComponent<Omit<{
+            children: React.ReactNode;
+        }, "className"> & {
+            classNames?: import("packages/ui/react-ui-types/dist/types/src").ClassNameValue;
+        } & React.RefAttributes<HTMLDivElement>>;
+    };
+    actions: {
+        argTypesRegex: string;
+    };
+    decorators: import("@storybook/react/*").Decorator[];
+    parameters: {
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const Normal: (_props: any) => React.JSX.Element;
+//# sourceMappingURL=StatusBar.stories.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"StatusBar.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/StatusBar.stories.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAGpB,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAM1B,wBAME;AAEF,eAAO,MAAM,MAAM,WAAY,GAAG,sBAqBjC,CAAC"}

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

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

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

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

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

@@ -0,0 +1,3 @@
+export * from './StatusBar';
+export * from './StatusBarImpl';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/index.ts"],"names":[],"mappings":"AAIA,cAAc,aAAa,CAAC;AAC5B,cAAc,iBAAiB,CAAC"}

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

@@ -0,0 +1,2 @@
+export * from './useForm';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/hooks/index.ts"],"names":[],"mappings":"AAIA,cAAc,WAAW,CAAC"}

package/dist/types/src/hooks/useForm.d.ts

@@ -0,0 +1,36 @@
+import { type ChangeEvent } from 'react';
+import { type ValidationError } from '../util';
+interface FormOptions<T> {
+    initialValues: T;
+    validate: (values: any) => ValidationError[] | undefined;
+    onSubmit: (values: T) => void;
+}
+/**
+ * Creates a hook for managing form state, including values, validation, and submission.
+ *
+ * @example
+ * const { values, handleChange, handleSubmit, errors, canSubmit, getInputProps } = useForm({
+ *   initialValues: { name: '', email: '' },
+ *   validate: (values) => { yourValidationLogic(values); },
+ *   onSubmit: (values) => { submissionLogic(values); },
+ * });
+ */
+export declare const useForm: <T extends object>({ initialValues, validate, onSubmit }: FormOptions<T>) => {
+    values: T;
+    handleChange: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    handleSubmit: () => void;
+    errors: Record<keyof T, string>;
+    canSubmit: boolean;
+    touched: Record<keyof T, boolean>;
+    handleBlur: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    onValidate: (values: T) => boolean;
+    getInputProps: (key: keyof T) => {
+        name: keyof T;
+        value: T[keyof T];
+        onChange: (event: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+        onBlur: (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+        'aria-invalid': boolean;
+    };
+};
+export {};
+//# sourceMappingURL=useForm.d.ts.map

package/dist/types/src/hooks/useForm.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useForm.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useForm.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,WAAW,EAAyB,MAAM,OAAO,CAAC;AAEhE,OAAO,EAAE,KAAK,eAAe,EAAE,MAAM,SAAS,CAAC;AAK/C,UAAU,WAAW,CAAC,CAAC;IACrB,aAAa,EAAE,CAAC,CAAC;IACjB,QAAQ,EAAE,CAAC,MAAM,EAAE,GAAG,KAAK,eAAe,EAAE,GAAG,SAAS,CAAC;IACzD,QAAQ,EAAE,CAAC,MAAM,EAAE,CAAC,KAAK,IAAI,CAAC;CAC/B;AAED;;;;;;;;;GASG;AACH,eAAO,MAAM,OAAO,GAAI,CAAC,SAAS,MAAM,yCAAyC,WAAW,CAAC,CAAC,CAAC;;0BAkBnF,WAAW,CAAC,gBAAgB,GAAG,mBAAmB,CAAC;;;;;wBAYnD,KAAK,CAAC,UAAU,CAAC,gBAAgB,GAAG,mBAAmB,CAAC;yBAtBvD,CAAC;yBAiDJ,MAAM,CAAC;;;0BAvCL,WAAW,CAAC,gBAAgB,GAAG,mBAAmB,CAAC;wBAYnD,KAAK,CAAC,UAAU,CAAC,gBAAgB,GAAG,mBAAmB,CAAC;;;CAgDnE,CAAC"}

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

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

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

@@ -0,0 +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"}

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

@@ -0,0 +1,15 @@
+import { type IconProps } from '@phosphor-icons/react';
+import React from 'react';
+export declare const STATUS_BAR_PLUGIN = "dxos.org/plugin/status-bar";
+declare const _default: {
+    id: string;
+    shortId?: string;
+    name?: string;
+    description?: string;
+    homePage?: string;
+    tags?: string[];
+    iconComponent?: React.FC<IconProps>;
+    iconSymbol?: string;
+};
+export default _default;
+//# sourceMappingURL=meta.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"meta.d.ts","sourceRoot":"","sources":["../../../src/meta.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAQ,KAAK,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,eAAO,MAAM,iBAAiB,+BAA+B,CAAC;;;;;;;;;;;AAE9D,wBAMG"}

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

@@ -0,0 +1,13 @@
+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 RequiredTranslation = {
+    [key in StatusBarTranslationKeys]: string;
+};
+type TranslationEntry = {
+    [STATUS_BAR_PLUGIN]: RequiredTranslation;
+};
+export declare const mkTranslation: (t: ReturnType<typeof useTranslation>["t"]) => (key: StatusBarTranslationKeys) => string;
+declare const _default: Record<string, TranslationEntry>[];
+export default _default;
+//# sourceMappingURL=translations.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,2 @@
+export * from './validation';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/util/index.ts"],"names":[],"mappings":"AAIA,cAAc,cAAc,CAAC"}

package/dist/types/src/util/validation.d.ts

@@ -0,0 +1,7 @@
+import { S } from '@dxos/echo-schema';
+export type ValidationError = {
+    path: string;
+    message: string;
+};
+export declare const validate: <T>(schema: S.Schema<T>, data: any) => ValidationError[] | undefined;
+//# sourceMappingURL=validation.d.ts.map

package/dist/types/src/util/validation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validation.d.ts","sourceRoot":"","sources":["../../../../src/util/validation.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,CAAC,EAAE,MAAM,mBAAmB,CAAC;AAEtC,MAAM,MAAM,eAAe,GAAG;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC;AAEhE,eAAO,MAAM,QAAQ,GAAI,CAAC,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,GAAG,KAAG,eAAe,EAAE,GAAG,SAWhF,CAAC"}

package/package.json

@@ -0,0 +1,70 @@
+{
+  "name": "@dxos/plugin-status-bar",
+  "version": "0.6.8-main.046e6cf",
+  "description": "Status bar plugin",
+  "homepage": "https://dxos.org",
+  "bugs": "https://github.com/dxos/dxos/issues",
+  "license": "MIT",
+  "author": "DXOS.org",
+  "exports": {
+    ".": {
+      "browser": "./dist/lib/browser/index.mjs",
+      "types": "./dist/types/src/index.d.ts"
+    },
+    "./meta": {
+      "browser": "./dist/lib/browser/meta.mjs",
+      "types": "./dist/types/src/meta.d.ts"
+    }
+  },
+  "types": "dist/types/src/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "meta": [
+        "dist/types/src/meta.d.ts"
+      ]
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "dependencies": {
+    "@effect/schema": "^0.67.16",
+    "@fluentui/react-tabster": "^9.19.0",
+    "@preact/signals-core": "^1.6.0",
+    "@radix-ui/react-slot": "^1.0.1",
+    "effect": "^3.2.7",
+    "leaflet": "^1.9.3",
+    "react-leaflet": "^4.2.0",
+    "react-resize-detector": "^11.0.1",
+    "@dxos/async": "0.6.8-main.046e6cf",
+    "@dxos/echo-schema": "0.6.8-main.046e6cf",
+    "@dxos/plugin-client": "0.6.8-main.046e6cf",
+    "@dxos/app-framework": "0.6.8-main.046e6cf",
+    "@dxos/plugin-space": "0.6.8-main.046e6cf",
+    "@dxos/plugin-stack": "0.6.8-main.046e6cf",
+    "@dxos/react-client": "0.6.8-main.046e6cf"
+  },
+  "devDependencies": {
+    "@phosphor-icons/react": "^2.1.5",
+    "@types/leaflet": "^1.9.0",
+    "@types/react": "~18.2.0",
+    "@types/react-dom": "~18.2.0",
+    "react": "~18.2.0",
+    "react-dom": "~18.2.0",
+    "vite": "^5.3.4",
+    "@dxos/react-ui": "0.6.8-main.046e6cf",
+    "@dxos/react-ui-theme": "0.6.8-main.046e6cf",
+    "@dxos/storybook-utils": "0.6.8-main.046e6cf"
+  },
+  "peerDependencies": {
+    "@phosphor-icons/react": "^2.0.5",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "@dxos/react-ui": "0.6.8-main.046e6cf",
+    "@dxos/react-ui-theme": "0.6.8-main.046e6cf"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/StatusBarPlugin.tsx

@@ -0,0 +1,33 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import React from 'react';
+
+import { type PluginDefinition, type SurfaceProvides, type TranslationsProvides } from '@dxos/app-framework';
+
+import { StatusBarImpl } from './components';
+import meta 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 <StatusBarImpl />;
+            }
+          }
+
+          return null;
+        },
+      },
+    },
+  };
+};

package/src/components/FeedbackForm.tsx

@@ -0,0 +1,127 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { X, PaperPlaneTilt } from '@phosphor-icons/react';
+import React, { useCallback } from 'react';
+
+import { useIntentDispatcher } from '@dxos/app-framework';
+import { S } from '@dxos/echo-schema';
+import { Button, Input, Popover, useTranslation } from '@dxos/react-ui';
+import { getSize } from '@dxos/react-ui-theme';
+
+import { useForm } from '../hooks';
+import { STATUS_BAR_PLUGIN } from '../meta';
+import { mkTranslation } from '../translations';
+import { validate } from '../util';
+
+const Email = S.String.pipe(
+  S.nonEmpty({ 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.nonEmpty({ 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 FeedbackFormState = S.Schema.Type<typeof FeedbackFormSchema>;
+
+const initialValues: FeedbackFormState = { name: '', email: '', message: '' };
+
+export const FeedbackForm = ({ onClose }: { onClose: () => void }) => {
+  const { t } = useTranslation(STATUS_BAR_PLUGIN);
+  const translation = mkTranslation(t);
+  const dispatch = useIntentDispatcher();
+
+  const onSubmit = useCallback(
+    (values: FeedbackFormState) => {
+      void dispatch({ action: 'dxos.org/plugin/observability/capture-feedback', data: values });
+      onClose();
+    },
+    [dispatch, onClose],
+  );
+
+  const { errors, handleSubmit, canSubmit, touched, getInputProps } = useForm<FeedbackFormState>({
+    initialValues,
+    validate: (values) => validate(FeedbackFormSchema, values),
+    onSubmit: (values) => onSubmit(values),
+  });
+
+  return (
+    <div role='form' className='p-3 flex flex-col gap-2'>
+      <div role='none' className='space-b-1'>
+        <Input.Root validationValence={touched.name && errors.name ? 'error' : undefined}>
+          <Input.Label>{translation('name label')}</Input.Label>
+          <Input.TextInput
+            classNames={'text-sm'}
+            placeholder={translation('name placeholder')}
+            autoFocus
+            {...getInputProps('name')}
+          />
+          <Input.DescriptionAndValidation>
+            <Input.Validation>{touched.name && errors.name}</Input.Validation>
+          </Input.DescriptionAndValidation>
+        </Input.Root>
+      </div>
+
+      <div role='none' className='space-b-1'>
+        <Input.Root validationValence={touched.email && errors.email ? 'error' : undefined}>
+          <Input.Label>{translation('email input label')}</Input.Label>
+          <Input.TextInput
+            classNames={'text-sm'}
+            placeholder={translation('email input placeholder')}
+            {...getInputProps('email')}
+          />
+          <Input.DescriptionAndValidation>
+            <Input.Validation>{touched.email && errors.email}</Input.Validation>
+          </Input.DescriptionAndValidation>
+        </Input.Root>
+      </div>
+
+      <div role='none' className='space-b-1'>
+        <Input.Root validationValence={touched.message && errors.message ? 'error' : undefined}>
+          <Input.Label>{translation('feedback text area label')}</Input.Label>
+          <Input.TextArea
+            classNames={'text-sm'}
+            rows={5}
+            cols={30}
+            placeholder={translation('feedback text area placeholder')}
+            {...getInputProps('message')}
+          />
+          <Input.DescriptionAndValidation>
+            <Input.Validation>{touched.message && errors.message}</Input.Validation>
+          </Input.DescriptionAndValidation>
+        </Input.Root>
+      </div>
+
+      <div role='none' className='space-b-2'>
+        <Button
+          type='submit'
+          variant='primary'
+          classNames='is-full flex gap-2'
+          disabled={!canSubmit}
+          onClick={handleSubmit}
+        >
+          <span>{translation('send feedback label')}</span>
+          <div className='grow' />
+          <PaperPlaneTilt className={getSize(5)} />
+        </Button>
+        <Popover.Close asChild>
+          <Button classNames='is-full flex gap-2'>
+            <span>{t('cancel label', { ns: 'os' })}</span>
+            <div className='grow' />
+            <X className={getSize(5)} />
+          </Button>
+        </Popover.Close>
+      </div>
+    </div>
+  );
+};

package/src/components/StatusBar.stories.tsx

@@ -0,0 +1,43 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import '@dxosTheme';
+
+import { Mailbox, DiscordLogo, Lightning } from '@phosphor-icons/react';
+import React from 'react';
+
+import { withTheme } from '@dxos/storybook-utils';
+
+import { StatusBar } from './StatusBar';
+
+export default {
+  title: 'plugin-status/StatusBar',
+  component: StatusBar,
+  actions: { argTypesRegex: '^on.*' },
+  decorators: [withTheme],
+  parameters: { chromatic: { disableSnapshot: false } },
+};
+
+export const Normal = (_props: any) => (
+  <>
+    <StatusBar.Container>
+      <StatusBar.EndContent>
+        <StatusBar.Button>
+          <Mailbox />
+          <StatusBar.Text>Quick feedback</StatusBar.Text>
+        </StatusBar.Button>
+        <a href='https://discord.gg/' target='_blank' rel='noopener noreferrer'>
+          <StatusBar.Button>
+            <DiscordLogo />
+            <StatusBar.Text>Join us on Discord</StatusBar.Text>
+          </StatusBar.Button>
+        </a>
+        <StatusBar.Item>
+          <Lightning />
+          <StatusBar.Text>Online</StatusBar.Text>
+        </StatusBar.Item>
+      </StatusBar.EndContent>
+    </StatusBar.Container>
+  </>
+);

package/src/components/StatusBar.tsx

@@ -0,0 +1,110 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { useArrowNavigationGroup } from '@fluentui/react-tabster';
+import { Slot } from '@radix-ui/react-slot';
+import React, { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+
+import { type ThemedClassName } from '@dxos/react-ui';
+import { mx } from '@dxos/react-ui-theme';
+
+type StatusBarTextProps = ThemedClassName<{ children: ReactNode }>;
+
+const StatusBarText = forwardRef<HTMLSpanElement, StatusBarTextProps>(({ classNames, children }, forwardedRef) => (
+  <span className={mx(classNames)} ref={forwardedRef}>
+    {children}
+  </span>
+));
+
+type StatusBarButtonProps = ThemedClassName<{ children: ReactNode; asChild?: boolean }> &
+  HTMLAttributes<HTMLButtonElement>;
+
+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',
+      'hover:bg-neutral-75 active:bg-neutral-150',
+      'dark:hover:bg-neutral-750 dark:active:bg-neutral-700',
+      classNames,
+    );
+
+    return asChild ? (
+      <Slot role='button' ref={forwardedRef} className={classes} {...props}>
+        {children}
+      </Slot>
+    ) : (
+      <button className={classes} ref={forwardedRef} {...props}>
+        {children}
+      </button>
+    );
+  },
+);
+
+export default StatusBarButton;
+
+type StatusBarItemProps = ThemedClassName<{ children: ReactNode }> & HTMLAttributes<HTMLDivElement>;
+
+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)}
+      ref={forwardedRef}
+      {...props}
+    >
+      {children}
+    </div>
+  ),
+);
+type StatusBarContainerProps = ThemedClassName<{ children: ReactNode }>;
+
+// TODO(zan): tabable group with tabster
+const StatusBarContainer = forwardRef<HTMLDivElement, StatusBarContainerProps>(
+  ({ classNames, children }, forwardedRef) => {
+    const groupAttrs = useArrowNavigationGroup({ axis: 'horizontal' });
+    return (
+      <div
+        {...groupAttrs}
+        className={mx(
+          'bs-[--statusbar-size]',
+          'flex justify-end items-center gap-2',
+          'surface-base fg-description',
+          'border-bs separator-separator',
+          'text-lg pointer-fine:text-xs',
+          classNames,
+        )}
+        ref={forwardedRef}
+        role='menubar'
+      >
+        {children}
+      </div>
+    );
+  },
+);
+
+type StartContentProps = ThemedClassName<{ children: ReactNode }>;
+
+const StartContent = forwardRef<HTMLDivElement, StartContentProps>(({ classNames, children }, forwardedRef) => (
+  <div role='none' className={mx('flex-grow flex items-center space-x-2', classNames)} ref={forwardedRef}>
+    {children}
+  </div>
+));
+
+type EndContentProps = ThemedClassName<{ children: ReactNode }>;
+
+const EndContent = forwardRef<HTMLDivElement, EndContentProps>(({ classNames, children }, forwardedRef) => (
+  <div role='none' className={mx('flex-grow flex items-center justify-end', classNames)} ref={forwardedRef}>
+    {children}
+  </div>
+));
+
+export const StatusBar = {
+  Container: StatusBarContainer,
+  Text: StatusBarText,
+  Item: StatusBarItem,
+  Button: StatusBarButton,
+  StartContent,
+  EndContent,
+};

package/src/components/StatusBarImpl.tsx

@@ -0,0 +1,45 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { DiscordLogo, PaperPlaneTilt } from '@phosphor-icons/react';
+import React, { useState } from 'react';
+
+import { Surface } from '@dxos/app-framework';
+import { Popover } from '@dxos/react-ui';
+
+import { FeedbackForm } from './FeedbackForm';
+import { StatusBar } from './StatusBar';
+
+// TODO(wittjosiah): Rename.
+export const StatusBarImpl = () => {
+  const [open, setOpen] = useState(false);
+
+  // TODO(wittjosiah): Factor out feedback and discord buttons.
+  return (
+    <Popover.Root open={open} onOpenChange={setOpen}>
+      <StatusBar.Container>
+        <StatusBar.EndContent>
+          <Popover.Trigger asChild>
+            <StatusBar.Button aria-label='Give feedback about composer' data-joyride='welcome/feedback'>
+              <PaperPlaneTilt />
+              <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://discord.gg/zsxWrKjteV' target='_blank' rel='noopener noreferrer'>
+              <DiscordLogo />
+              <StatusBar.Text classNames='hidden sm:block'>Discord</StatusBar.Text>
+            </a>
+          </StatusBar.Button>
+        </StatusBar.EndContent>
+        <Surface role='status' />
+      </StatusBar.Container>
+      <Popover.Content classNames='shadow-lg'>
+        <FeedbackForm onClose={() => setOpen(false)} />
+        <Popover.Arrow />
+      </Popover.Content>
+    </Popover.Root>
+  );
+};

package/src/components/index.ts

@@ -0,0 +1,6 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './StatusBar';
+export * from './StatusBarImpl';

package/src/hooks/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+export * from './useForm';