@vuer-ai/vuer-uikit 0.0.101 → 0.0.102

package/src/ui/inputs/presets-rad-input.tsx

@@ -0,0 +1,77 @@
+import { forwardRef, useState } from "react";
+
+import { Button } from "../button";
+import { RadInput, RadInputProps } from "./number-inputs/RadInput";
+import { cn } from "../../hooks";
+
+interface PresetsRadInputProps extends Omit<RadInputProps, "value" | "onChange"> {
+  presets: [number, number, number];
+  value?: number;
+  onChange?: (value: number) => void;
+  display?: "deg" | "pi" | "rad";
+  className?: string;
+}
+
+export const PresetsRadInput = forwardRef<HTMLDivElement, PresetsRadInputProps>(
+  function PresetsRadInput({ presets, value = 0, onChange, display = "rad", size, className, ...props }, ref) {
+    const [preset, setPreset] = useState(value);
+
+    const handleValueChange = (newValue: number) => {
+      setPreset(newValue);
+      onChange?.(newValue);
+    };
+
+    const handlePresetClick = (presetValue: number) => {
+      setPreset(presetValue);
+      onChange?.(presetValue);
+    };
+
+    const getDisplayValue = (radValue: number) => {
+      if (display === "deg") {
+        return (radValue * 180) / Math.PI;
+      } else if (display === "pi") {
+        return radValue / Math.PI;
+      }
+      return radValue;
+    };
+
+    const formatDisplayValue = (radValue: number) => {
+      const displayValue = getDisplayValue(radValue);
+      if (display === "pi") {
+        return `${displayValue.toFixed(2)}π`;
+      } else if (display === "deg") {
+        return `${displayValue.toFixed(0)}°`;
+      }
+      return displayValue.toFixed(2);
+    };
+
+    return (
+      <div className={cn("gap-xs grid grid-cols-5", className)}>
+        <div className="col-span-full">
+          <RadInput
+            {...props}
+            ref={ref}
+            size={size}
+            value={preset}
+            onChange={handleValueChange}
+            display={display}
+          />
+        </div>
+
+        {presets.map((p: number, i: number) => {
+          return (
+            <Button
+              key={i}
+              size={size}
+              variant="secondary"
+              className="h-6"
+              onClick={() => handlePresetClick(p)}
+            >
+              {formatDisplayValue(p)}
+            </Button>
+          );
+        })}
+      </div>
+    );
+  },
+);

package/src/ui/layouts/liquid-layout/LayoutSlots.tsx

@@ -28,7 +28,7 @@ export function LiquidLayoutLeft({ className, ...props }: Readonly<ComponentProp
     <div
       {...props}
       className={cn(
-        "order-2 col-start-1 flex flex-col items-start gap-4 [&>*]:pointer-events-auto",
+        "order-2 col-start-1 flex flex-col items-start gap-4 overflow-y-auto [&>*]:pointer-events-auto",
         className,
       )}
     />
@@ -57,7 +57,7 @@ export function LiquidLayoutRight({
     <Comp
       {...props}
       className={cn(
-        "order-4 col-start-3 flex flex-col items-end gap-4 [&>*]:pointer-events-auto",
+        "order-4 col-start-3 flex flex-col items-end gap-4 overflow-y-auto [&>*]:pointer-events-auto",
         className,
       )}
     />

package/src/ui/sidebar.tsx

@@ -316,7 +316,7 @@ function SidebarHeader({ className, ...props }: ComponentProps<"div">) {
     <div
       data-slot="sidebar-header"
       data-sidebar="header"
-      className={cn("text-uk-lg leading-uk-lg px-md flex flex-col", className)}
+      className={cn("text-uk-lg leading-uk-lg px-md py-lg flex flex-col", className)}
       {...props}
     />
   );
@@ -327,7 +327,7 @@ function SidebarFooter({ className, ...props }: ComponentProps<"div">) {
     <div
       data-slot="sidebar-footer"
       data-sidebar="footer"
-      className={cn("px-lg flex flex-col", className)}
+      className={cn("px-md py-lg flex flex-col", className)}
       {...props}
     />
   );
@@ -338,10 +338,7 @@ function SidebarSeparator({ className, ...props }: ComponentProps<typeof Separat
     <Separator
       data-slot="sidebar-separator"
       data-sidebar="separator"
-      className={cn("bg-line-primary -ml-lg", className)}
-      style={{
-        width: "calc(100% + var(--spacing-lg) * 2)",
-      }}
+      className={cn("bg-line-primary", className)}
       {...props}
     />
   );
@@ -431,7 +428,7 @@ function SidebarMenu({ className, ...props }: ComponentProps<"ul">) {
     <ul
       data-slot="sidebar-menu"
       data-sidebar="menu"
-      className={cn("gap-lg flex w-full min-w-0 flex-col", className)}
+      className={cn("py-md gap-sm flex w-full min-w-0 flex-col", className)}
       style={{
         paddingLeft: "0px",
         marginBottom: "0px",
@@ -656,10 +653,12 @@ function SidebarMenuSubButton({
       data-size={size}
       data-active={isActive}
       className={cn(
-        "text-text-primary ring-sidebar-ring hover:bg-bg-secondary hover:text-text-primary active:bg-bg-tertiary active:text-text-highlight [&>svg]:text-icon-primary gap-md rounded-uk-md px-lg flex h-[32px] min-w-0 -translate-x-px items-center overflow-hidden outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-[16px] [&>svg]:shrink-0",
+        "text-text-primary ring-sidebar-ring hover:bg-bg-secondary hover:text-text-primary active:bg-bg-tertiary active:text-text-highlight [&>svg]:text-icon-primary gap-md rounded-uk-md px-lg flex h-[32px] min-w-0 -translate-x-px cursor-pointer items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-[16px] [&>svg]:shrink-0",
         size === "sm" && "text-uk-sm leading-uk-sm",
         size === "md" && "text-uk-md leading-uk-md",
         "group-data-[collapsible=icon]:hidden",
+        isActive &&
+          "bg-bg-tertiary text-text-highlight [&>svg]:text-icon-highlight hover:bg-bg-tertiary hover:text-text-highlight",
         className,
       )}
       {...props}

package/src/ui/theme/ThemeProvider.tsx

@@ -9,7 +9,13 @@ import {
 } from "react";
 
 import { ThemeScript } from "./themeScript";
-import type { Attribute, ThemeProviderProps, UseThemeProps, BaseTheme, ComputedTheme } from "./types";
+import type {
+  Attribute,
+  BaseTheme,
+  ComputedTheme,
+  ThemeProviderProps,
+  UseThemeProps,
+} from "./types";
 
 export const colorSchemes = ["light", "dark"] as const;
 export const MEDIA = "(prefers-color-scheme: dark)";
@@ -37,47 +43,47 @@ export const getFromLS = (key: string, fallback: string): string => {
 /**
  * Calculate the actual theme name
  */
-export const computeTheme = (baseTheme: BaseTheme, isLiquid: boolean, systemIsDark: boolean): ComputedTheme => {
+export const computeTheme = (
+  baseTheme: BaseTheme,
+  isLiquid: boolean,
+  systemIsDark: boolean,
+): ComputedTheme => {
   let resolvedBase: "light" | "dark";
-  
+
   if (baseTheme === "system") {
     resolvedBase = systemIsDark ? "dark" : "light";
   } else {
     resolvedBase = baseTheme;
   }
-  
-  return isLiquid ? `liquid-${resolvedBase}` as ComputedTheme : resolvedBase;
-};
 
-/**
- * Parse old theme string to new state structure
- */
-export const parseOldTheme = (oldTheme: string): { baseTheme: BaseTheme; isLiquid: boolean } => {
-  if (oldTheme === "system") {
-    return { baseTheme: "system", isLiquid: false };
-  }
-  
-  if (oldTheme.startsWith("liquid-")) {
-    const base = oldTheme.replace("liquid-", "") as "light" | "dark";
-    return { baseTheme: base, isLiquid: true };
-  }
-  
-  return { baseTheme: oldTheme as BaseTheme, isLiquid: false };
+  return isLiquid ? (`liquid-${resolvedBase}` as ComputedTheme) : resolvedBase;
 };
 
-
-
 /**
- * Hook to read and update theme state from `ThemeProvider`.
+ * Hook to read and update the theme state from `ThemeProvider`.
  * Throws if used outside a provider.
  */
-export const useTheme = () => {
+export function useTheme<T = UseThemeProps>(
+  selector?: (v: UseThemeProps) => T,
+): T extends void ? UseThemeProps : T {
   const context = useContext(ThemeContext);
 
   if (context === undefined) throw new Error("useTheme must be used within a ThemeProvider");
 
-  return context;
-};
+  return useMemo(
+    () => {
+      if (!selector) {
+        return context as any;
+      } else if (typeof selector === "function") {
+        return selector(context);
+      } else {
+        return context[selector] as any;
+      }
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [context],
+  ) as T extends void ? UseThemeProps : T;
+}
 
 /**
  * Provides theme context and DOM attribute synchronization for theming.
@@ -112,7 +118,7 @@ export const Theme = ({
   scriptProps,
 }: PropsWithChildren<ThemeProviderProps>) => {
   const themes = defaultThemes;
-  
+
   const initialState = useMemo(() => {
     return { baseTheme: defaultBaseTheme!, isLiquid: defaultIsLiquid! };
   }, [defaultBaseTheme, defaultIsLiquid]);
@@ -122,9 +128,11 @@ export const Theme = ({
     if (!stored) {
       return initialState.baseTheme;
     }
-    return (["light", "dark", "system"].includes(stored) ? stored : initialState.baseTheme) as BaseTheme;
+    return (
+      ["light", "dark", "system"].includes(stored) ? stored : initialState.baseTheme
+    ) as BaseTheme;
   });
-  
+
   const [isLiquid, setIsLiquidState] = useState<boolean>(() => {
     const stored = getFromLS(`${storageKey}-liquid`, "");
     if (!stored) {
@@ -142,15 +150,14 @@ export const Theme = ({
 
   const attrs = !value ? themes : Object.values(value);
 
-  const computedTheme = useMemo(() => 
-    computeTheme(baseTheme, isLiquid, systemIsDark), 
-    [baseTheme, isLiquid, systemIsDark]
+  const computedTheme = useMemo(
+    () => computeTheme(baseTheme, isLiquid, systemIsDark),
+    [baseTheme, isLiquid, systemIsDark],
   );
 
   const resolvedTheme = useMemo((): ComputedTheme => {
     if (forcedTheme) {
-      const parsed = parseOldTheme(forcedTheme);
-      return computeTheme(parsed.baseTheme, parsed.isLiquid, systemIsDark);
+      return forcedTheme as ComputedTheme;
     }
     return computedTheme;
   }, [forcedTheme, computedTheme, systemIsDark]);
@@ -190,26 +197,26 @@ export const Theme = ({
     [attribute, attrs, disableTransitionOnChange, enableColorScheme, nonce, value],
   );
 
-  const setBaseTheme = useCallback((newBaseTheme: BaseTheme) => {
-    setBaseThemeState(newBaseTheme);
-    saveToLS(`${storageKey}-base`, newBaseTheme);
-  }, [storageKey]);
+  const setBaseTheme = useCallback(
+    (newBaseTheme: BaseTheme) => {
+      setBaseThemeState(newBaseTheme);
+      saveToLS(`${storageKey}-base`, newBaseTheme);
+    },
+    [storageKey],
+  );
 
   const toggleLiquid = useCallback(() => {
-    setIsLiquidState(prev => {
+    setIsLiquidState((prev) => {
       const newValue = !prev;
       saveToLS(`${storageKey}-liquid`, String(newValue));
       return newValue;
     });
   }, [storageKey]);
 
-  const handleMediaQuery = useCallback(
-    (e: MediaQueryListEvent | MediaQueryList) => {
-      const isDark = e.matches;
-      setSystemIsDark(isDark);
-    },
-    [],
-  );
+  const handleMediaQuery = useCallback((e: MediaQueryListEvent | MediaQueryList) => {
+    const isDark = e.matches;
+    setSystemIsDark(isDark);
+  }, []);
 
   // Always listen to System preference
   useEffect(() => {
@@ -249,13 +256,24 @@ export const Theme = ({
       toggleLiquid,
       computedTheme,
       resolvedTheme,
-      systemTheme: (enableSystem ? (systemIsDark ? "dark" : "light") : undefined) as "light" | "dark" | undefined,
+      systemTheme: (enableSystem ? (systemIsDark ? "dark" : "light") : undefined) as
+        | "light"
+        | "dark"
+        | undefined,
       forcedTheme,
       storageKey,
     }),
     [
-      baseTheme, setBaseTheme, isLiquid, toggleLiquid, computedTheme, resolvedTheme,
-      systemIsDark, enableSystem, forcedTheme, storageKey
+      baseTheme,
+      setBaseTheme,
+      isLiquid,
+      toggleLiquid,
+      computedTheme,
+      resolvedTheme,
+      systemIsDark,
+      enableSystem,
+      forcedTheme,
+      storageKey,
     ],
   );
 
@@ -268,9 +286,8 @@ export const Theme = ({
           attribute,
           enableSystem,
           enableColorScheme,
-          defaultTheme: initialState.baseTheme === "system" 
-            ? "system" 
-            : (initialState.isLiquid ? `liquid-${initialState.baseTheme}` : initialState.baseTheme),
+          defaultBaseTheme: initialState.baseTheme,
+          defaultIsLiquid: initialState.isLiquid,
           value,
           themes,
           nonce,

package/src/ui/theme/ThemeToggles.tsx

@@ -1,11 +1,11 @@
 // Liquid toggle component
-import { Droplet, Moon, Sun, SunMoon } from "lucide-react";
+import { LayoutTemplate, Moon, PanelsTopLeft, Sun, SunMoon } from "lucide-react";
 import React, { type ComponentProps } from "react";
 
 import { Button } from "../button";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip";
 import { useTheme } from "./ThemeProvider";
-import { cn, createClientOnlyComponent, useDocument } from "../../hooks";
+import { cn } from "../../hooks";
 
 type LiquidToggleProps = Omit<ComponentProps<typeof Button>, "onClick" | "children">;
 
@@ -18,16 +18,16 @@ export const LiquidToggle: React.FC<LiquidToggleProps> = ({ className, ...props
         <Button
           icon
           variant="ghost"
-          value={isLiquid}
+          // value={isLiquid}
           aria-label={`Toggle liquid theme: ${isLiquid ? "on" : "off"}`}
           {...props}
           onClick={toggleLiquid}
           className={className}
         >
-          <Droplet size={20} />
+          {isLiquid ? <PanelsTopLeft size={20} /> : <LayoutTemplate size={20} />}
         </Button>
       </TooltipTrigger>
-      <TooltipContent>Toggle liquid theme</TooltipContent>
+      <TooltipContent>{isLiquid ? "Dock Menu Panels" : "Floating Menu Panels"}</TooltipContent>
     </Tooltip>
   );
 };
@@ -48,7 +48,7 @@ export const ThemeColorToggle: React.FC<ThemeColorToggleProps> = (props) => {
     }
   };
 
-  const isDark = resolvedTheme.includes("dark");
+  const isDark = resolvedTheme?.includes("dark");
   const isSystem = baseTheme === "system";
 
   return (
@@ -70,15 +70,15 @@ type ThemeTogglesProps = {
   colorToggleProps?: Omit<ThemeColorToggleProps, "className">;
 };
 
-export const ThemeToggles: React.FC<ThemeTogglesProps> = ({ 
-  className, 
-  liquidToggleProps = {}, 
-  colorToggleProps = {} 
+export const ThemeToggles: React.FC<ThemeTogglesProps> = ({
+  className,
+  liquidToggleProps = {},
+  colorToggleProps = {},
 }) => {
   return (
-    <div className={cn("flex gap-1", className)}>
+    <div className={cn("flex", className)}>
       <LiquidToggle {...liquidToggleProps} />
       <ThemeColorToggle {...colorToggleProps} />
     </div>
   );
-};
+};

package/src/ui/theme/index.ts

@@ -1,21 +1,11 @@
-export { 
-  useTheme, 
-  ThemeProvider, 
-  defaultThemes,
-  computeTheme,
-  parseOldTheme
-} from "./ThemeProvider";
-export { 
-  LiquidToggle, 
-  ThemeColorToggle,
-  ThemeToggles,
-} from "./ThemeToggles";
+export { useTheme, ThemeProvider, defaultThemes, computeTheme } from "./ThemeProvider";
+export { LiquidToggle, ThemeColorToggle, ThemeToggles } from "./ThemeToggles";
 export { ThemeScript } from "./themeScript";
 
-export type { 
-  Attribute, 
-  ThemeProviderProps, 
+export type {
+  Attribute,
+  ThemeProviderProps,
   UseThemeProps,
   BaseTheme,
-  ComputedTheme 
+  ComputedTheme,
 } from "./types";

package/src/ui/theme/themeScript.tsx

@@ -1,9 +1,10 @@
 import { memo } from "react";
 
-import { Attribute, ThemeProviderProps } from "./types";
+import { Attribute, BaseTheme, ThemeProviderProps } from "./types";
 
 const themeScript = (
-  defaultTheme: string,
+  defaultBaseTheme: BaseTheme,
+  defaultIsLiquid: boolean,
   storageKey: string,
   attribute: Attribute | Attribute[],
   themes: string[],
@@ -39,66 +40,37 @@ const themeScript = (
     }
   }
 
-  function getSystemTheme() {
-    return window.matchMedia("(prefers-color-scheme: dark)").matches
-      ? "liquid-dark"
-      : "liquid-light";
-  }
-
-  function parseOldTheme(oldTheme: string): { baseTheme: string; isLiquid: boolean } {
-    if (oldTheme === "system") {
-      return { baseTheme: "system", isLiquid: false };
-    }
-    
-    if (oldTheme.startsWith("liquid-")) {
-      const base = oldTheme.replace("liquid-", "");
-      return { baseTheme: base, isLiquid: true };
-    }
-    
-    return { baseTheme: oldTheme, isLiquid: false };
-  }
-
   function computeTheme(baseTheme: string, isLiquid: boolean, systemIsDark: boolean): string {
     let resolvedBase: string;
-    
+
     if (baseTheme === "system") {
       resolvedBase = systemIsDark ? "dark" : "light";
     } else {
       resolvedBase = baseTheme;
     }
-    
+
     return isLiquid ? `liquid-${resolvedBase}` : resolvedBase;
   }
 
   function getStoredState(): { baseTheme: string; isLiquid: boolean } {
     try {
-      // Try to read from new storage format
-      const baseTheme = localStorage.getItem(`${storageKey}-base`);
-      const isLiquid = localStorage.getItem(`${storageKey}-liquid`);
-      
-      if (baseTheme !== null && isLiquid !== null) {
+      const storedBase = localStorage.getItem(`${storageKey}-base`);
+      const storedLiquid = localStorage.getItem(`${storageKey}-liquid`);
+
+      if (storedBase !== null && storedLiquid !== null) {
         return {
-          baseTheme,
-          isLiquid: isLiquid === "true"
+          baseTheme: storedBase,
+          isLiquid: storedLiquid === "true",
         };
       }
-      
-      const oldTheme = localStorage.getItem(storageKey);
-      if (oldTheme) {
-        return parseOldTheme(oldTheme);
-      }
-      
-      const defaultBaseTheme = enableSystem ? "system" : "light";
       return {
         baseTheme: defaultBaseTheme,
-        isLiquid: true
+        isLiquid: defaultIsLiquid,
       };
     } catch {
-      // Default values on error
-      const defaultBaseTheme = enableSystem ? "system" : "light";
       return {
-        baseTheme: defaultBaseTheme,
-        isLiquid: true
+        baseTheme: "system",
+        isLiquid: true,
       };
     }
   }
@@ -107,10 +79,10 @@ const themeScript = (
     updateDOM(forcedTheme);
   } else {
     const { baseTheme, isLiquid } = getStoredState();
-    
+
     const hasStoredBase = localStorage.getItem(`${storageKey}-base`) !== null;
     const hasStoredLiquid = localStorage.getItem(`${storageKey}-liquid`) !== null;
-    
+
     if (!hasStoredBase || !hasStoredLiquid) {
       try {
         if (!hasStoredBase) {
@@ -119,10 +91,11 @@ const themeScript = (
         if (!hasStoredLiquid) {
           localStorage.setItem(`${storageKey}-liquid`, String(isLiquid));
         }
-              } catch {
-        }
+      } catch {
+        // Ignore storage errors
+      }
     }
-    
+
     const systemIsDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
     const computedTheme = computeTheme(baseTheme, isLiquid, systemIsDark);
     updateDOM(computedTheme);
@@ -132,7 +105,6 @@ const themeScript = (
 interface ThemeScriptProps extends ThemeProviderProps {
   themes: string[];
   storageKey: string;
-  defaultTheme: string;
   attribute: Attribute | Attribute[];
   forcedTheme?: string;
   enableSystem?: boolean;
@@ -148,14 +120,16 @@ const ThemeScript = memo(
     attribute,
     enableSystem,
     enableColorScheme,
-    defaultTheme,
+    defaultBaseTheme,
+    defaultIsLiquid,
     value,
     themes,
     nonce,
     scriptProps,
   }: ThemeScriptProps) => {
     const scriptArgs = JSON.stringify([
-      defaultTheme,
+      defaultBaseTheme,
+      defaultIsLiquid,
       storageKey,
       attribute,
       themes,

package/src/ui/toolbar.tsx

@@ -29,13 +29,13 @@ export function Toolbar({ className, children, variant = "default", size = "md"
   return (
     <div
       className={cn(
-        "bg-bg-primary flex items-center gap-2 shadow-sm",
-        "liquid:liquid-bg",
+        "bg-bg-primary flex items-center gap-2",
+        "liquid:liquid-bg liquid:shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
         size === "sm" && "rounded-uk-md p-1.5",
         size === "md" && "rounded-uk-lg p-1.5",
         size === "lg" && "rounded-uk-xl p-1.5",
         variant === "floating" &&
-          "rounded-[var(--radius-uk-md)] bg-white shadow-lg dark:bg-gray-900" &&
+          "rounded-[var(--radius-uk-md)] bg-white dark:bg-gray-900" &&
           (size === "sm" ? "px-1 py-1" : size === "md" ? "px-2 py-2" : "px-3 py-3"),
         className,
       )}

package/dist/chunk-DVKONMS7.cjs

@@ -1,20 +0,0 @@
-'use strict';
-
-var chunkDREOOKO2_cjs = require('./chunk-DREOOKO2.cjs');
-var react = require('react');
-var jsxRuntime = require('react/jsx-runtime');
-
-var RadInput = react.forwardRef(function RadInput2({ value = 0, onChange, ...props }, ref) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    chunkDREOOKO2_cjs.InputNumbers,
-    {
-      ref,
-      value: [value],
-      onValuesChange: (values) => onChange?.(values[0]),
-      suffix: ["rad"],
-      ...props
-    }
-  );
-});
-
-exports.RadInput = RadInput;

package/dist/chunk-GPV4XELL.mjs

@@ -1,18 +0,0 @@
-import { InputNumbers } from './chunk-C4E2MFZB.mjs';
-import { forwardRef } from 'react';
-import { jsx } from 'react/jsx-runtime';
-
-var RadInput = forwardRef(function RadInput2({ value = 0, onChange, ...props }, ref) {
-  return /* @__PURE__ */ jsx(
-    InputNumbers,
-    {
-      ref,
-      value: [value],
-      onValuesChange: (values) => onChange?.(values[0]),
-      suffix: ["rad"],
-      ...props
-    }
-  );
-});
-
-export { RadInput };

package/dist/chunk-H2GERFBG.cjs

@@ -1,13 +0,0 @@
-'use strict';
-
-var chunkBMJX3SEO_cjs = require('./chunk-BMJX3SEO.cjs');
-var react = require('react');
-var jsxRuntime = require('react/jsx-runtime');
-
-var EulerRadInput = react.forwardRef(
-  function EulerRadInput2(props, ref) {
-    return /* @__PURE__ */ jsxRuntime.jsx(chunkBMJX3SEO_cjs.EulerInput, { ref, unit: "rad", ...props });
-  }
-);
-
-exports.EulerRadInput = EulerRadInput;