@ossy/app 1.39.6 → 1.40.0

package/src/shell/App.jsx

@@ -1,13 +1,13 @@
 import React from 'react'
 import { SDK } from '@ossy/sdk'
 import { WorkspaceProvider } from '@ossy/sdk-react'
-import { Theme, ComponentSlotsProvider } from '@ossy/design-system'
+import { Theme, ComponentSlotsProvider, LocaleProvider } from '@ossy/design-system'
 import { ThemeEditor } from './ThemeEditor.jsx'
 import { defaultAppSettings } from './AppSettings.jsx'
 import { Router } from '@ossy/router-react'
 import { AppContext } from './AppContext.js'
 
-export const App = ({ children, ..._appSettings }) => {
+export const App = ({ children, language, messages, fallbackMessages, ..._appSettings }) => {
   const appSettings = { ...defaultAppSettings(), ..._appSettings }
 
   // `components` holds resolved ComponentType values — not JSON-serializable,
@@ -20,17 +20,25 @@ export const App = ({ children, ..._appSettings }) => {
   })
 
   return (
-    <AppContext.Provider value={contextSettings}>
-      <ComponentSlotsProvider slots={components || {}}>
-        <Theme theme={appSettings.theme} themes={appSettings.themes}>
-          <WorkspaceProvider sdk={sdk}>
-            <Router {...appSettings} pages={appSettings.pages || []}>
-              {children}
-            </Router>
-            {appSettings.devMode && <ThemeEditor />}
-          </WorkspaceProvider>
-        </Theme>
-      </ComponentSlotsProvider>
-    </AppContext.Provider>
+    <LocaleProvider
+      language={language}
+      messages={messages}
+      fallbackMessages={fallbackMessages}
+      defaultLanguage={appSettings.defaultLanguage}
+      supportedLanguages={appSettings.supportedLanguages}
+    >
+      <AppContext.Provider value={contextSettings}>
+        <ComponentSlotsProvider slots={components || {}}>
+          <Theme theme={appSettings.theme} themes={appSettings.themes}>
+            <WorkspaceProvider sdk={sdk}>
+              <Router {...appSettings} pages={appSettings.pages || []}>
+                {children}
+                {appSettings.devMode && <ThemeEditor />}
+              </Router>
+            </WorkspaceProvider>
+          </Theme>
+        </ComponentSlotsProvider>
+      </AppContext.Provider>
+    </LocaleProvider>
   )
 }

package/src/shell/AppSettings.jsx

@@ -25,5 +25,7 @@ export function defaultAppSettings() {
       faviconHref: undefined,
       /** When true, main app sidebar is collapsed to icons (from server cookie / app-settings). */
       sidebarPrimaryCollapsed: false,
+      /** Grouped manifest entries by npm package — for dev tooling. */
+      manifestSummary: undefined,
     }
   }

package/src/shell/DevPagesPanel.jsx

@@ -0,0 +1,128 @@
+import React, { useMemo } from 'react'
+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'
+
+const monoStyle = {
+  fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+  fontSize: '0.8125rem',
+  lineHeight: 1.4,
+  wordBreak: 'break-all',
+}
+
+const currentPageStyles = {
+  padding: 'var(--space-s)',
+  borderRadius: 'var(--space-xs)',
+  background: 'var(--surface-secondary, hsla(0, 0%, 0%, 0.04))',
+}
+
+export const DevPagesPanel = () => {
+  const app = useApp()
+  const router = useRouter()
+  const pages = app?.pages || []
+
+  const groups = useMemo(() => groupPagesByFeature(pages), [pages])
+
+  const currentPage = useMemo(
+    () => pages.find((p) => p.id === app?.pageId),
+    [pages, app?.pageId],
+  )
+
+  const hasPackageViewer = useMemo(
+    () => pages.some((p) => p.id === 'packages/detail'),
+    [pages],
+  )
+
+  const packageDetailHref = useMemo(() => {
+    if (!hasPackageViewer) return null
+    const pkg = currentPage?.package
+    if (!pkg) return null
+    return router.getHref({
+      id: 'packages/detail',
+      params: { packageSlug: packageNameToSlug(pkg) },
+    })
+  }, [currentPage?.package, hasPackageViewer, router])
+
+  const currentPathLabel = useMemo(() => {
+    if (currentPage?.path) return formatPagePaths(currentPage.path)
+    const url = app?.url || router.href
+    if (!url) return '—'
+    const pathname = url.split('?')[0].split('#')[0]
+    return pathname || '—'
+  }, [currentPage, router.href, app?.url])
+
+  const currentUrl = app?.url || router.href || '—'
+
+  return (
+    <View gap="m">
+      <Text variant="title-tertiary">Dev</Text>
+
+      <View gap="xs" style={currentPageStyles}>
+        <Text variant="title-tertiary" style={{ marginBottom: 'var(--space-xs)' }}>
+          Current page
+        </Text>
+        <Text style={monoStyle}>
+          <strong>id:</strong> {app?.pageId || '—'}
+        </Text>
+        <Text style={monoStyle}>
+          <strong>path:</strong> {currentPathLabel}
+        </Text>
+        <Text style={monoStyle}>
+          <strong>url:</strong> {currentUrl}
+        </Text>
+        {packageDetailHref && currentPage?.package && (
+          <Button
+            variant="link"
+            href={packageDetailHref}
+            style={{ alignSelf: 'flex-start', padding: 0, height: 'auto' }}
+          >
+            View package ({currentPage.package})
+          </Button>
+        )}
+      </View>
+
+      <View gap="s">
+        <Text variant="title-tertiary">
+          Pages ({pages.length})
+        </Text>
+
+        {groups.map(({ key, label, pages: groupPages }) => (
+          <View key={key} gap="xs">
+            <Text style={{ fontWeight: 700, fontSize: '0.875rem' }}>{label}</Text>
+            <View gap="xs">
+              {groupPages.map((page) => {
+                const href = router.getHref(page.id)
+                const selected = page.id === app?.pageId
+                return (
+                  <Button
+                    key={page.id}
+                    href={href}
+                    variant={selected ? 'tag-active' : 'link'}
+                    aria-current={selected ? 'page' : undefined}
+                    style={{
+                      display: 'block',
+                      textAlign: 'left',
+                      width: '100%',
+                      padding: 'var(--space-xs) var(--space-s)',
+                      height: 'auto',
+                      whiteSpace: 'normal',
+                    }}
+                  >
+                    <View gap="2px" style={{ alignItems: 'flex-start' }}>
+                      <Text style={{ ...monoStyle, fontWeight: 600 }}>{page.id}</Text>
+                      <Text style={{ ...monoStyle, opacity: 0.85 }}>
+                        {formatPagePaths(page.path)}
+                      </Text>
+                    </View>
+                  </Button>
+                )
+              })}
+            </View>
+          </View>
+        ))}
+      </View>
+    </View>
+  )
+}

package/src/shell/ThemeEditor.jsx

@@ -1,47 +1,28 @@
 import React, { useState, useMemo, useCallback, useEffect } from 'react'
 import { useResource } from '@ossy/sdk-react'
 import { Overlay, Button, useTheme, View, Text } from '@ossy/design-system'
-import { useApp } from './AppContext.js'
+import { DevPagesPanel } from './DevPagesPanel.jsx'
 
-const overlayStyles = {
-  background: 'transparent',
-  display: 'content',
-  pointerEvents: 'none'
-}
-
-const blobStyles = {
+const fabStyles = {
   boxShadow: '2px 2px 5px hsla(0, 0%, 0%, .2)',
   borderRadius: '999px',
-  position: 'absolute',
+  position: 'fixed',
   right: 'var(--space-m)',
   bottom: 'var(--space-m)',
   cursor: 'pointer',
   transition: 'transform .5s',
-  pointerEvents: 'auto',
-  padding: 'var(--space-m)'
-}
-
-const editorContainerStyles = {
-  position: 'absolute',
-  right: '0',
-  top: '0',
-  height: '100%',
-  width: '100%',
-  display: 'flex',
-  justifyContent: 'flex-end',
-  alignItems: 'stretch',
-  padding: '8px 32px'
+  zIndex: 101,
+  padding: 'var(--space-m)',
 }
 
-const editorStyles = {
-  width: '100%',
-  maxWidth: '350px',
-  height: '100%',
-  boxShadow: '2px 2px 5px hsla(0, 0%, 0%, .2)',
-  padding: '16px 16px 76px 16px',
-  overflowX: 'none',
+const modalPanelStyles = {
+  width: 'min(720px, 80vw)',
+  minWidth: 'min(480px, 100%)',
+  maxHeight: '85vh',
   overflowY: 'auto',
-  pointerEvents: 'auto'
+  overflowX: 'hidden',
+  margin: '0 auto',
+  boxShadow: '2px 2px 5px hsla(0, 0%, 0%, .2)',
 }
 
 const ThemeSwitcher = () => {
@@ -59,7 +40,6 @@ const ThemeSwitcher = () => {
 }
 
 export const ThemeEditor = () => {
-  const app = useApp()
   const { updateResourceContent } = useResource('PCX53TaGviq4_8KvK-VOp')
   const [isEditorOpen, setIsEditorOpen] = useState(false)
   const [viewCount, setViewCount] = useState(0)
@@ -68,8 +48,8 @@ export const ThemeEditor = () => {
   const temporarilyUpdateTheme = () => {}
   
   const toggleStyles = useMemo(() => !isEditorOpen
-    ? blobStyles
-    : { ...blobStyles, transform: 'rotate(-45deg)' }, [isEditorOpen])
+    ? fabStyles
+    : { ...fabStyles, transform: 'rotate(-45deg)' }, [isEditorOpen])
 
   const onToggle = useCallback(() => {
     setIsEditorOpen(!isEditorOpen)
@@ -103,44 +83,35 @@ export const ThemeEditor = () => {
   }, [isEditorOpen])
 
   return (
-    <Overlay isVisible={true} style={overlayStyles}>
-
+    <>
       {
         isEditorOpen && (
-          <div style={editorContainerStyles}>
-            <View surface="primary" roundness="m" gap="m" style={editorStyles}>
-              <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>
-                ))}
-                <Button type="submit" variant="cta">
-                  Save
-                </Button>
+          <Overlay isVisible={true} onClose={onToggle}>
+            <View layout="off-center" style={{ height: '100%', width: '100%' }}>
+              <View slot="content" style={modalPanelStyles}>
+                <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>
+                    ))}
+                    <Button type="submit" variant="cta">
+                      Save
+                    </Button>
+                  </View>
+                  <ThemeSwitcher/>
+                  <Text>Views: {viewCount}</Text>
+                </View>
               </View>
-              <ThemeSwitcher/>
-              <Text>Views: {viewCount}</Text>
             </View>
-            <View>
-
-              <View>
-                Pages: {app?.pages?.length || 0}
-              </View>
-
-              <View>
-                {(app?.pages || []).map(page => (
-                  <Button>{page.id}</Button>
-                ))}
-              </View>
-            </View>
-          </div>
+          </Overlay>
         )
       }
 
       <Button variant="cta" prefix="math-plus" style={toggleStyles} onClick={onToggle} />
-
-    </Overlay>
+    </>
   )
 }

package/src/shell/devPagesUtils.js

@@ -0,0 +1,53 @@
+/**
+ * @param {string} pageId
+ * @returns {string} Group key for sorting and labeling (e.g. `booking`, `app`).
+ */
+export function getPageGroupKey (pageId) {
+  const slash = pageId.indexOf('/')
+  if (slash === -1) return 'app'
+  return pageId.slice(0, slash)
+}
+
+/**
+ * @param {string} groupKey
+ * @returns {string} Display label (e.g. `@ossy/booking`, `@ossy/app`).
+ */
+export function getPageGroupLabel (groupKey) {
+  if (groupKey === 'app') return '@ossy/app'
+  return `@ossy/${groupKey}`
+}
+
+/**
+ * @param {string | Record<string, string> | undefined} path
+ * @returns {string}
+ */
+export function formatPagePaths (path) {
+  if (!path) return '—'
+  if (typeof path === 'string') return path
+  return Object.entries(path)
+    .sort(([a], [b]) => a.localeCompare(b))
+    .map(([lang, p]) => `${lang}: ${p}`)
+    .join(' · ')
+}
+
+/**
+ * @param {Array<{ id: string, path?: string | Record<string, string> }>} pages
+ * @returns {Array<{ key: string, label: string, pages: typeof pages }>}
+ */
+export function groupPagesByFeature (pages) {
+  const byKey = new Map()
+
+  for (const page of pages) {
+    const key = getPageGroupKey(page.id)
+    if (!byKey.has(key)) byKey.set(key, [])
+    byKey.get(key).push(page)
+  }
+
+  return Array.from(byKey.entries())
+    .sort(([a], [b]) => a.localeCompare(b))
+    .map(([key, groupPages]) => ({
+      key,
+      label: getPageGroupLabel(key),
+      pages: [...groupPages].sort((a, b) => a.id.localeCompare(b.id)),
+    }))
+}