@discuss-ds/ui 0.7.1 → 0.8.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @discuss-ds/ui
 
+## 0.8.0
+
+### Minor Changes
+
+- [#41](https://github.com/TamyresLucas/Discuss-UI-Storybook/pull/41) [`b4d5774`](https://github.com/TamyresLucas/Discuss-UI-Storybook/commit/b4d5774ec8d2a3acae16dd10ee977d204f11e3e7) Thanks [@TamyresLucas](https://github.com/TamyresLucas)! - New `StimulusCard` (Question Types): the image or video attached to a question, as it appears in the question card. An 80px thumbnail (image, custom icon, or a neutral placeholder), the "AI Moderator" label over a caption (what the moderator says about the stimulus), and a trash button. `onCaptionChange` makes the caption editable in place; `status="error"`, or a thumbnail that fails to load, shows the broken-image state. Additive; nothing existing changes.
+
 ## 0.7.1
 
 ### Patch Changes

package/dist/index.cjs

@@ -114,6 +114,7 @@ __export(index_exports, {
   Slider: () => Slider,
   StatCard: () => StatCard,
   StatusTag: () => StatusTag,
+  StimulusCard: () => StimulusCard,
   Switch: () => Switch,
   TabItem: () => TabItem,
   TabNavigation: () => TabNavigation,
@@ -3194,28 +3195,95 @@ var RatingScale = React46.forwardRef(
 );
 RatingScale.displayName = "RatingScale";
 
-// src/components/Data Display/Progress.tsx
+// src/components/Question Types/StimulusCard.tsx
 var React47 = __toESM(require("react"), 1);
-var import_radix_ui23 = require("radix-ui");
+var import_react25 = require("@phosphor-icons/react");
 var import_jsx_runtime48 = require("react/jsx-runtime");
-var Progress = React47.forwardRef(
+var StimulusCard = React47.forwardRef(
+  ({
+    className,
+    thumbnail,
+    thumbnailAlt = "",
+    icon,
+    status = "default",
+    label = "AI Moderator",
+    caption,
+    onCaptionChange,
+    captionPlaceholder = "Click to write what the AI moderator says",
+    onRemove,
+    removeLabel = "Remove stimulus",
+    ...props
+  }, ref) => {
+    const [failedSrc, setFailedSrc] = React47.useState();
+    const error = status === "error" || thumbnail !== void 0 && failedSrc === thumbnail;
+    const showImage = thumbnail !== void 0 && !error;
+    return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+      "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),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+              "span",
+              {
+                className: cn(
+                  "flex size-20 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__ */ (0, import_jsx_runtime48.jsx)("img", { src: thumbnail, alt: thumbnailAlt, className: "size-full object-cover", onError: () => setFailedSrc(thumbnail) }) : error ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react25.ImageBroken, { size: 24, "aria-hidden": true }) : icon ?? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react25.Image, { size: 24, "aria-hidden": true })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col items-start gap-2 text-surface-foreground", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "w-full text-ui-label", children: label }),
+              onCaptionChange ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                InlineEdit,
+                {
+                  variant: "question",
+                  multiline: true,
+                  className: "-mx-3 w-auto",
+                  "aria-label": "Stimulus caption",
+                  value: caption ?? "",
+                  placeholder: captionPlaceholder,
+                  onValueChange: onCaptionChange,
+                  textClassName: "text-body-base"
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "w-full text-body-base [word-break:break-word]", children: caption })
+            ] })
+          ] }),
+          onRemove && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Button, { type: "button", variant: "destructive", size: "icon-sm", "aria-label": removeLabel, onClick: onRemove, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_react25.Trash, { size: 16, "aria-hidden": true }) })
+        ]
+      }
+    );
+  }
+);
+StimulusCard.displayName = "StimulusCard";
+
+// src/components/Data Display/Progress.tsx
+var React48 = __toESM(require("react"), 1);
+var import_radix_ui23 = require("radix-ui");
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var Progress = React48.forwardRef(
   ({ className, value = 0, label, valueLabel, detailsStart, detailsEnd, ...props }, ref) => {
     const hasHeader = label != null || valueLabel != null;
     const hasDetails = detailsStart != null || detailsEnd != null;
     const clamped = Math.min(100, Math.max(0, value ?? 0));
-    return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: cn("flex w-full flex-col gap-2", className), children: [
-      hasHeader && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-center justify-between text-ui-label text-surface-foreground", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { children: label }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { children: valueLabel === true ? `${Math.round(clamped)}%` : valueLabel })
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: cn("flex w-full flex-col gap-2", className), children: [
+      hasHeader && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center justify-between text-ui-label text-surface-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { children: valueLabel === true ? `${Math.round(clamped)}%` : valueLabel })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         import_radix_ui23.Progress.Root,
         {
           ref,
           value: clamped,
           className: "relative h-2 w-full overflow-hidden rounded-full bg-secondary",
           ...props,
-          children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
             import_radix_ui23.Progress.Indicator,
             {
               className: "h-full rounded-full bg-accent transition-[width]",
@@ -3224,9 +3292,9 @@ var Progress = React47.forwardRef(
           )
         }
       ),
-      hasDetails && /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "flex items-start justify-between text-ui-label leading-5 text-secondary-muted-foreground", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { children: detailsStart }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { children: detailsEnd })
+      hasDetails && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-start justify-between text-ui-label leading-5 text-secondary-muted-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { children: detailsStart }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { children: detailsEnd })
       ] })
     ] });
   }
@@ -3234,11 +3302,11 @@ var Progress = React47.forwardRef(
 Progress.displayName = "Progress";
 
 // src/components/Data Display/Table.tsx
-var React48 = __toESM(require("react"), 1);
-var import_react25 = require("@phosphor-icons/react");
-var import_jsx_runtime49 = require("react/jsx-runtime");
-var Table = React48.forwardRef(
-  ({ className, containerClassName, striped, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: cn("relative w-full overflow-auto rounded-lg border border-border bg-surface", containerClassName), children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+var React49 = __toESM(require("react"), 1);
+var import_react26 = require("@phosphor-icons/react");
+var import_jsx_runtime50 = require("react/jsx-runtime");
+var Table = React49.forwardRef(
+  ({ className, containerClassName, striped, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: cn("relative w-full overflow-auto rounded-lg border border-border bg-surface", containerClassName), children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     "table",
     {
       ref,
@@ -3249,16 +3317,16 @@ var Table = React48.forwardRef(
   ) })
 );
 Table.displayName = "Table";
-var TableHeader = React48.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("thead", { ref, className, ...props })
+var TableHeader = React49.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("thead", { ref, className, ...props })
 );
 TableHeader.displayName = "TableHeader";
-var TableBody = React48.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("tbody", { ref, className, ...props })
+var TableBody = React49.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("tbody", { ref, className, ...props })
 );
 TableBody.displayName = "TableBody";
-var TableRow = React48.forwardRef(
-  ({ className, selected, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+var TableRow = React49.forwardRef(
+  ({ className, selected, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     "tr",
     {
       ref,
@@ -3275,10 +3343,10 @@ var TableRow = React48.forwardRef(
 );
 TableRow.displayName = "TableRow";
 var ariaSort = { none: "none", asc: "ascending", desc: "descending" };
-var TableHead = React48.forwardRef(
+var TableHead = React49.forwardRef(
   ({ className, align = "left", sortable, sort = "none", onSort, checkbox, children, ...props }, ref) => {
-    const caret = sort === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react25.CaretUp, { size: 16, "aria-hidden": true, className: "shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(import_react25.CaretDown, { size: 16, "aria-hidden": true, className: "shrink-0" });
-    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    const caret = sort === "asc" ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react26.CaretUp, { size: 16, "aria-hidden": true, className: "shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(import_react26.CaretDown, { size: 16, "aria-hidden": true, className: "shrink-0" });
+    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
       "th",
       {
         ref,
@@ -3291,7 +3359,7 @@ var TableHead = React48.forwardRef(
           className
         ),
         ...props,
-        children: sortable ? /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+        children: sortable ? /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
           "button",
           {
             type: "button",
@@ -3302,14 +3370,14 @@ var TableHead = React48.forwardRef(
               caret
             ]
           }
-        ) : checkbox ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "flex items-center justify-center", children }) : children
+        ) : checkbox ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "flex items-center justify-center", children }) : children
       }
     );
   }
 );
 TableHead.displayName = "TableHead";
-var TableCell = React48.forwardRef(
-  ({ className, align = "left", muted, checkbox, actions, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+var TableCell = React49.forwardRef(
+  ({ className, align = "left", muted, checkbox, actions, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     "td",
     {
       ref,
@@ -3322,25 +3390,25 @@ var TableCell = React48.forwardRef(
         className
       ),
       ...props,
-      children: checkbox ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "flex items-center justify-center", children }) : actions ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "flex items-start justify-end gap-1", children }) : children
+      children: checkbox ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "flex items-center justify-center", children }) : actions ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "flex items-start justify-end gap-1", children }) : children
     }
   )
 );
 TableCell.displayName = "TableCell";
 function TableCellTwoLines({ primary, secondary, avatar, className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: cn("flex items-center gap-2", className), ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: cn("flex items-center gap-2", className), ...props, children: [
     avatar,
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex flex-col gap-0.5 whitespace-nowrap", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-ui-label text-surface-foreground", children: primary }),
-      secondary && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-ui-caption text-secondary-muted-foreground", children: secondary })
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex flex-col gap-0.5 whitespace-nowrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "text-ui-label text-surface-foreground", children: primary }),
+      secondary && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "text-ui-caption text-secondary-muted-foreground", children: secondary })
     ] })
   ] });
 }
 
 // src/components/Data Display/StatCard.tsx
-var React49 = __toESM(require("react"), 1);
+var React50 = __toESM(require("react"), 1);
 var import_class_variance_authority6 = require("class-variance-authority");
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var statCardVariants = (0, import_class_variance_authority6.cva)("flex min-w-0 flex-col gap-2 rounded-md border p-3", {
   variants: {
     variant: {
@@ -3350,11 +3418,11 @@ var statCardVariants = (0, import_class_variance_authority6.cva)("flex min-w-0 f
   },
   defaultVariants: { variant: "default" }
 });
-var StatCard = React49.forwardRef(
-  ({ className, variant, label, value, icon, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { ref, className: cn(statCardVariants({ variant }), className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", { className: "truncate text-ui-caption text-secondary-muted-foreground", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("p", { className: "flex items-center gap-2 text-body-base text-surface-foreground", children: [
-      icon && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { "aria-hidden": "true", className: "inline-flex size-6 shrink-0 items-center justify-center", children: icon }),
+var StatCard = React50.forwardRef(
+  ({ className, variant, label, value, icon, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { ref, className: cn(statCardVariants({ variant }), className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("p", { className: "truncate text-ui-caption text-secondary-muted-foreground", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("p", { className: "flex items-center gap-2 text-body-base text-surface-foreground", children: [
+      icon && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { "aria-hidden": "true", className: "inline-flex size-6 shrink-0 items-center justify-center", children: icon }),
       value
     ] })
   ] })
@@ -3362,13 +3430,13 @@ var StatCard = React49.forwardRef(
 StatCard.displayName = "StatCard";
 
 // src/components/Research-Specific/ActivityStructure.tsx
-var React51 = __toESM(require("react"), 1);
+var React52 = __toESM(require("react"), 1);
 
 // src/components/Tags & Badges/EditableTag.tsx
-var React50 = __toESM(require("react"), 1);
-var import_react26 = require("@phosphor-icons/react");
+var React51 = __toESM(require("react"), 1);
+var import_react27 = require("@phosphor-icons/react");
 var import_class_variance_authority7 = require("class-variance-authority");
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 var editableTagVariants = (0, import_class_variance_authority7.cva)(
   "inline-flex h-6.5 items-center whitespace-nowrap rounded-sm py-1 text-ui-caption transition-colors",
   {
@@ -3383,27 +3451,27 @@ var editableTagVariants = (0, import_class_variance_authority7.cva)(
     defaultVariants: { type: "default" }
   }
 );
-var EditableTag = React50.forwardRef(
+var EditableTag = React51.forwardRef(
   ({ className, type = "default", icon, onRemove, onClick, children, ...props }, ref) => {
     const classes = cn(editableTagVariants({ type }), className);
-    const leading = type === "add" ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react26.Plus, { size: 12, "aria-hidden": true }) : icon !== void 0 ? icon : type === "default" ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react26.Crown, { size: 12, weight: "fill", "aria-hidden": true }) : null;
+    const leading = type === "add" ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react27.Plus, { size: 12, "aria-hidden": true }) : icon !== void 0 ? icon : type === "default" ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react27.Crown, { size: 12, weight: "fill", "aria-hidden": true }) : null;
     if (type === "add" || type === "multiple" && onClick) {
-      return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("button", { ref, type: "button", className: classes, onClick, ...props, children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("button", { ref, type: "button", className: classes, onClick, ...props, children: [
         leading,
         children
       ] });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("span", { ref, className: classes, ...props, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("span", { ref, className: classes, ...props, children: [
       leading,
       children,
-      onRemove && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      onRemove && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
         "button",
         {
           type: "button",
           "aria-label": typeof children === "string" ? `Remove ${children}` : "Remove",
           onClick: onRemove,
           className: "inline-flex size-3 items-center justify-center rounded-xs",
-          children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(import_react26.X, { size: 12, "aria-hidden": true })
+          children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react27.X, { size: 12, "aria-hidden": true })
         }
       )
     ] });
@@ -3412,23 +3480,23 @@ var EditableTag = React50.forwardRef(
 EditableTag.displayName = "EditableTag";
 
 // src/components/Research-Specific/ActivityStructure.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
-var ActivityStructure = React51.forwardRef(
-  ({ className, title = "Activity Structure", stats, sections, onRemoveTag, onAddTag, addTagLabel = "Add tag", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+var import_jsx_runtime53 = require("react/jsx-runtime");
+var ActivityStructure = React52.forwardRef(
+  ({ className, title = "Activity Structure", stats, sections, onRemoveTag, onAddTag, addTagLabel = "Add tag", children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
     "section",
     {
       ref,
       className: cn("flex w-full max-w-96.5 flex-col gap-4 rounded-xl bg-surface p-4", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("h3", { className: "text-heading-h3 text-primary", children: title }),
-        stats.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "grid grid-cols-2 gap-3", children: stats.map(({ id, ...stat }) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(StatCard, { ...stat }, id)) }),
-        sections?.map(({ id, heading, body, tags }) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("h4", { className: "text-heading-h4 text-surface-foreground", children: heading }),
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "text-body-base text-surface-foreground", children: body }),
-          (tags?.length || onAddTag) && /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
-            tags?.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(EditableTag, { type: "editable", onRemove: onRemoveTag && (() => onRemoveTag(id, tag)), children: tag }, tag)),
-            onAddTag && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(EditableTag, { type: "add", onClick: () => onAddTag(id), children: addTagLabel })
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("h3", { className: "text-heading-h3 text-primary", children: title }),
+        stats.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "grid grid-cols-2 gap-3", children: stats.map(({ id, ...stat }) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(StatCard, { ...stat }, id)) }),
+        sections?.map(({ id, heading, body, tags }) => /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("h4", { className: "text-heading-h4 text-surface-foreground", children: heading }),
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "text-body-base text-surface-foreground", children: body }),
+          (tags?.length || onAddTag) && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
+            tags?.map((tag) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(EditableTag, { type: "editable", onRemove: onRemoveTag && (() => onRemoveTag(id, tag)), children: tag }, tag)),
+            onAddTag && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(EditableTag, { type: "add", onClick: () => onAddTag(id), children: addTagLabel })
           ] })
         ] }, id)),
         children
@@ -3439,10 +3507,10 @@ var ActivityStructure = React51.forwardRef(
 ActivityStructure.displayName = "ActivityStructure";
 
 // src/components/Tags & Badges/Badge.tsx
-var React52 = __toESM(require("react"), 1);
-var import_react27 = require("@phosphor-icons/react");
+var React53 = __toESM(require("react"), 1);
+var import_react28 = require("@phosphor-icons/react");
 var import_class_variance_authority8 = require("class-variance-authority");
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 var roleTagVariants = (0, import_class_variance_authority8.cva)(
   "group inline-flex h-6 items-center whitespace-nowrap rounded-sm py-1 text-ui-caption transition-colors",
   {
@@ -3468,11 +3536,11 @@ var roleTagVariants = (0, import_class_variance_authority8.cva)(
     defaultVariants: { type: "primary", selected: false }
   }
 );
-var Badge = React52.forwardRef(
+var Badge = React53.forwardRef(
   ({ className, type = "primary", selected = false, onClick, children, ...props }, ref) => {
     const classes = cn(roleTagVariants({ type, selected: type === "interactable" ? selected : false }), className);
     if (type === "interactable") {
-      return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
         "button",
         {
           ref,
@@ -3482,15 +3550,15 @@ var Badge = React52.forwardRef(
           onClick,
           ...props,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react27.DotsSixVertical, { size: 16, "aria-hidden": true, className: "hidden shrink-0 group-hover:block" }),
+            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react28.DotsSixVertical, { size: 16, "aria-hidden": true, className: "hidden shrink-0 group-hover:block" }),
             children
           ]
         }
       );
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("span", { ref, className: classes, ...props, children: [
-      type === "question" && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react27.RadioButton, { size: 16, weight: "fill", "aria-hidden": true }),
-      type === "id" && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "text-secondary-muted-foreground", children: "ID" }),
+    return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { ref, className: classes, ...props, children: [
+      type === "question" && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react28.RadioButton, { size: 16, weight: "fill", "aria-hidden": true }),
+      type === "id" && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "text-secondary-muted-foreground", children: "ID" }),
       children
     ] });
   }
@@ -3498,9 +3566,9 @@ var Badge = React52.forwardRef(
 Badge.displayName = "Badge";
 
 // src/components/Utility/Pagination.tsx
-var React53 = __toESM(require("react"), 1);
-var import_react28 = require("@phosphor-icons/react");
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var React54 = __toESM(require("react"), 1);
+var import_react29 = require("@phosphor-icons/react");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 function getPaginationItems(page, pageCount, siblings = 1) {
   const keep = /* @__PURE__ */ new Set([1, pageCount]);
   for (let p = page - siblings; p <= page + siblings; p++) if (p >= 1 && p <= pageCount) keep.add(p);
@@ -3514,10 +3582,10 @@ function getPaginationItems(page, pageCount, siblings = 1) {
   });
   return items;
 }
-var Pagination = React53.forwardRef(
+var Pagination = React54.forwardRef(
   ({ className, page, pageCount, onPageChange, variant = "full", siblings = 1, ...props }, ref) => {
     const go = (next2) => onPageChange(Math.min(pageCount, Math.max(1, next2)));
-    const previous = /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    const previous = /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       Button,
       {
         type: "button",
@@ -3526,10 +3594,10 @@ var Pagination = React53.forwardRef(
         "aria-label": "Previous page",
         disabled: page <= 1,
         onClick: () => go(page - 1),
-        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react28.ArrowLeft, { size: 16, "aria-hidden": true })
+        children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react29.ArrowLeft, { size: 16, "aria-hidden": true })
       }
     );
-    const next = /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    const next = /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
       Button,
       {
         type: "button",
@@ -3538,10 +3606,10 @@ var Pagination = React53.forwardRef(
         "aria-label": "Next page",
         disabled: page >= pageCount,
         onClick: () => go(page + 1),
-        children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react28.ArrowRight, { size: 16, "aria-hidden": true })
+        children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react29.ArrowRight, { size: 16, "aria-hidden": true })
       }
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
       "nav",
       {
         ref,
@@ -3550,14 +3618,14 @@ var Pagination = React53.forwardRef(
         ...props,
         children: [
           previous,
-          variant === "compact" ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { className: "text-body-small text-surface-foreground", "aria-live": "polite", children: [
+          variant === "compact" ? /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("span", { className: "text-body-small text-surface-foreground", "aria-live": "polite", children: [
             page,
             "/",
             pageCount
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("ul", { className: "flex items-center gap-2", children: getPaginationItems(page, pageCount, siblings).map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("li", { children: item === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { className: "inline-flex size-8 items-center justify-center rounded-sm border border-border bg-surface text-surface-foreground", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_react28.DotsThree, { size: 16, "aria-hidden": true }),
-            /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "sr-only", children: "More pages" })
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("ul", { className: "flex items-center gap-2", children: getPaginationItems(page, pageCount, siblings).map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("li", { children: item === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("span", { className: "inline-flex size-8 items-center justify-center rounded-sm border border-border bg-surface text-surface-foreground", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(import_react29.DotsThree, { size: 16, "aria-hidden": true }),
+            /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "sr-only", children: "More pages" })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
             Button,
             {
               type: "button",
@@ -3662,6 +3730,7 @@ Pagination.displayName = "Pagination";
   Slider,
   StatCard,
   StatusTag,
+  StimulusCard,
   Switch,
   TabItem,
   TabNavigation,