@uniweb/kit 0.9.14 → 0.9.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/kit",
-  "version": "0.9.14",
+  "version": "0.9.16",
   "description": "Standard component library for Uniweb foundations",
   "type": "module",
   "exports": {
@@ -39,6 +39,7 @@
     "fuse.js": "^7.0.0",
     "shiki": "^3.0.0",
     "tailwind-merge": "^2.6.0",
+    "@uniweb/scene": "0.1.2",
     "@uniweb/core": "0.7.12"
   },
   "peerDependencies": {

package/src/index.js

@@ -121,6 +121,7 @@ export { Article } from './styled/Article/index.jsx'
 export { Code, Alert, Warning, Table, Details, Divider } from './styled/Section/renderers/index.js'
 export { Disclaimer } from './styled/Disclaimer/index.js'
 export { Visual } from './styled/Visual/index.jsx'
+export { Scene } from './styled/Scene/index.jsx'
 
 // ============================================================================
 // Search

package/src/styled/Scene/index.jsx

@@ -0,0 +1,47 @@
+import { Scene as SceneRenderer, composeScene } from '@uniweb/scene'
+
+// The @uniweb/scene renderer reads `--vc-*` custom properties for its default
+// colors (an explicit value in the scene JSON always wins). Text, font, and
+// separator already fall back to `currentColor` / `inherit`, so they inherit the
+// section's context color and font for free — we only theme the decorative
+// defaults (shape + spray/accent fills) from the site's semantic tokens.
+const THEME_VARS = {
+  '--vc-shape': 'var(--primary, #ffffff)',
+  '--vc-accent': 'var(--accent, #ff3300)'
+}
+
+/**
+ * Scene — themed wrapper around the `@uniweb/scene` renderer (the Scene
+ * Composition Format, surfaced to authors as a "Visual Design").
+ *
+ * Pass `composition` — an SCF document, e.g. `content.data.scene`. For
+ * content-driven templates, also pass `overrides` (named-slot, keyed by layer
+ * id) and/or `content` (an ordered stream); they run through `composeScene`
+ * before rendering so authored content flows into a branded template.
+ *
+ * Maps the site's `--primary` / `--accent` tokens onto the renderer's decorative
+ * defaults so an unstyled scene adopts the theme; text and fonts inherit the
+ * section context automatically. All other props (`mobileBreakpoint`,
+ * `initialWidth`, `sanitizeSvg`, `className`, `style`, and the editing hooks)
+ * forward straight through.
+ *
+ * @example
+ *   <Scene composition={content.data.scene} />
+ *   <Scene composition={template} overrides={{ title: { content: content.title } }} />
+ */
+export function Scene({ composition, overrides, content, style, ...rest }) {
+  const data =
+    overrides || content
+      ? composeScene(composition, { overrides, content })
+      : composition
+
+  return (
+    <SceneRenderer
+      composition={data}
+      style={{ ...THEME_VARS, ...style }}
+      {...rest}
+    />
+  )
+}
+
+export default Scene