@stigmer/react 0.4.8 → 0.5.0

package/src/index.ts

@@ -256,7 +256,7 @@ export type {
   SessionComposerSubmitContext,
 } from "./composer";
 
-// MCP Server — data hook, count hook, list hook, search hook, picker, config panel, tool selector, detail view, setup orchestration, and OAuth connect
+// MCP Server — data hook, count hook, list hook, search hook, picker, config panel, tool selector, detail view, setup orchestration, OAuth connect, and update
 export {
   useMcpServer,
   useMcpServerCount,
@@ -273,7 +273,11 @@ export {
   McpServerConfigPanel,
   McpServerDetailView,
   McpServerConnectDialog,
+  McpServerCreationWizard,
   McpToolSelector,
+  useCreateMcpServer,
+  useUpdateMcpServer,
+  mcpServerToInput,
   toServerKey,
 } from "./mcp-server";
 export type {
@@ -307,9 +311,14 @@ export type {
   UseOAuthGrantStatusReturn,
   UseDisconnectOAuthReturn,
   McpServerAuthMode,
+  UseCreateMcpServerReturn,
+  UseUpdateMcpServerReturn,
+  McpServerCreationWizardProps,
+  McpServerCreationResult,
+  McpServerWizardData,
 } from "./mcp-server";
 
-// Skill — data hook, count hook, list hook, search hook, picker, and detail view component
+// Skill — data hooks, upload, file browser, and mutation
 export {
   useSkill,
   useSkillCount,
@@ -317,6 +326,15 @@ export {
   useSkillSearch,
   SkillPicker,
   SkillDetailView,
+  usePushSkill,
+  useSkillUpload,
+  useSkillArtifact,
+  useSkillVersions,
+  useSkillDiff,
+  useSkillDuplicateCheck,
+  SkillUploader,
+  SkillFileBrowser,
+  SkillDiffDialog,
 } from "./skill";
 export type {
   UseSkillReturn,
@@ -328,6 +346,19 @@ export type {
   UseSkillSearchReturn,
   SkillPickerProps,
   SkillDetailViewProps,
+  PushSkillInput,
+  UsePushSkillReturn,
+  SkillUploadPreview,
+  SkillFileEntry,
+  UseSkillUploadReturn,
+  UseSkillArtifactReturn,
+  UseSkillVersionsReturn,
+  UseSkillDiffReturn,
+  UseSkillDuplicateCheckReturn,
+  SkillDiffDialogProps,
+  SkillDiffDialogState,
+  SkillUploaderProps,
+  SkillFileBrowserProps,
 } from "./skill";
 
 // GitHub — OAuth connection, repo picker, and hooks
@@ -350,7 +381,7 @@ export type {
   GitHubRepoPickerProps,
 } from "./github";
 
-// Agent — data hook, count hook, list hook, search hook, picker, detail view, env form, setup orchestration, env diffing, and default agent
+// Agent — data hook, count hook, list hook, search hook, picker, detail view, env form, setup orchestration, env diffing, default agent, creation wizard, update
 export {
   useAgent,
   useAgentCount,
@@ -362,6 +393,10 @@ export {
   diffEnv,
   useAgentSetup,
   useDefaultAgent,
+  useCreateAgent,
+  useUpdateAgent,
+  agentToInput,
+  AgentCreationWizard,
 } from "./agent";
 export type {
   UseAgentReturn,
@@ -384,6 +419,11 @@ export type {
   SubmitEnvVarsOptions,
   UseAgentSetupReturn,
   UseDefaultAgentReturn,
+  UseCreateAgentReturn,
+  UseUpdateAgentReturn,
+  AgentCreationWizardProps,
+  AgentCreationResult,
+  AgentWizardData,
 } from "./agent";
 
 // Environment — data hooks, list hook, personal convenience hook, secret reveal, variable management, env var form, system env vars, and styled components
@@ -691,7 +731,6 @@ export {
   useBreadcrumbLabel,
   useBreadcrumbOverride,
   ScopeToggle,
-  ResourceListView,
   ResourceCountCard,
   detectStigmerResource,
   useDetectStigmerResource,
@@ -701,16 +740,18 @@ export {
   parseResourceYaml,
   serializeAgentYaml,
   serializeMcpServerYaml,
+  serializeAgentInputYaml,
+  serializeMcpServerInputYaml,
   useApplyResource,
+  useExportResource,
+  useImportResource,
+  ImportResourceDialog,
   VisibilityToggle,
   useUpdateVisibility,
 } from "./library";
 export type {
   ScopeToggleProps,
-  ResourceListViewProps,
-  ResourceListLayout,
   ResourceCountCardProps,
-  ResourceListScope,
   StigmerResourceKind,
   StigmerResourceDetection,
   SkillPackageDetection,
@@ -719,11 +760,42 @@ export type {
   UseApplyResourceReturn,
   ApplyResourceResult,
   PushSkillParams,
+  UseExportResourceOptions,
+  UseExportResourceReturn,
+  ImportFormat,
+  ImportPreview,
+  UseImportResourceReturn,
+  ImportResourceDialogProps,
   VisibilityToggleProps,
   VisibilityResourceKind,
   UseUpdateVisibilityReturn,
 } from "./library";
 
+// Action menu — compound component for resource item actions
+export { ActionMenu } from "./action-menu";
+export type {
+  ActionMenuProps,
+  ActionMenuTriggerProps,
+  ActionMenuContentProps,
+  ActionMenuItemProps,
+  ActionMenuSeparatorProps,
+  ActionMenuGroupProps,
+} from "./action-menu";
+
+// Feedback — toast notification system wrapping Sonner
+export { StigmerToaster, toast } from "./feedback";
+export type { StigmerToasterProps } from "./feedback";
+
+// Empty state — reusable empty/zero/permission/error state primitives
+export { EmptyState, useEmptyState } from "./empty-state";
+export type {
+  EmptyStateVariant,
+  EmptyStateAction,
+  EmptyStateProps,
+  UseEmptyStateOptions,
+  UseEmptyStateReturn,
+} from "./empty-state";
+
 // Search — shared search/list/count infrastructure re-exported for public API surface
 export type {
   UseResourceSearchOptions,
@@ -772,8 +844,10 @@ export type {
   UseCreateAgentInstanceReturn,
 } from "./agent-instance";
 
-// Runner — data hooks, action hooks, styled picker, admin list panel, and phase utilities
+// Runner — data hooks, action hooks, styled picker, admin list panel, detail view, and phase utilities
 export {
+  useRunner,
+  RunnerDetailView,
   useRunnerList,
   useLaunchLocalRunner,
   useRunnerCredential,
@@ -783,6 +857,9 @@ export {
   RunnerPicker,
   RunnerFileBrowser,
   RunnerListPanel,
+  RunnerIcon,
+  PhaseBadge,
+  formatRelativeTime,
   phaseLabel,
   phaseDotColor,
   isActivePhase,
@@ -790,6 +867,9 @@ export {
   PHASE_SORT_ORDER,
 } from "./runner";
 export type {
+  UseRunnerReturn,
+  UseRunnerOptions,
+  RunnerDetailViewProps,
   UseRunnerListOptions,
   UseRunnerListReturn,
   UseLaunchLocalRunnerOptions,
@@ -805,4 +885,186 @@ export type {
   RunnerPickerProps,
   RunnerFileBrowserProps,
   RunnerListPanelProps,
+  RunnerSortKey,
+  RunnerIconProps,
+  PhaseBadgeProps,
 } from "./runner";
+
+// Tabs — accessible tabbed panel primitive
+export { Tabs } from "./tabs";
+export type { TabsProps, TabItem } from "./tabs";
+
+// Resource Detail — headless hooks, action bar, and composed shell for resource detail pages
+export {
+  useCopyResource,
+  useConfirmAction,
+  useDeleteResource,
+  ResourceActionBar,
+  ResourceDetailShell,
+  Section,
+  ConfirmDialog,
+} from "./resource-detail";
+export type {
+  AdditionalTab,
+  DetailAction,
+  ResourceHeaderMeta,
+  ConfirmOptions,
+  ConfirmState,
+  ResourceDetailShellProps,
+  SectionProps,
+  UseCopyResourceReturn,
+  UseConfirmActionReturn,
+  DeletableResourceKind,
+  UseDeleteResourceReturn,
+  ResourceActionBarProps,
+  ConfirmDialogProps,
+} from "./resource-detail";
+
+// Resource Creation — shared wizard infrastructure for multi-step creation flows
+export {
+  useWizardState,
+  useTemplateFilter,
+  WizardShell,
+  WizardNav,
+  StepIndicator,
+  TemplateCard,
+  TemplateGallery,
+  CreationPicker,
+  TEMPLATE_CATEGORY_LABELS,
+  AGENT_TEMPLATES,
+  MCP_SERVER_TEMPLATES,
+} from "./resource-creation";
+export type {
+  EnvVarEntry,
+  KeyValueEntry,
+  WizardStepDef,
+  WizardState,
+  WizardShellProps,
+  UseWizardStateOptions,
+  UseWizardStateReturn,
+  UseTemplateFilterOptions,
+  UseTemplateFilterReturn,
+  WizardNavProps,
+  StepIndicatorProps,
+  ResourceTemplate,
+  TemplateCategory,
+  TemplateCardProps,
+  TemplateGalleryProps,
+  CreationPickerProps,
+  CreationPath,
+} from "./resource-creation";
+
+// Dependency Graph — visual tree of agent dependencies (MCP servers, skills, sub-agents)
+export { DependencyGraph, useDependencyGraph } from "./dependency-graph";
+export type {
+  NodeKind,
+  DependencyNode,
+  DependencyTree,
+  DependencyGraphProps,
+  UseDependencyGraphOptions,
+  UseDependencyGraphReturn,
+} from "./dependency-graph";
+
+// Version History — generic timeline, diff infrastructure for versioned resources
+export {
+  VersionTimeline,
+  VersionTimelineEntry,
+  DiffViewer,
+  DiffFileList,
+  DiffSummary,
+  MultiFileDiffView,
+  computeDiff,
+  computeMultiFileDiff,
+} from "./version-history";
+export type {
+  VersionEntry,
+  VersionTimelineProps,
+  VersionTimelineEntryProps,
+  DiffViewerProps,
+  DiffFileListProps,
+  DiffSummaryProps,
+  MultiFileDiffViewProps,
+  DiffLine,
+  DiffHunk,
+  FileDiffEntry,
+  MultiFileDiffResult,
+  DiffViewMode,
+} from "./version-history";
+
+// Inline Edit — click-to-edit field primitives for detail page inline editing
+export {
+  InlineEditText,
+  InlineEditTextarea,
+  InlineEditImage,
+  InlineEditSelect,
+  InlineEditKeyValue,
+  InlineEditResourceList,
+  useInlineFieldSave,
+} from "./inline-edit";
+export type {
+  InlineEditTextProps,
+  InlineEditTextareaProps,
+  InlineEditImageProps,
+  InlineEditSelectProps,
+  InlineEditKeyValueProps,
+  InlineEditResourceListProps,
+  UseInlineFieldSaveReturn,
+  InlineEditBaseProps,
+  KeyValueRow,
+  ResourceRefRow,
+  SelectOption,
+} from "./inline-edit";
+
+// Resource Workbench — headless hooks, view components, and composed shell for resource collection management
+export {
+  useViewPreference,
+  useResourceCollection,
+  useResourceFilters,
+  useResourceSelection,
+  StatusBadge,
+  ColumnHeader,
+  SelectionCheckbox,
+  ResourceTable,
+  ResourceCards,
+  ResourceList,
+  BulkActionBar,
+  FilterBar,
+  ViewSwitcher,
+  ResourceInspector,
+  ResourceWorkbench,
+  ResourceAvatar,
+} from "./resource-workbench";
+export type {
+  ViewMode,
+  StatusPhase,
+  WorkbenchColumnDef,
+  FilterOperator,
+  FilterValue,
+  FilterDef,
+  FilterOption,
+  SortDirection,
+  SortValue,
+  SortDef,
+  ResourceAction,
+  BulkAction,
+  WorkbenchState,
+  UseViewPreferenceReturn,
+  UseResourceCollectionOptions,
+  UseResourceCollectionReturn,
+  UseResourceFiltersOptions,
+  UseResourceFiltersReturn,
+  FilterSortState,
+  UseResourceSelectionReturn,
+  StatusBadgeProps,
+  ColumnHeaderProps,
+  SelectionCheckboxProps,
+  ResourceTableProps,
+  ResourceCardsProps,
+  ResourceListProps,
+  BulkActionBarProps,
+  FilterBarProps,
+  ViewSwitcherProps,
+  ResourceInspectorProps,
+  ResourceWorkbenchProps,
+  ResourceAvatarProps,
+} from "./resource-workbench";

package/src/inline-edit/InlineEditImage.tsx

@@ -0,0 +1,208 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+import { cn } from "@stigmer/theme";
+import type { InlineEditBaseProps } from "./types";
+
+/** Props for {@link InlineEditImage}. */
+export interface InlineEditImageProps extends InlineEditBaseProps {
+  /** Current icon/image URL (empty string = no icon). */
+  readonly value: string;
+  /** Called with the new URL when the user confirms. */
+  readonly onSave: (newValue: string) => Promise<boolean>;
+  /** Fallback element when there is no image URL. */
+  readonly fallback?: React.ReactNode;
+  /** Size of the avatar. @default "md" */
+  readonly size?: "sm" | "md";
+}
+
+/**
+ * Click-to-edit image URL field, displayed as an avatar.
+ *
+ * Shows the current image (or fallback icon). On click, reveals
+ * an input for entering a new image URL with confirm/cancel.
+ */
+export function InlineEditImage({
+  value,
+  onSave,
+  fallback,
+  size = "md",
+  disabled,
+  isSaving,
+  error,
+  className,
+}: InlineEditImageProps) {
+  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 (trimmed && !isValidUrl(trimmed)) {
+      setLocalError("Enter a valid URL");
+      return;
+    }
+    const ok = await onSave(trimmed);
+    if (ok) setIsEditing(false);
+  }, [draft, value, 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 sizeClasses = size === "sm" ? "size-6" : "size-8";
+  const displayError = localError || error;
+
+  if (disabled || !isEditing) {
+    return (
+      <div className={cn("group/inline-edit inline-flex", className)}>
+        <button
+          type="button"
+          onClick={() => { if (!disabled) setIsEditing(true); }}
+          disabled={disabled}
+          className={cn(
+            "relative rounded-md p-0.5 transition-colors",
+            !disabled && "hover:bg-accent-hover cursor-pointer",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          )}
+          aria-label="Change icon"
+        >
+          {value ? (
+            <img
+              src={value}
+              alt=""
+              className={cn(sizeClasses, "shrink-0 rounded object-cover")}
+            />
+          ) : (
+            fallback ?? <ImagePlaceholder className={cn(sizeClasses, "text-muted-foreground")} />
+          )}
+          {!disabled && (
+            <span className="absolute -bottom-0.5 -right-0.5 flex size-4 items-center justify-center rounded-full bg-muted text-muted-foreground opacity-0 transition-opacity group-hover/inline-edit:opacity-100">
+              <PencilIcon className="size-2.5" />
+            </span>
+          )}
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("flex flex-col gap-1", className)}>
+      <div className="flex items-center gap-1.5">
+        <input
+          ref={inputRef}
+          type="url"
+          value={draft}
+          onChange={(e) => { setDraft(e.target.value); setLocalError(null); }}
+          onKeyDown={handleKeyDown}
+          disabled={isSaving}
+          placeholder="https://example.com/icon.png"
+          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",
+            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 disabled:opacity-50",
+            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          )}>
+          <XIcon className="size-3.5" />
+        </button>
+        {draft && (
+          <button type="button" onClick={() => setDraft("")} disabled={isSaving} aria-label="Clear"
+            className="text-xs text-muted-foreground underline decoration-muted-foreground/40 underline-offset-2 hover:text-foreground">
+            Clear
+          </button>
+        )}
+      </div>
+      {displayError && (
+        <p className="px-1 text-xs text-destructive" role="alert">{displayError}</p>
+      )}
+    </div>
+  );
+}
+
+function isValidUrl(s: string): boolean {
+  try { new URL(s); return true; } catch { return false; }
+}
+
+// ---------------------------------------------------------------------------
+// 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 ImagePlaceholder({ 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">
+      <rect x="2" y="2" width="12" height="12" rx="1.5" />
+      <circle cx="5.5" cy="5.5" r="1" />
+      <path d="m14 10.5-3-3L4 14" />
+    </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>
+  );
+}