@workflow/web-shared 4.1.0-beta.64 → 4.1.0-beta.65

package/src/components/ui/load-more-button.tsx

@@ -0,0 +1,38 @@
+'use client';
+
+import { Spinner } from './spinner';
+
+const STYLES = `.wf-load-more{appearance:none;-webkit-appearance:none;border:none;display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 12px;border-radius:6px;font-size:13px;font-weight:500;line-height:20px;color:var(--ds-gray-1000);background:var(--ds-background-100);box-shadow:0 0 0 1px var(--ds-gray-400);cursor:pointer;white-space:nowrap;gap:6px;transition:background 150ms}.wf-load-more:hover{background:var(--ds-gray-alpha-200)}.wf-load-more:disabled{opacity:.6;cursor:default}.wf-load-more:disabled:hover{background:var(--ds-background-100)}`;
+
+interface LoadMoreButtonProps {
+  loading?: boolean;
+  onClick?: () => void;
+  label?: string;
+  loadingLabel?: string;
+}
+
+/**
+ * A "Load more" button matching Geist's Button type="secondary" size="small"
+ * with a spinner prefix when loading.
+ */
+export function LoadMoreButton({
+  loading = false,
+  onClick,
+  label = 'Load more',
+  loadingLabel = 'Loading...',
+}: LoadMoreButtonProps) {
+  return (
+    <>
+      <style dangerouslySetInnerHTML={{ __html: STYLES }} />
+      <button
+        type="button"
+        onClick={onClick}
+        disabled={loading}
+        className="wf-load-more"
+      >
+        {loading && <Spinner size={14} />}
+        {loading ? loadingLabel : label}
+      </button>
+    </>
+  );
+}

package/src/components/ui/menu-dropdown.tsx

@@ -2,6 +2,8 @@
 
 import { useEffect, useRef, useState } from 'react';
 
+const STYLES = `.wf-menu-btn{appearance:none;-webkit-appearance:none;border:none;display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 12px;border-radius:6px;font-size:14px;font-weight:500;line-height:20px;color:var(--ds-gray-1000);background:var(--ds-background-100);box-shadow:0 0 0 1px var(--ds-gray-400);cursor:pointer;white-space:nowrap;transition:background 150ms}.wf-menu-btn:hover{background:var(--ds-gray-alpha-200)}.wf-menu-item{appearance:none;-webkit-appearance:none;border:none;display:flex;align-items:center;width:100%;height:40px;padding:0 8px;border-radius:6px;font-size:14px;color:var(--ds-gray-1000);background:transparent;cursor:pointer;transition:background 150ms}.wf-menu-item:hover{background:var(--ds-gray-alpha-100)}`;
+
 export interface MenuDropdownOption<T extends string = string> {
   value: T;
   label: string;
@@ -40,12 +42,7 @@ export function MenuDropdown<T extends string = string>({
 
   return (
     <div ref={ref} style={{ position: 'relative', flexShrink: 0 }}>
-      <style>{`
-        .wf-menu-btn{appearance:none;-webkit-appearance:none;border:none;display:inline-flex;align-items:center;justify-content:center;height:40px;padding:0 12px;border-radius:6px;font-size:14px;font-weight:500;line-height:20px;color:var(--ds-gray-1000);background:var(--ds-background-100);box-shadow:0 0 0 1px var(--ds-gray-400);cursor:pointer;white-space:nowrap;transition:background 150ms}
-        .wf-menu-btn:hover{background:var(--ds-gray-alpha-200)}
-        .wf-menu-item{appearance:none;-webkit-appearance:none;border:none;display:flex;align-items:center;width:100%;height:40px;padding:0 8px;border-radius:6px;font-size:14px;color:var(--ds-gray-1000);background:transparent;cursor:pointer;transition:background 150ms}
-        .wf-menu-item:hover{background:var(--ds-gray-alpha-100)}
-      `}</style>
+      <style dangerouslySetInnerHTML={{ __html: STYLES }} />
 
       <button
         type="button"

package/src/components/ui/spinner.tsx

@@ -0,0 +1,76 @@
+const KEYFRAMES = `@keyframes wf-spinner-fade{0%{opacity:1}100%{opacity:.15}}`;
+
+/**
+ * Spinner matching Geist's multi-line fade spinner.
+ * At size ≤12: 8 lines, ≤16: 10 lines, else: 12 lines.
+ */
+export function Spinner({
+  size = 14,
+  color,
+}: {
+  size?: number;
+  color?: string;
+}) {
+  const config =
+    size <= 12
+      ? {
+          count: 8,
+          angle: 45,
+          delays: [-875, -750, -625, -500, -375, -250, -125, 0],
+          duration: 1000,
+          lineW: 3,
+          lineH: 1.5,
+        }
+      : size <= 16
+        ? {
+            count: 10,
+            angle: 36,
+            delays: [-900, -800, -700, -600, -500, -400, -300, -200, -100, 0],
+            duration: 1000,
+            lineW: 4,
+            lineH: 1.5,
+          }
+        : {
+            count: 12,
+            angle: 30,
+            delays: [
+              -1100, -1000, -900, -800, -700, -600, -500, -400, -300, -200,
+              -100, 0,
+            ],
+            duration: 1200,
+            lineW: size * 0.24,
+            lineH: size * 0.08,
+          };
+
+  return (
+    <span
+      style={{
+        display: 'inline-flex',
+        position: 'relative',
+        width: size,
+        height: size,
+      }}
+    >
+      <style dangerouslySetInnerHTML={{ __html: KEYFRAMES }} />
+      {config.delays.map((delay, i) => (
+        <span
+          key={delay}
+          style={{
+            position: 'absolute',
+            left: '50%',
+            top: '50%',
+            width: config.lineW,
+            height: config.lineH,
+            marginLeft: -config.lineW / 2,
+            marginTop: -config.lineH / 2,
+            borderRadius: 1,
+            backgroundColor: color ?? 'var(--ds-gray-700)',
+            transform: `rotate(${i * config.angle}deg) translate(${size * 0.36}px)`,
+            animation: `wf-spinner-fade ${config.duration}ms linear infinite`,
+            animationDelay: `${delay}ms`,
+          }}
+        />
+      ))}
+    </span>
+  );
+}

package/src/components/workflow-trace-view.tsx

@@ -31,6 +31,7 @@ import {
 } from './trace-viewer';
 import type { Span } from './trace-viewer/types';
 import { Skeleton } from './ui/skeleton';
+import { Spinner } from './ui/spinner';
 import {
   getCustomSpanClassName,
   getCustomSpanEventClassName,
@@ -719,25 +720,7 @@ function TraceViewerFooter({
         className="flex items-center justify-center gap-2 py-3 text-xs"
         style={style}
       >
-        <svg
-          className="h-3.5 w-3.5 animate-spin"
-          viewBox="0 0 24 24"
-          fill="none"
-        >
-          <circle
-            className="opacity-25"
-            cx="12"
-            cy="12"
-            r="10"
-            stroke="currentColor"
-            strokeWidth="4"
-          />
-          <path
-            className="opacity-75"
-            fill="currentColor"
-            d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
-          />
-        </svg>
+        <Spinner size={14} />
         Loading more events…
       </div>
     );
@@ -785,6 +768,7 @@ export const WorkflowTraceViewer = ({
   isLoadingMoreSpans = false,
   encryptionKey,
   onDecrypt,
+  isDecrypting = false,
 }: {
   run: WorkflowRun;
   events: Event[];
@@ -823,6 +807,8 @@ export const WorkflowTraceViewer = ({
   encryptionKey?: Uint8Array;
   /** Callback to initiate decryption of encrypted run data */
   onDecrypt?: () => void;
+  /** Whether the encryption key is currently being fetched */
+  isDecrypting?: boolean;
 }) => {
   const [selectedSpan, setSelectedSpan] = useState<SelectedSpanInfo | null>(
     null
@@ -1156,6 +1142,7 @@ export const WorkflowTraceViewer = ({
                 onResolveHook={onResolveHook}
                 encryptionKey={encryptionKey}
                 onDecrypt={onDecrypt}
+                isDecrypting={isDecrypting}
                 selectedSpan={selectedSpan}
               />
             </ErrorBoundary>