@proteos/ui 0.45.0 → 0.46.0

package/dist/index.js

@@ -1,10 +1,10 @@
 import { cn, Button, Skeleton } from './chunk-IKAX76MB.js';
 export { Button, Skeleton, buttonStyles, cn, skeletonStyles } from './chunk-IKAX76MB.js';
-import { Paperclip, BookText, Banknote, User, Link2, Braces, Brackets, ToggleLeft, CircleDot, Calendar, Hash, Type, File, FileImage, FileText, FileSpreadsheet, FileArchive, Loader2, X, AudioLines, Video, Mic, AtSign, MessagesSquare, Camera, Send, Linkedin, MessageCircle, Mail, ChevronDown, GripVertical, SendHorizontal, CircleX, Download, ChevronRight as ChevronRight$1, CircleCheck } from 'lucide-react';
+import { icons, Paperclip, BookText, Banknote, UsersRound, User, Link2, Braces, Brackets, ToggleLeft, CircleDot, Calendar, Hash, Type, File, FileImage, FileText, FileSpreadsheet, FileArchive, Loader2, X, Shapes, Search, AudioLines, Video, Mic, AtSign, MessagesSquare, Camera, Send, Linkedin, MessageCircle, Mail, Pipette, ChevronDown, GripVertical, SendHorizontal, CircleX, Download, ChevronRight as ChevronRight$1, CircleCheck, CircleAlert, Info } from 'lucide-react';
 import { tv } from 'tailwind-variants';
-import { Tabs as Tabs$1, TabPanel, Tab, TabList, MenuTrigger as MenuTrigger$1, SubmenuTrigger as SubmenuTrigger$1, DialogTrigger, Popover as Popover$1, Dialog, DropZone, Text, FileTrigger, Heading, Label, ListBox, ListBoxItem, Breadcrumbs as Breadcrumbs$1, Breadcrumb, Link, Button as Button$1, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, FieldError, ComboBox, Input as Input$1, ComboBoxStateContext, Select as Select$1, DatePicker as DatePicker$1, Group, DateInput, DateSegment, SelectValue, ModalOverlay, Modal as Modal$1, TextField, Menu as Menu$1, MenuItem as MenuItem$1, Disclosure, DisclosurePanel, ProgressBar as ProgressBar$1, RadioGroup as RadioGroup$1, Radio as Radio$1, Separator as Separator$1, Switch as Switch$1, TextArea, TimeField as TimeField$1, TooltipTrigger as TooltipTrigger$1, Tooltip as Tooltip$1, Calendar as Calendar$1, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell, DatePickerStateContext } from 'react-aria-components';
+import { Tabs as Tabs$1, TabPanel, Tab, TabList, MenuTrigger as MenuTrigger$1, SubmenuTrigger as SubmenuTrigger$1, DialogTrigger, Popover as Popover$1, Dialog, DropZone, Text, FileTrigger, Heading, Label, Input as Input$1, ListBox, ListBoxItem, Breadcrumbs as Breadcrumbs$1, Breadcrumb, Link, Button as Button$1, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, FieldError, TextField, ComboBox, ComboBoxStateContext, Select as Select$1, DatePicker as DatePicker$1, Group, DateInput, DateSegment, SelectValue, ModalOverlay, Modal as Modal$1, Menu as Menu$1, MenuItem as MenuItem$1, Disclosure, DisclosurePanel, ProgressBar as ProgressBar$1, RadioGroup as RadioGroup$1, Radio as Radio$1, Separator as Separator$1, Switch as Switch$1, TextArea, TimeField as TimeField$1, UNSTABLE_ToastQueue, UNSTABLE_ToastRegion, UNSTABLE_Toast, UNSTABLE_ToastContent, TooltipTrigger as TooltipTrigger$1, Tooltip as Tooltip$1, Calendar as Calendar$1, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell, DatePickerStateContext } from 'react-aria-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { lazy, createContext, useState, useRef, useEffect, useContext, useSyncExternalStore, useMemo, useLayoutEffect, useCallback, Suspense, useId, Fragment as Fragment$1 } from 'react';
+import { lazy, createContext, useState, useRef, useMemo, useEffect, useContext, useSyncExternalStore, useLayoutEffect, useCallback, Suspense, useId, Fragment as Fragment$1 } from 'react';
 import { formatAmount, parseAmount } from '@proteos/sdk';
 import { draggable, dropTargetForElements, monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
 import { extractClosestEdge, attachClosestEdge } from '@atlaskit/pragmatic-drag-and-drop-hitbox/closest-edge';
@@ -355,6 +355,7 @@ var AttributeType = {
   Object: "object",
   Relation: "relation",
   User: "user",
+  Principal: "principal",
   Currency: "currency",
   KnowledgeText: "knowledge-text",
   File: "file"
@@ -371,6 +372,7 @@ var ATTRIBUTE_TYPE_ICONS = {
   [AttributeType.Object]: Braces,
   [AttributeType.Relation]: Link2,
   [AttributeType.User]: User,
+  [AttributeType.Principal]: UsersRound,
   [AttributeType.Currency]: Banknote,
   [AttributeType.KnowledgeText]: BookText,
   [AttributeType.File]: Paperclip
@@ -397,7 +399,7 @@ function AttributeTypeIcon({
 }
 var avatarStyles = tv({
   base: [
-    "inline-grid place-items-center shrink-0 select-none",
+    "inline-grid place-items-center shrink-0 select-none overflow-hidden",
     "rounded-full border",
     "font-mono font-medium tracking-[-0.005em]"
   ],
@@ -405,7 +407,8 @@ var avatarStyles = tv({
     size: {
       sm: "size-[22px] text-[10px]",
       md: "size-7 text-[12px]",
-      lg: "size-9 text-[13px]"
+      lg: "size-9 text-[13px]",
+      xl: "size-[120px] text-[34px]"
     },
     tone: {
       paper: "bg-surface-3 text-ink border-rule",
@@ -417,8 +420,27 @@ var avatarStyles = tv({
   },
   defaultVariants: { size: "md", tone: "paper" }
 });
-function Avatar({ size, tone, initials, className, children, ...props }) {
-  return /* @__PURE__ */ jsx("span", { ...props, className: cn(avatarStyles({ size, tone }), className), children: children ?? initials });
+function Avatar({
+  size,
+  tone,
+  initials,
+  src,
+  alt = "",
+  className,
+  children,
+  ...props
+}) {
+  const [failedSrc, setFailedSrc] = useState(null);
+  const showsImage = Boolean(src) && failedSrc !== src;
+  return /* @__PURE__ */ jsx("span", { ...props, className: cn(avatarStyles({ size, tone }), className), children: showsImage ? /* @__PURE__ */ jsx(
+    "img",
+    {
+      src: src ?? void 0,
+      alt,
+      className: "size-full object-cover",
+      onError: () => setFailedSrc(src ?? null)
+    }
+  ) : children ?? initials });
 }
 var avatarGroupStyles = tv({
   base: "flex items-center",
@@ -431,53 +453,29 @@ var avatarGroupStyles = tv({
   },
   defaultVariants: { size: "md" }
 });
-function AvatarGroup({ avatars, max = 3, size = "md", className, ...props }) {
+function AvatarGroup({
+  avatars,
+  max = 3,
+  size = "md",
+  className,
+  ...props
+}) {
   const shown = avatars.slice(0, max);
   const overflow = avatars.length - shown.length;
   return /* @__PURE__ */ jsxs("span", { ...props, className: cn(avatarGroupStyles({ size }), className), children: [
-    shown.map((avatar, index) => /* @__PURE__ */ jsx("span", { className: "rounded-full ring-[1.5px] ring-surface", children: /* @__PURE__ */ jsx(Avatar, { size, tone: avatar.tone ?? "paper", initials: avatar.initials }) }, avatar.key ?? index)),
+    shown.map((avatar, index) => /* @__PURE__ */ jsx("span", { className: "rounded-full ring-[1.5px] ring-surface", children: /* @__PURE__ */ jsx(
+      Avatar,
+      {
+        size,
+        tone: avatar.tone ?? "paper",
+        initials: avatar.initials,
+        src: avatar.src ?? null,
+        alt: avatar.alt ?? ""
+      }
+    ) }, avatar.key ?? index)),
     overflow > 0 && /* @__PURE__ */ jsx("span", { className: "rounded-full ring-[1.5px] ring-surface", children: /* @__PURE__ */ jsx(Avatar, { size, tone: "paper", initials: `+${overflow}` }) })
   ] });
 }
-var badgeStyles = tv({
-  base: [
-    "inline-flex items-center gap-1.5",
-    "font-mono text-[11.5px] tracking-[-0.005em]",
-    "px-2.5 py-0.5 rounded-pill border",
-    // Leading dot
-    'before:content-[""] before:block before:size-1.5 before:rounded-full'
-  ],
-  variants: {
-    variant: {
-      default: "border-rule bg-surface text-ink-3 before:bg-ink-4",
-      neutral: "border-rule bg-surface-3 text-ink-2 before:bg-ink-3",
-      active: [
-        "text-accent-ink before:bg-accent",
-        "border-[color-mix(in_oklab,var(--color-accent)_35%,var(--color-rule))]",
-        "bg-[color-mix(in_oklab,var(--color-accent)_14%,var(--color-surface))]"
-      ],
-      success: [
-        "text-success before:bg-success",
-        "border-[color-mix(in_oklab,var(--color-success)_35%,var(--color-rule))]",
-        "bg-[color-mix(in_oklab,var(--color-success)_12%,var(--color-surface))]"
-      ],
-      warning: [
-        "text-warning before:bg-warning",
-        "border-[color-mix(in_oklab,var(--color-warning)_35%,var(--color-rule))]",
-        "bg-[color-mix(in_oklab,var(--color-warning)_14%,var(--color-surface))]"
-      ],
-      danger: [
-        "text-danger before:bg-danger",
-        "border-[color-mix(in_oklab,var(--color-danger)_40%,var(--color-rule))]",
-        "bg-[color-mix(in_oklab,var(--color-danger)_12%,var(--color-surface))]"
-      ]
-    }
-  },
-  defaultVariants: { variant: "default" }
-});
-function Badge({ variant, className, ...props }) {
-  return /* @__PURE__ */ jsx("span", { ...props, className: cn(badgeStyles({ variant }), className) });
-}
 var fieldControlStyles = tv({
   slots: {
     box: [
@@ -570,6 +568,318 @@ function FieldCaret() {
     }
   ) });
 }
+var ICON_NAMES = Object.keys(icons);
+var BY_NORMALIZED = new Map(
+  ICON_NAMES.map((name) => [normalize(name), name])
+);
+function normalize(name) {
+  return name.toLowerCase().replace(/[^a-z0-9]/g, "");
+}
+function resolveLucideIcon(name) {
+  const canonical = resolveLucideIconName(name);
+  return canonical ? icons[canonical] : null;
+}
+function resolveLucideIconName(name) {
+  if (!name) return null;
+  return BY_NORMALIZED.get(normalize(name)) ?? null;
+}
+var GRID_PAGE = 120;
+var COMPACT_SIZE = {
+  sm: "size-8",
+  md: "size-[42px]"
+};
+function IconPicker({
+  label,
+  description,
+  errorMessage,
+  placeholder = "Choose an icon\u2026",
+  value,
+  onChange,
+  isDisabled = false,
+  isInvalid = false,
+  allowClear = true,
+  size = "md",
+  appearance,
+  compact = false,
+  "aria-label": ariaLabel,
+  className
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [limit, setLimit] = useState(GRID_PAGE);
+  const triggerRef = useRef(null);
+  const styles3 = fieldControlStyles({ size, invalid: isInvalid, appearance });
+  const selectedName = resolveLucideIconName(value);
+  const SelectedIcon = selectedName ? icons[selectedName] : null;
+  const matches2 = useMemo(() => {
+    const q = normalize(query);
+    return q ? ICON_NAMES.filter((name) => normalize(name).includes(q)) : ICON_NAMES;
+  }, [query]);
+  const visible = matches2.slice(0, limit);
+  const hiddenCount = matches2.length - visible.length;
+  const open = (next) => {
+    setIsOpen(next);
+    if (!next) {
+      setQuery("");
+      setLimit(GRID_PAGE);
+    }
+  };
+  const search = (next) => {
+    setQuery(next);
+    setLimit(GRID_PAGE);
+  };
+  const onGridScroll = (element) => {
+    if (hiddenCount === 0) return;
+    const remaining = element.scrollHeight - element.scrollTop - element.clientHeight;
+    if (remaining < 120) setLimit((current) => current + GRID_PAGE);
+  };
+  const pick = (name) => {
+    onChange(name);
+    open(false);
+    triggerRef.current?.focus();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("grid grid-cols-1 gap-1.5", className), children: [
+    label ? /* @__PURE__ */ jsx(Label, { className: fieldLabelStyles, children: label }) : null,
+    compact ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        "aria-haspopup": "dialog",
+        "aria-expanded": isOpen,
+        "aria-label": ariaLabel ?? (typeof label === "string" ? label : "Icon"),
+        title: selectedName ?? placeholder,
+        disabled: isDisabled,
+        onClick: () => open(!isOpen),
+        "data-invalid": isInvalid || void 0,
+        className: cn(
+          styles3.box(),
+          "flex shrink-0 items-center justify-center cursor-pointer",
+          appearance === "cell" ? "size-[29px]" : COMPACT_SIZE[size],
+          "disabled:cursor-not-allowed disabled:opacity-45"
+        ),
+        children: SelectedIcon ? /* @__PURE__ */ jsx(SelectedIcon, { "aria-hidden": true, className: "size-4 text-ink-2" }) : /* @__PURE__ */ jsx(Shapes, { "aria-hidden": true, className: "size-4 text-ink-4" })
+      }
+    ) : /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        "aria-haspopup": "dialog",
+        "aria-expanded": isOpen,
+        "aria-label": ariaLabel ?? (typeof label === "string" ? label : "Icon"),
+        disabled: isDisabled,
+        onClick: () => open(!isOpen),
+        "data-invalid": isInvalid || void 0,
+        className: cn(
+          // box carries no padding by contract — content is what gives a
+          // single-element control its interior (padding, font, text-size).
+          styles3.box(),
+          styles3.content(),
+          "flex w-full items-center gap-2 text-left cursor-pointer",
+          "disabled:cursor-not-allowed disabled:opacity-45"
+        ),
+        children: [
+          SelectedIcon ? /* @__PURE__ */ jsx(SelectedIcon, { "aria-hidden": true, className: "size-4 shrink-0 text-ink-2" }) : null,
+          /* @__PURE__ */ jsx("span", { className: cn("min-w-0 flex-1 truncate", selectedName ? "text-ink" : "text-ink-4"), children: selectedName ?? placeholder }),
+          /* @__PURE__ */ jsx(FieldCaret, {})
+        ]
+      }
+    ),
+    description ? /* @__PURE__ */ jsx("p", { className: fieldHintStyles, children: description }) : null,
+    errorMessage && appearance !== "cell" ? /* @__PURE__ */ jsx("p", { className: fieldErrorStyles, children: errorMessage }) : null,
+    /* @__PURE__ */ jsxs(
+      Popover$1,
+      {
+        isOpen,
+        onOpenChange: open,
+        triggerRef,
+        offset: 6,
+        placement: "bottom start",
+        className: cn(
+          "w-[316px] rounded-md border border-rule bg-surface p-2",
+          "shadow-[var(--shadow-raised)]",
+          "entering:animate-in entering:fade-in-0 entering:slide-in-from-top-1",
+          "exiting:animate-out exiting:fade-out-0 exiting:slide-out-to-top-1"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 pb-2", children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                className: cn(
+                  fieldControlStyles({ size: "sm" }).box(),
+                  "flex min-w-0 flex-1 items-center gap-1.5 px-2.5 py-1.5",
+                  "focus-within:border-accent focus-within:shadow-[var(--shadow-focus)]"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(Search, { "aria-hidden": true, className: "size-3.5 shrink-0 text-ink-4" }),
+                  /* @__PURE__ */ jsx(
+                    Input$1,
+                    {
+                      autoFocus: true,
+                      "aria-label": "Search icons",
+                      value: query,
+                      onChange: (event) => search(event.target.value),
+                      placeholder: "Search icons\u2026",
+                      className: cn(
+                        "min-w-0 flex-1 bg-transparent font-sans outline-none",
+                        "text-ink placeholder:text-ink-4",
+                        fieldTextStyles.sm
+                      )
+                    }
+                  )
+                ]
+              }
+            ),
+            allowClear && selectedName ? /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => pick(null),
+                className: cn(
+                  "flex shrink-0 items-center gap-1 rounded-[6px] px-2 py-1.5 cursor-pointer",
+                  "font-sans text-[12px] text-ink-3 transition-colors",
+                  "hover:bg-surface-2 hover:text-ink",
+                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--color-accent)]"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(X, { "aria-hidden": true, className: "size-3" }),
+                  "Clear"
+                ]
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: "max-h-64 overflow-y-auto",
+              onScroll: (event) => onGridScroll(event.currentTarget),
+              children: /* @__PURE__ */ jsx(
+                ListBox,
+                {
+                  "aria-label": "Icons",
+                  layout: "grid",
+                  selectionMode: "single",
+                  selectedKeys: selectedName ? /* @__PURE__ */ new Set([selectedName]) : /* @__PURE__ */ new Set(),
+                  onSelectionChange: (keys) => {
+                    if (keys === "all") return;
+                    const next = [...keys][0];
+                    if (next !== void 0) pick(next);
+                  },
+                  className: "grid grid-cols-8 gap-0.5 outline-none",
+                  renderEmptyState: () => /* @__PURE__ */ jsx("div", { className: cn("col-span-8 px-2 py-3 text-center", fieldHintStyles), children: "No icons match" }),
+                  children: visible.map((name) => {
+                    const Icon = icons[name];
+                    return /* @__PURE__ */ jsx(
+                      ListBoxItem,
+                      {
+                        id: name,
+                        textValue: name,
+                        "aria-label": name,
+                        className: cn(
+                          "flex size-[34px] items-center justify-center rounded-[6px]",
+                          "cursor-pointer outline-none",
+                          "data-[hovered]:bg-surface-2 data-[focused]:bg-surface-2",
+                          "data-[focus-visible]:ring-2 data-[focus-visible]:ring-[var(--color-accent)]",
+                          "data-[selected]:bg-[color-mix(in_oklab,var(--color-accent)_12%,var(--color-surface))]",
+                          "data-[selected]:text-accent text-ink-2"
+                        ),
+                        children: /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: "size-4" })
+                      },
+                      name
+                    );
+                  })
+                }
+              )
+            }
+          ),
+          hiddenCount > 0 ? /* @__PURE__ */ jsxs("p", { className: cn("px-1 pt-2", fieldHintStyles), children: [
+            hiddenCount.toLocaleString(),
+            " more \u2014 keep scrolling, or search."
+          ] }) : null
+        ]
+      }
+    )
+  ] });
+}
+var badgeStyles = tv({
+  base: [
+    "inline-flex items-center gap-1.5",
+    "font-mono text-[11.5px] tracking-[-0.005em]",
+    "px-2.5 py-0.5 rounded-pill border",
+    // Leading dot
+    'before:content-[""] before:block before:size-1.5 before:rounded-full'
+  ],
+  variants: {
+    variant: {
+      default: "border-rule bg-surface text-ink-3 before:bg-ink-4",
+      neutral: "border-rule bg-surface-3 text-ink-2 before:bg-ink-3",
+      active: [
+        "text-accent-ink before:bg-accent",
+        "border-[color-mix(in_oklab,var(--color-accent)_35%,var(--color-rule))]",
+        "bg-[color-mix(in_oklab,var(--color-accent)_14%,var(--color-surface))]"
+      ],
+      success: [
+        "text-success before:bg-success",
+        "border-[color-mix(in_oklab,var(--color-success)_35%,var(--color-rule))]",
+        "bg-[color-mix(in_oklab,var(--color-success)_12%,var(--color-surface))]"
+      ],
+      warning: [
+        "text-warning before:bg-warning",
+        "border-[color-mix(in_oklab,var(--color-warning)_35%,var(--color-rule))]",
+        "bg-[color-mix(in_oklab,var(--color-warning)_14%,var(--color-surface))]"
+      ],
+      danger: [
+        "text-danger before:bg-danger",
+        "border-[color-mix(in_oklab,var(--color-danger)_40%,var(--color-rule))]",
+        "bg-[color-mix(in_oklab,var(--color-danger)_12%,var(--color-surface))]"
+      ],
+      // Driven by the `--badge-color` custom property (set from the `color`
+      // prop). Chrome only — text stays ink so contrast never depends on the
+      // picked color.
+      custom: [
+        "text-ink-2 before:bg-[var(--badge-color)]",
+        "border-[color-mix(in_oklab,var(--badge-color)_35%,var(--color-rule))]",
+        "bg-[color-mix(in_oklab,var(--badge-color)_12%,var(--color-surface))]"
+      ]
+    }
+  },
+  defaultVariants: { variant: "default" }
+});
+var ICON_TONE = {
+  default: "text-ink-4",
+  neutral: "text-ink-3",
+  active: "text-accent",
+  success: "text-success",
+  warning: "text-warning",
+  danger: "text-danger",
+  custom: "text-[var(--badge-color)]"
+};
+function Badge({ variant, color, icon, className, style, children, ...props }) {
+  const Icon = icon ? resolveLucideIcon(icon) : null;
+  const register2 = color ? "custom" : variant ?? "default";
+  const mergedStyle = color ? { ...style, "--badge-color": color } : style;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ...props,
+      style: mergedStyle,
+      className: cn(badgeStyles({ variant: register2 }), Icon ? "before:hidden" : null, className),
+      children: [
+        Icon ? /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: cn("size-3 shrink-0", ICON_TONE[register2]) }) : null,
+        children
+      ]
+    }
+  );
+}
+function badgeChrome(option) {
+  return {
+    ...option.variant ? { variant: option.variant } : {},
+    ...option.color ? { color: option.color } : {},
+    ...option.icon ? { icon: option.icon } : {}
+  };
+}
 function BadgeMultiSelect({
   label,
   description,
@@ -642,7 +952,7 @@ function BadgeMultiSelect({
           ) : selectedOptions.map((o) => /* @__PURE__ */ jsx(
             RemovableBadge,
             {
-              variant: o.variant,
+              ...badgeChrome(o),
               onRemove: () => remove(o.id),
               isDisabled,
               children: o.label
@@ -700,7 +1010,7 @@ function BadgeMultiSelect({
                   "data-[selected]:bg-surface-3",
                   "data-[disabled]:opacity-45 data-[disabled]:cursor-not-allowed"
                 ),
-                children: /* @__PURE__ */ jsx(Badge, { variant: option.variant, children: option.label })
+                children: /* @__PURE__ */ jsx(Badge, { ...badgeChrome(option), children: option.label })
               },
               option.id
             ))
@@ -713,10 +1023,12 @@ function BadgeMultiSelect({
 function RemovableBadge({
   children,
   variant,
+  color,
+  icon,
   onRemove,
   isDisabled
 }) {
-  return /* @__PURE__ */ jsxs(Badge, { variant, children: [
+  return /* @__PURE__ */ jsxs(Badge, { ...badgeChrome({ variant, color, icon }), children: [
     /* @__PURE__ */ jsx("span", { children }),
     /* @__PURE__ */ jsx(
       "button",
@@ -1026,6 +1338,146 @@ function CheckboxGroup({
     }
   );
 }
+var HEX6 = /^#?([0-9a-f]{6})$/i;
+var HEX3 = /^#?([0-9a-f]{3})$/i;
+function normalizeHexColor(text) {
+  const raw = (text ?? "").trim();
+  if (raw === "") return null;
+  const six = HEX6.exec(raw);
+  if (six?.[1]) return `#${six[1].toLowerCase()}`;
+  const three = HEX3.exec(raw);
+  if (three?.[1]) {
+    const [r, g, b] = three[1].toLowerCase();
+    return `#${r}${r}${g}${g}${b}${b}`;
+  }
+  return null;
+}
+function ColorInput({
+  label,
+  description,
+  errorMessage,
+  placeholder = "#5b8def",
+  value,
+  onChange,
+  isDisabled = false,
+  isInvalid = false,
+  size = "md",
+  appearance,
+  "aria-label": ariaLabel,
+  className
+}) {
+  const committed = normalizeHexColor(value);
+  const [draft, setDraft] = useState(committed ?? "");
+  const nativeRef = useRef(null);
+  useEffect(() => {
+    setDraft((current) => normalizeHexColor(current) === committed ? current : committed ?? "");
+  }, [committed]);
+  const isDraftInvalid = draft.trim() !== "" && normalizeHexColor(draft) === null;
+  const invalid = isInvalid || isDraftInvalid;
+  const styles3 = fieldControlStyles({ size, invalid, appearance });
+  const focusWithin = appearance === "cell" ? "focus-within:border-accent focus-within:shadow-none" : "focus-within:border-accent focus-within:shadow-[var(--shadow-focus)]";
+  const edit = (next) => {
+    setDraft(next);
+    if (next.trim() === "") {
+      if (committed !== null) onChange(null);
+      return;
+    }
+    if (!HEX6.test(next.trim())) return;
+    const hex = normalizeHexColor(next);
+    if (hex !== null && hex !== committed) onChange(hex);
+  };
+  const settle = () => {
+    const hex = normalizeHexColor(draft);
+    if (hex === null) return;
+    setDraft(hex);
+    if (hex !== committed) onChange(hex);
+  };
+  const pick = (next) => {
+    const hex = normalizeHexColor(next);
+    if (hex === null) return;
+    setDraft(hex);
+    if (hex !== committed) onChange(hex);
+  };
+  return /* @__PURE__ */ jsxs(
+    TextField,
+    {
+      value: draft,
+      onChange: edit,
+      isDisabled,
+      isInvalid: invalid,
+      onBlur: settle,
+      ...ariaLabel ? { "aria-label": ariaLabel } : {},
+      className: cn("grid grid-cols-1 gap-1.5", className),
+      children: [
+        label ? /* @__PURE__ */ jsx(Label, { className: fieldLabelStyles, children: label }) : null,
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-disabled": isDisabled || void 0,
+            className: cn(
+              styles3.box(),
+              "flex items-center gap-2",
+              size === "sm" ? "pl-2" : "pl-2.5",
+              focusWithin
+            ),
+            children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Pick color",
+                  disabled: isDisabled,
+                  onClick: () => nativeRef.current?.click(),
+                  className: cn(
+                    "relative flex shrink-0 items-center justify-center rounded-sm border border-rule",
+                    "cursor-pointer outline-none",
+                    "focus-visible:ring-2 focus-visible:ring-[var(--color-accent)]",
+                    "disabled:cursor-not-allowed",
+                    size === "sm" ? "size-4" : "size-5",
+                    committed ? null : "text-ink-4"
+                  ),
+                  style: committed ? { backgroundColor: committed } : void 0,
+                  children: [
+                    committed ? null : /* @__PURE__ */ jsx(Pipette, { "aria-hidden": true, className: "size-2.5" }),
+                    /* @__PURE__ */ jsx(
+                      "input",
+                      {
+                        ref: nativeRef,
+                        type: "color",
+                        tabIndex: -1,
+                        "aria-hidden": true,
+                        disabled: isDisabled,
+                        value: committed ?? "#000000",
+                        onChange: (event) => pick(event.target.value),
+                        className: "pointer-events-none absolute inset-0 size-full opacity-0"
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Input$1,
+                {
+                  placeholder,
+                  spellCheck: false,
+                  autoComplete: "off",
+                  className: cn(
+                    styles3.content(),
+                    "min-w-0 flex-1 bg-transparent font-mono outline-none",
+                    "pl-0",
+                    fieldTextStyles[size]
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        description ? /* @__PURE__ */ jsx(Text, { slot: "description", className: fieldHintStyles, children: description }) : null,
+        errorMessage && appearance !== "cell" ? /* @__PURE__ */ jsx(FieldError, { className: fieldErrorStyles, children: errorMessage }) : null
+      ]
+    }
+  );
+}
 function Combobox({
   label,
   description,
@@ -4876,25 +5328,25 @@ var OPERATORS = [
     id: "eq",
     label: "is",
     arity: 1,
-    types: ["string", "number", "integer", "currency", "datetime", "enum", "boolean", "relation", "user"]
+    types: ["string", "number", "integer", "currency", "datetime", "enum", "boolean", "relation", "user", "principal"]
   },
   {
     id: "ne",
     label: "is not",
     arity: 1,
-    types: ["string", "number", "integer", "currency", "datetime", "enum", "boolean", "relation", "user"]
+    types: ["string", "number", "integer", "currency", "datetime", "enum", "boolean", "relation", "user", "principal"]
   },
   {
     id: "in",
     label: "is any of",
     arity: "n",
-    types: ["string", "number", "integer", "currency", "enum", "relation", "user"]
+    types: ["string", "number", "integer", "currency", "enum", "relation", "user", "principal"]
   },
   {
     id: "not_in",
     label: "is none of",
     arity: "n",
-    types: ["string", "number", "integer", "currency", "enum", "relation", "user"]
+    types: ["string", "number", "integer", "currency", "enum", "relation", "user", "principal"]
   },
   { id: "contains", label: "contains", arity: 1, types: ["string", "array"] },
   { id: "starts_with", label: "starts with", arity: 1, types: ["string"] },
@@ -4907,13 +5359,13 @@ var OPERATORS = [
     id: "empty",
     label: "is empty",
     arity: 0,
-    types: ["string", "number", "integer", "currency", "datetime", "enum", "boolean", "array", "relation", "user", "file"]
+    types: ["string", "number", "integer", "currency", "datetime", "enum", "boolean", "array", "relation", "user", "principal", "file"]
   },
   {
     id: "not_empty",
     label: "is not empty",
     arity: 0,
-    types: ["string", "number", "integer", "currency", "datetime", "enum", "boolean", "array", "relation", "user", "file"]
+    types: ["string", "number", "integer", "currency", "datetime", "enum", "boolean", "array", "relation", "user", "principal", "file"]
   }
 ];
 var OP_LABEL_OVERRIDES = {
@@ -5001,9 +5453,16 @@ function ChipItem({
     if (custom !== void 0) return /* @__PURE__ */ jsx(Fragment, { children: custom });
   }
   if (field.type === "enum") {
-    const variant = field.options?.find((o) => o.value === value)?.variant;
-    const label = field.options?.find((o) => o.value === value)?.label ?? value;
-    return /* @__PURE__ */ jsx(Badge, { variant, children: label });
+    const option = field.options?.find((o) => o.value === value);
+    return /* @__PURE__ */ jsx(
+      Badge,
+      {
+        variant: option?.variant,
+        ...option?.color ? { color: option.color } : {},
+        ...option?.icon ? { icon: option.icon } : {},
+        children: option?.label ?? value
+      }
+    );
   }
   return /* @__PURE__ */ jsx("span", { className: cn("font-mono text-[12px] text-ink max-w-[10rem] truncate"), children: formatValue(field, operator, value) });
 }
@@ -5384,8 +5843,16 @@ function EnumSingleValue({
       selectedKey: value === "" ? null : value,
       onSelectionChange: (next) => onChange(next == null ? "" : String(next)),
       renderItem: (o) => {
-        const variant = field.options?.find((x) => x.value === o.id)?.variant;
-        return /* @__PURE__ */ jsx(Badge, { variant, children: o.label });
+        const option = field.options?.find((x) => x.value === o.id);
+        return /* @__PURE__ */ jsx(
+          Badge,
+          {
+            variant: option?.variant,
+            ...option?.color ? { color: option.color } : {},
+            ...option?.icon ? { icon: option.icon } : {},
+            children: o.label
+          }
+        );
       },
       ...isDisabled !== void 0 ? { isDisabled } : {},
       ...autoFocus ? { autoFocus: true } : {},
@@ -5404,7 +5871,9 @@ function EnumMultiValue({
   const options = (field.options ?? []).map((o) => ({
     id: o.value,
     label: o.label,
-    ...o.variant ? { variant: o.variant } : {}
+    ...o.variant ? { variant: o.variant } : {},
+    ...o.color ? { color: o.color } : {},
+    ...o.icon ? { icon: o.icon } : {}
   }));
   return /* @__PURE__ */ jsx(
     BadgeMultiSelect,
@@ -7038,6 +7507,74 @@ function TimeField({
     }
   );
 }
+function createToastQueue(options = {}) {
+  return new UNSTABLE_ToastQueue({ maxVisibleToasts: options.maxVisibleToasts ?? 3 });
+}
+var toastStyles = tv({
+  slots: {
+    root: [
+      "flex items-start gap-3 w-[360px] max-w-[calc(100vw-32px)]",
+      "rounded-lg border border-rule bg-surface shadow-float",
+      "px-3.5 py-3 outline-none",
+      "focus-visible:shadow-focus",
+      "entering:animate-in entering:fade-in-0 entering:slide-in-from-bottom-2 entering:duration-200",
+      "exiting:animate-out exiting:fade-out-0 exiting:duration-150"
+    ],
+    icon: "size-4 shrink-0 mt-0.5",
+    title: "font-sans text-[13px] font-medium leading-[1.4] text-ink",
+    description: "font-sans text-[12.5px] leading-[1.5] text-ink-3 break-words"
+  },
+  variants: {
+    variant: {
+      info: { icon: "text-ink-3" },
+      success: { icon: "text-success" },
+      danger: { icon: "text-danger" }
+    }
+  },
+  defaultVariants: { variant: "info" }
+});
+var VARIANT_ICON = {
+  info: Info,
+  success: CircleCheck,
+  danger: CircleAlert
+};
+function ToastRegion({ queue, className }) {
+  return /* @__PURE__ */ jsx(
+    UNSTABLE_ToastRegion,
+    {
+      queue,
+      className: cn(
+        "fixed bottom-4 right-4 z-[1300] flex flex-col-reverse gap-2 outline-none",
+        className
+      ),
+      children: ({ toast }) => {
+        const variant = toast.content.variant ?? "info";
+        const Icon = VARIANT_ICON[variant];
+        const { root, icon, title, description } = toastStyles({ variant });
+        return /* @__PURE__ */ jsxs(UNSTABLE_Toast, { toast, className: root(), children: [
+          /* @__PURE__ */ jsx(Icon, { className: icon(), "aria-hidden": true }),
+          /* @__PURE__ */ jsxs(UNSTABLE_ToastContent, { className: "flex flex-col gap-0.5 flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx(Text, { slot: "title", className: title(), children: toast.content.title }),
+            toast.content.description ? /* @__PURE__ */ jsx(Text, { slot: "description", className: description(), children: toast.content.description }) : null
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button$1,
+            {
+              slot: "close",
+              "aria-label": "Dismiss",
+              className: cn(
+                "shrink-0 inline-flex items-center justify-center size-6 rounded-md",
+                "text-ink-4 hover:text-ink hover:bg-surface-2 cursor-pointer outline-none",
+                "focus-visible:shadow-focus"
+              ),
+              children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+            }
+          )
+        ] });
+      }
+    }
+  );
+}
 function TooltipTrigger({
   delay = 500,
   closeDelay = 0,
@@ -7064,6 +7601,6 @@ function Tooltip({ className, offset = 6, ...props }) {
   );
 }
 
-export { ATTRIBUTE_TYPES, ATTRIBUTE_TYPE_ICONS, AttachmentChip, AttributePicker, AttributeType, AttributeTypeIcon, Avatar, AvatarGroup, Badge, BadgeMultiSelect, BooleanCell, Breadcrumbs, COLUMN_DRAG_KIND, Card, CardBody, CardContent, CardEyebrow, CardFeatureTitle, CardFooter, CardHeader, CardTitle, ChannelIcon, Checkbox, CheckboxGroup, ChipValue, Combobox, Command, CommandHint, CurrencyInput, DRAFT_OUTCOME_LABEL, DataTable, DataTableEmpty, DataTableError, DataTableSkeleton, DateCell, DatePicker, DateTimeCell, DateTimePicker, DraftMessageCard, DraftMessageComposer, DraftMessageReview, EmptyState, ErrorAnimation, FieldCaret, FileField, FileViewer, FileViewerFallbackCard, FilterRow, FilterValueInput, ImageAttachment, ImageLightbox, Input, Kbd, LinkCell, MAX_COMPOSER_ATTACHMENT_BYTES, Menu, MenuItem, MenuPopover, MenuTrigger, MessageComposer, Modal, ModalBody, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalTitle, MultiSelect, NavGroup, NavItem, NavSection, OPERATORS, OperatorPicker, PROTECTED_COMBOS, Popover, PopoverContent, PopoverPanelBody, PopoverPanelFooter, PopoverPanelHeader, PressableCard, ProgressBar, Radio, RadioGroup, RecipientSelect, RecordFilterBuilderPanel, RecordFilterButton, RecordFilterChips, RecordFilterEditor, RenderChipItemProvider, RenderValueInputProvider, SegmentedControl, Select, Separator, SubmenuTrigger, SuccessAnimation, Switch, Table, TableBody, TableCell, TableHeader, TableHeaderCell, TableHeaderSpacer, TableRow, TableScroller, Tabs, TagInput, Textarea, TimeField, Tooltip, TooltipTrigger, TruncateCell, __resetDraftMessageActions, __resetDraftMessageOutcomes, addLeaf as addFilterLeaf, addPendingLeaf, addSubgroup, arityOf, attachmentChipStyles, avatarGroupStyles, avatarStyles, badgeStyles, cardStyles2 as cardStyles, channelIcon, countLeaves, createDraftMessageClient, defaultValueFor, draftMessageCardStyles, draftMessageComposerStyles, draftOutcomeFor, emptyStateStyles, fieldControlStyles, fieldErrorStyles, fieldHintStyles, fieldLabelStyles, fileViewerFallbackCardStyles, fileViewerStyles, formatFileSize, formatValue, iconForContentType, imageAttachmentStyles, imageLightboxStyles, isColumnDragData, isDraftReviewOutcome, isEditableTarget, isPreviewableImageName, makeActionsColumn, messageComposerStyles, navItemStyles, operatorById, operatorsForType, parseCombo, progressBarStyles, publishDraftMessageOutcome, rebaseRowOnFieldChange, rebaseRowOnOperatorChange, registerDraftMessageActions, removeLeaf, removeSubgroup, replaceLeaf, segmentedControlStyles, setJoiner, subscribeDraftMessageOutcome, tableCellStyles, tableHeaderCellStyles, tabsStyles, terminalKindFor, updateLeaf, updateSubgroup, useAttributeTypeIcon, useCommand, useDiscoveryActive, useDraftMessageActions, useDraftMessageOutcome, useEscapeKey, useInfiniteScrollSentinel, useRenderChipItem, useRenderValueInput, useShowDetails, viewerKindForContentType, wrapLeafInGroup };
+export { ATTRIBUTE_TYPES, ATTRIBUTE_TYPE_ICONS, AttachmentChip, AttributePicker, AttributeType, AttributeTypeIcon, Avatar, AvatarGroup, Badge, BadgeMultiSelect, BooleanCell, Breadcrumbs, COLUMN_DRAG_KIND, Card, CardBody, CardContent, CardEyebrow, CardFeatureTitle, CardFooter, CardHeader, CardTitle, ChannelIcon, Checkbox, CheckboxGroup, ChipValue, ColorInput, Combobox, Command, CommandHint, CurrencyInput, DRAFT_OUTCOME_LABEL, DataTable, DataTableEmpty, DataTableError, DataTableSkeleton, DateCell, DatePicker, DateTimeCell, DateTimePicker, DraftMessageCard, DraftMessageComposer, DraftMessageReview, EmptyState, ErrorAnimation, FieldCaret, FileField, FileViewer, FileViewerFallbackCard, FilterRow, FilterValueInput, IconPicker, ImageAttachment, ImageLightbox, Input, Kbd, LinkCell, MAX_COMPOSER_ATTACHMENT_BYTES, Menu, MenuItem, MenuPopover, MenuTrigger, MessageComposer, Modal, ModalBody, ModalContent, ModalDescription, ModalFooter, ModalHeader, ModalTitle, MultiSelect, NavGroup, NavItem, NavSection, OPERATORS, OperatorPicker, PROTECTED_COMBOS, Popover, PopoverContent, PopoverPanelBody, PopoverPanelFooter, PopoverPanelHeader, PressableCard, ProgressBar, Radio, RadioGroup, RecipientSelect, RecordFilterBuilderPanel, RecordFilterButton, RecordFilterChips, RecordFilterEditor, RenderChipItemProvider, RenderValueInputProvider, SegmentedControl, Select, Separator, SubmenuTrigger, SuccessAnimation, Switch, Table, TableBody, TableCell, TableHeader, TableHeaderCell, TableHeaderSpacer, TableRow, TableScroller, Tabs, TagInput, Textarea, TimeField, ToastRegion, Tooltip, TooltipTrigger, TruncateCell, __resetDraftMessageActions, __resetDraftMessageOutcomes, addLeaf as addFilterLeaf, addPendingLeaf, addSubgroup, arityOf, attachmentChipStyles, avatarGroupStyles, avatarStyles, badgeStyles, cardStyles2 as cardStyles, channelIcon, countLeaves, createDraftMessageClient, createToastQueue, defaultValueFor, draftMessageCardStyles, draftMessageComposerStyles, draftOutcomeFor, emptyStateStyles, fieldControlStyles, fieldErrorStyles, fieldHintStyles, fieldLabelStyles, fileViewerFallbackCardStyles, fileViewerStyles, formatFileSize, formatValue, iconForContentType, imageAttachmentStyles, imageLightboxStyles, isColumnDragData, isDraftReviewOutcome, isEditableTarget, isPreviewableImageName, makeActionsColumn, messageComposerStyles, navItemStyles, normalizeHexColor, operatorById, operatorsForType, parseCombo, progressBarStyles, publishDraftMessageOutcome, rebaseRowOnFieldChange, rebaseRowOnOperatorChange, registerDraftMessageActions, removeLeaf, removeSubgroup, replaceLeaf, resolveLucideIcon, resolveLucideIconName, segmentedControlStyles, setJoiner, subscribeDraftMessageOutcome, tableCellStyles, tableHeaderCellStyles, tabsStyles, terminalKindFor, toastStyles, updateLeaf, updateSubgroup, useAttributeTypeIcon, useCommand, useDiscoveryActive, useDraftMessageActions, useDraftMessageOutcome, useEscapeKey, useInfiniteScrollSentinel, useRenderChipItem, useRenderValueInput, useShowDetails, viewerKindForContentType, wrapLeafInGroup };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map