@stigmer/react 0.4.7 → 0.5.0

package/src/inline-edit/useInlineFieldSave.ts

@@ -0,0 +1,62 @@
+"use client";
+
+import { useCallback, useRef, useState } from "react";
+import { toError } from "../internal/toError";
+
+/** Return value of {@link useInlineFieldSave}. */
+export interface UseInlineFieldSaveReturn<TResource, TValue> {
+  /** Trigger a save. Resolves `true` on success, `false` on failure. */
+  readonly save: (newValue: TValue) => Promise<boolean>;
+  /** `true` while the save RPC is in flight. */
+  readonly isSaving: boolean;
+  /** Error from the most recent failed save. */
+  readonly error: string | null;
+  /** Clear the error state. */
+  readonly clearError: () => void;
+}
+
+/**
+ * Generic hook that saves a single field on a resource.
+ *
+ * The `saveFn` receives the current resource and the new field value,
+ * reconstructs the full input, and calls the update API. On success
+ * the resource state is refreshed; on failure the error is captured.
+ *
+ * @param currentResource - Ref to the latest fetched resource (read on each save).
+ * @param saveFn - Async function that performs the update and returns the new resource.
+ */
+export function useInlineFieldSave<TResource, TValue>(
+  currentResource: TResource | null | undefined,
+  saveFn: (resource: TResource, newValue: TValue) => Promise<TResource>,
+): UseInlineFieldSaveReturn<TResource, TValue> {
+  const [isSaving, setIsSaving] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const inflight = useRef(0);
+
+  const clearError = useCallback(() => setError(null), []);
+
+  const save = useCallback(
+    async (newValue: TValue): Promise<boolean> => {
+      if (!currentResource) return false;
+
+      const callId = ++inflight.current;
+      setIsSaving(true);
+      setError(null);
+
+      try {
+        await saveFn(currentResource, newValue);
+        if (inflight.current !== callId) return false;
+        return true;
+      } catch (err) {
+        if (inflight.current !== callId) return false;
+        setError(toError(err).message);
+        return false;
+      } finally {
+        if (inflight.current === callId) setIsSaving(false);
+      }
+    },
+    [currentResource, saveFn],
+  );
+
+  return { save, isSaving, error, clearError };
+}

package/src/internal/Tabs.tsx

@@ -1,166 +1,6 @@
-"use client";
-
-import { useCallback, useId, useRef, type KeyboardEvent, type ReactNode } from "react";
-import { cn } from "@stigmer/theme";
-
-export interface TabItem {
-  /** Unique identifier for the tab, used as the `activeTab` value. */
-  readonly id: string;
-  /** Display label shown in the tab trigger. */
-  readonly label: string;
-  /** Optional numeric badge rendered next to the label (e.g. item count). */
-  readonly badge?: number;
-}
-
-export interface TabsProps {
-  /** Ordered list of tabs to render. Tabs with no matching content are still clickable. */
-  readonly tabs: readonly TabItem[];
-  /** The `id` of the currently active tab. */
-  readonly activeTab: string;
-  /** Called when the user selects a different tab. */
-  readonly onTabChange: (tabId: string) => void;
-  /**
-   * Content to render in the active tab panel.
-   * Typically a switch/map over `activeTab`.
-   */
-  readonly children: ReactNode;
-  /** Accessible label for the tab list (e.g. "Capability sections"). */
-  readonly "aria-label"?: string;
-  /** Additional CSS classes for the root container. */
-  readonly className?: string;
-}
-
 /**
- * Accessible tabbed panel with badge support.
- *
- * Implements the WAI-ARIA Tabs pattern:
- * - `role="tablist"` / `role="tab"` / `role="tabpanel"`
- * - Arrow-key navigation (Left/Right), Home/End to jump
- * - `aria-selected`, `aria-controls`, `aria-labelledby` wiring
- *
- * All visual properties flow through `--stgm-*` design tokens.
- * No external dependencies — safe for platform builder embedding.
- *
- * @internal — not yet part of the public `@stigmer/react` API.
+ * @deprecated Import from `../tabs` instead. This re-export exists only
+ * to avoid breaking internal consumers during migration.
  */
-export function Tabs({
-  tabs,
-  activeTab,
-  onTabChange,
-  children,
-  "aria-label": ariaLabel,
-  className,
-}: TabsProps) {
-  const instanceId = useId();
-  const tabRefsMap = useRef<Map<string, HTMLButtonElement>>(new Map());
-
-  const tabId = (id: string) => `${instanceId}-tab-${id}`;
-  const panelId = (id: string) => `${instanceId}-panel-${id}`;
-
-  const focusTab = useCallback(
-    (id: string) => {
-      tabRefsMap.current.get(id)?.focus();
-      onTabChange(id);
-    },
-    [onTabChange],
-  );
-
-  const handleKeyDown = useCallback(
-    (e: KeyboardEvent<HTMLDivElement>) => {
-      const currentIndex = tabs.findIndex((t) => t.id === activeTab);
-      if (currentIndex === -1) return;
-
-      let nextIndex: number | null = null;
-
-      switch (e.key) {
-        case "ArrowRight":
-          nextIndex = (currentIndex + 1) % tabs.length;
-          break;
-        case "ArrowLeft":
-          nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;
-          break;
-        case "Home":
-          nextIndex = 0;
-          break;
-        case "End":
-          nextIndex = tabs.length - 1;
-          break;
-        default:
-          return;
-      }
-
-      e.preventDefault();
-      focusTab(tabs[nextIndex].id);
-    },
-    [tabs, activeTab, focusTab],
-  );
-
-  return (
-    <div className={cn("flex flex-col", className)}>
-      <div
-        role="tablist"
-        aria-label={ariaLabel}
-        onKeyDown={handleKeyDown}
-        className="flex border-b border-border"
-      >
-        {tabs.map((tab) => {
-          const isActive = tab.id === activeTab;
-          return (
-            <button
-              key={tab.id}
-              ref={(el) => {
-                if (el) tabRefsMap.current.set(tab.id, el);
-                else tabRefsMap.current.delete(tab.id);
-              }}
-              id={tabId(tab.id)}
-              role="tab"
-              type="button"
-              aria-selected={isActive}
-              aria-controls={panelId(tab.id)}
-              tabIndex={isActive ? 0 : -1}
-              onClick={() => onTabChange(tab.id)}
-              data-cursor-target={`tab-${tab.id}`}
-              className={cn(
-                "relative inline-flex items-center gap-1.5 px-3 py-2 text-xs font-medium transition-colors",
-                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
-                isActive
-                  ? "text-foreground"
-                  : "text-muted-foreground hover:text-foreground",
-              )}
-            >
-              {tab.label}
-              {tab.badge != null && tab.badge > 0 && (
-                <span
-                  className={cn(
-                    "inline-flex min-w-[1.25rem] items-center justify-center rounded-full px-1 py-px text-[10px] font-medium leading-none",
-                    isActive
-                      ? "bg-primary-subtle text-primary"
-                      : "bg-muted text-muted-foreground",
-                  )}
-                >
-                  {tab.badge}
-                </span>
-              )}
-              {isActive && (
-                <span
-                  className="absolute inset-x-0 -bottom-px h-0.5 bg-primary"
-                  aria-hidden="true"
-                />
-              )}
-            </button>
-          );
-        })}
-      </div>
-
-      <div
-        id={panelId(activeTab)}
-        role="tabpanel"
-        aria-labelledby={tabId(activeTab)}
-        tabIndex={0}
-        className="focus-visible:outline-none"
-      >
-        {children}
-      </div>
-    </div>
-  );
-}
+export { Tabs } from "../tabs/Tabs";
+export type { TabsProps, TabItem } from "../tabs/Tabs";

package/src/library/ImportResourceDialog.tsx

@@ -0,0 +1,227 @@
+"use client";
+
+import { useCallback, useEffect, useRef } from "react";
+import { cn } from "@stigmer/theme";
+import { toast } from "../feedback/toast";
+import { useImportResource } from "./useImportResource";
+import type { ApplyResourceResult } from "./useApplyResource";
+
+// ---------------------------------------------------------------------------
+// Props
+// ---------------------------------------------------------------------------
+
+/** Props for {@link ImportResourceDialog}. */
+export interface ImportResourceDialogProps {
+  /** Whether the dialog is open. */
+  readonly open: boolean;
+  /** Called when the dialog should open or close. */
+  readonly onOpenChange: (open: boolean) => void;
+  /** Target organization slug to apply the imported resource to. */
+  readonly org: string;
+  /** Called after a successful import. Use for navigation or list refresh. */
+  readonly onSuccess?: (result: ApplyResourceResult) => void;
+}
+
+// ---------------------------------------------------------------------------
+// Component
+// ---------------------------------------------------------------------------
+
+/**
+ * Modal dialog for importing a Stigmer resource from a YAML or JSON file.
+ *
+ * Workflow:
+ * 1. User selects a `.yaml`, `.yml`, or `.json` file via the file picker
+ * 2. The file is validated and a preview card shows the detected resource
+ * 3. User confirms the import, which calls `apply()` on the target org
+ * 4. On success: toast notification and `onSuccess` callback
+ * 5. On error: inline error message with guidance
+ *
+ * Uses the native `<dialog>` element for built-in focus trapping, Escape
+ * key handling, and backdrop — consistent with {@link ConfirmDialog}.
+ *
+ * Zero Console dependencies — safe for platform builder embedding.
+ *
+ * @example
+ * ```tsx
+ * const [open, setOpen] = useState(false);
+ *
+ * <ImportResourceDialog
+ *   open={open}
+ *   onOpenChange={setOpen}
+ *   org={activeOrg}
+ *   onSuccess={(result) => {
+ *     router.push(`/library/${result.kind === "Agent" ? "agents" : "mcp-servers"}`);
+ *   }}
+ * />
+ * ```
+ */
+export function ImportResourceDialog({
+  open,
+  onOpenChange,
+  org,
+  onSuccess,
+}: ImportResourceDialogProps) {
+  const dialogRef = useRef<HTMLDialogElement>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const { readFile, preview, error, reset, apply, isApplying } = useImportResource();
+
+  // Sync dialog open state with the native <dialog> element.
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (!dialog) return;
+    if (open && !dialog.open) {
+      dialog.showModal();
+    } else if (!open && dialog.open) {
+      dialog.close();
+    }
+  }, [open]);
+
+  // Reset state when the dialog opens.
+  useEffect(() => {
+    if (open) {
+      reset();
+      if (fileInputRef.current) {
+        fileInputRef.current.value = "";
+      }
+    }
+  }, [open, reset]);
+
+  const handleCancel = useCallback(
+    (e: React.SyntheticEvent) => {
+      e.preventDefault();
+      onOpenChange(false);
+    },
+    [onOpenChange],
+  );
+
+  const handleClose = useCallback(() => {
+    onOpenChange(false);
+  }, [onOpenChange]);
+
+  const handleFileChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0];
+      if (file) {
+        readFile(file);
+      }
+    },
+    [readFile],
+  );
+
+  const handleConfirm = useCallback(async () => {
+    try {
+      const result = await apply(org);
+      toast.success(`${result.kind === "Agent" ? "Agent" : "MCP Server"} "${result.name}" imported successfully`);
+      onOpenChange(false);
+      onSuccess?.(result);
+    } catch {
+      // error is set by the hook
+    }
+  }, [apply, org, onOpenChange, onSuccess]);
+
+  return (
+    <dialog
+      ref={dialogRef}
+      onCancel={handleCancel}
+      className={cn(
+        "fixed inset-0 z-50 m-auto w-full max-w-md rounded-lg border border-border bg-popover p-0 text-popover-foreground shadow-lg",
+        "backdrop:bg-black/50",
+        "open:animate-in open:fade-in-0 open:zoom-in-95",
+      )}
+    >
+      <div className="flex flex-col gap-5 p-6">
+        {/* Header */}
+        <div className="flex flex-col gap-1">
+          <h3 className="text-base font-semibold text-foreground">
+            Import resource
+          </h3>
+          <p className="text-sm text-muted-foreground">
+            Select a YAML or JSON file containing a Stigmer Agent or MCP Server definition.
+          </p>
+        </div>
+
+        {/* File picker */}
+        <div>
+          <input
+            ref={fileInputRef}
+            type="file"
+            accept=".yaml,.yml,.json"
+            onChange={handleFileChange}
+            className={cn(
+              "w-full rounded-md border border-input bg-background px-3 py-2 text-sm text-foreground",
+              "file:mr-3 file:rounded-md file:border-0 file:bg-primary file:px-2.5 file:py-1 file:text-xs file:font-medium file:text-primary-foreground",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            )}
+            aria-label="Select resource file"
+          />
+        </div>
+
+        {/* Validation error */}
+        {error && (
+          <div
+            role="alert"
+            className="rounded-md border border-destructive bg-card px-3 py-2.5 text-sm text-destructive"
+          >
+            {error}
+          </div>
+        )}
+
+        {/* Preview card */}
+        {preview && !error && (
+          <div className="rounded-md border border-border bg-card px-4 py-3">
+            <div className="flex items-center gap-2">
+              <span className="inline-flex rounded bg-muted px-1.5 py-0.5 text-xs font-medium text-muted-foreground">
+                {preview.kind === "Agent" ? "Agent" : "MCP Server"}
+              </span>
+              <span className="inline-flex rounded bg-muted px-1.5 py-0.5 text-xs text-muted-foreground uppercase">
+                {preview.format}
+              </span>
+            </div>
+            <p className="mt-1.5 text-sm font-medium text-foreground">
+              {preview.name}
+            </p>
+            {preview.slug && preview.slug !== preview.name && (
+              <p className="mt-0.5 text-xs text-muted-foreground">
+                {preview.slug}
+              </p>
+            )}
+            <p className="mt-1.5 text-xs text-muted-foreground">
+              Will be applied to <span className="font-medium text-foreground">{org}</span>
+            </p>
+          </div>
+        )}
+
+        {/* Actions */}
+        <div className="flex justify-end gap-2">
+          <button
+            type="button"
+            onClick={handleClose}
+            disabled={isApplying}
+            className={cn(
+              "rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
+              "border border-input bg-background text-foreground",
+              "hover:bg-accent hover:text-accent-foreground",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "disabled:pointer-events-none disabled:opacity-50",
+            )}
+          >
+            Cancel
+          </button>
+          <button
+            type="button"
+            onClick={handleConfirm}
+            disabled={!preview || !!error || isApplying}
+            className={cn(
+              "rounded-md px-3 py-1.5 text-sm font-medium transition-colors",
+              "bg-primary text-primary-foreground hover:bg-primary-hover",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+              "disabled:pointer-events-none disabled:opacity-50",
+            )}
+          >
+            {isApplying ? "Importing\u2026" : "Import"}
+          </button>
+        </div>
+      </div>
+    </dialog>
+  );
+}

package/src/library/index.ts

@@ -7,12 +7,6 @@ export {
 export { ScopeToggle } from "./ScopeToggle";
 export type { ScopeToggleProps } from "./ScopeToggle";
 
-export { ResourceListView } from "./ResourceListView";
-export type {
-  ResourceListViewProps,
-  ResourceListLayout,
-} from "./ResourceListView";
-
 export { ResourceCountCard } from "./ResourceCountCard";
 export type { ResourceCountCardProps } from "./ResourceCountCard";
 
@@ -39,6 +33,8 @@ export type { ParsedResource } from "./parse-resource-yaml";
 export {
   serializeAgentYaml,
   serializeMcpServerYaml,
+  serializeAgentInputYaml,
+  serializeMcpServerInputYaml,
 } from "./serialize-resource-yaml";
 
 export { useApplyResource } from "./useApplyResource";
@@ -48,6 +44,22 @@ export type {
   PushSkillParams,
 } from "./useApplyResource";
 
+export { useExportResource } from "./useExportResource";
+export type {
+  UseExportResourceOptions,
+  UseExportResourceReturn,
+} from "./useExportResource";
+
+export { useImportResource } from "./useImportResource";
+export type {
+  ImportFormat,
+  ImportPreview,
+  UseImportResourceReturn,
+} from "./useImportResource";
+
+export { ImportResourceDialog } from "./ImportResourceDialog";
+export type { ImportResourceDialogProps } from "./ImportResourceDialog";
+
 export { VisibilityToggle } from "./VisibilityToggle";
 export type { VisibilityToggleProps } from "./VisibilityToggle";
 
@@ -56,5 +68,3 @@ export type {
   VisibilityResourceKind,
   UseUpdateVisibilityReturn,
 } from "./useUpdateVisibility";
-
-export type { ResourceListScope } from "../search";