@tangle-network/sandbox-ui 1.1.8 → 2.0.0

package/dist/tailwind.css

@@ -14,29 +14,17 @@
  *
  * The same file is the source of the precompiled `./styles` bundle:
  * src/styles/globals.css wraps it with `@import "tailwindcss"` and this repo's
- * own source globs. Edit runtime CSS here, never in globals.css. */
+ * own source globs. Authored Sandbox rules belong in globals.css; the style
+ * build also includes those rules in the published Tailwind source entry. */
 
-/* Fonts are loaded by the consumer, not this library. See README
- * "Fonts" for the list of font families sandbox-ui references
- * (Geist, Geist Mono, Outfit, Manrope, Inter) and the recommended
- * loading strategies (@fontsource packages or an HTML <link>).
- *
- * Historical note: previous versions shipped
- *   @import url("https://fonts.googleapis.com/css2?family=Geist...")
- * at the top of this file. That pattern broke in downstream apps that
- * used CSS chain `@import`s — once the dist CSS is inlined after any
- * rule, the URL @import is no longer at the top of the merged
- * stylesheet and the CSS spec disallows it (PostCSS rejects the
- * build). Shipping fonts as a library concern is also undesirable
- * for privacy (third-party Google Fonts request) and network-failure
- * reasons. Consumers own font loading now. */
-
-@import "@tangle-network/brand/styles/tokens.css";
+/* Brand defaults sit below the host's theme refinements. Font loading stays
+ * with the consumer; this entry makes no remote requests. */
+@import "@tangle-network/brand/styles/tokens.css" layer(theme.brand);
 /* Brand's named themes (`data-theme="<name>"`). They re-skin the surface ladder
  * and nothing else — the Tangle accent stays put. Imported here so a consuming
  * app opting into one resolves it through the single composed entry point,
  * rather than reaching into brand for a second stylesheet. */
-@import "@tangle-network/brand/styles/named-themes.css";
+@import "@tangle-network/brand/styles/named-themes.css" layer(theme.brand);
 
 /* Canonical font, radius and semantic-color utility registrations, imported as
  * DEFAULT theme values. A default registration still emits every Brand utility,
@@ -893,49 +881,75 @@
   border-left: 1px solid var(--border-subtle);
 }
 
-/* AgentGraph live cards, scoped under `.ag-live` on the package theme tokens. Type 11/12/13/14 px, 4 px grid. */
+.agent-graph { container-type: inline-size; }
 .ag-live { --ag-fg: hsl(var(--foreground)); --ag-muted: hsl(var(--muted-foreground)); --ag-surface: hsl(var(--card)); --ag-border: hsl(var(--border)); }
-.ag-live .ag-live-card { position: relative; display: flex; flex-direction: column; gap: 8px; width: 100%; height: 100%; padding: 12px; border: 1px solid var(--ag-border);
-  border-radius: 14px; background: var(--ag-surface); color: var(--ag-fg); cursor: pointer; overflow: hidden; animation: ag-live-grow 420ms cubic-bezier(.2,.8,.2,1) both; transform-origin: 50% 0;
-  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms cubic-bezier(.2,.8,.2,1); }
-.ag-live .ag-live-card:hover { transform: translateY(-1px); }
-/* A running agent's card carries a thin travelling sheen along its top edge: work in progress without a glowing border. */
-.ag-live .ag-live-card[data-status="running"]::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px;
-  background: linear-gradient(90deg, transparent, var(--ag-status), transparent); background-size: 40% 100%; background-repeat: no-repeat; animation: ag-live-sheen 2.4s ease-in-out infinite; }
-.ag-live .ag-live-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
-.ag-live .ag-live-names { display: flex; flex-direction: column; min-width: 0; flex: 1; }
-.ag-live .ag-live-name { font-size: 14px; line-height: 18px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.ag-live .ag-live-meta, .ag-live .ag-live-stats { font-size: 11px; line-height: 14px; color: var(--ag-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.ag-live .ag-live-stats { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-variant-numeric: tabular-nums; flex: none; }
-.ag-live .ag-live-pill { display: inline-flex; align-items: center; gap: 4px; height: 16px; padding: 0 6px; border-radius: 8px; font-weight: 600; color: var(--ag-status);
-  background: color-mix(in oklab, var(--ag-status) 14%, transparent); }
-.ag-live .ag-live-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ag-status); }
-.ag-live [data-status="running"] .ag-live-dot { animation: ag-live-breathe 1.6s ease-in-out infinite; }
-.ag-live .ag-live-thinking { flex: none; margin: 0; font-size: 13px; line-height: 17px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; animation: ag-live-in 260ms ease-out both; }
-.ag-live .ag-live-quiet { color: var(--ag-muted); }
-.ag-live .ag-live-failure { color: var(--ag-status); }
-.ag-live .ag-live-events { margin: auto 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
-.ag-live .ag-live-events li { display: flex; align-items: center; gap: 6px; height: 16px; font: 11px/16px var(--font-mono, ui-monospace, monospace); color: var(--ag-muted);
-  animation: ag-live-in 260ms cubic-bezier(.2,.8,.2,1) both; }
-.ag-live .ag-live-events li svg { flex: none; opacity: .8; }
-/* Older lines fade back so the newest reads first, as a log tail does. */
-.ag-live .ag-live-events li:nth-last-child(3) { opacity: .55; }
-.ag-live .ag-live-events li:nth-last-child(2) { opacity: .8; }
-.ag-live .ag-live-events li:last-child { color: var(--ag-fg); animation: ag-live-in 260ms cubic-bezier(.2,.8,.2,1) both, ag-live-flash 1.2s ease-out both; }
-.ag-live .ag-live-event-label { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.ag-live .ag-live-event-at { flex: none; font-family: inherit; color: var(--ag-muted); font-variant-numeric: tabular-nums; }
-.ag-live .ag-live-slot { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
-.ag-live .ag-live-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; height: 32px; padding: 0 12px; border: 1px solid var(--ag-border); border-radius: 16px;
-  background: var(--ag-surface); color: var(--ag-muted); font-size: 12px; cursor: pointer; animation: ag-live-settle 320ms cubic-bezier(.2,.8,.2,1) both; }
-.ag-live .ag-live-chip-name { color: var(--ag-fg); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-.ag-live .ag-live-chip-result { color: var(--ag-fg); font-weight: 500; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
-@keyframes ag-live-sheen { from { background-position: -40% 0; } to { background-position: 140% 0; } }
-@keyframes ag-live-breathe { 50% { opacity: .35; transform: scale(.8); } }
-@keyframes ag-live-flash { from { background: color-mix(in oklab, var(--ag-status) 16%, transparent); } to { background: transparent; } }
-@keyframes ag-live-grow { from { opacity: 0; transform: scale(.92) translateY(-8px); } }
-@keyframes ag-live-in { from { opacity: 0; transform: translateY(6px); } }
-@keyframes ag-live-settle { from { opacity: 1; transform: scale(1.08); } }
-@media (prefers-reduced-motion: reduce) { .ag-live *, .ag-live *::before { animation: none !important; } .ag-live .ag-live-card:hover { transform: none; } }
+.ag-live-slot { display: flex; align-items: center; width: 100%; height: 100%; }
+.ag-live-card { position: relative; display: flex; flex-direction: column; gap: 4px; box-sizing: border-box; width: 100%; height: 100%; padding: 10px; border: 1px solid var(--ag-border);
+  border-radius: var(--radius-card); animation: agent-arrive var(--motion-arrive) both; background: var(--ag-surface); color: var(--ag-fg); overflow: hidden;
+  transition: height var(--motion-surface), border-radius var(--motion-surface), border-color var(--motion-control), box-shadow var(--motion-control); }
+.ag-live-head { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; column-gap: 8px; min-width: 0; }
+.ag-live-head > :first-child { grid-column: 1; grid-row: 1 / 3; }
+.ag-live-names, .ag-live-stats { display: contents; }
+.ag-live-name { grid-column: 2; grid-row: 1; font-size: 14px; line-height: 18px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ag-live-meta, .ag-live-stats { font-size: 12px; line-height: 16px; color: var(--ag-muted); }
+.ag-live-meta { grid-column: 2 / -1; grid-row: 2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ag-live-accounting { grid-column: 2 / -1; grid-row: 3; font-variant-numeric: tabular-nums; }
+.ag-live-pill { grid-column: 3; grid-row: 1; justify-self: end; display: inline-flex; align-items: center; gap: 4px; color: var(--ag-status); }
+.ag-running-dot { display: inline-block; flex: none; width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--surface-info-text); }
+[data-activity="quiet"] .ag-running-dot { background: var(--surface-warning-text); animation: none !important; }
+.ag-live-thinking-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
+.ag-live-thinking { flex: 1; min-width: 0; margin: 0; font-size: 13px; line-height: 17px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
+.ag-live-failure { color: var(--surface-danger-text); }
+.ag-live-quiet { color: var(--surface-warning-text); font-size: 12px; line-height: 16px; }
+.ag-live-inspect { border: 0; padding: 0; background: transparent; font: inherit; cursor: pointer; }
+.ag-live-inspect > span:last-child { text-decoration: underline; }
+.ag-live-respond { height: 28px; min-height: 28px; flex: none; border: 1px solid currentColor; border-radius: var(--radius-control); padding: 0 8px; color: var(--surface-warning-text); background: transparent; cursor: pointer; }
+.ag-live-events-clip { margin-top: auto; height: 48px; min-height: 48px; overflow: hidden; }
+.ag-live-events { margin: 0; padding: 0; list-style: none; min-height: 64px; display: flex; flex-direction: column; justify-content: flex-end; transform: translateY(-16px); }
+.ag-live-events li { display: flex; align-items: center; gap: 6px; min-height: 16px; font: 11px/16px var(--font-mono, monospace); color: var(--ag-muted); transition: color var(--motion-stream); }
+.ag-live-events li svg { flex: none; width: 12px; height: 12px; }
+.ag-live-events li:last-child { color: var(--ag-fg); }
+.ag-live-event-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ag-live-event-at { flex: none; min-width: 3ch; text-align: right; font-variant-numeric: tabular-nums; }
+.ag-live-chip { height: 40px; flex-direction: row; align-items: center; gap: 8px; border-radius: var(--radius-pill); opacity: 1; }
+.ag-live-chip .ag-live-head { display: flex; flex: none; max-width: 45%; }
+.ag-live-chip .ag-live-names { display: flex; min-width: 0; }
+.ag-live-chip .ag-live-stats, .ag-live-chip .ag-live-head > :first-child { display: none; }
+.ag-live-chip-result { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; line-height: 16px; font-weight: 500; }
+.ag-phone-list { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 8px; list-style: none; }
+.ag-phone-list > li { min-width: 0; padding-left: min(calc(var(--depth) * 16px), 32px); border-left: 1px solid var(--ag-border); }
+.ag-phone-select { width: 100%; height: 100%; text-align: left; background: transparent; padding: 0; border: 0; color: inherit; cursor: pointer; }
+.agent-graph .react-flow__node-liveAgent:focus-visible .ag-live-card, .agent-graph .react-flow__node-agent:focus-visible > div, .ag-phone-select:focus-visible { outline: 2px solid hsl(var(--foreground) / .7); outline-offset: 2px; }
+@media (prefers-reduced-motion: reduce) { .ag-live-card { animation: none; transition: opacity var(--duration-fast); } }
+@container (width < 600px) {
+  .ag-live-card { height: auto; min-height: 164px; }
+  .ag-live-card[data-sparse="true"] { min-height: 88px; }
+  .ag-phone-select .ag-agent-card { height: auto; min-height: 88px; }
+  .ag-caption-target { display: none; }
+  .ag-live-card.ag-live-chip { min-height: 40px; height: 40px; }
+}
+.ag-live-accounting { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
+.ag-live-chip-status { flex: none; font-size: 12px; color: var(--ag-status); }
+.ag-live-chip-cost { flex: none; font-size: 12px; color: var(--ag-muted); font-variant-numeric: tabular-nums; }
+.ag-parent-label { color: var(--ag-muted); font-size: 12px; font-weight: 400; }
+.ag-agent-card[data-status="needs-you"] p { -webkit-line-clamp: 1; }
+.ag-status-button { display: inline-flex; align-items: center; min-width: 0; gap: 6px; }
+.ag-caption-target { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
+.ag-latest { flex: none; min-width: 0; border-bottom: 1px solid hsl(var(--border)); padding: 8px 12px; color: hsl(var(--foreground)); font-size: 12px; line-height: 16px; }
+.ag-latest header { display: flex; align-items: center; min-height: 24px; gap: 8px; }
+.ag-latest header > span { color: hsl(var(--muted-foreground)); }
+.ag-latest header > button { margin-left: auto; padding: 0; border: 0; background: transparent; text-decoration: underline; font: inherit; color: inherit; cursor: pointer; }
+.ag-latest ol { list-style: none; margin: 0; padding: 0; overflow: auto; }
+.ag-latest li { height: 28px; }
+.ag-latest li > button { display: flex; align-items: center; gap: 6px; width: 100%; height: 28px; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
+.ag-latest li > button:disabled { cursor: default; }
+.ag-latest strong { font-weight: 600; }
+.ag-latest li strong { flex: none; max-width: 22%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ag-latest-dot { box-sizing: border-box; width: 8px; height: 8px; flex: none; border-radius: var(--radius-pill); }
+.ag-latest-state { display: inline-flex; align-items: center; gap: 4px; flex: none; }
+.ag-latest-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 11px/16px var(--font-mono, monospace); }
+.ag-latest time { flex: none; color: hsl(var(--muted-foreground)); font: 11px/16px var(--font-mono, monospace); font-variant-numeric: tabular-nums; }
+.ag-latest-empty { display: flex; align-items: center; color: hsl(var(--muted-foreground)); }
 
 /* Published sources: this package's dist and its @tangle-network/ui peer. */
 @source "./**/*.js";