@ossy/package-catalog 3.0.6 → 3.0.8

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@ossy/package-catalog",
   "description": "Capability catalog UI — browse manifest packages, actions, and integration examples",
-  "version": "3.0.6",
+  "version": "3.0.8",
   "type": "module",
   "main": "./src/index.js",
   "module": "./src/index.js",
@@ -29,5 +29,5 @@
     "@ossy/workspaces": ">=1.0.0",
     "react": ">=19.0.0 <20.0.0"
   },
-  "gitHead": "3e1c558069c7738dd751e429c69b10e52d247d8c"
+  "gitHead": "980b380c9dee0de78ef3ebabe86efcec1c223a9a"
 }

package/src/Definition.js

@@ -1,6 +1,7 @@
 export const Definition = {
   id: 'package-catalog',
   title: 'Capabilities',
+  titleKey: 'package-catalog.home.title',
   description: 'Browse documented, invokable platform capabilities for your workspace.',
   icon: 'layout-grid',
   status: ['beta'],

package/src/PackagesBrowser.jsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from 'react'
-import { Button, Icon, Input, Page, ContentHeader, SdkInvokeExample, Text, View } from '@ossy/design-system'
+import { Button, Icon, Input, Page, ContentHeader, SdkInvokeExample, Text, View, useLocale } from '@ossy/design-system'
 import { useApp } from '@ossy/app/shell'
 import { useRouter } from '@ossy/router-react'
 import { PackageHero } from './PackageHero.jsx'
@@ -10,21 +10,22 @@ import {
 } from './ActionCapabilityCard.jsx'
 import {
   getPackageIcon,
-  getPackagePitch,
   humanizeCapabilityId,
-  slugToDisplayName,
+  resolvePackageDisplayName,
+  resolvePackagePitch,
 } from './packageCopy.js'
 
 /**
  * @param {object} pkg
+ * @param {{ t: (key: string) => string, definition?: object | null }} options
  * @returns {string}
  */
-function packageSearchHaystack (pkg) {
+function packageSearchHaystack (pkg, { t, definition }) {
   const parts = [
     pkg.package,
     pkg.slug,
-    slugToDisplayName(pkg.slug),
-    getPackagePitch(pkg),
+    resolvePackageDisplayName(pkg, { t, definition }),
+    resolvePackagePitch(pkg, { t }),
   ]
 
   for (const page of pkg.pages || []) {
@@ -47,12 +48,16 @@ function packageSearchHaystack (pkg) {
 /**
  * @param {object[]} packages
  * @param {string} query
+ * @param {{ t: (key: string) => string, definitions?: Record<string, object> }} options
  * @returns {object[]}
  */
-function filterPackages (packages, query) {
+function filterPackages (packages, query, { t, definitions }) {
   const normalized = query.trim().toLowerCase()
   if (!normalized) return packages
-  return packages.filter((pkg) => packageSearchHaystack(pkg).includes(normalized))
+  return packages.filter((pkg) => packageSearchHaystack(pkg, {
+    t,
+    definition: definitions?.[pkg.slug],
+  }).includes(normalized))
 }
 
 /**
@@ -61,8 +66,10 @@ function filterPackages (packages, query) {
 export function PackagesBrowser () {
   const app = useApp()
   const router = useRouter()
+  const { t } = useLocale()
   const [query, setQuery] = useState('')
   const packages = app?.manifestSummary?.packages || []
+  const definitions = app?.manifestSummary?.definitions || {}
   const showcaseActions = useMemo(
     () => (app?.capabilities?.tools || []).slice(0, 6).map(tool => ({
       id: tool.actionId,
@@ -75,13 +82,14 @@ export function PackagesBrowser () {
   )
   const sorted = useMemo(
     () => [...packages].sort((a, b) =>
-      slugToDisplayName(a.slug).localeCompare(slugToDisplayName(b.slug)),
+      resolvePackageDisplayName(a, { t, definition: definitions[a.slug] })
+        .localeCompare(resolvePackageDisplayName(b, { t, definition: definitions[b.slug] })),
     ),
-    [packages],
+    [packages, definitions, t],
   )
   const filtered = useMemo(
-    () => filterPackages(sorted, query),
-    [sorted, query],
+    () => filterPackages(sorted, query, { t, definitions }),
+    [sorted, query, t, definitions],
   )
   const totalCount = sorted.length
   const visibleCount = filtered.length
@@ -240,7 +248,12 @@ export function PackagesBrowser () {
               ) : (
                 <View gap="m" layout="row-wrap">
                   {filtered.map((pkg) => (
-                    <PackageStoreCard key={pkg.package} pkg={pkg} router={router} />
+                    <PackageStoreCard
+                      key={pkg.package}
+                      pkg={pkg}
+                      definition={definitions[pkg.slug]}
+                      router={router}
+                    />
                   ))}
                 </View>
               )}
@@ -252,11 +265,12 @@ export function PackagesBrowser () {
 }
 
 /**
- * @param {{ pkg: object, router: ReturnType<typeof useRouter> }} props
+ * @param {{ pkg: object, definition?: object | null, router: ReturnType<typeof useRouter> }} props
  */
-function PackageStoreCard ({ pkg, router }) {
-  const displayName = slugToDisplayName(pkg.slug)
-  const pitch = getPackagePitch(pkg)
+function PackageStoreCard ({ pkg, definition, router }) {
+  const { t } = useLocale()
+  const displayName = resolvePackageDisplayName(pkg, { t, definition })
+  const pitch = resolvePackagePitch(pkg, { t })
   const icon = getPackageIcon(pkg)
   const actionCount = pkg.actions?.length ?? 0
   const detailHref = router.getHref({
@@ -285,9 +299,14 @@ function PackageStoreCard ({ pkg, router }) {
         {pitch}
       </Text>
       {actionCount > 0 && (
-        <Text variant="small" className="pkg-store-text-center pkg-store-text-subtle">
-          {actionCount} action{actionCount === 1 ? '' : 's'}
-        </Text>
+        <Text
+          variant="small"
+          className="pkg-store-text-center pkg-store-text-subtle"
+          text={actionCount === 1
+            ? 'package-catalog.card.actionOne'
+            : 'package-catalog.card.actionMany'}
+          params={{ count: actionCount }}
+        />
       )}
     </View>
   )

package/src/en.translations.json

@@ -1,4 +1,5 @@
 {
+  "package-catalog.home.title": "Capabilities",
   "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.",
@@ -32,6 +33,8 @@
   "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.card.actionOne": "{count} action",
+  "package-catalog.card.actionMany": "{count} actions",
   "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}",
@@ -80,6 +83,8 @@
   "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.meta.capabilities": "{count} capabilities included",
+  "package-catalog.detail.meta.capabilitiesOne": "{count} capability included",
+  "package-catalog.detail.meta.capabilitiesMany": "{count} capabilities included",
   "package-catalog.detail.openAPage": "Open a page"
 }

package/src/index.js

@@ -4,6 +4,8 @@ export { CatalogPageStyles } from './CatalogPageStyles.jsx'
 export {
   slugToDisplayName,
   getPackagePitch,
+  resolvePackageDisplayName,
+  resolvePackagePitch,
   getPackageIcon,
   humanizeCapabilityId,
 } from './packageCopy.js'

package/src/package-detail.page.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Icon, Page, ContentHeader, Text, View } from '@ossy/design-system'
+import { Icon, Page, ContentHeader, Text, View, useLocale } from '@ossy/design-system'
 import { useApp } from '@ossy/app/shell'
 import { useRouter } from '@ossy/router-react'
 import { countPackageCapabilities } from './formatPaths.js'
@@ -19,8 +19,8 @@ import { CatalogPageStyles } from './CatalogPageStyles.jsx'
 import {
   filterBackgroundTasks,
   getPackageIcon,
-  getPackagePitch,
-  slugToDisplayName,
+  resolvePackageDisplayName,
+  resolvePackagePitch,
 } from './packageCopy.js'
 
 export const metadata = {
@@ -35,6 +35,7 @@ export const metadata = {
 export default function PackageDetailPage () {
   const app = useApp()
   const router = useRouter()
+  const { t } = useLocale()
   const slug = router.params.packageSlug
   const pkg = app?.manifestSummary?.packages?.find((p) => p.slug === slug)
 
@@ -47,10 +48,10 @@ export default function PackageDetailPage () {
     )
   }
 
-  const displayName = slugToDisplayName(pkg.slug)
-  const pitch = getPackagePitch(pkg)
-  const packageIcon = getPackageIcon(pkg)
   const packageDefinition = app?.manifestSummary?.definitions?.[pkg.slug]
+  const displayName = resolvePackageDisplayName(pkg, { t, definition: packageDefinition })
+  const pitch = resolvePackagePitch(pkg, { t })
+  const packageIcon = getPackageIcon(pkg)
   const totalCapabilities = countPackageCapabilities(pkg)
   const backgroundTasks = filterBackgroundTasks(pkg.tasks)
 
@@ -75,10 +76,11 @@ export default function PackageDetailPage () {
             eyebrow={pkg.package}
             title={displayName}
             text={pitch}
-            meta="package-catalog.detail.meta.capabilities"
+            meta={totalCapabilities === 1
+              ? 'package-catalog.detail.meta.capabilitiesOne'
+              : 'package-catalog.detail.meta.capabilitiesMany'}
             metaParams={{
               count: totalCapabilities,
-              countSuffix: totalCapabilities === 1 ? 'y' : 'ies',
             }}
             maxWidth="l"
           />
@@ -119,7 +121,7 @@ export default function PackageDetailPage () {
           )}
 
           {documentedActions.length > 0 && (
-            <PackageActionsSection far={documentedActions} />
+            <PackageActionsSection actions={documentedActions} />
           )}
 
           {backgroundTasks.length > 0 && (

package/src/packageCopy.js

@@ -65,7 +65,7 @@ const PITCH_BY_SLUG = {
   storage: 'Files, folders, and workspace storage',
   tasks: 'Tasks, checklists, and async work',
   themes: 'Themes, branding, and appearance',
-  timesheets: 'Time tracking and billable hours',
+  timesheets: 'Generate, review, save, and export monthly work hours',
   tokens: 'Design tokens and theme variables',
   tools: 'Developer tools and utilities',
   users: 'Users, accounts, and membership',
@@ -107,6 +107,54 @@ export function getPackagePitch (pkg) {
   return `${name} — Ossy feature package`
 }
 
+/**
+ * Translate a key, or return null when the catalog has no entry (key echoes back).
+ *
+ * @param {(key: string, params?: Record<string, string | number>) => string} t
+ * @param {string | null | undefined} key
+ * @returns {string | null}
+ */
+function translateOrNull (t, key) {
+  if (!key || typeof t !== 'function') return null
+  const translated = t(key)
+  return translated && translated !== key ? translated : null
+}
+
+/**
+ * Localized package title for catalog cards / detail hero.
+ * Prefer Definition.titleKey, then `{slug}.home.title`, then English fallbacks.
+ *
+ * @param {{ slug?: string }} pkg
+ * @param {{ t?: (key: string) => string, definition?: { title?: string, titleKey?: string } | null }} [options]
+ * @returns {string}
+ */
+export function resolvePackageDisplayName (pkg, options = {}) {
+  const { t, definition } = options
+  const slug = pkg?.slug
+  const fromKey = translateOrNull(t, definition?.titleKey)
+    || translateOrNull(t, slug ? `${slug}.home.title` : null)
+  if (fromKey) return fromKey
+  if (definition?.title) return definition.title
+  return slugToDisplayName(slug || '')
+}
+
+/**
+ * Localized package pitch for catalog cards / detail hero.
+ * Prefer `{slug}.catalog.pitch`, then `{slug}.home.description`, then English PITCH_BY_SLUG.
+ *
+ * @param {{ slug?: string, package?: string }} pkg
+ * @param {{ t?: (key: string) => string }} [options]
+ * @returns {string}
+ */
+export function resolvePackagePitch (pkg, options = {}) {
+  const { t } = options
+  const slug = pkg?.slug
+  const fromKey = translateOrNull(t, slug ? `${slug}.catalog.pitch` : null)
+    || translateOrNull(t, slug ? `${slug}.home.description` : null)
+  if (fromKey) return fromKey
+  return getPackagePitch(pkg)
+}
+
 /** 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.',

package/src/sv.translations.json

@@ -1,4 +1,5 @@
 {
+  "package-catalog.home.title": "Funktioner",
   "package-catalog.home.hero.title": "En digital verktygslåda för ditt företag",
   "package-catalog.browser.title": "Funktioner",
   "package-catalog.browser.description": "Bläddra bland dokumenterade, anropbara capabilities för din workspace.",
@@ -32,6 +33,8 @@
   "package-catalog.section.matching": "Matchande funktioner",
   "package-catalog.section.description": "Varje kort öppnar showcase och dokumentation — actions, widgets och valfria sidor.",
   "package-catalog.gridMeta": "Visar {visible} av {total} funktioner",
+  "package-catalog.card.actionOne": "{count} action",
+  "package-catalog.card.actionMany": "{count} actions",
   "package-catalog.emptyManifest": "Funktionskatalogen är inte tillgänglig. Bygg om appen efter uppgradering av @ossy/platform.",
   "package-catalog.detail.notFound.title": "Funktionen hittades inte",
   "package-catalog.detail.notFound.body": "Inga manifestposter för slug: {slug}",
@@ -80,6 +83,8 @@
   "package-catalog.detail.service.off": "inaktiverad",
   "package-catalog.detail.service.enable": "Aktivera tjänst",
   "package-catalog.detail.service.disable": "Inaktivera tjänst",
-  "package-catalog.detail.meta.capabilities": "{count} funktion{countSuffix} ingår",
+  "package-catalog.detail.meta.capabilities": "{count} funktioner ingår",
+  "package-catalog.detail.meta.capabilitiesOne": "{count} funktion ingår",
+  "package-catalog.detail.meta.capabilitiesMany": "{count} funktioner ingår",
   "package-catalog.detail.openAPage": "Öppna en sida"
 }