@manta-eu/react 0.12.0 → 0.13.0

package/src/routes/memories/schemas/SchemaEditorForm.tsx

@@ -0,0 +1,990 @@
+import { GQLMemorySchemaValueType } from "@manta-eu/client";
+import { isPresent } from "@manta-eu/lib/present";
+import { ArrowDown, ArrowUp, Check, Ellipsis, GripVertical, Pencil, Plus, Trash2 } from "lucide-react";
+import { useEffect, useRef, useState, type ReactNode } from "react";
+import { DateValueInput } from "../components/DateValueInput";
+import { FieldLabel } from "../components/FieldLabel";
+import { importanceLabel, importanceSteps } from "../components/ImportanceSlider";
+import { AllowedValuesField, escapeClearsTypedValue } from "./AllowedValuesField";
+import {
+  emptyPropertyForm,
+  hasErrorsUnder,
+  kindLabels,
+  loadPatternCheck,
+  memorySchemaPropertyLimit,
+  moveItem,
+  propertyErrorPrefix,
+  propertyFormErrors,
+  propertySettings,
+  propertyTags,
+  withValueType,
+  scopeLabels,
+  volatilityLabels,
+  type SchemaForm,
+  type SchemaFormErrors,
+  type SchemaPropertyForm,
+  valueTypeLabels,
+} from "./schema-form";
+import { ValueTypeSelect } from "./ValueTypeSelect";
+import { Banner } from "#components/banner/index";
+import { Button } from "#components/button/index";
+import { Dropdown, DropdownContent, DropdownItem, DropdownTrigger } from "#components/dropdown/index";
+import { Input, Textarea } from "#components/input/index";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "#components/select/index";
+import {
+  Sheet,
+  SheetBody,
+  SheetContent,
+  SheetDescription,
+  SheetFooter,
+  SheetHeader,
+  SheetTitle,
+} from "#components/sheet/index";
+import { Switch } from "#components/switch/index";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "#components/tooltip/index";
+import { cn } from "#lib/utils";
+
+const unsetValue = "unset";
+
+type ChoiceSelectProps<T extends string> = {
+  id: string;
+  label: string;
+  hint?: string;
+  value: T | null;
+  choices: readonly { value: T; label: string }[];
+  onChange: (value: T | null) => void;
+  error?: string;
+  disabled?: boolean;
+};
+
+function ChoiceSelect<T extends string>(props: ChoiceSelectProps<T>) {
+  const { id, label, hint, value, choices, onChange, error, disabled } = props;
+  return (
+    <div className="flex flex-col gap-1.5">
+      {hint ? (
+        <FieldLabel label={label} hint={hint} htmlFor={id} />
+      ) : (
+        <label htmlFor={id} className="typography-small">
+          {label}
+        </label>
+      )}
+      <Select
+        value={value ?? unsetValue}
+        disabled={disabled}
+        onValueChange={(next) =>
+          onChange(next === unsetValue ? null : (choices.find((c) => c.value === next)?.value ?? null))
+        }
+      >
+        <SelectTrigger label={label} id={id} hiddenLabel error={error}>
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectItem value={unsetValue}>Not set</SelectItem>
+          {choices.map((choice) => (
+            <SelectItem key={choice.value} value={choice.value}>
+              {choice.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      {error && <p className="typography-small text-error-foreground">{error}</p>}
+    </div>
+  );
+}
+
+function choicesOf<T extends string>(labels: Record<T, string>) {
+  return (Object.entries(labels) as [T, string][]).map(([value, label]) => ({ value, label }));
+}
+
+const kindChoices = choicesOf(kindLabels);
+const volatilityChoices = choicesOf(volatilityLabels);
+const scopeChoices = choicesOf(scopeLabels);
+
+const importanceChoices = importanceSteps.map((step) => ({ value: String(step), label: importanceLabel(step) }));
+
+type ActionTooltipProps = { label: string; children: ReactNode };
+
+function ActionTooltip(props: ActionTooltipProps) {
+  const { label, children } = props;
+  return (
+    <TooltipProvider delayDuration={300}>
+      <Tooltip>
+        <TooltipTrigger asChild>{children}</TooltipTrigger>
+        <TooltipContent side="top" className="max-w-xs text-left typography-small">
+          {label}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+
+const propertyHints = {
+  label: "The name people and the agent see for this property.",
+  type: "What kind of value this property holds. It decides which constraints you can set. A linked record points to something already in your data, such as a campaign or an ad account, so rules can follow the link.",
+  key: "Names the property in the knowledge graph. It cannot change once saved.",
+  description: "Explains what to record here, for the people and the agent filling it in.",
+  required: "A memory of this schema cannot be saved without a value here.",
+  multiValued: "One memory can hold several values, such as several channels.",
+  keyProperty:
+    "A new memory replaces an old one when both have the same value here. Use it for what the memory is about, like a target's metric.",
+  computed: "A Datalog rule fills this in. Nobody writes it by hand, and chat extraction never sets it.",
+  options:
+    "Leave empty to accept any text. Add values to accept only those. Click a value to set how it is shown and what it means.",
+  minValue: "The smallest value accepted, inclusive.",
+  maxValue: "The largest value accepted, inclusive.",
+  unit: "Shown next to the value, such as EUR. It does not convert anything.",
+  maxLength: "The most characters a value can have.",
+  pattern: "A regular expression every value must match, such as ^[A-Z]{3}$.",
+  entityClass:
+    "The class IRI of the records that can be linked, such as a campaign class. Leave it empty to allow any record.",
+  defaultValue: "Used when a memory gives no value for this property.",
+};
+
+const shownPropertyFields = [
+  "label",
+  "key",
+  "description",
+  "valueType",
+  "entityClass",
+  "required",
+  "keyProperty",
+  "minValue",
+  "maxValue",
+  "maxLength",
+  "pattern",
+  "defaultValue",
+  "unit",
+  "options",
+];
+
+function otherPropertyErrors(errors: SchemaFormErrors, prefix: string): string[] {
+  return [...errors.entries()]
+    .filter(([field]) => field.startsWith(`${prefix}.`))
+    .filter(([field]) => {
+      const rest = field.slice(prefix.length + 1);
+      return !shownPropertyFields.some((shown) => rest === shown || rest.startsWith("options."));
+    })
+    .map(([, message]) => message);
+}
+
+const dateTypes: readonly GQLMemorySchemaValueType[] = [
+  GQLMemorySchemaValueType.Date,
+  GQLMemorySchemaValueType.DateTime,
+];
+
+type ValueFieldProps = {
+  id: string;
+  label: string;
+  hint: string;
+  valueType: GQLMemorySchemaValueType;
+  value: string;
+  placeholder?: string;
+  error?: string;
+  disabled?: boolean;
+  onChange: (value: string) => void;
+};
+
+function BoundOrDefaultField(props: ValueFieldProps) {
+  const { id, label, hint, valueType, value, placeholder, error, disabled, onChange } = props;
+  if (dateTypes.includes(valueType)) {
+    return (
+      <div className={cn("flex flex-col gap-1.5", valueType === GQLMemorySchemaValueType.DateTime && "sm:col-span-2")}>
+        <FieldLabel label={label} hint={hint} htmlFor={id} />
+        <DateValueInput
+          id={id}
+          label={label}
+          withTime={valueType === GQLMemorySchemaValueType.DateTime}
+          placeholder="Not set"
+          value={value}
+          error={error}
+          disabled={disabled}
+          onChange={onChange}
+        />
+      </div>
+    );
+  }
+  const isNumber = valueType === GQLMemorySchemaValueType.Integer || valueType === GQLMemorySchemaValueType.Decimal;
+  return (
+    <Input
+      id={id}
+      label={label}
+      description={hint}
+      descriptionInLabelTooltip
+      type={isNumber ? "number" : "text"}
+      step={valueType === GQLMemorySchemaValueType.Decimal ? "any" : undefined}
+      placeholder={placeholder}
+      value={value}
+      disabled={disabled}
+      error={error}
+      onChange={(e) => onChange(e.target.value)}
+    />
+  );
+}
+
+function defaultValueChoices(property: SchemaPropertyForm): { value: string; label: string }[] | null {
+  const choices =
+    property.valueType === GQLMemorySchemaValueType.Boolean
+      ? [
+          { value: "true", label: "Yes" },
+          { value: "false", label: "No" },
+        ]
+      : propertySettings(property.valueType).options && isPresent(property.options)
+        ? property.options
+            .map((option) => ({ value: option.value.trim(), label: option.label.trim() || option.value.trim() }))
+            .filter(
+              (choice, index, all) =>
+                isPresent(choice.value) && all.findIndex((c) => c.value === choice.value) === index,
+            )
+        : null;
+  if (choices === null) return null;
+  const current = property.defaultValue.trim();
+  return isPresent(current) && !choices.some((choice) => choice.value === current)
+    ? [...choices, { value: current, label: `${current} (not allowed)` }]
+    : choices;
+}
+
+type RuleChipProps = {
+  label: string;
+  hint: string;
+  pressed: boolean;
+  unavailable?: string | null;
+  disabled?: boolean;
+  onToggle: () => void;
+};
+
+function RuleChip(props: RuleChipProps) {
+  const { label, hint, pressed, unavailable, disabled, onToggle } = props;
+  const blocked = isPresent(unavailable) || disabled === true;
+  return (
+    <ActionTooltip label={isPresent(unavailable) ? `${hint} ${unavailable}` : hint}>
+      <button
+        type="button"
+        aria-pressed={pressed}
+        aria-disabled={blocked ? true : undefined}
+        onClick={() => {
+          if (!blocked) onToggle();
+        }}
+        className={cn(
+          "inline-flex h-8 items-center gap-1.5 rounded-full px-3.5 typography-small transition-colors",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-active-border/50",
+          pressed
+            ? "bg-primary text-primary-foreground"
+            : "border border-input-border text-default-foreground hover:bg-faint",
+          blocked && !pressed && "cursor-not-allowed border-dashed text-muted-foreground hover:bg-transparent",
+          blocked && pressed && "cursor-not-allowed opacity-60",
+        )}
+      >
+        {pressed && <Check className="size-3.5" aria-hidden />}
+        {label}
+      </button>
+    </ActionTooltip>
+  );
+}
+
+type PropertyFieldsProps = {
+  property: SchemaPropertyForm;
+  prefix: string;
+  errors: SchemaFormErrors;
+  disabled?: boolean;
+  onChange: (property: SchemaPropertyForm) => void;
+};
+
+function PropertyFields(props: PropertyFieldsProps) {
+  const { property, prefix, errors, disabled, onChange } = props;
+  const settings = propertySettings(property.valueType);
+  function set(patch: Partial<SchemaPropertyForm>) {
+    onChange({ ...property, ...patch });
+  }
+  function fieldId(name: string) {
+    return `schema-property-${property.id}-${name}`;
+  }
+  const extraErrors = otherPropertyErrors(errors, prefix);
+  const defaultChoices = defaultValueChoices(property);
+  const ruleErrors = [errors.get(`${prefix}.required`), errors.get(`${prefix}.keyProperty`)].filter(isPresent);
+  const keyUnavailable = !settings.keyProperty
+    ? "Long text cannot identify a memory."
+    : property.multiValued
+      ? "A list of values cannot identify a memory."
+      : property.computed
+        ? "A computed property cannot identify a memory."
+        : null;
+
+  return (
+    <div className="flex flex-col gap-5">
+      <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+        <Input
+          id={fieldId("label")}
+          label="Label"
+          description={propertyHints.label}
+          descriptionInLabelTooltip
+          placeholder="e.g. Channel"
+          value={property.label}
+          disabled={disabled}
+          error={errors.get(`${prefix}.label`)}
+          onChange={(e) => set({ label: e.target.value })}
+        />
+        <div className="flex flex-col gap-1.5">
+          <FieldLabel label="Type" hint={propertyHints.type} htmlFor={fieldId("type")} />
+          <ValueTypeSelect
+            id={fieldId("type")}
+            label="Type"
+            value={property.valueType}
+            disabled={disabled}
+            error={errors.get(`${prefix}.valueType`)}
+            onChange={(valueType) => onChange(withValueType(property, valueType))}
+          />
+        </div>
+        {settings.unit && (
+          <Input
+            id={fieldId("unit")}
+            label="Unit"
+            description={propertyHints.unit}
+            descriptionInLabelTooltip
+            placeholder="e.g. EUR"
+            value={property.unit}
+            disabled={disabled}
+            error={errors.get(`${prefix}.unit`)}
+            onChange={(e) => set({ unit: e.target.value })}
+          />
+        )}
+        {settings.entityClass && (
+          <Input
+            id={fieldId("entity-class")}
+            label="Record type"
+            description={propertyHints.entityClass}
+            descriptionInLabelTooltip
+            placeholder="Any record"
+            containerClassName="sm:col-span-2"
+            value={property.entityClass}
+            disabled={disabled}
+            error={errors.get(`${prefix}.entityClass`)}
+            onChange={(e) => set({ entityClass: e.target.value })}
+          />
+        )}
+      </div>
+
+      {property.path === null && (
+        <Input
+          id={fieldId("key")}
+          label="Key"
+          placeholder="Generated from the label"
+          description={propertyHints.key}
+          descriptionInLabelTooltip
+          value={property.key}
+          disabled={disabled}
+          error={errors.get(`${prefix}.key`)}
+          onChange={(e) => set({ key: e.target.value })}
+        />
+      )}
+
+      <Textarea
+        id={fieldId("description")}
+        label="Description"
+        description={propertyHints.description}
+        descriptionInLabelTooltip
+        placeholder="What this property records (optional)"
+        value={property.description}
+        minRows={2}
+        maxRows={5}
+        disabled={disabled}
+        error={errors.get(`${prefix}.description`)}
+        onChange={(e) => set({ description: e.target.value })}
+      />
+
+      <div className="flex flex-col gap-2">
+        <span id={fieldId("rules")} className="typography-small">
+          Rules
+        </span>
+        <div role="group" aria-labelledby={fieldId("rules")} className="flex flex-wrap gap-2">
+          <RuleChip
+            label="Required"
+            hint={propertyHints.required}
+            pressed={property.required && !property.computed}
+            unavailable={property.computed ? "A computed property is never required." : null}
+            disabled={disabled}
+            onToggle={() => set({ required: !property.required })}
+          />
+          <RuleChip
+            label="List of values"
+            hint={propertyHints.multiValued}
+            pressed={property.multiValued}
+            disabled={disabled}
+            onToggle={() => set({ multiValued: !property.multiValued })}
+          />
+          <RuleChip
+            label="Identifies the memory"
+            hint={propertyHints.keyProperty}
+            pressed={property.keyProperty && keyUnavailable === null}
+            unavailable={keyUnavailable}
+            disabled={disabled}
+            onToggle={() => set({ keyProperty: !property.keyProperty })}
+          />
+          <RuleChip
+            label="Computed by a rule"
+            hint={propertyHints.computed}
+            pressed={property.computed}
+            disabled={disabled}
+            onToggle={() => set({ computed: !property.computed })}
+          />
+        </div>
+        {ruleErrors.map((message) => (
+          <p key={message} className="typography-small text-error-foreground">
+            {message}
+          </p>
+        ))}
+      </div>
+
+      {settings.options && (
+        <AllowedValuesField
+          id={fieldId("options")}
+          hint={propertyHints.options}
+          options={property.options}
+          prefix={prefix}
+          errors={errors}
+          disabled={disabled}
+          onChange={(options) => set({ options })}
+        />
+      )}
+
+      {(settings.bounds || settings.maxLength || settings.pattern) && (
+        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2">
+          {settings.bounds && (
+            <>
+              <BoundOrDefaultField
+                id={fieldId("min")}
+                label="Minimum"
+                hint={propertyHints.minValue}
+                valueType={property.valueType}
+                placeholder="No minimum"
+                value={property.minValue}
+                disabled={disabled}
+                error={errors.get(`${prefix}.minValue`)}
+                onChange={(minValue) => set({ minValue })}
+              />
+              <BoundOrDefaultField
+                id={fieldId("max")}
+                label="Maximum"
+                hint={propertyHints.maxValue}
+                valueType={property.valueType}
+                placeholder="No maximum"
+                value={property.maxValue}
+                disabled={disabled}
+                error={errors.get(`${prefix}.maxValue`)}
+                onChange={(maxValue) => set({ maxValue })}
+              />
+            </>
+          )}
+          {settings.maxLength && (
+            <Input
+              id={fieldId("max-length")}
+              label="Maximum length"
+              description={propertyHints.maxLength}
+              descriptionInLabelTooltip
+              inputMode="numeric"
+              placeholder="No limit"
+              value={property.maxLength}
+              disabled={disabled}
+              error={errors.get(`${prefix}.maxLength`)}
+              onChange={(e) => set({ maxLength: e.target.value })}
+            />
+          )}
+          {settings.pattern && (
+            <Input
+              id={fieldId("pattern")}
+              label="Pattern"
+              description={propertyHints.pattern}
+              descriptionInLabelTooltip
+              placeholder="Any"
+              value={property.pattern}
+              disabled={disabled}
+              error={errors.get(`${prefix}.pattern`)}
+              onChange={(e) => set({ pattern: e.target.value })}
+            />
+          )}
+        </div>
+      )}
+
+      {!property.computed && defaultChoices !== null && (
+        <ChoiceSelect
+          id={fieldId("default")}
+          label="Default value"
+          hint={propertyHints.defaultValue}
+          value={isPresent(property.defaultValue.trim()) ? property.defaultValue.trim() : null}
+          choices={defaultChoices}
+          disabled={disabled}
+          error={errors.get(`${prefix}.defaultValue`)}
+          onChange={(defaultValue) => set({ defaultValue: defaultValue ?? "" })}
+        />
+      )}
+
+      {!property.computed && defaultChoices === null && (
+        <BoundOrDefaultField
+          id={fieldId("default")}
+          label="Default value"
+          hint={propertyHints.defaultValue}
+          valueType={property.valueType}
+          placeholder="None"
+          value={property.defaultValue}
+          disabled={disabled}
+          error={errors.get(`${prefix}.defaultValue`)}
+          onChange={(defaultValue) => set({ defaultValue })}
+        />
+      )}
+
+      {extraErrors.map((message) => (
+        <p key={message} className="typography-small text-error-foreground">
+          {message}
+        </p>
+      ))}
+    </div>
+  );
+}
+
+// A drag only ever moves a property row, so text dragged into an input still lands there.
+type PropertyDrag = {
+  active: boolean;
+  isDragging: boolean;
+  isDropTarget: boolean;
+  onStart: () => void;
+  onOver: () => void;
+  onDrop: () => void;
+  onEnd: () => void;
+};
+
+type PropertyRowProps = {
+  property: SchemaPropertyForm;
+  index: number;
+  count: number;
+  hasErrors: boolean;
+  disabled?: boolean;
+  onEdit: () => void;
+  onRemove: () => void;
+  onMove: (to: number) => void;
+  drag: PropertyDrag;
+};
+
+function PropertyRow(props: PropertyRowProps) {
+  const { property, index, count, hasErrors, disabled, onEdit, onRemove, onMove, drag } = props;
+  const rowRef = useRef<HTMLDivElement>(null);
+  const name = property.label || `Property ${index + 1}`;
+
+  return (
+    <div
+      ref={rowRef}
+      role="group"
+      aria-label={name}
+      className={cn(
+        "relative flex items-center gap-3 border-b border-muted-border px-3 py-2.5 transition-colors last:border-0",
+        !disabled && "hover:bg-faint",
+        hasErrors && "bg-error/40",
+        drag.isDragging && "opacity-50",
+        drag.isDropTarget && "ring-2 ring-inset ring-active-border/50",
+      )}
+      onDragOver={(event) => {
+        if (!drag.active) return;
+        event.preventDefault();
+        drag.onOver();
+      }}
+      onDrop={(event) => {
+        if (!drag.active) return;
+        event.preventDefault();
+        drag.onDrop();
+      }}
+    >
+      <span
+        draggable={!disabled}
+        title="Drag to reorder"
+        className={cn("relative z-10 text-muted-foreground", disabled ? "cursor-not-allowed" : "cursor-grab")}
+        onDragStart={(event) => {
+          event.dataTransfer.effectAllowed = "move";
+          event.dataTransfer.setData("text/plain", property.id);
+          if (rowRef.current) event.dataTransfer.setDragImage(rowRef.current, 16, 16);
+          drag.onStart();
+        }}
+        onDragEnd={drag.onEnd}
+      >
+        <GripVertical className="size-4" aria-hidden />
+      </span>
+      <button
+        type="button"
+        aria-label={`Edit property ${name}`}
+        className={cn(
+          "flex min-w-0 flex-1 flex-col items-start gap-0.5 text-left focus-visible:outline-none",
+          "after:absolute after:inset-0 after:content-[''] focus-visible:after:ring-2 focus-visible:after:ring-inset focus-visible:after:ring-active-border/50",
+          !disabled && "cursor-pointer",
+        )}
+        disabled={disabled}
+        onClick={onEdit}
+      >
+        <span
+          className={cn(
+            "max-w-full truncate typography-small-medium",
+            property.label ? "text-default-foreground" : "text-muted-foreground",
+          )}
+        >
+          {name}
+        </span>
+        {hasErrors ? (
+          <span className="typography-tiny text-error-foreground">Needs attention</span>
+        ) : (
+          property.description && (
+            <span className="max-w-full truncate typography-tiny text-muted-foreground">{property.description}</span>
+          )
+        )}
+      </button>
+      <span className="hidden shrink-0 typography-small text-muted-foreground sm:inline">
+        {valueTypeLabels[property.valueType]}
+      </span>
+      <div className="hidden shrink-0 flex-wrap justify-end gap-1 md:flex">
+        {propertyTags(property).map((tag) => (
+          <span key={tag} className="rounded-full bg-muted px-2 py-0.5 typography-tiny text-default-foreground">
+            {tag}
+          </span>
+        ))}
+      </div>
+      <Dropdown>
+        <ActionTooltip label="More actions">
+          <DropdownTrigger asChild>
+            <Button
+              type="button"
+              variant="tertiary"
+              size="sm"
+              iconOnly
+              icon={Ellipsis}
+              aria-label={`More actions for ${name}`}
+              disabled={disabled}
+              className="relative z-10"
+            />
+          </DropdownTrigger>
+        </ActionTooltip>
+        <DropdownContent align="end">
+          <DropdownItem icon={<Pencil className="size-4" />} onSelect={onEdit}>
+            Edit
+          </DropdownItem>
+          <DropdownItem icon={<ArrowUp className="size-4" />} disabled={index === 0} onSelect={() => onMove(index - 1)}>
+            Move up
+          </DropdownItem>
+          <DropdownItem
+            icon={<ArrowDown className="size-4" />}
+            disabled={index === count - 1}
+            onSelect={() => onMove(index + 1)}
+          >
+            Move down
+          </DropdownItem>
+          <DropdownItem icon={<Trash2 className="size-4" />} className="text-error-foreground" onSelect={onRemove}>
+            Remove
+          </DropdownItem>
+        </DropdownContent>
+      </Dropdown>
+    </div>
+  );
+}
+
+type PropertyDraft = { index: number | null; property: SchemaPropertyForm; original: SchemaPropertyForm };
+
+type PropertySheetProps = {
+  draft: PropertyDraft | null;
+  siblings: readonly SchemaPropertyForm[];
+  errors: SchemaFormErrors;
+  disabled?: boolean;
+  onChange: (property: SchemaPropertyForm) => void;
+  onDone: () => void;
+  onCancel: () => void;
+};
+
+function PropertySheet(props: PropertySheetProps) {
+  const { draft, siblings, errors, disabled, onChange, onDone, onCancel } = props;
+  const isNew = draft?.index === null;
+  const [confirmingDiscard, setConfirmingDiscard] = useState(false);
+  const [triedDone, setTriedDone] = useState(false);
+  const prefix = propertyErrorPrefix(draft?.index ?? -1);
+  const draftErrors = draft ? propertyFormErrors(draft.property, prefix, siblings) : new Map<string, string>();
+  const shownErrors = triedDone ? draftErrors : errors;
+  const isDirty = draft !== null && JSON.stringify(draft.property) !== JSON.stringify(draft.original);
+
+  function close(next: () => void) {
+    setConfirmingDiscard(false);
+    setTriedDone(false);
+    next();
+  }
+  function requestDone() {
+    if (draftErrors.size > 0) setTriedDone(true);
+    else close(onDone);
+  }
+  function requestCancel() {
+    if (isDirty && !disabled) setConfirmingDiscard(true);
+    else close(onCancel);
+  }
+
+  return (
+    <Sheet open={draft !== null} onOpenChange={(open) => !open && requestCancel()}>
+      <SheetContent
+        side="right"
+        className="w-full sm:w-[560px]"
+        onEscapeKeyDown={(event) => {
+          if (escapeClearsTypedValue(event)) event.preventDefault();
+        }}
+        onOpenAutoFocus={(event) => {
+          if (!draft) return;
+          event.preventDefault();
+          document.getElementById(`schema-property-${draft.property.id}-label`)?.focus();
+        }}
+      >
+        <SheetHeader>
+          <SheetTitle text={isNew ? "Add property" : "Edit property"} />
+          <SheetDescription>
+            {isNew ? "Describe one field memories of this schema record." : "Changes apply when you save the schema."}
+          </SheetDescription>
+        </SheetHeader>
+        <SheetBody className="-mx-6 px-6">
+          {triedDone && draftErrors.size > 0 && (
+            <Banner label="Fix the highlighted fields to keep this property." className="mb-4" />
+          )}
+          {draft && (
+            <PropertyFields
+              property={draft.property}
+              prefix={prefix}
+              errors={shownErrors}
+              disabled={disabled}
+              onChange={onChange}
+            />
+          )}
+        </SheetBody>
+        <SheetFooter>
+          {confirmingDiscard ? (
+            <>
+              <p className="mr-auto typography-small text-muted-foreground">Discard unsaved changes?</p>
+              <Button type="button" variant="tertiary" onClick={() => setConfirmingDiscard(false)}>
+                Keep editing
+              </Button>
+              <Button type="button" variant="destructive" onClick={() => close(onCancel)}>
+                Discard
+              </Button>
+            </>
+          ) : (
+            <>
+              <Button type="button" variant="tertiary" onClick={requestCancel}>
+                Cancel
+              </Button>
+              <Button type="button" onClick={requestDone} disabled={disabled}>
+                {isNew ? "Add property" : "Done"}
+              </Button>
+            </>
+          )}
+        </SheetFooter>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+export type SchemaEditorFormProps = {
+  form: SchemaForm;
+  errors: SchemaFormErrors;
+  isNew: boolean;
+  disabled?: boolean;
+  onChange: (form: SchemaForm) => void;
+};
+
+export function SchemaEditorForm(props: SchemaEditorFormProps) {
+  const { form, errors, isNew, disabled, onChange } = props;
+  function set(patch: Partial<SchemaForm>) {
+    onChange({ ...form, ...patch });
+  }
+  function setProperties(properties: SchemaPropertyForm[]) {
+    set({ properties });
+  }
+  const [draft, setDraft] = useState<PropertyDraft | null>(null);
+  const [dragged, setDragged] = useState<number | null>(null);
+  useEffect(() => {
+    loadPatternCheck().catch((error: unknown) => console.warn("The pattern check could not load", error));
+  }, []);
+  const [dragOver, setDragOver] = useState<number | null>(null);
+  function endDrag() {
+    setDragged(null);
+    setDragOver(null);
+  }
+  function commitDraft() {
+    if (!draft) return;
+    setProperties(
+      draft.index === null
+        ? [...form.properties, draft.property]
+        : form.properties.map((p, i) => (i === draft.index ? draft.property : p)),
+    );
+    setDraft(null);
+  }
+
+  return (
+    <div className="flex flex-col gap-6">
+      <section className="flex flex-col gap-3 rounded-xl border border-muted-border bg-card p-5">
+        <h3 className="typography-small-medium text-default-foreground">Schema</h3>
+        <Input
+          id="schema-label"
+          label="Name"
+          placeholder="e.g. Campaign brief"
+          value={form.label}
+          disabled={disabled}
+          error={errors.get("label")}
+          onChange={(e) => set({ label: e.target.value })}
+        />
+        {isNew && (
+          <Input
+            id="schema-key"
+            label="Key"
+            placeholder="Generated from the name"
+            helperText="Names the schema in the knowledge graph. It cannot change once saved."
+            value={form.key}
+            disabled={disabled}
+            error={errors.get("key")}
+            onChange={(e) => set({ key: e.target.value })}
+          />
+        )}
+        <Textarea
+          id="schema-description"
+          label="Description"
+          placeholder="What kind of memory this is"
+          value={form.description}
+          minRows={2}
+          maxRows={6}
+          disabled={disabled}
+          error={errors.get("description")}
+          onChange={(e) => set({ description: e.target.value })}
+        />
+      </section>
+
+      <section className="flex flex-col gap-3 rounded-xl border border-muted-border bg-card p-5">
+        <div className="flex flex-col gap-0.5">
+          <h3 className="typography-small-medium text-default-foreground">Defaults for new memories</h3>
+          <p className="typography-small text-muted-foreground">
+            Applied to new memories of this schema that leave them unset; each memory can change them.
+          </p>
+        </div>
+        <div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-4">
+          <ChoiceSelect
+            id="schema-default-kind"
+            label="Kind"
+            value={form.defaultMemoryKind}
+            choices={kindChoices}
+            disabled={disabled}
+            error={errors.get("defaultMemoryKind")}
+            onChange={(defaultMemoryKind) => set({ defaultMemoryKind })}
+          />
+          <ChoiceSelect
+            id="schema-default-importance"
+            label="Importance"
+            value={form.defaultImportance != null ? String(form.defaultImportance) : null}
+            choices={importanceChoices}
+            disabled={disabled}
+            error={errors.get("defaultImportance")}
+            onChange={(value) => set({ defaultImportance: value != null ? Number(value) : null })}
+          />
+          <ChoiceSelect
+            id="schema-default-volatility"
+            label="Volatility"
+            value={form.defaultVolatility}
+            choices={volatilityChoices}
+            disabled={disabled}
+            error={errors.get("defaultVolatility")}
+            onChange={(defaultVolatility) => set({ defaultVolatility })}
+          />
+          <ChoiceSelect
+            id="schema-default-scope"
+            label="Scope"
+            value={form.defaultScope}
+            choices={scopeChoices}
+            disabled={disabled}
+            error={errors.get("defaultScope")}
+            onChange={(defaultScope) => set({ defaultScope })}
+          />
+        </div>
+      </section>
+
+      <section className="flex flex-col gap-3 rounded-xl border border-muted-border bg-card p-5">
+        <Switch
+          id="schema-extraction"
+          label="Chat extraction can record memories of this type"
+          description="When off, only people and the agent's explicit tool calls give a memory this schema."
+          checked={form.extractionEnabled}
+          disabled={disabled}
+          containerClassName="w-full"
+          onCheckedChange={(extractionEnabled) => set({ extractionEnabled })}
+        />
+        {form.extractionEnabled && (
+          <Textarea
+            id="schema-extraction-guidance"
+            label="When to use it"
+            placeholder="e.g. When the user states a cost-per-acquisition target for a channel"
+            value={form.extractionGuidance}
+            minRows={2}
+            maxRows={6}
+            disabled={disabled}
+            error={errors.get("extractionGuidance")}
+            onChange={(e) => set({ extractionGuidance: e.target.value })}
+          />
+        )}
+      </section>
+
+      <section className="flex flex-col gap-3">
+        <div className="flex items-center justify-between gap-2">
+          <h3 className="typography-small-medium text-default-foreground">Properties</h3>
+          <span className="typography-tiny text-muted-foreground">
+            {form.properties.length} of {memorySchemaPropertyLimit}
+          </span>
+        </div>
+        {errors.get("properties") && (
+          <p className="typography-small text-error-foreground">{errors.get("properties")}</p>
+        )}
+        {isPresent(form.properties) && (
+          <div className="overflow-hidden rounded-xl border border-muted-border bg-card">
+            {form.properties.map((property, index) => (
+              <PropertyRow
+                key={property.id}
+                property={property}
+                index={index}
+                count={form.properties.length}
+                hasErrors={hasErrorsUnder(errors, propertyErrorPrefix(index))}
+                disabled={disabled}
+                onEdit={() => setDraft({ index, property, original: property })}
+                onRemove={() => setProperties(form.properties.filter((_, i) => i !== index))}
+                onMove={(to) => setProperties(moveItem(form.properties, index, to))}
+                drag={{
+                  active: dragged !== null,
+                  isDragging: dragged === index,
+                  isDropTarget: dragged !== null && dragOver === index && dragOver !== dragged,
+                  onStart: () => setDragged(index),
+                  onOver: () => setDragOver(index),
+                  onDrop: () => {
+                    if (dragged !== null && dragged !== index) setProperties(moveItem(form.properties, dragged, index));
+                    endDrag();
+                  },
+                  onEnd: endDrag,
+                }}
+              />
+            ))}
+          </div>
+        )}
+        <Button
+          type="button"
+          variant="secondary"
+          icon={Plus}
+          className="w-fit"
+          disabled={disabled || form.properties.length >= memorySchemaPropertyLimit}
+          onClick={() => {
+            const property = emptyPropertyForm();
+            setDraft({ index: null, property, original: property });
+          }}
+        >
+          Add property
+        </Button>
+        <PropertySheet
+          draft={draft}
+          siblings={form.properties}
+          errors={errors}
+          disabled={disabled}
+          onChange={(property) => setDraft((current) => (current ? { ...current, property } : current))}
+          onDone={commitDraft}
+          onCancel={() => setDraft(null)}
+        />
+      </section>
+    </div>
+  );
+}