@uniweb/kit 0.19.8 → 0.19.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/kit",
-  "version": "0.19.8",
+  "version": "0.19.10",
   "description": "Standard component library for Uniweb foundations",
   "type": "module",
   "exports": {
@@ -43,10 +43,10 @@
     "shiki": "^3.0.0",
     "tailwind-merge": "^3.6.0",
     "temml": "^0.13.2",
-    "@uniweb/core": "^0.32.1",
-    "@uniweb/projections": "^0.7.7",
-    "@uniweb/schemas": "^0.8.0",
+    "@uniweb/projections": "^0.7.10",
     "@uniweb/scene": "^0.1.3",
+    "@uniweb/schemas": "^0.9.0",
+    "@uniweb/core": "^0.34.0",
     "@uniweb/semantic-parser": "^1.4.1"
   },
   "peerDependencies": {

package/src/components/SectionBackground/SectionBackground.jsx

@@ -0,0 +1,36 @@
+/**
+ * SectionBackground — the background the author set on a section, drawn by the runtime's own
+ * renderer, for a component that places it itself.
+ *
+ * The runtime draws a section's background behind every section, so most components need
+ * nothing. A component that paints its own — a hero with a built-in gradient, a background
+ * that belongs inside a card — declares `background: 'self'` in its `meta.js`, and the runtime
+ * then draws none. With this it can still draw what the author chose, wherever it wants,
+ * without rebuilding the image, video, gradient and overlay handling.
+ *
+ * It fills the nearest positioned ancestor (`position: absolute; inset: 0`), so place it inside
+ * an element with `position: relative`, before the content.
+ *
+ * @param {Object} props
+ * @param {Object} props.block - The section's block — its `block.background`, normalized by core
+ * @param {string} [props.className] - Classes on the background layer
+ *
+ * @example
+ * function Hero({ content, block }) {
+ *   return (
+ *     <section className="relative">
+ *       <SectionBackground block={block} />
+ *       <div className="relative z-10">…</div>
+ *     </section>
+ *   )
+ * }
+ */
+export function SectionBackground({ block, className }) {
+  const background = block?.background
+  if (!background?.mode) return null
+  const Renderer = globalThis.uniweb?.backgroundRenderer
+  if (!Renderer) return null
+  return <Renderer {...background} className={className} />
+}
+
+export default SectionBackground

package/src/components/SectionBackground/index.js

@@ -0,0 +1 @@
+export { SectionBackground, default } from './SectionBackground.jsx'

package/src/hooks/useThemeData.js

@@ -89,31 +89,28 @@ export function useThemeData() {
 }
 
 /**
- * Get the current section's color context.
+ * The color context a section renders in: `'light'`, `'medium'` or `'dark'`.
  *
- * Note: This requires the component to receive the block prop.
- * For components that don't have block access, use a default or pass context explicitly.
+ * A section pinned with `theme:` renders in that context. One that follows the site — no
+ * `theme:` — renders in the site's current scheme, so on a dark-scheme site it is `'dark'`.
+ * This is how a component reads its context for its own logic, a light or dark logo say:
+ * `theme` is a setting of the section, never one of the component's params. ⛔ Until
+ * 2026-09-28 a section that follows the site read as `'light'` whatever the scheme.
  *
- * @param {Object} block - Block instance (optional)
- * @returns {string} Context name ('light', 'medium', or 'dark')
+ * @param {Object} block - The section's Block
+ * @returns {'light'|'medium'|'dark'}
  *
  * @example
- * function MyComponent({ block }) {
+ * function Logo({ block }) {
  *   const context = useColorContext(block)
- *   return <div className={`context-${context}`}>...</div>
+ *   return <img src={context === 'dark' ? '/logo-light.svg' : '/logo.svg'} alt="" />
  * }
  */
 export function useColorContext(block) {
-  // Get context from block's theme property
-  const context = block?.themeName || block?.theme || 'light'
-
-  // Validate context name
-  const validContexts = ['light', 'medium', 'dark']
-  if (validContexts.includes(context)) {
-    return context
-  }
-
-  return 'light'
+  const { scheme } = useAppearance()
+  const pinned = block?.themeName
+  if (pinned === 'light' || pinned === 'medium' || pinned === 'dark') return pinned
+  return scheme === 'dark' ? 'dark' : 'light'
 }
 
 /**

package/src/index.js

@@ -40,6 +40,9 @@ export { Asset } from './components/Asset/index.js'
 // Data loading
 export { DataPlaceholder } from './components/DataPlaceholder.jsx'
 
+// A section's background, for a component that draws it itself (`background: 'self'`)
+export { SectionBackground } from './components/SectionBackground/index.js'
+
 // Social
 export {
   SocialIcon,

package/src/styled/ChildGrid/index.jsx

@@ -11,6 +11,10 @@
  * columns applies as chosen and a wider one shows two equal columns; from `lg` the
  * chosen layout applies whatever its width.
  *
+ * ⭐ Each child renders as a section, in a `div`: its own `theme:` and `background:`
+ * apply, and it carries the `section-{id}` its theme rules select [2026-09-28]. ⛔ Until
+ * then the children rendered bare, and a child's theme and background did nothing.
+ *
  * @module @uniweb/kit/styled/ChildGrid
  */
 
@@ -60,7 +64,7 @@ export function ChildGrid({ from: block, fallback = null, headerRow = false, cla
           key={child.id || index}
           className={cn(headerRow && index === 0 && 'md:col-span-full', cellClassName)}
         >
-          <ChildBlocks blocks={[child]} />
+          <ChildBlocks blocks={[child]} wrapAs="div" />
         </div>
       ))}
     </div>