@echothink-ui/motion 0.1.0

package/dist/index.js

@@ -0,0 +1,2333 @@
+// src/components/motionUtils.tsx
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+var reducedMotionQuery = "(prefers-reduced-motion: reduce)";
+function usePrefersReducedMotion() {
+  return React.useSyncExternalStore(
+    subscribeToReducedMotion,
+    getReducedMotionSnapshot,
+    getReducedMotionServerSnapshot
+  );
+}
+function subscribeToReducedMotion(onStoreChange) {
+  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;
+}
+function MotionStyles() {
+  return /* @__PURE__ */ jsx("style", { children: `
+      @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; }
+    ` });
+}
+function statusColor(status) {
+  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";
+  }
+}
+function severityColor(severity) {
+  switch (severity) {
+    case "danger":
+      return "#da1e28";
+    case "warning":
+      return "#f1c21b";
+    case "success":
+      return "#24a148";
+    case "info":
+      return "#0f62fe";
+    default:
+      return "#6f6f6f";
+  }
+}
+
+// src/components/AgentThinkingAnimation.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function AgentThinkingAnimation({
+  label = "Agent thinking",
+  className,
+  style,
+  ...props
+}) {
+  const reduced = usePrefersReducedMotion();
+  const classes = [
+    "eth-motion-agent-thinking",
+    reduced ? "eth-motion-reduced" : void 0,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      ...props,
+      className: classes,
+      role: "status",
+      "aria-label": label,
+      "data-eth-component": "AgentThinkingAnimation",
+      style: {
+        alignItems: "center",
+        color: "var(--cds-interactive, #0f62fe)",
+        display: "inline-flex",
+        justifyContent: "center",
+        lineHeight: 1,
+        minBlockSize: 16,
+        verticalAlign: "middle",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx2(MotionStyles, {}),
+        /* @__PURE__ */ jsxs("span", { "aria-hidden": true, style: { alignItems: "center", display: "inline-flex", gap: 4 }, children: [
+          /* @__PURE__ */ jsx2("span", { className: "eth-motion-dot", style: dotStyle(reduced, 0) }),
+          /* @__PURE__ */ jsx2("span", { className: "eth-motion-dot", style: dotStyle(reduced, 1) }),
+          /* @__PURE__ */ jsx2("span", { className: "eth-motion-dot", style: dotStyle(reduced, 2) })
+        ] })
+      ]
+    }
+  );
+}
+function dotStyle(reduced, index) {
+  return {
+    display: "inline-block",
+    width: 6,
+    height: 6,
+    borderRadius: "50%",
+    background: "currentColor",
+    flex: "0 0 auto",
+    animation: reduced ? void 0 : "eth-motion-dot 1s ease-in-out infinite",
+    animationDelay: reduced ? void 0 : `${index * 120}ms`
+  };
+}
+
+// src/components/AttentionPulse.tsx
+import * as React2 from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function AttentionPulse({
+  severity = "warning",
+  maxRepeats,
+  className,
+  children,
+  role = "status",
+  style,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const reduced = usePrefersReducedMotion();
+  const hasLabel = React2.Children.count(children) > 0;
+  const classes = [
+    "eth-motion-attention-pulse",
+    `eth-motion-attention-pulse--${severity}`,
+    reduced ? "eth-motion-reduced" : null,
+    className
+  ].filter(Boolean).join(" ");
+  const attentionStyle = {
+    "--eth-motion-attention-color": severityColor(severity),
+    "--eth-motion-attention-border": severityBorderColor(severity),
+    "--eth-motion-attention-ink": severityInkColor(severity),
+    "--eth-motion-attention-repeat": String(maxRepeats ?? "infinite"),
+    ...style
+  };
+  return /* @__PURE__ */ jsxs2(
+    "span",
+    {
+      ...props,
+      "aria-label": ariaLabel ?? (hasLabel ? void 0 : "Attention required"),
+      className: classes,
+      "data-eth-component": "AttentionPulse",
+      role,
+      style: attentionStyle,
+      children: [
+        /* @__PURE__ */ jsx3(MotionStyles, {}),
+        /* @__PURE__ */ jsx3("span", { className: "eth-motion-attention-pulse__marker", "aria-hidden": "true", children: /* @__PURE__ */ jsx3("span", { className: "eth-motion-attention-pulse__dot", children: "!" }) }),
+        hasLabel ? /* @__PURE__ */ jsx3("span", { className: "eth-motion-attention-pulse__label", children }) : null
+      ]
+    }
+  );
+}
+function severityBorderColor(severity) {
+  return severity === "warning" ? "#8a6a00" : severityColor(severity);
+}
+function severityInkColor(severity) {
+  return severity === "warning" ? "#161616" : "#ffffff";
+}
+
+// src/components/DAGStatusTransition.tsx
+import * as React3 from "react";
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+function DAGStatusTransition({
+  nodes,
+  previousNodes,
+  edges = [],
+  className,
+  ...props
+}) {
+  const reduced = usePrefersReducedMotion();
+  const previousStatus = new Map(previousNodes?.map((node) => [node.id, node.status]) ?? []);
+  const positions = layoutDag(nodes, edges);
+  const frame = viewBoxFor(nodes, positions);
+  const titleId = React3.useId();
+  const descriptionId = React3.useId();
+  const markerBaseId = React3.useId();
+  const changedCount = nodes.filter(
+    (node) => previousStatus.has(node.id) && previousStatus.get(node.id) !== node.status
+  ).length;
+  return /* @__PURE__ */ jsxs3(
+    "section",
+    {
+      ...props,
+      className: `eth-motion-dag-status ${reduced ? "eth-motion-reduced" : ""} ${className ?? ""}`,
+      "data-eth-component": "DAGStatusTransition",
+      "aria-label": "DAG status transition",
+      children: [
+        /* @__PURE__ */ jsx4(MotionStyles, {}),
+        /* @__PURE__ */ jsxs3(
+          "svg",
+          {
+            className: "eth-motion-dag-status__svg",
+            viewBox: frame.viewBox,
+            width: frame.width,
+            height: frame.height,
+            role: "img",
+            "aria-labelledby": `${titleId} ${descriptionId}`,
+            children: [
+              /* @__PURE__ */ jsx4("title", { id: titleId, children: "DAG status transition" }),
+              /* @__PURE__ */ jsx4("desc", { id: descriptionId, children: `${nodes.length} nodes, ${edges.length} edges, ${changedCount} changed node statuses.` }),
+              /* @__PURE__ */ jsx4("defs", { children: edges.map((edge, index) => {
+                const to = positions.get(edge.to);
+                if (!to) return null;
+                const color = edgeColor(edge, nodes.find((node) => node.id === edge.to)?.status);
+                return /* @__PURE__ */ jsx4(
+                  "marker",
+                  {
+                    id: markerIdFromUseId(markerBaseId, index),
+                    markerWidth: "8",
+                    markerHeight: "8",
+                    refX: "7",
+                    refY: "3",
+                    orient: "auto",
+                    markerUnits: "strokeWidth",
+                    children: /* @__PURE__ */ jsx4("path", { d: "M0,0 L0,6 L7,3 z", fill: color })
+                  },
+                  `${edge.from}-${edge.to}-${index}`
+                );
+              }) }),
+              edges.map((edge, index) => {
+                const from = positions.get(edge.from);
+                const to = positions.get(edge.to);
+                if (!from || !to) return null;
+                const color = edgeColor(edge, nodes.find((node) => node.id === edge.to)?.status);
+                const active = edge.active && !reduced;
+                return /* @__PURE__ */ jsx4(
+                  "path",
+                  {
+                    className: "eth-motion-dag-status__edge",
+                    d: edgePath(from, to),
+                    fill: "none",
+                    stroke: color,
+                    strokeWidth: active ? 2 : 1.25,
+                    strokeDasharray: active ? "6 6" : void 0,
+                    markerEnd: `url(#${markerIdFromUseId(markerBaseId, index)})`,
+                    style: active ? { animation: "eth-motion-flow-dash 900ms linear infinite" } : void 0
+                  },
+                  `${edge.from}-${edge.to}-${index}`
+                );
+              }),
+              nodes.map((node) => {
+                const point = positions.get(node.id);
+                if (!point) return null;
+                const previous = previousStatus.get(node.id);
+                const changed = previous !== void 0 && previous !== node.status;
+                const statusText = changed ? `${compactLabelForStatus(previous)} -> ${compactLabelForStatus(node.status)}` : labelForStatus(node.status);
+                return /* @__PURE__ */ jsxs3(
+                  "g",
+                  {
+                    className: `eth-motion-dag-status__node ${changed ? "eth-motion-dag-status__node--changed" : ""}`,
+                    transform: `translate(${point.x}, ${point.y})`,
+                    children: [
+                      changed ? /* @__PURE__ */ jsx4(
+                        "rect",
+                        {
+                          className: "eth-motion-dag-status__change-ring",
+                          x: -NODE_WIDTH / 2 - 4,
+                          y: -NODE_HEIGHT / 2 - 4,
+                          width: NODE_WIDTH + 8,
+                          height: NODE_HEIGHT + 8,
+                          rx: 0,
+                          fill: "none",
+                          stroke: statusColor(node.status)
+                        }
+                      ) : null,
+                      /* @__PURE__ */ jsx4(
+                        "rect",
+                        {
+                          className: "eth-motion-dag-status__card",
+                          x: -NODE_WIDTH / 2,
+                          y: -NODE_HEIGHT / 2,
+                          width: NODE_WIDTH,
+                          height: NODE_HEIGHT,
+                          rx: 0,
+                          fill: "var(--cds-layer-02, #ffffff)",
+                          stroke: "var(--cds-border-subtle, #e0e0e0)"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx4(
+                        "rect",
+                        {
+                          x: -NODE_WIDTH / 2,
+                          y: -NODE_HEIGHT / 2,
+                          width: 4,
+                          height: NODE_HEIGHT,
+                          rx: 0,
+                          fill: statusColor(node.status)
+                        }
+                      ),
+                      /* @__PURE__ */ jsx4("circle", { cx: -NODE_WIDTH / 2 + 20, cy: -9, r: 4.5, fill: statusColor(node.status) }),
+                      /* @__PURE__ */ jsx4("text", { className: "eth-motion-dag-status__label", x: -NODE_WIDTH / 2 + 34, y: -7, children: truncate(node.label, 18) }),
+                      /* @__PURE__ */ jsx4("text", { className: "eth-motion-dag-status__status", x: -NODE_WIDTH / 2 + 34, y: 15, children: truncate(statusText, 24) }),
+                      /* @__PURE__ */ jsx4("title", { children: changed && previous ? `${node.label}: ${labelForStatus(previous)} to ${labelForStatus(node.status)}` : `${node.label}: ${labelForStatus(node.status)}` })
+                    ]
+                  },
+                  node.id
+                );
+              })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx4("ol", { className: "eth-motion-dag-status__fallback", children: nodes.map((node) => {
+          const previous = previousStatus.get(node.id);
+          const changed = previous !== void 0 && previous !== node.status;
+          return /* @__PURE__ */ jsx4("li", { children: changed && previous ? `${node.label}: ${labelForStatus(previous)} to ${labelForStatus(node.status)}` : `${node.label}: ${labelForStatus(node.status)}` }, node.id);
+        }) })
+      ]
+    }
+  );
+}
+var NODE_WIDTH = 160;
+var NODE_HEIGHT = 64;
+var NODE_GAP_X = 190;
+var NODE_GAP_Y = 92;
+function layoutDag(nodes, edges = []) {
+  const map = /* @__PURE__ */ new Map();
+  const ids = new Set(nodes.map((node) => node.id));
+  const ranks = new Map(nodes.map((node) => [node.id, 0]));
+  const validEdges = edges.filter((edge) => ids.has(edge.from) && ids.has(edge.to));
+  for (let pass = 0; pass < nodes.length; pass += 1) {
+    for (const edge of validEdges) {
+      const fromRank = ranks.get(edge.from) ?? 0;
+      const toRank = ranks.get(edge.to) ?? 0;
+      if (toRank < fromRank + 1) ranks.set(edge.to, fromRank + 1);
+    }
+  }
+  const groups = /* @__PURE__ */ new Map();
+  for (const node of nodes) {
+    const rank = ranks.get(node.id) ?? 0;
+    groups.set(rank, [...groups.get(rank) ?? [], node]);
+  }
+  const maxRows = Math.max(1, ...Array.from(groups.values()).map((group) => group.length));
+  nodes.forEach((node, index) => {
+    const rank = ranks.get(node.id) ?? index;
+    const group = groups.get(rank) ?? [node];
+    const rowIndex = Math.max(
+      0,
+      group.findIndex((candidate) => candidate.id === node.id)
+    );
+    const row = group.length === 1 && maxRows > 1 ? (maxRows - 1) / 2 : rowIndex;
+    map.set(node.id, {
+      x: node.x ?? 88 + rank * NODE_GAP_X,
+      y: node.y ?? 64 + row * NODE_GAP_Y
+    });
+  });
+  return map;
+}
+function viewBoxFor(nodes, positions) {
+  if (!nodes.length) {
+    return { viewBox: "0 0 320 120", width: 320, height: 120 };
+  }
+  const points = nodes.map((node) => positions.get(node.id)).filter((point) => Boolean(point));
+  const minX = Math.floor(Math.min(...points.map((point) => point.x)) - NODE_WIDTH / 2 - 24);
+  const minY = Math.floor(Math.min(...points.map((point) => point.y)) - NODE_HEIGHT / 2 - 20);
+  const maxX = Math.ceil(Math.max(...points.map((point) => point.x)) + NODE_WIDTH / 2 + 30);
+  const maxY = Math.ceil(Math.max(...points.map((point) => point.y)) + NODE_HEIGHT / 2 + 20);
+  const width = maxX - minX;
+  const height = maxY - minY;
+  return { viewBox: `${minX} ${minY} ${width} ${height}`, width, height };
+}
+function edgePath(from, to) {
+  const horizontal = Math.abs(to.x - from.x) >= Math.abs(to.y - from.y);
+  if (horizontal) {
+    const direction2 = to.x >= from.x ? 1 : -1;
+    const start2 = { x: from.x + NODE_WIDTH / 2 * direction2, y: from.y };
+    const end2 = { x: to.x - NODE_WIDTH / 2 * direction2, y: to.y };
+    const controlOffset2 = Math.max(32, Math.abs(end2.x - start2.x) * 0.5);
+    return `M ${start2.x} ${start2.y} C ${start2.x + controlOffset2 * direction2} ${start2.y}, ${end2.x - controlOffset2 * direction2} ${end2.y}, ${end2.x} ${end2.y}`;
+  }
+  const direction = to.y >= from.y ? 1 : -1;
+  const start = { x: from.x, y: from.y + NODE_HEIGHT / 2 * direction };
+  const end = { x: to.x, y: to.y - NODE_HEIGHT / 2 * direction };
+  const controlOffset = Math.max(28, Math.abs(end.y - start.y) * 0.5);
+  return `M ${start.x} ${start.y} C ${start.x} ${start.y + controlOffset * direction}, ${end.x} ${end.y - controlOffset * direction}, ${end.x} ${end.y}`;
+}
+function edgeColor(edge, toStatus) {
+  if (edge.status) return statusColor(edge.status);
+  if (edge.active) return "var(--cds-interactive, #0f62fe)";
+  if (toStatus === "failed" || toStatus === "blocked") return statusColor(toStatus);
+  return "var(--cds-border-strong, #8d8d8d)";
+}
+function markerIdFromUseId(id, index) {
+  return `eth-motion-dag-arrow-${id.replace(/[^a-zA-Z0-9_-]/g, "")}-${index}`;
+}
+function labelForStatus(status) {
+  switch (status) {
+    case "approval-required":
+      return "Approval required";
+    case "pending-approval":
+      return "Pending approval";
+    case "in-progress":
+      return "In progress";
+    case "not-started":
+      return "Not started";
+    default:
+      return status.split("-").map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(" ");
+  }
+}
+function compactLabelForStatus(status) {
+  switch (status) {
+    case "approval-required":
+      return "Approval";
+    case "pending-approval":
+      return "Pending";
+    case "in-progress":
+      return "Progress";
+    case "not-started":
+      return "Not started";
+    default:
+      return labelForStatus(status);
+  }
+}
+function truncate(value, maxLength) {
+  if (value.length <= maxLength) return value;
+  return `${value.slice(0, Math.max(0, maxLength - 3))}...`;
+}
+
+// src/components/DocumentLockPulse.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+function DocumentLockPulse({
+  lockedBy,
+  active = true,
+  className,
+  children,
+  role = "status",
+  style,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const reduced = usePrefersReducedMotion();
+  const owner = children ?? lockedBy ?? "Document locked";
+  const ownerLabel = plainText(children ?? lockedBy);
+  const classes = [
+    "eth-motion-document-lock",
+    active ? "eth-motion-document-lock--active" : "eth-motion-document-lock--idle",
+    reduced ? "eth-motion-reduced" : void 0,
+    className
+  ].filter(Boolean).join(" ");
+  const defaultLabel = ownerLabel ? `Document lock ${active ? "active" : "held"} by ${ownerLabel}` : active ? "Document lock active" : "Document locked";
+  return /* @__PURE__ */ jsxs4(
+    "span",
+    {
+      ...props,
+      "aria-label": ariaLabel ?? defaultLabel,
+      className: classes,
+      "data-eth-component": "DocumentLockPulse",
+      role,
+      style,
+      children: [
+        /* @__PURE__ */ jsx5(MotionStyles, {}),
+        /* @__PURE__ */ jsxs4("span", { className: "eth-motion-document-lock__indicator", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx5("span", { className: "eth-motion-document-lock__pulse" }),
+          /* @__PURE__ */ jsx5(LockGlyph, { className: "eth-motion-document-lock__icon" })
+        ] }),
+        /* @__PURE__ */ jsxs4("span", { className: "eth-motion-document-lock__content", children: [
+          /* @__PURE__ */ jsx5("span", { className: "eth-motion-document-lock__state", children: active ? "Active edit" : "Lock held" }),
+          /* @__PURE__ */ jsx5("span", { className: "eth-motion-document-lock__owner", children: owner })
+        ] })
+      ]
+    }
+  );
+}
+function LockGlyph(props) {
+  return /* @__PURE__ */ jsx5("svg", { ...props, "aria-hidden": "true", focusable: "false", viewBox: "0 0 16 16", children: /* @__PURE__ */ jsx5(
+    "path",
+    {
+      d: "M5 7V5a3 3 0 0 1 6 0v2h1a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h1Zm1.5 0h3V5a1.5 1.5 0 0 0-3 0v2Z",
+      fill: "currentColor"
+    }
+  ) });
+}
+function plainText(value) {
+  if (typeof value === "string" || typeof value === "number") {
+    return String(value);
+  }
+  return void 0;
+}
+
+// src/components/PipelineFlowAnimation.tsx
+import * as React4 from "react";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function PipelineFlowAnimation({
+  nodes,
+  edges,
+  className,
+  "aria-label": ariaLabel = "Pipeline flow",
+  ...props
+}) {
+  const reduced = usePrefersReducedMotion();
+  const positions = layoutNodes(nodes);
+  const frame = viewBoxFor2(nodes, positions);
+  const titleId = React4.useId();
+  const descriptionId = React4.useId();
+  const markerBaseId = React4.useId();
+  const activeNodeIds = new Set(
+    edges.filter((edge) => edge.active).flatMap((edge) => [edge.from, edge.to]).concat(nodes.filter((node) => isActiveStatus(node.status)).map((node) => node.id))
+  );
+  return /* @__PURE__ */ jsxs5(
+    "section",
+    {
+      ...props,
+      className: `eth-motion-pipeline-flow ${reduced ? "eth-motion-reduced" : ""} ${className ?? ""}`,
+      "data-eth-component": "PipelineFlowAnimation",
+      "aria-label": ariaLabel,
+      children: [
+        /* @__PURE__ */ jsx6(MotionStyles, {}),
+        /* @__PURE__ */ jsxs5(
+          "svg",
+          {
+            className: "eth-motion-pipeline-flow__svg",
+            viewBox: frame.viewBox,
+            width: frame.width,
+            height: frame.height,
+            role: "img",
+            "aria-labelledby": `${titleId} ${descriptionId}`,
+            children: [
+              /* @__PURE__ */ jsx6("title", { id: titleId, children: "Pipeline flow" }),
+              /* @__PURE__ */ jsx6("desc", { id: descriptionId, children: nodes.length ? `${nodes.length} stages and ${edges.length} handoffs. ${nodes.map((node) => `${node.label}: ${labelForStatus2(node.status)}`).join(", ")}.` : "No pipeline stages." }),
+              /* @__PURE__ */ jsx6("defs", { children: edges.map((edge, index) => {
+                const toNode = nodes.find((node) => node.id === edge.to);
+                const color = edgeColor2(edge, toNode?.status);
+                return /* @__PURE__ */ jsx6(
+                  "marker",
+                  {
+                    id: markerIdFromUseId2(markerBaseId, index),
+                    markerWidth: "7",
+                    markerHeight: "7",
+                    refX: "6",
+                    refY: "3.5",
+                    orient: "auto",
+                    markerUnits: "strokeWidth",
+                    children: /* @__PURE__ */ jsx6("path", { d: "M0,0 L0,7 L7,3.5 z", fill: color })
+                  },
+                  `${edge.from}-${edge.to}-${index}`
+                );
+              }) }),
+              edges.map((edge, index) => {
+                const from = positions.get(edge.from);
+                const to = positions.get(edge.to);
+                if (!from || !to) return null;
+                const toNode = nodes.find((node) => node.id === edge.to);
+                const color = edgeColor2(edge, toNode?.status);
+                const active = Boolean(edge.active);
+                return /* @__PURE__ */ jsx6(
+                  "path",
+                  {
+                    className: "eth-motion-pipeline-flow__edge",
+                    d: edgePath2(from, to),
+                    fill: "none",
+                    markerEnd: `url(#${markerIdFromUseId2(markerBaseId, index)})`,
+                    stroke: color,
+                    strokeWidth: active ? 2.5 : 1.5,
+                    strokeDasharray: active ? "7 7" : void 0,
+                    style: active && !reduced ? { animation: "eth-motion-flow-dash 900ms linear infinite" } : void 0
+                  },
+                  `${edge.from}-${edge.to}-${index}`
+                );
+              }),
+              !nodes.length ? /* @__PURE__ */ jsx6("text", { className: "eth-motion-pipeline-flow__empty", x: "16", y: "52", children: "No pipeline stages" }) : null,
+              nodes.map((node) => {
+                const point = positions.get(node.id);
+                if (!point) return null;
+                const active = activeNodeIds.has(node.id);
+                const cardX = -NODE_WIDTH2 / 2;
+                const cardY = -NODE_HEIGHT2 / 2;
+                return /* @__PURE__ */ jsxs5(
+                  "g",
+                  {
+                    className: `eth-motion-pipeline-flow__node ${active ? "eth-motion-pipeline-flow__node--active" : ""}`,
+                    transform: `translate(${point.x}, ${point.y})`,
+                    children: [
+                      /* @__PURE__ */ jsx6(
+                        "rect",
+                        {
+                          className: "eth-motion-pipeline-flow__card",
+                          x: cardX,
+                          y: cardY,
+                          width: NODE_WIDTH2,
+                          height: NODE_HEIGHT2,
+                          rx: 0
+                        }
+                      ),
+                      /* @__PURE__ */ jsx6(
+                        "rect",
+                        {
+                          className: "eth-motion-pipeline-flow__stripe",
+                          x: cardX,
+                          y: cardY,
+                          width: 4,
+                          height: NODE_HEIGHT2,
+                          rx: 0,
+                          fill: statusColor(node.status)
+                        }
+                      ),
+                      active && !reduced ? /* @__PURE__ */ jsx6(
+                        "circle",
+                        {
+                          className: "eth-motion-pipeline-flow__pulse",
+                          cx: cardX + 22,
+                          cy: cardY + 20,
+                          r: 9,
+                          fill: "none",
+                          stroke: statusColor(node.status)
+                        }
+                      ) : null,
+                      /* @__PURE__ */ jsx6(
+                        "circle",
+                        {
+                          className: "eth-motion-pipeline-flow__dot",
+                          cx: cardX + 22,
+                          cy: cardY + 20,
+                          r: 5,
+                          fill: statusColor(node.status)
+                        }
+                      ),
+                      /* @__PURE__ */ jsx6("text", { className: "eth-motion-pipeline-flow__label", x: cardX + 36, y: cardY + 24, children: truncate2(node.label, 15) }),
+                      /* @__PURE__ */ jsx6("text", { className: "eth-motion-pipeline-flow__status", x: cardX + 14, y: cardY + 48, children: truncate2(labelForStatus2(node.status), 20) }),
+                      /* @__PURE__ */ jsx6("title", { children: `${node.label}: ${labelForStatus2(node.status)}` })
+                    ]
+                  },
+                  node.id
+                );
+              })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx6("ol", { className: "eth-motion-pipeline-flow__fallback", children: nodes.map((node) => /* @__PURE__ */ jsxs5("li", { children: [
+          node.label,
+          ": ",
+          labelForStatus2(node.status)
+        ] }, node.id)) })
+      ]
+    }
+  );
+}
+var NODE_WIDTH2 = 144;
+var NODE_HEIGHT2 = 64;
+var NODE_GAP_X2 = 188;
+function layoutNodes(nodes) {
+  const map = /* @__PURE__ */ new Map();
+  nodes.forEach((node, index) => {
+    map.set(node.id, {
+      x: node.x ?? NODE_WIDTH2 / 2 + 20 + NODE_GAP_X2 * index,
+      y: node.y ?? NODE_HEIGHT2 / 2 + 18
+    });
+  });
+  return map;
+}
+function viewBoxFor2(nodes, positions) {
+  if (!nodes.length) {
+    return { viewBox: "0 0 320 96", width: 320, height: 96 };
+  }
+  const points = nodes.map((node) => positions.get(node.id)).filter((point) => Boolean(point));
+  const minX = Math.floor(Math.min(...points.map((point) => point.x)) - NODE_WIDTH2 / 2 - 18);
+  const minY = Math.floor(Math.min(...points.map((point) => point.y)) - NODE_HEIGHT2 / 2 - 16);
+  const maxX = Math.ceil(Math.max(...points.map((point) => point.x)) + NODE_WIDTH2 / 2 + 26);
+  const maxY = Math.ceil(Math.max(...points.map((point) => point.y)) + NODE_HEIGHT2 / 2 + 16);
+  const width = maxX - minX;
+  const height = maxY - minY;
+  return { viewBox: `${minX} ${minY} ${width} ${height}`, width, height };
+}
+function edgePath2(from, to) {
+  const direction = to.x >= from.x ? 1 : -1;
+  const start = { x: from.x + NODE_WIDTH2 / 2 * direction, y: from.y };
+  const end = { x: to.x - NODE_WIDTH2 / 2 * direction, y: to.y };
+  const controlOffset = Math.max(26, Math.abs(end.x - start.x) * 0.5);
+  return `M ${start.x} ${start.y} C ${start.x + controlOffset * direction} ${start.y}, ${end.x - controlOffset * direction} ${end.y}, ${end.x} ${end.y}`;
+}
+function edgeColor2(edge, toStatus) {
+  if (edge.status) return statusColor(edge.status);
+  if (edge.active) return "var(--cds-interactive, #0f62fe)";
+  if (toStatus === "failed" || toStatus === "blocked") return statusColor(toStatus);
+  return "var(--cds-border-strong, #8d8d8d)";
+}
+function markerIdFromUseId2(id, index) {
+  return `eth-motion-pipeline-arrow-${id.replace(/[^a-zA-Z0-9_-]/g, "")}-${index}`;
+}
+function isActiveStatus(status) {
+  return status === "running" || status === "in-progress" || status === "active";
+}
+function labelForStatus2(status) {
+  switch (status) {
+    case "approval-required":
+      return "Approval required";
+    case "pending-approval":
+      return "Pending approval";
+    case "in-progress":
+      return "In progress";
+    case "not-started":
+      return "Not started";
+    default:
+      return status.split("-").map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(" ");
+  }
+}
+function truncate2(value, maxLength) {
+  if (value.length <= maxLength) return value;
+  return `${value.slice(0, Math.max(0, maxLength - 3))}...`;
+}
+
+// src/components/ProgressTransition.tsx
+import * as React5 from "react";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+function ProgressTransition({
+  from,
+  to,
+  durationMs = 320,
+  children,
+  className,
+  ...props
+}) {
+  const reduced = usePrefersReducedMotion();
+  const [current, setCurrent] = React5.useState(from ?? to);
+  React5.useEffect(() => {
+    if (reduced || durationMs <= 0 || typeof window === "undefined") {
+      setCurrent(to);
+      return;
+    }
+    const startValue = from ?? current;
+    const delta = to - startValue;
+    const startedAt = performance.now();
+    let frame = 0;
+    const tick = (now) => {
+      const progress = Math.min(1, (now - startedAt) / durationMs);
+      const eased = 1 - Math.pow(1 - progress, 3);
+      setCurrent(startValue + delta * eased);
+      if (progress < 1) frame = window.requestAnimationFrame(tick);
+    };
+    frame = window.requestAnimationFrame(tick);
+    return () => window.cancelAnimationFrame(frame);
+  }, [to, from, durationMs, reduced]);
+  return /* @__PURE__ */ jsxs6(
+    "section",
+    {
+      ...props,
+      className: `eth-motion-progress-transition ${reduced ? "eth-motion-reduced" : ""} ${className ?? ""}`,
+      "data-eth-component": "ProgressTransition",
+      children: [
+        /* @__PURE__ */ jsx7(MotionStyles, {}),
+        children ? children(current) : /* @__PURE__ */ jsxs6("progress", { value: current, max: 100, "aria-label": "Progress", children: [
+          Math.round(current),
+          "%"
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/SkeletonLoadingPattern.tsx
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+var articleLineWidths = ["96%", "88%", "100%", "92%", "76%", "84%", "68%", "80%"];
+var listLineWidths = ["76%", "88%", "64%", "82%", "70%", "90%"];
+var tableCellWidths = ["72%", "92%", "58%", "84%", "66%", "78%"];
+function SkeletonLoadingPattern({
+  columns = 4,
+  label = "Loading content",
+  lines = 3,
+  rows,
+  variant = "article",
+  className,
+  style,
+  role = "status",
+  "aria-busy": ariaBusy = true,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const reduced = usePrefersReducedMotion();
+  const pattern = normalizePattern(variant);
+  const lineCount = clampCount(lines, 1, 8);
+  const rowCount = clampCount(rows ?? (pattern === "table" ? 4 : 3), 1, 8);
+  const columnCount = clampCount(columns, 2, 6);
+  const classes = [
+    "eth-motion-skeleton-loading",
+    `eth-motion-skeleton-loading--${pattern}`,
+    reduced ? "eth-motion-reduced" : void 0,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs7(
+    "section",
+    {
+      ...props,
+      "aria-busy": ariaBusy,
+      "aria-label": ariaLabel ?? label,
+      className: classes,
+      "data-eth-component": "SkeletonLoadingPattern",
+      "data-pattern": pattern,
+      role,
+      style,
+      children: [
+        /* @__PURE__ */ jsx8(MotionStyles, {}),
+        renderPattern(pattern, lineCount, rowCount, columnCount)
+      ]
+    }
+  );
+}
+function renderPattern(pattern, lines, rows, columns) {
+  switch (pattern) {
+    case "card":
+      return /* @__PURE__ */ jsx8(CardPattern, { lines });
+    case "list":
+      return /* @__PURE__ */ jsx8(ListPattern, { rows });
+    case "table":
+      return /* @__PURE__ */ jsx8(TablePattern, { columns, rows });
+    case "article":
+    default:
+      return /* @__PURE__ */ jsx8(ArticlePattern, { lines });
+  }
+}
+function ArticlePattern({ lines }) {
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: "eth-motion-skeleton-loading__surface eth-motion-skeleton-loading__surface--article",
+      children: [
+        /* @__PURE__ */ jsxs7("div", { className: "eth-motion-skeleton-loading__article-header", children: [
+          /* @__PURE__ */ jsx8(
+            SkeletonBlock,
+            {
+              className: "eth-motion-skeleton-loading__block--eyebrow",
+              segment: "eyebrow",
+              style: { inlineSize: "7rem" }
+            }
+          ),
+          /* @__PURE__ */ jsx8(
+            SkeletonBlock,
+            {
+              className: "eth-motion-skeleton-loading__block--title",
+              segment: "title",
+              style: { inlineSize: "min(22rem, 74%)" }
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx8("div", { className: "eth-motion-skeleton-loading__article-body", children: Array.from({ length: lines }).map((_, index) => /* @__PURE__ */ jsx8(
+          SkeletonBlock,
+          {
+            className: "eth-motion-skeleton-loading__block--line",
+            segment: "text-line",
+            style: { inlineSize: articleLineWidths[index % articleLineWidths.length] }
+          },
+          index
+        )) })
+      ]
+    }
+  );
+}
+function CardPattern({ lines }) {
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: "eth-motion-skeleton-loading__surface eth-motion-skeleton-loading__surface--card",
+      children: [
+        /* @__PURE__ */ jsx8(SkeletonBlock, { className: "eth-motion-skeleton-loading__block--media", segment: "media" }),
+        /* @__PURE__ */ jsxs7("div", { className: "eth-motion-skeleton-loading__card-body", children: [
+          /* @__PURE__ */ jsx8(
+            SkeletonBlock,
+            {
+              className: "eth-motion-skeleton-loading__block--title",
+              segment: "title",
+              style: { inlineSize: "78%" }
+            }
+          ),
+          Array.from({ length: lines }).map((_, index) => /* @__PURE__ */ jsx8(
+            SkeletonBlock,
+            {
+              className: "eth-motion-skeleton-loading__block--line",
+              segment: "text-line",
+              style: { inlineSize: articleLineWidths[(index + 2) % articleLineWidths.length] }
+            },
+            index
+          ))
+        ] }),
+        /* @__PURE__ */ jsx8("div", { className: "eth-motion-skeleton-loading__card-metrics", children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsx8(
+          SkeletonBlock,
+          {
+            className: "eth-motion-skeleton-loading__block--metric",
+            segment: "metric"
+          },
+          index
+        )) })
+      ]
+    }
+  );
+}
+function ListPattern({ rows }) {
+  return /* @__PURE__ */ jsx8(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: "eth-motion-skeleton-loading__surface eth-motion-skeleton-loading__surface--list",
+      children: Array.from({ length: rows }).map((_, index) => /* @__PURE__ */ jsxs7(
+        "div",
+        {
+          className: "eth-motion-skeleton-loading__list-row",
+          "data-skeleton-row": "list",
+          children: [
+            /* @__PURE__ */ jsx8(SkeletonBlock, { className: "eth-motion-skeleton-loading__block--avatar", segment: "avatar" }),
+            /* @__PURE__ */ jsxs7("div", { className: "eth-motion-skeleton-loading__list-copy", children: [
+              /* @__PURE__ */ jsx8(
+                SkeletonBlock,
+                {
+                  className: "eth-motion-skeleton-loading__block--line",
+                  segment: "text-line",
+                  style: { inlineSize: listLineWidths[index % listLineWidths.length] }
+                }
+              ),
+              /* @__PURE__ */ jsx8(
+                SkeletonBlock,
+                {
+                  className: "eth-motion-skeleton-loading__block--caption",
+                  segment: "caption",
+                  style: { inlineSize: listLineWidths[(index + 2) % listLineWidths.length] }
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx8(
+              SkeletonBlock,
+              {
+                className: "eth-motion-skeleton-loading__block--tag",
+                segment: "tag",
+                style: { inlineSize: index % 2 === 0 ? "4.25rem" : "3.25rem" }
+              }
+            )
+          ]
+        },
+        index
+      ))
+    }
+  );
+}
+function TablePattern({ columns, rows }) {
+  const gridStyle = { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` };
+  return /* @__PURE__ */ jsxs7(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: "eth-motion-skeleton-loading__surface eth-motion-skeleton-loading__surface--table",
+      children: [
+        /* @__PURE__ */ jsx8("div", { className: "eth-motion-skeleton-loading__table-header", style: gridStyle, children: Array.from({ length: columns }).map((_, index) => /* @__PURE__ */ jsx8(
+          SkeletonBlock,
+          {
+            className: "eth-motion-skeleton-loading__block--column",
+            segment: "column-header",
+            style: { inlineSize: tableCellWidths[(index + 1) % tableCellWidths.length] }
+          },
+          index
+        )) }),
+        Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ jsx8(
+          "div",
+          {
+            className: "eth-motion-skeleton-loading__table-row",
+            "data-skeleton-row": "table",
+            style: gridStyle,
+            children: Array.from({ length: columns }).map((_2, columnIndex) => /* @__PURE__ */ jsx8(
+              SkeletonBlock,
+              {
+                cell: true,
+                className: "eth-motion-skeleton-loading__block--cell",
+                segment: "cell",
+                style: {
+                  inlineSize: tableCellWidths[(rowIndex + columnIndex) % tableCellWidths.length]
+                }
+              },
+              columnIndex
+            ))
+          },
+          rowIndex
+        ))
+      ]
+    }
+  );
+}
+function SkeletonBlock({
+  cell,
+  className,
+  segment,
+  style
+}) {
+  return /* @__PURE__ */ jsx8(
+    "span",
+    {
+      className: `eth-motion-skeleton-loading__block ${className ?? ""}`,
+      "data-skeleton-cell": cell ? "" : void 0,
+      "data-skeleton-segment": segment,
+      style
+    }
+  );
+}
+function clampCount(value, min, max) {
+  if (!Number.isFinite(value)) return min;
+  return Math.min(max, Math.max(min, Math.floor(value)));
+}
+function normalizePattern(variant) {
+  if (variant === "card" || variant === "list" || variant === "table") return variant;
+  return "article";
+}
+
+// src/components/StatusChangeAnimation.tsx
+import { Fragment, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+function StatusChangeAnimation({
+  status,
+  previousStatus,
+  label,
+  className,
+  children,
+  style,
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
+  ...props
+}) {
+  const reduced = usePrefersReducedMotion();
+  const changed = previousStatus !== void 0 && previousStatus !== status;
+  const statusLabel = formatStatusLabel(status);
+  const previousStatusLabel = previousStatus ? formatStatusLabel(previousStatus) : void 0;
+  const displayLabel = children ?? label ?? "Status";
+  const announcementLabel = textFromNode(label) ?? textFromNode(children) ?? "Status";
+  const announcement = changed && previousStatusLabel ? `${announcementLabel} changed from ${previousStatusLabel} to ${statusLabel}` : `${announcementLabel} is ${statusLabel}`;
+  const rootClassName = [
+    "eth-motion-status-change",
+    `eth-motion-status-change--${status}`,
+    changed ? "eth-motion-status-change--changed" : null,
+    reduced ? "eth-motion-reduced" : null,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs8(
+    "span",
+    {
+      ...props,
+      "aria-atomic": "true",
+      "aria-label": ariaLabel ?? (ariaLabelledBy ? void 0 : announcement),
+      "aria-labelledby": ariaLabelledBy,
+      className: rootClassName,
+      "data-current-status": status,
+      "data-eth-component": "StatusChangeAnimation",
+      "data-previous-status": previousStatus,
+      role: "status",
+      style: {
+        "--eth-motion-status-color": statusColor(status),
+        "--eth-motion-status-previous-color": previousStatus ? statusColor(previousStatus) : statusColor(status),
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx9(MotionStyles, {}),
+        /* @__PURE__ */ jsxs8("span", { className: "eth-motion-status-change__indicator", "aria-hidden": "true", children: [
+          changed ? /* @__PURE__ */ jsx9("span", { className: "eth-motion-status-change__previous-dot" }) : null,
+          changed ? /* @__PURE__ */ jsx9("span", { className: "eth-motion-status-change__connector" }) : null,
+          /* @__PURE__ */ jsx9("span", { className: "eth-motion-status-change__current-dot" })
+        ] }),
+        /* @__PURE__ */ jsxs8("span", { className: "eth-motion-status-change__content", children: [
+          /* @__PURE__ */ jsx9("span", { className: "eth-motion-status-change__label", children: displayLabel }),
+          /* @__PURE__ */ jsx9("span", { className: "eth-motion-status-change__state", children: changed && previousStatusLabel ? /* @__PURE__ */ jsxs8(Fragment, { children: [
+            /* @__PURE__ */ jsx9("span", { className: "eth-motion-status-change__previous", children: previousStatusLabel }),
+            /* @__PURE__ */ jsx9("span", { className: "eth-motion-status-change__separator", children: "to" }),
+            /* @__PURE__ */ jsx9("span", { className: "eth-motion-status-change__current", children: statusLabel })
+          ] }) : /* @__PURE__ */ jsx9("span", { className: "eth-motion-status-change__current", children: statusLabel }) })
+        ] })
+      ]
+    }
+  );
+}
+function formatStatusLabel(status) {
+  return status.split("-").map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join(" ");
+}
+function textFromNode(node) {
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  return void 0;
+}
+
+// src/components/StepCompletionAnimation.tsx
+import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
+var stateLabels = {
+  completed: "Completed",
+  current: "In progress",
+  pending: "Pending"
+};
+function StepCompletionAnimation({
+  completed = true,
+  description,
+  label = "Step completed",
+  state,
+  className,
+  children,
+  role = "status",
+  "aria-live": ariaLive = "polite",
+  ...props
+}) {
+  const reduced = usePrefersReducedMotion();
+  const resolvedState = state ?? (completed ? "completed" : "pending");
+  const stateLabel = stateLabels[resolvedState];
+  const stepClassName = [
+    "eth-motion-step-completion",
+    `eth-motion-step-completion--${resolvedState}`,
+    reduced ? "eth-motion-reduced" : void 0,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs9(
+    "span",
+    {
+      ...props,
+      "aria-live": ariaLive,
+      className: stepClassName,
+      "data-eth-component": "StepCompletionAnimation",
+      "data-state": resolvedState,
+      role,
+      children: [
+        /* @__PURE__ */ jsx10(MotionStyles, {}),
+        /* @__PURE__ */ jsx10("span", { className: "eth-motion-step-completion__marker", "aria-hidden": "true", children: resolvedState === "completed" ? /* @__PURE__ */ jsx10(
+          "svg",
+          {
+            className: "eth-motion-step-completion__check",
+            focusable: "false",
+            height: "16",
+            viewBox: "0 0 16 16",
+            width: "16",
+            children: /* @__PURE__ */ jsx10(
+              "path",
+              {
+                className: "eth-motion-step-completion__check-path",
+                d: "M3.5 8.4 6.5 11.4 12.8 4.6"
+              }
+            )
+          }
+        ) : /* @__PURE__ */ jsx10("span", { className: "eth-motion-step-completion__dot" }) }),
+        /* @__PURE__ */ jsx10("span", { className: "eth-motion-step-completion__content", children: children ?? /* @__PURE__ */ jsxs9(Fragment2, { children: [
+          /* @__PURE__ */ jsx10("span", { className: "eth-motion-step-completion__label", children: label }),
+          /* @__PURE__ */ jsx10("span", { className: "eth-motion-step-completion__state", children: stateLabel }),
+          description ? /* @__PURE__ */ jsx10("span", { className: "eth-motion-step-completion__description", children: description }) : null
+        ] }) })
+      ]
+    }
+  );
+}
+
+// src/components/StreamingText.tsx
+import * as React6 from "react";
+import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+function StreamingText({
+  text,
+  intervalMs = 18,
+  onDone,
+  className,
+  role = "status",
+  "aria-busy": ariaBusy,
+  "aria-live": ariaLive = "polite",
+  ...props
+}) {
+  const reduced = usePrefersReducedMotion();
+  const shouldAnimate = !reduced && intervalMs > 0 && text.length > 0;
+  const [visible, setVisible] = React6.useState(shouldAnimate ? "" : text);
+  const [done, setDone] = React6.useState(!shouldAnimate);
+  const onDoneRef = React6.useRef(onDone);
+  React6.useEffect(() => {
+    onDoneRef.current = onDone;
+  }, [onDone]);
+  React6.useEffect(() => {
+    if (!shouldAnimate) {
+      setVisible(text);
+      setDone(true);
+      onDoneRef.current?.();
+      return;
+    }
+    setVisible("");
+    setDone(false);
+    let index = 0;
+    const timer = window.setInterval(() => {
+      index += 1;
+      setVisible(text.slice(0, index));
+      if (index >= text.length) {
+        window.clearInterval(timer);
+        setDone(true);
+        onDoneRef.current?.();
+      }
+    }, intervalMs);
+    return () => window.clearInterval(timer);
+  }, [text, intervalMs, shouldAnimate]);
+  const streaming = shouldAnimate && !done;
+  const classes = [
+    "eth-motion-streaming-text",
+    streaming ? "eth-motion-streaming-text--streaming" : "eth-motion-streaming-text--complete",
+    reduced ? "eth-motion-reduced" : void 0,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs10(Fragment3, { children: [
+    /* @__PURE__ */ jsx11(MotionStyles, {}),
+    /* @__PURE__ */ jsxs10(
+      "span",
+      {
+        ...props,
+        "aria-busy": ariaBusy ?? streaming,
+        "aria-live": ariaLive,
+        className: classes,
+        "data-eth-component": "StreamingText",
+        "data-streaming": streaming ? "true" : "false",
+        role,
+        children: [
+          /* @__PURE__ */ jsx11("span", { className: "eth-motion-streaming-text__content", children: visible }),
+          /* @__PURE__ */ jsx11("span", { "aria-hidden": "true", className: "eth-motion-streaming-text__cursor" })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/components/SyncProgressAnimation.tsx
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+var statusContent = {
+  syncing: {
+    accent: "#0f62fe",
+    description: "Replicating source updates and applying remote changes.",
+    label: "Syncing",
+    soft: "#edf5ff"
+  },
+  synced: {
+    accent: "#24a148",
+    description: "Replica is current with the source.",
+    label: "Synced",
+    soft: "#defbe6"
+  },
+  paused: {
+    accent: "#8d8d8d",
+    description: "Sync is paused. No changes are being applied.",
+    label: "Paused",
+    soft: "#f4f4f4"
+  },
+  stale: {
+    accent: "#f1c21b",
+    description: "Replica is outside the expected freshness window.",
+    label: "Stale",
+    soft: "#fcf4d6"
+  },
+  failed: {
+    accent: "#da1e28",
+    description: "Sync stopped before completion. Review the connection and retry.",
+    label: "Failed",
+    soft: "#fff1f1"
+  },
+  error: {
+    accent: "#da1e28",
+    description: "Sync stopped before completion. Review the connection and retry.",
+    label: "Needs attention",
+    soft: "#fff1f1"
+  }
+};
+function SyncProgressAnimation({
+  children,
+  className,
+  completed,
+  description,
+  label = "Syncing",
+  progress,
+  rate,
+  remaining,
+  role = "status",
+  source,
+  stage,
+  status = "syncing",
+  style,
+  target,
+  total,
+  variant,
+  "aria-busy": ariaBusy,
+  "aria-label": ariaLabel,
+  "aria-live": ariaLive,
+  ...props
+}) {
+  const reduced = usePrefersReducedMotion();
+  const content = statusContent[status];
+  const progressValue = normalizeProgress(progress ?? progressFromCounts(completed, total, status));
+  const hasProgress = progressValue !== void 0;
+  const progressText = hasProgress ? `${progressValue}% complete` : content.label;
+  const countText = formatCountProgress(completed, total);
+  const descriptionNode = description ?? children ?? content.description;
+  const hasDetailedContent = [
+    description,
+    children,
+    source,
+    target,
+    stage,
+    rate,
+    remaining,
+    completed,
+    total,
+    progress
+  ].some(hasValue);
+  const resolvedVariant = variant ?? (hasDetailedContent ? "detailed" : "compact");
+  const labelText = textFromNode2(label) ?? "Sync";
+  const announcement = [content.label, hasProgress ? progressText : void 0, countText].filter(Boolean).join(", ");
+  const classes = [
+    "eth-motion-sync-progress",
+    `eth-motion-sync-progress--${resolvedVariant}`,
+    `eth-motion-sync-progress--${status}`,
+    reduced ? "eth-motion-reduced" : void 0,
+    className
+  ].filter(Boolean).join(" ");
+  const rootStyle = {
+    "--eth-motion-sync-accent": content.accent,
+    "--eth-motion-sync-accent-soft": content.soft,
+    ...style
+  };
+  const busy = ariaBusy ?? (status === "syncing" ? true : void 0);
+  if (resolvedVariant === "compact") {
+    return /* @__PURE__ */ jsxs11(
+      "span",
+      {
+        ...props,
+        "aria-atomic": "true",
+        "aria-busy": busy,
+        "aria-label": ariaLabel ?? `${labelText} ${announcement}`,
+        "aria-live": ariaLive ?? (status === "syncing" ? "polite" : void 0),
+        className: classes,
+        "data-eth-component": "SyncProgressAnimation",
+        "data-sync-progress": progressValue,
+        "data-sync-status": status,
+        role,
+        style: rootStyle,
+        children: [
+          /* @__PURE__ */ jsx12(MotionStyles, {}),
+          /* @__PURE__ */ jsx12(SyncIndicator, { status }),
+          /* @__PURE__ */ jsxs11("span", { className: "eth-motion-sync-progress__compact-copy", children: [
+            /* @__PURE__ */ jsx12("span", { className: "eth-motion-sync-progress__label", children: label }),
+            /* @__PURE__ */ jsx12("span", { className: "eth-motion-sync-progress__compact-state", children: hasProgress ? `${progressValue}%` : content.label })
+          ] })
+        ]
+      }
+    );
+  }
+  const metaItems = [
+    { label: "Source", value: source },
+    { label: "Target", value: target },
+    { label: "Rate", value: rate },
+    { label: "Remaining", value: remaining }
+  ].filter((item) => hasValue(item.value));
+  return /* @__PURE__ */ jsxs11(
+    "section",
+    {
+      ...props,
+      "aria-atomic": "true",
+      "aria-busy": busy,
+      "aria-label": ariaLabel ?? `${labelText} ${announcement}`,
+      "aria-live": ariaLive ?? (status === "syncing" ? "polite" : void 0),
+      className: classes,
+      "data-eth-component": "SyncProgressAnimation",
+      "data-sync-progress": progressValue,
+      "data-sync-status": status,
+      role,
+      style: rootStyle,
+      children: [
+        /* @__PURE__ */ jsx12(MotionStyles, {}),
+        /* @__PURE__ */ jsx12(SyncIndicator, { status }),
+        /* @__PURE__ */ jsxs11("div", { className: "eth-motion-sync-progress__body", children: [
+          /* @__PURE__ */ jsxs11("div", { className: "eth-motion-sync-progress__header", children: [
+            /* @__PURE__ */ jsxs11("div", { className: "eth-motion-sync-progress__title-group", children: [
+              /* @__PURE__ */ jsx12("span", { className: "eth-motion-sync-progress__eyebrow", children: stage ?? "Replication" }),
+              /* @__PURE__ */ jsx12("span", { className: "eth-motion-sync-progress__label", children: label })
+            ] }),
+            /* @__PURE__ */ jsxs11("span", { className: "eth-motion-sync-progress__chip", children: [
+              /* @__PURE__ */ jsx12("span", { className: "eth-motion-sync-progress__chip-dot", "aria-hidden": "true" }),
+              content.label
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx12("p", { className: "eth-motion-sync-progress__description", children: descriptionNode }),
+          /* @__PURE__ */ jsxs11("div", { className: "eth-motion-sync-progress__meter", children: [
+            /* @__PURE__ */ jsx12(
+              "div",
+              {
+                "aria-label": "Sync transfer progress",
+                "aria-valuemax": 100,
+                "aria-valuemin": 0,
+                "aria-valuenow": progressValue,
+                "aria-valuetext": hasProgress ? progressText : content.label,
+                className: "eth-motion-sync-progress__track",
+                role: "progressbar",
+                children: /* @__PURE__ */ jsx12(
+                  "span",
+                  {
+                    className: `eth-motion-sync-progress__bar ${hasProgress ? "" : "eth-motion-sync-progress__bar--indeterminate"}`,
+                    style: hasProgress ? { inlineSize: `${progressValue}%` } : void 0
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx12("span", { className: "eth-motion-sync-progress__progress-copy", children: [hasProgress ? `${progressValue}%` : content.label, countText].filter(Boolean).join(" | ") })
+          ] })
+        ] }),
+        metaItems.length ? /* @__PURE__ */ jsx12("dl", { className: "eth-motion-sync-progress__meta", "aria-label": "Sync metadata", children: metaItems.map((item) => /* @__PURE__ */ jsxs11("div", { className: "eth-motion-sync-progress__meta-item", children: [
+          /* @__PURE__ */ jsx12("dt", { children: item.label }),
+          /* @__PURE__ */ jsx12("dd", { children: item.value })
+        ] }, item.label)) }) : null
+      ]
+    }
+  );
+}
+function SyncIndicator({ status }) {
+  return /* @__PURE__ */ jsx12("span", { className: "eth-motion-sync-progress__indicator", "aria-hidden": "true", children: status === "syncing" ? /* @__PURE__ */ jsx12("span", { className: "eth-motion-sync-progress__spinner" }) : /* @__PURE__ */ jsx12("span", { className: "eth-motion-sync-progress__glyph" }) });
+}
+function progressFromCounts(completed, total, status) {
+  if (status === "synced") return 100;
+  if (!isFiniteNumber(completed) || !isFiniteNumber(total) || total <= 0) return void 0;
+  return completed / total * 100;
+}
+function normalizeProgress(value) {
+  if (!isFiniteNumber(value)) return void 0;
+  return Math.min(100, Math.max(0, Math.round(value)));
+}
+function formatCountProgress(completed, total) {
+  if (!isFiniteNumber(completed) || !isFiniteNumber(total) || total <= 0) return void 0;
+  const safeCompleted = Math.max(0, Math.floor(completed));
+  const safeTotal = Math.max(0, Math.floor(total));
+  return `${safeCompleted} of ${safeTotal} items`;
+}
+function isFiniteNumber(value) {
+  return typeof value === "number" && Number.isFinite(value);
+}
+function hasValue(value) {
+  return value !== void 0 && value !== null && value !== false && value !== "";
+}
+function textFromNode2(node) {
+  if (typeof node === "string" || typeof node === "number") return String(node);
+  return void 0;
+}
+
+// src/index.tsx
+var MotionComponentNames = [
+  "ProgressTransition",
+  "PipelineFlowAnimation",
+  "DAGStatusTransition",
+  "AgentThinkingAnimation",
+  "SyncProgressAnimation",
+  "SkeletonLoadingPattern",
+  "AttentionPulse",
+  "DocumentLockPulse",
+  "StreamingText",
+  "StepCompletionAnimation",
+  "StatusChangeAnimation"
+];
+export {
+  AgentThinkingAnimation,
+  AttentionPulse,
+  DAGStatusTransition,
+  DocumentLockPulse,
+  MotionComponentNames,
+  PipelineFlowAnimation,
+  ProgressTransition,
+  SkeletonLoadingPattern,
+  StatusChangeAnimation,
+  StepCompletionAnimation,
+  StreamingText,
+  SyncProgressAnimation
+};
+//# sourceMappingURL=index.js.map