@yenio-pld/blocks 0.0.0-stage → 0.0.0

package/dist/index.js

@@ -0,0 +1,3947 @@
+"use client";
+import * as React from 'react';
+import { createContext, useContext, useState, useRef, useId, useEffect, useCallback, useLayoutEffect } from 'react';
+import { Loader2, AlertTriangle, Inbox, Bell, Moon, Sun, Monitor, Languages, Upload, Move, ZoomOut, ZoomIn, RotateCcw, RotateCw, Grid3X3, RefreshCw, X, User, Pencil, Check, Pause, Play, BarChart3, XIcon } from 'lucide-react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { Slot } from '@radix-ui/react-slot';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { useTheme } from 'next-themes';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+import * as TogglePrimitive from '@radix-ui/react-toggle';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Drawer as Drawer$1 } from 'vaul';
+import { AnimatePresence, motion } from 'framer-motion';
+
+var LanguageContext = createContext(null);
+function useLanguageContext() {
+  return useContext(LanguageContext);
+}
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+function Empty({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "empty",
+      className: cn(
+        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg p-6 text-center text-balance md:p-12",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function EmptyHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "empty-header",
+      className: cn(
+        "flex max-w-sm flex-col items-center gap-2 text-center",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var emptyMediaVariants = cva(
+  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-6"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "empty-icon",
+      "data-variant": variant,
+      className: cn(emptyMediaVariants({ variant, className })),
+      ...props
+    }
+  );
+}
+function EmptyTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "empty-title",
+      className: cn("text-lg font-medium tracking-tight", className),
+      ...props
+    }
+  );
+}
+function EmptyDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "empty-description",
+      className: cn(
+        "text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function EmptyContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "empty-content",
+      className: cn(
+        "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function LoadingState({
+  label = "Loading\u2026",
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      className: cn(
+        "flex items-center justify-center gap-2 py-12 text-sm text-muted-foreground",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Loader2, { className: "size-4 animate-spin", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { children: label })
+      ]
+    }
+  );
+}
+function ErrorState({
+  title = "Something went wrong",
+  description,
+  action,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "alert",
+      className: cn(
+        "flex flex-col items-center gap-3 rounded-xl border border-dashed border-destructive/40 bg-destructive/5 py-12 text-center",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(AlertTriangle, { className: "size-6 text-destructive", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "font-medium", children: title }),
+          description ? /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-muted-foreground", children: description }) : null
+        ] }),
+        action
+      ]
+    }
+  );
+}
+function EmptyState({
+  title,
+  description,
+  action,
+  icon: Icon = Inbox,
+  variant = "default",
+  className
+}) {
+  const isCompact = variant === "compact";
+  return /* @__PURE__ */ jsxs(
+    Empty,
+    {
+      className: cn(
+        "gap-3",
+        isCompact ? "flex-none rounded-none px-4 py-6" : "flex-none rounded-xl border border-dashed px-6 py-12",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(EmptyHeader, { className: "gap-3", children: [
+          /* @__PURE__ */ jsx(
+            EmptyMedia,
+            {
+              variant: "icon",
+              className: cn(
+                "mb-0 bg-transparent text-muted-foreground",
+                isCompact ? "size-auto [&_svg:not([class*='size-'])]:size-8 [&_svg]:opacity-50" : "size-auto [&_svg:not([class*='size-'])]:size-6"
+              ),
+              children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            EmptyTitle,
+            {
+              className: cn(
+                "font-medium tracking-normal",
+                isCompact ? "text-sm" : "text-base"
+              ),
+              children: title
+            }
+          ),
+          description ? /* @__PURE__ */ jsx(EmptyDescription, { className: "mt-0", children: description }) : null
+        ] }),
+        action ? /* @__PURE__ */ jsx(EmptyContent, { className: "gap-0", children: action }) : null
+      ]
+    }
+  );
+}
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive: "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline: "border bg-background text-foreground shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:text-foreground dark:hover:bg-muted dark:hover:text-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50 dark:hover:text-foreground",
+        link: "text-primary underline-offset-4 hover:underline"
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      "data-slot": "button",
+      "data-variant": variant,
+      "data-size": size,
+      className: cn(buttonVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+function AlertDialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(AlertDialogPrimitive.Root, { "data-slot": "alert-dialog", ...props });
+}
+function AlertDialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(AlertDialogPrimitive.Portal, { "data-slot": "alert-dialog-portal", ...props });
+}
+function AlertDialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Overlay,
+    {
+      "data-slot": "alert-dialog-overlay",
+      className: cn(
+        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(AlertDialogPortal, { children: [
+    /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
+    /* @__PURE__ */ jsx(
+      AlertDialogPrimitive.Content,
+      {
+        "data-slot": "alert-dialog-content",
+        "data-size": size,
+        className: cn(
+          "group/alert-dialog-content fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 data-[size=sm]:max-w-xs data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[size=default]:sm:max-w-lg",
+          className
+        ),
+        ...props
+      }
+    )
+  ] });
+}
+function AlertDialogHeader({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-dialog-header",
+      className: cn(
+        "flex flex-col gap-1.5 text-center sm:text-left",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDialogFooter({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "alert-dialog-footer",
+      className: cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function AlertDialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Title,
+    {
+      "data-slot": "alert-dialog-title",
+      className: cn("text-lg font-semibold", className),
+      ...props
+    }
+  );
+}
+function AlertDialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Description,
+    {
+      "data-slot": "alert-dialog-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
+}
+function AlertDialogAction({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Button, { variant, size, asChild: true, children: /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Action,
+    {
+      "data-slot": "alert-dialog-action",
+      className: cn(className),
+      ...props
+    }
+  ) });
+}
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Button, { variant, size, asChild: true, children: /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Cancel,
+    {
+      "data-slot": "alert-dialog-cancel",
+      className: cn(className),
+      ...props
+    }
+  ) });
+}
+function ConfirmDestructiveDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel = "Delete",
+  cancelLabel = "Cancel",
+  onConfirm
+}) {
+  return /* @__PURE__ */ jsx(AlertDialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(AlertDialogContent, { size: "sm", children: [
+    /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
+      /* @__PURE__ */ jsx(AlertDialogTitle, { children: title }),
+      /* @__PURE__ */ jsx(AlertDialogDescription, { children: description })
+    ] }),
+    /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
+      /* @__PURE__ */ jsx(AlertDialogCancel, { children: cancelLabel }),
+      /* @__PURE__ */ jsx(
+        AlertDialogAction,
+        {
+          variant: "destructive",
+          onClick: () => {
+            onConfirm();
+            onOpenChange(false);
+          },
+          children: confirmLabel
+        }
+      )
+    ] })
+  ] }) });
+}
+var miniMenuContentClassName = "max-h-none overflow-x-visible overflow-y-visible";
+var miniMenuContentDefaults = {
+  sideOffset: 8,
+  collisionPadding: 12
+};
+function DropdownMenu({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Trigger,
+    {
+      "data-slot": "dropdown-menu-trigger",
+      ...props
+    }
+  );
+}
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Content,
+    {
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      className: cn(
+        "bg-popover text-popover-foreground 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-[200] max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DropdownMenuPrimitive.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      "data-inset": inset,
+      "data-variant": variant,
+      className: cn(
+        "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[highlighted]:[&_svg:not([class*='text-'])]:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:[&_svg:not([class*='text-'])]:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:data-[highlighted]:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 dark:data-[variant=destructive]:data-[highlighted]:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:data-[highlighted]:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var DEFAULT_NOTIFICATION_BELL_LABELS = {
+  title: "Notifications",
+  empty: "You're all caught up.",
+  viewAll: "View all"
+};
+function formatUnreadBadge(count) {
+  return count > 9 ? "9+" : String(count);
+}
+function defaultFormatTime(iso) {
+  const date = new Date(iso);
+  if (Number.isNaN(date.getTime())) return iso;
+  return date.toLocaleString(void 0, {
+    dateStyle: "short",
+    timeStyle: "short"
+  });
+}
+function NotificationListSkeleton({ rows = 3 }) {
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col", "aria-hidden": "true", children: Array.from({ length: rows }, (_, index) => /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2 px-4 py-3", children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-slot": "skeleton",
+          className: "bg-muted h-4 w-36 animate-pulse rounded-md motion-reduce:animate-none"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-slot": "skeleton",
+          className: "bg-muted h-3 w-full animate-pulse rounded-md motion-reduce:animate-none"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-slot": "skeleton",
+          className: "bg-muted h-3 w-20 animate-pulse rounded-md motion-reduce:animate-none"
+        }
+      )
+    ] }),
+    index < rows - 1 ? /* @__PURE__ */ jsx("div", { className: "bg-border h-px" }) : null
+  ] }, index)) });
+}
+function NotificationBell({
+  items,
+  unreadCount,
+  isLoading = false,
+  labels: labelOverrides,
+  viewAllHref,
+  formatTime = defaultFormatTime,
+  onOpenChange,
+  align = "end",
+  className
+}) {
+  const labels = { ...DEFAULT_NOTIFICATION_BELL_LABELS, ...labelOverrides };
+  return /* @__PURE__ */ jsxs(DropdownMenu, { modal: false, onOpenChange, children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "icon",
+        className: cn("relative size-9", className),
+        "aria-label": labels.title,
+        children: [
+          /* @__PURE__ */ jsx(Bell, { className: "size-4" }),
+          unreadCount > 0 ? /* @__PURE__ */ jsx("span", { className: "bg-destructive text-destructive-foreground absolute -top-0.5 -right-0.5 flex size-4 items-center justify-center rounded-full text-[10px] leading-none font-medium tabular-nums", children: formatUnreadBadge(unreadCount) }) : null
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align, className: "w-80 p-0", children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between border-b px-4 py-3", children: /* @__PURE__ */ jsx("h4", { className: "font-semibold", children: labels.title }) }),
+      /* @__PURE__ */ jsx("div", { className: "max-h-80 overflow-y-auto", children: isLoading ? /* @__PURE__ */ jsx(NotificationListSkeleton, {}) : items.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground px-4 py-8 text-center text-sm", children: labels.empty }) : /* @__PURE__ */ jsx("div", { className: "flex flex-col", children: items.map((item, index) => {
+        const body = /* @__PURE__ */ jsxs("div", { className: "flex-1 space-y-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-sm leading-none font-medium", children: item.title }),
+          /* @__PURE__ */ jsx("p", { className: "text-muted-foreground line-clamp-2 text-xs", children: item.message }),
+          /* @__PURE__ */ jsx("p", { className: "text-muted-foreground/70 text-xs", children: formatTime(item.createdAt) })
+        ] });
+        return /* @__PURE__ */ jsxs("div", { children: [
+          item.href ? /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: item.href,
+              className: cn(
+                "hover:bg-muted/50 flex gap-3 px-4 py-3 motion-safe:transition-colors",
+                !item.read && "bg-muted/30"
+              ),
+              children: body
+            }
+          ) : /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "flex gap-3 px-4 py-3",
+                !item.read && "bg-muted/30"
+              ),
+              children: body
+            }
+          ),
+          index < items.length - 1 ? /* @__PURE__ */ jsx("div", { className: "bg-border h-px" }) : null
+        ] }, item.id);
+      }) }) }),
+      /* @__PURE__ */ jsx("div", { className: "border-t px-4 py-2", children: /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: viewAllHref,
+          className: "text-primary block text-center text-sm font-medium hover:underline",
+          children: labels.viewAll
+        }
+      ) })
+    ] })
+  ] });
+}
+
+// src/components/editable/types.ts
+var DEFAULT_EDITABLE_SECTION_LABELS = {
+  edit: "Edit",
+  save: "Save",
+  saving: "Saving\u2026",
+  cancel: "Cancel",
+  saved: "Saved",
+  discardTitle: "Discard changes?",
+  discardDescription: "If you leave now, unsaved changes will be lost.",
+  discardConfirm: "Discard",
+  discardCancel: "Keep editing"
+};
+
+// src/components/editable/useEditableSection.ts
+function focusFirstField(container) {
+  if (!container) return;
+  const target = container.querySelector(
+    "[data-autofocus], input:not([type='hidden']):not([disabled]), select:not([disabled]), textarea:not([disabled]), [contenteditable='true']"
+  );
+  target?.focus();
+}
+function useEditableSection({
+  onSave,
+  onDiscard,
+  isDirty = false,
+  labelledBy,
+  title,
+  labels,
+  stableHeight = false
+}) {
+  const resolvedLabels = {
+    ...DEFAULT_EDITABLE_SECTION_LABELS,
+    ...labels
+  };
+  const [mode, setMode] = useState("reading");
+  const [status, setStatus] = useState(null);
+  const [confirmOpen, setConfirmOpen] = useState(false);
+  const [minHeightPx, setMinHeightPx] = useState(void 0);
+  const contentRef = useRef(null);
+  const editButtonRef = useRef(null);
+  const measuredHeightRef = useRef(0);
+  const shouldFocusEditRef = useRef(false);
+  const shouldFocusFirstFieldRef = useRef(false);
+  const editButtonId = useId();
+  const contentFormId = useId();
+  const isEditing = mode === "editing" || mode === "saving";
+  const isSaving = mode === "saving";
+  useEffect(() => {
+    if (mode === "reading" && shouldFocusEditRef.current) {
+      shouldFocusEditRef.current = false;
+      editButtonRef.current?.focus();
+      return;
+    }
+    if (mode === "editing" && shouldFocusFirstFieldRef.current) {
+      shouldFocusFirstFieldRef.current = false;
+      const invalid = contentRef.current?.querySelector(
+        "[aria-invalid='true']"
+      );
+      if (invalid) {
+        invalid.focus();
+        return;
+      }
+      focusFirstField(contentRef.current);
+    }
+  }, [mode]);
+  const exitToReading = useCallback(() => {
+    setConfirmOpen(false);
+    shouldFocusEditRef.current = true;
+    setMode("reading");
+    onDiscard?.();
+  }, [onDiscard]);
+  const startEdit = useCallback(() => {
+    setStatus(null);
+    shouldFocusFirstFieldRef.current = true;
+    setMode("editing");
+  }, []);
+  const requestCancel = useCallback(() => {
+    if (isSaving) return;
+    if (isDirty) {
+      setConfirmOpen(true);
+      return;
+    }
+    exitToReading();
+  }, [exitToReading, isDirty, isSaving]);
+  const handleSubmit = useCallback(
+    (event) => {
+      event.preventDefault();
+      if (isSaving) return;
+      void (async () => {
+        setMode("saving");
+        setStatus(null);
+        try {
+          await onSave();
+          setStatus(resolvedLabels.saved);
+          shouldFocusEditRef.current = true;
+          setMode("reading");
+        } catch {
+          shouldFocusFirstFieldRef.current = true;
+          setMode("editing");
+        }
+      })();
+    },
+    [isSaving, onSave, resolvedLabels.saved]
+  );
+  const handleFormKeyDown = useCallback(
+    (event) => {
+      if (event.key !== "Escape") return;
+      event.preventDefault();
+      requestCancel();
+    },
+    [requestCancel]
+  );
+  useEffect(() => {
+    if (!stableHeight || !isEditing) return;
+    const el = contentRef.current;
+    if (!el) return;
+    const measure = () => {
+      const height = el.getBoundingClientRect().height;
+      if (height > measuredHeightRef.current) {
+        measuredHeightRef.current = height;
+        setMinHeightPx(height);
+      }
+    };
+    measure();
+    const observer = new ResizeObserver(measure);
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [isEditing, stableHeight]);
+  const editButtonNameProps = labelledBy != null ? { "aria-labelledby": `${labelledBy} ${editButtonId}` } : title != null && title.length > 0 ? { "aria-label": `${resolvedLabels.edit} ${title}` } : { "aria-label": resolvedLabels.edit };
+  return {
+    mode,
+    isEditing,
+    isSaving,
+    startEdit,
+    requestCancel,
+    formProps: {
+      onSubmit: handleSubmit,
+      onKeyDown: handleFormKeyDown,
+      noValidate: true
+    },
+    contentRef,
+    editButtonRef,
+    contentFormId,
+    editButtonProps: {
+      type: "button",
+      id: editButtonId,
+      onClick: startEdit,
+      ref: editButtonRef,
+      ...editButtonNameProps
+    },
+    saveButtonProps: {
+      type: "submit",
+      disabled: isSaving
+    },
+    cancelButtonProps: {
+      type: "button",
+      onClick: requestCancel,
+      disabled: isSaving
+    },
+    status,
+    statusProps: {
+      role: "status",
+      "aria-live": "polite",
+      className: "sr-only"
+    },
+    confirmDiscard: {
+      open: confirmOpen,
+      onOpenChange: setConfirmOpen,
+      title: resolvedLabels.discardTitle,
+      description: resolvedLabels.discardDescription,
+      confirmLabel: resolvedLabels.discardConfirm,
+      cancelLabel: resolvedLabels.discardCancel,
+      onConfirm: exitToReading
+    },
+    resolvedLabels,
+    contentStyle: stableHeight && minHeightPx != null ? { minHeight: minHeightPx } : void 0,
+    actionsClassName: "flex min-h-9 min-w-[11rem] flex-wrap items-center justify-end gap-2"
+  };
+}
+function EditableSection({
+  readView,
+  editView,
+  children,
+  className,
+  ...options
+}) {
+  const section = useEditableSection(options);
+  const {
+    isEditing,
+    isSaving,
+    formProps,
+    contentRef,
+    contentFormId,
+    editButtonProps,
+    saveButtonProps,
+    cancelButtonProps,
+    status,
+    statusProps,
+    confirmDiscard,
+    resolvedLabels,
+    contentStyle,
+    actionsClassName,
+    mode
+  } = section;
+  const actionButtons = !isEditing ? /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", ...editButtonProps, children: resolvedLabels.edit }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(Button, { variant: "outline", size: "sm", ...cancelButtonProps, children: resolvedLabels.cancel }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        size: "sm",
+        type: "submit",
+        form: contentFormId,
+        disabled: saveButtonProps.disabled,
+        children: isSaving ? resolvedLabels.saving : resolvedLabels.save
+      }
+    )
+  ] });
+  const actions = /* @__PURE__ */ jsx("div", { "data-slot": "editable-section-actions", className: actionsClassName, children: actionButtons });
+  const content = isEditing ? /* @__PURE__ */ jsx(
+    "form",
+    {
+      id: contentFormId,
+      ref: contentRef,
+      "data-slot": "editable-section-content",
+      className: cn("yenio-editable-section-content space-y-4"),
+      style: contentStyle,
+      ...formProps,
+      children: editView()
+    }
+  ) : /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: contentRef,
+      "data-slot": "editable-section-content",
+      className: "yenio-editable-section-content",
+      style: contentStyle,
+      children: readView()
+    }
+  );
+  const statusNode = /* @__PURE__ */ jsx("span", { ...statusProps, "data-slot": "editable-section-status", children: status });
+  const dialog = /* @__PURE__ */ jsx(
+    ConfirmDestructiveDialog,
+    {
+      open: confirmDiscard.open,
+      onOpenChange: confirmDiscard.onOpenChange,
+      title: confirmDiscard.title,
+      description: confirmDiscard.description,
+      confirmLabel: confirmDiscard.confirmLabel,
+      cancelLabel: confirmDiscard.cancelLabel,
+      onConfirm: confirmDiscard.onConfirm
+    }
+  );
+  if (children) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      children({
+        actions,
+        content,
+        status: statusNode,
+        mode,
+        isSaving,
+        isEditing
+      }),
+      dialog
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "editable-section", className: cn("space-y-4", className), children: [
+    actions,
+    content,
+    statusNode,
+    dialog
+  ] });
+}
+function DataList({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "dl",
+    {
+      "data-slot": "data-list",
+      className: cn("grid gap-4 sm:grid-cols-2", className),
+      ...props
+    }
+  );
+}
+function DataListItem({
+  label,
+  children,
+  empty = "\u2014",
+  className,
+  labelClassName,
+  valueClassName
+}) {
+  const isEmpty = children == null || children === false || typeof children === "string" && children.trim().length === 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "data-list-item",
+      className: cn("flex flex-col gap-1.5", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          "dt",
+          {
+            className: cn(
+              "text-sm leading-none font-medium peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+              labelClassName
+            ),
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "dd",
+          {
+            className: cn(
+              "text-sm wrap-break-word",
+              isEmpty && "text-muted-foreground",
+              valueClassName
+            ),
+            children: isEmpty ? empty : children
+          }
+        )
+      ]
+    }
+  );
+}
+function FieldMessage({
+  id,
+  children,
+  className,
+  ...props
+}) {
+  const hasMessage = children != null && children !== false && !(typeof children === "string" && children.trim().length === 0);
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      id,
+      role: hasMessage ? "alert" : void 0,
+      "data-slot": "field-message",
+      className: cn("min-h-5 text-xs text-destructive", className),
+      ...props,
+      children: hasMessage ? children : "\xA0"
+    }
+  );
+}
+function isBrokenImage(img) {
+  return img.complete && img.naturalWidth === 0;
+}
+function SafeImage({
+  src,
+  fallback,
+  alt = "",
+  onError,
+  ...imgProps
+}) {
+  const [failed, setFailed] = useState(false);
+  const imgRef = useRef(null);
+  const resolvedSrc = typeof src === "string" && src.length > 0 ? src : null;
+  useLayoutEffect(() => {
+    setFailed(false);
+  }, [resolvedSrc]);
+  useLayoutEffect(() => {
+    const img = imgRef.current;
+    if (img && isBrokenImage(img)) {
+      setFailed(true);
+    }
+  }, [resolvedSrc, failed]);
+  if (!resolvedSrc || failed) {
+    return /* @__PURE__ */ jsx(Fragment, { children: fallback });
+  }
+  return /* @__PURE__ */ jsx(
+    "img",
+    {
+      ...imgProps,
+      ref: imgRef,
+      src: resolvedSrc,
+      alt,
+      onError: (event) => {
+        setFailed(true);
+        onError?.(event);
+      }
+    }
+  );
+}
+var defaultLabels = {
+  theme: "Theme",
+  system: "System",
+  light: "Light",
+  dark: "Dark"
+};
+var sizeClasses = {
+  sm: { button: "size-8", icon: "size-4" },
+  md: { button: "size-8", icon: "size-4" },
+  lg: { button: "size-9", icon: "size-4" }
+};
+var shapeClasses = {
+  rounded: "rounded-md",
+  pill: "rounded-full"
+};
+var iconTriggerClassName = "border border-border bg-transparent text-muted-foreground shadow-none hover:bg-accent hover:text-foreground dark:border-border dark:bg-transparent dark:text-muted-foreground dark:hover:bg-accent/50";
+var themeIcons = {
+  system: Monitor,
+  light: Sun,
+  dark: Moon
+};
+var themes = [
+  { key: "system", icon: themeIcons.system },
+  { key: "light", icon: themeIcons.light },
+  { key: "dark", icon: themeIcons.dark }
+];
+function storedTheme(value) {
+  if (value === "system" || value === "light" || value === "dark") return value;
+  return void 0;
+}
+function ThemeSwitcher({
+  className,
+  size = "sm",
+  shape = "rounded",
+  align = "end",
+  side = "bottom",
+  labels: userLabels
+}) {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  const sizes = sizeClasses[size];
+  const shapeClass = shapeClasses[shape];
+  const labels = { ...defaultLabels, ...userLabels };
+  const handleThemeClick = useCallback(
+    (themeKey) => {
+      setTheme(themeKey);
+    },
+    [setTheme]
+  );
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  if (!mounted) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": true,
+        className: cn(
+          sizes.button,
+          shapeClass,
+          iconTriggerClassName,
+          className
+        )
+      }
+    );
+  }
+  const currentTheme = storedTheme(theme);
+  const TriggerIcon = currentTheme ? themeIcons[currentTheme] : Monitor;
+  return /* @__PURE__ */ jsxs(DropdownMenu, { modal: false, children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        "data-testid": "theme-switcher",
+        variant: "outline",
+        size: "icon",
+        "aria-label": labels.theme,
+        className: cn(
+          sizes.button,
+          shapeClass,
+          iconTriggerClassName,
+          className
+        ),
+        children: /* @__PURE__ */ jsx(TriggerIcon, { className: sizes.icon })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      DropdownMenuContent,
+      {
+        side,
+        align,
+        sideOffset: miniMenuContentDefaults.sideOffset,
+        collisionPadding: miniMenuContentDefaults.collisionPadding,
+        className: miniMenuContentClassName,
+        children: themes.map(({ key, icon: Icon }) => /* @__PURE__ */ jsxs(
+          DropdownMenuItem,
+          {
+            onClick: () => handleThemeClick(key),
+            className: cn(
+              "gap-2 cursor-pointer",
+              currentTheme === key && "bg-accent text-accent-foreground [&_svg]:text-accent-foreground"
+            ),
+            children: [
+              /* @__PURE__ */ jsx(Icon, { className: "size-4" }),
+              /* @__PURE__ */ jsx("span", { children: labels[key] })
+            ]
+          },
+          key
+        ))
+      }
+    )
+  ] });
+}
+var defaultLanguages = [
+  { key: "es-MX", label: "ES", nativeName: "Espa\xF1ol (M\xE9xico)" },
+  { key: "en", label: "EN", nativeName: "English" }
+];
+var sizeClasses2 = {
+  sm: { button: "size-8", icon: "size-4" },
+  md: { button: "size-8", icon: "size-4" },
+  lg: { button: "size-9", icon: "size-4" }
+};
+var shapeClasses2 = {
+  rounded: "rounded-md",
+  squared: "rounded-sm",
+  pill: "rounded-full"
+};
+var iconTriggerClassName2 = "border border-border bg-transparent text-muted-foreground shadow-none hover:bg-accent hover:text-foreground dark:border-border dark:bg-transparent dark:text-muted-foreground dark:hover:bg-accent/50";
+function LanguageSwitcher({
+  languages: propLanguages,
+  currentLanguage: propCurrentLanguage,
+  onLanguageChange: propOnLanguageChange,
+  labels = {},
+  className,
+  size = "sm",
+  shape = "rounded",
+  align = "end",
+  side = "bottom"
+}) {
+  const context = useLanguageContext();
+  const contextLanguages = context?.languages?.map((lang) => ({
+    key: lang.code,
+    label: lang.code.toUpperCase(),
+    nativeName: lang.name
+  }));
+  const languages = propLanguages ?? contextLanguages ?? defaultLanguages;
+  const currentLanguage = propCurrentLanguage ?? context?.language ?? "en";
+  const onLanguageChange = propOnLanguageChange ?? context?.setLanguage;
+  const sizes = sizeClasses2[size];
+  const shapeClass = shapeClasses2[shape];
+  const accessibleName = labels.language ?? "Language";
+  return /* @__PURE__ */ jsxs(DropdownMenu, { modal: false, children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outline",
+        size: "icon",
+        "aria-label": accessibleName,
+        className: cn(
+          sizes.button,
+          shapeClass,
+          iconTriggerClassName2,
+          className
+        ),
+        children: /* @__PURE__ */ jsx(Languages, { className: sizes.icon })
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      DropdownMenuContent,
+      {
+        side,
+        align,
+        sideOffset: miniMenuContentDefaults.sideOffset,
+        collisionPadding: miniMenuContentDefaults.collisionPadding,
+        className: cn(miniMenuContentClassName, "min-w-0 w-auto"),
+        children: languages.map(({ key, nativeName }) => /* @__PURE__ */ jsx(
+          DropdownMenuItem,
+          {
+            onClick: () => onLanguageChange?.(key),
+            className: cn(
+              "justify-center text-xs font-semibold cursor-pointer px-3",
+              currentLanguage === key && "bg-accent text-accent-foreground"
+            ),
+            children: nativeName
+          },
+          key
+        ))
+      }
+    )
+  ] });
+}
+function Slider({
+  className,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
+  ...props
+}) {
+  const _values = React.useMemo(
+    () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
+    [value, defaultValue, min, max]
+  );
+  return /* @__PURE__ */ jsxs(
+    SliderPrimitive.Root,
+    {
+      "data-slot": "slider",
+      defaultValue,
+      value,
+      min,
+      max,
+      className: cn(
+        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          SliderPrimitive.Track,
+          {
+            "data-slot": "slider-track",
+            className: cn(
+              "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+            ),
+            children: /* @__PURE__ */ jsx(
+              SliderPrimitive.Range,
+              {
+                "data-slot": "slider-range",
+                className: cn(
+                  "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+                )
+              }
+            )
+          }
+        ),
+        Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ jsx(
+          SliderPrimitive.Thumb,
+          {
+            "data-slot": "slider-thumb",
+            className: "border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+          },
+          index
+        ))
+      ]
+    }
+  );
+}
+var toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground"
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    TogglePrimitive.Root,
+    {
+      "data-slot": "toggle",
+      className: cn(toggleVariants({ variant, size, className })),
+      ...props
+    }
+  );
+}
+var DEFAULT_LABELS = {
+  uploadAria: "Upload image",
+  uploadHint: "Click to upload",
+  uploadFormats: "PNG, JPG up to 10MB",
+  dragging: "Dragging",
+  zoomOut: "Zoom out",
+  zoomIn: "Zoom in",
+  zoomLevel: "Zoom level",
+  rotateLeft: "Rotate left 15 degrees",
+  rotateRight: "Rotate right 15 degrees",
+  toggleGrid: "Toggle grid overlay",
+  reset: "Reset all transforms",
+  replace: "Upload new image",
+  discard: "Discard image"
+};
+function AvatarEditor({
+  value: _value,
+  onChange,
+  size = 280,
+  showGrid: initialShowGrid = false,
+  outputSize = 256,
+  outputFormat = "png",
+  outputQuality = 0.92,
+  className,
+  controlSize = "default",
+  labels
+}) {
+  const t = { ...DEFAULT_LABELS, ...labels };
+  const canvasRef = useRef(null);
+  const fileInputRef = useRef(null);
+  const containerRef = useRef(null);
+  const [image, setImage] = useState(null);
+  const [imageLoaded, setImageLoaded] = useState(false);
+  const [zoom, setZoom] = useState(1);
+  const [rotation, setRotation] = useState(0);
+  const [position, setPosition] = useState({ x: 0, y: 0 });
+  const [isDragging, setIsDragging] = useState(false);
+  const [dragStart, setDragStart] = useState({ x: 0, y: 0 });
+  const [showGrid, setShowGrid] = useState(initialShowGrid);
+  const generateOutput = useCallback(() => {
+    if (!canvasRef.current || !image) return null;
+    const outputCanvas = document.createElement("canvas");
+    outputCanvas.width = outputSize;
+    outputCanvas.height = outputSize;
+    const ctx = outputCanvas.getContext("2d");
+    if (!ctx) return null;
+    ctx.drawImage(canvasRef.current, 0, 0, outputSize, outputSize);
+    const mimeType = `image/${outputFormat}`;
+    return outputCanvas.toDataURL(mimeType, outputQuality);
+  }, [image, outputSize, outputFormat, outputQuality]);
+  useEffect(() => {
+    if (!canvasRef.current || !image || !imageLoaded) return;
+    const canvas = canvasRef.current;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const displaySize = size;
+    canvas.width = displaySize;
+    canvas.height = displaySize;
+    ctx.clearRect(0, 0, displaySize, displaySize);
+    ctx.save();
+    ctx.translate(displaySize / 2, displaySize / 2);
+    ctx.rotate(rotation * Math.PI / 180);
+    const scale = zoom;
+    const imgAspect = image.width / image.height;
+    let drawWidth, drawHeight;
+    if (imgAspect > 1) {
+      drawHeight = displaySize * scale;
+      drawWidth = drawHeight * imgAspect;
+    } else {
+      drawWidth = displaySize * scale;
+      drawHeight = drawWidth / imgAspect;
+    }
+    ctx.drawImage(
+      image,
+      -drawWidth / 2 + position.x,
+      -drawHeight / 2 + position.y,
+      drawWidth,
+      drawHeight
+    );
+    ctx.restore();
+    const dataUrl = generateOutput();
+    if (dataUrl) {
+      onChange?.(dataUrl);
+    }
+  }, [
+    image,
+    imageLoaded,
+    zoom,
+    rotation,
+    position,
+    size,
+    generateOutput,
+    onChange
+  ]);
+  const resetTransforms = useCallback(() => {
+    setZoom(1);
+    setRotation(0);
+    setPosition({ x: 0, y: 0 });
+  }, []);
+  const handleFileSelect = useCallback(
+    (e) => {
+      const file = e.target.files?.[0];
+      if (!file) return;
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        const img = new Image();
+        img.crossOrigin = "anonymous";
+        img.onload = () => {
+          setImage(img);
+          setImageLoaded(true);
+          resetTransforms();
+        };
+        img.src = event.target?.result;
+      };
+      reader.readAsDataURL(file);
+    },
+    [resetTransforms]
+  );
+  const handleMouseDown = useCallback(
+    (e) => {
+      if (!imageLoaded) return;
+      setIsDragging(true);
+      setDragStart({ x: e.clientX - position.x, y: e.clientY - position.y });
+    },
+    [imageLoaded, position]
+  );
+  const handleMouseMove = useCallback(
+    (e) => {
+      if (!isDragging) return;
+      setPosition({
+        x: e.clientX - dragStart.x,
+        y: e.clientY - dragStart.y
+      });
+    },
+    [isDragging, dragStart]
+  );
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+  const handleTouchStart = useCallback(
+    (e) => {
+      if (!imageLoaded) return;
+      const touch = e.touches[0];
+      setIsDragging(true);
+      setDragStart({
+        x: touch.clientX - position.x,
+        y: touch.clientY - position.y
+      });
+    },
+    [imageLoaded, position]
+  );
+  const handleTouchMove = useCallback(
+    (e) => {
+      if (!isDragging) return;
+      const touch = e.touches[0];
+      setPosition({
+        x: touch.clientX - dragStart.x,
+        y: touch.clientY - dragStart.y
+      });
+    },
+    [isDragging, dragStart]
+  );
+  const handleDiscard = useCallback(() => {
+    setImage(null);
+    setImageLoaded(false);
+    resetTransforms();
+    if (fileInputRef.current) {
+      fileInputRef.current.value = "";
+    }
+    onChange?.(null);
+  }, [resetTransforms, onChange]);
+  const handleZoomIn = () => setZoom((z) => Math.min(z + 0.1, 3));
+  const handleZoomOut = () => setZoom((z) => Math.max(z - 0.1, 0.5));
+  const handleRotateLeft = () => setRotation((r) => r - 15);
+  const handleRotateRight = () => setRotation((r) => r + 15);
+  const isLarge = controlSize === "large";
+  const buttonSize = isLarge ? "h-12 w-12" : "h-8 w-8";
+  const iconSize = isLarge ? "w-6 h-6" : "w-4 h-4";
+  const smallIconSize = isLarge ? "w-5 h-5" : "w-3 h-3";
+  const textSize = isLarge ? "text-sm" : "text-xs";
+  const uploadIconSize = isLarge ? "w-12 h-12" : "w-8 h-8";
+  const uploadContainerSize = isLarge ? "w-24 h-24" : "w-16 h-16";
+  const gapSize = isLarge ? "gap-6" : "gap-4";
+  const controlGap = isLarge ? "gap-3" : "gap-2";
+  const sliderHeight = isLarge ? "[&_[role=slider]]:h-6 [&_[role=slider]]:w-6" : "";
+  const guideRadius = size / 2 - 2;
+  const guideCenter = size / 2;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex flex-col", gapSize, className),
+      style: { width: size },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: containerRef,
+            className: "relative bg-muted rounded-2xl overflow-hidden",
+            style: { width: size, height: size },
+            children: [
+              !imageLoaded && /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => fileInputRef.current?.click(),
+                  className: cn(
+                    "absolute inset-0 z-10 flex flex-col items-center justify-center text-muted-foreground hover:text-foreground hover:bg-muted/80 transition-colors cursor-pointer",
+                    isLarge ? "gap-4" : "gap-3"
+                  ),
+                  "aria-label": t.uploadAria,
+                  type: "button",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: cn(
+                          "rounded-full bg-primary/10 flex items-center justify-center",
+                          uploadContainerSize
+                        ),
+                        children: /* @__PURE__ */ jsx(Upload, { className: cn("text-primary", uploadIconSize) })
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "span",
+                      {
+                        className: cn("font-medium", isLarge ? "text-base" : "text-sm"),
+                        children: t.uploadHint
+                      }
+                    ),
+                    /* @__PURE__ */ jsx("span", { className: cn("text-muted-foreground", textSize), children: t.uploadFormats })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "canvas",
+                {
+                  ref: canvasRef,
+                  className: cn(
+                    "absolute inset-0",
+                    imageLoaded ? "cursor-move" : "pointer-events-none opacity-0"
+                  ),
+                  style: { width: size, height: size },
+                  onMouseDown: handleMouseDown,
+                  onMouseMove: handleMouseMove,
+                  onMouseUp: handleMouseUp,
+                  onMouseLeave: handleMouseUp,
+                  onTouchStart: handleTouchStart,
+                  onTouchMove: handleTouchMove,
+                  onTouchEnd: handleMouseUp
+                }
+              ),
+              imageLoaded && /* @__PURE__ */ jsxs(
+                "svg",
+                {
+                  width: size,
+                  height: size,
+                  className: "pointer-events-none absolute inset-0",
+                  "aria-hidden": "true",
+                  children: [
+                    /* @__PURE__ */ jsx(
+                      "path",
+                      {
+                        d: `M0 0H${size}V${size}H0Z M${guideCenter - guideRadius} ${guideCenter}a${guideRadius} ${guideRadius} 0 1 0 ${guideRadius * 2} 0a${guideRadius} ${guideRadius} 0 1 0 ${-guideRadius * 2} 0`,
+                        fill: "rgb(0 0 0 / 0.45)",
+                        fillRule: "evenodd"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "circle",
+                      {
+                        cx: guideCenter,
+                        cy: guideCenter,
+                        r: guideRadius,
+                        fill: "none",
+                        stroke: "hsl(var(--primary))",
+                        strokeWidth: "3"
+                      }
+                    )
+                  ]
+                }
+              ),
+              showGrid && imageLoaded && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: "absolute inset-0 pointer-events-none",
+                  style: { width: size, height: size },
+                  children: /* @__PURE__ */ jsxs("svg", { width: size, height: size, className: "opacity-30", children: [
+                    /* @__PURE__ */ jsx(
+                      "line",
+                      {
+                        x1: size / 3,
+                        y1: 0,
+                        x2: size / 3,
+                        y2: size,
+                        stroke: "white",
+                        strokeWidth: "1"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "line",
+                      {
+                        x1: size * 2 / 3,
+                        y1: 0,
+                        x2: size * 2 / 3,
+                        y2: size,
+                        stroke: "white",
+                        strokeWidth: "1"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "line",
+                      {
+                        x1: 0,
+                        y1: size / 3,
+                        x2: size,
+                        y2: size / 3,
+                        stroke: "white",
+                        strokeWidth: "1"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "line",
+                      {
+                        x1: 0,
+                        y1: size * 2 / 3,
+                        x2: size,
+                        y2: size * 2 / 3,
+                        stroke: "white",
+                        strokeWidth: "1"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "line",
+                      {
+                        x1: size / 2 - 10,
+                        y1: size / 2,
+                        x2: size / 2 + 10,
+                        y2: size / 2,
+                        stroke: "white",
+                        strokeWidth: "1"
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      "line",
+                      {
+                        x1: size / 2,
+                        y1: size / 2 - 10,
+                        x2: size / 2,
+                        y2: size / 2 + 10,
+                        stroke: "white",
+                        strokeWidth: "1"
+                      }
+                    )
+                  ] })
+                }
+              ),
+              imageLoaded && isDragging && /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  className: cn(
+                    "absolute top-2 left-1/2 -translate-x-1/2 bg-black/60 rounded text-white flex items-center",
+                    isLarge ? "px-3 py-2 text-sm gap-2" : "px-2 py-1 text-xs gap-1"
+                  ),
+                  children: [
+                    /* @__PURE__ */ jsx(Move, { className: smallIconSize }),
+                    t.dragging
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        imageLoaded && /* @__PURE__ */ jsxs("div", { className: cn("space-y-4", isLarge && "space-y-5"), children: [
+          /* @__PURE__ */ jsxs("div", { className: cn("flex items-center", controlGap), children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: cn(buttonSize, "shrink-0"),
+                onClick: handleZoomOut,
+                "aria-label": t.zoomOut,
+                type: "button",
+                children: /* @__PURE__ */ jsx(ZoomOut, { className: iconSize })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Slider,
+              {
+                value: [zoom],
+                onValueChange: ([v]) => setZoom(v),
+                min: 0.5,
+                max: 3,
+                step: 0.01,
+                className: cn("flex-1", sliderHeight),
+                "aria-label": t.zoomLevel
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                className: cn(buttonSize, "shrink-0"),
+                onClick: handleZoomIn,
+                "aria-label": t.zoomIn,
+                type: "button",
+                children: /* @__PURE__ */ jsx(ZoomIn, { className: iconSize })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between", controlGap), children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn("flex items-center", isLarge ? "gap-2" : "gap-1"),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "icon",
+                      className: buttonSize,
+                      onClick: handleRotateLeft,
+                      "aria-label": t.rotateLeft,
+                      type: "button",
+                      children: /* @__PURE__ */ jsx(RotateCcw, { className: iconSize })
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      className: cn(
+                        "text-muted-foreground text-center tabular-nums",
+                        textSize,
+                        isLarge ? "w-16" : "w-12"
+                      ),
+                      children: [
+                        rotation,
+                        "\xB0"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "icon",
+                      className: buttonSize,
+                      onClick: handleRotateRight,
+                      "aria-label": t.rotateRight,
+                      type: "button",
+                      children: /* @__PURE__ */ jsx(RotateCw, { className: iconSize })
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn("flex items-center", isLarge ? "gap-2" : "gap-1"),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Toggle,
+                    {
+                      pressed: showGrid,
+                      onPressedChange: setShowGrid,
+                      size: "sm",
+                      className: cn(buttonSize, "p-0"),
+                      "aria-label": t.toggleGrid,
+                      children: /* @__PURE__ */ jsx(Grid3X3, { className: iconSize })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "icon",
+                      className: buttonSize,
+                      onClick: resetTransforms,
+                      "aria-label": t.reset,
+                      type: "button",
+                      children: /* @__PURE__ */ jsx(RefreshCw, { className: iconSize })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "icon",
+                      className: buttonSize,
+                      onClick: () => fileInputRef.current?.click(),
+                      "aria-label": t.replace,
+                      type: "button",
+                      children: /* @__PURE__ */ jsx(Upload, { className: iconSize })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      variant: "ghost",
+                      size: "icon",
+                      className: cn(
+                        buttonSize,
+                        "text-destructive hover:text-destructive hover:bg-destructive/10"
+                      ),
+                      onClick: handleDiscard,
+                      "aria-label": t.discard,
+                      type: "button",
+                      children: /* @__PURE__ */ jsx(X, { className: iconSize })
+                    }
+                  )
+                ]
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: fileInputRef,
+            type: "file",
+            accept: "image/*",
+            onChange: handleFileSelect,
+            className: "hidden",
+            "aria-hidden": "true"
+          }
+        )
+      ]
+    }
+  );
+}
+function Dialog({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+}
+function DialogPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogClose({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(DialogPrimitive.Close, { "data-slot": "dialog-close", ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(DialogPortal, { "data-slot": "dialog-portal", children: [
+    /* @__PURE__ */ jsx(DialogOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      DialogPrimitive.Content,
+      {
+        "data-slot": "dialog-content",
+        className: cn(
+          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 outline-none sm:max-w-lg",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxs(
+            DialogPrimitive.Close,
+            {
+              "data-slot": "dialog-close",
+              className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+              children: [
+                /* @__PURE__ */ jsx(XIcon, {}),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      className: cn("flex flex-col gap-2 text-center sm:text-left", className),
+      ...props
+    }
+  );
+}
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "dialog-footer",
+      className: cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DialogPrimitive.Title,
+    {
+      "data-slot": "dialog-title",
+      className: cn("text-lg leading-none font-semibold", className),
+      ...props
+    }
+  );
+}
+function Drawer({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Drawer$1.Root, { "data-slot": "drawer", ...props });
+}
+function DrawerPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Drawer$1.Portal, { "data-slot": "drawer-portal", ...props });
+}
+function DrawerClose({
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Drawer$1.Close, { "data-slot": "drawer-close", ...props });
+}
+function DrawerOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Drawer$1.Overlay,
+    {
+      "data-slot": "drawer-overlay",
+      className: cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DrawerContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(DrawerPortal, { "data-slot": "drawer-portal", children: [
+    /* @__PURE__ */ jsx(DrawerOverlay, {}),
+    /* @__PURE__ */ jsxs(
+      Drawer$1.Content,
+      {
+        "data-slot": "drawer-content",
+        className: cn(
+          "group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
+          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
+          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
+          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
+          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }),
+          children
+        ]
+      }
+    )
+  ] });
+}
+function DrawerHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "drawer-header",
+      className: cn(
+        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DrawerFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "drawer-footer",
+      className: cn("mt-auto flex flex-col gap-2 p-4", className),
+      ...props
+    }
+  );
+}
+function DrawerTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Drawer$1.Title,
+    {
+      "data-slot": "drawer-title",
+      className: cn("text-foreground font-semibold", className),
+      ...props
+    }
+  );
+}
+function useMediaQuery(query) {
+  const [matches, setMatches] = useState(false);
+  useEffect(() => {
+    const media = window.matchMedia(query);
+    if (media.matches !== matches) {
+      setMatches(media.matches);
+    }
+    const listener = () => setMatches(media.matches);
+    media.addEventListener("change", listener);
+    return () => media.removeEventListener("change", listener);
+  }, [matches, query]);
+  return matches;
+}
+function AvatarEditorDialog({
+  value,
+  onChange,
+  onSave,
+  displaySize = 120,
+  editorSize = 280,
+  outputSize = 256,
+  placeholder = "Add Photo",
+  editLabel = "Edit avatar",
+  dialogTitle = "Edit Avatar",
+  acceptText = "Accept",
+  cancelText = "Cancel",
+  savingText = "Saving...",
+  savedText = "Saved!",
+  successMessage = "Avatar saved successfully!",
+  errorMessage = "Failed to save avatar. Please try again.",
+  className,
+  editorLabels
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [editedValue, setEditedValue] = useState(value ?? null);
+  const [displaySrc, setDisplaySrc] = useState(value ?? null);
+  const [isSaving, setIsSaving] = useState(false);
+  const [feedback, setFeedback] = useState(null);
+  useEffect(() => {
+    setDisplaySrc(value ?? null);
+  }, [value]);
+  const isMobile = useMediaQuery("(max-width: 640px)");
+  const caption = (placeholder ?? "").trim();
+  const handleOpenChange = useCallback(
+    (open) => {
+      if (open) {
+        setEditedValue(value ?? null);
+        setFeedback(null);
+      }
+      setIsOpen(open);
+    },
+    [value]
+  );
+  const handleAccept = useCallback(async () => {
+    if (!editedValue) return;
+    setIsSaving(true);
+    setFeedback(null);
+    try {
+      if (onSave) {
+        const result = await onSave(editedValue);
+        if (result) {
+          setDisplaySrc(editedValue);
+          onChange?.(editedValue);
+          setFeedback({ type: "success", message: successMessage });
+          setTimeout(() => {
+            setIsOpen(false);
+            setFeedback(null);
+          }, 1500);
+        } else {
+          setFeedback({ type: "error", message: errorMessage });
+        }
+      } else {
+        setDisplaySrc(editedValue);
+        onChange?.(editedValue);
+        setFeedback({ type: "success", message: successMessage });
+        setTimeout(() => {
+          setIsOpen(false);
+          setFeedback(null);
+        }, 1500);
+      }
+    } catch {
+      setFeedback({ type: "error", message: errorMessage });
+    } finally {
+      setIsSaving(false);
+    }
+  }, [editedValue, onChange, onSave, successMessage, errorMessage]);
+  const AvatarDisplay = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("relative group", className),
+      style: { width: displaySize, height: displaySize },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "relative w-full h-full rounded-full overflow-hidden bg-muted border-2 border-border flex items-center justify-center",
+            style: { width: displaySize, height: displaySize },
+            children: /* @__PURE__ */ jsx(
+              SafeImage,
+              {
+                src: displaySrc,
+                alt: "Avatar",
+                className: "absolute inset-0 h-full w-full object-cover",
+                fallback: /* @__PURE__ */ jsxs(
+                  "div",
+                  {
+                    className: cn(
+                      "flex flex-col items-center justify-center text-muted-foreground",
+                      caption ? "gap-1" : "gap-0"
+                    ),
+                    children: [
+                      /* @__PURE__ */ jsx(
+                        User,
+                        {
+                          className: "h-1/2 w-1/2 max-h-[55%] max-w-[55%] shrink-0",
+                          "aria-hidden": true
+                        }
+                      ),
+                      caption ? /* @__PURE__ */ jsx("span", { className: "text-xs text-center px-1", children: caption }) : null
+                    ]
+                  }
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => handleOpenChange(true),
+            className: "absolute bottom-0 right-0 w-8 h-8 rounded-full bg-primary text-primary-foreground flex items-center justify-center shadow-lg hover:bg-primary/90 transition-colors focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2",
+            "aria-label": editLabel,
+            type: "button",
+            children: /* @__PURE__ */ jsx(Pencil, { className: "w-4 h-4" })
+          }
+        )
+      ]
+    }
+  );
+  const mobileEditorSize = isMobile ? Math.min(editorSize + 40, window.innerWidth - 48) : editorSize;
+  const EditorContent = /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
+    /* @__PURE__ */ jsx(
+      AvatarEditor,
+      {
+        value: editedValue,
+        onChange: setEditedValue,
+        size: mobileEditorSize,
+        outputSize,
+        controlSize: isMobile ? "large" : "default",
+        labels: editorLabels
+      }
+    ),
+    /* @__PURE__ */ jsx(AnimatePresence, { children: feedback && /* @__PURE__ */ jsxs(
+      motion.div,
+      {
+        initial: { opacity: 0, y: -10 },
+        animate: { opacity: 1, y: 0 },
+        exit: { opacity: 0, y: -10 },
+        className: cn(
+          "flex items-center gap-2 rounded-lg font-medium",
+          isMobile ? "px-5 py-3 text-base" : "px-4 py-2 text-sm",
+          feedback.type === "success" ? "bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-400" : "bg-red-100 text-red-800 dark:bg-red-900/30 dark:text-red-400"
+        ),
+        children: [
+          feedback.type === "success" ? /* @__PURE__ */ jsx(Check, { className: isMobile ? "w-5 h-5" : "w-4 h-4" }) : /* @__PURE__ */ jsx(X, { className: isMobile ? "w-5 h-5" : "w-4 h-4" }),
+          feedback.message
+        ]
+      }
+    ) })
+  ] });
+  const FooterButtons = /* @__PURE__ */ jsxs(Fragment, { children: [
+    isMobile ? /* @__PURE__ */ jsx(DrawerClose, { asChild: true, children: /* @__PURE__ */ jsx(
+      Button,
+      {
+        variant: "outline",
+        disabled: isSaving,
+        size: "lg",
+        className: "flex-1 bg-transparent",
+        children: cancelText
+      }
+    ) }) : /* @__PURE__ */ jsx(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "outline", disabled: isSaving, children: cancelText }) }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        onClick: handleAccept,
+        disabled: !editedValue || isSaving || feedback?.type === "success",
+        size: isMobile ? "lg" : "default",
+        className: isMobile ? "flex-1" : "",
+        children: isSaving ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            Loader2,
+            {
+              className: cn(
+                "mr-2 animate-spin",
+                isMobile ? "w-5 h-5" : "w-4 h-4"
+              )
+            }
+          ),
+          savingText
+        ] }) : feedback?.type === "success" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(Check, { className: cn("mr-2", isMobile ? "w-5 h-5" : "w-4 h-4") }),
+          savedText
+        ] }) : acceptText
+      }
+    )
+  ] });
+  if (isMobile) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      AvatarDisplay,
+      /* @__PURE__ */ jsx(Drawer, { open: isOpen, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs(DrawerContent, { className: "max-h-[96vh]", children: [
+        /* @__PURE__ */ jsx(DrawerHeader, { className: "text-center", children: /* @__PURE__ */ jsx(DrawerTitle, { className: "text-xl", children: dialogTitle }) }),
+        /* @__PURE__ */ jsx("div", { className: "px-6 pb-6 overflow-y-auto", children: EditorContent }),
+        /* @__PURE__ */ jsx(DrawerFooter, { className: "flex-row gap-3 px-6 pb-8", children: FooterButtons })
+      ] }) })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    AvatarDisplay,
+    /* @__PURE__ */ jsx(Dialog, { open: isOpen, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs(DialogContent, { className: "sm:max-w-md", children: [
+      /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: dialogTitle }) }),
+      /* @__PURE__ */ jsx("div", { className: "flex justify-center py-4", children: EditorContent }),
+      /* @__PURE__ */ jsx(DialogFooter, { className: "sm:gap-3", children: FooterButtons })
+    ] }) })
+  ] });
+}
+
+// src/components/upload/part-math.ts
+function partRanges(fileSize, partSize) {
+  if (partSize <= 0) {
+    throw new Error("partSize must be greater than 0");
+  }
+  if (fileSize <= 0) {
+    return [{ partNumber: 1, start: 0, end: 0 }];
+  }
+  const count = Math.ceil(fileSize / partSize);
+  return Array.from({ length: count }, (_, index) => {
+    const start = index * partSize;
+    return {
+      partNumber: index + 1,
+      start,
+      end: Math.min(fileSize, start + partSize)
+    };
+  });
+}
+var BYTE_UNITS = ["B", "KB", "MB", "GB", "TB"];
+function formatUploadBytes(bytes) {
+  if (!Number.isFinite(bytes) || bytes <= 0) {
+    return "0 B";
+  }
+  let value = bytes;
+  let unit = 0;
+  while (value >= 1024 && unit < BYTE_UNITS.length - 1) {
+    value /= 1024;
+    unit += 1;
+  }
+  if (unit === 0 || value >= 10) {
+    return `${Math.round(value)} ${BYTE_UNITS[unit]}`;
+  }
+  const tenths = Math.round(value * 10) / 10;
+  const label = Number.isInteger(tenths) ? String(tenths) : tenths.toFixed(1);
+  return `${label} ${BYTE_UNITS[unit]}`;
+}
+function progressFromBytes(loaded, total) {
+  const safeTotal = Math.max(0, total);
+  const safeLoaded = Math.min(Math.max(0, loaded), safeTotal);
+  const percent = safeTotal > 0 ? Math.round(safeLoaded / safeTotal * 100) : 0;
+  return { loaded: safeLoaded, total: safeTotal, percent };
+}
+function fileMatchesAccept(file, accept) {
+  if (!accept?.trim()) return true;
+  const type = file.type.toLowerCase();
+  const name = file.name.toLowerCase();
+  return accept.split(",").some((token) => {
+    const trimmed = token.trim().toLowerCase();
+    if (!trimmed) return false;
+    if (trimmed.endsWith("/*")) {
+      return type.startsWith(trimmed.slice(0, -1));
+    }
+    if (trimmed.startsWith(".")) {
+      return name.endsWith(trimmed);
+    }
+    return type === trimmed;
+  });
+}
+
+// src/components/upload/types.ts
+var DEFAULT_FILE_DROPZONE_LABELS = {
+  idle: "Drop a file here or browse",
+  hint: "Click or press Enter to choose a file",
+  browse: "Browse",
+  rejectType: "This file type is not allowed",
+  rejectSize: "This file is too large"
+};
+var DEFAULT_FILE_UPLOAD_TRAY_LABELS = {
+  title: "Uploads",
+  pause: "Pause",
+  resume: "Resume",
+  cancel: "Cancel",
+  uploading: "Uploading",
+  paused: "Paused",
+  completing: "Finishing",
+  completed: "Uploaded",
+  cancelled: "Cancelled",
+  error: "Failed"
+};
+var DEFAULT_FILE_UPLOAD_LABELS = {
+  dropzone: DEFAULT_FILE_DROPZONE_LABELS,
+  tray: DEFAULT_FILE_UPLOAD_TRAY_LABELS
+};
+function FileDropzone({
+  accept,
+  maxSize,
+  disabled = false,
+  labels: labelOverrides,
+  onFile,
+  onReject,
+  className
+}) {
+  const labels = { ...DEFAULT_FILE_DROPZONE_LABELS, ...labelOverrides };
+  const inputId = useId();
+  const inputRef = useRef(null);
+  const [dragging, setDragging] = useState(false);
+  const [message, setMessage] = useState(null);
+  function takeFile(file) {
+    if (!file || disabled) return;
+    if (!fileMatchesAccept(file, accept)) {
+      setMessage(labels.rejectType);
+      onReject?.("type");
+      return;
+    }
+    if (maxSize != null && file.size > maxSize) {
+      setMessage(labels.rejectSize);
+      onReject?.("size");
+      return;
+    }
+    setMessage(null);
+    onFile(file);
+  }
+  function onDrop(event) {
+    event.preventDefault();
+    setDragging(false);
+    takeFile(event.dataTransfer.files[0]);
+  }
+  function onKeyDown(event) {
+    if (disabled) return;
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      inputRef.current?.click();
+    }
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("relative flex w-full min-w-0 flex-col gap-2", className),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "button",
+            tabIndex: disabled ? -1 : 0,
+            "aria-disabled": disabled,
+            "aria-describedby": message ? `${inputId}-message` : `${inputId}-hint`,
+            "aria-controls": inputId,
+            "data-dragging": dragging || void 0,
+            className: cn(
+              "border-input bg-background focus-visible:border-ring focus-visible:ring-ring/50 w-full min-w-0 rounded-lg border border-dashed px-4 py-8 text-center outline-none focus-visible:ring-[3px]",
+              dragging && "border-primary bg-primary/5",
+              disabled && "pointer-events-none opacity-50"
+            ),
+            onClick: () => {
+              if (!disabled) inputRef.current?.click();
+            },
+            onKeyDown,
+            onDragEnter: (event) => {
+              event.preventDefault();
+              if (!disabled) setDragging(true);
+            },
+            onDragOver: (event) => {
+              event.preventDefault();
+            },
+            onDragLeave: (event) => {
+              if (event.currentTarget.contains(event.relatedTarget)) {
+                return;
+              }
+              setDragging(false);
+            },
+            onDrop,
+            children: [
+              /* @__PURE__ */ jsx("p", { className: "text-sm font-medium", children: labels.idle }),
+              /* @__PURE__ */ jsx(
+                "p",
+                {
+                  id: `${inputId}-hint`,
+                  className: "text-muted-foreground mt-1 text-xs",
+                  children: labels.hint
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "text-primary mt-3 inline-flex text-sm font-medium underline-offset-4", children: labels.browse })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: inputId,
+            ref: inputRef,
+            type: "file",
+            accept,
+            disabled,
+            "aria-label": labels.browse,
+            className: "sr-only",
+            onChange: (event) => {
+              takeFile(event.target.files?.[0]);
+              event.target.value = "";
+            }
+          }
+        ),
+        message ? /* @__PURE__ */ jsx(
+          "p",
+          {
+            id: `${inputId}-message`,
+            role: "alert",
+            className: "text-destructive text-sm",
+            children: message
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function statusLabel(status, labels) {
+  switch (status) {
+    case "uploading":
+      return labels.uploading;
+    case "paused":
+      return labels.paused;
+    case "completing":
+      return labels.completing;
+    case "completed":
+      return labels.completed;
+    case "cancelled":
+      return labels.cancelled;
+    case "error":
+      return labels.error;
+    default: {
+      const _exhaustive = status;
+      return _exhaustive;
+    }
+  }
+}
+function progressLabel(job) {
+  return `${job.percent}% \xB7 ${formatUploadBytes(job.loaded)} / ${formatUploadBytes(job.total)}`;
+}
+function FileUploadTray({
+  jobs,
+  labels: labelOverrides,
+  onPause,
+  onResume,
+  onCancel,
+  className
+}) {
+  const labels = { ...DEFAULT_FILE_UPLOAD_TRAY_LABELS, ...labelOverrides };
+  const visible = jobs.filter((job) => job.status !== "cancelled");
+  if (visible.length === 0) return null;
+  return /* @__PURE__ */ jsx(
+    "section",
+    {
+      "aria-label": labels.title,
+      className: cn("grid min-w-0 gap-3", className),
+      children: /* @__PURE__ */ jsx("ul", { className: "grid min-w-0 gap-3", children: visible.map((job) => {
+        const active = job.status === "uploading" || job.status === "completing";
+        const canPause = job.status === "uploading";
+        const canResume = job.status === "paused";
+        const canCancel = job.status === "uploading" || job.status === "paused" || job.status === "error";
+        return /* @__PURE__ */ jsxs("li", { className: "grid min-w-0 gap-1.5", children: [
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "min-w-0 line-clamp-3 text-sm leading-5 font-medium break-all",
+              title: job.name,
+              children: job.name
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground shrink-0 text-xs", children: statusLabel(job.status, labels) }),
+            /* @__PURE__ */ jsx("p", { className: "text-muted-foreground shrink-0 text-xs tabular-nums", children: progressLabel(job) }),
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1" }),
+            canPause ? /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "icon-sm",
+                className: "shrink-0",
+                "aria-label": `${labels.pause} ${job.name}`,
+                onClick: () => onPause(job.id),
+                children: /* @__PURE__ */ jsx(Pause, {})
+              }
+            ) : null,
+            canResume ? /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "icon-sm",
+                className: "shrink-0",
+                "aria-label": `${labels.resume} ${job.name}`,
+                onClick: () => onResume(job.id),
+                children: /* @__PURE__ */ jsx(Play, {})
+              }
+            ) : null,
+            canCancel ? /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "icon-sm",
+                className: "shrink-0",
+                "aria-label": `${labels.cancel} ${job.name}`,
+                onClick: () => onCancel(job.id),
+                children: /* @__PURE__ */ jsx(X, {})
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              role: "progressbar",
+              "aria-valuemin": 0,
+              "aria-valuemax": 100,
+              "aria-valuenow": job.percent,
+              "aria-label": job.name,
+              className: "bg-muted h-2 overflow-hidden rounded-full",
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "bg-primary h-full",
+                    active && "motion-safe:transition-[width]"
+                  ),
+                  style: { width: `${job.percent}%` }
+                }
+              )
+            }
+          ),
+          job.error ? /* @__PURE__ */ jsx("p", { role: "alert", className: "text-destructive text-xs", children: job.error }) : null
+        ] }, job.id);
+      }) })
+    }
+  );
+}
+function formatActiveBadge(count) {
+  return count > 9 ? "9+" : String(count);
+}
+function isActiveStatus(status) {
+  return status === "uploading" || status === "paused" || status === "completing";
+}
+function FileUploadMenu({
+  jobs,
+  labels: labelOverrides,
+  onPause,
+  onResume,
+  onCancel,
+  open,
+  onOpenChange,
+  align = "end",
+  className
+}) {
+  const labels = { ...DEFAULT_FILE_UPLOAD_TRAY_LABELS, ...labelOverrides };
+  const visible = jobs.filter((job) => job.status !== "cancelled");
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(false);
+  const isControlled = open !== void 0;
+  const resolvedOpen = isControlled ? open : uncontrolledOpen;
+  function setResolvedOpen(next) {
+    if (!isControlled) setUncontrolledOpen(next);
+    onOpenChange?.(next);
+  }
+  if (visible.length === 0) return null;
+  const activeCount = visible.filter(
+    (job) => isActiveStatus(job.status)
+  ).length;
+  return /* @__PURE__ */ jsxs(
+    DropdownMenu,
+    {
+      modal: false,
+      open: resolvedOpen,
+      onOpenChange: setResolvedOpen,
+      children: [
+        /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "icon",
+            className: cn("relative size-9", className),
+            "aria-label": labels.title,
+            children: [
+              /* @__PURE__ */ jsx(Upload, { className: "size-4" }),
+              activeCount > 0 ? /* @__PURE__ */ jsx("span", { className: "bg-destructive text-destructive-foreground absolute -top-0.5 -right-0.5 flex size-4 items-center justify-center rounded-full text-[10px] leading-none font-medium tabular-nums", children: formatActiveBadge(activeCount) }) : null
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ jsxs(
+          DropdownMenuContent,
+          {
+            align,
+            className: "w-80 min-w-0 max-w-[calc(100vw-2rem)] overflow-x-hidden p-0",
+            children: [
+              /* @__PURE__ */ jsx("div", { className: "flex items-center justify-between border-b px-4 py-3", children: /* @__PURE__ */ jsx("h4", { className: "font-semibold", children: labels.title }) }),
+              /* @__PURE__ */ jsx("div", { className: "max-h-80 min-w-0 overflow-x-hidden overflow-y-auto p-3", children: /* @__PURE__ */ jsx(
+                FileUploadTray,
+                {
+                  jobs: visible,
+                  labels,
+                  onPause,
+                  onResume,
+                  onCancel
+                }
+              ) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/upload/createMultipartUploadController.ts
+var PART_ATTEMPTS = 3;
+var PART_RETRY_BACKOFF_MS = [500, 1500];
+function defaultSleep(ms) {
+  return new Promise((resolve) => {
+    setTimeout(resolve, ms);
+  });
+}
+function isAbortError(error) {
+  return error instanceof DOMException && error.name === "AbortError";
+}
+function isMissingEtagError(error) {
+  return error instanceof Error && error.message.includes("missing ETag");
+}
+function isRetryableStatus(status) {
+  return status === 0 || status === 403 || status === 408 || status === 429 || status >= 500;
+}
+function putPartFailure(partNumber, status) {
+  return new Error(`Upload failed (part ${partNumber}, status ${status})`);
+}
+function parsePutStatus(error) {
+  if (!(error instanceof Error)) return null;
+  const match = error.message.match(/status (\d+)\)$/);
+  if (!match?.[1]) return null;
+  return Number(match[1]);
+}
+function isRetryablePutError(error) {
+  if (isAbortError(error) || isMissingEtagError(error)) return false;
+  const status = parsePutStatus(error);
+  if (status === null) return false;
+  return isRetryableStatus(status);
+}
+function readEtag(xhr) {
+  const raw = xhr.getResponseHeader("ETag") ?? xhr.getResponseHeader("etag") ?? "";
+  const etag = raw.trim();
+  if (!etag) {
+    throw new Error("Upload part missing ETag");
+  }
+  return etag;
+}
+function putPart(input) {
+  return new Promise((resolve, reject) => {
+    input.xhr.open("PUT", input.url);
+    input.xhr.upload.onprogress = (event) => {
+      input.onProgress(event.loaded);
+    };
+    input.xhr.onload = () => {
+      if (input.xhr.status >= 200 && input.xhr.status < 300) {
+        try {
+          resolve(readEtag(input.xhr));
+        } catch (error) {
+          reject(error);
+        }
+        return;
+      }
+      reject(putPartFailure(input.partNumber, input.xhr.status));
+    };
+    input.xhr.onerror = () => {
+      reject(putPartFailure(input.partNumber, 0));
+    };
+    input.xhr.onabort = () => {
+      reject(new DOMException("The operation was aborted.", "AbortError"));
+    };
+    input.xhr.send(input.body);
+  });
+}
+function createMultipartUploadController(options) {
+  const ranges = partRanges(options.file.size, options.partSize);
+  const sleep = options.sleep ?? defaultSleep;
+  const state = { status: "idle" };
+  const seeded = /* @__PURE__ */ new Map();
+  for (const part of options.completedParts ?? []) {
+    if (part.partNumber < 1 || part.partNumber > ranges.length) continue;
+    seeded.set(part.partNumber, part);
+  }
+  const completed = [...seeded.values()].sort(
+    (left, right) => left.partNumber - right.partNumber
+  );
+  const done = new Set(completed.map((part) => part.partNumber));
+  let currentXhr = null;
+  let run = null;
+  let resumeIndex = ranges.findIndex((range) => !done.has(range.partNumber));
+  if (resumeIndex < 0) resumeIndex = ranges.length;
+  function currentStatus() {
+    return state.status;
+  }
+  function isStopped() {
+    const status = currentStatus();
+    return status === "paused" || status === "cancelled";
+  }
+  function emitProgress(currentPartLoaded = 0) {
+    const completedBytes = completed.reduce((sum, part) => {
+      const range = ranges[part.partNumber - 1];
+      return sum + (range ? range.end - range.start : 0);
+    }, 0);
+    options.onProgress?.(
+      progressFromBytes(completedBytes + currentPartLoaded, options.file.size)
+    );
+  }
+  async function putPartWithRetry(partNumber, body) {
+    let lastError;
+    for (let attempt = 1; attempt <= PART_ATTEMPTS; attempt += 1) {
+      if (state.status !== "uploading") {
+        throw lastError ?? new DOMException("The operation was aborted.", "AbortError");
+      }
+      const url = await options.adapter.requestPartUrl(partNumber);
+      if (state.status !== "uploading") {
+        throw new DOMException("The operation was aborted.", "AbortError");
+      }
+      const xhr = options.xhrFactory ? options.xhrFactory() : new XMLHttpRequest();
+      currentXhr = xhr;
+      try {
+        return await putPart({
+          url,
+          body,
+          xhr,
+          partNumber,
+          onProgress: (loaded) => emitProgress(loaded)
+        });
+      } catch (error) {
+        lastError = error;
+        if (currentXhr === xhr) currentXhr = null;
+        if (isStopped() || !isRetryablePutError(error) || attempt === PART_ATTEMPTS) {
+          throw error;
+        }
+        const delay = PART_RETRY_BACKOFF_MS[attempt - 1] ?? PART_RETRY_BACKOFF_MS[PART_RETRY_BACKOFF_MS.length - 1];
+        await sleep(delay);
+      } finally {
+        if (currentXhr === xhr) currentXhr = null;
+      }
+    }
+    throw lastError;
+  }
+  async function uploadFrom(startIndex) {
+    state.status = "uploading";
+    for (let index = startIndex; index < ranges.length; index += 1) {
+      if (state.status !== "uploading") return;
+      resumeIndex = index;
+      const range = ranges[index];
+      if (!range) continue;
+      if (done.has(range.partNumber)) continue;
+      const body = options.file.slice(range.start, range.end);
+      try {
+        const etag = await putPartWithRetry(range.partNumber, body);
+        if (state.status !== "uploading") return;
+        completed.push({ partNumber: range.partNumber, etag });
+        done.add(range.partNumber);
+        emitProgress(0);
+      } catch (error) {
+        currentXhr = null;
+        if (isStopped()) return;
+        state.status = "error";
+        throw error;
+      }
+    }
+    if (state.status !== "uploading") return;
+    state.status = "completing";
+    await options.adapter.complete([...completed]);
+    state.status = "completed";
+    emitProgress(0);
+  }
+  async function start() {
+    if (run) return run;
+    emitProgress(0);
+    run = uploadFrom(resumeIndex).catch((error) => {
+      if (isStopped()) return;
+      state.status = "error";
+      throw error;
+    });
+    return run;
+  }
+  function pause() {
+    if (state.status !== "uploading") return;
+    state.status = "paused";
+    currentXhr?.abort();
+  }
+  async function resume() {
+    if (state.status !== "paused") return;
+    run = uploadFrom(resumeIndex).catch((error) => {
+      if (isStopped()) return;
+      state.status = "error";
+      throw error;
+    });
+    return run;
+  }
+  async function cancel() {
+    if (state.status === "completed" || state.status === "cancelled" || state.status === "idle") {
+      state.status = "cancelled";
+      return;
+    }
+    state.status = "cancelled";
+    currentXhr?.abort();
+    await options.adapter.abort?.();
+  }
+  return {
+    start,
+    pause,
+    resume,
+    cancel,
+    getStatus: () => state.status
+  };
+}
+function useMediaQuery2(query) {
+  const [matches, setMatches] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const mql = window.matchMedia(query);
+    const onChange = () => setMatches(mql.matches);
+    onChange();
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, [query]);
+  return matches;
+}
+
+// src/lib/avatar.ts
+var EMPTY_COLORS = {
+  backgroundColor: "#9ca3af",
+  color: "#111111"
+};
+var AVATAR_PALETTE = [
+  "#4f6d8c",
+  // slate blue
+  "#3d7a6a",
+  // teal
+  "#6b5b8a",
+  // muted purple
+  "#8a5a4a",
+  // warm brown
+  "#4a7a8a",
+  // steel cyan
+  "#7a6b4a",
+  // olive
+  "#5a6b8a",
+  // periwinkle
+  "#8a4a5a",
+  // rose
+  "#4a8a6b",
+  // green
+  "#6b4a7a",
+  // plum
+  "#8a6b4a",
+  // amber brown
+  "#4a5a8a",
+  // indigo
+  "#7a4a6b",
+  // mauve
+  "#5a8a4a",
+  // leaf
+  "#8a5a7a",
+  // dusty pink
+  "#3d6b7a"
+  // deep teal
+];
+function hashString(input) {
+  let hash = 2166136261;
+  for (let i = 0; i < input.length; i++) {
+    hash ^= input.charCodeAt(i);
+    hash = Math.imul(hash, 16777619);
+  }
+  return hash >>> 0;
+}
+function srgbToLinear(channel) {
+  const c = channel / 255;
+  return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
+}
+function relativeLuminance(hex) {
+  const normalized = hex.replace("#", "");
+  const r = Number.parseInt(normalized.slice(0, 2), 16);
+  const g = Number.parseInt(normalized.slice(2, 4), 16);
+  const b = Number.parseInt(normalized.slice(4, 6), 16);
+  return 0.2126 * srgbToLinear(r) + 0.7152 * srgbToLinear(g) + 0.0722 * srgbToLinear(b);
+}
+function contrastingTextColor(backgroundHex) {
+  return relativeLuminance(backgroundHex) > 0.179 ? "#111111" : "#ffffff";
+}
+function getInitials(name, max = 2) {
+  const parts = name.trim().split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return "?";
+  return parts.slice(0, Math.max(1, max)).map((part) => part.charAt(0)).join("").toUpperCase();
+}
+function getAvatarColors(name) {
+  const normalized = name.trim().toLowerCase();
+  if (!normalized) {
+    return { ...EMPTY_COLORS };
+  }
+  const backgroundColor = AVATAR_PALETTE[hashString(normalized) % AVATAR_PALETTE.length];
+  return {
+    backgroundColor,
+    color: contrastingTextColor(backgroundColor)
+  };
+}
+function avatarFallbackStyle(name) {
+  return getAvatarColors(name);
+}
+function StatHighlightCard({
+  label,
+  value,
+  hint,
+  delta,
+  deltaTone = "neutral",
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "bg-card text-card-foreground rounded-xl border p-6 shadow-sm",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-sm", children: label }),
+        /* @__PURE__ */ jsx("p", { className: "mt-2 text-2xl font-semibold tracking-tight", children: value }),
+        delta ? /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: cn(
+              "mt-1 text-sm",
+              deltaTone === "up" && "text-emerald-600 dark:text-emerald-400",
+              deltaTone === "down" && "text-destructive",
+              deltaTone === "neutral" && "text-muted-foreground"
+            ),
+            children: delta
+          }
+        ) : null,
+        hint ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1 text-xs", children: hint }) : null
+      ]
+    }
+  );
+}
+function MetricChartCard({
+  title,
+  description,
+  action,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "bg-card text-card-foreground rounded-xl border shadow-sm",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3 p-6 pb-2", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h3", { className: "leading-none font-semibold tracking-tight", children: title }),
+            description ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mt-1.5 text-sm", children: description }) : null
+          ] }),
+          action
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "p-6 pt-4", children })
+      ]
+    }
+  );
+}
+function polyline(points) {
+  if (points.length === 0) return "";
+  const min = Math.min(...points);
+  const max = Math.max(...points);
+  const span = max - min || 1;
+  return points.map((point, index) => {
+    const x = points.length === 1 ? 50 : index / (points.length - 1) * 100;
+    const y = 28 - (point - min) / span * 24;
+    return `${x.toFixed(2)},${y.toFixed(2)}`;
+  }).join(" ");
+}
+function SparklineStat({
+  label,
+  value,
+  points,
+  className
+}) {
+  const reduced = useMediaQuery2("(prefers-reduced-motion: reduce)");
+  const path = polyline(points);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "bg-card text-card-foreground flex items-end justify-between gap-3 rounded-xl border p-4 shadow-sm",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: label }),
+          /* @__PURE__ */ jsx("p", { className: "mt-1 text-lg font-semibold tracking-tight", children: value })
+        ] }),
+        path ? /* @__PURE__ */ jsx(
+          "svg",
+          {
+            viewBox: "0 0 100 32",
+            className: cn(
+              "text-primary h-8 w-24",
+              !reduced && "motion-safe:transition-opacity"
+            ),
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx(
+              "polyline",
+              {
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2",
+                strokeLinejoin: "round",
+                strokeLinecap: "round",
+                points: path
+              }
+            )
+          }
+        ) : null
+      ]
+    }
+  );
+}
+var TIME_RANGE_OPTIONS = ["day", "week", "month", "year"];
+var DEFAULT_LABELS2 = {
+  day: "Day",
+  week: "Week",
+  month: "Month",
+  year: "Year"
+};
+function TimeRangePicker({
+  value,
+  onChange,
+  labels,
+  className
+}) {
+  const copy = { ...DEFAULT_LABELS2, ...labels };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "group",
+      "aria-label": "Time range",
+      className: cn("flex flex-wrap gap-1", className),
+      children: TIME_RANGE_OPTIONS.map((option) => {
+        const selected = option === value;
+        return /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            variant: selected ? "default" : "outline",
+            "aria-pressed": selected,
+            onClick: () => onChange(option),
+            children: copy[option]
+          },
+          option
+        );
+      })
+    }
+  );
+}
+function DimensionBreakdownTable({
+  title,
+  rows,
+  empty,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "bg-card text-card-foreground overflow-hidden rounded-xl border shadow-sm",
+        className
+      ),
+      children: [
+        title ? /* @__PURE__ */ jsx("h3", { className: "px-6 pt-6 text-sm font-semibold tracking-tight", children: title }) : null,
+        rows.length === 0 ? /* @__PURE__ */ jsx("div", { className: "p-6", children: empty }) : /* @__PURE__ */ jsx("table", { className: "w-full text-sm", children: /* @__PURE__ */ jsx("tbody", { children: rows.map((row) => /* @__PURE__ */ jsxs("tr", { className: "border-t first:border-t-0", children: [
+          /* @__PURE__ */ jsx("th", { scope: "row", className: "px-6 py-3 text-left font-medium", children: row.label }),
+          /* @__PURE__ */ jsx("td", { className: "px-6 py-3 text-right tabular-nums", children: row.value }),
+          row.share ? /* @__PURE__ */ jsx("td", { className: "text-muted-foreground px-6 py-3 text-right tabular-nums", children: row.share }) : null
+        ] }, row.id)) }) })
+      ]
+    }
+  );
+}
+function CostBreakdownCard({
+  title,
+  total,
+  items,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "bg-card text-card-foreground rounded-xl border p-6 shadow-sm",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between gap-3", children: [
+          /* @__PURE__ */ jsx("h3", { className: "font-semibold tracking-tight", children: title }),
+          total ? /* @__PURE__ */ jsx("p", { className: "text-lg font-semibold tabular-nums", children: total }) : null
+        ] }),
+        /* @__PURE__ */ jsx("ul", { className: "mt-4 space-y-2", children: items.map((item) => /* @__PURE__ */ jsxs(
+          "li",
+          {
+            className: "flex items-baseline justify-between gap-3 text-sm",
+            children: [
+              /* @__PURE__ */ jsxs("div", { children: [
+                /* @__PURE__ */ jsx("p", { children: item.label }),
+                item.basis ? /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: item.basis }) : null
+              ] }),
+              /* @__PURE__ */ jsx("p", { className: "tabular-nums", children: item.amount })
+            ]
+          },
+          item.id
+        )) })
+      ]
+    }
+  );
+}
+function MetricEmptyState({
+  title,
+  description,
+  action,
+  icon = BarChart3,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    EmptyState,
+    {
+      title,
+      description,
+      action,
+      icon,
+      className
+    }
+  );
+}
+function MetricSkeleton({ className, bars = 4 }) {
+  const reduced = useMediaQuery2("(prefers-reduced-motion: reduce)");
+  const count = Math.max(1, bars);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "status",
+      "aria-live": "polite",
+      className: cn("bg-card rounded-xl border p-6 shadow-sm", className),
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "bg-muted mb-4 h-4 w-32 rounded",
+              !reduced && "animate-pulse"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "flex h-32 items-end gap-2", children: Array.from({ length: count }, (_, index) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "bg-muted flex-1 rounded-t",
+              !reduced && "animate-pulse"
+            ),
+            style: { height: `${40 + index * 17 % 50}%` }
+          },
+          index
+        )) }),
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading metrics" })
+      ]
+    }
+  );
+}
+
+// src/lib/cookie-consent.ts
+var COOKIE_CONSENT_NAME = "yenio-cookie-consent";
+var COOKIE_CONSENT_VALUES = ["necessary", "all"];
+var COOKIE_CONSENT_MAX_AGE = 180 * 24 * 60 * 60;
+function isCookieConsentValue(value) {
+  return typeof value === "string" && COOKIE_CONSENT_VALUES.includes(value);
+}
+function cookieConsentAllowsReplay(value) {
+  return value === "all";
+}
+function cookieDomainFromHostname(hostname) {
+  const host = hostname.toLowerCase();
+  if (host === "localhost" || host === "127.0.0.1") return void 0;
+  if (host.endsWith(".yenio.mx") || host === "yenio.mx") return ".yenio.mx";
+  if (host.endsWith(".yenio-pld.workers.dev") || host === "yenio-pld.workers.dev") {
+    return ".yenio-pld.workers.dev";
+  }
+  return void 0;
+}
+function readCookieMap(cookieSource) {
+  const map = /* @__PURE__ */ new Map();
+  for (const part of cookieSource.split(";")) {
+    const trimmed = part.trim();
+    if (!trimmed) continue;
+    const eq = trimmed.indexOf("=");
+    if (eq < 0) continue;
+    const name = trimmed.slice(0, eq).trim();
+    const raw = trimmed.slice(eq + 1).trim();
+    map.set(name, decodeURIComponent(raw));
+  }
+  return map;
+}
+function parseCookieConsent(cookieSource) {
+  const raw = readCookieMap(cookieSource).get(COOKIE_CONSENT_NAME);
+  return isCookieConsentValue(raw) ? raw : null;
+}
+function readCookieConsent() {
+  if (typeof document === "undefined") return null;
+  return parseCookieConsent(document.cookie);
+}
+function serializeCookieConsent(value, options = {}) {
+  const maxAge = options.maxAge ?? COOKIE_CONSENT_MAX_AGE;
+  const secure = options.secure ?? (typeof window !== "undefined" && window.location.protocol === "https:");
+  const parts = [
+    `${COOKIE_CONSENT_NAME}=${encodeURIComponent(value)}`,
+    "Path=/",
+    `Max-Age=${maxAge}`,
+    "SameSite=Lax"
+  ];
+  if (options.domain) {
+    parts.push(`Domain=${options.domain}`);
+  }
+  if (secure) {
+    parts.push("Secure");
+  }
+  return parts.join("; ");
+}
+function writeCookieConsent(value, options = {}) {
+  if (typeof document === "undefined") return;
+  document.cookie = serializeCookieConsent(value, options);
+}
+function isEmbeddedWindow() {
+  if (typeof window === "undefined") return false;
+  try {
+    return window.self !== window.top;
+  } catch {
+    return true;
+  }
+}
+var DEFAULT_COOKIE_CONSENT_BANNER_LABELS = {
+  message: "We use necessary cookies to run Yenio. Extra cookies can be used for diagnostics if you opt in.",
+  acceptAll: "Accept all",
+  necessaryOnly: "Necessary only",
+  policy: "Cookies policy"
+};
+function CookieConsentBanner({
+  domain,
+  policyHref,
+  labels,
+  onChoice,
+  variant = "default",
+  className
+}) {
+  const copy = { ...DEFAULT_COOKIE_CONSENT_BANNER_LABELS, ...labels };
+  const [consent, setConsent] = useState(
+    "pending"
+  );
+  useEffect(() => {
+    if (variant === "embed" || isEmbeddedWindow()) {
+      setConsent("necessary");
+      return;
+    }
+    setConsent(readCookieConsent());
+  }, [variant]);
+  if (variant === "embed") return null;
+  if (consent === "pending" || consent) return null;
+  const choose = (value) => {
+    const resolvedDomain = domain ?? (typeof window === "undefined" ? void 0 : cookieDomainFromHostname(window.location.hostname));
+    writeCookieConsent(value, { domain: resolvedDomain });
+    setConsent(value);
+    onChoice?.(value);
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "dialog",
+      "aria-label": copy.message,
+      className: cn(
+        "fixed inset-x-0 bottom-0 z-50 border-t bg-background/95 p-4 shadow-lg backdrop-blur-sm",
+        className
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "mx-auto flex w-full max-w-5xl flex-col gap-3 sm:flex-row sm:items-center sm:justify-between", children: [
+        /* @__PURE__ */ jsxs("p", { className: "text-sm text-muted-foreground", children: [
+          copy.message,
+          policyHref ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            " ",
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: policyHref,
+                className: "text-foreground underline underline-offset-4",
+                children: copy.policy
+              }
+            )
+          ] }) : null
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-wrap gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              onClick: () => choose("necessary"),
+              children: copy.necessaryOnly
+            }
+          ),
+          /* @__PURE__ */ jsx(Button, { type: "button", onClick: () => choose("all"), children: copy.acceptAll })
+        ] })
+      ] })
+    }
+  );
+}
+function LegalDocLink({
+  href,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      href,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: "underline underline-offset-4",
+      children
+    }
+  );
+}
+function wrapPhrases(label, terms, privacy, termsHref, privacyHref) {
+  const hits = [];
+  if (terms) {
+    const start = label.indexOf(terms);
+    if (start >= 0) {
+      hits.push({
+        start,
+        end: start + terms.length,
+        href: termsHref,
+        text: terms
+      });
+    }
+  }
+  if (privacy) {
+    const start = label.indexOf(privacy);
+    if (start >= 0) {
+      hits.push({
+        start,
+        end: start + privacy.length,
+        href: privacyHref,
+        text: privacy
+      });
+    }
+  }
+  hits.sort((a, b) => a.start - b.start || b.end - b.start - (a.end - a.start));
+  const kept = [];
+  for (const hit of hits) {
+    const last = kept[kept.length - 1];
+    if (last && hit.start < last.end) {
+      if (hit.end - hit.start > last.end - last.start) {
+        kept[kept.length - 1] = hit;
+      }
+      continue;
+    }
+    kept.push(hit);
+  }
+  if (kept.length === 0) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      label,
+      " ",
+      /* @__PURE__ */ jsx(LegalDocLink, { href: termsHref, children: terms }),
+      " \xB7 ",
+      /* @__PURE__ */ jsx(LegalDocLink, { href: privacyHref, children: privacy })
+    ] });
+  }
+  const nodes = [];
+  let cursor = 0;
+  kept.forEach((hit, index) => {
+    if (hit.start > cursor) {
+      nodes.push(label.slice(cursor, hit.start));
+    }
+    nodes.push(
+      /* @__PURE__ */ jsx(LegalDocLink, { href: hit.href, children: hit.text }, `${hit.text}-${index}`)
+    );
+    cursor = hit.end;
+  });
+  if (cursor < label.length) {
+    nodes.push(label.slice(cursor));
+  }
+  return nodes;
+}
+function renderLegalAcceptLabel(label, terms, privacy, termsHref, privacyHref) {
+  if (label.includes("{terms}") || label.includes("{privacy}")) {
+    return label.split(/(\{terms\}|\{privacy\})/g).map((part, index) => {
+      if (part === "{terms}") {
+        return /* @__PURE__ */ jsx(LegalDocLink, { href: termsHref, children: terms }, `terms-${index}`);
+      }
+      if (part === "{privacy}") {
+        return /* @__PURE__ */ jsx(LegalDocLink, { href: privacyHref, children: privacy }, `privacy-${index}`);
+      }
+      return part;
+    });
+  }
+  return wrapPhrases(label, terms, privacy, termsHref, privacyHref);
+}
+var DEFAULT_LEGAL_ACCEPT_DIALOG_LABELS = {
+  title: "Updated terms",
+  description: "We updated the Terms of Service and Privacy Policy. Please accept to continue.",
+  accept: "Accept",
+  terms: "Terms of Service",
+  privacy: "Privacy Policy"
+};
+function LegalAcceptDialog({
+  open,
+  termsHref,
+  privacyHref,
+  summary,
+  accepting = false,
+  labels,
+  onAccept
+}) {
+  const copy = { ...DEFAULT_LEGAL_ACCEPT_DIALOG_LABELS, ...labels };
+  return /* @__PURE__ */ jsx(
+    AlertDialog,
+    {
+      open,
+      onOpenChange: (next) => {
+        if (next) return;
+      },
+      children: /* @__PURE__ */ jsxs(
+        AlertDialogContent,
+        {
+          onEscapeKeyDown: (event) => {
+            event.preventDefault();
+          },
+          children: [
+            /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
+              /* @__PURE__ */ jsx(AlertDialogTitle, { children: copy.title }),
+              /* @__PURE__ */ jsxs(AlertDialogDescription, { children: [
+                renderLegalAcceptLabel(
+                  copy.description,
+                  copy.terms,
+                  copy.privacy,
+                  termsHref,
+                  privacyHref
+                ),
+                summary ? ` ${summary}` : ""
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx(AlertDialogFooter, { children: /* @__PURE__ */ jsx(Button, { type: "button", disabled: accepting, onClick: onAccept, children: copy.accept }) })
+          ]
+        }
+      )
+    }
+  );
+}
+var DEFAULT_LEGAL_ACCEPT_CHECKBOX_LABELS = {
+  label: "I agree to the {terms} and {privacy}",
+  terms: "Terms of Service",
+  privacy: "Privacy Policy"
+};
+function LegalAcceptCheckbox({
+  id = "legal-accept",
+  checked,
+  onCheckedChange,
+  termsHref,
+  privacyHref,
+  labels,
+  disabled = false,
+  className
+}) {
+  const copy = { ...DEFAULT_LEGAL_ACCEPT_CHECKBOX_LABELS, ...labels };
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-start gap-3", className), children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id,
+        type: "checkbox",
+        checked,
+        disabled,
+        onChange: (event) => onCheckedChange(event.target.checked),
+        className: "mt-1 size-4 shrink-0 accent-primary"
+      }
+    ),
+    /* @__PURE__ */ jsx("label", { htmlFor: id, className: "text-sm leading-5", children: renderLegalAcceptLabel(
+      copy.label,
+      copy.terms,
+      copy.privacy,
+      termsHref,
+      privacyHref
+    ) })
+  ] });
+}
+function sanitizeHref(href) {
+  const trimmed = href.trim();
+  if (/^https?:\/\//i.test(trimmed) || /^mailto:/i.test(trimmed)) {
+    return trimmed;
+  }
+  if (trimmed.startsWith("/") && !trimmed.startsWith("//")) {
+    return trimmed;
+  }
+  return null;
+}
+function renderInline(text) {
+  const nodes = [];
+  const pattern = /(\*\*[^*]+\*\*|\*[^*]+\*|`[^`]+`|\[[^\]]+\]\([^)]+\))/g;
+  let last = 0;
+  let match;
+  let key = 0;
+  while ((match = pattern.exec(text)) !== null) {
+    if (match.index > last) {
+      nodes.push(text.slice(last, match.index));
+    }
+    const token = match[0];
+    if (token.startsWith("**")) {
+      nodes.push(/* @__PURE__ */ jsx("strong", { children: token.slice(2, -2) }, key));
+    } else if (token.startsWith("*")) {
+      nodes.push(/* @__PURE__ */ jsx("em", { children: token.slice(1, -1) }, key));
+    } else if (token.startsWith("`")) {
+      nodes.push(
+        /* @__PURE__ */ jsx("code", { className: "rounded bg-muted px-1 py-0.5 text-[0.9em]", children: token.slice(1, -1) }, key)
+      );
+    } else {
+      const link = token.match(/^\[([^\]]+)\]\(([^)]+)\)$/);
+      const href = link ? sanitizeHref(link[2] ?? "") : null;
+      if (link && href) {
+        nodes.push(
+          /* @__PURE__ */ jsx(
+            "a",
+            {
+              href,
+              className: "underline underline-offset-4",
+              rel: "noopener noreferrer",
+              children: link[1]
+            },
+            key
+          )
+        );
+      } else {
+        nodes.push(token);
+      }
+    }
+    key += 1;
+    last = match.index + token.length;
+  }
+  if (last < text.length) {
+    nodes.push(text.slice(last));
+  }
+  return nodes;
+}
+function headingTag(line) {
+  if (line.startsWith("### ")) return { Tag: "h3", text: line.slice(4) };
+  if (line.startsWith("## ")) return { Tag: "h2", text: line.slice(3) };
+  if (line.startsWith("# ")) return { Tag: "h1", text: line.slice(2) };
+  return null;
+}
+function isUnorderedItem(line) {
+  return /^[-*] /.test(line);
+}
+function isOrderedItem(line) {
+  return /^\d+\. /.test(line);
+}
+function LegalMarkdown({ markdown, className }) {
+  const blocks = markdown.replace(/\r\n/g, "\n").trim().split(/\n{2,}/);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "legal-markdown space-y-4 text-sm leading-6 [&_h1]:text-3xl [&_h1]:font-semibold [&_h2]:text-xl [&_h2]:font-semibold [&_h3]:text-lg [&_h3]:font-semibold [&_ul]:list-disc [&_ul]:pl-5 [&_ol]:list-decimal [&_ol]:pl-5",
+        className
+      ),
+      children: blocks.map((block, index) => {
+        const lines = block.split("\n");
+        const heading = headingTag(lines[0] ?? "");
+        if (heading && lines.length === 1) {
+          const { Tag, text } = heading;
+          return /* @__PURE__ */ jsx(Tag, { children: renderInline(text) }, index);
+        }
+        if (lines.every(isUnorderedItem)) {
+          return /* @__PURE__ */ jsx("ul", { children: lines.map((line, itemIndex) => /* @__PURE__ */ jsx("li", { children: renderInline(line.replace(/^[-*] /, "")) }, itemIndex)) }, index);
+        }
+        if (lines.every(isOrderedItem)) {
+          return /* @__PURE__ */ jsx("ol", { children: lines.map((line, itemIndex) => /* @__PURE__ */ jsx("li", { children: renderInline(line.replace(/^\d+\. /, "")) }, itemIndex)) }, index);
+        }
+        return /* @__PURE__ */ jsx("p", { children: renderInline(lines.join(" ")) }, index);
+      })
+    }
+  );
+}
+
+// src/theme-init.ts
+var THEME_STORAGE_KEY = "theme";
+var THEME_INIT_SCRIPT_ID = "yenio-theme-init";
+var THEME_INIT_SCRIPT = `(function(){var t="light";var s;try{s=localStorage.getItem("${THEME_STORAGE_KEY}")}catch(e){}if(s==="dark"||s==="light"){t=s}else{try{if(window.matchMedia("(prefers-color-scheme: dark)").matches)t="dark"}catch(e){}}var r=document.documentElement;r.classList.add(t);r.style.colorScheme=t})();`;
+var DEFAULT_AUDIT_TIMELINE_LABELS = {
+  emptyTitle: "No events",
+  emptyDescription: "Audited activity will appear here.",
+  actor: "Actor",
+  subject: "Subject"
+};
+function formatOccurredAt(occurredAt) {
+  const date = new Date(occurredAt);
+  if (Number.isNaN(date.getTime())) return String(occurredAt);
+  return new Intl.DateTimeFormat("en", {
+    dateStyle: "medium",
+    timeStyle: "short",
+    timeZone: "America/Mexico_City"
+  }).format(date);
+}
+function actorLine(actor) {
+  const role = actor.organizationRole ? ` (${actor.organizationRole})` : "";
+  return `${actor.kind} ${actor.id}${role}`;
+}
+function AuditTimeline({
+  items,
+  labels,
+  emptyAction,
+  className,
+  formatOccurredAt: format = formatOccurredAt
+}) {
+  const copy = { ...DEFAULT_AUDIT_TIMELINE_LABELS, ...labels };
+  if (items.length === 0) {
+    return /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        className,
+        title: copy.emptyTitle,
+        description: copy.emptyDescription,
+        action: emptyAction
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("ol", { className: cn("flex flex-col gap-3", className), children: items.map((item) => {
+    const occurred = new Date(item.occurredAt);
+    const iso = Number.isNaN(occurred.getTime()) ? void 0 : occurred.toISOString();
+    return /* @__PURE__ */ jsxs(
+      "li",
+      {
+        className: "rounded-xl border border-border bg-card p-4 text-card-foreground",
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-baseline justify-between gap-2", children: [
+            /* @__PURE__ */ jsx("p", { className: "font-mono text-sm font-medium", children: item.type }),
+            /* @__PURE__ */ jsx("time", { className: "text-xs text-muted-foreground", dateTime: iso, children: format(item.occurredAt) })
+          ] }),
+          /* @__PURE__ */ jsx("p", { className: "mt-2 text-sm", children: item.summary }),
+          /* @__PURE__ */ jsxs("p", { className: "mt-2 text-xs text-muted-foreground", children: [
+            copy.actor,
+            ": ",
+            actorLine(item.actor)
+          ] }),
+          /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+            copy.subject,
+            ": ",
+            item.subject.type,
+            " ",
+            item.subject.id
+          ] })
+        ]
+      },
+      item.id
+    );
+  }) });
+}
+var DEFAULT_RISK_BADGE_LABELS = {
+  low: "Low",
+  medium: "Medium",
+  high: "High",
+  unverifiedRule: "Unverified rule"
+};
+var tone = {
+  low: "bg-muted text-muted-foreground",
+  medium: "bg-accent text-accent-foreground",
+  high: "bg-destructive/15 text-destructive"
+};
+function severityLabel(severity, labels) {
+  switch (severity) {
+    case "low":
+      return labels.low;
+    case "medium":
+      return labels.medium;
+    case "high":
+      return labels.high;
+    default: {
+      const exhaustive = severity;
+      return exhaustive;
+    }
+  }
+}
+function RiskBadge({
+  severity,
+  smeVerified,
+  labels,
+  className
+}) {
+  const copy = { ...DEFAULT_RISK_BADGE_LABELS, ...labels };
+  return /* @__PURE__ */ jsxs("span", { className: cn("inline-flex flex-wrap items-center gap-2", className), children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "inline-flex items-center rounded-md px-2 py-0.5 text-xs font-medium",
+          tone[severity]
+        ),
+        children: severityLabel(severity, copy)
+      }
+    ),
+    smeVerified === false ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: copy.unverifiedRule }) : null
+  ] });
+}
+var DEFAULT_ENTITY_GRAPH_LABELS = {
+  emptyTitle: "No beneficial owners",
+  emptyDescription: "Ownership and control relationships will appear here.",
+  ownership: "Ownership",
+  otherMeans: "Other means",
+  seniorManager: "Senior manager"
+};
+function controlLabel(controlKind, labels) {
+  switch (controlKind) {
+    case "ownership":
+      return labels.ownership;
+    case "other_means":
+      return labels.otherMeans;
+    case "senior_manager":
+      return labels.seniorManager;
+    default: {
+      const exhaustive = controlKind;
+      return exhaustive;
+    }
+  }
+}
+function formatOwnership(bps) {
+  const percent = bps / 100;
+  const text = Number.isInteger(percent) ? String(percent) : percent.toFixed(2);
+  return `${text}% (${bps} bps)`;
+}
+function nodeLabel(nodes, id) {
+  return nodes.find((node) => node.id === id)?.label ?? id;
+}
+function EntityGraph({
+  nodes,
+  edges,
+  labels,
+  emptyAction,
+  className
+}) {
+  const copy = { ...DEFAULT_ENTITY_GRAPH_LABELS, ...labels };
+  if (nodes.length === 0 && edges.length === 0) {
+    return /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        className,
+        title: copy.emptyTitle,
+        description: copy.emptyDescription,
+        action: emptyAction
+      }
+    );
+  }
+  const nodeIds = new Set(nodes.map((node) => node.id));
+  const unattached = edges.filter((edge) => !nodeIds.has(edge.from));
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3", className), children: [
+    nodes.map((node) => {
+      const outgoing = edges.filter((edge) => edge.from === node.id);
+      return /* @__PURE__ */ jsxs(
+        "section",
+        {
+          className: "rounded-xl border border-border bg-card p-4 text-card-foreground",
+          children: [
+            /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium", children: node.label }),
+            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground", children: node.kind }),
+            outgoing.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "mt-3 flex flex-col gap-1 text-sm", children: outgoing.map((edge) => /* @__PURE__ */ jsxs("li", { children: [
+              node.label,
+              " \u2192 ",
+              nodeLabel(nodes, edge.to),
+              ":",
+              " ",
+              controlLabel(edge.controlKind, copy),
+              typeof edge.ownershipBps === "number" ? ` ${formatOwnership(edge.ownershipBps)}` : null
+            ] }, `${edge.from}-${edge.to}-${edge.controlKind}`)) }) : null
+          ]
+        },
+        node.id
+      );
+    }),
+    unattached.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1 text-sm", children: unattached.map((edge) => /* @__PURE__ */ jsxs("li", { children: [
+      nodeLabel(nodes, edge.from),
+      " \u2192 ",
+      nodeLabel(nodes, edge.to),
+      ":",
+      " ",
+      controlLabel(edge.controlKind, copy),
+      typeof edge.ownershipBps === "number" ? ` ${formatOwnership(edge.ownershipBps)}` : null
+    ] }, `${edge.from}-${edge.to}-${edge.controlKind}`)) }) : null
+  ] });
+}
+var DEFAULT_MATCH_REVIEW_LABELS = {
+  emptyTitle: "No match",
+  emptyDescription: "There is no hit to review.",
+  source: "Source",
+  score: "Score",
+  matchedFields: "Matched fields",
+  noMatchedFields: "None",
+  status: "Status",
+  unverified: "Unverified",
+  reason: "Reason",
+  reasonPlaceholder: "Why this decision",
+  confirm: "Confirm",
+  dismiss: "Dismiss"
+};
+function sourceUrlIsHttps(url) {
+  try {
+    return new URL(url).protocol === "https:";
+  } catch {
+    return false;
+  }
+}
+function matchClaimIsUnverified(hit) {
+  if (hit.unverified === true) return true;
+  return (hit.sources ?? []).some((source) => !sourceUrlIsHttps(source.url));
+}
+function appearanceOf(hit) {
+  if (matchClaimIsUnverified(hit)) return "unverified";
+  return hit.status;
+}
+var appearanceClass = {
+  unverified: "border-dashed border-border bg-muted/40",
+  pending: "border-border bg-card",
+  confirmed: "border-primary bg-primary/5",
+  dismissed: "border-border bg-muted/30"
+};
+function MatchReview({
+  hit,
+  onResolve,
+  labels,
+  sourceLabels,
+  emptyAction,
+  className
+}) {
+  const copy = { ...DEFAULT_MATCH_REVIEW_LABELS, ...labels };
+  const reasonId = useId();
+  const [reason, setReason] = useState("");
+  const trimmed = reason.trim();
+  if (!hit) {
+    return /* @__PURE__ */ jsx(
+      EmptyState,
+      {
+        className,
+        title: copy.emptyTitle,
+        description: copy.emptyDescription,
+        action: emptyAction
+      }
+    );
+  }
+  const appearance = appearanceOf(hit);
+  const sourceLabel = sourceLabels?.[hit.source] ?? hit.source;
+  function resolve(status) {
+    if (trimmed.length === 0) return;
+    onResolve(status, trimmed);
+  }
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      "data-appearance": appearance,
+      className: cn(
+        "flex flex-col gap-3 rounded-xl border p-4 text-card-foreground motion-reduce:transition-none",
+        appearanceClass[appearance],
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+          /* @__PURE__ */ jsxs("p", { className: "text-sm font-medium", children: [
+            copy.source,
+            ": ",
+            sourceLabel
+          ] }),
+          appearance === "unverified" ? /* @__PURE__ */ jsx("span", { className: "rounded-md bg-muted px-2 py-0.5 text-xs text-muted-foreground", children: copy.unverified }) : null
+        ] }),
+        /* @__PURE__ */ jsxs("dl", { className: "grid grid-cols-[max-content_1fr] gap-x-3 gap-y-1 text-sm", children: [
+          typeof hit.score === "number" ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: copy.score }),
+            /* @__PURE__ */ jsx("dd", { children: hit.score })
+          ] }) : null,
+          /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: copy.matchedFields }),
+          /* @__PURE__ */ jsx("dd", { children: hit.matchedFields.length > 0 ? hit.matchedFields.join(", ") : copy.noMatchedFields }),
+          /* @__PURE__ */ jsx("dt", { className: "text-muted-foreground", children: copy.status }),
+          /* @__PURE__ */ jsx("dd", { children: hit.status })
+        ] }),
+        hit.sources && hit.sources.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-1 text-sm", children: hit.sources.map(
+          (source) => sourceUrlIsHttps(source.url) ? /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+            "a",
+            {
+              className: "underline underline-offset-2",
+              href: source.url,
+              rel: "noreferrer",
+              target: "_blank",
+              children: source.title
+            }
+          ) }, `${source.title}-${source.url}`) : /* @__PURE__ */ jsxs("li", { children: [
+            source.title,
+            " (",
+            copy.unverified,
+            ")"
+          ] }, `${source.title}-${source.url}`)
+        ) }) : null,
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+          /* @__PURE__ */ jsx("label", { className: "text-sm font-medium", htmlFor: reasonId, children: copy.reason }),
+          /* @__PURE__ */ jsx(
+            "textarea",
+            {
+              id: reasonId,
+              className: "min-h-20 rounded-md border border-input bg-background px-3 py-2 text-sm",
+              value: reason,
+              placeholder: copy.reasonPlaceholder,
+              onChange: (event) => setReason(event.target.value)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap gap-2", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              disabled: trimmed.length === 0,
+              onClick: () => resolve("confirmed"),
+              children: copy.confirm
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "outline",
+              disabled: trimmed.length === 0,
+              onClick: () => resolve("dismissed"),
+              children: copy.dismiss
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+export { AuditTimeline, AvatarEditor, AvatarEditorDialog, COOKIE_CONSENT_MAX_AGE, COOKIE_CONSENT_NAME, COOKIE_CONSENT_VALUES, ConfirmDestructiveDialog, CookieConsentBanner, CostBreakdownCard, DEFAULT_AUDIT_TIMELINE_LABELS, DEFAULT_COOKIE_CONSENT_BANNER_LABELS, DEFAULT_EDITABLE_SECTION_LABELS, DEFAULT_ENTITY_GRAPH_LABELS, DEFAULT_FILE_DROPZONE_LABELS, DEFAULT_FILE_UPLOAD_LABELS, DEFAULT_FILE_UPLOAD_TRAY_LABELS, DEFAULT_LEGAL_ACCEPT_CHECKBOX_LABELS, DEFAULT_LEGAL_ACCEPT_DIALOG_LABELS, DEFAULT_MATCH_REVIEW_LABELS, DEFAULT_NOTIFICATION_BELL_LABELS, DEFAULT_RISK_BADGE_LABELS, DataList, DataListItem, DimensionBreakdownTable, EditableSection, Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyState, EmptyTitle, EntityGraph, ErrorState, FieldMessage, FileDropzone, FileUploadMenu, FileUploadTray, LanguageContext, LanguageSwitcher, LegalAcceptCheckbox, LegalAcceptDialog, LegalMarkdown, LoadingState, MatchReview, MetricChartCard, MetricEmptyState, MetricSkeleton, NotificationBell, RiskBadge, SafeImage, SparklineStat, StatHighlightCard, THEME_INIT_SCRIPT, THEME_INIT_SCRIPT_ID, THEME_STORAGE_KEY, TIME_RANGE_OPTIONS, ThemeSwitcher, TimeRangePicker, avatarFallbackStyle, cn, cookieConsentAllowsReplay, cookieDomainFromHostname, createMultipartUploadController, defaultLanguages, fileMatchesAccept, getAvatarColors, getInitials, isCookieConsentValue, isEmbeddedWindow, matchClaimIsUnverified, parseCookieConsent, partRanges, progressFromBytes, readCookieConsent, serializeCookieConsent, sourceUrlIsHttps, useEditableSection, useLanguageContext, useMediaQuery2 as useMediaQuery, writeCookieConsent };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map