@stigmer/react 0.5.0 → 1.0.0

package/src/library/VisibilityToggle.tsx

@@ -109,8 +109,6 @@ export function VisibilityToggle({
     [handleSelect],
   );
 
-  const currentIndex = OPTIONS.findIndex((o) => o.value === visibility);
-
   return (
     <div className={cn("inline-flex flex-col gap-1.5", className)}>
       <div
@@ -124,6 +122,8 @@ export function VisibilityToggle({
       >
         {OPTIONS.map((option, index) => {
           const isSelected = visibility === option.value;
+          const isPublicOption =
+            option.value === ApiResourceVisibility.visibility_public;
 
           return (
             <button
@@ -139,26 +139,26 @@ export function VisibilityToggle({
               onClick={() => handleSelect(option.value)}
               onKeyDown={(e) => handleKeyDown(e, index)}
               className={cn(
-                "cursor-pointer rounded-sm px-3 py-1 text-xs font-medium transition-colors",
+                "inline-flex cursor-pointer items-center gap-1 rounded-sm px-2.5 py-1 text-xs font-medium transition-colors",
                 "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-                isSelected && option.value === ApiResourceVisibility.visibility_public
+                isSelected && isPublicOption
                   ? "bg-emerald-100 text-emerald-800 shadow-sm dark:bg-emerald-900/40 dark:text-emerald-300"
                   : isSelected
-                    ? "bg-background text-foreground shadow-sm"
+                    ? "bg-amber-50 text-amber-800 shadow-sm dark:bg-amber-900/30 dark:text-amber-300"
                     : "text-muted-foreground hover:text-foreground",
               )}
             >
               {isPending && isSelected ? (
-                <span className="inline-flex items-center gap-1">
-                  <span
-                    className="inline-block h-3 w-3 animate-spin rounded-full border-2 border-current border-t-transparent"
-                    aria-hidden="true"
-                  />
-                  {option.label}
-                </span>
+                <span
+                  className="inline-block size-3 animate-spin rounded-full border-2 border-current border-t-transparent"
+                  aria-hidden="true"
+                />
+              ) : isPublicOption ? (
+                <GlobeIcon className="size-3" />
               ) : (
-                option.label
+                <LockIcon className="size-3" />
               )}
+              {option.label}
             </button>
           );
         })}
@@ -204,3 +204,44 @@ export function VisibilityToggle({
     </div>
   );
 }
+
+// ---------------------------------------------------------------------------
+// Icons — inline SVGs following the SDK pattern (no icon library dependency)
+// ---------------------------------------------------------------------------
+
+function LockIcon({ 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="3.5" y="7" width="9" height="7" rx="1.5" />
+      <path d="M5.5 7V5a2.5 2.5 0 0 1 5 0v2" />
+    </svg>
+  );
+}
+
+function GlobeIcon({ 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"
+    >
+      <circle cx="8" cy="8" r="6" />
+      <path d="M2 8h12" />
+      <path d="M8 2c1.66 1.46 2.6 3.63 2.6 6s-.94 4.54-2.6 6c-1.66-1.46-2.6-3.63-2.6-6s.94-4.54 2.6-6Z" />
+    </svg>
+  );
+}

package/src/library/index.ts

@@ -37,6 +37,8 @@ export {
   serializeMcpServerInputYaml,
 } from "./serialize-resource-yaml";
 
+export { serializeWorkflowYaml, parseWorkflowYaml } from "../workflow/serialize-workflow-yaml";
+
 export { useApplyResource } from "./useApplyResource";
 export type {
   UseApplyResourceReturn,

package/src/library/useExportResource.ts

@@ -4,8 +4,10 @@ import { useCallback, useMemo } from "react";
 import { parse as parseYaml } from "yaml";
 import type { Agent } from "@stigmer/protos/ai/stigmer/agentic/agent/v1/api_pb";
 import type { McpServer } from "@stigmer/protos/ai/stigmer/agentic/mcpserver/v1/api_pb";
+import type { Workflow } from "@stigmer/protos/ai/stigmer/agentic/workflow/v1/api_pb";
 import { toast } from "../feedback/toast";
 import { serializeAgentYaml, serializeMcpServerYaml } from "./serialize-resource-yaml";
+import { serializeWorkflowYaml } from "../workflow/serialize-workflow-yaml";
 
 // ---------------------------------------------------------------------------
 // Types
@@ -14,9 +16,9 @@ import { serializeAgentYaml, serializeMcpServerYaml } from "./serialize-resource
 /** Options for {@link useExportResource}. */
 export interface UseExportResourceOptions {
   /** The resource kind — determines which serializer is used. */
-  readonly kind: "Agent" | "McpServer";
+  readonly kind: "Agent" | "McpServer" | "Workflow";
   /** The proto resource to export, or `null` when not yet loaded. */
-  readonly resource: Agent | McpServer | null;
+  readonly resource: Agent | McpServer | Workflow | null;
 }
 
 /** Return value of {@link useExportResource}. */
@@ -76,13 +78,13 @@ export function useExportResource({
   const yaml = useMemo<string | null>(() => {
     if (!resource) return null;
     if (kind === "Agent") return serializeAgentYaml(resource as Agent);
+    if (kind === "Workflow") return serializeWorkflowYaml(resource as Workflow);
     return serializeMcpServerYaml(resource as McpServer);
   }, [kind, resource]);
 
   const json = useMemo<string | null>(() => {
     if (!resource) return null;
-    if (kind === "Agent") return serializeResourceJson(resource as Agent, "Agent");
-    return serializeResourceJson(resource as McpServer, "McpServer");
+    return serializeResourceJson(resource, kind);
   }, [kind, resource]);
 
   const slug = useMemo<string>(() => {
@@ -131,12 +133,13 @@ export function useExportResource({
  * to the YAML structure (snake_case fields, no status).
  */
 function serializeResourceJson(
-  resource: Agent | McpServer,
-  kind: "Agent" | "McpServer",
+  resource: Agent | McpServer | Workflow,
+  kind: "Agent" | "McpServer" | "Workflow",
 ): string {
-  const yamlStr = kind === "Agent"
-    ? serializeAgentYaml(resource as Agent)
-    : serializeMcpServerYaml(resource as McpServer);
+  let yamlStr: string;
+  if (kind === "Agent") yamlStr = serializeAgentYaml(resource as Agent);
+  else if (kind === "Workflow") yamlStr = serializeWorkflowYaml(resource as Workflow);
+  else yamlStr = serializeMcpServerYaml(resource as McpServer);
 
   const doc = parseYaml(yamlStr);
   return JSON.stringify(doc, null, 2);