@stigmer/react 0.4.8 → 0.5.0

package/src/inline-edit/InlineEditSelect.tsx

@@ -0,0 +1,150 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { cn } from "@stigmer/theme";
+import type { InlineEditBaseProps, SelectOption } from "./types";
+
+/** Props for {@link InlineEditSelect}. */
+export interface InlineEditSelectProps extends InlineEditBaseProps {
+  /** Current selected value. */
+  readonly value: string;
+  /** Available options. */
+  readonly options: readonly SelectOption[];
+  /** Called when the user selects a new option. */
+  readonly onSave: (newValue: string) => Promise<boolean>;
+}
+
+/**
+ * Click-to-edit single-choice selector.
+ *
+ * In read mode, shows the current option label. On click, opens a radio
+ * group with all options. Selection triggers immediate save.
+ */
+export function InlineEditSelect({
+  value,
+  options,
+  onSave,
+  disabled,
+  isSaving,
+  error,
+  className,
+}: InlineEditSelectProps) {
+  const [isEditing, setIsEditing] = useState(false);
+  const containerRef = useRef<HTMLDivElement>(null);
+  const currentLabel = options.find((o) => o.value === value)?.label ?? value;
+
+  useEffect(() => {
+    if (!isEditing) return;
+    const handleClickOutside = (e: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {
+        setIsEditing(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [isEditing]);
+
+  const handleSelect = useCallback(
+    async (newValue: string) => {
+      if (newValue === value) {
+        setIsEditing(false);
+        return;
+      }
+      const ok = await onSave(newValue);
+      if (ok) setIsEditing(false);
+    },
+    [value, onSave],
+  );
+
+  if (disabled || !isEditing) {
+    return (
+      <div className={cn("group/inline-edit", className)}>
+        <button
+          type="button"
+          onClick={() => { if (!disabled) setIsEditing(true); }}
+          disabled={disabled}
+          className={cn(
+            "inline-flex items-center gap-1.5 rounded-md px-1.5 py-0.5 text-left transition-colors",
+            !disabled && "hover:bg-accent-hover cursor-pointer",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+          )}
+        >
+          <span className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs font-medium text-foreground">
+            {currentLabel}
+          </span>
+          {!disabled && (
+            <ChevronDownIcon className="size-3 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover/inline-edit:opacity-100" />
+          )}
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div ref={containerRef} className={cn("flex flex-col gap-1", className)}>
+      <div className="rounded-lg border border-border bg-background p-1" role="radiogroup">
+        {options.map((option) => (
+          <button
+            key={option.value}
+            type="button"
+            role="radio"
+            aria-checked={option.value === value}
+            disabled={isSaving}
+            onClick={() => handleSelect(option.value)}
+            className={cn(
+              "flex w-full items-start gap-2 rounded-md px-2.5 py-1.5 text-left transition-colors",
+              option.value === value
+                ? "bg-muted-subtle text-foreground"
+                : "hover:bg-accent-hover text-foreground",
+              "disabled:opacity-50",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+            )}
+          >
+            <div className={cn(
+              "mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border",
+              option.value === value
+                ? "border-primary bg-primary"
+                : "border-muted-foreground",
+            )}>
+              {option.value === value && (
+                <div className="size-1.5 rounded-full bg-primary-foreground" />
+              )}
+            </div>
+            <div className="min-w-0 flex-1">
+              <span className="text-sm font-medium">{option.label}</span>
+              {option.description && (
+                <p className="mt-0.5 text-xs text-muted-foreground">{option.description}</p>
+              )}
+            </div>
+            {isSaving && option.value !== value && (
+              <Spinner />
+            )}
+          </button>
+        ))}
+      </div>
+      {error && (
+        <p className="px-1 text-xs text-destructive" role="alert">{error}</p>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Icons
+// ---------------------------------------------------------------------------
+
+function ChevronDownIcon({ className }: { readonly className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="m4 6 4 4 4-4" />
+    </svg>
+  );
+}
+
+function Spinner() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="animate-spin" aria-hidden="true">
+      <path d="M8 2a6 6 0 1 0 6 6" />
+    </svg>
+  );
+}

package/src/inline-edit/InlineEditText.tsx

@@ -0,0 +1,211 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { cn } from "@stigmer/theme";
+import type { InlineEditBaseProps } from "./types";
+
+/** Props for {@link InlineEditText}. */
+export interface InlineEditTextProps extends InlineEditBaseProps {
+  /** Current field value. */
+  readonly value: string;
+  /** Called with the new value when the user confirms the edit. */
+  readonly onSave: (newValue: string) => Promise<boolean>;
+  /** Placeholder shown when value is empty (in both read and edit mode). */
+  readonly placeholder?: string;
+  /** Optional client-side validation. Return an error string to block save. */
+  readonly validate?: (value: string) => string | null;
+  /** Render as heading text (larger, bolder). */
+  readonly variant?: "default" | "heading";
+}
+
+/**
+ * Click-to-edit single-line text field.
+ *
+ * Displays the value as styled text. On click, transitions to an input
+ * with inline confirm/cancel controls. Confirm triggers `onSave`;
+ * cancel reverts. Escape key also cancels.
+ */
+export function InlineEditText({
+  value,
+  onSave,
+  placeholder = "Click to edit",
+  validate,
+  variant = "default",
+  disabled,
+  isSaving,
+  error,
+  className,
+}: InlineEditTextProps) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [draft, setDraft] = useState(value);
+  const [localError, setLocalError] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    if (isEditing) {
+      setDraft(value);
+      setLocalError(null);
+      requestAnimationFrame(() => inputRef.current?.focus());
+    }
+  }, [isEditing, value]);
+
+  const handleConfirm = useCallback(async () => {
+    const trimmed = draft.trim();
+    if (trimmed === value) {
+      setIsEditing(false);
+      return;
+    }
+    if (validate) {
+      const err = validate(trimmed);
+      if (err) {
+        setLocalError(err);
+        return;
+      }
+    }
+    const ok = await onSave(trimmed);
+    if (ok) setIsEditing(false);
+  }, [draft, value, validate, onSave]);
+
+  const handleCancel = useCallback(() => {
+    setIsEditing(false);
+    setDraft(value);
+    setLocalError(null);
+  }, [value]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        handleConfirm();
+      } else if (e.key === "Escape") {
+        handleCancel();
+      }
+    },
+    [handleConfirm, handleCancel],
+  );
+
+  const displayError = localError || error;
+
+  if (disabled || !isEditing) {
+    return (
+      <div className={cn("group/inline-edit", className)}>
+        <button
+          type="button"
+          onClick={() => { if (!disabled) setIsEditing(true); }}
+          disabled={disabled}
+          className={cn(
+            "inline-flex w-full items-center gap-1.5 rounded-md px-1.5 py-0.5 text-left transition-colors",
+            !disabled && "hover:bg-accent-hover cursor-pointer",
+            disabled && "cursor-default",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+          )}
+        >
+          <span
+            className={cn(
+              "min-w-0 truncate",
+              variant === "heading"
+                ? "text-lg font-semibold text-foreground"
+                : "text-sm text-foreground",
+              !value && "text-muted-foreground italic",
+            )}
+          >
+            {value || placeholder}
+          </span>
+          {!disabled && (
+            <PencilIcon className="size-3 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover/inline-edit:opacity-100" />
+          )}
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("flex flex-col gap-1", className)}>
+      <div className="flex items-center gap-1.5">
+        <input
+          ref={inputRef}
+          type="text"
+          value={draft}
+          onChange={(e) => { setDraft(e.target.value); setLocalError(null); }}
+          onKeyDown={handleKeyDown}
+          disabled={isSaving}
+          placeholder={placeholder}
+          className={cn(
+            "flex-1 rounded-md border border-border bg-input-bg px-2 py-1 text-sm text-foreground",
+            "focus:outline-none focus:ring-2 focus:ring-ring",
+            "disabled:opacity-50",
+            variant === "heading" && "text-lg font-semibold",
+            displayError && "border-destructive",
+          )}
+        />
+        <button
+          type="button"
+          onClick={handleConfirm}
+          disabled={isSaving}
+          aria-label="Save"
+          className={cn(
+            "inline-flex size-7 items-center justify-center rounded-md",
+            "bg-primary text-primary-foreground hover:bg-primary-hover",
+            "disabled:opacity-50",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          )}
+        >
+          {isSaving ? <Spinner /> : <CheckIcon className="size-3.5" />}
+        </button>
+        <button
+          type="button"
+          onClick={handleCancel}
+          disabled={isSaving}
+          aria-label="Cancel"
+          className={cn(
+            "inline-flex size-7 items-center justify-center rounded-md",
+            "border border-border bg-background text-foreground hover:bg-accent hover:text-accent-foreground",
+            "disabled:opacity-50",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          )}
+        >
+          <XIcon className="size-3.5" />
+        </button>
+      </div>
+      {displayError && (
+        <p className="px-1 text-xs text-destructive" role="alert">{displayError}</p>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Icons
+// ---------------------------------------------------------------------------
+
+function PencilIcon({ className }: { readonly className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M11.5 1.5a2.121 2.121 0 0 1 3 3L5 14l-4 1 1-4Z" />
+    </svg>
+  );
+}
+
+function CheckIcon({ className }: { readonly className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="m3 8.5 3.5 3.5 6.5-8" />
+    </svg>
+  );
+}
+
+function XIcon({ className }: { readonly className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="m4 4 8 8M12 4l-8 8" />
+    </svg>
+  );
+}
+
+function Spinner() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="animate-spin" aria-hidden="true">
+      <path d="M8 2a6 6 0 1 0 6 6" />
+    </svg>
+  );
+}

package/src/inline-edit/InlineEditTextarea.tsx

@@ -0,0 +1,209 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { cn } from "@stigmer/theme";
+import type { InlineEditBaseProps } from "./types";
+
+/** Props for {@link InlineEditTextarea}. */
+export interface InlineEditTextareaProps extends InlineEditBaseProps {
+  /** Current field value. */
+  readonly value: string;
+  /** Called with the new value when the user confirms. */
+  readonly onSave: (newValue: string) => Promise<boolean>;
+  /** Placeholder shown when value is empty. */
+  readonly placeholder?: string;
+  /** Optional client-side validation. */
+  readonly validate?: (value: string) => string | null;
+  /** Minimum rows for the textarea. @default 3 */
+  readonly minRows?: number;
+}
+
+/**
+ * Click-to-edit multiline text field.
+ *
+ * In read mode, renders the value as preformatted text with expand/collapse.
+ * On click, opens a textarea with confirm/cancel. Ctrl+Enter confirms.
+ */
+export function InlineEditTextarea({
+  value,
+  onSave,
+  placeholder = "Click to edit",
+  validate,
+  minRows = 3,
+  disabled,
+  isSaving,
+  error,
+  className,
+}: InlineEditTextareaProps) {
+  const [isEditing, setIsEditing] = useState(false);
+  const [draft, setDraft] = useState(value);
+  const [localError, setLocalError] = useState<string | null>(null);
+  const textareaRef = useRef<HTMLTextAreaElement>(null);
+
+  useEffect(() => {
+    if (isEditing) {
+      setDraft(value);
+      setLocalError(null);
+      requestAnimationFrame(() => {
+        const ta = textareaRef.current;
+        if (ta) {
+          ta.focus();
+          ta.selectionStart = ta.value.length;
+        }
+      });
+    }
+  }, [isEditing, value]);
+
+  // Auto-resize textarea
+  useEffect(() => {
+    const ta = textareaRef.current;
+    if (!ta) return;
+    ta.style.height = "auto";
+    ta.style.height = `${ta.scrollHeight}px`;
+  }, [draft, isEditing]);
+
+  const handleConfirm = useCallback(async () => {
+    if (draft === value) {
+      setIsEditing(false);
+      return;
+    }
+    if (validate) {
+      const err = validate(draft);
+      if (err) {
+        setLocalError(err);
+        return;
+      }
+    }
+    const ok = await onSave(draft);
+    if (ok) setIsEditing(false);
+  }, [draft, value, validate, onSave]);
+
+  const handleCancel = useCallback(() => {
+    setIsEditing(false);
+    setDraft(value);
+    setLocalError(null);
+  }, [value]);
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+        handleConfirm();
+      } else if (e.key === "Escape") {
+        handleCancel();
+      }
+    },
+    [handleConfirm, handleCancel],
+  );
+
+  const displayError = localError || error;
+
+  if (disabled || !isEditing) {
+    return (
+      <div className={cn("group/inline-edit", className)}>
+        <button
+          type="button"
+          onClick={() => { if (!disabled) setIsEditing(true); }}
+          disabled={disabled}
+          className={cn(
+            "w-full rounded-md px-2 py-1.5 text-left transition-colors",
+            !disabled && "hover:bg-accent-hover cursor-pointer",
+            disabled && "cursor-default",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring",
+          )}
+        >
+          <div className="flex items-start justify-between gap-2">
+            <pre
+              className={cn(
+                "min-w-0 whitespace-pre-wrap break-words font-mono text-sm text-foreground",
+                !value && "text-muted-foreground italic font-sans",
+              )}
+            >
+              {value || placeholder}
+            </pre>
+            {!disabled && (
+              <PencilIcon className="mt-0.5 size-3 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover/inline-edit:opacity-100" />
+            )}
+          </div>
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("flex flex-col gap-1.5", className)}>
+      <textarea
+        ref={textareaRef}
+        value={draft}
+        onChange={(e) => { setDraft(e.target.value); setLocalError(null); }}
+        onKeyDown={handleKeyDown}
+        disabled={isSaving}
+        placeholder={placeholder}
+        rows={minRows}
+        className={cn(
+          "w-full resize-y rounded-md border border-border bg-input-bg px-3 py-2 font-mono text-sm text-foreground",
+          "focus:outline-none focus:ring-2 focus:ring-ring",
+          "disabled:opacity-50",
+          displayError && "border-destructive",
+        )}
+      />
+      <div className="flex items-center justify-between">
+        <span className="text-[10px] text-muted-foreground">
+          {isSaving ? "Saving..." : "Ctrl+Enter to save, Escape to cancel"}
+        </span>
+        <div className="flex items-center gap-1.5">
+          <button
+            type="button"
+            onClick={handleCancel}
+            disabled={isSaving}
+            className={cn(
+              "rounded-md px-2.5 py-1 text-xs font-medium",
+              "border border-border bg-background text-foreground hover:bg-accent hover:text-accent-foreground",
+              "disabled:opacity-50",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            )}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={handleConfirm}
+            disabled={isSaving}
+            className={cn(
+              "inline-flex items-center gap-1 rounded-md px-2.5 py-1 text-xs font-medium",
+              "bg-primary text-primary-foreground hover:bg-primary-hover",
+              "disabled:opacity-50",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            )}
+          >
+            {isSaving && <Spinner />}
+            Save
+          </button>
+        </div>
+      </div>
+      {displayError && (
+        <p className="px-1 text-xs text-destructive" role="alert">{displayError}</p>
+      )}
+    </div>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Icons
+// ---------------------------------------------------------------------------
+
+function PencilIcon({ className }: { readonly className?: string }) {
+  return (
+    <svg className={className} viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
+      <path d="M11.5 1.5a2.121 2.121 0 0 1 3 3L5 14l-4 1 1-4Z" />
+    </svg>
+  );
+}
+
+function Spinner() {
+  return (
+    <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" className="animate-spin" aria-hidden="true">
+      <path d="M8 2a6 6 0 1 0 6 6" />
+    </svg>
+  );
+}

package/src/inline-edit/index.ts

@@ -0,0 +1,28 @@
+export { InlineEditText } from "./InlineEditText";
+export type { InlineEditTextProps } from "./InlineEditText";
+
+export { InlineEditTextarea } from "./InlineEditTextarea";
+export type { InlineEditTextareaProps } from "./InlineEditTextarea";
+
+export { InlineEditImage } from "./InlineEditImage";
+export type { InlineEditImageProps } from "./InlineEditImage";
+
+export { InlineEditSelect } from "./InlineEditSelect";
+export type { InlineEditSelectProps } from "./InlineEditSelect";
+
+export { InlineEditKeyValue } from "./InlineEditKeyValue";
+export type { InlineEditKeyValueProps } from "./InlineEditKeyValue";
+
+export { InlineEditResourceList } from "./InlineEditResourceList";
+export type { InlineEditResourceListProps } from "./InlineEditResourceList";
+
+export { useInlineFieldSave } from "./useInlineFieldSave";
+export type { UseInlineFieldSaveReturn } from "./useInlineFieldSave";
+
+export type {
+  InlineEditBaseProps,
+  KeyValueRow,
+  ResourceRefRow,
+  SelectOption,
+  InlineFieldSaveResult,
+} from "./types";

package/src/inline-edit/types.ts

@@ -0,0 +1,47 @@
+import type { ReactNode } from "react";
+
+/** Shared props for all inline edit components. */
+export interface InlineEditBaseProps {
+  /** Whether editing is disabled (component renders as read-only). */
+  readonly disabled?: boolean;
+  /** `true` while a save operation is in flight. */
+  readonly isSaving?: boolean;
+  /** Error from the last failed save. Shown inline below the field. */
+  readonly error?: string | null;
+  /** Additional CSS classes for the root container. */
+  readonly className?: string;
+}
+
+/** Entry in an inline key-value editor. */
+export interface KeyValueRow {
+  readonly key: string;
+  readonly value: string;
+  /** When `true`, renders a "secret" badge. */
+  readonly isSecret?: boolean;
+  /** Optional description shown as helper text. */
+  readonly description?: string;
+  /** When `true`, this row is optional. */
+  readonly optional?: boolean;
+}
+
+/** Entry in an inline resource reference list (MCP servers, skills, etc.). */
+export interface ResourceRefRow {
+  readonly org: string;
+  readonly slug: string;
+  /** Display label (defaults to slug when omitted). */
+  readonly label?: string;
+}
+
+/** Single option for InlineEditSelect. */
+export interface SelectOption {
+  readonly value: string;
+  readonly label: string;
+  readonly description?: string;
+}
+
+/** Save result returned to the inline component after a field save. */
+export interface InlineFieldSaveResult<T = unknown> {
+  readonly success: boolean;
+  readonly data?: T;
+  readonly error?: string;
+}