@ossy/app 1.40.3 → 3.0.2

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

@@ -0,0 +1,101 @@
+import React from 'react'
+import {
+  PageSection,
+  View,
+  Slot,
+} from '@ossy/design-system'
+import { useCompactShellLayout, shellSlotUnset } from '@ossy/app/shell'
+
+export const metadata = { id: '@ossy/app/layout/default' }
+
+export const slots = {
+  'app:head': '@ossy/app/component/head/default',
+  'app:header': '@ossy/app/component/header/default',
+  'app:sidebar': '@ossy/app/component/sidebar/default',
+  'app:footer': '@ossy/app/component/footer/default',
+}
+
+export default function DefaultLayout ({
+  shellSlots = {},
+  maxWidth = 'xl',
+}) {
+  const compact = useCompactShellLayout()
+
+  return (
+    <>
+      {!shellSlotUnset(shellSlots['app:head']) && <Slot view="app:head" />}
+      <View
+        surface="base"
+        data-ossy-app-shell
+        style={{
+          boxSizing: 'border-box',
+          height: '100%',
+          minWidth: 0,
+          padding: compact ? 0 : 'var(--space-m)',
+        }}
+      >
+        <PageSection
+          maxWidth={maxWidth}
+          style={{ height: '100%', minWidth: 0, width: '100%', boxSizing: 'border-box' }}
+        >
+          {!shellSlotUnset(shellSlots['app:system-messages']) && (
+            <Slot view="app:system-messages" />
+          )}
+
+          <View
+            layout="sidebar"
+            surface="primary"
+            roundness="m"
+            inset={compact ? 'none' : 's'}
+            gap="xs"
+            style={{
+              height: '100%',
+              minWidth: 0,
+              minHeight: 0,
+              ...(compact ? { gap: '4px' } : {}),
+            }}
+          >
+            {!shellSlotUnset(shellSlots['app:sidebar']) && (
+              <Slot region="sidebar-primary" view="app:sidebar" />
+            )}
+
+            {!shellSlotUnset(shellSlots['app:header']) && (
+              <Slot region="header" view="app:header" />
+            )}
+
+            <View
+              data-region="content"
+              data-scroll
+              gap={compact ? 'xxs' : 'xs'}
+              style={{
+                minHeight: 0,
+                minWidth: 0,
+                overflowX: 'hidden',
+                overflowY: 'auto',
+                display: 'flex',
+                flexDirection: 'column',
+              }}
+            >
+              <main
+                style={{
+                  flex: '1 0 auto',
+                  minHeight: '100%',
+                  minWidth: 0,
+                  width: '100%',
+                  boxSizing: 'border-box',
+                  display: 'flex',
+                  flexDirection: 'column',
+                }}
+              >
+                <Slot view="app:content" />
+              </main>
+              {!shellSlotUnset(shellSlots['app:footer']) && (
+                <Slot view="app:footer" style={{ flexShrink: 0 }} />
+              )}
+            </View>
+          </View>
+        </PageSection>
+      </View>
+    </>
+  )
+}

package/src/shell-registry/footer-default.component.jsx

@@ -0,0 +1,39 @@
+import React from 'react'
+import { View, Slot } from '@ossy/design-system'
+import { LanguageList } from '../shell/LanguageList.jsx'
+
+export const metadata = { id: '@ossy/app/component/footer/default' }
+
+/** TL/TR/BR/BL — smallest corners except BR, which matches the shell outer bottom-right (`--space-l`). */
+const FOOTER_BORDER_RADIUS =
+  'var(--space-xs) var(--space-xs) var(--space-l) var(--space-xs)'
+
+export default function DefaultFooter ({ surface, style, ...rest }) {
+  return (
+    <View
+      as="footer"
+      surface={surface ?? 'primary'}
+      inset="m"
+      style={{
+        flexShrink: 0,
+        minHeight: 'auto',
+        borderRadius: FOOTER_BORDER_RADIUS,
+        ...style,
+      }}
+      {...rest}
+    >
+      <View
+        layout="row"
+        gap="l"
+        alignItems="flex-start"
+        justifyContent="flex-start"
+        style={{ minWidth: 0, width: '100%' }}
+      >
+        <View layout="column" style={{ minWidth: 0 }}>
+          <Slot view="@ossy/app/component/logo/logotype" />
+        </View>
+        <LanguageList />
+      </View>
+    </View>
+  )
+}

package/src/shell-registry/head-default.component.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+
+/**
+ * Default document head assets for platform shell layouts (React 19 hoisting).
+ */
+export function SiteDocumentHead () {
+  return (
+    <>
+      <link rel="apple-touch-icon" href="/logo192x192.png" />
+      <link rel="manifest" href="/manifest.json" />
+    </>
+  )
+}
+
+export const metadata = { id: '@ossy/app/component/head/default' }
+
+export default SiteDocumentHead

package/src/shell-registry/header-default.component.jsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { AppHeader, View } from '@ossy/design-system'
+import { useCompactShellLayout } from '../shell/useCompactShellLayout.js'
+import { HeaderAuthActions } from '../shell/HeaderAuthActions.jsx'
+import { LanguageSelect } from '../shell/LanguageSelect.jsx'
+import { ThemeSelect } from '../shell/ThemeSelect.jsx'
+
+export const metadata = { id: '@ossy/app/component/header/default' }
+
+/** TL/TR/BR/BL — smallest corners except TR, which matches sidebar outer top-left (`--space-l`). */
+const HEADER_BORDER_RADIUS =
+  'var(--space-xs) var(--space-l) var(--space-xs) var(--space-xs)'
+
+export default function DefaultHeader ({
+  compact: compactProp,
+  surface,
+  style,
+  inset,
+  ...rest
+}) {
+  const compactViewport = useCompactShellLayout()
+  const compact = compactProp ?? compactViewport
+
+  return (
+    <AppHeader
+      compact={compact}
+      inset={inset ?? 's'}
+      surface={surface ?? 'primary'}
+      style={{
+        borderRadius: HEADER_BORDER_RADIUS,
+        ...style,
+      }}
+      {...rest}
+      far={(
+        <View
+          layout="row"
+          style={{
+            flexShrink: 0,
+            alignItems: 'center',
+            gap: compact ? 'var(--space-xs)' : 'var(--space-s)',
+          }}
+        >
+          <LanguageSelect />
+          <ThemeSelect compact={compact} />
+          <HeaderAuthActions compact={compact} />
+        </View>
+      )}
+    />
+  )
+}

package/src/shell-registry/logo-logomark.component.jsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import { Icon } from '@ossy/design-system'
+
+export const metadata = { id: '@ossy/app/component/logo/logomark' }
+
+export default function DefaultLogoLogomark (props) {
+  return <Icon name="components" variant="components" size="m" {...props} />
+}

package/src/shell-registry/logo-logotype.component.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Icon, Text, View } from '@ossy/design-system'
+
+export const metadata = { id: '@ossy/app/component/logo/logotype' }
+
+export default function DefaultLogoLogotype ({ style, ...rest }) {
+  return (
+    <View layout="row" gap="xs" alignItems="center" style={style} {...rest}>
+      <Icon name="components" variant="components" size="m" />
+      <Text variant="heading-tertiary" as="span">
+        Demo
+      </Text>
+    </View>
+  )
+}

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

@@ -0,0 +1,58 @@
+import React from 'react'
+import { PageSection, View, Slot } from '@ossy/design-system'
+import { shellSlotUnset } from '@ossy/app/shell'
+
+export const metadata = { id: '@ossy/app/layout/minimal' }
+
+export const slots = {
+  'app:head': '@ossy/app/component/head/default',
+  'app:header': '@ossy/app/component/header/default',
+}
+
+export default function MinimalLayout ({ shellSlots = {} }) {
+  return (
+    <>
+      {!shellSlotUnset(shellSlots['app:head']) && <Slot view="app:head" />}
+      {!shellSlotUnset(shellSlots['app:system-messages']) && (
+        <Slot view="app:system-messages" />
+      )}
+      <View
+        surface="base"
+        data-ossy-app-shell
+        style={{
+          boxSizing: 'border-box',
+          height: '100%',
+          minWidth: 0,
+          padding: 'var(--space-s)',
+        }}
+      >
+        <PageSection maxWidth="m" style={{ height: '100%', minWidth: 0, width: '100%' }}>
+          <View
+            stack
+            surface="primary"
+            roundness="m"
+            inset="s"
+            gap="xs"
+            style={{ height: '100%', minHeight: 0 }}
+          >
+            {!shellSlotUnset(shellSlots['app:header']) && (
+              <Slot view="app:header" />
+            )}
+            <main
+              style={{
+                flex: '1 1 auto',
+                minHeight: 0,
+                minWidth: 0,
+                overflow: 'hidden',
+                display: 'flex',
+                flexDirection: 'column',
+              }}
+            >
+              <Slot view="app:content" />
+            </main>
+          </View>
+        </PageSection>
+      </View>
+    </>
+  )
+}

package/src/shell-registry/sidebar-default.component.jsx

@@ -0,0 +1,281 @@
+import React, { useState, useMemo, useRef, useEffect, useCallback } from 'react'
+import { Button, View, Slot, useLocale } from '@ossy/design-system'
+import { useRouter } from '@ossy/router-react'
+import { useSdk } from '@ossy/sdk-react'
+import { GetWorkspace } from '@ossy/workspaces'
+import { useApp, buildSidebarNav, patchUserAppSettings, useCompactShellLayout } from '@ossy/app/shell'
+
+export const metadata = { id: '@ossy/app/component/sidebar/default' }
+
+const SIDEBAR_LOGO_BLOCK_MIN_PX = 44
+const RAIL_EDGE_HIT_LEFT_PX = 14
+const RAIL_EDGE_HIT_RIGHT_PX = 18
+const RAIL_COLLAPSE_DELAY_MS = 220
+const LOGO_FADE_MS = 180
+const RAIL_INNER_WIDTH_PX = 56
+const RAIL_EXPANDED_INNER_PX = 220
+
+function pathnameOf (href) {
+  if (typeof href !== 'string' || !href) return ''
+  try {
+    if (/^[a-z][a-z0-9+.-]*:\/\//i.test(href)) {
+      return new URL(href).pathname
+    }
+  } catch {
+    // fall through
+  }
+  return href.split('?')[0].split('#')[0]
+}
+
+function isNavSelected ({ href, pageId, itemPageId, routerHref }) {
+  const current = pathnameOf(routerHref)
+  const target = pathnameOf(href)
+  if (current && target && current === target) return true
+  if (itemPageId && pageId === itemPageId) return true
+  return false
+}
+
+function navLabelForItem (item, showLabels, t) {
+  if (!showLabels) return ''
+  return item.labelKey ? t(item.labelKey) : item.label
+}
+
+export default function DefaultSidebar ({
+  small: smallProp = false,
+  ...rest
+}) {
+  const [hoverRailExpanded, setHoverRailExpanded] = useState(false)
+  const collapseTimerRef = useRef(null)
+  const app = useApp()
+  const pageId = app?.pageId
+  const compactViewport = useCompactShellLayout()
+  const initialSidebarCollapsed = app?.sidebarPrimaryCollapsed === true
+  const [sidebarCollapsed, setSidebarCollapsed] = useState(initialSidebarCollapsed)
+
+  const onToggleCollapsed = useCallback(() => {
+    setSidebarCollapsed((collapsed) => {
+      const next = !collapsed
+      patchUserAppSettings({ sidebarPrimaryCollapsed: next }).catch(() => {})
+      return next
+    })
+  }, [])
+
+  const small = compactViewport || sidebarCollapsed || smallProp
+  const sdk = useSdk()
+  const { data: workspace } = sdk.read(GetWorkspace)
+  const router = useRouter()
+  const { t } = useLocale()
+
+  const desktopHoverRail = small && !compactViewport
+  const showLabels = !small || (desktopHoverRail && hoverRailExpanded)
+  const iconOnly = !showLabels
+  const hoverExpandedDesktop = desktopHoverRail && hoverRailExpanded
+  const narrowChrome = small
+
+  const { shellItems, packageItems } = useMemo(
+    () => buildSidebarNav({
+      manifestSummary: app?.manifestSummary,
+      workspaceServices: workspace?.services,
+      definitions: app?.manifestSummary?.definitions,
+      isAuthenticated: app?.isAuthenticated,
+      workspaceId: app?.workspaceId || workspace?.id,
+      devMode: app?.devMode,
+      devEntitlements: app?.devEntitlements,
+    }),
+    [
+      app?.manifestSummary,
+      app?.devEntitlements,
+      app?.devMode,
+      app?.isAuthenticated,
+      app?.workspaceId,
+      workspace?.services,
+      workspace?.id,
+    ],
+  )
+
+  const shellButtons = shellItems.map((item) => {
+    const href = router.getHref(item.id)
+    return {
+      key: item.id,
+      href,
+      selected: isNavSelected({ href, pageId, itemPageId: item.id, routerHref: router.href }),
+      prefix: iconOnly ? { name: item.prefix, size: 's', style: { flexShrink: 0 } } : item.prefix,
+      label: navLabelForItem(item, showLabels, t),
+    }
+  })
+
+  const packageButtons = packageItems.map((item) => {
+    const href = router.getHref(item.pageId)
+    return {
+      key: item.slug,
+      href,
+      selected: isNavSelected({ href, pageId, itemPageId: item.pageId, routerHref: router.href }),
+      prefix: iconOnly ? { name: item.icon, size: 's', style: { flexShrink: 0 } } : item.icon,
+      label: iconOnly ? '' : item.label,
+      title: iconOnly ? item.label : undefined,
+    }
+  })
+
+  const menuNear = [...shellButtons, ...packageButtons]
+
+  const clearCollapseTimer = useCallback(() => {
+    if (!collapseTimerRef.current) return
+    clearTimeout(collapseTimerRef.current)
+    collapseTimerRef.current = null
+  }, [])
+
+  const openHoverRail = useCallback(() => {
+    clearCollapseTimer()
+    setHoverRailExpanded(true)
+  }, [clearCollapseTimer])
+
+  const closeHoverRailWithDelay = useCallback(() => {
+    clearCollapseTimer()
+    collapseTimerRef.current = setTimeout(() => {
+      setHoverRailExpanded(false)
+      collapseTimerRef.current = null
+    }, RAIL_COLLAPSE_DELAY_MS)
+  }, [clearCollapseTimer])
+
+  useEffect(() => () => clearCollapseTimer(), [clearCollapseTimer])
+
+  const logoFadeStyle = {
+    transition: `opacity ${LOGO_FADE_MS}ms ease`,
+  }
+
+  const renderLogo = () => {
+    if (desktopHoverRail) {
+      return (
+        <div style={{ position: 'relative', height: 28, width: '100%', display: 'flex', justifyContent: 'center' }}>
+          <div style={{ ...logoFadeStyle, opacity: hoverRailExpanded ? 0 : 1 }}>
+            <Slot view="@ossy/app/component/logo/logomark" />
+          </div>
+          <div
+            style={{
+              position: 'absolute',
+              inset: 0,
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              ...logoFadeStyle,
+              opacity: hoverRailExpanded ? 1 : 0,
+              pointerEvents: 'none',
+            }}
+          >
+            <Slot view="@ossy/app/component/logo/logotype" />
+          </div>
+        </div>
+      )
+    }
+
+    return (
+      <Slot view={showLabels ? '@ossy/app/component/logo/logotype' : '@ossy/app/component/logo/logomark'} />
+    )
+  }
+
+  const renderButton = (item) => (
+    <Button
+      key={item.key ?? item.href}
+      href={item.href}
+      variant={item.selected ? 'cta' : 'link'}
+      prefix={item.prefix}
+      title={item.title}
+      aria-current={item.selected ? 'page' : undefined}
+      style={{
+        justifyContent: iconOnly ? 'center' : 'flex-start',
+        padding: hoverExpandedDesktop ? '8px 24px' : (narrowChrome ? 'var(--space-s)' : '8px 24px'),
+      }}
+    >
+      {item.label}
+    </Button>
+  )
+
+  const inner = (
+    <View
+      {...(!desktopHoverRail ? rest : {})}
+      surface="primary"
+      gap={narrowChrome ? 's' : 'm'}
+      style={{
+        height: '100%',
+        width: desktopHoverRail ? '100%' : 'auto',
+        minWidth: small ? 0 : undefined,
+        maxHeight: small ? '100%' : undefined,
+        padding: hoverExpandedDesktop
+          ? 'var(--space-m) var(--space-l) var(--space-m) var(--space-m)'
+          : narrowChrome
+          ? 'var(--space-s) var(--space-xs)'
+          : 'var(--space-m) var(--space-l) var(--space-m) var(--space-m)',
+        borderRadius: 'var(--space-l) var(--space-s) var(--space-s) var(--space-l)',
+        flexShrink: 0,
+        boxSizing: 'border-box',
+      }}
+    >
+      <View
+        layout="row"
+        style={{
+          justifyContent: 'center',
+          alignItems: 'center',
+          marginBottom: 'var(--space-m)',
+          minHeight: SIDEBAR_LOGO_BLOCK_MIN_PX,
+          flexShrink: 0,
+        }}
+      >
+        {renderLogo()}
+      </View>
+
+      <View gap="s" style={{ flexGrow: 1, overflowY: 'auto', minHeight: 0 }} data-scroll>
+        <View style={{ flexShrink: 0, height: 'var(--space-l)', minHeight: 'var(--space-l)' }} />
+        {menuNear.map(renderButton)}
+      </View>
+
+      {onToggleCollapsed && !compactViewport && (
+        <View style={{ flexShrink: 0, marginTop: 'var(--space-s)' }}>
+          <Button
+            variant="link"
+            prefix={small ? 'arrow-long-right' : 'arrow-long-left'}
+            onClick={(e) => {
+              e.stopPropagation()
+              onToggleCollapsed()
+            }}
+            aria-label={small
+              ? (t('app.shell.sidebar.expand') || 'Expand sidebar')
+              : (t('app.shell.sidebar.collapse') || 'Collapse sidebar')}
+            style={{
+              justifyContent: 'flex-start',
+              width: '100%',
+              padding: '8px 0 8px 12px',
+            }}
+          />
+        </View>
+      )}
+    </View>
+  )
+
+  if (!desktopHoverRail) {
+    return inner
+  }
+
+  return (
+    <div
+      {...rest}
+      data-ossy-sidebar-rail
+      style={{
+        alignSelf: 'stretch',
+        flexShrink: 0,
+        boxSizing: 'content-box',
+        width: hoverRailExpanded ? RAIL_EXPANDED_INNER_PX : RAIL_INNER_WIDTH_PX,
+        paddingLeft: RAIL_EDGE_HIT_LEFT_PX,
+        marginLeft: -RAIL_EDGE_HIT_LEFT_PX,
+        paddingRight: RAIL_EDGE_HIT_RIGHT_PX,
+        marginRight: -RAIL_EDGE_HIT_RIGHT_PX,
+        transition: 'width 0.2s ease',
+        zIndex: hoverRailExpanded ? 25 : 2,
+        position: 'relative',
+      }}
+      onMouseEnter={openHoverRail}
+      onMouseLeave={closeHoverRailWithDelay}
+    >
+      {inner}
+    </div>
+  )
+}

package/src/sv.translations.json

@@ -0,0 +1,8 @@
+{
+  "app.shell.sidebar.expand": "Expandera sidopanel",
+  "app.shell.sidebar.collapse": "Smal sidopanel med ikoner",
+  "app.shell.header.languagePicker": "Språk",
+  "app.shell.footer.languages": "Språk",
+  "app.shell.header.themeSwitch": "{theme}-tema. Byt tema.",
+  "app.shell.header.profile": "Profil"
+}

package/src/manifest/action-id-to-tool-name.js

@@ -1,29 +0,0 @@
-/**
- * Derive MCP tool name from platform action id.
- *
- * @example
- * actionIdToToolName('@ossy/resources/actions/list') // 'ossy_resources_list'
- *
- * @param {string} actionId
- * @returns {string}
- */
-export function actionIdToToolName (actionId) {
-  const parts = actionId.split('/')
-  if (parts.length >= 4 && parts[0].startsWith('@') && parts[2] === 'actions') {
-    const provider = parts[0].slice(1)
-    return `${provider}_${parts[1]}_${parts[3]}`.replace(/-/g, '_')
-  }
-  return `ossy_${actionId.replace(/^@/, '').replace(/\//g, '_').replace(/-/g, '_')}`
-}
-
-/**
- * @param {string} actionId
- * @returns {string}
- */
-export function humanizeActionId (actionId) {
-  const intent = actionId.split('/').pop() || actionId
-  return intent
-    .split('-')
-    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
-    .join(' ')
-}