@uniweb/kit 0.6.1 → 0.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/kit",
-  "version": "0.6.1",
+  "version": "0.7.1",
   "description": "Standard component library for Uniweb foundations",
   "type": "module",
   "exports": {
@@ -46,7 +46,7 @@
     "fuse.js": "^7.0.0",
     "shiki": "^3.0.0",
     "tailwind-merge": "^2.6.0",
-    "@uniweb/core": "0.5.1"
+    "@uniweb/core": "0.5.2"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/styled/Section/Render.jsx

@@ -66,7 +66,7 @@ function renderList(items, ordered = false) {
 /**
  * Render a single content node
  */
-function RenderNode({ node, ...props }) {
+function RenderNode({ node, block, ...props }) {
   if (!node) return null
 
   const { type, attrs, content } = node
@@ -203,7 +203,7 @@ function RenderNode({ node, ...props }) {
       return (
         <blockquote className="border-l-4 border-gray-300 pl-4 italic text-gray-600 my-4">
           {content?.map((child, i) => (
-            <RenderNode key={i} node={child} />
+            <RenderNode key={i} node={child} block={block} />
           ))}
         </blockquote>
       )
@@ -239,6 +239,19 @@ function RenderNode({ node, ...props }) {
       return <Divider type={attrs?.type} className="my-6" />
     }
 
+    case 'inline_child_placeholder': {
+      const refId = attrs?.refId
+      if (!block || !refId) return null
+
+      const childBlock = block.getInlineChild(refId)
+      if (!childBlock) return null
+
+      const ChildBlocks = childBlock.getChildBlockRenderer()
+      if (!ChildBlocks) return null
+
+      return <ChildBlocks blocks={[childBlock]} as="div" />
+    }
+
     case 'button': {
       const href = attrs?.href || '#'
       const label = extractText(node) || attrs?.label || 'Button'
@@ -286,7 +299,7 @@ function RenderNode({ node, ...props }) {
         return (
           <>
             {content.map((child, i) => (
-              <RenderNode key={i} node={child} />
+              <RenderNode key={i} node={child} block={block} />
             ))}
           </>
         )
@@ -302,7 +315,7 @@ function RenderNode({ node, ...props }) {
  * @param {Array|Object} props.content - Content to render (array of nodes or single node)
  * @param {string} [props.className] - Additional CSS classes
  */
-export function Render({ content, className, ...props }) {
+export function Render({ content, block, className, ...props }) {
   if (!content) return null
 
   const nodes = Array.isArray(content) ? content : [content]
@@ -310,7 +323,7 @@ export function Render({ content, className, ...props }) {
   return (
     <div className={cn('space-y-4', className)} {...props}>
       {nodes.map((node, i) => (
-        <RenderNode key={i} node={node} />
+        <RenderNode key={i} node={node} block={block} />
       ))}
     </div>
   )

package/src/theme-tokens.css

@@ -2,7 +2,7 @@
  * Standard Theme Tokens for Tailwind v4
  *
  * Import this in your foundation's styles.css to register theme CSS variables
- * with Tailwind, enabling utility classes like `text-heading`, `bg-surface`, etc.
+ * with Tailwind, enabling utility classes like `text-heading`, `bg-section`, etc.
  *
  * Usage:
  *   @import "tailwindcss";
@@ -21,24 +21,34 @@
 @theme inline {
   /* ── Semantic tokens ── */
   /* Values come from theme CSS context classes (light/medium/dark) */
+  --color-section: var(--section);
+  --color-card: var(--card);
+  --color-muted: var(--muted);
+  --color-body: var(--body);
   --color-heading: var(--heading);
-  --color-surface: var(--bg);
-  --color-surface-subtle: var(--bg-subtle);
-  --color-surface-muted: var(--bg-muted);
-  --color-body: var(--text);
-  --color-muted: var(--text-muted);
-  --color-subtle: var(--text-subtle);
+  --color-subtle: var(--subtle);
+  --color-border: var(--border);
+  --color-ring: var(--ring);
   --color-link: var(--link);
   --color-link-hover: var(--link-hover);
-  --color-edge: var(--border);
-  --color-edge-muted: var(--border-muted);
-  --color-ring: var(--ring);
-  --color-btn-primary: var(--btn-primary-bg);
-  --color-btn-primary-text: var(--btn-primary-text);
-  --color-btn-primary-hover: var(--btn-primary-hover);
-  --color-btn-secondary: var(--btn-secondary-bg);
-  --color-btn-secondary-text: var(--btn-secondary-text);
-  --color-btn-secondary-hover: var(--btn-secondary-hover);
+
+  /* ── Action tokens ── */
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary-hover: var(--primary-hover);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary-hover: var(--secondary-hover);
+
+  /* ── Status tokens ── */
+  --color-success: var(--success);
+  --color-success-subtle: var(--success-subtle);
+  --color-warning: var(--warning);
+  --color-warning-subtle: var(--warning-subtle);
+  --color-error: var(--error);
+  --color-error-subtle: var(--error-subtle);
+  --color-info: var(--info);
+  --color-info-subtle: var(--info-subtle);
 
   /* ── Primary palette ── */
   --color-primary-50: var(--primary-50);
@@ -93,7 +103,6 @@
   --color-neutral-950: var(--neutral-950);
 
   /* ── Brand shorthands ── */
-  --color-primary: var(--primary-500);
-  --color-secondary: var(--secondary-500);
+  /* accent has no semantic token — shorthand to 500 shade */
   --color-accent: var(--accent-500);
 }