@ossy/package-catalog 3.0.8 → 3.6.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.8",
+  "version": "3.6.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": "980b380c9dee0de78ef3ebabe86efcec1c223a9a"
+  "gitHead": "d1fd144986b0e819d46926aeb11f7815ac52a784"
 }

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/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;