@dxos/plugin-simple-layout 0.9.0 → 0.9.1-staging.ee54ba693a

package/dx.config.ts

@@ -0,0 +1,20 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import { Config2 } from '@dxos/app-framework/config';
+import { trim } from '@dxos/util';
+
+export default Config2.make({
+  plugin: {
+    key: 'org.dxos.plugin.simpleLayout',
+    name: 'Simple Layout',
+    author: 'DXOS',
+    description: trim`
+      Minimal layout plugin for simplified UI contexts like popover windows.
+      Provides basic content rendering without sidebars or complex navigation.
+    `,
+    icon: { key: 'ph--layout--regular' },
+    tags: ['system'],
+  },
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-simple-layout",
-  "version": "0.9.0",
+  "version": "0.9.1-staging.ee54ba693a",
   "description": "Simple layout plugin for minimal UI contexts like popover windows.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -74,52 +74,53 @@
   "types": "dist/types/src/index.d.ts",
   "files": [
     "dist",
+    "dx.config.ts",
     "src"
   ],
   "dependencies": {
     "@effect-atom/atom-react": "^0.5.0",
     "@radix-ui/react-context": "1.1.1",
     "@tauri-apps/plugin-deep-link": "^2.4.9",
-    "@dxos/async": "0.9.0",
-    "@dxos/app-framework": "0.9.0",
-    "@dxos/context": "0.9.0",
-    "@dxos/compute": "0.9.0",
-    "@dxos/echo": "0.9.0",
-    "@dxos/app-toolkit": "0.9.0",
-    "@dxos/effect": "0.9.0",
-    "@dxos/plugin-client": "0.9.0",
-    "@dxos/plugin-graph": "0.9.0",
-    "@dxos/react-ui-attention": "0.9.0",
-    "@dxos/react-ui-menu": "0.9.0",
-    "@dxos/log": "0.9.0",
-    "@dxos/react-ui-mosaic": "0.9.0",
-    "@dxos/util": "0.9.0",
-    "@dxos/react-ui-search": "0.9.0",
-    "@dxos/keys": "0.9.0"
+    "@dxos/app-framework": "0.9.1-staging.ee54ba693a",
+    "@dxos/app-toolkit": "0.9.1-staging.ee54ba693a",
+    "@dxos/effect": "0.9.1-staging.ee54ba693a",
+    "@dxos/context": "0.9.1-staging.ee54ba693a",
+    "@dxos/async": "0.9.1-staging.ee54ba693a",
+    "@dxos/compute": "0.9.1-staging.ee54ba693a",
+    "@dxos/echo": "0.9.1-staging.ee54ba693a",
+    "@dxos/keys": "0.9.1-staging.ee54ba693a",
+    "@dxos/plugin-client": "0.9.1-staging.ee54ba693a",
+    "@dxos/log": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui-attention": "0.9.1-staging.ee54ba693a",
+    "@dxos/plugin-graph": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui-menu": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui-search": "0.9.1-staging.ee54ba693a",
+    "@dxos/util": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui-mosaic": "0.9.1-staging.ee54ba693a"
   },
   "devDependencies": {
-    "@types/react": "~19.2.7",
+    "@types/react": "~19.2.17",
     "@types/react-dom": "~19.2.3",
-    "effect": "3.21.3",
-    "react": "~19.2.3",
-    "react-dom": "~19.2.3",
+    "effect": "3.21.4",
+    "react": "~19.2.7",
+    "react-dom": "~19.2.7",
     "vite": "^8.0.16",
-    "@dxos/app-graph": "0.9.0",
-    "@dxos/plugin-preview": "0.9.0",
-    "@dxos/plugin-search": "0.9.0",
-    "@dxos/plugin-space": "0.9.0",
-    "@dxos/plugin-testing": "0.9.0",
-    "@dxos/react-ui": "0.9.0",
-    "@dxos/schema": "0.9.0",
-    "@dxos/storybook-utils": "0.9.0",
-    "@dxos/ui-theme": "0.9.0"
+    "@dxos/app-graph": "0.9.1-staging.ee54ba693a",
+    "@dxos/plugin-testing": "0.9.1-staging.ee54ba693a",
+    "@dxos/plugin-space": "0.9.1-staging.ee54ba693a",
+    "@dxos/react-ui": "0.9.1-staging.ee54ba693a",
+    "@dxos/plugin-search": "0.9.1-staging.ee54ba693a",
+    "@dxos/schema": "0.9.1-staging.ee54ba693a",
+    "@dxos/ui-theme": "0.9.1-staging.ee54ba693a",
+    "@dxos/storybook-utils": "0.9.1-staging.ee54ba693a",
+    "@dxos/plugin-preview": "0.9.1-staging.ee54ba693a"
   },
   "peerDependencies": {
-    "effect": "3.21.3",
-    "react": "~19.2.3",
-    "react-dom": "~19.2.3",
-    "@dxos/ui-theme": "0.9.0",
-    "@dxos/react-ui": "0.9.0"
+    "effect": "3.21.4",
+    "react": "~19.2.7",
+    "react-dom": "~19.2.7",
+    "@dxos/react-ui": "0.9.1-staging.ee54ba693a",
+    "@dxos/ui-theme": "0.9.1-staging.ee54ba693a"
   },
   "publishConfig": {
     "access": "public"

package/src/capabilities/react-root.tsx

@@ -13,7 +13,7 @@ import { meta } from '#meta';
 export default Capability.makeModule(() =>
   Effect.succeed(
     Capability.contributes(Capabilities.ReactRoot, {
-      id: meta.id,
+      id: meta.profile.key,
       root: () => {
         return <SimpleLayout />;
       },

package/src/capabilities/react-surface.tsx

@@ -7,17 +7,13 @@ import React from 'react';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
 import { Surface } from '@dxos/app-framework/ui';
-import { NOT_FOUND_PATH } from '@dxos/app-toolkit';
-import { NotFoundArticle } from '@dxos/app-toolkit/ui';
+import { NotFound } from '@dxos/app-toolkit';
+import { AppSurface, NotFoundArticle } from '@dxos/app-toolkit/ui';
 import { Node } from '@dxos/plugin-graph';
+import { Position } from '@dxos/util';
 
 import { Home, NavBranch } from '#components';
 
-type SurfaceData = {
-  attendableId: string;
-  properties: Record<string, any>;
-};
-
 const ALLOWED_DISPOSITIONS = ['workspace', 'user-account', 'pin-end'];
 
 export default Capability.makeModule(() =>
@@ -25,24 +21,21 @@ export default Capability.makeModule(() =>
     Capability.contributes(Capabilities.ReactSurface, [
       Surface.create({
         id: 'home',
-        role: 'article',
-        filter: (data): data is SurfaceData => data.attendableId === Node.RootId,
+        filter: Surface.makeFilter(AppSurface.Article, (data) => data.attendableId === Node.RootId),
         component: () => <Home />,
       }),
       Surface.create({
         id: 'notFound',
-        role: 'article',
-        filter: (data): data is SurfaceData => data.attendableId === NOT_FOUND_PATH,
+        filter: Surface.makeFilter(AppSurface.Article, (data) => data.attendableId === NotFound.NOT_FOUND_PATH),
         component: () => <NotFoundArticle />,
       }),
       Surface.create({
         id: 'navBranch',
-        role: 'article',
-        position: 'last',
-        filter: (data): data is SurfaceData => {
-          const props = data.properties as Record<string, any>;
-          return ALLOWED_DISPOSITIONS.includes(props?.disposition) || props?.role === 'branch';
-        },
+        position: Position.last,
+        filter: Surface.makeFilter(
+          AppSurface.Article,
+          (data) => ALLOWED_DISPOSITIONS.includes(data.properties?.disposition) || data.properties?.role === 'branch',
+        ),
         component: ({ data }) => <NavBranch id={data.attendableId} />,
       }),
     ]),

package/src/capabilities/url-handler.ts

@@ -5,7 +5,7 @@
 import * as Effect from 'effect/Effect';
 
 import { Capabilities, Capability } from '@dxos/app-framework';
-import { AppCapabilities, LayoutOperation, fromUrlPath, getWorkspaceFromPath, toUrlPath } from '@dxos/app-toolkit';
+import { AppCapabilities, LayoutOperation, Paths } from '@dxos/app-toolkit';
 import { EffectEx } from '@dxos/effect';
 import { log } from '@dxos/log';
 import { isTauri } from '@dxos/util';
@@ -48,8 +48,8 @@ export default Capability.makeModule(
         pathname = '/';
       }
 
-      const qualifiedId = fromUrlPath(pathname);
-      const workspace = getWorkspaceFromPath(qualifiedId);
+      const qualifiedId = Paths.fromUrlPath(pathname);
+      const workspace = Paths.getWorkspaceFromPath(qualifiedId);
 
       void invokePromise(LayoutOperation.SwitchWorkspace, { subject: workspace });
 
@@ -108,7 +108,7 @@ export default Capability.makeModule(
           lastWorkspace = workspace;
           lastActive = active;
 
-          const path = active ? toUrlPath(active) : toUrlPath(workspace);
+          const path = active ? Paths.toUrlPath(active) : Paths.toUrlPath(workspace);
           if (window.location.pathname !== path) {
             history.pushState(null, '', `${path}${window.location.search}`);
           }

package/src/components/Home/Home.tsx

@@ -13,7 +13,7 @@ import { Card } from '@dxos/react-ui';
 import { Mosaic, type MosaicStackTileComponent } from '@dxos/react-ui-mosaic';
 import { SearchPanel, useSearchListItem, useSearchListResults } from '@dxos/react-ui-search';
 import { mx } from '@dxos/ui-theme';
-import { byPosition, getHostPlatform, isTauri } from '@dxos/util';
+import { Position, getHostPlatform, isTauri } from '@dxos/util';
 
 import { meta } from '#meta';
 
@@ -25,7 +25,7 @@ export type HomeProps = {};
  * Home screen.
  */
 export const Home = (_: HomeProps) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const userAccountItem = useItemsByDisposition('user-account')[0];
   const pinnedItems = useItemsByDisposition('pin-end', true);
   const workspaceItems = useItemsByDisposition('workspace');
@@ -64,7 +64,7 @@ export const Home = (_: HomeProps) => {
 
 const WorkspaceTile: MosaicStackTileComponent<Node.Node> = (props) => {
   const data = props.data;
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const { invokePromise } = useOperationInvoker();
   const { selectedValue, registerItem, unregisterItem } = useSearchListItem();
   const name = toLocalizedString(data.properties.label, t);
@@ -104,7 +104,7 @@ const WorkspaceTile: MosaicStackTileComponent<Node.Node> = (props) => {
       onClick={handleSelect}
       ref={cardRef}
     >
-      <Card.Header density='md'>
+      <Card.Header>
         <Avatar.Root>
           <Avatar.Content
             icon={data.properties.icon}
@@ -133,6 +133,6 @@ const useItemsByDisposition = (disposition: string, sort = false) => {
   const connections = useConnections(graph, Node.RootId, 'child');
   return useMemo(() => {
     const filtered = connections.filter((node) => filterItems(node, disposition));
-    return sort ? filtered.toSorted((a, b) => byPosition(a.properties, b.properties)) : filtered;
+    return sort ? filtered.toSorted((a, b) => Position.compare(a.properties, b.properties)) : filtered;
   }, [connections, disposition, sort]);
 };

package/src/components/MobileLayout/MobileLayout.stories.tsx

@@ -65,7 +65,7 @@ const StoryPanel = ({ children, label }: PropsWithChildren<{ label: string }>) =
         </Toolbar.Root>
       </Panel.Toolbar>
       <Panel.Content asChild>
-        <Column.Root gutter='xs' classNames='py-form-chrome'>
+        <Column.Root gutter='sm' classNames='py-form-chrome'>
           <Column.Center>
             <Flex column>
               <Input.Root>
@@ -80,33 +80,33 @@ const StoryPanel = ({ children, label }: PropsWithChildren<{ label: string }>) =
 };
 
 const DefaultStory = () => {
-  const [splitterMode, setSplitterMode] = useState<SplitterMode>('top');
+  const [splitterMode, setSplitterMode] = useState<SplitterMode>('start');
   const [keyboardOpen, setKeyboardOpen] = useState(false);
 
   useEffect(() => {
-    setSplitterMode(splitterMode === 'split' ? 'bottom' : splitterMode);
+    setSplitterMode((current) => (current === 'split' ? 'end' : current));
   }, [keyboardOpen]);
 
   return (
     <WithKeyboard>
       <MobileLayout.Root onKeyboardOpenChange={setKeyboardOpen}>
-        <MobileLayout.Panel safe={{ top: true, bottom: splitterMode === 'top' }}>
-          <Splitter.Root mode={splitterMode} ratio={0.5}>
-            <Splitter.Panel position='top'>
+        <MobileLayout.Panel safe={{ top: true, bottom: splitterMode === 'start' }}>
+          <Splitter.Root orientation='vertical' mode={splitterMode} size={24}>
+            <Splitter.Panel position='start'>
               <StoryPanel label='Main'>
-                {splitterMode === 'top' && (
+                {splitterMode === 'start' && (
                   <Toolbar.IconButton icon='ph--plus--regular' label='Open' onClick={() => setSplitterMode('split')} />
                 )}
               </StoryPanel>
             </Splitter.Panel>
-            <Splitter.Panel position='bottom'>
+            <Splitter.Panel position='end'>
               <StoryPanel label='Drawer'>
                 <Toolbar.IconButton
-                  icon={splitterMode === 'bottom' ? 'ph--arrow-down--regular' : 'ph--arrow-up--regular'}
-                  label={splitterMode === 'bottom' ? 'Collapse' : 'Expand'}
-                  onClick={() => setSplitterMode((splitterMode) => (splitterMode === 'split' ? 'bottom' : 'split'))}
+                  icon={splitterMode === 'end' ? 'ph--arrow-down--regular' : 'ph--arrow-up--regular'}
+                  label={splitterMode === 'end' ? 'Collapse' : 'Expand'}
+                  onClick={() => setSplitterMode((splitterMode) => (splitterMode === 'split' ? 'end' : 'split'))}
                 />
-                <Toolbar.IconButton icon='ph--x--regular' label='Close' onClick={() => setSplitterMode('top')} />
+                <Toolbar.IconButton icon='ph--x--regular' label='Close' onClick={() => setSplitterMode('start')} />
               </StoryPanel>
             </Splitter.Panel>
           </Splitter.Root>

package/src/components/MobileLayout/MobileLayout.tsx

@@ -120,7 +120,7 @@ export const MobileLayout = {
 
 export { useMobileLayout };
 
-export type { MobileLayoutRootProps, MobileLayoutPanelProps };
+export type { MobileLayoutPanelProps, MobileLayoutRootProps };
 
 /**
  * Prevents iOS (WKWebView) from shifting the layout when the keyboard appears.

package/src/components/NavBranch/NavBranch.tsx

@@ -28,7 +28,7 @@ export type NavBranchProps = {
  * spaces, collection sections, type sections, and schema nodes.
  */
 export const NavBranch = ({ id }: NavBranchProps) => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const { graph } = useAppGraph();
 
   useExpandPath(id);
@@ -66,7 +66,7 @@ export const NavBranch = ({ id }: NavBranchProps) => {
 
 const NavBranchTile: MosaicStackTileComponent<Node.Node> = (props) => {
   const data = props.data;
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const { invokePromise } = useOperationInvoker();
   const ref = useRef<HTMLDivElement>(null);
   const { selectedValue, registerItem, unregisterItem } = useSearchListItem();

package/src/components/Popover/Popover.tsx

@@ -55,7 +55,7 @@ export const PopoverRoot = ({ children }: PropsWithChildren) => {
 };
 
 export const PopoverContent = () => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const { state, updateState } = useSimpleLayoutState();
   const { setOpen } = useLayoutPopoverContext('PopoverContent');
   const handleClose = useCallback(() => {
@@ -102,9 +102,11 @@ export const PopoverContent = () => {
         onEscapeKeyDown={handleInteractOutside}
       >
         <Popover.Viewport>
-          {state.popoverKind === 'base' && state.popoverContent && 'component' in state.popoverContent && (
-            <Surface.Surface type={AppSurface.Popover} data={state.popoverContent} limit={1} />
-          )}
+          {(state.popoverKind === 'base' || state.popoverKind === 'rename') &&
+            state.popoverContent &&
+            'component' in state.popoverContent && (
+              <Surface.Surface type={AppSurface.Popover} data={state.popoverContent} limit={1} />
+            )}
           {state.popoverKind === 'card' && (
             <Card.Root border={false} classNames='dx-card-popover'>
               <Card.Header>
@@ -114,7 +116,7 @@ export const PopoverContent = () => {
                 <Card.ActionIconButton action='close' onClick={handleClose} />
               </Card.Header>
               {state.popoverContent && 'subject' in state.popoverContent && (
-                <Surface.Surface type={AppSurface.Card} data={state.popoverContent} limit={1} />
+                <Surface.Surface type={AppSurface.CardContent} data={state.popoverContent} limit={1} />
               )}
             </Card.Root>
           )}

package/src/components/SimpleLayout/AppBar.stories.tsx

@@ -39,11 +39,11 @@ const buildDefaultActions = (): ActionGraphProps => {
   return result;
 };
 
-type DefaultStoryProps = Omit<AppBarProps, 'actions'> & {
+type StoryArgs = Omit<AppBarProps, 'actions'> & {
   actions: ActionGraphProps;
 };
 
-const DefaultStory = ({ actions: actionsProp, ...props }: DefaultStoryProps) => {
+const DefaultStory = ({ actions: actionsProp, ...props }: StoryArgs) => {
   const actions = useMemo(() => Atom.make(actionsProp).pipe(Atom.keepAlive), [actionsProp]);
   return (
     <MobileLayout.Root>
@@ -71,7 +71,7 @@ const meta = {
 
 export default meta;
 
-type Story = StoryObj<DefaultStoryProps>;
+type Story = StoryObj<StoryArgs>;
 
 export const Default: Story = {
   tags: ['test'],

package/src/components/SimpleLayout/AppBar.tsx

@@ -36,7 +36,7 @@ export type AppBarProps = {
  */
 export const AppBar = composable<HTMLDivElement, AppBarProps>(
   ({ classNames, title, actions, showBackButton, popoverAnchorId, onAction, onBack, ...props }, forwardedRef) => {
-    const { t } = useTranslation(meta.id);
+    const { t } = useTranslation(meta.profile.key);
     const menuActions = useMenuActions(actions);
     const actionsValue = useAtomValue(actions);
     const hasActions = actionsValue.nodes.length > 0;
@@ -73,7 +73,7 @@ export const AppBar = composable<HTMLDivElement, AppBarProps>(
           <h1 className='text-center truncate font-thin uppercase'>{displayTitle}</h1>
           {hasActions ? (
             <AnchorRoot>
-              <Menu.Root {...menuActions} caller={meta.id} onAction={onAction}>
+              <Menu.Root {...menuActions} caller={meta.profile.key} onAction={onAction}>
                 <Menu.Trigger asChild>
                   <IconButton
                     variant='ghost'

package/src/components/SimpleLayout/SimpleLayout.tsx

@@ -19,14 +19,14 @@ import { Main } from './Main';
 export const SimpleLayout = () => {
   const { state } = useSimpleLayoutState();
   const [keyboardOpen, setKeyboardOpen] = useState(false);
-  const [splitterMode, setSplitterMode] = useState<SplitterMode>('top');
+  const [splitterMode, setSplitterMode] = useState<SplitterMode>('start');
 
   const drawerRef = useRef<HTMLDivElement>(null);
 
   // Restore Splitter mode when keyboard closes.
   useLayoutEffect(() => {
     if (!keyboardOpen) {
-      setSplitterMode(state.drawerState === 'closed' ? 'top' : state.drawerState === 'open' ? 'split' : 'bottom');
+      setSplitterMode(state.drawerState === 'closed' ? 'start' : state.drawerState === 'open' ? 'split' : 'end');
     }
   }, [state.drawerState, keyboardOpen]);
 
@@ -38,12 +38,12 @@ export const SimpleLayout = () => {
             classNames='dx-container grid relative bg-toolbar-surface'
             onKeyboardOpenChange={(nextKeyboardOpen) => setKeyboardOpen(nextKeyboardOpen)}
           >
-            <MobileLayout.Panel safe={{ top: true, bottom: splitterMode === 'top' }}>
-              <Splitter.Root mode={splitterMode} ratio={0.55}>
-                <Splitter.Panel position='top'>
+            <MobileLayout.Panel safe={{ top: true, bottom: splitterMode === 'start' }}>
+              <Splitter.Root orientation='vertical' mode={splitterMode} size={24}>
+                <Splitter.Panel position='start'>
                   <Main />
                 </Splitter.Panel>
-                <Splitter.Panel position='bottom' ref={drawerRef}>
+                <Splitter.Panel position='end' ref={drawerRef}>
                   <Drawer />
                 </Splitter.Panel>
               </Splitter.Root>

package/src/hooks/actions.ts

@@ -9,7 +9,7 @@ import { type AppCapabilities } from '@dxos/app-toolkit';
 import { Node } from '@dxos/plugin-graph';
 import { getLinkedVariant } from '@dxos/react-ui-attention';
 import { type ActionGraphProps } from '@dxos/react-ui-menu';
-import { byPosition } from '@dxos/util';
+import { Position } from '@dxos/util';
 
 import { SimpleLayoutCapabilities } from '#types';
 
@@ -48,7 +48,7 @@ export const createCompanionActions = (
   const activeConnections = activeId ? get(graph.connections(activeId, 'child')) : [];
   const companions = activeConnections
     .filter((node: Node.Node) => node.type === PLANK_COMPANION_TYPE)
-    .toSorted((a: Node.Node, b: Node.Node) => byPosition(a.properties, b.properties));
+    .toSorted((a: Node.Node, b: Node.Node) => Position.compare(a.properties, b.properties));
 
   const nodes: ActionGraphProps['nodes'] = [];
   const edges: ActionGraphProps['edges'] = [];

package/src/hooks/useAppBarProps.ts

@@ -22,7 +22,7 @@ import { SimpleLayoutCapabilities } from '#types';
  * Derives activeId from state atom. Returns props ready to spread into the AppBar component.
  */
 export const useAppBarProps = (): Omit<AppBarProps, 'classNames'> => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const stateAtom = useCapability(SimpleLayoutCapabilities.State);
   const state = useAtomValue(stateAtom);
   const { graph } = useAppGraph();
@@ -82,7 +82,8 @@ export const useAppBarProps = (): Omit<AppBarProps, 'classNames'> => {
   }, [graph, invokePromise, state.active, state.history.length]);
 
   // Compute popover anchor ID.
-  const popoverAnchorId = node && state.popoverAnchorId === `${meta.id}:${node.id}` ? state.popoverAnchorId : undefined;
+  const popoverAnchorId =
+    node && state.popoverAnchorId === `${meta.profile.key}:${node.id}` ? state.popoverAnchorId : undefined;
 
   return {
     title,

package/src/hooks/useCompanions.ts

@@ -6,7 +6,7 @@ import { useMemo } from 'react';
 
 import { useAppGraph } from '@dxos/app-toolkit/ui';
 import { useConnections } from '@dxos/plugin-graph';
-import { byPosition } from '@dxos/util';
+import { Position } from '@dxos/util';
 
 import { PLANK_COMPANION_TYPE } from './actions';
 
@@ -18,5 +18,5 @@ export const useCompanions = (nodeId?: string) => {
   const { graph } = useAppGraph();
   const nodes = useConnections(graph, nodeId, 'child');
   const companions = nodes.filter((node) => node.type === PLANK_COMPANION_TYPE);
-  return useMemo(() => companions.toSorted((a, b) => byPosition(a.properties, b.properties)), [companions]);
+  return useMemo(() => companions.toSorted((a, b) => Position.compare(a.properties, b.properties)), [companions]);
 };

package/src/hooks/useDrawerActions.ts

@@ -30,7 +30,7 @@ export type DrawerActions = {
  * Builds the drawer actions including companion tabs and toolbar buttons.
  */
 export const useDrawerActions = (consumerName: string): DrawerActions => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const stateAtom = useCapability(SimpleLayoutCapabilities.State);
   const { graph } = useAppGraph();
   const runAction = useActionRunner();

package/src/hooks/useNavbarActions.ts

@@ -36,7 +36,7 @@ export type NavbarActions = {
  * Derives everything from graph connection atoms for proper reactivity.
  */
 export const useNavbarActions = (): NavbarActions => {
-  const { t } = useTranslation(meta.id);
+  const { t } = useTranslation(meta.profile.key);
   const { graph } = useAppGraph();
   const runAction = useActionRunner();
   const stateAtom = useCapability(SimpleLayoutCapabilities.State);

package/src/meta.ts

@@ -3,17 +3,7 @@
 //
 
 import { Plugin } from '@dxos/app-framework';
-import { DXN } from '@dxos/keys';
-import { trim } from '@dxos/util';
 
-export const meta = Plugin.makeMeta({
-  key: DXN.make('org.dxos.plugin.simpleLayout'),
-  name: 'Simple Layout',
-  author: 'DXOS',
-  description: trim`
-    Minimal layout plugin for simplified UI contexts like popover windows.
-    Provides basic content rendering without sidebars or complex navigation.
-  `,
-  icon: 'ph--layout--regular',
-  tags: ['system'],
-});
+import config from '../dx.config';
+
+export const meta = Plugin.getMetaFromConfig(config);

package/src/operations/open.ts

@@ -3,12 +3,7 @@
 import * as Effect from 'effect/Effect';
 
 import { Capability } from '@dxos/app-framework';
-import {
-  AppCapabilities,
-  LayoutOperation,
-  createEdgeExistenceChecker,
-  validateNavigationTarget,
-} from '@dxos/app-toolkit';
+import { AppCapabilities, LayoutOperation, NotFound } from '@dxos/app-toolkit';
 import { Operation } from '@dxos/compute';
 import { Context } from '@dxos/context';
 import { Database, EID } from '@dxos/echo';
@@ -47,13 +42,15 @@ const handler: Operation.WithHandler<typeof LayoutOperation.Open> = LayoutOperat
           }
         : undefined;
       const checkRemoteExistence = client
-        ? createEdgeExistenceChecker((spaceId, body) => client.edge.http.execQuery(new Context(), spaceId, body))
+        ? NotFound.createEdgeExistenceChecker((spaceId, body) =>
+            client.edge.http.execQuery(new Context(), spaceId, body),
+          )
         : undefined;
 
       const validatedId =
         input.navigation === 'immediate'
           ? id
-          : yield* validateNavigationTarget({
+          : yield* NotFound.validateNavigationTarget({
               graph,
               subjectId: id,
               pathResolvers,

package/src/operations/switch-workspace.ts

@@ -2,7 +2,7 @@
 
 import * as Effect from 'effect/Effect';
 
-import { isPinnedWorkspace, LayoutOperation } from '@dxos/app-toolkit';
+import { LayoutOperation, Paths } from '@dxos/app-toolkit';
 import { Operation } from '@dxos/compute';
 
 import { layoutStateAccess } from './state-access';
@@ -14,7 +14,7 @@ const handler: Operation.WithHandler<typeof LayoutOperation.SwitchWorkspace> = L
 
       updateState((state) => ({
         ...state,
-        previousWorkspace: !isPinnedWorkspace(state.workspace) ? state.workspace : state.previousWorkspace,
+        previousWorkspace: !Paths.isPinnedWorkspace(state.workspace) ? state.workspace : state.previousWorkspace,
         workspace: input.subject,
         active: undefined,
         history: [],

package/src/translations.ts

@@ -11,9 +11,8 @@ export const translations = [
   ...searchTranslations,
   {
     'en-US': {
-      [meta.id]: {
+      [meta.profile.key]: {
         'plugin.name': 'Simple layout',
-        'settings.title': 'Simple layout settings',
         'workspaces.heading': 'Workspaces',
         'settings.heading': 'Settings',
         'back.label': 'Back',

package/src/types/SimpleLayoutCapabilities.ts

@@ -29,7 +29,7 @@ export type SimpleLayoutState = {
   popoverVariant?: 'virtual' | 'react';
   popoverAnchor?: HTMLButtonElement;
   popoverAnchorId?: string;
-  popoverKind?: 'base' | 'card';
+  popoverKind?: 'base' | 'card' | 'rename';
   popoverTitle?: Label;
   popoverContent?: { component: string; props?: any } | { subject: any } | null;
   drawerState: DrawerState;
@@ -38,4 +38,4 @@ export type SimpleLayoutState = {
   companionVariant?: string;
 };
 
-export const State = Capability.make<Atom.Writable<SimpleLayoutState>>(`${meta.id}.state`);
+export const State = Capability.make<Atom.Writable<SimpleLayoutState>>(`${meta.profile.key}.state`);

package/dist/lib/neutral/chunk-FD2CAY4Q.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/types/SimpleLayoutCapabilities.ts", "../../../src/types/SimpleLayoutEvents.ts"],
-  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\n// @import-as-namespace\n\nimport { type Atom } from '@effect-atom/atom-react';\n\nimport { Capability } from '@dxos/app-framework';\nimport { type Label } from '@dxos/react-ui';\n\nimport { meta } from '#meta';\n\nexport type DrawerState = 'closed' | 'open' | 'expanded';\n\nexport type SimpleLayoutState = {\n  content?: any;\n  previousWorkspace: string;\n  workspace: string;\n  active?: string;\n  dialogOpen: boolean;\n  dialogType?: 'default' | 'alert';\n  dialogBlockAlign?: 'start' | 'center' | 'end';\n  dialogOverlayClasses?: string;\n  dialogOverlayStyle?: Record<string, any>;\n  dialogContent?: { component: string; props?: any } | null;\n  popoverOpen?: boolean;\n  popoverSide?: 'top' | 'right' | 'bottom' | 'left';\n  popoverVariant?: 'virtual' | 'react';\n  popoverAnchor?: HTMLButtonElement;\n  popoverAnchorId?: string;\n  popoverKind?: 'base' | 'card';\n  popoverTitle?: Label;\n  popoverContent?: { component: string; props?: any } | { subject: any } | null;\n  drawerState: DrawerState;\n  history: string[];\n  isPopover?: boolean;\n  companionVariant?: string;\n};\n\nexport const State = Capability.make<Atom.Writable<SimpleLayoutState>>(`${meta.id}.state`);\n", "//\n// Copyright 2025 DXOS.org\n//\n\n// @import-as-namespace\n\nimport { type ActivationEvent } from '@dxos/app-framework';\nimport { AppActivationEvents } from '@dxos/app-toolkit';\n\nimport * as SimpleLayoutCapabilities from './SimpleLayoutCapabilities';\n\n/** Fired when State capability is ready. */\nexport const StateReady: ActivationEvent.ActivationEvent = AppActivationEvents.createStateEvent(\n  SimpleLayoutCapabilities.State.identifier,\n);\n"],
-  "mappings": ";;;;;AAAA;;;;AAQA,SAASA,kBAAkB;AAG3B,SAASC,YAAY;AA6Bd,IAAMC,QAAQF,WAAWG,KAAuC,GAAGF,KAAKG,EAAE,QAAQ;;;ACxCzF;;;;AAOA,SAASC,2BAA2B;AAK7B,IAAMC,aAA8CC,oBAAoBC,iBACpDC,MAAMC,UAAU;",
-  "names": ["Capability", "meta", "State", "make", "id", "AppActivationEvents", "StateReady", "AppActivationEvents", "createStateEvent", "State", "identifier"]
-}