@geomak/ui 6.29.1 → 6.30.0

package/dist/index.d.cts

@@ -1381,6 +1381,8 @@ interface ChatProps {
     disabled?: boolean;
     /** Hide the composer entirely (read-only transcript). */
     hideComposer?: boolean;
+    /** Shows a transcript skeleton (use while loading history, before messages arrive). */
+    loading?: boolean;
     /** Shown when there are no messages. */
     emptyState?: React__default.ReactNode;
     /** Overall height — the message list scrolls within it. Default `480`. */
@@ -1406,7 +1408,7 @@ interface ChatProps {
  *   onSend={(text) => send(text)}
  * />
  */
-declare function Chat({ messages, currentUserId, onSend, typingNames, title, subtitle, avatar, headerActions, placeholder, disabled, hideComposer, emptyState, height, className, style, }: ChatProps): react_jsx_runtime.JSX.Element;
+declare function Chat({ messages, currentUserId, onSend, typingNames, title, subtitle, avatar, headerActions, placeholder, disabled, hideComposer, loading, emptyState, height, className, style, }: ChatProps): react_jsx_runtime.JSX.Element;
 
 type StatisticSize = 'sm' | 'md' | 'lg';
 type DeltaDirection = 'up' | 'down' | 'neutral';

package/dist/index.d.ts

@@ -1381,6 +1381,8 @@ interface ChatProps {
     disabled?: boolean;
     /** Hide the composer entirely (read-only transcript). */
     hideComposer?: boolean;
+    /** Shows a transcript skeleton (use while loading history, before messages arrive). */
+    loading?: boolean;
     /** Shown when there are no messages. */
     emptyState?: React__default.ReactNode;
     /** Overall height — the message list scrolls within it. Default `480`. */
@@ -1406,7 +1408,7 @@ interface ChatProps {
  *   onSend={(text) => send(text)}
  * />
  */
-declare function Chat({ messages, currentUserId, onSend, typingNames, title, subtitle, avatar, headerActions, placeholder, disabled, hideComposer, emptyState, height, className, style, }: ChatProps): react_jsx_runtime.JSX.Element;
+declare function Chat({ messages, currentUserId, onSend, typingNames, title, subtitle, avatar, headerActions, placeholder, disabled, hideComposer, loading, emptyState, height, className, style, }: ChatProps): react_jsx_runtime.JSX.Element;
 
 type StatisticSize = 'sm' | 'md' | 'lg';
 type DeltaDirection = 'up' | 'down' | 'neutral';

package/dist/index.js

@@ -1,7 +1,7 @@
 import { colors_default } from './chunk-I2P4JJDB.js';
 export { colors_default as COLORS, PALETTE as palette, semanticTokens, vars } from './chunk-I2P4JJDB.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React28, { createContext, useState, useEffect, useMemo, useId, useCallback, useRef, useLayoutEffect, useContext, useSyncExternalStore } from 'react';
+import React28, { createContext, useState, useEffect, useMemo, useId, useCallback, useRef, useContext, useSyncExternalStore, useLayoutEffect } from 'react';
 import { createPortal } from 'react-dom';
 import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
@@ -2267,6 +2267,19 @@ var ArrowDown = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "
 function TypingDots() {
   return /* @__PURE__ */ jsx("span", { className: "inline-flex items-center gap-1", "aria-hidden": "true", children: [0, 1, 2].map((i) => /* @__PURE__ */ jsx("span", { className: "h-1.5 w-1.5 animate-bounce rounded-full bg-foreground-muted", style: { animationDelay: `${i * 0.15}s` } }, i)) });
 }
+var SKELETON_ROWS = [
+  { own: false, w: 150 },
+  { own: false, w: 110 },
+  { own: true, w: 180 },
+  { own: false, w: 130 },
+  { own: true, w: 90 }
+];
+function ChatSkeleton() {
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", "aria-hidden": "true", children: SKELETON_ROWS.map((r, i) => /* @__PURE__ */ jsxs("div", { className: ["flex items-end gap-2", r.own ? "flex-row-reverse" : ""].filter(Boolean).join(" "), children: [
+    !r.own && /* @__PURE__ */ jsx("span", { className: "h-6 w-6 flex-shrink-0 animate-pulse rounded-full bg-surface" }),
+    /* @__PURE__ */ jsx("span", { className: "h-8 animate-pulse rounded-2xl bg-surface", style: { width: r.w } })
+  ] }, i)) });
+}
 function Chat({
   messages,
   currentUserId,
@@ -2279,6 +2292,7 @@ function Chat({
   placeholder = "Write a message\u2026",
   disabled = false,
   hideComposer = false,
+  loading = false,
   emptyState,
   height = 480,
   className = "",
@@ -2288,7 +2302,6 @@ function Chat({
   const atBottomRef = useRef(true);
   const [showJump, setShowJump] = useState(false);
   const [draft, setDraft] = useState("");
-  const taRef = useRef(null);
   const hasHeader = title != null || subtitle != null || avatar != null || headerActions != null;
   const isTyping = typingNames.length > 0;
   const scrollToBottom = useCallback((smooth = true) => {
@@ -2310,12 +2323,6 @@ function Chat({
   useEffect(() => {
     scrollToBottom(false);
   }, [scrollToBottom]);
-  useLayoutEffect(() => {
-    const ta = taRef.current;
-    if (!ta) return;
-    ta.style.height = "auto";
-    ta.style.height = `${Math.min(ta.scrollHeight, 120)}px`;
-  }, [draft]);
   const send = () => {
     const text = draft.trim();
     if (!text || disabled) return;
@@ -2344,7 +2351,7 @@ function Chat({
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "relative flex-1 overflow-hidden", children: [
           /* @__PURE__ */ jsxs("div", { ref: listRef, onScroll, className: "flex h-full flex-col gap-1 overflow-y-auto bg-background px-4 py-3", children: [
-            messages.length === 0 && !isTyping ? /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center text-center text-sm text-foreground-muted", children: emptyState ?? "No messages yet. Say hello \u{1F44B}" }) : messages.map((m, i) => {
+            loading && messages.length === 0 ? /* @__PURE__ */ jsx(ChatSkeleton, {}) : messages.length === 0 && !isTyping ? /* @__PURE__ */ jsx("div", { className: "flex flex-1 items-center justify-center text-center text-sm text-foreground-muted", children: emptyState ?? "No messages yet. Say hello \u{1F44B}" }) : messages.map((m, i) => {
               const own = m.authorId === currentUserId;
               const prev = messages[i - 1];
               const next = messages[i + 1];
@@ -2399,15 +2406,14 @@ function Chat({
           /* @__PURE__ */ jsx(
             "textarea",
             {
-              ref: taRef,
-              rows: 1,
+              rows: 2,
               value: draft,
               disabled,
               placeholder,
               onChange: (e) => setDraft(e.target.value),
               onKeyDown,
               "aria-label": "Message",
-              className: `${fieldShell({ size: "md", hasError: false, disabled, sized: false })} max-h-[120px] flex-1 resize-none px-3 py-2 leading-snug`
+              className: `${fieldShell({ size: "md", hasError: false, disabled, sized: false })} h-[4.5rem] flex-1 resize-none px-3 py-2 leading-snug`
             }
           ),
           /* @__PURE__ */ jsx(
@@ -5525,9 +5531,10 @@ function Pagination({
   }, [serverSide, options.perPage, picker]);
   const currentOpt = picker.find((o) => o.key === displayPerPageKey);
   const currentPerPageLabel = currentOpt?.label ?? currentOpt?.value ?? options.perPage ?? "";
-  const navBtn = (icon, disabled, onClick, title) => /* @__PURE__ */ jsx(Button_default, { variant: "outline", size: "sm", disabled, onClick, icon, className: "w-7 !px-0 focus-visible:!ring-[3px] focus-visible:!ring-focus-ring focus-visible:!ring-offset-0", "aria-label": title, title });
-  const chevronRight = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 5l7 7-7 7" }) });
-  const doubleChevronRight = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M13 5l7 7-7 7M5 5l7 7-7 7" }) });
+  const FOCUS = "focus-visible:!ring-0 focus-visible:!border-accent";
+  const navBtn = (icon, disabled, onClick, title) => /* @__PURE__ */ jsx(Button_default, { variant: "outline", size: "sm", disabled, onClick, icon, className: `w-7 !px-0 ${FOCUS}`, "aria-label": title, title });
+  const chevronRight = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M9 6l6 6-6 6" }) });
+  const doubleChevronRight = /* @__PURE__ */ jsx("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, className: "h-4 w-4", children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", d: "M6 6l6 6-6 6M12 6l6 6-6 6" }) });
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-end gap-x-4 gap-y-3", children: [
     options.withPicker && /* @__PURE__ */ jsxs("div", { className: "mr-auto flex items-center gap-2", children: [
       /* @__PURE__ */ jsx("span", { className: "whitespace-nowrap text-xs text-foreground-muted", children: "Rows per page" }),
@@ -5537,7 +5544,7 @@ function Pagination({
           variant: "outline",
           size: "sm",
           side: "top",
-          className: "focus-visible:!ring-[3px] focus-visible:!ring-focus-ring focus-visible:!ring-offset-0",
+          className: FOCUS,
           label: String(currentPerPageLabel),
           items: picker.map((o) => ({
             key: o.key,
@@ -5553,7 +5560,7 @@ function Pagination({
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
       navBtn(/* @__PURE__ */ jsx("span", { className: "inline-flex rotate-180", children: doubleChevronRight }), activePage === 0, () => onPageChange(0), "First page"),
       navBtn(/* @__PURE__ */ jsx("span", { className: "inline-flex rotate-180", children: chevronRight }), activePage === 0, () => activePage > 0 && onPageChange(activePage - 1), "Previous page"),
-      /* @__PURE__ */ jsxs("span", { className: "px-2 text-sm tabular-nums text-foreground-secondary select-none", children: [
+      /* @__PURE__ */ jsxs("span", { className: "px-2 text-xs tabular-nums text-foreground-secondary select-none", children: [
         activePage + 1,
         " ",
         /* @__PURE__ */ jsxs("span", { className: "text-foreground-muted", children: [