@ossy/package-catalog 1.0.1

package/src/package-detail.page.jsx

@@ -0,0 +1,197 @@
+import React from 'react'
+import { Icon, Page, ContentHeader, Text, View } from '@ossy/design-system'
+import { useApp } from '@ossy/app/shell'
+import { useRouter } from '@ossy/router-react'
+import { countPackageCapabilities } from './formatPaths.js'
+import { ManifestSection } from './ManifestSection.jsx'
+import { PackageHero } from './PackageHero.jsx'
+import {
+  enrichActionWithSchema,
+  capabilitySchemaMapFromApp,
+} from './ActionCapabilityCard.jsx'
+import { PackageActionsSection } from './PackageActionsSection.jsx'
+import { PackageHowToSection } from './PackageHowToSection.jsx'
+import { PKG_DETAIL_SECTION_IDS } from './packageDetailSections.js'
+import { PackageServiceToggle } from './PackageServiceToggle.jsx'
+import { WidgetCapabilityCard } from './WidgetCapabilityCard.jsx'
+import { pkgStoreEnvelopedSurfaceProps } from './packageStoreStyles.js'
+import { CatalogPageStyles } from './CatalogPageStyles.jsx'
+import {
+  filterBackgroundTasks,
+  getPackageIcon,
+  getPackagePitch,
+  slugToDisplayName,
+} from './packageCopy.js'
+
+export const metadata = {
+  id: 'packages/detail',
+  title: 'Capability overview',
+  path: {
+    en: '/packages/:packageSlug',
+    sv: '/paket/:packageSlug',
+  },
+}
+
+export default function PackageDetailPage () {
+  const app = useApp()
+  const router = useRouter()
+  const slug = router.params.packageSlug
+  const pkg = app?.manifestSummary?.packages?.find((p) => p.slug === slug)
+
+  if (!pkg) {
+    return (
+      <Page maxWidth="l" gap="m" className="pkg-store-root">
+        <Text variant="heading-secondary" as="h2" text="package-catalog.detail.notFound.title" />
+        <Text text="package-catalog.detail.notFound.body" params={{ slug: slug || '—' }} />
+      </Page>
+    )
+  }
+
+  const displayName = slugToDisplayName(pkg.slug)
+  const pitch = getPackagePitch(pkg)
+  const packageIcon = getPackageIcon(pkg)
+  const packageDefinition = app?.manifestSummary?.definitions?.[pkg.slug]
+  const totalCapabilities = countPackageCapabilities(pkg)
+  const backgroundTasks = filterBackgroundTasks(pkg.tasks)
+
+  const capabilitySchemas = capabilitySchemaMapFromApp(app?.capabilities)
+
+  const documentedActions = (pkg.actions || []).map((action) =>
+    enrichActionWithSchema(action, capabilitySchemas),
+  )
+
+  const manifestSectionProps = {
+    titleVariant: 'heading-tertiary',
+    compact: true,
+    enveloped: true,
+  }
+
+  return (
+    <>
+      <CatalogPageStyles />
+
+      <Page maxWidth="xl" gap="l" className="pkg-store-root">
+          <PackageHero
+            eyebrow={pkg.package}
+            title={displayName}
+            text={pitch}
+            meta="package-catalog.detail.meta.capabilities"
+            metaParams={{
+              count: totalCapabilities,
+              countSuffix: totalCapabilities === 1 ? 'y' : 'ies',
+            }}
+            maxWidth="l"
+          />
+
+          <ContentHeader
+            inset="none"
+            title={displayName}
+            descriptionMaxWidth="m"
+            lead={<Text maxWidth="m">{pitch}</Text>}
+            far={(
+              <PackageServiceToggle
+                packageName={pkg.package}
+                entitlementRequired={packageDefinition?.entitlementRequired}
+              />
+            )}
+          />
+
+          <PackageHowToSection pkg={pkg} backgroundTasks={backgroundTasks} />
+
+          {pkg.components?.length > 0 && (
+            <View id={PKG_DETAIL_SECTION_IDS.widgets} {...pkgStoreEnvelopedSurfaceProps}>
+              <View gap="xs">
+                <View layout="row" gap="s" alignItems="center">
+                  <Icon name="layout-grid" size="m" />
+                  <Text as="h2" variant="heading-secondary" text="package-catalog.detail.section.widgets.title" />
+                </View>
+                <Text
+                  text="package-catalog.detail.section.widgets.subtitle"
+                  className="pkg-store-prose--narrow"
+                />
+              </View>
+              <View gap="m" layout="row-wrap">
+                {pkg.components.map((component) => (
+                  <WidgetCapabilityCard key={component.id} component={component} icon={packageIcon} />
+                ))}
+              </View>
+            </View>
+          )}
+
+          {documentedActions.length > 0 && (
+            <PackageActionsSection far={documentedActions} />
+          )}
+
+          {backgroundTasks.length > 0 && (
+            <ManifestSection
+              sectionId={PKG_DETAIL_SECTION_IDS.tasks}
+              title="package-catalog.detail.section.tasks.title"
+              subtitle="package-catalog.detail.section.tasks.subtitle"
+              items={backgroundTasks}
+              variant="backgroundTasks"
+              icon="timer"
+              enveloped
+              {...manifestSectionProps}
+            />
+          )}
+
+          <ManifestSection
+            sectionId={PKG_DETAIL_SECTION_IDS.aggregates}
+            title="package-catalog.detail.section.aggregates.title"
+            subtitle="package-catalog.detail.section.aggregates.subtitle"
+            items={pkg.aggregates}
+            variant="entities"
+            icon="stack"
+            enveloped
+            {...manifestSectionProps}
+          />
+
+          <ManifestSection
+            title="package-catalog.detail.section.pages.title"
+            subtitle="package-catalog.detail.section.pages.subtitle"
+            items={pkg.pages}
+            variant="pages"
+            linkPages
+            icon="file-document"
+            {...manifestSectionProps}
+          />
+
+          <ManifestSection
+            title="package-catalog.detail.section.resources.title"
+            subtitle="package-catalog.detail.section.resources.subtitle"
+            items={pkg.schemas}
+            variant="entities"
+            icon="database"
+            {...manifestSectionProps}
+          />
+
+          <ManifestSection
+            title="package-catalog.detail.section.apis.title"
+            subtitle="package-catalog.detail.section.apis.subtitle"
+            items={pkg.apis}
+            variant="secondary"
+            icon="code"
+            {...manifestSectionProps}
+          />
+
+          <ManifestSection
+            title="package-catalog.detail.section.integrations.title"
+            subtitle="package-catalog.detail.section.integrations.subtitle"
+            items={pkg.integrations}
+            variant="entities"
+            icon="link"
+            {...manifestSectionProps}
+          />
+
+          <ManifestSection
+            title="package-catalog.detail.section.emails.title"
+            subtitle="package-catalog.detail.section.emails.subtitle"
+            items={pkg.emails}
+            variant="secondary"
+            icon="email"
+            {...manifestSectionProps}
+          />
+      </Page>
+    </>
+  )
+}

package/src/packageCopy.js

@@ -0,0 +1,194 @@
+/** @type {Record<string, string>} */
+const ICON_BY_SLUG = {
+  analytics: 'chart',
+  apps: 'layout-grid',
+  authentication: 'keyhole',
+  automation: 'attribution',
+  booking: 'calendar',
+  calendar: 'calendar',
+  consulting: 'briefcase',
+  consultancy: 'briefcase',
+  contracts: 'file-document',
+  distribution: 'share',
+  domains: 'globe',
+  email: 'email',
+  employees: 'users',
+  forecasts: 'chart',
+  gmail: 'email',
+  home: 'home',
+  'integration-stripe': 'credit-card',
+  'media-tasks': 'image',
+  observability: 'activity',
+  pages: 'file-document',
+  policies: 'shield',
+  profile: 'user',
+  resources: 'database',
+  resumes: 'file-document',
+  storage: 'software-upload',
+  tasks: 'check-circle',
+  themes: 'palette',
+  timesheets: 'clock',
+  tokens: 'palette',
+  tools: 'wrench',
+  users: 'users',
+  web: 'globe',
+  workspaces: 'building',
+}
+
+/** @type {Record<string, string>} */
+const PITCH_BY_SLUG = {
+  'app-test': 'Interactive demo shell for exploring Ossy feature packages',
+  analytics: 'Product analytics and usage insights',
+  apps: 'Multi-app workspace management',
+  authentication: 'Sign-in, sessions, and account security',
+  automation: 'Workflow automation and triggers',
+  booking: 'Booking & scheduling for service providers',
+  calendar: 'Calendars, availability, and time slots',
+  consulting: 'Consulting profiles and client-facing pages',
+  consultancy: 'Consultancy operations and delivery',
+  contracts: 'Contracts and agreement workflows',
+  distribution: 'Content distribution and publishing',
+  domains: 'Custom domains and DNS',
+  email: 'Transactional email and templates',
+  employees: 'Team members and org structure',
+  forecasts: 'Revenue and capacity forecasting',
+  gmail: 'Gmail integration and inbox sync',
+  home: 'Workspace home and navigation',
+  'integration-stripe': 'Stripe payments and billing',
+  'media-tasks': 'Media processing background jobs',
+  observability: 'Logging, metrics, and diagnostics',
+  pages: 'Page builder and site structure',
+  policies: 'Policies, roles, and permissions',
+  profile: 'User profiles and public identity',
+  resources: 'Structured resources and content types',
+  resumes: 'Résumés and professional portfolios',
+  storage: 'Files, folders, and workspace storage',
+  tasks: 'Tasks, checklists, and async work',
+  themes: 'Themes, branding, and appearance',
+  timesheets: 'Time tracking and billable hours',
+  tokens: 'Design tokens and theme variables',
+  tools: 'Developer tools and utilities',
+  users: 'Users, accounts, and membership',
+  web: 'Public web surfaces and marketing',
+  workspaces: 'Workspaces, teams, and tenancy',
+}
+
+/**
+ * @param {string} slug
+ * @returns {string}
+ */
+export function slugToDisplayName (slug) {
+  if (!slug) return 'Package'
+  return slug
+    .split('-')
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join(' ')
+}
+
+/**
+ * @param {{ slug?: string }} pkg
+ * @returns {string}
+ */
+export function getPackageIcon (pkg) {
+  const slug = pkg?.slug
+  if (slug && ICON_BY_SLUG[slug]) return ICON_BY_SLUG[slug]
+  const highlights = getPackageHighlights(pkg)
+  return highlights[0]?.icon || 'package'
+}
+
+/**
+ * @param {{ slug?: string, package?: string }} pkg
+ * @returns {string}
+ */
+export function getPackagePitch (pkg) {
+  const slug = pkg?.slug
+  if (slug && PITCH_BY_SLUG[slug]) return PITCH_BY_SLUG[slug]
+  const name = slugToDisplayName(slug || '')
+  return `${name} — Ossy feature package`
+}
+
+/** Known background task descriptions for package detail showcase. */
+export const SHOWCASE_TASK_DESCRIPTIONS = {
+  '@ossy/booking/tasks/send-reminder': 'Hourly cron — emails clients ~24h before their booking.',
+  '@ossy/workspaces/tasks/sync-workspace-membership': 'Event-driven — syncs membership when workspace users change.',
+  '@ossy/media-tasks/tasks/resize-common-web': 'On image upload — generates thumbnails and gallery sizes.',
+  '@ossy/media-tasks/tasks/visual-content-descriptors': 'On image upload — extracts visual descriptors for search.',
+  '@ossy/event-store/tasks/aggregate-rebuild': 'Rebuilds aggregate projections from the event stream.',
+}
+
+/**
+ * Primary invoke tasks use `{feature}/tasks/{intent}` derived from `{feature}/actions/{intent}`; background tasks use other names under `…/tasks/…`.
+ *
+ * @param {string} id
+ * @returns {boolean}
+ */
+export function isBackgroundTaskId (id) {
+  return typeof id === 'string' && id.includes('/tasks/')
+}
+
+/**
+ * @param {Array<{ id: string, title?: string, description?: string }> | undefined} tasks
+ * @returns {Array<{ id: string, title?: string, description?: string }>}
+ */
+export function filterBackgroundTasks (tasks) {
+  return (tasks || []).filter((task) => isBackgroundTaskId(task.id))
+}
+
+/**
+ * @param {{ id: string, title?: string, description?: string }} task
+ * @returns {string}
+ */
+export function getTaskDisplayTitle (task) {
+  if (task.title) return task.title
+  const segment = task.id.split('/tasks/').pop()
+  return humanizeCapabilityId(segment || task.id)
+}
+
+/**
+ * @param {{ id: string, description?: string }} task
+ * @returns {string | undefined}
+ */
+export function getTaskDisplayDescription (task) {
+  return task.description || SHOWCASE_TASK_DESCRIPTIONS[task.id]
+}
+
+/**
+ * @param {string} id
+ * @returns {string}
+ */
+export function humanizeCapabilityId (id) {
+  if (!id) return ''
+  const segment = id.includes('/') ? id.split('/').pop() : id
+  return segment
+    .replace(/[-_]/g, ' ')
+    .replace(/\b\w/g, (c) => c.toUpperCase())
+}
+
+/**
+ * @param {object} pkg
+ * @returns {{ key: string, label: string, count: number, icon: string }[]}
+ */
+export function getPackageHighlights (pkg) {
+  const rows = [
+    { key: 'pages', label: 'Pages', count: pkg.pages?.length || 0, icon: 'file-document' },
+    { key: 'actions', label: 'Actions', count: pkg.actions?.length || 0, icon: 'bolt' },
+    {
+      key: 'schemas',
+      label: 'Resource types',
+      count: pkg.schemas?.length || 0,
+      icon: 'database',
+    },
+    { key: 'apis', label: 'APIs', count: pkg.apis?.length || 0, icon: 'code' },
+    { key: 'components', label: 'Components', count: pkg.components?.length || 0, icon: 'layout-grid' },
+    { key: 'tasks', label: 'Tasks', count: pkg.tasks?.length || 0, icon: 'check-circle' },
+    {
+      key: 'integrations',
+      label: 'Integrations',
+      count: pkg.integrations?.length || 0,
+      icon: 'link',
+    },
+    { key: 'emails', label: 'Emails', count: pkg.emails?.length || 0, icon: 'email' },
+    { key: 'aggregates', label: 'Aggregates', count: pkg.aggregates?.length || 0, icon: 'stack' },
+  ]
+  return rows.filter((r) => r.count > 0)
+}

package/src/packageDetailSections.js

@@ -0,0 +1,17 @@
+/** Stable anchor ids for package detail capability sections. */
+export const PKG_DETAIL_SECTION_IDS = {
+  widgets: 'pkg-section-widgets',
+  actions: 'pkg-section-actions',
+  tasks: 'pkg-section-tasks',
+  aggregates: 'pkg-section-aggregates',
+}
+
+/**
+ * @param {string} sectionId
+ */
+export function scrollToPackageSection (sectionId) {
+  const el = document.getElementById(sectionId)
+  if (!el) return
+  el.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  window.history.replaceState(null, '', `#${sectionId}`)
+}

package/src/packageStoreStyles.js

@@ -0,0 +1,305 @@
+/** Enveloping surface wrapper shared by How-to, Actions, tasks, and aggregates sections. */
+export const pkgStoreEnvelopedSurfaceProps = {
+  gap: 'm',
+  roundness: 'm',
+  inset: 'l',
+  className: 'pkg-store-envelope',
+}
+
+/** Shared storefront styles for package list and detail pages. */
+export const packageStoreStyles = `
+  .pkg-store-root {
+    height: 100%;
+    overflow-y: auto;
+  }
+
+  .pkg-store-scroll-panel {
+    padding: var(--space-m) var(--space-l);
+    height: 100%;
+    overflow-y: auto;
+  }
+
+  .pkg-store-envelope {
+    border: 1px solid var(--separator-primary);
+  }
+
+  .pkg-store-prose {
+    max-width: 640px;
+  }
+
+  .pkg-store-prose--muted {
+    max-width: 640px;
+    opacity: 0.85;
+  }
+
+  .pkg-store-prose--narrow {
+    max-width: 560px;
+    opacity: 0.75;
+  }
+
+  .pkg-store-text-strong {
+    font-weight: 600;
+  }
+
+  .pkg-store-text-bold {
+    font-weight: 700;
+  }
+
+  .pkg-store-text-center {
+    text-align: center;
+  }
+
+  .pkg-store-text-muted {
+    opacity: 0.8;
+  }
+
+  .pkg-store-text-dim {
+    opacity: 0.85;
+  }
+
+  .pkg-store-mono {
+    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+    font-size: 0.8125rem;
+    line-height: 1.4;
+    word-break: break-all;
+  }
+
+  .pkg-store-mono--sm {
+    font-size: 0.75rem;
+    word-break: break-word;
+  }
+
+  .pkg-store-mono--xs {
+    font-size: 0.7rem;
+  }
+
+  .pkg-store-card {
+    border: 1px solid var(--separator-primary);
+  }
+
+  .pkg-store-howto-card {
+    min-width: 280px;
+    flex: 1 1 280px;
+    max-width: 360px;
+    min-height: 160px;
+  }
+
+  .pkg-store-howto-card--link {
+    cursor: pointer;
+  }
+
+  .pkg-store-widget-card {
+    min-width: 280px;
+    flex: 1 1 280px;
+    max-width: 360px;
+    min-height: 140px;
+    border: 1px solid var(--separator-primary);
+  }
+
+  .pkg-store-action-card {
+    min-width: 200px;
+    flex: 1 1 200px;
+    max-width: 280px;
+    border: 1px solid var(--separator-primary);
+    cursor: pointer;
+    text-align: left;
+    overflow: visible;
+  }
+
+  .pkg-store-action-card[aria-pressed="true"] {
+    border-color: color-mix(in srgb, var(--foreground) 28%, var(--separator-primary));
+    background: color-mix(in srgb, var(--foreground) 4%, var(--surface-primary));
+  }
+
+  .pkg-store-action-examples {
+    border: 1px solid var(--separator-primary);
+    min-width: 0;
+  }
+
+  .pkg-store-package-link {
+    width: 200px;
+    border: 1px solid var(--separator-primary);
+    text-decoration: none;
+    color: inherit;
+  }
+
+  .pkg-store-section-link {
+    align-self: center;
+    opacity: 0.65;
+    font-size: 0.8125rem;
+  }
+
+  .pkg-store-hero-cover {
+    height: 100%;
+    border-radius: var(--space-m);
+    padding: var(--space-xl) var(--space-s);
+  }
+
+  .pkg-store-hero-eyebrow {
+    opacity: 0.75;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+  }
+
+  .pkg-store-hero-title {
+    text-wrap: balance;
+  }
+
+  .pkg-store-hero-subtitle {
+    max-width: 800px;
+  }
+
+  .pkg-store-hero-meta {
+    opacity: 0.65;
+  }
+
+  .pkg-store-hero-actions {
+    flex-wrap: wrap;
+  }
+
+  .pkg-store-search {
+    width: 100%;
+    max-width: 420px;
+    margin: 0 auto;
+  }
+
+  .pkg-store-search [data-component="input"] {
+    width: 100%;
+    border-radius: var(--space-s);
+    padding: var(--space-s) var(--space-m);
+    font-size: 1rem;
+    line-height: 1.4;
+  }
+
+  .pkg-store-grid-meta {
+    opacity: 0.72;
+    font-size: 0.9375rem;
+    color: var(--text-default-color, var(--foreground));
+  }
+
+  .pkg-store-pages-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+    gap: var(--space-s);
+  }
+
+  .pkg-store-pages-list {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-s);
+  }
+
+  .pkg-store-page-row [data-button] {
+    padding: var(--space-xs);
+  }
+
+  .pkg-store-actions-split {
+    display: grid;
+    grid-template-columns: minmax(200px, 1fr) minmax(280px, 1.2fr);
+    gap: var(--space-m);
+    align-items: start;
+  }
+
+  .pkg-store-actions-list {
+    min-width: 0;
+  }
+
+  .pkg-store-action-card:focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--foreground) 35%, transparent);
+    outline-offset: 2px;
+  }
+
+  @media (max-width: 720px) {
+    .pkg-store-actions-split {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  .pkg-store-entity {
+    border: 1px solid var(--separator-primary);
+  }
+
+  .pkg-store-entities-grid,
+  .pkg-store-secondary-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+    gap: var(--space-s);
+  }
+
+  .pkg-store-secondary-item {
+    border: 1px solid var(--separator-primary);
+    background: color-mix(in srgb, var(--foreground) 4%, var(--surface-primary));
+  }
+
+  .pkg-store-footer {
+    padding: var(--space-l) var(--space-m);
+    border-radius: var(--space-m);
+    border: 1px solid var(--separator-primary);
+    background: color-mix(in srgb, var(--foreground) 4%, var(--surface-primary));
+    text-align: center;
+  }
+
+  .pkg-store-howto-card,
+  .pkg-store-action-card,
+  .pkg-store-widget-card {
+    overflow: visible;
+  }
+
+  .pkg-store-howto-card--link {
+    transition: border-color 0.15s ease, background 0.15s ease;
+  }
+
+  .pkg-store-howto-card--link:hover,
+  .pkg-store-howto-card--link:focus-visible {
+    border-color: color-mix(in srgb, var(--foreground) 22%, var(--separator-primary));
+    background: color-mix(in srgb, var(--foreground) 3%, var(--surface-primary));
+    outline: none;
+  }
+
+  #pkg-section-widgets,
+  #pkg-section-actions,
+  #pkg-section-tasks,
+  #pkg-section-aggregates {
+    scroll-margin-top: var(--space-l);
+  }
+
+  .pkg-store-card-body,
+  .pkg-store-action-card [data-component="text"] {
+    overflow-wrap: anywhere;
+    word-break: break-word;
+    white-space: normal;
+  }
+
+  .pkg-store-search--inline {
+    width: 100%;
+    max-width: 100%;
+    margin: 0;
+  }
+
+  .pkg-store-search--inline [data-component="input"] {
+    width: 100%;
+    border-radius: var(--space-s);
+    padding: var(--space-s) var(--space-m);
+    font-size: 1rem;
+    line-height: 1.4;
+  }
+
+  [data-component="@ossy/package-catalog/package-hero"] {
+    gap: var(--space-m);
+    min-height: min(42vh, 420px);
+    height: auto;
+    background-attachment: scroll;
+    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--foreground) 6%, transparent);
+  }
+
+  [data-rounded] {
+    border-radius: var(--space-m);
+    overflow: hidden;
+  }
+
+  @media (min-width: 900px) {
+    [data-component="@ossy/package-catalog/package-hero"] {
+      min-height: min(46vh, 520px);
+    }
+  }
+`