@workflow/web-shared 4.1.11 → 4.1.12

package/src/lib/cn.ts

@@ -0,0 +1,93 @@
+import { type ClassValue, clsx } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+
+const twMergeConfig = {
+  extend: {
+    classGroups: {
+      'text-heading': [
+        {
+          'text-heading': [
+            '72',
+            '64',
+            '56',
+            '48',
+            '40',
+            '32',
+            '24',
+            '20',
+            '16',
+            '14',
+          ],
+        },
+      ],
+      'text-button': [
+        {
+          'text-button': ['16', '14', '12'],
+        },
+      ],
+      'text-label': [
+        {
+          'text-label': [
+            '20',
+            '18',
+            '16',
+            '14',
+            '14-mono',
+            '13',
+            '13-mono',
+            '12',
+            '12-mono',
+          ],
+        },
+      ],
+      'text-copy': [
+        {
+          'text-copy': ['24', '20', '18', '16', '14', '13', '13-mono'],
+        },
+      ],
+      material: [
+        {
+          material: [
+            'base',
+            'small',
+            'medium',
+            'large',
+            'tooltip',
+            'menu',
+            'modal',
+            'fullscreen',
+          ],
+        },
+      ],
+    },
+    // Make each category conflict with itself, so e.g. text-heading-32 overrides text-heading-24
+    conflictingClassGroups: {
+      'text-heading': ['text-heading'],
+      'text-button': ['text-button'],
+      'text-label': ['text-label'],
+      'text-copy': ['text-copy'],
+      material: ['material'],
+    },
+  },
+} as const;
+
+type CustomClassGroupIds =
+  | 'text-heading'
+  | 'text-button'
+  | 'text-label'
+  | 'text-copy'
+  | 'material';
+
+const customTwMerge = extendTailwindMerge<CustomClassGroupIds>(twMergeConfig);
+
+/**
+ * Merges Tailwind class names and resolves any conflicts using `clsx` with `tailwind-merge`.
+ *
+ * @param inputs - An array of class names to merge.
+ * @returns A string of merged and optimized class names.
+ */
+function cn(...classes: ClassValue[]) {
+  return customTwMerge(clsx(...classes));
+}
+
+export { cn };

package/src/lib/event-materialization.ts

@@ -23,6 +23,7 @@ export interface MaterializedStep {
   status: StepStatus;
   attempt: number;
   createdAt: Date;
+  occurredAt?: Date;
   startedAt?: Date;
   completedAt?: Date;
   updatedAt: Date;
@@ -35,6 +36,7 @@ export interface MaterializedHook {
   runId: string;
   token?: string;
   createdAt: Date;
+  occurredAt?: Date;
   receivedCount: number;
   lastReceivedAt?: Date;
   disposedAt?: Date;
@@ -47,6 +49,7 @@ export interface MaterializedWait {
   runId: string;
   status: 'waiting' | 'completed';
   createdAt: Date;
+  occurredAt?: Date;
   resumeAt?: Date;
   completedAt?: Date;
   /** All events for this wait, in insertion order */
@@ -59,6 +62,16 @@ export interface MaterializedEntities {
   waits: MaterializedWait[];
 }
 
+const withOccurredAt = <T extends object>(
+  entity: T,
+  occurredAt: Event['occurredAt'] | undefined
+): T & { occurredAt?: Date } => {
+  if (!occurredAt || (entity as { occurredAt?: unknown }).occurredAt != null) {
+    return entity;
+  }
+  return { ...entity, occurredAt };
+};
+
 // ---------------------------------------------------------------------------
 // Helper: group events by correlationId prefix
 // ---------------------------------------------------------------------------
@@ -133,21 +146,26 @@ export function materializeSteps(events: Event[]): MaterializedStep[] {
       }
     }
 
-    steps.push({
-      stepId: correlationId,
-      runId: created.runId,
-      stepName:
-        created.eventType === 'step_created'
-          ? (created.eventData?.stepName ?? correlationId)
-          : correlationId,
-      status,
-      attempt,
-      createdAt: created.createdAt,
-      startedAt,
-      completedAt,
-      updatedAt,
-      events: stepEvents,
-    });
+    steps.push(
+      withOccurredAt(
+        {
+          stepId: correlationId,
+          runId: created.runId,
+          stepName:
+            created.eventType === 'step_created'
+              ? (created.eventData?.stepName ?? correlationId)
+              : correlationId,
+          status,
+          attempt,
+          createdAt: created.createdAt,
+          startedAt,
+          completedAt,
+          updatedAt,
+          events: stepEvents,
+        },
+        created.occurredAt
+      )
+    );
   }
 
   return steps;
@@ -174,19 +192,24 @@ export function materializeHooks(events: Event[]): MaterializedHook[] {
     const disposed = hookEvents.find((e) => e.eventType === 'hook_disposed');
     const lastReceived = receivedEvents.at(-1);
 
-    hooks.push({
-      hookId: correlationId,
-      runId: created.runId,
-      token:
-        created.eventType === 'hook_created'
-          ? created.eventData?.token
-          : undefined,
-      createdAt: created.createdAt,
-      receivedCount: receivedEvents.length,
-      lastReceivedAt: lastReceived?.createdAt,
-      disposedAt: disposed?.createdAt,
-      events: hookEvents,
-    });
+    hooks.push(
+      withOccurredAt(
+        {
+          hookId: correlationId,
+          runId: created.runId,
+          token:
+            created.eventType === 'hook_created'
+              ? created.eventData?.token
+              : undefined,
+          createdAt: created.createdAt,
+          receivedCount: receivedEvents.length,
+          lastReceivedAt: lastReceived?.createdAt,
+          disposedAt: disposed?.createdAt,
+          events: hookEvents,
+        },
+        created.occurredAt
+      )
+    );
   }
 
   return hooks;
@@ -209,18 +232,23 @@ export function materializeWaits(events: Event[]): MaterializedWait[] {
 
     const completed = waitEvents.find((e) => e.eventType === 'wait_completed');
 
-    waits.push({
-      waitId: correlationId,
-      runId: created.runId,
-      status: completed ? 'completed' : 'waiting',
-      createdAt: created.createdAt,
-      resumeAt:
-        created.eventType === 'wait_created'
-          ? created.eventData?.resumeAt
-          : undefined,
-      completedAt: completed?.createdAt,
-      events: waitEvents,
-    });
+    waits.push(
+      withOccurredAt(
+        {
+          waitId: correlationId,
+          runId: created.runId,
+          status: completed ? 'completed' : 'waiting',
+          createdAt: created.createdAt,
+          resumeAt:
+            created.eventType === 'wait_created'
+              ? created.eventData?.resumeAt
+              : undefined,
+          completedAt: completed?.createdAt,
+          events: waitEvents,
+        },
+        created.occurredAt
+      )
+    );
   }
 
   return waits;

package/src/lib/utils.ts

@@ -1,11 +1,5 @@
 import type { Step } from '@workflow/world';
 import type { ModelMessage } from 'ai';
-import { type ClassValue, clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
 
 const durationFormatter = new Intl.NumberFormat(undefined, {
   maximumFractionDigits: 2,

package/src/styles.css

@@ -12,6 +12,9 @@
  *   import '@workflow/web-shared/styles.css';
  */
 
+@custom-variant dark-theme (&:where(.dark-theme, .dark-theme *, .dark, .dark *, [data-theme="dark"], [data-theme="dark"] *));
+@custom-variant light-theme (&:where(.light-theme, .light-theme *, .light, .light *));
+
 :root {
   /* Background */
   --ds-background-100: hsl(0, 0%, 100%);
@@ -100,6 +103,9 @@
 
   /* Shadows */
   --ds-shadow-small: 0px 1px 2px rgba(0, 0, 0, 0.04);
+  --ds-shadow-tooltip:
+    0 0 0 1px rgba(0, 0, 0, 0.08), 0px 1px 1px rgba(0, 0, 0, 0.02),
+    0px 4px 8px rgba(0, 0, 0, 0.04), 0 0 0 1px var(--ds-background-200);
 }
 
 /* Dark theme defaults */
@@ -182,5 +188,8 @@
   --ds-pink-900: hsl(336, 80%, 70%);
 
   --ds-shadow-small: 0px 1px 2px rgba(0, 0, 0, 0.3);
+  --ds-shadow-tooltip:
+    0 0 0 1px rgba(255, 255, 255, 0.145), 0px 1px 1px rgba(0, 0, 0, 0.02),
+    0px 4px 8px rgba(0, 0, 0, 0.04), 0 0 0 1px var(--ds-background-200);
 }