@vuer-ai/vuer-uikit 0.0.96 → 0.0.98

package/README.md

@@ -64,15 +64,18 @@ export default function MyApp() {
 
 ## CLI Tools
 
-### dial-cli
+### dial-cli - Dial Schema Generator
 
-The vuer-uikit package includes a CLI tool for generating dial metadata from React components with `@dial` annotations.
+The vuer-uikit package includes `dial-cli`, a powerful CLI tool for generating dial metadata from TypeScript/React components with `@dial` annotations.
 
 #### Usage
 
-After installing `@vuer-ai/vuer-uikit`, you can use the `dial-cli` command:
+After installing `@vuer-ai/vuer-uikit`, the `dial-cli` command is available via npx:
 
 ```bash
+# Show version and git hash
+npx dial-cli --version
+
 # Generate metadata for a single component
 npx dial-cli MyComponent.tsx
 
@@ -81,6 +84,18 @@ npx dial-cli -o ./metadata MyComponent.tsx
 
 # Process multiple files
 npx dial-cli Component1.tsx Component2.tsx Component3.tsx
+
+# Get detailed help
+npx dial-cli --help
+```
+
+#### Running from Source (Development)
+
+You can also run the TypeScript source directly without compilation:
+
+```bash
+# Run directly using tsx
+npx tsx node_modules/@vuer-ai/vuer-uikit/src/cli/dial-cli.ts --version
 ```
 
 #### @dial Annotations
@@ -88,25 +103,109 @@ npx dial-cli Component1.tsx Component2.tsx Component3.tsx
 The CLI parses JSDoc comments with `@dial` annotations to generate UI metadata:
 
 ```tsx
-interface Props {
+interface BoxProps {
   /**
-   * Position of the object
-   * @dial-dtype vector
+   * Position in 3D space
+   * @dial transform
+   * @dial-dtype vector3
    * @dial-mins -10,-10,-10
    * @dial-maxs 10,10,10
    * @dial-steps 0.1,0.1,0.1
+   * @dial-icon Move3d
    */
   position: [number, number, number];
   
   /**
    * Visibility toggle
+   * @dial visibility
    * @dial-dtype boolean
+   * @dial-icon Eye
    */
   visible: boolean;
+
+  /**
+   * Rotation in degrees
+   * @dial transform
+   * @dial-dtype euler
+   * @dial-min 0
+   * @dial-max 360
+   * @dial-step 1
+   */
+  rotation: [number, number, number];
 }
 ```
 
-The CLI will generate JSON metadata files that can be used to automatically create UI controls for your components.
+#### Available Annotations
+
+**Grouping & Organization:**
+- `@dial <group>` - Group related properties (transform, visibility, geometry, segments)
+- `@dial-ignore` - Exclude property from schema generation
+
+**Property Configuration:**
+- `@dial-dtype <type>` - Data type (vector3, euler, boolean, int, string, etc.)
+- `@dial-min <number>` - Minimum value for numeric inputs
+- `@dial-max <number>` - Maximum value for numeric inputs
+- `@dial-step <number>` - Step increment for numeric inputs
+- `@dial-default <value>` - Default value (overrides component default)
+- `@dial-options [...]` - Array of preset values
+- `@dial-icon <name>` - Lucide icon name for the control
+
+**Layout & Display:**
+- `@dial-col-<n>` - Display in column layout with n columns
+- `@dial-row-<n>` - Display in row layout with n items per row
+- `@dial-label-<pos>` - Label position (left, right, top, bottom, inline)
+- `@dial-no-wrap` - Prevent line wrapping
+
+**Vector Types:**
+- `@dial-mins <n,n,n>` - Comma-separated min values for vector elements
+- `@dial-maxs <n,n,n>` - Comma-separated max values for vector elements
+- `@dial-steps <n,n,n>` - Comma-separated step values for vector elements
+- `@dial-dtypes <t,t,t>` - Comma-separated data types for vector elements
+- `@dial-placeholders <x,y,z>` - Placeholder text for vector inputs
+- `@dial-tooltips <tip1,tip2,tip3>` - Tooltips for vector elements
+
+#### Output Files
+
+The CLI generates three JSON files for each component:
+
+- `*-raw.json` - Raw output from react-docgen-typescript
+- `*-combined.json` - Enhanced metadata with dial schemas and type definitions
+- `*-schemas.json` - Clean dial schemas ready for UI generation
+
+#### CLI Options
+
+```
+Options:
+  -o, --output <dir>     Output directory (default: ./metadata)
+  -i, --ignore <prop>    Properties to exclude (supports patterns)
+  -v, --version          Show version and git hash
+  -h, --help            Display help
+  --verbose             Detailed output
+  --quiet               Suppress output except errors
+```
+
+#### Example Build Script
+
+Create a script to automate metadata generation:
+
+```bash
+#!/bin/bash
+# generate-dial-metadata.sh
+
+echo "Generating dial metadata..."
+
+# Show version info
+npx dial-cli --version
+
+# Generate metadata for all components
+npx dial-cli \
+    --output ./metadata \
+    src/components/*.tsx
+
+echo "Metadata generation complete!"
+```
+
+For more examples and documentation, visit [uikit.vuer.ai/dial](https://uikit.vuer.ai/dial)
 
 ## Customizing your theme
 

package/cli/dial-cli.js

@@ -2,10 +2,44 @@
 
 // src/cli/dial-cli.ts
 import { existsSync, mkdirSync, readFileSync, writeFileSync } from "fs";
-import { basename, join, resolve } from "path";
+import { basename, dirname, join, resolve } from "path";
 import { parseArgs } from "util";
+import { fileURLToPath } from "url";
+import { execSync } from "child_process";
 import * as docgen from "react-docgen-typescript";
 import * as ts from "typescript";
+function getVersionInfo() {
+  try {
+    const __filename2 = fileURLToPath(import.meta.url);
+    const __dirname2 = dirname(__filename2);
+    const possiblePaths = [
+      resolve(__dirname2, "../package.json"),
+      // Built version: cli/dial-cli.js -> package.json
+      resolve(__dirname2, "../../package.json")
+      // Source version: src/cli/dial-cli.ts -> package.json
+    ];
+    let packageJson = null;
+    for (const path of possiblePaths) {
+      try {
+        if (existsSync(path)) {
+          packageJson = JSON.parse(readFileSync(path, "utf-8"));
+          break;
+        }
+      } catch {
+      }
+    }
+    const version = packageJson?.version || "unknown";
+    let gitHash;
+    try {
+      gitHash = execSync("git rev-parse --short HEAD", { encoding: "utf-8", cwd: dirname(__dirname2) }).trim();
+    } catch {
+      gitHash = void 0;
+    }
+    return { version, gitHash };
+  } catch (error) {
+    return { version: "unknown" };
+  }
+}
 function parseTypeAlias(sourceFile, typeName) {
   let typeDefinition = null;
   function visit(node) {
@@ -530,7 +564,10 @@ async function processFile(filePath, outputDir, options, flags = {}) {
     });
   }
 }
-var HELP_TEXT = `
+function getHelpText() {
+  const { version, gitHash } = getVersionInfo();
+  const versionString = gitHash ? `v${version} (${gitHash})` : `v${version}`;
+  return `
 dial-cli - Generate dial metadata from TypeScript/React components
 
 SYNOPSIS
@@ -658,11 +695,12 @@ SEE ALSO
   GitHub: https://github.com/vuer-ai/vuer-uikit
 
 VERSION
-  dial-cli v1.0.0 (part of @vuer-ai/vuer-uikit)
+  dial-cli ${versionString} (part of @vuer-ai/vuer-uikit)
 
 AUTHORS
   Vuer AI Team <team@vuer.ai>
 `;
+}
 async function main() {
   const { values, positionals } = parseArgs({
     args: process.argv.slice(2),
@@ -696,15 +734,17 @@ async function main() {
     allowPositionals: true
   });
   if (values.version) {
-    console.log("dial-cli v1.0.0 (part of @vuer-ai/vuer-uikit)");
+    const { version, gitHash } = getVersionInfo();
+    const versionString = gitHash ? `v${version} (${gitHash})` : `v${version}`;
+    console.log(`dial-cli ${versionString} (part of @vuer-ai/vuer-uikit)`);
     process.exit(0);
   }
   if (values.help || positionals.length === 0) {
-    console.log(HELP_TEXT);
+    console.log(getHelpText());
     process.exit(0);
   }
   if (positionals.length === 1 && (positionals[0] === "man" || positionals[0] === "help")) {
-    console.log(HELP_TEXT);
+    console.log(getHelpText());
     process.exit(0);
   }
   const outputDir = resolve(process.cwd(), values.output);
@@ -746,7 +786,9 @@ async function main() {
     ignoreList
   };
   if (!flags.quiet) {
-    console.log(`\u{1F680} Dial Documentation Generator`);
+    const { version, gitHash } = getVersionInfo();
+    const versionString = gitHash ? `v${version} (${gitHash})` : `v${version}`;
+    console.log(`\u{1F680} Dial Documentation Generator ${versionString}`);
     console.log(`\u{1F4C2} Output directory: ${outputDir}`);
     if (flags.verbose && ignoreList.length > 0) {
       console.log(`\u{1F6AB} Ignoring properties: ${ignoreList.join(", ")}`);

package/dist/SyncScroll/SyncScroll.cjs

@@ -1,45 +1,45 @@
 'use strict';
 
-var chunkG5JZGNKY_cjs = require('../chunk-G5JZGNKY.cjs');
+var chunkVBBJSIY7_cjs = require('../chunk-VBBJSIY7.cjs');
+require('../chunk-G4FJGNY5.cjs');
 require('../chunk-QN4N4I3Z.cjs');
 require('../chunk-LYZJNEOR.cjs');
 require('../chunk-YZIR6LIY.cjs');
 require('../chunk-RPTRTGC2.cjs');
-require('../chunk-OHIB3TEN.cjs');
 require('../chunk-LBWMTA5T.cjs');
 require('../chunk-Q7E73DVJ.cjs');
 require('../chunk-JR4TVE43.cjs');
 require('../chunk-VXZURKMQ.cjs');
 require('../chunk-6BOWMGFG.cjs');
-require('../chunk-G4FJGNY5.cjs');
+require('../chunk-OHIB3TEN.cjs');
 
 
 
 Object.defineProperty(exports, "SyncDrag", {
   enumerable: true,
-  get: function () { return chunkG5JZGNKY_cjs.SyncDrag; }
+  get: function () { return chunkVBBJSIY7_cjs.SyncDrag; }
 });
 Object.defineProperty(exports, "SyncDragSlave", {
   enumerable: true,
-  get: function () { return chunkG5JZGNKY_cjs.SyncDragSlave; }
+  get: function () { return chunkVBBJSIY7_cjs.SyncDragSlave; }
 });
 Object.defineProperty(exports, "SyncDragSlaveX", {
   enumerable: true,
-  get: function () { return chunkG5JZGNKY_cjs.SyncDragSlaveX; }
+  get: function () { return chunkVBBJSIY7_cjs.SyncDragSlaveX; }
 });
 Object.defineProperty(exports, "SyncDragX", {
   enumerable: true,
-  get: function () { return chunkG5JZGNKY_cjs.SyncDragX; }
+  get: function () { return chunkVBBJSIY7_cjs.SyncDragX; }
 });
 Object.defineProperty(exports, "SyncDragY", {
   enumerable: true,
-  get: function () { return chunkG5JZGNKY_cjs.SyncDragY; }
+  get: function () { return chunkVBBJSIY7_cjs.SyncDragY; }
 });
 Object.defineProperty(exports, "SyncScroll", {
   enumerable: true,
-  get: function () { return chunkG5JZGNKY_cjs.SyncScroll; }
+  get: function () { return chunkVBBJSIY7_cjs.SyncScroll; }
 });
 Object.defineProperty(exports, "SyncScrollSlave", {
   enumerable: true,
-  get: function () { return chunkG5JZGNKY_cjs.SyncScrollSlave; }
+  get: function () { return chunkVBBJSIY7_cjs.SyncScrollSlave; }
 });

package/dist/SyncScroll/SyncScroll.mjs

@@ -1,12 +1,12 @@
-export { SyncDrag, SyncDragSlave, SyncDragSlaveX, SyncDragX, SyncDragY, SyncScroll, SyncScrollSlave } from '../chunk-PDOFOJ4P.mjs';
+export { SyncDrag, SyncDragSlave, SyncDragSlaveX, SyncDragX, SyncDragY, SyncScroll, SyncScrollSlave } from '../chunk-BEJIZ56L.mjs';
+import '../chunk-SAGQV2YZ.mjs';
 import '../chunk-F7ZHPSLA.mjs';
 import '../chunk-OEIF3JCH.mjs';
 import '../chunk-VA4LUFKD.mjs';
 import '../chunk-4F2GSF2T.mjs';
-import '../chunk-HMN4IKTG.mjs';
 import '../chunk-IDUVYPN7.mjs';
 import '../chunk-3QT5VABC.mjs';
 import '../chunk-XHJDRQD7.mjs';
 import '../chunk-LQOPO4KU.mjs';
 import '../chunk-IZARTVYN.mjs';
-import '../chunk-SAGQV2YZ.mjs';
+import '../chunk-HMN4IKTG.mjs';

package/dist/SyncScroll/index.cjs

@@ -1,48 +1,48 @@
 'use strict';
 
 require('../chunk-JMCH2AFN.cjs');
-var chunkG5JZGNKY_cjs = require('../chunk-G5JZGNKY.cjs');
+var chunkVBBJSIY7_cjs = require('../chunk-VBBJSIY7.cjs');
+var chunkG4FJGNY5_cjs = require('../chunk-G4FJGNY5.cjs');
 require('../chunk-QN4N4I3Z.cjs');
 require('../chunk-LYZJNEOR.cjs');
 require('../chunk-YZIR6LIY.cjs');
 require('../chunk-RPTRTGC2.cjs');
-require('../chunk-OHIB3TEN.cjs');
 require('../chunk-LBWMTA5T.cjs');
 require('../chunk-Q7E73DVJ.cjs');
 require('../chunk-JR4TVE43.cjs');
 require('../chunk-VXZURKMQ.cjs');
 require('../chunk-6BOWMGFG.cjs');
-var chunkG4FJGNY5_cjs = require('../chunk-G4FJGNY5.cjs');
+require('../chunk-OHIB3TEN.cjs');
 
 
 
 Object.defineProperty(exports, "SyncDrag", {
   enumerable: true,
-  get: function () { return chunkG5JZGNKY_cjs.SyncDrag; }
+  get: function () { return chunkVBBJSIY7_cjs.SyncDrag; }
 });
 Object.defineProperty(exports, "SyncDragSlave", {
   enumerable: true,
-  get: function () { return chunkG5JZGNKY_cjs.SyncDragSlave; }
+  get: function () { return chunkVBBJSIY7_cjs.SyncDragSlave; }
 });
 Object.defineProperty(exports, "SyncDragSlaveX", {
   enumerable: true,
-  get: function () { return chunkG5JZGNKY_cjs.SyncDragSlaveX; }
+  get: function () { return chunkVBBJSIY7_cjs.SyncDragSlaveX; }
 });
 Object.defineProperty(exports, "SyncDragX", {
   enumerable: true,
-  get: function () { return chunkG5JZGNKY_cjs.SyncDragX; }
+  get: function () { return chunkVBBJSIY7_cjs.SyncDragX; }
 });
 Object.defineProperty(exports, "SyncDragY", {
   enumerable: true,
-  get: function () { return chunkG5JZGNKY_cjs.SyncDragY; }
+  get: function () { return chunkVBBJSIY7_cjs.SyncDragY; }
 });
 Object.defineProperty(exports, "SyncScroll", {
   enumerable: true,
-  get: function () { return chunkG5JZGNKY_cjs.SyncScroll; }
+  get: function () { return chunkVBBJSIY7_cjs.SyncScroll; }
 });
 Object.defineProperty(exports, "SyncScrollSlave", {
   enumerable: true,
-  get: function () { return chunkG5JZGNKY_cjs.SyncScrollSlave; }
+  get: function () { return chunkVBBJSIY7_cjs.SyncScrollSlave; }
 });
 Object.defineProperty(exports, "SyncScrollProvider", {
   enumerable: true,

package/dist/SyncScroll/index.mjs

@@ -1,13 +1,13 @@
 import '../chunk-BNDRHLLZ.mjs';
-export { SyncDrag, SyncDragSlave, SyncDragSlaveX, SyncDragX, SyncDragY, SyncScroll, SyncScrollSlave } from '../chunk-PDOFOJ4P.mjs';
+export { SyncDrag, SyncDragSlave, SyncDragSlaveX, SyncDragX, SyncDragY, SyncScroll, SyncScrollSlave } from '../chunk-BEJIZ56L.mjs';
+export { SyncScrollProvider, useScrollSlave, useSyncDrag, useSyncScroll } from '../chunk-SAGQV2YZ.mjs';
 import '../chunk-F7ZHPSLA.mjs';
 import '../chunk-OEIF3JCH.mjs';
 import '../chunk-VA4LUFKD.mjs';
 import '../chunk-4F2GSF2T.mjs';
-import '../chunk-HMN4IKTG.mjs';
 import '../chunk-IDUVYPN7.mjs';
 import '../chunk-3QT5VABC.mjs';
 import '../chunk-XHJDRQD7.mjs';
 import '../chunk-LQOPO4KU.mjs';
 import '../chunk-IZARTVYN.mjs';
-export { SyncScrollProvider, useScrollSlave, useSyncDrag, useSyncScroll } from '../chunk-SAGQV2YZ.mjs';
+import '../chunk-HMN4IKTG.mjs';

package/dist/chunk-3HEZVWRW.mjs

@@ -0,0 +1,62 @@
+import { createContext, useContext, useState, useCallback, useMemo } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/dial/DialProvider.tsx
+var DialSchemaContext = createContext(void 0);
+var useDialSchema = () => {
+  const context = useContext(DialSchemaContext);
+  if (!context) {
+    throw new Error("useDialSchema must be used within a DialSchemaProvider");
+  }
+  return context;
+};
+var DialProvider = ({
+  children,
+  schemas,
+  initialValues = {},
+  values: controlledValues,
+  onValueChange
+}) => {
+  const isControlled = controlledValues !== void 0;
+  const [internalValues, setInternalValues] = useState(() => {
+    const defaultValues = {};
+    schemas.forEach((schema) => {
+      defaultValues[schema.name] = initialValues[schema.name] ?? schema.value;
+    });
+    return defaultValues;
+  });
+  const values = isControlled ? controlledValues : internalValues;
+  const getValue = useCallback(
+    (name) => {
+      return values[name];
+    },
+    [values]
+  );
+  const setValue = useCallback(
+    (name, value) => {
+      if (isControlled) {
+        onValueChange?.(name, value);
+      } else {
+        setInternalValues((prev) => ({
+          ...prev,
+          [name]: value
+        }));
+        onValueChange?.(name, value);
+      }
+    },
+    [isControlled, onValueChange]
+  );
+  const contextValue = useMemo(
+    () => ({
+      values,
+      schemas,
+      getValue,
+      setValue,
+      onValueChange
+    }),
+    [values, schemas, getValue, setValue, onValueChange]
+  );
+  return /* @__PURE__ */ jsx(DialSchemaContext.Provider, { value: contextValue, children });
+};
+
+export { DialProvider, useDialSchema };