@dxos/plugin-deck 0.8.4-main.67995b8 → 0.8.4-main.a4bbb77

package/src/capabilities/url-handler.ts

@@ -2,12 +2,13 @@
 // Copyright 2025 DXOS.org
 //
 
-import { Capabilities, contributes, createIntent, LayoutAction, type PluginContext } from '@dxos/app-framework';
+import { Capabilities, LayoutAction, type PluginContext, contributes, createIntent } from '@dxos/app-framework';
 import { scheduledEffect } from '@dxos/echo-signals/core';
 
-import { DeckCapabilities } from './capabilities';
 import { defaultDeck } from '../types';
 
+import { DeckCapabilities } from './capabilities';
+
 // TODO(wittjosiah): Cleanup the url handling. May justify introducing routing capabilities.
 export default async (context: PluginContext) => {
   const { dispatchPromise: dispatch } = context.getCapability(Capabilities.IntentDispatcher);

package/src/components/DeckLayout/Banner.tsx

@@ -5,14 +5,14 @@
 import React from 'react';
 
 import { Surface } from '@dxos/app-framework';
-import { useTranslation, type ThemedClassName } from '@dxos/react-ui';
+import { type ThemedClassName, useTranslation } from '@dxos/react-ui';
 import { mx } from '@dxos/react-ui-theme';
 
-import { DECK_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
 import { CloseSidebarButton, ToggleSidebarButton } from '../Sidebar';
 
 export const Banner = ({ variant, classNames }: ThemedClassName<{ variant?: 'topbar' | 'sidebar' }>) => {
-  const { t } = useTranslation(DECK_PLUGIN);
+  const { t } = useTranslation(meta.id);
   return (
     <header
       className={mx(

package/src/components/DeckLayout/ContentEmpty.tsx

@@ -10,8 +10,8 @@ import { DeckCapabilities } from '../../capabilities';
 import { useBreakpoints } from '../../hooks';
 import { getMode } from '../../types';
 import { layoutAppliesTopbar } from '../../util';
-import { ToggleSidebarButton } from '../Sidebar';
 import { fixedSidebarToggleStyles } from '../fragments';
+import { ToggleSidebarButton } from '../Sidebar';
 
 export const ContentEmpty = () => {
   const breakpoint = useBreakpoints();

package/src/components/DeckLayout/DeckLayout.tsx

@@ -3,7 +3,7 @@
 //
 
 import { untracked } from '@preact/signals-core';
-import React, { useCallback, useEffect, useMemo, useRef, type UIEvent, Fragment } from 'react';
+import React, { Fragment, type UIEvent, useCallback, useEffect, useMemo, useRef } from 'react';
 
 import {
   Capabilities,
@@ -15,9 +15,18 @@ import {
 } from '@dxos/app-framework';
 import { AttentionCapabilities } from '@dxos/plugin-attention';
 import { Main, type MainProps, useMediaQuery, useOnTransition } from '@dxos/react-ui';
-import { Stack, StackContext, DEFAULT_HORIZONTAL_SIZE } from '@dxos/react-ui-stack';
+import { DEFAULT_HORIZONTAL_SIZE, Stack, StackContext } from '@dxos/react-ui-stack';
 import { mainPaddingTransitions } from '@dxos/react-ui-theme';
 
+import { DeckCapabilities } from '../../capabilities';
+import { useBreakpoints, useHoistStatusbar } from '../../hooks';
+import { meta } from '../../meta';
+import { type DeckSettingsProps, getMode } from '../../types';
+import { calculateOverscroll, layoutAppliesTopbar } from '../../util';
+import { fixedComplementarySidebarToggleStyles, fixedSidebarToggleStyles } from '../fragments';
+import { Plank } from '../Plank';
+import { ComplementarySidebar, Sidebar, ToggleComplementarySidebarButton, ToggleSidebarButton } from '../Sidebar';
+
 import { ActiveNode } from './ActiveNode';
 import { ContentEmpty } from './ContentEmpty';
 import { Dialog } from './Dialog';
@@ -25,14 +34,6 @@ import { PopoverContent, PopoverRoot } from './Popover';
 import { StatusBar } from './StatusBar';
 import { Toast } from './Toast';
 import { Topbar } from './Topbar';
-import { DeckCapabilities } from '../../capabilities';
-import { useBreakpoints, useHoistStatusbar } from '../../hooks';
-import { DECK_PLUGIN } from '../../meta';
-import { type DeckSettingsProps, getMode } from '../../types';
-import { calculateOverscroll, layoutAppliesTopbar } from '../../util';
-import { Plank } from '../Plank';
-import { ComplementarySidebar, Sidebar, ToggleComplementarySidebarButton, ToggleSidebarButton } from '../Sidebar';
-import { fixedComplementarySidebarToggleStyles, fixedSidebarToggleStyles } from '../fragments';
 
 export type DeckLayoutProps = {
   onDismissToast: (id: string) => void;
@@ -43,7 +44,7 @@ const PlankSeparator = ({ order }: { order: number }) =>
 
 export const DeckLayout = ({ onDismissToast }: DeckLayoutProps) => {
   const { dispatchPromise: dispatch } = useIntentDispatcher();
-  const settings = useCapability(Capabilities.SettingsStore).getStore<DeckSettingsProps>(DECK_PLUGIN)!.value;
+  const settings = useCapability(Capabilities.SettingsStore).getStore<DeckSettingsProps>(meta.id)!.value;
   const context = useCapability(DeckCapabilities.MutableDeckState);
   const { sidebarState, complementarySidebarState, complementarySidebarPanel, deck, toasts } = context;
   const { active, activeCompanions, fullscreen, solo, plankSizing } = deck;
@@ -53,7 +54,7 @@ export const DeckLayout = ({ onDismissToast }: DeckLayoutProps) => {
   const hoistStatusbar = useHoistStatusbar(breakpoint, layoutMode);
   const pluginManager = usePluginManager();
 
-  const scrollLeftRef = useRef<number | null>();
+  const scrollLeftRef = useRef<number>(null);
   const deckRef = useRef<HTMLDivElement>(null);
 
   // Ensure the first plank is attended when the deck is first rendered.
@@ -216,7 +217,7 @@ export const DeckLayout = ({ onDismissToast }: DeckLayoutProps) => {
             <div
               role='none'
               className={!solo ? 'relative bg-deckSurface overflow-hidden' : 'sr-only'}
-              {...(solo && { inert: '' })}
+              {...(solo && { inert: true })}
             >
               {!topbar && !fullscreen && <ToggleSidebarButton classNames={fixedSidebarToggleStyles} />}
               {!topbar && !fullscreen && (
@@ -250,7 +251,7 @@ export const DeckLayout = ({ onDismissToast }: DeckLayoutProps) => {
             <div
               role='none'
               className={solo ? 'relative bg-deckSurface overflow-hidden' : 'sr-only'}
-              {...(!solo && { inert: '' })}
+              {...(!solo && { inert: true })}
             >
               {!topbar && !fullscreen && <ToggleSidebarButton classNames={fixedSidebarToggleStyles} />}
               {!topbar && !fullscreen && (

package/src/components/DeckLayout/Fallback.tsx

@@ -7,10 +7,10 @@ import React from 'react';
 import { useTranslation } from '@dxos/react-ui';
 import { errorText, mx } from '@dxos/react-ui-theme';
 
-import { DECK_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
 
 export const Fallback = () => {
-  const { t } = useTranslation(DECK_PLUGIN);
+  const { t } = useTranslation(meta.id);
 
   return (
     <div role='none' className='min-bs-screen is-full flex items-center justify-center p-8'>

package/src/components/DeckLayout/Toast.tsx

@@ -14,7 +14,7 @@ import {
   useTranslation,
 } from '@dxos/react-ui';
 
-import { DECK_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
 
 // TODO(wittjosiah): Render remaining duration as a progress bar within the toast.
 export const Toast = ({
@@ -29,7 +29,7 @@ export const Toast = ({
   onAction,
   onOpenChange,
 }: LayoutAction.Toast & Pick<ToastRootProps, 'onOpenChange'>) => {
-  const { t } = useTranslation(DECK_PLUGIN);
+  const { t } = useTranslation(meta.id);
 
   return (
     <NaturalToast.Root data-testid={id} defaultOpen duration={duration} onOpenChange={onOpenChange}>

package/src/components/DeckSettings/DeckSettings.tsx

@@ -5,9 +5,9 @@
 import React from 'react';
 
 import { Input, Select, useTranslation } from '@dxos/react-ui';
-import { DeprecatedFormContainer, DeprecatedFormInput } from '@dxos/react-ui-form';
+import { ControlGroup, ControlItemInput, ControlPage, ControlSection } from '@dxos/react-ui-form';
 
-import { DECK_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
 import {
   type DeckSettingsProps,
   type NewPlankPositioning,
@@ -19,70 +19,79 @@ import {
 const isSocket = !!(globalThis as any).__args;
 
 export const DeckSettings = ({ settings }: { settings: DeckSettingsProps }) => {
-  const { t } = useTranslation(DECK_PLUGIN);
+  const { t } = useTranslation(meta.id);
 
   return (
-    <DeprecatedFormContainer>
-      <DeprecatedFormInput label={t('settings enable deck label')}>
-        <Input.Switch checked={settings.enableDeck} onCheckedChange={(checked) => (settings.enableDeck = checked)} />
-      </DeprecatedFormInput>
-      <DeprecatedFormInput label={t('select new plank positioning label')}>
-        <Select.Root
-          disabled={!settings.enableDeck}
-          value={settings.newPlankPositioning ?? 'start'}
-          onValueChange={(value) => (settings.newPlankPositioning = value as NewPlankPositioning)}
-        >
-          <Select.TriggerButton placeholder={t('select new plank positioning placeholder')} />
-          <Select.Portal>
-            <Select.Content>
-              <Select.Viewport>
-                {NewPlankPositions.map((position) => (
-                  <Select.Option key={position} value={position}>
-                    {t(`settings new plank position ${position} label`)}
-                  </Select.Option>
-                ))}
-              </Select.Viewport>
-            </Select.Content>
-          </Select.Portal>
-        </Select.Root>
-      </DeprecatedFormInput>
-      <DeprecatedFormInput label={t('settings overscroll label')}>
-        <Select.Root
-          disabled={!settings.enableDeck}
-          value={settings.overscroll ?? 'none'}
-          onValueChange={(value) => (settings.overscroll = value as Overscroll)}
-        >
-          <Select.TriggerButton placeholder={t('select overscroll placeholder')} />
-          <Select.Portal>
-            <Select.Content>
-              <Select.Viewport>
-                {OverscrollOptions.map((option) => (
-                  <Select.Option key={option} value={option}>
-                    {t(`settings overscroll ${option} label`)}
-                  </Select.Option>
-                ))}
-              </Select.Viewport>
-            </Select.Content>
-          </Select.Portal>
-        </Select.Root>
-      </DeprecatedFormInput>
-      <DeprecatedFormInput label={t('settings enable statusbar label')}>
-        <Input.Switch
-          checked={settings.enableStatusbar}
-          onCheckedChange={(checked) => (settings.enableStatusbar = checked)}
-        />
-      </DeprecatedFormInput>
-      <DeprecatedFormInput label={t('settings show hints label')}>
-        <Input.Switch checked={settings.showHints} onCheckedChange={(checked) => (settings.showHints = checked)} />
-      </DeprecatedFormInput>
-      {!isSocket && (
-        <DeprecatedFormInput label={t('settings native redirect label')}>
-          <Input.Switch
-            checked={settings.enableNativeRedirect}
-            onCheckedChange={(checked) => (settings.enableNativeRedirect = checked)}
-          />
-        </DeprecatedFormInput>
-      )}
-    </DeprecatedFormContainer>
+    <ControlPage>
+      <ControlSection title={t('settings title', { ns: meta.id })}>
+        <ControlGroup>
+          <ControlItemInput title={t('settings enable deck label')}>
+            <Input.Switch
+              checked={settings.enableDeck}
+              onCheckedChange={(checked) => (settings.enableDeck = checked)}
+            />
+          </ControlItemInput>
+          <ControlItemInput title={t('select new plank positioning label')}>
+            <Select.Root
+              disabled={!settings.enableDeck}
+              value={settings.newPlankPositioning ?? 'start'}
+              onValueChange={(value) => (settings.newPlankPositioning = value as NewPlankPositioning)}
+            >
+              <Select.TriggerButton placeholder={t('select new plank positioning placeholder')} />
+              <Select.Portal>
+                <Select.Content>
+                  <Select.Viewport>
+                    {NewPlankPositions.map((position) => (
+                      <Select.Option key={position} value={position}>
+                        {t(`settings new plank position ${position} label`)}
+                      </Select.Option>
+                    ))}
+                  </Select.Viewport>
+                  <Select.Arrow />
+                </Select.Content>
+              </Select.Portal>
+            </Select.Root>
+          </ControlItemInput>
+          <ControlItemInput title={t('settings overscroll label')}>
+            <Select.Root
+              disabled={!settings.enableDeck}
+              value={settings.overscroll ?? 'none'}
+              onValueChange={(value) => (settings.overscroll = value as Overscroll)}
+            >
+              <Select.TriggerButton placeholder={t('select overscroll placeholder')} />
+              <Select.Portal>
+                <Select.Content>
+                  <Select.Viewport>
+                    {OverscrollOptions.map((option) => (
+                      <Select.Option key={option} value={option}>
+                        {t(`settings overscroll ${option} label`)}
+                      </Select.Option>
+                    ))}
+                  </Select.Viewport>
+                  <Select.Arrow />
+                </Select.Content>
+              </Select.Portal>
+            </Select.Root>
+          </ControlItemInput>
+          <ControlItemInput title={t('settings enable statusbar label')}>
+            <Input.Switch
+              checked={settings.enableStatusbar}
+              onCheckedChange={(checked) => (settings.enableStatusbar = checked)}
+            />
+          </ControlItemInput>
+          <ControlItemInput title={t('settings show hints label')}>
+            <Input.Switch checked={settings.showHints} onCheckedChange={(checked) => (settings.showHints = checked)} />
+          </ControlItemInput>
+          {!isSocket && (
+            <ControlItemInput title={t('settings native redirect label')}>
+              <Input.Switch
+                checked={settings.enableNativeRedirect}
+                onCheckedChange={(checked) => (settings.enableNativeRedirect = checked)}
+              />
+            </ControlItemInput>
+          )}
+        </ControlGroup>
+      </ControlSection>
+    </ControlPage>
   );
 };

package/src/components/Plank/Plank.stories.tsx

@@ -2,23 +2,22 @@
 // Copyright 2025 DXOS.org
 //
 
-import '@dxos-theme';
-
-import { type StoryObj, type Meta } from '@storybook/react-vite';
+import { type Meta, type StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { IntentPlugin, SettingsPlugin } from '@dxos/app-framework';
 import { withPluginManager } from '@dxos/app-framework/testing';
 import { AttentionPlugin } from '@dxos/plugin-attention';
 import { GraphPlugin } from '@dxos/plugin-graph';
+import { withTheme } from '@dxos/react-ui/testing';
 import { Stack } from '@dxos/react-ui-stack';
-import { withTheme, withLayout } from '@dxos/storybook-utils';
 
-import { Plank, type PlankProps } from './Plank';
 import { DeckStateFactory } from '../../capabilities';
 import { translations } from '../../translations';
 
-const meta: Meta<PlankProps> = {
+import { Plank } from './Plank';
+
+const meta = {
   title: 'plugins/plugin-deck/Plank',
   component: Plank,
   render: (args) => {
@@ -29,21 +28,21 @@ const meta: Meta<PlankProps> = {
     );
   },
   decorators: [
+    withTheme,
     withPluginManager({
       plugins: [AttentionPlugin(), SettingsPlugin(), IntentPlugin(), GraphPlugin()],
       capabilities: () => DeckStateFactory(),
     }),
-    withTheme,
-    withLayout({ fullscreen: true }),
   ],
   parameters: {
+    layout: 'fullscreen',
     translations,
   },
-};
+} satisfies Meta<typeof Plank>;
 
 export default meta;
 
-type Story = StoryObj<PlankProps>;
+type Story = StoryObj<typeof meta>;
 
 // TODO(burdon): Need to define surface provider?
 export const Default: Story = {

package/src/components/Plank/Plank.tsx

@@ -16,23 +16,24 @@ import {
   LayoutAction,
   Surface,
   createIntent,
-  useCapability,
   useAppGraph,
+  useCapability,
   useIntentDispatcher,
 } from '@dxos/app-framework';
 import { debounce } from '@dxos/async';
-import { useNode, type Node } from '@dxos/plugin-graph';
+import { type Node, useNode } from '@dxos/plugin-graph';
 import { ATTENDABLE_PATH_SEPARATOR, useAttentionAttributes } from '@dxos/react-ui-attention';
 import { StackItem, railGridHorizontal } from '@dxos/react-ui-stack';
 import { mainIntrinsicSize, mx } from '@dxos/react-ui-theme';
 
+import { DeckCapabilities } from '../../capabilities';
+import { useCompanions, useMainSize } from '../../hooks';
+import { parseEntryId } from '../../layout';
+import { DeckAction, type DeckSettingsProps, type LayoutMode, type ResolvedPart } from '../../types';
+
 import { PlankContentError, PlankError } from './PlankError';
 import { PlankHeading } from './PlankHeading';
 import { PlankLoading } from './PlankLoading';
-import { DeckCapabilities } from '../../capabilities';
-import { useMainSize, useCompanions } from '../../hooks';
-import { parseEntryId } from '../../layout';
-import { DeckAction, type LayoutMode, type ResolvedPart, type DeckSettingsProps } from '../../types';
 
 const UNKNOWN_ID = 'unknown_id';
 

package/src/components/Plank/PlankControls.tsx

@@ -8,7 +8,7 @@ import { createIntent, useIntentDispatcher } from '@dxos/app-framework';
 import { invariant } from '@dxos/invariant';
 import { ButtonGroup, type ButtonGroupProps, type ButtonProps, IconButton, useTranslation } from '@dxos/react-ui';
 
-import { DECK_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
 import { DeckAction, type LayoutMode } from '../../types';
 
 export type PlankControlHandler = (event: DeckAction.PartAdjustment) => void;
@@ -43,7 +43,7 @@ type PlankComplimentControlsProps = {
 
 export const PlankCompanionControls = forwardRef<HTMLDivElement, PlankComplimentControlsProps>(
   ({ primary }, forwardedRef) => {
-    const { t } = useTranslation(DECK_PLUGIN);
+    const { t } = useTranslation(meta.id);
     const { dispatchPromise: dispatch } = useIntentDispatcher();
     const handleCloseCompanion = useCallback(() => {
       invariant(primary);
@@ -71,7 +71,7 @@ export const PlankControls = forwardRef<HTMLDivElement, PlankControlsProps>(
     { children, classNames, variant = 'default', capabilities, layoutMode, pin, close = false, onClick, ...props },
     forwardedRef,
   ) => {
-    const { t } = useTranslation(DECK_PLUGIN);
+    const { t } = useTranslation(meta.id);
     const buttonClassNames =
       variant === 'hide-disabled' ? `disabled:hidden ${plankControlSpacing}` : plankControlSpacing;
 

package/src/components/Plank/PlankError.tsx

@@ -8,12 +8,13 @@ import { type Node } from '@dxos/plugin-graph';
 import { useTranslation } from '@dxos/react-ui';
 import { descriptionMessage, mx } from '@dxos/react-ui-theme';
 
+import { meta } from '../../meta';
+
 import { PlankHeading, type PlankHeadingProps } from './PlankHeading';
 import { PlankLoading } from './PlankLoading';
-import { DECK_PLUGIN } from '../../meta';
 
 export const PlankContentError = ({ error }: { error?: Error }) => {
-  const { t } = useTranslation(DECK_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const errorString = error?.toString() ?? '';
   return (
     <div role='none' className='overflow-y-auto p-8 attention-surface grid place-items-center'>

package/src/components/Plank/PlankHeading.tsx

@@ -2,22 +2,23 @@
 // Copyright 2024 DXOS.org
 //
 
-import React, { Fragment, memo, useCallback, useEffect, useMemo, type MouseEvent } from 'react';
+import React, { Fragment, type MouseEvent, memo, useCallback, useEffect, useMemo } from 'react';
 
-import { createIntent, LayoutAction, Surface, useAppGraph, useIntentDispatcher } from '@dxos/app-framework';
+import { LayoutAction, Surface, createIntent, useAppGraph, useIntentDispatcher } from '@dxos/app-framework';
 import { type Node } from '@dxos/plugin-graph';
 import { Icon, IconButton, Popover, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { StackItem, type StackItemSigilAction } from '@dxos/react-ui-stack';
 import { TextTooltip } from '@dxos/react-ui-text-tooltip';
 import { hoverableControls, hoverableFocusedWithinControls } from '@dxos/react-ui-theme';
 
-import { PlankCompanionControls, PlankControls } from './PlankControls';
 import { useBreakpoints } from '../../hooks';
 import { parseEntryId } from '../../layout';
-import { DECK_PLUGIN } from '../../meta';
-import { PLANK_COMPANION_TYPE, DeckAction, type ResolvedPart, type LayoutMode } from '../../types';
+import { meta } from '../../meta';
+import { DeckAction, type LayoutMode, PLANK_COMPANION_TYPE, type ResolvedPart } from '../../types';
 import { soloInlinePadding } from '../fragments';
 
+import { PlankCompanionControls, PlankControls } from './PlankControls';
+
 const MAX_COMPANIONS = 5;
 
 export type PlankHeadingProps = {
@@ -52,14 +53,14 @@ export const PlankHeading = memo(
     layoutMode,
     actions = [],
   }: PlankHeadingProps) => {
-    const { t } = useTranslation(DECK_PLUGIN);
+    const { t } = useTranslation(meta.id);
     const { dispatchPromise: dispatch } = useIntentDispatcher();
     const { graph } = useAppGraph();
     const breakpoint = useBreakpoints();
     const icon = node?.properties?.icon ?? 'ph--placeholder--regular';
     const label = pending
       ? t('pending heading')
-      : toLocalizedString(node?.properties?.label ?? ['plank heading fallback label', { ns: DECK_PLUGIN }], t);
+      : toLocalizedString(node?.properties?.label ?? ['plank heading fallback label', { ns: meta.id }], t);
 
     const isCompanionNode = node?.type === PLANK_COMPANION_TYPE;
 
@@ -105,7 +106,7 @@ export const PlankHeading = memo(
 
     const handleAction = useCallback(
       (action: StackItemSigilAction) => {
-        typeof action.data === 'function' && void action.data?.({ parent: node, caller: DECK_PLUGIN });
+        typeof action.data === 'function' && void action.data?.({ parent: node, caller: meta.id });
       },
       [node],
     );
@@ -134,7 +135,7 @@ export const PlankHeading = memo(
       [dispatch, id, part],
     );
 
-    const ActionRoot = node && popoverAnchorId === `dxos.org/ui/${DECK_PLUGIN}/${node.id}` ? Popover.Anchor : Fragment;
+    const ActionRoot = node && popoverAnchorId === `dxos.org/ui/${meta.id}/${node.id}` ? Popover.Anchor : Fragment;
 
     const handleTabClick = useCallback(
       (event: MouseEvent) => {

package/src/components/Sidebar/ComplementarySidebar.tsx

@@ -13,25 +13,26 @@ import React, {
 } from 'react';
 
 import { LayoutAction, Surface, createIntent, useCapability, useIntentDispatcher } from '@dxos/app-framework';
-import { Main, useTranslation, toLocalizedString, IconButton, type Label } from '@dxos/react-ui';
+import { IconButton, type Label, Main, toLocalizedString, useTranslation } from '@dxos/react-ui';
 import { Tabs } from '@dxos/react-ui-tabs';
 
-import { ToggleComplementarySidebarButton } from './SidebarButton';
 import { DeckCapabilities } from '../../capabilities';
-import { type DeckCompanion, getCompanionId, useDeckCompanions, useBreakpoints, useHoistStatusbar } from '../../hooks';
-import { DECK_PLUGIN } from '../../meta';
+import { type DeckCompanion, getCompanionId, useBreakpoints, useDeckCompanions, useHoistStatusbar } from '../../hooks';
+import { meta } from '../../meta';
 import { getMode } from '../../types';
 import { layoutAppliesTopbar } from '../../util';
 import { PlankContentError, PlankLoading } from '../Plank';
 
-const label = ['complementary sidebar title', { ns: DECK_PLUGIN }] satisfies Label;
+import { ToggleComplementarySidebarButton } from './SidebarButton';
+
+const label = ['complementary sidebar title', { ns: meta.id }] satisfies Label;
 
 export type ComplementarySidebarProps = {
   current?: string;
 };
 
 export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) => {
-  const { t } = useTranslation(DECK_PLUGIN);
+  const { t } = useTranslation(meta.id);
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const layout = useCapability(DeckCapabilities.MutableDeckState);
   const layoutMode = getMode(layout.deck);
@@ -129,7 +130,7 @@ export const ComplementarySidebar = ({ current }: ComplementarySidebarProps) =>
               key={getCompanionId(companion.id)}
               value={getCompanionId(companion.id)}
               classNames='absolute data-[state="inactive"]:-z-[1] inset-block-0 inline-start-0 is-[calc(100%-var(--r0-size))] lg:is-[--r1-size] grid grid-cols-1 grid-rows-[var(--rail-size)_1fr_min-content] pbs-[env(safe-area-inset-top)]'
-              {...(layout.complementarySidebarState !== 'expanded' && { inert: 'true' })}
+              {...(layout.complementarySidebarState !== 'expanded' && { inert: true })}
             >
               <ComplementarySidebarPanel
                 companion={companion}
@@ -159,7 +160,7 @@ const ScrollArea = ({ children }: PropsWithChildren) => {
 };
 
 const ComplementarySidebarPanel = ({ companion, activeId, data, hoistStatusbar }: ComplementarySidebarPanelProps) => {
-  const { t } = useTranslation(DECK_PLUGIN);
+  const { t } = useTranslation(meta.id);
 
   if (getCompanionId(companion.id) !== activeId && !data) {
     return null;

package/src/components/Sidebar/Sidebar.tsx

@@ -9,11 +9,11 @@ import { type Label, Main } from '@dxos/react-ui';
 
 import { DeckCapabilities } from '../../capabilities';
 import { useBreakpoints, useHoistStatusbar } from '../../hooks';
-import { DECK_PLUGIN } from '../../meta';
+import { meta } from '../../meta';
 import { getMode } from '../../types';
 import { layoutAppliesTopbar } from '../../util';
 
-const label = ['sidebar title', { ns: DECK_PLUGIN }] satisfies Label;
+const label = ['sidebar title', { ns: meta.id }] satisfies Label;
 
 export const Sidebar = () => {
   const { popoverAnchorId, activeDeck: current, deck } = useCapability(DeckCapabilities.DeckState);

package/src/components/Sidebar/SidebarButton.tsx

@@ -4,19 +4,19 @@
 
 import React, { useCallback } from 'react';
 
-import { createIntent, LayoutAction, useCapability, useIntentDispatcher } from '@dxos/app-framework';
+import { LayoutAction, createIntent, useCapability, useIntentDispatcher } from '@dxos/app-framework';
 import { IconButton, type IconButtonProps, type ThemedClassName, useTranslation } from '@dxos/react-ui';
 
 import { DeckCapabilities } from '../../capabilities';
-import { useDeckCompanions, getCompanionId } from '../../hooks';
-import { DECK_PLUGIN } from '../../meta';
+import { getCompanionId, useDeckCompanions } from '../../hooks';
+import { meta } from '../../meta';
 
 export const ToggleSidebarButton = ({
   classNames,
   variant = 'ghost',
 }: ThemedClassName<Pick<IconButtonProps, 'variant'>>) => {
   const layoutContext = useCapability(DeckCapabilities.MutableDeckState);
-  const { t } = useTranslation(DECK_PLUGIN);
+  const { t } = useTranslation(meta.id);
   return (
     <IconButton
       variant={variant}
@@ -34,7 +34,7 @@ export const ToggleSidebarButton = ({
 
 export const CloseSidebarButton = () => {
   const layoutContext = useCapability(DeckCapabilities.MutableDeckState);
-  const { t } = useTranslation(DECK_PLUGIN);
+  const { t } = useTranslation(meta.id);
   return (
     <IconButton
       variant='ghost'
@@ -55,7 +55,7 @@ export const ToggleComplementarySidebarButton = ({
 }: ThemedClassName<{ inR0?: boolean; current?: string }>) => {
   const { dispatchPromise: dispatch } = useIntentDispatcher();
   const layoutContext = useCapability(DeckCapabilities.MutableDeckState);
-  const { t } = useTranslation(DECK_PLUGIN);
+  const { t } = useTranslation(meta.id);
 
   const companions = useDeckCompanions();
   const handleClick = useCallback(async () => {

package/src/events.ts

@@ -4,8 +4,8 @@
 
 import { Events } from '@dxos/app-framework';
 
-import { DECK_PLUGIN } from './meta';
+import { meta } from './meta';
 
 export namespace DeckEvents {
-  export const StateReady = Events.createStateEvent(`${DECK_PLUGIN}/state-ready`);
+  export const StateReady = Events.createStateEvent(`${meta.id}/state-ready`);
 }

package/src/hooks/useDeckCompanions.ts

@@ -3,8 +3,8 @@
 //
 
 import { type Label, useAppGraph } from '@dxos/app-framework';
-import { ROOT_ID, useConnections, type Node } from '@dxos/plugin-graph';
-import { byPosition, type Position } from '@dxos/util';
+import { type Node, ROOT_ID, useConnections } from '@dxos/plugin-graph';
+import { type Position, byPosition } from '@dxos/util';
 
 import { ATTENDABLE_PATH_SEPARATOR, DECK_COMPANION_TYPE } from '../types';