@ossy/app 1.40.2 → 3.0.1

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,30 +1,9 @@
-import React, { useState, useMemo, useCallback, useEffect } from 'react'
-import { updateResourceContent } from '@ossy/resources'
+import React, { useState, useCallback, useEffect } from 'react'
+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'
-
-const fabStyles = {
-  boxShadow: '2px 2px 5px hsla(0, 0%, 0%, .2)',
-  borderRadius: '999px',
-  position: 'fixed',
-  right: 'var(--space-m)',
-  bottom: 'var(--space-m)',
-  cursor: 'pointer',
-  transition: 'transform .5s',
-  zIndex: 101,
-  padding: 'var(--space-m)',
-}
-
-const modalPanelStyles = {
-  width: 'min(720px, 80vw)',
-  minWidth: 'min(480px, 100%)',
-  maxHeight: '85vh',
-  overflowY: 'auto',
-  overflowX: 'hidden',
-  margin: '0 auto',
-  boxShadow: '2px 2px 5px hsla(0, 0%, 0%, .2)',
-}
+import { themeEditorStyles } from './themeEditorStyles.js'
 
 const ThemeSwitcher = () => {
   const { activeTheme, setTheme, themes } = useTheme()
@@ -47,10 +26,6 @@ export const ThemeEditor = () => {
   // const [theme, temporarilyUpdateTheme] = useTheme()
   const theme = {}
   const temporarilyUpdateTheme = () => {}
-  
-  const toggleStyles = useMemo(() => !isEditorOpen
-    ? fabStyles
-    : { ...fabStyles, transform: 'rotate(-45deg)' }, [isEditorOpen])
 
   const onToggle = useCallback(() => {
     setIsEditorOpen(!isEditorOpen)
@@ -85,18 +60,22 @@ export const ThemeEditor = () => {
 
   return (
     <>
+      <style href="@ossy/app/theme-editor" precedence="high">
+        {themeEditorStyles}
+      </style>
+
       {
         isEditorOpen && (
           <Overlay isVisible={true} onClose={onToggle}>
-            <View layout="off-center" style={{ height: '100%', width: '100%' }}>
-              <View slot="content" style={modalPanelStyles}>
+            <View layout="off-center" data-component="theme-editor-overlay">
+              <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}>
                     {Object.entries(theme).map(([name, value]) => (
-                      <div style={{ marginBottom: '16px' }}>
-                        <label style={{ display: 'block', fontFamily: 'sans-serif', marginBottom: '4px', fontWeight: 'bold' }}>{name}</label>
-                        <input value={value} data-name={name} style={{ width: '100%', padding: '4px' }}/>
+                      <div key={name} data-component="theme-editor-field">
+                        <label>{name}</label>
+                        <input value={value} data-name={name} />
                       </div>
                     ))}
                     <Button type="submit" variant="cta">
@@ -112,7 +91,13 @@ export const ThemeEditor = () => {
         )
       }
 
-      <Button variant="cta" prefix="math-plus" style={toggleStyles} onClick={onToggle} />
+      <Button
+        variant="cta"
+        prefix="math-plus"
+        data-component="theme-editor-fab"
+        data-open={isEditorOpen ? 'true' : undefined}
+        onClick={onToggle}
+      />
     </>
   )
 }

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/WorkspaceAppSettingsSync.jsx

@@ -0,0 +1,39 @@
+import { useEffect, useRef } from 'react'
+import { GetWorkspace, ListWorkspaces } from '@ossy/workspaces'
+import { useSdk } from '@ossy/sdk-react'
+import { patchUserAppSettings } from './patchUserAppSettings.js'
+
+function buildPatch (workspace, workspaces) {
+  const patch = {}
+  if (workspace?.name) patch.workspaceName = workspace.name
+  if (workspace?.services) patch.workspaceServices = workspace.services
+  if (workspaces?.length) {
+    patch.workspaces = workspaces.map(({ id, name }) => ({ id, name }))
+  }
+  return Object.keys(patch).length ? patch : null
+}
+
+/**
+ * Persists workspace shell snapshot to the signed user-app-settings cookie
+ * (via ProxyInternal PATCH /@ossy/users/me/app-settings) so SSR bootstrap
+ * props stay stable across full-page navigations.
+ */
+export function WorkspaceAppSettingsSync () {
+  const sdk = useSdk()
+  const { data: workspace } = sdk.read(GetWorkspace)
+  const { data: workspaces } = sdk.read(ListWorkspaces)
+  const lastPatchRef = useRef('')
+
+  useEffect(() => {
+    const patch = buildPatch(workspace, workspaces)
+    if (!patch) return
+
+    const serialized = JSON.stringify(patch)
+    if (serialized === lastPatchRef.current) return
+    lastPatchRef.current = serialized
+
+    patchUserAppSettings(patch).catch(() => {})
+  }, [workspace, workspaces])
+
+  return null
+}

package/src/shell/buildSidebarNav.js

@@ -0,0 +1,113 @@
+import { slugToDisplayName } from '@ossy/package-catalog'
+import { isServiceEntitled } from '@ossy/workspaces/entitlements'
+import { resolveWorkspaceServices } from './resolveWorkspaceServices.js'
+
+/**
+ * @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
+ */
+
+/**
+ * Pick the package "home" page from manifest pages.
+ * Convention: slug plus "/home", then any page id ending in "/home", then shortest route path.
+ *
+ * @param {Array<{ id?: string, path?: string | Record<string, string> }>} pages
+ * @param {string} slug
+ * @returns {string | null}
+ */
+export function resolvePackageHomePageId (pages, slug) {
+  const list = (pages || []).filter((page) => page?.id)
+  if (!list.length) return null
+
+  const conventional = list.find((page) => page.id === `${slug}/home`)
+  if (conventional) return conventional.id
+
+  const anyHome = list.find((page) => page.id === 'home' || page.id.endsWith('/home'))
+  if (anyHome) return anyHome.id
+
+  const pathLength = (page) => {
+    const path = page.path
+    if (typeof path === 'string') return path.length
+    if (path && typeof path === 'object') {
+      return Math.min(...Object.values(path).map((p) => (typeof p === 'string' ? p.length : 999)))
+    }
+    return 999
+  }
+
+  const byPath = [...list].sort((a, b) => pathLength(a) - pathLength(b) || a.id.localeCompare(b.id))
+  return byPath[0].id
+}
+
+/**
+ * Build entitlement-filtered sidebar navigation — one link per entitled package home.
+ *
+ * @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

@@ -2,3 +2,14 @@ export * from './App.jsx'
 export * from './AppSettings.jsx'
 export { useApp, useAppSettings, AppContext } from './AppContext.js'
 export * from './ThemeEditor.jsx'
+export { patchUserAppSettings } from './patchUserAppSettings.js'
+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, resolvePackageHomePageId } from './buildSidebarNav.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/patchUserAppSettings.js

@@ -0,0 +1,10 @@
+export function patchUserAppSettings (partial) {
+  return fetch('/@ossy/users/me/app-settings', {
+    method: 'PATCH',
+    body: JSON.stringify(partial),
+    headers: {
+      'Content-Type': 'application/json',
+    },
+    credentials: 'same-origin',
+  })
+}

package/src/shell/resolveEndpoints.js

@@ -0,0 +1,43 @@
+/**
+ * Resolve integration endpoint URLs from app context and browser origin.
+ *
+ * @param {{ apiUrl?: string, workspaceId?: string } | null | undefined} app
+ * @returns {{
+ *   apiUrl: string,
+ *   appOrigin: string,
+ *   actionsUrl: string,
+ *   mcpUrl: string,
+ *   capabilitiesUrl: string,
+ *   workspaceId: string | undefined,
+ * }}
+ */
+export function resolveEndpoints (app) {
+  const apiUrl = app?.apiUrl || ''
+  const appOrigin =
+    typeof window !== 'undefined' && window.location?.origin
+      ? window.location.origin
+      : ''
+
+  const normalizedApi = apiUrl.replace(/\/$/, '')
+  let actionsUrl = '/actions'
+
+  if (normalizedApi.startsWith('http://') || normalizedApi.startsWith('https://')) {
+    actionsUrl = `${normalizedApi}/actions`
+  } else if (normalizedApi.startsWith('/')) {
+    actionsUrl = appOrigin ? `${appOrigin}${normalizedApi}/actions` : `${normalizedApi}/actions`
+  } else if (appOrigin) {
+    actionsUrl = `${appOrigin}/actions`
+  }
+
+  const mcpUrl = appOrigin ? `${appOrigin}/mcp` : '/mcp'
+  const capabilitiesUrl = appOrigin ? `${appOrigin}/capabilities.json` : '/capabilities.json'
+
+  return {
+    apiUrl: normalizedApi,
+    appOrigin,
+    actionsUrl,
+    mcpUrl,
+    capabilitiesUrl,
+    workspaceId: app?.workspaceId,
+  }
+}

package/src/shell/resolveWorkspaceServices.js

@@ -0,0 +1,20 @@
+/**
+ * Merge live workspace services with dev-mode entitlement overrides.
+ *
+ * @param {{
+ *   devMode?: boolean
+ *   devEntitlements?: Record<string, { enabled?: boolean }>
+ *   workspaceServices?: Record<string, { enabled?: boolean }>
+ * }} options
+ * @returns {Record<string, { enabled?: boolean }>}
+ */
+export function resolveWorkspaceServices ({
+  devMode = false,
+  devEntitlements,
+  workspaceServices,
+}) {
+  if (devMode && devEntitlements) {
+    return { ...(workspaceServices || {}), ...devEntitlements }
+  }
+  return workspaceServices || {}
+}

package/src/shell/themeEditorStyles.js

@@ -0,0 +1,49 @@
+/** Dev theme editor — FAB and modal panel using theme tokens. */
+export const themeEditorStyles = `
+  [data-component="theme-editor-fab"] {
+    box-shadow: 2px 2px 5px color-mix(in srgb, var(--foreground) 20%, transparent);
+    border-radius: var(--space-xl);
+    position: fixed;
+    right: var(--space-m);
+    bottom: var(--space-m);
+    cursor: pointer;
+    transition: transform 0.5s;
+    z-index: 101;
+    padding: var(--space-m);
+  }
+
+  [data-component="theme-editor-fab"][data-open="true"] {
+    transform: rotate(-45deg);
+  }
+
+  [data-component="theme-editor-panel"] {
+    width: min(720px, 80vw);
+    min-width: min(480px, 100%);
+    max-height: 85vh;
+    overflow-y: auto;
+    overflow-x: hidden;
+    margin: 0 auto;
+    box-shadow: 2px 2px 5px color-mix(in srgb, var(--foreground) 20%, transparent);
+  }
+
+  [data-component="theme-editor-overlay"] {
+    height: 100%;
+    width: 100%;
+  }
+
+  [data-component="theme-editor-field"] {
+    margin-bottom: var(--space-m);
+  }
+
+  [data-component="theme-editor-field"] label {
+    display: block;
+    font-family: var(--text-default-font-family, sans-serif);
+    margin-bottom: var(--space-xs);
+    font-weight: 700;
+  }
+
+  [data-component="theme-editor-field"] input {
+    width: 100%;
+    padding: var(--space-xs);
+  }
+`

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/useShellWorkspace.js

@@ -0,0 +1,40 @@
+import { useMemo } from 'react'
+import { GetWorkspace, ListWorkspaces } from '@ossy/workspaces'
+import { useSdk } from '@ossy/sdk-react'
+import { useApp } from './AppContext.js'
+
+/**
+ * Workspace list + active workspace for shell chrome.
+ * SSR and the first client paint use the signed user-app-settings cookie
+ * (merged into bootstrap props); live SDK reads refresh in the background.
+ */
+export function useShellWorkspace () {
+  const app = useApp()
+  const sdk = useSdk()
+  const { data: workspaceFromSdk } = sdk.read(GetWorkspace)
+  const { data: workspacesFromSdk } = sdk.read(ListWorkspaces)
+
+  const workspace = useMemo(() => {
+    if (workspaceFromSdk) return workspaceFromSdk
+    if (app?.workspaceName || app?.workspaceServices || app?.workspaceId) {
+      return {
+        id: app.workspaceId,
+        name: app.workspaceName,
+        services: app.workspaceServices,
+      }
+    }
+    return undefined
+  }, [
+    workspaceFromSdk,
+    app?.workspaceId,
+    app?.workspaceName,
+    app?.workspaceServices,
+  ])
+
+  const workspaces = useMemo(() => {
+    if (workspacesFromSdk?.length) return workspacesFromSdk
+    return app?.workspaces ?? []
+  }, [workspacesFromSdk, app?.workspaces])
+
+  return { workspace, workspaces }
+}

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" />
+}