@ossy/app 1.40.2 → 1.40.3

package/src/shell/ThemeEditor.jsx

@@ -1,30 +1,9 @@
-import React, { useState, useMemo, useCallback, useEffect } from 'react'
+import React, { useState, useCallback, useEffect } from 'react'
 import { updateResourceContent } from '@ossy/resources'
 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 slot="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/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/index.js

@@ -2,3 +2,8 @@ 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'

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/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/runtime/resolve-shell-slots.js

@@ -1,112 +0,0 @@
-/** Canonical shell slot names (namespaced). App layout maps chrome only — not content. */
-export const SHELL_SLOT_NAMES = [
-  'shell:header',
-  'shell:sidebar',
-  'shell:toolbar',
-  'shell:notifications',
-  'shell:system-messages',
-]
-
-/** Platform-owned slot filled with the current route page component. */
-export const CONTENT_SLOT_NAME = 'shell:content'
-
-/** Bare shell region → namespaced key (legacy fallback for app components only). */
-const BARE_SHELL_REGION = {
-  header: 'shell:header',
-  sidebar: 'shell:sidebar',
-  toolbar: 'shell:toolbar',
-  notifications: 'shell:notifications',
-  'system-messages': 'shell:system-messages',
-  content: CONTENT_SLOT_NAME,
-}
-
-/**
- * Normalize a slot map key to the canonical namespaced form when it is a bare shell region.
- *
- * @param {string} slotName
- * @returns {string}
- */
-export function normalizeShellSlotName (slotName) {
-  const key = typeof slotName === 'string' ? slotName.trim() : ''
-  return BARE_SHELL_REGION[key] ?? key
-}
-
-/**
- * Build `Record<slotName, Component>` from the app layout's static `slots` map
- * (`slotName → componentId`) and components loaded by `metadata.id`.
- *
- * One component per slot. Optional fallback (app components only): if the layout
- * map omits a slot, use a component whose id equals the slot name (e.g. `shell:header`)
- * or the bare region name (e.g. `header`).
- *
- * Does not resolve `shell:content` — use {@link resolvePageSlots}.
- *
- * @param {Record<string, string> | null | undefined} layoutSlotsMap
- * @param {Record<string, import('react').ComponentType>} componentsById
- * @returns {Record<string, import('react').ComponentType>}
- */
-export function resolveShellSlots (layoutSlotsMap, componentsById) {
-  /** @type {Record<string, import('react').ComponentType>} */
-  const resolved = {}
-
-  const map = layoutSlotsMap && typeof layoutSlotsMap === 'object' ? layoutSlotsMap : {}
-  for (const [rawSlot, componentId] of Object.entries(map)) {
-    const slotName = normalizeShellSlotName(rawSlot)
-    const id = typeof componentId === 'string' ? componentId.trim() : ''
-    if (!slotName || !id || slotName === CONTENT_SLOT_NAME) continue
-    const Component = componentsById[id]
-    if (Component) resolved[slotName] = Component
-  }
-
-  for (const slotName of SHELL_SLOT_NAMES) {
-    if (resolved[slotName]) continue
-    if (componentsById[slotName]) {
-      resolved[slotName] = componentsById[slotName]
-      continue
-    }
-    const bare = slotName.slice('shell:'.length)
-    if (componentsById[bare]) resolved[slotName] = componentsById[bare]
-  }
-
-  return resolved
-}
-
-const RESOURCE_SLOT_PREFIX = 'resource:'
-
-/**
- * Map manifest components whose `metadata.id` is a `resource:{type}/{view}` key.
- *
- * @param {Record<string, import('react').ComponentType>} componentsById
- * @returns {Record<string, import('react').ComponentType>}
- */
-export function resolveResourceSlots (componentsById) {
-  /** @type {Record<string, import('react').ComponentType>} */
-  const resolved = {}
-  for (const [id, Component] of Object.entries(componentsById || {})) {
-    if (typeof id === 'string' && id.startsWith(RESOURCE_SLOT_PREFIX) && Component) {
-      resolved[id] = Component
-    }
-  }
-  return resolved
-}
-
-/**
- * Full provider slot map for a page request: shell chrome, resource views, and page content.
- *
- * @param {{
- *   layoutSlots?: Record<string, string> | null,
- *   componentsById?: Record<string, import('react').ComponentType>,
- *   pageComponent?: import('react').ComponentType | null,
- * }} options
- * @returns {Record<string, import('react').ComponentType>}
- */
-export function resolvePageSlots ({ layoutSlots, componentsById = {}, pageComponent = null } = {}) {
-  const shellSlots = resolveShellSlots(layoutSlots, componentsById)
-  const resourceSlots = resolveResourceSlots(componentsById)
-  /** @type {Record<string, import('react').ComponentType>} */
-  const resolved = { ...componentsById, ...shellSlots, ...resourceSlots }
-  if (pageComponent) {
-    resolved[CONTENT_SLOT_NAME] = pageComponent
-  }
-  return resolved
-}