@aparte/plugin-cards 0.0.0-stage → 0.29.1

package/dist/plan.js

@@ -0,0 +1,1191 @@
+import { b as defineCard, q as str, e as el, t as toDate, r as word, h as formatNumber, m as glyph, i as formatPercent, p as num, n as intlTag } from "./format-BFq79ydr.js";
+const svg = (body, className) => `<svg${className ? ` class="${className}"` : ""} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg">${body}</svg>`;
+const PENDING = svg('<circle cx="12" cy="12" r="8"/>');
+const RUNNING = svg('<circle cx="12" cy="12" r="8" opacity="0.4"/><path d="M12 4a8 8 0 0 1 8 8"/>', "aparte-plan__spinner");
+const DONE = svg('<circle cx="12" cy="12" r="9" fill="currentColor" stroke="none"/><path class="aparte-plan__mark" d="M8.2 12.4l2.6 2.6 5-5.4"/>');
+const FAILED = svg('<circle cx="12" cy="12" r="9" fill="currentColor" stroke="none"/><path class="aparte-plan__mark" d="M9.3 9.3l5.4 5.4M14.7 9.3l-5.4 5.4"/>');
+const SKIPPED = svg('<circle cx="12" cy="12" r="8" stroke-dasharray="2.4 2.6"/><path d="M8.6 12h6.8"/>');
+const BLOCKED = svg('<rect x="6" y="10.6" width="12" height="9" rx="2.2"/><path d="M8.9 10.6V8.2a3.1 3.1 0 0 1 6.2 0v2.4"/>');
+const STATUS_GLYPHS = {
+  pending: PENDING,
+  "in-progress": RUNNING,
+  done: DONE,
+  failed: FAILED,
+  skipped: SKIPPED,
+  blocked: BLOCKED
+};
+const NODE_CURRENT = svg('<circle cx="12" cy="12" r="8"/><circle cx="12" cy="12" r="4" fill="currentColor" stroke="none"/>');
+const CLOCK = svg('<circle cx="12" cy="12" r="8.2"/><path d="M12 7.6V12l2.9 1.9"/>');
+const PLAN = svg('<rect x="5" y="4.5" width="14" height="16.5" rx="2.2"/><path d="M9.2 4.5V3.8a1 1 0 0 1 1-1h3.6a1 1 0 0 1 1 1v.7"/><path d="M8.4 10.6l1.4 1.4 2.4-2.6"/><path d="M14.2 10.6h1.8"/><path d="M8.4 16.1l1.4 1.4 2.4-2.6"/><path d="M14.2 16.1h1.8"/>');
+const planStyles = `/* =========================================
+   The plan card — @aparte/plugin-cards/plan
+   =========================================
+   Three variants of one card, chosen by \`data-variant\` on its root:
+     checklist  "3 of 7 done" over a thin bar, then a row per step: its status glyph,
+                its title, a detail line, its duration at the end once it finished.
+     timeline   a rail with a node per step, coloured by its status, its start time and
+                duration under the title; the step under way pulses gently.
+     compact    one line — "Step 3 of 7: Running the tests", a ring, the percentage.
+   An agent re-sends this card while it works, and the kit draws the new one into the
+   same root, so nothing here depends on the status for its SIZE: the glyph is one size
+   for all, the title reserves its bold width (and its other wording's), a timed plan
+   keeps every time slot, as wide as the language's widest duration.
+   A status is never said by colour alone: each has its own glyph shape, and its word for
+   a screen reader. Every colour is a theme token or derived from one.
+   */
+
+.aparte-plan-card {
+  --aparte-plan-pad: var(--aparte-space-6);
+  --aparte-plan-glyph-size: 1.125rem;
+  --aparte-plan-node-size: 1.25rem;
+  --aparte-plan-pending: color-mix(in oklab, var(--aparte-text-muted) 75%, transparent);
+  --aparte-plan-active: var(--aparte-primary);
+  --aparte-plan-done: var(--aparte-success);
+  --aparte-plan-failed: var(--aparte-error);
+  --aparte-plan-failed-ink: var(--aparte-error-ink);
+  --aparte-plan-skipped: var(--aparte-text-muted);
+  --aparte-plan-blocked: var(--aparte-warning);
+  --aparte-plan-blocked-ink: var(--aparte-warning-ink);
+  --aparte-plan-track: color-mix(in oklab, var(--aparte-text) 9%, transparent);
+  --aparte-plan-rail: color-mix(in oklab, var(--aparte-text) 13%, transparent);
+  --aparte-plan-active-tint: color-mix(in oklab, var(--aparte-primary) 8%, transparent);
+  --aparte-plan-hover-tint: color-mix(in oklab, var(--aparte-text) 3.5%, transparent);
+  --aparte-plan-done-text: var(--aparte-text-muted);
+}
+
+.aparte-plan-card[data-variant="checklist"],
+.aparte-plan-card[data-variant="timeline"] { --aparte-rich-card-max-inline-size: 26rem; }
+.aparte-plan-card[data-variant="compact"] { --aparte-rich-card-max-inline-size: 24rem; }
+
+/* ── Header: title, "3 of 7 done", the bar ───────────────────────────── */
+
+.aparte-plan__head {
+  display: flex;
+  flex-direction: column;
+  gap: var(--aparte-space-3);
+  padding: var(--aparte-plan-pad) var(--aparte-plan-pad) 0;
+  min-inline-size: 0;
+}
+
+.aparte-plan__heading {
+  display: flex;
+  flex-direction: column;
+  gap: var(--aparte-space-1);
+  min-inline-size: 0;
+}
+
+.aparte-plan__title {
+  color: var(--aparte-text);
+  font-size: var(--aparte-font-size-base);
+  font-weight: var(--aparte-font-weight-semibold);
+  line-height: 1.3;
+  overflow-wrap: anywhere;
+}
+
+.aparte-plan__goal {
+  color: var(--aparte-text-muted);
+  font-size: var(--aparte-font-size-sm);
+  overflow-wrap: anywhere;
+}
+
+/* One line, always: a count that grows a digit or a note that appears does not wrap the
+   header and push the steps down while the agent works. */
+.aparte-plan__meter {
+  display: flex;
+  align-items: center;
+  gap: var(--aparte-space-3);
+  min-inline-size: 0;
+  color: var(--aparte-text-muted);
+  font-size: var(--aparte-font-size-sm);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.aparte-plan__count {
+  flex: none;
+  color: var(--aparte-text);
+  font-weight: var(--aparte-font-weight-medium);
+}
+
+.aparte-plan__note {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.aparte-plan__note::before {
+  content: "·";
+  margin-inline-end: var(--aparte-space-3);
+  color: var(--aparte-text-muted);
+}
+
+.aparte-plan__note[data-kind="failed"] { color: var(--aparte-plan-failed-ink); }
+
+.aparte-plan__elapsed {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: var(--aparte-space-1);
+  margin-inline-start: auto;
+  --aparte-rich-card-glyph-size: 0.95rem;
+}
+
+.aparte-plan__clock { opacity: 0.8; }
+
+/* The bar: what is done in the accent (green once all of it is), what was skipped after
+   it in hatching — counted, but plainly not the same as done. */
+.aparte-plan__bar {
+  display: flex;
+  block-size: 0.375rem;
+  overflow: hidden;
+  border-radius: var(--aparte-radius-full);
+  background: var(--aparte-plan-track);
+}
+
+.aparte-plan__bar-done,
+.aparte-plan__bar-skipped {
+  flex: none;
+  block-size: 100%;
+  transition: inline-size var(--aparte-duration-slow, 400ms) var(--aparte-ease, ease);
+}
+
+.aparte-plan__bar-done {
+  inline-size: var(--aparte-plan-done-share, 0%);
+  background: var(--aparte-plan-active);
+}
+
+.aparte-plan__bar[data-complete] .aparte-plan__bar-done { background: var(--aparte-plan-done); }
+
+.aparte-plan__bar-skipped {
+  inline-size: var(--aparte-plan-skipped-share, 0%);
+  background: repeating-linear-gradient(
+    -45deg,
+    color-mix(in oklab, var(--aparte-plan-skipped) 55%, transparent) 0 2px,
+    color-mix(in oklab, var(--aparte-plan-skipped) 22%, transparent) 2px 4px
+  );
+}
+
+/* ── A step's parts, whatever the variant ────────────────────────────── */
+
+/* The text and an invisible bold copy share one cell: the cell is always as wide and as
+   tall as the bold form, so the step that starts running reflows nothing. A todo's other
+   wording (\`activeForm\`) is a second invisible copy in the same cell, so the switch to
+   "Updating the reference pages" from "Update" reflows nothing either. */
+.aparte-plan__step-title {
+  display: grid;
+  min-inline-size: 0;
+  overflow-wrap: anywhere;
+}
+
+.aparte-plan__step-title > .aparte-plan__step-title-text,
+.aparte-plan__step-title[data-alt]::before,
+.aparte-plan__step-title::after { grid-area: 1 / 1; }
+
+.aparte-plan__step-title[data-alt]::before {
+  content: attr(data-alt);
+  content: attr(data-alt) / "";
+}
+
+.aparte-plan__step-title[data-alt]::before,
+.aparte-plan__step-title::after {
+  font-weight: var(--aparte-font-weight-semibold);
+  visibility: hidden;
+  pointer-events: none;
+  user-select: none;
+}
+
+.aparte-plan__step-title::after {
+  content: attr(data-text);
+  content: attr(data-text) / "";
+}
+
+.aparte-plan__detail {
+  display: -webkit-box;
+  margin-block-start: 0.125rem;
+  overflow: hidden;
+  color: var(--aparte-text-muted);
+  font-size: var(--aparte-font-size-sm);
+  line-height: 1.4;
+  overflow-wrap: anywhere;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+}
+
+.aparte-plan__duration {
+  color: var(--aparte-text-muted);
+  font-size: var(--aparte-font-size-xs);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+/* The status colours: the glyph takes them; the text only where it must speak. */
+[data-status] > .aparte-plan__row > .aparte-plan__glyph,
+[data-status] > .aparte-plan__node,
+.aparte-plan__compact > .aparte-plan__glyph { color: var(--aparte-plan-pending); }
+
+[data-status="in-progress"] > .aparte-plan__row > .aparte-plan__glyph,
+[data-status="in-progress"] > .aparte-plan__node,
+.aparte-plan__compact[data-status="in-progress"] > .aparte-plan__glyph { color: var(--aparte-plan-active); }
+
+[data-status="done"] > .aparte-plan__row > .aparte-plan__glyph,
+[data-status="done"] > .aparte-plan__node,
+.aparte-plan__compact[data-status="done"] > .aparte-plan__glyph { color: var(--aparte-plan-done); }
+
+[data-status="failed"] > .aparte-plan__row > .aparte-plan__glyph,
+[data-status="failed"] > .aparte-plan__node,
+.aparte-plan__compact[data-status="failed"] > .aparte-plan__glyph { color: var(--aparte-plan-failed); }
+
+[data-status="skipped"] > .aparte-plan__row > .aparte-plan__glyph,
+[data-status="skipped"] > .aparte-plan__node { color: var(--aparte-plan-skipped); }
+
+[data-status="blocked"] > .aparte-plan__row > .aparte-plan__glyph,
+[data-status="blocked"] > .aparte-plan__node,
+.aparte-plan__compact[data-status="blocked"] > .aparte-plan__glyph { color: var(--aparte-plan-blocked-ink); }
+
+/* The check and the cross are cut out of their disc in the card's own surface. */
+.aparte-plan__mark {
+  stroke: var(--aparte-surface-1);
+  stroke-width: 2.2;
+}
+
+/* The running ring turns, on core's own keyframe — its sheet comes with the chat; a copy
+   here was a second name for the same turn. Under reduced motion the kit stops it and the
+   arc stays. */
+.aparte-plan__spinner {
+  transform-origin: 50% 50%;
+  animation: aparte-spin 0.9s linear infinite;
+}
+
+/* Done stays readable — muted, not struck through. Failed speaks in the error ink. */
+[data-status="done"] > .aparte-plan__row .aparte-plan__step-title,
+[data-status="done"] > .aparte-plan__event-body > .aparte-plan__step-title,
+[data-status="skipped"] > .aparte-plan__row .aparte-plan__step-title,
+[data-status="skipped"] > .aparte-plan__event-body > .aparte-plan__step-title { color: var(--aparte-plan-done-text); }
+
+[data-status="failed"] > .aparte-plan__row .aparte-plan__step-title,
+[data-status="failed"] > .aparte-plan__event-body > .aparte-plan__step-title { color: var(--aparte-plan-failed-ink); }
+
+[data-status="blocked"] > .aparte-plan__row .aparte-plan__step-title,
+[data-status="blocked"] > .aparte-plan__event-body > .aparte-plan__step-title { color: var(--aparte-text-muted); }
+
+[data-status="in-progress"] > .aparte-plan__row .aparte-plan__step-title,
+[data-status="in-progress"] > .aparte-plan__event-body > .aparte-plan__step-title {
+  color: var(--aparte-text);
+  font-weight: var(--aparte-font-weight-semibold);
+}
+
+/* ── checklist ───────────────────────────────────────────────────────── */
+
+.aparte-plan__steps,
+.aparte-plan__substeps,
+.aparte-plan__timeline {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+.aparte-plan__steps {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  padding: var(--aparte-space-4) calc(var(--aparte-plan-pad) - var(--aparte-space-3)) calc(var(--aparte-plan-pad) - var(--aparte-space-2));
+}
+
+.aparte-plan__row {
+  display: grid;
+  grid-template-columns: var(--aparte-plan-glyph-size) minmax(0, 1fr) auto;
+  column-gap: var(--aparte-space-3);
+  align-items: baseline;
+  padding: var(--aparte-space-2) var(--aparte-space-3);
+  border-radius: var(--aparte-radius-md);
+  color: var(--aparte-text);
+  font-size: var(--aparte-font-size-md);
+  line-height: 1.4;
+  transition: background-color var(--aparte-duration-fast, 120ms) ease;
+}
+
+.aparte-plan__row:hover { background: var(--aparte-plan-hover-tint); }
+
+/* The step under way: a soft tint of the accent, held on hover. */
+.aparte-plan__step[data-status="in-progress"] > .aparte-plan__row,
+.aparte-plan__step[data-status="in-progress"] > .aparte-plan__row:hover { background: var(--aparte-plan-active-tint); }
+
+.aparte-plan__step > .aparte-plan__row > .aparte-plan__glyph {
+  --aparte-rich-card-glyph-size: var(--aparte-plan-glyph-size);
+  align-self: start;
+  /* Centred on the first line of the title, however the font sizes it. */
+  margin-block-start: calc((1lh - var(--aparte-plan-glyph-size)) / 2);
+}
+
+.aparte-plan__text { min-inline-size: 0; }
+
+/* A timed plan keeps the duration's column on every row, filled or not, as wide as the
+   language's widest duration: an invisible copy of it (\`data-reserve\`, written by the card)
+   lies under the text with no height, so \`1 Std., 5 Min.\` fills the slot without widening it
+   — a wider slot would narrow the title and could wrap it onto a second line. */
+.aparte-plan__steps[data-timed] .aparte-plan__duration {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.aparte-plan__steps[data-timed] .aparte-plan__duration::after {
+  content: attr(data-reserve);
+  content: attr(data-reserve) / "";
+  block-size: 0;
+  overflow: hidden;
+  visibility: hidden;
+}
+
+.aparte-plan__substeps {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+  margin-inline-start: calc(var(--aparte-plan-glyph-size) + var(--aparte-space-3));
+}
+
+.aparte-plan__step--sub {
+  --aparte-plan-glyph-size: 0.9375rem;
+}
+
+.aparte-plan__step--sub > .aparte-plan__row {
+  padding-block: var(--aparte-space-1);
+  font-size: var(--aparte-font-size-sm);
+}
+
+/* A sub-step under way is tinted by its parent's row already: it keeps only its weight. */
+.aparte-plan__step--sub[data-status="in-progress"] > .aparte-plan__row,
+.aparte-plan__step--sub[data-status="in-progress"] > .aparte-plan__row:hover { background: transparent; }
+
+/* ── timeline ────────────────────────────────────────────────────────── */
+
+.aparte-plan__timeline {
+  padding: var(--aparte-space-5) var(--aparte-plan-pad) var(--aparte-plan-pad);
+}
+
+.aparte-plan__event {
+  position: relative;
+  display: grid;
+  grid-template-columns: var(--aparte-plan-node-size) minmax(0, 1fr);
+  column-gap: var(--aparte-space-4);
+  padding-block-end: var(--aparte-space-5);
+  color: var(--aparte-text);
+  font-size: var(--aparte-font-size-md);
+  line-height: 1.4;
+}
+
+.aparte-plan__event:last-child { padding-block-end: 0; }
+
+/* The rail: from under this node to the top of the next one. Past a finished step it
+   takes the done colour, so the run reads as a line filling downwards. */
+.aparte-plan__event:not(:last-child)::before {
+  content: "";
+  position: absolute;
+  inset-inline-start: calc(var(--aparte-plan-node-size) / 2 - 1px);
+  inset-block-start: calc((1lh - var(--aparte-plan-node-size)) / 2 + var(--aparte-plan-node-size) + 3px);
+  inset-block-end: calc((1lh - var(--aparte-plan-node-size)) / -2 + 3px);
+  inline-size: 2px;
+  border-radius: var(--aparte-radius-full);
+  background: var(--aparte-plan-rail);
+}
+
+.aparte-plan__event[data-status="done"]:not(:last-child)::before,
+.aparte-plan__event[data-status="skipped"]:not(:last-child)::before {
+  background: color-mix(in oklab, var(--aparte-plan-done) 55%, transparent);
+}
+
+.aparte-plan__node {
+  position: relative;
+  display: grid;
+  place-items: center;
+  inline-size: var(--aparte-plan-node-size);
+  block-size: var(--aparte-plan-node-size);
+  margin-block-start: calc((1lh - var(--aparte-plan-node-size)) / 2);
+  border-radius: var(--aparte-radius-full);
+  --aparte-rich-card-glyph-size: var(--aparte-plan-node-size);
+}
+
+/* The step under way breathes: a halo of the accent that widens and fades. */
+.aparte-plan__event[data-status="in-progress"] > .aparte-plan__node::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  animation: aparte-plan-pulse 2.2s cubic-bezier(0.2, 0.6, 0.35, 1) infinite;
+}
+
+@keyframes aparte-plan-pulse {
+  0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--aparte-plan-active) 45%, transparent); }
+  70%, 100% { box-shadow: 0 0 0 0.45rem color-mix(in oklab, var(--aparte-plan-active) 0%, transparent); }
+}
+
+.aparte-plan__event-body {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+}
+
+/* Start and duration on one line under the title. In a timed plan the line is there for
+   every step, empty until it starts: every step keeps one rhythm. */
+.aparte-plan__meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0 var(--aparte-space-2);
+  min-block-size: 1lh;
+  color: var(--aparte-text-muted);
+  font-size: var(--aparte-font-size-xs);
+  font-variant-numeric: tabular-nums;
+}
+
+.aparte-plan__meta > .aparte-plan__start:not(:empty) + .aparte-plan__duration:not(:empty)::before {
+  content: "·";
+  margin-inline-end: var(--aparte-space-2);
+}
+
+.aparte-plan__event-body > .aparte-plan__substeps {
+  margin-block-start: var(--aparte-space-2);
+  margin-inline: calc(var(--aparte-space-3) * -1) 0;
+}
+
+/* ── compact ─────────────────────────────────────────────────────────── */
+
+.aparte-plan__compact {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto auto;
+  align-items: center;
+  column-gap: var(--aparte-space-3);
+  padding: var(--aparte-space-3) var(--aparte-space-5);
+  font-size: var(--aparte-font-size-md);
+  --aparte-rich-card-glyph-size: 1.125rem;
+}
+
+.aparte-plan__compact-text {
+  min-inline-size: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.aparte-plan__compact-step {
+  margin-inline-end: 0.35em;
+  color: var(--aparte-text-muted);
+  font-variant-numeric: tabular-nums;
+}
+
+.aparte-plan__compact-title {
+  color: var(--aparte-text);
+  font-weight: var(--aparte-font-weight-semibold);
+}
+
+/* Finished: the plan's name, then "All steps done". */
+.aparte-plan__compact-title + .aparte-plan__compact-step { margin-inline: 0; }
+.aparte-plan__compact-title + .aparte-plan__compact-step::before {
+  content: "·";
+  margin-inline: 0.4em;
+}
+
+.aparte-plan__ring {
+  display: inline-flex;
+  inline-size: 1.375rem;
+  block-size: 1.375rem;
+}
+
+/* The arc starts at twelve o'clock and runs with the reading direction. */
+.aparte-plan__ring-svg {
+  inline-size: 100%;
+  block-size: 100%;
+  transform: rotate(-90deg);
+}
+
+.aparte-plan__ring-svg:dir(rtl) { transform: scaleX(-1) rotate(-90deg); }
+
+.aparte-plan__ring-svg > circle {
+  fill: none;
+  stroke-width: 3;
+}
+
+.aparte-plan__ring-track { stroke: var(--aparte-plan-track); }
+.aparte-plan__ring-done { stroke: var(--aparte-plan-active); }
+.aparte-plan__ring[data-complete] .aparte-plan__ring-done { stroke: var(--aparte-plan-done); }
+.aparte-plan__ring-skipped { stroke: color-mix(in oklab, var(--aparte-plan-skipped) 45%, transparent); }
+
+.aparte-plan__percent {
+  min-inline-size: 4ch;
+  color: var(--aparte-text);
+  font-size: var(--aparte-font-size-sm);
+  font-weight: var(--aparte-font-weight-semibold);
+  font-variant-numeric: tabular-nums;
+  text-align: end;
+}
+
+/* ── Loading ─────────────────────────────────────────────────────────── */
+
+.aparte-plan-card[data-state="loading"] .aparte-skeleton.aparte-plan__sk-title { inline-size: 10rem; }
+.aparte-plan-card[data-state="loading"] .aparte-skeleton.aparte-plan__sk-count { inline-size: 6rem; }
+
+.aparte-plan-card[data-state="loading"] .aparte-skeleton.aparte-plan__sk-glyph {
+  inline-size: var(--aparte-plan-glyph-size);
+  block-size: var(--aparte-plan-glyph-size);
+  align-self: center;
+  margin: 0;
+}
+
+.aparte-plan-card[data-state="loading"] .aparte-skeleton.aparte-plan__sk-node {
+  inline-size: var(--aparte-plan-node-size);
+  block-size: var(--aparte-plan-node-size);
+}
+
+.aparte-plan-card[data-state="loading"] .aparte-skeleton.aparte-plan__sk-ring {
+  inline-size: 1.375rem;
+  block-size: 1.375rem;
+}
+
+.aparte-plan-card[data-state="loading"] .aparte-plan__row { align-items: center; }
+.aparte-plan-card[data-state="loading"] .aparte-skeleton.aparte-plan__sk-line { inline-size: 70%; }
+.aparte-plan-card[data-state="loading"] li:nth-child(2) .aparte-skeleton.aparte-plan__sk-line { inline-size: 55%; }
+.aparte-plan-card[data-state="loading"] li:nth-child(3) .aparte-skeleton.aparte-plan__sk-line { inline-size: 80%; }
+.aparte-plan-card[data-state="loading"] li:nth-child(4) .aparte-skeleton.aparte-plan__sk-line { inline-size: 45%; }
+.aparte-plan-card[data-state="loading"] .aparte-skeleton.aparte-plan__sk-meta { inline-size: 5rem; }
+.aparte-plan-card[data-state="loading"] .aparte-plan__compact .aparte-skeleton.aparte-plan__sk-line { inline-size: 75%; }
+
+/* ── Small screens ───────────────────────────────────────────────────── */
+
+@media (max-width: 380px) {
+  .aparte-plan-card { --aparte-plan-pad: var(--aparte-space-5); }
+  .aparte-plan__compact { column-gap: var(--aparte-space-2); padding-inline: var(--aparte-space-4); }
+}
+`;
+const W = {
+  cardsPlanTitle: { en: "Plan", fr: "Plan", de: "Plan", es: "Plan", it: "Piano", ja: "計画", ko: "계획", pt: "Plano", ru: "План", zh: "计划" },
+  cardsPlanProgress: {
+    en: "{done} of {total} done",
+    fr: "{done} sur {total} terminées",
+    de: "{done} von {total} erledigt",
+    es: "{done} de {total} completados",
+    it: "{done} di {total} completati",
+    ja: "{total}件中{done}件完了",
+    ko: "{total}개 중 {done}개 완료",
+    pt: "{done} de {total} concluídos",
+    ru: "Выполнено {done} из {total}",
+    zh: "已完成 {done}/{total}"
+  },
+  cardsPlanSkipped: {
+    en: "{n} skipped",
+    fr: "Ignorées : {n}",
+    de: "Übersprungen: {n}",
+    es: "Omitidos: {n}",
+    it: "Saltati: {n}",
+    ja: "スキップ {n}件",
+    ko: "건너뜀 {n}개",
+    pt: "Ignorados: {n}",
+    ru: "Пропущено: {n}",
+    zh: "已跳过 {n} 项"
+  },
+  cardsPlanFailed: {
+    en: "{n} failed",
+    fr: "Échecs : {n}",
+    de: "Fehlgeschlagen: {n}",
+    es: "Fallidos: {n}",
+    it: "Falliti: {n}",
+    ja: "失敗 {n}件",
+    ko: "실패 {n}개",
+    pt: "Falhas: {n}",
+    ru: "Ошибок: {n}",
+    zh: "失败 {n} 项"
+  },
+  cardsPlanElapsed: {
+    en: "{time} elapsed",
+    fr: "Durée : {time}",
+    de: "Dauer: {time}",
+    es: "Duración: {time}",
+    it: "Durata: {time}",
+    ja: "経過時間 {time}",
+    ko: "경과 {time}",
+    pt: "Duração: {time}",
+    ru: "Прошло: {time}",
+    zh: "用时 {time}"
+  },
+  cardsPlanStepNow: {
+    en: "Step {n} of {total}:",
+    fr: "Étape {n} sur {total} :",
+    de: "Schritt {n} von {total}:",
+    es: "Paso {n} de {total}:",
+    it: "Passo {n} di {total}:",
+    ja: "ステップ {n}/{total}：",
+    ko: "{total}단계 중 {n}단계:",
+    pt: "Etapa {n} de {total}:",
+    ru: "Шаг {n} из {total}:",
+    zh: "第 {n}/{total} 步："
+  },
+  cardsPlanAllDone: {
+    en: "All steps done",
+    fr: "Toutes les étapes sont terminées",
+    de: "Alle Schritte erledigt",
+    es: "Todos los pasos completados",
+    it: "Tutti i passi completati",
+    ja: "すべてのステップが完了",
+    ko: "모든 단계 완료",
+    pt: "Todas as etapas concluídas",
+    ru: "Все шаги выполнены",
+    zh: "所有步骤已完成"
+  },
+  cardsPlanStatusPending: { en: "To do", fr: "À faire", de: "Offen", es: "Pendiente", it: "Da fare", ja: "未着手", ko: "대기", pt: "A fazer", ru: "Не начато", zh: "待办" },
+  cardsPlanStatusInProgress: { en: "In progress", fr: "En cours", de: "In Arbeit", es: "En curso", it: "In corso", ja: "進行中", ko: "진행 중", pt: "Em andamento", ru: "Выполняется", zh: "进行中" },
+  cardsPlanStatusDone: { en: "Done", fr: "Terminé", de: "Erledigt", es: "Hecho", it: "Fatto", ja: "完了", ko: "완료", pt: "Concluído", ru: "Готово", zh: "已完成" },
+  cardsPlanStatusFailed: { en: "Failed", fr: "Échec", de: "Fehlgeschlagen", es: "Fallido", it: "Non riuscito", ja: "失敗", ko: "실패", pt: "Falhou", ru: "Ошибка", zh: "失败" },
+  cardsPlanStatusSkipped: { en: "Skipped", fr: "Ignoré", de: "Übersprungen", es: "Omitido", it: "Saltato", ja: "スキップ", ko: "건너뜀", pt: "Ignorado", ru: "Пропущено", zh: "已跳过" },
+  cardsPlanStatusBlocked: { en: "Blocked", fr: "Bloqué", de: "Blockiert", es: "Bloqueado", it: "Bloccato", ja: "ブロック中", ko: "차단됨", pt: "Bloqueado", ru: "Заблокировано", zh: "受阻" },
+  cardsPlanSummary: {
+    en: "{done}/{total} done",
+    fr: "{done}/{total} terminées",
+    de: "{done}/{total} erledigt",
+    es: "{done}/{total} completados",
+    it: "{done}/{total} completati",
+    ja: "{done}/{total} 完了",
+    ko: "{done}/{total} 완료",
+    pt: "{done}/{total} concluídos",
+    ru: "выполнено {done}/{total}",
+    zh: "已完成 {done}/{total}"
+  },
+  cardsPlanNow: {
+    en: "now: {step}",
+    fr: "en cours : {step}",
+    de: "jetzt: {step}",
+    es: "ahora: {step}",
+    it: "ora: {step}",
+    ja: "実行中：{step}",
+    ko: "현재: {step}",
+    pt: "agora: {step}",
+    ru: "сейчас: {step}",
+    zh: "当前：{step}"
+  }
+};
+const say = (config, key, vars) => word(config, key, W[key], vars);
+const STATUS_WORD = {
+  pending: "cardsPlanStatusPending",
+  "in-progress": "cardsPlanStatusInProgress",
+  done: "cardsPlanStatusDone",
+  failed: "cardsPlanStatusFailed",
+  skipped: "cardsPlanStatusSkipped",
+  blocked: "cardsPlanStatusBlocked"
+};
+const PLAN_STEPS_SHOWN = 50;
+const isObject = (value) => !!value && typeof value === "object" && !Array.isArray(value);
+const notNull = (value) => value !== null && value !== void 0;
+function pick(r, keys) {
+  for (const key of keys) if (r[key] !== void 0 && r[key] !== null && r[key] !== "") return r[key];
+  return void 0;
+}
+const STATUS_ALIASES = {
+  pending: ["pending", "todo", "to-do", "open", "queued", "planned", "not-started", "notstarted", "new", "waiting", "scheduled", "upcoming", "ready", "idle", "backlog"],
+  "in-progress": ["in-progress", "inprogress", "progress", "doing", "running", "active", "current", "started", "working", "executing", "ongoing", "processing", "in-flight"],
+  done: ["done", "completed", "complete", "success", "succeeded", "successful", "finished", "ok", "passed", "resolved", "closed", "checked"],
+  failed: ["failed", "fail", "failure", "error", "errored", "aborted", "timeout", "timed-out", "crashed"],
+  skipped: ["skipped", "skip", "cancelled", "canceled", "omitted", "not-needed", "wont-do", "won't-do", "wontdo", "obsolete", "dropped"],
+  blocked: ["blocked", "on-hold", "onhold", "paused", "stuck", "held", "needs-input", "needs-approval", "awaiting-input", "awaiting-approval"]
+};
+const STATUS_OF = new Map(
+  Object.entries(STATUS_ALIASES).flatMap(([status, words]) => words.map((w) => [w, status]))
+);
+function readStatus(value) {
+  if (typeof value === "boolean") return value ? "done" : "pending";
+  if (typeof value !== "string") return void 0;
+  return STATUS_OF.get(value.trim().toLowerCase().replace(/[\s_]+/g, "-"));
+}
+const STATUS_KEYS = ["status", "state", "stage", "phase"];
+const DONE_FLAGS = ["done", "completed", "complete", "checked", "finished", "isDone", "is_done", "isCompleted", "is_completed"];
+const ACTIVE_FLAGS = ["active", "running", "current", "inProgress", "in_progress"];
+const TITLE_KEYS = ["title", "content", "name", "label", "text", "task", "step", "action", "description"];
+const ACTIVE_FORM_KEYS = ["activeForm", "active_form", "activeTitle", "active_title"];
+const DETAIL_KEYS = ["detail", "details", "description", "note", "notes", "summary", "result", "output", "observation", "message", "reason"];
+const START_KEYS = ["startedAt", "started_at", "startTime", "start_time", "startDate", "start_date", "start", "begin"];
+const END_KEYS = ["finishedAt", "finished_at", "completedAt", "completed_at", "endedAt", "ended_at", "endTime", "end_time", "doneAt", "done_at", "end"];
+const SECONDS_KEYS = ["duration", "durationSeconds", "duration_seconds", "durationSec", "elapsed", "seconds", "took"];
+const MS_KEYS = ["durationMs", "duration_ms", "elapsedMs", "elapsed_ms", "tookMs", "took_ms"];
+const SUB_KEYS = ["substeps", "subSteps", "sub_steps", "subtasks", "subTasks", "children", "steps", "todos", "items", "checklist"];
+const LIST_KEYS = ["steps", "todos", "tasks", "items", "checklist", "stages", "phases", "subtasks", "plan"];
+const PAST_KEYS = ["past_steps", "pastSteps", "completed_steps", "completedSteps"];
+const PLAN_TITLE_KEYS = ["title", "name", "heading"];
+const GOAL_KEYS = ["goal", "objective", "task", "input", "query", "request", "description", "explanation", "summary"];
+const UPDATED_KEYS = ["updatedAt", "updated_at", "lastUpdated", "last_updated", "asOf", "as_of", "timestamp"];
+function statusOf(r) {
+  const said = readStatus(pick(r, STATUS_KEYS));
+  if (said) return said;
+  if (r["failed"] === true || r["error"] === true || str(r["error"])) return "failed";
+  if (r["skipped"] === true || r["cancelled"] === true || r["canceled"] === true) return "skipped";
+  if (r["blocked"] === true) return "blocked";
+  const active = ACTIVE_FLAGS.some((key) => r[key] === true);
+  for (const key of DONE_FLAGS) {
+    if (typeof r[key] === "boolean") return r[key] ? "done" : active ? "in-progress" : "pending";
+  }
+  return active ? "in-progress" : void 0;
+}
+function fromSubsteps(subs) {
+  const has = (status) => subs.some((s) => s.status === status);
+  if (subs.every((s) => s.status === "done" || s.status === "skipped")) return has("done") ? "done" : "skipped";
+  if (has("in-progress")) return "in-progress";
+  if (has("failed")) return "failed";
+  if (has("done") || has("skipped")) return "in-progress";
+  if (has("blocked")) return "blocked";
+  return "pending";
+}
+const LINE = /^\s*(?:(?:[-*+•]|\d+[.)])\s+)?(?:\[([ xX✓✔>~!-])\]\s*)?(.*?)\s*$/;
+const ITEM = /^\s*(?:(?:[-*+•]|\d+[.)])\s+|\[[ xX✓✔>~!-]\])/;
+const BOX = { " ": "pending", x: "done", X: "done", "✓": "done", "✔": "done", ">": "in-progress", "!": "failed", "-": "skipped", "~": "blocked" };
+function checkbox(text) {
+  const match = LINE.exec(text);
+  const title = match[2];
+  if (!title) return null;
+  return { title, ...match[1] !== void 0 ? { status: BOX[match[1]] } : {} };
+}
+function parseText(text) {
+  const lines = text.split(/\r?\n/).filter((line) => line.trim());
+  let title;
+  const steps = [];
+  for (const [index, line] of lines.entries()) {
+    if (!ITEM.test(line)) {
+      if (index > 0) return null;
+      title = line.trim().replace(/^#{1,6}\s+/, "").replace(/:$/, "") || void 0;
+      continue;
+    }
+    const step = readStep(line, 1);
+    if (!step) continue;
+    const parent = steps[steps.length - 1];
+    if (/^(?:\t|\s{2,})/.test(line) && parent) (parent.substeps ??= []).push(step);
+    else steps.push(step);
+  }
+  return steps.length ? { ...title ? { title } : {}, steps } : null;
+}
+function readStep(raw, depth, forced) {
+  if (typeof raw === "string" || typeof raw === "number") {
+    const line = checkbox(String(raw));
+    return line ? { title: line.title, status: line.status ?? forced ?? "pending" } : null;
+  }
+  if (Array.isArray(raw)) {
+    return readStep(raw[0], depth, forced);
+  }
+  if (!isObject(raw)) return null;
+  const r = raw;
+  const titleKey = TITLE_KEYS.find((key) => typeof r[key] === "string" && r[key].trim());
+  let title = titleKey ? r[titleKey].trim() : void 0;
+  if (!title) return null;
+  const subsRaw = depth === 0 ? SUB_KEYS.map((key) => r[key]).find(Array.isArray) : void 0;
+  const substeps = subsRaw ? subsRaw.map((item) => readStep(item, 1)).filter(notNull) : [];
+  const startedAt = toDate(pick(r, START_KEYS)) ?? void 0;
+  const finishedAt = toDate(pick(r, END_KEYS)) ?? void 0;
+  const status = statusOf(r) ?? forced ?? (substeps.length ? fromSubsteps(substeps) : finishedAt ? "done" : startedAt ? "in-progress" : "pending");
+  const active = str(pick(r, ACTIVE_FORM_KEYS));
+  let altTitle;
+  if (active && active !== title) {
+    if (status === "in-progress") [title, altTitle] = [active, title];
+    else altTitle = active;
+  }
+  const error = str(r["error"]);
+  const detail = (status === "failed" ? error : void 0) ?? str(pick(r, DETAIL_KEYS.filter((key) => key !== titleKey)));
+  const seconds = num(pick(r, SECONDS_KEYS));
+  const ms = num(pick(r, MS_KEYS));
+  let duration = seconds ?? (ms !== void 0 ? ms / 1e3 : void 0);
+  if (duration === void 0 && startedAt && finishedAt && finishedAt >= startedAt) duration = (finishedAt.getTime() - startedAt.getTime()) / 1e3;
+  if (duration !== void 0 && duration < 0) duration = void 0;
+  const id = str(pick(r, ["id", "key", "uuid"]));
+  return {
+    title,
+    ...altTitle ? { altTitle } : {},
+    status,
+    ...detail ? { detail } : {},
+    ...startedAt ? { startedAt } : {},
+    ...finishedAt ? { finishedAt } : {},
+    ...duration !== void 0 ? { duration } : {},
+    ...substeps.length ? { substeps } : {},
+    ...id ? { id } : {}
+  };
+}
+function cap(steps) {
+  let left = PLAN_STEPS_SHOWN;
+  const kept = [];
+  for (const step of steps) {
+    if (left <= 0) break;
+    left -= 1;
+    if (!step.substeps) {
+      kept.push(step);
+      continue;
+    }
+    const substeps = step.substeps.slice(0, left);
+    left -= substeps.length;
+    const copy = { ...step, substeps };
+    if (!substeps.length) delete copy.substeps;
+    kept.push(copy);
+  }
+  return kept;
+}
+function readPlan(raw) {
+  if (typeof raw === "string") {
+    const parsed = parseText(raw);
+    return parsed ? { ...parsed.title ? { title: parsed.title } : {}, steps: cap(parsed.steps) } : null;
+  }
+  if (Array.isArray(raw)) {
+    const steps2 = cap(raw.map((item) => readStep(item, 0)).filter(notNull));
+    return steps2.length ? { steps: steps2 } : null;
+  }
+  if (!isObject(raw)) return null;
+  const r = raw;
+  const title = str(pick(r, PLAN_TITLE_KEYS));
+  const goal = str(pick(r, GOAL_KEYS));
+  const updatedAt = toDate(pick(r, UPDATED_KEYS)) ?? void 0;
+  const meta = { ...title ? { title } : {}, ...goal ? { goal } : {}, ...updatedAt ? { updatedAt } : {}, ...r["timed"] === true ? { timed: true } : {} };
+  if (isObject(r["plan"])) {
+    const inner = readPlan(r["plan"]);
+    return inner ? { ...meta, ...inner } : null;
+  }
+  const past = PAST_KEYS.map((key) => r[key]).find(Array.isArray) ?? [];
+  const list = LIST_KEYS.map((key) => r[key]).find((value) => Array.isArray(value) || typeof value === "string");
+  const ahead = Array.isArray(list) ? list.map((item) => readStep(item, 0)).filter(notNull) : typeof list === "string" ? parseText(list)?.steps ?? [] : [];
+  const steps = cap([...past.map((item) => readStep(item, 0, "done")).filter(notNull), ...ahead]);
+  return steps.length ? { ...meta, steps } : null;
+}
+const allSteps = (data) => data.steps.flatMap((step) => [step, ...step.substeps ?? []]);
+function elapsedOf(data) {
+  const steps = allSteps(data);
+  const starts = steps.map((s) => s.startedAt?.getTime()).filter(notNull);
+  if (starts.length) {
+    const ends = steps.flatMap((s) => [s.startedAt?.getTime(), s.finishedAt?.getTime()]).filter(notNull);
+    if (data.updatedAt) ends.push(data.updatedAt.getTime());
+    const span = (Math.max(...ends) - Math.min(...starts)) / 1e3;
+    if (span > 0) return span;
+  }
+  const sum = data.steps.reduce((total, s) => total + (s.duration ?? (s.substeps ?? []).reduce((t, sub) => t + (sub.duration ?? 0), 0)), 0);
+  return sum > 0 ? sum : void 0;
+}
+function planProgress(data) {
+  const steps = data.steps;
+  const count = (status) => steps.filter((s) => s.status === status).length;
+  const total = steps.length;
+  const done = count("done");
+  const skipped = count("skipped");
+  const finished = done + skipped;
+  let currentIndex = steps.findIndex((s) => s.status === "in-progress");
+  if (currentIndex < 0) currentIndex = steps.findIndex((s) => s.status === "pending");
+  if (currentIndex < 0) currentIndex = steps.findIndex((s) => s.status === "blocked");
+  const stoppedIndex = currentIndex < 0 ? steps.findIndex((s) => s.status === "failed") : -1;
+  const elapsed = elapsedOf(data);
+  return {
+    total,
+    done,
+    skipped,
+    failed: count("failed"),
+    blocked: count("blocked"),
+    finished,
+    ratio: total ? finished / total : 0,
+    ...currentIndex >= 0 ? { current: steps[currentIndex], currentIndex } : {},
+    ...stoppedIndex >= 0 ? { stoppedIndex } : {},
+    ...elapsed !== void 0 ? { elapsed } : {}
+  };
+}
+const isTimed = (data) => data.timed === true || allSteps(data).some((s) => s.startedAt || s.finishedAt || s.duration !== void 0);
+function durationText(config, seconds) {
+  const tag = intlTag(config);
+  const unit = (value, name, digits = 0) => new Intl.NumberFormat(tag, { style: "unit", unit: name, unitDisplay: "narrow", maximumFractionDigits: digits }).format(value);
+  const s = Math.max(0, seconds);
+  if (s < 10 && !Number.isInteger(s)) return unit(s, "second", 1);
+  let rest = Math.round(s);
+  if (rest < 60) return unit(rest, "second");
+  const parts = [];
+  let slots = 0;
+  for (const [name, size] of [["day", 86400], ["hour", 3600], ["minute", 60], ["second", 1]]) {
+    const n2 = Math.floor(rest / size);
+    rest -= n2 * size;
+    if (n2 > 0) parts.push(unit(n2, name));
+    if (n2 > 0 || slots) slots += 1;
+    if (slots === 2) break;
+  }
+  try {
+    return new Intl.ListFormat(tag, { type: "unit", style: "narrow" }).format(parts);
+  } catch {
+    return parts.join(" ");
+  }
+}
+const isoDuration = (seconds) => `PT${Math.round(seconds * 1e3) / 1e3}S`;
+function clockText(config, date, seconds) {
+  return new Intl.DateTimeFormat(intlTag(config), { hour: "numeric", minute: "2-digit", ...seconds ? { second: "2-digit" } : {} }).format(date);
+}
+function withinAnHour(data) {
+  const times = allSteps(data).flatMap((s) => [s.startedAt?.getTime(), s.finishedAt?.getTime()]).filter(notNull);
+  return !times.length || Math.max(...times) - Math.min(...times) < 36e5;
+}
+const n = (config, value) => formatNumber(config, value);
+const percentOf = (part, total) => `${total ? part / total * 100 : 0}%`;
+const FINISHED = /* @__PURE__ */ new Set(["done", "failed", "skipped"]);
+function statusGlyph(status, className = "aparte-plan__glyph") {
+  return glyph(STATUS_GLYPHS[status], `aparte-rich-card__glyph ${className}`);
+}
+function titleOf(step) {
+  return el(
+    "span",
+    { class: "aparte-plan__step-title", attrs: { "data-text": step.title, "data-alt": step.altTitle } },
+    el("span", { class: "aparte-plan__step-title-text", text: step.title })
+  );
+}
+function statusText(ctx, step) {
+  const node = el("span", { class: "aparte-sr-only aparte-plan__status" });
+  ctx.bind(node, () => ` (${say(ctx.config, STATUS_WORD[step.status])})`);
+  return node;
+}
+const detailOf = (step) => step.detail ? el("div", { class: "aparte-plan__detail", text: step.detail }) : null;
+function widestDuration(config) {
+  return [3599, 86340, 604799].map((s) => durationText(config, s)).reduce((a, b) => b.length > a.length ? b : a);
+}
+function durationOf(ctx, step) {
+  const shown = step.duration !== void 0 && FINISHED.has(step.status) ? step.duration : void 0;
+  const node = el("time", { class: "aparte-plan__duration", attrs: { datetime: shown !== void 0 ? isoDuration(shown) : void 0 } });
+  if (shown !== void 0) ctx.bind(node, () => durationText(ctx.config, shown));
+  ctx.bind(node, () => widestDuration(ctx.config), "data-reserve");
+  return node;
+}
+function head(ctx, data, progress, bar) {
+  const heading = data.title ?? data.goal;
+  const count = el("span", { class: "aparte-plan__count" });
+  ctx.bind(count, () => say(ctx.config, "cardsPlanProgress", { done: n(ctx.config, progress.done), total: n(ctx.config, progress.total) }));
+  const note = (kind, key, value) => {
+    if (!value) return null;
+    const node = el("span", { class: "aparte-plan__note", attrs: { "data-kind": kind } });
+    ctx.bind(node, () => say(ctx.config, key, { n: n(ctx.config, value) }));
+    return node;
+  };
+  let elapsed = null;
+  if (progress.elapsed !== void 0) {
+    const seconds = progress.elapsed;
+    const text = el("span", { class: "aparte-plan__elapsed-text" });
+    ctx.bind(text, () => say(ctx.config, "cardsPlanElapsed", { time: durationText(ctx.config, seconds) }));
+    elapsed = el("span", { class: "aparte-plan__elapsed" }, glyph(CLOCK, "aparte-rich-card__glyph aparte-plan__clock"), text);
+  }
+  let track = null;
+  if (bar) {
+    track = el(
+      "div",
+      { class: "aparte-plan__bar", attrs: { "aria-hidden": "true", "data-complete": progress.total > 0 && progress.finished === progress.total } },
+      el("span", { class: "aparte-plan__bar-done" }),
+      el("span", { class: "aparte-plan__bar-skipped" })
+    );
+    track.style.setProperty("--aparte-plan-done-share", percentOf(progress.done, progress.total));
+    track.style.setProperty("--aparte-plan-skipped-share", percentOf(progress.skipped, progress.total));
+  }
+  return el(
+    "div",
+    { class: "aparte-plan__head" },
+    heading ? el(
+      "div",
+      { class: "aparte-plan__heading" },
+      el("div", { class: "aparte-plan__title", text: heading }),
+      data.title && data.goal ? el("div", { class: "aparte-plan__goal", text: data.goal }) : null
+    ) : null,
+    el(
+      "div",
+      { class: "aparte-plan__meter" },
+      count,
+      note("skipped", "cardsPlanSkipped", progress.skipped),
+      note("failed", "cardsPlanFailed", progress.failed),
+      elapsed
+    ),
+    track
+  );
+}
+function stepNode(ctx, step, { timed, current = false, sub = false }) {
+  const row = el(
+    "div",
+    { class: "aparte-plan__row" },
+    statusGlyph(step.status),
+    el("div", { class: "aparte-plan__text" }, titleOf(step), statusText(ctx, step), detailOf(step)),
+    timed ? durationOf(ctx, step) : null
+  );
+  const node = el("li", {
+    class: `aparte-plan__step${sub ? " aparte-plan__step--sub" : ""}`,
+    attrs: { "data-status": step.status, "aria-current": current ? "step" : void 0, "data-step-id": step.id }
+  }, row);
+  if (step.substeps?.length) {
+    node.append(el(
+      "ol",
+      { class: "aparte-plan__substeps", attrs: { role: "list" } },
+      ...step.substeps.map((s) => stepNode(ctx, s, { timed, sub: true }))
+    ));
+  }
+  return node;
+}
+function checklist(ctx, data, progress) {
+  const timed = isTimed(data);
+  const list = el(
+    "ol",
+    { class: "aparte-plan__steps", attrs: { role: "list", "data-timed": timed } },
+    ...data.steps.map((step, i) => stepNode(ctx, step, { timed, current: i === progress.currentIndex }))
+  );
+  return [head(ctx, data, progress, true), list];
+}
+function timesOf(ctx, step, seconds) {
+  const started = step.startedAt;
+  const start = el("time", { class: "aparte-plan__start", attrs: { datetime: started?.toISOString() } });
+  if (started) ctx.bind(start, () => clockText(ctx.config, started, seconds));
+  return el("div", { class: "aparte-plan__meta" }, start, durationOf(ctx, step));
+}
+function timeline(ctx, data, progress) {
+  const timed = isTimed(data);
+  const seconds = withinAnHour(data);
+  const list = el("ol", { class: "aparte-plan__timeline", attrs: { role: "list", "data-timed": timed } });
+  data.steps.forEach((step, i) => {
+    const node = el(
+      "span",
+      { class: "aparte-plan__node" },
+      glyph(step.status === "in-progress" ? NODE_CURRENT : STATUS_GLYPHS[step.status], "aparte-rich-card__glyph aparte-plan__node-glyph")
+    );
+    const body = el(
+      "div",
+      { class: "aparte-plan__event-body" },
+      titleOf(step),
+      statusText(ctx, step),
+      timed ? timesOf(ctx, step, seconds) : null,
+      detailOf(step),
+      step.substeps?.length ? el("ol", { class: "aparte-plan__substeps", attrs: { role: "list" } }, ...step.substeps.map((s) => stepNode(ctx, s, { timed: false, sub: true }))) : null
+    );
+    list.append(el("li", {
+      class: "aparte-plan__event",
+      attrs: { "data-status": step.status, "aria-current": i === progress.currentIndex ? "step" : void 0, "data-step-id": step.id }
+    }, node, body));
+  });
+  return [head(ctx, data, progress, false), list];
+}
+const SVG = "http://www.w3.org/2000/svg";
+function ring(progress) {
+  const svg2 = document.createElementNS(SVG, "svg");
+  svg2.setAttribute("viewBox", "0 0 24 24");
+  svg2.setAttribute("class", "aparte-plan__ring-svg");
+  const arc = (cls, share, offset = 0) => {
+    const circle = document.createElementNS(SVG, "circle");
+    for (const [name, value] of [["cx", "12"], ["cy", "12"], ["r", "9.5"], ["pathLength", "100"], ["class", cls]]) circle.setAttribute(name, value);
+    if (share !== void 0) {
+      circle.setAttribute("stroke-dasharray", `${share} 100`);
+      circle.setAttribute("stroke-dashoffset", String(-offset));
+    }
+    return circle;
+  };
+  const done = progress.total ? progress.done / progress.total * 100 : 0;
+  const skipped = progress.total ? progress.skipped / progress.total * 100 : 0;
+  svg2.append(arc("aparte-plan__ring-track"), arc("aparte-plan__ring-done", done), arc("aparte-plan__ring-skipped", skipped, done));
+  return el("span", { class: "aparte-plan__ring", attrs: { "aria-hidden": "true", "data-complete": progress.total > 0 && progress.finished === progress.total } }, svg2);
+}
+function compact(ctx, data, progress) {
+  const index = progress.currentIndex ?? progress.stoppedIndex;
+  const focus = index !== void 0 ? data.steps[index] : void 0;
+  const step = el("span", { class: "aparte-plan__compact-step" });
+  const parts = [];
+  if (focus) {
+    ctx.bind(step, () => say(ctx.config, "cardsPlanStepNow", { n: n(ctx.config, index + 1), total: n(ctx.config, progress.total) }));
+    parts.push(step, el("span", { class: "aparte-plan__compact-title", text: focus.title }));
+  } else {
+    ctx.word(step, "cardsPlanAllDone", W.cardsPlanAllDone);
+    const name = data.title ?? data.goal;
+    if (name) parts.push(el("span", { class: "aparte-plan__compact-title", text: name }));
+    parts.push(step);
+  }
+  const percent = el("span", { class: "aparte-plan__percent" });
+  ctx.bind(percent, () => formatPercent(ctx.config, progress.ratio));
+  const status = focus ? focus.status : "done";
+  return [el(
+    "div",
+    { class: "aparte-plan__compact", attrs: { "data-status": status } },
+    statusGlyph(status, "aparte-plan__glyph aparte-plan__compact-glyph"),
+    el("span", { class: "aparte-plan__compact-text" }, ...parts),
+    ring(progress),
+    percent
+  )];
+}
+function render(data, ctx) {
+  const progress = planProgress(data);
+  if (ctx.variant === "timeline") return timeline(ctx, data, progress);
+  if (ctx.variant === "compact") return compact(ctx, data, progress);
+  return checklist(ctx, data, progress);
+}
+function skeleton(partial, ctx) {
+  if (partial?.steps?.length) return render(partial, ctx);
+  const block = (cls, kind = "rect") => el("span", { class: `aparte-skeleton aparte-skeleton--${kind} ${cls}`, attrs: { "aria-hidden": "true" } });
+  const heading = partial?.title ?? partial?.goal;
+  if (ctx.variant === "compact") {
+    return [el(
+      "div",
+      { class: "aparte-plan__compact" },
+      block("aparte-plan__sk-glyph", "circle"),
+      el(
+        "span",
+        { class: "aparte-plan__compact-text" },
+        heading ? el("span", { class: "aparte-plan__compact-title", text: heading }) : block("aparte-plan__sk-line", "text")
+      ),
+      block("aparte-plan__sk-ring", "circle")
+    )];
+  }
+  const top = el(
+    "div",
+    { class: "aparte-plan__head" },
+    heading ? el("div", { class: "aparte-plan__heading" }, el("div", { class: "aparte-plan__title", text: heading })) : block("aparte-plan__sk-title", "text"),
+    el("div", { class: "aparte-plan__meter" }, block("aparte-plan__sk-count", "text")),
+    ctx.variant === "checklist" ? el("div", { class: "aparte-plan__bar", attrs: { "aria-hidden": "true" } }) : null
+  );
+  const rows = [0, 1, 2, 3];
+  if (ctx.variant === "timeline") {
+    return [top, el("ol", { class: "aparte-plan__timeline", attrs: { "aria-hidden": "true" } }, ...rows.map(() => el(
+      "li",
+      { class: "aparte-plan__event", attrs: { "data-status": "pending" } },
+      el("span", { class: "aparte-plan__node" }, block("aparte-plan__sk-node", "circle")),
+      el("div", { class: "aparte-plan__event-body" }, block("aparte-plan__sk-line", "text"), block("aparte-plan__sk-meta", "text"))
+    )))];
+  }
+  return [top, el("ol", { class: "aparte-plan__steps", attrs: { "aria-hidden": "true" } }, ...rows.map(() => el(
+    "li",
+    { class: "aparte-plan__step" },
+    el("div", { class: "aparte-plan__row" }, block("aparte-plan__sk-glyph", "circle"), block("aparte-plan__sk-line", "text"))
+  )))];
+}
+function cardLabel(data, ctx) {
+  return data?.title ?? data?.goal ?? say(ctx.config, "cardsPlanTitle");
+}
+const MARK = { done: "[x]", pending: "[ ]", "in-progress": "[>]", failed: "[!]", skipped: "[-]", blocked: "[~]" };
+const clip = (text) => text.length > 120 ? `${text.slice(0, 119).trimEnd()}…` : text;
+function fallback(data, ctx) {
+  const progress = planProgress(data);
+  const summary = say(ctx.config, "cardsPlanSummary", { done: n(ctx.config, progress.done), total: n(ctx.config, progress.total) });
+  const now = progress.current ? ` — ${say(ctx.config, "cardsPlanNow", { step: progress.current.title })}` : "";
+  const line = (step, indent) => {
+    const why = (step.status === "failed" || step.status === "blocked") && step.detail ? ` — ${clip(step.detail)}` : "";
+    return `${indent}- ${MARK[step.status]} ${step.title}${why}`;
+  };
+  const lines = data.steps.flatMap((step) => [line(step, ""), ...(step.substeps ?? []).map((sub) => line(sub, "  "))]);
+  return [`${cardLabel(data, ctx)}: ${summary}${now}`, ...lines].join("\n");
+}
+const planCard = defineCard({
+  name: "plan",
+  variants: ["checklist", "timeline", "compact"],
+  styles: planStyles,
+  icon: PLAN,
+  normalize: readPlan,
+  render,
+  skeleton,
+  label: cardLabel,
+  fallback,
+  partial: (input) => {
+    const plan = readPlan(input);
+    if (plan) return plan;
+    const about = str(input["title"] ?? input["goal"] ?? input["task"] ?? input["objective"] ?? input["query"]);
+    return about ? { title: about } : null;
+  }
+});
+function setupPlanCard(options = {}) {
+  return planCard.setup(options);
+}
+export {
+  PLAN_STEPS_SHOWN,
+  durationText,
+  planCard,
+  planProgress,
+  readPlan,
+  readStatus,
+  setupPlanCard
+};
+//# sourceMappingURL=plan.js.map