@fungi.computer/parakeet 0.4.0 → 0.6.0

package/src/styles.css

@@ -4,6 +4,8 @@
  * and chat composition: consumers load it instead of an additional Caps sheet.
  */
 @import "@fungi.computer/caps/tailwind.css";
+@import "./completion-menu.css";
+@import "./composer-shell.css";
 
 /* In the workspace Tailwind scans the component source; published, this
  * entry ships without it, and the compiled components in dist carry the same
@@ -13,12 +15,6 @@
 
 @plugin "@tailwindcss/typography";
 
-@layer components {
-  .chat-composer {
-    border-top: 1px solid var(--color-base-300);
-  }
-}
-
 :root {
   --prose-max-width: 80ch;
   --tool-error-rail: #fff7a0;
@@ -43,66 +39,107 @@
   overflow-wrap: break-word;
 }
 
+/* Conversation placement around the shared ComposerShell. */
 .chat-composer {
-  background: var(--color-base-100);
   flex-shrink: 0;
+  padding: 0 var(--spacing-xs) var(--spacing-xs);
 }
 
-.chat-composer .composer-body {
+.chat-composer .composer-attachments {
   display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0.5rem;
+  flex-wrap: wrap;
+  gap: var(--spacing-sm);
+  margin: 0;
+  padding: var(--spacing-xs) var(--spacing-sm);
+  list-style: none;
 }
 
-.chat-composer .composer-footer {
-  display: flex;
-  height: 32px;
-  align-items: center;
-  gap: 0.5rem;
-  padding: 0 0.75rem;
-  background: var(--color-base-200);
-  color: var(--color-base-content);
-  font-family: var(--font-sans);
-  font-size: 0.65rem;
+.chat-composer .composer-attachments li {
+  position: relative;
 }
 
-.chat-composer .parakeet-slash-label {
-  min-width: 7rem;
-  font-family: var(--font-mono);
-  font-weight: 600;
+.chat-composer .composer-attachments img {
+  display: block;
+  width: 3.5rem;
+  height: 3.5rem;
+  object-fit: cover;
 }
 
-.chat-composer .parakeet-slash-match {
-  background: none;
-  color: var(--color-primary);
+/* Remove shows on hover or focus, the way a Prints reference tile does. */
+.chat-composer .composer-attachment-remove {
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline-end: 0;
+  opacity: 0;
+}
+.chat-composer .composer-attachments li:hover .composer-attachment-remove,
+.chat-composer
+  .composer-attachments
+  li:focus-within
+  .composer-attachment-remove {
+  opacity: 1;
+}
+@media (hover: none) {
+  .chat-composer .composer-attachment-remove {
+    opacity: 1;
+  }
 }
 
-.chat-composer .parakeet-slash-detail {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.chat-composer .composer-status-chip {
   color: var(--stipe-fg-muted);
+  font-size: var(--text-xs);
 }
 
-.chat-composer .parakeet-slash-keys {
-  font-family: var(--font-mono);
-  font-size: 0.65rem;
-  color: var(--stipe-fg-muted);
+.chat-composer .composer-settings-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-xs);
 }
 
-.chat-composer .parakeet-slash-hint {
-  margin: 0;
-  padding: 0.25rem 0.5rem;
-  font-family: var(--font-mono);
-  font-size: 0.75rem;
-  color: var(--stipe-fg-muted);
+.chat-composer .composer-settings-chip > svg {
+  width: var(--stipe-icon-size-sm);
+  height: var(--stipe-icon-size-sm);
+}
+
+/* Quiet Session readouts yield on a phone; the shared shell owns key sizing. */
+@container (max-width: 42rem) {
+  .chat-composer .composer-status-chip {
+    display: none;
+  }
+}
+
+/* A decision that took the composer over sits on the same surface: its
+   choices are rows on the composer, not a floating list box inside it. */
+.chat-composer .parakeet-decision {
+  padding: var(--spacing-xs) var(--spacing-sm) 0;
+}
+/* The options are the composer's own rows, not a box inside it. Rows and
+ * the Details trigger keep a small hover inset and pull out by it, so their
+ * text shares the title's left edge. */
+.chat-composer .parakeet-decision-list {
+  width: auto;
+  margin-inline: calc(-1 * var(--spacing-xs));
+  border: 0;
+  background: transparent;
+  box-shadow: none;
+  padding: 0;
+}
+.chat-composer .parakeet-decision .caps-disclosure-trigger {
+  width: auto;
+  margin-inline: calc(-1 * var(--spacing-xs));
+  padding-inline: var(--spacing-xs);
+}
+/* A decision's highlight is the reducer's, not the list's own active row. */
+.parakeet-decision .parakeet-decision-list [role="option"] {
+  padding-inline: var(--spacing-xs);
+  background: transparent;
 }
 
-.chat-composer [data-disabled="true"] {
-  opacity: 0.5;
+.parakeet-decision > [data-highlight],
+.parakeet-decision
+  .parakeet-decision-list
+  [role="option"]:has([data-highlight]) {
+  background: var(--color-base-200);
 }
 
 .chat-composer .parakeet-command-notice[data-tone="error"] {
@@ -113,13 +150,6 @@
   color: var(--color-success);
 }
 
-.chat-composer .footer-divider {
-  width: 3px;
-  height: 3px;
-  border-radius: 50%;
-  background: var(--stipe-fg-muted);
-}
-
 /* TanStack Highlight's retained Catppuccin theme. The token selectors are
    emitted here with Parakeet's browser CSS instead of injected by a host. */
 html:not([data-theme]),
@@ -261,3 +291,19 @@ pre.th-code {
 .th-code {
   font-family: var(--font-mono);
 }
+
+/* The decision's Later and Send sit on the composer's bottom edge, Send as the
+   same keycap the composer sends with. */
+.parakeet-decision-actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-xs);
+  --caps-keycap-width: auto;
+  --caps-keycap-justify: center;
+  --caps-keycap-padding: 0 var(--spacing-md);
+  --caps-keycap-height: calc(var(--size-field) * 8);
+}
+.parakeet-decision-actions > .caps-keycap-button {
+  height: var(--caps-keycap-height);
+}

package/dist/components/WaitingNotice.d.ts

@@ -1,7 +0,0 @@
-import { type SessionViewState } from "../core/session-view-state.js";
-/** A queued Session reports the executor fact; stopping a turn leaves its queue intact. */
-export declare function WaitingNotice({ waiting, }: Readonly<{
-    waiting: Extract<SessionViewState, {
-        kind: "queued";
-    }> | null;
-}>): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/WaitingNotice.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { queuedSessionLabel, } from "../core/session-view-state.js";
-/** A queued Session reports the executor fact; stopping a turn leaves its queue intact. */
-export function WaitingNotice({ waiting, }) {
-    if (waiting === null)
-        return null;
-    return (_jsx("div", { role: "status", className: "flex items-center justify-between gap-2 px-3 py-1.5 text-xs text-dim", "data-parakeet-waiting": "waiting", children: _jsx("span", { children: queuedSessionLabel(waiting) }) }));
-}