mythik 0.2.0 → 0.2.1

package/docs/wiki/compiled/pattern-reusable-components.md

@@ -12,12 +12,13 @@ style blocks.**
 
 ## Decision
 
-| Need | Pick |
-|---|---|
-| Same primitive type, different style set | `tokens.components.{type}.{variant}` |
-| Composite (custom type wrapping primitive + children slot) | `appSpec.templates` |
-| Style varies by state (hover/active/focus) | Variants (built-in state slots) |
-| Parametrized via props + children | Templates (with `$prop` + `$children`) |
+| Need | Pick |
+|---|---|
+| Same primitive type, different style set | `tokens.components.{type}.{variant}` |
+| Primitive style plus repeated primitive props such as table `headerStyle` / `rowStyle` | `appSpec.templates` |
+| Composite (custom type wrapping primitive + children slot) | `appSpec.templates` |
+| Style varies by state (hover/active/focus) | Variants (built-in state slots) |
+| Parametrized via props + children | Templates (with `$prop` + `$children`) |
 
 See [[@concept-templates-vs-variants]] for the full decision walk-through.
 
@@ -35,7 +36,22 @@ If the same rich style object appears in 2+ specs (or 2+ places in same
 spec), extract to a template or variant. Duplication inflates DB storage,
 breaks DRY, makes updates O(N).
 
-See [[@antipattern-style-block-duplication]].
+See [[@antipattern-style-block-duplication]].
+
+## Boundary: style reuse vs prop-bearing reuse
+
+Variants cover primitive visual slots only: `style`, `hover`, `active`,
+`focus`, `transition`, and `animations`. Do not use variants for table
+`headerStyle`, table `rowStyle`, `columns`, `onRowClick`, action bindings,
+or composed children.
+
+Use both mechanisms together when needed:
+
+- `tokens.components.box.tableCard` for a repeated table panel shell.
+- `appSpec.templates.ops-table` for the table itself, including shared
+  `headerStyle` / `rowStyle` and `$prop` pass-through.
+- static `touchable` / `text` variants for filter chip shell and label
+  style, with active `$state` / `$item` styling kept on the actual elements.
 
 ## Right approach — extract once
 
@@ -43,11 +59,25 @@ See [[@antipattern-style-block-duplication]].
 // appSpec.templates once
 { "templates": { "button-pulse-cta": { ...full definition... } } }
 
-// both screens
-{ "type": "button-pulse-cta", "props": { "label": "..." } }
-```
-
-## Animations cascade across BOTH mechanisms
+// both screens
+{ "type": "button-pulse-cta", "props": { "label": "..." } }
+```
+
+For repeated table chrome:
+
+```json
+// appSpec tokens once
+{ "tokens": { "components": { "box": { "tableCard": { "style": { "...": "..." } } } } } }
+
+// appSpec template once
+{ "templates": { "ops-table": { "type": "table", "props": { "headerStyle": { "...": "..." }, "rowStyle": { "...": "..." }, "columns": { "$prop": "columns" }, "data": { "$prop": "data" } } } } }
+
+// each screen
+{ "type": "box", "props": { "variant": "tableCard" }, "children": ["orders-table"] }
+{ "type": "ops-table", "props": { "data": { "$state": "/orders" }, "columns": [...] } }
+```
+
+## Animations cascade across BOTH mechanisms
 
 `animations` declared at any of these levels merges via the cascade —
 identity → variant → template → element — with per-trigger null semantics.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mythik",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "AI-first JSON-native core runtime for validated applications, APIs, editor sessions, state, actions, validation, and versioning.",
   "license": "Apache-2.0",
   "type": "module",