@stigmer/react 3.11.0 → 3.12.0

package/src/datastore/DeleteDatastoreDialog.tsx

@@ -1,202 +0,0 @@
-"use client";
-
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { cn } from "@stigmer/theme";
-import { getUserMessage } from "@stigmer/sdk";
-import type { Datastore } from "@stigmer/protos/ai/stigmer/agentic/datastore/v1/api_pb";
-import { toast } from "../feedback/toast.js";
-import { FIELD_INPUT_CLASSES } from "./FieldValueControl.js";
-import { useDeleteDatastore } from "./useDeleteDatastore.js";
-
-/** Props for {@link DeleteDatastoreDialog}. */
-export interface DeleteDatastoreDialogProps {
-  /** Whether the dialog is open. */
-  readonly open: boolean;
-  /** Called when the dialog requests to close. */
-  readonly onOpenChange: (open: boolean) => void;
-  /** The loaded datastore (metadata + status feed the counts). */
-  readonly datastore: Datastore | null;
-  /** Called after a successful delete (navigate away). */
-  readonly onDeleted?: () => void;
-}
-
-/**
- * The guarded delete flow for the platform's only record-destroying
- * resource action (DD-008 SD-6) — a status-informed acknowledgment
- * replacing the generic one-shot confirm:
- *
- * - Counts are pre-filled from the already-loaded `status` ("holds N
- *   records across M collections").
- * - A **non-empty** datastore requires **typing the datastore slug** to
- *   arm the delete — the strongest-friction confirm. Arming sends the
- *   `force` acknowledgment.
- * - An **empty** datastore keeps the standard destructive confirm.
- * - The server's guards stay authoritative: on refusal (agent
- *   references, count drift) the `FAILED_PRECONDITION` message renders
- *   **verbatim** inside the dialog with fresh server counts — the
- *   console renders the guard, never pre-empts it. The agent-reference
- *   block names the referencing agents; detaching them is the operator's
- *   next step, and the block is deliberately not acknowledgeable-through.
- *
- * All visual properties flow through `--stgm-*` design tokens.
- * Zero Console dependencies — safe for platform builder embedding.
- */
-export function DeleteDatastoreDialog({
-  open,
-  onOpenChange,
-  datastore,
-  onDeleted,
-}: DeleteDatastoreDialogProps) {
-  const dialogRef = useRef<HTMLDialogElement>(null);
-  const { deleteDatastore, isDeleting, error, clearError } = useDeleteDatastore();
-  const [slugInput, setSlugInput] = useState("");
-
-  const slug = datastore?.metadata?.slug ?? "";
-  const resourceId = datastore?.metadata?.id ?? "";
-
-  // BigInt literals (0n) are avoided: consumer apps compile SDK sources
-  // with targets below ES2020.
-  const { totalRecords, nonEmptyCollections } = useMemo(() => {
-    let records = BigInt(0);
-    let collections = 0;
-    for (const coll of datastore?.status?.collections ?? []) {
-      if (coll.recordCount > BigInt(0)) {
-        records += coll.recordCount;
-        collections += 1;
-      }
-    }
-    return { totalRecords: records, nonEmptyCollections: collections };
-  }, [datastore]);
-
-  const isEmpty = totalRecords === BigInt(0);
-  const armed = isEmpty || slugInput === slug;
-
-  useEffect(() => {
-    if (open) {
-      setSlugInput("");
-      clearError();
-    }
-  }, [open, clearError]);
-
-  useEffect(() => {
-    const dialog = dialogRef.current;
-    if (!dialog) return;
-    if (open && !dialog.open) dialog.showModal();
-    else if (!open && dialog.open) dialog.close();
-  }, [open]);
-
-  const handleDialogCancel = useCallback(
-    (e: React.SyntheticEvent) => {
-      e.preventDefault();
-      onOpenChange(false);
-    },
-    [onOpenChange],
-  );
-
-  const handleDelete = useCallback(async () => {
-    if (!resourceId || !armed) return;
-    try {
-      // A non-empty delete carries force — the acknowledgment the
-      // slug-typing arms. Empty datastores need no acknowledgment.
-      await deleteDatastore({ resourceId, force: !isEmpty });
-      toast.success(`Datastore "${slug}" deleted`);
-      onOpenChange(false);
-      onDeleted?.();
-    } catch {
-      // The guard's message renders inline via `error` — with fresh
-      // counts on drift; the server stays authoritative.
-    }
-  }, [resourceId, armed, isEmpty, deleteDatastore, slug, onOpenChange, onDeleted]);
-
-  if (!open || !datastore) return null;
-
-  return (
-    <dialog
-      ref={dialogRef}
-      onCancel={handleDialogCancel}
-      aria-label={`Delete datastore ${slug}`}
-      className={cn(
-        "stg:fixed stg:inset-0 stg:z-50 stg:m-auto stg:w-full stg:max-w-md stg:rounded-lg stg:border stg:border-border stg:bg-popover stg:p-0 stg:text-popover-foreground stg:shadow-lg",
-        "stg:backdrop:bg-black/50",
-        "stg:open:animate-in stg:open:fade-in-0 stg:open:zoom-in-95",
-      )}
-    >
-      <div className="stg:flex stg:flex-col stg:gap-4 stg:p-6">
-        <div className="stg:flex stg:flex-col stg:gap-1.5">
-          <h3 className="stg:text-base stg:font-semibold stg:text-foreground">
-            Delete datastore “{slug}”?
-          </h3>
-          {isEmpty ? (
-            <p className="stg:text-sm stg:text-muted-foreground">
-              This datastore holds no records. Its declared collections will be
-              removed. This cannot be undone.
-            </p>
-          ) : (
-            <p className="stg:text-sm stg:text-muted-foreground">
-              “{slug}” holds{" "}
-              <strong className="stg:font-semibold stg:text-foreground">
-                {String(totalRecords)} record{totalRecords === BigInt(1) ? "" : "s"}
-              </strong>{" "}
-              across{" "}
-              <strong className="stg:font-semibold stg:text-foreground">
-                {nonEmptyCollections} collection{nonEmptyCollections === 1 ? "" : "s"}
-              </strong>
-              . Deleting the datastore destroys them all. This cannot be undone.
-            </p>
-          )}
-        </div>
-
-        {error && (
-          <div
-            role="alert"
-            className="stg:rounded-md stg:border stg:border-destructive stg:bg-card stg:px-3 stg:py-2 stg:text-sm stg:text-destructive"
-          >
-            {getUserMessage(error)}
-          </div>
-        )}
-
-        {!isEmpty && (
-          <label className="stg:flex stg:flex-col stg:gap-1 stg:text-xs stg:font-medium stg:text-muted-foreground">
-            Type <span className="stg:font-mono stg:text-foreground">{slug}</span> to confirm
-            <input
-              type="text"
-              className={FIELD_INPUT_CLASSES}
-              value={slugInput}
-              onChange={(e) => setSlugInput(e.target.value)}
-              autoComplete="off"
-              spellCheck={false}
-              aria-label={`Type ${slug} to confirm deletion`}
-            />
-          </label>
-        )}
-
-        <div className="stg:flex stg:justify-end stg:gap-2">
-          <button
-            type="button"
-            onClick={() => onOpenChange(false)}
-            className={cn(
-              "stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-3 stg:py-1.5 stg:text-sm stg:font-medium stg:text-foreground",
-              "stg:hover:bg-accent stg:hover:text-accent-foreground",
-              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
-            )}
-          >
-            Cancel
-          </button>
-          <button
-            type="button"
-            onClick={handleDelete}
-            disabled={!armed || isDeleting}
-            className={cn(
-              "stg:rounded-md stg:bg-destructive stg:px-3 stg:py-1.5 stg:text-sm stg:font-medium stg:text-destructive-foreground",
-              "stg:hover:bg-destructive-hover",
-              "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
-              "stg:disabled:pointer-events-none stg:disabled:opacity-50",
-            )}
-          >
-            {isDeleting ? "Deleting…" : "Delete datastore"}
-          </button>
-        </div>
-      </div>
-    </dialog>
-  );
-}

package/src/datastore/FieldValueControl.tsx

@@ -1,289 +0,0 @@
-"use client";
-
-import { useCallback, useState } from "react";
-import { cn } from "@stigmer/theme";
-import type { JsonValue } from "@bufbuild/protobuf";
-import {
-  FieldType,
-  type FieldDeclaration,
-} from "@stigmer/protos/ai/stigmer/agentic/datastore/v1/spec_pb";
-
-/**
- * Standard input styling for datastore value controls — the
- * token-compliant idiom (semantic Tailwind classes over `--stgm-*`
- * tokens; no pixel font sizes, no hex fallbacks).
- */
-export const FIELD_INPUT_CLASSES = cn(
-  "stg:w-full stg:rounded-md stg:border stg:border-input stg:bg-background stg:px-2.5 stg:py-1.5 stg:text-xs stg:text-foreground",
-  "stg:placeholder:text-muted-foreground",
-  "stg:focus-visible:outline-none stg:focus-visible:ring-1 stg:focus-visible:ring-ring",
-  "stg:disabled:pointer-events-none stg:disabled:opacity-50",
-);
-
-/** Props for {@link FieldValueControl}. */
-export interface FieldValueControlProps {
-  /** The field declaration driving the control type. */
-  readonly field: FieldDeclaration;
-  /**
-   * Current value in its canonical encoding (DD-004), or `undefined`
-   * when empty/unset. The control never receives explicit `null` — the
-   * clear affordance is the owner's (a form row renders it; the control
-   * only edits values).
-   */
-  readonly value: JsonValue | undefined;
-  /**
-   * Called with the canonical value on every valid edit, or `undefined`
-   * when the input empties. Invalid intermediate states (half-typed
-   * JSON, unparseable numbers) stay local to the control and are never
-   * emitted — the precedent set by the workflow config form.
-   */
-  readonly onChange: (value: JsonValue | undefined) => void;
-  /** Disables the input. */
-  readonly disabled?: boolean;
-  /** DOM id for external `<label htmlFor>` wiring. */
-  readonly id?: string;
-  /** Accessible name when no external label is wired. */
-  readonly "aria-label"?: string;
-}
-
-/**
- * The typed value control for a declared datastore field — one
- * controlled input per `FieldType`, emitting canonical encodings
- * (DD-004). Shared by `RecordFormPanel` (field editing) and
- * `RecordFilterBuilder` (condition values), so a field always offers
- * the same input affordance everywhere.
- *
- * Type dispatch:
- * - `string`             — text input; enum-select when `enum_values` declared
- * - `integer` / `number` — numeric input (step 1 / any)
- * - `bool`               — select with true/false (a checkbox conflates
- *                          "false" with "unset", which the tri-state
- *                          write model must not do)
- * - `date`               — native date picker (emits `YYYY-MM-DD`)
- * - `time`               — native time picker (emits zero-padded `HH:MM[:SS]`)
- * - `timestamp`          — native datetime-local picker in the operator's
- *                          zone, converted to RFC 3339 UTC
- * - `json`               — mono textarea with local parse state; only
- *                          valid JSON is emitted
- */
-export function FieldValueControl(props: FieldValueControlProps) {
-  const { field } = props;
-  switch (field.type) {
-    case FieldType.string:
-      return field.enumValues.length > 0 ? <EnumControl {...props} /> : <StringControl {...props} />;
-    case FieldType.integer:
-    case FieldType.number:
-      return <NumberControl {...props} />;
-    case FieldType.bool:
-      return <BoolControl {...props} />;
-    case FieldType.date:
-      return <DateControl {...props} />;
-    case FieldType.time:
-      return <TimeControl {...props} />;
-    case FieldType.timestamp:
-      return <TimestampControl {...props} />;
-    case FieldType.json:
-    default:
-      return <JsonControl {...props} />;
-  }
-}
-
-// ---------------------------------------------------------------------------
-// Per-type controls
-// ---------------------------------------------------------------------------
-
-function StringControl({ value, onChange, disabled, id, "aria-label": ariaLabel }: FieldValueControlProps) {
-  return (
-    <input
-      id={id}
-      type="text"
-      className={FIELD_INPUT_CLASSES}
-      value={typeof value === "string" ? value : ""}
-      onChange={(e) => onChange(e.target.value === "" ? undefined : e.target.value)}
-      disabled={disabled}
-      aria-label={ariaLabel}
-    />
-  );
-}
-
-function EnumControl({ field, value, onChange, disabled, id, "aria-label": ariaLabel }: FieldValueControlProps) {
-  return (
-    <select
-      id={id}
-      className={FIELD_INPUT_CLASSES}
-      value={typeof value === "string" ? value : ""}
-      onChange={(e) => onChange(e.target.value === "" ? undefined : e.target.value)}
-      disabled={disabled}
-      aria-label={ariaLabel}
-    >
-      <option value="">— Select —</option>
-      {field.enumValues.map((v) => (
-        <option key={v} value={v}>
-          {v}
-        </option>
-      ))}
-    </select>
-  );
-}
-
-function NumberControl({ field, value, onChange, disabled, id, "aria-label": ariaLabel }: FieldValueControlProps) {
-  const isInteger = field.type === FieldType.integer;
-  return (
-    <input
-      id={id}
-      type="number"
-      step={isInteger ? 1 : "any"}
-      className={FIELD_INPUT_CLASSES}
-      value={typeof value === "number" ? value : ""}
-      onChange={(e) => {
-        const raw = e.target.value;
-        if (raw === "") {
-          onChange(undefined);
-          return;
-        }
-        const parsed = isInteger ? Number.parseInt(raw, 10) : Number.parseFloat(raw);
-        if (!Number.isNaN(parsed)) onChange(parsed);
-      }}
-      disabled={disabled}
-      aria-label={ariaLabel}
-    />
-  );
-}
-
-function BoolControl({ value, onChange, disabled, id, "aria-label": ariaLabel }: FieldValueControlProps) {
-  return (
-    <select
-      id={id}
-      className={FIELD_INPUT_CLASSES}
-      value={value === true ? "true" : value === false ? "false" : ""}
-      onChange={(e) => {
-        const v = e.target.value;
-        onChange(v === "" ? undefined : v === "true");
-      }}
-      disabled={disabled}
-      aria-label={ariaLabel}
-    >
-      <option value="">— Select —</option>
-      <option value="true">true</option>
-      <option value="false">false</option>
-    </select>
-  );
-}
-
-function DateControl({ value, onChange, disabled, id, "aria-label": ariaLabel }: FieldValueControlProps) {
-  return (
-    <input
-      id={id}
-      type="date"
-      className={FIELD_INPUT_CLASSES}
-      value={typeof value === "string" ? value : ""}
-      onChange={(e) => onChange(e.target.value === "" ? undefined : e.target.value)}
-      disabled={disabled}
-      aria-label={ariaLabel}
-    />
-  );
-}
-
-function TimeControl({ value, onChange, disabled, id, "aria-label": ariaLabel }: FieldValueControlProps) {
-  return (
-    <input
-      id={id}
-      type="time"
-      step={1}
-      className={FIELD_INPUT_CLASSES}
-      value={typeof value === "string" ? value : ""}
-      onChange={(e) => onChange(e.target.value === "" ? undefined : e.target.value)}
-      disabled={disabled}
-      aria-label={ariaLabel}
-    />
-  );
-}
-
-function TimestampControl({ value, onChange, disabled, id, "aria-label": ariaLabel }: FieldValueControlProps) {
-  return (
-    <input
-      id={id}
-      type="datetime-local"
-      step={1}
-      className={FIELD_INPUT_CLASSES}
-      value={typeof value === "string" ? utcToLocalInput(value) : ""}
-      onChange={(e) => {
-        const raw = e.target.value;
-        onChange(raw === "" ? undefined : localInputToUtc(raw));
-      }}
-      disabled={disabled}
-      aria-label={ariaLabel}
-    />
-  );
-}
-
-/**
- * Canonical RFC 3339 UTC → the datetime-local widget's value (the
- * operator's local zone, no zone suffix). Unparseable input renders
- * empty rather than throwing — the value may be mid-edit.
- */
-function utcToLocalInput(canonical: string): string {
-  const ms = Date.parse(canonical);
-  if (Number.isNaN(ms)) return "";
-  const d = new Date(ms);
-  const pad = (n: number) => String(n).padStart(2, "0");
-  return (
-    `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}` +
-    `T${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
-  );
-}
-
-/** The widget's local value → canonical RFC 3339 UTC. */
-function localInputToUtc(local: string): string {
-  const ms = Date.parse(local); // no zone suffix — parsed as local time
-  if (Number.isNaN(ms)) return local; // let coercion report it on submit
-  return new Date(ms).toISOString().replace(/\.000Z$/, "Z");
-}
-
-function JsonControl({ value, onChange, disabled, id, "aria-label": ariaLabel }: FieldValueControlProps) {
-  const initial = value !== undefined ? JSON.stringify(value, null, 2) : "";
-  const [raw, setRaw] = useState(initial);
-  const [parseError, setParseError] = useState<string | null>(null);
-
-  const handleChange = useCallback(
-    (e: React.ChangeEvent<HTMLTextAreaElement>) => {
-      const text = e.target.value;
-      setRaw(text);
-      if (text.trim() === "") {
-        setParseError(null);
-        onChange(undefined);
-        return;
-      }
-      try {
-        const parsed = JSON.parse(text) as JsonValue;
-        setParseError(null);
-        onChange(parsed);
-      } catch {
-        // Invalid JSON stays local — never emitted.
-        setParseError("Invalid JSON");
-      }
-    },
-    [onChange],
-  );
-
-  return (
-    <div className="stg:flex stg:flex-col stg:gap-1">
-      <textarea
-        id={id}
-        rows={4}
-        className={cn(FIELD_INPUT_CLASSES, "stg:resize-y stg:font-mono")}
-        value={raw}
-        onChange={handleChange}
-        placeholder="{}"
-        disabled={disabled}
-        aria-label={ariaLabel}
-        aria-invalid={parseError !== null}
-      />
-      {parseError && (
-        <span role="alert" className="stg:text-xs stg:text-destructive">
-          {parseError}
-        </span>
-      )}
-    </div>
-  );
-}