@volverjs/ui-vue 0.0.13-beta.8 → 0.0.13

package/README.md

@@ -328,12 +328,91 @@ The following features are planned for the next releases:
 - [x] (v0.0.6) Alerts, notifications and toasts with `VvAlert` and `VvAlertGroup` component;
 - [x] (v0.0.10) Multiple uploads with `VvInputFile`;
 - [x] (v0.0.10) `useBlurhash` composable;
+- [x] (v0.0.13) Generative UI with [json-render](https://json-render.dev) catalog & registry;
 - [ ] Image crop and file previews;
 - [ ] Loaders with `VvLoader` and `VvSkeleton`;
 - [ ] `VvTable` component with sort, filters, pagination and cell editing;
 - [ ] Carousel and galleries with `VvCarousel` component;
 - [ ] Calendar and date picker with `VvCalendar` component.
 
+## Generative UI (json-render)
+
+`@volverjs/ui-vue` ships with a built-in [json-render](https://json-render.dev) catalog and registry, enabling LLMs to generate UIs using Volver components.
+
+### Quick start
+
+```typescript
+import { catalog, registry } from '@volverjs/ui-vue/json-render'
+
+// Generate a system prompt for your AI model
+const systemPrompt = catalog.prompt()
+```
+
+The `catalog` declares **26 components** (layout, data display, actions, navigation, forms) with Zod-validated props and AI-friendly descriptions. The `registry` maps each catalog type to the real Vue component.
+
+### Rendering AI-generated specs
+
+```vue
+<script setup lang="ts">
+import {
+    Renderer,
+    StateProvider,
+    VisibilityProvider,
+} from '@json-render/vue'
+import { registry } from '@volverjs/ui-vue/json-render'
+
+const spec = ref(null)
+</script>
+
+<template>
+    <StateProvider :initial-state="{}">
+        <VisibilityProvider>
+            <Renderer :spec="spec" :registry="registry" />
+        </VisibilityProvider>
+    </StateProvider>
+</template>
+```
+
+### Custom catalog (subset of components)
+
+You can build a custom catalog with only the components you need:
+
+```typescript
+import { defineCatalog } from '@json-render/core'
+import { defineRegistry, schema } from '@json-render/vue'
+import {
+    volverComponentDefinitions,
+    volverComponents,
+} from '@volverjs/ui-vue/json-render'
+
+// Pick only the components you need
+const myCatalog = defineCatalog(schema, {
+    components: {
+        Button: volverComponentDefinitions.Button,
+        Card: volverComponentDefinitions.Card,
+        InputText: volverComponentDefinitions.InputText,
+    },
+    actions: {},
+})
+
+// Create a matching registry
+const { registry } = defineRegistry(myCatalog, {
+    components: {
+        Button: volverComponents.Button,
+        Card: volverComponents.Card,
+        InputText: volverComponents.InputText,
+    },
+})
+```
+
+### Peer dependencies
+
+To use the json-render integration, install the required peer dependencies:
+
+```bash
+pnpm add @json-render/core @json-render/vue zod
+```
+
 ## Documentation
 
 To learn more about `@volverjs/ui-vue`, check [its documentation](https://volverjs.github.io/ui-vue).

package/bin/icons.cjs

@@ -1,2 +1,2 @@
-(function(a,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("node:fs"),require("node:path"),require("yargs"),require("yargs/helpers"),require("@iconify/tools"),require("@iconify/utils"),require("chokidar")):typeof define=="function"&&define.amd?define(["exports","node:fs","node:path","yargs","yargs/helpers","@iconify/tools","@iconify/utils","chokidar"],o):(a=typeof globalThis<"u"?globalThis:a||self,o(a["generate-icons"]={},a.node_fs,a.node_path,a.yargs,a.yargs_helpers,a._iconify_tools,a._iconify_utils,a.chokidar))})(this,function(a,o,p,w,I,f,b,P){Object.defineProperty(a,Symbol.toStringTag,{value:"Module"});var q=Object.create,S=Object.defineProperty,m=Object.getOwnPropertyDescriptor,_=Object.getOwnPropertyNames,E=Object.getPrototypeOf,x=Object.prototype.hasOwnProperty,G=(e,r,t,n)=>{if(r&&typeof r=="object"||typeof r=="function")for(var s=_(r),l=0,O=s.length,i;l<O;l++)i=s[l],!x.call(e,i)&&i!==t&&S(e,i,{get:(c=>r[c]).bind(null,i),enumerable:!(n=m(r,i))||n.enumerable});return e},v=(e,r,t)=>(t=e!=null?q(E(e)):{},G(r||!e||!e.__esModule?S(t,"default",{value:e,enumerable:!0}):t,e));o=v(o),p=v(p),w=v(w),P=v(P);function j(e,r="iconify",t={}){return o.default.readdirSync(e).forEach(n=>{o.default.statSync(`${e}/${n}`).isDirectory()?t=j(`${e}/${n}`,n,t):n.includes(".svg")&&(t[r]?t[r].push(p.default.join(e,"/",n)):t[r]=[p.default.join(e,"/",n)])}),t}async function J(e,r,t,n){const s=(0,f.blankIconSet)(e);for(const i of r)try{const c=new f.SVG(await o.default.promises.readFile(i,{encoding:"utf-8"}));await(0,f.cleanupSVG)(c),n?.keepColors||await(0,f.parseColors)(c,{defaultColor:"currentColor",callback:(T,$,C)=>!C||(0,f.isEmptyColor)(C)||$.includes("var(")?$:"currentColor"}),await(0,f.runSVGO)(c);const N=i.replace(/^.*[\\/]/,"").split(".")[0].replace(/ /g,"-").replace(/[^a-z0-9-]/gi,"");s.fromSVG(N,c)}catch(c){console.error(c)}const l=s.export();try{(0,b.validateIconSet)(l)}catch(i){throw new Error(`Icon set is not valid: ${i?.message}`)}const O=`${t}/${l.prefix}.json`;o.default.mkdirSync(p.default.dirname(O),{recursive:!0}),o.default.writeFileSync(O,JSON.stringify(l))}function d(e,r,t){const n=j(e,t?.prefix);Object.keys(n).length?Object.keys(n).forEach(s=>{J(s,n[s],r,t),console.info(`Icons generated in: ${r}/${s}.json
-`)}):console.error(`There are no files in ${e}`)}var y=(0,w.default)((0,I.hideBin)(process.argv)).argv,u=y.srcPath,h=y.destPath||u;(!u||!h)&&(console.error("Please specify the srcPath and destPath with --srcPath and --destPath"),process.exit());var g={prefix:y.prefix,keepColors:y.keepColors};y.watch?(d(u,h,g),P.default.watch(u,{ignoreInitial:!0}).on("add",()=>{d(u,h,g)}).on("change",()=>{d(u,h,g)})):d(u,h,g),a.createIconifyJsonFiles=d});
+(function(i,o){typeof exports=="object"&&typeof module<"u"?o(exports,require("node:fs"),require("node:path"),require("yargs"),require("yargs/helpers"),require("@iconify/tools"),require("@iconify/utils"),require("chokidar")):typeof define=="function"&&define.amd?define(["exports","node:fs","node:path","yargs","yargs/helpers","@iconify/tools","@iconify/utils","chokidar"],o):(i=typeof globalThis<"u"?globalThis:i||self,o(i["generate-icons"]={},i.node_fs,i.node_path,i.yargs,i.yargs_helpers,i._iconify_tools,i._iconify_utils,i.chokidar))})(this,function(i,o,p,w,m,f,C,j){Object.defineProperty(i,Symbol.toStringTag,{value:"Module"});var I=Object.create,P=Object.defineProperty,q=Object.getOwnPropertyDescriptor,E=Object.getOwnPropertyNames,_=Object.getPrototypeOf,k=Object.prototype.hasOwnProperty,x=(e,r,t,s)=>{if(r&&typeof r=="object"||typeof r=="function")for(var c=E(r),a=0,g=c.length,n;a<g;a++)n=c[a],!k.call(e,n)&&n!==t&&P(e,n,{get:(u=>r[u]).bind(null,n),enumerable:!(s=q(r,n))||s.enumerable});return e},v=(e,r,t)=>(t=e!=null?I(_(e)):{},x(r||!e||!e.__esModule?P(t,"default",{value:e,enumerable:!0}):t,e));o=v(o,1),p=v(p,1),w=v(w,1),j=v(j,1);function S(e,r="iconify",t={}){return o.default.readdirSync(e).sort().forEach(s=>{o.default.statSync(`${e}/${s}`).isDirectory()?t=S(`${e}/${s}`,s,t):s.includes(".svg")&&(t[r]?t[r].push(p.default.join(e,"/",s)):t[r]=[p.default.join(e,"/",s)])}),t}async function G(e,r,t,s){const c=(0,f.blankIconSet)(e);for(const n of r)try{const u=new f.SVG(await o.default.promises.readFile(n,{encoding:"utf-8"}));await(0,f.cleanupSVG)(u),s?.keepColors||await(0,f.parseColors)(u,{defaultColor:"currentColor",callback:(M,b,$)=>!$||(0,f.isEmptyColor)($)||b.includes("var(")?b:"currentColor"}),await(0,f.runSVGO)(u);const J=n.replace(/^.*[\\/]/,"").split(".")[0].replace(/ /g,"-").replace(/[^a-z0-9-]/gi,"");c.fromSVG(J,u)}catch(u){console.error(u)}const a=c.export();delete a.lastModified,a.icons=Object.fromEntries(Object.keys(a.icons).sort().map(n=>[n,a.icons[n]])),a.aliases&&(a.aliases=Object.fromEntries(Object.keys(a.aliases).sort().map(n=>[n,a.aliases[n]])));try{(0,C.validateIconSet)(a)}catch(n){throw new Error(`Icon set is not valid: ${n?.message}`)}const g=`${t}/${a.prefix}.json`;o.default.mkdirSync(p.default.dirname(g),{recursive:!0}),o.default.writeFileSync(g,JSON.stringify(a))}function d(e,r,t){const s=S(e,t?.prefix);Object.keys(s).length?Object.keys(s).forEach(c=>{G(c,s[c],r,t),console.info(`Icons generated in: ${r}/${c}.json
+`)}):console.error(`There are no files in ${e}`)}var y=(0,w.default)((0,m.hideBin)(process.argv)).argv,l=y.srcPath,h=y.destPath||l;(!l||!h)&&(console.error("Please specify the srcPath and destPath with --srcPath and --destPath"),process.exit());var O={prefix:y.prefix,keepColors:y.keepColors};y.watch?(d(l,h,O),j.default.watch(l,{ignoreInitial:!0}).on("add",()=>{d(l,h,O)}).on("change",()=>{d(l,h,O)})):d(l,h,O),i.createIconifyJsonFiles=d});

package/bin/icons.js

@@ -1,56 +1,57 @@
 #!/usr/bin/env node
-import c from "node:fs";
-import h from "node:path";
-import w from "yargs";
-import { hideBin as $ } from "yargs/helpers";
-import { SVG as k, blankIconSet as C, cleanupSVG as I, isEmptyColor as E, parseColors as G, runSVGO as O } from "@iconify/tools";
-import { validateIconSet as V } from "@iconify/utils";
-import x from "chokidar";
-function v(o, n = "iconify", e = {}) {
-  return c.readdirSync(o).forEach((r) => {
-    c.statSync(`${o}/${r}`).isDirectory() ? e = v(`${o}/${r}`, r, e) : r.includes(".svg") && (e[n] ? e[n].push(h.join(o, "/", r)) : e[n] = [h.join(o, "/", r)]);
-  }), e;
+import f from "node:fs";
+import y from "node:path";
+import k from "yargs";
+import { hideBin as w } from "yargs/helpers";
+import { SVG as $, blankIconSet as C, cleanupSVG as O, isEmptyColor as I, parseColors as j, runSVGO as E } from "@iconify/tools";
+import { validateIconSet as b } from "@iconify/utils";
+import G from "chokidar";
+function v(s, n = "iconify", r = {}) {
+  return f.readdirSync(s).sort().forEach((e) => {
+    f.statSync(`${s}/${e}`).isDirectory() ? r = v(`${s}/${e}`, e, r) : e.includes(".svg") && (r[n] ? r[n].push(y.join(s, "/", e)) : r[n] = [y.join(s, "/", e)]);
+  }), r;
 }
-async function J(o, n, e, r) {
-  const a = C(o);
-  for (const f of n) try {
-    const s = new k(await c.promises.readFile(f, { encoding: "utf-8" }));
-    await I(s), r?.keepColors || await G(s, {
+async function V(s, n, r, e) {
+  const i = C(s);
+  for (const t of n) try {
+    const c = new $(await f.promises.readFile(t, { encoding: "utf-8" }));
+    await O(c), e?.keepColors || await j(c, {
       defaultColor: "currentColor",
-      callback: (P, y, g) => !g || E(g) || y.includes("var(") ? y : "currentColor"
-    }), await O(s);
-    const S = f.replace(/^.*[\\/]/, "").split(".")[0].replace(/ /g, "-").replace(/[^a-z0-9-]/gi, "");
-    a.fromSVG(S, s);
-  } catch (s) {
-    console.error(s);
+      callback: (x, u, g) => !g || I(g) || u.includes("var(") ? u : "currentColor"
+    }), await E(c);
+    const S = t.replace(/^.*[\\/]/, "").split(".")[0].replace(/ /g, "-").replace(/[^a-z0-9-]/gi, "");
+    i.fromSVG(S, c);
+  } catch (c) {
+    console.error(c);
   }
-  const d = a.export();
+  const o = i.export();
+  delete o.lastModified, o.icons = Object.fromEntries(Object.keys(o.icons).sort().map((t) => [t, o.icons[t]])), o.aliases && (o.aliases = Object.fromEntries(Object.keys(o.aliases).sort().map((t) => [t, o.aliases[t]])));
   try {
-    V(d);
-  } catch (f) {
-    throw new Error(`Icon set is not valid: ${f?.message}`);
+    b(o);
+  } catch (t) {
+    throw new Error(`Icon set is not valid: ${t?.message}`);
   }
-  const u = `${e}/${d.prefix}.json`;
-  c.mkdirSync(h.dirname(u), { recursive: !0 }), c.writeFileSync(u, JSON.stringify(d));
+  const h = `${r}/${o.prefix}.json`;
+  f.mkdirSync(y.dirname(h), { recursive: !0 }), f.writeFileSync(h, JSON.stringify(o));
 }
-function p(o, n, e) {
-  const r = v(o, e?.prefix);
-  Object.keys(r).length ? Object.keys(r).forEach((a) => {
-    J(a, r[a], n, e), console.info(`Icons generated in: ${n}/${a}.json
+function m(s, n, r) {
+  const e = v(s, r?.prefix);
+  Object.keys(e).length ? Object.keys(e).forEach((i) => {
+    V(i, e[i], n, r), console.info(`Icons generated in: ${n}/${i}.json
 `);
-  }) : console.error(`There are no files in ${o}`);
+  }) : console.error(`There are no files in ${s}`);
 }
-var l = w($(process.argv)).argv, t = l.srcPath, i = l.destPath || t;
-(!t || !i) && (console.error("Please specify the srcPath and destPath with --srcPath and --destPath"), process.exit());
-var m = {
-  prefix: l.prefix,
-  keepColors: l.keepColors
+var p = k(w(process.argv)).argv, a = p.srcPath, l = p.destPath || a;
+(!a || !l) && (console.error("Please specify the srcPath and destPath with --srcPath and --destPath"), process.exit());
+var d = {
+  prefix: p.prefix,
+  keepColors: p.keepColors
 };
-l.watch ? (p(t, i, m), x.watch(t, { ignoreInitial: !0 }).on("add", () => {
-  p(t, i, m);
+p.watch ? (m(a, l, d), G.watch(a, { ignoreInitial: !0 }).on("add", () => {
+  m(a, l, d);
 }).on("change", () => {
-  p(t, i, m);
-})) : p(t, i, m);
+  m(a, l, d);
+})) : m(a, l, d);
 export {
-  p as createIconifyJsonFiles
+  m as createIconifyJsonFiles
 };