@uplifted/react 0.24.0 → 0.25.0

package/dist/styles.js

@@ -50,7 +50,7 @@ export const upliftStyles = `
 .u-iconbtn .u-ai-spark svg{width:14px;height:14px}
 .u-iconbtn svg{width:16px;height:16px}
 .u-iconbtn[aria-pressed="true"]{color:var(--u-text);background:var(--u-surface-2)}
-.u-bulkbtn svg{width:14px;height:14px}
+.u-bulkbtn svg{width:16px;height:16px}
 .uplift.u-full{position:fixed;inset:0;z-index:2147483000;border-radius:0;border:0;display:flex;flex-direction:column}
 .uplift.u-full .u-split{flex:1;height:auto;min-height:0}
 .u-back{display:none;border:1px solid var(--u-border);background:var(--u-bg);border-radius:8px;padding:6px 10px;font-size:16px;min-height:36px;align-items:center;flex:none}
@@ -69,8 +69,9 @@ export const upliftStyles = `
 .u-sortgroup button{border:0;background:none;border-radius:999px;padding:4px 9px;font-size:12px;font-weight:600;color:var(--u-muted);min-height:28px;white-space:nowrap}
 .u-sortgroup button:hover{color:var(--u-text)}
 .u-sortgroup button[aria-pressed="true"]{background:var(--u-bg);color:var(--u-text);box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 1px var(--u-border)}
-.u-rows li.u-bulkrow{border-bottom:0;padding:10px 12px}
-.u-bulkrow .u-bulkbtn{display:inline-flex;align-items:center;justify-content:center;gap:2px;width:100%;border:1px dashed var(--u-border);border-radius:10px;background:none;color:var(--u-muted);padding:8px 10px;min-height:36px;font:inherit;font-size:13px;cursor:pointer}
+/* Bulk generate is a frozen row: it stays at the bottom of the list while the clients scroll above it. */
+.u-rows li.u-bulkrow{position:sticky;bottom:0;z-index:1;margin-top:auto;border-bottom:0;border-top:1px solid var(--u-border);background:var(--u-bg);padding:10px 12px}
+.u-bulkrow .u-bulkbtn{display:inline-flex;align-items:center;justify-content:center;gap:2px;width:100%;border:1px dashed var(--u-border);border-radius:10px;background:none;color:var(--u-muted);padding:10px 12px;min-height:44px;font:inherit;font-size:15px;font-weight:600;cursor:pointer}
 .u-bulkrow .u-bulkbtn span{margin-left:6px}
 .u-bulkrow .u-bulkbtn:hover:not(:disabled){color:var(--u-accent);border-color:var(--u-accent);background:var(--u-surface-2)}
 .u-bulkrow .u-bulkbtn:disabled{opacity:.45;cursor:not-allowed}
@@ -78,7 +79,7 @@ export const upliftStyles = `
 .u-clear-btn svg{width:15px;height:15px}
 .u-clear-btn:hover:not(:disabled){color:var(--u-text);background:var(--u-surface-2)}
 .u-clear-btn:disabled{opacity:.4;cursor:not-allowed}
-.u-rows{list-style:none;margin:0;padding:0;overflow:auto;flex:1;min-height:0}
+.u-rows{list-style:none;margin:0;padding:0;overflow:auto;flex:1;min-height:0;display:flex;flex-direction:column}
 .u-rows li{display:flex;flex-wrap:wrap;align-items:stretch;border-bottom:1px solid var(--u-border)}
 .u-row-open{flex:1;min-width:0;text-align:left;border:0;background:transparent;padding:11px 12px;display:grid;grid-template-columns:36px minmax(0,1fr);gap:2px 10px;min-height:64px}
 .u-av{grid-row:span 3;width:36px;height:36px;border-radius:999px;display:grid;place-items:center;font-size:13px;font-weight:700;color:#fff}
@@ -86,6 +87,7 @@ export const upliftStyles = `
 .u-r-top{display:flex;gap:6px;align-items:baseline;min-width:0}
 .u-r-name{font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .u-r-time{margin-left:auto;font-size:12.5px;color:var(--u-muted);flex:none}
+.u-r-chev{display:none;flex:none;align-self:center;margin-left:-2px;color:var(--u-muted)}.u-r-chev svg{width:15px;height:15px}
 .u-r-line{font-size:13.5px;color:var(--u-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .u-r-tags{display:flex;flex-wrap:wrap;gap:4px}
 .u-tag{font-size:12px;font-weight:600;border-radius:999px;padding:1px 8px;border:1px solid var(--u-border);color:var(--u-muted);background:var(--u-surface-2)}
@@ -121,15 +123,8 @@ export const upliftStyles = `
 /* ---- Composer footer (port of native ChatPage footer) ---- */
 .u-composer{display:flex;flex-direction:column;gap:8px;padding:10px 16px 12px;background:var(--u-surface-2);border-top:1px solid var(--u-border)}
 .u-composer>*:empty{display:none}
-.u-rail{align-self:center;display:inline-flex;align-items:center;gap:6px;border:0;background:transparent;color:var(--u-muted);font-size:12px;padding:2px 10px;border-radius:999px;min-height:24px}
-.u-rail:hover{color:var(--u-text);background:var(--u-surface-3)}
-.u-rail svg{width:14px;height:14px}
-.u-extras-wrap{position:relative;display:flex;flex-direction:column}
-.u-extras-wrap>.u-rail{align-self:flex-end}
-.u-extras-wrap>.u-rail[aria-expanded="true"]{position:absolute;top:0;right:0;z-index:1}
-.u-extras-wrap:has(>.u-rail[aria-expanded="true"]) .u-ag-h{padding-right:34px}
-.u-extras{display:contents}
-.u-extras-off{display:none}
+/* Its menus open upward, over the conversation: a host that makes the composer scroll must not clip them. */
+.uplift .u-composer.u-composer-menu{overflow:visible!important}
 /* draft grid (ComposerAssistant) */
 .u-ag{display:flex;flex-direction:column;gap:6px}
 .u-ag-h{display:flex;align-items:center;gap:2px}
@@ -218,7 +213,7 @@ export const upliftStyles = `
 .u-send-btn svg{width:15px;height:15px;stroke:var(--u-accent-ink)}
 .u-send-btn:hover:not(:disabled){transform:translateY(-1px)}
 .u-send-btn:disabled{opacity:.4;cursor:not-allowed}
-.u-send-btn-text{width:auto;padding:0 12px;font-size:12.5px;font-weight:600;white-space:nowrap}
+.u-send-btn-text{width:auto;padding:0 10px 0 12px;gap:6px;font-size:12.5px;font-weight:600;white-space:nowrap}
 .u-gen-btn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;min-height:0;padding:0;flex:none;border:0;border-radius:999px;background:transparent;color:var(--u-highlight);transition:background .15s}
 .u-gen-btn svg{width:16px;height:16px}
 .u-gen-btn:hover:not(:disabled){background:var(--u-highlight-soft)}
@@ -470,8 +465,7 @@ export const upliftStyles = `
 .u-pill .u-editor-sugg,.u-editor-sugg{background:var(--u-surface-2);border-radius:10px}
 .u-editor-sugg:focus-visible{outline:2px solid var(--u-highlight);outline-offset:1px}
 .u-sugg-label{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--u-highlight)}
-.u-sugg-label i{width:7px;height:7px;border-radius:50%;background:currentColor;display:inline-block}
-.u-sugg-label em{font-style:normal;font-weight:400;color:var(--u-muted)}
+.u-sugg-label svg{width:13px;height:13px;flex:none}
 .u-sugg-text{color:var(--u-muted)}
 /* Stock intro: no pill highlight, the text itself shimmers gold (gradient clipped to the glyphs). Reduced motion leaves a still gold gradient. */
 .u-seg-lock{cursor:default;user-select:text;padding:0;margin:0;border:0;border-radius:0;font-weight:600;background:linear-gradient(110deg,var(--u-gold-ink) 0%,var(--u-gold-ink-hi) 30%,var(--u-gold-ink) 50%,var(--u-gold-ink-hi) 70%,var(--u-gold-ink) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:u-shimmer 4s linear infinite}
@@ -552,6 +546,8 @@ export const upliftStyles = `
   .u-split.u-show-thread .u-list{display:none}
   .u-split:not(.u-show-thread) .u-pane{display:none}
   .u-back{display:inline-flex}
+  /* A row opens its thread full screen here, so it says so. */
+  .u-r-chev{display:inline-flex}
   .u-toolbar-acts{display:inline-flex;flex:none;margin-left:auto}
   .u-toolbar-acts .u-head-acts{margin-left:0}
   /* Phone widths: the toolbar wraps its buttons rather than cutting them off; the conversation header

package/dist/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,uBAAuB,CAAC;AAExD,MAAM,CAAC,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqjB3B,CAAC;AAEF,4EAA4E;AAC5E,MAAM,UAAU,YAAY,CAAC,MAA4B,OAAO,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;IAC7G,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,cAAc,CAAC,gBAAgB,CAAC;QAAE,OAAO;IACzD,MAAM,EAAE,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACtC,EAAE,CAAC,EAAE,GAAG,gBAAgB,CAAC;IACzB,EAAE,CAAC,WAAW,GAAG,YAAY,CAAC;IAC9B,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;AAC3B,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../src/styles.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,uBAAuB,CAAC;AAExD,MAAM,CAAC,MAAM,YAAY,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAijB3B,CAAC;AAEF,4EAA4E;AAC5E,MAAM,UAAU,YAAY,CAAC,MAA4B,OAAO,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ;IAC7G,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC,cAAc,CAAC,gBAAgB,CAAC;QAAE,OAAO;IACzD,MAAM,EAAE,GAAG,GAAG,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACtC,EAAE,CAAC,EAAE,GAAG,gBAAgB,CAAC;IACzB,EAAE,CAAC,WAAW,GAAG,YAAY,CAAC;IAC9B,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;AAC3B,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uplifted/react",
-  "version": "0.24.0",
+  "version": "0.25.0",
   "type": "module",
   "description": "Uplift messaging screens as host-agnostic React components and hooks.",
   "license": "UNLICENSED",

package/dist/ComposerExtras.d.ts

@@ -1,15 +0,0 @@
-import type { ReactNode } from "react";
-/**
- * Collapsible wrapper for everything that stacks above the editor (the draft grid), a port of
- * native Uplift's ComposerExtras (GH #512/#513): one control that drops the whole stack down to
- * just the input. Collapse is CSS-only so children stay mounted. The rail only renders when there
- * is something to collapse, or the stack is already collapsed. Open, it sits at the right end of the
- * drafts header row; collapsed, it is the only row left, right-aligned.
- */
-export declare function ComposerExtras({ collapsed, onToggle, hasContent, children }: {
-    collapsed: boolean;
-    onToggle: (next: boolean) => void;
-    hasContent: boolean;
-    children: ReactNode;
-}): import("react").JSX.Element;
-//# sourceMappingURL=ComposerExtras.d.ts.map

package/dist/ComposerExtras.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ComposerExtras.d.ts","sourceRoot":"","sources":["../src/ComposerExtras.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE;IAAE,SAAS,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IAAC,UAAU,EAAE,OAAO,CAAC;IAAC,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAoBhL"}

package/dist/ComposerExtras.js

@@ -1,14 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { IconChevronDown, IconChevronUp } from "./icons.js";
-/**
- * Collapsible wrapper for everything that stacks above the editor (the draft grid), a port of
- * native Uplift's ComposerExtras (GH #512/#513): one control that drops the whole stack down to
- * just the input. Collapse is CSS-only so children stay mounted. The rail only renders when there
- * is something to collapse, or the stack is already collapsed. Open, it sits at the right end of the
- * drafts header row; collapsed, it is the only row left, right-aligned.
- */
-export function ComposerExtras({ collapsed, onToggle, hasContent, children }) {
-    const showRail = collapsed || hasContent;
-    return (_jsxs("div", { className: "u-extras-wrap", children: [showRail && (_jsxs("button", { type: "button", className: "u-rail", onClick: () => onToggle(!collapsed), "aria-expanded": !collapsed, "aria-label": collapsed ? "Show drafts & tools" : "Hide drafts & tools", title: collapsed ? "Show drafts & tools" : "Hide drafts & tools to see more of the chat", children: [collapsed ? _jsx(IconChevronUp, {}) : _jsx(IconChevronDown, {}), collapsed && _jsx("span", { className: "u-rail-label", children: "Show drafts & tools" })] })), _jsx("div", { className: collapsed ? "u-extras u-extras-off" : "u-extras", "data-testid": "composer-extras", children: children })] }));
-}
-//# sourceMappingURL=ComposerExtras.js.map

package/dist/ComposerExtras.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ComposerExtras.js","sourceRoot":"","sources":["../src/ComposerExtras.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,eAAe,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAE5D;;;;;;GAMG;AACH,MAAM,UAAU,cAAc,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAuG;IAC/K,MAAM,QAAQ,GAAG,SAAS,IAAI,UAAU,CAAC;IACzC,OAAO,CACL,eAAK,SAAS,EAAC,eAAe,aAC3B,QAAQ,IAAI,CACX,kBACE,IAAI,EAAC,QAAQ,EACb,SAAS,EAAC,QAAQ,EAClB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,mBACpB,CAAC,SAAS,gBACb,SAAS,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,qBAAqB,EACrE,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,6CAA6C,aAEvF,SAAS,CAAC,CAAC,CAAC,KAAC,aAAa,KAAG,CAAC,CAAC,CAAC,KAAC,eAAe,KAAG,EACnD,SAAS,IAAI,eAAM,SAAS,EAAC,cAAc,oCAA+B,IACpE,CACV,EACD,cAAK,SAAS,EAAE,SAAS,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,UAAU,iBAAc,iBAAiB,YAAE,QAAQ,GAAO,IAC5G,CACP,CAAC;AACJ,CAAC"}