@yieldfabric/terminal 1.1.0 → 1.1.1

package/dist/index.cjs

@@ -201,7 +201,7 @@ var handleSSEStream = async (url, body, onChunk, onComplete, onError, options) =
       ...method !== "GET" && method !== "HEAD" ? { "Content-Type": "application/json" } : {},
       ...options?.headers
     };
-    const response = await fetch(url, {
+    const response = await (options?.fetcher ?? fetch)(url, {
       method,
       headers: requestHeaders,
       body: method === "GET" || method === "HEAD" ? void 0 : JSON.stringify(body),
@@ -3296,7 +3296,7 @@ function KGScopeDropdown({ items, onSelect, compact = false }) {
 }
 function ReasoningModeSelector({ current, onChange, compact = false }) {
   const t = useTheme();
-  const isLight = t.bgRaised === "#ffffff";
+  const isLight = t.mode ? t.mode === "light" : t.bgRaised === "#ffffff";
   const isReason = current === "reason";
   const label = isReason ? "Reason" : "Auto";
   const title = isReason ? "Force deep reasoning \u2014 click to let the AI decide" : "AI decides \u2014 click to force deep reasoning";
@@ -3401,7 +3401,8 @@ function TerminalInputBar({
   }, []);
   const [focused, setFocused] = React15__default.default.useState(false);
   const chipsVisible = focused || currentCommand.trim().length > 0;
-  const isLight = t.bgRaised === "#ffffff";
+  const isTouch = typeof window !== "undefined" && "ontouchstart" in window;
+  const isLight = t.mode ? t.mode === "light" : t.bgRaised === "#ffffff";
   const hasCommand = Boolean(currentCommand.trim());
   const placeholderColor = isLight ? t.textMuted : "rgba(255,255,255,0.52)";
   const panelBorder = isLight ? t.border : "rgba(255,255,255,0.10)";
@@ -3441,7 +3442,7 @@ function TerminalInputBar({
     fitToContent(input);
   }, [currentCommand, inputRef]);
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx("style", { children: `.yf-input-bar::placeholder { color: ${placeholderColor}; }` }),
+    /* @__PURE__ */ jsxRuntime.jsx("style", { children: `.yf-input-bar::placeholder { color: ${placeholderColor}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }` }),
     commandPaletteItems.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
       "div",
       {
@@ -3487,10 +3488,17 @@ function TerminalInputBar({
             className: `rounded-xl border px-3 transition-[box-shadow,border-color] sm:px-4 ${focused ? "yf-input-focused" : ""}`,
             style: {
               backgroundColor: panelBg,
-              backdropFilter: "blur(18px)",
+              // No backdrop blur on a touch screen. It is the one compositing
+              // layer between the textarea and the page, and on iPhone the
+              // caret was drawn a line below and a character right of where
+              // typing lands — the caret rect resolved against the wrong
+              // layer — while WebKit's own layout (checked in WebKit 26) puts
+              // it on the line. The box keeps its colour; only the frosted
+              // fabric behind it goes, which at this size is barely a change.
+              backdropFilter: isTouch ? void 0 : "blur(18px)",
               borderColor: focused ? t.primary : panelBorder,
               boxShadow: focused ? `0 0 0 3px ${t.primaryMuted || "rgba(5,78,146,0.18)"}` : isLight ? "0 18px 70px -38px rgba(30,30,58,0.45)" : "0 18px 70px -38px rgba(0,0,0,0.95)",
-              WebkitBackdropFilter: "blur(18px)"
+              WebkitBackdropFilter: isTouch ? void 0 : "blur(18px)"
             },
             children: [
               /* @__PURE__ */ jsxRuntime.jsx(
@@ -3594,7 +3602,22 @@ function TerminalInputBar({
                           placeholder: isExecuting ? "Processing..." : placeholder,
                           rows: 1,
                           className: "yf-input-bar flex-1 min-w-[100px] bg-transparent focus:outline-none text-[16px] leading-6 resize-none overflow-hidden sm:text-sm sm:leading-5",
-                          onFocus: () => setFocused(true),
+                          onFocus: () => {
+                            setFocused(true);
+                            if (!("ontouchstart" in window)) return;
+                            window.setTimeout(() => {
+                              const ta = inputRef.current;
+                              if (!ta || document.activeElement !== ta) return;
+                              let scroller = ta.parentElement;
+                              while (scroller && !/(auto|scroll)/.test(getComputedStyle(scroller).overflowY)) scroller = scroller.parentElement;
+                              window.scrollBy(0, 1);
+                              if (scroller) scroller.scrollTop += 1;
+                              window.requestAnimationFrame(() => {
+                                window.scrollBy(0, -1);
+                                if (scroller) scroller.scrollTop -= 1;
+                              });
+                            }, 400);
+                          },
                           onBlur: () => setFocused(false),
                           style: { color: t.text, caretColor: t.cursor },
                           spellCheck: false,
@@ -3610,12 +3633,19 @@ function TerminalInputBar({
                         disabled: !hasCommand || isExecuting || disabled,
                         className: "h-10 w-10 rounded-xl disabled:opacity-60 disabled:cursor-not-allowed flex items-center justify-center transition-all duration-200 shrink-0 sm:h-8 sm:w-8",
                         style: {
-                          backgroundColor: hasCommand ? t.primary : isLight ? t.bgRaisedAlt : "rgba(255,255,255,0.08)",
+                          backgroundColor: isLight ? t.primary : hasCommand ? t.primary : "rgba(255,255,255,0.08)",
                           // `textInverse` is the theme's "text on a filled button".
                           // `bgBase` was used here before and is `transparent` in
                           // every app theme — so the chevron vanished the moment
                           // there was something to send.
-                          color: hasCommand ? t.textInverse : isLight ? t.textMuted : "rgba(255,255,255,0.72)"
+                          // In LIGHT mode this is always a solid accent fill with white
+                          // on it (6.1:1). It is the app's primary verb and the single
+                          // most-pressed control; a pale disc — grey, or a 10% tint —
+                          // read as disabled even when it was not. The empty state is
+                          // already expressed by `disabled:opacity-60`, so the fill does
+                          // not also have to whisper. Dark keeps its white-alpha rest,
+                          // where a solid orange disc would shout on near-black.
+                          color: isLight ? t.textInverse : hasCommand ? t.textInverse : "rgba(255,255,255,0.72)"
                         },
                         onMouseEnter: (e) => {
                           if (hasCommand) {
@@ -3626,7 +3656,7 @@ function TerminalInputBar({
                         },
                         onMouseLeave: (e) => {
                           e.currentTarget.style.filter = "";
-                          e.currentTarget.style.backgroundColor = hasCommand ? t.primary : isLight ? t.bgRaisedAlt : "rgba(255,255,255,0.08)";
+                          e.currentTarget.style.backgroundColor = isLight ? t.primary : hasCommand ? t.primary : "rgba(255,255,255,0.08)";
                         },
                         title: submitTitle,
                         "aria-label": submitTitle,
@@ -3750,7 +3780,7 @@ var KIND_DOT = {
 };
 function SlashMentionPicker({ candidates, selectedIndex, onPick }) {
   const t = useTheme();
-  const isLight = t.bgRaised === "#ffffff";
+  const isLight = t.mode ? t.mode === "light" : t.bgRaised === "#ffffff";
   if (candidates.length === 0) return null;
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "div",

package/dist/index.d.cts

@@ -21,6 +21,16 @@ import { NodeProps, EdgeProps, Node, Edge } from '@xyflow/react';
 type ReasoningMode = 'reason';
 
 interface TerminalTheme {
+    /** Which side of the light/dark divide this theme is.
+     *
+     *  Components that need to branch (a placeholder tint, a panel border, a
+     *  toolbar fill) used to sniff it with `t.bgRaised === '#ffffff'`. That is an
+     *  exact-string test against one literal, so it silently reported DARK for
+     *  any light theme whose surfaces are CSS variables, or simply an off-white
+     *  — which is what happens the moment a host themes its surfaces properly.
+     *  Declare it instead. Optional, and the old sniff remains the fallback, so
+     *  a theme that predates this keeps its current behaviour. */
+    mode?: 'light' | 'dark';
     primary: string;
     primaryMuted: string;
     primaryHover: string;
@@ -1354,6 +1364,9 @@ declare const handleSSEStream: (url: string, body: any, onChunk: (chunk: any) =>
     method?: string;
     headers?: Record<string, string>;
     signal?: AbortSignal;
+    /** Host authentication/renewal transport. It must preserve the supplied
+     * abort signal and must not retry a request after its stream has begun. */
+    fetcher?: (url: string, init: RequestInit) => Promise<Response>;
     onGone?: (reason: string) => void;
     /** Require an explicit answer terminal event. Defaults to true.
      * Set false only for non-answer protocols that intentionally end at EOF.

package/dist/index.d.ts

@@ -21,6 +21,16 @@ import { NodeProps, EdgeProps, Node, Edge } from '@xyflow/react';
 type ReasoningMode = 'reason';
 
 interface TerminalTheme {
+    /** Which side of the light/dark divide this theme is.
+     *
+     *  Components that need to branch (a placeholder tint, a panel border, a
+     *  toolbar fill) used to sniff it with `t.bgRaised === '#ffffff'`. That is an
+     *  exact-string test against one literal, so it silently reported DARK for
+     *  any light theme whose surfaces are CSS variables, or simply an off-white
+     *  — which is what happens the moment a host themes its surfaces properly.
+     *  Declare it instead. Optional, and the old sniff remains the fallback, so
+     *  a theme that predates this keeps its current behaviour. */
+    mode?: 'light' | 'dark';
     primary: string;
     primaryMuted: string;
     primaryHover: string;
@@ -1354,6 +1364,9 @@ declare const handleSSEStream: (url: string, body: any, onChunk: (chunk: any) =>
     method?: string;
     headers?: Record<string, string>;
     signal?: AbortSignal;
+    /** Host authentication/renewal transport. It must preserve the supplied
+     * abort signal and must not retry a request after its stream has begun. */
+    fetcher?: (url: string, init: RequestInit) => Promise<Response>;
     onGone?: (reason: string) => void;
     /** Require an explicit answer terminal event. Defaults to true.
      * Set false only for non-answer protocols that intentionally end at EOF.

package/dist/index.js

@@ -192,7 +192,7 @@ var handleSSEStream = async (url, body, onChunk, onComplete, onError, options) =
       ...method !== "GET" && method !== "HEAD" ? { "Content-Type": "application/json" } : {},
       ...options?.headers
     };
-    const response = await fetch(url, {
+    const response = await (options?.fetcher ?? fetch)(url, {
       method,
       headers: requestHeaders,
       body: method === "GET" || method === "HEAD" ? void 0 : JSON.stringify(body),
@@ -3287,7 +3287,7 @@ function KGScopeDropdown({ items, onSelect, compact = false }) {
 }
 function ReasoningModeSelector({ current, onChange, compact = false }) {
   const t = useTheme();
-  const isLight = t.bgRaised === "#ffffff";
+  const isLight = t.mode ? t.mode === "light" : t.bgRaised === "#ffffff";
   const isReason = current === "reason";
   const label = isReason ? "Reason" : "Auto";
   const title = isReason ? "Force deep reasoning \u2014 click to let the AI decide" : "AI decides \u2014 click to force deep reasoning";
@@ -3392,7 +3392,8 @@ function TerminalInputBar({
   }, []);
   const [focused, setFocused] = React15.useState(false);
   const chipsVisible = focused || currentCommand.trim().length > 0;
-  const isLight = t.bgRaised === "#ffffff";
+  const isTouch = typeof window !== "undefined" && "ontouchstart" in window;
+  const isLight = t.mode ? t.mode === "light" : t.bgRaised === "#ffffff";
   const hasCommand = Boolean(currentCommand.trim());
   const placeholderColor = isLight ? t.textMuted : "rgba(255,255,255,0.52)";
   const panelBorder = isLight ? t.border : "rgba(255,255,255,0.10)";
@@ -3432,7 +3433,7 @@ function TerminalInputBar({
     fitToContent(input);
   }, [currentCommand, inputRef]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx("style", { children: `.yf-input-bar::placeholder { color: ${placeholderColor}; }` }),
+    /* @__PURE__ */ jsx("style", { children: `.yf-input-bar::placeholder { color: ${placeholderColor}; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }` }),
     commandPaletteItems.length > 0 && /* @__PURE__ */ jsxs(
       "div",
       {
@@ -3478,10 +3479,17 @@ function TerminalInputBar({
             className: `rounded-xl border px-3 transition-[box-shadow,border-color] sm:px-4 ${focused ? "yf-input-focused" : ""}`,
             style: {
               backgroundColor: panelBg,
-              backdropFilter: "blur(18px)",
+              // No backdrop blur on a touch screen. It is the one compositing
+              // layer between the textarea and the page, and on iPhone the
+              // caret was drawn a line below and a character right of where
+              // typing lands — the caret rect resolved against the wrong
+              // layer — while WebKit's own layout (checked in WebKit 26) puts
+              // it on the line. The box keeps its colour; only the frosted
+              // fabric behind it goes, which at this size is barely a change.
+              backdropFilter: isTouch ? void 0 : "blur(18px)",
               borderColor: focused ? t.primary : panelBorder,
               boxShadow: focused ? `0 0 0 3px ${t.primaryMuted || "rgba(5,78,146,0.18)"}` : isLight ? "0 18px 70px -38px rgba(30,30,58,0.45)" : "0 18px 70px -38px rgba(0,0,0,0.95)",
-              WebkitBackdropFilter: "blur(18px)"
+              WebkitBackdropFilter: isTouch ? void 0 : "blur(18px)"
             },
             children: [
               /* @__PURE__ */ jsx(
@@ -3585,7 +3593,22 @@ function TerminalInputBar({
                           placeholder: isExecuting ? "Processing..." : placeholder,
                           rows: 1,
                           className: "yf-input-bar flex-1 min-w-[100px] bg-transparent focus:outline-none text-[16px] leading-6 resize-none overflow-hidden sm:text-sm sm:leading-5",
-                          onFocus: () => setFocused(true),
+                          onFocus: () => {
+                            setFocused(true);
+                            if (!("ontouchstart" in window)) return;
+                            window.setTimeout(() => {
+                              const ta = inputRef.current;
+                              if (!ta || document.activeElement !== ta) return;
+                              let scroller = ta.parentElement;
+                              while (scroller && !/(auto|scroll)/.test(getComputedStyle(scroller).overflowY)) scroller = scroller.parentElement;
+                              window.scrollBy(0, 1);
+                              if (scroller) scroller.scrollTop += 1;
+                              window.requestAnimationFrame(() => {
+                                window.scrollBy(0, -1);
+                                if (scroller) scroller.scrollTop -= 1;
+                              });
+                            }, 400);
+                          },
                           onBlur: () => setFocused(false),
                           style: { color: t.text, caretColor: t.cursor },
                           spellCheck: false,
@@ -3601,12 +3624,19 @@ function TerminalInputBar({
                         disabled: !hasCommand || isExecuting || disabled,
                         className: "h-10 w-10 rounded-xl disabled:opacity-60 disabled:cursor-not-allowed flex items-center justify-center transition-all duration-200 shrink-0 sm:h-8 sm:w-8",
                         style: {
-                          backgroundColor: hasCommand ? t.primary : isLight ? t.bgRaisedAlt : "rgba(255,255,255,0.08)",
+                          backgroundColor: isLight ? t.primary : hasCommand ? t.primary : "rgba(255,255,255,0.08)",
                           // `textInverse` is the theme's "text on a filled button".
                           // `bgBase` was used here before and is `transparent` in
                           // every app theme — so the chevron vanished the moment
                           // there was something to send.
-                          color: hasCommand ? t.textInverse : isLight ? t.textMuted : "rgba(255,255,255,0.72)"
+                          // In LIGHT mode this is always a solid accent fill with white
+                          // on it (6.1:1). It is the app's primary verb and the single
+                          // most-pressed control; a pale disc — grey, or a 10% tint —
+                          // read as disabled even when it was not. The empty state is
+                          // already expressed by `disabled:opacity-60`, so the fill does
+                          // not also have to whisper. Dark keeps its white-alpha rest,
+                          // where a solid orange disc would shout on near-black.
+                          color: isLight ? t.textInverse : hasCommand ? t.textInverse : "rgba(255,255,255,0.72)"
                         },
                         onMouseEnter: (e) => {
                           if (hasCommand) {
@@ -3617,7 +3647,7 @@ function TerminalInputBar({
                         },
                         onMouseLeave: (e) => {
                           e.currentTarget.style.filter = "";
-                          e.currentTarget.style.backgroundColor = hasCommand ? t.primary : isLight ? t.bgRaisedAlt : "rgba(255,255,255,0.08)";
+                          e.currentTarget.style.backgroundColor = isLight ? t.primary : hasCommand ? t.primary : "rgba(255,255,255,0.08)";
                         },
                         title: submitTitle,
                         "aria-label": submitTitle,
@@ -3741,7 +3771,7 @@ var KIND_DOT = {
 };
 function SlashMentionPicker({ candidates, selectedIndex, onPick }) {
   const t = useTheme();
-  const isLight = t.bgRaised === "#ffffff";
+  const isLight = t.mode ? t.mode === "light" : t.bgRaised === "#ffffff";
   if (candidates.length === 0) return null;
   return /* @__PURE__ */ jsxs(
     "div",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yieldfabric/terminal",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "Reusable AI-powered terminal + knowledge-graph component for YieldFabric",
   "license": "SEE LICENSE IN LICENSE.md",
   "type": "module",