@proteos/ui 0.55.0 → 0.57.0

package/dist/index.js

@@ -1,5 +1,5 @@
-import { cn, Button, Skeleton } from './chunk-IKAX76MB.js';
-export { Button, Skeleton, buttonStyles, cn, skeletonStyles } from './chunk-IKAX76MB.js';
+import { cn, Button, Skeleton } from './chunk-NSE4VW3Z.js';
+export { Button, Skeleton, buttonStyles, cn, skeletonStyles } from './chunk-NSE4VW3Z.js';
 import { icons, Contact, Paperclip, BookText, Banknote, UsersRound, User, Link2, Braces, Brackets, ToggleLeft, CircleDot, Calendar, Hash, Type, File, FileImage, FileText, FileSpreadsheet, FileArchive, Loader2, X, Shapes, Search, Phone, AudioLines, Video, Mic, AtSign, MessagesSquare, Camera, Send, Linkedin, MessageCircle, Mail, Pipette, Pencil, 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, Input as Input$1, ListBox, ListBoxItem, TooltipTrigger as TooltipTrigger$1, Tooltip as Tooltip$1, Button as Button$1, Breadcrumbs as Breadcrumbs$1, Breadcrumb, Link, Checkbox as Checkbox$1, CheckboxGroup as CheckboxGroup$1, FieldError, TextField, ComboBox, ComboBoxStateContext, Select as Select$1, SelectValue, ModalOverlay, Modal as Modal$1, DatePicker as DatePicker$1, Group, DateInput, DateSegment, 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, Calendar as Calendar$1, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell, DatePickerStateContext } from 'react-aria-components';
@@ -35,8 +35,8 @@ function PopoverContent({
       className: (renderProps) => cn(
         "rounded-md border border-rule bg-surface",
         "shadow-[var(--shadow-float)]",
-        "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",
+        "entering:animate-enter-slide-down",
+        "exiting:animate-exit-slide-up",
         panelClassName,
         typeof className === "function" ? className(renderProps) : className
       ),
@@ -403,7 +403,7 @@ function AttributeTypeIcon({
 var avatarStyles = tv({
   base: [
     "inline-grid place-items-center shrink-0 select-none overflow-hidden",
-    "rounded-full border",
+    "border",
     "font-mono font-medium tracking-[-0.005em]"
   ],
   variants: {
@@ -415,17 +415,22 @@ var avatarStyles = tv({
     },
     tone: {
       paper: "bg-surface-3 text-ink border-rule",
-      indigo: "bg-accent text-[#f0efe8] border-transparent",
-      moss: "bg-[#5b7052] text-[#f0efe8] border-transparent",
-      terra: "bg-[#8a5a3f] text-[#f0efe8] border-transparent",
-      slate: "bg-ink text-surface border-transparent"
+      indigo: "bg-tile-indigo text-tile-fg border-transparent",
+      moss: "bg-tile-moss text-tile-fg border-transparent",
+      terra: "bg-tile-terra text-tile-fg border-transparent",
+      slate: "bg-tile-slate text-tile-fg border-transparent"
+    },
+    shape: {
+      circle: "rounded-full",
+      square: "rounded-md"
     }
   },
-  defaultVariants: { size: "md", tone: "paper" }
+  defaultVariants: { size: "md", tone: "paper", shape: "circle" }
 });
 function Avatar({
   size,
   tone,
+  shape,
   initials,
   src,
   alt = "",
@@ -435,7 +440,7 @@ function Avatar({
 }) {
   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(
+  return /* @__PURE__ */ jsx("span", { ...props, className: cn(avatarStyles({ size, tone, shape }), className), children: showsImage ? /* @__PURE__ */ jsx(
     "img",
     {
       src: src ?? void 0,
@@ -702,8 +707,8 @@ function IconPicker({
         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"
+          "entering:animate-enter-slide-down",
+          "exiting:animate-exit-slide-up"
         ),
         children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 pb-2", children: [
@@ -953,8 +958,8 @@ function Tooltip({ className, offset = 6, ...props }) {
         "rounded-md border border-rule bg-surface shadow-[var(--shadow-raised)]",
         "px-2.5 py-1.5",
         "font-mono text-[11.5px] text-ink-2",
-        "entering:animate-in entering:fade-in-0 entering:slide-in-from-top-1 entering:duration-150",
-        "exiting:animate-out exiting:fade-out-0 exiting:duration-100",
+        "entering:animate-enter-slide-down",
+        "exiting:animate-exit-fade",
         typeof className === "function" ? className(renderProps) : className
       )
     }
@@ -1310,8 +1315,8 @@ function BadgeMultiSelect({
           // (defaultOpen) — no browser outline around the whole panel.
           "outline-none rounded-md border border-rule bg-surface p-1",
           "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"
+          "entering:animate-enter-slide-down",
+          "exiting:animate-exit-slide-up"
         ),
         children: /* @__PURE__ */ jsx("div", { ref: popoverRef, children: /* @__PURE__ */ jsx(
           ListBox,
@@ -1857,8 +1862,8 @@ function Combobox({
               "min-w-[var(--trigger-width)]",
               "rounded-md border border-rule bg-surface p-1",
               "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"
+              "entering:animate-enter-slide-down",
+              "exiting:animate-exit-slide-up"
             ),
             children: /* @__PURE__ */ jsx(
               ListBox,
@@ -2350,8 +2355,8 @@ function Select({
               "z-[1300]",
               "rounded-md border border-rule bg-surface p-1",
               "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",
+              "entering:animate-enter-slide-down",
+              "exiting:animate-exit-slide-up",
               popoverClassName
             ),
             children: [
@@ -2531,8 +2536,8 @@ function ModalContent({
         "fixed inset-0 z-50 flex items-center justify-center p-4",
         // Warm ink scrim — stays in the Proteos palette (no pure black).
         "bg-[color-mix(in_oklab,var(--color-ink)_40%,transparent)]",
-        "entering:animate-in entering:fade-in-0 entering:duration-150",
-        "exiting:animate-out exiting:fade-out-0 exiting:duration-100",
+        "entering:animate-enter-fade",
+        "exiting:animate-exit-fade",
         typeof className === "function" ? className(renderProps) : className
       ),
       children: /* @__PURE__ */ jsx(
@@ -2546,8 +2551,8 @@ function ModalContent({
             "flex flex-col max-h-[calc(100dvh-2rem)]",
             "bg-surface border border-rule rounded-lg",
             "shadow-[var(--shadow-float)]",
-            "entering:animate-in entering:zoom-in-95 entering:slide-in-from-top-2 entering:duration-150",
-            "exiting:animate-out exiting:zoom-out-95 exiting:duration-100",
+            "entering:animate-enter-zoom",
+            "exiting:animate-exit-zoom",
             modalClassName
           ),
           children: /* @__PURE__ */ jsx(Dialog, { className: "outline-none flex flex-col min-h-0 overflow-hidden", children })
@@ -2821,8 +2826,8 @@ function CurrencyInput({
                 className: cn(
                   "min-w-[9rem] rounded-md border border-rule bg-surface p-1",
                   "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"
+                  "entering:animate-enter-slide-down",
+                  "exiting:animate-exit-slide-up"
                 ),
                 children: /* @__PURE__ */ jsx(ListBox, { className: "max-h-72 overflow-auto outline-none", children: currencyOptions.map((option) => /* @__PURE__ */ jsxs(
                   ListBoxItem,
@@ -4061,7 +4066,7 @@ function CalendarSurface() {
             "data-[outside-month]:text-ink-4",
             "data-[hovered]:bg-surface-2 data-[hovered]:text-ink",
             "data-[focus-visible]:shadow-[var(--shadow-focus)]",
-            "data-[selected]:bg-accent data-[selected]:text-[#f0efe8]",
+            "data-[selected]:bg-accent data-[selected]:text-tile-fg",
             "data-[selected]:data-[hovered]:bg-accent-2",
             "data-[disabled]:opacity-30 data-[disabled]:cursor-not-allowed",
             "data-[unavailable]:line-through data-[unavailable]:text-ink-4"
@@ -4122,7 +4127,7 @@ function DatePicker({
                         "data-[placeholder]:text-ink-4",
                         "data-[type=literal]:text-ink-4",
                         // segment focus treatment: indigo fill, paper text
-                        "data-[focused]:bg-accent data-[focused]:text-[#f0efe8] data-[focused]:rounded-[3px]",
+                        "data-[focused]:bg-accent data-[focused]:text-tile-fg data-[focused]:rounded-[3px]",
                         "data-[disabled]:cursor-not-allowed"
                       )
                     }
@@ -4161,8 +4166,8 @@ function DatePicker({
               "w-[var(--trigger-width)] min-w-[18rem] max-w-[500px]",
               "rounded-md border border-rule bg-surface p-4",
               "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"
+              "entering:animate-enter-slide-down",
+              "exiting:animate-exit-slide-up"
             ),
             children: /* @__PURE__ */ jsx(Dialog, { className: "outline-none", children: /* @__PURE__ */ jsx(CalendarSurface, {}) })
           }
@@ -4176,7 +4181,7 @@ var segmentStyles = cn(
   "data-[placeholder]:text-ink-4",
   "data-[type=literal]:text-ink-4",
   // segment focus treatment: indigo fill, paper text
-  "data-[focused]:bg-accent data-[focused]:text-[#f0efe8] data-[focused]:rounded-[3px]",
+  "data-[focused]:bg-accent data-[focused]:text-tile-fg data-[focused]:rounded-[3px]",
   "data-[disabled]:cursor-not-allowed"
 );
 function PopoverTimeField({
@@ -4303,8 +4308,8 @@ function DateTimePicker({
               "w-[var(--trigger-width)] min-w-[18rem] max-w-[500px]",
               "rounded-md border border-rule bg-surface p-4",
               "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"
+              "entering:animate-enter-slide-down",
+              "exiting:animate-exit-slide-up"
             ),
             children: /* @__PURE__ */ jsxs(Dialog, { className: "outline-none", children: [
               /* @__PURE__ */ jsx(CalendarSurface, {}),
@@ -4538,8 +4543,8 @@ function MultiSelect({
           // (defaultOpen) — no browser outline around the whole panel.
           "outline-none rounded-md border border-rule bg-surface p-1",
           "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"
+          "entering:animate-enter-slide-down",
+          "exiting:animate-exit-slide-up"
         ),
         children: [
           isSearchable ? /* @__PURE__ */ jsx("div", { className: "border-b border-rule-2 px-1 pb-1 mb-1", children: /* @__PURE__ */ jsx(
@@ -5576,8 +5581,8 @@ var imageLightboxStyles = tv({
     "fixed inset-0 z-50 flex items-center justify-center p-4",
     // Deeper scrim than Modal's 40% — the image needs the page fully dimmed.
     "bg-[color-mix(in_oklab,var(--color-ink)_72%,transparent)]",
-    "entering:animate-in entering:fade-in-0 entering:duration-150",
-    "exiting:animate-out exiting:fade-out-0 exiting:duration-100"
+    "entering:animate-enter-fade",
+    "exiting:animate-exit-fade"
   ]
 });
 function ImageLightbox({ isOpen, onOpenChange, src, name, onDownload }) {
@@ -5662,7 +5667,7 @@ function VideoView({ name, src }) {
     /* @__PURE__ */ jsx("video", { controls: true, src, "aria-label": name, className: "h-full w-full object-contain" })
   );
 }
-var PdfView = lazy(() => import('./pdf-view-MH75RVQP.js'));
+var PdfView = lazy(() => import('./pdf-view-RQ2OZYHJ.js'));
 var fileViewerStyles = tv({
   base: [
     "relative flex w-full flex-col overflow-hidden",
@@ -5809,8 +5814,8 @@ function MenuPopover({ className, offset = 4, placement = "bottom start", ...pro
       className: (renderProps) => cn(
         "min-w-[200px] p-1 bg-surface border border-rule rounded-md",
         "shadow-[var(--shadow-float)] outline-none z-[1200]",
-        "entering:animate-in entering:fade-in-0 entering:zoom-in-95",
-        "exiting:animate-out exiting:fade-out-0 exiting:zoom-out-95",
+        "entering:animate-enter-zoom",
+        "exiting:animate-exit-zoom",
         typeof className === "function" ? className(renderProps) : className
       )
     }
@@ -6217,7 +6222,8 @@ var OPERATORS = [
       "relation",
       "user",
       "principal",
-      "contact-address"
+      "contact-address",
+      "array"
     ]
   },
   {
@@ -6233,10 +6239,19 @@ var OPERATORS = [
       "relation",
       "user",
       "principal",
-      "contact-address"
+      "contact-address",
+      "array"
     ]
   },
   { id: "contains", label: "contains", arity: 1, types: ["string", "array", "contact-address"] },
+  {
+    id: "not_contains",
+    label: "does not contain",
+    arity: 1,
+    types: ["string", "array", "contact-address"]
+  },
+  // Array-only: "has every one of these". On a scalar the backend rejects it.
+  { id: "contains_all", label: "has all of", arity: "n", types: ["array"] },
   { id: "starts_with", label: "starts with", arity: 1, types: ["string", "contact-address"] },
   { id: "ends_with", label: "ends with", arity: 1, types: ["string", "contact-address"] },
   {
@@ -6299,14 +6314,33 @@ var OP_LABEL_OVERRIDES = {
   integer: { gt: "is greater than", lt: "is less than", eq: "equals", ne: "does not equal" },
   currency: { gt: "is greater than", lt: "is less than", eq: "equals", ne: "does not equal" },
   datetime: { eq: "is on", ne: "is not on", gt: "is after", lt: "is before" },
-  array: { contains: "contains", empty: "is empty", not_empty: "is not empty" },
+  // Arrays filter by set membership, in the words every CRM uses for it.
+  array: {
+    contains: "has",
+    not_contains: "does not have",
+    in: "has any of",
+    not_in: "has none of",
+    contains_all: "has all of",
+    empty: "is empty",
+    not_empty: "is not empty"
+  },
   boolean: { eq: "is", ne: "is not" }
 };
+var OP_ORDER_OVERRIDES = {
+  array: ["contains", "not_contains", "in", "contains_all", "not_in", "empty", "not_empty"]
+};
 function operatorsForType(type) {
-  return OPERATORS.filter((op) => op.types.includes(type)).map((op) => {
+  const ops = OPERATORS.filter((op) => op.types.includes(type)).map((op) => {
     const override = OP_LABEL_OVERRIDES[type]?.[op.id];
     return override ? { ...op, label: override } : op;
   });
+  const order = OP_ORDER_OVERRIDES[type];
+  if (!order) return ops;
+  return [...ops].sort((a, b) => order.indexOf(a.id) - order.indexOf(b.id));
+}
+function isEnumLike(field) {
+  if (field.type === "enum") return true;
+  return field.type === "array" && (field.options?.length ?? 0) > 0;
 }
 function operatorById(id) {
   return OPERATORS.find((o) => o.id === id);
@@ -6378,7 +6412,7 @@ function ChipItem({
     const custom = effectiveRenderer({ field, operator, value });
     if (custom !== void 0) return /* @__PURE__ */ jsx(Fragment, { children: custom });
   }
-  if (field.type === "enum") {
+  if (isEnumLike(field)) {
     const option = findEnumOption(field, value);
     return /* @__PURE__ */ jsx(
       Badge,
@@ -6406,7 +6440,7 @@ function formatValue(field, operator, value) {
   if (arity === "n") {
     const arr = Array.isArray(value) ? value : typeof value === "string" && value.length > 0 ? value.split(",") : [];
     if (arr.length === 0) return "\u2014";
-    if (field.type === "enum") {
+    if (isEnumLike(field)) {
       const labels = arr.map((v) => findEnumOption(field, v)?.label ?? v);
       return labels.length <= 2 ? labels.join(", ") : `${labels[0]}, ${labels[1]} +${labels.length - 2}`;
     }
@@ -6414,7 +6448,7 @@ function formatValue(field, operator, value) {
   }
   if (field.type === "boolean") return value === true || value === "true" ? "true" : "false";
   if (value === "" || value == null) return "\u2014";
-  if (field.type === "enum") {
+  if (isEnumLike(field)) {
     return findEnumOption(field, String(value))?.label ?? String(value);
   }
   if (field.type === "number" || field.type === "integer") {
@@ -6429,46 +6463,54 @@ var segmentedControlStyles = tv({
     // stretching parent (e.g. a `flex flex-col` card body, whose default
     // align-items:stretch would otherwise pull it to full width). Consumers
     // can still opt into full width by passing `w-full` via className.
-    group: "inline-flex w-fit rounded-sm border border-rule-strong bg-surface p-0.5 gap-0.5",
+    group: "inline-flex w-fit gap-px p-0.5 rounded-chip bg-surface-2 border border-rule",
     segment: [
-      "inline-flex items-center justify-center cursor-pointer",
-      "font-mono tracking-[0.04em] rounded-[3px] outline-none select-none",
-      "transition-[background-color,color] duration-150",
-      "data-[hovered]:text-ink",
-      "data-[selected]:bg-ink data-[selected]:text-surface",
+      "inline-flex items-center justify-center gap-1 cursor-pointer select-none",
+      "font-sans font-medium tracking-[-0.005em] rounded-sm outline-none text-ink-3",
+      "transition-[background-color,color,box-shadow] duration-150",
+      // Unselected: hover/press tint into the track colour. `selected` is
+      // declared after `hovered` in styles.css, so the pill wins over these.
+      "hovered:text-ink hovered:bg-[color-mix(in_oklab,var(--color-ink)_6%,var(--color-surface-2))]",
+      "pressed:bg-[color-mix(in_oklab,var(--color-ink)_10%,var(--color-surface-2))]",
+      // Selected: lifted white pill, static.
+      "selected:bg-surface selected:text-ink selected:shadow-[var(--shadow-rest)]",
       "data-[focus-visible]:shadow-[var(--shadow-focus)]",
+      "selected:data-[focus-visible]:shadow-[var(--shadow-focus),var(--shadow-rest)]",
       "data-[disabled]:opacity-45 data-[disabled]:cursor-not-allowed"
     ]
   },
   variants: {
     size: {
-      sm: { segment: "px-2 py-0.5 text-[10.5px] tracking-[0.08em]" },
-      md: { segment: "px-2.5 py-1 text-[12px]" }
+      sm: { segment: "px-2 py-0.5 text-[11.5px] min-h-[22px]" },
+      md: { segment: "px-2.5 py-1 text-[12.5px] min-h-[26px]" }
     },
-    tone: {
-      // Default: ink fill on selected.
-      default: { segment: "text-ink-3" }
+    // Dense flow-wrapping register (designer inspector): the group becomes a
+    // wrapping flex row and every segment grows to share the line.
+    wrap: {
+      true: { group: "flex flex-wrap w-auto", segment: "flex-1 min-w-7 px-1.5" },
+      false: {}
     }
   },
-  defaultVariants: { size: "sm", tone: "default" }
+  defaultVariants: { size: "sm", wrap: false }
 });
 function SegmentedControl({
   options,
   value,
   onChange,
   size,
+  wrap = false,
   autoFocus = false,
   className,
   orientation = "horizontal",
   ...props
 }) {
-  const styles4 = segmentedControlStyles({ size });
+  const styles4 = segmentedControlStyles({ size, wrap });
   return /* @__PURE__ */ jsx(
     RadioGroup$1,
     {
       ...props,
       orientation,
-      value: String(value),
+      value: value === null ? null : String(value),
       onChange: (next) => onChange(next),
       className: cn(styles4.group(), className),
       children: options.map((option) => /* @__PURE__ */ jsx(
@@ -6476,6 +6518,7 @@ function SegmentedControl({
         {
           value: String(option.id),
           ...option.isDisabled ? { isDisabled: true } : {},
+          ...option["aria-label"] !== void 0 ? { "aria-label": option["aria-label"] } : {},
           ...autoFocus && option.id === value ? { autoFocus: true } : {},
           className: styles4.segment(),
           children: option.label
@@ -6662,7 +6705,7 @@ function FilterValueInput({
   }
   const leaf = (() => {
     if (arity === "n") {
-      if (field.type === "enum") {
+      if (isEnumLike(field)) {
         return /* @__PURE__ */ jsx(
           EnumMultiValue,
           {
@@ -6689,7 +6732,7 @@ function FilterValueInput({
         }
       );
     }
-    if (field.type === "enum") {
+    if (isEnumLike(field)) {
       return /* @__PURE__ */ jsx(
         EnumSingleValue,
         {
@@ -6850,7 +6893,9 @@ function placeholderFor(field, operator) {
   if (field.type === "number" || field.type === "integer" || field.type === "currency") return "0";
   if (operator === "starts_with") return "starts with\u2026";
   if (operator === "ends_with") return "ends with\u2026";
-  if (operator === "contains") return "contains\u2026";
+  if (operator === "contains") return field.type === "array" ? "has\u2026" : "contains\u2026";
+  if (operator === "not_contains")
+    return field.type === "array" ? "does not have\u2026" : "does not contain\u2026";
   return "value";
 }
 function OperatorPicker({
@@ -7238,8 +7283,8 @@ function NestedGroup({
                 {
                   "aria-label": "Group joiner",
                   options: [
-                    { id: "and", label: "AND" },
-                    { id: "or", label: "OR" }
+                    { id: "and", label: "and" },
+                    { id: "or", label: "or" }
                   ],
                   value: group.logicalOperator,
                   onChange: (next) => onChange({ ...group, logicalOperator: next })
@@ -7475,8 +7520,8 @@ function RecordFilterBuilderPanel({
             {
               "aria-label": "Joiner",
               options: [
-                { id: "and", label: "AND" },
-                { id: "or", label: "OR" }
+                { id: "and", label: "and" },
+                { id: "or", label: "or" }
               ],
               value: filter.logicalOperator,
               onChange: setJoiner2
@@ -7581,17 +7626,12 @@ function RecordFilterBuilderPanel({
               ),
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
                 onSaveView ? /* @__PURE__ */ jsxs(
-                  "button",
+                  Button,
                   {
-                    type: "button",
-                    onClick: onSaveView,
-                    disabled: totalChildren === 0,
-                    className: cn(
-                      "inline-flex items-center gap-1.5 px-2.5 py-1.5 rounded-sm",
-                      "font-sans text-[13px] text-ink-2 hover:bg-surface-2 hover:text-ink",
-                      "disabled:opacity-40 disabled:pointer-events-none",
-                      "outline-none cursor-pointer"
-                    ),
+                    variant: "ghost",
+                    size: "sm",
+                    onPress: onSaveView,
+                    isDisabled: totalChildren === 0,
                     children: [
                       /* @__PURE__ */ jsxs(
                         "svg",
@@ -7614,19 +7654,7 @@ function RecordFilterBuilderPanel({
                     ]
                   }
                 ) : null,
-                /* @__PURE__ */ jsx(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: onClose,
-                    className: cn(
-                      "inline-flex items-center gap-1.5 px-3 py-1.5 rounded-sm",
-                      "bg-ink text-surface font-mono text-[12px]",
-                      "hover:bg-accent-ink outline-none cursor-pointer"
-                    ),
-                    children: "Done"
-                  }
-                )
+                /* @__PURE__ */ jsx(Button, { variant: "cta", size: "sm", onPress: onClose, children: "Done" })
               ] })
             ]
           }
@@ -8133,19 +8161,7 @@ function ChipMiniEditor({
             onChange: onChangeValue
           }
         ) }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "submit",
-            className: cn(
-              "shrink-0 inline-flex items-center px-2.5 py-1.5 rounded-md",
-              "bg-ink text-surface font-mono text-[12px]",
-              "hover:bg-accent-ink cursor-pointer outline-none",
-              "focus-visible:shadow-[var(--shadow-focus)]"
-            ),
-            children: "Save"
-          }
-        )
+        /* @__PURE__ */ jsx(Button, { type: "submit", variant: "cta", size: "sm", className: "shrink-0", children: "Save" })
       ]
     }
   );
@@ -8436,7 +8452,7 @@ function TimeField({
                   "data-[placeholder]:text-ink-4",
                   "data-[type=literal]:text-ink-4",
                   // segment focus treatment: indigo fill, paper text
-                  "data-[focused]:bg-accent data-[focused]:text-[#f0efe8] data-[focused]:rounded-[3px]",
+                  "data-[focused]:bg-accent data-[focused]:text-tile-fg data-[focused]:rounded-[3px]",
                   "data-[disabled]:cursor-not-allowed"
                 )
               }
@@ -8459,8 +8475,8 @@ var toastStyles = tv({
       "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"
+      "entering:animate-enter-slide-up",
+      "exiting:animate-exit-fade"
     ],
     icon: "size-4 shrink-0 mt-0.5",
     title: "font-sans text-[13px] font-medium leading-[1.4] text-ink",