feat(render): add more CSS properties to Style and apply in renderer 🎨

- Apply color, margin, opacity, padding, borderRadius, boxShadow, transition in applyStyle
- Simplify arrow params in Create and update JSDoc
- Extend Style type with same properties

Author: NeaByteLab

USAGE.md

@@ -69,7 +69,7 @@ Allowed keys are exactly the above. Extra keys cause validation to throw.
 ## Layout and Style
 
 - **Layout** — `width`, `height`, `x`, `y`, `flex`, `gap`. Number values are converted to `Npx`; strings (e.g. `'100%'`, `'auto'`) are used as-is. Applied to the element’s `style` (width, height, left, top, flex, gap). Setting `flex` or `gap` may set `display` to `block` or `flex` when needed.
-- **Style** — `fill` → `backgroundColor`, `stroke` → `border`, `font` → `font`, `border` → `border`. All string values.
+- **Style** — All string values, mapped to `element.style` (CSSStyleProperties). Semantic: `fill` → `backgroundColor`, `stroke` → `border`. Direct: `font`, `border`, `color`, `padding`, `margin`, `borderRadius`, `boxShadow`, `opacity`, `transition`.
 
 ## Void Tags and Special Elements
 
@@ -103,7 +103,7 @@ Types are re-exported from the package: `import type { Attrs, Definition, Layout
 - **Schema:** `{ readonly root: readonly Node[] }` — Output of `create`; frozen.
 - **Node:** Object with `type` (string) and optional `id`, `layout`, `style`, `attrs`, `content`, `src`, `alt`, `children` (readonly array of Node). Void tags must not have `children`.
 - **Layout:** Optional `width`, `height`, `x`, `y`, `flex`, `gap` — each `number | string`.
-- **Style:** Optional `fill`, `stroke`, `font`, `border` — each `string`.
+- **Style:** Optional `border`, `borderRadius`, `boxShadow`, `color`, `fill`, `font`, `margin`, `opacity`, `padding`, `stroke`, `transition` — each `string`.
 - **Attrs:** `Record<string, string | number | boolean>` — HTML attributes. Special handling for `class`/`className`, `style` (string), `value`, `checked`, `disabled` on form elements.
 
 ## Reference

src/Create.ts

@@ -14,10 +14,11 @@ export default class Create {
    */
   static create(definition: Types.Definition | unknown): Types.Schema {
     const validated = Validator.validateDefinition(definition)
-    const frozenRoot = validated.root.map((schemaNode) => Create.freezeNode(schemaNode))
+    const frozenRoot = validated.root.map(schemaNode => Create.freezeNode(schemaNode))
     Object.freeze(frozenRoot)
     return Object.freeze({ root: frozenRoot })
   }
+
   /**
    * Deep-freeze a single node and its children.
    * @description Freezes layout, style, attrs, and children recursively.
@@ -35,7 +36,7 @@ export default class Create {
       Object.freeze(node.attrs)
     }
     if (node.children) {
-      const frozenChildren = node.children.map((childNode) => Create.freezeNode(childNode))
+      const frozenChildren = node.children.map(childNode => Create.freezeNode(childNode))
       Object.freeze(frozenChildren)
       return Object.freeze({ ...node, children: frozenChildren }) as Readonly<Types.Node>
     }

src/Render.ts

@@ -97,10 +97,10 @@ export default class Render {
   }
 
   /**
-   * Apply style to element (fill, stroke, font, border).
-   * @description Maps schema style to CSS properties.
+   * Apply schema style to element.
+   * @description Maps style keys to element inline CSS.
    * @param element - Target HTML element
-   * @param style - Style object
+   * @param style - Schema style object
    */
   static applyStyle(element: HTMLElement, style: Types.Style): void {
     const elementStyle = element.style
@@ -116,6 +116,27 @@ export default class Render {
     if (style.border) {
       elementStyle.border = style.border
     }
+    if (style.color) {
+      elementStyle.color = style.color
+    }
+    if (style.padding) {
+      elementStyle.padding = style.padding
+    }
+    if (style.margin) {
+      elementStyle.margin = style.margin
+    }
+    if (style.borderRadius) {
+      elementStyle.borderRadius = style.borderRadius
+    }
+    if (style.boxShadow) {
+      elementStyle.boxShadow = style.boxShadow
+    }
+    if (style.opacity) {
+      elementStyle.opacity = style.opacity
+    }
+    if (style.transition) {
+      elementStyle.transition = style.transition
+    }
   }
 
   /**

src/Types.ts

@@ -76,17 +76,31 @@ export type Schema2UIDefault = {
 
 /**
  * Visual style for a node.
- * @description Fill, stroke, font, border mapped to CSS.
+ * @description Fill, stroke, font, border plus CSS properties.
  */
 export type Style = {
-  /** Border shorthand */
+  /** Border shorthand (CSS border) */
   border?: string
-  /** Background or fill color */
+  /** Border radius (CSS border-radius) */
+  borderRadius?: string
+  /** Box shadow (CSS box-shadow) */
+  boxShadow?: string
+  /** Text/foreground color (CSS color) */
+  color?: string
+  /** Background or fill color (→ backgroundColor) */
   fill?: string
-  /** Font shorthand */
+  /** Font shorthand (CSS font) */
   font?: string
-  /** Border or stroke */
+  /** Margin (CSS margin) */
+  margin?: string
+  /** Opacity (CSS opacity) */
+  opacity?: string
+  /** Padding (CSS padding) */
+  padding?: string
+  /** Border or stroke (→ border) */
   stroke?: string
+  /** Transition (CSS transition) */
+  transition?: string
 }
 
 /** Plain object record for validation. */