@iloveagents/foundry-web-ui 0.3.0 → 0.4.0

package/src/components/collection-filter-bar.tsx

@@ -1,168 +0,0 @@
-import { Check, Filter, X } from "lucide-react";
-
-import { Button } from "@iloveagents/foundry-web-primitives";
-import { Checkbox } from "@iloveagents/foundry-web-primitives";
-import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover.tsx";
-import { cn } from "@iloveagents/foundry-web-primitives";
-
-export type CollectionFilterValue = string | string[] | boolean | undefined;
-
-export interface CollectionFilterOption {
-  value: string;
-  label: string;
-}
-
-export interface CollectionFilterDefinition {
-  key: string;
-  label: string;
-  type: "single" | "multi" | "boolean";
-  options?: CollectionFilterOption[];
-  trueLabel?: string;
-}
-
-function activeCount(value: CollectionFilterValue, type: CollectionFilterDefinition["type"]) {
-  if (type === "boolean") return value ? 1 : 0;
-  if (Array.isArray(value)) return value.length;
-  return value ? 1 : 0;
-}
-
-export function CollectionFilterBar({
-  filters,
-  values,
-  onValueChange,
-  onClearAll,
-  className,
-}: {
-  filters: CollectionFilterDefinition[];
-  values: Record<string, CollectionFilterValue>;
-  onValueChange: (key: string, value: CollectionFilterValue) => void;
-  onClearAll?: () => void;
-  className?: string;
-}) {
-  const hasActiveFilters = filters.some((filter) => activeCount(values[filter.key], filter.type) > 0);
-
-  return (
-    <div className={cn("flex flex-wrap items-center gap-2", className)}>
-      {filters.map((filter) => {
-        const count = activeCount(values[filter.key], filter.type);
-        return (
-          <Popover key={filter.key}>
-            <PopoverTrigger asChild>
-              <Button
-                type="button"
-                variant="outline"
-                size="sm"
-                className={cn(
-                  "rounded-xl border-border/45 bg-background/65 shadow-none hover:bg-muted/26",
-                  count > 0 && "border-primary/18 bg-primary/7 text-foreground hover:bg-primary/10",
-                )}
-              >
-                <Filter className="size-4" />
-                <span>{filter.label}</span>
-                {count > 0 ? (
-                  <span className="rounded-full bg-primary/10 px-1.5 py-0.5 text-[11px] font-semibold text-primary">
-                    {count}
-                  </span>
-                ) : null}
-              </Button>
-            </PopoverTrigger>
-            <PopoverContent align="start" className="w-64 rounded-2xl border-border/45 bg-popover/95 p-2 shadow-lg">
-              <div className="px-2 pb-2 pt-1 text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground">
-                {filter.label}
-              </div>
-              {filter.type === "boolean" ? (
-                <button
-                  type="button"
-                  onClick={() => onValueChange(filter.key, values[filter.key] ? undefined : true)}
-                  className={cn(
-                    "flex w-full items-center gap-3 rounded-xl px-3 py-2 text-left text-sm transition-colors",
-                    values[filter.key] ? "bg-primary/8 text-foreground" : "hover:bg-accent",
-                  )}
-                >
-                  <Checkbox checked={Boolean(values[filter.key])} />
-                  <span>{filter.trueLabel ?? `Only ${filter.label.toLowerCase()}`}</span>
-                </button>
-              ) : null}
-              {filter.type === "single" ? (
-                <div className="space-y-1">
-                  <button
-                    type="button"
-                    onClick={() => onValueChange(filter.key, undefined)}
-                    className="flex w-full items-center justify-between rounded-xl px-3 py-2 text-left text-sm transition-colors hover:bg-accent"
-                  >
-                    <span>Any</span>
-                    <Check
-                      className={cn(
-                        "size-4 text-primary",
-                        values[filter.key] == null ? "opacity-100" : "opacity-0",
-                      )}
-                    />
-                  </button>
-                  {filter.options?.map((option) => (
-                    <button
-                      key={option.value}
-                      type="button"
-                      onClick={() => onValueChange(filter.key, option.value)}
-                      className="flex w-full items-center justify-between rounded-xl px-3 py-2 text-left text-sm transition-colors hover:bg-accent"
-                    >
-                      <span>{option.label}</span>
-                      <Check
-                        className={cn(
-                          "size-4 text-primary",
-                          values[filter.key] === option.value ? "opacity-100" : "opacity-0",
-                        )}
-                      />
-                    </button>
-                  ))}
-                </div>
-              ) : null}
-              {filter.type === "multi" ? (
-                <div className="space-y-1">
-                  {filter.options?.map((option) => {
-                    const current = Array.isArray(values[filter.key])
-                      ? (values[filter.key] as string[])
-                      : [];
-                    const checked = current.includes(option.value);
-                    return (
-                      <button
-                        key={option.value}
-                        type="button"
-                        onClick={() =>
-                          onValueChange(
-                            filter.key,
-                            checked
-                              ? current.filter((item: string) => item !== option.value)
-                              : [...current, option.value],
-                          )
-                        }
-                        className={cn(
-                          "flex w-full items-center gap-3 rounded-xl px-3 py-2 text-left text-sm transition-colors",
-                          checked ? "bg-primary/8 text-foreground" : "hover:bg-accent",
-                        )}
-                      >
-                        <Checkbox checked={checked} />
-                        <span>{option.label}</span>
-                      </button>
-                    );
-                  })}
-                </div>
-              ) : null}
-            </PopoverContent>
-          </Popover>
-        );
-      })}
-      {hasActiveFilters && onClearAll ? (
-        <Button
-          type="button"
-          variant="ghost"
-          size="sm"
-          onClick={onClearAll}
-          className="rounded-xl text-muted-foreground hover:bg-muted/26"
-        >
-          <X className="size-4" />
-          <span>Clear</span>
-        </Button>
-      ) : null}
-    </div>
-  );
-}

package/src/components/collection-search-input.tsx

@@ -1,41 +0,0 @@
-import { Search, X } from "lucide-react";
-
-import { Button } from "@iloveagents/foundry-web-primitives";
-import { Input } from "@iloveagents/foundry-web-primitives";
-import { cn } from "@iloveagents/foundry-web-primitives";
-
-export function CollectionSearchInput({
-  value,
-  onValueChange,
-  placeholder = "Search...",
-  className,
-}: {
-  value: string;
-  onValueChange: (value: string) => void;
-  placeholder?: string;
-  className?: string;
-}) {
-  return (
-    <div className={cn("relative min-w-[16rem] flex-1", className)}>
-      <Search className="pointer-events-none absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
-      <Input
-        value={value}
-        onChange={(event) => onValueChange(event.target.value)}
-        placeholder={placeholder}
-        className="h-10 rounded-xl border-border/45 bg-background/72 pl-9 pr-10 shadow-none hover:bg-background/82 focus:border-primary/20 focus:ring-primary/10"
-      />
-      {value ? (
-        <Button
-          type="button"
-          variant="ghost"
-          size="icon"
-          onClick={() => onValueChange("")}
-          className="absolute right-1 top-1/2 size-8 -translate-y-1/2 rounded-lg text-muted-foreground"
-        >
-          <X className="size-4" />
-          <span className="sr-only">Clear search</span>
-        </Button>
-      ) : null}
-    </div>
-  );
-}

package/src/components/collection-skeleton.tsx

@@ -1,55 +0,0 @@
-import { cn } from "@iloveagents/foundry-web-primitives";
-
-import type { CollectionViewMode } from "./collection-view-toggle.tsx";
-
-export function CollectionSkeleton({
-  view,
-  rows = 8,
-  className,
-}: {
-  view: CollectionViewMode;
-  rows?: number;
-  className?: string;
-}) {
-  if (view === "table") {
-    return (
-      <div className={cn("overflow-hidden rounded-[1.5rem] bg-background/65 ring-1 ring-border/35", className)}>
-        <div className="grid grid-cols-4 gap-4 border-b border-border/40 bg-muted/28 px-5 py-4">
-          {Array.from({ length: 4 }).map((_, index) => (
-            <div key={index} className="h-3.5 animate-pulse rounded bg-muted" />
-          ))}
-        </div>
-        <div className="divide-y divide-border/35">
-          {Array.from({ length: rows }).map((_, index) => (
-            <div key={index} className="grid grid-cols-4 gap-4 px-5 py-4">
-              {Array.from({ length: 4 }).map((_, cellIndex) => (
-                <div key={cellIndex} className="h-4 animate-pulse rounded bg-muted/80" />
-              ))}
-            </div>
-          ))}
-        </div>
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className={cn(
-        view === "tiles"
-          ? "grid gap-3 [grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr))]"
-          : "grid gap-4 [grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr))]",
-        className,
-      )}
-    >
-      {Array.from({ length: rows }).map((_, index) => (
-        <div
-          key={index}
-          className={cn(
-            "animate-pulse rounded-[1.5rem] bg-card/80 ring-1 ring-border/35",
-            view === "tiles" ? "h-28" : "h-40",
-          )}
-        />
-      ))}
-    </div>
-  );
-}

package/src/components/collection-sort-menu.tsx

@@ -1,62 +0,0 @@
-import { ArrowUpDown, Check } from "lucide-react";
-
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuTrigger,
-} from "../ui/dropdown-menu.tsx";
-import { Button } from "@iloveagents/foundry-web-primitives";
-import { cn } from "@iloveagents/foundry-web-primitives";
-
-export interface CollectionSortOption {
-  value: string;
-  label: string;
-}
-
-export function CollectionSortMenu({
-  options,
-  value,
-  onValueChange,
-  className,
-}: {
-  options: CollectionSortOption[];
-  value: string;
-  onValueChange: (value: string) => void;
-  className?: string;
-}) {
-  const active = options.find((option) => option.value === value) ?? options[0];
-
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button
-          type="button"
-          variant="outline"
-          size="sm"
-          className={cn(
-            "rounded-xl border-border/45 bg-background/65 shadow-none hover:bg-muted/26",
-            className,
-          )}
-        >
-          <ArrowUpDown className="size-4" />
-          <span>{active?.label ?? "Sort"}</span>
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align="end" className="w-56 rounded-xl border-border/45 bg-popover/95 shadow-lg">
-        {options.map((option) => (
-          <DropdownMenuItem
-            key={option.value}
-            onClick={() => onValueChange(option.value)}
-            className="flex items-center justify-between gap-3"
-          >
-            <span>{option.label}</span>
-            <Check
-              className={cn("size-4 text-primary", value === option.value ? "opacity-100" : "opacity-0")}
-            />
-          </DropdownMenuItem>
-        ))}
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}

package/src/components/collection-surface.tsx

@@ -1,46 +0,0 @@
-import type { ComponentPropsWithoutRef, ReactNode } from "react";
-
-import { cn } from "@iloveagents/foundry-web-primitives";
-
-export function CollectionSurface({
-  toolbar,
-  bordered = false,
-  backgrounded = true,
-  className,
-  toolbarClassName,
-  contentClassName,
-  children,
-  ...props
-}: ComponentPropsWithoutRef<"section"> & {
-  toolbar?: ReactNode;
-  bordered?: boolean;
-  backgrounded?: boolean;
-  toolbarClassName?: string;
-  contentClassName?: string;
-}) {
-  return (
-    <section
-      className={cn(
-        "w-full min-w-0 overflow-hidden rounded-[1.75rem]",
-        backgrounded && "bg-card/60 shadow-[0_12px_36px_-24px_rgb(15_23_42/0.18)] backdrop-blur-sm",
-        bordered && "ring-1 ring-border/45",
-        className,
-      )}
-      {...props}
-    >
-      {toolbar ? (
-        <div
-          className={cn(
-            "sticky top-0 z-10 px-4 py-4 sm:px-5",
-            backgrounded && "bg-muted/18 backdrop-blur",
-            bordered && "border-b border-border/45",
-            toolbarClassName,
-          )}
-        >
-          {toolbar}
-        </div>
-      ) : null}
-      <div className={cn("p-4 sm:p-5", contentClassName)}>{children}</div>
-    </section>
-  );
-}

package/src/components/collection-toolbar.tsx

@@ -1,33 +0,0 @@
-import type { ReactNode } from "react";
-
-import { cn } from "@iloveagents/foundry-web-primitives";
-
-export function CollectionToolbar({
-  search,
-  filters,
-  sort,
-  viewToggle,
-  actions,
-  className,
-}: {
-  search?: ReactNode;
-  filters?: ReactNode;
-  sort?: ReactNode;
-  viewToggle?: ReactNode;
-  actions?: ReactNode;
-  className?: string;
-}) {
-  return (
-    <div className={cn("flex flex-col gap-2.5", className)}>
-      <div className="flex flex-col gap-2.5 lg:flex-row lg:items-center">
-        <div className="flex min-w-0 flex-1 items-center gap-3">{search}</div>
-        <div className="flex flex-wrap items-center gap-2">
-          {sort}
-          {viewToggle}
-          {actions}
-        </div>
-      </div>
-      {filters ? <div className="flex flex-wrap items-center gap-2">{filters}</div> : null}
-    </div>
-  );
-}

package/src/components/collection-view-toggle.tsx

@@ -1,61 +0,0 @@
-import { LayoutGrid, Rows3, TableProperties } from "lucide-react";
-
-import { Button } from "@iloveagents/foundry-web-primitives";
-import { cn } from "@iloveagents/foundry-web-primitives";
-
-export type CollectionViewMode = "table" | "grid" | "tiles";
-
-const VIEW_OPTIONS: Array<{
-  value: CollectionViewMode;
-  label: string;
-  icon: typeof TableProperties;
-}> = [
-  { value: "table", label: "Table", icon: TableProperties },
-  { value: "grid", label: "Grid", icon: LayoutGrid },
-  { value: "tiles", label: "Tiles", icon: Rows3 },
-];
-
-export function CollectionViewToggle({
-  value,
-  onValueChange,
-  views = ["table", "grid"],
-  className,
-}: {
-  value: CollectionViewMode;
-  onValueChange: (value: CollectionViewMode) => void;
-  views?: CollectionViewMode[];
-  className?: string;
-}) {
-  return (
-    <div
-      className={cn(
-        "inline-flex items-center rounded-xl bg-muted/26 p-1 ring-1 ring-border/40",
-        className,
-      )}
-    >
-      {VIEW_OPTIONS.filter((option) => views.includes(option.value)).map((option) => {
-        const Icon = option.icon;
-        const active = value === option.value;
-        return (
-          <Button
-            key={option.value}
-            type="button"
-            aria-label={option.label}
-            variant={active ? "secondary" : "ghost"}
-            size="sm"
-            onClick={() => onValueChange(option.value)}
-            className={cn(
-              "rounded-lg px-2.5 text-muted-foreground hover:bg-background/70 hover:text-foreground",
-              active &&
-                "bg-background text-foreground ring-1 ring-primary/35 shadow-[0_1px_2px_rgb(15_23_42/0.08)] hover:bg-background",
-            )}
-          >
-            <Icon className="size-4" />
-            <span className="hidden sm:inline">{option.label}</span>
-            <span className="sr-only sm:hidden">{option.label}</span>
-          </Button>
-        );
-      })}
-    </div>
-  );
-}

package/src/components/composer-submit-bridge.tsx

@@ -1,19 +0,0 @@
-import { useEffect } from "react";
-import { useComposerRuntime } from "@assistant-ui/react";
-import { useComposerSubmitStore } from "../lib/composer-submit-store.ts";
-
-export function ComposerSubmitBridge() {
-  const composerRuntime = useComposerRuntime();
-  const pending = useComposerSubmitStore((s) => s.pending);
-
-  useEffect(() => {
-    if (!pending) return;
-
-    composerRuntime.setText(pending.text);
-    composerRuntime.send({ startRun: true });
-    useComposerSubmitStore.getState().consume(pending.id);
-  }, [composerRuntime, pending]);
-
-  return null;
-}
-

package/src/components/confirm-dialog.tsx

@@ -1,49 +0,0 @@
-import { Button } from "@iloveagents/foundry-web-primitives";
-import { FormDialog } from "./form-dialog.tsx";
-
-export function ConfirmDialog({
-  open,
-  onOpenChange,
-  title,
-  description,
-  confirmLabel = "Confirm",
-  cancelLabel = "Cancel",
-  destructive = false,
-  onConfirm,
-  confirming = false,
-}: {
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-  title: string;
-  description?: string;
-  confirmLabel?: string;
-  cancelLabel?: string;
-  destructive?: boolean;
-  onConfirm: () => void;
-  confirming?: boolean;
-}) {
-  return (
-    <FormDialog
-      open={open}
-      onOpenChange={onOpenChange}
-      title={title}
-      description={description}
-      size="sm"
-      footer={
-        <>
-          <Button type="button" variant="ghost" onClick={() => onOpenChange(false)}>
-            {cancelLabel}
-          </Button>
-          <Button
-            type="button"
-            variant={destructive ? "destructive" : "default"}
-            onClick={onConfirm}
-            disabled={confirming}
-          >
-            {confirmLabel}
-          </Button>
-        </>
-      }
-    />
-  );
-}

package/src/components/confirmation-card.tsx

@@ -1,32 +0,0 @@
-/**
- * Confirmation Card — informational UI for the ui_confirm tool.
- *
- * Renders a card with action description and optional details.
- * The user responds by typing their confirmation in the chat.
- */
-
-import { ShieldCheck } from "lucide-react";
-import { ToolCallCard, type ToolCallStatus } from "./tool-call-card.tsx";
-
-interface ConfirmationCardProps {
-  action: string;
-  details?: string;
-  status: ToolCallStatus;
-}
-
-export function ConfirmationCard({ action, details, status }: ConfirmationCardProps) {
-  return (
-    <ToolCallCard
-      icon={<ShieldCheck className="size-3.5" />}
-      title="Confirmation Required"
-      description={action}
-      status={status}
-      className="w-full"
-    >
-      {details && <p className="text-xs text-muted-foreground mt-1">{details}</p>}
-      <p className="text-xs text-muted-foreground mt-2 italic">
-        Reply to confirm or reject this action.
-      </p>
-    </ToolCallCard>
-  );
-}