@sarchauhan/chat 0.0.0-stage → 0.0.1

package/dist/widgets.css

@@ -0,0 +1,570 @@
+.chat-widget {
+  width: 100%;
+  color: inherit;
+}
+
+.chat-widget-card {
+  display: flex;
+  width: min(100%, 46rem);
+  flex-direction: column;
+  gap: var(--chat-space-3);
+  color: inherit;
+  padding: var(--chat-space-1_5) 0;
+}
+
+.chat-widget-missing {
+  opacity: 0.72;
+}
+
+.chat-widget-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--chat-space-4);
+}
+
+.chat-widget-heading {
+  min-width: 0;
+}
+
+.chat-widget-label-row {
+  display: flex;
+  align-items: center;
+  gap: var(--chat-space-1_5);
+  margin-bottom: var(--chat-space-1_5);
+}
+
+.chat-widget-status-dot {
+  width: 0.38rem;
+  height: 0.38rem;
+  flex: 0 0 auto;
+  border-radius: 999px;
+  background: var(--chat-accent, #10a37f);
+  opacity: 0.72;
+}
+
+.chat-widget-label {
+  color: inherit;
+  font-size: var(--chat-caption-size);
+  font-weight: var(--chat-label-weight);
+  letter-spacing: 0.08em;
+  opacity: 0.4;
+  text-transform: uppercase;
+}
+
+.chat-widget-title {
+  color: inherit;
+  font-size: var(--chat-heading-2-size);
+  font-weight: var(--chat-heading-2-weight);
+  line-height: var(--chat-heading-2-leading);
+  opacity: 0.92;
+}
+
+.chat-widget-status {
+  flex: 0 0 auto;
+  color: inherit;
+  font-size: var(--chat-caption-size);
+  font-weight: var(--chat-label-weight);
+  line-height: var(--chat-leading-tight);
+  opacity: 0.44;
+  white-space: nowrap;
+}
+
+.chat-widget-body {
+  min-width: 0;
+}
+
+.chat-widget-options {
+  display: flex;
+  flex-direction: column;
+  gap: var(--chat-space-1);
+}
+
+.chat-widget-option {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--chat-space-2_5);
+  width: 100%;
+  min-height: 2.75rem;
+  border: 0;
+  border-radius: var(--chat-radius);
+  padding: var(--chat-space-2) var(--chat-space-3);
+  color: inherit;
+  background: transparent;
+  cursor: pointer;
+  font: inherit;
+  line-height: var(--chat-leading-snug);
+  text-align: left;
+  transition:
+    color var(--chat-transition),
+    opacity var(--chat-transition),
+    background-color var(--chat-transition),
+    transform var(--chat-transition);
+}
+
+.chat-widget-option::before {
+  width: 1.05rem;
+  height: 1.05rem;
+  flex: 0 0 auto;
+  border: 1.5px solid currentColor;
+  border-radius: 50%;
+  content: "";
+  opacity: 0.45;
+  transition:
+    border-color var(--chat-transition),
+    box-shadow var(--chat-transition),
+    transform var(--chat-transition);
+}
+
+.chat-widget-option:hover:not(:disabled) {
+  background: var(--chat-control-bg);
+  color: var(--chat-fg);
+  transform: translateX(0.2rem);
+}
+
+.chat-widget-option:focus-visible {
+  outline: 2px solid
+    color-mix(in oklab, var(--chat-accent, #10a37f) 55%, transparent);
+  outline-offset: 3px;
+}
+
+.chat-widget-option:disabled {
+  cursor: not-allowed;
+  opacity: 0.46;
+}
+
+.chat-widget-option[data-selected="true"] {
+  color: color-mix(in oklab, var(--chat-accent, #10a37f) 60%, currentColor);
+  background: color-mix(in oklab, var(--chat-accent, #10a37f) 10%, transparent);
+}
+
+.chat-widget-option[data-selected="true"]::before {
+  border-color: var(--chat-accent, #10a37f);
+  box-shadow:
+    inset 0 0 0 3px var(--chat-bg),
+    inset 0 0 0 6px var(--chat-accent, #10a37f);
+  opacity: 1;
+  transform: scale(1.06);
+}
+
+.chat-widget-option-text {
+  min-width: 0;
+  overflow-wrap: anywhere;
+  font-weight: var(--chat-weight-medium);
+  opacity: 0.86;
+}
+
+.chat-widget-option-check {
+  display: none;
+}
+
+.chat-widget-option-check svg {
+  width: 0.9rem;
+  height: 0.9rem;
+}
+
+.chat-widget-meta,
+.chat-widget-inline-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--chat-space-1_5) var(--chat-space-2_5);
+  align-items: center;
+  color: inherit;
+  font-size: var(--chat-caption-size);
+  line-height: var(--chat-caption-leading);
+  opacity: 0.48;
+}
+
+.chat-widget-inline-meta {
+  margin-top: var(--chat-space-2);
+}
+
+.chat-widget-meta a,
+.chat-widget-inline-meta a {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--chat-space-1);
+  color: inherit;
+  text-decoration: underline;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 3px;
+}
+
+.chat-widget-meta a:hover,
+.chat-widget-inline-meta a:hover {
+  color: color-mix(in oklab, var(--chat-accent, #10a37f) 45%, currentColor);
+  opacity: 1;
+}
+
+.chat-widget-meta a svg,
+.chat-widget-inline-meta a svg {
+  width: 0.78rem;
+  height: 0.78rem;
+}
+
+.chat-widget-map-frame {
+  position: relative;
+  overflow: hidden;
+  aspect-ratio: 16 / 10;
+  opacity: 0.82;
+}
+
+.chat-widget-map-frame iframe {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border: 0;
+  filter: grayscale(0.92) contrast(1.04) brightness(0.72);
+}
+
+.chat-widget-map-pin {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: grid;
+  width: 1.8rem;
+  height: 1.8rem;
+  place-items: center;
+  border-radius: 999px;
+  color: var(--chat-accent, #10a37f);
+  opacity: 0.84;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+}
+
+.chat-widget-map-pin svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+/* Prebuilt widgets: content-first, neutral chrome, scoped to the host theme. */
+.chat-prebuilt {
+  min-width: 0;
+  margin-block: 0.75rem;
+  border: 1px solid var(--chat-border, #e5e5e5);
+  border-radius: var(--chat-radius, 0.5rem);
+  background: var(--chat-bg-elevated, #fff);
+  color: var(--chat-fg, #171717);
+  font: 0.8125rem/1.5 var(--chat-font-sans, system-ui);
+  overflow: hidden;
+}
+.chat-tool-widget > summary {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.75rem;
+  cursor: pointer;
+  list-style: none;
+}
+.chat-tool-widget > summary::-webkit-details-marker {
+  display: none;
+}
+.chat-tool-widget > summary > svg {
+  flex-shrink: 0;
+  transition: transform 160ms ease;
+}
+.chat-tool-widget[open] > summary > svg {
+  transform: rotate(180deg);
+}
+.chat-tool-widget-label {
+  font-weight: 600;
+  white-space: nowrap;
+}
+.chat-tool-widget-title {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--chat-font-mono, monospace);
+  color: var(--chat-fg-muted, #737373);
+}
+.chat-tool-widget-meta,
+.chat-tool-widget-status {
+  font-size: 0.6875rem;
+  white-space: nowrap;
+  color: var(--chat-fg-muted, #737373);
+}
+.chat-tool-widget[data-state="error"] .chat-tool-widget-status,
+.chat-widget-error {
+  color: var(--chat-danger, #b42318);
+}
+.chat-tool-widget-body {
+  border-top: 1px solid var(--chat-border, #e5e5e5);
+}
+.chat-code-preview {
+  overflow: auto;
+  max-height: 24rem;
+  padding-block: 0.5rem;
+  font: 0.75rem/1.7 var(--chat-font-mono, monospace);
+}
+.chat-code-line {
+  display: flex;
+  min-width: max-content;
+  padding-inline: 0.75rem;
+}
+.chat-code-line code {
+  white-space: pre;
+  font: inherit;
+}
+.chat-line-number {
+  flex: 0 0 3.5ch;
+  text-align: right;
+  margin-right: 1rem;
+  color: var(--chat-fg-subtle, #a3a3a3);
+  user-select: none;
+}
+.chat-diff [data-kind="header"] {
+  color: var(--chat-fg-muted, #737373);
+  background: var(--chat-control-bg, #f5f5f5);
+}
+.chat-diff [data-kind="add"] {
+  background: color-mix(in srgb, var(--chat-success, #059669) 9%, transparent);
+}
+.chat-diff [data-kind="remove"] {
+  background: color-mix(in srgb, var(--chat-danger, #b42318) 8%, transparent);
+}
+.chat-diff-add-count {
+  color: var(--chat-success, #059669);
+}
+.chat-diff-remove-count {
+  color: var(--chat-danger, #b42318);
+}
+.chat-widget-more {
+  display: block;
+  width: 100%;
+  border: 0;
+  border-top: 1px solid var(--chat-border, #e5e5e5);
+  background: transparent;
+  padding: 0.6rem;
+  font: inherit;
+  color: var(--chat-fg-muted, #737373);
+  cursor: pointer;
+}
+.chat-widget-more:hover {
+  background: var(--chat-control-hover, #f5f5f5);
+}
+.chat-widget-empty,
+.chat-widget-error {
+  margin: 0;
+  padding: 0.75rem;
+}
+.chat-search-results {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.chat-search-results li {
+  padding: 0.75rem;
+  border-bottom: 1px solid var(--chat-border, #e5e5e5);
+}
+.chat-search-results li:last-child {
+  border-bottom: 0;
+}
+.chat-search-path,
+.chat-search-results a {
+  font-family: var(--chat-font-mono, monospace);
+  font-weight: 500;
+  color: inherit;
+  overflow-wrap: anywhere;
+}
+.chat-search-line {
+  color: var(--chat-fg-subtle, #a3a3a3);
+}
+.chat-search-results p {
+  margin: 0.25rem 0 0;
+  color: var(--chat-fg-muted, #737373);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.chat-question {
+  padding: 1rem;
+}
+.chat-question-eyebrow {
+  color: var(--chat-fg-muted, #737373);
+  font-size: 0.6875rem;
+  margin-bottom: 0.25rem;
+}
+.chat-question h3 {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  margin: 0;
+}
+.chat-question-description {
+  margin: 0.4rem 0 0;
+  color: var(--chat-fg-muted, #737373);
+}
+.chat-question fieldset {
+  padding: 0;
+  margin: 0.875rem 0;
+  border: 0;
+  display: grid;
+  gap: 0.5rem;
+  min-width: 0;
+}
+.chat-question-option {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.75rem;
+  border: 1px solid var(--chat-border, #e5e5e5);
+  border-radius: 0.375rem;
+  cursor: pointer;
+}
+.chat-question-option[data-selected="true"] {
+  border-color: var(--chat-fg, #171717);
+  background: var(--chat-control-bg, #f5f5f5);
+}
+.chat-question-option input {
+  accent-color: var(--chat-primary, #171717);
+  flex-shrink: 0;
+}
+.chat-question-option > span {
+  flex: 1;
+  min-width: 0;
+}
+.chat-question-option-title {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: center;
+  font-weight: 500;
+}
+.chat-question-option small {
+  font-size: 0.625rem;
+  color: var(--chat-fg-muted, #737373);
+  border: 1px solid var(--chat-border, #e5e5e5);
+  border-radius: 0.25rem;
+  padding-inline: 0.25rem;
+}
+.chat-question-option-description {
+  display: block;
+  color: var(--chat-fg-muted, #737373);
+  margin-top: 0.2rem;
+  font-size: 0.75rem;
+}
+.chat-question-custom {
+  display: grid;
+  gap: 0.4rem;
+  color: var(--chat-fg-muted, #737373);
+}
+.chat-question textarea {
+  font: inherit;
+  width: 100%;
+  box-sizing: border-box;
+  resize: vertical;
+  padding: 0.625rem;
+  border: 1px solid var(--chat-border, #e5e5e5);
+  border-radius: 0.375rem;
+  background: transparent;
+  color: var(--chat-fg, #171717);
+}
+.chat-question footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.75rem;
+  color: var(--chat-fg-muted, #737373);
+  font-size: 0.75rem;
+}
+.chat-question footer button {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.5rem 0.75rem;
+  border: 0;
+  border-radius: 0.375rem;
+  background: var(--chat-primary, #171717);
+  color: var(--chat-primary-fg, #fff);
+  font: inherit;
+  cursor: pointer;
+}
+.chat-question button:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+.chat-prebuilt :focus-visible {
+  outline: 2px solid var(--chat-fg-muted, #737373);
+  outline-offset: 3px;
+}
+.chat-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+@media (max-width: 480px) {
+  .chat-tool-widget-meta {
+    display: none;
+  }
+  .chat-tool-widget > summary {
+    gap: 0.375rem;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .chat-tool-widget > summary > svg {
+    transition: none;
+  }
+}
+
+/* Artifacts and agent activity reuse the chat theme, including inside portals. */
+.chat-artifacts { display: grid; gap: .75rem; }
+.chat-artifacts > .chat-artifact { margin: 0; }
+.chat-artifact-row { display: flex; align-items: center; gap: .75rem; padding: .875rem; }
+.chat-artifact-icon { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; flex-shrink: 0; border-radius: .5rem; background: var(--chat-control-bg, #f5f5f5); color: var(--chat-fg-muted, #737373); }
+.chat-artifact-heading { min-width: 0; flex: 1; display: grid; gap: .125rem; }
+.chat-artifact-heading strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 500; }
+.chat-artifact-heading > span, .chat-artifact-state { font-size: .6875rem; color: var(--chat-fg-muted, #737373); }
+.chat-artifact-state { white-space: nowrap; }
+.chat-artifact[data-state="error"] .chat-artifact-state { color: var(--chat-danger, #b42318); }
+.chat-artifact-thumbnail { display: grid; place-items: center; background: var(--chat-control-bg, #f5f5f5); border-bottom: 1px solid var(--chat-border, #e5e5e5); }
+.chat-artifact-thumbnail img { display: block; width: 100%; max-height: 18rem; object-fit: contain; }
+.chat-artifact-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; padding: 0 .875rem .875rem; }
+.chat-artifact-actions a, .chat-artifact-actions button { display: inline-flex; align-items: center; gap: .375rem; border: 1px solid var(--chat-border, #e5e5e5); border-radius: .375rem; padding: .375rem .625rem; background: transparent; color: inherit; font: inherit; text-decoration: none; cursor: pointer; }
+.chat-artifact-actions a:hover, .chat-artifact-actions button:hover { background: var(--chat-control-hover, #f5f5f5); }
+.chat-artifact-full-image { display: block; max-width: 100%; max-height: 65dvh; object-fit: contain; margin-inline: auto; }
+.chat-artifact-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: .8125rem/1.7 var(--chat-font-mono, monospace); }
+.chat-subagent { padding: 1rem; }
+.chat-subagent-heading { display: flex; align-items: center; gap: .625rem; }
+.chat-subagent-icon { flex-shrink: 0; color: var(--chat-fg-muted, #737373); }
+.chat-subagent-heading > div:not(.chat-detail-origin) { flex: 1; min-width: 0; display: grid; gap: .125rem; }
+.chat-subagent-heading strong { overflow-wrap: anywhere; font-weight: 500; }
+.chat-subagent-state { font-size: .6875rem; color: var(--chat-fg-muted, #737373); }
+.chat-subagent-inspect { display: flex; align-items: center; gap: .25rem; white-space: nowrap; border: 1px solid var(--chat-border, #e5e5e5); padding: .375rem .5rem; border-radius: .375rem; background: transparent; color: inherit; font: inherit; cursor: pointer; font-size: .75rem; }
+.chat-subagent-inspect:hover { background: var(--chat-control-hover, #f5f5f5); }
+.chat-subagent-task, .chat-subagent-summary { margin: .75rem 0 0; color: var(--chat-fg-muted, #737373); white-space: pre-wrap; overflow-wrap: anywhere; }
+.chat-subagent-summary { color: var(--chat-fg, #171717); }
+.chat-subagent-progress { display: block; width: 100%; height: .25rem; margin-top: .875rem; accent-color: var(--chat-primary, #171717); }
+.chat-subagent-overview { display: flex; justify-content: space-between; align-items: center; font-size: .75rem; }
+.chat-subagent-transcript { display: grid; gap: 1rem; margin-top: 1rem; }
+.chat-subagent-message { min-width: 0; padding-bottom: 1rem; border-bottom: 1px solid var(--chat-border, #e5e5e5); }
+.chat-subagent-message:last-child { border-bottom: 0; }
+.chat-subagent-role { font-size: .6875rem; font-weight: 500; color: var(--chat-fg-muted, #737373); margin-bottom: .5rem; }
+.chat-subagent-artifacts h4 { font-size: .8125rem; font-weight: 500; margin: 1rem 0 .625rem; }
+.chat-subagent[data-state="running"] .chat-subagent-icon svg { animation: chat-agent-spin 1.5s linear infinite; }
+.chat-subagent[data-state="failed"] .chat-subagent-state { color: var(--chat-danger, #b42318); }
+.chat-detail-overlay { position: fixed; inset: 0; z-index: 1000; background: rgb(0 0 0 / .4); animation: chat-detail-fade 160ms ease-out; }
+.chat-root.chat-detail-panel { box-sizing: border-box; position: fixed; z-index: 1001; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(46rem, calc(100vw - 3rem)); max-height: min(48rem, 85dvh); margin: 0; border: 1px solid var(--chat-border-strong); border-radius: .875rem; background: var(--chat-bg-elevated); box-shadow: 0 20px 80px rgb(0 0 0 / .2); animation: chat-detail-fade 160ms ease-out; }
+.chat-detail-header { display: flex; align-items: flex-start; gap: 1rem; justify-content: space-between; padding: 1.125rem; flex-shrink: 0; border-bottom: 1px solid var(--chat-border); }
+.chat-detail-header > div { min-width: 0; }
+.chat-detail-title { margin: 0; font-size: 1rem; font-weight: 600; overflow-wrap: anywhere; }
+.chat-detail-description { margin: .25rem 0 0; color: var(--chat-fg-muted); font-size: .8125rem; overflow-wrap: anywhere; }
+.chat-detail-close { display: grid; place-items: center; flex-shrink: 0; width: 1.75rem; height: 1.75rem; border: 0; border-radius: .375rem; background: transparent; color: var(--chat-fg-muted); cursor: pointer; }
+.chat-detail-close:hover { background: var(--chat-control-hover); }
+.chat-detail-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 1.125rem; }
+.chat-detail-handle { display: none; }
+.chat-detail-panel :focus-visible { outline: 2px solid var(--chat-fg-muted); outline-offset: 3px; }
+@keyframes chat-detail-fade { from { opacity: 0; } to { opacity: 1; } }
+@keyframes chat-detail-slide { from { transform: translateY(100%); } to { transform: translateY(0); } }
+@keyframes chat-agent-spin { to { transform: rotate(360deg); } }
+@media (max-width: 640px) {
+  .chat-root.chat-detail-panel { inset: auto 0 0; transform: none; width: 100%; max-height: 90dvh; border-radius: 1rem 1rem 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); animation: chat-detail-slide 180ms ease-out; }
+  .chat-detail-handle { display: block; flex-shrink: 0; width: 2.25rem; height: .25rem; margin: .625rem auto 0; border-radius: 1rem; background: var(--chat-border-strong); }
+  .chat-detail-header, .chat-detail-body { padding: 1rem; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .chat-detail-overlay, .chat-root.chat-detail-panel, .chat-subagent[data-state="running"] .chat-subagent-icon svg { animation: none; }
+}

package/dist/widgets.d.mts

@@ -0,0 +1,4 @@
+export { A as ArtifactWidget, a as ArtifactWidgetProps, b as ArtifactsWidget, c as ArtifactsWidgetProps, i as DiffLine, P as PatchWidget, j as PatchWidgetProps, Q as QuestionAnswer, k as QuestionOption, l as QuestionWidget, m as QuestionWidgetProps, R as ReadFileWidget, n as ReadFileWidgetProps, o as ResponsiveDetail, p as ResponsiveDetailProps, S as SearchResult, q as SearchWidget, r as SearchWidgetProps, s as SubagentWidget, t as SubagentWidgetProps, T as ToolWidgetProps, x as WidgetState, y as computeDiff, z as computeTextDiff, B as computeToolState, E as computeToolWidget, H as formatArtifactSize, I as normalizeSearchResults, J as prebuiltWidgets, K as safeArtifactUrl, L as safeResultUrl } from './index-DabpPX_p.mjs';
+export { AgentArtifact, AgentSubagent, AgentSubagentState, createArtifactData, createSubagentData, parseArtifact, parseSubagent } from '@sarchauhan/protocol';
+import 'react/jsx-runtime';
+import 'react';

package/dist/widgets.d.ts

@@ -0,0 +1,4 @@
+export { A as ArtifactWidget, a as ArtifactWidgetProps, b as ArtifactsWidget, c as ArtifactsWidgetProps, i as DiffLine, P as PatchWidget, j as PatchWidgetProps, Q as QuestionAnswer, k as QuestionOption, l as QuestionWidget, m as QuestionWidgetProps, R as ReadFileWidget, n as ReadFileWidgetProps, o as ResponsiveDetail, p as ResponsiveDetailProps, S as SearchResult, q as SearchWidget, r as SearchWidgetProps, s as SubagentWidget, t as SubagentWidgetProps, T as ToolWidgetProps, x as WidgetState, y as computeDiff, z as computeTextDiff, B as computeToolState, E as computeToolWidget, H as formatArtifactSize, I as normalizeSearchResults, J as prebuiltWidgets, K as safeArtifactUrl, L as safeResultUrl } from './index-DabpPX_p.js';
+export { AgentArtifact, AgentSubagent, AgentSubagentState, createArtifactData, createSubagentData, parseArtifact, parseSubagent } from '@sarchauhan/protocol';
+import 'react/jsx-runtime';
+import 'react';