@ossy/app 1.40.3 → 3.0.2

package/src/manifest/resolve-page-layout.js

@@ -0,0 +1,51 @@
+import { mergeShellSlots } from '../../runtime/merge-shell-slots.js'
+
+const LAYOUT_ID_PATTERN = /^@([^/]+)\/([^/]+)\/layout\/([^/]+)$/
+
+/**
+ * @param {string} layoutId
+ * @returns {boolean}
+ */
+export function isCanonicalLayoutId (layoutId) {
+  return typeof layoutId === 'string' && LAYOUT_ID_PATTERN.test(layoutId.trim())
+}
+
+/**
+ * Resolve layout id for a page at build time (ADR 0012).
+ *
+ * @param {{
+ *   pageMetadata?: { layout?: string },
+ *   appConfig?: { layout?: string },
+ * }} options
+ * @returns {string}
+ */
+export function resolvePageLayoutId ({
+  pageMetadata = {},
+  appConfig = {},
+} = {}) {
+  const pageLayout = pageMetadata?.layout
+  if (typeof pageLayout === 'string' && pageLayout.trim()) return pageLayout.trim()
+
+  const appLayout = appConfig?.layout
+  if (typeof appLayout === 'string' && appLayout.trim()) return appLayout.trim()
+
+  return '@ossy/app/layout/default'
+}
+
+/**
+ * Merge layout, app, and page slot maps for a single page render.
+ *
+ * @param {{
+ *   layoutSlots?: Record<string, string>,
+ *   appSlots?: Record<string, string | null>,
+ *   pageSlots?: Record<string, string | null>,
+ * }} options
+ * @returns {Record<string, import('../../runtime/merge-shell-slots.js').ShellSlotSpec>}
+ */
+export function resolvePageShellSlots ({
+  layoutSlots,
+  appSlots,
+  pageSlots,
+} = {}) {
+  return mergeShellSlots(layoutSlots, appSlots, pageSlots)
+}

package/src/manifest/serialize-package-definition.js

@@ -1,30 +1 @@
-/**
- * Pick JSON-serializable Definition fields for manifest / SSR bootstrap.
- * Definition holds module presentation metadata only — capabilities live in manifestSummary.
- *
- * @param {object | null | undefined} definition
- * @returns {object | null}
- */
-export function serializePackageDefinition (definition) {
-  if (!definition || typeof definition !== 'object' || Array.isArray(definition)) return null
-
-  /** @type {Record<string, unknown>} */
-  const out = {}
-
-  if (typeof definition.id === 'string' && definition.id.trim()) out.id = definition.id.trim()
-  if (typeof definition.title === 'string' && definition.title.trim()) out.title = definition.title.trim()
-  if (typeof definition.description === 'string' && definition.description.trim()) {
-    out.description = definition.description.trim()
-  }
-  if (typeof definition.icon === 'string' && definition.icon.trim()) out.icon = definition.icon.trim()
-  if (typeof definition.navOrder === 'number' && Number.isFinite(definition.navOrder)) {
-    out.navOrder = definition.navOrder
-  }
-  if (definition.entitlementRequired === false) out.entitlementRequired = false
-  if (typeof definition.status === 'string' && definition.status.trim()) out.status = definition.status.trim()
-  if (Array.isArray(definition.statuses) && definition.statuses.length) {
-    out.statuses = definition.statuses.filter((s) => typeof s === 'string' && s.trim()).map((s) => s.trim())
-  }
-
-  return Object.keys(out).length ? out : null
-}
+export * from '@ossy/manifest/serialize-package-definition'

package/src/shell/App.jsx

@@ -2,20 +2,22 @@ import React from 'react'
 import { SDK } from '@ossy/sdk'
 import { WorkspaceProvider } from '@ossy/sdk-react'
 import { Theme, ComponentSlotsProvider, LocaleProvider, DEFAULT_FORM_FIELD_SLOTS } from '@ossy/design-system'
+import { DEFAULT_SCHEMA_VIEW_SLOTS } from '@ossy/resources/schemaViewSlots.js'
+import { DEFAULT_SCHEMA_FORM_SLOTS } from '@ossy/resources/schemaFormSlots.js'
 import { SchemasReadBootstrap } from '@ossy/workspaces/SchemasReadBootstrap'
 import { ThemeEditor } from './ThemeEditor.jsx'
+import { WorkspaceAppSettingsSync } from './WorkspaceAppSettingsSync.jsx'
 import { defaultAppSettings } from './AppSettings.jsx'
 import { Router } from '@ossy/router-react'
 import { AppContext } from './AppContext.js'
 
-export const App = ({ children, language, messages, fallbackMessages, ..._appSettings }) => {
+export const App = ({ children, language, messages, fallbackMessages, sdk: sdkOverride, ..._appSettings }) => {
   const appSettings = { ...defaultAppSettings(), ..._appSettings }
 
-  // `components` holds resolved ComponentType values — not JSON-serializable,
-  // so we keep them out of AppContext and provide them via ComponentSlotsProvider.
-  const { components, ...contextSettings } = appSettings
+  // `components` and `sdk` are not JSON-serializable — keep them out of AppContext.
+  const { components, sdk: _sdkFromSettings, ...contextSettings } = appSettings
 
-  const sdk = SDK.of({
+  const sdk = sdkOverride ?? SDK.of({
     apiUrl: appSettings.apiUrl,
     workspaceId: appSettings.workspaceId,
     actionRoutes: appSettings.actionRoutes,
@@ -30,10 +32,14 @@ export const App = ({ children, language, messages, fallbackMessages, ..._appSet
       supportedLanguages={appSettings.supportedLanguages}
     >
       <AppContext.Provider value={contextSettings}>
-        <ComponentSlotsProvider slots={{ ...DEFAULT_FORM_FIELD_SLOTS, ...(components || {}) }}>
+        <ComponentSlotsProvider slots={{ ...DEFAULT_FORM_FIELD_SLOTS, ...DEFAULT_SCHEMA_VIEW_SLOTS, ...DEFAULT_SCHEMA_FORM_SLOTS, ...(components || {}) }}>
           <Theme theme={appSettings.theme} themes={appSettings.themes}>
-            <WorkspaceProvider sdk={sdk}>
+            <WorkspaceProvider
+              sdk={sdk}
+              enablePushInvalidation={appSettings.enablePushInvalidation === true}
+            >
               <SchemasReadBootstrap schemas={appSettings.schemas} />
+              <WorkspaceAppSettingsSync />
               <Router {...appSettings} pages={appSettings.pages || []}>
                 {children}
                 {appSettings.devMode && <ThemeEditor />}

package/src/shell/AppSettings.jsx

@@ -38,5 +38,11 @@ export function defaultAppSettings() {
       taskGraphEdges: undefined,
       /** Action id → HTTP route map for sdk.invoke transport routing. */
       actionRoutes: undefined,
+      /**
+       * When true, the app shell opens SSE push invalidation for every page.
+       * Default false — mount `PushInvalidationSubscriber` only on pages that
+       * need live cross-tab cache updates (see @ossy/sdk-react README).
+       */
+      enablePushInvalidation: false,
     }
   }

package/src/shell/DevPagesPanel.jsx

@@ -3,7 +3,7 @@ import { Button, Text, View } from '@ossy/design-system'
 import { useRouter } from '@ossy/router-react'
 import { useApp } from './AppContext.js'
 import { formatPagePaths, groupPagesByFeature } from './devPagesUtils.js'
-import { packageNameToSlug } from '../manifest/build-manifest-summary.js'
+import { packageNameToSlug } from '@ossy/manifest/build-manifest-summary'
 
 const monoStyle = {
   fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',

package/src/shell/HeaderAuthActions.jsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { Button, useLocale } from '@ossy/design-system'
+import { useRouter } from '@ossy/router-react'
+import { OpenSignIn, OpenSignUp } from '@ossy/authentication'
+import { useApp } from './AppContext.js'
+
+/**
+ * Profile link when authenticated; sign-in / sign-up when not.
+ */
+export function HeaderAuthActions ({ compact = false }) {
+  const app = useApp()
+  const router = useRouter()
+  const { t } = useLocale()
+
+  if (app?.isAuthenticated) {
+    return (
+      <Button
+        variant="link"
+        suffix="profile"
+        href={router.getHref('@profile')}
+        aria-label={t('app.shell.header.profile') || 'Profile'}
+        style={{ flexShrink: 0 }}
+      >
+        {compact ? null : (t('app.shell.header.profile') || 'Profile')}
+      </Button>
+    )
+  }
+
+  return (
+    <>
+      <Button
+        variant="link"
+        suffix={OpenSignIn.suffix}
+        href={router.getHref('@sign-in')}
+        label={compact ? undefined : OpenSignIn.label}
+        aria-label={t(OpenSignIn.label)}
+        style={{ flexShrink: 0 }}
+      />
+      <Button
+        variant="cta"
+        suffix={OpenSignUp.suffix}
+        href={router.getHref('@sign-up')}
+        label={compact ? undefined : OpenSignUp.label}
+        aria-label={t(OpenSignUp.label)}
+        style={{ flexShrink: 0 }}
+      />
+    </>
+  )
+}

package/src/shell/LanguageList.jsx

@@ -0,0 +1,83 @@
+import React, { useMemo } from 'react'
+import { Text, View, useLocale } from '@ossy/design-system'
+import { useRouter } from '@ossy/router-react'
+import { languageDisplayName } from './languageCode.js'
+
+const listItemStyle = {
+  display: 'block',
+  width: '100%',
+  textAlign: 'left',
+}
+
+/**
+ * Footer language column when multiple locales are configured.
+ */
+export function LanguageList () {
+  const router = useRouter()
+  const { t } = useLocale()
+  const { language, supportedLanguages, getHref } = router
+
+  const displayNames = useMemo(
+    () => new Intl.DisplayNames([language], { type: 'language' }),
+    [language],
+  )
+
+  if (!supportedLanguages?.length || supportedLanguages.length <= 1) {
+    return null
+  }
+
+  const listLabel = t('app.shell.footer.languages') || 'Languages'
+
+  return (
+    <View layout="column" gap="s" alignItems="flex-start" style={{ minWidth: 0 }}>
+      <Text variant="heading-tertiary" as="h2" style={listItemStyle}>
+        {listLabel}
+      </Text>
+      <View
+        as="nav"
+        aria-label={listLabel}
+        style={{ width: '100%' }}
+      >
+        <View
+          as="ul"
+          layout="column"
+          gap="xs"
+          alignItems="flex-start"
+          style={{ listStyle: 'none', margin: 0, padding: 0, width: '100%' }}
+        >
+          {supportedLanguages.map((lang) => {
+            const isActive = lang === language
+            const label = displayNames.of(lang) ?? languageDisplayName(lang, language)
+
+            if (isActive) {
+              return (
+                <View as="li" key={lang} style={{ width: '100%' }}>
+                  <Text variant="small" as="span" aria-current="true" style={listItemStyle}>
+                    {label}
+                  </Text>
+                </View>
+              )
+            }
+
+            return (
+              <View as="li" key={lang} style={{ width: '100%' }}>
+                <Text
+                  variant="small"
+                  as="a"
+                  href={getHref({ language: lang })}
+                  style={{
+                    ...listItemStyle,
+                    textDecoration: 'underline',
+                    cursor: 'pointer',
+                  }}
+                >
+                  {label}
+                </Text>
+              </View>
+            )
+          })}
+        </View>
+      </View>
+    </View>
+  )
+}

package/src/shell/LanguageSelect.jsx

@@ -0,0 +1,73 @@
+import React from 'react'
+import {
+  Button,
+  ContextMenu,
+  Dropdown,
+  View,
+  useLocale,
+} from '@ossy/design-system'
+import { useRouter } from '@ossy/router-react'
+import { languageCode } from './languageCode.js'
+
+/**
+ * Language switcher for app shell header — cycle when two locales, dropdown when more.
+ */
+export function LanguageSelect () {
+  const router = useRouter()
+  const { t } = useLocale()
+  const { language, supportedLanguages, getHref } = router
+
+  if (!supportedLanguages?.length || supportedLanguages.length <= 1) {
+    return null
+  }
+
+  const pickerLabel = t('app.shell.header.languagePicker') || 'Language'
+
+  if (supportedLanguages.length === 2) {
+    const other = supportedLanguages.find((lang) => lang !== language) ?? supportedLanguages[0]
+
+    return (
+      <Button
+        variant="link"
+        prefix="select"
+        href={getHref({ language: other })}
+        aria-label={pickerLabel}
+        style={{ flexShrink: 0 }}
+      >
+        {languageCode(language)}
+      </Button>
+    )
+  }
+
+  return (
+    <Dropdown
+      trigger={(
+        <Button
+          prefix="select"
+          variant="link"
+          aria-label={pickerLabel}
+          style={{ flexShrink: 0 }}
+        >
+          {languageCode(language)}
+        </Button>
+      )}
+    >
+      <View inset="xs" surface="primary" roundness="s">
+        <ContextMenu roundness="s" surface="primary">
+          {supportedLanguages.map((lang) => {
+            const isActive = lang === language
+            return (
+              <ContextMenu.Item
+                key={lang}
+                href={isActive ? undefined : getHref({ language: lang })}
+                aria-current={isActive ? 'true' : undefined}
+              >
+                {languageCode(lang)}
+              </ContextMenu.Item>
+            )
+          })}
+        </ContextMenu>
+      </View>
+    </Dropdown>
+  )
+}

package/src/shell/ThemeEditor.jsx

@@ -1,5 +1,5 @@
 import React, { useState, useCallback, useEffect } from 'react'
-import { updateResourceContent } from '@ossy/resources'
+import { updateResourceContent } from '@ossy/resources/resource.helpers.js'
 import { useSdk } from '@ossy/sdk-react'
 import { Overlay, Button, useTheme, View, Text } from '@ossy/design-system'
 import { DevPagesPanel } from './DevPagesPanel.jsx'
@@ -68,7 +68,7 @@ export const ThemeEditor = () => {
         isEditorOpen && (
           <Overlay isVisible={true} onClose={onToggle}>
             <View layout="off-center" data-component="theme-editor-overlay">
-              <View slot="content" data-component="theme-editor-panel">
+              <View data-region="content" data-component="theme-editor-panel">
                 <View surface="primary" roundness="m" gap="m" inset="l">
                   <DevPagesPanel />
                   <View as="form" gap="s" onSubmit={onSaveTheme} onChange={onThemeChange}>

package/src/shell/ThemeSelect.jsx

@@ -0,0 +1,101 @@
+import React, { useCallback } from 'react'
+import {
+  Button,
+  ContextMenu,
+  Dropdown,
+  View,
+  useLocale,
+  useTheme,
+} from '@ossy/design-system'
+import { patchUserAppSettings } from './patchUserAppSettings.js'
+
+const THEME_ICON_BY_NAME = {
+  light: 'sun',
+  dark: 'moon',
+  'cloud-light': 'sun',
+  'cloud-dark': 'moon',
+}
+
+function themeLabel (name) {
+  if (typeof name !== 'string' || !name) {
+    return 'Theme'
+  }
+  return name
+    .split('-')
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(' ')
+}
+
+function themeIcon (name) {
+  return THEME_ICON_BY_NAME[name] || 'dark-mode'
+}
+
+/**
+ * Theme switcher for app shell header — cycle when two themes, dropdown when more.
+ */
+export function ThemeSelect ({ compact = false }) {
+  const { themes, activeTheme, setTheme } = useTheme()
+  const { t } = useLocale()
+
+  const saveTheme = useCallback((themeName) => {
+    setTheme(themeName)
+    patchUserAppSettings({ theme: themeName }).catch(() => {})
+  }, [setTheme])
+
+  if (!themes?.length || themes.length <= 1) {
+    return null
+  }
+
+  const activeLabel = themeLabel(activeTheme)
+  const ariaLabel =
+    t('app.shell.header.themeSwitch', { theme: activeLabel })
+    || `${activeLabel} theme. Switch theme.`
+
+  if (themes.length === 2) {
+    const cycleTheme = () => {
+      const index = Math.max(0, themes.indexOf(activeTheme))
+      saveTheme(themes[(index + 1) % themes.length])
+    }
+
+    return (
+      <Button
+        variant="link"
+        prefix={themeIcon(activeTheme)}
+        onClick={cycleTheme}
+        aria-label={ariaLabel}
+        style={{ flexShrink: 0 }}
+      >
+        {compact ? null : activeLabel}
+      </Button>
+    )
+  }
+
+  return (
+    <Dropdown
+      trigger={(
+        <Button
+          prefix={compact ? themeIcon(activeTheme) : 'select'}
+          variant="link"
+          aria-label={ariaLabel}
+          style={{ flexShrink: 0 }}
+        >
+          {compact ? null : activeLabel}
+        </Button>
+      )}
+    >
+      <View inset="xs" surface="primary" roundness="s">
+        <ContextMenu roundness="s" surface="primary">
+          {themes.map((name) => (
+            <ContextMenu.Item
+              key={name}
+              onClick={() => saveTheme(name)}
+              aria-current={name === activeTheme ? 'true' : undefined}
+            >
+              {themeLabel(name)}
+            </ContextMenu.Item>
+          ))}
+        </ContextMenu>
+      </View>
+    </Dropdown>
+  )
+}

package/src/shell/buildSidebarNav.js

@@ -0,0 +1,86 @@
+import { slugToDisplayName } from '@ossy/package-catalog'
+import { isServiceEntitled } from '@ossy/workspaces/entitlements'
+import { resolveWorkspaceServices } from './resolveWorkspaceServices.js'
+import { resolvePackageHomePageId } from './resolvePackageHomePageId.js'
+
+export { resolvePackageHomePageId }
+
+/**
+ * @typedef {object} SidebarShellItem
+ * @property {string} id
+ * @property {string} label
+ * @property {string} prefix
+ */
+
+/**
+ * @typedef {object} SidebarPackageItem
+ * @property {string} slug
+ * @property {string} label
+ * @property {string} icon
+ * @property {string} pageId
+ * @property {number} order
+ */
+
+/**
+ * Build entitlement-filtered sidebar navigation — one link per entitled package
+ * that registers a `{slug}/home` page.
+ *
+ * @param {{
+ *   manifestSummary?: { packages?: Array<{ slug?: string, package?: string, pages?: Array<{ id: string, title?: string, path?: string | Record<string, string> }> }> }
+ *   workspaceServices?: Record<string, { enabled?: boolean }>
+ *   definitions?: Record<string, object>
+ *   isAuthenticated?: boolean
+ *   workspaceId?: string
+ *   devMode?: boolean
+ *   devEntitlements?: Record<string, { enabled?: boolean }>
+ *   shellItems?: SidebarShellItem[]
+ *   excludeSlugs?: string[] | Set<string>
+ * }} options
+ * @returns {{ shellItems: SidebarShellItem[], packageItems: SidebarPackageItem[], services: Record<string, { enabled?: boolean }> }}
+ */
+export function buildSidebarNav ({
+  manifestSummary,
+  workspaceServices,
+  definitions = {},
+  isAuthenticated = false,
+  workspaceId,
+  devMode = false,
+  devEntitlements,
+  shellItems = [],
+  excludeSlugs = [],
+}) {
+  const services = resolveWorkspaceServices({ devMode, devEntitlements, workspaceServices })
+  const excluded = excludeSlugs instanceof Set ? excludeSlugs : new Set(excludeSlugs)
+
+  const canShowProductGroups =
+    (isAuthenticated && workspaceId) ||
+    (devMode && devEntitlements && Object.keys(devEntitlements).length > 0)
+
+  const packageItems = !canShowProductGroups
+    ? []
+    : (manifestSummary?.packages || [])
+      .filter((pkg) => pkg.slug && !excluded.has(pkg.slug))
+      .filter((pkg) => !definitions[pkg.slug]?.status?.includes('hidden'))
+      .filter((pkg) => {
+        const def = definitions[pkg.slug]
+        const entitlementRequired = def?.entitlementRequired !== false
+        return !entitlementRequired || isServiceEntitled(services, pkg.package)
+      })
+      .map((pkg) => {
+        const slug = pkg.slug
+        const def = definitions[slug]
+        const pageId = resolvePackageHomePageId(pkg.pages, slug)
+        if (!pageId) return null
+        return {
+          slug,
+          label: def?.title || slugToDisplayName(slug),
+          icon: def?.icon || 'package',
+          order: def?.navOrder ?? 100,
+          pageId,
+        }
+      })
+      .filter(Boolean)
+      .sort((a, b) => a.order - b.order || a.label.localeCompare(b.label))
+
+  return { shellItems, packageItems, services }
+}

package/src/shell/index.js

@@ -7,3 +7,10 @@ export { useShellWorkspace } from './useShellWorkspace.js'
 export { WorkspaceAppSettingsSync } from './WorkspaceAppSettingsSync.jsx'
 export { resolveEndpoints } from './resolveEndpoints.js'
 export { resolveWorkspaceServices } from './resolveWorkspaceServices.js'
+export { useCompactShellLayout } from './useCompactShellLayout.js'
+export { buildSidebarNav } from './buildSidebarNav.js'
+export { resolvePackageHomePageId } from './resolvePackageHomePageId.js'
+export { shellSlotUnset, shellSlotViewId, coerceShellSlotSpec } from '../../runtime/merge-shell-slots.js'
+export { ThemeSelect } from './ThemeSelect.jsx'
+export { LanguageSelect } from './LanguageSelect.jsx'
+export { HeaderAuthActions } from './HeaderAuthActions.jsx'

package/src/shell/languageCode.js

@@ -0,0 +1,31 @@
+/**
+ * ISO 639-1 shorthand from a BCP 47 language tag (e.g. `en` → `EN`, `sv-SE` → `SV`).
+ *
+ * @param {string} tag
+ * @returns {string}
+ */
+export function languageCode (tag) {
+  try {
+    return new Intl.Locale(tag).language.toUpperCase()
+  } catch {
+    const [primary] = String(tag).split('-')
+    return (primary || tag).toUpperCase()
+  }
+}
+
+/**
+ * Localized language name via `Intl.DisplayNames` (e.g. `en` in UI `sv` → `engelska`).
+ *
+ * @param {string} tag BCP 47 language tag to describe
+ * @param {string} [displayLocale] UI locale used for the label
+ * @returns {string}
+ */
+export function languageDisplayName (tag, displayLocale) {
+  if (!tag) return ''
+  try {
+    const locale = displayLocale || tag
+    return new Intl.DisplayNames([locale], { type: 'language' }).of(tag) ?? tag
+  } catch {
+    return tag
+  }
+}

package/src/shell/resolvePackageHomePageId.js

@@ -0,0 +1,14 @@
+/**
+ * Pick the package home page for sidebar nav.
+ * Only `{slug}/home` qualifies — no fallback to other pages.
+ *
+ * @param {Array<{ id?: string }> | undefined} pages
+ * @param {string} slug
+ * @returns {string | null}
+ */
+export function resolvePackageHomePageId (pages, slug) {
+  if (!slug) return null
+  const homeId = `${slug}/home`
+  const match = (pages || []).find((page) => page?.id === homeId)
+  return match ? homeId : null
+}

package/src/shell/useCompactShellLayout.js

@@ -0,0 +1,24 @@
+import { useSyncExternalStore } from 'react'
+
+/** Viewports at or below this width use compact chrome (icon rail, tighter padding). */
+const COMPACT_MEDIA_QUERY = '(max-width: 900px)'
+
+function subscribe (onStoreChange) {
+  if (typeof window === 'undefined') return () => {}
+  const mq = window.matchMedia(COMPACT_MEDIA_QUERY)
+  mq.addEventListener('change', onStoreChange)
+  return () => mq.removeEventListener('change', onStoreChange)
+}
+
+function getSnapshot () {
+  if (typeof window === 'undefined') return false
+  return window.matchMedia(COMPACT_MEDIA_QUERY).matches
+}
+
+function getServerSnapshot () {
+  return false
+}
+
+export function useCompactShellLayout () {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
+}

package/src/shell-registry/blank.layout.jsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Slot } from '@ossy/design-system'
+
+export const metadata = { id: '@ossy/app/layout/blank' }
+
+export default function BlankLayout () {
+  return <Slot view="app:content" />
+}