datacommonsorg · PauloMFJ · Jun 12, 2026 · Jun 10, 2026 · Jun 10, 2026 · Jun 10, 2026
@@ -11,9 +11,7 @@ export const IconClose = (props: ComponentPropsWithRef<'svg'>) => {
     >
       <path
         fill="currentColor"
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="m12.893 12.001 7.553-7.554-.892-.892L12 11.108 4.446 3.555l-.892.892 7.553 7.554-7.553 7.554.892.892L12 12.894l7.554 7.553.892-.892L12.893 12Z"
+        d="m20.446 4.447-7.553 7.554 7.553 7.554-.892.892L12 12.894l-7.554 7.553-.892-.892L11.107 12 3.554 4.447l.892-.892L12 11.108l7.554-7.553.892.892Z"
       />
     </svg>
   );

@@ -0,0 +1,18 @@
+import type { ComponentPropsWithRef } from 'react';
+
+export const IconSelect = (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.833 20.167V22.5a2.247 2.247 0 0 1-1.648-.685 2.247 2.247 0 0 1-.685-1.648h2.333ZM1.5 17.833V15.5h2.333v2.333H1.5Zm0-4.666v-2.334h2.333v2.334H1.5Zm0-4.667V6.167h2.333V8.5H1.5Zm2.333-4.667H1.5c0-.641.228-1.19.685-1.648A2.247 2.247 0 0 1 3.833 1.5v2.333ZM6.167 22.5v-2.333H8.5V22.5H6.167Zm0-18.667V1.5H8.5v2.333H6.167ZM10.833 22.5v-2.333h2.334V22.5h-2.334Zm0-18.667V1.5h2.334v2.333h-2.334ZM15.5 22.5v-2.333h2.333V22.5H15.5Zm0-18.667V1.5h2.333v2.333H15.5Zm4.667 16.334H22.5c0 .641-.229 1.19-.685 1.648a2.247 2.247 0 0 1-1.648.685v-2.333Zm0-2.334V15.5H22.5v2.333h-2.333Zm0-4.666v-2.334H22.5v2.334h-2.333Zm0-4.667V6.167H22.5V8.5h-2.333Zm0-4.667V1.5c.641 0 1.19.228 1.648.685.456.457.685 1.007.685 1.648h-2.333Z"
+      />
+    </svg>
+  );
+};
@@ -0,0 +1,18 @@
+import type { ComponentPropsWithRef } from 'react';
+
+export const IconShapes = (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="M7.09 15.273c1.365 0 2.52-.473 3.465-1.418.963-.964 1.445-2.128 1.445-3.491C12 9 11.518 7.845 10.555 6.9c-.946-.964-2.1-1.445-3.464-1.445-1.364 0-2.527.481-3.491 1.445-.945.945-1.418 2.1-1.418 3.464 0 1.363.473 2.527 1.418 3.49.964.946 2.127 1.419 3.49 1.419Zm0 2.181c-1.98 0-3.663-.681-5.045-2.045C.682 14.027 0 12.345 0 10.364c0-1.982.682-3.655 2.045-5.019C3.427 3.964 5.11 3.273 7.091 3.273c1.982 0 3.654.69 5.018 2.072 1.382 1.364 2.073 3.037 2.073 5.019 0 1.981-.691 3.663-2.073 5.045-1.364 1.364-3.036 2.045-5.018 2.045ZM9.819 24c-.6 0-1.118-.21-1.554-.627a2.17 2.17 0 0 1-.628-1.555V19.61c.382-.036.746-.082 1.091-.136a7.833 7.833 0 0 0 1.091-.246v2.591h8.728v-8.727h-2.591c.109-.364.19-.718.245-1.064.055-.363.1-.736.136-1.118h2.21c.6 0 1.108.218 1.527.655.436.418.654.927.654 1.527v8.727c0 .6-.218 1.118-.654 1.555a2.078 2.078 0 0 1-1.527.627H9.818Zm9.273-14.182c-.11 0-.182-.054-.218-.163a6.096 6.096 0 0 0-1.664-2.864 6.097 6.097 0 0 0-2.864-1.664c-.109-.036-.163-.109-.163-.218 0-.127.054-.2.163-.218a6.202 6.202 0 0 0 2.864-1.636A6.272 6.272 0 0 0 18.873.164c.036-.11.109-.164.218-.164.127 0 .2.055.218.164a6.606 6.606 0 0 0 1.664 2.89c.8.8 1.754 1.346 2.863 1.637.11.018.164.09.164.218 0 .11-.055.182-.164.218a6.271 6.271 0 0 0-2.89 1.664 6.2 6.2 0 0 0-1.637 2.864c-.018.109-.09.163-.218.163Z"
+      />
+    </svg>
+  );
+};
@@ -11,6 +11,7 @@ import {
 } from 'react';
 import { createShapeId, type Editor, type TLShapeId, Tldraw } from 'tldraw';
 import s from './atlas_provider.module.scss';
+import { ExportProvider } from './components/in_front_of_canvas/export/export_provider';
 import {
   ATLAS_COMPONENTS,
   ATLAS_OVERLAYS,
@@ -141,15 +142,17 @@ export const AtlasProvider = ({ children }: AtlasProviderProps) => {
 
   return (
     <AtlasContext.Provider value={providerValue}>
-      <Tldraw
-        className={s.tldraw}
-        hideUi
-        components={ATLAS_COMPONENTS}
-        shapeUtils={ATLAS_SHAPES}
-        overlayUtils={ATLAS_OVERLAYS}
-        onMount={mounted}
-      />
-      {children}
+      <ExportProvider>
+        <Tldraw
+          className={s.tldraw}
+          hideUi
+          components={ATLAS_COMPONENTS}
+          shapeUtils={ATLAS_SHAPES}
+          overlayUtils={ATLAS_OVERLAYS}
+          onMount={mounted}
+        />
+        {children}
+      </ExportProvider>
     </AtlasContext.Provider>
   );
 };

@@ -1,6 +1,5 @@
 import { useEditor, useValue } from 'tldraw';
 import { Button } from '~/components/elements/button';
-import { toast } from '~/components/foundations/toaster/store';
 import { IconExport } from '~/components/primitives/icons/export';
 import { IconMinus } from '~/components/primitives/icons/minus';
 import { IconPlus } from '~/components/primitives/icons/plus';
@@ -11,6 +10,7 @@ import {
 } from '~/components/scopes/atlas/config';
 import { mapRange } from '~/functions/map_range';
 import s from './controls.module.scss';
+import { useExport } from './export/export_provider';
 
 const BUTTON_EXPORT_COLOR_SCHEME = {
   base: 'var(--color-control-surface)',
@@ -33,6 +33,8 @@ const BUTTON_ZOOM_COLOR_SCHEME = {
 export const Controls = () => {
   const editor = useEditor();
 
+  const { isOpen, toggle } = useExport();
+
   const zoom = useValue('zoom', () => editor.getZoomLevel(), [editor]);
 
   // Rescale the actual zoom from tldraw's enforced min / max (the first and
@@ -74,13 +76,9 @@ export const Controls = () => {
         size="large"
         className={s['button-export']}
         colorScheme={BUTTON_EXPORT_COLOR_SCHEME}
-        // TODO: Support export here
-        onClick={() =>
-          toast(
-            'Controls export not supported yet',
-            'This feature will be coming in a future release. Stay tuned!',
-          )
-        }
+        aria-haspopup="dialog"
+        aria-expanded={isOpen}
+        onClick={toggle}
       >
         Export
       </Button>

@@ -0,0 +1,136 @@
+.container {
+  --controls-height-with-gutters: calc(
+    var(--controls-height) + var(--controls-gutter-outer) * 2
+  );
+
+  position: absolute;
+  top: var(--controls-height-with-gutters);
+
+  // Note: We remove 2px here to avoid tools shadow appearing at edge of this
+  right: calc(var(--tools-gutter-outer) - 2px);
+  display: flex;
+  flex-direction: column;
+  width: 360px;
+  padding: 20px;
+  pointer-events: auto;
+  background: rgb(var(--color-control-surface));
+  border-radius: 16px;
+  box-shadow: var(--shadow-elevated);
+  backdrop-filter: blur(40px);
+}
+
+.header-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+
+  .title {
+    @include type-title(500);
+
+    color: rgb(var(--color-control-content));
+  }
+
+  .button-close {
+    margin: -4px -10px -4px 0;
+  }
+}
+
+.statuses-container {
+  height: 148px;
+  background: rgb(var(--color-control-surface-raised));
+  border-radius: 8px;
+
+  .status-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    padding: 8px 20px;
+    text-align: center;
+
+    .status-icon {
+      width: 24px;
+      height: 24px;
+      color: rgb(var(--color-control-content));
+    }
+
+    .status-title {
+      @include type-title(500);
+
+      margin-top: 8px;
+      color: rgb(var(--color-control-content));
+    }
+
+    .status-description {
+      @include type-body-small;
+
+      color: rgb(var(--color-control-content-muted));
+    }
+
+    .status-button-select-all {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      margin-top: 16px;
+
+      @include hover {
+        text-decoration: underline;
+      }
+
+      .select-all-label {
+        @include type-body-small(500);
+
+        color: rgb(var(--color-control-content));
+      }
+
+      .select-all-keys {
+        @include type-body-small;
+
+        padding: 1px 4px;
+        color: rgb(var(--color-control-content-muted));
+        border-radius: 4px;
+      }
+    }
+  }
+}
+
+.content-container {
+  display: flex;
+  flex-direction: column;
+  margin-top: 30px;
+
+  .options-title {
+    @include type-title(500);
+
+    padding-bottom: 8px;
+    color: rgb(var(--color-control-content-muted));
+    border-bottom: 1px solid rgb(var(--color-surface-decorator));
+  }
+
+  .options-container {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 18px 32px;
+    margin-top: 18px;
+
+    .option-container {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+
+      .option-title {
+        @include type-body-small(500);
+
+        color: rgb(var(--color-control-content));
+      }
+
+      .option-description {
+        @include type-body-small;
+
+        color: rgb(var(--color-control-content-muted));
+      }
+    }
+  }
+}