From 635fc2140877037cd8e94f7bb7158de1127bf960 Mon Sep 17 00:00:00 2001
From: Paulo Ferreira Jorge <mfjpaulo@gmail.com>
Date: Tue, 23 Jun 2026 17:14:19 +0100
Subject: [PATCH 1/2] Implement Chart Style Options Menu

---
 .../components/elements/card/base.module.scss |  17 --
 .../web/src/components/elements/card/base.tsx |  17 +-
 .../elements/card/chart/chart.module.scss     |  19 ++-
 .../components/elements/card/chart/chart.tsx  | 148 ++++++++++++++----
 .../card/chart/menu_chart_options.module.scss |  73 +++++++++
 .../card/chart/menu_chart_options.tsx         | 127 +++++++++++++++
 .../elements/card/footer.module.scss          |   4 +
 .../src/components/elements/card/footer.tsx   |  10 ++
 .../web/src/components/elements/card/index.ts |   2 +
 .../components/elements/card/text.module.scss |   7 +
 .../web/src/components/elements/card/text.tsx |  76 ++++++++-
 .../primitives/icons/bar_chart_horizontal.tsx |  18 +++
 .../{bar_chart.tsx => bar_chart_outlined.tsx} |   2 +-
 .../primitives/icons/bar_chart_vertical.tsx   |  18 +++
 .../primitives/icons/line_graph_double.tsx    |  18 +++
 .../{line_graph.tsx => line_graph_single.tsx} |   2 +-
 .../in_front_of_canvas/selection.tsx          |   4 +-
 .../components/scopes/atlas/shapes/card.tsx   | 106 +++----------
 dataweaver/packages/tokens/src/colors.json    |   1 +
 19 files changed, 511 insertions(+), 158 deletions(-)
 create mode 100644 dataweaver/apps/web/src/components/elements/card/chart/menu_chart_options.module.scss
 create mode 100644 dataweaver/apps/web/src/components/elements/card/chart/menu_chart_options.tsx
 create mode 100644 dataweaver/apps/web/src/components/elements/card/footer.module.scss
 create mode 100644 dataweaver/apps/web/src/components/elements/card/footer.tsx
 create mode 100644 dataweaver/apps/web/src/components/primitives/icons/bar_chart_horizontal.tsx
 rename dataweaver/apps/web/src/components/primitives/icons/{bar_chart.tsx => bar_chart_outlined.tsx} (89%)
 create mode 100644 dataweaver/apps/web/src/components/primitives/icons/bar_chart_vertical.tsx
 create mode 100644 dataweaver/apps/web/src/components/primitives/icons/line_graph_double.tsx
 rename dataweaver/apps/web/src/components/primitives/icons/{line_graph.tsx => line_graph_single.tsx} (83%)

diff --git a/dataweaver/apps/web/src/components/elements/card/base.module.scss b/dataweaver/apps/web/src/components/elements/card/base.module.scss
index 4bf8ec78..0fa77bde 100644
--- a/dataweaver/apps/web/src/components/elements/card/base.module.scss
+++ b/dataweaver/apps/web/src/components/elements/card/base.module.scss
@@ -55,20 +55,3 @@
     transform: translateY(var(--actions-height));
   }
 }
-
-.content {
-  display: flex;
-  flex-shrink: 0;
-  flex-direction: column;
-  padding: 28px;
-}
-
-.footer {
-  flex-shrink: 0;
-  padding: 0 28px 18px;
-
-  [data-loading="true"] & {
-    visibility: hidden;
-    pointer-events: none;
-  }
-}
diff --git a/dataweaver/apps/web/src/components/elements/card/base.tsx b/dataweaver/apps/web/src/components/elements/card/base.tsx
index e6130c8f..86549a60 100644
--- a/dataweaver/apps/web/src/components/elements/card/base.tsx
+++ b/dataweaver/apps/web/src/components/elements/card/base.tsx
@@ -26,22 +26,21 @@ interface CardAction {
 
   /** @default false */
   isDisabled?: boolean;
+
+  /** @default false */
+  isActive?: boolean;
 }
 
 interface CardProps extends CardState {
   actions: CardAction[];
-  content: ReactNode;
-
-  /** **Note**: This isn't shown while `isLoading`. */
-  footer?: ReactNode;
+  children: ReactNode;
 }
 
 export const CardBase = ({
   isLoading,
   selection,
   actions,
-  content,
-  footer,
+  children,
 }: CardProps) => {
   const getCachedCanScroll = useCachedResizeValues((element: HTMLElement) => {
     return element.scrollHeight > element.clientHeight;
@@ -62,6 +61,7 @@ export const CardBase = ({
             variant="flat"
             tone="card-action"
             aria-label={action.label}
+            aria-pressed={action.isActive}
             // Prevent tldraw from triggering canvas gestures (e.g. dragging)
             onPointerDown={(event) => event.stopPropagation()}
             onClick={action.onClick}
@@ -80,10 +80,7 @@ export const CardBase = ({
           }
         }}
       >
-        <div className={s.content}>{content}</div>
-        <div className={s.footer} inert={isLoading}>
-          {footer}
-        </div>
+        {children}
       </div>
     </article>
   );
diff --git a/dataweaver/apps/web/src/components/elements/card/chart/chart.module.scss b/dataweaver/apps/web/src/components/elements/card/chart/chart.module.scss
index 75168115..ce785ddb 100644
--- a/dataweaver/apps/web/src/components/elements/card/chart/chart.module.scss
+++ b/dataweaver/apps/web/src/components/elements/card/chart/chart.module.scss
@@ -1,15 +1,22 @@
+.container {
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
+  padding: 28px;
+}
+
 .header-container {
   display: flex;
   flex-direction: column;
   row-gap: 8px;
   margin-bottom: 16px;
   color: rgb(var(--color-card-content));
-}
 
-.title {
-  @include type-title;
-}
+  .title {
+    @include type-title;
+  }
 
-.description {
-  @include type-body-medium;
+  .description {
+    @include type-body-medium;
+  }
 }
diff --git a/dataweaver/apps/web/src/components/elements/card/chart/chart.tsx b/dataweaver/apps/web/src/components/elements/card/chart/chart.tsx
index 03f80ad2..fe09f50c 100644
--- a/dataweaver/apps/web/src/components/elements/card/chart/chart.tsx
+++ b/dataweaver/apps/web/src/components/elements/card/chart/chart.tsx
@@ -1,13 +1,25 @@
 'use client';
 
+import { AnimatePresence } from 'motion/react';
+import { useState } from 'react';
+import { type TLShapeId, useEditor } from 'tldraw';
+import { Button } from '~/components/elements/button';
+import { Card } from '~/components/elements/card';
 import type { CardState } from '~/components/elements/card/base';
 import { Skeleton } from '~/components/elements/skeleton';
-import { IconLineGraph } from '~/components/primitives/icons/line_graph';
+import { IconBarChartOutlined } from '~/components/primitives/icons/bar_chart_outlined';
+import { IconDelete } from '~/components/primitives/icons/delete';
+import { IconExport } from '~/components/primitives/icons/export';
+import { IconLineGraphSingle } from '~/components/primitives/icons/line_graph_single';
+import { IconPencil } from '~/components/primitives/icons/pencil';
 import { IconTable } from '~/components/primitives/icons/table';
+import { useExportActions } from '~/components/scopes/atlas/export_provider';
+import { useQueryActions } from '~/components/scopes/atlas/query_provider';
 import s from './chart.module.scss';
 import { ConditionalTabs } from './conditional_tabs';
 import { DataChartLine } from './data_chart_line';
 import { DataTable } from './data_table';
+import { type ChartStyle, MenuChartOptions } from './menu_chart_options';
 
 export interface ChartDatum {
   year: number;
@@ -18,9 +30,11 @@ export interface ChartDatum {
 const CHART_WIDTH = 356;
 const CHART_HEIGHT = 200;
 
-export interface CardChartProps extends Pick<CardState, 'isLoading'> {
+export interface CardChartProps extends CardState {
+  id: TLShapeId;
   title?: string;
   description?: string;
+  followUp?: string;
 
   // TODO: Atm data rendered within the card is very specific to the emissions
   // dataset. Let's make it more generic once we have real data to work with
@@ -28,44 +42,110 @@ export interface CardChartProps extends Pick<CardState, 'isLoading'> {
 }
 
 export const CardChart = ({
+  id,
   isLoading,
-  data,
+  selection,
   title,
   description,
+  followUp,
+  data,
 }: CardChartProps) => {
+  const editor = useEditor();
+
+  const { open: openExport } = useExportActions();
+  const { runPrompt } = useQueryActions();
+
+  // TODO: Support the different chart styles (for now we always show bar chart)
+  const [selectedStyle, setSelectedStyle] =
+    useState<ChartStyle>('bar-vertical');
+  const [isStyleMenuOpen, setIsStyleMenuOpen] = useState(false);
+
   return (
-    <>
-      {(title || description) && (
-        <div className={s['header-container']}>
-          {title && <h2 className={s.title}>{title}</h2>}
-          {description && <p className={s.description}>{description}</p>}
-        </div>
-      )}
+    <Card.Base
+      isLoading={isLoading}
+      selection={selection}
+      actions={[
+        {
+          icon: IconBarChartOutlined,
+          label: 'Chart options',
+          isDisabled: isLoading,
+          isActive: isStyleMenuOpen,
+          onClick: () => setIsStyleMenuOpen((isOpen) => !isOpen),
+        },
+        {
+          icon: IconExport,
+          label: 'Export',
+          isDisabled: isLoading,
+          onClick: () => {
+            editor.select(id);
+            openExport();
+          },
+        },
+        {
+          icon: IconDelete,
+          label: 'Delete',
+          onClick: () => editor.deleteShapes([id]),
+        },
+      ]}
+    >
+      <div className={s.container}>
+        {(title || description) && (
+          <div className={s['header-container']}>
+            {title && <h2 className={s.title}>{title}</h2>}
+            {description && <p className={s.description}>{description}</p>}
+          </div>
+        )}
 
-      {isLoading || !data ? (
-        <Skeleton />
-      ) : (
-        <ConditionalTabs
-          tabs={[
-            {
-              icon: IconLineGraph,
-              label: 'Chart',
-              children: (
-                <DataChartLine
-                  data={data}
-                  width={CHART_WIDTH}
-                  height={CHART_HEIGHT}
-                />
-              ),
-            },
-            {
-              icon: IconTable,
-              label: 'Table',
-              children: <DataTable data={data} />,
-            },
-          ]}
-        />
+        {isLoading || !data ? (
+          <Skeleton />
+        ) : (
+          <ConditionalTabs
+            tabs={[
+              {
+                icon: IconLineGraphSingle,
+                label: 'Chart',
+                children: (
+                  <DataChartLine
+                    data={data}
+                    width={CHART_WIDTH}
+                    height={CHART_HEIGHT}
+                  />
+                ),
+              },
+              {
+                icon: IconTable,
+                label: 'Table',
+                children: <DataTable data={data} />,
+              },
+            ]}
+          />
+        )}
+      </div>
+
+      {followUp && !isLoading && (
+        <Card.Footer>
+          <Button
+            size="small"
+            variant="flat"
+            tone="accent-subtle"
+            icon={IconPencil}
+            onPointerDown={(event) => event.stopPropagation()}
+            onClick={() => runPrompt(followUp)}
+          >
+            {followUp}
+          </Button>
+        </Card.Footer>
       )}
-    </>
+
+      <AnimatePresence>
+        {isStyleMenuOpen && (
+          <MenuChartOptions
+            value={selectedStyle}
+            onConfirmSelectionChange={setSelectedStyle}
+            onClose={() => setIsStyleMenuOpen(false)}
+          />
+        )}
+      </AnimatePresence>
+    </Card.Base>
   );
 };
diff --git a/dataweaver/apps/web/src/components/elements/card/chart/menu_chart_options.module.scss b/dataweaver/apps/web/src/components/elements/card/chart/menu_chart_options.module.scss
new file mode 100644
index 00000000..ce5ab206
--- /dev/null
+++ b/dataweaver/apps/web/src/components/elements/card/chart/menu_chart_options.module.scss
@@ -0,0 +1,73 @@
+.container {
+  position: absolute;
+  inset: 0;
+  z-index: $z-index-above-content;
+  display: grid;
+  background: rgb(var(--color-card-overlay-backdrop) / 30%);
+}
+
+.backdrop {
+  z-index: $z-index-behind-content;
+  grid-area: 1 / 1;
+  height: 100%;
+  background: rgb(var(--color-card-accent-subtle) / 30%);
+}
+
+.content-container {
+  display: flex;
+  flex-direction: column;
+  grid-area: 1 / 1;
+  place-self: center center;
+  width: 300px;
+  max-width: 100%;
+  background: rgb(var(--color-card-surface));
+  border-radius: var(--corner-size);
+  box-shadow: var(--shadow-elevated);
+}
+
+.title {
+  @include type-title;
+
+  padding: 16px 16px 10px;
+  color: rgb(var(--color-card-content));
+}
+
+.options-container {
+  display: flex;
+  flex-direction: column;
+  row-gap: 2px;
+  padding-inline: 12px;
+
+  .option-container {
+    column-gap: 12px;
+    align-items: center;
+    height: 40px;
+    padding-inline: 12px;
+    border-radius: var(--border-radius-small);
+    transition: background 0.2s $ease-linear;
+
+    @include hover {
+      background: rgb(var(--color-card-accent-subtle));
+    }
+
+    .option-icon {
+      flex-shrink: 0;
+      width: 24px;
+      height: 24px;
+      color: rgb(var(--color-card-content));
+    }
+
+    .option-label {
+      @include type-body-medium;
+
+      color: rgb(var(--color-card-content));
+    }
+  }
+}
+
+.actions-container {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  padding: 32px 18px 20px 0;
+}
diff --git a/dataweaver/apps/web/src/components/elements/card/chart/menu_chart_options.tsx b/dataweaver/apps/web/src/components/elements/card/chart/menu_chart_options.tsx
new file mode 100644
index 00000000..84f3aaea
--- /dev/null
+++ b/dataweaver/apps/web/src/components/elements/card/chart/menu_chart_options.tsx
@@ -0,0 +1,127 @@
+'use client';
+
+import { EASE_LINEAR } from '@package/tokens/ts';
+import { m } from 'motion/react';
+import type { ComponentPropsWithRef, ComponentType } from 'react';
+import { useRef, useState } from 'react';
+import { Button } from '~/components/elements/button';
+import { Radio } from '~/components/elements/radio';
+import { IconBarChartHorizontal } from '~/components/primitives/icons/bar_chart_horizontal';
+import { IconBarChartVertical } from '~/components/primitives/icons/bar_chart_vertical';
+import { IconLineGraphDouble } from '~/components/primitives/icons/line_graph_double';
+import { ScreenReaderOnly } from '~/components/primitives/screen_reader';
+import { useFocusTrap } from '~/hooks/use_focus_trap';
+import { useKeydown } from '~/hooks/use_keydown';
+import s from './menu_chart_options.module.scss';
+
+export type ChartStyle = 'bar-vertical' | 'bar-horizontal' | 'line';
+
+interface ChartStyleOption {
+  key: ChartStyle;
+  label: string;
+  icon: ComponentType<ComponentPropsWithRef<'svg'>>;
+}
+
+const CHART_STYLE_OPTIONS: ChartStyleOption[] = [
+  {
+    key: 'bar-vertical',
+    label: 'Bar chart vertical',
+    icon: IconBarChartVertical,
+  },
+  {
+    key: 'bar-horizontal',
+    label: 'Bar chart horizontal',
+    icon: IconBarChartHorizontal,
+  },
+  {
+    key: 'line',
+    label: 'Line chart',
+    icon: IconLineGraphDouble,
+  },
+] as const;
+
+interface MenuChartOptionsProps {
+  value: ChartStyle;
+  onConfirmSelectionChange: (style: ChartStyle) => void;
+  onClose: () => void;
+}
+
+export const MenuChartOptions = ({
+  value,
+  onClose,
+  onConfirmSelectionChange,
+}: MenuChartOptionsProps) => {
+  const containerRef = useRef<HTMLElement>(null);
+
+  const [selectedValue, setSelectedValue] = useState<ChartStyle>(value);
+
+  useKeydown('Escape', onClose);
+
+  // TODO: For now this doesn't seem to really work due to TLDraw consuming
+  // tab events. Review focus trap implementation once we review how TLDraw
+  // handles focus and keyboard events in general, and adjust as needed
+  useFocusTrap(containerRef);
+
+  return (
+    <m.dialog
+      className={s.container}
+      open
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 0.1, ease: EASE_LINEAR }}
+      onPointerDown={(event) => event.stopPropagation()}
+    >
+      {/** biome-ignore lint/a11y/useKeyWithClickEvents: This is a backdrop that closes the menu on click. */}
+      <span className={s.backdrop} onClick={onClose} />
+
+      <section className={s['content-container']}>
+        <h2 className={s.title}>Chart options</h2>
+
+        <fieldset className={s['options-container']}>
+          <ScreenReaderOnly element="legend">
+            Choose a chart style
+          </ScreenReaderOnly>
+
+          <ul>
+            {CHART_STYLE_OPTIONS.map((option) => (
+              <li key={option.key}>
+                <Radio
+                  className={s['option-container']}
+                  name="chart-style"
+                  value={option.key}
+                  checked={selectedValue === option.key}
+                  onChange={() => setSelectedValue(option.key)}
+                >
+                  <option.icon className={s['option-icon']} />
+                  <span className={s['option-label']}>{option.label}</span>
+                </Radio>
+              </li>
+            ))}
+          </ul>
+        </fieldset>
+
+        <div className={s['actions-container']}>
+          <Button
+            size="medium"
+            variant="flat"
+            tone="subtle-highlight"
+            onClick={onClose}
+          >
+            Cancel
+          </Button>
+
+          <Button
+            className={s['button-update']}
+            size="medium"
+            variant="border"
+            tone="subtle-highlight"
+            onClick={() => onConfirmSelectionChange(selectedValue)}
+          >
+            Update chart style
+          </Button>
+        </div>
+      </section>
+    </m.dialog>
+  );
+};
diff --git a/dataweaver/apps/web/src/components/elements/card/footer.module.scss b/dataweaver/apps/web/src/components/elements/card/footer.module.scss
new file mode 100644
index 00000000..f49860e9
--- /dev/null
+++ b/dataweaver/apps/web/src/components/elements/card/footer.module.scss
@@ -0,0 +1,4 @@
+.container {
+  flex-shrink: 0;
+  padding: 0 28px 18px;
+}
diff --git a/dataweaver/apps/web/src/components/elements/card/footer.tsx b/dataweaver/apps/web/src/components/elements/card/footer.tsx
new file mode 100644
index 00000000..9778af4f
--- /dev/null
+++ b/dataweaver/apps/web/src/components/elements/card/footer.tsx
@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+import s from './footer.module.scss';
+
+interface CardFooterProps {
+  children: ReactNode;
+}
+
+export const CardFooter = ({ children }: CardFooterProps) => {
+  return <footer className={s.container}>{children}</footer>;
+};
diff --git a/dataweaver/apps/web/src/components/elements/card/index.ts b/dataweaver/apps/web/src/components/elements/card/index.ts
index f9c7abc8..03a0db5a 100644
--- a/dataweaver/apps/web/src/components/elements/card/index.ts
+++ b/dataweaver/apps/web/src/components/elements/card/index.ts
@@ -1,9 +1,11 @@
 import { CardBase } from './base';
 import { CardChart } from './chart/chart';
+import { CardFooter } from './footer';
 import { CardText } from './text';
 
 export const Card = {
   Base: CardBase,
   Text: CardText,
   Chart: CardChart,
+  Footer: CardFooter,
 } as const;
diff --git a/dataweaver/apps/web/src/components/elements/card/text.module.scss b/dataweaver/apps/web/src/components/elements/card/text.module.scss
index 99067a22..779814c6 100644
--- a/dataweaver/apps/web/src/components/elements/card/text.module.scss
+++ b/dataweaver/apps/web/src/components/elements/card/text.module.scss
@@ -1,3 +1,10 @@
+.container {
+  display: flex;
+  flex-shrink: 0;
+  flex-direction: column;
+  padding: 28px;
+}
+
 .title {
   @include type-title;
 
diff --git a/dataweaver/apps/web/src/components/elements/card/text.tsx b/dataweaver/apps/web/src/components/elements/card/text.tsx
index 765c5b5f..493f8f64 100644
--- a/dataweaver/apps/web/src/components/elements/card/text.tsx
+++ b/dataweaver/apps/web/src/components/elements/card/text.tsx
@@ -1,18 +1,82 @@
+'use client';
+
+import { type TLShapeId, useEditor } from 'tldraw';
+import { Button } from '~/components/elements/button';
+import { Card } from '~/components/elements/card';
 import type { CardState } from '~/components/elements/card/base';
 import { Skeleton } from '~/components/elements/skeleton';
+import { IconDelete } from '~/components/primitives/icons/delete';
+import { IconExport } from '~/components/primitives/icons/export';
+import { IconPencil } from '~/components/primitives/icons/pencil';
+import { useExportActions } from '~/components/scopes/atlas/export_provider';
+import { useQueryActions } from '~/components/scopes/atlas/query_provider';
 import s from './text.module.scss';
 
-export interface CardTextProps extends Pick<CardState, 'isLoading'> {
+export interface CardTextProps extends CardState {
+  id: TLShapeId;
   title?: string;
   body?: string;
+  followUp?: string;
 }
 
-export const CardText = ({ title, body, isLoading }: CardTextProps) => {
+export const CardText = ({
+  id,
+  isLoading,
+  selection,
+  title,
+  body,
+  followUp,
+}: CardTextProps) => {
+  const editor = useEditor();
+
+  const { open: openExport } = useExportActions();
+  const { runPrompt } = useQueryActions();
+
   return (
-    <>
-      {title && <h2 className={s.title}>{title}</h2>}
+    <Card.Base
+      isLoading={isLoading}
+      selection={selection}
+      actions={[
+        {
+          icon: IconExport,
+          label: 'Export',
+          isDisabled: isLoading,
+          onClick: () => {
+            editor.select(id);
+            openExport();
+          },
+        },
+        {
+          icon: IconDelete,
+          label: 'Delete',
+          onClick: () => editor.deleteShapes([id]),
+        },
+      ]}
+    >
+      <div className={s.container}>
+        {title && <h2 className={s.title}>{title}</h2>}
+
+        {isLoading ? (
+          <Skeleton />
+        ) : (
+          body && <div className={s.body}>{body}</div>
+        )}
+      </div>
 
-      {isLoading ? <Skeleton /> : body && <div className={s.body}>{body}</div>}
-    </>
+      {followUp && !isLoading && (
+        <Card.Footer>
+          <Button
+            size="small"
+            variant="flat"
+            tone="accent-subtle"
+            icon={IconPencil}
+            onPointerDown={(event) => event.stopPropagation()}
+            onClick={() => runPrompt(followUp)}
+          >
+            {followUp}
+          </Button>
+        </Card.Footer>
+      )}
+    </Card.Base>
   );
 };
diff --git a/dataweaver/apps/web/src/components/primitives/icons/bar_chart_horizontal.tsx b/dataweaver/apps/web/src/components/primitives/icons/bar_chart_horizontal.tsx
new file mode 100644
index 00000000..25595bf0
--- /dev/null
+++ b/dataweaver/apps/web/src/components/primitives/icons/bar_chart_horizontal.tsx
@@ -0,0 +1,18 @@
+import type { ComponentPropsWithRef } from 'react';
+
+export const IconBarChartHorizontal = (props: ComponentPropsWithRef<'svg'>) => {
+  return (
+    <svg
+      {...props}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <path
+        fill="currentColor"
+        d="M4 16h7v4H4v-4Zm0-6h16v4H4v-4Zm0-6h11v4H4V4Z"
+      />
+    </svg>
+  );
+};
diff --git a/dataweaver/apps/web/src/components/primitives/icons/bar_chart.tsx b/dataweaver/apps/web/src/components/primitives/icons/bar_chart_outlined.tsx
similarity index 89%
rename from dataweaver/apps/web/src/components/primitives/icons/bar_chart.tsx
rename to dataweaver/apps/web/src/components/primitives/icons/bar_chart_outlined.tsx
index 02606bec..7544cdef 100644
--- a/dataweaver/apps/web/src/components/primitives/icons/bar_chart.tsx
+++ b/dataweaver/apps/web/src/components/primitives/icons/bar_chart_outlined.tsx
@@ -1,6 +1,6 @@
 import type { ComponentPropsWithRef } from 'react';
 
-export const IconBarChart = (props: ComponentPropsWithRef<'svg'>) => {
+export const IconBarChartOutlined = (props: ComponentPropsWithRef<'svg'>) => {
   return (
     <svg
       {...props}
diff --git a/dataweaver/apps/web/src/components/primitives/icons/bar_chart_vertical.tsx b/dataweaver/apps/web/src/components/primitives/icons/bar_chart_vertical.tsx
new file mode 100644
index 00000000..6ef2568e
--- /dev/null
+++ b/dataweaver/apps/web/src/components/primitives/icons/bar_chart_vertical.tsx
@@ -0,0 +1,18 @@
+import type { ComponentPropsWithRef } from 'react';
+
+export const IconBarChartVertical = (props: ComponentPropsWithRef<'svg'>) => {
+  return (
+    <svg
+      {...props}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <path
+        fill="currentColor"
+        d="M16 20v-7h4v7h-4Zm-6 0V4h4v16h-4Zm-6 0V9h4v11H4Z"
+      />
+    </svg>
+  );
+};
diff --git a/dataweaver/apps/web/src/components/primitives/icons/line_graph_double.tsx b/dataweaver/apps/web/src/components/primitives/icons/line_graph_double.tsx
new file mode 100644
index 00000000..00e18051
--- /dev/null
+++ b/dataweaver/apps/web/src/components/primitives/icons/line_graph_double.tsx
@@ -0,0 +1,18 @@
+import type { ComponentPropsWithRef } from 'react';
+
+export const IconLineGraphDouble = (props: ComponentPropsWithRef<'svg'>) => {
+  return (
+    <svg
+      {...props}
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      aria-hidden="true"
+    >
+      <path
+        fill="currentColor"
+        d="M3.5 19 2 17.5 9.5 10l4 4 1.675-1.9-5.6-5.175L3.5 13 2 11.5 9.5 4l7.1 6.525L20.6 6 22 7.4l-3.95 4.45L22 15.5 20.5 17l-3.85-3.55L13.5 17l-4-4-6 6Z"
+      />
+    </svg>
+  );
+};
diff --git a/dataweaver/apps/web/src/components/primitives/icons/line_graph.tsx b/dataweaver/apps/web/src/components/primitives/icons/line_graph_single.tsx
similarity index 83%
rename from dataweaver/apps/web/src/components/primitives/icons/line_graph.tsx
rename to dataweaver/apps/web/src/components/primitives/icons/line_graph_single.tsx
index a51a7f70..cef2163d 100644
--- a/dataweaver/apps/web/src/components/primitives/icons/line_graph.tsx
+++ b/dataweaver/apps/web/src/components/primitives/icons/line_graph_single.tsx
@@ -1,6 +1,6 @@
 import type { ComponentPropsWithRef } from 'react';
 
-export const IconLineGraph = (props: ComponentPropsWithRef<'svg'>) => {
+export const IconLineGraphSingle = (props: ComponentPropsWithRef<'svg'>) => {
   return (
     <svg
       {...props}
diff --git a/dataweaver/apps/web/src/components/scopes/atlas/components/in_front_of_canvas/selection.tsx b/dataweaver/apps/web/src/components/scopes/atlas/components/in_front_of_canvas/selection.tsx
index b58c2fff..557830b3 100644
--- a/dataweaver/apps/web/src/components/scopes/atlas/components/in_front_of_canvas/selection.tsx
+++ b/dataweaver/apps/web/src/components/scopes/atlas/components/in_front_of_canvas/selection.tsx
@@ -4,7 +4,7 @@ import { useCallback, useRef } from 'react';
 import { useEditor, useQuickReactor, useValue } from 'tldraw';
 import { Button } from '~/components/elements/button';
 import { toast } from '~/components/foundations/toaster/store';
-import { IconBarChart } from '~/components/primitives/icons/bar_chart';
+import { IconBarChartOutlined } from '~/components/primitives/icons/bar_chart_outlined';
 import { IconDelete } from '~/components/primitives/icons/delete';
 import { IconExport } from '~/components/primitives/icons/export';
 import { useExportActions } from '~/components/scopes/atlas/export_provider';
@@ -73,7 +73,7 @@ export const Selection = () => {
             aria-label="Selection actions"
           >
             <Button
-              icon={IconBarChart}
+              icon={IconBarChartOutlined}
               size="medium"
               variant="flat"
               tone="card-action"
diff --git a/dataweaver/apps/web/src/components/scopes/atlas/shapes/card.tsx b/dataweaver/apps/web/src/components/scopes/atlas/shapes/card.tsx
index ff7a7fc9..2699a078 100644
--- a/dataweaver/apps/web/src/components/scopes/atlas/shapes/card.tsx
+++ b/dataweaver/apps/web/src/components/scopes/atlas/shapes/card.tsx
@@ -6,21 +6,13 @@ import {
   T,
   type TLShape,
 } from 'tldraw';
-import { Button } from '~/components/elements/button';
 import { Card } from '~/components/elements/card';
 import type { CardSelection } from '~/components/elements/card/base';
-import { toast } from '~/components/foundations/toaster/store';
-import { IconBarChart } from '~/components/primitives/icons/bar_chart';
-import { IconDelete } from '~/components/primitives/icons/delete';
-import { IconExport } from '~/components/primitives/icons/export';
-import { IconPencil } from '~/components/primitives/icons/pencil';
-import { useExportActions } from '~/components/scopes/atlas/export_provider';
 import type {
   CardContentFields,
   CardSize,
   CardVariant,
 } from '~/components/scopes/atlas/helpers';
-import { useQueryActions } from '~/components/scopes/atlas/query_provider';
 
 export const CARD_DATA_ATTRIBUTE = 'data-card';
 
@@ -73,88 +65,46 @@ export class ShapeCardUtil extends ShapeUtil<ShapeCard> {
     return selectedIds.length > 1 ? 'multiple' : 'single';
   };
 
-  #getActions = (shape: ShapeCard, isLoading: boolean) => {
-    const { open: openExport } = useExportActions();
-
-    const deleteAction = {
-      icon: IconDelete,
-      label: 'Delete',
-      onClick: () => this.editor.deleteShapes([shape.id]),
-    };
-
-    const exportAction = {
-      icon: IconExport,
-      label: 'Export',
-      isDisabled: isLoading,
-      onClick: () => {
-        this.editor.select(shape.id);
-        openExport();
-      },
-    };
-
-    if (shape.props.variant === 'chart') {
-      return [
-        {
-          icon: IconBarChart,
-          label: 'View chart',
-          isDisabled: isLoading,
-
-          // TODO: Support chart options here
-          onClick: () =>
-            toast(
-              'Cart chart options not supported yet',
-              'This feature will be coming in a future release. Stay tuned!',
-            ),
-        },
-        exportAction,
-        deleteAction,
-      ];
-    }
+  // Each card variant owns its own actions, content and footer; the shape just
+  // hands it the state and content it needs to render itself.
+  #renderCard = (shape: ShapeCard) => {
+    const { variant, title, description, body, data, followUp } = shape.props;
 
-    return [exportAction, deleteAction];
-  };
+    const isLoading = shape.props.isLoading ?? false;
+    const selection = this.#getSelectionState(shape);
 
-  #renderContent = (shape: ShapeCard, isLoading: boolean) => {
-    const { variant, title, description, body, data } = shape.props;
+    if (variant === 'text') {
+      return (
+        <Card.Text
+          id={shape.id}
+          isLoading={isLoading}
+          selection={selection}
+          title={title}
+          body={body}
+          followUp={followUp}
+        />
+      );
+    }
 
     if (variant === 'chart') {
       return (
         <Card.Chart
+          id={shape.id}
+          isLoading={isLoading}
+          selection={selection}
           title={title}
           description={description}
           data={data}
-          isLoading={isLoading}
+          followUp={followUp}
         />
       );
     }
 
-    return <Card.Text title={title} body={body} isLoading={isLoading} />;
-  };
-
-  #renderFooter = (shape: ShapeCard) => {
-    const { runPrompt } = useQueryActions();
-    const { followUp } = shape.props;
-
-    // Only render follow-up button if the card has a follow-up query defined
-    if (!followUp) return null;
-
-    return (
-      <Button
-        size="small"
-        variant="flat"
-        tone="accent-subtle"
-        icon={IconPencil}
-        onPointerDown={(event) => event.stopPropagation()}
-        onClick={() => runPrompt(followUp)}
-      >
-        {followUp}
-      </Button>
-    );
+    console.warn(`Unsupported variant given '${variant}'.`);
+    return null;
   };
 
   override component = (shape: ShapeCard) => {
-    const isLoading = shape.props.isLoading ?? false;
-
     return (
       <HTMLContainer
         // Marks the card in the DOM so that we can target it with CSS selectors
@@ -166,13 +116,7 @@ export class ShapeCardUtil extends ShapeUtil<ShapeCard> {
           pointerEvents: 'auto',
         }}
       >
-        <Card.Base
-          isLoading={isLoading}
-          selection={this.#getSelectionState(shape)}
-          actions={this.#getActions(shape, isLoading)}
-          content={this.#renderContent(shape, isLoading)}
-          footer={this.#renderFooter(shape)}
-        />
+        {this.#renderCard(shape)}
       </HTMLContainer>
     );
   };
diff --git a/dataweaver/packages/tokens/src/colors.json b/dataweaver/packages/tokens/src/colors.json
index ef459ce5..75d562d3 100644
--- a/dataweaver/packages/tokens/src/colors.json
+++ b/dataweaver/packages/tokens/src/colors.json
@@ -82,6 +82,7 @@
   "card-action-content": "$accent-content",
   "card-action-base-hover": "$surface-raised",
   "card-action-content-hover": "$accent",
+  "card-accent-subtle": "$accent-subtle",
 
   "skeleton-surface": [242, 242, 242],
 

From b1fd0e7565b650a6f26e6972849996e98a1227e0 Mon Sep 17 00:00:00 2001
From: Paulo Ferreira Jorge <mfjpaulo@gmail.com>
Date: Tue, 23 Jun 2026 18:15:52 +0100
Subject: [PATCH 2/2] Apply Gemini Feedback

---
 .../apps/web/src/components/elements/card/chart/chart.tsx   | 5 ++++-
 .../components/elements/card/chart/menu_chart_options.tsx   | 6 +++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/dataweaver/apps/web/src/components/elements/card/chart/chart.tsx b/dataweaver/apps/web/src/components/elements/card/chart/chart.tsx
index fe09f50c..4b3cd449 100644
--- a/dataweaver/apps/web/src/components/elements/card/chart/chart.tsx
+++ b/dataweaver/apps/web/src/components/elements/card/chart/chart.tsx
@@ -141,7 +141,10 @@ export const CardChart = ({
         {isStyleMenuOpen && (
           <MenuChartOptions
             value={selectedStyle}
-            onConfirmSelectionChange={setSelectedStyle}
+            onConfirmSelectionChange={(newStyle) => {
+              setSelectedStyle(newStyle);
+              setIsStyleMenuOpen(false);
+            }}
             onClose={() => setIsStyleMenuOpen(false)}
           />
         )}
diff --git a/dataweaver/apps/web/src/components/elements/card/chart/menu_chart_options.tsx b/dataweaver/apps/web/src/components/elements/card/chart/menu_chart_options.tsx
index 84f3aaea..9ea3e5b9 100644
--- a/dataweaver/apps/web/src/components/elements/card/chart/menu_chart_options.tsx
+++ b/dataweaver/apps/web/src/components/elements/card/chart/menu_chart_options.tsx
@@ -51,7 +51,7 @@ export const MenuChartOptions = ({
   onClose,
   onConfirmSelectionChange,
 }: MenuChartOptionsProps) => {
-  const containerRef = useRef<HTMLElement>(null);
+  const contentContainerRef = useRef<HTMLElement>(null);
 
   const [selectedValue, setSelectedValue] = useState<ChartStyle>(value);
 
@@ -60,7 +60,7 @@ export const MenuChartOptions = ({
   // TODO: For now this doesn't seem to really work due to TLDraw consuming
   // tab events. Review focus trap implementation once we review how TLDraw
   // handles focus and keyboard events in general, and adjust as needed
-  useFocusTrap(containerRef);
+  useFocusTrap(contentContainerRef);
 
   return (
     <m.dialog
@@ -75,7 +75,7 @@ export const MenuChartOptions = ({
       {/** biome-ignore lint/a11y/useKeyWithClickEvents: This is a backdrop that closes the menu on click. */}
       <span className={s.backdrop} onClick={onClose} />
 
-      <section className={s['content-container']}>
+      <section ref={contentContainerRef} className={s['content-container']}>
         <h2 className={s.title}>Chart options</h2>
 
         <fieldset className={s['options-container']}>