@ossy/app 3.25.0 → 3.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ossy/app",
-  "version": "3.25.0",
+  "version": "3.26.0",
   "description": "",
   "source": "./src/index.js",
   "main": "./src/index.js",
@@ -49,22 +49,22 @@
     "@babel/eslint-parser": "^7.15.8",
     "@babel/preset-react": "^7.26.3",
     "@babel/register": "^7.25.9",
-    "@ossy/authentication": "^3.11.1",
-    "@ossy/design-system": "^3.25.0",
+    "@ossy/authentication": "^3.26.0",
+    "@ossy/design-system": "^3.26.0",
     "@ossy/locale": "^3.4.0",
     "@ossy/manifest": "^3.24.0",
-    "@ossy/package-catalog": "^3.25.0",
-    "@ossy/pages": "^3.0.9",
-    "@ossy/platform": "^3.25.0",
-    "@ossy/resources": "^3.25.0",
+    "@ossy/package-catalog": "^3.26.0",
+    "@ossy/pages": "^3.26.0",
+    "@ossy/platform": "^3.26.0",
+    "@ossy/resources": "^3.26.0",
     "@ossy/router": "^3.25.0",
     "@ossy/router-react": "^3.18.0",
     "@ossy/schema": "^3.24.0",
-    "@ossy/sdk": "^3.24.0",
-    "@ossy/sdk-react": "^3.12.0",
-    "@ossy/themes": "^3.25.0",
+    "@ossy/sdk": "^3.26.0",
+    "@ossy/sdk-react": "^3.26.0",
+    "@ossy/themes": "^3.26.0",
     "@ossy/users": "^3.24.1",
-    "@ossy/workspaces": "^3.25.0",
+    "@ossy/workspaces": "^3.26.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": "00dd4b51a94de7e0399c9dfa59380a53e58c8523"
+  "gitHead": "0df308a330150a890b9dd4d6ffc2e9f28bd31966"
 }

package/src/shell/DevPagesPanel.jsx

@@ -5,12 +5,7 @@ import { useApp } from './AppContext.js'
 import { formatPagePaths, groupPagesByFeature } from './devPagesUtils.js'
 import { packageNameToSlug } from '@ossy/manifest/build-manifest-summary'
 
-const monoStyle = {
-  fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
-  fontSize: '0.8125rem',
-  lineHeight: 1.4,
-  wordBreak: 'break-all',
-}
+const monoStyle = { wordBreak: 'break-all' }
 
 const currentPageStyles = {
   padding: 'var(--space-s)',
@@ -65,13 +60,13 @@ export const DevPagesPanel = () => {
           text="design-system.dev.pagesPanel.currentPage"
           style={{ marginBottom: 'var(--space-xs)' }}
         />
-        <Text style={monoStyle}>
+        <Text family="mono" font="xs" leading="l" style={monoStyle}>
           <strong><Text as="span" text="design-system.dev.pagesPanel.id" />:</strong> {app?.pageId || '—'}
         </Text>
-        <Text style={monoStyle}>
+        <Text family="mono" font="xs" leading="l" style={monoStyle}>
           <strong><Text as="span" text="design-system.dev.pagesPanel.path" />:</strong> {currentPathLabel}
         </Text>
-        <Text style={monoStyle}>
+        <Text family="mono" font="xs" leading="l" style={monoStyle}>
           <strong><Text as="span" text="design-system.dev.pagesPanel.url" />:</strong> {currentUrl}
         </Text>
         {packageDetailHref && currentPage?.package && (
@@ -94,7 +89,7 @@ export const DevPagesPanel = () => {
 
         {groups.map(({ key, label, pages: groupPages }) => (
           <View key={key} gap="xs">
-            <Text style={{ fontWeight: 700, fontSize: '0.875rem' }}>{label}</Text>
+            <Text weight="bold" font="s">{label}</Text>
             <View gap="xs">
               {groupPages.map((page) => {
                 const href = router.getHref(page.id)
@@ -115,8 +110,8 @@ export const DevPagesPanel = () => {
                     }}
                   >
                     <View gap="2px" style={{ alignItems: 'flex-start' }}>
-                      <Text style={{ ...monoStyle, fontWeight: 600 }}>{page.id}</Text>
-                      <Text style={{ ...monoStyle, opacity: 0.85 }}>
+                      <Text family="mono" font="xs" leading="l" weight="bold" style={monoStyle}>{page.id}</Text>
+                      <Text family="mono" font="xs" leading="l" style={{ ...monoStyle, opacity: 0.85 }}>
                         {formatPagePaths(page.path)}
                       </Text>
                     </View>

package/src/shell/MobileShellNav.jsx

@@ -142,8 +142,8 @@ export function MobileShellNav ({
             display: 'flex',
             flexDirection: 'column',
             // Theme primary is glass; over Overlay's dark scrim it reads as a muddy top bar.
-            // Use solid color.primary so drawer chrome stays opaque and readable.
-            background: 'var(--color-primary)',
+            // Use the opaque primary so drawer chrome stays readable.
+            background: 'var(--surface-primary-solid)',
             backdropFilter: 'none',
             WebkitBackdropFilter: 'none',
           })}

package/src/shell/ThemeEditor.jsx

@@ -68,22 +68,34 @@ export const ThemeEditor = () => {
         isEditorOpen && (
           <Overlay isVisible={true} onClose={onToggle}>
             <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 key={name} data-component="theme-editor-field">
-                        <label>{name}</label>
-                        <input value={value} data-name={name} />
-                      </div>
-                    ))}
-                    <Button type="submit" variant="cta">
-                      Save
-                    </Button>
+              <View
+                data-region="content"
+                data-component="theme-editor-panel"
+                surface="primary"
+                roundness="m"
+              >
+                <View data-component="theme-editor-scroll">
+                  {/* Column views default to min-height 0, which shrinks this panel instead of scrolling. */}
+                  <View
+                    gap="m"
+                    inset="l"
+                    style={{ flexShrink: 0, minHeight: 'min-content' }}
+                  >
+                    <DevPagesPanel />
+                    <View as="form" gap="s" onSubmit={onSaveTheme} onChange={onThemeChange}>
+                      {Object.entries(theme).map(([name, value]) => (
+                        <div key={name} data-component="theme-editor-field">
+                          <label>{name}</label>
+                          <input value={value} data-name={name} />
+                        </div>
+                      ))}
+                      <Button type="submit" variant="cta">
+                        Save
+                      </Button>
+                    </View>
+                    <ThemeSwitcher/>
+                    <Text>Views: {viewCount}</Text>
                   </View>
-                  <ThemeSwitcher/>
-                  <Text>Views: {viewCount}</Text>
                 </View>
               </View>
             </View>

package/src/shell/buildSidebarNav.js

@@ -23,7 +23,7 @@ export { resolvePackageHomePageId }
 
 /**
  * Build entitlement-filtered sidebar navigation — one link per entitled package
- * that registers a `{slug}/home` page.
+ * that registers a `{slug}/home` page, or `{slug}/overview` when home is absent.
  *
  * @param {{
  *   manifestSummary?: { packages?: Array<{ slug?: string, package?: string, pages?: Array<{ id: string, title?: string, path?: string | Record<string, string> }> }> }

package/src/shell/resolvePackageHomePageId.js

@@ -1,6 +1,6 @@
 /**
- * Pick the package home page for sidebar nav.
- * Only `{slug}/home` qualifies — no fallback to other pages.
+ * Pick the package landing page for sidebar nav.
+ * `{slug}/home` wins. `{slug}/overview` is the landing when the package has no home page.
  *
  * @param {Array<{ id?: string }> | undefined} pages
  * @param {string} slug
@@ -8,7 +8,8 @@
  */
 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
+  const ids = new Set((pages || []).map((page) => page?.id))
+  if (ids.has(`${slug}/home`)) return `${slug}/home`
+  if (ids.has(`${slug}/overview`)) return `${slug}/overview`
+  return null
 }

package/src/shell/themeEditorStyles.js

@@ -20,12 +20,36 @@ export const themeEditorStyles = `
     width: min(720px, 80vw);
     min-width: min(480px, 100%);
     max-height: 85vh;
-    overflow-y: auto;
-    overflow-x: hidden;
+    overflow: hidden;
     margin: 0 auto;
     box-shadow: 2px 2px 5px color-mix(in srgb, var(--foreground) 20%, transparent);
   }
 
+  [data-component="theme-editor-scroll"] {
+    min-height: 0;
+    flex: 1 1 auto;
+    overflow-x: hidden;
+    overflow-y: auto;
+    margin: var(--space-s);
+    scrollbar-width: thin;
+    scrollbar-color: color-mix(in srgb, var(--foreground) 45%, transparent) transparent;
+  }
+
+  [data-component="theme-editor-scroll"]::-webkit-scrollbar {
+    width: 10px;
+  }
+
+  [data-component="theme-editor-scroll"]::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  [data-component="theme-editor-scroll"]::-webkit-scrollbar-thumb {
+    background: color-mix(in srgb, var(--foreground) 45%, transparent);
+    border-radius: 999px;
+    border: 3px solid transparent;
+    background-clip: padding-box;
+  }
+
   [data-component="theme-editor-overlay"] {
     height: 100%;
     width: 100%;
@@ -37,7 +61,7 @@ export const themeEditorStyles = `
 
   [data-component="theme-editor-field"] label {
     display: block;
-    font-family: var(--text-default-font-family, sans-serif);
+    font-family: var(--family-sans, sans-serif);
     margin-bottom: var(--space-xs);
     font-weight: 700;
   }