@echothink-ui/motion 0.1.0

package/src/components/motionUtils.tsx

@@ -0,0 +1,942 @@
+import * as React from "react";
+import type { EthOperationalStatus, EthSeverity } from "@echothink-ui/core";
+
+const reducedMotionQuery = "(prefers-reduced-motion: reduce)";
+
+export function usePrefersReducedMotion() {
+  return React.useSyncExternalStore(
+    subscribeToReducedMotion,
+    getReducedMotionSnapshot,
+    getReducedMotionServerSnapshot
+  );
+}
+
+function subscribeToReducedMotion(onStoreChange: () => void) {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+    return () => {};
+  }
+
+  const media = window.matchMedia(reducedMotionQuery);
+  const listener = () => onStoreChange();
+  media.addEventListener?.("change", listener);
+  return () => media.removeEventListener?.("change", listener);
+}
+
+function getReducedMotionSnapshot() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
+  return window.matchMedia(reducedMotionQuery).matches;
+}
+
+function getReducedMotionServerSnapshot() {
+  return false;
+}
+
+export function MotionStyles() {
+  return (
+    <style>{`
+      @keyframes eth-motion-flow-dash { to { stroke-dashoffset: -24; } }
+      @keyframes eth-motion-pulse { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.035); opacity: .72; } 100% { transform: scale(1); opacity: 1; } }
+      @keyframes eth-motion-attention-ring { 0% { opacity: .52; transform: scale(.64); } 70%, 100% { opacity: 0; transform: scale(1.8); } }
+      @keyframes eth-motion-flow-node-pulse { 0% { opacity: .42; stroke-width: 1; } 100% { opacity: 0; stroke-width: 7; } }
+      @keyframes eth-motion-dot { 0%, 80%, 100% { opacity: .28; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
+      @keyframes eth-motion-spin { to { transform: rotate(360deg); } }
+      @keyframes eth-motion-sync-sweep { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }
+      @keyframes eth-motion-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
+      @keyframes eth-motion-check { 0% { transform: scale(.78); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
+      @keyframes eth-motion-step-check { 0% { stroke-dashoffset: 18; } 100% { stroke-dashoffset: 0; } }
+      @keyframes eth-motion-step-current { 0% { box-shadow: 0 0 0 0 rgba(15, 98, 254, .24); } 100% { box-shadow: 0 0 0 .375rem rgba(15, 98, 254, 0); } }
+      @keyframes eth-motion-status-ring { 0% { stroke-dashoffset: 18; opacity: .18; } 55% { opacity: .48; } 100% { stroke-dashoffset: 0; opacity: .32; } }
+      @keyframes eth-motion-status-halo { 0% { opacity: .36; transform: scale(.68); } 100% { opacity: 0; transform: scale(1.85); } }
+      @keyframes eth-motion-lock-pulse { 0% { opacity: .34; transform: scale(.72); } 70%, 100% { opacity: 0; transform: scale(1.72); } }
+      @keyframes eth-motion-stream-cursor { 0%, 46% { opacity: 1; } 47%, 100% { opacity: 0; } }
+      .eth-motion-streaming-text {
+        align-items: baseline;
+        color: var(--cds-text-primary, #161616);
+        display: inline-flex;
+        font-family: var(--cds-font-family, "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
+        font-size: inherit;
+        line-height: inherit;
+        max-inline-size: 100%;
+        min-inline-size: 0;
+        overflow-wrap: anywhere;
+        white-space: pre-wrap;
+      }
+      .eth-motion-streaming-text__content {
+        min-inline-size: 0;
+      }
+      .eth-motion-streaming-text__cursor {
+        background: var(--cds-interactive, #0f62fe);
+        block-size: 1em;
+        display: inline-block;
+        flex: 0 0 auto;
+        inline-size: 2px;
+        margin-inline-start: .125rem;
+        transform: translateY(.125em);
+      }
+      .eth-motion-streaming-text--streaming .eth-motion-streaming-text__cursor {
+        animation: eth-motion-stream-cursor 1s steps(1, end) infinite;
+      }
+      .eth-motion-streaming-text--complete .eth-motion-streaming-text__cursor {
+        inline-size: 0;
+        margin-inline-start: 0;
+        opacity: 0;
+      }
+      .eth-motion-pipeline-flow {
+        color: var(--cds-text-primary, #161616);
+        display: block;
+        font-family: var(--cds-font-family, "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
+        inline-size: fit-content;
+        max-inline-size: 100%;
+      }
+      .eth-motion-pipeline-flow__svg {
+        block-size: auto;
+        display: block;
+        font-family: inherit;
+        max-inline-size: 100%;
+        overflow: visible;
+      }
+      .eth-motion-pipeline-flow__edge {
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        vector-effect: non-scaling-stroke;
+      }
+      .eth-motion-pipeline-flow__card {
+        fill: var(--cds-layer-02, #ffffff);
+        shape-rendering: crispEdges;
+        stroke: var(--cds-border-subtle, #e0e0e0);
+        stroke-width: 1;
+        vector-effect: non-scaling-stroke;
+      }
+      .eth-motion-pipeline-flow__node--active .eth-motion-pipeline-flow__card {
+        fill: var(--cds-layer-01, #f4f4f4);
+        stroke: var(--cds-border-strong, #8d8d8d);
+      }
+      .eth-motion-pipeline-flow__stripe {
+        shape-rendering: crispEdges;
+      }
+      .eth-motion-pipeline-flow__pulse {
+        animation: eth-motion-flow-node-pulse 1.3s var(--cds-productive-standard-easing, cubic-bezier(.2, 0, .38, .9)) infinite;
+        vector-effect: non-scaling-stroke;
+      }
+      .eth-motion-pipeline-flow__dot {
+        stroke: var(--cds-layer-02, #ffffff);
+        stroke-width: 2;
+        vector-effect: non-scaling-stroke;
+      }
+      .eth-motion-pipeline-flow__label {
+        fill: var(--cds-text-primary, #161616);
+        font-size: 13px;
+        font-weight: 600;
+      }
+      .eth-motion-pipeline-flow__status {
+        fill: var(--cds-text-secondary, #525252);
+        font-size: 11px;
+      }
+      .eth-motion-pipeline-flow__empty {
+        fill: var(--cds-text-secondary, #525252);
+        font-size: 13px;
+      }
+      .eth-motion-pipeline-flow__fallback {
+        block-size: 1px;
+        clip: rect(0 0 0 0);
+        clip-path: inset(50%);
+        inline-size: 1px;
+        margin: 0;
+        overflow: hidden;
+        padding: 0;
+        position: absolute;
+        white-space: nowrap;
+      }
+      .eth-motion-dag-status {
+        color: var(--cds-text-primary, #161616);
+        display: block;
+        max-inline-size: 100%;
+      }
+      .eth-motion-dag-status__svg {
+        block-size: auto;
+        display: block;
+        font-family: var(--cds-font-family, "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
+        max-inline-size: 100%;
+        overflow: visible;
+      }
+      .eth-motion-dag-status__edge {
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        vector-effect: non-scaling-stroke;
+      }
+      .eth-motion-dag-status__card {
+        shape-rendering: crispEdges;
+        stroke-width: 1;
+        vector-effect: non-scaling-stroke;
+      }
+      .eth-motion-dag-status__change-ring {
+        animation: eth-motion-status-ring 700ms var(--cds-productive-standard-easing, cubic-bezier(.2, 0, .38, .9)) 1;
+        stroke-dasharray: 4 4;
+        stroke-width: 1;
+        vector-effect: non-scaling-stroke;
+      }
+      .eth-motion-dag-status__label {
+        fill: var(--cds-text-primary, #161616);
+        font-size: 13px;
+        font-weight: 600;
+      }
+      .eth-motion-dag-status__status {
+        fill: var(--cds-text-secondary, #525252);
+        font-size: 11px;
+      }
+      .eth-motion-dag-status__fallback {
+        block-size: 1px;
+        clip: rect(0 0 0 0);
+        clip-path: inset(50%);
+        inline-size: 1px;
+        margin: 0;
+        overflow: hidden;
+        padding: 0;
+        position: absolute;
+        white-space: nowrap;
+      }
+      .eth-motion-sync-progress {
+        --eth-motion-sync-accent: var(--cds-interactive, #0f62fe);
+        --eth-motion-sync-accent-soft: var(--cds-highlight, #edf5ff);
+
+        box-sizing: border-box;
+        color: var(--cds-text-primary, #161616);
+        font-family: var(--cds-font-family, "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
+        line-height: 1.2857;
+        max-inline-size: 100%;
+        min-inline-size: 0;
+      }
+      .eth-motion-sync-progress *,
+      .eth-motion-sync-progress *::before,
+      .eth-motion-sync-progress *::after {
+        box-sizing: border-box;
+      }
+      .eth-motion-sync-progress--compact {
+        align-items: center;
+        background: var(--cds-layer-01, #ffffff);
+        border: 1px solid var(--cds-border-subtle-01, var(--cds-border-subtle, #e0e0e0));
+        border-inline-start: 3px solid var(--eth-motion-sync-accent);
+        display: inline-flex;
+        gap: var(--cds-spacing-03, .5rem);
+        inline-size: fit-content;
+        min-block-size: 2rem;
+        padding: .375rem .75rem .375rem .625rem;
+        vertical-align: middle;
+      }
+      .eth-motion-sync-progress--detailed {
+        align-items: stretch;
+        background: var(--cds-layer-01, #ffffff);
+        border: 1px solid var(--cds-border-subtle-01, var(--cds-border-subtle, #e0e0e0));
+        border-inline-start: 4px solid var(--eth-motion-sync-accent);
+        display: grid;
+        grid-template-columns: 1.5rem minmax(0, 1fr);
+        inline-size: 100%;
+        max-inline-size: 52rem;
+        min-block-size: 7.5rem;
+      }
+      .eth-motion-sync-progress__indicator {
+        align-items: center;
+        color: var(--eth-motion-sync-accent);
+        display: inline-flex;
+        flex: 0 0 auto;
+        inline-size: 1.125rem;
+        justify-content: center;
+      }
+      .eth-motion-sync-progress--detailed .eth-motion-sync-progress__indicator {
+        align-items: start;
+        inline-size: auto;
+        justify-content: center;
+        padding-block-start: var(--cds-spacing-05, 1rem);
+        padding-inline-start: var(--cds-spacing-04, .75rem);
+      }
+      .eth-motion-sync-progress__spinner,
+      .eth-motion-sync-progress__glyph {
+        block-size: 1rem;
+        border-radius: 50%;
+        display: inline-block;
+        inline-size: 1rem;
+      }
+      .eth-motion-sync-progress__spinner {
+        animation: eth-motion-spin 850ms linear infinite;
+        border: 2px solid var(--cds-border-subtle-01, #c6c6c6);
+        border-block-start-color: var(--eth-motion-sync-accent);
+      }
+      .eth-motion-sync-progress__glyph {
+        background: var(--eth-motion-sync-accent);
+        box-shadow: inset 0 0 0 3px var(--cds-layer-01, #ffffff);
+      }
+      .eth-motion-sync-progress__compact-copy {
+        align-items: baseline;
+        display: inline-flex;
+        gap: var(--cds-spacing-03, .5rem);
+        min-inline-size: 0;
+      }
+      .eth-motion-sync-progress__label {
+        color: var(--cds-text-primary, #161616);
+        font-size: var(--cds-body-compact-01-font-size, .875rem);
+        font-weight: 600;
+        line-height: var(--cds-body-compact-01-line-height, 1.2857);
+        min-inline-size: 0;
+        overflow-wrap: anywhere;
+      }
+      .eth-motion-sync-progress__compact-state {
+        color: var(--cds-text-secondary, #525252);
+        flex: 0 0 auto;
+        font-size: var(--cds-label-01-font-size, .75rem);
+        line-height: var(--cds-label-01-line-height, 1.3333);
+        white-space: nowrap;
+      }
+      .eth-motion-sync-progress__body {
+        display: grid;
+        gap: var(--cds-spacing-04, .75rem);
+        min-inline-size: 0;
+        padding: var(--cds-spacing-05, 1rem);
+      }
+      .eth-motion-sync-progress__header {
+        align-items: start;
+        display: flex;
+        gap: var(--cds-spacing-04, .75rem);
+        justify-content: space-between;
+        min-inline-size: 0;
+      }
+      .eth-motion-sync-progress__title-group {
+        display: grid;
+        gap: var(--cds-spacing-01, .125rem);
+        min-inline-size: 0;
+      }
+      .eth-motion-sync-progress__eyebrow,
+      .eth-motion-sync-progress__description,
+      .eth-motion-sync-progress__progress-copy,
+      .eth-motion-sync-progress__meta dt {
+        color: var(--cds-text-secondary, #525252);
+        font-size: var(--cds-label-01-font-size, .75rem);
+        line-height: var(--cds-label-01-line-height, 1.3333);
+      }
+      .eth-motion-sync-progress__eyebrow,
+      .eth-motion-sync-progress__meta dt {
+        font-weight: 600;
+        text-transform: uppercase;
+      }
+      .eth-motion-sync-progress__description {
+        margin: 0;
+        max-inline-size: 38rem;
+        overflow-wrap: anywhere;
+      }
+      .eth-motion-sync-progress__chip {
+        align-items: center;
+        background: var(--eth-motion-sync-accent-soft);
+        border: 1px solid var(--cds-border-subtle-01, var(--cds-border-subtle, #e0e0e0));
+        color: var(--cds-text-primary, #161616);
+        display: inline-flex;
+        flex: 0 0 auto;
+        font-size: var(--cds-label-01-font-size, .75rem);
+        font-weight: 600;
+        gap: var(--cds-spacing-02, .25rem);
+        line-height: var(--cds-label-01-line-height, 1.3333);
+        min-block-size: 1.5rem;
+        padding: .1875rem var(--cds-spacing-03, .5rem);
+        white-space: nowrap;
+      }
+      .eth-motion-sync-progress__chip-dot {
+        background: var(--eth-motion-sync-accent);
+        block-size: .5rem;
+        border-radius: 50%;
+        display: inline-block;
+        inline-size: .5rem;
+      }
+      .eth-motion-sync-progress__meter {
+        display: grid;
+        gap: var(--cds-spacing-03, .5rem);
+        min-inline-size: 0;
+      }
+      .eth-motion-sync-progress__track {
+        background: var(--cds-border-subtle-01, var(--cds-border-subtle, #e0e0e0));
+        block-size: .5rem;
+        inline-size: 100%;
+        overflow: hidden;
+        position: relative;
+      }
+      .eth-motion-sync-progress__bar {
+        background: var(--eth-motion-sync-accent);
+        block-size: 100%;
+        display: block;
+        min-inline-size: .25rem;
+        transition: inline-size var(--cds-duration-fast-02, 110ms)
+          var(--cds-productive-standard-easing, cubic-bezier(.2, 0, .38, .9));
+      }
+      .eth-motion-sync-progress__bar--indeterminate {
+        animation: eth-motion-sync-sweep 1.35s var(--cds-productive-standard-easing, cubic-bezier(.2, 0, .38, .9)) infinite;
+        inline-size: 34%;
+      }
+      .eth-motion-sync-progress__progress-copy {
+        font-variant-numeric: tabular-nums;
+        justify-self: end;
+      }
+      .eth-motion-sync-progress__meta {
+        background: var(--cds-layer-02, #f4f4f4);
+        border-block-start: 1px solid var(--cds-border-subtle-01, var(--cds-border-subtle, #e0e0e0));
+        display: grid;
+        gap: 0;
+        grid-column: 1 / -1;
+        grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
+        margin: 0;
+        min-inline-size: 0;
+      }
+      .eth-motion-sync-progress__meta-item {
+        display: grid;
+        gap: var(--cds-spacing-02, .25rem);
+        min-inline-size: 0;
+        padding: var(--cds-spacing-04, .75rem) var(--cds-spacing-05, 1rem);
+      }
+      .eth-motion-sync-progress__meta-item + .eth-motion-sync-progress__meta-item {
+        border-inline-start: 1px solid var(--cds-border-subtle-01, var(--cds-border-subtle, #e0e0e0));
+      }
+      .eth-motion-sync-progress__meta dd {
+        color: var(--cds-text-primary, #161616);
+        font-size: var(--cds-body-compact-01-font-size, .875rem);
+        font-weight: 600;
+        line-height: var(--cds-body-compact-01-line-height, 1.2857);
+        margin: 0;
+        min-inline-size: 0;
+        overflow-wrap: anywhere;
+      }
+      .eth-motion-sync-progress.eth-motion-reduced .eth-motion-sync-progress__bar--indeterminate {
+        animation: none;
+        inline-size: 38%;
+      }
+      .eth-motion-skeleton-loading {
+        color: var(--cds-text-primary, #161616);
+        display: block;
+        font-family: var(--cds-font-family, "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
+        inline-size: 100%;
+        max-inline-size: 100%;
+        min-inline-size: 0;
+      }
+      .eth-motion-skeleton-loading__surface {
+        background: var(--cds-layer-01, #f4f4f4);
+        border: 1px solid var(--cds-border-subtle, #e0e0e0);
+        display: grid;
+        inline-size: 100%;
+        min-inline-size: 0;
+        overflow: hidden;
+      }
+      .eth-motion-skeleton-loading__block {
+        background: var(--cds-skeleton-background, #e0e0e0);
+        block-size: .875rem;
+        display: block;
+        inline-size: 100%;
+        min-inline-size: .75rem;
+      }
+      .eth-motion-skeleton-loading:not(.eth-motion-reduced) .eth-motion-skeleton-loading__block {
+        animation: eth-motion-shimmer 1.2s var(--cds-productive-standard-easing, cubic-bezier(.2, 0, .38, .9)) infinite;
+        background-image: linear-gradient(
+          90deg,
+          var(--cds-skeleton-background, #e0e0e0) 0%,
+          var(--cds-skeleton-element, #f4f4f4) 46%,
+          var(--cds-skeleton-background, #e0e0e0) 82%
+        );
+        background-size: 200% 100%;
+      }
+      .eth-motion-skeleton-loading__surface--article {
+        gap: var(--cds-spacing-05, 1rem);
+        padding: var(--cds-spacing-05, 1rem);
+      }
+      .eth-motion-skeleton-loading__article-header,
+      .eth-motion-skeleton-loading__article-body,
+      .eth-motion-skeleton-loading__card-body,
+      .eth-motion-skeleton-loading__list-copy {
+        display: grid;
+        gap: var(--cds-spacing-03, .5rem);
+        min-inline-size: 0;
+      }
+      .eth-motion-skeleton-loading__article-body,
+      .eth-motion-skeleton-loading__card-body {
+        gap: var(--cds-spacing-04, .75rem);
+      }
+      .eth-motion-skeleton-loading__block--eyebrow {
+        block-size: .5rem;
+      }
+      .eth-motion-skeleton-loading__block--title {
+        block-size: 1.125rem;
+      }
+      .eth-motion-skeleton-loading__block--caption,
+      .eth-motion-skeleton-loading__block--column {
+        block-size: .625rem;
+      }
+      .eth-motion-skeleton-loading__surface--card {
+        background: var(--cds-layer-01, #ffffff);
+      }
+      .eth-motion-skeleton-loading__block--media {
+        block-size: 6rem;
+        inline-size: 100%;
+      }
+      .eth-motion-skeleton-loading__card-body {
+        padding: var(--cds-spacing-05, 1rem);
+      }
+      .eth-motion-skeleton-loading__card-metrics {
+        border-block-start: 1px solid var(--cds-border-subtle, #e0e0e0);
+        display: grid;
+        gap: var(--cds-spacing-05, 1rem);
+        grid-template-columns: repeat(3, minmax(0, 1fr));
+        padding: var(--cds-spacing-04, .75rem) var(--cds-spacing-05, 1rem);
+      }
+      .eth-motion-skeleton-loading__block--metric {
+        block-size: 1.5rem;
+      }
+      .eth-motion-skeleton-loading__list-row {
+        align-items: center;
+        display: grid;
+        gap: var(--cds-spacing-04, .75rem);
+        grid-template-columns: 2rem minmax(0, 1fr) minmax(3rem, 5rem);
+        min-block-size: 4rem;
+        padding: var(--cds-spacing-04, .75rem);
+      }
+      .eth-motion-skeleton-loading__list-row + .eth-motion-skeleton-loading__list-row {
+        border-block-start: 1px solid var(--cds-border-subtle, #e0e0e0);
+      }
+      .eth-motion-skeleton-loading__block--avatar {
+        block-size: 2rem;
+        inline-size: 2rem;
+      }
+      .eth-motion-skeleton-loading__block--tag {
+        block-size: 1.25rem;
+        justify-self: end;
+      }
+      .eth-motion-skeleton-loading__surface--table {
+        background: var(--cds-layer-01, #ffffff);
+      }
+      .eth-motion-skeleton-loading__table-header,
+      .eth-motion-skeleton-loading__table-row {
+        display: grid;
+        gap: var(--cds-spacing-05, 1rem);
+        min-inline-size: 0;
+      }
+      .eth-motion-skeleton-loading__table-header {
+        align-items: center;
+        background: var(--cds-layer-02, #f4f4f4);
+        min-block-size: 2.5rem;
+        padding: var(--cds-spacing-04, .75rem);
+      }
+      .eth-motion-skeleton-loading__table-row {
+        align-items: center;
+        border-block-start: 1px solid var(--cds-border-subtle, #e0e0e0);
+        min-block-size: 3rem;
+        padding: var(--cds-spacing-04, .75rem);
+      }
+      .eth-motion-skeleton-loading__block--cell {
+        block-size: .75rem;
+      }
+      @media (max-width: 42rem) {
+        .eth-motion-sync-progress__header {
+          align-items: stretch;
+          flex-direction: column;
+        }
+        .eth-motion-sync-progress__chip {
+          align-self: start;
+        }
+        .eth-motion-sync-progress__meta {
+          grid-template-columns: minmax(0, 1fr);
+        }
+        .eth-motion-sync-progress__meta-item + .eth-motion-sync-progress__meta-item {
+          border-block-start: 1px solid var(--cds-border-subtle-01, var(--cds-border-subtle, #e0e0e0));
+          border-inline-start: 0;
+        }
+        .eth-motion-skeleton-loading__list-row {
+          grid-template-columns: 2rem minmax(0, 1fr);
+        }
+        .eth-motion-skeleton-loading__block--tag {
+          display: none;
+        }
+        .eth-motion-skeleton-loading__table-header,
+        .eth-motion-skeleton-loading__table-row {
+          gap: var(--cds-spacing-04, .75rem);
+        }
+      }
+      .eth-motion-status-change {
+        --eth-motion-status-color: var(--cds-interactive, #0f62fe);
+        --eth-motion-status-previous-color: var(--cds-text-secondary, #525252);
+
+        align-items: center;
+        background: var(--cds-layer-01, #ffffff);
+        border: 1px solid var(--cds-border-subtle-01, var(--cds-border-subtle, #e0e0e0));
+        border-inline-start: 3px solid var(--eth-motion-status-color);
+        border-radius: var(--cds-radius-sm, 2px);
+        box-sizing: border-box;
+        color: var(--cds-text-primary, #161616);
+        display: inline-flex;
+        font-family: var(--cds-font-family, "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
+        gap: var(--cds-spacing-04, .75rem);
+        inline-size: fit-content;
+        line-height: 1.2857;
+        max-inline-size: 100%;
+        min-block-size: 2.5rem;
+        padding: .5rem .75rem .5rem .625rem;
+        vertical-align: middle;
+      }
+      .eth-motion-status-change--changed {
+        animation: eth-motion-pulse 650ms var(--cds-productive-standard-easing, cubic-bezier(.2, 0, .38, .9)) 1;
+        background: var(--cds-layer-02, #f4f4f4);
+      }
+      .eth-motion-status-change__indicator {
+        align-items: center;
+        display: inline-flex;
+        flex: 0 0 auto;
+        inline-size: 2.5rem;
+      }
+      .eth-motion-status-change__previous-dot,
+      .eth-motion-status-change__current-dot {
+        border-radius: 50%;
+        box-sizing: border-box;
+        display: inline-block;
+        flex: 0 0 auto;
+      }
+      .eth-motion-status-change__previous-dot {
+        background: var(--eth-motion-status-previous-color);
+        block-size: .5rem;
+        inline-size: .5rem;
+        opacity: .64;
+      }
+      .eth-motion-status-change__connector {
+        background: var(--cds-border-strong-01, #8d8d8d);
+        block-size: 1px;
+        flex: 1 1 auto;
+        margin-inline: .25rem;
+        min-inline-size: .625rem;
+      }
+      .eth-motion-status-change__current-dot {
+        background: var(--eth-motion-status-color);
+        block-size: .625rem;
+        box-shadow: 0 0 0 2px var(--cds-layer-01, #ffffff);
+        inline-size: .625rem;
+        position: relative;
+      }
+      .eth-motion-status-change--changed .eth-motion-status-change__current-dot::after {
+        animation: eth-motion-status-halo 700ms var(--cds-productive-standard-easing, cubic-bezier(.2, 0, .38, .9)) 1;
+        border: 1px solid var(--eth-motion-status-color);
+        border-radius: 50%;
+        content: "";
+        inset: -.375rem;
+        opacity: 0;
+        position: absolute;
+      }
+      .eth-motion-status-change__content {
+        display: grid;
+        gap: var(--cds-spacing-01, .125rem);
+        min-inline-size: 0;
+      }
+      .eth-motion-status-change__label {
+        color: var(--cds-text-primary, #161616);
+        font-size: var(--cds-body-compact-01-font-size, .875rem);
+        font-weight: 600;
+        line-height: var(--cds-body-compact-01-line-height, 1.2857);
+        min-inline-size: 0;
+        overflow-wrap: anywhere;
+      }
+      .eth-motion-status-change__state {
+        align-items: center;
+        color: var(--cds-text-secondary, #525252);
+        display: flex;
+        flex-wrap: wrap;
+        font-size: var(--cds-label-01-font-size, .75rem);
+        gap: var(--cds-spacing-02, .25rem);
+        line-height: var(--cds-label-01-line-height, 1.3333);
+        min-inline-size: 0;
+      }
+      .eth-motion-status-change__previous,
+      .eth-motion-status-change__current {
+        overflow-wrap: anywhere;
+      }
+      .eth-motion-status-change__current {
+        color: var(--cds-text-primary, #161616);
+        font-weight: 600;
+      }
+      .eth-motion-status-change__separator {
+        color: var(--cds-text-secondary, #525252);
+      }
+      .eth-motion-attention-pulse {
+        --eth-motion-attention-color: var(--cds-support-warning, #f1c21b);
+        --eth-motion-attention-border: #8a6a00;
+        --eth-motion-attention-ink: var(--cds-text-primary, #161616);
+        --eth-motion-attention-repeat: infinite;
+
+        align-items: center;
+        background: var(--cds-layer-02, #ffffff);
+        border: 1px solid var(--cds-border-subtle, #e0e0e0);
+        border-radius: var(--cds-radius-sm, 2px);
+        box-shadow: inset 3px 0 0 var(--eth-motion-attention-color);
+        color: var(--cds-text-primary, #161616);
+        display: inline-flex;
+        font-size: .875rem;
+        font-weight: 500;
+        gap: var(--cds-spacing-03, .5rem);
+        inline-size: fit-content;
+        line-height: 1.2857;
+        max-inline-size: 100%;
+        min-block-size: 2rem;
+        padding: .375rem .75rem .375rem .625rem;
+        vertical-align: middle;
+      }
+      .eth-motion-attention-pulse__marker {
+        align-items: center;
+        block-size: 1rem;
+        display: inline-flex;
+        flex: 0 0 auto;
+        inline-size: 1rem;
+        justify-content: center;
+        position: relative;
+      }
+      .eth-motion-attention-pulse__marker::before {
+        animation: eth-motion-attention-ring 1.4s var(--cds-productive-standard-easing, cubic-bezier(.2, 0, .38, .9)) var(--eth-motion-attention-repeat);
+        border: 1px solid var(--eth-motion-attention-color);
+        border-radius: 50%;
+        content: "";
+        inset: -.125rem;
+        position: absolute;
+      }
+      .eth-motion-attention-pulse__dot {
+        align-items: center;
+        background: var(--eth-motion-attention-color);
+        block-size: 1rem;
+        border: 1px solid var(--eth-motion-attention-border);
+        border-radius: 50%;
+        color: var(--eth-motion-attention-ink);
+        display: inline-flex;
+        font-size: .6875rem;
+        font-weight: 700;
+        inline-size: 1rem;
+        justify-content: center;
+        line-height: 1;
+        position: relative;
+      }
+      .eth-motion-attention-pulse__label {
+        min-inline-size: 0;
+        overflow-wrap: anywhere;
+      }
+      .eth-motion-attention-pulse.eth-motion-reduced .eth-motion-attention-pulse__marker::before {
+        animation: none;
+        opacity: .32;
+        transform: scale(1);
+      }
+      .eth-motion-document-lock {
+        --eth-motion-document-lock-accent: var(--cds-interactive, #0f62fe);
+
+        align-items: center;
+        background: var(--cds-layer-01, #ffffff);
+        border: 1px solid var(--cds-border-subtle-01, var(--cds-border-subtle, #e0e0e0));
+        border-inline-start: 3px solid var(--cds-border-strong-01, #8d8d8d);
+        box-sizing: border-box;
+        color: var(--cds-text-primary, #161616);
+        display: inline-flex;
+        font-family: var(--cds-font-family, "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
+        gap: var(--cds-spacing-03, .5rem);
+        inline-size: fit-content;
+        line-height: 1.2857;
+        max-inline-size: 100%;
+        min-block-size: 2.5rem;
+        padding: .375rem .75rem .375rem .625rem;
+        vertical-align: middle;
+      }
+      .eth-motion-document-lock--active {
+        background: var(--cds-layer-02, #f4f4f4);
+        border-inline-start-color: var(--eth-motion-document-lock-accent);
+      }
+      .eth-motion-document-lock__indicator {
+        align-items: center;
+        block-size: 1.25rem;
+        color: var(--cds-icon-secondary, #525252);
+        display: inline-flex;
+        flex: 0 0 auto;
+        inline-size: 1.25rem;
+        justify-content: center;
+        position: relative;
+      }
+      .eth-motion-document-lock--active .eth-motion-document-lock__indicator {
+        color: var(--eth-motion-document-lock-accent);
+      }
+      .eth-motion-document-lock__pulse {
+        border: 1px solid currentColor;
+        border-radius: 50%;
+        inset: .125rem;
+        opacity: 0;
+        position: absolute;
+      }
+      .eth-motion-document-lock--active .eth-motion-document-lock__pulse {
+        animation: eth-motion-lock-pulse 1.45s var(--cds-productive-standard-easing, cubic-bezier(.2, 0, .38, .9)) infinite;
+        opacity: .34;
+      }
+      .eth-motion-document-lock__icon {
+        block-size: 1rem;
+        inline-size: 1rem;
+        position: relative;
+      }
+      .eth-motion-document-lock__content {
+        display: grid;
+        gap: 0;
+        min-inline-size: 0;
+      }
+      .eth-motion-document-lock__state {
+        color: var(--cds-text-secondary, #525252);
+        font-size: .75rem;
+        font-weight: 600;
+        line-height: 1.3333;
+      }
+      .eth-motion-document-lock--active .eth-motion-document-lock__state {
+        color: var(--cds-link-primary, #0f62fe);
+      }
+      .eth-motion-document-lock__owner {
+        color: var(--cds-text-primary, #161616);
+        font-size: .875rem;
+        font-weight: 600;
+        line-height: 1.2857;
+        overflow-wrap: anywhere;
+      }
+      .eth-motion-document-lock.eth-motion-reduced .eth-motion-document-lock__pulse {
+        animation: none;
+        opacity: .18;
+        transform: scale(1);
+      }
+      .eth-motion-step-completion {
+        align-items: start;
+        color: var(--cds-text-primary, #161616);
+        display: inline-grid;
+        font-family: var(--cds-font-family, "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
+        font-size: var(--cds-body-compact-01-font-size, .875rem);
+        gap: var(--cds-spacing-03, .5rem);
+        grid-template-columns: 1.5rem minmax(0, 1fr);
+        line-height: var(--cds-body-compact-01-line-height, 1.4286);
+        max-inline-size: 100%;
+        min-inline-size: 0;
+        vertical-align: middle;
+      }
+      .eth-motion-step-completion__marker {
+        align-items: center;
+        background: var(--cds-layer-01, #ffffff);
+        block-size: 1.5rem;
+        border: 1px solid var(--cds-border-strong-01, #8d8d8d);
+        border-radius: 50%;
+        color: var(--cds-icon-secondary, #525252);
+        display: inline-flex;
+        flex: 0 0 auto;
+        inline-size: 1.5rem;
+        justify-content: center;
+        margin-block-start: .0625rem;
+      }
+      .eth-motion-step-completion--completed .eth-motion-step-completion__marker {
+        animation: eth-motion-check 220ms var(--cds-productive-standard-easing, cubic-bezier(.2, 0, .38, .9)) 1;
+        background: var(--cds-support-success, #24a148);
+        border-color: var(--cds-support-success, #24a148);
+        color: var(--cds-text-on-color, #ffffff);
+      }
+      .eth-motion-step-completion--current .eth-motion-step-completion__marker {
+        animation: eth-motion-step-current 1.25s var(--cds-productive-standard-easing, cubic-bezier(.2, 0, .38, .9)) infinite;
+        background: var(--cds-highlight, #edf5ff);
+        border-color: var(--cds-interactive, #0f62fe);
+        color: var(--cds-interactive, #0f62fe);
+      }
+      .eth-motion-step-completion--pending .eth-motion-step-completion__marker {
+        background: var(--cds-layer-02, #f4f4f4);
+        border-color: var(--cds-border-strong-01, #8d8d8d);
+        color: var(--cds-icon-secondary, #525252);
+      }
+      .eth-motion-step-completion__check {
+        block-size: 1rem;
+        display: block;
+        inline-size: 1rem;
+      }
+      .eth-motion-step-completion__check-path {
+        animation: eth-motion-step-check 260ms var(--cds-productive-standard-easing, cubic-bezier(.2, 0, .38, .9)) 90ms both;
+        fill: none;
+        stroke: currentColor;
+        stroke-dasharray: 18;
+        stroke-dashoffset: 18;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+        stroke-width: 2;
+      }
+      .eth-motion-step-completion__dot {
+        background: currentColor;
+        block-size: .4375rem;
+        border-radius: 50%;
+        display: block;
+        inline-size: .4375rem;
+      }
+      .eth-motion-step-completion--current .eth-motion-step-completion__dot {
+        block-size: .5rem;
+        inline-size: .5rem;
+      }
+      .eth-motion-step-completion__content {
+        display: grid;
+        gap: .125rem;
+        min-inline-size: 0;
+      }
+      .eth-motion-step-completion__label {
+        color: var(--cds-text-primary, #161616);
+        font-weight: 600;
+        overflow-wrap: anywhere;
+      }
+      .eth-motion-step-completion__state {
+        color: var(--cds-text-secondary, #525252);
+        font-size: var(--cds-label-01-font-size, .75rem);
+        font-weight: 600;
+        line-height: var(--cds-label-01-line-height, 1.3333);
+      }
+      .eth-motion-step-completion--completed .eth-motion-step-completion__state {
+        color: var(--cds-support-success-strong, #198038);
+      }
+      .eth-motion-step-completion--current .eth-motion-step-completion__state {
+        color: var(--cds-link-primary, #0f62fe);
+      }
+      .eth-motion-step-completion__description {
+        color: var(--cds-text-secondary, #525252);
+        font-size: var(--cds-label-01-font-size, .75rem);
+        line-height: var(--cds-label-01-line-height, 1.3333);
+        overflow-wrap: anywhere;
+      }
+      .eth-motion-step-completion.eth-motion-reduced .eth-motion-step-completion__check-path {
+        stroke-dashoffset: 0;
+      }
+      .eth-motion-reduced,
+      .eth-motion-reduced * { animation: none !important; transition: none !important; }
+    `}</style>
+  );
+}
+
+export function statusColor(status: EthOperationalStatus) {
+  switch (status) {
+    case "succeeded":
+    case "completed":
+    case "synced":
+      return "#24a148";
+    case "failed":
+    case "blocked":
+      return "#da1e28";
+    case "warning":
+    case "pending-approval":
+    case "approval-required":
+      return "#f1c21b";
+    case "running":
+    case "in-progress":
+    case "active":
+      return "#0f62fe";
+    case "paused":
+    case "stale":
+      return "#8d8d8d";
+    default:
+      return "#6f6f6f";
+  }
+}
+
+export function severityColor(severity: EthSeverity | undefined) {
+  switch (severity) {
+    case "danger":
+      return "#da1e28";
+    case "warning":
+      return "#f1c21b";
+    case "success":
+      return "#24a148";
+    case "info":
+      return "#0f62fe";
+    default:
+      return "#6f6f6f";
+  }
+}