@discuss-ds/ui 0.8.2 → 0.9.1

package/dist/index.d.cts

@@ -586,7 +586,7 @@ interface MediaInfoProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tit
 }
 declare function MediaInfo({ name, details, onRemove, removeLabel, large, className, ...props }: MediaInfoProps): React.JSX.Element;
 interface ImagePreviewProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
-    /** The image (an `<img>` filling the area). Leave empty for the placeholder fill. */
+    /** The image (an `<img>`). The preview area is as tall as the image at full width, up to 336px. Leave empty for the fixed-height placeholder fill. */
     children?: React.ReactNode;
     name: string;
     details?: string[];
@@ -803,6 +803,10 @@ interface StimulusCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
     onCaptionChange?: (caption: string) => void;
     /** Editor mode: placeholder for an empty caption. */
     captionPlaceholder?: string;
+    /** Editor mode: caption length limit. Also what the counter counts against. */
+    maxLength?: number;
+    /** Editor mode: shows the "n/2000 characters" counter under the caption (it counts live while typing). Defaults to `true`; needs `maxLength`. */
+    showCounter?: boolean;
     /** Shows the trash button. */
     onRemove?: () => void;
     /** Accessible name of the trash button. Defaults to "Remove stimulus". */

package/dist/index.d.ts

@@ -586,7 +586,7 @@ interface MediaInfoProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'tit
 }
 declare function MediaInfo({ name, details, onRemove, removeLabel, large, className, ...props }: MediaInfoProps): React.JSX.Element;
 interface ImagePreviewProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
-    /** The image (an `<img>` filling the area). Leave empty for the placeholder fill. */
+    /** The image (an `<img>`). The preview area is as tall as the image at full width, up to 336px. Leave empty for the fixed-height placeholder fill. */
     children?: React.ReactNode;
     name: string;
     details?: string[];
@@ -803,6 +803,10 @@ interface StimulusCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
     onCaptionChange?: (caption: string) => void;
     /** Editor mode: placeholder for an empty caption. */
     captionPlaceholder?: string;
+    /** Editor mode: caption length limit. Also what the counter counts against. */
+    maxLength?: number;
+    /** Editor mode: shows the "n/2000 characters" counter under the caption (it counts live while typing). Defaults to `true`; needs `maxLength`. */
+    showCounter?: boolean;
     /** Shows the trash button. */
     onRemove?: () => void;
     /** Accessible name of the trash button. Defaults to "Remove stimulus". */

package/dist/index.js

@@ -2249,7 +2249,17 @@ function MediaInfo({ name, details, onRemove, removeLabel, large, className, ...
 }
 var ImagePreview = React37.forwardRef(
   ({ className, children, name, details, onRemove, ...props }, ref) => /* @__PURE__ */ jsxs27("div", { ref, className: cn("flex w-full flex-col overflow-hidden rounded-lg border border-border", className), ...props, children: [
-    /* @__PURE__ */ jsx38("div", { className: "flex h-84 w-full items-center justify-center bg-accent-soft [&>img]:size-full [&>img]:object-contain", children }),
+    /* @__PURE__ */ jsx38(
+      "div",
+      {
+        className: cn(
+          "flex w-full items-center justify-center bg-accent-soft",
+          // With an image the area hugs it (full width, its own height, at most 336px tall); the empty placeholder keeps the fixed height.
+          children ? "[&>img]:block [&>img]:h-auto [&>img]:max-h-84 [&>img]:w-full [&>img]:object-contain" : "h-84"
+        ),
+        children
+      }
+    ),
     /* @__PURE__ */ jsx38(MediaInfo, { name, details, onRemove, large: true })
   ] })
 );
@@ -3052,6 +3062,8 @@ RatingScale.displayName = "RatingScale";
 import * as React47 from "react";
 import { Image as ImageIcon2, ImageBroken, Trash as Trash5 } from "@phosphor-icons/react";
 import { jsx as jsx48, jsxs as jsxs34 } from "react/jsx-runtime";
+var MIN_THUMBNAIL = 80;
+var MAX_THUMBNAIL = 240;
 var StimulusCard = React47.forwardRef(
   ({
     className,
@@ -3063,6 +3075,8 @@ var StimulusCard = React47.forwardRef(
     caption,
     onCaptionChange,
     captionPlaceholder = "Click to write what the AI moderator says",
+    maxLength,
+    showCounter = true,
     onRemove,
     removeLabel = "Remove stimulus",
     ...props
@@ -3070,27 +3084,44 @@ var StimulusCard = React47.forwardRef(
     const [failedSrc, setFailedSrc] = React47.useState();
     const error = status === "error" || thumbnail !== void 0 && failedSrc === thumbnail;
     const showImage = thumbnail !== void 0 && !error;
+    const [draft, setDraft] = React47.useState(null);
+    const count = (draft ?? caption ?? "").length;
+    const textRef = React47.useRef(null);
+    const [thumbnailSize, setThumbnailSize] = React47.useState(MIN_THUMBNAIL);
+    React47.useEffect(() => {
+      const el = textRef.current;
+      if (!el || typeof ResizeObserver === "undefined") return;
+      const observer = new ResizeObserver(() => {
+        setThumbnailSize(Math.min(MAX_THUMBNAIL, Math.max(MIN_THUMBNAIL, Math.ceil(el.getBoundingClientRect().height))));
+      });
+      observer.observe(el);
+      return () => observer.disconnect();
+    }, []);
     return /* @__PURE__ */ jsxs34(
       "div",
       {
         ref,
         "data-status": error ? "error" : "default",
-        className: cn("flex w-full items-center gap-4 rounded-md border border-border p-0.5 pr-4", className),
+        className: cn("flex min-h-21.5 w-full items-center gap-4 rounded-md border border-border p-0.5 pr-4", className),
         ...props,
         children: [
           /* @__PURE__ */ jsxs34("div", { className: "flex min-w-0 flex-1 items-center gap-4", children: [
             /* @__PURE__ */ jsx48(
               "span",
               {
+                style: { width: thumbnailSize, height: thumbnailSize },
                 className: cn(
-                  "flex size-20 shrink-0 items-center justify-center overflow-hidden rounded-sm border",
+                  "relative flex shrink-0 items-center justify-center overflow-hidden rounded-sm border",
                   error ? "border-destructive-soft-border bg-destructive-soft bg-linear-to-r from-overlay-dark-5 to-overlay-dark-5 text-destructive" : "border-border bg-background bg-linear-to-r from-overlay-dark-5 to-overlay-dark-5 text-surface-foreground",
                   showImage && "bg-none"
                 ),
-                children: showImage ? /* @__PURE__ */ jsx48("img", { src: thumbnail, alt: thumbnailAlt, className: "size-full object-cover", onError: () => setFailedSrc(thumbnail) }) : error ? /* @__PURE__ */ jsx48(ImageBroken, { size: 24, "aria-hidden": true }) : icon ?? /* @__PURE__ */ jsx48(ImageIcon2, { size: 24, "aria-hidden": true })
+                children: showImage ? (
+                  // Out of flow, so the image's own size never sets the thumbnail's size.
+                  /* @__PURE__ */ jsx48("img", { src: thumbnail, alt: thumbnailAlt, className: "absolute inset-0 size-full object-cover", onError: () => setFailedSrc(thumbnail) })
+                ) : error ? /* @__PURE__ */ jsx48(ImageBroken, { size: 24, "aria-hidden": true }) : icon ?? /* @__PURE__ */ jsx48(ImageIcon2, { size: 24, "aria-hidden": true })
               }
             ),
-            /* @__PURE__ */ jsxs34("div", { className: "flex min-w-0 flex-1 flex-col gap-2 text-surface-foreground", children: [
+            /* @__PURE__ */ jsxs34("div", { ref: textRef, className: "flex min-w-0 flex-1 flex-col justify-center gap-2 py-2 text-surface-foreground", children: [
               /* @__PURE__ */ jsx48("p", { className: "w-full text-ui-label", children: label }),
               onCaptionChange ? /* @__PURE__ */ jsx48(
                 InlineEdit,
@@ -3101,10 +3132,21 @@ var StimulusCard = React47.forwardRef(
                   "aria-label": "Stimulus caption",
                   value: caption ?? "",
                   placeholder: captionPlaceholder,
+                  maxLength,
                   onValueChange: onCaptionChange,
+                  onDraftChange: setDraft,
+                  onEditingChange: (editing) => {
+                    if (!editing) setDraft(null);
+                  },
                   textClassName: "text-body-base"
                 }
-              ) : /* @__PURE__ */ jsx48("p", { className: "w-full text-body-base [word-break:break-word]", children: caption })
+              ) : /* @__PURE__ */ jsx48("p", { className: "w-full text-body-base [word-break:break-word]", children: caption }),
+              onCaptionChange && showCounter && maxLength !== void 0 && /* @__PURE__ */ jsxs34("p", { className: "text-ui-caption text-secondary-muted-foreground", children: [
+                count,
+                "/",
+                maxLength,
+                " characters"
+              ] })
             ] })
           ] }),
           onRemove && /* @__PURE__ */ jsx48(Button, { type: "button", variant: "destructive", size: "icon-sm", "aria-label": removeLabel, onClick: onRemove, children: /* @__PURE__ */ jsx48(Trash5, { size: 16, "aria-hidden": true }) })