view-contracts 0.3.3 → 0.3.5

package/docs/cli-reference.md

@@ -2,7 +2,7 @@
 
 Contract-first UI design toolchain. Compiles restricted view-contract TSX to language-neutral View IR and renders platform targets (React, SwiftUI, Compose).
 
-**Version:** 0.3.3
+**Version:** 0.3.5
 
 ## Table of Contents
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "view-contracts",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "description": "Contract-first UI design toolchain — restricted TSX to View IR to platform renderers",
   "type": "module",
   "workspaces": [

package/renderers/NATIVE_THEME_EMIT.md

@@ -0,0 +1,73 @@
+# Native theme codegen (SwiftUI / Compose)
+
+Web と同様、**トークンとテーマはビルド時に解決し、プラットフォーム専用の生成コードとして出力する**。アプリが JSON を読み込む設計は採用しない。
+
+## Pipeline（React と同型）
+
+```txt
+views/design/tokens.yaml + theme.yaml
+  ↓ loadValidateDesign()  → Token IR + Theme IR（メモリ上のみ）
+  ↓
+  ├ react   → emitTokenCss + emitDefaultCss + emitVariantCss → generated/react/theme.css
+  ├ swiftui → emitSwiftUITheme(tokenIR, themeIR)             → generated/swiftui/Theme/*.swift
+  └ compose → emitComposeTheme(tokenIR, themeIR)             → generated/compose/theme/*.kt
+```
+
+IR は renderer の **入力**であり、成果物ではない。React が `theme.css` を出すのと同じ関係で、ネイティブは Swift / Kotlin を出す。
+
+## 実装方針（変換テンプレートで完結）
+
+`src/design/emitDefaultCss.ts` / `emitVariantCss.ts` と同じ Token IR + Theme IR を、Handlebars テンプレートへ渡してコード生成する。
+
+| モジュール | テンプレート | 出力例 |
+| --- | --- | --- |
+| `src/design/emit/swiftui.ts` | `renderers/swiftui/templates/theme/*.hbs` | `VcColors.swift`, `VcButtonStyles.swift` |
+| `src/design/emit/compose.ts` | `renderers/compose/templates/theme/*.hbs` | `VcColors.kt`, `VcButtonModifiers.kt` |
+
+### Token IR → 定数
+
+`TokenEntry.value` はビルド時に解決済み。テンプレートでは型ごとに写像する。
+
+| `$type` | SwiftUI | Compose |
+| --- | --- | --- |
+| `color` | `Color(red:…)` または `Color("path")` + Asset catalog | `Color(0xFF2563EB)` |
+| `dimension` | `CGFloat` 定数 | `Dp` 定数 |
+| `shadow` | `Shadow` 構造体 | `Shadow` data class |
+| typography | `Font` ヘルパ | `TextStyle` |
+
+### Theme IR → variant スタイル
+
+`theme.defaults` / `theme.variants` の token ref を、上記定数へ解決してスタイル定義を生成する。
+
+| Theme | Web（現行） | SwiftUI | Compose |
+| --- | --- | --- | --- |
+| `Button.primary` | `.vc-button--primary` | `PrimaryButtonStyle` | `Modifier.primaryButton()` |
+| `Text.muted` | `.vc-text--muted` | `VcTextMutedModifier` | `Modifier.vcTextMuted()` |
+
+命名規則: `{Component}{VariantPascal}Style` / `Modifier.{variant}{Component}()` — Theme IR から決定論的に導出。
+
+### View lowering との接続
+
+`lowerToSwiftUI.ts` / `lowerToCompose.ts` は View IR の `variant` prop を **生成済みスタイル名**へ写像するだけ。runtime で theme を解決しない。
+
+```swift
+// generated — variant は compile-time class/style 参照
+Button("Save") { }
+    .buttonStyle(PrimaryButtonStyle())
+```
+
+## スキャフォールドとの境界
+
+`scaffoldNativeTargets()` が出す `VcTheme.swift` / `VcTheme.kt` は **Screen stub のみ**（native target 未実装時のプレースホルダ）。テーマ本体は `emit/swiftui.ts` / `emit/compose.ts` が `build` 時に上書き生成する。
+
+## 参照実装（React）
+
+| 関心 | ファイル |
+| --- | --- |
+| IR 読み込み | `src/design/index.ts` → `loadValidateDesign()` |
+| Token → CSS 変数 | `src/design/emitTokenCss.ts` |
+| defaults / variants → CSS class | `src/design/emitDefaultCss.ts`, `emitVariantCss.ts` |
+| ビルド統合 | `src/design/buildThemeCss.ts`, `renderers/react/renderRuntime.ts` |
+| variant class（lowering） | `renderers/react/lowering/lowerToJsx.ts` |
+
+ネイティブ emit は上記 CSS emit と **同じ IR・同じ解決ロジック**を共有し、出力形式だけテンプレートで差し替える。

package/renderers/compose/README.md

@@ -1,8 +1,15 @@
 # Compose renderer scaffold
 
+**Not implemented yet** beyond theme / screen stubs. View IR lowering and modifier emission are future work.
+
+Compose `Modifier` chains are **compositional** (not CSS-style override). view-contracts may later introduce a separate **modifier pipeline** concept (wrapper-style transforms, analogous to nested HTML layout shells) — that is **out of scope for the current phase**. When styling is implemented, defaults + variant + instance props will be **folded at compile time** into resolved values, not chained for cascade-like override. See [docs/ARCHITECTURE.md](../../docs/ARCHITECTURE.md) § Native renderers.
+
 - Maps: `elements.yaml`, `properties.yaml` (hand-maintained under this directory)
 - Routes: `routes.yaml`
 - Templates: `templates/`
+- Theme codegen spec: [../NATIVE_THEME_EMIT.md](../NATIVE_THEME_EMIT.md)
 
 Implement Compose code generation by reading View IR + renderer maps.
+Theme is emitted at build time via `src/design/emit/compose.ts` and `templates/theme/*.hbs` — same Token IR + Theme IR as React `theme.css`, not runtime JSON.
+
 Vocabulary: `spec/ui-dsl.schema.json` (from `ui-dsl-*.csv`).

package/renderers/compose/templates/Screen.kt.hbs

@@ -1,8 +1,6 @@
-// {{screenName}} — Jetpack Compose scaffold (Phase 5)
-// Theme IR: {{themeJsonPath}}
-// Token IR: {{tokensJsonPath}}
-//
-// TODO(Phase C): Load theme.json and emit Modifier.primaryButton(), vcTextMuted(), etc.
+// {{screenName}} — Jetpack Compose scaffold
+// View IR lowering: renderers/compose/lowerToCompose.ts (planned)
+// Theme: renderers/NATIVE_THEME_EMIT.md
 
 package {{packageName}}
 

package/renderers/compose/templates/VcTheme.kt.hbs

@@ -1,19 +1,13 @@
-// VcTheme — Compose theme scaffold (Phase 5)
-// Load Token IR + Theme IR from assets:
-//   {{tokensJsonPath}}
-//   {{themeJsonPath}}
+// VcTheme — Compose theme (scaffold placeholder)
 //
-// TODO(Phase C): Map Theme IR variants to Modifier extensions and ColorScheme.
+// Theme is emitted at build time from Token IR + Theme IR via Handlebars templates.
+// See renderers/NATIVE_THEME_EMIT.md — not loaded from JSON at runtime.
+//
+// Implementation: src/design/emit/compose.ts + renderers/compose/templates/theme/*.hbs
+// Output target: generated/compose/theme/
 
 package {{packageName}}
 
-import android.content.Context
-
 object VcTheme {
-    const val TOKENS_ASSET = "{{tokensJsonPath}}"
-    const val THEME_ASSET = "{{themeJsonPath}}"
-
-    /** Placeholder — read theme.json from assets in Phase C. */
-    fun loadThemeJson(context: Context): String? =
-        context.assets.open(THEME_ASSET).bufferedReader().use { it.readText() }
+    // Populated by emitComposeTheme() when compose target is enabled.
 }

package/renderers/react/defaults/theme.yaml

@@ -1,4 +1,11 @@
 # Default theme variants — generic vocabulary only (no sample-specific layouts).
+defaults:
+  Button:
+    background: "{ui.button-secondary}"
+    foreground: "{ui.text}"
+    radius: "{ui.space.radius-md}"
+    padding: "{ui.space.button-padding}"
+    fontWeight: "{ui.layout.font-bold}"
 variants:
   Button:
     primary:

package/renderers/react/defaults/tokens.yaml

@@ -57,3 +57,14 @@ ui:
   font:
     $type: typography
     $value: 'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif'
+  layout:
+    font-bold:
+      $type: layout
+      $value: "700"
+  space:
+    radius-md:
+      $type: dimension
+      $value: "10px"
+    button-padding:
+      $type: dimension
+      $value: "10px 14px"

package/renderers/react/lowering/foldStyle.ts

@@ -0,0 +1,87 @@
+/**
+ * Compile-time style folding for React lowering.
+ * Production generated JSX must not call runtime style helpers.
+ */
+import { LOWERING_STYLE_PROPERTIES } from '../../../src/generated/schema/lowering-style-properties.js';
+import type { IrLiteral, IrValue } from '../../../src/ir/types.js';
+import type { ElementMapEntry } from '../elementMap.js';
+import { foldLiteralsToCss, foldedStyleToJsx, type FoldedCss } from '../style/foldLiterals.js';
+
+function propLiteral(props: Record<string, IrValue>, key: string): unknown | undefined {
+  const value = props[key];
+  if (value === null || value === undefined) return undefined;
+  if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') return value;
+  if (typeof value === 'object' && 'kind' in value && value.kind === 'literal') {
+    return (value as IrLiteral).value;
+  }
+  return undefined;
+}
+
+function assertLiteralStyleProp(key: string, value: IrValue): void {
+  if (value === null || value === undefined) return;
+  if (typeof value === 'string' || typeof value === 'number' || typeof value === 'boolean') return;
+  if (typeof value === 'object' && 'kind' in value && value.kind === 'literal') return;
+  throw new Error(
+    `Style property "${key}" must be a compile-time literal; ViewModel bindings are not allowed on layout/visual props`,
+  );
+}
+
+export function collectLiteralStyleProps(props: Record<string, IrValue>): Record<string, unknown> {
+  const literals: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(props)) {
+    if (!LOWERING_STYLE_PROPERTIES.has(key)) continue;
+    assertLiteralStyleProp(key, value);
+    const lit = propLiteral(props, key);
+    if (lit !== undefined) literals[key] = lit;
+  }
+  return literals;
+}
+
+export function foldFlexContainer(entry: ElementMapEntry): FoldedCss {
+  if (!entry.flex) return {};
+  return {
+    display: 'flex',
+    flexDirection: entry.flex === 'column' ? 'column' : 'row',
+  };
+}
+
+function scrollOverflowLiteral(mode: string): FoldedCss {
+  if (mode === 'horizontal') return { overflowX: 'auto', overflowY: 'hidden' };
+  if (mode === 'both') return { overflowX: 'auto', overflowY: 'auto' };
+  if (mode === 'none') return { overflowX: 'hidden', overflowY: 'hidden' };
+  return { overflowX: 'hidden', overflowY: 'auto' };
+}
+
+export function styleAttrForElement(entry: ElementMapEntry, props: Record<string, IrValue>): string {
+  const literals = collectLiteralStyleProps(props);
+  let folded = foldLiteralsToCss(literals);
+  folded = { ...folded, ...foldFlexContainer(entry) };
+
+  if (entry.scrollContainer) {
+    const scrollLit = propLiteral(props, 'scroll');
+    const axisLit = propLiteral(props, 'axis');
+    const literalMode = typeof scrollLit === 'string'
+      ? scrollLit
+      : typeof axisLit === 'string'
+        ? (axisLit === 'horizontal' ? 'horizontal' : 'vertical')
+        : undefined;
+    if (literalMode) {
+      folded = { ...folded, ...scrollOverflowLiteral(literalMode) };
+      return foldedStyleToJsx(folded);
+    }
+    throw new Error('ScrollArea scroll/axis must be compile-time literals');
+  }
+
+  if (entry.flexGrowProp && props[entry.flexGrowProp]) {
+    const growLit = propLiteral(props, entry.flexGrowProp);
+    if (typeof growLit === 'number') {
+      folded.flexGrow = growLit;
+      return foldedStyleToJsx(folded);
+    }
+    throw new Error(`"${entry.flexGrowProp}" on <Spacer> must be a compile-time literal`);
+  }
+
+  return foldedStyleToJsx(folded);
+}
+
+export { foldLiteralsToCss, foldedStyleToJsx } from '../style/foldLiterals.js';

package/renderers/react/lowering/lowerToJsx.ts

@@ -1,5 +1,5 @@
 import type { ElementMapEntry, ReactElementMap } from '../elementMap.js';
-import { LOWERING_STYLE_PROPERTIES } from '../../../src/generated/schema/lowering-style-properties.js';
+import { styleAttrForElement, collectLiteralStyleProps, foldLiteralsToCss, foldedStyleToJsx } from './foldStyle.js';
 import type {
   IrAction,
   IrBinding,
@@ -10,6 +10,7 @@ import type {
   IrNode,
   IrTextNode,
   IrValue,
+  IrViewRefNode,
 } from '../../../src/ir/types.js';
 
 function indent(level: number): string {
@@ -81,61 +82,9 @@ function propExpr(props: Record<string, IrValue>, key: string): string | undefin
   return renderValue(value, 0);
 }
 
-function collectStyleProps(props: Record<string, IrValue>): string {
-  const entries = Object.entries(props).filter(([key]) => LOWERING_STYLE_PROPERTIES.has(key));
-  if (entries.length === 0) return '{}';
-  const body = entries.map(([key, val]) => `${key}: ${renderValue(val, 0)}`).join(', ');
-  return `{ ${body} }`;
-}
-
-function extraFlexStyle(entry: ElementMapEntry, props: Record<string, IrValue>): string {
-  if (!entry.flex) return '';
-  const parts = [`display: 'flex'`, `flexDirection: '${entry.flex === 'column' ? 'column' : 'row'}'`];
-  if (props.align) parts.push(`alignItems: mapAlign(${propExpr(props, 'align')})`);
-  if (props.justify) parts.push(`justifyContent: mapJustify(${propExpr(props, 'justify')})`);
-  return `, ${parts.join(', ')}`;
-}
-
-function scrollOverflowLiteral(mode: string): { overflowX: string; overflowY: string } {
-  if (mode === 'horizontal') return { overflowX: 'auto', overflowY: 'hidden' };
-  if (mode === 'both') return { overflowX: 'auto', overflowY: 'auto' };
-  if (mode === 'none') return { overflowX: 'hidden', overflowY: 'hidden' };
-  return { overflowX: 'hidden', overflowY: 'auto' };
-}
-
-function styleAttr(entry: ElementMapEntry, props: Record<string, IrValue>): string {
-  const base = collectStyleProps(props);
-  const flex = extraFlexStyle(entry, props);
-  if (entry.scrollContainer) {
-    const scrollLit = propLiteral(props, 'scroll');
-    const axisLit = propLiteral(props, 'axis');
-    const literalMode = typeof scrollLit === 'string'
-      ? scrollLit
-      : typeof axisLit === 'string'
-        ? (axisLit === 'horizontal' ? 'horizontal' : 'vertical')
-        : undefined;
-    if (literalMode) {
-      const { overflowX, overflowY } = scrollOverflowLiteral(literalMode);
-      return `style={{ ...commonStyle(${base})${flex}, overflowX: '${overflowX}', overflowY: '${overflowY}' }}`;
-    }
-    const scroll = propExpr(props, 'scroll');
-    const axis = propExpr(props, 'axis');
-    const modeExpr = scroll
-      ?? (axis ? `(${axis} === 'horizontal' ? 'horizontal' : 'vertical')` : `'vertical'`);
-    return `style={{ ...commonStyle(${base})${flex}, ...(() => {
-      const __scroll = ${modeExpr};
-      if (__scroll === 'horizontal') return { overflowX: 'auto', overflowY: 'hidden' };
-      if (__scroll === 'both') return { overflowX: 'auto', overflowY: 'auto' };
-      if (__scroll === 'none') return { overflowX: 'hidden', overflowY: 'hidden' };
-      return { overflowX: 'hidden', overflowY: 'auto' };
-    })() }}`;
-  }
-  if (entry.flexGrowProp && props[entry.flexGrowProp]) {
-    const grow = propExpr(props, entry.flexGrowProp);
-    return `style={{ ...commonStyle(${base})${flex}, flexGrow: ${grow} ?? 1 }}`;
-  }
-  if (flex) return `style={{ ...commonStyle(${base})${flex} }}`;
-  return `style={commonStyle(${base})}`;
+function pushStyleAttr(attrs: string[], entry: ElementMapEntry, props: Record<string, IrValue>): void {
+  const style = styleAttrForElement(entry, props);
+  if (style) attrs.push(style);
 }
 
 function actionHandler(props: Record<string, IrValue>, event: 'onClick' | 'onSubmit'): string | undefined {
@@ -267,19 +216,19 @@ function emitIcon(node: IrComponentNode, entry: ElementMapEntry, level: number):
   if (hasAlt) {
     const attrs: string[] = [
       classNameAttr(node.name, entry, props),
-      styleAttr(entry, props),
       `src={${propExpr(props, 'name') ?? '""'}}`,
       `alt={${propExpr(props, 'alt') ?? '""'}}`,
     ];
+    pushStyleAttr(attrs, entry, props);
     if (props.id) attrs.push(`id={${propExpr(props, 'id')}}`);
     return `${indent(level)}<img ${attrs.join(' ')} />`;
   }
 
   const attrs: string[] = [
     classNameAttr(node.name, entry, props),
-    styleAttr(entry, props),
     `aria-hidden`,
   ];
+  pushStyleAttr(attrs, entry, props);
   if (props.id) attrs.push(`id={${propExpr(props, 'id')}}`);
   if (props.name) attrs.push(`data-icon={${propExpr(props, 'name')}}`);
   return `${indent(level)}<span ${attrs.join(' ')} />`;
@@ -302,7 +251,8 @@ function emitVoidInput(
   props: Record<string, IrValue>,
   level: number,
 ): string {
-  const attrs: string[] = [classNameAttr(elementName, entry, props), styleAttr(entry, props)];
+  const attrs: string[] = [classNameAttr(elementName, entry, props)];
+  pushStyleAttr(attrs, entry, props);
   if (entry.ariaHidden) attrs.push('aria-hidden');
   if (props.id) attrs.push(`id={${propExpr(props, 'id')}}`);
   if (props.role) attrs.push(`role={${propExpr(props, 'role')}}`);
@@ -350,7 +300,7 @@ function emitOpenTag(
   if (entry.tag === 'a' && props.href) attrs.push(`href={${propExpr(props, 'href')}}`);
   if (entry.tag === 'button') attrs.push(`type={${propExpr(props, 'type') ?? '"button"'}}`);
   attrs.push(classNameAttr(elementName, entry, props, headingLevel));
-  attrs.push(styleAttr(entry, props));
+  pushStyleAttr(attrs, entry, props);
   return `<${tag} ${attrs.join(' ')}`;
 }
 
@@ -360,7 +310,7 @@ function visibilityGuard(inner: string, props: Record<string, IrValue>, level: n
   return `${indent(level)}{${vis} !== false ? (\n${inner}\n${indent(level)}) : null}`;
 }
 
-type NodeRenderer = (node: IrComponentNode, level: number, itemScope?: string) => string;
+type NodeRenderer = (node: IrNode, level: number, itemScope?: string) => string;
 
 function renderChildren(
   children: IrNode[],
@@ -382,15 +332,14 @@ function renderChildren(
     if (child.kind === 'fragment') {
       return renderChildren(child.children, level, renderNested, itemScope);
     }
-    if (child.kind === 'component') return renderNested(child, level, itemScope);
-    return '';
+    return renderNested(child, level, itemScope);
   }).filter(Boolean);
   return parts.join('\n');
 }
 
 function renderMap(node: IrMapNode, level: number, renderNested: NodeRenderer): string {
   const item = node.item;
-  let body = renderNested(node.body as IrComponentNode, level + 1, item);
+  let body = renderNested(node.body, level + 1, item);
   if (node.key) {
     const keyAttr = ` key={${bindingExpr(node.key, item)}}`;
     body = body.replace(/^( +)<(\w+)/, `$1<$2${keyAttr}`);
@@ -427,9 +376,9 @@ function lowerVocabularyElement(
   if (node.name === 'Spinner') {
     const attrs = [
       classNameAttr(node.name, entry, props),
-      styleAttr(entry, props),
       'aria-busy="true"',
     ];
+    pushStyleAttr(attrs, entry, props);
     if (props.id) attrs.push(`id={${propExpr(props, 'id')}}`);
     if (props.role) attrs.push(`role={${propExpr(props, 'role')}}`);
     else if (entry.defaultRole) attrs.push(`role="${entry.defaultRole}"`);
@@ -465,10 +414,13 @@ function lowerVocabularyElement(
       return visibilityGuard(body, props, level);
     }
     const levelExpr = propExpr(props, 'level') ?? '2';
+    const foldedStyle = foldedStyleToJsx(foldLiteralsToCss(collectLiteralStyleProps(props)));
+    const styleFragment = foldedStyle ? ` ${foldedStyle}` : '';
     const inner = childContent
-      ? `${indent(level + 1)}{(() => { const __level = Math.min(6, Math.max(1, ${levelExpr} ?? 2)); const Tag = ('h' + __level) as keyof JSX.IntrinsicElements; return <Tag className={\`vc-heading vc-heading-\${__level}\`} style={commonStyle(${collectStyleProps(props)})}>{/* children below */}</Tag>; })()}`
+      ? `${indent(level + 1)}{(() => { const __level = Math.min(6, Math.max(1, ${levelExpr} ?? 2)); const Tag = ('h' + __level) as keyof JSX.IntrinsicElements; return <Tag className={\`vc-heading vc-heading-\${__level}\`}${styleFragment}>{/* children below */}</Tag>; })()}`
       : '';
-    return visibilityGuard(inner || `${indent(level)}<h2 ${classNameAttr(node.name, entry, props, 2)} ${styleAttr(entry, props)} />`, props, level);
+    const fallbackStyle = styleAttrForElement(entry, props);
+    return visibilityGuard(inner || `${indent(level)}<h2 ${classNameAttr(node.name, entry, props, 2)}${fallbackStyle ? ` ${fallbackStyle}` : ''} />`, props, level);
   }
 
   const tag = entry.tag;
@@ -488,6 +440,22 @@ function lowerVocabularyElement(
   return visibilityGuard(body, props, level);
 }
 
+function renderViewRefProps(props: Record<string, IrValue>, itemScope?: string): string {
+  const vmRef = itemScope ?? 'vm';
+  return Object.entries(props).map(([key, value]) => {
+    if (typeof value === 'object' && value !== null && 'kind' in value && value.kind === 'binding') {
+      return `${key}={${bindingExpr(value as IrBinding, vmRef)}}`;
+    }
+    return `${key}={${renderValue(value, 0)}}`;
+  }).join(' ');
+}
+
+function renderViewRefElement(node: IrViewRefNode, level: number, itemScope?: string): string {
+  const props = renderViewRefProps(node.props, itemScope);
+  const propStr = props ? ` ${props}` : '';
+  return `${indent(level)}<${node.name}${propStr} />`;
+}
+
 function renderExtensionProps(props: Record<string, IrValue>, itemScope?: string): string {
   const vmRef = itemScope ?? 'vm';
   return Object.entries(props).map(([key, value]) => {
@@ -521,6 +489,21 @@ function isVocabulary(name: string, map: ReactElementMap, allowlistExtra: string
   return name in map.elements && !allowlistExtra.includes(name);
 }
 
+export function collectViewRefComponents(node: IrNode, names: Set<string>): void {
+  if (node.kind === 'viewRef') {
+    names.add(node.name);
+    return;
+  }
+  if (node.kind === 'component') {
+    for (const child of node.children) collectViewRefComponents(child, names);
+    return;
+  }
+  if (node.kind === 'map') collectViewRefComponents(node.body, names);
+  if (node.kind === 'fragment') {
+    for (const child of node.children) collectViewRefComponents(child, names);
+  }
+}
+
 export function collectExtensionComponents(
   node: IrNode,
   map: ReactElementMap,
@@ -541,12 +524,18 @@ export function collectExtensionComponents(
 export function createNodeRenderer(
   map: ReactElementMap,
   allowlistExtra: string[],
-): NodeRenderer {
+): (node: IrComponentNode, level: number, itemScope?: string) => string {
   const renderNested: NodeRenderer = (node, level, itemScope) => {
+    if (node.kind === 'viewRef') {
+      return renderViewRefElement(node, level, itemScope);
+    }
+    if (node.kind !== 'component') {
+      return '';
+    }
     if (isVocabulary(node.name, map, allowlistExtra)) {
       return lowerVocabularyElement(node, map.elements[node.name]!, level, itemScope, renderNested);
     }
     return renderExtensionElement(node, level, itemScope, renderNested);
   };
-  return renderNested;
+  return (node, level, itemScope) => renderNested(node, level, itemScope);
 }