@ossy/app 3.16.0 → 3.18.0

package/cli/manifest-plugin.js

@@ -609,7 +609,28 @@ export function manifestPlugin ({ entriesByStub, srcDir, staticOutDir, configVal
               'Assign components to app slots in `*.layout.jsx` via `export const slots`.',
             )
           }
-          components.push(withSourcePath({ id, entry: url, package: entryPackage(entryInfo, appPackageName) }, entryInfo, projectRoot))
+          /** @type {Record<string, unknown>} */
+          const componentEntry = {
+            id,
+            entry: url,
+            package: entryPackage(entryInfo, appPackageName),
+          }
+          const widget = rawMeta.widget
+          if (widget && typeof widget === 'object' && !Array.isArray(widget)) {
+            const title = typeof widget.title === 'string'
+              ? widget.title.trim()
+              : ''
+            const description = typeof widget.description === 'string'
+              ? widget.description.trim()
+              : ''
+            if (title) {
+              componentEntry.widget = {
+                title,
+                ...(description ? { description } : {}),
+              }
+            }
+          }
+          components.push(withSourcePath(componentEntry, entryInfo, projectRoot))
           continue
         }
 
@@ -780,6 +801,17 @@ export function manifestPlugin ({ entriesByStub, srcDir, staticOutDir, configVal
         }
       }
 
+      const widgets = components
+        .filter((component) => component?.widget?.title)
+        .map((component) => ({
+          componentId: component.id,
+          title: component.widget.title,
+          ...(component.widget.description
+            ? { description: component.widget.description }
+            : {}),
+          ...(component.package ? { package: component.package } : {}),
+        }))
+
       const manifest = {
         entries,
         components,
@@ -798,6 +830,7 @@ export function manifestPlugin ({ entriesByStub, srcDir, staticOutDir, configVal
         actionRoutes,
         taskCatalog,
         taskGraphEdges,
+        widgets,
       }
       fs.mkdirSync(path.dirname(manifestPath), { recursive: true })
       fs.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2), 'utf8')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ossy/app",
-  "version": "3.16.0",
+  "version": "3.18.0",
   "description": "",
   "source": "./src/index.js",
   "main": "./src/index.js",
@@ -50,21 +50,21 @@
     "@babel/preset-react": "^7.26.3",
     "@babel/register": "^7.25.9",
     "@ossy/authentication": "^3.11.1",
-    "@ossy/design-system": "^3.16.0",
+    "@ossy/design-system": "^3.18.0",
     "@ossy/locale": "^3.4.0",
-    "@ossy/manifest": "^3.16.0",
-    "@ossy/package-catalog": "^3.16.0",
+    "@ossy/manifest": "^3.18.0",
+    "@ossy/package-catalog": "^3.18.0",
     "@ossy/pages": "^3.0.9",
-    "@ossy/platform": "^3.16.0",
-    "@ossy/resources": "^3.16.0",
+    "@ossy/platform": "^3.18.0",
+    "@ossy/resources": "^3.18.0",
     "@ossy/router": "^3.0.9",
-    "@ossy/router-react": "^3.16.0",
-    "@ossy/schema": "^3.16.0",
-    "@ossy/sdk": "^3.16.0",
+    "@ossy/router-react": "^3.18.0",
+    "@ossy/schema": "^3.18.0",
+    "@ossy/sdk": "^3.18.0",
     "@ossy/sdk-react": "^3.12.0",
-    "@ossy/themes": "^3.8.0",
-    "@ossy/users": "^3.16.0",
-    "@ossy/workspaces": "^3.16.0",
+    "@ossy/themes": "^3.18.0",
+    "@ossy/users": "^3.18.0",
+    "@ossy/workspaces": "^3.18.0",
     "@rollup/plugin-alias": "^6.0.0",
     "@rollup/plugin-babel": "^7.1.0",
     "@rollup/plugin-commonjs": "^29.0.0",
@@ -98,5 +98,5 @@
     "README.md",
     "tsconfig.json"
   ],
-  "gitHead": "1872fb1467bf656284aae35881c34960c3860807"
+  "gitHead": "8ceef98795a01c3b3486034db1d3b72b4350ccf1"
 }

package/src/shell/AppSettings.jsx

@@ -46,6 +46,11 @@ export function defaultAppSettings() {
       /** Task catalog from `app build` (ADR 0011) — for automation topology UI. */
       taskCatalog: undefined,
       taskGraphEdges: undefined,
+      /**
+       * Dashboard pin catalog from `app build` — components that export
+       * `metadata.widget` (any package can register).
+       */
+      widgets: undefined,
       /** Action id → HTTP route map for sdk.invoke transport routing. */
       actionRoutes: undefined,
       /**
@@ -54,5 +59,13 @@ export function defaultAppSettings() {
        * need live cross-tab cache updates (see @ossy/sdk-react README).
        */
       enablePushInvalidation: false,
+      /**
+       * SSR-only device hint (`Sec-CH-UA-Mobile` client hint / UA sniff —
+       * see `@ossy/platform`'s `detectMobileDevice`). Seeds
+       * `useCompactShellLayout`'s `getServerSnapshot` so mobile requests
+       * don't flash the desktop sidenav before hydration resolves the
+       * real `matchMedia` value (#871).
+       */
+      isMobileDevice: false,
     }
   }

package/src/shell/useCompactShellLayout.js

@@ -1,5 +1,6 @@
-import { useSyncExternalStore } from 'react'
+import { useCallback, useSyncExternalStore } from 'react'
 import { COMPACT_SHELL_MEDIA_QUERY } from './shellChrome.js'
+import { useApp } from './AppContext.js'
 
 export { COMPACT_SHELL_MEDIA_QUERY }
 
@@ -15,10 +16,20 @@ function getSnapshot () {
   return window.matchMedia(COMPACT_SHELL_MEDIA_QUERY).matches
 }
 
-function getServerSnapshot () {
-  return false
-}
-
+/**
+ * Resolves whether the app shell should render compact (mobile) chrome.
+ *
+ * `getServerSnapshot` is seeded from `AppContext.isMobileDevice` — a
+ * server-computed guess based on the `Sec-CH-UA-Mobile` client hint /
+ * User-Agent (see `@ossy/platform`'s `detectMobileDevice`) — instead of
+ * hardcoding `false`. Without this, SSR always assumed desktop, so mobile
+ * requests rendered the full desktop sidenav and snapped closed on
+ * hydration (#871). The client still re-resolves the real value via
+ * `matchMedia` once mounted; a wrong guess only causes one corrective
+ * re-render instead of a guaranteed flash on every mobile page load.
+ */
 export function useCompactShellLayout () {
+  const { isMobileDevice } = useApp()
+  const getServerSnapshot = useCallback(() => isMobileDevice === true, [isMobileDevice])
   return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
 }

package/src/shell-registry/header-default.component.jsx

@@ -33,10 +33,11 @@ export default function DefaultHeader ({
       {...rest}
       far={(
         <View
-          layout="row"
+          layout="row-wrap"
           style={{
-            flexShrink: 0,
+            minWidth: 0,
             alignItems: 'center',
+            justifyContent: 'flex-end',
             gap: compact ? 'var(--space-xs)' : 'var(--space-s)',
           }}
         >