@volverjs/ui-vue 0.0.13-beta.7 → 0.0.13-beta.9

package/README.md

@@ -192,7 +192,7 @@ export type Alert = {
 }
 ```
 
-##### Usage
+#### Usage
 
 ```typescript
 import { useAlert } from '@volverjs/ui-vue/composables'
@@ -224,7 +224,7 @@ function showSuccess() {
 
 Used to create blurred preview image ([blurhash](https://blurha.sh/))
 
-##### Example
+#### Example
 
 ```typescript
 import { useBlurhash } from '@volverjs/ui-vue/composables'
@@ -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(e,i){typeof exports=="object"&&typeof module<"u"?i(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"],i):(e=typeof globalThis<"u"?globalThis:e||self,i(e["generate-icons"]={},e.fileSystem,e.path,e.yargs,e.helpers,e.tools,e.utils,e.chokidar))})(this,(function(e,i,l,m,C,c,I,q){"use strict";function w(o,s="iconify",r={}){return i.readdirSync(o).forEach(n=>{i.statSync(`${o}/${n}`).isDirectory()?r=w(`${o}/${n}`,n,r):n.includes(".svg")&&(r[s]?r[s].push(l.join(o,"/",n)):r[s]=[l.join(o,"/",n)])}),r}async function O(o,s,r,a){const n=c.blankIconSet(o);for(const y of s)try{const k=await i.promises.readFile(y,{encoding:"utf-8"}),h=new c.SVG(k);await c.cleanupSVG(h),a?.keepColors||await c.parseColors(h,{defaultColor:"currentColor",callback:(x,S,$)=>!$||c.isEmptyColor($)||S.includes("var(")?S:"currentColor"}),await c.runSVGO(h);const j=y.replace(/^.*[\\/]/,"").split(".")[0].replace(/ /g,"-").replace(/[^a-z0-9-]/gi,"");n.fromSVG(j,h)}catch(k){console.error(k)}const g=n.export();try{I.validateIconSet(g)}catch(y){throw new Error(`Icon set is not valid: ${y?.message}`)}const v=`${r}/${g.prefix}.json`;i.mkdirSync(l.dirname(v),{recursive:!0}),i.writeFileSync(v,JSON.stringify(g))}function f(o,s,r){const a=w(o,r?.prefix);Object.keys(a).length?Object.keys(a).forEach(n=>{O(n,a[n],s,r),console.info(`Icons generated in: ${s}/${n}.json
-`)}):console.error(`There are no files in ${o}`)}const u=m(C.hideBin(process.argv)).argv,t=u.srcPath,d=u.destPath||t;(!t||!d)&&(console.error("Please specify the srcPath and destPath with --srcPath and --destPath"),process.exit());const p={prefix:u.prefix,keepColors:u.keepColors};u.watch?(f(t,d,p),q.watch(t,{ignoreInitial:!0}).on("add",()=>{f(t,d,p)}).on("change",()=>{f(t,d,p)})):f(t,d,p),e.createIconifyJsonFiles=f,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}));
+(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});

package/bin/icons.js

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