@contraagent/ui 0.0.0-stage → 0.1.0

package/dist/styles/facts.d.ts

@@ -0,0 +1,2 @@
+export declare const factStyles: import("lit").CSSResult;
+//# sourceMappingURL=facts.d.ts.map

package/dist/styles/facts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"facts.d.ts","sourceRoot":"","sources":["../../src/styles/facts.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,UAAU,yBAGtB,CAAC"}

package/dist/styles/facts.js

@@ -0,0 +1,7 @@
+// Labelled facts in a row that wraps (the run's process, a task's definition).
+import { css } from 'lit';
+export const factStyles = css `
+  .drv-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px; font-size: var(--font-size-md); }
+  .drv-facts i { font-style: normal; color: var(--text-muted); margin-right: 5px; font-size: var(--font-size-sm); }
+`;
+//# sourceMappingURL=facts.js.map

package/dist/styles/facts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"facts.js","sourceRoot":"","sources":["../../src/styles/facts.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;CAG5B,CAAC"}

package/dist/styles/index.d.ts

@@ -0,0 +1,17 @@
+import type { CSSResult } from 'lit';
+import { chipStyles } from './chips.js';
+import { layoutStyles } from './layout.js';
+import { motionStyles } from './motion.js';
+import { resetStyles } from './reset.js';
+import { statusStyles } from './status.js';
+import { textStyles } from './text.js';
+import { tokenStyles } from './tokens.js';
+export { chipStyles, layoutStyles, motionStyles, resetStyles, statusStyles, textStyles, tokenStyles };
+export { prose } from './prose.js';
+export { meterStyles } from './meter.js';
+export { legendStyles } from './legend.js';
+export { executorIconStyles } from './executor-icon.js';
+export { factStyles } from './facts.js';
+/** Every element's styles, in cascade order: the tokens, then the shared rules. */
+export declare const base: CSSResult[];
+//# sourceMappingURL=index.d.ts.map

package/dist/styles/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/styles/index.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,CAAC;AACtG,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAExC,mFAAmF;AACnF,eAAO,MAAM,IAAI,EAAE,SAAS,EAAiG,CAAC"}

package/dist/styles/index.js

@@ -0,0 +1,16 @@
+import { chipStyles } from './chips.js';
+import { layoutStyles } from './layout.js';
+import { motionStyles } from './motion.js';
+import { resetStyles } from './reset.js';
+import { statusStyles } from './status.js';
+import { textStyles } from './text.js';
+import { tokenStyles } from './tokens.js';
+export { chipStyles, layoutStyles, motionStyles, resetStyles, statusStyles, textStyles, tokenStyles };
+export { prose } from './prose.js';
+export { meterStyles } from './meter.js';
+export { legendStyles } from './legend.js';
+export { executorIconStyles } from './executor-icon.js';
+export { factStyles } from './facts.js';
+/** Every element's styles, in cascade order: the tokens, then the shared rules. */
+export const base = [tokenStyles, resetStyles, textStyles, statusStyles, chipStyles, layoutStyles, motionStyles];
+//# sourceMappingURL=index.js.map

package/dist/styles/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/styles/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,EAAE,WAAW,EAAE,YAAY,EAAE,UAAU,EAAE,WAAW,EAAE,CAAC;AACtG,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAC3C,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAExC,mFAAmF;AACnF,MAAM,CAAC,MAAM,IAAI,GAAgB,CAAC,WAAW,EAAE,WAAW,EAAE,UAAU,EAAE,YAAY,EAAE,UAAU,EAAE,YAAY,EAAE,YAAY,CAAC,CAAC"}

package/dist/styles/layout.d.ts

@@ -0,0 +1,2 @@
+export declare const layoutStyles: import("lit").CSSResult;
+//# sourceMappingURL=layout.d.ts.map

package/dist/styles/layout.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.d.ts","sourceRoot":"","sources":["../../src/styles/layout.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY,yBAyBxB,CAAC"}

package/dist/styles/layout.js

@@ -0,0 +1,30 @@
+// Layout: the 12-column grid, a panel, a section heading, an empty state, a
+// short clickable row.
+import { css } from 'lit';
+export const layoutStyles = css `
+  .g12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 14px; }
+  .c12 { grid-column: span 12; }
+  .c7 { grid-column: span 7; }
+  .c5 { grid-column: span 5; }
+  @media (max-width: 1150px) {
+    .c7, .c5 { grid-column: span 12; }
+  }
+  .panel { background: linear-gradient(180deg, var(--panel2), var(--panel)); border: 1px solid var(--line);
+    border-radius: var(--radius-lg); padding: 14px 16px; min-width: 0; box-shadow: 0 10px 28px color-mix(in srgb, var(--shadow) 40%, transparent); }
+  .panel > h3 { margin: 0 0 12px; display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; color: var(--text-2); }
+  .panel > h3 .r { margin-left: auto; font-weight: 400; font-size: 11.5px; color: var(--text-muted); }
+  .sect-h { margin: 14px 0 8px; font-size: var(--font-size-md); color: var(--text-2); font-weight: 600; }
+  .sect-h .meta { margin-left: 8px; font-weight: 400; }
+
+  .blank { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 60px 16px; color: var(--text-muted); text-align: center; }
+  .blank .ic { font-size: 30px; opacity: 0.55; }
+  .blank b { color: var(--text-2); font-weight: 600; }
+  .blank a.lnk { text-decoration: underline; }
+  .blank.small { padding: 24px; }
+
+  /* a short clickable row (failures, launches) */
+  .fl { padding: 7px 10px; border-radius: var(--radius-md); cursor: pointer; display: grid; grid-template-columns: auto 1fr auto; gap: 2px 10px; align-items: baseline; }
+  .fl > .meta:last-child { grid-column: 1 / 4; overflow: hidden; text-overflow: ellipsis; }
+  .fl:hover { background: var(--raise); }
+`;
+//# sourceMappingURL=layout.js.map

package/dist/styles/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../src/styles/layout.ts"],"names":[],"mappings":"AAAA,4EAA4E;AAC5E,uBAAuB;AACvB,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;CAyB9B,CAAC"}

package/dist/styles/legend.d.ts

@@ -0,0 +1,2 @@
+export declare const legendStyles: import("lit").CSSResult;
+//# sourceMappingURL=legend.d.ts.map

package/dist/styles/legend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"legend.d.ts","sourceRoot":"","sources":["../../src/styles/legend.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,YAAY,yBAIxB,CAAC"}

package/dist/styles/legend.js

@@ -0,0 +1,8 @@
+// A legend: a swatch and a word per entry (the graph, the timeline, the token bars).
+import { css } from 'lit';
+export const legendStyles = css `
+  .legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--font-size-sm); color: var(--text-muted); }
+  .legend > span { white-space: nowrap; }
+  .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
+`;
+//# sourceMappingURL=legend.js.map

package/dist/styles/legend.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"legend.js","sourceRoot":"","sources":["../../src/styles/legend.ts"],"names":[],"mappings":"AAAA,qFAAqF;AACrF,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;CAI9B,CAAC"}

package/dist/styles/meter.d.ts

@@ -0,0 +1,3 @@
+/** A duration: it measures, it does not judge (red only for a failed attempt). */
+export declare const meterStyles: import("lit").CSSResult;
+//# sourceMappingURL=meter.d.ts.map

package/dist/styles/meter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"meter.d.ts","sourceRoot":"","sources":["../../src/styles/meter.ts"],"names":[],"mappings":"AAGA,kFAAkF;AAClF,eAAO,MAAM,WAAW,yBAIvB,CAAC"}

package/dist/styles/meter.js

@@ -0,0 +1,9 @@
+// A duration bar under a time (the task table and History).
+import { css } from 'lit';
+/** A duration: it measures, it does not judge (red only for a failed attempt). */
+export const meterStyles = css `
+  .jdur { position: relative; display: block; height: 6px; border-radius: 3px; background: var(--track); overflow: hidden; margin-top: 2px; }
+  .jdur i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--meter); }
+  .jdur i.bad { background: var(--status-failed); }
+`;
+//# sourceMappingURL=meter.js.map

package/dist/styles/meter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"meter.js","sourceRoot":"","sources":["../../src/styles/meter.ts"],"names":[],"mappings":"AAAA,4DAA4D;AAC5D,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,kFAAkF;AAClF,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;CAI7B,CAAC"}

package/dist/styles/motion.d.ts

@@ -0,0 +1,2 @@
+export declare const motionStyles: import("lit").CSSResult;
+//# sourceMappingURL=motion.d.ts.map

package/dist/styles/motion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion.d.ts","sourceRoot":"","sources":["../../src/styles/motion.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY,yBAsBxB,CAAC"}

package/dist/styles/motion.js

@@ -0,0 +1,27 @@
+// Motion: the keyframes the elements use, and none of it for a reader who asks
+// for reduced motion.
+import { css } from 'lit';
+export const motionStyles = css `
+  .enter { animation: enter 0.5s var(--ease) both; }
+
+  @keyframes turn { to { transform: rotate(360deg); } }
+  @keyframes breathe {
+    0%, 100% { opacity: 0.45; box-shadow: 0 0 0 0 transparent; transform: scale(0.85); }
+    50% { opacity: 1; box-shadow: 0 0 0 4px var(--status-running-bg); transform: scale(1); }
+  }
+  @keyframes ping { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-running) 55%, transparent); } 80%, 100% { box-shadow: 0 0 0 9px transparent; } }
+  @keyframes enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
+  @keyframes bump { 0% { transform: scale(1); } 35% { transform: scale(1.04); box-shadow: 0 0 0 1px var(--line2); } 100% { transform: scale(1); } }
+  @keyframes scan { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
+  @keyframes growx { from { transform: scaleX(0); } to { transform: scaleX(1); } }
+  @keyframes stripes { to { background-position: 17px 0; } }
+  @keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(0.97); } to { opacity: 1; transform: none; } }
+  @keyframes toast-out { to { opacity: 0; transform: translateX(24px); } }
+  @keyframes rowin { from { background: color-mix(in srgb, var(--text) 10%, transparent); } to { background: transparent; } }
+  @keyframes bounce { 0%, 80%, 100% { transform: translateY(0); opacity: 0.45; } 40% { transform: translateY(-5px); opacity: 1; } }
+  @keyframes core-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(0.72); } }
+  @media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after { animation: none !important; transition: none !important; }
+  }
+`;
+//# sourceMappingURL=motion.js.map

package/dist/styles/motion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"motion.js","sourceRoot":"","sources":["../../src/styles/motion.ts"],"names":[],"mappings":"AAAA,+EAA+E;AAC/E,sBAAsB;AACtB,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;CAsB9B,CAAC"}

package/dist/styles/prose.d.ts

@@ -0,0 +1,3 @@
+/** Rendered markdown, highlighted code and JSON trees: transcripts, plugin files, panels. */
+export declare const prose: import("lit").CSSResult;
+//# sourceMappingURL=prose.d.ts.map

package/dist/styles/prose.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"prose.d.ts","sourceRoot":"","sources":["../../src/styles/prose.ts"],"names":[],"mappings":"AAGA,6FAA6F;AAC7F,eAAO,MAAM,KAAK,yBAsDjB,CAAC"}

package/dist/styles/prose.js

@@ -0,0 +1,59 @@
+// Rendered markdown, highlighted code and JSON trees.
+import { css } from 'lit';
+/** Rendered markdown, highlighted code and JSON trees: transcripts, plugin files, panels. */
+export const prose = css `
+  .jtree { font-family: var(--mono); font-size: var(--font-size-md); overflow: auto; }
+  .jt { margin-left: 16px; }
+  details.jt > summary { cursor: pointer; list-style: revert; }
+  .jk { color: var(--code-name); }
+  .js { color: var(--code-string); }
+  .jn { color: var(--code-number); }
+
+  .md-p { margin: 0.15em 0; }
+  .md-gap { height: 0.5em; }
+  .md-h { font-weight: 600; margin: 0.7em 0 0.25em; }
+  .md-h1 { font-size: 1.25em; }
+  .md-h2 { font-size: 1.12em; }
+  .md-h3 { font-size: 1.03em; color: var(--text-2); }
+  .md-h4 { color: var(--text-2); }
+  .md-li { padding-left: 16px; text-indent: -12px; margin: 0.1em 0; }
+  .md-li::before { content: '• '; color: var(--text-muted); }
+  .md-ol::before { content: ''; }
+  .md-n { color: var(--text-muted); margin-right: 6px; }
+  .md-q { border-left: 3px solid var(--line2); padding-left: 10px; color: var(--text-2); margin: 0.2em 0; }
+  .md-hr { border: 0; border-top: 1px solid var(--line); margin: 0.7em 0; }
+  .md-t { border-collapse: collapse; margin: 0.4em 0; }
+  .md-t th, .md-t td { border: 1px solid var(--line); padding: 3px 9px; text-align: left; font-size: 12.5px; }
+  .md-t th { background: var(--raise); }
+  .md-doc { padding: 10px 14px; background: var(--well); border: 1px solid var(--line); border-radius: var(--radius-md); max-height: 460px; overflow: auto; line-height: 1.55; }
+  .md-doc code, .tx code { background: var(--raise); border-radius: var(--radius-sm); padding: 0 4px; font-size: 0.92em; }
+  .md-doc pre { background: var(--well); border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; white-space: pre-wrap; }
+  .md-doc pre code, .tx pre code { background: none; padding: 0; border-radius: 0; font-size: inherit; }
+  .md-front { margin-bottom: 10px; border-collapse: collapse; }
+  .md-front td { padding: 2px 14px 2px 0; font-size: 12.5px; border: 0; vertical-align: top; }
+  .md-front td:first-child { color: var(--text-muted); }
+  .md-tele { color: var(--text-muted); font-size: 11.5px; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .df-text { background: var(--well); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px 12px; font-size: var(--font-size-md);
+    white-space: pre-wrap; max-height: 420px; overflow: auto; margin: 0; }
+  .df-tog { margin-left: auto; font-size: var(--font-size-sm); color: var(--accent); border: 1px solid var(--line2); border-radius: var(--radius-pill);
+    padding: 0 9px; cursor: pointer; background: none; }
+  .df-tog:hover { background: var(--accent-bg); }
+  /* a template placeholder in a prompt */
+  .pv { color: var(--code-constant); background: color-mix(in srgb, var(--code-constant) 12%, transparent); border-radius: var(--radius-sm); padding: 0 3px; }
+  .pv.pc { color: var(--code-keyword); background: color-mix(in srgb, var(--code-keyword) 12%, transparent); }
+
+  .hl { font-family: var(--mono); }
+  .hl-k { color: var(--code-keyword); }
+  .hl-const { color: var(--code-constant); font-style: italic; }
+  .hl-s { color: var(--code-string); }
+  .hl-doc { color: var(--code-string); font-style: italic; opacity: 0.85; }
+  .hl-c { color: var(--code-comment); font-style: italic; }
+  .hl-n { color: var(--code-number); }
+  .hl-d { color: var(--code-function); }
+  .hl-f { color: var(--code-function); font-weight: 600; }
+  .hl-cls { color: var(--code-type); font-weight: 700; }
+  .hl-t { color: var(--code-type); }
+  .hl-b { color: var(--code-name); }
+  .hl-key { color: var(--code-name); }
+`;
+//# sourceMappingURL=prose.js.map

package/dist/styles/prose.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"prose.js","sourceRoot":"","sources":["../../src/styles/prose.ts"],"names":[],"mappings":"AAAA,sDAAsD;AACtD,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,6FAA6F;AAC7F,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsDvB,CAAC"}

package/dist/styles/reset.d.ts

@@ -0,0 +1,2 @@
+export declare const resetStyles: import("lit").CSSResult;
+//# sourceMappingURL=reset.d.ts.map

package/dist/styles/reset.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reset.d.ts","sourceRoot":"","sources":["../../src/styles/reset.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,WAAW,yBAQvB,CAAC"}

package/dist/styles/reset.js

@@ -0,0 +1,13 @@
+// What every element's shadow root starts from: box sizing, scrollbars, the
+// selection and the focus ring.
+import { css } from 'lit';
+export const resetStyles = css `
+  *, *::before, *::after { box-sizing: border-box; }
+  * { scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
+  *:hover { scrollbar-color: var(--text-muted) transparent; }
+  ::selection { background: var(--selection); }
+  :focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: 2px; }
+  button { font: inherit; color: inherit; }
+  [hidden] { display: none !important; }
+`;
+//# sourceMappingURL=reset.js.map

package/dist/styles/reset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reset.js","sourceRoot":"","sources":["../../src/styles/reset.ts"],"names":[],"mappings":"AAAA,4EAA4E;AAC5E,gCAAgC;AAChC,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,WAAW,GAAG,GAAG,CAAA;;;;;;;;CAQ7B,CAAC"}

package/dist/styles/status.d.ts

@@ -0,0 +1,2 @@
+export declare const statusStyles: import("lit").CSSResult;
+//# sourceMappingURL=status.d.ts.map

package/dist/styles/status.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"status.d.ts","sourceRoot":"","sources":["../../src/styles/status.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY,yBA+CxB,CAAC"}

package/dist/styles/status.js

@@ -0,0 +1,52 @@
+// A status, by tone (lib/tone.ts, lib/status.ts): one rule per tone, and the
+// status elements that take it (a mark, a pill, a word, a dot, a spinner).
+import { css } from 'lit';
+export const statusStyles = css `
+  /*
+   * data-tone names its status colour, which each kind of status element below takes as
+   * --tone (the colour) and --tone-bg (its tint). No data-tone: neutral.
+   */
+  [data-tone='failed'] { --tone: var(--status-failed); --tone-bg: var(--status-failed-bg); }
+  [data-tone='attention'] { --tone: var(--status-attention); --tone-bg: var(--status-attention-bg); }
+  [data-tone='done'] { --tone: var(--status-done); --tone-bg: var(--status-done-bg); }
+  [data-tone='running'] { --tone: var(--status-running); --tone-bg: var(--status-running-bg); }
+  [data-tone='muted'] { --tone: var(--status-muted); --tone-bg: var(--status-muted-bg); }
+
+  /*
+   * A status mark before a status word (data-mark): ✓ done, ✕ failed, ◌ not started or waiting.
+   * The shape keeps the meaning without colour; screen readers read the word only.
+   */
+  [data-mark]::before { margin-right: 0.35em; font-weight: 700; }
+  [data-mark='done']::before { content: '✓'; content: '✓' / ''; color: var(--status-done); }
+  [data-mark='failed']::before { content: '✕'; content: '✕' / ''; }
+  [data-mark='pending']::before { content: '◌'; content: '◌' / ''; }
+
+  /* text in a status colour: only on a status that applies (a count above 0 of a problem, a status word) */
+  .tone-text[data-tone] { color: var(--tone); }
+
+  /*
+   * A status as a pill, always with its word. A problem is tinted and marked (✕ failed, ◌ not started);
+   * done is quiet (a ✓ and the word): it is the usual case, and the problems are what stand out.
+   */
+  .pill { border-radius: var(--radius-pill); padding: 1px 10px; font-size: var(--font-size-sm); font-weight: 500; background: var(--raise); color: var(--text-2); white-space: nowrap; }
+  .pill[data-tone] { background: var(--tone-bg); color: var(--tone); }
+  .pill[data-tone='done'] { background: none; padding-left: 2px; color: var(--text-2); }
+
+  /* a status as a word in a row (History, Problems, Outputs): coloured for a problem, done quiet with its ✓ */
+  .jstop { font-weight: 600; }
+  .jstop[data-tone='failed'], .jstop[data-tone='attention'] { color: var(--tone); }
+  .jstop[data-tone='done'] { color: var(--text-2); font-weight: 500; }
+
+  /*
+   * A status as a dot (a run in the header and the run list). The shape carries it too:
+   * round done, square failed, diamond attention, a breathing ring running.
+   */
+  .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line2); flex: none; display: inline-block; }
+  .dot[data-tone] { background: var(--tone); }
+  .dot[data-tone='running'] { animation: breathe 1.8s ease-in-out infinite; }
+  .dot[data-tone='attention'] { border-radius: 1px; transform: rotate(45deg) scale(0.86); }
+  .dot[data-tone='failed'] { border-radius: 1.5px; }
+  .spin { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--status-running-bg);
+    border-top-color: var(--status-running); animation: turn 0.9s linear infinite; flex: none; display: inline-block; }
+`;
+//# sourceMappingURL=status.js.map

package/dist/styles/status.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"status.js","sourceRoot":"","sources":["../../src/styles/status.ts"],"names":[],"mappings":"AAAA,6EAA6E;AAC7E,2EAA2E;AAC3E,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+C9B,CAAC"}

package/dist/styles/text.d.ts

@@ -0,0 +1,2 @@
+export declare const textStyles: import("lit").CSSResult;
+//# sourceMappingURL=text.d.ts.map

package/dist/styles/text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../src/styles/text.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,UAAU,yBAgBtB,CAAC"}

package/dist/styles/text.js

@@ -0,0 +1,21 @@
+// Text: code, captions, words read only by screen readers, line breaks in a
+// tight box, links.
+import { css } from 'lit';
+export const textStyles = css `
+  .jmono, code, .mono { font-family: var(--mono); }
+  /* read by screen readers, not shown: the word beside a status mark or an icon */
+  .sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
+  .jmono { font-size: 11.5px; }
+  .meta { color: var(--text-muted); font-size: var(--font-size-sm); }
+  /* a label in a tight box: it wraps at spaces and between phrases, never inside a word (Japanese included) */
+  .words { word-break: keep-all; overflow-wrap: break-word; line-break: strict; }
+  /* one fact of a row in .words (factLine): the line breaks between facts first, inside one only when it is wider than the box */
+  .words .f { display: inline-block; max-width: 100%; }
+  @supports (word-break: auto-phrase) {
+    .words:lang(ja) { word-break: auto-phrase; }
+  }
+  .mut, .jdim { color: var(--text-muted); }
+  a.lnk { color: var(--accent); cursor: pointer; text-decoration: none; }
+  a.lnk:hover { text-decoration: underline; }
+`;
+//# sourceMappingURL=text.js.map

package/dist/styles/text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"text.js","sourceRoot":"","sources":["../../src/styles/text.ts"],"names":[],"mappings":"AAAA,4EAA4E;AAC5E,oBAAoB;AACpB,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,UAAU,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;CAgB5B,CAAC"}

package/dist/styles/theme-sheet.d.ts

@@ -0,0 +1,12 @@
+import { type CSSResult } from 'lit';
+/** Applies the theme named by `data-ca-theme` on any element (`<html data-ca-theme="nord">`). */
+export declare const themeStyles: CSSResult;
+/** The same rules for a host element: `:host([data-ca-theme="nord"])`. */
+export declare const hostThemeStyles: CSSResult;
+/**
+ * Adds `themeStyles` to a document or a shadow root, once. Importing the package
+ * does it for the page's document; call it for a shadow root of your own that
+ * holds the elements and sets `data-ca-theme` inside it.
+ */
+export declare function adoptThemes(root?: Document | ShadowRoot): void;
+//# sourceMappingURL=theme-sheet.d.ts.map

package/dist/styles/theme-sheet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-sheet.d.ts","sourceRoot":"","sources":["../../src/styles/theme-sheet.ts"],"names":[],"mappings":"AAEA,OAAO,EAAa,KAAK,SAAS,EAAE,MAAM,KAAK,CAAC;AAGhD,iGAAiG;AACjG,eAAO,MAAM,WAAW,EAAE,SAAkE,CAAC;AAE7F,0EAA0E;AAC1E,eAAO,MAAM,eAAe,EAAE,SAAyE,CAAC;AAIxG;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,IAAI,GAAE,QAAQ,GAAG,UAAqB,GAAG,IAAI,CAMxE"}

package/dist/styles/theme-sheet.js

@@ -0,0 +1,24 @@
+// The built-in themes as stylesheets: for a document (or any shadow root that
+// holds the elements), and for an element that applies a theme to itself.
+import { unsafeCSS } from 'lit';
+import { themeRules } from './themes.js';
+/** Applies the theme named by `data-ca-theme` on any element (`<html data-ca-theme="nord">`). */
+export const themeStyles = unsafeCSS(themeRules((n) => `[data-ca-theme="${n}"]`));
+/** The same rules for a host element: `:host([data-ca-theme="nord"])`. */
+export const hostThemeStyles = unsafeCSS(themeRules((n) => `:host([data-ca-theme="${n}"])`));
+const adopted = new WeakSet();
+/**
+ * Adds `themeStyles` to a document or a shadow root, once. Importing the package
+ * does it for the page's document; call it for a shadow root of your own that
+ * holds the elements and sets `data-ca-theme` inside it.
+ */
+export function adoptThemes(root = document) {
+    if (adopted.has(root))
+        return;
+    const sheet = themeStyles.styleSheet;
+    if (!sheet || !('adoptedStyleSheets' in root))
+        return;
+    root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+    adopted.add(root);
+}
+//# sourceMappingURL=theme-sheet.js.map

package/dist/styles/theme-sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-sheet.js","sourceRoot":"","sources":["../../src/styles/theme-sheet.ts"],"names":[],"mappings":"AAAA,8EAA8E;AAC9E,0EAA0E;AAC1E,OAAO,EAAE,SAAS,EAAkB,MAAM,KAAK,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzC,iGAAiG;AACjG,MAAM,CAAC,MAAM,WAAW,GAAc,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,mBAAmB,CAAC,IAAI,CAAC,CAAC,CAAC;AAE7F,0EAA0E;AAC1E,MAAM,CAAC,MAAM,eAAe,GAAc,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,yBAAyB,CAAC,KAAK,CAAC,CAAC,CAAC;AAExG,MAAM,OAAO,GAAG,IAAI,OAAO,EAAyB,CAAC;AAErD;;;;GAIG;AACH,MAAM,UAAU,WAAW,CAAC,OAA8B,QAAQ;IAChE,IAAI,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC;QAAE,OAAO;IAC9B,MAAM,KAAK,GAAG,WAAW,CAAC,UAAU,CAAC;IACrC,IAAI,CAAC,KAAK,IAAI,CAAC,CAAC,oBAAoB,IAAI,IAAI,CAAC;QAAE,OAAO;IACtD,IAAI,CAAC,kBAAkB,GAAG,CAAC,GAAG,IAAI,CAAC,kBAAkB,EAAE,KAAK,CAAC,CAAC;IAC9D,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;AACpB,CAAC"}

package/dist/styles/themes.d.ts

@@ -0,0 +1,75 @@
+/**
+ * The built-in themes, in the order of the monitor's theme control. Each is a
+ * full set of tokens. Sources (all MIT-licensed):
+ * - `contraagent-dark`, `contraagent-light`: this package's own palette, MIT.
+ * - `github-dark`, `github-light`, `high-contrast`: GitHub Primer primitives
+ *   (dark, light and dark high contrast), https://github.com/primer/primitives, MIT, (c) GitHub Inc.
+ * - `one-dark`: Atom One Dark, https://github.com/atom/atom/tree/master/packages/one-dark-syntax, MIT, (c) GitHub Inc.
+ * - `nord`: Nord, https://www.nordtheme.com, MIT, (c) Arctic Ice Studio and Sven Greb.
+ */
+export declare const THEME_NAMES: readonly ["contraagent-dark", "contraagent-light", "github-dark", "github-light", "one-dark", "nord", "high-contrast"];
+export type ThemeName = (typeof THEME_NAMES)[number];
+/** A reader's choice: a theme, or `system` (contraagent Dark or contraagent Light, as the system's colour scheme). */
+export type ThemeChoice = ThemeName | 'system';
+/** The choices in the monitor's control, in order. */
+export declare const THEME_CHOICES: readonly ThemeChoice[];
+/** The themes after the first divider of the control: palettes of code editors. */
+export declare const EDITOR_THEMES: readonly ThemeName[];
+/** The theme for a reader who has not chosen. */
+export declare const DEFAULT_THEME: ThemeName;
+/** What `system` shows, by the system's colour scheme. */
+export declare const SYSTEM_THEMES: {
+    readonly dark: "contraagent-dark";
+    readonly light: "contraagent-light";
+};
+/**
+ * A token: the short name the elements' styles use (`--<name>`), the `--ca-*`
+ * property that sets it, and its meaning (the site's theme reference shows it).
+ * A token with `derive` is computed from the others unless its property is set;
+ * the themes do not list it.
+ */
+export interface TokenInfo {
+    name: string;
+    prop: string;
+    meaning: string;
+    derive?: string;
+}
+export declare const TOKENS: readonly TokenInfo[];
+/** The name of every token a theme sets (every token without `derive`). */
+export type ThemeToken = 'backdrop' | 'bg' | 'card' | 'panel' | 'panel2' | 'raise' | 'well' | 'track' | 'line' | 'line2' | 'shadow' | 'text' | 'text-2' | 'text-muted' | 'accent' | 'focus' | 'focus-width' | 'selection' | 'status-failed' | 'status-attention' | 'status-done' | 'status-running' | 'status-muted' | 'tint' | 'agent' | 'meter' | 'tok-input' | 'tok-cache-read' | 'tok-cache-write' | 'tok-output' | 'code-keyword' | 'code-string' | 'code-number' | 'code-constant' | 'code-comment' | 'code-function' | 'code-type' | 'code-name';
+export interface Theme {
+    /** The name the theme control shows; a theme's own name, the same in every language. */
+    label: string;
+    /** Light or dark: the `color-scheme` (native controls, scrollbars) and what `system` picks by. */
+    scheme: 'dark' | 'light';
+    tokens: Record<ThemeToken, string>;
+}
+export declare const THEMES: Record<ThemeName, Theme>;
+/** The property a theme sets for a token (the layer under `--ca-*`). */
+export declare const themeProp: (token: string) => string;
+/**
+ * The rules that apply each theme, for a selector per theme name: for a page,
+ * `n => `[data-ca-theme="${n}"]``; inside a shadow root, `n => `:host([data-ca-theme="${n}"])``.
+ */
+export declare function themeRules(selector: (name: ThemeName) => string): string;
+export declare const isThemeName: (x: unknown) => x is ThemeName;
+export declare const isThemeChoice: (x: unknown) => x is ThemeChoice;
+/** The theme a choice shows: `system` by the system's colour scheme; anything else not a theme, the default. */
+export declare function resolveTheme(choice: unknown, prefersLight: boolean): ThemeName;
+/** Where the reader's choice is kept (this browser only). */
+export declare const THEME_STORE_KEY = "contraagent:theme";
+type Store = Pick<Storage, 'getItem' | 'setItem'>;
+/** The reader's choice from an earlier visit, else the default theme. */
+export declare function preferredTheme(store?: Store | undefined): ThemeChoice;
+/** Remember the reader's choice for the next visit. */
+export declare function rememberTheme(choice: ThemeChoice, store?: Store | undefined): void;
+/** Whether the system asks for a light colour scheme. */
+export declare const prefersLight: () => boolean;
+/**
+ * A script for a page's `<head>`: it sets `data-ca-theme` on `<html>` from the
+ * reader's choice before the first paint, as `resolveTheme(preferredTheme(), prefersLight())`
+ * does. With `themeRules` in a `<style>` beside it, the page opens in its theme.
+ */
+export declare const themeBootScript: string;
+export {};
+//# sourceMappingURL=themes.d.ts.map

package/dist/styles/themes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../../src/styles/themes.ts"],"names":[],"mappings":"AASA;;;;;;;;GAQG;AACH,eAAO,MAAM,WAAW,wHAAyH,CAAC;AAClJ,MAAM,MAAM,SAAS,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AACrD,sHAAsH;AACtH,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC/C,sDAAsD;AACtD,eAAO,MAAM,aAAa,EAAE,SAAS,WAAW,EAA4H,CAAC;AAC7K,mFAAmF;AACnF,eAAO,MAAM,aAAa,EAAE,SAAS,SAAS,EAAyE,CAAC;AACxH,iDAAiD;AACjD,eAAO,MAAM,aAAa,EAAE,SAA8B,CAAC;AAC3D,0DAA0D;AAC1D,eAAO,MAAM,aAAa;;;CAAwG,CAAC;AAEnI;;;;;GAKG;AACH,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,MAAM,EAAE,SAAS,SAAS,EA8CtC,CAAC;AAEF,2EAA2E;AAC3E,MAAM,MAAM,UAAU,GAClB,UAAU,GAAG,IAAI,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAC1G,MAAM,GAAG,QAAQ,GAAG,YAAY,GAAG,QAAQ,GAAG,OAAO,GAAG,aAAa,GAAG,WAAW,GACnF,eAAe,GAAG,kBAAkB,GAAG,aAAa,GAAG,gBAAgB,GAAG,cAAc,GAAG,MAAM,GACjG,OAAO,GAAG,OAAO,GAAG,WAAW,GAAG,gBAAgB,GAAG,iBAAiB,GAAG,YAAY,GACrF,cAAc,GAAG,aAAa,GAAG,aAAa,GAAG,eAAe,GAAG,cAAc,GAAG,eAAe,GAAG,WAAW,GAAG,WAAW,CAAC;AAEpI,MAAM,WAAW,KAAK;IACpB,wFAAwF;IACxF,KAAK,EAAE,MAAM,CAAC;IACd,kGAAkG;IAClG,MAAM,EAAE,MAAM,GAAG,OAAO,CAAC;IACzB,MAAM,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;CACpC;AAID,eAAO,MAAM,MAAM,EAAE,MAAM,CAAC,SAAS,EAAE,KAAK,CAuT3C,CAAC;AAEF,wEAAwE;AACxE,eAAO,MAAM,SAAS,GAAI,OAAO,MAAM,KAAG,MAA+B,CAAC;AAE1E;;;GAGG;AACH,wBAAgB,UAAU,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,MAAM,GAAG,MAAM,CAMxE;AAED,eAAO,MAAM,WAAW,GAAI,GAAG,OAAO,KAAG,CAAC,IAAI,SAA4D,CAAC;AAC3G,eAAO,MAAM,aAAa,GAAI,GAAG,OAAO,KAAG,CAAC,IAAI,WAAgE,CAAC;AAEjH,gHAAgH;AAChH,wBAAgB,YAAY,CAAC,MAAM,EAAE,OAAO,EAAE,YAAY,EAAE,OAAO,GAAG,SAAS,CAG9E;AAED,6DAA6D;AAC7D,eAAO,MAAM,eAAe,sBAAsB,CAAC;AAEnD,KAAK,KAAK,GAAG,IAAI,CAAC,OAAO,EAAE,SAAS,GAAG,SAAS,CAAC,CAAC;AASlD,yEAAyE;AACzE,wBAAgB,cAAc,CAAC,KAAK,GAAE,KAAK,GAAG,SAAqB,GAAG,WAAW,CAQhF;AAED,uDAAuD;AACvD,wBAAgB,aAAa,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,GAAE,KAAK,GAAG,SAAqB,GAAG,IAAI,CAM7F;AAED,yDAAyD;AACzD,eAAO,MAAM,YAAY,QAAO,OAAoF,CAAC;AAErH;;;;GAIG;AACH,eAAO,MAAM,eAAe,QAI0D,CAAC"}