test(json-render-ui): storybook stories for the unsupported-component placeholder

Add stories covering the new placeholder path — an unknown component type,
and a subset registry missing a base component — and document that the SPA
hides its nav for a single view.

Author: antfubot

docs/guide/json-render.md

@@ -115,11 +115,12 @@ export default createJsonRenderDevframe({
 ```
 
 The SPA discovers views from the **view index** (`JSON_RENDER_INDEX_KEY`), a
-shared state the node factory maintains as views are created and disposed. It
-renders a single view full-bleed, or presents multiple views under the shared
-segmented switcher, labelling each with its `title` (defaulting to the view id).
-The `@devframes/json-render-ui/spa` entry is node-safe — it exposes only the
-asset path and the wiring helper, pulling in no Vue.
+shared state the node factory maintains as views are created and disposed. A
+single view renders full-bleed on its own; once more than one view is
+registered, a top bar appears with the shared segmented switcher, labelling each
+view with its `title` (defaulting to the view id). The
+`@devframes/json-render-ui/spa` entry is node-safe — it exposes only the asset
+path and the wiring helper, pulling in no Vue.
 
 ### Custom frontend
 

packages/json-render-ui/src/JsonRender.stories.ts

@@ -1,6 +1,7 @@
 import type { Spec } from '@devframes/json-render'
 import type { Meta, StoryObj } from '@storybook/vue3-vite'
 import { h } from 'vue'
+import { baseRegistry } from './registry'
 import { JsonRenderView } from './renderer'
 
 // A no-op RPC — stories don't dispatch real actions.
@@ -74,3 +75,31 @@ export const InvalidElement: StoryObj = story({
     bad: { type: 'Badge', props: { variant: 'purple' }, children: [] },
   },
 })
+
+// An element whose `type` is absent from the registry renders behind the
+// unsupported placeholder (type + prop-keys gist), while its siblings render.
+export const UnsupportedComponent: StoryObj = story({
+  root: 'root',
+  elements: {
+    root: { type: 'Stack', props: { gap: 8 }, children: ['ok', 'chart', 'more'] },
+    ok: { type: 'Text', props: { text: 'This view uses a component the frontend does not ship.' }, children: [] },
+    chart: { type: 'Fancy3DChart', props: { data: [1, 2, 3], title: 'Revenue', animate: true }, children: [] },
+    more: { type: 'Badge', props: { text: 'still renders', variant: 'success' }, children: [] },
+  },
+})
+
+// A frontend that supports only a subset of the catalog: rendering with a
+// registry missing `DataTable` placeholders that element, everything else
+// renders normally.
+const { DataTable: _omitted, ...subsetRegistry } = baseRegistry as Record<string, unknown>
+export const SubsetRegistry: StoryObj = story(
+  {
+    root: 'root',
+    elements: {
+      root: { type: 'Stack', props: { gap: 8 }, children: ['title', 'table'] },
+      title: { type: 'Text', props: { text: 'Registry without DataTable', variant: 'heading' }, children: [] },
+      table: { type: 'DataTable', props: { rows: [{ id: 1, name: 'a' }], height: 120 }, children: [] },
+    },
+  },
+  { registry: subsetRegistry },
+)