@drawnagency/primitives 0.1.56 → 0.1.58

package/src/components/sections/IconList/IconList.tsx

@@ -5,6 +5,7 @@ import { getIcon } from "../../../lib/icons";
 import { useEditableCollection } from "../../primitives/useEditableCollection";
 import { EditablePlainText } from "../../primitives/EditablePlainText";
 import { DragHandle, DeleteIcon, AddIcon } from "../../shared/icons";
+import { CopyPlus, Pencil } from "lucide-react";
 import { IconButton } from "../../shared/IconButton";
 import { IconPicker } from "../../primitives/IconPicker";
 
@@ -12,6 +13,7 @@ interface IconListItem {
   label: string;
   text: string;
   icon?: string;
+  dodont?: "do" | "dont";
 }
 
 interface Props {
@@ -84,10 +86,20 @@ export default function IconList({
 // ---------------------------------------------------------------------------
 
 function resolveIcon(item: IconListItem, defaultIcon: string | null | undefined) {
+  // dodont WINS over item.icon and the section default — forces the DoDontList glyph.
+  if (item.dodont === "do") return getIcon("check") ?? null;
+  if (item.dodont === "dont") return getIcon("x") ?? null;
   const id = item.icon ?? defaultIcon;
   return id ? getIcon(id) : null;
 }
 
+// Per-item icon color: green for "do", red for "dont", else the section-wide class.
+function resolveIconColor(item: IconListItem, iconClassName: string) {
+  if (item.dodont === "do") return "text-green-600";
+  if (item.dodont === "dont") return "text-red-600";
+  return iconClassName;
+}
+
 // ---------------------------------------------------------------------------
 // View mode
 // ---------------------------------------------------------------------------
@@ -115,6 +127,7 @@ function ViewIconList({
     <div className="grid gap-4 pb-4">
       {items.map((item, i) => {
         const iconEntry = resolveIcon(item, defaultIcon);
+        const iconColor = resolveIconColor(item, iconClassName);
         return (
           <div
             key={i}
@@ -126,7 +139,7 @@ function ViewIconList({
             {hasAnyIcon && (
               <div
                 data-testid="icon-list-icon"
-                className={cn("flex items-start pt-0.5", iconClassName)}
+                className={cn("flex items-start pt-0.5", iconColor)}
               >
                 {iconEntry && <iconEntry.icon size={18} />}
               </div>
@@ -191,7 +204,22 @@ function EditIconList({
     [wrappedItems, onItemsChange],
   );
 
-  const hasAnyIcon = items.some((item) => resolveIcon(item, defaultIcon));
+  const duplicateItem = useCallback(
+    (index: number) => {
+      const copy = { ...wrappedItems[index].data };
+      const next = [
+        ...wrappedItems.slice(0, index + 1).map((w) => w.data),
+        copy,
+        ...wrappedItems.slice(index + 1).map((w) => w.data),
+      ];
+      onItemsChange(next);
+    },
+    [wrappedItems, onItemsChange],
+  );
+
+  // In edit mode the icon column always renders — even items with no icon need
+  // the always-present picker trigger (icon + Do/Don't tagging) in the icon cell.
+  const hasAnyIcon = true;
 
   return (
     <div className="group/list relative grid gap-4 pb-4">
@@ -213,6 +241,7 @@ function EditIconList({
           onReorder={onReorder}
           onRemove={onRemove}
           onUpdateItem={(patch) => updateItem(index, patch)}
+          onDuplicate={() => duplicateItem(index)}
         />
       ))}
 
@@ -252,6 +281,7 @@ function EditableRow({
   onReorder,
   onRemove,
   onUpdateItem,
+  onDuplicate,
 }: {
   id: string;
   index: number;
@@ -268,14 +298,17 @@ function EditableRow({
   onReorder: (from: number, to: number) => void;
   onRemove: (id: string) => void;
   onUpdateItem: (patch: Partial<IconListItem>) => void;
+  onDuplicate: () => void;
 }) {
   const rowRef = useRef<HTMLDivElement>(null);
   const handleRef = useRef<HTMLButtonElement>(null);
   const [iconHover, setIconHover] = useState(false);
   const [pickerOpen, setPickerOpen] = useState(false);
+  const [editingSuppressed, setEditingSuppressed] = useState(false);
 
   const iconEntry = resolveIcon(item, defaultIcon);
   const effectiveIconId = item.icon ?? defaultIcon ?? null;
+  const iconColor = resolveIconColor(item, iconClassName);
 
   useEffect(() => {
     const row = rowRef.current;
@@ -324,6 +357,13 @@ function EditableRow({
 
   const isDropTarget = dragState.targetId === id && dragState.sourceId !== id;
 
+  const onEditableActivity = (e: React.SyntheticEvent) => {
+    const t = e.target as HTMLElement;
+    if (t.matches?.("input, textarea, [contenteditable], [contenteditable='true']")) {
+      setEditingSuppressed(true);
+    }
+  };
+
   return (
     <div
       ref={rowRef}
@@ -332,55 +372,60 @@ function EditableRow({
         hasAnyIcon ? "grid-cols-[24px_1fr]" : "grid-cols-1",
         isDropTarget && "border-t-2 border-primary",
       )}
+      onFocusCapture={onEditableActivity}
+      onInput={onEditableActivity}
+      onMouseMove={() => setEditingSuppressed(false)}
     >
-      {/* Drag handle — absolute in left gutter, no layout shift */}
-      <IconButton
-        ref={handleRef}
-        icon={<DragHandle size={16} />}
-        label="Drag to reorder"
-        size="sm"
-        className={cn(
-          "absolute -left-7 top-0 shrink-0 cursor-grab rounded-md text-base-contrast-light/80 hover:bg-base-contrast-light/10 hover:text-base-contrast active:cursor-grabbing",
-          iconHover
-            ? "opacity-0 pointer-events-none"
-            : "opacity-0 group-hover/row:opacity-100 no-hover:opacity-100",
-        )}
-        tabIndex={-1}
-      />
 
-      {/* Icon — matches ViewIconList layout: 24px column, flex items-start pt-0.5 */}
+      {/* Icon — matches ViewIconList layout: 24px column, flex items-start pt-0.5.
+          A SINGLE always-present trigger shows the current effective glyph
+          (resolveIcon returns the forced check/x for tagged items) and opens
+          the IconPicker, which carries both the curated grid (None mode) and
+          the Do/Don't tiles (Do-Don't mode). Reachable for every item, tagged
+          or not, so tags can be edited or cleared via the picker. */}
       {hasAnyIcon && (
         <div
-          className={cn("relative flex items-start pt-0.5", iconClassName)}
+          data-testid="icon-list-icon"
+          className={cn("relative flex items-start pt-0.5", iconColor)}
           onMouseEnter={() => setIconHover(true)}
           onMouseLeave={() => setIconHover(false)}
         >
-          {iconEntry ? (
-            <button
-              className="cursor-pointer transition-opacity hover:opacity-70"
-              aria-label="Change icon"
-              onClick={() => setPickerOpen((prev) => !prev)}
-            >
+          <button
+            className="cursor-pointer transition-opacity hover:opacity-70"
+            aria-label="Change icon"
+            onClick={() => setPickerOpen((prev) => !prev)}
+          >
+            {iconHover && !pickerOpen ? (
+              <Pencil size={18} className="text-base-contrast-light" />
+            ) : iconEntry ? (
               <iconEntry.icon size={18} />
-            </button>
-          ) : null}
-
-          {iconHover && !pickerOpen && iconEntry && (
-            <span className="pointer-events-none absolute right-full mr-3 top-0.5 whitespace-nowrap text-xs text-base-contrast-light/80">
-              Edit
-            </span>
-          )}
+            ) : (
+              <span className="flex h-[18px] w-[18px] items-center justify-center rounded-sm border border-dashed border-base-contrast-light/40" />
+            )}
+          </button>
 
           {pickerOpen && (
             <div className="absolute top-full left-0 z-50 mt-1">
               <IconPicker
                 selected={effectiveIconId}
-                showRemove={false}
+                showRemove={true}
+                allowDoDont={true}
+                dodont={item.dodont}
                 onSelect={(newIcon) => {
-                  if (newIcon !== null) onUpdateItem({ icon: newIcon });
+                  onUpdateItem({ icon: newIcon ?? undefined, dodont: undefined });
                   setPickerOpen(false);
                   setIconHover(false);
                 }}
+                onSelectDoDont={(v) => {
+                  onUpdateItem({ dodont: v });
+                  // Switching to None mode (v === undefined) clears the tag but
+                  // keeps the picker open so the grid is reachable; choosing a
+                  // Do/Don't tile commits and closes.
+                  if (v !== undefined) {
+                    setPickerOpen(false);
+                    setIconHover(false);
+                  }
+                }}
                 onClose={() => {
                   setPickerOpen(false);
                   setIconHover(false);
@@ -413,15 +458,40 @@ function EditableRow({
         />
       </div>
 
-      {/* Delete button — absolute positioned, no layout shift */}
-      <IconButton
-        icon={<DeleteIcon size={14} />}
-        label="Delete item"
-        size="sm"
-        intent="destructive"
-        onClick={() => onRemove(id)}
-        className="absolute -right-7 top-0 opacity-0 group-hover/row:opacity-100 no-hover:opacity-100"
-      />
+      {/* Per-row controls — drag grip + duplicate + delete, overlaid at top-right of the text.
+          Hidden while the user is actively editing this row's text; restored on cursor movement. */}
+      <div
+        className={cn(
+          "absolute right-1 top-1 z-10 flex items-center gap-1",
+          editingSuppressed
+            ? "opacity-0 pointer-events-none"
+            : "opacity-0 group-hover/row:opacity-100 no-hover:opacity-100",
+        )}
+      >
+        <IconButton
+          ref={handleRef}
+          icon={<DragHandle size={14} />}
+          label="Drag to reorder"
+          size="sm"
+          className="cursor-grab rounded bg-base/80 p-1 shadow-sm text-base-contrast-light/80 hover:text-base-contrast active:cursor-grabbing"
+          tabIndex={-1}
+        />
+        <button
+          aria-label="Duplicate item"
+          onClick={onDuplicate}
+          className="cursor-pointer rounded bg-base/80 p-1 shadow-sm text-base-contrast-light hover:text-primary"
+        >
+          <CopyPlus size={14} />
+        </button>
+        <IconButton
+          icon={<DeleteIcon size={14} />}
+          label="Delete item"
+          size="sm"
+          intent="destructive"
+          onClick={() => onRemove(id)}
+          className="bg-base/80 shadow-sm"
+        />
+      </div>
     </div>
   );
 }

package/src/components/sections/IconList/IconListSettings.tsx

@@ -13,7 +13,7 @@ export function IconListSettings({
   icon: string | null;
   showLabel: boolean;
   stackText: boolean;
-  onChange: (values: { icon: string | null; showLabel: boolean; stackText: boolean }) => void;
+  onChange: (result: { content: Record<string, unknown>; options: Record<string, unknown> }) => void;
 }) {
   const [icon, setIcon] = useState(initialIcon);
   const [showLabel, setShowLabel] = useState(initialShowLabel);
@@ -21,7 +21,7 @@ export function IconListSettings({
   const [pickerOpen, setPickerOpen] = useState(false);
 
   const emit = (overrides: Partial<{ icon: string | null; showLabel: boolean; stackText: boolean }>) =>
-    onChange({ icon, showLabel, stackText, ...overrides });
+    onChange({ content: {}, options: { icon, showLabel, stackText, ...overrides } });
 
   const showIcons = icon !== null;
   const iconEntry = icon ? getIcon(icon) : null;

package/src/components/sections/IconList/index.tsx

@@ -7,7 +7,7 @@ import { IconListSettings } from "./IconListSettings";
 const schema = z.object({
   type: z.literal("icon_list"),
   content: z.object({
-    items: z.array(z.object({ label: z.string(), text: z.string(), icon: z.string().optional() })),
+    items: z.array(z.object({ label: z.string(), text: z.string(), icon: z.string().optional(), dodont: z.enum(["do", "dont"]).optional() })),
   }),
   options: z.object({
     icon: z.string().nullable().optional(),

package/src/components/sections/Media/MediaBlock.tsx

@@ -0,0 +1,103 @@
+import type { SingleMediaReference } from "../../../schemas/shared";
+import type { LinkValue } from "../../../schemas/link";
+import { Check, X } from "lucide-react";
+import { cn } from "../../../lib/cn";
+import { ResolvedMedia } from "../../primitives/ResolvedMedia";
+import { ImageDropZone } from "../../primitives/ImageDropZone";
+import { EditablePlainText } from "../../primitives/EditablePlainText";
+import { useMediaLibrary } from "../../shell/MediaLibraryContext";
+
+export interface MediaBlockProps {
+  refValue: SingleMediaReference;
+  options: { square?: boolean; showCaption?: boolean; border?: boolean; objectFit?: "cover" | "contain" };
+  /** Per-item link (viewer: already resolved to kind:"external" upstream). */
+  link?: LinkValue;
+  /** Per-item do/dont badge. */
+  dodont?: "do" | "dont";
+  isEditMode: boolean;
+  onRefChange?: (ref: SingleMediaReference) => void;
+}
+
+export function MediaBlock({ refValue, options, link, dodont, isEditMode, onRefChange }: MediaBlockProps) {
+  const mediaLibrary = useMediaLibrary();
+  // Per-item ref value overrides the inherited option (childDefaults); default contain.
+  const fit = refValue.objectFit ?? options.objectFit;
+  const fitClass = fit === "cover" ? "object-cover" : "object-contain";
+  const showBorder = refValue.border ?? options.border;
+  const captionStr = refValue.caption
+    ? Array.isArray(refValue.caption) ? refValue.caption.join("\n") : refValue.caption
+    : "";
+
+  const replace = onRefChange ? (imageId: string) => onRefChange({ ...refValue, imageId }) : undefined;
+
+  const resolved = (
+    <ResolvedMedia
+      imageId={refValue.imageId || undefined}
+      className="h-full w-full"
+      imgClassName={fitClass}
+      invertFrom={refValue.invertFrom}
+    />
+  );
+
+  let media = isEditMode && replace ? (
+    <ImageDropZone onImageSelected={replace} className="h-full w-full">
+      {resolved}
+    </ImageDropZone>
+  ) : resolved;
+
+  // Viewer link wrapper (CTAButton pattern). resolveInternalLinks has collapsed
+  // internal links to kind:"external" before render. No wrapper in edit mode.
+  if (!isEditMode && link && link.kind === "external" && link.href) {
+    media = (
+      <a href={link.href} target={link.target} className="group block">
+        {media}
+      </a>
+    );
+  }
+
+  const onImageClick = isEditMode && replace && mediaLibrary
+    ? () => mediaLibrary.openSelectModal((imageId) => replace(imageId))
+    : undefined;
+
+  return (
+    <figure>
+      {dodont && (
+        <div className="flex h-10 items-center justify-center pb-1">
+          {dodont === "do"
+            ? <Check size={28} className="text-green-600" />
+            : <X size={28} className="text-red-600" />}
+        </div>
+      )}
+      <div
+        data-testid="media-open-surface"
+        className={cn(
+          "overflow-hidden rounded-md",
+          showBorder && "border border-base-200",
+          options.square && "aspect-square",
+          onImageClick && "cursor-pointer",
+        )}
+        onClick={onImageClick}
+        onPointerDown={onImageClick ? (e) => e.stopPropagation() : undefined}
+      >
+        {media}
+      </div>
+
+      {options.showCaption && (
+        <figcaption className="mt-2 min-h-[1em] text-sm text-base-contrast-light">
+          {isEditMode && onRefChange ? (
+            <EditablePlainText
+              tag="span"
+              value={captionStr}
+              onChange={(caption) => onRefChange({ ...refValue, caption: caption || undefined })}
+              isEditMode={true}
+              placeholder="Caption"
+              className="block min-h-[1em]"
+            />
+          ) : (
+            captionStr || " "
+          )}
+        </figcaption>
+      )}
+    </figure>
+  );
+}

package/src/components/sections/Media/index.tsx

@@ -0,0 +1,85 @@
+import { defineSection } from "../../../lib/registry";
+import { z } from "zod";
+import { Image as ImageIcon } from "lucide-react";
+import { SingleMediaReferenceSchema } from "../../../schemas/shared";
+import { LinkValueSchema, DEFAULT_LINK } from "../../../schemas/link";
+import { MediaBlock } from "./MediaBlock";
+
+const schema = z.object({
+  type: z.literal("media"),
+  content: z.object({
+    ref: SingleMediaReferenceSchema,
+    link: LinkValueSchema.optional(),
+    dodont: z.enum(["do", "dont"]).optional(),
+  }),
+  options: z
+    .object({
+      square: z.boolean().optional(),
+      showCaption: z.boolean().optional(),
+      border: z.boolean().optional(),
+      objectFit: z.enum(["cover", "contain"]).optional(),
+    })
+    .default({}),
+});
+
+export default defineSection({
+  type: "media",
+  label: "Media",
+  icon: <ImageIcon size={18} />,
+  schema,
+  component: ({ content, options, onChange }) => (
+    <MediaBlock
+      refValue={content.content.ref}
+      options={(options ?? {}) as { square?: boolean; showCaption?: boolean; border?: boolean; objectFit?: "cover" | "contain" }}
+      link={content.content.link}
+      dodont={content.content.dodont}
+      isEditMode={!!onChange}
+      onRefChange={
+        onChange ? (ref) => onChange({ ...content, content: { ...content.content, ref } }) : undefined
+      }
+    />
+  ),
+  defaults: () => ({
+    type: "media" as const,
+    content: { ref: { type: "image" as const, imageId: "" } },
+    options: {},
+  }),
+  getLabel: () => "Media",
+  getThumbnails: (content) =>
+    content.content.ref.imageId
+      ? [{ type: "image" as const, src: content.content.ref.imageId }]
+      : [],
+  settings: {
+    square: { type: "checkbox", label: "Square aspect ratio", default: false },
+    showCaption: { type: "checkbox", label: "Show caption", default: false },
+    border: { type: "checkbox", label: "Border", default: false },
+    objectFit: {
+      type: "select",
+      label: "Image fit",
+      default: "contain",
+      options: [
+        { label: "Contain", value: "contain" },
+        { label: "Cover", value: "cover" },
+      ],
+    },
+    link: { type: "link", label: "Link", default: DEFAULT_LINK, target: "content" },
+    dodont: {
+      type: "select",
+      label: "Do / Don't",
+      target: "content",
+      default: "",
+      emptyIsUndefined: true,
+      options: [
+        { label: "None", value: "" },
+        { label: "Do", value: "do" },
+        { label: "Don't", value: "dont" },
+      ],
+    },
+  },
+  inheritableSettings: ["square", "showCaption", "border", "objectFit"],
+  settingsTabs: [
+    { label: "Display", fields: ["square", "showCaption", "border", "objectFit"] },
+    { label: "Link", fields: ["link"] },
+    { label: "Do / Don't", fields: ["dodont"] },
+  ],
+});

package/src/components/sections/Prose/index.tsx

@@ -14,6 +14,7 @@ export default defineSection({
   label: "Prose",
   icon: <AlignLeft size={18} />,
   schema,
+  richTextFields: ["body"],
   component: ({ content, onChange }) => (
     <Prose body={content.content.body} onChange={onChange ? (c) => onChange(c as typeof content) : undefined} />
   ),

package/src/components/sections/Spacer/Spacer.tsx

@@ -0,0 +1,6 @@
+// Spacer view cell — deliberately empty. It occupies its grid column so the gap is
+// preserved on publish. The hide-on-collapse class (which depends on the parent's column
+// count) is applied by the Container to the cell wrapper, not here.
+export default function Spacer() {
+  return <div data-spacer aria-hidden="true" className="h-full" />;
+}

package/src/components/sections/Spacer/index.tsx

@@ -0,0 +1,18 @@
+import { defineSection } from "../../../lib/registry";
+import { z } from "zod";
+import { SquareDashed } from "lucide-react";
+import Spacer from "./Spacer";
+
+const schema = z.object({
+  type: z.literal("spacer"),
+  content: z.object({}).default({}),
+});
+
+export default defineSection({
+  type: "spacer",
+  label: "Spacer",
+  icon: <SquareDashed size={18} />,
+  schema,
+  component: () => <Spacer />,
+  defaults: () => ({ type: "spacer" as const, content: {} }),
+});

package/src/components/sections/all-sections.ts

@@ -2,13 +2,12 @@ import linkHeading from "./LinkHeading";
 import subHeading from "./SubHeading";
 import subSubHeading from "./SubSubHeading";
 import prose from "./Prose";
-import mediaGrid from "./MediaGrid";
-import splitContent from "./SplitContent";
+import media from "./Media";
 import button from "./Button";
 import colors from "./Colors";
-import doDontList from "./DoDontList";
-import doDontImageGrid from "./DoDontMediaGrid";
 import iconList from "./IconList";
+import container from "./Container";
+import spacer from "./Spacer";
 
 /**
  * The single ordered list of built-in section definitions.
@@ -18,6 +17,10 @@ import iconList from "./IconList";
  * array, so the two can no longer drift — previously they hand-maintained
  * parallel 11-entry lists, and a section added to one but not the other would
  * make the editor render a type that save rejects with a 400 (or vice versa).
+ *
+ * Retired: split_content, media_grid, do_dont_grid, do_dont — fully decomposable
+ * into container sections. The loader fallback in mergeSiteContent transforms any
+ * legacy-typed JSON to container before validation.
  */
 // Intentionally un-annotated: each section is SectionDefinition<its-own-shape>,
 // and a wider `SectionDefinition<unknown>[]` annotation isn't assignable from
@@ -28,11 +31,10 @@ export const allSectionDefs = [
   subHeading,
   subSubHeading,
   prose,
-  mediaGrid,
-  splitContent,
+  media,
   button,
   colors,
-  doDontList,
-  doDontImageGrid,
   iconList,
+  container,
+  spacer,
 ];

package/src/components/sections/register-schemas.ts

@@ -1,4 +1,4 @@
-import { registerSchema } from "../../lib/registry";
+import { registerSchema, registerRichText } from "../../lib/registry";
 import { allSectionDefs } from "./all-sections";
 
 // NOTE: this still imports the full (component-bearing) section modules via the
@@ -10,7 +10,10 @@ import { allSectionDefs } from "./all-sections";
 let _ensured = false;
 export function ensureSchemasRegistered(): number {
   if (!_ensured) {
-    allSectionDefs.forEach((def) => registerSchema(def.type, def.schema));
+    allSectionDefs.forEach((def) => {
+      registerSchema(def.type, def.schema);
+      if (def.richTextFields) registerRichText(def.type, def.richTextFields);
+    });
     _ensured = true;
   }
   return allSectionDefs.length;

package/src/components/shared/Tabs.tsx

@@ -0,0 +1,63 @@
+import { useState, type ReactNode } from "react";
+import { cn } from "../../lib/cn";
+
+export interface TabItem {
+  id: string;
+  label: string;
+  content: ReactNode;
+}
+
+interface TabsProps {
+  tabs: TabItem[];
+  /** Initial active tab when uncontrolled. Defaults to the first tab. */
+  defaultTabId?: string;
+  /** When provided, the component is controlled by the parent. */
+  activeTabId?: string;
+  onTabChange?: (id: string) => void;
+  /**
+   * When true, the tab-bar row uses -mx-6 to break out of the parent's px-6 padding
+   * (e.g. EditorModal's content wrapper) and re-pads with px-6 so buttons stay aligned.
+   * The tab panel inherits the parent's padding unchanged.
+   * Use only when the parent container has px-6; leave false for noPadding contexts.
+   */
+  fullBleedTabBar?: boolean;
+}
+
+export function Tabs({ tabs, defaultTabId, activeTabId, onTabChange, fullBleedTabBar }: TabsProps) {
+  const [uncontrolledId, setUncontrolledId] = useState(defaultTabId ?? tabs[0]?.id);
+  const isControlled = activeTabId !== undefined;
+  const activeId = isControlled ? activeTabId : uncontrolledId;
+  const activeTab = tabs.find((t) => t.id === activeId) ?? tabs[0];
+
+  function handleSelect(id: string) {
+    if (!isControlled) setUncontrolledId(id);
+    onTabChange?.(id);
+  }
+
+  return (
+    <div className="flex flex-1 flex-col overflow-hidden">
+      <div className={cn("border-b border-base-200", fullBleedTabBar && "-mx-6 px-6")}>
+        <div className="flex" role="tablist">
+          {tabs.map((tab) => (
+            <button
+              key={tab.id}
+              type="button"
+              role="tab"
+              aria-selected={activeTab?.id === tab.id}
+              onClick={() => handleSelect(tab.id)}
+              className={cn(
+                "cursor-pointer px-4 py-2 text-sm font-medium border-b-2 -mb-px",
+                activeTab?.id === tab.id
+                  ? "border-brand text-brand"
+                  : "border-transparent text-base-contrast-light hover:text-base-contrast",
+              )}
+            >
+              {tab.label}
+            </button>
+          ))}
+        </div>
+      </div>
+      <div role="tabpanel">{activeTab?.content}</div>
+    </div>
+  );
+}