Implement History Control

dataweaver/apps/web/src/components/primitives/icons/redo.tsx

@@ -0,0 +1,18 @@
+import type { ComponentPropsWithRef } from 'react';
+
+export const IconRedo = (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="M9.9 19.5c-1.617 0-3.004-.525-4.163-1.575C4.58 16.875 4 15.567 4 14c0-1.567.58-2.875 1.737-3.925C6.896 9.025 8.284 8.5 9.9 8.5h6.3l-2.6-2.6L15 4.5l5 5-5 5-1.4-1.4 2.6-2.6H9.9c-1.05 0-1.963.333-2.738 1C6.388 12.167 6 13 6 14s.388 1.833 1.162 2.5c.776.667 1.688 1 2.738 1H17v2H9.9Z"
+      />
+    </svg>
+  );
+};

dataweaver/apps/web/src/components/primitives/icons/undo.tsx

@@ -0,0 +1,18 @@
+import type { ComponentPropsWithRef } from 'react';
+
+export const IconUndo = (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="M14.1 19.5c1.617 0 3.004-.525 4.162-1.575C19.421 16.875 20 15.567 20 14c0-1.567-.58-2.875-1.738-3.925C17.104 9.025 15.717 8.5 14.1 8.5H7.8l2.6-2.6L9 4.5l-5 5 5 5 1.4-1.4-2.6-2.6h6.3c1.05 0 1.963.333 2.737 1C17.613 12.167 18 13 18 14s-.387 1.833-1.163 2.5c-.774.667-1.687 1-2.737 1H7v2h7.1Z"
+      />
+    </svg>
+  );
+};

dataweaver/apps/web/src/components/scopes/atlas/components/in_front_of_canvas/controls.tsx

@@ -1,14 +1,16 @@
 import s from './controls.module.scss';
 import { Export } from './export/export';
+import { History } from './history';
 import { Zoom } from './zoom/zoom';
 
 /**
  * Editor-bound controls rendered through tldraw's `InFrontOfTheCanvas` slot:
- * the zoom menu and the export menu, each owning its own trigger + popover.
+ * the undo / redo history control, the zoom menu and the export menu.
  */
 export const Controls = () => {
   return (
     <div className={s.container}>
+      <History />
       <Zoom />
       <Export />
     </div>

dataweaver/apps/web/src/components/scopes/atlas/components/in_front_of_canvas/history.module.scss

@@ -0,0 +1,19 @@
+.container {
+  display: flex;
+  column-gap: 10px;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--controls-height);
+  padding: 0
+    calc((var(--controls-height) - var(--button-circle-size-medium)) / 2);
+  color: rgb(var(--color-control-accent));
+  background: rgb(var(--color-control-surface));
+  border-radius: calc(var(--controls-height) / 2);
+  box-shadow: var(--shadow-elevated);
+
+  .divider {
+    width: 1px;
+    height: 30px;
+    background: rgb(var(--color-control-divider));
+  }
+}

dataweaver/apps/web/src/components/scopes/atlas/components/in_front_of_canvas/history.tsx

@@ -0,0 +1,39 @@
+import { useEditor, useValue } from 'tldraw';
+import { Button } from '~/components/elements/button';
+import { IconRedo } from '~/components/primitives/icons/redo';
+import { IconUndo } from '~/components/primitives/icons/undo';
+import s from './history.module.scss';
+
+/** Editor-bound undo / redo control. */
+export const History = () => {
+  const editor = useEditor();
+
+  const canUndo = useValue('canUndo', () => editor.getCanUndo(), [editor]);
+  const canRedo = useValue('canRedo', () => editor.getCanRedo(), [editor]);
+
+  return (
+    <div className={s.container} role="toolbar" aria-label="History">
+      <Button
+        icon={IconUndo}
+        size="medium"
+        variant="flat"
+        tone="subtle-highlight"
+        aria-label="Undo"
+        isDisabled={!canUndo}
+        onClick={() => editor.undo()}
+      />
+
+      <span className={s.divider} aria-hidden="true" />
+
+      <Button
+        icon={IconRedo}
+        size="medium"
+        variant="flat"
+        tone="subtle-highlight"
+        aria-label="Redo"
+        isDisabled={!canRedo}
+        onClick={() => editor.redo()}
+      />
+    </div>
+  );
+};

dataweaver/packages/tokens/src/colors.json

@@ -71,6 +71,7 @@
   "control-accent-subtle": "$accent-subtle",
   "control-content": "$content",
   "control-content-muted": "$content-muted",
+  "control-divider": [22, 23, 24, 0.15],
 
   "card-surface": "$surface-raised",
   "card-surface-selected": "$accent",