@dxos/plugin-simple-layout 0.9.1-main.c7dcc2e112 → 0.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxos/plugin-simple-layout",
-  "version": "0.9.1-main.c7dcc2e112",
+  "version": "0.10.0",
   "description": "Simple layout plugin for minimal UI contexts like popover windows.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
@@ -81,46 +81,46 @@
     "@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.1-main.c7dcc2e112",
-    "@dxos/app-framework": "0.9.1-main.c7dcc2e112",
-    "@dxos/app-toolkit": "0.9.1-main.c7dcc2e112",
-    "@dxos/context": "0.9.1-main.c7dcc2e112",
-    "@dxos/compute": "0.9.1-main.c7dcc2e112",
-    "@dxos/echo": "0.9.1-main.c7dcc2e112",
-    "@dxos/effect": "0.9.1-main.c7dcc2e112",
-    "@dxos/log": "0.9.1-main.c7dcc2e112",
-    "@dxos/keys": "0.9.1-main.c7dcc2e112",
-    "@dxos/plugin-graph": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-menu": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-attention": "0.9.1-main.c7dcc2e112",
-    "@dxos/plugin-client": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-mosaic": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui-search": "0.9.1-main.c7dcc2e112",
-    "@dxos/util": "0.9.1-main.c7dcc2e112"
+    "@dxos/app-framework": "0.10.0",
+    "@dxos/async": "0.10.0",
+    "@dxos/app-toolkit": "0.10.0",
+    "@dxos/echo": "0.10.0",
+    "@dxos/effect": "0.10.0",
+    "@dxos/keys": "0.10.0",
+    "@dxos/log": "0.10.0",
+    "@dxos/plugin-graph": "0.10.0",
+    "@dxos/plugin-client": "0.10.0",
+    "@dxos/react-ui-attention": "0.10.0",
+    "@dxos/react-ui-menu": "0.10.0",
+    "@dxos/react-ui-mosaic": "0.10.0",
+    "@dxos/react-ui-search": "0.10.0",
+    "@dxos/util": "0.10.0",
+    "@dxos/context": "0.10.0",
+    "@dxos/compute": "0.10.0"
   },
   "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.1-main.c7dcc2e112",
-    "@dxos/plugin-preview": "0.9.1-main.c7dcc2e112",
-    "@dxos/plugin-search": "0.9.1-main.c7dcc2e112",
-    "@dxos/plugin-space": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui": "0.9.1-main.c7dcc2e112",
-    "@dxos/plugin-testing": "0.9.1-main.c7dcc2e112",
-    "@dxos/schema": "0.9.1-main.c7dcc2e112",
-    "@dxos/storybook-utils": "0.9.1-main.c7dcc2e112",
-    "@dxos/ui-theme": "0.9.1-main.c7dcc2e112"
+    "@dxos/app-graph": "0.10.0",
+    "@dxos/plugin-preview": "0.10.0",
+    "@dxos/plugin-search": "0.10.0",
+    "@dxos/plugin-space": "0.10.0",
+    "@dxos/plugin-testing": "0.10.0",
+    "@dxos/react-ui": "0.10.0",
+    "@dxos/schema": "0.10.0",
+    "@dxos/storybook-utils": "0.10.0",
+    "@dxos/ui-theme": "0.10.0"
   },
   "peerDependencies": {
-    "effect": "3.21.3",
-    "react": "~19.2.3",
-    "react-dom": "~19.2.3",
-    "@dxos/ui-theme": "0.9.1-main.c7dcc2e112",
-    "@dxos/react-ui": "0.9.1-main.c7dcc2e112"
+    "effect": "3.21.4",
+    "react": "~19.2.7",
+    "react-dom": "~19.2.7",
+    "@dxos/react-ui": "0.10.0",
+    "@dxos/ui-theme": "0.10.0"
   },
   "publishConfig": {
     "access": "public"

package/src/capabilities/react-surface.tsx

@@ -10,6 +10,7 @@ import { Surface } from '@dxos/app-framework/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';
 
@@ -30,7 +31,7 @@ export default Capability.makeModule(() =>
       }),
       Surface.create({
         id: 'navBranch',
-        position: 'last',
+        position: Position.last,
         filter: Surface.makeFilter(
           AppSurface.Article,
           (data) => ALLOWED_DISPOSITIONS.includes(data.properties?.disposition) || data.properties?.role === 'branch',

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';
 
@@ -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/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/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/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/translations.ts

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

package/dist/lib/neutral/react-surface-GV3O3I25.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../src/capabilities/react-surface.tsx"],
-  "sourcesContent": ["//\n// Copyright 2025 DXOS.org\n//\n\nimport * as Effect from 'effect/Effect';\nimport React from 'react';\n\nimport { Capabilities, Capability } from '@dxos/app-framework';\nimport { Surface } from '@dxos/app-framework/ui';\nimport { NotFound } from '@dxos/app-toolkit';\nimport { AppSurface, NotFoundArticle } from '@dxos/app-toolkit/ui';\nimport { Node } from '@dxos/plugin-graph';\n\nimport { Home, NavBranch } from '#components';\n\nconst ALLOWED_DISPOSITIONS = ['workspace', 'user-account', 'pin-end'];\n\nexport default Capability.makeModule(() =>\n  Effect.succeed(\n    Capability.contributes(Capabilities.ReactSurface, [\n      Surface.create({\n        id: 'home',\n        filter: Surface.makeFilter(AppSurface.Article, (data) => data.attendableId === Node.RootId),\n        component: () => <Home />,\n      }),\n      Surface.create({\n        id: 'notFound',\n        filter: Surface.makeFilter(AppSurface.Article, (data) => data.attendableId === NotFound.NOT_FOUND_PATH),\n        component: () => <NotFoundArticle />,\n      }),\n      Surface.create({\n        id: 'navBranch',\n        position: 'last',\n        filter: Surface.makeFilter(\n          AppSurface.Article,\n          (data) => ALLOWED_DISPOSITIONS.includes(data.properties?.disposition) || data.properties?.role === 'branch',\n        ),\n        component: ({ data }) => <NavBranch id={data.attendableId} />,\n      }),\n    ]),\n  ),\n);\n"],
-  "mappings": ";;;AAIA,YAAYA,YAAY;AACxB,OAAOC,WAAW;AAElB,SAASC,cAAcC,kBAAkB;AACzC,SAASC,eAAe;AACxB,SAASC,gBAAgB;AACzB,SAASC,YAAYC,uBAAuB;AAC5C,SAASC,YAAY;AAErB,SAASC,MAAMC,iBAAiB;AAEhC,IAAMC,uBAAuB;EAAC;EAAa;EAAgB;;AAE3D,IAAA,wBAAeR,WAAWS,WAAW,MAC5BC,eACLV,WAAWW,YAAYZ,aAAaa,cAAc;EAChDX,QAAQY,OAAO;IACbC,IAAI;IACJC,QAAQd,QAAQe,WAAWb,WAAWc,SAAS,CAACC,SAASA,KAAKC,iBAAiBd,KAAKe,MAAM;IAC1FC,WAAW,MAAM,sBAAA,cAACf,MAAAA,IAAAA;EACpB,CAAA;EACAL,QAAQY,OAAO;IACbC,IAAI;IACJC,QAAQd,QAAQe,WAAWb,WAAWc,SAAS,CAACC,SAASA,KAAKC,iBAAiBjB,SAASoB,cAAc;IACtGD,WAAW,MAAM,sBAAA,cAACjB,iBAAAA,IAAAA;EACpB,CAAA;EACAH,QAAQY,OAAO;IACbC,IAAI;IACJS,UAAU;IACVR,QAAQd,QAAQe,WACdb,WAAWc,SACX,CAACC,SAASV,qBAAqBgB,SAASN,KAAKO,YAAYC,WAAAA,KAAgBR,KAAKO,YAAYE,SAAS,QAAA;IAErGN,WAAW,CAAC,EAAEH,KAAI,MAAO,sBAAA,cAACX,WAAAA;MAAUO,IAAII,KAAKC;;EAC/C,CAAA;CACD,CAAA,CAAA;",
-  "names": ["Effect", "React", "Capabilities", "Capability", "Surface", "NotFound", "AppSurface", "NotFoundArticle", "Node", "Home", "NavBranch", "ALLOWED_DISPOSITIONS", "makeModule", "succeed", "contributes", "ReactSurface", "create", "id", "filter", "makeFilter", "Article", "data", "attendableId", "RootId", "component", "NOT_FOUND_PATH", "position", "includes", "properties", "disposition", "role"]
-}