@ossy/package-catalog 3.0.9 → 3.8.0

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.9",
+  "version": "3.8.0",
   "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": "908fae28675f6c3c179d4c2eecb451e8a1af886e"
+  "gitHead": "14548dfc2019e7258e8c75db527acbf66fe829bd"
 }

package/src/PackageHero.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Button, Text, View, PageSection } from '@ossy/design-system'
+import { Button, Text, View, CalmPortal } from '@ossy/design-system'
 
 const Cover = ({
   title,
@@ -56,7 +56,7 @@ const Cover = ({
 )
 
 /**
- * Marketing-style hero for package detail — mirrors @ossy/booking HeroCover.
+ * Marketing hero — motion ShortformField stack (CalmPortal air over tealGlow).
  */
 export const PackageHero = ({
   title,
@@ -71,27 +71,54 @@ export const PackageHero = ({
   id = 'package-hero',
   surfaceAs = 'div',
   maxWidth = 'l',
-  surface = 'hero',
+  style,
   ...props
 }) => (
-  <PageSection
+  <View
     id={id}
-    surfaceAs={surfaceAs}
-    maxWidth={maxWidth}
-    surface={surface}
-    {...props}
+    as={surfaceAs}
+    surface="hero"
     data-rounded
     data-component="@ossy/package-catalog/package-hero"
+    style={{
+      position: 'relative',
+      isolation: 'isolate',
+      overflow: 'hidden',
+      width: '100%',
+      ...style,
+    }}
+    {...props}
   >
-    <Cover
-      title={title}
-      titleMaxWidth={titleMaxWidth}
-      text={text}
-      textParams={textParams}
-      eyebrow={eyebrow}
-      meta={meta}
-      metaParams={metaParams}
-      actions={actions}
+    <CalmPortal
+      tone="air"
+      base="hero"
+      grain={0.35}
+      size={1.35}
+      feather={6}
+      blurPx={9}
     />
-  </PageSection>
+    <View
+      data-pkg-hero-content
+      style={{
+        position: 'relative',
+        zIndex: 1,
+        width: '100%',
+        height: '100%',
+        maxWidth: `var(--max-width-${maxWidth}, 100%)`,
+        marginLeft: 'auto',
+        marginRight: 'auto',
+      }}
+    >
+      <Cover
+        title={title}
+        titleMaxWidth={titleMaxWidth}
+        text={text}
+        textParams={textParams}
+        eyebrow={eyebrow}
+        meta={meta}
+        metaParams={metaParams}
+        actions={actions}
+      />
+    </View>
+  </View>
 )

package/src/en.translations.json

@@ -3,7 +3,7 @@
   "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.text": "We ship 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/src/packageStoreStyles.js

@@ -288,10 +288,27 @@ export const packageStoreStyles = `
     gap: var(--space-m);
     min-height: min(42vh, 420px);
     height: auto;
+    position: relative;
+    isolation: isolate;
+    overflow: hidden;
     background-attachment: scroll;
     box-shadow: inset 0 1px 0 color-mix(in srgb, var(--foreground) 6%, transparent);
   }
 
+  /* CalmMesh paints the field — suppress Theme hero ::before/::after. */
+  [data-component="@ossy/package-catalog/package-hero"]::before,
+  [data-component="@ossy/package-catalog/package-hero"]::after {
+    content: none;
+    display: none;
+  }
+
+  [data-component="@ossy/package-catalog/package-hero"] > [data-calm-mesh],
+  [data-component="@ossy/package-catalog/package-hero"] > [data-calm-portal] {
+    position: absolute;
+    inset: 0;
+    z-index: 0;
+  }
+
   [data-rounded] {
     border-radius: var(--space-m);
     overflow: hidden;

package/src/sv.translations.json

@@ -3,7 +3,7 @@
   "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.",
-  "package-catalog.home.hero.text": "Ossy levererar dokumenterade, anropbara capabilities — bokning, auth, resurser med mera. Varje funktion går att anropa via SDK, API eller MCP. UI är en projektion, inte produkten.",
+  "package-catalog.home.hero.text": "Vi levererar dokumenterade, anropbara capabilities — bokning, auth, resurser med mera. Varje funktion går att anropa via SDK, API eller MCP. UI är en projektion, inte produkten.",
   "package-catalog.home.hero.meta": "{count} funktioner · redo att användas i appar och agenter",
   "package-catalog.home.belief.title": "Vad vi tror på",
   "package-catalog.home.belief.body": "Människor vill interagera med teknik på ett nytt sätt. AI blir det primära lagret — agenter ska driva verksamheten, inte bara svara på frågor. Vi bygger kompakta, sammansatta verktyg som fungerar i MCP-kompatibla miljöer — Cursor, Claude Desktop, GitHub Copilot i VS Code och andra MCP-agenter — samt i dina egna appar och på webben.",