@elizaos/ui 2.0.0-beta.2 → 2.0.3-beta.3

package/components/ui/form.js

@@ -0,0 +1,98 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
+import { Controller, FormProvider, useFormContext, useFormState, } from "react-hook-form";
+import { cn } from "../../lib/utils.js";
+import { Label } from "./label.js";
+/**
+ * Form provider component that wraps react-hook-form's FormProvider.
+ * Provides form context to all child form components.
+ */
+const Form = FormProvider;
+const FormFieldContext = React.createContext({});
+/**
+ * Form field component that wraps react-hook-form's Controller.
+ * Provides field context and manages form field state.
+ *
+ * @param props - Controller props from react-hook-form
+ */
+const FormField = ({ ...props }) => {
+    const contextValue = React.useMemo(() => ({ name: props.name }), [props.name]);
+    return (_jsx(FormFieldContext.Provider, { value: contextValue, children: _jsx(Controller, { ...props }) }));
+};
+/**
+ * Hook to access form field state and IDs.
+ * Must be used within a FormField component.
+ *
+ * @returns Field state including id, name, formItemId, formDescriptionId, formMessageId, and validation state
+ * @throws Error if used outside of FormField context
+ */
+const useFormField = () => {
+    const fieldContext = React.useContext(FormFieldContext);
+    const itemContext = React.useContext(FormItemContext);
+    const { getFieldState } = useFormContext();
+    const formState = useFormState({ name: fieldContext.name });
+    const fieldState = getFieldState(fieldContext.name, formState);
+    if (!fieldContext) {
+        throw new Error("useFormField should be used within <FormField>");
+    }
+    const { id } = itemContext;
+    return {
+        id,
+        name: fieldContext.name,
+        formItemId: `${id}-form-item`,
+        formDescriptionId: `${id}-form-item-description`,
+        formMessageId: `${id}-form-item-message`,
+        ...fieldState,
+    };
+};
+const FormItemContext = React.createContext({});
+/**
+ * Form item container that provides unique ID context for form elements.
+ */
+function FormItem({ className, ...props }) {
+    const id = React.useId();
+    const contextValue = React.useMemo(() => ({ id }), [id]);
+    return (_jsx(FormItemContext.Provider, { value: contextValue, children: _jsx("div", { "data-slot": "form-item", className: cn("grid gap-2", className), ...props }) }));
+}
+/**
+ * Form label component with error state styling.
+ * Automatically associates with form field via useFormField hook.
+ */
+function FormLabel({ className, ...props }) {
+    const { error, formItemId } = useFormField();
+    return (_jsx(Label, { "data-slot": "form-label", "data-error": !!error, className: cn("data-[error=true]:text-destructive", className), htmlFor: formItemId, ...props }));
+}
+/**
+ * Form control wrapper that applies accessibility attributes.
+ * Uses Radix Slot to merge props with the form input element.
+ */
+function FormControl({ ...props }) {
+    const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+    return (_jsx(Slot, { "data-slot": "form-control", id: formItemId, "aria-describedby": !error
+            ? `${formDescriptionId}`
+            : `${formDescriptionId} ${formMessageId}`, "aria-invalid": !!error, ...props }));
+}
+/**
+ * Form description text displayed below the form control.
+ * Automatically associated with form field for accessibility.
+ */
+function FormDescription({ className, ...props }) {
+    const { formDescriptionId } = useFormField();
+    return (_jsx("p", { "data-slot": "form-description", id: formDescriptionId, className: cn("text-muted-foreground text-sm", className), ...props }));
+}
+/**
+ * Form error message component.
+ * Displays validation errors from react-hook-form or custom children.
+ * Returns null if no error message is available.
+ */
+function FormMessage({ className, ...props }) {
+    const { error, formMessageId } = useFormField();
+    const body = error ? String(error?.message ?? "") : props.children;
+    if (!body) {
+        return null;
+    }
+    return (_jsx("p", { "data-slot": "form-message", id: formMessageId, className: cn("text-destructive text-sm", className), ...props, children: body }));
+}
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField, };

package/components/ui/grid.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from "class-variance-authority";
 import * as React from "react";
 declare const gridVariants: (props?: ({
-    columns?: 2 | 3 | 4 | 12 | 6 | 1 | null | undefined;
+    columns?: 2 | 1 | 12 | 3 | 6 | 4 | null | undefined;
     spacing?: "none" | "sm" | "lg" | "md" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface GridProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof gridVariants> {

package/components/ui/hover-card.d.ts

@@ -0,0 +1,7 @@
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+import type * as React from "react";
+declare function HoverCard({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+declare function HoverCardTrigger({ ...props }: React.ComponentProps<typeof HoverCardPrimitive.Trigger>): import("react/jsx-runtime").JSX.Element;
+declare function HoverCardContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+export { HoverCard, HoverCardContent, HoverCardTrigger };
+//# sourceMappingURL=hover-card.d.ts.map

package/components/ui/hover-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hover-card.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/hover-card.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,kBAAkB,MAAM,4BAA4B,CAAC;AACjE,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,iBAAS,SAAS,CAAC,EACjB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,IAAI,CAAC,2CAEtD;AAED,iBAAS,gBAAgB,CAAC,EACxB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,2CAIzD;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,KAAgB,EAChB,UAAc,EACd,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,kBAAkB,CAAC,OAAO,CAAC,2CAezD;AAED,OAAO,EAAE,SAAS,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAC"}

package/components/ui/hover-card.js

@@ -0,0 +1,18 @@
+/**
+ * Hover card component displaying content on hover.
+ * Built on Radix UI primitives with configurable positioning and animations.
+ */
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+import { cn } from "../../lib/utils.js";
+function HoverCard({ ...props }) {
+    return _jsx(HoverCardPrimitive.Root, { "data-slot": "hover-card", ...props });
+}
+function HoverCardTrigger({ ...props }) {
+    return (_jsx(HoverCardPrimitive.Trigger, { "data-slot": "hover-card-trigger", ...props }));
+}
+function HoverCardContent({ className, align = "center", sideOffset = 4, ...props }) {
+    return (_jsx(HoverCardPrimitive.Portal, { "data-slot": "hover-card-portal", children: _jsx(HoverCardPrimitive.Content, { "data-slot": "hover-card-content", align: align, sideOffset: sideOffset, className: cn("bg-card text-txt data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-sm border border-border p-4 outline-hidden", className), ...props }) }));
+}
+export { HoverCard, HoverCardContent, HoverCardTrigger };

package/components/ui/input-group.d.ts

@@ -0,0 +1,25 @@
+import { type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { type ButtonProps } from "./button.js";
+declare const inputGroupVariants: (props?: ({
+    density?: "default" | "compact" | "relaxed" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface InputGroupProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof inputGroupVariants> {
+    hasError?: boolean;
+}
+declare const InputGroup: React.ForwardRefExoticComponent<InputGroupProps & React.RefAttributes<HTMLDivElement>>;
+declare const inputGroupAddonVariants: (props?: ({
+    align?: "inline-end" | "inline-start" | "block-end" | "block-start" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface InputGroupAddonProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof inputGroupAddonVariants> {
+}
+declare const InputGroupAddon: React.ForwardRefExoticComponent<InputGroupAddonProps & React.RefAttributes<HTMLDivElement>>;
+declare const InputGroupText: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & React.RefAttributes<HTMLSpanElement>>;
+declare const InputGroupInput: React.ForwardRefExoticComponent<React.InputHTMLAttributes<HTMLInputElement> & React.RefAttributes<HTMLInputElement>>;
+declare const InputGroupTextarea: React.ForwardRefExoticComponent<React.TextareaHTMLAttributes<HTMLTextAreaElement> & React.RefAttributes<HTMLTextAreaElement>>;
+export interface InputGroupButtonProps extends ButtonProps {
+    asChild?: boolean;
+}
+declare const InputGroupButton: React.ForwardRefExoticComponent<InputGroupButtonProps & React.RefAttributes<HTMLButtonElement>>;
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, inputGroupVariants, };
+//# sourceMappingURL=input-group.d.ts.map

package/components/ui/input-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-group.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/input-group.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAU,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAEpD,QAAA,MAAM,kBAAkB;;8EAYvB,CAAC;AAEF,MAAM,WAAW,eACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,CAAC,OAAO,kBAAkB,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,QAAA,MAAM,UAAU,wFAgBf,CAAC;AAGF,QAAA,MAAM,uBAAuB;;8EAa5B,CAAC;AAEF,MAAM,WAAW,oBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAC1C,YAAY,CAAC,OAAO,uBAAuB,CAAC;CAAG;AAEnD,QAAA,MAAM,eAAe,6FAUpB,CAAC;AAGF,QAAA,MAAM,cAAc,+GAUlB,CAAC;AAGH,QAAA,MAAM,eAAe,sHAcnB,CAAC;AAGH,QAAA,MAAM,kBAAkB,+HAatB,CAAC;AAGH,MAAM,WAAW,qBAAsB,SAAQ,WAAW;IACxD,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,QAAA,MAAM,gBAAgB,iGAapB,CAAC;AAGH,OAAO,EACL,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,eAAe,EACf,cAAc,EACd,kBAAkB,EAClB,kBAAkB,GACnB,CAAC"}

package/components/ui/input-group.js

@@ -0,0 +1,44 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+import { Button } from "./button.js";
+const inputGroupVariants = cva("group/input-group relative flex w-full items-stretch rounded-sm border border-input bg-bg text-sm transition-[border-color,box-shadow]     ", {
+    variants: {
+        density: {
+            default: "min-h-10",
+            compact: "min-h-9 text-xs",
+            relaxed: "min-h-11",
+        },
+    },
+    defaultVariants: { density: "default" },
+});
+const InputGroup = React.forwardRef(({ className, density, hasError, ...props }, ref) => (_jsx("div", { ref: ref, "data-slot": "input-group", "data-error": hasError ? "true" : undefined, className: cn(inputGroupVariants({ density }), hasError &&
+        "border-destructive  bg-[color-mix(in_srgb,var(--destructive)_3%,var(--card))]", "data-[align*=block]:flex-col", className), ...props })));
+InputGroup.displayName = "InputGroup";
+const inputGroupAddonVariants = cva("flex shrink-0 select-none items-center gap-1.5 px-3 text-muted [&_svg]:size-4 [&_svg]:shrink-0", {
+    variants: {
+        align: {
+            "inline-start": "rounded-s-sm",
+            "inline-end": "rounded-e-sm",
+            "block-start": "w-full rounded-t-sm border-b border-input px-3 py-1.5",
+            "block-end": "w-full rounded-b-sm border-t border-input px-3 py-1.5",
+        },
+    },
+    defaultVariants: { align: "inline-start" },
+});
+const InputGroupAddon = React.forwardRef(({ className, align, ...props }, ref) => (_jsx("div", { ref: ref, "data-slot": "input-group-addon", "data-align": align ?? "inline-start", className: cn(inputGroupAddonVariants({ align }), className), ...props })));
+InputGroupAddon.displayName = "InputGroupAddon";
+const InputGroupText = React.forwardRef(({ className, ...props }, ref) => (_jsx("span", { ref: ref, "data-slot": "input-group-text", className: cn("text-sm text-muted leading-none", className), ...props })));
+InputGroupText.displayName = "InputGroupText";
+const InputGroupInput = React.forwardRef(({ className, type, ...props }, ref) => (_jsx("input", { ref: ref, type: type, "data-slot": "input-group-input", className: cn("min-w-0 flex-1 bg-transparent px-3 py-2 text-sm text-txt placeholder:text-muted  disabled:cursor-not-allowed disabled:opacity-50", className), ...props })));
+InputGroupInput.displayName = "InputGroupInput";
+const InputGroupTextarea = React.forwardRef(({ className, ...props }, ref) => (_jsx("textarea", { ref: ref, "data-slot": "input-group-textarea", className: cn("min-w-0 flex-1 resize-none bg-transparent px-3 py-2 text-sm text-txt placeholder:text-muted  disabled:cursor-not-allowed disabled:opacity-50", className), ...props })));
+InputGroupTextarea.displayName = "InputGroupTextarea";
+const InputGroupButton = React.forwardRef(({ className, asChild, ...props }, ref) => {
+    const Comp = asChild ? Slot : Button;
+    return (_jsx(Comp, { ref: ref, "data-slot": "input-group-button", className: cn("rounded-sm", className), ...props }));
+});
+InputGroupButton.displayName = "InputGroupButton";
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, inputGroupVariants, };

package/components/ui/input.js

@@ -5,9 +5,9 @@ import { cn } from "../../lib/utils.js";
 const inputVariants = cva("w-full border text-sm transition-[border-color,box-shadow,background-color] disabled:cursor-not-allowed disabled:opacity-50", {
     variants: {
         variant: {
-            default: "flex rounded-md border-input bg-bg px-3 py-2 ring-offset-bg file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-            form: "rounded-2xl border-border/60 bg-bg/70 px-4 py-2 shadow-sm focus-visible:border-accent focus-visible:ring-1 focus-visible:ring-accent",
-            config: "border-border bg-card font-[var(--mono)] placeholder:text-muted placeholder:opacity-60 focus:border-accent focus:outline-none focus:ring-1 focus:ring-accent",
+            default: "flex rounded-sm border-input bg-bg px-3 py-2  file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted    ",
+            form: "rounded-sm border-border bg-bg px-4 py-2    ",
+            config: "border-border bg-card font-[var(--mono)] placeholder:text-muted placeholder:opacity-60    ",
         },
         density: {
             default: "h-10",

package/components/ui/new-action-button.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { type ButtonProps } from "./button";
+import { type ButtonProps } from "./button.js";
 export interface NewActionButtonProps extends Omit<ButtonProps, "variant"> {
 }
 declare const NewActionButton: React.ForwardRefExoticComponent<NewActionButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/components/ui/new-action-button.js

@@ -7,7 +7,7 @@ function normalizeNewActionLabel(children) {
     return React.Children.map(children, (child) => typeof child === "string" ? child.replace(/^\+\s*/, "") : child);
 }
 const NewActionButton = React.forwardRef(({ className, children, ...props }, ref) => {
-    return (_jsxs(Button, { ref: ref, variant: "surfaceAccent", className: cn("min-h-touch w-full justify-start rounded-xl px-4 py-2.5 text-sm font-medium", className), ...props, children: [_jsx(Plus, { className: "h-4 w-4" }), normalizeNewActionLabel(children)] }));
+    return (_jsxs(Button, { ref: ref, variant: "surfaceAccent", className: cn("min-h-touch w-full justify-start rounded-sm px-4 py-2.5 text-sm font-medium", className), ...props, children: [_jsx(Plus, { className: "h-4 w-4" }), normalizeNewActionLabel(children)] }));
 });
 NewActionButton.displayName = "NewActionButton";
 export { NewActionButton };

package/components/ui/pagination.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Pagination component system for navigating through pages.
+ * Provides previous/next navigation, page numbers, and ellipsis for large page counts.
+ */
+import type * as React from "react";
+import { type Button } from "./button.js";
+declare function Pagination({ className, ...props }: React.ComponentProps<"nav">): import("react/jsx-runtime").JSX.Element;
+declare function PaginationContent({ className, ...props }: React.ComponentProps<"ul">): import("react/jsx-runtime").JSX.Element;
+declare function PaginationItem({ ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
+type PaginationLinkProps = {
+    isActive?: boolean;
+} & Pick<React.ComponentProps<typeof Button>, "size"> & React.ComponentProps<"a">;
+declare function PaginationLink({ className, isActive, size, ...props }: PaginationLinkProps): import("react/jsx-runtime").JSX.Element;
+declare function PaginationPrevious({ className, ...props }: React.ComponentProps<typeof PaginationLink>): import("react/jsx-runtime").JSX.Element;
+declare function PaginationNext({ className, ...props }: React.ComponentProps<typeof PaginationLink>): import("react/jsx-runtime").JSX.Element;
+declare function PaginationEllipsis({ className, ...props }: React.ComponentProps<"span">): import("react/jsx-runtime").JSX.Element;
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, };
+//# sourceMappingURL=pagination.d.ts.map

package/components/ui/pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pagination.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/pagination.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAOH,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAEpC,OAAO,EAAE,KAAK,MAAM,EAAkB,MAAM,UAAU,CAAC;AAEvD,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CASvE;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAQ5B;AAED,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,IAAI,CAAC,2CAE/D;AAED,KAAK,mBAAmB,GAAG;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,MAAM,CAAC,GACnD,KAAK,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;AAE5B,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,QAAQ,EACR,IAAa,EACb,GAAG,KAAK,EACT,EAAE,mBAAmB,2CAgBrB;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,2CAY7C;AAED,iBAAS,cAAc,CAAC,EACtB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,cAAc,CAAC,2CAY7C;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,MAAM,CAAC,2CAY9B;AAED,OAAO,EACL,UAAU,EACV,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,EACd,cAAc,EACd,cAAc,EACd,kBAAkB,GACnB,CAAC"}

package/components/ui/pagination.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Pagination component system for navigating through pages.
+ * Provides previous/next navigation, page numbers, and ellipsis for large page counts.
+ */
+import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon, } from "lucide-react";
+import { cn } from "../../lib/utils.js";
+import { buttonVariants } from "./button.js";
+function Pagination({ className, ...props }) {
+    return (_jsx("nav", { "aria-label": "pagination", "data-slot": "pagination", className: cn("mx-auto flex w-full justify-center", className), ...props }));
+}
+function PaginationContent({ className, ...props }) {
+    return (_jsx("ul", { "data-slot": "pagination-content", className: cn("flex flex-row items-center gap-1", className), ...props }));
+}
+function PaginationItem({ ...props }) {
+    return _jsx("li", { "data-slot": "pagination-item", ...props });
+}
+function PaginationLink({ className, isActive, size = "icon", ...props }) {
+    return (_jsx("a", { "aria-current": isActive ? "page" : undefined, "data-slot": "pagination-link", "data-active": isActive, className: cn(buttonVariants({
+            variant: isActive ? "outline" : "ghost",
+            size,
+        }), className), ...props }));
+}
+function PaginationPrevious({ className, ...props }) {
+    return (_jsxs(PaginationLink, { "aria-label": "Go to previous page", size: "default", className: cn("gap-1 px-2.5 sm:pl-2.5", className), ...props, children: [_jsx(ChevronLeftIcon, {}), _jsx("span", { className: "hidden sm:block", children: "Previous" })] }));
+}
+function PaginationNext({ className, ...props }) {
+    return (_jsxs(PaginationLink, { "aria-label": "Go to next page", size: "default", className: cn("gap-1 px-2.5 sm:pr-2.5", className), ...props, children: [_jsx("span", { className: "hidden sm:block", children: "Next" }), _jsx(ChevronRightIcon, {})] }));
+}
+function PaginationEllipsis({ className, ...props }) {
+    return (_jsxs("span", { "aria-hidden": true, "data-slot": "pagination-ellipsis", className: cn("flex size-9 items-center justify-center", className), ...props, children: [_jsx(MoreHorizontalIcon, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "More pages" })] }));
+}
+export { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, };

package/components/ui/popover.js

@@ -4,6 +4,6 @@ import * as React from "react";
 import { cn } from "../../lib/utils.js";
 const Popover = PopoverPrimitive.Root;
 const PopoverTrigger = PopoverPrimitive.Trigger;
-const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { ref: ref, align: align, sideOffset: sideOffset, className: cn("z-50 w-72 rounded-md border border-border bg-card p-4 text-txt shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className), ...props }) })));
+const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => (_jsx(PopoverPrimitive.Portal, { children: _jsx(PopoverPrimitive.Content, { ref: ref, align: align, sideOffset: sideOffset, className: cn("z-50 w-72 rounded-sm border border-border bg-card p-4 text-txt outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", className), ...props }) })));
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 export { Popover, PopoverContent, PopoverTrigger };

package/components/ui/progress.d.ts

@@ -0,0 +1,5 @@
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import type * as React from "react";
+declare function Progress({ className, value, ...props }: React.ComponentProps<typeof ProgressPrimitive.Root>): import("react/jsx-runtime").JSX.Element;
+export { Progress };
+//# sourceMappingURL=progress.d.ts.map

package/components/ui/progress.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/progress.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,iBAAiB,MAAM,0BAA0B,CAAC;AAC9D,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,KAAK,EACL,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,IAAI,CAAC,2CAiBrD;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}

package/components/ui/progress.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { cn } from "../../lib/utils.js";
+function Progress({ className, value, ...props }) {
+    return (_jsx(ProgressPrimitive.Root, { "data-slot": "progress", className: cn("relative h-2.5 w-full overflow-hidden rounded-sm border border-border bg-bg-accent", className), ...props, children: _jsx(ProgressPrimitive.Indicator, { "data-slot": "progress-indicator", className: "h-full w-full flex-1 bg-primary transition-all", style: { transform: `translateX(-${100 - (value || 0)}%)` } }) }));
+}
+export { Progress };

package/components/ui/scroll-area.d.ts

@@ -0,0 +1,8 @@
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import type * as React from "react";
+declare function ScrollArea({ className, children, viewportClassName, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.Root> & {
+    viewportClassName?: string;
+}): import("react/jsx-runtime").JSX.Element;
+declare function ScrollBar({ className, orientation, ...props }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>): import("react/jsx-runtime").JSX.Element;
+export { ScrollArea, ScrollBar };
+//# sourceMappingURL=scroll-area.d.ts.map

package/components/ui/scroll-area.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-area.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/scroll-area.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,mBAAmB,MAAM,6BAA6B,CAAC;AACnE,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,QAAQ,EACR,iBAAiB,EACjB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,IAAI,CAAC,GAAG;IACzD,iBAAiB,CAAC,EAAE,MAAM,CAAC;CAC5B,2CAoBA;AAED,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,WAAwB,EACxB,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,mBAAmB,CAAC,mBAAmB,CAAC,2CAqBtE;AAED,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC"}

package/components/ui/scroll-area.js

@@ -0,0 +1,17 @@
+/**
+ * Scroll area component with custom scrollbar styling.
+ * Built on Radix UI primitives with horizontal and vertical scrollbar support.
+ */
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { cn } from "../../lib/utils.js";
+function ScrollArea({ className, children, viewportClassName, ...props }) {
+    return (_jsxs(ScrollAreaPrimitive.Root, { "data-slot": "scroll-area", className: cn("relative overflow-hidden", className), ...props, children: [_jsx(ScrollAreaPrimitive.Viewport, { "data-slot": "scroll-area-viewport", className: cn(" h-full w-full rounded-[inherit] transition-[color,box-shadow] outline-none  ", viewportClassName), children: children }), _jsx(ScrollBar, {}), _jsx(ScrollAreaPrimitive.Corner, {})] }));
+}
+function ScrollBar({ className, orientation = "vertical", ...props }) {
+    return (_jsx(ScrollAreaPrimitive.ScrollAreaScrollbar, { "data-slot": "scroll-area-scrollbar", orientation: orientation, className: cn("flex touch-none p-px transition-colors select-none", orientation === "vertical" &&
+            "h-full w-2.5 border-l border-l-transparent", orientation === "horizontal" &&
+            "h-2.5 flex-col border-t border-t-transparent", className), ...props, children: _jsx(ScrollAreaPrimitive.ScrollAreaThumb, { "data-slot": "scroll-area-thumb", className: "bg-border relative flex-1 rounded-sm" }) }));
+}
+export { ScrollArea, ScrollBar };

package/components/ui/segmented-control.js

@@ -1,10 +1,10 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../../lib/utils.js";
 export function SegmentedControl({ value, onValueChange, items, className, buttonClassName, activeButtonClassName, inactiveButtonClassName, ...props }) {
-    return (_jsx("div", { "data-segmented-control": true, className: cn("flex w-fit max-w-full self-start items-center gap-1 rounded-2xl border border-border/30 bg-card/40 p-1 backdrop-blur-sm", className), ...props, children: items.map((item) => {
+    return (_jsx("div", { "data-segmented-control": true, className: cn("flex w-fit max-w-full self-start items-center gap-1 rounded-sm border border-border bg-card p-1", className), ...props, children: items.map((item) => {
             const isActive = item.value === value;
-            return (_jsxs("button", { type: "button", "data-segmented-control-button": true, "data-testid": item.testId, disabled: item.disabled, onClick: () => !item.disabled && onValueChange(item.value), className: cn("relative inline-flex items-center gap-1.5 rounded-xl px-3.5 py-2 text-xs font-semibold transition-all", isActive
-                    ? "border border-accent/26 bg-accent/14 text-txt shadow-sm"
-                    : "border border-transparent text-muted hover:bg-card/60 hover:text-txt", buttonClassName, isActive ? activeButtonClassName : inactiveButtonClassName), "aria-pressed": isActive, children: [item.label, item.badge] }, item.value));
+            return (_jsxs("button", { type: "button", "data-segmented-control-button": true, "data-testid": item.testId, disabled: item.disabled, onClick: () => !item.disabled && onValueChange(item.value), className: cn("relative inline-flex items-center gap-1.5 rounded-sm px-3.5 py-2 text-xs font-semibold transition-colors", isActive
+                    ? "border border-accent/30 bg-accent-subtle text-txt "
+                    : "border border-transparent text-muted hover:bg-bg-hover hover:text-txt", buttonClassName, isActive ? activeButtonClassName : inactiveButtonClassName), "aria-pressed": isActive, children: [item.label, item.badge] }, item.value));
         }) }));
 }

package/components/ui/select.js

@@ -7,20 +7,20 @@ import { cn } from "../../lib/utils.js";
 const Select = SelectPrimitive.Root;
 const SelectGroup = SelectPrimitive.Group;
 const SelectValue = SelectPrimitive.Value;
-const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn("flex h-10 w-full items-center justify-between rounded-md border border-input bg-bg px-3 py-2 text-sm ring-offset-bg placeholder:text-muted focus:outline-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDown, { className: "h-4 w-4 opacity-50" }) })] })));
+const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Trigger, { ref: ref, className: cn("flex h-10 w-full items-center justify-between rounded-sm border border-input bg-bg px-3 py-2 text-sm  placeholder:text-muted      disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDown, { className: "h-4 w-4 opacity-50" }) })] })));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
 const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollUpButton, { ref: ref, className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: _jsx(ChevronUp, { className: "h-4 w-4" }) })));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
 const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.ScrollDownButton, { ref: ref, className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: _jsx(ChevronDown, { className: "h-4 w-4" }) })));
 SelectScrollDownButton.displayName =
     SelectPrimitive.ScrollDownButton.displayName;
-const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { ref: ref, "data-floating-layer": CONFIG_SELECT_FLOATING_LAYER_NAME, className: cn("relative z-[12000] max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-card text-txt shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", position === "popper" &&
+const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { ref: ref, "data-floating-layer": CONFIG_SELECT_FLOATING_LAYER_NAME, className: cn("relative z-[12000] max-h-96 min-w-[8rem] overflow-hidden rounded-sm border border-border bg-card text-txt data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2", position === "popper" &&
             "w-[var(--radix-select-trigger-width)] min-w-[var(--radix-select-trigger-width)] data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn("p-1", position === "popper" &&
                     "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] max-w-[var(--radix-select-trigger-width)]"), children: children }), _jsx(SelectScrollDownButton, {})] }) })));
 SelectContent.displayName = SelectPrimitive.Content.displayName;
 const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Label, { ref: ref, className: cn("py-1.5 pl-2 pr-2 text-sm font-semibold", className), ...props })));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Item, { ref: ref, className: cn("flex w-full cursor-default select-none items-center gap-1.5 rounded-sm py-1.5 pl-2 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-fg data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [_jsx(SelectPrimitive.ItemText, { className: "min-w-0 flex-1", children: children }), _jsx("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-3 w-3" }) }) })] })));
+const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs(SelectPrimitive.Item, { ref: ref, className: cn("flex w-full cursor-default select-none items-center gap-1.5 rounded-sm py-1.5 pl-2 pr-2 text-sm outline-none   data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className), ...props, children: [_jsx(SelectPrimitive.ItemText, { className: "min-w-0 flex-1", children: children }), _jsx("span", { className: "flex h-4 w-4 shrink-0 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(Check, { className: "h-3 w-3" }) }) })] })));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (_jsx(SelectPrimitive.Separator, { ref: ref, className: cn("-mx-1 my-1 h-px bg-muted", className), ...props })));
 SelectSeparator.displayName = SelectPrimitive.Separator.displayName;

package/components/ui/settings-controls.d.ts

@@ -1,41 +1,40 @@
-import type * as React from "react";
-import { FieldDescription, FieldLabel } from "./field";
-import { type InputProps } from "./input";
-import { SelectTrigger } from "./select";
-import { type TextareaProps } from "./textarea";
-export type SettingsSelectTriggerVariant = "compact" | "filter" | "soft" | "toolbar";
-export type SettingsInputVariant = "compact" | "filter";
+import * as React from "react";
+import { FieldDescription, FieldLabel } from "./field.js";
+import { type InputProps } from "./input.js";
+import { SelectTrigger } from "./select.js";
+import { type TextareaProps } from "./textarea.js";
+export type SettingsSelectTriggerVariant = "compact" | "filter" | "soft" | "toolbar" | "touch";
+export type SettingsInputVariant = "compact" | "filter" | "touch";
 export interface SettingsSelectTriggerProps extends React.ComponentPropsWithoutRef<typeof SelectTrigger> {
     variant?: SettingsSelectTriggerVariant;
     className?: string;
     children?: React.ReactNode;
 }
-export declare function SettingsSelectTrigger({ className, variant, ...props }: SettingsSelectTriggerProps): import("react/jsx-runtime").JSX.Element;
+export declare const SettingsSelectTrigger: React.ForwardRefExoticComponent<SettingsSelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
 export interface SettingsInputProps extends Omit<InputProps, "variant"> {
     variant?: SettingsInputVariant;
 }
-export declare function SettingsInput({ className, variant, ...props }: SettingsInputProps): import("react/jsx-runtime").JSX.Element;
+export declare const SettingsInput: React.ForwardRefExoticComponent<SettingsInputProps & React.RefAttributes<HTMLInputElement>>;
 export interface SettingsTextareaProps extends TextareaProps {
 }
-export declare function SettingsTextarea({ className, ...props }: SettingsTextareaProps): import("react/jsx-runtime").JSX.Element;
+export declare const SettingsTextarea: React.ForwardRefExoticComponent<SettingsTextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 export interface SettingsSegmentedGroupProps extends React.HTMLAttributes<HTMLDivElement> {
 }
-export declare function SettingsSegmentedGroup({ className, ...props }: SettingsSegmentedGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare const SettingsSegmentedGroup: React.ForwardRefExoticComponent<SettingsSegmentedGroupProps & React.RefAttributes<HTMLDivElement>>;
 export interface SettingsMutedTextProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 export declare function SettingsMutedText({ className, ...props }: SettingsMutedTextProps): import("react/jsx-runtime").JSX.Element;
-declare function SettingsField({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
-declare function SettingsFieldLabel({ className, ...props }: React.ComponentPropsWithoutRef<typeof FieldLabel>): import("react/jsx-runtime").JSX.Element;
-declare function SettingsFieldDescription({ className, ...props }: React.ComponentPropsWithoutRef<typeof FieldDescription>): import("react/jsx-runtime").JSX.Element;
+export declare function SettingsField({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare function SettingsFieldLabel({ className, ...props }: React.ComponentPropsWithoutRef<typeof FieldLabel>): import("react/jsx-runtime").JSX.Element;
+export declare function SettingsFieldDescription({ className, ...props }: React.ComponentPropsWithoutRef<typeof FieldDescription>): import("react/jsx-runtime").JSX.Element;
 export declare const SettingsControls: {
-    Input: typeof SettingsInput;
-    SelectTrigger: typeof SettingsSelectTrigger;
-    Textarea: typeof SettingsTextarea;
-    SegmentedGroup: typeof SettingsSegmentedGroup;
+    Input: React.ForwardRefExoticComponent<SettingsInputProps & React.RefAttributes<HTMLInputElement>>;
+    SelectTrigger: React.ForwardRefExoticComponent<SettingsSelectTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+    Textarea: React.ForwardRefExoticComponent<SettingsTextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+    SegmentedGroup: React.ForwardRefExoticComponent<SettingsSegmentedGroupProps & React.RefAttributes<HTMLDivElement>>;
     MutedText: typeof SettingsMutedText;
     Field: typeof SettingsField;
     FieldLabel: typeof SettingsFieldLabel;
     FieldDescription: typeof SettingsFieldDescription;
 };
-export {};
 //# sourceMappingURL=settings-controls.d.ts.map

package/components/ui/settings-controls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings-controls.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/settings-controls.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC,OAAO,EAAS,gBAAgB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC9D,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAE1D,MAAM,MAAM,4BAA4B,GACpC,SAAS,GACT,QAAQ,GACR,MAAM,GACN,SAAS,CAAC;AAEd,MAAM,MAAM,oBAAoB,GAAG,SAAS,GAAG,QAAQ,CAAC;AA0BxD,MAAM,WAAW,0BACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC;IAC5D,OAAO,CAAC,EAAE,4BAA4B,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,wBAAgB,qBAAqB,CAAC,EACpC,SAAS,EACT,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,0BAA0B,2CAO5B;AAED,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC;IACrE,OAAO,CAAC,EAAE,oBAAoB,CAAC;CAChC;AAED,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,OAAmB,EACnB,GAAG,KAAK,EACT,EAAE,kBAAkB,2CAOpB;AAED,MAAM,WAAW,qBAAsB,SAAQ,aAAa;CAAG;AAE/D,wBAAgB,gBAAgB,CAAC,EAC/B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,qBAAqB,2CAUvB;AAED,MAAM,WAAW,2BACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEjD,wBAAgB,sBAAsB,CAAC,EACrC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,2BAA2B,2CAU7B;AAED,MAAM,WAAW,sBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEjD,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAIxB;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,2CAEtC;AAED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,wBAAwB,CAAC,OAAO,UAAU,CAAC,2CAOnD;AAED,iBAAS,wBAAwB,CAAC,EAChC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,2CAOzD;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;CAS5B,CAAC"}
+{"version":3,"file":"settings-controls.d.ts","sourceRoot":"","sources":["../../../../../../src/components/ui/settings-controls.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAS,gBAAgB,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC9D,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,EAAY,KAAK,aAAa,EAAE,MAAM,YAAY,CAAC;AAE1D,MAAM,MAAM,4BAA4B,GACpC,SAAS,GACT,QAAQ,GACR,MAAM,GACN,SAAS,GACT,OAAO,CAAC;AAEZ,MAAM,MAAM,oBAAoB,GAAG,SAAS,GAAG,QAAQ,GAAG,OAAO,CAAC;AAoClE,MAAM,WAAW,0BACf,SAAQ,KAAK,CAAC,wBAAwB,CAAC,OAAO,aAAa,CAAC;IAC5D,OAAO,CAAC,EAAE,4BAA4B,CAAC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,qBAAqB,sGAchC,CAAC;AAEH,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,UAAU,EAAE,SAAS,CAAC;IACrE,OAAO,CAAC,EAAE,oBAAoB,CAAC;CAChC;AAED,eAAO,MAAM,aAAa,6FAWxB,CAAC;AAEH,MAAM,WAAW,qBAAsB,SAAQ,aAAa;CAAG;AAE/D,eAAO,MAAM,gBAAgB,mGAc3B,CAAC;AAEH,MAAM,WAAW,2BACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEjD,eAAO,MAAM,sBAAsB,oGAcjC,CAAC;AAEH,MAAM,WAAW,sBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEjD,wBAAgB,iBAAiB,CAAC,EAChC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,sBAAsB,2CAIxB;AAED,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,2CAEtC;AAED,wBAAgB,kBAAkB,CAAC,EACjC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,wBAAwB,CAAC,OAAO,UAAU,CAAC,2CAOnD;AAED,wBAAgB,wBAAwB,CAAC,EACvC,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,wBAAwB,CAAC,OAAO,gBAAgB,CAAC,2CAOzD;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;CAS5B,CAAC"}

package/components/ui/settings-controls.js

@@ -1,51 +1,60 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
 import { cn } from "../../lib/utils.js";
 import { Field, FieldDescription, FieldLabel } from "./field.js";
 import { Input } from "./input.js";
 import { SelectTrigger } from "./select.js";
 import { Textarea } from "./textarea.js";
+// 44px-tall, finger-friendly control. This is the default vocabulary for the
+// redesigned settings surface — every editable control inside a SettingsRow
+// uses the "touch" variant so mobile editing has real tap targets.
+const TOUCH_CONTROL_CLASS = "h-11 rounded-md border border-border bg-card px-3.5 text-sm text-txt transition-[border-color,box-shadow,background-color]   ";
 function settingsSelectTriggerClassName(variant) {
     switch (variant) {
+        case "touch":
+            return `${TOUCH_CONTROL_CLASS} text-left`;
         case "filter":
-            return "h-10 rounded-xl border border-border/50 bg-bg/80 px-3 py-2 text-left text-sm text-txt shadow-sm transition-[border-color,box-shadow,background-color] focus-visible:border-accent focus-visible:ring-1 focus-visible:ring-accent";
+            return "h-10 rounded-sm border border-border/50 bg-bg/80 px-3 py-2 text-left text-sm text-txt transition-[border-color,box-shadow,background-color]   ";
         case "soft":
-            return "rounded-lg border border-border bg-bg px-2.5 py-1.5 text-xs shadow-sm transition-[border-color,box-shadow,background-color] focus-visible:border-accent focus-visible:ring-1 focus-visible:ring-accent";
+            return "rounded-sm border border-border bg-bg px-2.5 py-1.5 text-xs transition-[border-color,box-shadow,background-color]   ";
         case "toolbar":
-            return "h-11 rounded-xl border-border/60 bg-bg/70 text-left shadow-sm";
+            return "h-11 rounded-sm border-border/60 bg-bg/70 text-left ";
         default:
-            return "h-9 rounded-lg border border-border bg-card px-2.5 py-1.5 text-xs shadow-sm transition-[border-color,box-shadow,background-color] focus-visible:border-accent focus-visible:ring-1 focus-visible:ring-accent";
+            return "h-9 rounded-sm border border-border bg-card px-2.5 py-1.5 text-xs transition-[border-color,box-shadow,background-color]   ";
     }
 }
 function settingsInputClassName(variant) {
     switch (variant) {
+        case "touch":
+            return TOUCH_CONTROL_CLASS;
         case "filter":
-            return "h-10 rounded-xl border-border/50 bg-bg/80 text-sm text-txt shadow-sm";
+            return "h-10 rounded-sm border-border/50 bg-bg/80 text-sm text-txt ";
         default:
-            return "h-9 rounded-lg border border-border bg-card px-3 py-2 text-xs shadow-sm transition-[border-color,box-shadow,background-color] focus-visible:border-accent focus-visible:ring-1 focus-visible:ring-accent";
+            return "h-9 rounded-sm border border-border bg-card px-3 py-2 text-xs transition-[border-color,box-shadow,background-color]   ";
     }
 }
-export function SettingsSelectTrigger({ className, variant = "compact", ...props }) {
-    return (_jsx(SelectTrigger, { className: cn(settingsSelectTriggerClassName(variant), className), ...props }));
-}
-export function SettingsInput({ className, variant = "compact", ...props }) {
-    return (_jsx(Input, { className: cn(settingsInputClassName(variant), className), ...props }));
-}
-export function SettingsTextarea({ className, ...props }) {
-    return (_jsx(Textarea, { className: cn("w-full rounded-xl border border-border/60 bg-bg/55 px-3 py-2 text-xs-tight font-mono shadow-sm transition-[border-color,box-shadow,background-color] focus-visible:border-accent focus-visible:ring-1 focus-visible:ring-accent", className), ...props }));
-}
-export function SettingsSegmentedGroup({ className, ...props }) {
-    return (_jsx("div", { className: cn("flex shrink-0 gap-1 rounded-xl border border-border bg-card/50 p-1", className), ...props }));
-}
+export const SettingsSelectTrigger = React.forwardRef(function SettingsSelectTrigger({ className, variant = "compact", ...props }, ref) {
+    return (_jsx(SelectTrigger, { ref: ref, className: cn(settingsSelectTriggerClassName(variant), className), ...props }));
+});
+export const SettingsInput = React.forwardRef(function SettingsInput({ className, variant = "compact", ...props }, ref) {
+    return (_jsx(Input, { ref: ref, className: cn(settingsInputClassName(variant), className), ...props }));
+});
+export const SettingsTextarea = React.forwardRef(function SettingsTextarea({ className, ...props }, ref) {
+    return (_jsx(Textarea, { ref: ref, className: cn("w-full rounded-sm border border-border/60 bg-bg/55 px-3 py-2 text-xs-tight font-mono transition-[border-color,box-shadow,background-color]   ", className), ...props }));
+});
+export const SettingsSegmentedGroup = React.forwardRef(function SettingsSegmentedGroup({ className, ...props }, ref) {
+    return (_jsx("div", { ref: ref, className: cn("flex shrink-0 gap-1 rounded-sm border border-border bg-card/50 p-1", className), ...props }));
+});
 export function SettingsMutedText({ className, ...props }) {
     return (_jsx("div", { className: cn("text-xs-tight text-muted", className), ...props }));
 }
-function SettingsField({ className, ...props }) {
+export function SettingsField({ className, ...props }) {
     return _jsx(Field, { className: cn("gap-1.5", className), ...props });
 }
-function SettingsFieldLabel({ className, ...props }) {
+export function SettingsFieldLabel({ className, ...props }) {
     return (_jsx(FieldLabel, { className: cn("text-xs font-semibold text-txt", className), ...props }));
 }
-function SettingsFieldDescription({ className, ...props }) {
+export function SettingsFieldDescription({ className, ...props }) {
     return (_jsx(FieldDescription, { className: cn("text-xs-tight text-muted", className), ...props }));
 }
 export const SettingsControls = {