@agent-native/core 0.101.14 → 0.102.1

package/corpus/templates/tasks/app/components/tasks/fields/controls/RichTextValueControl.tsx

@@ -0,0 +1,115 @@
+import {
+  IconBold,
+  IconH1,
+  IconItalic,
+  IconLink,
+  IconList,
+  IconListNumbers,
+} from "@tabler/icons-react";
+import { useRef } from "react";
+
+import { Button } from "@/components/ui/button";
+import { Textarea } from "@/components/ui/textarea";
+
+export function RichTextValueControl({
+  value,
+  disabled,
+  onChange,
+}: {
+  value: string;
+  disabled: boolean;
+  onChange: (value: string) => void;
+}) {
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+
+  function applyWrap(before: string, after = before, placeholder = "text") {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    const start = textarea.selectionStart;
+    const end = textarea.selectionEnd;
+    const selected = value.slice(start, end) || placeholder;
+    const next = `${value.slice(0, start)}${before}${selected}${after}${value.slice(end)}`;
+    onChange(next);
+    requestAnimationFrame(() => {
+      textarea.focus();
+      textarea.setSelectionRange(
+        start + before.length,
+        start + before.length + selected.length,
+      );
+    });
+  }
+
+  function applyLinePrefix(prefix: string) {
+    const textarea = textareaRef.current;
+    if (!textarea) return;
+    const start = textarea.selectionStart;
+    const lineStart = value.lastIndexOf("\n", Math.max(0, start - 1)) + 1;
+    const next = `${value.slice(0, lineStart)}${prefix}${value.slice(lineStart)}`;
+    onChange(next);
+    requestAnimationFrame(() => {
+      textarea.focus();
+      textarea.setSelectionRange(start + prefix.length, start + prefix.length);
+    });
+  }
+
+  const tools = [
+    {
+      label: "Bold",
+      icon: IconBold,
+      action: () => applyWrap("**", "**", "bold"),
+    },
+    {
+      label: "Italic",
+      icon: IconItalic,
+      action: () => applyWrap("_", "_", "italic"),
+    },
+    { label: "Heading", icon: IconH1, action: () => applyLinePrefix("## ") },
+    {
+      label: "Bulleted list",
+      icon: IconList,
+      action: () => applyLinePrefix("- "),
+    },
+    {
+      label: "Numbered list",
+      icon: IconListNumbers,
+      action: () => applyLinePrefix("1. "),
+    },
+    {
+      label: "Link",
+      icon: IconLink,
+      action: () => applyWrap("[", "](https://example.com)", "link"),
+    },
+  ];
+
+  return (
+    <div className="grid gap-2">
+      <div className="flex flex-wrap gap-1">
+        {tools.map((tool) => {
+          const Icon = tool.icon;
+          return (
+            <Button
+              key={tool.label}
+              type="button"
+              variant="ghost"
+              size="icon"
+              disabled={disabled}
+              onClick={tool.action}
+              aria-label={tool.label}
+              title={tool.label}
+              className="size-8"
+            >
+              <Icon className="size-4" />
+            </Button>
+          );
+        })}
+      </div>
+      <Textarea
+        ref={textareaRef}
+        value={value}
+        disabled={disabled}
+        rows={5}
+        onChange={(event) => onChange(event.currentTarget.value)}
+      />
+    </div>
+  );
+}

package/corpus/templates/tasks/app/components/tasks/fields/controls/SingleSelectValueControl.tsx

@@ -0,0 +1,61 @@
+import { selectColorClass } from "@/components/custom-fields/editor/config/select-colors";
+import { optionsFromConfig } from "@/components/custom-fields/editor/config/utils";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import type { FieldValue, TaskFieldValue } from "@/hooks/use-custom-fields";
+import { cn } from "@/lib/utils";
+
+const EMPTY_SELECT_VALUE = "__empty__";
+
+export function SingleSelectValueControl({
+  field,
+  value,
+  disabled,
+  onChange,
+}: {
+  field: TaskFieldValue & { type: "single_select" };
+  value: FieldValue | null;
+  disabled: boolean;
+  onChange: (value: FieldValue | null) => void;
+}) {
+  const options = optionsFromConfig(field.config);
+  const selected = typeof value === "string" ? value : EMPTY_SELECT_VALUE;
+
+  return (
+    <Select
+      value={selected}
+      disabled={disabled}
+      onValueChange={(next) =>
+        onChange(next === EMPTY_SELECT_VALUE ? null : next)
+      }
+    >
+      <SelectTrigger>
+        <SelectValue />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectItem value={EMPTY_SELECT_VALUE}>None</SelectItem>
+          {options.map((option) => (
+            <SelectItem key={option.id} value={option.id}>
+              <span className="flex items-center gap-2">
+                <span
+                  className={cn(
+                    "size-2 rounded-full",
+                    selectColorClass(option.color),
+                  )}
+                />
+                {option.name}
+              </span>
+            </SelectItem>
+          ))}
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  );
+}

package/corpus/templates/tasks/app/components/tasks/fields/controls/TextValueControl.tsx

@@ -0,0 +1,20 @@
+import { Input } from "@/components/ui/input";
+import type { FieldValue } from "@/hooks/use-custom-fields";
+
+export function TextValueControl({
+  value,
+  disabled,
+  onChange,
+}: {
+  value: FieldValue | null;
+  disabled: boolean;
+  onChange: (value: FieldValue | null) => void;
+}) {
+  return (
+    <Input
+      value={typeof value === "string" ? value : ""}
+      disabled={disabled}
+      onChange={(event) => onChange(event.currentTarget.value || null)}
+    />
+  );
+}

package/corpus/templates/tasks/app/components/tasks/use-task-row-completion-animation.ts

@@ -0,0 +1,181 @@
+import { useEffect, useRef, useState, type AnimationEvent } from "react";
+
+export const COMPLETE_EXIT_MS = 260;
+export const COMPLETE_SETTLE_MS = 220;
+const ANIMATION_FALLBACK_BUFFER_MS = 40;
+
+export const EXIT_ANIMATION_NAME = "task-row-exit";
+export const COMPLETE_ANIMATION_NAME = "task-row-complete";
+export const RESTORE_ANIMATION_NAME = "task-row-restore";
+
+export type CompletionPhase = "idle" | "completing" | "uncompleting" | "exited";
+
+function prefersReducedMotion() {
+  return (
+    typeof window !== "undefined" &&
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  );
+}
+
+interface UseTaskRowCompletionAnimationOptions {
+  taskDone: boolean;
+  hideAfterComplete: boolean;
+  onBeginExit?: () => void;
+  onExitAfterComplete?: () => void;
+  onUpdateTask: (patch: { done: boolean }) => Promise<unknown>;
+}
+
+export function useTaskRowCompletionAnimation({
+  taskDone,
+  hideAfterComplete,
+  onBeginExit,
+  onExitAfterComplete,
+  onUpdateTask,
+}: UseTaskRowCompletionAnimationOptions) {
+  const [completionPhase, setCompletionPhase] =
+    useState<CompletionPhase>("idle");
+  const animationFallbackRef = useRef<number | null>(null);
+  const latestTaskDoneRef = useRef(taskDone);
+
+  const displayDone =
+    completionPhase === "completing" || completionPhase === "exited"
+      ? true
+      : completionPhase === "uncompleting"
+        ? false
+        : taskDone;
+  const isAnimating =
+    completionPhase === "completing" || completionPhase === "uncompleting";
+
+  useEffect(() => {
+    latestTaskDoneRef.current = taskDone;
+    if (completionPhase === "uncompleting" && !taskDone) {
+      resetCompletionPhase();
+    }
+  }, [completionPhase, taskDone]);
+
+  useEffect(() => {
+    return () => {
+      if (animationFallbackRef.current !== null) {
+        window.clearTimeout(animationFallbackRef.current);
+      }
+    };
+  }, []);
+
+  function clearAnimationFallback() {
+    if (animationFallbackRef.current !== null) {
+      window.clearTimeout(animationFallbackRef.current);
+      animationFallbackRef.current = null;
+    }
+  }
+
+  function resetCompletionPhase() {
+    clearAnimationFallback();
+    setCompletionPhase("idle");
+  }
+
+  function finishExitAfterComplete() {
+    clearAnimationFallback();
+    setCompletionPhase((phase) => {
+      if (phase === "exited") return phase;
+      onExitAfterComplete?.();
+      return "exited";
+    });
+  }
+
+  function finishSettleAnimation() {
+    clearAnimationFallback();
+    setCompletionPhase((phase) => {
+      if (phase === "uncompleting" && latestTaskDoneRef.current) {
+        return phase;
+      }
+      return "idle";
+    });
+  }
+
+  function scheduleAnimationFallback(callback: () => void, durationMs: number) {
+    clearAnimationFallback();
+    if (prefersReducedMotion()) {
+      callback();
+      return;
+    }
+    animationFallbackRef.current = window.setTimeout(() => {
+      animationFallbackRef.current = null;
+      callback();
+    }, durationMs + ANIMATION_FALLBACK_BUFFER_MS);
+  }
+
+  function handleRowAnimationEnd(event: AnimationEvent<HTMLDivElement>) {
+    if (event.currentTarget !== event.target) return;
+
+    if (
+      event.animationName === EXIT_ANIMATION_NAME &&
+      completionPhase === "completing" &&
+      hideAfterComplete
+    ) {
+      finishExitAfterComplete();
+      return;
+    }
+
+    if (
+      event.animationName === COMPLETE_ANIMATION_NAME &&
+      completionPhase === "completing"
+    ) {
+      finishSettleAnimation();
+      return;
+    }
+
+    if (
+      event.animationName === RESTORE_ANIMATION_NAME &&
+      completionPhase === "uncompleting"
+    ) {
+      finishSettleAnimation();
+    }
+  }
+
+  function commitDoneChange(nextDone: boolean) {
+    void onUpdateTask({ done: nextDone })
+      .then(() => {
+        if (nextDone && hideAfterComplete) {
+          return;
+        }
+        scheduleAnimationFallback(finishSettleAnimation, COMPLETE_SETTLE_MS);
+      })
+      .catch(resetCompletionPhase);
+  }
+
+  function handleDoneToggle(checked: boolean | "indeterminate") {
+    if (
+      checked === "indeterminate" ||
+      isAnimating ||
+      completionPhase === "exited"
+    ) {
+      return;
+    }
+
+    const nextDone = checked === true;
+    if (nextDone === taskDone) return;
+
+    if (nextDone) {
+      if (hideAfterComplete) {
+        onBeginExit?.();
+      }
+      setCompletionPhase("completing");
+      if (hideAfterComplete) {
+        scheduleAnimationFallback(finishExitAfterComplete, COMPLETE_EXIT_MS);
+      }
+      commitDoneChange(true);
+      return;
+    }
+
+    setCompletionPhase("uncompleting");
+    commitDoneChange(false);
+  }
+
+  return {
+    completionPhase,
+    displayDone,
+    isAnimating,
+    handleDoneToggle,
+    handleRowAnimationEnd,
+  };
+}

package/corpus/templates/tasks/app/components/ui/accordion.tsx

@@ -0,0 +1,56 @@
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { IconChevronDown } from "@tabler/icons-react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Accordion = AccordionPrimitive.Root;
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+));
+AccordionItem.displayName = "AccordionItem";
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <IconChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+));
+
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/corpus/templates/tasks/app/components/ui/alert-dialog.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/alert-dialog";

package/corpus/templates/tasks/app/components/ui/alert.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/alert";

package/corpus/templates/tasks/app/components/ui/aspect-ratio.tsx

@@ -0,0 +1,5 @@
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+
+const AspectRatio = AspectRatioPrimitive.Root;
+
+export { AspectRatio };

package/corpus/templates/tasks/app/components/ui/avatar.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/avatar";

package/corpus/templates/tasks/app/components/ui/badge.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/badge";

package/corpus/templates/tasks/app/components/ui/breadcrumb.tsx

@@ -0,0 +1,115 @@
+import { Slot } from "@radix-ui/react-slot";
+import { IconChevronRight, IconDots } from "@tabler/icons-react";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Breadcrumb = React.forwardRef<
+  HTMLElement,
+  React.ComponentPropsWithoutRef<"nav"> & {
+    separator?: React.ReactNode;
+  }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />);
+Breadcrumb.displayName = "Breadcrumb";
+
+const BreadcrumbList = React.forwardRef<
+  HTMLOListElement,
+  React.ComponentPropsWithoutRef<"ol">
+>(({ className, ...props }, ref) => (
+  <ol
+    ref={ref}
+    className={cn(
+      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
+      className,
+    )}
+    {...props}
+  />
+));
+BreadcrumbList.displayName = "BreadcrumbList";
+
+const BreadcrumbItem = React.forwardRef<
+  HTMLLIElement,
+  React.ComponentPropsWithoutRef<"li">
+>(({ className, ...props }, ref) => (
+  <li
+    ref={ref}
+    className={cn("inline-flex items-center gap-1.5", className)}
+    {...props}
+  />
+));
+BreadcrumbItem.displayName = "BreadcrumbItem";
+
+const BreadcrumbLink = React.forwardRef<
+  HTMLAnchorElement,
+  React.ComponentPropsWithoutRef<"a"> & {
+    asChild?: boolean;
+  }
+>(({ asChild, className, ...props }, ref) => {
+  const Comp = asChild ? Slot : "a";
+
+  return (
+    <Comp
+      ref={ref}
+      className={cn("transition-colors hover:text-foreground", className)}
+      {...props}
+    />
+  );
+});
+BreadcrumbLink.displayName = "BreadcrumbLink";
+
+const BreadcrumbPage = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<"span">
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    role="link"
+    aria-disabled="true"
+    aria-current="page"
+    className={cn("font-normal text-foreground", className)}
+    {...props}
+  />
+));
+BreadcrumbPage.displayName = "BreadcrumbPage";
+
+const BreadcrumbSeparator = ({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) => (
+  <li
+    role="presentation"
+    aria-hidden="true"
+    className={cn("[&>svg]:size-3.5", className)}
+    {...props}
+  >
+    {children ?? <IconChevronRight />}
+  </li>
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+
+const BreadcrumbEllipsis = ({
+  className,
+  ...props
+}: React.ComponentProps<"span">) => (
+  <span
+    role="presentation"
+    aria-hidden="true"
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
+    {...props}
+  >
+    <IconDots className="h-4 w-4" />
+    <span className="sr-only">More</span>
+  </span>
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis";
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};

package/corpus/templates/tasks/app/components/ui/button.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/button";

package/corpus/templates/tasks/app/components/ui/calendar.tsx

@@ -0,0 +1,70 @@
+import { IconChevronLeft, IconChevronRight } from "@tabler/icons-react";
+import * as React from "react";
+import { DayPicker } from "react-day-picker";
+
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  ...props
+}: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn("p-3", className)}
+      classNames={{
+        months: "flex flex-col sm:flex-row gap-4",
+        month: "flex flex-col gap-4",
+        month_caption: "flex justify-center pt-1 relative items-center h-7",
+        caption_label: "text-sm font-medium",
+        nav: "flex items-center gap-1",
+        button_previous: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute start-1 top-1 z-10",
+        ),
+        button_next: cn(
+          buttonVariants({ variant: "outline" }),
+          "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100 absolute end-1 top-1 z-10",
+        ),
+        month_grid: "w-full border-collapse",
+        weekdays: "flex",
+        weekday:
+          "text-muted-foreground rounded-md w-9 font-normal text-[0.8rem] text-center",
+        week: "flex w-full mt-2",
+        day: "h-9 w-9 text-center text-sm p-0 relative",
+        day_button: cn(
+          buttonVariants({ variant: "ghost" }),
+          "h-9 w-9 p-0 font-normal aria-selected:opacity-100",
+        ),
+        selected:
+          "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground rounded-md",
+        today: "bg-accent text-accent-foreground rounded-md",
+        outside: "text-muted-foreground opacity-50",
+        disabled: "text-muted-foreground opacity-50",
+        hidden: "invisible",
+        range_start: "rounded-s-md",
+        range_end: "rounded-e-md",
+        range_middle:
+          "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        ...classNames,
+      }}
+      components={{
+        Chevron: (props) => {
+          if (props.orientation === "left") {
+            return <IconChevronLeft className="h-4 w-4 rtl:-scale-x-100" />;
+          }
+          return <IconChevronRight className="h-4 w-4 rtl:-scale-x-100" />;
+        },
+      }}
+      {...props}
+    />
+  );
+}
+Calendar.displayName = "Calendar";
+
+export { Calendar };

package/corpus/templates/tasks/app/components/ui/card.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/card";