@ossy/package-catalog 1.0.1

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@ossy/package-catalog",
+  "description": "Capability catalog UI — browse manifest packages, actions, and integration examples",
+  "version": "1.0.1",
+  "type": "module",
+  "main": "./src/index.js",
+  "module": "./src/index.js",
+  "exports": {
+    ".": "./src/index.js"
+  },
+  "author": "Ossy <yourfriends@ossy.se> (https://ossy.se)",
+  "license": "MIT",
+  "ossy": {
+    "src": "./src"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "files": [
+    "/src",
+    "README.md"
+  ],
+  "peerDependencies": {
+    "@ossy/app": ">=1.0.0",
+    "@ossy/design-system": ">=1.0.0",
+    "@ossy/router-react": ">=1.0.0",
+    "@ossy/sdk-react": ">=1.0.0",
+    "@ossy/workspaces": ">=1.0.0",
+    "react": ">=19.0.0 <20.0.0"
+  },
+  "gitHead": "a0d89185a17f8de8ce328c3a648c108ff1d61d8f"
+}

package/src/ActionCapabilityCard.jsx

@@ -0,0 +1,87 @@
+import React from 'react'
+import { Text, View } from '@ossy/design-system'
+import { humanizeCapabilityId } from './packageCopy.js'
+
+/**
+ * Widget-scale action card — clickable list item in the Actions split view.
+ *
+ * @param {{
+ *   action: { id: string, access?: string, title?: string, description?: string, mcpTool?: string, inputSchema?: object }
+ *   selected?: boolean
+ *   onSelect?: () => void
+ * }} props
+ */
+export function ActionCapabilityCard ({ action, selected = false, onSelect }) {
+  const title = action.title || humanizeCapabilityId(action.id)
+
+  return (
+    <View
+      as="button"
+      type="button"
+      gap="s"
+      inset="m"
+      roundness="m"
+      surface="primary"
+      className="pkg-store-action-card"
+      onClick={onSelect}
+      aria-pressed={selected}
+    >
+      <View gap="2px">
+        <Text className="pkg-store-text-strong">{title}</Text>
+        <Text className="pkg-store-mono pkg-store-mono--sm pkg-store-text-subtle">{action.id}</Text>
+      </View>
+
+      {action.description && (
+        <Text variant="small" className="pkg-store-text-dim">
+          {action.description}
+        </Text>
+      )}
+
+      {action.access && (
+        <Text variant="small" className="pkg-store-text-subtle">
+          access: {action.access}
+        </Text>
+      )}
+    </View>
+  )
+}
+
+/**
+ * Merge manifest action with capability metadata from build-time capabilities.json.
+ *
+ * @param {{ id: string, access?: string }} action
+ * @param {Record<string, object> | undefined} schemaById keyed by action id
+ */
+export function enrichActionWithSchema (action, schemaById) {
+  const schema = schemaById?.[action.id]
+  if (!schema) return action
+  return {
+    ...action,
+    title: schema.title,
+    description: schema.description,
+    mcpTool: schema.mcpTool,
+    inputSchema: schema.inputSchema,
+  }
+}
+
+/** @param {Array<{ actionId: string, name?: string, title?: string, description?: string, inputSchema?: object }>} tools */
+export function buildCapabilitySchemaMap (tools) {
+  /** @type {Record<string, object>} */
+  const map = {}
+  for (const tool of tools || []) {
+    if (!tool?.actionId) continue
+    map[tool.actionId] = {
+      id: tool.actionId,
+      title: tool.title,
+      description: tool.description,
+      mcpTool: tool.name,
+      inputSchema: tool.inputSchema,
+    }
+  }
+  return map
+}
+
+/** @param {{ tools?: Array<object> } | undefined} capabilities */
+export function capabilitySchemaMapFromApp (capabilities) {
+  return buildCapabilitySchemaMap(capabilities?.tools)
+}

package/src/ActionExamplesPanel.jsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { HttpInvokeExample, SdkInvokeExample, Text, View } from '@ossy/design-system'
+import { useApp, resolveEndpoints } from '@ossy/app/shell'
+import { humanizeCapabilityId } from './packageCopy.js'
+
+/**
+ * Split-view detail panel for a single action's invoke examples.
+ *
+ * @param {{ action: { id: string, title?: string, description?: string, mcpTool?: string, access?: string } }} props
+ */
+export function ActionExamplesPanel ({ action }) {
+  const app = useApp()
+  const { actionsUrl } = resolveEndpoints(app)
+  const title = action.title || humanizeCapabilityId(action.id)
+
+  return (
+    <View
+      gap="s"
+      inset="m"
+      roundness="m"
+      surface="primary"
+      className="pkg-store-action-examples"
+    >
+      <View gap="2px">
+        <Text className="pkg-store-text-strong">{title}</Text>
+        <Text className="pkg-store-mono pkg-store-mono--sm pkg-store-text-subtle">{action.id}</Text>
+      </View>
+
+      {action.description && (
+        <Text variant="small" className="pkg-store-prose--muted">
+          {action.description}
+        </Text>
+      )}
+
+      {action.mcpTool && (
+        <Text variant="small" className="pkg-store-mono pkg-store-mono--xs pkg-store-text-muted">
+          MCP: {action.mcpTool}
+        </Text>
+      )}
+
+      <View gap="xs">
+        <SdkInvokeExample actionId={action.id} />
+        <HttpInvokeExample actionId={action.id} actionsUrl={actionsUrl} />
+      </View>
+    </View>
+  )
+}

package/src/CatalogPageStyles.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { CodeExampleStyles } from '@ossy/design-system'
+import { packageStoreStyles } from './packageStoreStyles.js'
+
+/** Shared styles for catalog list and detail pages. */
+export function CatalogPageStyles () {
+  return (
+    <>
+      <CodeExampleStyles />
+      <style href="@ossy/package-catalog/store" precedence="high">
+        {packageStoreStyles}
+      </style>
+    </>
+  )
+}

package/src/Definition.js

@@ -0,0 +1,9 @@
+export const Definition = {
+  id: 'package-catalog',
+  title: 'Capabilities',
+  description: 'Browse documented, invokable platform capabilities for your workspace.',
+  icon: 'layout-grid',
+  statuses: ['beta'],
+  entitlementRequired: false,
+  navOrder: 0,
+}

package/src/HowToCard.jsx

@@ -0,0 +1,79 @@
+import React from 'react'
+import { Button, Icon, Text, View } from '@ossy/design-system'
+import { useRouter } from '@ossy/router-react'
+import { scrollToPackageSection } from './packageDetailSections.js'
+
+/**
+ * @param {{
+ *   icon: string
+ *   title: string
+ *   body: string | React.ReactNode
+ *   href?: string
+ *   sectionId?: string
+ *   bodyParams?: Record<string, unknown>
+ * }} props
+ */
+export function HowToCard ({ icon, title, body, href, sectionId, bodyParams }) {
+  const router = useRouter()
+  const isSectionLink = Boolean(sectionId)
+
+  const handleActivate = () => {
+    if (sectionId) scrollToPackageSection(sectionId)
+  }
+
+  const handleKeyDown = (event) => {
+    if (!sectionId) return
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault()
+      scrollToPackageSection(sectionId)
+    }
+  }
+
+  const cardClassName = [
+    'pkg-store-howto-card',
+    'pkg-store-envelope',
+    isSectionLink ? 'pkg-store-howto-card--link' : '',
+  ].filter(Boolean).join(' ')
+
+  return (
+    <View
+      gap="s"
+      inset="m"
+      roundness="m"
+      surface="primary"
+      className={cardClassName}
+      role={isSectionLink ? 'link' : undefined}
+      tabIndex={isSectionLink ? 0 : undefined}
+      onClick={isSectionLink ? handleActivate : undefined}
+      onKeyDown={isSectionLink ? handleKeyDown : undefined}
+    >
+      <View justifyContent="center" alignItems="center">
+        <Icon name={icon} size="m" />
+      </View>
+      <Text variant="small" className="pkg-store-text-bold pkg-store-text-center" text={title} />
+      {typeof body === 'string'
+        ? (
+          <Text variant="small" className="pkg-store-card-body pkg-store-text-center pkg-store-prose--muted" text={body} params={bodyParams} />
+          )
+        : (
+          <View className="pkg-store-card-body pkg-store-text-center pkg-store-prose--muted">
+            {body}
+          </View>
+          )}
+      {href && (
+        <Button
+          variant="link"
+          href={router.getHref(href)}
+          label="package-catalog.home.howTo.http.createLink"
+        />
+      )}
+      {sectionId && (
+        <Text
+          variant="small"
+          text="package-catalog.detail.howTo.sectionLink"
+          className="pkg-store-section-link"
+        />
+      )}
+    </View>
+  )
+}

package/src/ManifestSection.jsx

@@ -0,0 +1,259 @@
+import React from 'react'
+import { Button, Icon, Text, View, useLocale } from '@ossy/design-system'
+import { useRouter } from '@ossy/router-react'
+import { formatPagePathForLanguage, formatPagePaths, monoStyle } from './formatPaths.js'
+import { getTaskDisplayDescription, getTaskDisplayTitle, humanizeCapabilityId } from './packageCopy.js'
+import { pkgStoreEnvelopedSurfaceProps } from './packageStoreStyles.js'
+
+/**
+ * @typedef {'pages' | 'actions' | 'entities' | 'secondary' | 'backgroundTasks' | 'list'} ManifestSectionVariant
+ */
+
+/**
+ * @param {{
+ *   title: string
+ *   subtitle?: string
+ *   items: Array<{ id: string, path?: string | Record<string, string>, access?: string, title?: string, credentials?: string[], description?: string }>
+ *   variant?: ManifestSectionVariant
+ *   linkPages?: boolean
+ *   icon?: string
+ *   openPageLabel?: string
+ *   accessLabel?: string
+ *   credentialsLabel?: string
+ *   titleVariant?: string
+ *   compact?: boolean
+ *   enveloped?: boolean
+ *   sectionId?: string
+ * }} props
+ */
+export function ManifestSection ({
+  title,
+  subtitle,
+  items = [],
+  variant = 'list',
+  linkPages = false,
+  icon,
+  openPageLabel = 'package-catalog.detail.openPage',
+  accessLabel = 'design-system.dev.pagesPanel.accessLabel',
+  credentialsLabel = 'design-system.dev.pagesPanel.credentialsLabel',
+  titleVariant = 'heading-secondary',
+  compact = false,
+  enveloped = false,
+  sectionId,
+}) {
+  const router = useRouter()
+  const { t } = useLocale()
+
+  if (!items.length) return null
+
+  const sectionIcon = icon || variantIcon(variant)
+  const resolvedTitleVariant = enveloped ? 'heading-secondary' : titleVariant
+  const subtitleOpacity = enveloped ? 0.75 : (compact ? 0.65 : 0.75)
+
+  const section = (
+    <View id={sectionId} gap={enveloped ? 'm' : (compact ? 's' : 'm')} className="pkg-store-section">
+      <View gap="xs">
+        <View layout="row" gap="s" alignItems="center">
+          {sectionIcon && (
+            enveloped
+              ? <Icon name={sectionIcon} size="m" />
+              : (
+                <View
+                  alignItems="center"
+                  justifyContent="center"
+                  style={{
+                    width: compact ? 28 : 36,
+                    height: compact ? 28 : 36,
+                    borderRadius: compact ? 8 : 10,
+                    background: 'color-mix(in srgb, var(--foreground) 6%, transparent)',
+                  }}
+                >
+                  <Icon name={sectionIcon} size={compact ? 'xs' : 's'} />
+                </View>
+                )
+          )}
+          <Text as="h2" variant={resolvedTitleVariant} text={title} />
+        </View>
+        {subtitle && (
+          <Text text={subtitle} style={{ opacity: subtitleOpacity, maxWidth: 560, fontSize: enveloped ? undefined : (compact ? '0.875rem' : undefined) }} />
+        )}
+      </View>
+
+      {variant === 'pages' && (
+        <View gap="s" className="pkg-store-pages-list">
+          {items.map((item) => (
+            <View
+              key={item.id}
+              layout="row"
+              gap="m"
+              alignItems="center"
+              inset="m"
+              roundness="m"
+              surface="primary"
+              className="pkg-store-page-row"
+              style={{ border: '1px solid var(--separator-primary)' }}
+            >
+              <View gap="2px" style={{ flex: 1, minWidth: 0 }}>
+                <Text style={{ fontWeight: 600 }}>{item.title || humanizeCapabilityId(item.id)}</Text>
+                {item.path != null && (
+                  <Text style={{ ...monoStyle, opacity: 0.8, fontSize: '0.75rem' }}>
+                    {formatPagePathForLanguage(item.path, router.language)}
+                  </Text>
+                )}
+              </View>
+              {linkPages && (
+                <Button
+                  variant="secondary"
+                  size="s"
+                  href={router.getHref(item.id)}
+                  icon="external"
+                  title={t(openPageLabel)}
+                  aria-label={t(openPageLabel)}
+                  style={{ flexShrink: 0 }}
+                />
+              )}
+            </View>
+          ))}
+        </View>
+      )}
+
+      {variant === 'actions' && (
+        <View as="ul" gap="s" className="pkg-store-bullets" style={{ listStyle: 'none', padding: 0, margin: 0 }}>
+          {items.map((item) => (
+            <View as="li" key={item.id} layout="row" gap="s" alignItems="flex-start">
+              <Text style={{ opacity: 0.5, lineHeight: 1.5 }} aria-hidden>
+                •
+              </Text>
+              <View gap="2px" style={{ flex: 1 }}>
+                <Text style={{ fontWeight: 600 }}>{humanizeCapabilityId(item.id)}</Text>
+                <Text style={{ ...monoStyle, opacity: 0.65, fontSize: '0.75rem' }}>{item.id}</Text>
+                {item.access && (
+                  <Text variant="small" text={accessLabel} params={{ access: item.access }} style={{ opacity: 0.7 }} />
+                )}
+              </View>
+            </View>
+          ))}
+        </View>
+      )}
+
+      {variant === 'backgroundTasks' && (
+        <View gap="s" className="pkg-store-secondary-grid">
+          {items.map((item) => {
+            const taskTitle = getTaskDisplayTitle(item)
+            const taskDescription = getTaskDisplayDescription(item)
+            return (
+              <View key={item.id} gap="xs" inset="m" roundness="m" className="pkg-store-secondary-item">
+                <Text style={{ fontWeight: 600, fontSize: '0.9375rem' }}>{taskTitle}</Text>
+                {taskDescription && (
+                  <Text variant="small" style={{ opacity: 0.8 }}>
+                    {taskDescription}
+                  </Text>
+                )}
+                <Text style={{ ...monoStyle, opacity: 0.65, fontSize: '0.75rem' }}>{item.id}</Text>
+              </View>
+            )
+          })}
+        </View>
+      )}
+
+      {variant === 'entities' && (
+        <View gap="s" className="pkg-store-entities-grid">
+          {items.map((item) => (
+            <View key={item.id} gap="xs" inset="m" roundness="m" surface="primary" className="pkg-store-entity">
+              <Text style={{ fontWeight: 600 }}>{item.title || humanizeCapabilityId(item.id)}</Text>
+              <Text style={{ ...monoStyle, opacity: 0.7, fontSize: '0.75rem' }}>{item.id}</Text>
+              {item.path != null && (
+                <Text style={{ ...monoStyle, opacity: 0.75, fontSize: '0.75rem' }}>
+                  {formatPagePaths(item.path)}
+                </Text>
+              )}
+              {item.credentials?.length > 0 && (
+                <Text
+                  variant="small"
+                  text={credentialsLabel}
+                  params={{ credentials: item.credentials.join(', ') }}
+                  style={{ opacity: 0.7 }}
+                />
+              )}
+            </View>
+          ))}
+        </View>
+      )}
+
+      {variant === 'secondary' && (
+        <View gap="xs" className="pkg-store-secondary-grid">
+          {items.map((item) => (
+            <View key={item.id} gap="2px" inset="s" roundness="s" className="pkg-store-secondary-item">
+              <Text style={{ fontWeight: 600, fontSize: '0.9375rem' }}>
+                {item.title || humanizeCapabilityId(item.id)}
+              </Text>
+              <Text style={{ ...monoStyle, opacity: 0.7, fontSize: '0.75rem' }}>{item.id}</Text>
+              {item.path != null && (
+                <Text style={{ ...monoStyle, opacity: 0.75, fontSize: '0.75rem' }}>
+                  {formatPagePaths(item.path)}
+                </Text>
+              )}
+              {item.access && (
+                <Text variant="small" style={{ opacity: 0.7 }}>
+                  {item.access}
+                </Text>
+              )}
+            </View>
+          ))}
+        </View>
+      )}
+
+      {variant === 'list' && (
+        <View gap="xs">
+          {items.map((item) => (
+            <View key={item.id} gap="2px" inset="s" roundness="s" surface="primary" className="pkg-store-card">
+              {linkPages ? (
+                <Button
+                  variant="link"
+                  href={router.getHref(item.id)}
+                  style={{ justifyContent: 'flex-start', height: 'auto', padding: 0 }}
+                >
+                  <Text style={{ ...monoStyle, fontWeight: 600 }}>{item.id}</Text>
+                </Button>
+              ) : (
+                <Text style={{ ...monoStyle, fontWeight: 600 }}>{item.id}</Text>
+              )}
+              {item.path != null && (
+                <Text style={{ ...monoStyle, opacity: 0.85 }}>{formatPagePaths(item.path)}</Text>
+              )}
+              {item.title && <Text style={{ opacity: 0.8 }}>{item.title}</Text>}
+              {item.access && <Text style={{ opacity: 0.75 }}>access: {item.access}</Text>}
+              {item.credentials?.length > 0 && (
+                <Text style={{ opacity: 0.75 }}>credentials: {item.credentials.join(', ')}</Text>
+              )}
+            </View>
+          ))}
+        </View>
+      )}
+    </View>
+  )
+
+  if (enveloped) {
+    return <View {...pkgStoreEnvelopedSurfaceProps}>{section}</View>
+  }
+
+  return section
+}
+
+/** @param {ManifestSectionVariant} variant */
+function variantIcon (variant) {
+  switch (variant) {
+    case 'pages':
+      return 'file-document'
+    case 'actions':
+      return 'bolt'
+    case 'backgroundTasks':
+      return 'timer'
+    case 'entities':
+      return 'database'
+    case 'secondary':
+      return 'layout-grid'
+    default:
+      return 'list'
+  }
+}

package/src/PackageActionsSection.jsx

@@ -0,0 +1,52 @@
+import React, { useState } from 'react'
+import { Icon, Text, View } from '@ossy/design-system'
+import { ActionCapabilityCard } from './ActionCapabilityCard.jsx'
+import { ActionExamplesPanel } from './ActionExamplesPanel.jsx'
+import { pkgStoreEnvelopedSurfaceProps } from './packageStoreStyles.js'
+import { PKG_DETAIL_SECTION_IDS } from './packageDetailSections.js'
+
+/**
+ * Actions section with enveloped surface and split-view examples panel.
+ *
+ * @param {{ actions: Array<{ id: string, access?: string, title?: string, description?: string, mcpTool?: string }> }} props
+ */
+export function PackageActionsSection ({ actions }) {
+  const [selectedId, setSelectedId] = useState(actions[0]?.id)
+  const selectedAction = actions.find((a) => a.id === selectedId) ?? actions[0]
+
+  return (
+    <View id={PKG_DETAIL_SECTION_IDS.actions} {...pkgStoreEnvelopedSurfaceProps}>
+      <View gap="xs">
+        <View layout="row" gap="s" alignItems="center">
+          <Icon name="bolt" size="m" />
+          <Text as="h2" variant="heading-secondary" text="package-catalog.detail.section.actions.title" />
+        </View>
+        <Text
+          text="package-catalog.detail.section.actions.subtitle"
+          className="pkg-store-prose--narrow"
+        />
+      </View>
+
+      <View
+        gap="m"
+        className={selectedAction ? 'pkg-store-actions-split' : undefined}
+        layout={selectedAction ? undefined : 'row-wrap'}
+      >
+        <View gap="m" layout="row-wrap" className="pkg-store-actions-list">
+          {actions.map((action) => (
+            <ActionCapabilityCard
+              key={action.id}
+              action={action}
+              selected={action.id === selectedId}
+              onSelect={() => setSelectedId(action.id)}
+            />
+          ))}
+        </View>
+
+        {selectedAction && (
+          <ActionExamplesPanel action={selectedAction} />
+        )}
+      </View>
+    </View>
+  )
+}

package/src/PackageHero.jsx

@@ -0,0 +1,97 @@
+import React from 'react'
+import { Button, Text, View, PageSection } from '@ossy/design-system'
+
+const Cover = ({
+  title,
+  titleMaxWidth = '1100px',
+  text,
+  textParams,
+  eyebrow,
+  meta,
+  metaParams,
+  actions = [],
+}) => (
+  <View
+    gap="l"
+    placeContent="center"
+    layout="column"
+    justifyContent="center"
+    className="pkg-store-hero-cover"
+  >
+    <View gap="m" alignItems="center">
+      {eyebrow && (
+        <Text
+          variant="small"
+          className="pkg-store-mono pkg-store-hero-eyebrow"
+        >
+          {eyebrow}
+        </Text>
+      )}
+
+      <Text
+        as="h1"
+        variant="display"
+        text={title}
+        className="pkg-store-hero-title"
+        style={{ maxWidth: titleMaxWidth }}
+      />
+
+      {text && (
+        <Text as="h2" variant="heading-tertiary" text={text} params={textParams} className="pkg-store-hero-subtitle" />
+      )}
+
+      {meta && (
+        <Text variant="small" text={meta} params={metaParams} className="pkg-store-hero-meta" />
+      )}
+    </View>
+
+    {actions.length > 0 && (
+      <View gap="m" layout="row" justifyContent="center" className="pkg-store-hero-actions">
+        {actions.map(({ label, ...props }) => (
+          <Button {...props} key={label} label={label} />
+        ))}
+      </View>
+    )}
+  </View>
+)
+
+/**
+ * Marketing-style hero for package detail — mirrors @ossy/booking HeroCover.
+ */
+export const PackageHero = ({
+  title,
+  titleMaxWidth = '1100px',
+  text,
+  textParams,
+  eyebrow,
+  meta,
+  metaParams,
+  actions = [],
+
+  id = 'package-hero',
+  surfaceAs = 'div',
+  maxWidth = 'l',
+  surface = 'hero',
+  ...props
+}) => (
+  <PageSection
+    id={id}
+    surfaceAs={surfaceAs}
+    maxWidth={maxWidth}
+    surface={surface}
+    {...props}
+    data-rounded
+    data-component="@ossy/package-catalog/package-hero"
+  >
+    <Cover
+      title={title}
+      titleMaxWidth={titleMaxWidth}
+      text={text}
+      textParams={textParams}
+      eyebrow={eyebrow}
+      meta={meta}
+      metaParams={metaParams}
+      actions={actions}
+    />
+  </PageSection>
+)