@workflow/web-shared 5.0.0-beta.0 → 5.0.0-beta.10

package/dist/lib/utils.js

@@ -3,9 +3,6 @@ import { twMerge } from 'tailwind-merge';
 export function cn(...inputs) {
     return twMerge(clsx(inputs));
 }
-const durationFormatter = new Intl.NumberFormat(undefined, {
-    maximumFractionDigits: 2,
-});
 const MS_IN_SECOND = 1000;
 const MS_IN_MINUTE = 60 * MS_IN_SECOND;
 const MS_IN_HOUR = 60 * MS_IN_MINUTE;
@@ -14,48 +11,48 @@ const MS_IN_DAY = 24 * MS_IN_HOUR;
  * Formats a duration in milliseconds to a human-readable string.
  *
  * @param ms - Duration in milliseconds
- * @param compact - If true, returns a single-unit format (e.g., "45s", "2.5m").
- *                  If false (default), returns multi-part format (e.g., "1h 30m", "2d 5h").
+ * @param compact - If true, returns a compact format (e.g., "380ms", "2m 30s").
+ *                  If false (default), returns multi-part format (e.g., "1m 13s", "2d 5h 3m 12s").
  *
- * Compact format:
- * - < 1s: shows milliseconds (e.g., "500ms")
+ * Compact format (timeline markers):
+ * - < 1s: shows milliseconds (e.g., "380ms")
  * - < 1m: shows seconds (e.g., "45s")
- * - < 1h: shows minutes (e.g., "45m")
- * - >= 1h: shows hours (e.g., "2.5h")
+ * - < 1h: shows minutes and seconds (e.g., "2m 30s")
+ * - >= 1h: shows hours and minutes (e.g., "2h 30m")
  *
  * Full format:
- * - < 1s: shows milliseconds (e.g., "500ms")
- * - < 1m: shows seconds (e.g., "45.5s")
- * - >= 1m: shows human-readable format (e.g., "1h 30m", "2d 5h")
+ * - < 1s: shows milliseconds (e.g., "380ms")
+ * - < 1m: shows seconds (e.g., "45s")
+ * - >= 1m: shows decomposed format with whole seconds (e.g., "1m 13s", "2m 13s")
  */
 export function formatDuration(ms, compact = false) {
     if (ms === 0) {
-        return '0';
+        return '0s';
     }
-    // For durations less than 1 second, show milliseconds
     if (ms < MS_IN_SECOND) {
-        return `${durationFormatter.format(ms)}ms`;
+        const roundedMs = Math.round(ms);
+        return roundedMs < MS_IN_SECOND ? `${roundedMs}ms` : '1s';
     }
-    // For durations less than 1 minute, show seconds
-    if (ms < MS_IN_MINUTE) {
-        return `${durationFormatter.format(ms / MS_IN_SECOND)}s`;
+    const roundedMs = Math.round(ms / MS_IN_SECOND) * MS_IN_SECOND;
+    if (roundedMs < MS_IN_MINUTE) {
+        return `${Math.floor(roundedMs / MS_IN_SECOND)}s`;
     }
     // Compact format: multi-unit without decimals (e.g. "8m 20s", "2h 30m")
     if (compact) {
-        if (ms < MS_IN_HOUR) {
-            const m = Math.floor(ms / MS_IN_MINUTE);
-            const s = Math.floor((ms % MS_IN_MINUTE) / MS_IN_SECOND);
+        if (roundedMs < MS_IN_HOUR) {
+            const m = Math.floor(roundedMs / MS_IN_MINUTE);
+            const s = Math.floor((roundedMs % MS_IN_MINUTE) / MS_IN_SECOND);
             return s > 0 ? `${m}m ${s}s` : `${m}m`;
         }
-        const h = Math.floor(ms / MS_IN_HOUR);
-        const m = Math.floor((ms % MS_IN_HOUR) / MS_IN_MINUTE);
+        const h = Math.floor(roundedMs / MS_IN_HOUR);
+        const m = Math.floor((roundedMs % MS_IN_HOUR) / MS_IN_MINUTE);
         return m > 0 ? `${h}h ${m}m` : `${h}h`;
     }
-    // Full format: human-readable multi-part
-    const days = Math.floor(ms / MS_IN_DAY);
-    const hours = Math.floor((ms % MS_IN_DAY) / MS_IN_HOUR);
-    const minutes = Math.floor((ms % MS_IN_HOUR) / MS_IN_MINUTE);
-    const seconds = Math.floor((ms % MS_IN_MINUTE) / MS_IN_SECOND);
+    // Full format: decompose into larger units + whole seconds.
+    const days = Math.floor(roundedMs / MS_IN_DAY);
+    const hours = Math.floor((roundedMs % MS_IN_DAY) / MS_IN_HOUR);
+    const minutes = Math.floor((roundedMs % MS_IN_HOUR) / MS_IN_MINUTE);
+    const seconds = Math.floor((roundedMs % MS_IN_MINUTE) / MS_IN_SECOND);
     const parts = [];
     if (days > 0) {
         parts.push(`${days}d`);
@@ -66,9 +63,7 @@ export function formatDuration(ms, compact = false) {
     if (minutes > 0) {
         parts.push(`${minutes}m`);
     }
-    if (hours <= 1 && (seconds > 0 || parts.length === 0)) {
-        parts.push(`${seconds}s`);
-    }
+    parts.push(`${seconds}s`);
     return parts.join(' ');
 }
 /**
@@ -129,4 +124,4 @@ export function identifyStreamSteps(steps) {
         };
     });
 }
-//# sourceMappingURL=utils.js.map
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXRpbHMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvbGliL3V0aWxzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVBLE9BQU8sRUFBbUIsSUFBSSxFQUFFLE1BQU0sTUFBTSxDQUFDO0FBQzdDLE9BQU8sRUFBRSxPQUFPLEVBQUUsTUFBTSxnQkFBZ0IsQ0FBQztBQUV6QyxNQUFNLFVBQVUsRUFBRSxDQUFDLEdBQUcsTUFBb0I7SUFDeEMsT0FBTyxPQUFPLENBQUMsSUFBSSxDQUFDLE1BQU0sQ0FBQyxDQUFDLENBQUM7QUFDL0IsQ0FBQztBQUVELE1BQU0sWUFBWSxHQUFHLElBQUksQ0FBQztBQUMxQixNQUFNLFlBQVksR0FBRyxFQUFFLEdBQUcsWUFBWSxDQUFDO0FBQ3ZDLE1BQU0sVUFBVSxHQUFHLEVBQUUsR0FBRyxZQUFZLENBQUM7QUFDckMsTUFBTSxTQUFTLEdBQUcsRUFBRSxHQUFHLFVBQVUsQ0FBQztBQUVsQzs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FpQkc7QUFDSCxNQUFNLFVBQVUsY0FBYyxDQUFDLEVBQVUsRUFBRSxPQUFPLEdBQUcsS0FBSztJQUN4RCxJQUFJLEVBQUUsS0FBSyxDQUFDLEVBQUUsQ0FBQztRQUNiLE9BQU8sSUFBSSxDQUFDO0lBQ2QsQ0FBQztJQUVELElBQUksRUFBRSxHQUFHLFlBQVksRUFBRSxDQUFDO1FBQ3RCLE1BQU0sU0FBUyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsRUFBRSxDQUFDLENBQUM7UUFDakMsT0FBTyxTQUFTLEdBQUcsWUFBWSxDQUFDLENBQUMsQ0FBQyxHQUFHLFNBQVMsSUFBSSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUM7SUFDNUQsQ0FBQztJQUVELE1BQU0sU0FBUyxHQUFHLElBQUksQ0FBQyxLQUFLLENBQUMsRUFBRSxHQUFHLFlBQVksQ0FBQyxHQUFHLFlBQVksQ0FBQztJQUUvRCxJQUFJLFNBQVMsR0FBRyxZQUFZLEVBQUUsQ0FBQztRQUM3QixPQUFPLEdBQUcsSUFB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O0lBQ0osQ0FBQyxDQUFDLENBQUM7QUFDUCxDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHR5cGUgeyBTdGVwIH0gZnJvbSAnQHdvcmtmbG93L3dvcmxkJztcbmltcG9ydCB0eXBlIHsgTW9kZWxNZXNzYWdlIH0gZnJvbSAnYWknO1xuaW1wb3J0IHsgdHlwZSBDbGFzc1ZhbHVlLCBjbHN4IH0gZnJvbSAnY2xzeCc7XG5pbXBvcnQgeyB0d01lcmdlIH0gZnJvbSAndGFpbHdpbmQtbWVyZ2UnO1xuXG5leHBvcnQgZnVuY3Rpb24gY24oLi4uaW5wdXRzOiBDbGFzc1ZhbHVlW10pIHtcbiAgcmV0dXJuIHR3TWVyZ2UoY2xzeChpbnB1dHMpKTtcbn1cblxuY29uc3QgTVNfSU5fU0VDT05EID0gMTAwMDtcbmNvbnN0IE1TX0lOX01JTlVURSA9IDYwICogTVNfSU5fU0VDT05EO1xuY29uc3QgTVNfSU5fSE9VUiA9IDYwICogTVNfSU5fTUlOVVRFO1xuY29uc3QgTVNfSU5fREFZID0gMjQgKiBNU19JTl9IT1VSO1xuXG4vKipcbiAqIEZvcm1hdHMgYSBkdXJhdGlvbiBpbiBtaWxsaXNlY29uZHMgdG8gYSBodW1hbi1yZWFkYWJsZSBzdHJpbmcuXG4gKlxuICogQHBhcmFtIG1zIC0gRHVyYXRpb24gaW4gbWlsbGlzZWNvbmRzXG4gKiBAcGFyYW0gY29tcGFjdCAtIElmIHRydWUsIHJldHVybnMgYSBjb21wYWN0IGZvcm1hdCAoZS5nLiwgXCIzODBtc1wiLCBcIjJtIDMwc1wiKS5cbiAqICAgICAgICAgICAgICAgICAgSWYgZmFsc2UgKGRlZmF1bHQpLCByZXR1cm5zIG11bHRpLXBhcnQgZm9ybWF0IChlLmcuLCBcIjFtIDEzc1wiLCBcIjJkIDVoIDNtIDEyc1wiKS5cbiAqXG4gKiBDb21wYWN0IGZvcm1hdCAodGltZWxpbmUgbWFya2Vycyk6XG4gKiAtIDwgMXM6IHNob3dzIG1pbGxpc2Vjb25kcyAoZS5nLiwgXCIzODBtc1wiKVxuICogLSA8IDFtOiBzaG93cyBzZWNvbmRzIChlLmcuLCBcIjQ1c1wiKVxuICogLSA8IDFoOiBzaG93cyBtaW51dGVzIGFuZCBzZWNvbmRzIChlLmcuLCBcIjJtIDMwc1wiKVxuICogLSA+PSAxaDogc2hvd3MgaG91cnMgYW5kIG1pbnV0ZXMgKGUuZy4sIFwiMmggMzBtXCIpXG4gKlxuICogRnVsbCBmb3JtYXQ6XG4gKiAtIDwgMXM6IHNob3dzIG1pbGxpc2Vjb25kcyAoZS5nLiwgXCIzODBtc1wiKVxuICogLSA8IDFtOiBzaG93cyBzZWNvbmRzIChlLmcuLCBcIjQ1c1wiKVxuICogLSA+PSAxbTogc2hvd3MgZGVjb21wb3NlZCBmb3JtYXQgd2l0aCB3aG9sZSBzZWNvbmRzIChlLmcuLCBcIjFtIDEzc1wiLCBcIjJtIDEzc1wiKVxuICovXG5leHBvcnQgZnVuY3Rpb24gZm9ybWF0RHVyYXRpb24obXM6IG51bWJlciwgY29tcGFjdCA9IGZhbHNlKTogc3RyaW5nIHtcbiAgaWYgKG1zID09PSAwKSB7XG4gICAgcmV0dXJuICcwcyc7XG4gIH1cblxuICBpZiAobXMgPCBNU19JTl9TRUNPTkQpIHtcbiAgICBjb25zdCByb3VuZGVkTXMgPSBNYXRoLnJvdW5kKG1zKTtcbiAgICByZXR1cm4gcm91bmRlZE1zIDwgTVNfSU5fU0VDT05EID8gYCR7cm91bmRlZE1zfW1zYCA6ICcxcyc7XG4gIH1cblxuICBjb25zdCByb3VuZGVkTXMgPSBNYXRoLnJvdW5kKG1zIC8gTVNfSU5fU0VDT05EKSAqIE1TX0lOX1NFQ09ORDtcblxuICBpZiAocm91bmRlZE1zIDwgTVNfSU5fTUlOVVRFKSB7XG4gICAgcmV0dXJuIGAke01hdGguZmxvb3Iocm91bmRlZE1zIC8gTVNfSU5fU0VDT05EKX1zYDtcbiAgfVxuXG4gIC8vIENvbXBhY3QgZm9ybWF0OiBtdWx0aS11bml0IHdpdGhvdXQgZGVjaW1hbHMgKGUuZy4gXCI4bSAyMHNcIiwgXCIyaCAzMG1cIilcbiAgaWYgKGNvbXBhY3QpIHtcbiAgICBpZiAocm91bmRlZE1zIDwgTVNfSU5fSE9VUikge1xuICAgICAgY29uc3QgbSA9IE1hdGguZmxvb3Iocm91bmRlZE1zIC8gTVNfSU5fTUlOVVRFKTtcbiAgICAgIGNvbnN0IHMgPSBNYXRoLmZsb29yKChyb3VuZGVkTXMgJSBNU19JTl9NSU5VVEUpIC8gTVNfSU5fU0VDT05EKTtcbiAgICAgIHJldHVybiBzID4gMCA/IGAke219bSAke3N9c2AgOiBgJHttfW1gO1xuICAgIH1cbiAgICBjb25zdCBoID0gTWF0aC5mbG9vcihyb3VuZGVkTXMgLyBNU19JTl9IT1VSKTtcbiAgICBjb25zdCBtID0gTWF0aC5mbG9vcigocm91bmRlZE1zICUgTVNfSU5fSE9VUikgLyBNU19JTl9NSU5VVEUpO1xuICAgIHJldHVybiBtID4gMCA/IGAke2h9aCAke219bWAgOiBgJHtofWhgO1xuICB9XG5cbiAgLy8gRnVsbCBmb3JtYXQ6IGRlY29tcG9zZSBpbnRvIGxhcmdlciB1bml0cyArIHdob2xlIHNlY29uZHMuXG4gIGNvbnN0IGRheXMgPSBNYXRoLmZsb29yKHJvdW5kZWRNcyAvIE1TX0lOX0RBWSk7XG4gIGNvbnN0IGhvdXJzID0gTWF0aC5mbG9vcigocm91bmRlZE1zICUgTVNfSU5fREFZKSAvIE1TX0lOX0hPVVIpO1xuICBjb25zdCBtaW51dGVzID0gTWF0aC5mbG9vcigocm91bmRlZE1zICUgTVNfSU5fSE9VUikgLyBNU19JTl9NSU5VVEUpO1xuICBjb25zdCBzZWNvbmRzID0gTWF0aC5mbG9vcigocm91bmRlZE1zICUgTVNfSU5fTUlOVVRFKSAvIE1TX0lOX1NFQ09ORCk7XG5cbiAgY29uc3QgcGFydHM6IHN0cmluZ1tdID0gW107XG5cbiAgaWYgKGRheXMgPiAwKSB7XG4gICAgcGFydHMucHVzaChgJHtkYXlzfWRgKTtcbiAgfVxuICBpZiAoaG91cnMgPiAwKSB7XG4gICAgcGFydHMucHVzaChgJHtob3Vyc31oYCk7XG4gIH1cbiAgaWYgKG1pbnV0ZXMgPiAwKSB7XG4gICAgcGFydHMucHVzaChgJHttaW51dGVzfW1gKTtcbiAgfVxuICBwYXJ0cy5wdXNoKGAke3NlY29uZHN9c2ApO1xuXG4gIHJldHVybiBwYXJ0cy5qb2luKCcgJyk7XG59XG5cbi8qKlxuICogUmV0dXJucyBhIGZvcm1hdHRlZCBwYWdpbmF0aW9uIGRpc3BsYXkgc3RyaW5nXG4gKiBAcGFyYW0gY3VycmVudFBhZ2UgLSBUaGUgY3VycmVudCBwYWdlIG51bWJlclxuICogQHBhcmFtIHRvdGFsUGFnZXMgLSBUaGUgdG90YWwgbnVtYmVyIG9mIHBhZ2VzIHZpc2l0ZWQgc28gZmFyXG4gKiBAcGFyYW0gaGFzTW9yZSAtIFdoZXRoZXIgdGhlcmUgYXJlIG1vcmUgcGFnZXMgYXZhaWxhYmxlXG4gKiBAcmV0dXJucyBGb3JtYXR0ZWQgc3RyaW5nIGxpa2UgXCJQYWdlIDEgb2YgMytcIiBvciBcIlBhZ2UgMiBvZiAyXCJcbiAqL1xuZXhwb3J0IGZ1bmN0aW9uIGdldFBhZ2luYXRpb25EaXNwbGF5KFxuICBjdXJyZW50UGFnZTogbnVtYmVyLFxuICB0b3RhbFBhZ2VzOiBudW1iZXIsXG4gIGhhc01vcmU6IGJvb2xlYW5cbik6IHN0cmluZyB7XG4gIGlmIChoYXNNb3JlKSB7XG4gICAgcmV0dXJuIGBQYWdlICR7Y3VycmVudFBhZ2V9IG9mICR7dG90YWxQYWdlc30rYDtcbiAgfVxuICByZXR1cm4gYFBhZ2UgJHtjdXJyZW50UGFnZX0gb2YgJHt0b3RhbFBhZ2VzfWA7XG59XG5cbi8vID09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT1cbi8vIER1cmFibGUgQWdlbnQgVXRpbGl0aWVzXG4vLyA9PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09PT09XG5cbi8qKlxuICogQ2hlY2sgaWYgYSBzdGVwIGlzIGEgZG9TdHJlYW1TdGVwIChMTE0gY2FsbCB3aXRoIGNvbnZlcnNhdGlvbiBpbnB1dClcbiAqL1xuZXhwb3J0IGZ1bmN0aW9uIGlzRG9TdHJlYW1TdGVwKHN0ZXBOYW1lOiBzdHJpbmcpOiBib29sZWFuIHtcbiAgcmV0dXJuIHN0ZXBOYW1lLmVuZHNXaXRoKCcvL2RvU3RyZWFtU3RlcCcpO1xufVxuXG4vKipcbiAqIEV4dHJhY3QgdGhlIGNvbnZlcnNhdGlvbiBmcm9tIGEgaHlkcmF0ZWQgZG9TdHJlYW1TdGVwIGlucHV0LlxuICogZG9TdHJlYW1TdGVwIHNpZ25hdHVyZTogKGNvbnZlcnNhdGlvblByb21wdCwgbW9kZWwsIHdyaXRhYmxlLCB0b29scywgb3B0aW9ucylcbiAqIFNvIGlucHV0WzBdIGlzIHRoZSBjb252ZXJzYXRpb24uXG4gKi9cbmV4cG9ydCBmdW5jdGlvbiBleHRyYWN0Q29udmVyc2F0aW9uKHN0ZXBJbnB1dDogdW5rbm93bik6IE1vZGVsTWVzc2FnZVtdIHwgbnVsbCB7XG4gIGlmICghQXJyYXkuaXNBcnJheShzdGVwSW5wdXQpIHx8IHN0ZXBJbnB1dC5sZW5ndGggPT09IDApIHtcbiAgICByZXR1cm4gbnVsbDtcbiAgfVxuXG4gIGNvbnN0IGZpcnN0QXJnID0gc3RlcElucHV0WzBdO1xuXG4gIGlmICghQXJyYXkuaXNBcnJheShmaXJzdEFyZykpIHtcbiAgICByZXR1cm4gbnVsbDtcbiAgfVxuXG4gIC8vIFZhbGlkYXRlIGl0IGxvb2tzIGxpa2UgTW9kZWxNZXNzYWdlW11cbiAgaWYgKFxuICAgICFmaXJzdEFyZy5ldmVyeSgobXNnKSA9PiBtc2cgJiYgdHlwZW9mIG1zZyA9PT0gJ29iamVjdCcgJiYgJ3JvbGUnIGluIG1zZylcbiAgKSB7XG4gICAgcmV0dXJuIG51bGw7XG4gIH1cblxuICByZXR1cm4gZmlyc3RBcmcgYXMgTW9kZWxNZXNzYWdlW107XG59XG5cbi8qKlxuICogQSBkb1N0cmVhbVN0ZXAgd2l0aCBpdHMgY29udmVyc2F0aW9uIGlucHV0IGV4dHJhY3RlZFxuICovXG5leHBvcnQgaW50ZXJmYWNlIFN0cmVhbVN0ZXAge1xuICBzdGVwSWQ6IHN0cmluZztcbiAgc3RlcE5hbWU6IHN0cmluZztcbiAgZGlzcGxheU5hbWU6IHN0cmluZztcbiAgY29udmVyc2F0aW9uOiBNb2RlbE1lc3NhZ2VbXTtcbn1cblxuLyoqXG4gKiBJZGVudGlmaWVzIGFsbCBzdHJlYW0gc3RlcHMgKGRvU3RyZWFtU3RlcCkgaW4gYSBydW4gYW5kIGV4dHJhY3RzIHRoZWlyIGNvbnZlcnNhdGlvbnMuXG4gKi9cbmV4cG9ydCBmdW5jdGlvbiBpZGVudGlmeVN0cmVhbVN0ZXBzKHN0ZXBzOiBTdGVwW10pOiBTdHJlYW1TdGVwW10ge1xuICByZXR1cm4gc3RlcHNcbiAgICAuZmlsdGVyKChzdGVwKSA9PiBpc0RvU3RyZWFtU3RlcChzdGVwLnN0ZXBOYW1lKSlcbiAgICAubWFwKChzdGVwKSA9PiB7XG4gICAgICBjb25zdCBmdW5jdGlvbk5hbWUgPSBzdGVwLnN0ZXBOYW1lLnNwbGl0KCcvLycpLnBvcCgpID8/ICd1bmtub3duJztcbiAgICAgIGNvbnN0IGNvbnZlcnNhdGlvbiA9IGV4dHJhY3RDb252ZXJzYXRpb24oc3RlcC5pbnB1dCkgPz8gW107XG5cbiAgICAgIHJldHVybiB7XG4gICAgICAgIHN0ZXBJZDogc3RlcC5zdGVwSWQsXG4gICAgICAgIHN0ZXBOYW1lOiBzdGVwLnN0ZXBOYW1lLFxuICAgICAgICBkaXNwbGF5TmFtZTogZnVuY3Rpb25OYW1lLFxuICAgICAgICBjb252ZXJzYXRpb24sXG4gICAgICB9O1xuICAgIH0pO1xufVxuIl19

package/dist/styles.css

@@ -36,6 +36,9 @@
   --ds-gray-alpha-700: hsla(0, 0%, 0%, 0.44);
   --ds-gray-alpha-1000: hsla(0, 0%, 0%, 0.91);
 
+  /* Focus */
+  --ds-focus-color: var(--ds-blue-700);
+
   /* Blue */
   --ds-blue-100: hsl(212, 100%, 97%);
   --ds-blue-200: hsl(210, 100%, 96%);
@@ -105,7 +108,7 @@
 /* Dark theme defaults */
 .dark-theme,
 .dark,
-[data-theme='dark'] {
+[data-theme="dark"] {
   --ds-background-100: hsl(0, 0%, 7%);
   --ds-background-200: hsl(0, 0%, 10%);
 
@@ -126,6 +129,8 @@
   --ds-gray-alpha-700: rgba(255, 255, 255, 0.45);
   --ds-gray-alpha-1000: rgba(255, 255, 255, 0.92);
 
+  --ds-focus-color: var(--ds-blue-900);
+
   --ds-blue-100: hsl(216, 50%, 12%);
   --ds-blue-200: hsl(214, 59%, 15%);
   --ds-blue-300: hsl(213, 71%, 20%);
@@ -184,3 +189,472 @@
   --ds-shadow-small: 0px 1px 2px rgba(0, 0, 0, 0.3);
 }
 
+@theme inline {
+  /* Deactivating namespaces. When you do this, all of the default utilities that use that namespace (like bg-red-500) will be removed, and only your custom values (like bg-custom) will be available. https://tailwindcss.com/docs/theme#overriding-the-default-theme */
+  /* --color-*: initial; @sev:revert */
+  --breakpoint-*: initial;
+
+  --spacing: 0.25rem;
+
+  /* Pixel Fonts */
+  --font-pixel-square: var(--font-geist-pixel-square);
+  --font-pixel-circle: var(--font-geist-pixel-circle);
+  --font-pixel-line: var(--font-geist-pixel-line);
+  --font-pixel-grid: var(--font-geist-pixel-grid);
+  --font-pixel-triangle: var(--font-geist-pixel-triangle);
+
+  --radius-xs: 0.125rem; /* Previously xs: 2px */
+  --radius-sm: 0.25rem; /* Previously sm: 4px */
+  --radius-md: 0.375rem; /* Previously DEFAULT: 6px */
+  --radius-lg: 0.5rem; /* Previously md: 8px */
+  --radius-xl: 0.75rem; /* Previously lg: 12px */
+  --radius-2xl: 1rem;
+
+  /* Override Tailwind default shadows with Geist's DS shadows */
+  --shadow-border: var(--ds-shadow-border);
+
+  --shadow-2xs: var(--ds-shadow-2xs);
+  --shadow-xs: var(--ds-shadow-xs);
+  --shadow-sm: var(--ds-shadow-small);
+  --shadow-md: var(--ds-shadow-medium);
+  --shadow-lg: var(--ds-shadow-large);
+  --shadow-xl: var(--ds-shadow-xl);
+  --shadow-2xl: var(--ds-shadow-2xl);
+
+  /* Geist Breakpoints */
+  --breakpoint-sm: 401px;
+  --breakpoint-md: 601px;
+  --breakpoint-lg: 961px;
+  --breakpoint-xl: 1200px;
+  --breakpoint-2xl: 1400px;
+
+  --color-geist-cyan: var(--geist-cyan);
+  --color-geist-warning: var(--geist-warning);
+  --color-geist-error: var(--geist-error);
+
+  --color-black: var(--ds-black);
+  --color-white: var(--ds-white);
+
+  --color-background-100: var(--ds-background-100);
+  --color-background-200: var(--ds-background-200);
+
+  --color-gray-100: var(--ds-gray-100);
+  --color-gray-200: var(--ds-gray-200);
+  --color-gray-300: var(--ds-gray-300);
+  --color-gray-400: var(--ds-gray-400);
+  --color-gray-500: var(--ds-gray-500);
+  --color-gray-600: var(--ds-gray-600);
+  --color-gray-700: var(--ds-gray-700);
+  --color-gray-800: var(--ds-gray-800);
+  --color-gray-900: var(--ds-gray-900);
+  --color-gray-1000: var(--ds-gray-1000);
+
+  --color-gray-alpha-100: var(--ds-gray-alpha-100);
+  --color-gray-alpha-200: var(--ds-gray-alpha-200);
+  --color-gray-alpha-300: var(--ds-gray-alpha-300);
+  --color-gray-alpha-400: var(--ds-gray-alpha-400);
+  --color-gray-alpha-500: var(--ds-gray-alpha-500);
+  --color-gray-alpha-600: var(--ds-gray-alpha-600);
+  --color-gray-alpha-700: var(--ds-gray-alpha-700);
+  --color-gray-alpha-800: var(--ds-gray-alpha-800);
+  --color-gray-alpha-900: var(--ds-gray-alpha-900);
+  --color-gray-alpha-1000: var(--ds-gray-alpha-1000);
+
+  --color-blue-100: var(--ds-blue-100);
+  --color-blue-200: var(--ds-blue-200);
+  --color-blue-300: var(--ds-blue-300);
+  --color-blue-400: var(--ds-blue-400);
+  --color-blue-500: var(--ds-blue-500);
+  --color-blue-600: var(--ds-blue-600);
+  --color-blue-700: var(--ds-blue-700);
+  --color-blue-800: var(--ds-blue-800);
+  --color-blue-900: var(--ds-blue-900);
+  --color-blue-1000: var(--ds-blue-1000);
+
+  --color-red-100: var(--ds-red-100);
+  --color-red-200: var(--ds-red-200);
+  --color-red-300: var(--ds-red-300);
+  --color-red-400: var(--ds-red-400);
+  --color-red-500: var(--ds-red-500);
+  --color-red-600: var(--ds-red-600);
+  --color-red-700: var(--ds-red-700);
+  --color-red-800: var(--ds-red-800);
+  --color-red-900: var(--ds-red-900);
+  --color-red-1000: var(--ds-red-1000);
+
+  --color-amber-100: var(--ds-amber-100);
+  --color-amber-200: var(--ds-amber-200);
+  --color-amber-300: var(--ds-amber-300);
+  --color-amber-400: var(--ds-amber-400);
+  --color-amber-500: var(--ds-amber-500);
+  --color-amber-600: var(--ds-amber-600);
+  --color-amber-700: var(--ds-amber-700);
+  --color-amber-800: var(--ds-amber-800);
+  --color-amber-900: var(--ds-amber-900);
+  --color-amber-1000: var(--ds-amber-1000);
+
+  --color-green-100: var(--ds-green-100);
+  --color-green-200: var(--ds-green-200);
+  --color-green-300: var(--ds-green-300);
+  --color-green-400: var(--ds-green-400);
+  --color-green-500: var(--ds-green-500);
+  --color-green-600: var(--ds-green-600);
+  --color-green-700: var(--ds-green-700);
+  --color-green-800: var(--ds-green-800);
+  --color-green-900: var(--ds-green-900);
+  --color-green-1000: var(--ds-green-1000);
+
+  --color-teal-100: var(--ds-teal-100);
+  --color-teal-200: var(--ds-teal-200);
+  --color-teal-300: var(--ds-teal-300);
+  --color-teal-400: var(--ds-teal-400);
+  --color-teal-500: var(--ds-teal-500);
+  --color-teal-600: var(--ds-teal-600);
+  --color-teal-700: var(--ds-teal-700);
+  --color-teal-800: var(--ds-teal-800);
+  --color-teal-900: var(--ds-teal-900);
+  --color-teal-1000: var(--ds-teal-1000);
+
+  --color-purple-100: var(--ds-purple-100);
+  --color-purple-200: var(--ds-purple-200);
+  --color-purple-300: var(--ds-purple-300);
+  --color-purple-400: var(--ds-purple-400);
+  --color-purple-500: var(--ds-purple-500);
+  --color-purple-600: var(--ds-purple-600);
+  --color-purple-700: var(--ds-purple-700);
+  --color-purple-800: var(--ds-purple-800);
+  --color-purple-900: var(--ds-purple-900);
+  --color-purple-1000: var(--ds-purple-1000);
+
+  --color-pink-100: var(--ds-pink-100);
+  --color-pink-200: var(--ds-pink-200);
+  --color-pink-300: var(--ds-pink-300);
+  --color-pink-400: var(--ds-pink-400);
+  --color-pink-500: var(--ds-pink-500);
+  --color-pink-600: var(--ds-pink-600);
+  --color-pink-700: var(--ds-pink-700);
+  --color-pink-800: var(--ds-pink-800);
+  --color-pink-900: var(--ds-pink-900);
+  --color-pink-1000: var(--ds-pink-1000);
+}
+
+/* tempory utility remove once front is fully migrated to geistcn */
+@utility geist-sr-only {
+  @apply sr-only;
+}
+
+@utility clearable-input {
+  --duration: 561.04ms;
+  --timing: linear(
+    0 0%,
+    0.00484 1%,
+    0.018323 2%,
+    0.039014 3%,
+    0.065627 4%,
+    0.097013 5%,
+    0.132156 6%,
+    0.170155 7.000000000000001%,
+    0.210219 8%,
+    0.251659 9%,
+    0.293875 10%,
+    0.336353 11%,
+    0.378653 12%,
+    0.420402 13%,
+    0.461292 14.000000000000002%,
+    0.501066 15%,
+    0.53952 16%,
+    0.57649 17%,
+    0.611853 18%,
+    0.645519 19%,
+    0.677428 20%,
+    0.707546 21%,
+    0.735859 22%,
+    0.762374 23%,
+    0.787113 24%,
+    0.810113 25%,
+    0.83142 26%,
+    0.851089 27%,
+    0.869183 28.000000000000004%,
+    0.88577 28.999999999999996%,
+    0.900923 30%,
+    0.914714 31%,
+    0.927222 32%,
+    0.938521 33%,
+    0.948689 34%,
+    0.957801 35%,
+    0.965931 36%,
+    0.973151 37%,
+    0.979531 38%,
+    0.985137 39%,
+    0.990035 40%,
+    0.994286 41%,
+    0.997947 42%,
+    1.001072 43%,
+    1.003715 44%,
+    1.005922 45%,
+    1.00774 46%,
+    1.009209 47%,
+    1.010369 48%,
+    1.011256 49%,
+    1.011902 50%,
+    1.012339 51%,
+    1.012593 52%,
+    1.01269 53%,
+    1.012653 54%,
+    1.012502 55.00000000000001%,
+    1.012256 56.00000000000001%,
+    1.011932 56.99999999999999%,
+    1.011545 57.99999999999999%,
+    1.011107 59%,
+    1.010631 60%,
+    1.010127 61%,
+    1.009604 62%,
+    1.00907 63%,
+    1.008531 64%,
+    1.007993 65%,
+    1.007461 66%,
+    1.00694 67%,
+    1.006432 68%,
+    1.00594 69%,
+    1.005467 70%,
+    1.005014 71%,
+    1.004582 72%,
+    1.004173 73%,
+    1.003786 74%,
+    1.003422 75%,
+    1.003081 76%,
+    1.002763 77%,
+    1.002466 78%,
+    1.002192 79%,
+    1.001938 80%,
+    1.001705 81%,
+    1.00149 82%,
+    1.001294 83%,
+    1.001116 84%,
+    1.000954 85%,
+    1.000808 86%,
+    1.000676 87%,
+    1.000558 88%,
+    1.000452 89%,
+    1.000358 90%,
+    1.000275 91%,
+    1.000202 92%,
+    1.000138 93%,
+    1.000083 94%
+  );
+}
+
+@utility webkit-search-reset {
+  &::-webkit-search-decoration,
+  &::-webkit-search-cancel-button,
+  &::-webkit-search-results-button,
+  &::-webkit-search-results-decoration {
+    -webkit-appearance: none;
+  }
+}
+
+@utility animation-delay-* {
+  animation-delay: --value(--animation-delay-*);
+  animation-delay: calc(--value(integer) * 1ms);
+  animation-delay: --value([*]);
+}
+
+@utility -animation-delay-* {
+  animation-delay: calc(--value(--animation-delay-*) * -1);
+  animation-delay: calc(--value(integer) * -1ms);
+  animation-delay: calc(--value([*]) * -1);
+}
+
+@utility no-scrollbar {
+  scrollbar-width: none;
+  -webkit-overflow-scrolling: touch;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+/* Material */
+
+@utility material-base {
+  @apply bg-background-100 rounded-[6px];
+  box-shadow: var(--ds-shadow-border);
+}
+
+@utility material-small {
+  @apply bg-background-100 rounded-[6px];
+  box-shadow: var(--ds-shadow-border-small);
+}
+
+@utility material-medium {
+  @apply bg-background-100 rounded-[12px];
+  box-shadow: var(--ds-shadow-border-medium);
+}
+
+@utility material-large {
+  @apply bg-background-100 rounded-[12px];
+  box-shadow: var(--ds-shadow-border-large);
+}
+
+@utility material-tooltip {
+  @apply bg-background-100 rounded-[6px];
+  box-shadow: var(--ds-shadow-tooltip);
+}
+
+@utility material-menu {
+  @apply bg-background-100 rounded-[12px];
+  box-shadow: var(--ds-shadow-menu);
+}
+
+@utility material-modal {
+  @apply bg-background-100 rounded-[12px];
+  box-shadow: var(--ds-shadow-modal);
+}
+
+@utility material-fullscreen {
+  @apply bg-background-100 rounded-[16px];
+  box-shadow: var(--ds-shadow-fullscreen);
+}
+
+/* Typography Heading */
+
+@utility text-heading-72 {
+  @apply font-sans font-semibold text-[72px] leading-[72px] tracking-[-4.32px];
+}
+
+@utility text-heading-64 {
+  @apply font-sans font-semibold text-[64px] leading-[64px] tracking-[-3.84px];
+}
+
+@utility text-heading-56 {
+  @apply font-sans font-semibold text-[56px] leading-[56px] tracking-[-3.36px];
+}
+
+@utility text-heading-48 {
+  @apply font-sans font-semibold text-[48px] leading-[56px] tracking-[-2.88px];
+}
+
+@utility text-heading-40 {
+  @apply font-sans font-semibold text-[40px] leading-[48px] tracking-[-2.4px];
+}
+
+@utility text-heading-32 {
+  @apply font-sans font-semibold [&>strong]:font-medium [&>strong]:text-gray-900 text-[32px] leading-[40px] tracking-[-1.28px];
+}
+
+@utility text-heading-24 {
+  @apply font-sans font-semibold [&>strong]:font-medium [&>strong]:text-gray-900 text-[24px] leading-[32px] tracking-[-0.96px];
+}
+
+@utility text-heading-20 {
+  @apply font-sans font-semibold [&>strong]:font-medium [&>strong]:text-gray-900 text-[20px] leading-[26px] tracking-[-0.4px];
+}
+
+@utility text-heading-16 {
+  @apply font-sans font-semibold [&>strong]:font-medium [&>strong]:text-gray-900 text-[16px] leading-[24px] tracking-[-0.32px];
+}
+
+@utility text-heading-14 {
+  @apply font-sans font-semibold text-[14px] leading-[20px] tracking-[-0.28px];
+}
+
+/* Typography Button */
+
+@utility text-button-16 {
+  @apply font-sans font-medium text-[16px] leading-[20px];
+}
+
+@utility text-button-14 {
+  @apply font-sans font-medium text-[14px] leading-[20px];
+}
+
+@utility text-button-12 {
+  @apply font-sans font-medium text-[12px] leading-[16px];
+}
+
+/* Typography Label */
+
+@utility text-label-20 {
+  @apply font-sans font-normal text-[20px] leading-[32px];
+}
+
+@utility text-label-18 {
+  @apply font-sans font-normal text-[18px] leading-[20px];
+}
+
+@utility text-label-16 {
+  @apply font-sans font-normal [&>strong]:font-medium [&>strong]:text-gray-1000 text-[16px] leading-[20px];
+}
+
+@utility text-label-14 {
+  @apply font-sans font-normal [&>strong]:font-medium [&>strong]:text-gray-1000 text-[14px] leading-[20px];
+}
+
+@utility text-label-14-mono {
+  @apply font-mono font-normal text-[14px] leading-[20px];
+}
+
+@utility text-label-13 {
+  @apply font-sans font-normal [&>strong]:font-medium [&>strong]:text-gray-1000 text-[13px] leading-[16px];
+}
+
+@utility text-label-13-mono {
+  @apply font-mono font-normal text-[13px] leading-[20px];
+}
+
+@utility text-label-12 {
+  @apply font-sans font-normal [&>strong]:font-medium [&>strong]:text-gray-1000 text-[12px] leading-[16px];
+}
+
+@utility text-label-12-mono {
+  @apply font-mono font-normal text-[12px] leading-[16px];
+}
+
+/* Typography Copy */
+
+@utility text-copy-24 {
+  @apply font-sans font-normal [&>strong]:font-medium [&>strong]:text-gray-1000 text-[24px] leading-[36px];
+}
+
+@utility text-copy-20 {
+  @apply font-sans font-normal [&>strong]:font-medium [&>strong]:text-gray-1000 text-[20px] leading-[36px];
+}
+
+@utility text-copy-18 {
+  @apply font-sans font-normal [&>strong]:font-medium [&>strong]:text-gray-1000 text-[18px] leading-[28px];
+}
+
+@utility text-copy-16 {
+  @apply font-sans font-normal [&>strong]:font-medium [&>strong]:text-gray-1000 text-[16px] leading-[24px];
+}
+
+@utility text-copy-14 {
+  @apply font-sans font-normal [&>strong]:font-medium [&>strong]:text-gray-1000 text-[14px] leading-[20px];
+}
+
+@utility text-copy-14-mono {
+  @apply font-mono font-normal [&>strong]:font-medium [&>strong]:text-gray-1000 text-[14px] leading-[20px];
+}
+
+@utility text-copy-13 {
+  @apply font-sans font-normal [&>strong]:font-medium [&>strong]:text-gray-1000 text-[13px] leading-[18px];
+}
+
+@utility text-copy-13-mono {
+  @apply font-mono font-normal text-[13px] leading-[18px];
+}
+
+@utility container {
+  @apply px-6 mx-auto w-full;
+  max-width: calc(1200px + 48px);
+}
+
+@keyframes tooltip-enter {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@workflow/web-shared",
   "description": "Shared components for Workflow Observability UI",
-  "version": "5.0.0-beta.0",
+  "version": "5.0.0-beta.10",
   "private": false,
   "files": [
     "dist",
@@ -38,6 +38,7 @@
     "directory": "packages/web-shared"
   },
   "dependencies": {
+    "@radix-ui/react-tooltip": "1.2.8",
     "@tailwindcss/postcss": "4",
     "class-variance-authority": "0.7.1",
     "clsx": "2.1.1",
@@ -52,9 +53,9 @@
     "streamdown": "2.3.0",
     "tailwind-merge": "3.5.0",
     "tailwindcss": "4",
-    "@workflow/core": "5.0.0-beta.0",
-    "@workflow/utils": "5.0.0-beta.0",
-    "@workflow/world": "5.0.0-beta.0"
+    "@workflow/core": "5.0.0-beta.10",
+    "@workflow/utils": "5.0.0-beta.3",
+    "@workflow/world": "5.0.0-beta.5"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.4.4",
@@ -64,6 +65,7 @@
     "ai": "6.0.116",
     "typescript": "^5.9.3",
     "vitest": "^4.0.18",
+    "@workflow/errors": "5.0.0-beta.6",
     "@workflow/tsconfig": "5.0.0-beta.0"
   },
   "scripts": {