@ossy/package-catalog 1.0.1

package/src/PackageHowToSection.jsx

@@ -0,0 +1,99 @@
+import React from 'react'
+import { Text, View } from '@ossy/design-system'
+import { HowToCard } from './HowToCard.jsx'
+import { pkgStoreEnvelopedSurfaceProps } from './packageStoreStyles.js'
+import { PKG_DETAIL_SECTION_IDS } from './packageDetailSections.js'
+
+/**
+ * Package-tailored interaction overview — descriptions link to sections below.
+ *
+ * @param {{ pkg: {
+ *   slug: string
+ *   actions?: Array<{ id: string }>
+ *   components?: Array<{ id: string }>
+ *   aggregates?: Array<{ id: string }>
+ * }
+ *   backgroundTasks?: Array<{ id: string }>
+ * }} props
+ */
+export function PackageHowToSection ({ pkg, backgroundTasks = [] }) {
+  const isBooking = pkg.slug === 'booking'
+
+  /** @type {Array<{ icon: string, title: string, body: string, sectionId: string, bodyParams?: Record<string, unknown> }>} */
+  const cards = []
+
+  if (pkg.actions?.length) {
+    cards.push(
+      {
+        icon: 'bolt',
+        title: 'package-catalog.home.howTo.sdk.title',
+        body: 'package-catalog.detail.howTo.sdk.body',
+        sectionId: PKG_DETAIL_SECTION_IDS.actions,
+      },
+      {
+        icon: 'link',
+        title: 'package-catalog.home.howTo.mcp.title',
+        body: isBooking
+          ? 'package-catalog.detail.howTo.mcp.booking.body'
+          : 'package-catalog.detail.howTo.mcp.body',
+        sectionId: PKG_DETAIL_SECTION_IDS.actions,
+        bodyParams: isBooking ? undefined : { slug: pkg.slug },
+      },
+      {
+        icon: 'key',
+        title: 'package-catalog.home.howTo.http.title',
+        body: 'package-catalog.detail.howTo.http.body',
+        sectionId: PKG_DETAIL_SECTION_IDS.actions,
+      },
+    )
+  }
+
+  if (pkg.components?.length) {
+    cards.push({
+      icon: 'layout-grid',
+      title: 'package-catalog.detail.howTo.widgets.title',
+      body: 'package-catalog.detail.howTo.widgets.body',
+      sectionId: PKG_DETAIL_SECTION_IDS.widgets,
+    })
+  }
+
+  if (backgroundTasks.length) {
+    cards.push({
+      icon: 'timer',
+      title: 'package-catalog.detail.howTo.tasks.title',
+      body: 'package-catalog.detail.howTo.tasks.body',
+      sectionId: PKG_DETAIL_SECTION_IDS.tasks,
+    })
+  }
+
+  if (pkg.aggregates?.length) {
+    cards.push({
+      icon: 'stack',
+      title: 'package-catalog.detail.howTo.aggregates.title',
+      body: 'package-catalog.detail.howTo.aggregates.body',
+      sectionId: PKG_DETAIL_SECTION_IDS.aggregates,
+    })
+  }
+
+  if (!cards.length) return null
+
+  return (
+    <View {...pkgStoreEnvelopedSurfaceProps}>
+      <Text as="h2" variant="heading-secondary" text="package-catalog.detail.howTo.title" />
+      <Text text="package-catalog.detail.howTo.intro" className="pkg-store-prose--muted" />
+
+      <View gap="m" layout="row-wrap">
+        {cards.map((card) => (
+          <HowToCard
+            key={`${card.sectionId}-${card.title}`}
+            icon={card.icon}
+            title={card.title}
+            body={card.body}
+            sectionId={card.sectionId}
+            bodyParams={card.bodyParams}
+          />
+        ))}
+      </View>
+    </View>
+  )
+}

package/src/PackageServiceToggle.jsx

@@ -0,0 +1,69 @@
+import React, { useState } from 'react'
+import { Button } from '@ossy/design-system'
+import { useApp } from '@ossy/app/shell'
+import { GetWorkspace, EnableService, DisableService } from '@ossy/workspaces'
+import { useSdk, cacheKey } from '@ossy/sdk-react'
+import { isServiceEntitled, isToggleablePackage } from '@ossy/workspaces/entitlements'
+import { resolveWorkspaceServices } from '@ossy/app/shell'
+
+/**
+ * Enable or disable a workspace service from the package detail page.
+ */
+export function PackageServiceToggle ({ packageName, entitlementRequired = true }) {
+  const app = useApp()
+  const sdk = useSdk()
+  const { data: workspace, refetch: refetchWorkspace } = sdk.read(GetWorkspace)
+  const [busy, setBusy] = useState(false)
+
+  if (!app?.isAuthenticated || !app?.workspaceId) return null
+  if (!packageName || !isToggleablePackage(packageName, { entitlementRequired })) return null
+
+  const services = resolveWorkspaceServices({
+    devMode: app.devMode,
+    devEntitlements: app.devEntitlements,
+    workspaceServices: workspace?.services,
+  })
+  const enabled = isServiceEntitled(services, packageName)
+
+  const toggleService = async (enable) => {
+    setBusy(true)
+    try {
+      const action = enable ? EnableService : DisableService
+      await sdk.invoke(action, { service: packageName })
+      sdk.invalidate(cacheKey(GetWorkspace))
+      await refetchWorkspace()
+    } finally {
+      setBusy(false)
+    }
+  }
+
+  if (enabled) {
+    return (
+      <Button
+        variant="neutral"
+        size="s"
+        disabled={busy}
+        data-action={DisableService.id}
+        data-service={packageName}
+        data-package-service={packageName}
+        data-service-enabled="true"
+        onClick={() => toggleService(false)}
+        label="package-catalog.detail.service.disable"
+      />
+    )
+  }
+
+  return (
+    <Button
+      variant="cta"
+      size="s"
+      disabled={busy}
+      data-action={EnableService.id}
+      data-service={packageName}
+      data-package-service={packageName}
+      data-service-enabled="false"
+      onClick={() => toggleService(true)}
+      label="package-catalog.detail.service.enable"
+    />
+  )
+}

package/src/PackagesBrowser.jsx

@@ -0,0 +1,294 @@
+import React, { useMemo, useState } from 'react'
+import { Button, Icon, Input, Page, ContentHeader, SdkInvokeExample, Text, View } from '@ossy/design-system'
+import { useApp } from '@ossy/app/shell'
+import { useRouter } from '@ossy/router-react'
+import { PackageHero } from './PackageHero.jsx'
+import { CatalogPageStyles } from './CatalogPageStyles.jsx'
+import { HowToCard } from './HowToCard.jsx'
+import {
+  ActionCapabilityCard,
+} from './ActionCapabilityCard.jsx'
+import {
+  getPackageIcon,
+  getPackagePitch,
+  humanizeCapabilityId,
+  slugToDisplayName,
+} from './packageCopy.js'
+
+/**
+ * @param {object} pkg
+ * @returns {string}
+ */
+function packageSearchHaystack (pkg) {
+  const parts = [
+    pkg.package,
+    pkg.slug,
+    slugToDisplayName(pkg.slug),
+    getPackagePitch(pkg),
+  ]
+
+  for (const page of pkg.pages || []) {
+    if (page.id) {
+      parts.push(page.id, humanizeCapabilityId(page.id))
+    }
+    if (page.title) parts.push(page.title)
+  }
+
+  for (const action of pkg.actions || []) {
+    if (action.id) {
+      parts.push(action.id, humanizeCapabilityId(action.id))
+    }
+    if (action.title) parts.push(action.title)
+  }
+
+  return parts.filter(Boolean).join(' ').toLowerCase()
+}
+
+/**
+ * @param {object[]} packages
+ * @param {string} query
+ * @returns {object[]}
+ */
+function filterPackages (packages, query) {
+  const normalized = query.trim().toLowerCase()
+  if (!normalized) return packages
+  return packages.filter((pkg) => packageSearchHaystack(pkg).includes(normalized))
+}
+
+/**
+ * Digital toolbox home — beliefs, how to invoke, showcase, then full catalog.
+ */
+export function PackagesBrowser () {
+  const app = useApp()
+  const router = useRouter()
+  const [query, setQuery] = useState('')
+  const packages = app?.manifestSummary?.packages || []
+  const showcaseActions = useMemo(
+    () => (app?.capabilities?.tools || []).slice(0, 6).map(tool => ({
+      id: tool.actionId,
+      title: tool.title,
+      description: tool.description,
+      mcpTool: tool.name,
+      access: tool.access,
+    })),
+    [app?.capabilities?.tools],
+  )
+  const sorted = useMemo(
+    () => [...packages].sort((a, b) =>
+      slugToDisplayName(a.slug).localeCompare(slugToDisplayName(b.slug)),
+    ),
+    [packages],
+  )
+  const filtered = useMemo(
+    () => filterPackages(sorted, query),
+    [sorted, query],
+  )
+  const totalCount = sorted.length
+  const visibleCount = filtered.length
+  const isFiltering = query.trim().length > 0
+
+  const resourcesPkg = sorted.find((p) => p.slug === 'resources')
+  const storagePkg = sorted.find((p) => p.slug === 'storage')
+  const bookingPkg = sorted.find((p) => p.slug === 'booking')
+  const resourcesDetailHref = resourcesPkg
+    ? router.getHref({ id: 'packages/detail', params: { packageSlug: 'resources' } })
+    : null
+  const storageDetailHref = storagePkg
+    ? router.getHref({ id: 'packages/detail', params: { packageSlug: 'storage' } })
+    : null
+  const bookingDetailHref = bookingPkg
+    ? router.getHref({ id: 'packages/detail', params: { packageSlug: 'booking' } })
+    : null
+
+  return (
+    <>
+      <CatalogPageStyles />
+
+      <Page maxWidth="xl" gap="l" className="pkg-store-root">
+          <PackageHero
+            title="package-catalog.home.hero.title"
+            text="package-catalog.home.hero.text"
+            meta="package-catalog.home.hero.meta"
+            metaParams={{ count: totalCount }}
+            maxWidth="l"
+          />
+
+          <ContentHeader
+            inset="none"
+            title="package-catalog.browser.title"
+            description="package-catalog.browser.description"
+          />
+
+          <View gap="m" roundness="m" inset="l" className="pkg-store-envelope">
+            <Text as="h2" variant="heading-tertiary" text="package-catalog.home.belief.title" />
+            <Text text="package-catalog.home.belief.body" className="pkg-store-prose--soft" />
+          </View>
+
+          <View gap="m" roundness="m" inset="l" className="pkg-store-envelope">
+            <Text as="h2" variant="heading-tertiary" text="package-catalog.home.howTo.title" />
+            <Text text="package-catalog.home.howTo.intro" className="pkg-store-prose--muted" />
+
+            <View gap="m" layout="row-wrap">
+              <HowToCard
+                icon="bolt"
+                title="package-catalog.home.howTo.sdk.title"
+                body={<SdkInvokeExample actionId="@ossy/resources/actions/list" />}
+              />
+              <HowToCard
+                icon="link"
+                title="package-catalog.home.howTo.mcp.title"
+                body="package-catalog.home.howTo.mcp.body"
+              />
+              <HowToCard
+                icon="key"
+                title="package-catalog.home.howTo.http.title"
+                body="package-catalog.home.howTo.http.body"
+                href="@profile/api-tokens/create"
+              />
+            </View>
+          </View>
+
+          <View gap="m" roundness="m" inset="l" className="pkg-store-envelope">
+            <View layout="row" gap="s" alignItems="center">
+              <Icon name="software-upload" size="m" />
+              <Text as="h2" variant="heading-tertiary" text="package-catalog.home.showcase.title" />
+            </View>
+            <Text text="package-catalog.home.showcase.body" className="pkg-store-prose--muted" />
+
+            <View gap="m" layout="row-wrap">
+              {showcaseActions.map((action) => (
+                <ActionCapabilityCard key={action.id} action={action} />
+              ))}
+            </View>
+
+            <View layout="row-wrap" gap="s">
+              {resourcesDetailHref && (
+                <Button
+                  variant="secondary"
+                  href={resourcesDetailHref}
+                  label="package-catalog.home.showcase.viewResources"
+                />
+              )}
+              {storageDetailHref && (
+                <Button
+                  variant="secondary"
+                  href={storageDetailHref}
+                  label="package-catalog.home.showcase.viewStorage"
+                />
+              )}
+              {bookingDetailHref && (
+                <Button
+                  variant="link"
+                  href={bookingDetailHref}
+                  label="package-catalog.home.showcase.viewBooking"
+                />
+              )}
+            </View>
+          </View>
+
+          {totalCount === 0 ? (
+            <Text text="package-catalog.emptyManifest" className="pkg-store-text-center pkg-store-text-muted" />
+          ) : (
+            <View
+              roundness="m"
+              gap="m"
+              inset="l"
+              className="pkg-store-envelope"
+            >
+              <View layout="row" gap="s" alignItems="center">
+                <View justifyContent="center" alignItems="center">
+                  <Icon name="package" size="m" />
+                </View>
+                <Text
+                  variant="heading-tertiary"
+                  as="h3"
+                  text={isFiltering
+                    ? 'package-catalog.section.matching'
+                    : 'package-catalog.section.all'}
+                />
+              </View>
+
+              <Text text="package-catalog.section.description" />
+
+              <Text
+                variant="small"
+                className="pkg-store-grid-meta"
+                text="package-catalog.gridMeta"
+                params={{ visible: visibleCount, total: totalCount }}
+              />
+
+              <View className="pkg-store-search pkg-store-search--inline">
+                <Input
+                  type="search"
+                  value={query}
+                  onChange={(event) => setQuery(event.target.value)}
+                  placeholder="package-catalog.search.placeholder"
+                  aria-label="package-catalog.search.label"
+                  autoComplete="off"
+                />
+              </View>
+
+              {visibleCount === 0 ? (
+                <View gap="s" alignItems="center" inset="m">
+                  <Text text="package-catalog.search.noResults.title" className="pkg-store-text-strong" />
+                  <Text
+                    variant="small"
+                    text="package-catalog.search.noResults.hint"
+                    className="pkg-store-text-muted"
+                  />
+                </View>
+              ) : (
+                <View gap="m" layout="row-wrap">
+                  {filtered.map((pkg) => (
+                    <PackageStoreCard key={pkg.package} pkg={pkg} router={router} />
+                  ))}
+                </View>
+              )}
+            </View>
+          )}
+      </Page>
+    </>
+  )
+}
+
+/**
+ * @param {{ pkg: object, router: ReturnType<typeof useRouter> }} props
+ */
+function PackageStoreCard ({ pkg, router }) {
+  const displayName = slugToDisplayName(pkg.slug)
+  const pitch = getPackagePitch(pkg)
+  const icon = getPackageIcon(pkg)
+  const actionCount = pkg.actions?.length ?? 0
+  const detailHref = router.getHref({
+    id: 'packages/detail',
+    params: { packageSlug: pkg.slug },
+  })
+
+  return (
+    <View
+      as="a"
+      href={detailHref}
+      roundness="m"
+      surface="primary"
+      inset="m"
+      gap="m"
+      selectable
+      className="pkg-store-package-link"
+    >
+      <View justifyContent="center" alignItems="center">
+        <Icon name={icon} size="m" />
+      </View>
+      <Text variant="small" className="pkg-store-text-bold pkg-store-text-center">
+        {displayName}
+      </Text>
+      <Text variant="small" className="pkg-store-text-center">
+        {pitch}
+      </Text>
+      {actionCount > 0 && (
+        <Text variant="small" className="pkg-store-text-center pkg-store-text-subtle">
+          {actionCount} action{actionCount === 1 ? '' : 's'}
+        </Text>
+      )}
+    </View>
+  )
+}

package/src/WidgetCapabilityCard.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import { Icon, Text, View } from '@ossy/design-system'
+import { humanizeCapabilityId } from './packageCopy.js'
+
+/**
+ * @param {{ component: { id: string, title?: string }, icon?: string }} props
+ */
+export function WidgetCapabilityCard ({ component, icon = 'layout-grid' }) {
+  const title = component.title || humanizeCapabilityId(component.id)
+
+  return (
+    <View
+      gap="s"
+      inset="m"
+      roundness="m"
+      surface="primary"
+      className="pkg-store-widget-card"
+    >
+      <View justifyContent="center" alignItems="center">
+        <Icon name={icon} size="m" />
+      </View>
+      <Text className="pkg-store-text-strong pkg-store-text-center">{title}</Text>
+      <Text className="pkg-store-mono pkg-store-mono--sm pkg-store-text-subtle pkg-store-text-center">
+        {component.id}
+      </Text>
+    </View>
+  )
+}

package/src/en.translations.json

@@ -0,0 +1,85 @@
+{
+  "package-catalog.home.hero.title": "A digital toolbox for your business",
+  "package-catalog.browser.title": "Capabilities",
+  "package-catalog.browser.description": "Browse documented, invokable capabilities for your workspace.",
+  "package-catalog.home.hero.text": "Ossy ships documented, invokable capabilities — booking, auth, resources, and more. Every feature is callable from the SDK, API, or MCP. UI is a projection, not the product.",
+  "package-catalog.home.hero.meta": "{count} capabilities · ready to use in apps and agents",
+  "package-catalog.home.belief.title": "What we believe",
+  "package-catalog.home.belief.body": "People want a new way to interact with technology. AI is becoming the primary layer — agents should run your business operations, not just answer questions. We build compact, composable tools that plug into MCP-compatible hosts — Cursor, Claude Desktop, GitHub Copilot in VS Code, and other MCP agents — as well as your own apps and the web.",
+  "package-catalog.home.howTo.title": "How to use capabilities",
+  "package-catalog.home.howTo.intro": "Three paths to the same actions. Pick what fits your environment.",
+  "package-catalog.home.howTo.sdk.title": "SDK",
+  "package-catalog.home.howTo.sdk.body": "sdk.invoke('@ossy/booking/actions/create', payload) from Node or React apps.",
+  "package-catalog.home.howTo.mcp.title": "MCP",
+  "package-catalog.home.howTo.mcp.body": "Connect Cursor to the app MCP endpoint at /mcp. Agents call ossy_* tools with your API token and workspace id headers.",
+  "package-catalog.home.howTo.http.title": "HTTP",
+  "package-catalog.home.howTo.http.body": "Call actions over HTTP with Bearer token authentication — for scripts, agents, and integrations outside the SDK.",
+  "package-catalog.home.howTo.http.createLink": "Create bearer token →",
+  "package-catalog.home.showcase.title": "Featured capabilities",
+  "package-catalog.home.showcase.body": "Data layout actions first — resources and storage — plus booking as a secondary showcase. Same contract in SDK, HTTP, and MCP.",
+  "package-catalog.home.showcase.viewResources": "Resources capability docs →",
+  "package-catalog.home.showcase.viewStorage": "Storage capability docs →",
+  "package-catalog.home.showcase.viewBooking": "Booking capability docs →",
+  "packages.documentTitle": "Capabilities",
+  "package-catalog.hero.title": "Ossy platform capabilities",
+  "package-catalog.hero.text": "Discover ready-made capabilities for your workspace — pages, server actions, APIs, components, and integrations you can use in apps and agents.",
+  "package-catalog.hero.meta": "{count} capabilities · browse and explore",
+  "package-catalog.search.label": "Search capabilities",
+  "package-catalog.search.placeholder": "Search capabilities, descriptions, pages, actions…",
+  "package-catalog.search.noResults.title": "No capabilities match your search",
+  "package-catalog.search.noResults.hint": "Try a capability name, slug, description, or action id — e.g. \"booking\" or \"sign-in\".",
+  "package-catalog.section.all": "All capabilities",
+  "package-catalog.section.matching": "Matching capabilities",
+  "package-catalog.section.description": "Each card opens showcase and documentation — actions, widgets, and optional pages.",
+  "package-catalog.gridMeta": "Showing {visible} of {total} capabilities",
+  "package-catalog.emptyManifest": "Capability catalog unavailable. Rebuild the app after upgrading @ossy/platform.",
+  "package-catalog.detail.notFound.title": "Capability not found",
+  "package-catalog.detail.notFound.body": "No manifest entries for slug: {slug}",
+  "package-catalog.detail.backToPackages": "Back to capabilities",
+  "package-catalog.detail.backAll": "← All capabilities",
+  "package-catalog.detail.atAGlance": "At a glance",
+  "package-catalog.detail.section.widgets.title": "Widgets",
+  "package-catalog.detail.section.widgets.subtitle": "Compact widgets for your workspace dashboard — UI components you can also embed in pages or compose in apps.",
+  "package-catalog.detail.section.pages.title": "Pages",
+  "package-catalog.detail.section.pages.subtitle": "Routes and screens included with this capability — open any page to see it live.",
+  "package-catalog.detail.section.actions.title": "Actions",
+  "package-catalog.detail.section.actions.subtitle": "Invokable intents — call directly via SDK, POST /actions, or MCP tools. This is the agent-facing surface, not background jobs.",
+  "package-catalog.detail.section.resources.title": "Resource types",
+  "package-catalog.detail.section.resources.subtitle": "Structured entities and templates registered for resources.",
+  "package-catalog.detail.section.apis.title": "APIs",
+  "package-catalog.detail.section.apis.subtitle": "HTTP endpoints exposed by this capability.",
+  "package-catalog.detail.section.components.title": "UI components",
+  "package-catalog.detail.section.components.subtitle": "Reusable React components registered in the manifest.",
+  "package-catalog.detail.section.tasks.title": "Background tasks",
+  "package-catalog.detail.section.tasks.subtitle": "Background and scheduled handlers — triggered by events or cron, not called via SDK, POST /actions, or MCP. Ids use the tasks/ path (distinct from actions/).",
+  "package-catalog.detail.section.integrations.title": "Integrations",
+  "package-catalog.detail.section.integrations.subtitle": "Third-party connectors and credential requirements.",
+  "package-catalog.detail.section.emails.title": "Email templates",
+  "package-catalog.detail.section.emails.subtitle": "Transactional messages sent by this capability.",
+  "package-catalog.detail.section.aggregates.title": "Aggregates",
+  "package-catalog.detail.section.aggregates.subtitle": "Domain aggregates and bounded-context entities.",
+  "package-catalog.detail.howTo.title": "How to use this capability",
+  "package-catalog.detail.howTo.intro": "Ways to interact with this capability — pick a path to jump to the relevant section below.",
+  "package-catalog.detail.howTo.sectionLink": "View section ↓",
+  "package-catalog.detail.howTo.sdk.body": "Call actions from Node or React apps using the Ossy SDK — typed payloads and workspace context built in.",
+  "package-catalog.detail.howTo.http.body": "Call actions over HTTP with Bearer token authentication — create a token in Profile for scripts and automation.",
+  "package-catalog.detail.howTo.mcp.body": "Connect Cursor to http://localhost:3006/mcp when MCP tools are available for {slug}.",
+  "package-catalog.detail.howTo.mcp.booking.body": "Connect Cursor to /mcp on the running app so agents can call ossy_booking_* tools with your API token.",
+  "package-catalog.detail.howTo.widgets.title": "UI widgets",
+  "package-catalog.detail.howTo.widgets.body": "Embed dashboard widgets or compose UI from packaged components in pages and apps.",
+  "package-catalog.detail.howTo.tasks.title": "Background tasks",
+  "package-catalog.detail.howTo.tasks.body": "Event-driven and scheduled handlers run in the background — triggered by the platform, not invoked like actions.",
+  "package-catalog.detail.howTo.aggregates.title": "Aggregates",
+  "package-catalog.detail.howTo.aggregates.body": "Domain entities and bounded-context models exposed by this capability for reads and composition.",
+  "package-catalog.detail.footer.title": "See it in action",
+  "package-catalog.detail.footer.body": "Open {pageTitle} to experience {packageName} in a live workspace.",
+  "package-catalog.detail.footer.openPage": "Open {pageTitle}",
+  "package-catalog.detail.openPage": "Open page",
+  "package-catalog.detail.service.label": "Workspace service",
+  "package-catalog.detail.service.on": "enabled",
+  "package-catalog.detail.service.off": "disabled",
+  "package-catalog.detail.service.enable": "Enable service",
+  "package-catalog.detail.service.disable": "Disable service",
+  "package-catalog.detail.meta.capabilities": "{count} capabilit{countSuffix} included",
+  "package-catalog.detail.openAPage": "Open a page"
+}

package/src/formatPaths.js

@@ -0,0 +1,69 @@
+/**
+ * @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(' · ')
+}
+
+/**
+ * Localized page path without the `/:language` router prefix.
+ *
+ * @param {string | Record<string, string> | undefined} path
+ * @param {string | undefined} language
+ * @returns {string}
+ */
+export function formatPagePathForLanguage (path, language) {
+  if (!path) return '—'
+  if (typeof path === 'string') return stripLanguagePrefixFromPath(path, language)
+  const lang = language && path[language] ? language : Object.keys(path).sort()[0]
+  const segment = path[lang]
+  return segment ? stripLanguagePrefixFromPath(segment, lang) : '—'
+}
+
+/**
+ * @param {string} path
+ * @param {string | undefined} language
+ * @returns {string}
+ */
+function stripLanguagePrefixFromPath (path, language) {
+  if (!path) return '—'
+  if (language) {
+    const prefix = `/${language}`
+    if (path === prefix) return '/'
+    if (path.startsWith(`${prefix}/`)) return path.slice(prefix.length)
+  }
+  return path
+}
+
+const monoStyle = {
+  fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+  fontSize: '0.8125rem',
+  lineHeight: 1.4,
+  wordBreak: 'break-all',
+}
+
+export { monoStyle }
+
+/**
+ * @param {object} pkg
+ * @returns {number}
+ */
+export function countPackageCapabilities (pkg) {
+  return (
+    (pkg.pages?.length || 0) +
+    (pkg.apis?.length || 0) +
+    (pkg.actions?.length || 0) +
+    (pkg.components?.length || 0) +
+    (pkg.schemas?.length || 0) +
+    (pkg.tasks?.length || 0) +
+    (pkg.integrations?.length || 0) +
+    (pkg.emails?.length || 0) +
+    (pkg.aggregates?.length || 0)
+  )
+}

package/src/index.js

@@ -0,0 +1,9 @@
+export { Definition } from './Definition.js'
+export { PackagesBrowser } from './PackagesBrowser.jsx'
+export { CatalogPageStyles } from './CatalogPageStyles.jsx'
+export {
+  slugToDisplayName,
+  getPackagePitch,
+  getPackageIcon,
+  humanizeCapabilityId,
+} from './packageCopy.js'