@overmux/pi 0.0.1

package/src/styles.css

@@ -0,0 +1,619 @@
+@layer om.components {
+  @scope ([data-om-pi-conversation], [data-om-pi-composer]) {
+    :where(:scope[data-om-pi-conversation]) {
+      position: relative;
+      display: flex;
+      min-inline-size: 0;
+      min-block-size: 0;
+      flex: 1 1 auto;
+      flex-direction: column;
+      color: var(--om-color-fg, inherit);
+      background: var(--om-color-surface, transparent);
+      font-family: var(--om-font-sans, sans-serif);
+    }
+
+    :where(.om-pi-conversation-status) {
+      display: flex;
+      min-block-size: 2.5rem;
+      flex: none;
+      flex-direction: column;
+      gap: calc(var(--om-spacing, 0.75rem) * 0.3333);
+      padding-block: calc(var(--om-spacing, 0.75rem) * 0.75);
+      padding-inline: var(--om-spacing, 0.75rem);
+      border-block-end: 1px solid var(--om-color-border, currentColor);
+      background: var(--om-color-panel, transparent);
+      font-size: 0.875rem;
+    }
+
+    :where(.om-pi-conversation-status-row) {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: var(--om-spacing, 0.75rem);
+    }
+
+    :where(.om-pi-conversation-metadata) {
+      max-inline-size: 100%;
+      flex: none;
+      overflow-wrap: anywhere;
+      padding-block: calc(var(--om-spacing, 0.75rem) * 0.5);
+      padding-inline: var(--om-spacing, 0.75rem);
+      border-block-start: 1px solid var(--om-color-border, currentColor);
+      background: var(--om-color-surface, transparent);
+      font-size: 0.75rem;
+      line-height: 1.125rem;
+    }
+
+    :where(.om-pi-metadata-select) {
+      max-inline-size: 14rem;
+      field-sizing: content;
+      border: 0;
+      border-radius: 0.25rem;
+      background: transparent;
+      color: inherit;
+      font: inherit;
+    }
+
+    :where(.om-pi-metadata-select:focus-visible) {
+      outline: 2px solid var(--om-color-accent, currentColor);
+      outline-offset: 2px;
+    }
+
+    :where(.om-pi-metadata-error) {
+      display: block;
+      color: var(--om-color-danger, currentColor);
+      overflow-wrap: anywhere;
+    }
+
+    :where(.om-pi-conversation-scroller) {
+      min-block-size: 0;
+      flex: 1 1 auto;
+      overflow-y: auto;
+      overscroll-behavior: contain;
+      padding: var(--om-spacing, 0.75rem);
+    }
+
+    :where(.om-pi-conversation-content) {
+      display: grid;
+      inline-size: 100%;
+      max-inline-size: 64rem;
+      margin-inline: auto;
+      gap: calc(var(--om-spacing, 0.75rem) * 1.3333);
+    }
+
+    :where(.om-pi-conversation-content > *, .om-pi-content-block > *) {
+      min-inline-size: 0;
+    }
+
+    :where(.om-pi-conversation-entry) {
+      inline-size: 100%;
+      overflow-wrap: anywhere;
+    }
+
+    :where(.om-pi-conversation-entry:not([data-om-role="user"])) {
+      max-inline-size: 56rem;
+      margin-inline-end: auto;
+      padding-block: calc(var(--om-spacing, 0.75rem) * 0.6667);
+      padding-inline: calc(var(--om-spacing, 0.75rem) * 0.3333);
+    }
+
+    :where(.om-pi-conversation-entry[data-om-role="user"]) {
+      max-inline-size: 48rem;
+      margin-inline-start: auto;
+      padding: var(--om-spacing, 0.75rem);
+      border-radius: calc(var(--om-radius, 0.5rem) * 2);
+      background: var(--om-color-panel, transparent);
+    }
+
+    :where(.om-pi-conversation-entry > header) {
+      display: flex;
+      align-items: center;
+      gap: calc(var(--om-spacing, 0.75rem) * 0.6667);
+      margin-block-end: calc(var(--om-spacing, 0.75rem) * 0.6667);
+      font-size: 0.75rem;
+      font-weight: 500;
+    }
+
+    :where(.om-pi-content-block) {
+      display: grid;
+      gap: var(--om-spacing, 0.75rem);
+    }
+
+    :where(.om-pi-markdown) {
+      overflow-wrap: anywhere;
+      line-height: 1.75rem;
+    }
+
+    :where(.om-pi-markdown p) {
+      margin-block: 0 var(--om-spacing, 0.75rem);
+    }
+
+    :where(.om-pi-markdown p:last-child) {
+      margin-block-end: 0;
+    }
+
+    :where(.om-pi-markdown h1, .om-pi-markdown h2, .om-pi-markdown h3) {
+      margin-block-start: 0;
+      font-weight: 600;
+    }
+
+    :where(.om-pi-markdown h1) {
+      margin-block-end: var(--om-spacing, 0.75rem);
+      font-size: 1.5rem;
+    }
+
+    :where(.om-pi-markdown h2) {
+      margin-block-end: calc(var(--om-spacing, 0.75rem) * 0.6667);
+      font-size: 1.25rem;
+    }
+
+    :where(.om-pi-markdown h3) {
+      margin-block-end: calc(var(--om-spacing, 0.75rem) * 0.6667);
+    }
+
+    :where(.om-pi-markdown ol, .om-pi-markdown ul) {
+      margin-block: var(--om-spacing, 0.75rem);
+      padding-inline-start: calc(var(--om-spacing, 0.75rem) * 2);
+    }
+
+    :where(.om-pi-markdown ol) {
+      list-style: decimal;
+    }
+
+    :where(.om-pi-markdown ul) {
+      list-style: disc;
+    }
+
+    :where(.om-pi-markdown li) {
+      margin-block: calc(var(--om-spacing, 0.75rem) * 0.3333);
+    }
+
+    :where(.om-pi-markdown blockquote) {
+      margin: 0;
+      padding-inline-start: var(--om-spacing, 0.75rem);
+      border-inline-start: 2px solid var(--om-color-border, currentColor);
+    }
+
+    :where(.om-pi-markdown a) {
+      color: var(--om-color-accent, LinkText);
+      text-decoration: underline;
+      text-underline-offset: 2px;
+    }
+
+    :where(.om-pi-markdown code) {
+      font-family: var(--om-font-mono, monospace);
+      font-size: 0.9em;
+    }
+
+    :where(.om-pi-markdown :not(pre) > code) {
+      padding-block: 0.125rem;
+      padding-inline: 0.375rem;
+      border: 1px solid var(--om-color-border, currentColor);
+      border-radius: calc(var(--om-radius, 0.5rem) * 0.75);
+      background: var(--om-color-panel, transparent);
+      box-decoration-break: clone;
+      overflow-wrap: anywhere;
+    }
+
+    :where(.om-pi-markdown pre) {
+      margin-block: var(--om-spacing, 0.75rem);
+      overflow-x: auto;
+      padding: var(--om-spacing, 0.75rem);
+      border-radius: var(--om-radius, 0.5rem);
+      background: color-mix(
+        in srgb,
+        var(--om-color-panel, transparent) 70%,
+        transparent
+      );
+      font-size: 0.75rem;
+      line-height: 1.25rem;
+    }
+
+    :where(.om-pi-tool-details) {
+      overflow: visible;
+      padding-block: calc(var(--om-spacing, 0.75rem) * 0.6667);
+      padding-inline: var(--om-spacing, 0.75rem);
+      border-radius: var(--om-radius, 0.5rem);
+      background: color-mix(
+        in srgb,
+        var(--om-color-panel, transparent) 50%,
+        transparent
+      );
+    }
+
+    :where(
+      details.om-pi-tool-details > summary,
+      details.om-pi-tool-section > summary,
+      .om-pi-tool-summary,
+      details.om-pi-thinking > summary
+    ) {
+      font-size: 0.75rem;
+      font-weight: 500;
+    }
+
+    :where(
+      details.om-pi-tool-details > summary,
+      details.om-pi-tool-section > summary,
+      details.om-pi-thinking > summary
+    ) {
+      cursor: pointer;
+    }
+
+    :where(details.om-pi-tool-section > summary) {
+      display: flex;
+      align-items: center;
+      gap: calc(var(--om-spacing, 0.75rem) * 0.25);
+      list-style: none;
+    }
+
+    details.om-pi-tool-section > summary::-webkit-details-marker {
+      display: none;
+    }
+
+    :where(details.om-pi-tool-section > summary > svg) {
+      inline-size: 0.875rem;
+      block-size: 0.875rem;
+      flex: none;
+      color: var(--om-color-muted, currentColor);
+      transition: transform 120ms ease;
+    }
+
+    :where(details.om-pi-tool-section[open] > summary > svg) {
+      transform: rotate(90deg);
+    }
+
+    :where(.om-pi-tool-status) {
+      display: inline-block;
+      inline-size: 1rem;
+      margin-inline-end: calc(var(--om-spacing, 0.75rem) * 0.5);
+      color: var(--om-color-muted, currentColor);
+    }
+
+    :where(.om-pi-tool-status-label) {
+      inline-size: auto;
+    }
+
+    :where([data-om-tool-status="pending"] .om-pi-tool-status) {
+      color: var(--om-color-accent, currentColor);
+    }
+
+    :where([data-om-tool-status="error"] .om-pi-tool-status) {
+      color: var(--om-color-danger, currentColor);
+    }
+
+    :where(.om-pi-thinking) {
+      margin-block: calc(var(--om-spacing, 0.75rem) * 0.6667);
+      padding-inline-start: var(--om-spacing, 0.75rem);
+      border-inline-start: 2px solid var(--om-color-border, currentColor);
+    }
+
+    :where(.om-pi-thinking > .om-pi-content-block) {
+      margin-block-start: calc(var(--om-spacing, 0.75rem) * 0.6667);
+    }
+
+    :where(details.om-pi-tool-details > .om-pi-content-block) {
+      margin-block-start: calc(var(--om-spacing, 0.75rem) * 0.6667);
+      font-size: 0.875rem;
+    }
+
+    :where(.om-pi-tool-body) {
+      margin-block-start: calc(var(--om-spacing, 0.75rem) * 0.6667);
+    }
+
+    :where(.om-pi-tool-kind) {
+      margin-block-end: calc(var(--om-spacing, 0.75rem) * 0.5);
+      font-size: 0.75rem;
+      font-weight: 500;
+    }
+
+    :where(.om-pi-tool-kind > .om-pi-tool-status) {
+      margin-inline-end: 0;
+    }
+
+    :where(.om-pi-tool-path) {
+      font-family: var(--om-font-mono, monospace);
+    }
+
+    :where(.om-pi-tool-command) {
+      margin-block: 0 calc(var(--om-spacing, 0.75rem) * 0.6667);
+      overflow-wrap: anywhere;
+      padding: calc(var(--om-spacing, 0.75rem) * 0.6667);
+      border-radius: var(--om-radius, 0.5rem);
+      background: color-mix(
+        in srgb,
+        var(--om-color-canvas, transparent) 60%,
+        transparent
+      );
+      font-family: var(--om-font-mono, monospace);
+      font-size: 0.75rem;
+      white-space: pre-wrap;
+    }
+
+    :where(details.om-pi-tool-details > section) {
+      margin-block-start: calc(var(--om-spacing, 0.75rem) * 0.6667);
+    }
+
+    :where(details.om-pi-tool-details > section > .om-pi-tool-error) {
+      margin-block: 0 calc(var(--om-spacing, 0.75rem) * 0.6667);
+      font-size: 0.75rem;
+      font-weight: 500;
+    }
+
+    :where(
+      pre.om-pi-tool-details,
+      pre.om-pi-tool-diff,
+      pre.om-pi-tool-input,
+      pre.om-pi-tool-output,
+      pre.om-pi-tool-error,
+      .om-pi-tool-diff > pre
+    ) {
+      margin-block: calc(var(--om-spacing, 0.75rem) * 0.6667) 0;
+      overflow-x: auto;
+      overflow-wrap: anywhere;
+      padding: calc(var(--om-spacing, 0.75rem) * 0.6667);
+      border-radius: var(--om-radius, 0.5rem);
+      background: color-mix(
+        in srgb,
+        var(--om-color-canvas, transparent) 60%,
+        transparent
+      );
+      font-family: var(--om-font-mono, monospace);
+      font-size: 0.75rem;
+      white-space: pre-wrap;
+    }
+
+    :where(.om-pi-tool-field) {
+      margin-block: calc(var(--om-spacing, 0.75rem) * 0.6667) 0;
+      font-size: 0.75rem;
+    }
+
+    :where(.om-pi-conversation-error, .om-pi-tool-error) {
+      color: var(--om-color-danger, currentColor);
+    }
+
+    :where(.om-pi-muted) {
+      color: var(--om-color-muted, currentColor);
+    }
+
+    :where(.om-pi-conversation-entry > .om-pi-conversation-error) {
+      margin-block: var(--om-spacing, 0.75rem) 0;
+      font-size: 0.875rem;
+    }
+
+    :where([data-om-pi-conversation] > .om-pi-conversation-error) {
+      flex: none;
+      margin: 0;
+      padding-block: calc(var(--om-spacing, 0.75rem) * 0.6667);
+      padding-inline: var(--om-spacing, 0.75rem);
+      background: color-mix(
+        in srgb,
+        var(--om-color-danger, currentColor) 16%,
+        transparent
+      );
+      font-size: 0.875rem;
+    }
+
+    :where(.om-pi-conversation-content > p.om-pi-muted) {
+      margin: 0;
+      padding-block: calc(var(--om-spacing, 0.75rem) * 4);
+      text-align: center;
+    }
+
+    :where(.om-pi-conversation-jump) {
+      position: absolute;
+      inset-block-end: 8rem;
+      inset-inline-start: 50%;
+      min-block-size: 2.25rem;
+      transform: translateX(-50%);
+      padding-block: calc(var(--om-spacing, 0.75rem) * 0.6667);
+      padding-inline: var(--om-spacing, 0.75rem);
+      border: 1px solid var(--om-color-border, currentColor);
+      border-radius: 999px;
+      color: inherit;
+      background: var(--om-color-panel, transparent);
+      box-shadow: var(--om-elevation, 0 0.5rem 1rem rgb(0 0 0 / 20%));
+      font: inherit;
+      font-size: 0.875rem;
+    }
+
+    :where(:scope[data-om-pi-composer]) {
+      flex: none;
+      padding: var(--om-spacing, 0.75rem);
+      border-block-start: 1px solid var(--om-color-border, currentColor);
+      background: var(--om-color-surface, transparent);
+    }
+
+    :where(.om-pi-composer-box) {
+      position: relative;
+      display: grid;
+      max-inline-size: 64rem;
+      margin-inline: auto;
+      padding-inline: var(--om-spacing, 0.75rem);
+      border: 1px solid var(--om-color-border, currentColor);
+      border-radius: calc(var(--om-radius, 0.5rem) * 1.5);
+      background: var(--om-color-panel, transparent);
+      box-shadow: var(--om-elevation, 0 1px 2px rgb(0 0 0 / 12%));
+    }
+
+    :where(.om-pi-composer-box:focus-within) {
+      border-color: var(--om-color-accent, Highlight);
+    }
+
+    :where(.om-pi-composer-textarea) {
+      display: block;
+      box-sizing: border-box;
+      inline-size: 100%;
+      min-block-size: 2.75rem;
+      max-block-size: 12rem;
+      resize: none;
+      padding-block: calc((2.75rem - 1.25rem) / 2);
+      border: 0;
+      outline: none;
+      color: var(--om-color-fg, inherit);
+      background: transparent;
+      font: inherit;
+      line-height: 1.25rem;
+    }
+
+    :where(.om-pi-composer-textarea-with-stop) {
+      padding-inline-end: 2.75rem;
+    }
+
+    :where(.om-pi-composer-textarea::placeholder) {
+      color: var(--om-color-muted, currentColor);
+      opacity: 1;
+    }
+
+    :where(.om-pi-composer-actions) {
+      display: flex;
+      min-block-size: 2.75rem;
+      align-items: center;
+      justify-content: flex-end;
+      gap: calc(var(--om-spacing, 0.75rem) * 0.6667);
+      border-block-start: 1px solid var(--om-color-border, currentColor);
+    }
+
+    :where(
+      .om-pi-composer-textarea:placeholder-shown:not(:focus)
+        ~ .om-pi-composer-actions
+    ) {
+      display: none;
+    }
+
+    :where(
+      .om-pi-composer-send,
+      .om-pi-composer-follow-up,
+      .om-pi-composer-stop
+    ) {
+      min-block-size: 2.25rem;
+      padding-inline: var(--om-spacing, 0.75rem);
+      border: 0;
+      border-radius: var(--om-radius, 0.5rem);
+      color: inherit;
+      background: transparent;
+      font: inherit;
+      font-size: 0.875rem;
+    }
+
+    :where(.om-pi-composer-send) {
+      display: inline-flex;
+      align-items: center;
+      gap: calc(var(--om-spacing, 0.75rem) * 0.5);
+      color: var(
+        --om-color-accent-fg,
+        var(--_om-color-accent-fg, HighlightText)
+      );
+      background: var(--om-color-accent, Highlight);
+      font-weight: 600;
+    }
+
+    :where(.om-pi-composer-send > svg) {
+      inline-size: 1rem;
+      block-size: 1rem;
+      flex: none;
+    }
+
+    :where(.om-pi-composer-follow-up) {
+      padding-inline: calc(var(--om-spacing, 0.75rem) * 0.6667);
+      color: var(--om-color-muted, currentColor);
+    }
+
+    :where(.om-pi-composer-stop) {
+      display: inline-grid;
+      inline-size: 1.875rem;
+      min-block-size: 1.875rem;
+      block-size: 1.875rem;
+      place-items: center;
+      padding: 0;
+      border-radius: 999px;
+      color: var(
+        --om-color-accent-fg,
+        var(--_om-color-accent-fg, HighlightText)
+      );
+      background: var(--om-color-accent, Highlight);
+    }
+
+    :where(.om-pi-composer-stop > svg) {
+      inline-size: 0.8125rem;
+      block-size: 0.8125rem;
+      fill: currentColor;
+      opacity: 0.6;
+    }
+
+    :where(.om-pi-composer-stop-inline) {
+      position: absolute;
+      inset-block-start: 0.4375rem;
+      inset-inline-end: 0.5rem;
+    }
+
+    :where(.om-pi-composer-follow-up:hover:not(:disabled)) {
+      background: var(--om-color-panel, transparent);
+    }
+
+    :where(.om-pi-composer-stop:hover:not(:disabled)) {
+      filter: brightness(1.1);
+    }
+
+    :where(.om-pi-composer-actions > .om-pi-muted) {
+      display: none;
+      font-size: 0.75rem;
+    }
+
+    :where(
+      .om-pi-composer-send:disabled,
+      .om-pi-composer-follow-up:disabled,
+      .om-pi-composer-stop:disabled,
+      .om-pi-composer-textarea:disabled
+    ) {
+      cursor: not-allowed;
+      opacity: 0.5;
+    }
+
+    :where(
+      .om-pi-conversation-jump,
+      .om-pi-composer-send,
+      .om-pi-composer-follow-up,
+      .om-pi-composer-stop
+    ):focus-visible {
+      outline: 2px solid var(--om-color-accent, Highlight);
+      outline-offset: 2px;
+      box-shadow: var(--om-focus-ring, none);
+    }
+
+    :where([data-om-pi-composer] > .om-pi-conversation-error) {
+      margin-block: calc(var(--om-spacing, 0.75rem) * 0.6667) 0;
+      font-size: 0.875rem;
+    }
+
+    :where(.om-pi-visually-hidden) {
+      position: absolute;
+      inline-size: 1px;
+      block-size: 1px;
+      overflow: hidden;
+      clip-path: inset(50%);
+      white-space: nowrap;
+    }
+
+    @media (width >= 40rem) {
+      :where(.om-pi-conversation-scroller) {
+        padding: calc(var(--om-spacing, 0.75rem) * 1.6667);
+      }
+
+      :where(:scope[data-om-pi-composer]) {
+        padding: calc(var(--om-spacing, 0.75rem) * 1.3333);
+      }
+
+      :where(.om-pi-composer-actions > .om-pi-muted) {
+        display: inline;
+      }
+    }
+  }
+
+  @media (forced-colors: active) {
+    @scope ([data-om-pi-conversation], [data-om-pi-composer]) {
+      :where(:scope) {
+        forced-color-adjust: auto;
+      }
+    }
+  }
+}