@marimo-team/islands 0.23.4-dev0 → 0.23.4-dev5

package/src/components/data-table/filter-pills.tsx

@@ -1,24 +1,31 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 "use no memo";
 
-import type {
-  ColumnFilter,
-  ColumnFiltersState,
-  Table,
-} from "@tanstack/react-table";
+import type { ColumnFiltersState, Table } from "@tanstack/react-table";
 import { XIcon } from "lucide-react";
+import { useState } from "react";
 import { type DateFormatter, useDateFormatter } from "react-aria";
+import type { CalculateTopKRows } from "@/plugins/impl/DataTablePlugin";
 import { logNever } from "@/utils/assertNever";
+import { cn } from "@/utils/cn";
 import { Badge } from "../ui/badge";
+import { Button } from "../ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
+import { FilterPillEditor } from "./filter-pill-editor";
 import type { ColumnFilterValue } from "./filters";
 import { stringifyUnknownValue } from "./utils";
 
 interface Props<TData> {
   filters: ColumnFiltersState | undefined;
   table: Table<TData>;
+  calculateTopKRows?: CalculateTopKRows;
 }
 
-export const FilterPills = <TData,>({ filters, table }: Props<TData>) => {
+export const FilterPills = <TData,>({
+  filters,
+  table,
+  calculateTopKRows,
+}: Props<TData>) => {
   const timeFormatter = useDateFormatter({
     hour: "2-digit",
     minute: "2-digit",
@@ -29,49 +36,176 @@ export const FilterPills = <TData,>({ filters, table }: Props<TData>) => {
     return null;
   }
 
-  function renderFilterPill(filter: ColumnFilter) {
-    const formattedValue = formatValue(
-      filter.value as ColumnFilterValue,
-      timeFormatter,
-    );
-    if (!formattedValue) {
-      return null;
-    }
-
-    return (
-      <Badge key={filter.id} variant="secondary" className="dark:invert">
-        {filter.id} {formattedValue}{" "}
-        <span
-          className="cursor-pointer opacity-60 hover:opacity-100 pl-1 py-[2px]"
-          onClick={() => {
+  return (
+    <div part="filter-pills" className="flex flex-wrap gap-2 px-1 py-2">
+      {filters.map((filter) => (
+        <FilterPill
+          key={filter.id}
+          columnId={filter.id}
+          value={filter.value as ColumnFilterValue}
+          timeFormatter={timeFormatter}
+          table={table}
+          calculateTopKRows={calculateTopKRows}
+          onRemove={() =>
             table.setColumnFilters((filters) =>
               filters.filter((f) => f.id !== filter.id),
-            );
-          }}
-        >
-          <XIcon className="w-3.5 h-3.5" />
-        </span>
+            )
+          }
+        />
+      ))}
+    </div>
+  );
+};
+
+interface FilterPillProps<TData> {
+  columnId: string;
+  value: ColumnFilterValue;
+  timeFormatter: DateFormatter;
+  table: Table<TData>;
+  calculateTopKRows?: CalculateTopKRows;
+  onRemove: () => void;
+}
+
+const FilterPill = <TData,>({
+  columnId,
+  value,
+  timeFormatter,
+  table,
+  calculateTopKRows,
+  onRemove,
+}: FilterPillProps<TData>) => {
+  const [open, setOpen] = useState(false);
+
+  const formatted = formatValue(value, timeFormatter);
+  if (!formatted) {
+    return null;
+  }
+
+  // this is temporary, with more operator & datatype support this goes away
+  const isReadOnly =
+    "type" in value &&
+    (value.type === "date" ||
+      value.type === "datetime" ||
+      value.type === "time");
+
+  const twoSegment = formatted.value === undefined;
+
+  const handleRemove = (e: React.MouseEvent) => {
+    e.stopPropagation();
+    onRemove();
+  };
+
+  const segments = (
+    <>
+      <span className="text-foreground">{columnId}</span>
+      <Separator />
+      <span
+        className={cn(
+          "font-normal",
+          twoSegment ? "text-foreground" : "text-foreground/70",
+        )}
+      >
+        {formatted.operator}
+      </span>
+      {!twoSegment && (
+        <>
+          <Separator />
+          <span className="text-foreground">{formatted.value}</span>
+        </>
+      )}
+    </>
+  );
+
+  const removeButton = (
+    <Button
+      type="button"
+      size="icon"
+      variant="ghost"
+      className="ml-1 rounded-full text-destructive/60 hover:text-destructive hover:shadow-none hover:bg-transparent"
+      onClick={handleRemove}
+      aria-label="Remove filter"
+    >
+      <XIcon className="h-3.5 w-3.5" aria-hidden={true} />
+    </Button>
+  );
+
+  if (isReadOnly) {
+    return (
+      <Badge
+        variant="outline"
+        className="bg-background border-border text-foreground"
+      >
+        {segments}
+        {removeButton}
       </Badge>
     );
   }
 
   return (
-    <div className="flex flex-wrap gap-2 px-1">
-      {filters.map(renderFilterPill)}
-    </div>
+    <Popover open={open} onOpenChange={setOpen} modal={true}>
+      <Badge
+        variant="outline"
+        className={cn(
+          "bg-background border-border text-foreground",
+          "hover:bg-accent hover:text-accent-foreground",
+          "has-data-[state=open]:bg-accent has-data-[state=open]:text-accent-foreground",
+          "transition-colors",
+        )}
+      >
+        <PopoverTrigger asChild={true}>
+          <button
+            type="button"
+            className="inline-flex items-center cursor-pointer bg-transparent border-0 p-0 [font:inherit] text-inherit"
+            aria-label={`Edit filter on ${columnId}`}
+          >
+            {segments}
+          </button>
+        </PopoverTrigger>
+        {removeButton}
+      </Badge>
+      <PopoverContent
+        className="w-auto p-0"
+        align="start"
+        alignOffset={-10}
+        sideOffset={10}
+        avoidCollisions={true}
+        onOpenAutoFocus={(e) => e.preventDefault()}
+      >
+        <FilterPillEditor
+          snapshot={{ columnId, value }}
+          table={table}
+          calculateTopKRows={calculateTopKRows}
+          onClose={() => setOpen(false)}
+        />
+      </PopoverContent>
+    </Popover>
   );
 };
 
-function formatValue(value: ColumnFilterValue, timeFormatter: DateFormatter) {
+function Separator() {
+  return (
+    <span aria-hidden={true} className="mx-1.5 w-px h-3 bg-foreground/30" />
+  );
+}
+
+interface FormattedFilter {
+  operator: string;
+  value?: string;
+}
+
+function formatValue(
+  value: ColumnFilterValue,
+  timeFormatter: DateFormatter,
+): FormattedFilter | undefined {
   if (!("type" in value)) {
     return;
   }
 
   if (value.operator === "is_null") {
-    return "is null";
+    return { operator: "is null" };
   }
   if (value.operator === "is_not_null") {
-    return "is not null";
+    return { operator: "is not null" };
   }
 
   if (value.type === "number") {
@@ -90,17 +224,19 @@ function formatValue(value: ColumnFilterValue, timeFormatter: DateFormatter) {
     return formatMinMax(value.min?.toISOString(), value.max?.toISOString());
   }
   if (value.type === "boolean") {
-    return `is ${value.value ? "True" : "False"}`;
+    return { operator: `is ${value.value ? "True" : "False"}` };
   }
   if (value.type === "select") {
     const stringifiedOptions = value.options.map((o) =>
       stringifyUnknownValue({ value: o }),
     );
-    const operator = value.operator === "in" ? "is in" : "not in";
-    return `${operator} [${stringifiedOptions.join(", ")}]`;
+    return {
+      operator: value.operator === "in" ? "is in" : "not in",
+      value: `[${stringifiedOptions.join(", ")}]`,
+    };
   }
   if (value.type === "text") {
-    return `contains "${value.text}"`;
+    return { operator: "contains", value: `"${value.text}"` };
   }
   logNever(value);
   return undefined;
@@ -109,18 +245,18 @@ function formatValue(value: ColumnFilterValue, timeFormatter: DateFormatter) {
 function formatMinMax(
   min: string | number | undefined,
   max: string | number | undefined,
-) {
+): FormattedFilter | undefined {
   if (min === undefined && max === undefined) {
     return;
   }
   if (min === max) {
-    return `== ${min}`;
+    return { operator: "==", value: String(min) };
   }
   if (min === undefined) {
-    return `<= ${max}`;
+    return { operator: "<=", value: String(max) };
   }
   if (max === undefined) {
-    return `>= ${min}`;
+    return { operator: ">=", value: String(min) };
   }
-  return `${min} - ${max}`;
+  return { operator: "between", value: `${min} - ${max}` };
 }

package/src/components/ui/checkbox.tsx

@@ -1,6 +1,6 @@
 /* Copyright 2026 Marimo. All rights reserved. */
 
-import { Check } from "lucide-react";
+import { Check, Minus } from "lucide-react";
 import { Checkbox as CheckboxPrimitive } from "radix-ui";
 import * as React from "react";
 
@@ -13,18 +13,22 @@ const Checkbox = React.forwardRef<
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
-      "flex items-center justify-center peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      "flex items-center justify-center peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground",
       className,
     )}
     {...props}
   >
     <CheckboxPrimitive.Indicator
-      // `max-h-[14px] overflow-hidden` are for the checkmark icon to not resize the checkbox
+      // `max-h-[14px] overflow-hidden` are for the icon to not resize the checkbox
       className={cn(
         "flex items-center justify-center text-current max-h-[14px] overflow-hidden",
       )}
     >
-      <Check className="h-4 w-4" />
+      {props.checked === "indeterminate" ? (
+        <Minus className="h-4 w-4" />
+      ) : (
+        <Check className="h-4 w-4" />
+      )}
     </CheckboxPrimitive.Indicator>
   </CheckboxPrimitive.Root>
 ));

package/src/components/ui/combobox.tsx

@@ -37,6 +37,7 @@ interface ComboboxCommonProps<TValue> {
   onSearchChange?: (search: string) => void;
   emptyState?: React.ReactNode;
   className?: string;
+  id?: string;
   keepPopoverOpenOnSelect?: boolean;
 }
 
@@ -93,6 +94,7 @@ export const Combobox = <TValue,>({
   chips = false,
   chipsClassName,
   keepPopoverOpenOnSelect,
+  id,
   ...rest
 }: ComboboxProps<TValue>) => {
   const [open = false, setOpen] = useControllableState({
@@ -169,6 +171,7 @@ export const Combobox = <TValue,>({
       <Popover open={open} onOpenChange={setOpen}>
         <PopoverTrigger asChild={true}>
           <div
+            id={id}
             className={cn(
               "flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid disabled:cursor-not-allowed disabled:opacity-50",
               className,

package/src/css/app/Cell.css

@@ -124,6 +124,10 @@
       marimo-table::part(table-footer) {
         padding-inline: 0.25rem;
       }
+
+      marimo-table::part(filter-pills) {
+        padding-bottom: 0;
+      }
     }
 
     & > :first-child {

package/src/plugins/impl/DataTablePlugin.tsx

@@ -1073,6 +1073,7 @@ const DataTableComponent = ({
             showFilters={showFilters}
             filters={filters}
             onFiltersChange={setFilters}
+            calculateTopKRows={calculate_top_k_rows}
             reloading={reloading}
             onRowSelectionChange={handleRowSelectionChange}
             freezeColumnsLeft={freezeColumnsLeft}

package/src/plugins/impl/data-frames/forms/__tests__/__snapshots__/form.test.tsx.snap

@@ -26,7 +26,6 @@ exports[`renderZodSchema > should render a form aggregate 1`] = `
           aria-describedby="_r_26_-form-item-description"
           aria-invalid="false"
           class="relative"
-          id="_r_26_-form-item"
         >
           <div
             aria-controls="radix-_r_27_"
@@ -34,6 +33,7 @@ exports[`renderZodSchema > should render a form aggregate 1`] = `
             aria-haspopup="dialog"
             class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid disabled:cursor-not-allowed disabled:opacity-50 min-w-[180px]"
             data-state="closed"
+            id="_r_26_-form-item"
             type="button"
           >
             <span
@@ -81,7 +81,6 @@ exports[`renderZodSchema > should render a form aggregate 1`] = `
           aria-describedby="_r_28_-form-item-description"
           aria-invalid="false"
           class="relative"
-          id="_r_28_-form-item"
         >
           <div
             aria-controls="radix-_r_29_"
@@ -89,6 +88,7 @@ exports[`renderZodSchema > should render a form aggregate 1`] = `
             aria-haspopup="dialog"
             class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid disabled:cursor-not-allowed disabled:opacity-50 min-w-[180px]"
             data-state="closed"
+            id="_r_28_-form-item"
             type="button"
           >
             <span
@@ -398,7 +398,6 @@ exports[`renderZodSchema > should render a form explode_columns 1`] = `
           aria-describedby="_r_2o_-form-item-description"
           aria-invalid="false"
           class="relative"
-          id="_r_2o_-form-item"
         >
           <div
             aria-controls="radix-_r_2p_"
@@ -406,6 +405,7 @@ exports[`renderZodSchema > should render a form explode_columns 1`] = `
             aria-haspopup="dialog"
             class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid disabled:cursor-not-allowed disabled:opacity-50 min-w-[180px]"
             data-state="closed"
+            id="_r_2o_-form-item"
             type="button"
           >
             <span
@@ -595,7 +595,6 @@ exports[`renderZodSchema > should render a form group_by 1`] = `
           aria-describedby="_r_1o_-form-item-description"
           aria-invalid="false"
           class="relative"
-          id="_r_1o_-form-item"
         >
           <div
             aria-controls="radix-_r_1p_"
@@ -603,6 +602,7 @@ exports[`renderZodSchema > should render a form group_by 1`] = `
             aria-haspopup="dialog"
             class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid disabled:cursor-not-allowed disabled:opacity-50 min-w-[180px]"
             data-state="closed"
+            id="_r_1o_-form-item"
             type="button"
           >
             <span
@@ -650,7 +650,6 @@ exports[`renderZodSchema > should render a form group_by 1`] = `
           aria-describedby="_r_1q_-form-item-description"
           aria-invalid="false"
           class="relative"
-          id="_r_1q_-form-item"
         >
           <div
             aria-controls="radix-_r_1r_"
@@ -658,6 +657,7 @@ exports[`renderZodSchema > should render a form group_by 1`] = `
             aria-haspopup="dialog"
             class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid disabled:cursor-not-allowed disabled:opacity-50 min-w-[180px]"
             data-state="closed"
+            id="_r_1q_-form-item"
             type="button"
           >
             <span
@@ -756,7 +756,7 @@ exports[`renderZodSchema > should render a form group_by 1`] = `
             aria-checked="false"
             aria-describedby="_r_1u_-form-item-description"
             aria-invalid="false"
-            class="flex items-center justify-center peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
+            class="flex items-center justify-center peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground"
             data-state="unchecked"
             data-testid="marimo-plugin-data-frames-boolean-checkbox"
             id="_r_1u_-form-item"
@@ -797,7 +797,6 @@ exports[`renderZodSchema > should render a form pivot 1`] = `
           aria-describedby="_r_3a_-form-item-description"
           aria-invalid="false"
           class="relative"
-          id="_r_3a_-form-item"
         >
           <div
             aria-controls="radix-_r_3b_"
@@ -805,6 +804,7 @@ exports[`renderZodSchema > should render a form pivot 1`] = `
             aria-haspopup="dialog"
             class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid disabled:cursor-not-allowed disabled:opacity-50 min-w-[180px]"
             data-state="closed"
+            id="_r_3a_-form-item"
             type="button"
           >
             <span
@@ -852,7 +852,6 @@ exports[`renderZodSchema > should render a form pivot 1`] = `
           aria-describedby="_r_3c_-form-item-description"
           aria-invalid="false"
           class="relative"
-          id="_r_3c_-form-item"
         >
           <div
             aria-controls="radix-_r_3d_"
@@ -860,6 +859,7 @@ exports[`renderZodSchema > should render a form pivot 1`] = `
             aria-haspopup="dialog"
             class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid disabled:cursor-not-allowed disabled:opacity-50 min-w-[180px]"
             data-state="closed"
+            id="_r_3c_-form-item"
             type="button"
           >
             <span
@@ -907,7 +907,6 @@ exports[`renderZodSchema > should render a form pivot 1`] = `
           aria-describedby="_r_3e_-form-item-description"
           aria-invalid="false"
           class="relative"
-          id="_r_3e_-form-item"
         >
           <div
             aria-controls="radix-_r_3f_"
@@ -915,6 +914,7 @@ exports[`renderZodSchema > should render a form pivot 1`] = `
             aria-haspopup="dialog"
             class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid disabled:cursor-not-allowed disabled:opacity-50 min-w-[180px]"
             data-state="closed"
+            id="_r_3e_-form-item"
             type="button"
           >
             <span
@@ -1256,7 +1256,7 @@ exports[`renderZodSchema > should render a form sample_rows 1`] = `
             aria-checked="false"
             aria-describedby="_r_2n_-form-item-description"
             aria-invalid="false"
-            class="flex items-center justify-center peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
+            class="flex items-center justify-center peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground"
             data-state="unchecked"
             data-testid="marimo-plugin-data-frames-boolean-checkbox"
             id="_r_2n_-form-item"
@@ -1297,7 +1297,6 @@ exports[`renderZodSchema > should render a form select_columns 1`] = `
           aria-describedby="_r_3_-form-item-description"
           aria-invalid="false"
           class="relative"
-          id="_r_3_-form-item"
         >
           <div
             aria-controls="radix-_r_4_"
@@ -1305,6 +1304,7 @@ exports[`renderZodSchema > should render a form select_columns 1`] = `
             aria-haspopup="dialog"
             class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid disabled:cursor-not-allowed disabled:opacity-50 min-w-[180px]"
             data-state="closed"
+            id="_r_3_-form-item"
             type="button"
           >
             <span
@@ -1471,7 +1471,7 @@ exports[`renderZodSchema > should render a form sort_column 1`] = `
             aria-checked="false"
             aria-describedby="_r_1f_-form-item-description"
             aria-invalid="false"
-            class="flex items-center justify-center peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground"
+            class="flex items-center justify-center peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground"
             data-state="unchecked"
             data-testid="marimo-plugin-data-frames-boolean-checkbox"
             id="_r_1f_-form-item"
@@ -1580,7 +1580,6 @@ exports[`renderZodSchema > should render a form unique 1`] = `
           aria-describedby="_r_31_-form-item-description"
           aria-invalid="false"
           class="relative"
-          id="_r_31_-form-item"
         >
           <div
             aria-controls="radix-_r_32_"
@@ -1588,6 +1587,7 @@ exports[`renderZodSchema > should render a form unique 1`] = `
             aria-haspopup="dialog"
             class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid disabled:cursor-not-allowed disabled:opacity-50 min-w-[180px]"
             data-state="closed"
+            id="_r_31_-form-item"
             type="button"
           >
             <span
@@ -1739,7 +1739,6 @@ exports[`renders custom forms column_id_array 1`] = `
       aria-describedby="_r_40_-form-item-description"
       aria-invalid="false"
       class="relative"
-      id="_r_40_-form-item"
     >
       <div
         aria-controls="radix-_r_41_"
@@ -1747,6 +1746,7 @@ exports[`renders custom forms column_id_array 1`] = `
         aria-haspopup="dialog"
         class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid disabled:cursor-not-allowed disabled:opacity-50 min-w-[180px]"
         data-state="closed"
+        id="_r_40_-form-item"
         type="button"
       >
         <span
@@ -1789,7 +1789,6 @@ exports[`renders custom forms column_id_dot_array 1`] = `
       aria-describedby="_r_42_-form-item-description"
       aria-invalid="false"
       class="relative"
-      id="_r_42_-form-item"
     >
       <div
         aria-controls="radix-_r_43_"
@@ -1797,6 +1796,7 @@ exports[`renders custom forms column_id_dot_array 1`] = `
         aria-haspopup="dialog"
         class="flex h-6 w-fit mb-1 shadow-xs-solid items-center justify-between rounded-sm border border-input bg-transparent px-2 text-sm font-prose ring-offset-background placeholder:text-muted-foreground hover:shadow-sm-solid focus:outline-hidden focus:ring-1 focus:ring-ring focus:border-primary focus:shadow-md-solid disabled:cursor-not-allowed disabled:opacity-50 min-w-[180px]"
         data-state="closed"
+        id="_r_42_-form-item"
         type="button"
       >
         <span

package/src/utils/sets.ts

@@ -27,4 +27,17 @@ export const Sets = {
     }
     return true;
   },
+
+  /**
+   * Return a new set with `item` toggled — removed if present, added if not.
+   */
+  toggle<T>(set: Set<T>, item: T): Set<T> {
+    const result = new Set(set);
+    if (result.has(item)) {
+      result.delete(item);
+    } else {
+      result.add(item);
+    }
+    return result;
+  },
 };