@vuer-ai/vuer-uikit 0.0.119 → 0.0.121

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

@@ -14,8 +14,9 @@ import {
   Slider,
   Switch,
 } from "../../index"; // Base input component that connects to the dial store
-import { LabelPositionT, useDialSchema } from "../DialProvider";
+import { useDialSchema } from "../DialProvider";
 import { IconRenderer } from "../IconRenderer";
+import type { LabelPositionT } from "../types";
 
 // Helper component for wrapping inputs with labels
 const DialInputWrapper: React.FC<{
@@ -108,7 +109,7 @@ export const DialBooleanInput: React.FC<DialNumInputProps> = ({
   const { getValue, setValue } = useDialSchema();
   const value = (getValue(name) ?? false) as boolean;
 
-  const handleChange = useCallback((checked: boolean) => setValue(name, checked), [name]);
+  const handleChange = useCallback((checked: boolean) => setValue(name, checked), [name, setValue]);
 
   const switchProps = {
     checked: value,
@@ -133,7 +134,7 @@ export const DialColorInput: React.FC<DialNumInputProps> = ({ name, label, icon,
 
   const handleChange = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => setValue(name, e.target.value),
-    [name],
+    [name, setValue],
   );
 
   const inputComp = <ColorInput value={value} onChange={handleChange} prefix={label} />;
@@ -162,7 +163,7 @@ export const DialSelectInput: React.FC<DialNumInputProps> = ({
       const parsed = !isNaN(Number(val)) ? Number(val) : val;
       setValue(name, parsed);
     },
-    [name],
+    [name, setValue],
   );
 
   const selectComponent = (
@@ -199,7 +200,7 @@ export const DialSliderInput: React.FC<DialNumInputProps> = ({
   const { getValue, setValue } = useDialSchema();
   const value = (getValue(name) ?? min) as number;
 
-  const handleValueChange = useCallback(([val]: number[]) => setValue(name, val), [name]);
+  const handleValueChange = useCallback(([val]: number[]) => setValue(name, val), [name, setValue]);
 
   const sliderProps = {
     value: [value],

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

@@ -18,8 +18,9 @@ import {
   Vec3Input,
   VectorInput,
 } from "../../index";
-import { LabelPositionT, useDialSchema } from "../DialProvider";
+import { useDialSchema } from "../DialProvider";
 import { IconRenderer } from "../IconRenderer";
+import type { LabelPositionT } from "../types";
 
 // Base props for all dial-wrapped inputs
 interface DialWrapperProps {

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

@@ -0,0 +1,44 @@
+import React, { useCallback } from "react";
+
+import { DialPanel } from "../DialPanel";
+import { DialProvider, useDialSchema } from "../DialProvider";
+import { LabelPositionT } from "../types";
+
+interface DialInterfaceInputProps {
+  name: string;
+}
+
+export const DialInterfaceInput: React.FC<DialInterfaceInputProps> = ({ name }) => {
+  const { getValue, setValue, schemas } = useDialSchema();
+
+  const values: Record<string, unknown> = getValue(name) as Record<string, unknown>;
+
+  const handlePropertyChange = useCallback(
+    (propName: string, value: unknown) => {
+      const newValues = { ...values };
+      newValues[propName] = value;
+      setValue(name, newValues);
+    },
+    [name, setValue, values],
+  );
+
+  const schema = schemas.find((s) => s.name === name);
+
+  if (!schema || !schema.typeDefinition?.schemas) {
+    return null;
+  }
+
+  return (
+    <DialProvider
+      schemas={schema.typeDefinition.schemas}
+      values={values}
+      onValueChange={handlePropertyChange}
+    >
+      <DialPanel
+        schemas={schema.typeDefinition.schemas}
+        groups={schema.typeDefinition.groups}
+        labelLayout={schema.labelPosition as LabelPositionT}
+      />
+    </DialProvider>
+  );
+};

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

@@ -1,9 +1,10 @@
 import React from "react";
 
 import { FormLayout, Label, type LayoutType } from "../../ui";
-import { PresetsInput } from "../../ui/inputs/presets-input";
-import { LabelPositionT, useDialSchema } from "../DialProvider";
+import { PresetsInput } from "../../ui";
+import { useDialSchema } from "../DialProvider";
 import { IconRenderer } from "../IconRenderer";
+import { LabelPositionT } from "../types";
 
 const DialInputWrapper: React.FC<{
   label?: string;

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

@@ -65,7 +65,6 @@ export const DialVectorInput: React.FC<DialVectorInputProps> = ({
   const steps = schema.steps || [];
   const mins = schema.mins || [];
   const maxs = schema.maxs || [];
-  const tags = schema.tags || {};
 
   // Ensure value is an array with correct dimensions
   const vectorValue = Array.isArray(value)
@@ -76,23 +75,9 @@ export const DialVectorInput: React.FC<DialVectorInputProps> = ({
   const hasMixedTypes = dtypes.some((dtype) => dtype === "boolean");
 
   // Determine layout from tags
-  let gridAutoFlow: "column" | "row";
-  let gridColumns: number | undefined;
-  let gridRows: number | undefined;
-
-  if (typeof tags.col === "number") {
-    gridAutoFlow = "column";
-    gridRows = tags.col;
-    gridColumns = undefined;
-  } else if (typeof tags.row === "number") {
-    gridAutoFlow = "row";
-    gridColumns = tags.row;
-    gridRows = undefined;
-  } else {
-    gridAutoFlow = "row";
-    gridColumns = undefined;
-    gridRows = undefined;
-  }
+  const gridAutoFlow = schema.vectorFlow === "column" ? "column" : "row";
+  const gridColumns = typeof schema.vectorCols === "number" ? schema.vectorCols : undefined;
+  const gridRows = typeof schema.vectorRows === "number" ? schema.vectorRows : undefined;
 
   if (hasMixedTypes) {
     // Separate number and boolean indices and values

package/src/hooks/clientOnly.tsx

@@ -1,15 +1,28 @@
 import React from "react";
 
 /**
- * Executes a function only on the client side (when window is defined)
- * @param fn - Function to execute on client side
- * @returns Result of the function or undefined if on server side
+ * Component that only renders its children on the client side
+ * @param children - React children to render client-side
+ * @param fallback - Optional fallback to render during SSR
  */
-export function clientOnly<T>(fn: () => T): T | undefined {
-  if (typeof window !== "undefined") {
-    return fn();
+export function ClientOnly({
+  children,
+  fallback = null,
+}: {
+  children: React.ReactNode;
+  fallback?: React.ReactNode;
+}) {
+  const [hasMounted, setHasMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setHasMounted(true);
+  }, []);
+
+  if (!hasMounted) {
+    return <>{fallback}</>;
   }
-  return undefined;
+
+  return <>{children}</>;
 }
 
 /**
@@ -36,19 +49,3 @@ export function createClientOnlyComponent<P extends object = Record<string, unkn
     return React.createElement(Component, props);
   } as React.ComponentType<P>;
 }
-
-/**
- * Checks if code is running on the client side
- * @returns true if running on client, false if on server
- */
-export function isClient(): boolean {
-  return typeof window !== "undefined";
-}
-
-/**
- * Checks if code is running on the server side
- * @returns true if running on server, false if on client
- */
-export function isServer(): boolean {
-  return typeof window === "undefined";
-}

package/src/hooks/cn.ts

@@ -14,6 +14,10 @@ const twMerge = extendTailwindMerge({
       p: ["p-xxs", "p-xs", "p-sm", "p-md", "p-lg", "p-xl"],
       py: ["py-xxs", "py-xs", "py-sm", "py-md", "py-lg", "py-xl"],
       px: ["px-xxs", "px-xs", "px-sm", "px-md", "px-lg", "px-xl"],
+      pt: ["pt-xxs", "pt-xs", "pt-sm", "pt-md", "pt-lg", "pt-xl"],
+      pb: ["pb-xxs", "pb-xs", "pb-sm", "pb-md", "pb-lg", "pb-xl"],
+      pl: ["pl-xxs", "pl-xs", "pl-sm", "pl-md", "pl-lg", "pl-xl"],
+      pr: ["pr-xxs", "pr-xs", "pr-sm", "pr-md", "pr-lg", "pr-xl"],
       "font-size": [
         "text-uk-xs",
         "text-uk-sm",
@@ -22,6 +26,7 @@ const twMerge = extendTailwindMerge({
         "text-uk-xl",
         "text-uk-xxl",
       ],
+      "text-color": ["text-text-primary", "text-text-highlight"],
     },
   },
 });

package/src/hooks/useIsMobile.ts

@@ -1,35 +1,19 @@
-import { useSyncExternalStore } from "react";
+import { useEffect, useState } from "react";
 
 const MOBILE_BREAKPOINT = 768;
 
-function subscribe(callback: () => void) {
-  if (typeof window === "undefined") {
-    return () => {};
-  }
-
-  const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
-
-  // Modern browsers
-  if (mql.addEventListener) {
-    mql.addEventListener("change", callback);
-    return () => mql.removeEventListener("change", callback);
-  }
-
-  // Fallback for older browsers
-  mql.addListener(callback);
-  return () => mql.removeListener(callback);
-}
-
-function getSnapshot() {
-  if (typeof window === "undefined") return false;
-  return window.innerWidth < MOBILE_BREAKPOINT;
-}
-
-function getServerSnapshot() {
-  // Return false on server - most users are on desktop
-  return false;
-}
-
 export function useIsMobile() {
-  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  const [isMobile, setIsMobile] = useState<boolean | undefined>(undefined);
+
+  useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener("change", onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener("change", onChange);
+  }, []);
+
+  return !!isMobile;
 }

package/src/index.css

@@ -2,4 +2,3 @@
 
 @import "./styles/variables.css";
 @import "./styles/theme.css";
-@import "./styles/toast.css";

package/src/ui/DialBadge.tsx

@@ -1,5 +1,5 @@
-import { GitBranch } from "lucide-react";
 import React from "react";
+
 import { cn } from "../hooks";
 
 // Version info for dial-cli package (injected at build time)
@@ -7,7 +7,8 @@ declare const __DIAL_VERSION__: string;
 declare const __DIAL_PACKAGE_NAME__: string;
 declare const __DIAL_GIT_HASH__: string;
 
-const DIAL_PACKAGE_NAME = typeof __DIAL_PACKAGE_NAME__ !== "undefined" ? __DIAL_PACKAGE_NAME__ : "@vuer-ai/dial-cli";
+const DIAL_PACKAGE_NAME =
+  typeof __DIAL_PACKAGE_NAME__ !== "undefined" ? __DIAL_PACKAGE_NAME__ : "@vuer-ai/dial-cli";
 const DIAL_PACKAGE_VERSION = typeof __DIAL_VERSION__ !== "undefined" ? __DIAL_VERSION__ : "dev";
 const DIAL_GIT_HASH = typeof __DIAL_GIT_HASH__ !== "undefined" ? __DIAL_GIT_HASH__ : "unknown";
 
@@ -52,14 +53,15 @@ function DialBadge({
 }: DialBadgeProps) {
   const packageShortName = "dial-cli";
   const displayValue = hash ? DIAL_GIT_HASH : DIAL_PACKAGE_VERSION;
-  const versionText = version || hash ? (prefix && !hash ? `v${displayValue}` : displayValue) : undefined;
+  const versionText =
+    version || hash ? (prefix && !hash ? `v${displayValue}` : displayValue) : undefined;
   const npmUrl = `https://www.npmjs.com/package/${DIAL_PACKAGE_NAME}/v/${DIAL_PACKAGE_VERSION}`;
 
   return (
     <div
       className={cn(
         "rounded-uk-xs rounded-r-uk-xs text-uk-sm bg-icon-withbg inline-flex items-center",
-        className
+        className,
       )}
       style={linkable ? { cursor: "pointer" } : undefined}
     >
@@ -105,4 +107,4 @@ function DialBadge({
 }
 
 export { DialBadge, DIAL_PACKAGE_VERSION, DIAL_PACKAGE_NAME, DIAL_GIT_HASH };
-export type { DialBadgeProps };
+export type { DialBadgeProps };

package/src/ui/card.tsx

@@ -1,13 +1,16 @@
 import { cva, type VariantProps } from "class-variance-authority";
-import { type ComponentProps } from "react";
+import { ChevronDown, ChevronUp } from "lucide-react";
+import { type ComponentProps, type ReactNode, useState } from "react";
 
 import { cn } from "../hooks";
+import { Button } from "./button";
 
 /**
  * Variants for the card component.
  */
 const cardVariants = cva(
   [
+    "relative",
     "flex",
     "flex-col",
     "rounded-uk-xl",
@@ -34,13 +37,82 @@ const cardVariants = cva(
   },
 );
 
-export interface CardProps extends ComponentProps<"div">, VariantProps<typeof cardVariants> {}
+export interface CardProps extends ComponentProps<"div">, VariantProps<typeof cardVariants> {
+  /**
+   * Enable collapse/expand functionality
+   */
+  collapsible?: boolean;
+  /**
+   * Content to display when card is collapsed (typically a label or title)
+   */
+  collapsedContent?: ReactNode;
+  /**
+   * Initially collapsed state (only used when collapsible is true)
+   */
+  defaultCollapsed?: boolean;
+}
 
 /**
  * Container card with default padding, radius and shadow.
  */
-function Card({ className, size, ...props }: CardProps) {
-  return <div data-slot="card" className={cn(cardVariants({ size, className }))} {...props} />;
+function Card({
+  className,
+  size,
+  collapsible,
+  collapsedContent,
+  defaultCollapsed = false,
+  children,
+  ...props
+}: CardProps) {
+  const [isCollapsed, setIsCollapsed] = useState(defaultCollapsed);
+
+  if (collapsible) {
+    if (isCollapsed) {
+      return (
+        <div
+          data-slot="card"
+          className={cn(cardVariants({ size }), "flex-row justify-between", className)}
+          {...props}
+        >
+          {collapsedContent}
+          <div className="right-lg absolute top-1/2 -translate-y-1/2">
+            <Button
+              variant="ghost"
+              size="sm"
+              icon
+              onClick={() => setIsCollapsed(false)}
+              className="hover:bg-shadow-secondary"
+            >
+              <ChevronDown strokeWidth={1.5} className="text-icon-primary size-4" />
+            </Button>
+          </div>
+        </div>
+      );
+    }
+
+    return (
+      <div data-slot="card" className={cn(cardVariants({ size, className }))} {...props}>
+        <div className="right-lg top-lg absolute">
+          <Button
+            variant="ghost"
+            size="sm"
+            icon
+            onClick={() => setIsCollapsed(true)}
+            className="hover:bg-shadow-secondary"
+          >
+            <ChevronUp strokeWidth={1.5} className="text-icon-primary size-4" />
+          </Button>
+        </div>
+        {children}
+      </div>
+    );
+  }
+
+  return (
+    <div data-slot="card" className={cn(cardVariants({ size, className }))} {...props}>
+      {children}
+    </div>
+  );
 }
 
 /**