@vuer-ai/vuer-uikit 0.0.96 → 0.0.98

package/src/dial/wrapped-inputs/DialInputs.tsx

@@ -0,0 +1,401 @@
+import React from "react";
+
+import {
+  CmInput,
+  DegInput,
+  EulerDegInput,
+  EulerInput,
+  FormLayout,
+  InchInput,
+  IntInput,
+  Label,
+  QuaternionInput,
+  RadInput,
+  TimeInput,
+  Vec3Input,
+  VectorInput,
+} from "../../index";
+import { LabelPositionT, useDialSchema } from "../DialProvider";
+
+// Base props for all dial-wrapped inputs
+interface DialWrapperProps {
+  name: string;
+  label?: string;
+  size?: "sm" | "md" | "lg";
+  step?: number;
+  labelPosition?: LabelPositionT;
+}
+
+// Helper component for wrapping inputs with labels
+const DialInputWrapper: React.FC<{
+  label?: string;
+  children: React.ReactElement;
+}> = ({ label, children }) => {
+  if (!label) {
+    return <>{children}</>;
+  }
+
+  // Always use horizontal layout (label on left)
+  return (
+    <FormLayout orientation="label-top">
+      <Label size="sm">{label}</Label>
+      {children}
+    </FormLayout>
+  );
+};
+
+// Dial-wrapped Vec3Input
+export const DialVec3Input: React.FC<DialWrapperProps> = ({
+  name,
+  label,
+  size = "sm",
+  step,
+  labelPosition,
+}) => {
+  const { getValue, setValue } = useDialSchema();
+  const value = (getValue(name) ?? [0, 0, 0]) as [number, number, number];
+
+  if (labelPosition === "inline") {
+    return (
+      <Vec3Input
+        value={value}
+        onValuesChange={(val) => setValue(name, val)}
+        size={size}
+        step={step}
+        prefix={label ? [label, "", ""] : undefined}
+      />
+    );
+  } else {
+    return (
+      <DialInputWrapper label={label}>
+        <Vec3Input
+          value={value}
+          onValuesChange={(val) => setValue(name, val)}
+          size={size}
+          step={step}
+        />
+      </DialInputWrapper>
+    );
+  }
+};
+
+// Dial-wrapped EulerInput (radians)
+export const DialEulerInput: React.FC<DialWrapperProps> = ({
+  name,
+  label,
+  size = "sm",
+  step,
+  labelPosition,
+}) => {
+  const { getValue, setValue } = useDialSchema();
+  const value = (getValue(name) ?? [0, 0, 0]) as [number, number, number];
+
+  if (labelPosition === "inline") {
+    return (
+      <EulerInput
+        value={value}
+        onValuesChange={(val) => setValue(name, val)}
+        size={size}
+        step={step}
+        prefix={label ? [label, "", ""] : undefined}
+      />
+    );
+  } else {
+    return (
+      <DialInputWrapper label={label}>
+        <EulerInput
+          value={value}
+          onValuesChange={(val) => setValue(name, val)}
+          size={size}
+          step={step}
+        />
+      </DialInputWrapper>
+    );
+  }
+};
+
+// Dial-wrapped EulerDegInput (degrees)
+export const DialEulerDegInput: React.FC<DialWrapperProps> = ({
+  name,
+  label,
+  size = "sm",
+  step,
+  labelPosition,
+}) => {
+  const { getValue, setValue } = useDialSchema();
+  const value = (getValue(name) ?? [0, 0, 0]) as [number, number, number];
+
+  if (labelPosition === "inline") {
+    return (
+      <EulerDegInput
+        value={value}
+        onValuesChange={(val) => setValue(name, val)}
+        size={size}
+        step={step}
+        prefix={label ? [label, "", ""] : undefined}
+      />
+    );
+  } else {
+    return (
+      <DialInputWrapper label={label}>
+        <EulerDegInput
+          value={value}
+          onValuesChange={(val) => setValue(name, val)}
+          size={size}
+          step={step}
+        />
+      </DialInputWrapper>
+    );
+  }
+};
+
+// Dial-wrapped QuaternionInput
+export const DialQuaternionInput: React.FC<DialWrapperProps> = ({
+  name,
+  label,
+  size = "sm",
+  step,
+  labelPosition,
+}) => {
+  const { getValue, setValue } = useDialSchema();
+  const value = (getValue(name) ?? [1, 0, 0, 0]) as [number, number, number, number];
+
+  if (labelPosition === "inline") {
+    return (
+      <QuaternionInput
+        value={value}
+        onValuesChange={(val) => setValue(name, val)}
+        size={size}
+        step={step}
+        prefix={label ? [label, "", "", ""] : undefined}
+      />
+    );
+  } else {
+    return (
+      <DialInputWrapper label={label}>
+        <QuaternionInput
+          value={value}
+          onValuesChange={(val) => setValue(name, val)}
+          size={size}
+          step={step}
+        />
+      </DialInputWrapper>
+    );
+  }
+};
+
+// Dial-wrapped VectorInput (generic N-dimensional)
+export const DialVectorInput: React.FC<DialWrapperProps & { dimensions?: number }> = ({
+  name,
+  label,
+  size = "sm",
+  step,
+  dimensions = 3,
+  labelPosition,
+}) => {
+  const { getValue, setValue } = useDialSchema();
+  const value = (getValue(name) ?? new Array(dimensions).fill(0)) as number[];
+
+  if (labelPosition === "inline") {
+    return (
+      <VectorInput
+        value={value}
+        onValuesChange={(val) => setValue(name, val)}
+        size={size}
+        step={step}
+        prefix={label ? [label, ...new Array(value.length - 1).fill("")] : undefined}
+      />
+    );
+  } else {
+    return (
+      <DialInputWrapper label={label}>
+        <VectorInput
+          value={value}
+          onValuesChange={(val) => setValue(name, val)}
+          size={size}
+          step={step}
+        />
+      </DialInputWrapper>
+    );
+  }
+};
+
+// Dial-wrapped IntInput
+export const DialIntInput: React.FC<DialWrapperProps> = ({
+  name,
+  label,
+  size = "sm",
+  step = 1,
+  labelPosition,
+}) => {
+  const { getValue, setValue } = useDialSchema();
+  const value = (getValue(name) ?? 0) as number;
+
+  if (labelPosition === "inline") {
+    return (
+      <IntInput
+        value={value}
+        prefix={label ? [label] : undefined}
+        onChange={(val) => setValue(name, val)}
+        size={size}
+        step={step}
+      />
+    );
+  } else {
+    return (
+      <DialInputWrapper label={label}>
+        <IntInput value={value} onChange={(val) => setValue(name, val)} size={size} step={step} />
+      </DialInputWrapper>
+    );
+  }
+};
+
+// Dial-wrapped DegInput
+export const DialDegInput: React.FC<DialWrapperProps> = ({
+  name,
+  label,
+  size = "sm",
+  step,
+  labelPosition,
+}) => {
+  const { getValue, setValue } = useDialSchema();
+  const value = (getValue(name) ?? 0) as number;
+
+  if (labelPosition === "inline") {
+    return (
+      <DegInput
+        value={value}
+        onChange={(val) => setValue(name, val)}
+        size={size}
+        step={step}
+        prefix={label ? [label] : undefined}
+      />
+    );
+  } else {
+    return (
+      <DialInputWrapper label={label}>
+        <DegInput value={value} onChange={(val) => setValue(name, val)} size={size} step={step} />
+      </DialInputWrapper>
+    );
+  }
+};
+
+// Dial-wrapped RadInput
+export const DialRadInput: React.FC<DialWrapperProps> = ({
+  name,
+  label,
+  size = "sm",
+  step,
+  labelPosition,
+}) => {
+  const { getValue, setValue } = useDialSchema();
+  const value = (getValue(name) ?? 0) as number;
+
+  if (labelPosition === "inline") {
+    return (
+      <RadInput
+        value={value}
+        onChange={(val) => setValue(name, val)}
+        size={size}
+        step={step}
+        prefix={label ? [label] : undefined}
+      />
+    );
+  } else {
+    return (
+      <DialInputWrapper label={label}>
+        <RadInput value={value} onChange={(val) => setValue(name, val)} size={size} step={step} />
+      </DialInputWrapper>
+    );
+  }
+};
+
+// Dial-wrapped CmInput
+export const DialCmInput: React.FC<DialWrapperProps> = ({
+  name,
+  label,
+  size = "sm",
+  step,
+  labelPosition,
+}) => {
+  const { getValue, setValue } = useDialSchema();
+  const value = (getValue(name) ?? 0) as number;
+
+  if (labelPosition === "inline") {
+    return (
+      <CmInput
+        value={value}
+        onChange={(val) => setValue(name, val)}
+        size={size}
+        step={step}
+        prefix={label ? [label] : undefined}
+      />
+    );
+  } else {
+    return (
+      <DialInputWrapper label={label}>
+        <CmInput value={value} onChange={(val) => setValue(name, val)} size={size} step={step} />
+      </DialInputWrapper>
+    );
+  }
+};
+
+// Dial-wrapped InchInput
+export const DialInchInput: React.FC<DialWrapperProps> = ({
+  name,
+  label,
+  size = "sm",
+  step,
+  labelPosition,
+}) => {
+  const { getValue, setValue } = useDialSchema();
+  const value = (getValue(name) ?? 0) as number;
+
+  if (labelPosition === "inline") {
+    return (
+      <InchInput
+        value={value}
+        onChange={(val) => setValue(name, val)}
+        size={size}
+        step={step}
+        prefix={label ? [label] : undefined}
+      />
+    );
+  } else {
+    return (
+      <DialInputWrapper label={label}>
+        <InchInput value={value} onChange={(val) => setValue(name, val)} size={size} step={step} />
+      </DialInputWrapper>
+    );
+  }
+};
+
+// Dial-wrapped TimeInput
+export const DialTimeInput: React.FC<DialWrapperProps> = ({
+  name,
+  label,
+  size = "sm",
+  step,
+  labelPosition,
+}) => {
+  const { getValue, setValue } = useDialSchema();
+  const value = (getValue(name) ?? 0) as number;
+
+  if (labelPosition === "inline") {
+    return (
+      <TimeInput
+        value={value}
+        onChange={(val) => setValue(name, val)}
+        size={size}
+        step={step}
+        prefix={label ? [label] : undefined}
+      />
+    );
+  } else {
+    return (
+      <DialInputWrapper label={label}>
+        <TimeInput value={value} onChange={(val) => setValue(name, val)} size={size} step={step} />
+      </DialInputWrapper>
+    );
+  }
+};

package/src/dial/wrapped-inputs/DialVectorInput.tsx

@@ -0,0 +1,125 @@
+import React from "react";
+import { useDialSchema } from "../DialProvider";
+import { FormLayout, Label, VectorInput } from "../../index";
+
+interface DialVectorInputProps {
+  name: string;
+  label?: string;
+  column?: boolean;
+  size?: "sm" | "md" | "lg";
+}
+
+/**
+ * Variable-dimension vector input component that supports any number of dimensions
+ * Used for vector-6, number-group, or any multi-dimensional numeric input
+ */
+export const DialVectorInput: React.FC<DialVectorInputProps> = ({
+  name,
+  label,
+  size = "sm",
+}) => {
+  const { getValue, setValue, schemas } = useDialSchema();
+  const schema = schemas.find((s) => s.name === name);
+  if (!schema) {
+    return null;
+  }
+
+  const value = getValue(name) || [];
+
+  // Get metadata from schema
+  const dimensions =
+    schema.dimensions ||
+    schema.placeholders?.length ||
+    schema.dtypes?.length ||
+    (Array.isArray(value) ? value.length : 6);
+  const placeholders = schema.placeholders || [];
+  const dtypes = schema.dtypes || [];
+  const steps = schema.steps || [];
+  const tags = schema.tags || {};
+
+  // Determine layout from tags
+  // col-N means grid-auto-flow: column with N rows (fills columns first)
+  // row-N means grid-auto-flow: row with N columns (fills rows first)
+  let gridAutoFlow: "column" | "row";
+  let gridColumns: number | undefined;
+  let gridRows: number | undefined;
+
+  if (typeof tags.col === "number") {
+    // col-N: flow by columns, with N rows defined
+    gridAutoFlow = "column";
+    gridRows = tags.col;
+    gridColumns = undefined; // Columns auto-calculated based on content
+  } else if (typeof tags.row === "number") {
+    // row-N: flow by rows, with N columns defined
+    gridAutoFlow = "row";
+    gridColumns = tags.row;
+    gridRows = undefined; // Rows auto-calculated based on content
+  } else {
+    // Default: no explicit grid, let it flow naturally
+    gridAutoFlow = "row";
+    gridColumns = undefined;
+    gridRows = undefined;
+  }
+
+  console.log("the grid-flow is", gridAutoFlow, gridColumns, gridRows);
+
+  // Ensure value is an array with correct dimensions
+  const vectorValue = Array.isArray(value)
+    ? value.concat(Array(Math.max(0, dimensions - value.length)).fill(0))
+    : Array(dimensions).fill(0);
+
+  // Calculate steps for each input based on dtypes or provided steps
+  const inputSteps = Array.from({ length: dimensions }, (_, i) => {
+    // First check if a specific step is provided for this index
+    if (steps[i] !== undefined) {
+      return steps[i];
+    }
+    // Otherwise, determine step based on dtype
+    const dtype = dtypes[i];
+    return dtype === "number-int" ? 1 : 0.001;
+  });
+
+  // Create labels from placeholders
+  const labels =
+    placeholders.length > 0
+      ? placeholders.map((p) => <span className="text-xs">{p}</span>)
+      : undefined;
+
+  const handleValuesChange = (newValues: number[]) => {
+    setValue(name, newValues);
+  };
+
+  const inputComponent = (
+    <VectorInput
+      value={vectorValue}
+      onValuesChange={handleValuesChange}
+      size={size}
+      step={inputSteps}
+      labels={labels}
+      gridAutoFlow={gridAutoFlow}
+      columns={gridColumns}
+      rows={gridRows}
+    />
+  );
+
+  if (!label) {
+    return inputComponent;
+  }
+
+  return (
+    <FormLayout orientation="label-top">
+      <Label size="sm">{label}</Label>
+      <div className="flex flex-row items-center gap-2">
+        {schema.helpText && (
+          <span
+            className="text-text-secondary cursor-help text-xs"
+            title={schema.helpText as string}
+          >
+            ⓘ
+          </span>
+        )}
+        {inputComponent}
+      </div>
+    </FormLayout>
+  );
+};

package/src/dial/wrapped-inputs/index.ts

@@ -0,0 +1,25 @@
+// Basic controlled inputs
+export {
+  DialBooleanInput,
+  DialNumberInput,
+  DialSelectInput,
+  DialSliderInput,
+} from "./ControlledInputs";
+
+// UIKit wrapped inputs
+export {
+  DialVec3Input,
+  DialEulerInput,
+  DialEulerDegInput,
+  DialQuaternionInput,
+  DialVectorInput as DialVectorWrappedInput,
+  DialIntInput,
+  DialDegInput,
+  DialRadInput,
+  DialCmInput,
+  DialInchInput,
+  DialTimeInput,
+} from "./DialInputs";
+
+// Variable-dimension vector input
+export { DialVectorInput } from "./DialVectorInput";

package/src/highlight-cursor/cursor-context.tsx

@@ -0,0 +1,23 @@
+import { createContext, useContext } from "react";
+
+import type { CursorContextType } from "./types";
+
+const defaultDimensions = {
+  width: 0,
+  height: 0,
+  x: 0,
+  y: 0,
+};
+
+const defaultContext: CursorContextType = {
+  mousePosition: { x: 0, y: 0 },
+  hoveredElementId: null,
+  elementDimensions: defaultDimensions,
+  registerHoveredElement: () => {},
+  unregisterHoveredElement: () => {},
+  updateElementDimensions: () => {},
+};
+
+export const CursorContext = createContext<CursorContextType>(defaultContext);
+
+export const useCursor = () => useContext(CursorContext);