@mutmutco/pi-plugin 4.5.180 → 4.5.181

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mutmutco/pi-plugin",
-  "version": "4.5.180",
+  "version": "4.5.181",
   "description": "MMI workflow skills and org gates delivery.",
   "author": {
     "name": "MMI Future",

package/skills/bootstrap/seeds/suite-module-package.template.json

@@ -5,7 +5,7 @@
   "type": "module",
   "description": "MM-Work module",
   "scripts": {
-    "lint": "mmwork-check-ui src",
+    "lint": "mmwork-check-ui --rules=all src",
     "build": "vite build",
     "dev": "vite build --watch",
     "serve": "vite preview --port 5301",

package/skills/bootstrap/seeds/suite-module.template.jsx

@@ -2,7 +2,22 @@
 // It is built with mmworkModule() (vite.config.mjs), uses only the shared design system, and reaches Drive
 // through MM-Work's surface actions, never its own Google access.
 import { useEffect, useState } from 'react';
-import { Button, Card, Cluster, DataList, Page, Stack, Text } from '@mutmutco/mmwork-ds';
+import {
+  Button,
+  Card,
+  Cluster,
+  Dashboard,
+  DashboardSection,
+  DataList,
+  DetailPage,
+  FormPage,
+  List,
+  ListPage,
+  ListRow,
+  SettingRow,
+  Stack,
+  Text,
+} from '@mutmutco/mmwork-ds';
 
 export const manifest = { id: '{{REPO_SLUG}}', name: '{{REPO_NAME}}' };
 
@@ -11,7 +26,7 @@ export const manifest = { id: '{{REPO_SLUG}}', name: '{{REPO_NAME}}' };
 //   { key: 'welcome', label: 'Welcome message', type: 'text', default: 'Hello', admin: true }
 // ] }] }`. MM-Work draws those choices; ctx.settings.get('compact') reads the effective value.
 // Declare `search: { title: 'Example module' }` and `sections: [{ label: 'Home', path: '/' },
-// { label: 'Details', path: '/details' }]` in the registry. Results are data, not rendered rows.
+// { label: 'Items', path: '/items' }, { label: 'Details', path: '/details' }, { label: 'Settings', path: '/settings' }]` in the registry. Results are data, not rendered rows.
 export const search = {
   find: async (query, ctx, signal) => {
     if (signal.aborted) return { results: [] };
@@ -56,26 +71,95 @@ export default function ExampleModule({ ctx }) {
       .catch(() => setFailed(true));
   }, [ctx]);
 
+  const rows = [
+    { label: 'Workspace', value: ctx.workspace.name },
+    { label: 'Address in MM-Work', value: `${ctx.base}${ctx.path === '/' ? '' : ctx.path}` },
+    { label: 'Recent files (files.list)', value: failed ? 'Drive is not connected' : files === null ? 'Loading…' : String(files.length) },
+    { label: 'Review files job', value: ctx.can('files.review') ? 'Held' : 'Not held' },
+  ];
+
+  if (ctx.path === '/items') {
+    return (
+      <ListPage
+        title="Items"
+        description="Recent files from your connected Google Drive."
+        primary={{ label: 'Open details', onClick: () => ctx.navigate(`${ctx.base}/details`) }}
+        busy={!failed && files === null}
+      >
+        <List label="Items">
+          {(files ?? []).map((file, i) => (
+            <ListRow
+              key={file.id ?? i}
+              title={file.name}
+              meta="Recent files"
+              onClick={() => ctx.navigate(`${ctx.base}/details`)}
+            />
+          ))}
+        </List>
+      </ListPage>
+    );
+  }
+
+  if (ctx.path === '/details') {
+    return (
+      <DetailPage
+        title="Details"
+        description="One item inside the module."
+        back={{ label: 'Home', onClick: () => ctx.navigate(ctx.base) }}
+        aside={<DataList rows={rows} />}
+        asideLabel="About this item"
+      >
+        <Text as="p" variant="body" measure="body">
+          This detail view uses DetailPage with the module facts in its hideable aside column.
+        </Text>
+      </DetailPage>
+    );
+  }
+
+  if (ctx.path === '/settings') {
+    return (
+      <FormPage
+        title="Settings"
+        description="Display preferences for this module."
+        back={{ label: 'Home', onClick: () => ctx.navigate(ctx.base) }}
+      >
+        <DashboardSection title="Display" card>
+          <SettingRow
+            label="Compact view"
+            description="Show denser rows in this module."
+            value={ctx.settings?.get?.('compact') ? 'On' : 'Off'}
+          />
+          <SettingRow
+            label="Welcome message"
+            description="Greeting shown on the module home screen."
+            value={ctx.settings?.get?.('welcome') ?? 'Hello'}
+          />
+        </DashboardSection>
+      </FormPage>
+    );
+  }
+
   return (
-    <Page title={`Hello, ${ctx.person.name ?? ctx.person.email}`} width="narrow">
+    <Dashboard
+      title={`Hello, ${ctx.person.name ?? ctx.person.email}`}
+      description="Module overview and workspace connection."
+      primary={{ label: 'Open details', onClick: () => ctx.navigate(`${ctx.base}/details`) }}
+    >
       <Stack gap="groups">
         <Text as="p" variant="lead" data-tour="example-intro">
           This screen comes from a module's own bundle. It uses MM-Work's React and design system, and reads Drive through MM-Work.
         </Text>
         <Card data-tour="example-overview" title="What the module sees" icon="info">
-          <DataList rows={[
-            { label: 'Workspace', value: ctx.workspace.name },
-            { label: 'Address in MM-Work', value: `${ctx.base}${ctx.path === '/' ? '' : ctx.path}` },
-            { label: 'Recent files (files.list)', value: failed ? 'Drive is not connected' : files === null ? 'Loading…' : String(files.length) },
-            { label: 'Review files job', value: ctx.can('files.review') ? 'Held' : 'Not held' },
-          ]} />
+          <DataList rows={rows} />
         </Card>
         <Cluster data-tour="example-actions">
+          <Button variant="secondary" onClick={() => ctx.navigate(`${ctx.base}/items`)}>Browse items</Button>
           <Button variant="secondary" onClick={() => ctx.navigate(`${ctx.base}/details`)}>Open a page inside the module</Button>
+          <Button variant="secondary" onClick={() => ctx.navigate(`${ctx.base}/settings`)}>Settings</Button>
           <Button variant="ghost" onClick={() => ctx.navigate('/files')}>Go to Files</Button>
         </Cluster>
       </Stack>
-    </Page>
+    </Dashboard>
   );
 }