@agent-native/core 0.90.11 → 0.91.0

package/corpus/templates/content/app/components/editor/database/DatabaseView.tsx

@@ -3525,7 +3525,7 @@ function DatabaseTableView({
 
   async function setSelectedPropertyValue(
     property: DocumentProperty,
-    value: DocumentPropertyValue,
+    operation: DatabaseBulkPropertyValueOperation,
   ) {
     if (selectedItems.length === 0) return;
     const selectedSnapshot = selectedItems;
@@ -3537,7 +3537,7 @@ function DatabaseTableView({
         await setProperty.mutateAsync({
           documentId: item.document.id,
           propertyId: property.definition.id,
-          value,
+          value: databaseBulkPropertyValueForItem(item, property, operation),
         });
         updatedCount += 1;
       } catch {
@@ -3575,6 +3575,7 @@ function DatabaseTableView({
             selectedCount={selectedCount}
             canEdit={canEdit}
             properties={bulkEditableProperties}
+            selectedItems={selectedItems}
             duplicateDisabled={
               isDuplicatingSelected ||
               duplicateItems.isPending ||
@@ -5923,6 +5924,25 @@ function shouldPreselectDetailField(
   return DETAIL_FIELD_NAME_HINTS.some((hint) => key.includes(hint));
 }
 
+function sourceFieldIconType(
+  sourceFieldType: string,
+): DocumentPropertyType | "name" {
+  const normalized = sourceFieldType.trim().toLowerCase();
+  if (normalized === "number") return "number";
+  if (normalized === "datetime" || normalized === "date") return "date";
+  if (normalized === "url") return "url";
+  if (normalized === "boolean" || normalized === "checkbox") return "checkbox";
+  if (
+    normalized === "list" ||
+    normalized === "array" ||
+    normalized === "tags" ||
+    normalized === "multi_select"
+  ) {
+    return "multi_select";
+  }
+  return "text";
+}
+
 function SourceDetailsFieldPicker({
   documentId,
   source,
@@ -6024,31 +6044,37 @@ function SourceDetailsFieldPicker({
         </div>
       ) : (
         <div className="grid min-w-0 gap-1">
-          {fields.map((field) => (
-            <button
-              key={field.id}
-              type="button"
-              className="flex min-w-0 items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              onClick={() => toggleField(field.id)}
-            >
-              <span
-                className={cn(
-                  "flex size-4 shrink-0 items-center justify-center rounded border",
-                  selected.has(field.id)
-                    ? "border-[#2383e2] bg-[#2383e2] text-white"
-                    : "border-muted-foreground/40 text-transparent",
-                )}
+          {fields.map((field) => {
+            const iconType = sourceFieldIconType(field.sourceFieldType);
+            const Icon =
+              iconType === "name" ? IconFileText : TYPE_ICONS[iconType];
+            return (
+              <button
+                key={field.id}
+                type="button"
+                className="flex min-w-0 items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                onClick={() => toggleField(field.id)}
               >
-                <IconCheck className="size-3" />
-              </span>
-              <span className="min-w-0 flex-1 truncate">
-                {field.sourceFieldLabel}
-              </span>
-              <span className="shrink-0 text-[11px] text-muted-foreground">
-                {field.sourceFieldType}
-              </span>
-            </button>
-          ))}
+                <span
+                  className={cn(
+                    "flex size-4 shrink-0 items-center justify-center rounded border",
+                    selected.has(field.id)
+                      ? "border-[#2383e2] bg-[#2383e2] text-white"
+                      : "border-muted-foreground/40 text-transparent",
+                  )}
+                >
+                  <IconCheck className="size-3" />
+                </span>
+                <Icon className="size-3.5 shrink-0 text-muted-foreground" />
+                <span className="min-w-0 flex-1 truncate">
+                  {field.sourceFieldLabel}
+                </span>
+                <span className="shrink-0 text-[11px] text-muted-foreground">
+                  {field.sourceFieldType}
+                </span>
+              </button>
+            );
+          })}
         </div>
       )}
       <div className="flex justify-end gap-2">
@@ -11220,6 +11246,156 @@ function databaseItemPropertyById(
   );
 }
 
+export type DatabaseBulkMultiSelectOperation =
+  | { kind: "multi_select_add"; optionIds: string[] }
+  | { kind: "multi_select_remove"; optionIds: string[] }
+  | {
+      kind: "multi_select_batch";
+      addOptionIds: string[];
+      removeOptionIds: string[];
+    };
+
+export type DatabaseBulkPropertyValueOperation =
+  | { kind: "set"; value: DocumentPropertyValue }
+  | DatabaseBulkMultiSelectOperation;
+
+export function databaseBulkPropertyValueForItem(
+  item: ContentDatabaseItem,
+  property: DocumentProperty,
+  operation: DatabaseBulkPropertyValueOperation,
+): DocumentPropertyValue {
+  if (operation.kind === "set") return operation.value;
+  const itemProperty = databaseItemPropertyById(
+    item,
+    [property],
+    property.definition.id,
+  );
+  return databaseBulkMultiSelectValueAfterOperation(
+    itemProperty?.value ?? null,
+    operation,
+  );
+}
+
+function databaseBulkMultiSelectValue(value: DocumentPropertyValue) {
+  return Array.isArray(value)
+    ? value.filter((item): item is string => typeof item === "string")
+    : [];
+}
+
+export function databaseBulkMultiSelectValueAfterOperation(
+  value: DocumentPropertyValue,
+  operation: DatabaseBulkMultiSelectOperation,
+) {
+  const current = databaseBulkMultiSelectValue(value);
+  const addOptionIds =
+    operation.kind === "multi_select_batch"
+      ? operation.addOptionIds
+      : operation.kind === "multi_select_add"
+        ? operation.optionIds
+        : [];
+  const removeOptionIds =
+    operation.kind === "multi_select_batch"
+      ? operation.removeOptionIds
+      : operation.kind === "multi_select_remove"
+        ? operation.optionIds
+        : [];
+  const removedIds = new Set(removeOptionIds);
+  const kept = current.filter((optionId) => !removedIds.has(optionId));
+  const keptIds = new Set(kept);
+  return [
+    ...kept,
+    ...Array.from(new Set(addOptionIds)).filter(
+      (optionId) => !keptIds.has(optionId),
+    ),
+  ];
+}
+
+export function databaseBulkMultiSelectOptionPresence(
+  items: ContentDatabaseItem[],
+  property: DocumentProperty,
+  optionId: string,
+  operation?: DatabaseBulkMultiSelectOperation,
+) {
+  const values = items.map((item) =>
+    operation
+      ? databaseBulkMultiSelectValueAfterOperation(
+          databaseItemPropertyById(item, [property], property.definition.id)
+            ?.value ?? null,
+          operation,
+        )
+      : databaseBulkMultiSelectValue(
+          databaseItemPropertyById(item, [property], property.definition.id)
+            ?.value ?? null,
+        ),
+  );
+  return {
+    presentInAny: values.some((value) => value.includes(optionId)),
+    presentInAll:
+      values.length > 0 && values.every((value) => value.includes(optionId)),
+  };
+}
+
+export function databaseBulkMultiSelectToggleOperation(
+  items: ContentDatabaseItem[],
+  property: DocumentProperty,
+  optionId: string,
+  operation: DatabaseBulkMultiSelectOperation = {
+    kind: "multi_select_batch",
+    addOptionIds: [],
+    removeOptionIds: [],
+  },
+): DatabaseBulkMultiSelectOperation {
+  const presence = databaseBulkMultiSelectOptionPresence(
+    items,
+    property,
+    optionId,
+    operation,
+  );
+  const addOptionIds =
+    operation.kind === "multi_select_batch"
+      ? new Set(operation.addOptionIds)
+      : operation.kind === "multi_select_add"
+        ? new Set(operation.optionIds)
+        : new Set<string>();
+  const removeOptionIds =
+    operation.kind === "multi_select_batch"
+      ? new Set(operation.removeOptionIds)
+      : operation.kind === "multi_select_remove"
+        ? new Set(operation.optionIds)
+        : new Set<string>();
+  if (presence.presentInAll) {
+    addOptionIds.delete(optionId);
+    removeOptionIds.add(optionId);
+  } else {
+    removeOptionIds.delete(optionId);
+    addOptionIds.add(optionId);
+  }
+  return {
+    kind: "multi_select_batch",
+    addOptionIds: Array.from(addOptionIds),
+    removeOptionIds: Array.from(removeOptionIds),
+  };
+}
+
+function databaseBulkMultiSelectOperationHasChanges(
+  operation: DatabaseBulkMultiSelectOperation,
+) {
+  return operation.kind === "multi_select_batch"
+    ? operation.addOptionIds.length > 0 || operation.removeOptionIds.length > 0
+    : operation.optionIds.length > 0;
+}
+
+export function databaseBulkMultiSelectFilteredOptions(
+  options: DocumentPropertyOption[],
+  query: string,
+) {
+  const normalizedQuery = query.trim().toLowerCase();
+  if (!normalizedQuery) return options;
+  return options.filter((option) =>
+    option.name.trim().toLowerCase().includes(normalizedQuery),
+  );
+}
+
 function databaseTimelineRangeLabel(days: Date[]) {
   const first = days[0] ?? new Date();
   const last = days[days.length - 1] ?? first;
@@ -12022,6 +12198,7 @@ function DatabaseSelectionBar({
   selectedCount,
   canEdit,
   properties,
+  selectedItems,
   duplicateDisabled,
   deleteDisabled,
   updateDisabled,
@@ -12033,13 +12210,14 @@ function DatabaseSelectionBar({
   selectedCount: number;
   canEdit: boolean;
   properties: DocumentProperty[];
+  selectedItems: ContentDatabaseItem[];
   duplicateDisabled: boolean;
   deleteDisabled: boolean;
   updateDisabled: boolean;
   onClearSelection: () => void;
   onSetPropertyValue: (
     property: DocumentProperty,
-    value: DocumentPropertyValue,
+    operation: DatabaseBulkPropertyValueOperation,
   ) => Promise<void>;
   onDuplicateSelected: () => void;
   onDeleteSelected: () => void;
@@ -12055,6 +12233,7 @@ function DatabaseSelectionBar({
             <DatabaseBulkEditPopover
               properties={properties}
               selectedCount={selectedCount}
+              selectedItems={selectedItems}
               disabled={updateDisabled || properties.length === 0}
               onSetPropertyValue={onSetPropertyValue}
             />
@@ -12099,15 +12278,17 @@ function DatabaseSelectionBar({
 function DatabaseBulkEditPopover({
   properties,
   selectedCount,
+  selectedItems,
   disabled,
   onSetPropertyValue,
 }: {
   properties: DocumentProperty[];
   selectedCount: number;
+  selectedItems: ContentDatabaseItem[];
   disabled: boolean;
   onSetPropertyValue: (
     property: DocumentProperty,
-    value: DocumentPropertyValue,
+    operation: DatabaseBulkPropertyValueOperation,
   ) => Promise<void>;
 }) {
   const [open, setOpen] = useState(false);
@@ -12128,9 +12309,9 @@ function DatabaseBulkEditPopover({
 
   async function applyValue(
     property: DocumentProperty,
-    value: DocumentPropertyValue,
+    operation: DatabaseBulkPropertyValueOperation,
   ) {
-    await onSetPropertyValue(property, value);
+    await onSetPropertyValue(property, operation);
     setOpen(false);
   }
 
@@ -12181,6 +12362,7 @@ function DatabaseBulkEditPopover({
               {selectedProperty ? (
                 <DatabaseBulkPropertyValueEditor
                   property={selectedProperty}
+                  selectedItems={selectedItems}
                   disabled={disabled}
                   onApply={(value) => applyValue(selectedProperty, value)}
                   onCancel={() => setOpen(false)}
@@ -12200,13 +12382,15 @@ function DatabaseBulkEditPopover({
 
 function DatabaseBulkPropertyValueEditor({
   property,
+  selectedItems,
   disabled,
   onApply,
   onCancel,
 }: {
   property: DocumentProperty;
+  selectedItems: ContentDatabaseItem[];
   disabled: boolean;
-  onApply: (value: DocumentPropertyValue) => Promise<void>;
+  onApply: (operation: DatabaseBulkPropertyValueOperation) => Promise<void>;
   onCancel: () => void;
 }) {
   const type = property.definition.type;
@@ -12220,7 +12404,7 @@ function DatabaseBulkPropertyValueEditor({
           variant="secondary"
           className="justify-start"
           disabled={disabled}
-          onClick={() => void onApply(true)}
+          onClick={() => void onApply({ kind: "set", value: true })}
         >
           <IconCheck className="mr-1.5 size-3.5" />
           Checked
@@ -12231,7 +12415,7 @@ function DatabaseBulkPropertyValueEditor({
           variant="secondary"
           className="justify-start"
           disabled={disabled}
-          onClick={() => void onApply(false)}
+          onClick={() => void onApply({ kind: "set", value: false })}
         >
           <IconMinus className="mr-1.5 size-3.5" />
           Unchecked
@@ -12242,7 +12426,7 @@ function DatabaseBulkPropertyValueEditor({
           variant="ghost"
           className="justify-start"
           disabled={disabled}
-          onClick={() => void onApply(null)}
+          onClick={() => void onApply({ kind: "set", value: null })}
         >
           {dbText("clearValue")}
         </Button>
@@ -12254,6 +12438,7 @@ function DatabaseBulkPropertyValueEditor({
     return (
       <DatabaseBulkOptionValueEditor
         property={property}
+        selectedItems={selectedItems}
         disabled={disabled}
         onApply={onApply}
         onCancel={onCancel}
@@ -12289,7 +12474,7 @@ function DatabaseBulkScalarValueEditor({
 }: {
   property: DocumentProperty;
   disabled: boolean;
-  onApply: (value: DocumentPropertyValue) => Promise<void>;
+  onApply: (operation: DatabaseBulkPropertyValueOperation) => Promise<void>;
   onCancel: () => void;
 }) {
   const type = property.definition.type;
@@ -12314,7 +12499,7 @@ function DatabaseBulkScalarValueEditor({
       onSubmit={(event) => {
         event.preventDefault();
         if (!valueState.isValid) return;
-        void onApply(valueState.value);
+        void onApply({ kind: "set", value: valueState.value });
       }}
     >
       {type === "date" ? (
@@ -12327,8 +12512,11 @@ function DatabaseBulkScalarValueEditor({
             disabled={disabled}
             onClick={() =>
               void onApply({
-                start: dateInputValueForOffset(new Date(), 0),
-                includeTime: false,
+                kind: "set",
+                value: {
+                  start: dateInputValueForOffset(new Date(), 0),
+                  includeTime: false,
+                },
               })
             }
           >
@@ -12343,8 +12531,11 @@ function DatabaseBulkScalarValueEditor({
             disabled={disabled}
             onClick={() =>
               void onApply({
-                start: dateInputValueForOffset(new Date(), 1),
-                includeTime: false,
+                kind: "set",
+                value: {
+                  start: dateInputValueForOffset(new Date(), 1),
+                  includeTime: false,
+                },
               })
             }
           >
@@ -12378,7 +12569,7 @@ function DatabaseBulkScalarValueEditor({
           variant="ghost"
           size="sm"
           disabled={disabled}
-          onClick={() => void onApply(null)}
+          onClick={() => void onApply({ kind: "set", value: null })}
         >
           Clear
         </Button>
@@ -12403,7 +12594,7 @@ function DatabaseBulkFilesValueEditor({
   onCancel,
 }: {
   disabled: boolean;
-  onApply: (value: DocumentPropertyValue) => Promise<void>;
+  onApply: (operation: DatabaseBulkPropertyValueOperation) => Promise<void>;
   onCancel: () => void;
 }) {
   const [value, setValue] = useState("");
@@ -12414,7 +12605,7 @@ function DatabaseBulkFilesValueEditor({
       onSubmit={(event) => {
         event.preventDefault();
         const items = filesMediaItems(value);
-        void onApply(items.length > 0 ? items : null);
+        void onApply({ kind: "set", value: items.length > 0 ? items : null });
       }}
     >
       <textarea
@@ -12438,7 +12629,7 @@ function DatabaseBulkFilesValueEditor({
           variant="ghost"
           size="sm"
           disabled={disabled}
-          onClick={() => void onApply(null)}
+          onClick={() => void onApply({ kind: "set", value: null })}
         >
           Clear
         </Button>
@@ -12455,18 +12646,35 @@ function DatabaseBulkFilesValueEditor({
 
 function DatabaseBulkOptionValueEditor({
   property,
+  selectedItems,
   disabled,
   onApply,
   onCancel,
 }: {
   property: DocumentProperty;
+  selectedItems: ContentDatabaseItem[];
   disabled: boolean;
-  onApply: (value: DocumentPropertyValue) => Promise<void>;
+  onApply: (operation: DatabaseBulkPropertyValueOperation) => Promise<void>;
   onCancel: () => void;
 }) {
   const options = property.definition.options.options ?? [];
-  const [selectedIds, setSelectedIds] = useState<string[]>([]);
   const multi = property.definition.type === "multi_select";
+  const selectedItemsKey = selectedItems.map((item) => item.id).join("|");
+  const [pendingMultiSelectOperation, setPendingMultiSelectOperation] =
+    useState<DatabaseBulkMultiSelectOperation>({
+      kind: "multi_select_batch",
+      addOptionIds: [],
+      removeOptionIds: [],
+    });
+  const [optionSearchQuery, setOptionSearchQuery] = useState("");
+
+  useEffect(() => {
+    setPendingMultiSelectOperation({
+      kind: "multi_select_batch",
+      addOptionIds: [],
+      removeOptionIds: [],
+    });
+  }, [property.definition.id, selectedItemsKey]);
 
   if (options.length === 0) {
     return (
@@ -12474,68 +12682,130 @@ function DatabaseBulkOptionValueEditor({
         <div className="rounded bg-muted/40 px-2 py-3 text-sm text-muted-foreground">
           {dbText("thisPropertyHasNoOptionsYet")}
         </div>
-        <Button
-          type="button"
-          size="sm"
-          variant="ghost"
-          className="justify-start"
-          disabled={disabled}
-          onClick={() => void onApply(multi ? [] : null)}
-        >
-          {dbText("clearValue")}
-        </Button>
+        {multi ? (
+          <Button
+            type="button"
+            size="sm"
+            variant="ghost"
+            className="justify-start"
+            onClick={onCancel}
+          >
+            Cancel
+          </Button>
+        ) : (
+          <Button
+            type="button"
+            size="sm"
+            variant="ghost"
+            className="justify-start"
+            disabled={disabled}
+            onClick={() => void onApply({ kind: "set", value: null })}
+          >
+            {dbText("clearValue")}
+          </Button>
+        )}
       </div>
     );
   }
 
   if (multi) {
+    const hasPendingChanges = databaseBulkMultiSelectOperationHasChanges(
+      pendingMultiSelectOperation,
+    );
+    const filteredOptions = databaseBulkMultiSelectFilteredOptions(
+      options,
+      optionSearchQuery,
+    );
     return (
       <div className="grid gap-2">
+        <div className="flex h-8 items-center gap-1 rounded border border-border bg-background px-2">
+          <IconSearch className="size-3.5 shrink-0 text-muted-foreground" />
+          <Input
+            autoFocus
+            value={optionSearchQuery}
+            placeholder={dbText("searchOptions")}
+            aria-label={`Search ${property.definition.name} options`}
+            className="h-7 border-0 bg-transparent px-0 text-xs shadow-none focus-visible:ring-0"
+            onChange={(event) => setOptionSearchQuery(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key === "Escape") {
+                event.preventDefault();
+                if (optionSearchQuery) {
+                  setOptionSearchQuery("");
+                } else {
+                  onCancel();
+                }
+              }
+            }}
+          />
+        </div>
         <div className="max-h-52 overflow-auto">
-          {options.map((option) => {
-            const checked = selectedIds.includes(option.id);
+          {filteredOptions.length === 0 ? (
+            <div className="rounded px-2 py-3 text-sm text-muted-foreground">
+              {dbText("noMatchingOptions")}
+            </div>
+          ) : null}
+          {filteredOptions.map((option) => {
+            const presence = databaseBulkMultiSelectOptionPresence(
+              selectedItems,
+              property,
+              option.id,
+              pendingMultiSelectOperation,
+            );
             return (
               <button
                 key={option.id}
                 type="button"
-                className="flex w-full items-center justify-between gap-2 rounded px-2 py-1.5 text-left text-sm hover:bg-accent"
+                aria-pressed={presence.presentInAll}
+                aria-label={`${
+                  presence.presentInAll ? "Remove" : "Add"
+                } ${option.name} for selected rows`}
+                className="flex w-full items-center justify-between gap-2 rounded px-2 py-1.5 text-left text-sm hover:bg-accent disabled:opacity-50"
+                disabled={disabled}
                 onClick={() =>
-                  setSelectedIds((current) =>
-                    current.includes(option.id)
-                      ? current.filter((id) => id !== option.id)
-                      : [...current, option.id],
+                  setPendingMultiSelectOperation((current) =>
+                    databaseBulkMultiSelectToggleOperation(
+                      selectedItems,
+                      property,
+                      option.id,
+                      current,
+                    ),
                   )
                 }
               >
                 <DatabaseBulkOptionPill option={option} />
-                {checked ? (
-                  <IconCheck className="size-4 text-muted-foreground" />
+                {presence.presentInAll ? (
+                  <IconCheck className="size-4 shrink-0 text-muted-foreground" />
+                ) : presence.presentInAny ? (
+                  <IconMinus className="size-4 shrink-0 text-muted-foreground" />
                 ) : null}
               </button>
             );
           })}
         </div>
-        <div className="flex justify-end gap-2">
+        <div className="flex items-center justify-between gap-2">
           <Button
             type="button"
             variant="ghost"
             size="sm"
             disabled={disabled}
-            onClick={() => void onApply([])}
-          >
-            Clear
-          </Button>
-          <Button type="button" variant="ghost" size="sm" onClick={onCancel}>
-            Cancel
-          </Button>
-          <Button
-            type="button"
-            size="sm"
-            disabled={disabled}
-            onClick={() => void onApply(selectedIds)}
+            onClick={() => void onApply({ kind: "set", value: [] })}
           >
-            Apply
+            {dbText("clearValue")}
           </Button>
+          <div className="flex justify-end gap-2">
+            <Button type="button" variant="ghost" size="sm" onClick={onCancel}>
+              Cancel
+            </Button>
+            <Button
+              type="button"
+              size="sm"
+              disabled={disabled || !hasPendingChanges}
+              onClick={() => void onApply(pendingMultiSelectOperation)}
+            >
+              Apply
+            </Button>
+          </div>
         </div>
       </div>
     );
@@ -12550,7 +12820,7 @@ function DatabaseBulkOptionValueEditor({
             type="button"
             className="flex w-full items-center rounded px-2 py-1.5 text-left text-sm hover:bg-accent disabled:opacity-50"
             disabled={disabled}
-            onClick={() => void onApply(option.id)}
+            onClick={() => void onApply({ kind: "set", value: option.id })}
           >
             <DatabaseBulkOptionPill option={option} />
           </button>
@@ -12562,7 +12832,7 @@ function DatabaseBulkOptionValueEditor({
         variant="ghost"
         className="justify-start"
         disabled={disabled}
-        onClick={() => void onApply(null)}
+        onClick={() => void onApply({ kind: "set", value: null })}
       >
         {dbText("clearValue")}
       </Button>
@@ -14557,6 +14827,7 @@ function DatabaseTableRow({
           item.properties.find(
             (candidate) => candidate.definition.id === property.definition.id,
           ) ?? property;
+
         const value = (
           <div
             className={cn(