@proteos/ui 0.45.0 → 0.46.0

package/dist/index.cjs

@@ -356,6 +356,7 @@ var AttributeType = {
   Object: "object",
   Relation: "relation",
   User: "user",
+  Principal: "principal",
   Currency: "currency",
   KnowledgeText: "knowledge-text",
   File: "file"
@@ -372,6 +373,7 @@ var ATTRIBUTE_TYPE_ICONS = {
   [AttributeType.Object]: lucideReact.Braces,
   [AttributeType.Relation]: lucideReact.Link2,
   [AttributeType.User]: lucideReact.User,
+  [AttributeType.Principal]: lucideReact.UsersRound,
   [AttributeType.Currency]: lucideReact.Banknote,
   [AttributeType.KnowledgeText]: lucideReact.BookText,
   [AttributeType.File]: lucideReact.Paperclip
@@ -398,7 +400,7 @@ function AttributeTypeIcon({
 }
 var avatarStyles = tailwindVariants.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]"
   ],
@@ -406,7 +408,8 @@ var avatarStyles = tailwindVariants.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",
@@ -418,8 +421,27 @@ var avatarStyles = tailwindVariants.tv({
   },
   defaultVariants: { size: "md", tone: "paper" }
 });
-function Avatar({ size, tone, initials, className, children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...props, className: chunkMWAXK66H_cjs.cn(avatarStyles({ size, tone }), className), children: children ?? initials });
+function Avatar({
+  size,
+  tone,
+  initials,
+  src,
+  alt = "",
+  className,
+  children,
+  ...props
+}) {
+  const [failedSrc, setFailedSrc] = react.useState(null);
+  const showsImage = Boolean(src) && failedSrc !== src;
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...props, className: chunkMWAXK66H_cjs.cn(avatarStyles({ size, tone }), className), children: showsImage ? /* @__PURE__ */ jsxRuntime.jsx(
+    "img",
+    {
+      src: src ?? void 0,
+      alt,
+      className: "size-full object-cover",
+      onError: () => setFailedSrc(src ?? null)
+    }
+  ) : children ?? initials });
 }
 var avatarGroupStyles = tailwindVariants.tv({
   base: "flex items-center",
@@ -432,53 +454,29 @@ var avatarGroupStyles = tailwindVariants.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__ */ jsxRuntime.jsxs("span", { ...props, className: chunkMWAXK66H_cjs.cn(avatarGroupStyles({ size }), className), children: [
-    shown.map((avatar, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full ring-[1.5px] ring-surface", children: /* @__PURE__ */ jsxRuntime.jsx(Avatar, { size, tone: avatar.tone ?? "paper", initials: avatar.initials }) }, avatar.key ?? index)),
+    shown.map((avatar, index) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full ring-[1.5px] ring-surface", children: /* @__PURE__ */ jsxRuntime.jsx(
+      Avatar,
+      {
+        size,
+        tone: avatar.tone ?? "paper",
+        initials: avatar.initials,
+        src: avatar.src ?? null,
+        alt: avatar.alt ?? ""
+      }
+    ) }, avatar.key ?? index)),
     overflow > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "rounded-full ring-[1.5px] ring-surface", children: /* @__PURE__ */ jsxRuntime.jsx(Avatar, { size, tone: "paper", initials: `+${overflow}` }) })
   ] });
 }
-var badgeStyles = tailwindVariants.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__ */ jsxRuntime.jsx("span", { ...props, className: chunkMWAXK66H_cjs.cn(badgeStyles({ variant }), className) });
-}
 var fieldControlStyles = tailwindVariants.tv({
   slots: {
     box: [
@@ -571,6 +569,318 @@ function FieldCaret() {
     }
   ) });
 }
+var ICON_NAMES = Object.keys(lucideReact.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 ? lucideReact.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] = react.useState(false);
+  const [query, setQuery] = react.useState("");
+  const [limit, setLimit] = react.useState(GRID_PAGE);
+  const triggerRef = react.useRef(null);
+  const styles3 = fieldControlStyles({ size, invalid: isInvalid, appearance });
+  const selectedName = resolveLucideIconName(value);
+  const SelectedIcon = selectedName ? lucideReact.icons[selectedName] : null;
+  const matches2 = react.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__ */ jsxRuntime.jsxs("div", { className: chunkMWAXK66H_cjs.cn("grid grid-cols-1 gap-1.5", className), children: [
+    label ? /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Label, { className: fieldLabelStyles, children: label }) : null,
+    compact ? /* @__PURE__ */ jsxRuntime.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: chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx(SelectedIcon, { "aria-hidden": true, className: "size-4 text-ink-2" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Shapes, { "aria-hidden": true, className: "size-4 text-ink-4" })
+      }
+    ) : /* @__PURE__ */ jsxRuntime.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: chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx(SelectedIcon, { "aria-hidden": true, className: "size-4 shrink-0 text-ink-2" }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkMWAXK66H_cjs.cn("min-w-0 flex-1 truncate", selectedName ? "text-ink" : "text-ink-4"), children: selectedName ?? placeholder }),
+          /* @__PURE__ */ jsxRuntime.jsx(FieldCaret, {})
+        ]
+      }
+    ),
+    description ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: fieldHintStyles, children: description }) : null,
+    errorMessage && appearance !== "cell" ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: fieldErrorStyles, children: errorMessage }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      reactAriaComponents.Popover,
+      {
+        isOpen,
+        onOpenChange: open,
+        triggerRef,
+        offset: 6,
+        placement: "bottom start",
+        className: chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5 pb-2", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "div",
+              {
+                className: chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx(lucideReact.Search, { "aria-hidden": true, className: "size-3.5 shrink-0 text-ink-4" }),
+                  /* @__PURE__ */ jsxRuntime.jsx(
+                    reactAriaComponents.Input,
+                    {
+                      autoFocus: true,
+                      "aria-label": "Search icons",
+                      value: query,
+                      onChange: (event) => search(event.target.value),
+                      placeholder: "Search icons\u2026",
+                      className: chunkMWAXK66H_cjs.cn(
+                        "min-w-0 flex-1 bg-transparent font-sans outline-none",
+                        "text-ink placeholder:text-ink-4",
+                        fieldTextStyles.sm
+                      )
+                    }
+                  )
+                ]
+              }
+            ),
+            allowClear && selectedName ? /* @__PURE__ */ jsxRuntime.jsxs(
+              "button",
+              {
+                type: "button",
+                onClick: () => pick(null),
+                className: chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx(lucideReact.X, { "aria-hidden": true, className: "size-3" }),
+                  "Clear"
+                ]
+              }
+            ) : null
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              className: "max-h-64 overflow-y-auto",
+              onScroll: (event) => onGridScroll(event.currentTarget),
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                reactAriaComponents.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__ */ jsxRuntime.jsx("div", { className: chunkMWAXK66H_cjs.cn("col-span-8 px-2 py-3 text-center", fieldHintStyles), children: "No icons match" }),
+                  children: visible.map((name) => {
+                    const Icon = lucideReact.icons[name];
+                    return /* @__PURE__ */ jsxRuntime.jsx(
+                      reactAriaComponents.ListBoxItem,
+                      {
+                        id: name,
+                        textValue: name,
+                        "aria-label": name,
+                        className: chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx(Icon, { "aria-hidden": true, className: "size-4" })
+                      },
+                      name
+                    );
+                  })
+                }
+              )
+            }
+          ),
+          hiddenCount > 0 ? /* @__PURE__ */ jsxRuntime.jsxs("p", { className: chunkMWAXK66H_cjs.cn("px-1 pt-2", fieldHintStyles), children: [
+            hiddenCount.toLocaleString(),
+            " more \u2014 keep scrolling, or search."
+          ] }) : null
+        ]
+      }
+    )
+  ] });
+}
+var badgeStyles = tailwindVariants.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__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      ...props,
+      style: mergedStyle,
+      className: chunkMWAXK66H_cjs.cn(badgeStyles({ variant: register2 }), Icon ? "before:hidden" : null, className),
+      children: [
+        Icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { "aria-hidden": true, className: chunkMWAXK66H_cjs.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,
@@ -643,7 +953,7 @@ function BadgeMultiSelect({
           ) : selectedOptions.map((o) => /* @__PURE__ */ jsxRuntime.jsx(
             RemovableBadge,
             {
-              variant: o.variant,
+              ...badgeChrome(o),
               onRemove: () => remove(o.id),
               isDisabled,
               children: o.label
@@ -701,7 +1011,7 @@ function BadgeMultiSelect({
                   "data-[selected]:bg-surface-3",
                   "data-[disabled]:opacity-45 data-[disabled]:cursor-not-allowed"
                 ),
-                children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: option.variant, children: option.label })
+                children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { ...badgeChrome(option), children: option.label })
               },
               option.id
             ))
@@ -714,10 +1024,12 @@ function BadgeMultiSelect({
 function RemovableBadge({
   children,
   variant,
+  color,
+  icon,
   onRemove,
   isDisabled
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Badge, { variant, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(Badge, { ...badgeChrome({ variant, color, icon }), children: [
     /* @__PURE__ */ jsxRuntime.jsx("span", { children }),
     /* @__PURE__ */ jsxRuntime.jsx(
       "button",
@@ -1027,6 +1339,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] = react.useState(committed ?? "");
+  const nativeRef = react.useRef(null);
+  react.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__ */ jsxRuntime.jsxs(
+    reactAriaComponents.TextField,
+    {
+      value: draft,
+      onChange: edit,
+      isDisabled,
+      isInvalid: invalid,
+      onBlur: settle,
+      ...ariaLabel ? { "aria-label": ariaLabel } : {},
+      className: chunkMWAXK66H_cjs.cn("grid grid-cols-1 gap-1.5", className),
+      children: [
+        label ? /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Label, { className: fieldLabelStyles, children: label }) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            "data-disabled": isDisabled || void 0,
+            className: chunkMWAXK66H_cjs.cn(
+              styles3.box(),
+              "flex items-center gap-2",
+              size === "sm" ? "pl-2" : "pl-2.5",
+              focusWithin
+            ),
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Pick color",
+                  disabled: isDisabled,
+                  onClick: () => nativeRef.current?.click(),
+                  className: chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx(lucideReact.Pipette, { "aria-hidden": true, className: "size-2.5" }),
+                    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                reactAriaComponents.Input,
+                {
+                  placeholder,
+                  spellCheck: false,
+                  autoComplete: "off",
+                  className: chunkMWAXK66H_cjs.cn(
+                    styles3.content(),
+                    "min-w-0 flex-1 bg-transparent font-mono outline-none",
+                    "pl-0",
+                    fieldTextStyles[size]
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        description ? /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Text, { slot: "description", className: fieldHintStyles, children: description }) : null,
+        errorMessage && appearance !== "cell" ? /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.FieldError, { className: fieldErrorStyles, children: errorMessage }) : null
+      ]
+    }
+  );
+}
 function Combobox({
   label,
   description,
@@ -4877,25 +5329,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"] },
@@ -4908,13 +5360,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 = {
@@ -5002,9 +5454,16 @@ function ChipItem({
     if (custom !== void 0) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.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__ */ jsxRuntime.jsx(Badge, { variant, children: label });
+    const option = field.options?.find((o) => o.value === value);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Badge,
+      {
+        variant: option?.variant,
+        ...option?.color ? { color: option.color } : {},
+        ...option?.icon ? { icon: option.icon } : {},
+        children: option?.label ?? value
+      }
+    );
   }
   return /* @__PURE__ */ jsxRuntime.jsx("span", { className: chunkMWAXK66H_cjs.cn("font-mono text-[12px] text-ink max-w-[10rem] truncate"), children: formatValue(field, operator, value) });
 }
@@ -5385,8 +5844,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__ */ jsxRuntime.jsx(Badge, { variant, children: o.label });
+        const option = field.options?.find((x) => x.value === o.id);
+        return /* @__PURE__ */ jsxRuntime.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 } : {},
@@ -5405,7 +5872,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__ */ jsxRuntime.jsx(
     BadgeMultiSelect,
@@ -7039,6 +7508,74 @@ function TimeField({
     }
   );
 }
+function createToastQueue(options = {}) {
+  return new reactAriaComponents.UNSTABLE_ToastQueue({ maxVisibleToasts: options.maxVisibleToasts ?? 3 });
+}
+var toastStyles = tailwindVariants.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: lucideReact.Info,
+  success: lucideReact.CircleCheck,
+  danger: lucideReact.CircleAlert
+};
+function ToastRegion({ queue, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactAriaComponents.UNSTABLE_ToastRegion,
+    {
+      queue,
+      className: chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsxs(reactAriaComponents.UNSTABLE_Toast, { toast, className: root(), children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Icon, { className: icon(), "aria-hidden": true }),
+          /* @__PURE__ */ jsxRuntime.jsxs(reactAriaComponents.UNSTABLE_ToastContent, { className: "flex flex-col gap-0.5 flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Text, { slot: "title", className: title(), children: toast.content.title }),
+            toast.content.description ? /* @__PURE__ */ jsxRuntime.jsx(reactAriaComponents.Text, { slot: "description", className: description(), children: toast.content.description }) : null
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            reactAriaComponents.Button,
+            {
+              slot: "close",
+              "aria-label": "Dismiss",
+              className: chunkMWAXK66H_cjs.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__ */ jsxRuntime.jsx(lucideReact.X, { className: "size-3.5" })
+            }
+          )
+        ] });
+      }
+    }
+  );
+}
 function TooltipTrigger({
   delay = 500,
   closeDelay = 0,
@@ -7110,6 +7647,7 @@ exports.ChannelIcon = ChannelIcon;
 exports.Checkbox = Checkbox;
 exports.CheckboxGroup = CheckboxGroup;
 exports.ChipValue = ChipValue;
+exports.ColorInput = ColorInput;
 exports.Combobox = Combobox;
 exports.Command = Command;
 exports.CommandHint = CommandHint;
@@ -7134,6 +7672,7 @@ exports.FileViewer = FileViewer;
 exports.FileViewerFallbackCard = FileViewerFallbackCard;
 exports.FilterRow = FilterRow;
 exports.FilterValueInput = FilterValueInput;
+exports.IconPicker = IconPicker;
 exports.ImageAttachment = ImageAttachment;
 exports.ImageLightbox = ImageLightbox;
 exports.Input = Input;
@@ -7193,6 +7732,7 @@ exports.Tabs = Tabs;
 exports.TagInput = TagInput;
 exports.Textarea = Textarea;
 exports.TimeField = TimeField;
+exports.ToastRegion = ToastRegion;
 exports.Tooltip = Tooltip;
 exports.TooltipTrigger = TooltipTrigger;
 exports.TruncateCell = TruncateCell;
@@ -7210,6 +7750,7 @@ exports.cardStyles = cardStyles2;
 exports.channelIcon = channelIcon;
 exports.countLeaves = countLeaves;
 exports.createDraftMessageClient = createDraftMessageClient;
+exports.createToastQueue = createToastQueue;
 exports.defaultValueFor = defaultValueFor;
 exports.draftMessageCardStyles = draftMessageCardStyles;
 exports.draftMessageComposerStyles = draftMessageComposerStyles;
@@ -7233,6 +7774,7 @@ exports.isPreviewableImageName = isPreviewableImageName;
 exports.makeActionsColumn = makeActionsColumn;
 exports.messageComposerStyles = messageComposerStyles;
 exports.navItemStyles = navItemStyles;
+exports.normalizeHexColor = normalizeHexColor;
 exports.operatorById = operatorById;
 exports.operatorsForType = operatorsForType;
 exports.parseCombo = parseCombo;
@@ -7244,6 +7786,8 @@ exports.registerDraftMessageActions = registerDraftMessageActions;
 exports.removeLeaf = removeLeaf;
 exports.removeSubgroup = removeSubgroup;
 exports.replaceLeaf = replaceLeaf;
+exports.resolveLucideIcon = resolveLucideIcon;
+exports.resolveLucideIconName = resolveLucideIconName;
 exports.segmentedControlStyles = segmentedControlStyles;
 exports.setJoiner = setJoiner;
 exports.subscribeDraftMessageOutcome = subscribeDraftMessageOutcome;
@@ -7251,6 +7795,7 @@ exports.tableCellStyles = tableCellStyles;
 exports.tableHeaderCellStyles = tableHeaderCellStyles;
 exports.tabsStyles = tabsStyles;
 exports.terminalKindFor = terminalKindFor;
+exports.toastStyles = toastStyles;
 exports.updateLeaf = updateLeaf;
 exports.updateSubgroup = updateSubgroup;
 exports.useAttributeTypeIcon = useAttributeTypeIcon;