diff --git a/CHANGELOG.md b/CHANGELOG.md
index 099bda81269a..99cfeee6c379 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,19 +9,24 @@
 - [Quick Fix Import Button][12051].
 - [Fixed nodes being selected after deleting other nodes or connections.][11902]
 - [Redo stack is no longer lost when interacting with text literals][11908].
+- [Fixed bug when clicking header in Table Editor Widget didn't start editing
+  it][12064]
 
 [11889]: https://github.com/enso-org/enso/pull/11889
 [11836]: https://github.com/enso-org/enso/pull/11836
 [12051]: https://github.com/enso-org/enso/pull/12051
 [11902]: https://github.com/enso-org/enso/pull/11902
 [11908]: https://github.com/enso-org/enso/pull/11908
+[12064]: https://github.com/enso-org/enso/pull/12064
 
 #### Enso Standard Library
 
 - [Allow using `/` to access files inside a directory reached through a data
   link.][11926]
+- [Added Table.Offset][12071]
 
 [11926]: https://github.com/enso-org/enso/pull/11926
+[12071]: https://github.com/enso-org/enso/pull/12071
 
 #### Enso Language & Runtime
 
diff --git a/app/common/src/utilities/data/object.ts b/app/common/src/utilities/data/object.ts
index a60e6051050b..44279a04d2b3 100644
--- a/app/common/src/utilities/data/object.ts
+++ b/app/common/src/utilities/data/object.ts
@@ -193,27 +193,6 @@ export type ExtractKeys<T, U> = {
 /** An instance method of the given type. */
 export type MethodOf<T> = (this: T, ...args: never) => unknown
 
-// ===================
-// === useObjectId ===
-// ===================
-
-/** Composable providing support for managing object identities. */
-export function useObjectId() {
-  let lastId = 0
-  const idNumbers = new WeakMap<object, number>()
-  /** @returns A value that can be used to compare object identity. */
-  function objectId(o: object): number {
-    const id = idNumbers.get(o)
-    if (id == null) {
-      lastId += 1
-      idNumbers.set(o, lastId)
-      return lastId
-    }
-    return id
-  }
-  return { objectId }
-}
-
 /**
  * Returns the union of `A` and `B`, with a type-level assertion that `A` and `B` don't have any keys in common; this
  * can be used to splice together objects without the risk of collisions.
diff --git a/app/gui/package.json b/app/gui/package.json
index 91c5d079f488..9d05fceebc50 100644
--- a/app/gui/package.json
+++ b/app/gui/package.json
@@ -112,6 +112,7 @@
     "react-aria": "3.34.3",
     "react-aria-components": "1.3.3",
     "react-compiler-runtime": "19.0.0-beta-a7bf2bd-20241110",
+    "react-keyed-flatten-children": "3.0.2",
     "react-dom": "^18.3.1",
     "react-error-boundary": "4.0.13",
     "react-hook-form": "^7.54.2",
diff --git a/app/gui/src/dashboard/assets/expand_arrow_down.svg b/app/gui/src/dashboard/assets/expand_arrow_down.svg
new file mode 100644
index 000000000000..378801805e0c
--- /dev/null
+++ b/app/gui/src/dashboard/assets/expand_arrow_down.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path fill-rule="evenodd" clip-rule="evenodd"
+          d="M3.29289 8.29289C3.68342 7.90237 4.31658 7.90237 4.70711 8.29289L12 15.5858L19.2929 8.29289C19.6834 7.90237 20.3166 7.90237 20.7071 8.29289C21.0976 8.68342 21.0976 9.31658 20.7071 9.70711L13.4142 17C12.6332 17.781 11.3669 17.781 10.5858 17L3.29289 9.70711C2.90237 9.31658 2.90237 8.68342 3.29289 8.29289Z"
+          fill="black"/>
+</svg>
diff --git a/app/gui/src/dashboard/assets/expand_arrow_right.svg b/app/gui/src/dashboard/assets/expand_arrow_right.svg
new file mode 100644
index 000000000000..301d2f8fd0e8
--- /dev/null
+++ b/app/gui/src/dashboard/assets/expand_arrow_right.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M9 4L15.5858 10.5858C16.3668 11.3668 16.3668 12.6331 15.5858 13.4142L9 20" stroke="black"
+          stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/app/gui/src/dashboard/assets/expand_arrow_up.svg b/app/gui/src/dashboard/assets/expand_arrow_up.svg
new file mode 100644
index 000000000000..952f9e404b02
--- /dev/null
+++ b/app/gui/src/dashboard/assets/expand_arrow_up.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M4 14.9999L10.5858 8.41416C11.3668 7.63311 12.6331 7.63311 13.4142 8.41415L20 14.9999" stroke="black"
+          stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
diff --git a/app/gui/src/dashboard/assets/sort_ascending.svg b/app/gui/src/dashboard/assets/sort_ascending.svg
index 3abb118e2c66..3a0705229b7b 100644
--- a/app/gui/src/dashboard/assets/sort_ascending.svg
+++ b/app/gui/src/dashboard/assets/sort_ascending.svg
@@ -1,3 +1,3 @@
 <svg width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg">
     <path d="M6 5L4 2L2 5L6 5Z" stroke="black" stroke-opacity="0.6" stroke-width="2.14" />
-</svg>
\ No newline at end of file
+</svg>
diff --git a/app/gui/src/dashboard/components/AriaComponents/Button/Button.stories.tsx b/app/gui/src/dashboard/components/AriaComponents/Button/Button.stories.tsx
index e643addfc517..d7b15e57492f 100644
--- a/app/gui/src/dashboard/components/AriaComponents/Button/Button.stories.tsx
+++ b/app/gui/src/dashboard/components/AriaComponents/Button/Button.stories.tsx
@@ -1,11 +1,13 @@
 import Enso from '#/assets/enso_logo.svg'
+import ArrowDownIcon from '#/assets/expand_arrow_down.svg'
+import Plus from '#/assets/plus.svg'
+
 import type * as aria from '#/components/aria'
-import { Text } from '#/components/AriaComponents'
+import { Popover, Separator, Text } from '#/components/AriaComponents'
 import type { Meta, StoryObj } from '@storybook/react'
 import { expect, userEvent, within } from '@storybook/test'
+import { Button, type BaseButtonProps } from '.'
 import { Badge } from '../../Badge'
-import type { BaseButtonProps } from './Button'
-import { Button } from './Button'
 
 type Story = StoryObj<BaseButtonProps<aria.ButtonRenderProps>>
 
@@ -18,6 +20,7 @@ const variants = [
   'link',
   'submit',
   'outline',
+  'icon',
 ] as const
 const sizes = ['hero', 'large', 'medium', 'small', 'xsmall', 'xxsmall'] as const
 
@@ -43,22 +46,15 @@ export const Variants: Story = {
   render: () => (
     <div className="flex flex-col gap-4">
       <Text.Heading>Variants</Text.Heading>
-      <div className="grid grid-cols-4 place-content-start place-items-start gap-3">
-        {variants.map((variant) => (
-          <Button key={variant} variant={variant}>
-            {variant}
-          </Button>
-        ))}
-      </div>
-
-      <Text.Heading>Sizes</Text.Heading>
-      <div className="grid grid-cols-4 place-content-center place-items-start gap-3">
-        {sizes.map((size) => (
-          <Button key={size} size={size}>
-            {size}
-          </Button>
-        ))}
-      </div>
+      {variants.map((variant) => (
+        <div className="grid grid-cols-4 place-items-center gap-3">
+          {sizes.map((size) => (
+            <Button key={variant} variant={variant} size={size}>
+              {variant}
+            </Button>
+          ))}
+        </div>
+      ))}
 
       <Text.Heading>Icons</Text.Heading>
       <div className="grid grid-cols-4 place-content-center place-items-start gap-3">
@@ -167,3 +163,227 @@ export const Addons: Story = {
     </>
   ),
 }
+
+export const ButtonGroup: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-2">
+        <Text.Heading>Separate</Text.Heading>
+        <Button.Group>
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+      </div>
+
+      <div className="flex flex-col gap-2">
+        <Text.Heading>Joined</Text.Heading>
+
+        {variants.map((variant) => (
+          <Button.GroupJoin key={variant} buttonVariants={{ variant }}>
+            <Button>Button 1</Button>
+            <Button>Button 2</Button>
+            <Button icon={ArrowDownIcon} />
+          </Button.GroupJoin>
+        ))}
+
+        <Button.GroupJoin buttonVariants={{ variant: 'primary' }}>
+          <Button icon={Plus}>New Project</Button>
+
+          <Popover.Trigger>
+            <Button icon={ArrowDownIcon} />
+
+            <Popover>
+              <Text>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.</Text>
+            </Popover>
+          </Popover.Trigger>
+        </Button.GroupJoin>
+      </div>
+
+      {/* Column */}
+      <div className="flex flex-col gap-2">
+        <Text.Heading>Column</Text.Heading>
+        <Button.Group direction="column">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+
+        <Separator />
+
+        <Button.Group direction="column" align="center">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+
+        <Separator />
+
+        <Button.Group direction="column" align="end">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+
+        <Separator />
+
+        <Button.Group direction="column" align="between">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+
+        <Separator />
+
+        <Button.Group direction="column" align="around">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+
+        <Separator />
+
+        <Button.Group direction="column" align="evenly">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+
+        <Separator />
+
+        <Button.Group direction="column" align="start">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+
+        <Separator />
+
+        <Button.Group direction="column" verticalAlign="end">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+
+        <Separator />
+
+        <Button.Group direction="column" verticalAlign="center">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+
+        <Separator />
+
+        <Button.Group direction="column" verticalAlign="start">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+
+        <Separator />
+
+        <Button.Group direction="column" verticalAlign="end">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+
+        <Separator />
+      </div>
+      {/* End Column */}
+
+      {/* Row */}
+      <div className="flex flex-col gap-4">
+        <Text.Heading>Row</Text.Heading>
+        <Button.Group direction="row">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+
+        <Separator />
+
+        <Button.Group direction="row" align="center">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+
+        <Separator />
+
+        <Button.Group direction="row" align="end">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+
+        <Separator />
+
+        <Button.Group direction="row" align="between">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+
+        <Separator />
+
+        <Button.Group direction="row" align="around">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+
+        <Separator />
+
+        <Button.Group direction="row" align="evenly">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+
+        <Separator />
+
+        <Button.Group direction="row" align="start">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+
+        <Separator />
+
+        <Button.Group direction="row" verticalAlign="end">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+
+        <Separator />
+
+        <Button.Group direction="row" verticalAlign="center">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+
+        <Separator />
+
+        <Button.Group direction="row" verticalAlign="start">
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+      </div>
+      {/* End Row */}
+
+      <div className="flex flex-col gap-2">
+        <Text.Heading>Button Styles</Text.Heading>
+        <Button.Group buttonVariants={{ isDisabled: true, variant: 'outline' }}>
+          <Button>Button 1</Button>
+          <Button>Button 2</Button>
+          <Button>Button 3</Button>
+        </Button.Group>
+      </div>
+    </div>
+  ),
+}
diff --git a/app/gui/src/dashboard/components/AriaComponents/Button/Button.tsx b/app/gui/src/dashboard/components/AriaComponents/Button/Button.tsx
index 1a78a8f99a5a..3cc7f599ac7d 100644
--- a/app/gui/src/dashboard/components/AriaComponents/Button/Button.tsx
+++ b/app/gui/src/dashboard/components/AriaComponents/Button/Button.tsx
@@ -13,516 +13,259 @@ import * as aria from '#/components/aria'
 import { StatelessSpinner } from '#/components/StatelessSpinner'
 import SvgMask from '#/components/SvgMask'
 
-import { TEXT_STYLE, useVisualTooltip } from '#/components/AriaComponents/Text'
+import { useVisualTooltip } from '#/components/AriaComponents/Text'
 import { Tooltip, TooltipTrigger } from '#/components/AriaComponents/Tooltip'
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
 import { forwardRef } from '#/utilities/react'
-import type { ExtractFunction, VariantProps } from '#/utilities/tailwindVariants'
-import { tv } from '#/utilities/tailwindVariants'
-
-// ==============
-// === Button ===
-// ==============
-
-/** Props for a {@link Button}. */
-export type ButtonProps =
-  | (BaseButtonProps<aria.ButtonRenderProps> & Omit<aria.ButtonProps, 'onPress'> & PropsWithoutHref)
-  | (BaseButtonProps<aria.LinkRenderProps> & Omit<aria.LinkProps, 'onPress'> & PropsWithHref)
-
-/** Props for a button with an href. */
-interface PropsWithHref {
-  readonly href: string
-}
-
-/** Props for a button without an href. */
-interface PropsWithoutHref {
-  readonly href?: never
-}
-
-/** Base props for a button. */
-export interface BaseButtonProps<Render>
-  extends Omit<VariantProps<typeof BUTTON_STYLES>, 'iconOnly'> {
-  /** Falls back to `aria-label`. Pass `false` to explicitly disable the tooltip. */
-  readonly tooltip?: ReactElement | string | false | null
-  readonly tooltipPlacement?: aria.Placement
-  /** The icon to display in the button */
-  readonly icon?:
-    | ReactElement
-    | string
-    | ((render: Render) => ReactElement | string | null)
-    | null
-    | undefined
-  /** When `true`, icon will be shown only when hovered. */
-  readonly showIconOnHover?: boolean
-  /**
-   * Handler that is called when the press is released over the target.
-   * If the handler returns a promise, the button will be in a loading state until the promise resolves.
-   */
-  readonly onPress?: ((event: aria.PressEvent) => Promise<void> | void) | null | undefined
-  readonly contentClassName?: string
-  readonly testId?: string
-  readonly isDisabled?: boolean
-  readonly formnovalidate?: boolean
-  /**
-   * Defaults to `full`. When `full`, the entire button will be replaced with the loader.
-   * When `icon`, only the icon will be replaced with the loader.
-   */
-  readonly loaderPosition?: 'full' | 'icon'
-  readonly styles?: ExtractFunction<typeof BUTTON_STYLES> | undefined
-
-  readonly addonStart?:
-    | ReactElement
-    | string
-    | false
-    | ((render: Render) => ReactElement | string | null)
-    | null
-    | undefined
-  readonly addonEnd?:
-    | ReactElement
-    | string
-    | false
-    | ((render: Render) => ReactElement | string | null)
-    | null
-    | undefined
-}
-
-export const BUTTON_STYLES = tv({
-  base: [
-    'group',
-    // we need to set the height to max-content to prevent the button from growing in flex containers
-    'h-[max-content]',
-    // basic outline
-    'outline-offset-[1px] outline-transparent',
-    // buttons always have borders
-    // so keep them in mind when setting paddings
-    'border-0.5 border-transparent',
-    // button reset styles
-    'whitespace-nowrap cursor-pointer select-none appearance-none',
-    // Align the content by the center
-    'text-center items-center justify-center',
-    // animations
-    'transition-[opacity,outline-offset,background,border-color] duration-150 ease-in-out',
-  ],
-  variants: {
-    isDisabled: {
-      true: 'opacity-50 cursor-not-allowed',
-    },
-    isFocused: {
-      true: 'focus:outline-none focus-visible:outline-2 focus-visible:outline-black focus-visible:outline-offset-[-2px]',
-    },
-    isActive: {
-      none: '',
-      false:
-        'disabled:opacity-30 [&.disabled]:opacity-30 disabled:cursor-not-allowed [&.disabled]:cursor-not-allowed opacity-50 hover:opacity-75',
-      true: 'opacity-100 disabled:opacity-100 [&.disabled]:opacity-100 hover:opacity-100 disabled:cursor-default [&.disabled]:cursor-default',
-    },
-    loading: { true: { base: 'cursor-wait' } },
-    fullWidth: { true: 'w-full' },
-    size: {
-      custom: { base: '', extraClickZone: '', icon: 'h-full w-unset min-w-[1.906cap]' },
-      hero: {
-        base: TEXT_STYLE({
-          variant: 'subtitle',
-          color: 'custom',
-          weight: 'semibold',
-          className: 'flex px-[24px] py-5',
-        }),
-        text: 'mx-[1.5em]',
-      },
-      large: {
-        base: TEXT_STYLE({
-          variant: 'body',
-          color: 'custom',
-          weight: 'semibold',
-          className: 'flex px-[11px] py-[5.5px]',
-        }),
-        content: 'gap-2',
-        icon: '-mb-0.5 h-4 w-4',
-        extraClickZone: 'after:inset-[-6px]',
-      },
-      medium: {
-        base: TEXT_STYLE({
-          variant: 'body',
-          color: 'custom',
-          weight: 'semibold',
-          className: 'flex px-[7px] py-[3.5px]',
-        }),
-        icon: '-mb-0.5 h-4 w-4',
-        content: 'gap-2',
-        extraClickZone: 'after:inset-[-8px]',
-      },
-      small: {
-        base: TEXT_STYLE({
-          variant: 'body',
-          color: 'custom',
-          weight: 'medium',
-          className: 'flex px-[5px] py-[1.5px]',
-        }),
-        icon: '-mb-0.5 h-3.5 w-3.5',
-        content: 'gap-1',
-        extraClickZone: 'after:inset-[-10px]',
-      },
-      xsmall: {
-        base: TEXT_STYLE({
-          variant: 'body',
-          color: 'custom',
-          weight: 'medium',
-          disableLineHeightCompensation: true,
-          className: 'flex px-[5px] pt-[1px] pb-[2px]',
-        }),
-        icon: '-mb-0.5 h-3 w-3',
-        content: 'gap-1',
-        extraClickZone: 'after:inset-[-12px]',
-      },
-      xxsmall: {
-        base: TEXT_STYLE({
-          variant: 'body',
-          color: 'custom',
-          className: 'flex px-[3px] pt-[0.5px] pb-[2.5px] leading-[16px]',
-          // we need to disable line height compensation for this size
-          // because otherwise the text will be too high in the button
-          disableLineHeightCompensation: true,
-        }),
-        content: 'gap-0.5',
-        icon: 'mb-[-0.1cap]',
-        extraClickZone: 'after:inset-[-12px]',
-      },
-    },
-    iconOnly: {
-      true: {
-        base: TEXT_STYLE({
-          disableLineHeightCompensation: true,
-          className: 'border-0 outline-offset-[5px]',
-        }),
-        icon: 'mb-[unset]',
-      },
-    },
-    rounded: {
-      full: 'rounded-full',
-      large: 'rounded-lg',
-      medium: 'rounded-md',
-      none: 'rounded-none',
-      small: 'rounded-sm',
-      xlarge: 'rounded-xl',
-      xxlarge: 'rounded-2xl',
-      xxxlarge: 'rounded-3xl',
-    },
-    variant: {
-      custom: '',
-      link: {
-        base: 'inline-block px-0 py-0 rounded-sm text-primary/50 underline hover:text-primary border-0',
-        content: 'gap-1.5',
-        icon: 'h-[1.25cap] w-[1.25cap] mt-[0.25cap]',
-      },
-      primary: 'bg-primary text-white hover:bg-primary/70',
-      accent: 'bg-accent text-white hover:bg-accent-dark',
-      delete:
-        'bg-danger/80 hover:bg-danger text-white focus-visible:outline-danger focus-visible:bg-danger',
-      icon: {
-        base: 'text-primary opacity-80 hover:opacity-100 focus-visible:opacity-100',
-        wrapper: 'w-full h-full',
-        content: 'w-full h-full',
-        extraClickZone: 'w-full h-full',
-      },
-      ghost:
-        'text-primary hover:text-primary/80 hover:bg-white focus-visible:text-primary/80 focus-visible:bg-white',
-      // eslint-disable-next-line @typescript-eslint/naming-convention
-      'ghost-fading':
-        'text-primary opacity-80 hover:opacity-100 hover:bg-white focus-visible:bg-white',
-      submit: 'bg-invite text-white opacity-80 hover:opacity-100',
-      outline: 'border-primary/20 text-primary hover:border-primary hover:bg-primary/5',
-    },
-    iconPosition: {
-      start: { content: '' },
-      end: { content: 'flex-row-reverse' },
-    },
-    showIconOnHover: {
-      true: {
-        icon: 'opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100 disabled:opacity-0 aria-disabled:opacity-0 disabled:group-hover:opacity-50 aria-disabled:group-hover:opacity-50',
-      },
-    },
-    extraClickZone: {
-      true: {
-        extraClickZone:
-          'flex relative after:absolute after:cursor-pointer group-disabled:after:cursor-not-allowed',
-      },
-      false: {
-        extraClickZone: 'after:inset-0',
-      },
-      xxsmall: {
-        extraClickZone: 'after:inset-[-2px]',
-      },
-      xsmall: {
-        extraClickZone: 'after:inset-[-4px]',
-      },
-      small: {
-        extraClickZone: 'after:inset-[-6px]',
-      },
-      medium: {
-        extraClickZone: 'after:inset-[-8px]',
-      },
-      large: {
-        extraClickZone: 'after:inset-[-10px]',
-      },
-      custom: {
-        extraClickZone: 'after:inset-[calc(var(--extra-click-zone-offset, 0) * -1)]',
-      },
-    },
-  },
-  slots: {
-    extraClickZone:
-      'flex relative after:absolute after:cursor-pointer group-disabled:after:cursor-not-allowed',
-    wrapper: 'relative block',
-    loader: 'absolute inset-0 flex items-center justify-center',
-    content: 'flex items-center',
-    text: 'inline-flex items-center justify-center gap-1 w-full',
-    icon: 'h-[1.906cap] w-[1.906cap] flex-none aspect-square flex items-center justify-center',
-    addonStart: 'flex items-center justify-center macos:-mb-0.5',
-    addonEnd: 'flex items-center justify-center macos:-mb-0.5',
-  },
-  defaultVariants: {
-    isActive: 'none',
-    loading: false,
-    fullWidth: false,
-    size: 'medium',
-    rounded: 'full',
-    variant: 'primary',
-    iconPosition: 'start',
-    showIconOnHover: false,
-    isDisabled: false,
-    extraClickZone: true,
-  },
-  compoundVariants: [
-    { isFocused: true, iconOnly: true, class: 'focus-visible:outline-offset-[3px]' },
-
-    { size: 'custom', iconOnly: true, class: { icon: 'w-full h-full' } },
-    { size: 'xxsmall', iconOnly: true, class: { base: 'p-0 rounded-full', icon: 'w-2.5 h-2.5' } },
-    { size: 'xsmall', iconOnly: true, class: { base: 'p-0 rounded-full', icon: 'w-3 h-3' } },
-    { size: 'small', iconOnly: true, class: { base: 'p-0 rounded-full', icon: 'w-3.5 h-3.5' } },
-    { size: 'medium', iconOnly: true, class: { base: 'p-0 rounded-full', icon: 'w-4 h-4' } },
-    { size: 'large', iconOnly: true, class: { base: 'p-0 rounded-full', icon: 'w-5 h-5' } },
-    { size: 'hero', iconOnly: true, class: { base: 'p-0 rounded-full', icon: 'w-12 h-12' } },
-
-    { size: 'xsmall', class: { addonStart: '-ml-[3.5px]', addonEnd: '-mr-[3.5px]' } },
-    { size: 'xxsmall', class: { addonStart: '-ml-[2.5px]', addonEnd: '-mr-[2.5px]' } },
-
-    { variant: 'icon', class: { base: 'flex-none' } },
-    { variant: 'icon', isDisabled: true, class: { base: 'opacity-50 cursor-not-allowed' } },
-
-    { variant: 'link', isFocused: true, class: 'focus-visible:outline-offset-1' },
-    { variant: 'link', size: 'xxsmall', class: 'font-medium' },
-    { variant: 'link', size: 'xsmall', class: 'font-medium' },
-    { variant: 'link', size: 'small', class: 'font-medium' },
-    { variant: 'link', size: 'medium', class: 'font-medium' },
-    { variant: 'link', size: 'large', class: 'font-medium' },
-    { variant: 'link', size: 'hero', class: 'font-medium' },
-
-    { variant: 'icon', isDisabled: true, class: 'opacity-50' },
-  ],
-})
+import { ButtonGroup, ButtonGroupJoin } from './ButtonGroup'
+import { useJoinedButtonPrivateContext, useMergedButtonStyles } from './shared'
+import type { ButtonProps } from './types'
+import { BUTTON_STYLES } from './variants'
 
 const ICON_LOADER_DELAY = 150
 
 /** A button allows a user to perform an action, with mouse, touch, and keyboard interactions. */
 // Manually casting types to make TS infer the final type correctly (e.g. RenderProps in icon)
-export const Button: (props: ButtonProps & { ref?: ForwardedRef<HTMLButtonElement> }) => ReactNode =
-  memo(
-    forwardRef(function Button(props: ButtonProps, ref: ForwardedRef<HTMLButtonElement>) {
-      const {
-        className,
-        contentClassName,
-        children,
-        variant,
-        icon,
-        loading = false,
-        isActive,
-        showIconOnHover,
-        iconPosition,
-        size,
-        fullWidth,
-        rounded,
-        tooltip,
-        tooltipPlacement,
-        testId,
-        loaderPosition = 'full',
-        extraClickZone: extraClickZoneProp,
-        onPress = () => {},
-        variants = BUTTON_STYLES,
-        addonStart,
-        addonEnd,
-        ...ariaProps
-      } = props
-
-      const [implicitlyLoading, setImplicitlyLoading] = useState(false)
-
-      const contentRef = useRef<HTMLSpanElement>(null)
-      const loaderRef = useRef<HTMLSpanElement>(null)
-
-      const isLink = ariaProps.href != null
-
-      const Tag = isLink ? aria.Link : aria.Button
-
-      const goodDefaults = {
-        ...(isLink ? { rel: 'noopener noreferrer' } : { type: 'button' as const }),
-        'data-testid': testId,
-      }
+// eslint-disable-next-line no-restricted-syntax
+export const Button = memo(
+  forwardRef(function Button(props: ButtonProps, ref: ForwardedRef<HTMLButtonElement>) {
+    props = useMergedButtonStyles(props)
+    const {
+      className,
+      contentClassName,
+      children,
+      variant,
+      icon,
+      loading,
+      isActive,
+      showIconOnHover,
+      iconPosition,
+      size,
+      fullWidth,
+      rounded,
+      tooltip,
+      tooltipPlacement,
+      testId,
+      loaderPosition = 'full',
+      extraClickZone: extraClickZoneProp,
+      onPress = () => {},
+      variants = BUTTON_STYLES,
+      addonStart,
+      addonEnd,
+      hideLoader = false,
+      ...ariaProps
+    } = props
+
+    const { position, isJoined } = useJoinedButtonPrivateContext()
+
+    const [implicitlyLoading, setImplicitlyLoading] = useState(false)
+
+    const contentRef = useRef<HTMLSpanElement>(null)
+    const loaderRef = useRef<HTMLSpanElement>(null)
+
+    const isLink = ariaProps.href != null
+
+    const Tag = isLink ? aria.Link : aria.Button
+
+    const goodDefaults = {
+      ...(isLink ? { rel: 'noopener noreferrer' } : { type: 'button' as const }),
+      'data-testid': testId,
+    }
 
-      const isIconOnly = (children == null || children === '' || children === false) && icon != null
+    const isIconOnly = (children == null || children === '' || children === false) && icon != null
 
-      const shouldShowTooltip = (() => {
-        if (tooltip === false) {
-          return false
-        } else if (isIconOnly) {
-          return true
-        } else {
-          return tooltip != null
-        }
-      })()
-
-      const tooltipElement = shouldShowTooltip ? (tooltip ?? ariaProps['aria-label']) : null
+    const shouldShowTooltip = (() => {
+      if (tooltip === false) {
+        return false
+      } else if (isIconOnly) {
+        return true
+      } else {
+        return tooltip != null
+      }
+    })()
 
-      const isLoading = loading || implicitlyLoading
-      const isDisabled = props.isDisabled ?? isLoading
-      const shouldUseVisualTooltip = shouldShowTooltip && isDisabled
-      const extraClickZone = extraClickZoneProp ?? variant === 'icon'
+    const tooltipElement = shouldShowTooltip ? (tooltip ?? ariaProps['aria-label']) : null
 
-      useLayoutEffect(() => {
-        const delay = ICON_LOADER_DELAY
+    const isLoading = (() => {
+      if (typeof loading === 'boolean') {
+        return loading
+      }
 
-        if (isLoading) {
-          const loaderAnimation = loaderRef.current?.animate(
-            [{ opacity: 0 }, { opacity: 0, offset: 1 }, { opacity: 1 }],
-            { duration: delay, easing: 'linear', delay: 0, fill: 'forwards' },
+      return implicitlyLoading
+    })()
+
+    const isDisabled = props.isDisabled ?? isLoading
+    const shouldUseVisualTooltip = shouldShowTooltip && isDisabled
+    const extraClickZone = extraClickZoneProp ?? variant === 'icon'
+
+    useLayoutEffect(() => {
+      const delay = ICON_LOADER_DELAY
+
+      if (isLoading) {
+        const loaderAnimation = loaderRef.current?.animate(
+          [{ opacity: 0 }, { opacity: 0, offset: 1 }, { opacity: 1 }],
+          { duration: delay, easing: 'linear', delay: 0, fill: 'forwards' },
+        )
+        const contentAnimation =
+          loaderPosition !== 'full' ? null : (
+            contentRef.current?.animate([{ opacity: 1 }, { opacity: 0 }], {
+              duration: 0,
+              easing: 'linear',
+              delay,
+              fill: 'forwards',
+            })
           )
-          const contentAnimation =
-            loaderPosition !== 'full' ? null : (
-              contentRef.current?.animate([{ opacity: 1 }, { opacity: 0 }], {
-                duration: 0,
-                easing: 'linear',
-                delay,
-                fill: 'forwards',
-              })
-            )
-
-          return () => {
-            loaderAnimation?.cancel()
-            contentAnimation?.cancel()
-          }
-        } else {
-          return () => {}
+
+        return () => {
+          loaderAnimation?.cancel()
+          contentAnimation?.cancel()
         }
-      }, [isLoading, loaderPosition])
+      } else {
+        return () => {}
+      }
+    }, [isLoading, loaderPosition])
 
-      const handlePress = useEventCallback((event: aria.PressEvent): void => {
-        if (!isDisabled) {
-          const result = onPress?.(event)
+    const handlePress = useEventCallback((event: aria.PressEvent): void => {
+      if (!isDisabled) {
+        const result = onPress?.(event)
 
-          if (result instanceof Promise) {
-            setImplicitlyLoading(true)
+        if (result instanceof Promise) {
+          setImplicitlyLoading(true)
 
-            void result.finally(() => {
-              setImplicitlyLoading(false)
-            })
-          }
+          void result.finally(() => {
+            setImplicitlyLoading(false)
+          })
         }
-      })
-
-      const styles = variants({
-        isDisabled,
-        isActive,
-        loading: isLoading,
-        fullWidth,
-        size,
-        rounded,
-        variant,
-        iconPosition,
-        showIconOnHover,
-        extraClickZone,
-        iconOnly: isIconOnly,
-      })
-
-      const { tooltip: visualTooltip, targetProps } = useVisualTooltip({
-        targetRef: contentRef,
-        children: tooltipElement,
-        isDisabled: !shouldUseVisualTooltip,
-        ...(tooltipPlacement && { overlayPositionProps: { placement: tooltipPlacement } }),
-      })
-
-      const button = (
-        <Tag
-          // @ts-expect-error ts errors are expected here because we are merging props with different types
-          ref={ref}
-          // @ts-expect-error ts errors are expected here because we are merging props with different types
-          {...aria.mergeProps<aria.ButtonProps>()(goodDefaults, ariaProps, {
-            isDisabled,
-            // we use onPressEnd instead of onPress because for some reason react-aria doesn't trigger
-            // onPress on EXTRA_CLICK_ZONE, but onPress{start,end} are triggered
-            onPressEnd: (e) => {
-              if (!isDisabled) {
-                handlePress(e)
-              }
-            },
-            className: aria.composeRenderProps(className, (classNames, states) =>
-              styles.base({ className: classNames, ...states }),
-            ),
-          })}
-        >
-          {(render: aria.ButtonRenderProps | aria.LinkRenderProps) => (
-            <span className={styles.wrapper()}>
-              <span
-                ref={contentRef}
-                className={styles.content({ className: contentClassName })}
-                {...targetProps}
-              >
-                <ButtonContent
-                  isIconOnly={isIconOnly}
-                  isLoading={isLoading}
-                  loaderPosition={loaderPosition}
-                  /* @ts-expect-error any here is safe because we transparently pass it to the children, and ts infer the type outside correctly */
-                  icon={typeof icon === 'function' ? icon(render) : icon}
-                  styles={styles}
-                  /* @ts-expect-error any here is safe because we transparently pass it to the children, and ts infer the type outside correctly */
-                  addonStart={typeof addonStart === 'function' ? addonStart(render) : addonStart}
-                  /* @ts-expect-error any here is safe because we transparently pass it to the children, and ts infer the type outside correctly */
-                  addonEnd={typeof addonEnd === 'function' ? addonEnd(render) : addonEnd}
+      }
+    })
+
+    const styles = variants({
+      isDisabled,
+      isActive,
+      loading: isLoading,
+      fullWidth,
+      size,
+      rounded,
+      variant,
+      iconPosition,
+      showIconOnHover,
+      extraClickZone,
+      iconOnly: isIconOnly,
+      isJoined,
+      position,
+    })
+
+    const { tooltip: visualTooltip, targetProps } = useVisualTooltip({
+      targetRef: contentRef,
+      children: tooltipElement,
+      isDisabled: !shouldUseVisualTooltip,
+      ...(tooltipPlacement && { overlayPositionProps: { placement: tooltipPlacement } }),
+    })
+
+    const shouldDisplayBorder = isJoined && (position === 'first' || position === 'middle')
+
+    const button = (
+      <Tag
+        // @ts-expect-error ts errors are expected here because we are merging props with different types
+        ref={ref}
+        // @ts-expect-error ts errors are expected here because we are merging props with different types
+        {...aria.mergeProps<aria.ButtonProps>()(goodDefaults, ariaProps, {
+          isPending: isLoading,
+          isDisabled,
+          // we use onPressEnd instead of onPress because for some reason react-aria doesn't trigger
+          // onPress on EXTRA_CLICK_ZONE, but onPress{start,end} are triggered
+          onPressEnd: (e) => {
+            if (!isDisabled) {
+              handlePress(e)
+            }
+          },
+          className: aria.composeRenderProps(className, (classNames, states) =>
+            styles.base({ className: classNames, ...states }),
+          ),
+        })}
+      >
+        {(render: aria.ButtonRenderProps | aria.LinkRenderProps) => {
+          const shouldShowOverlayLoader = () => {
+            if (hideLoader) {
+              return false
+            }
+
+            return isLoading && loaderPosition === 'full'
+          }
+
+          return (
+            <>
+              <span className={styles.wrapper()}>
+                <span
+                  ref={contentRef}
+                  className={styles.content({ className: contentClassName })}
+                  {...targetProps}
                 >
-                  {/* @ts-expect-error any here is safe because we transparently pass it to the children, and ts infer the type outside correctly */}
-                  {typeof children === 'function' ? children(render) : children}
-                </ButtonContent>
+                  <ButtonContent
+                    isIconOnly={isIconOnly}
+                    loaderPosition={loaderPosition}
+                    hideLoader={hideLoader}
+                    /* @ts-expect-error any here is safe because we transparently pass it to the children, and ts infer the type outside correctly */
+                    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+                    isLoading={render.isPending}
+                    /* @ts-expect-error any here is safe because we transparently pass it to the children, and ts infer the type outside correctly */
+                    icon={typeof icon === 'function' ? icon(render) : icon}
+                    styles={styles}
+                    /* @ts-expect-error any here is safe because we transparently pass it to the children, and ts infer the type outside correctly */
+                    addonStart={typeof addonStart === 'function' ? addonStart(render) : addonStart}
+                    /* @ts-expect-error any here is safe because we transparently pass it to the children, and ts infer the type outside correctly */
+                    addonEnd={typeof addonEnd === 'function' ? addonEnd(render) : addonEnd}
+                  >
+                    {/* @ts-expect-error any here is safe because we transparently pass it to the children, and ts infer the type outside correctly */}
+                    {typeof children === 'function' ? children(render) : children}
+                  </ButtonContent>
+                </span>
+
+                {shouldShowOverlayLoader() && (
+                  <span ref={loaderRef} className={styles.loader()}>
+                    <StatelessSpinner state="loading-medium" size={16} />
+                  </span>
+                )}
+
+                {shouldShowTooltip && visualTooltip}
               </span>
 
-              {isLoading && loaderPosition === 'full' && (
-                <span ref={loaderRef} className={styles.loader()}>
-                  <StatelessSpinner state="loading-medium" size={16} />
-                </span>
-              )}
+              {shouldDisplayBorder && <div className={styles.joinSeparator()} />}
+            </>
+          )
+        }}
+      </Tag>
+    )
 
-              {shouldShowTooltip && visualTooltip}
-            </span>
-          )}
-        </Tag>
-      )
+    if (tooltipElement == null) {
+      return button
+    }
 
-      if (tooltipElement == null) {
-        return button
-      }
+    return (
+      <TooltipTrigger delay={0} closeDelay={0}>
+        {button}
 
-      return (
-        <TooltipTrigger delay={0} closeDelay={0}>
-          {button}
+        <Tooltip {...(tooltipPlacement != null ? { placement: tooltipPlacement } : {})}>
+          {tooltipElement}
+        </Tooltip>
+      </TooltipTrigger>
+    )
+  }),
+) as unknown as ((props: ButtonProps & { ref?: ForwardedRef<HTMLButtonElement> }) => ReactNode) & {
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  Group: typeof ButtonGroup
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  GroupJoin: typeof ButtonGroupJoin
+}
 
-          <Tooltip {...(tooltipPlacement != null ? { placement: tooltipPlacement } : {})}>
-            {tooltipElement}
-          </Tooltip>
-        </TooltipTrigger>
-      )
-    }),
-  )
+Button.Group = ButtonGroup
+Button.GroupJoin = ButtonGroupJoin
 
 /**
  * Props for {@link ButtonContent}.
  */
 interface ButtonContentProps {
+  readonly hideLoader: boolean
   readonly isIconOnly: boolean
   readonly isLoading: boolean
   readonly loaderPosition: 'full' | 'icon'
@@ -545,15 +288,30 @@ function hasAddon(addon: ButtonContentProps['addonEnd']): boolean {
  */
 // eslint-disable-next-line no-restricted-syntax
 const ButtonContent = memo(function ButtonContent(props: ButtonContentProps) {
-  const { isIconOnly, isLoading, loaderPosition, icon, styles, children, addonStart, addonEnd } =
-    props
+  const {
+    isIconOnly,
+    isLoading,
+    loaderPosition,
+    icon,
+    styles,
+    children,
+    addonStart,
+    addonEnd,
+    hideLoader,
+  } = props
 
   // Icon only button
   if (isIconOnly) {
     return (
       <span className={styles.extraClickZone()}>
         {hasAddon(addonStart) && <div className={styles.addonStart()}>{addonStart}</div>}
-        <Icon isLoading={isLoading} loaderPosition={loaderPosition} icon={icon} styles={styles} />
+        <Icon
+          isLoading={isLoading}
+          loaderPosition={loaderPosition}
+          icon={icon}
+          styles={styles}
+          hideLoader={hideLoader}
+        />
         {hasAddon(addonEnd) && <div className={styles.addonEnd()}>{addonEnd}</div>}
       </span>
     )
@@ -563,7 +321,13 @@ const ButtonContent = memo(function ButtonContent(props: ButtonContentProps) {
   return (
     <>
       {hasAddon(addonStart) && <div className={styles.addonStart()}>{addonStart}</div>}
-      <Icon isLoading={isLoading} loaderPosition={loaderPosition} icon={icon} styles={styles} />
+      <Icon
+        isLoading={isLoading}
+        loaderPosition={loaderPosition}
+        icon={icon}
+        styles={styles}
+        hideLoader={hideLoader}
+      />
       <span className={styles.text()}>{children}</span>
       {hasAddon(addonEnd) && <div className={styles.addonEnd()}>{addonEnd}</div>}
     </>
@@ -578,13 +342,14 @@ interface IconProps {
   readonly loaderPosition: 'full' | 'icon'
   readonly icon: ReactElement | string | null | undefined
   readonly styles: ReturnType<typeof BUTTON_STYLES>
+  readonly hideLoader: boolean
 }
 
 /**
  * Renders an icon for a button.
  */
 const Icon = memo(function Icon(props: IconProps) {
-  const { isLoading, loaderPosition, icon, styles } = props
+  const { isLoading, loaderPosition, icon, styles, hideLoader } = props
 
   const [loaderIsVisible, setLoaderIsVisible] = useState(false)
 
@@ -602,7 +367,13 @@ const Icon = memo(function Icon(props: IconProps) {
     }
   }, [isLoading, loaderPosition])
 
-  const shouldShowLoader = isLoading && loaderPosition === 'icon' && loaderIsVisible
+  const shouldShowLoader = (() => {
+    if (hideLoader) {
+      return false
+    }
+
+    return isLoading && loaderPosition === 'icon' && loaderIsVisible
+  })()
 
   if (icon == null && !shouldShowLoader) {
     return null
diff --git a/app/gui/src/dashboard/components/AriaComponents/Button/ButtonGroup.tsx b/app/gui/src/dashboard/components/AriaComponents/Button/ButtonGroup.tsx
index 11bb5d822aca..04e9b71f690e 100644
--- a/app/gui/src/dashboard/components/AriaComponents/Button/ButtonGroup.tsx
+++ b/app/gui/src/dashboard/components/AriaComponents/Button/ButtonGroup.tsx
@@ -1,31 +1,32 @@
 /** @file A group of buttons. */
-import * as React from 'react'
+import { forwardRef, type PropsWithChildren } from 'react'
+import flattenChildren from 'react-keyed-flatten-children'
 
-import * as twv from '#/utilities/tailwindVariants'
+import { tv, type VariantProps } from '#/utilities/tailwindVariants'
+import { IS_DEV_MODE } from 'enso-common/src/detect'
+import invariant from 'tiny-invariant'
+import type { TestIdProps } from '../types'
+import {
+  ButtonGroupProvider,
+  JoinedButtonPrivateContextProvider,
+  ResetButtonGroupContext,
+} from './shared'
+import type { ButtonGroupSharedButtonProps, PrivateJoinedButtonPosition } from './types'
 
-// =================
-// === Constants ===
-// =================
-
-const STYLES = twv.tv({
+const STYLES = tv({
   base: 'flex flex-1 shrink-0 max-h-max',
   variants: {
     wrap: { true: 'flex-wrap' },
     direction: { column: 'flex-col', row: 'flex-row' },
-    width: {
-      auto: 'w-auto',
-      full: 'w-full',
-      min: 'w-min',
-      max: 'w-max',
-    },
+    width: { auto: 'w-auto', full: 'w-full', min: 'w-min', max: 'w-max' },
     gap: {
       custom: '',
+      joined: 'gap-0',
       large: 'gap-3.5',
       medium: 'gap-2',
       small: 'gap-1.5',
       xsmall: 'gap-1',
       xxsmall: 'gap-0.5',
-      none: 'gap-0',
     },
     align: {
       start: 'justify-start',
@@ -41,6 +42,12 @@ const STYLES = twv.tv({
       end: 'items-end',
     },
   },
+  defaultVariants: {
+    direction: 'row',
+    gap: 'medium',
+    wrap: false,
+    width: 'full',
+  },
   compoundVariants: [
     { direction: 'column', align: 'start', class: 'items-start' },
     { direction: 'column', align: 'center', class: 'items-center' },
@@ -56,43 +63,96 @@ const STYLES = twv.tv({
 // ===================
 
 /** Props for a {@link ButtonGroup}. */
-interface ButtonGroupProps extends React.PropsWithChildren, twv.VariantProps<typeof STYLES> {
+interface ButtonGroupProps
+  extends React.PropsWithChildren,
+    VariantProps<typeof STYLES>,
+    TestIdProps {
   readonly className?: string | undefined
+  readonly buttonVariants?: ButtonGroupSharedButtonProps
 }
 
 /** A group of buttons. */
-export const ButtonGroup = React.forwardRef(function ButtonGroup(
+// eslint-disable-next-line no-restricted-syntax
+export const ButtonGroup = forwardRef(function ButtonGroup(
   props: ButtonGroupProps,
   ref: React.ForwardedRef<HTMLDivElement>,
 ) {
   const {
     children,
     className,
-    gap = 'medium',
-    wrap = false,
-    direction = 'row',
-    width = 'full',
+    gap,
+    wrap,
+    direction,
+    width,
     align,
     variants = STYLES,
     verticalAlign,
+    buttonVariants = {},
+    testId = 'button-group',
     ...passthrough
   } = props
 
+  const isJoin = gap === 'joined'
+
+  if (IS_DEV_MODE) {
+    const isColumnAndJoined = direction === 'column' && isJoin
+    invariant(
+      !isColumnAndJoined,
+      'ButtonGroup: Joined mode is only supported for row direction, please implement column joined mode',
+    )
+  }
+
   return (
     <div
       ref={ref}
-      className={variants({
-        gap,
-        wrap,
-        direction,
-        align,
-        verticalAlign,
-        width,
-        className,
-      })}
+      className={variants({ gap, wrap, direction, align, verticalAlign, width, className })}
+      data-testid={testId}
       {...passthrough}
     >
-      {children}
+      <ResetButtonGroupContext>
+        <ButtonGroupProvider {...buttonVariants}>
+          {isJoin ?
+            <JoinedButtons>{children}</JoinedButtons>
+          : children}
+        </ButtonGroupProvider>
+      </ResetButtonGroupContext>
     </div>
   )
 })
+
+/**
+ * A wrapper for a button group that joins the buttons together.
+ * Adds custom styles to the buttons.
+ */
+function JoinedButtons(props: PropsWithChildren) {
+  const { children } = props
+
+  return flattenChildren(children).map((child, index, array) => {
+    if (array.length === 1) {
+      return <>{child}</>
+    }
+
+    let position: PrivateJoinedButtonPosition = 'middle'
+
+    if (index === 0) {
+      position = 'first'
+    }
+
+    if (index === array.length - 1) {
+      position = 'last'
+    }
+
+    return (
+      <JoinedButtonPrivateContextProvider isJoined position={position}>
+        {child}
+      </JoinedButtonPrivateContextProvider>
+    )
+  })
+}
+
+/**
+ * A button group that joins the buttons together.
+ */
+export function ButtonGroupJoin(props: ButtonGroupProps) {
+  return <ButtonGroup {...props} direction="row" gap="joined" />
+}
diff --git a/app/gui/src/dashboard/components/AriaComponents/Button/CloseButton.tsx b/app/gui/src/dashboard/components/AriaComponents/Button/CloseButton.tsx
index 4e3258921ae6..120d13d2dbe5 100644
--- a/app/gui/src/dashboard/components/AriaComponents/Button/CloseButton.tsx
+++ b/app/gui/src/dashboard/components/AriaComponents/Button/CloseButton.tsx
@@ -1,14 +1,11 @@
 /** @file A button for closing a modal. */
 import DismissIcon from '#/assets/dismiss.svg'
-import { Button, type ButtonProps } from '#/components/AriaComponents/Button'
 import { useText } from '#/providers/TextProvider'
 import { twMerge } from '#/utilities/tailwindMerge'
 import { isOnMacOS } from 'enso-common/src/detect'
 import { memo } from 'react'
-
-// ===================
-// === CloseButton ===
-// ===================
+import { Button } from './Button'
+import type { ButtonProps } from './types'
 
 /** Props for a {@link CloseButton}. */
 export type CloseButtonProps = Omit<ButtonProps, 'children' | 'rounding' | 'size' | 'variant'>
diff --git a/app/gui/src/dashboard/components/AriaComponents/Button/CopyButton.tsx b/app/gui/src/dashboard/components/AriaComponents/Button/CopyButton.tsx
index 5a35c0032923..e2567b6837a7 100644
--- a/app/gui/src/dashboard/components/AriaComponents/Button/CopyButton.tsx
+++ b/app/gui/src/dashboard/components/AriaComponents/Button/CopyButton.tsx
@@ -9,14 +9,15 @@ import * as copyHook from '#/hooks/copyHooks'
 
 import * as textProvider from '#/providers/TextProvider'
 
-import * as button from './Button'
+import { Button } from './Button'
+import type { ButtonProps } from './types'
 
 // ==================
 // === CopyButton ===
 // ==================
 
 /** Props for a {@link CopyButton}. */
-export interface CopyButtonProps extends Omit<button.ButtonProps, 'icon' | 'loading' | 'onPress'> {
+export interface CopyButtonProps extends Omit<ButtonProps, 'icon' | 'loading' | 'onPress'> {
   /** The text to copy to the clipboard. */
   readonly copyText: string
   /**
@@ -58,7 +59,7 @@ export function CopyButton(props: CopyButtonProps) {
     : null
 
   return (
-    <button.Button
+    <Button
       /* This is safe because we are passing all props to the button */
       /* eslint-disable-next-line @typescript-eslint/no-explicit-any,no-restricted-syntax */
       {...(buttonProps as any)}
diff --git a/app/gui/src/dashboard/components/AriaComponents/Button/index.ts b/app/gui/src/dashboard/components/AriaComponents/Button/index.ts
index e6740f06fb51..7193cec65ea6 100644
--- a/app/gui/src/dashboard/components/AriaComponents/Button/index.ts
+++ b/app/gui/src/dashboard/components/AriaComponents/Button/index.ts
@@ -3,3 +3,6 @@ export * from './Button'
 export * from './ButtonGroup'
 export * from './CloseButton'
 export * from './CopyButton'
+export { ResetButtonGroupContext } from './shared'
+export type { BaseButtonProps, ButtonProps } from './types'
+export * from './variants'
diff --git a/app/gui/src/dashboard/components/AriaComponents/Button/shared.tsx b/app/gui/src/dashboard/components/AriaComponents/Button/shared.tsx
new file mode 100644
index 000000000000..9aebf59e5468
--- /dev/null
+++ b/app/gui/src/dashboard/components/AriaComponents/Button/shared.tsx
@@ -0,0 +1,82 @@
+/** @file Context for a button group. */
+import { createContext, useContext, type PropsWithChildren } from 'react'
+import type { ButtonGroupSharedButtonProps, PrivateJoinedButtonProps } from './types'
+import { type ButtonVariants } from './variants'
+
+/**
+ * Context for a button group.
+ * Allows to specify unified styles for a group of buttons
+ * Or provide additional information, like if the buttons are joined
+ */
+export interface ButtonGroupContextType extends ButtonGroupSharedButtonProps {}
+
+const ButtonGroupContext = createContext<ButtonGroupContextType>({})
+
+/**
+ * Provider for a button group context
+ */
+export function ButtonGroupProvider(props: ButtonGroupContextType & PropsWithChildren) {
+  const { children, ...rest } = props
+
+  return <ButtonGroupContext.Provider value={rest}>{children}</ButtonGroupContext.Provider>
+}
+
+const EMPTY_CONTEXT: ButtonGroupContextType = {}
+
+/**
+ * A wrapper that resets the button group context
+ */
+export function ResetButtonGroupContext(props: PropsWithChildren) {
+  const { children } = props
+
+  return (
+    <ButtonGroupContext.Provider value={EMPTY_CONTEXT}>
+      <JoinedButtonPrivateContextProvider isJoined={false} position={undefined}>
+        {children}
+      </JoinedButtonPrivateContextProvider>
+    </ButtonGroupContext.Provider>
+  )
+}
+
+/**
+ * Hook to use the button group context
+ */
+export function useButtonGroupContext() {
+  return useContext(ButtonGroupContext)
+}
+
+/**
+ * Hook to merge button styles with the button group context
+ */
+export function useMergedButtonStyles<Props extends ButtonVariants>(props: Props) {
+  const context = useButtonGroupContext()
+
+  return { ...context, ...props }
+}
+
+const JoinedButtonPrivateContext = createContext<PrivateJoinedButtonProps>({
+  isJoined: false,
+  position: undefined,
+})
+
+/**
+ * A provider for the joined button private context
+ */
+export function JoinedButtonPrivateContextProvider(
+  props: PrivateJoinedButtonProps & PropsWithChildren,
+) {
+  const { children, isJoined, position } = props
+
+  return (
+    <JoinedButtonPrivateContext.Provider value={{ isJoined, position }}>
+      {children}
+    </JoinedButtonPrivateContext.Provider>
+  )
+}
+
+/**
+ * Hook to get the joined button private context
+ */
+export function useJoinedButtonPrivateContext() {
+  return useContext(JoinedButtonPrivateContext)
+}
diff --git a/app/gui/src/dashboard/components/AriaComponents/Button/types.ts b/app/gui/src/dashboard/components/AriaComponents/Button/types.ts
new file mode 100644
index 000000000000..8488cef0038c
--- /dev/null
+++ b/app/gui/src/dashboard/components/AriaComponents/Button/types.ts
@@ -0,0 +1,120 @@
+/**
+ * @file
+ *
+ * Reusable types for the Button component
+ */
+import type * as aria from '#/components/aria'
+import type { ExtractFunction } from '#/utilities/tailwindVariants'
+import type { ReactElement, ReactNode } from 'react'
+import type { BUTTON_STYLES, ButtonVariants } from './variants'
+
+/**
+ * Position of a joined button
+ */
+export type PrivateJoinedButtonPosition = ButtonVariants['position']
+
+/**
+ * Whether the button is joined
+ */
+export type PrivateJoinedButton = ButtonVariants['isJoined']
+
+/**
+ * Props for a joined button unlike other button props,
+ */
+export interface PrivateJoinedButtonProps {
+  readonly position: PrivateJoinedButtonPosition
+  readonly isJoined: NonNullable<PrivateJoinedButton>
+}
+
+/**
+ * Render props for a button.
+ */
+export interface ButtonRenderProps extends aria.ButtonRenderProps {
+  readonly isLoading: boolean
+}
+
+/**
+ * Render props for a link.
+ */
+export interface LinkRenderProps extends aria.LinkRenderProps {
+  readonly isLoading: boolean
+}
+
+/** Props for a Button. */
+export type ButtonProps =
+  | (BaseButtonProps<ButtonRenderProps> &
+      Omit<aria.ButtonProps, 'children' | 'isPending' | 'onPress'> &
+      PropsWithoutHref)
+  | (BaseButtonProps<LinkRenderProps> &
+      Omit<aria.LinkProps, 'children' | 'onPress'> &
+      PropsWithHref)
+
+/** Props for a button with an href. */
+interface PropsWithHref {
+  readonly href: string
+}
+
+/** Props for a button without an href. */
+interface PropsWithoutHref {
+  readonly href?: never
+}
+
+/** Base props for a button. */
+export interface BaseButtonProps<Render>
+  extends Omit<ButtonVariants, 'iconOnly' | 'isJoined' | 'position'> {
+  /** If `true`, the loader will not be shown. */
+  readonly hideLoader?: boolean
+  /** Falls back to `aria-label`. Pass `false` to explicitly disable the tooltip. */
+  readonly tooltip?: ReactElement | string | false | null
+  readonly tooltipPlacement?: aria.Placement
+  /** The icon to display in the button */
+  readonly icon?:
+    | ReactElement
+    | string
+    | ((render: Render) => ReactElement | string | null)
+    | null
+    | undefined
+  /** When `true`, icon will be shown only when hovered. */
+  readonly showIconOnHover?: boolean
+  /**
+   * Handler that is called when the press is released over the target.
+   * If the handler returns a promise, the button will be in a loading state until the promise resolves.
+   */
+  readonly onPress?: ((event: aria.PressEvent) => Promise<void> | void) | null | undefined
+  readonly contentClassName?: string
+  readonly testId?: string
+  readonly isDisabled?: boolean
+  readonly formnovalidate?: boolean
+  /**
+   * Defaults to `full`. When `full`, the entire button will be replaced with the loader.
+   * When `icon`, only the icon will be replaced with the loader.
+   */
+  readonly loaderPosition?: 'full' | 'icon'
+  readonly styles?: ExtractFunction<typeof BUTTON_STYLES> | undefined
+
+  readonly children?: ReactNode | ((render: Render) => ReactNode)
+
+  readonly addonStart?:
+    | ReactElement
+    | string
+    | false
+    | ((render: Render) => ReactElement | string | null)
+    | null
+    | undefined
+  readonly addonEnd?:
+    | ReactElement
+    | string
+    | false
+    | ((render: Render) => ReactElement | string | null)
+    | null
+    | undefined
+}
+
+/**
+ * Props that are shared between buttons in a button group.
+ */
+export interface ButtonGroupSharedButtonProps extends ButtonVariants {
+  readonly isDisabled?: boolean
+  readonly isLoading?: boolean
+  readonly loaderPosition?: 'full' | 'icon'
+}
diff --git a/app/gui/src/dashboard/components/AriaComponents/Button/variants.ts b/app/gui/src/dashboard/components/AriaComponents/Button/variants.ts
new file mode 100644
index 000000000000..543b6e00fa3f
--- /dev/null
+++ b/app/gui/src/dashboard/components/AriaComponents/Button/variants.ts
@@ -0,0 +1,404 @@
+/**
+ * @file
+ *
+ * Variants for a button
+ */
+import { tv, type VariantProps } from '#/utilities/tailwindVariants'
+import { TEXT_STYLE } from '../Text'
+
+/**
+ * Variants for a button
+ */
+export type ButtonVariants = VariantProps<typeof BUTTON_STYLES>
+
+export const BUTTON_STYLES = tv({
+  base: [
+    'group',
+    'relative',
+    // basic outline
+    'outline-offset-[1px] outline-transparent',
+    // buttons always have borders
+    // so keep them in mind when setting paddings
+    'border-0.5 border-transparent',
+    // button reset styles
+    'whitespace-nowrap cursor-pointer select-none appearance-none',
+    // Align the content by the center
+    'text-center items-center justify-center',
+    // animations
+    'transition-[opacity,outline-offset,background,border-color] duration-150 ease-in-out',
+  ],
+  variants: {
+    isDisabled: {
+      true: 'opacity-50 cursor-not-allowed',
+    },
+    isFocused: {
+      true: 'focus:outline-none focus-visible:outline-2 focus-visible:outline-black focus-visible:outline-offset-[-2px]',
+    },
+    isActive: {
+      none: '',
+      false:
+        'disabled:opacity-30 [&.disabled]:opacity-30 disabled:cursor-not-allowed [&.disabled]:cursor-not-allowed opacity-50 hover:opacity-75',
+      true: 'opacity-100 disabled:opacity-100 [&.disabled]:opacity-100 hover:opacity-100 disabled:cursor-default [&.disabled]:cursor-default',
+    },
+    isPressed: {
+      true: '',
+    },
+    isJoined: {
+      // Mostly defined in the compoundVariants
+      true: '',
+      false: '',
+    },
+    position: {
+      // Mostly defined in the compoundVariants
+      first: '',
+      last: '',
+      middle: '',
+    },
+    loading: { true: { base: 'cursor-wait' } },
+    fullWidth: { true: 'w-full' },
+    size: {
+      custom: { base: '', extraClickZone: '', icon: 'h-full w-unset min-w-[1.906cap]' },
+      hero: {
+        base: TEXT_STYLE({
+          variant: 'subtitle',
+          color: 'custom',
+          weight: 'semibold',
+          className: 'flex h-16 px-[24px]',
+        }),
+        text: 'mx-[1.5em]',
+      },
+      large: {
+        base: TEXT_STYLE({
+          variant: 'body',
+          color: 'custom',
+          weight: 'semibold',
+          className: 'flex h-9 px-[11px]',
+        }),
+        content: 'gap-2',
+        icon: '-mb-0.5 h-4 w-4',
+        extraClickZone: 'after:inset-[-6px]',
+      },
+      medium: {
+        base: TEXT_STYLE({
+          variant: 'body',
+          color: 'custom',
+          weight: 'semibold',
+          className: 'flex h-8 px-[7px]',
+        }),
+        icon: '-mb-0.5 h-4 w-4',
+        content: 'gap-2',
+        extraClickZone: 'after:inset-[-8px]',
+      },
+      small: {
+        base: TEXT_STYLE({
+          variant: 'body',
+          color: 'custom',
+          weight: 'medium',
+          className: 'flex h-7 px-[5px]',
+        }),
+        icon: '-mb-0.5 h-3.5 w-3.5',
+        content: 'gap-1',
+        extraClickZone: 'after:inset-[-10px]',
+      },
+      xsmall: {
+        base: TEXT_STYLE({
+          variant: 'body',
+          color: 'custom',
+          weight: 'medium',
+          className: 'flex h-6 px-[5px]',
+        }),
+        icon: '-mb-0.5 h-3 w-3',
+        content: 'gap-1',
+        extraClickZone: 'after:inset-[-12px]',
+      },
+      xxsmall: {
+        base: TEXT_STYLE({
+          variant: 'body',
+          color: 'custom',
+          className: 'flex h-5 px-[3px] leading-[16px]',
+        }),
+        content: 'gap-0.5',
+        icon: 'mb-[-0.1cap]',
+        extraClickZone: 'after:inset-[-12px]',
+      },
+    },
+    iconOnly: {
+      // Specified in the compoundVariants
+      true: '',
+    },
+    rounded: {
+      full: 'rounded-full',
+      large: 'rounded-lg',
+      medium: 'rounded-md',
+      none: 'rounded-none',
+      small: 'rounded-sm',
+      xlarge: 'rounded-xl',
+      xxlarge: 'rounded-2xl',
+      xxxlarge: 'rounded-3xl',
+    },
+    variant: {
+      custom: '',
+      link: {
+        base: 'inline-block px-0 py-0 rounded-sm text-primary/50 underline hover:text-primary border-0',
+        content: 'gap-1.5',
+        icon: 'h-[1.25cap] w-[1.25cap] mt-[0.25cap]',
+      },
+      primary: 'bg-primary text-white hover:bg-primary/70',
+      accent: 'bg-accent text-white hover:bg-accent-dark',
+      delete:
+        'bg-danger/80 hover:bg-danger text-white focus-visible:outline-danger focus-visible:bg-danger',
+      icon: {
+        base: 'text-primary opacity-80 hover:opacity-100 focus-visible:opacity-100',
+        wrapper: 'w-full h-full',
+        content: 'w-full h-full',
+        extraClickZone: 'w-full h-full',
+      },
+      ghost:
+        'text-primary hover:text-primary/80 hover:bg-white focus-visible:text-primary/80 focus-visible:bg-white',
+      // eslint-disable-next-line @typescript-eslint/naming-convention
+      'ghost-fading':
+        'text-primary opacity-80 hover:opacity-100 hover:bg-white focus-visible:bg-white',
+      submit: 'bg-invite text-white opacity-80 hover:opacity-100',
+      outline: 'border-primary/20 text-primary hover:border-primary hover:bg-primary/5',
+    },
+    iconPosition: {
+      start: { content: '' },
+      end: { content: 'flex-row-reverse' },
+    },
+    showIconOnHover: {
+      true: {
+        icon: 'opacity-0 group-hover:opacity-100 group-focus-visible:opacity-100 disabled:opacity-0 aria-disabled:opacity-0 disabled:group-hover:opacity-50 aria-disabled:group-hover:opacity-50',
+      },
+    },
+    extraClickZone: {
+      true: {
+        extraClickZone:
+          'flex relative after:absolute after:cursor-pointer group-disabled:after:cursor-not-allowed',
+      },
+      false: {
+        extraClickZone: 'after:inset-0',
+      },
+      xxsmall: {
+        extraClickZone: 'after:inset-[-2px]',
+      },
+      xsmall: {
+        extraClickZone: 'after:inset-[-4px]',
+      },
+      small: {
+        extraClickZone: 'after:inset-[-6px]',
+      },
+      medium: {
+        extraClickZone: 'after:inset-[-8px]',
+      },
+      large: {
+        extraClickZone: 'after:inset-[-10px]',
+      },
+      custom: {
+        extraClickZone: 'after:inset-[calc(var(--extra-click-zone-offset, 0) * -1)]',
+      },
+    },
+  },
+  slots: {
+    extraClickZone:
+      'flex relative after:absolute after:cursor-pointer group-disabled:after:cursor-not-allowed',
+    wrapper: 'relative block',
+    loader: 'absolute inset-0 flex items-center justify-center',
+    content: 'flex items-center',
+    text: 'inline-flex items-center justify-center gap-1 w-full',
+    icon: 'h-[1.906cap] w-[1.906cap] flex-none aspect-square flex items-center justify-center',
+    addonStart: 'flex items-center justify-center macos:-mb-0.5',
+    addonEnd: 'flex items-center justify-center macos:-mb-0.5',
+    joinSeparator: 'absolute z-1 -right-[0.5px] h-[80%] w-[0.5px] bg-current rounded-full',
+  },
+  defaultVariants: {
+    isActive: 'none',
+    loading: false,
+    fullWidth: false,
+    size: 'medium',
+    rounded: 'full',
+    variant: 'primary',
+    iconPosition: 'start',
+    showIconOnHover: false,
+    isDisabled: false,
+    extraClickZone: true,
+  },
+  compoundVariants: [
+    { isFocused: true, iconOnly: true, class: 'focus-visible:outline-offset-[3px]' },
+
+    {
+      size: 'custom',
+      iconOnly: true,
+      isJoined: false,
+      class: {
+        base: TEXT_STYLE({
+          disableLineHeightCompensation: true,
+          className: 'border-0 outline-offset-[5px] p-0 rounded-full',
+        }),
+        icon: 'w-full h-full mb-[unset]',
+      },
+    },
+    {
+      size: 'xxsmall',
+      iconOnly: true,
+      isJoined: false,
+      class: {
+        base: TEXT_STYLE({
+          disableLineHeightCompensation: true,
+          className: 'border-0 outline-offset-[5px] p-0 rounded-full w-2.5 h-2.5',
+        }),
+        icon: 'w-[unset] h-[unset] mb-[unset]',
+      },
+    },
+    {
+      size: 'xsmall',
+      iconOnly: true,
+      isJoined: false,
+      class: {
+        base: TEXT_STYLE({
+          disableLineHeightCompensation: true,
+          className: 'border-0 outline-offset-[5px] p-0 rounded-full w-3 h-3',
+        }),
+        icon: 'w-[unset] h-[unset] mb-[unset]',
+      },
+    },
+    {
+      size: 'small',
+      iconOnly: true,
+      isJoined: false,
+      class: {
+        base: TEXT_STYLE({
+          disableLineHeightCompensation: true,
+          className: 'border-0 outline-offset-[4px] p-0 rounded-full w-3.5 h-3.5',
+        }),
+        icon: 'w-[unset] h-[unset] mb-[unset]',
+      },
+    },
+    {
+      size: 'medium',
+      iconOnly: true,
+      isJoined: false,
+      class: {
+        base: TEXT_STYLE({
+          disableLineHeightCompensation: true,
+          className: 'border-0 outline-offset-[4px] p-0 rounded-full w-4 h-4',
+        }),
+        icon: 'w-[unset] h-[unset] mb-[unset]',
+      },
+    },
+    {
+      size: 'large',
+      iconOnly: true,
+      isJoined: false,
+      class: {
+        base: TEXT_STYLE({
+          disableLineHeightCompensation: true,
+          className: 'border-0 outline-offset-[4px] p-0 rounded-full w-5 h-5',
+        }),
+        icon: 'w-[unset] h-[unset] mb-[unset]',
+      },
+    },
+    {
+      size: 'hero',
+      iconOnly: true,
+      isJoined: false,
+      class: {
+        base: TEXT_STYLE({
+          disableLineHeightCompensation: true,
+          className: 'border-0 outline-offset-[5px] p-0 rounded-full w-12 h-12',
+        }),
+        icon: 'w-[unset] h-[unset] mb-[unset]',
+      },
+    },
+
+    { size: 'xsmall', class: { addonStart: '-ml-[3.5px]', addonEnd: '-mr-[3.5px]' } },
+    { size: 'xxsmall', class: { addonStart: '-ml-[2.5px]', addonEnd: '-mr-[2.5px]' } },
+
+    { variant: 'icon', class: { base: 'flex-none' } },
+    { variant: 'icon', isDisabled: true, class: { base: 'opacity-50 cursor-not-allowed' } },
+
+    { variant: 'link', isFocused: true, class: 'focus-visible:outline-offset-1' },
+    { variant: 'link', size: 'xxsmall', class: 'font-medium' },
+    { variant: 'link', size: 'xsmall', class: 'font-medium' },
+    { variant: 'link', size: 'small', class: 'font-medium' },
+    { variant: 'link', size: 'medium', class: 'font-medium' },
+    { variant: 'link', size: 'large', class: 'font-medium' },
+    { variant: 'link', size: 'hero', class: 'font-medium' },
+
+    { variant: 'icon', isDisabled: true, class: 'opacity-50' },
+
+    { isJoined: true, position: 'first', class: { base: 'rounded-r-none' } },
+    { isJoined: true, position: 'last', class: { base: 'rounded-l-none' } },
+    { isJoined: true, position: 'middle', class: { base: 'rounded-none' } },
+
+    { isJoined: true, variant: 'link', class: { joinSeparator: 'hidden' } },
+
+    { isJoined: true, variant: 'icon', class: { extraClickZone: 'items-center' } },
+
+    {
+      isJoined: true,
+      position: ['first', 'middle'],
+      variant: 'primary',
+      class: {
+        joinSeparator: 'text-background',
+      },
+    },
+    {
+      isJoined: true,
+      position: ['first', 'middle'],
+      variant: 'accent',
+      class: {
+        joinSeparator: 'text-background',
+      },
+    },
+
+    {
+      isJoined: true,
+      position: ['first', 'middle'],
+      variant: 'delete',
+      class: {
+        joinSeparator: 'text-background',
+      },
+    },
+
+    {
+      isJoined: true,
+      position: ['first', 'middle'],
+      variant: 'ghost',
+      class: {
+        joinSeparator: 'text-primary/20',
+      },
+    },
+    {
+      isJoined: true,
+      position: ['first', 'middle'],
+      variant: 'ghost-fading',
+      class: {
+        joinSeparator: 'text-primary/20',
+      },
+    },
+
+    {
+      isJoined: true,
+      position: ['first', 'middle'],
+      variant: 'outline',
+      class: {
+        base: 'mr-[-0.5px] border-r-primary/10',
+        joinSeparator: 'hidden',
+      },
+    },
+    {
+      isJoined: true,
+      position: ['first', 'middle'],
+      variant: 'submit',
+      class: {
+        joinSeparator: 'text-background',
+      },
+    },
+    {
+      isJoined: true,
+      position: ['first', 'middle'],
+      variant: 'icon',
+      class: { joinSeparator: 'text-primary/20 h-[50%]' },
+    },
+  ],
+})
diff --git a/app/gui/src/dashboard/components/AriaComponents/Dialog/DialogDismiss.tsx b/app/gui/src/dashboard/components/AriaComponents/Dialog/DialogDismiss.tsx
index a96480a6f6c8..4de948a203c5 100644
--- a/app/gui/src/dashboard/components/AriaComponents/Dialog/DialogDismiss.tsx
+++ b/app/gui/src/dashboard/components/AriaComponents/Dialog/DialogDismiss.tsx
@@ -1,8 +1,9 @@
 /** @file A button to close a dialog without submitting it. */
 import type { JSX } from 'react'
 
-import { Button, useDialogContext, type ButtonProps } from '#/components/AriaComponents'
 import { useText } from '#/providers/TextProvider'
+import { Button, type ButtonProps } from '../Button'
+import { useDialogContext } from './DialogProvider'
 
 /** Additional props for the Cancel component. */
 interface DialogDismissBaseProps {
diff --git a/app/gui/src/dashboard/components/AriaComponents/Dialog/Popover.tsx b/app/gui/src/dashboard/components/AriaComponents/Dialog/Popover.tsx
index 1a4abbfc9d04..2d2efc28cf87 100644
--- a/app/gui/src/dashboard/components/AriaComponents/Dialog/Popover.tsx
+++ b/app/gui/src/dashboard/components/AriaComponents/Dialog/Popover.tsx
@@ -13,6 +13,7 @@ import * as suspense from '#/components/Suspense'
 import * as twv from '#/utilities/tailwindVariants'
 
 import { useEventCallback } from '#/hooks/eventCallbackHooks'
+import { ResetButtonGroupContext } from '../Button'
 import * as dialogProvider from './DialogProvider'
 import * as dialogStackProvider from './DialogStackProvider'
 import { DialogTrigger } from './DialogTrigger'
@@ -34,8 +35,8 @@ export const POPOVER_STYLES = twv.tv({
   variants: {
     variant: {
       custom: { dialog: '' },
-      primary: { dialog: variants.DIALOG_BACKGROUND({ variant: 'light' }) },
-      inverted: { dialog: variants.DIALOG_BACKGROUND({ variant: 'dark' }) },
+      light: { base: variants.DIALOG_BACKGROUND({ variant: 'light' }) },
+      dark: { base: variants.DIALOG_BACKGROUND({ variant: 'dark' }) },
     },
     isEntering: {
       true: 'animate-in fade-in placement-bottom:slide-in-from-top-1 placement-top:slide-in-from-bottom-1 placement-left:slide-in-from-right-1 placement-right:slide-in-from-left-1 ease-out duration-200',
@@ -44,13 +45,16 @@ export const POPOVER_STYLES = twv.tv({
       true: 'animate-out fade-out placement-bottom:slide-out-to-top-1 placement-top:slide-out-to-bottom-1 placement-left:slide-out-to-right-1 placement-right:slide-out-to-left-1 ease-in duration-150',
     },
     size: {
-      auto: { base: 'w-[unset]', dialog: 'p-2.5 px-0' },
-      xxsmall: { base: 'max-w-[206px]', dialog: 'p-2 px-0' },
-      xsmall: { base: 'max-w-xs', dialog: 'p-2.5 px-0' },
-      small: { base: 'max-w-sm', dialog: 'py-3 px-2' },
-      medium: { base: 'max-w-md', dialog: 'p-3.5 px-2.5' },
-      large: { base: 'max-w-lg', dialog: 'px-4 py-3' },
-      hero: { base: 'max-w-xl', dialog: 'px-6 py-5' },
+      custom: { base: '', dialog: '' },
+      auto: { base: 'w-[unset]', dialog: 'p-2.5' },
+      xxsmall: { base: 'max-w-[206px]', dialog: 'p-1.5' },
+      xsmall: { base: 'max-w-xs', dialog: 'p-3' },
+      small: { base: 'max-w-sm', dialog: 'px-4 p-3' },
+      medium: { base: 'max-w-md', dialog: 'px-5 p-3.5' },
+      large: { base: 'max-w-lg', dialog: 'p-4' },
+      xlarge: { base: 'max-w-xl', dialog: 'p-6' },
+      xxlarge: { base: 'max-w-2xl', dialog: 'px-8 py-7' },
+      xxxlarge: { base: 'max-w-3xl', dialog: 'px-10 py-9' },
     },
     rounded: {
       none: { base: 'rounded-none', dialog: 'rounded-none' },
@@ -64,9 +68,9 @@ export const POPOVER_STYLES = twv.tv({
     },
   },
   slots: {
-    dialog: 'flex-auto overflow-y-auto [scrollbar-gutter:stable_both-edges] max-h-[inherit]',
+    dialog: 'flex-auto overflow-y-auto max-h-[inherit]',
   },
-  defaultVariants: { rounded: 'xxxlarge', size: 'small', variant: 'primary' },
+  defaultVariants: { rounded: 'xxlarge', size: 'small', variant: 'light' },
 })
 
 const SUSPENSE_LOADER_PROPS = { minHeight: 'h32' } as const
@@ -149,12 +153,10 @@ function PopoverContent(props: PopoverContentProps) {
   const dialogRef = React.useRef<HTMLDivElement>(null)
   const dialogId = aria.useId()
 
-  // We use as here to make the types more accurate
   // eslint-disable-next-line no-restricted-syntax
   const contextState = React.useContext(
     aria.OverlayTriggerStateContext,
   ) as aria.OverlayTriggerState | null
-
   const dialogContext = React.useContext(aria.DialogContext)
 
   // This is safe, because the labelledBy provided by DialogTrigger is always
@@ -182,7 +184,7 @@ function PopoverContent(props: PopoverContentProps) {
   })
 
   return (
-    <>
+    <ResetButtonGroupContext>
       <dialogStackProvider.DialogStackRegistrar id={dialogId} type="popover" />
       <div
         id={dialogId}
@@ -205,7 +207,7 @@ function PopoverContent(props: PopoverContentProps) {
           </errorBoundary.ErrorBoundary>
         </dialogProvider.DialogProvider>
       </div>
-    </>
+    </ResetButtonGroupContext>
   )
 }
 
diff --git a/app/gui/src/dashboard/components/AriaComponents/Form/components/Reset.tsx b/app/gui/src/dashboard/components/AriaComponents/Form/components/Reset.tsx
index a139f664e7f2..3d7975c8732a 100644
--- a/app/gui/src/dashboard/components/AriaComponents/Form/components/Reset.tsx
+++ b/app/gui/src/dashboard/components/AriaComponents/Form/components/Reset.tsx
@@ -1,14 +1,13 @@
 /** @file Reset button for forms. */
 import * as React from 'react'
 
-import * as ariaComponents from '#/components/AriaComponents'
-
 import { useText } from '#/providers/TextProvider'
+import { Button, type ButtonProps } from '../../Button'
 import * as formContext from './FormProvider'
 import type * as types from './types'
 
 /** Props for the Reset component. */
-export interface ResetProps extends Omit<ariaComponents.ButtonProps, 'loading'> {
+export interface ResetProps extends Omit<ButtonProps, 'href' | 'loading'> {
   /**
    * Connects the reset button to a form.
    * If not provided, the button will use the nearest form context.
@@ -29,14 +28,15 @@ export function Reset(props: ResetProps): React.JSX.Element {
     testId = 'form-reset-button',
     children = getText('reset'),
     onPress,
+    form,
     ...buttonProps
   } = props
 
-  const form = formContext.useFormContext(props.form)
-  const { formState } = form
+  const formInstance = formContext.useFormContext(form)
+  const { formState } = formInstance
 
   return (
-    <ariaComponents.Button
+    <Button
       variant={variant}
       size={size}
       isDisabled={formState.isSubmitting || !formState.isDirty}
@@ -45,10 +45,12 @@ export function Reset(props: ResetProps): React.JSX.Element {
       onPress={(event) => {
         // `type="reset"` triggers native HTML reset, which does not work here as it clears inputs
         // rather than resetting them to default values.
-        form.reset()
+        formInstance.reset()
         return onPress?.(event)
       }}
-      {...buttonProps}
+      /* This is safe because we are passing all props to the button */
+      // eslint-disable-next-line no-restricted-syntax, @typescript-eslint/no-explicit-any
+      {...(buttonProps as any)}
     />
   )
 }
diff --git a/app/gui/src/dashboard/components/AriaComponents/Tooltip/Tooltip.tsx b/app/gui/src/dashboard/components/AriaComponents/Tooltip/Tooltip.tsx
index f900bc5cb7b0..ec0d8f313c86 100644
--- a/app/gui/src/dashboard/components/AriaComponents/Tooltip/Tooltip.tsx
+++ b/app/gui/src/dashboard/components/AriaComponents/Tooltip/Tooltip.tsx
@@ -3,6 +3,7 @@ import * as aria from '#/components/aria'
 import { useStrictPortalContext } from '#/components/Portal'
 
 import { tv, type VariantProps } from '#/utilities/tailwindVariants'
+import { ResetButtonGroupContext } from '../Button'
 
 import { DIALOG_BACKGROUND } from '../Dialog'
 import { TEXT_STYLE } from '../Text'
@@ -83,16 +84,18 @@ export function Tooltip(props: TooltipProps) {
   const root = useStrictPortalContext()
 
   return (
-    <aria.Tooltip
-      offset={DEFAULT_OFFSET}
-      containerPadding={containerPadding}
-      UNSTABLE_portalContainer={root}
-      className={aria.composeRenderProps(className, (classNames, values) =>
-        TOOLTIP_STYLES({ className: classNames, variant, size, rounded, ...values }),
-      )}
-      data-ignore-click-outside
-      {...ariaTooltipProps}
-    />
+    <ResetButtonGroupContext>
+      <aria.Tooltip
+        offset={DEFAULT_OFFSET}
+        containerPadding={containerPadding}
+        UNSTABLE_portalContainer={root}
+        className={aria.composeRenderProps(className, (classNames, values) =>
+          TOOLTIP_STYLES({ className: classNames, variant, size, rounded, ...values }),
+        )}
+        data-ignore-click-outside
+        {...ariaTooltipProps}
+      />
+    </ResetButtonGroupContext>
   )
 }
 
diff --git a/app/gui/src/dashboard/components/dashboard/column/PathColumn.tsx b/app/gui/src/dashboard/components/dashboard/column/PathColumn.tsx
index a44d01585d29..484062aa157e 100644
--- a/app/gui/src/dashboard/components/dashboard/column/PathColumn.tsx
+++ b/app/gui/src/dashboard/components/dashboard/column/PathColumn.tsx
@@ -175,7 +175,7 @@ export default function PathColumn(props: AssetColumnProps) {
           size="auto"
           placement="bottom end"
           crossOffset={14}
-          variant="primary"
+          variant="light"
           className="max-w-lg"
         >
           <div className="flex items-center gap-1">
diff --git a/app/gui/src/project-view/components/CodeEditor/CodeEditorImpl.vue b/app/gui/src/project-view/components/CodeEditor/CodeEditorImpl.vue
index 25f3451aafb5..7f0e28d22ba9 100644
--- a/app/gui/src/project-view/components/CodeEditor/CodeEditorImpl.vue
+++ b/app/gui/src/project-view/components/CodeEditor/CodeEditorImpl.vue
@@ -4,7 +4,7 @@ import { ensoSyntax } from '@/components/CodeEditor/ensoSyntax'
 import { useEnsoSourceSync } from '@/components/CodeEditor/sync'
 import { ensoHoverTooltip } from '@/components/CodeEditor/tooltips'
 import CodeMirrorRoot from '@/components/CodeMirrorRoot.vue'
-import VueComponentHost from '@/components/VueComponentHost.vue'
+import VueHostRender, { VueHost } from '@/components/VueHostRender.vue'
 import { useGraphStore } from '@/stores/graph'
 import { useProjectStore } from '@/stores/project'
 import { useSuggestionDbStore } from '@/stores/suggestionDatabase'
@@ -31,8 +31,6 @@ const projectStore = useProjectStore()
 const graphStore = useGraphStore()
 const suggestionDbStore = useSuggestionDbStore()
 
-const vueComponentHost =
-  useTemplateRef<ComponentInstance<typeof VueComponentHost>>('vueComponentHost')
 const editorRoot = useTemplateRef<ComponentInstance<typeof CodeMirrorRoot>>('editorRoot')
 const rootElement = computed(() => editorRoot.value?.rootElement)
 useAutoBlur(rootElement)
@@ -42,7 +40,7 @@ const autoindentOnEnter = {
   run: insertNewlineKeepIndent,
 }
 
-const vueHost = computed(() => vueComponentHost.value || undefined)
+const vueHost = new VueHost()
 const { editorView, setExtraExtensions } = useCodeMirror(editorRoot, {
   extensions: [
     keymap.of([indentWithTab, autoindentOnEnter]),
@@ -55,7 +53,7 @@ const { editorView, setExtraExtensions } = useCodeMirror(editorRoot, {
     highlightStyle(useCssModule()),
     ensoHoverTooltip(graphStore, suggestionDbStore, vueHost),
   ],
-  vueHost,
+  vueHost: () => vueHost,
 })
 ;(window as any).__codeEditorApi = testSupport(editorView)
 const { updateListener, connectModuleListener } = useEnsoSourceSync(
@@ -74,7 +72,7 @@ onMounted(() => {
 
 <template>
   <CodeMirrorRoot ref="editorRoot" class="CodeEditor" @keydown.tab.stop.prevent />
-  <VueComponentHost ref="vueComponentHost" />
+  <VueHostRender :host="vueHost" />
 </template>
 
 <style scoped>
diff --git a/app/gui/src/project-view/components/CodeEditor/tooltips.ts b/app/gui/src/project-view/components/CodeEditor/tooltips.ts
index 0c9cfb609b4d..d6af7c58c0fd 100644
--- a/app/gui/src/project-view/components/CodeEditor/tooltips.ts
+++ b/app/gui/src/project-view/components/CodeEditor/tooltips.ts
@@ -1,6 +1,6 @@
 import CodeEditorTooltip from '@/components/CodeEditor/CodeEditorTooltip.vue'
 import { astProp } from '@/components/CodeEditor/ensoSyntax'
-import { type VueHost } from '@/components/VueComponentHost.vue'
+import { type VueHost } from '@/components/VueHostRender.vue'
 import { type GraphStore } from '@/stores/graph'
 import { type SuggestionDbStore } from '@/stores/suggestionDatabase'
 import { Ast } from '@/util/ast'
diff --git a/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor.vue b/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor.vue
index 5d9fd957e27e..92a4b0030fc5 100644
--- a/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor.vue
+++ b/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { WidgetInputIsSpecificMethodCall } from '@/components/GraphEditor/widgets/WidgetFunction.vue'
-import TableHeader from '@/components/GraphEditor/widgets/WidgetTableEditor/TableHeader.vue'
 import {
   CELLS_LIMIT,
   tableInputCallMayBeHandled,
@@ -10,11 +9,11 @@ import {
 import ResizeHandles from '@/components/ResizeHandles.vue'
 import AgGridTableView from '@/components/shared/AgGridTableView.vue'
 import { injectGraphNavigator } from '@/providers/graphNavigator'
-import { useTooltipRegistry } from '@/providers/tooltipRegistry'
-import { Score, defineWidget, widgetProps } from '@/providers/widgetRegistry'
+import { defineWidget, Score, widgetProps } from '@/providers/widgetRegistry'
 import { WidgetEditHandler } from '@/providers/widgetRegistry/editHandler'
 import { useGraphStore } from '@/stores/graph'
 import { useSuggestionDbStore } from '@/stores/suggestionDatabase'
+import { targetIsOutside } from '@/util/autoBlur'
 import { Rect } from '@/util/data/rect'
 import { Vec2 } from '@/util/data/vec2'
 import { useToast } from '@/util/toast'
@@ -29,17 +28,23 @@ import type {
   ProcessDataFromClipboardParams,
   RowDragEndEvent,
 } from 'ag-grid-enterprise'
-import { computed, markRaw, ref } from 'vue'
+import { ComponentInstance, computed, proxyRefs, ref } from 'vue'
 import type { ComponentExposed } from 'vue-component-type-helpers'
 import { z } from 'zod'
+import TableHeader, { HeaderParams } from './WidgetTableEditor/TableHeader.vue'
 
 const props = defineProps(widgetProps(widgetDefinition))
 const graph = useGraphStore()
 const suggestionDb = useSuggestionDbStore()
-const grid = ref<ComponentExposed<typeof AgGridTableView<RowData, any>>>()
+const grid = ref<
+  ComponentInstance<typeof AgGridTableView<RowData, any>> &
+    ComponentExposed<typeof AgGridTableView<RowData, any>>
+>()
 const pasteWarning = useToast.warning()
 
-const configSchema = z.object({ size: z.object({ x: z.number(), y: z.number() }) })
+const configSchema = z.object({
+  size: z.object({ x: z.number(), y: z.number() }),
+})
 type Config = z.infer<typeof configSchema>
 
 const DEFAULT_CFG: Config = { size: { x: 200, y: 150 } }
@@ -115,34 +120,48 @@ const cellEditHandler = new CellEditing()
 
 class HeaderEditing {
   handler: WidgetEditHandler
-  stopEditingCallback: ((cancel: boolean) => void) | undefined
+  editedColId = ref<string>()
+  revertChangesCallback: (() => void) | undefined
 
   constructor() {
     this.handler = WidgetEditHandler.New('WidgetTableEditor.headerEditHandler', props.input, {
       cancel: () => {
-        this.stopEditingCallback?.(true)
+        this.revertChangesCallback?.()
+        this.editedColId.value = undefined
       },
       end: () => {
-        this.stopEditingCallback?.(false)
+        this.editedColId.value = undefined
+      },
+      pointerdown: (event) => {
+        if (
+          !(event.target instanceof HTMLInputElement) ||
+          targetIsOutside(event, grid.value?.$el)
+        ) {
+          this.handler.end()
+        } else {
+          return false
+        }
       },
     })
   }
 
-  headerEditedInGrid(stopCb: (cancel: boolean) => void) {
-    // If another header is edited, stop it (with the old callback).
-    if (this.handler.isActive()) {
-      this.stopEditingCallback?.(false)
-    }
-    this.stopEditingCallback = stopCb
-    if (!this.handler.isActive()) {
-      this.handler.start()
+  headerEditedInGrid(colId: string, revertChanges: () => void) {
+    if (this.editedColId.value !== colId) {
+      this.editedColId.value = colId
+      if (!this.handler.isActive()) {
+        this.handler.start()
+      }
     }
+    this.revertChangesCallback = revertChanges
   }
 
-  headerEditingStoppedInGrid() {
-    this.stopEditingCallback = undefined
-    if (this.handler.isActive()) {
-      this.handler.end()
+  headerEditingStoppedInGrid(colId: string) {
+    if (this.editedColId.value === colId) {
+      this.revertChangesCallback = undefined
+      this.editedColId.value = undefined
+      if (this.handler.isActive()) {
+        this.handler.end()
+      }
     }
   }
 }
@@ -164,7 +183,12 @@ const clientBounds = computed({
       portUpdate: {
         origin: props.input.portId,
         metadataKey: 'WidgetTableEditor',
-        metadata: { size: { x: value.width / graphNav.scale, y: value.height / graphNav.scale } },
+        metadata: {
+          size: {
+            x: value.width / graphNav.scale,
+            y: value.height / graphNav.scale,
+          },
+        },
       },
       directInteraction: false,
     })
@@ -211,23 +235,21 @@ function processDataFromClipboard({ data, api }: ProcessDataFromClipboardParams<
 
 // === Column Default Definition ===
 
-const tooltipRegistry = useTooltipRegistry()
-const defaultColDef: ColDef<RowData> = {
+const headerComponentParams = proxyRefs({
+  editedColId: headerEditHandler.editedColId,
+  onHeaderEditingStarted: headerEditHandler.headerEditedInGrid.bind(headerEditHandler),
+  onHeaderEditingStopped: headerEditHandler.headerEditingStoppedInGrid.bind(headerEditHandler),
+})
+
+const defaultColDef: ColDef<RowData> & {
+  headerComponentParams: HeaderParams
+} = {
   editable: true,
   resizable: true,
   sortable: false,
   lockPinned: true,
   menuTabs: ['generalMenuTab'],
-  headerComponentParams: {
-    // TODO[ao]: we mark raw, because otherwise any change _inside_ tooltipRegistry causes the grid
-    //  to be refreshed. Technically, shallowReactive should work here, but it does not,
-    //  I don't know why
-    tooltipRegistry: markRaw(tooltipRegistry),
-    editHandlers: {
-      onHeaderEditingStarted: headerEditHandler.headerEditedInGrid.bind(headerEditHandler),
-      onHeaderEditingStopped: headerEditHandler.headerEditingStoppedInGrid.bind(headerEditHandler),
-    },
-  },
+  headerComponentParams,
   cellStyle: { 'padding-left': 0, 'border-right': '1px solid #C0C0C0' },
 }
 </script>
@@ -260,7 +282,9 @@ export const widgetDefinition = defineWidget(
         :columnDefs="columnDefs"
         :rowData="rowData"
         :getRowId="(row) => `${row.data.index}`"
-        :components="{ agColumnHeader: TableHeader }"
+        :components="{
+          agColumnHeader: TableHeader,
+        }"
         :stopEditingWhenCellsLoseFocus="true"
         :suppressDragLeaveHidesColumns="true"
         :suppressMoveWhenColumnDragging="true"
diff --git a/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor/TableHeader.vue b/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor/TableHeader.vue
index 16fd638cffca..eb3c79a05374 100644
--- a/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor/TableHeader.vue
+++ b/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor/TableHeader.vue
@@ -1,66 +1,61 @@
 <script lang="ts">
 import SvgButton from '@/components/SvgButton.vue'
-import { provideTooltipRegistry, type TooltipRegistry } from '@/providers/tooltipRegistry'
 import type { IHeaderParams } from 'ag-grid-community'
 import { computed, ref, watch } from 'vue'
 
-export interface HeaderEditHandlers {
-  /** Setter called when column name is changed by the user. */
-  nameSetter: (newName: string) => void
-  onHeaderEditingStarted?: (stop: (cancel: boolean) => void) => void
-  onHeaderEditingStopped?: () => void
-}
-
 /**
- * A subset of {@link HeaderParams} which is meant to be specified for columns separately
- * (not in defaultColumnDef).
+ * Column-specific header parameters, set in particular column's definitions.
  */
-export type ColumnSpecificHeaderParams =
-  | { type: 'astColumn'; editHandlers: HeaderEditHandlers }
-  | { type: 'newColumn'; enabled?: boolean; newColumnRequested: () => void }
-  | { type: 'rowIndexColumn' }
+export interface ColumnSpecificParams {
+  columnParams:
+    | {
+        type: 'astColumn'
+        /** Setter called when column name is changed by the user. */
+        nameSetter: (newName: string) => void
+      }
+    | { type: 'newColumn'; enabled?: boolean; newColumnRequested: () => void }
+    | { type: 'rowIndexColumn' }
+}
 
 /**
- * Parameters recognized by this header component.
- *
- * They are set through `headerComponentParams` option in AGGrid column definition.
+ * General header parameters, set in default column configuration.
  */
-export type HeaderParams = ColumnSpecificHeaderParams & {
-  /**
-   * AgGrid mounts header components as separate "App", so we don't have access to any context.
-   * Threfore the tooltip registry must be provided by props.
-   */
-  tooltipRegistry: TooltipRegistry
+export interface HeaderParams {
+  /** The id of column whose header is currently edited. */
+  editedColId?: string | undefined
+  /** Callback called when editing this column is requested. */
+  onHeaderEditingStarted: (colId: string, revertChanges: () => void) => void
+  /** Callback called when editing of this column should be finished. */
+  onHeaderEditingStopped: (colId: string) => void
 }
 </script>
 
 <script setup lang="ts">
-const props = defineProps<{
-  params: IHeaderParams & HeaderParams
-}>()
-
-/** Re-provide tooltipRegistry. See `tooltipRegistry` docs in {@link HeaderParams} */
-provideTooltipRegistry.provideConstructed(props.params.tooltipRegistry)
-
-const editing = ref(false)
-const inputElement = ref<HTMLInputElement>()
-const editHandlers = computed(() =>
-  props.params.type === 'astColumn' ? props.params.editHandlers : undefined,
-)
+const props = defineProps<IHeaderParams & HeaderParams & ColumnSpecificParams>()
 
+const editing = computed(() => props.editedColId === props.column.getColId())
 watch(editing, (newVal) => {
-  if (newVal) {
-    editHandlers.value?.onHeaderEditingStarted?.((cancel: boolean) => {
-      if (cancel) editing.value = false
-      else acceptNewName()
-    })
-  } else {
-    editHandlers.value?.onHeaderEditingStopped?.()
+  if (!newVal) {
+    acceptNewName()
   }
 })
 
+const inputElement = ref<HTMLInputElement>()
+
+function emitEditStart() {
+  props.onHeaderEditingStarted?.(props.column.getColId(), () => {
+    if (inputElement.value) {
+      inputElement.value.value = props.displayName
+    }
+  })
+}
+
+function emitEditEnd() {
+  props.onHeaderEditingStopped?.(props.column.getColId())
+}
+
 watch(inputElement, (newVal, oldVal) => {
-  if (newVal != null && oldVal == null) {
+  if (newVal != null) {
     // Whenever input field appears, focus and select text
     newVal.focus()
     newVal.select()
@@ -68,7 +63,7 @@ watch(inputElement, (newVal, oldVal) => {
 })
 
 function acceptNewName() {
-  if (editHandlers.value == null) {
+  if (props.columnParams.type !== 'astColumn') {
     console.error("Tried to accept header new name where it's not editable!")
     return
   }
@@ -76,20 +71,22 @@ function acceptNewName() {
     console.error('Tried to accept header new name without input element!')
     return
   }
-  editHandlers.value.nameSetter(inputElement.value.value)
-  editing.value = false
+  if (inputElement.value.value !== props.displayName)
+    props.columnParams.nameSetter(inputElement.value.value)
+  if (editing.value) emitEditEnd()
 }
 
 function onMouseClick(event: MouseEvent) {
-  if (!editing.value && props.params.type === 'astColumn') {
-    editing.value = true
+  if (!editing.value && props.columnParams.type === 'astColumn') {
+    emitEditStart()
+  } else {
     event.stopPropagation()
   }
 }
 
 function onMouseRightClick(event: MouseEvent) {
   if (!editing.value) {
-    props.params.showColumnMenuAfterMouseClick(event)
+    props.showColumnMenuAfterMouseClick(event)
     event.preventDefault()
     event.stopPropagation()
   }
@@ -98,12 +95,12 @@ function onMouseRightClick(event: MouseEvent) {
 
 <template>
   <SvgButton
-    v-if="params.type === 'newColumn'"
+    v-if="columnParams.type === 'newColumn'"
     class="addColumnButton"
     name="add"
     title="Add new column"
-    :disabled="!(params.enabled ?? true)"
-    @click.stop="params.newColumnRequested()"
+    :disabled="!(columnParams.enabled ?? true)"
+    @click.stop="columnParams.newColumnRequested()"
   />
   <div
     v-else
@@ -118,8 +115,8 @@ function onMouseRightClick(event: MouseEvent) {
         v-if="editing"
         ref="inputElement"
         class="ag-input-field-input ag-text-field-input"
-        :value="params.displayName"
-        @change="acceptNewName()"
+        :value="displayName"
+        @change="acceptNewName"
         @keydown.arrow-left.stop
         @keydown.arrow-right.stop
         @keydown.arrow-up.stop
@@ -128,8 +125,8 @@ function onMouseRightClick(event: MouseEvent) {
       <span
         v-else
         class="ag-header-cell-text"
-        :class="{ virtualColumn: params.type !== 'astColumn' }"
-        >{{ params.displayName }}</span
+        :class="{ virtualColumn: columnParams.type !== 'astColumn' }"
+        >{{ displayName }}</span
       >
     </div>
   </div>
diff --git a/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor/__tests__/tableInputArgument.test.ts b/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor/__tests__/tableInputArgument.test.ts
index 03818aa88f13..8ff581c68f3f 100644
--- a/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor/__tests__/tableInputArgument.test.ts
+++ b/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor/__tests__/tableInputArgument.test.ts
@@ -168,8 +168,8 @@ test.each([
     )
     expect(tableNewArgs.rowData.value.length).toBe(rows + (expectNewRowEnabled ? 1 : 0))
     const lastColDef = tableNewArgs.columnDefs.value[tableNewArgs.columnDefs.value.length - 1]
-    assert(lastColDef?.headerComponentParams?.type === 'newColumn')
-    expect(lastColDef.headerComponentParams.enabled ?? true).toBe(expectNewColEnabled)
+    assert(lastColDef?.headerComponentParams.columnParams.type === 'newColumn')
+    expect(lastColDef.headerComponentParams.columnParams.enabled ?? true).toBe(expectNewColEnabled)
   },
 )
 
@@ -312,9 +312,9 @@ test.each([
     (colDef) => colDef.colId === NEW_COLUMN_ID,
   )
   assert(newColumnDef != null)
-  assert(newColumnDef.headerComponentParams?.type === 'newColumn')
-  assert(newColumnDef.headerComponentParams.newColumnRequested != null)
-  newColumnDef.headerComponentParams.newColumnRequested()
+  assert(newColumnDef.headerComponentParams?.columnParams.type === 'newColumn')
+  assert(newColumnDef.headerComponentParams.columnParams.newColumnRequested != null)
+  newColumnDef.headerComponentParams.columnParams.newColumnRequested()
   expect(onUpdate).toHaveBeenCalledOnce()
   if (importExpected) expect(addMissingImports).toHaveBeenCalled()
   else expect(addMissingImports).not.toHaveBeenCalled()
diff --git a/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor/tableInputArgument.ts b/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor/tableInputArgument.ts
index c7be71d8c4b9..06dce9120750 100644
--- a/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor/tableInputArgument.ts
+++ b/app/gui/src/project-view/components/GraphEditor/widgets/WidgetTableEditor/tableInputArgument.ts
@@ -11,7 +11,7 @@ import type { ToValue } from '@/util/reactivity'
 import type { ColDef } from 'ag-grid-enterprise'
 import * as iter from 'enso-common/src/utilities/data/iter'
 import { computed, toValue } from 'vue'
-import type { ColumnSpecificHeaderParams } from './TableHeader.vue'
+import type { ColumnSpecificParams } from './TableHeader.vue'
 
 /** Id of a fake column with "Add new column" option. */
 export const NEW_COLUMN_ID = 'NewColumn'
@@ -44,7 +44,7 @@ export interface ColumnDef extends ColDef<RowData> {
   mainMenuItems: (string | MenuItem<RowData>)[]
   contextMenuItems: (string | MenuItem<RowData>)[]
   rowDrag?: ({ data }: { data: RowData | undefined }) => boolean
-  headerComponentParams?: ColumnSpecificHeaderParams
+  headerComponentParams: ColumnSpecificParams
 }
 
 namespace cellValueConversion {
@@ -287,13 +287,15 @@ export function useTableInputArgument(
     width: 40,
     maxWidth: 40,
     headerComponentParams: {
-      type: 'newColumn',
-      enabled: mayAddNewColumn(),
-      newColumnRequested: () => {
-        const edit = graph.startEdit()
-        fixColumns(edit)
-        addColumn(edit, `${DEFAULT_COLUMN_PREFIX}${columns.value.length + 1}`)
-        onUpdate({ edit, directInteraction: true })
+      columnParams: {
+        type: 'newColumn',
+        enabled: mayAddNewColumn(),
+        newColumnRequested: () => {
+          const edit = graph.startEdit()
+          fixColumns(edit)
+          addColumn(edit, `${DEFAULT_COLUMN_PREFIX}${columns.value.length + 1}`)
+          onUpdate({ edit, directInteraction: true })
+        },
       },
     },
     mainMenuItems: ['autoSizeThis', 'autoSizeAll'],
@@ -309,9 +311,7 @@ export function useTableInputArgument(
     editable: false,
     resizable: false,
     suppressNavigable: true,
-    headerComponentParams: {
-      type: 'rowIndexColumn',
-    },
+    headerComponentParams: { columnParams: { type: 'rowIndexColumn' } },
     mainMenuItems: ['autoSizeThis', 'autoSizeAll'],
     contextMenuItems: [removeRowMenuItem],
     cellClass: 'rowIndexCell',
@@ -355,8 +355,8 @@ export function useTableInputArgument(
             return true
           },
           headerComponentParams: {
-            type: 'astColumn',
-            editHandlers: {
+            columnParams: {
+              type: 'astColumn',
               nameSetter: (newName: string) => {
                 const edit = graph.startEdit()
                 fixColumns(edit)
diff --git a/app/gui/src/project-view/components/MarkdownEditor/MarkdownEditorImpl.vue b/app/gui/src/project-view/components/MarkdownEditor/MarkdownEditorImpl.vue
index ed9f3f4c6190..be8dfe603377 100644
--- a/app/gui/src/project-view/components/MarkdownEditor/MarkdownEditorImpl.vue
+++ b/app/gui/src/project-view/components/MarkdownEditor/MarkdownEditorImpl.vue
@@ -2,7 +2,7 @@
 import CodeMirrorRoot from '@/components/CodeMirrorRoot.vue'
 import { transformPastedText } from '@/components/DocumentationEditor/textPaste'
 import { ensoMarkdown } from '@/components/MarkdownEditor/markdown'
-import VueComponentHost from '@/components/VueComponentHost.vue'
+import VueHostRender, { VueHost } from '@/components/VueHostRender.vue'
 import { useCodeMirror } from '@/util/codemirror'
 import { highlightStyle } from '@/util/codemirror/highlight'
 import { useLinkTitles } from '@/util/codemirror/links'
@@ -20,7 +20,7 @@ const { content } = defineProps<{
 const focused = ref(false)
 const editing = computed(() => !readonly.value && focused.value)
 
-const vueHost = useTemplateRef<ComponentInstance<typeof VueComponentHost>>('vueHost')
+const vueHost = new VueHost()
 const editorRoot = useTemplateRef<ComponentInstance<typeof CodeMirrorRoot>>('editorRoot')
 const { editorView, readonly, putTextAt } = useCodeMirror(editorRoot, {
   content: () => content,
@@ -31,7 +31,7 @@ const { editorView, readonly, putTextAt } = useCodeMirror(editorRoot, {
     EditorView.clipboardInputFilter.of(transformPastedText),
     ensoMarkdown(),
   ],
-  vueHost: () => vueHost.value || undefined,
+  vueHost: () => vueHost,
 })
 
 useLinkTitles(editorView, { readonly })
@@ -65,7 +65,7 @@ defineExpose({
     :class="{ editing }"
     @focusout="focused = false"
   />
-  <VueComponentHost ref="vueHost" />
+  <VueHostRender :host="vueHost" />
 </template>
 
 <style scoped>
diff --git a/app/gui/src/project-view/components/MarkdownEditor/markdown/decoration/linksAndImages.ts b/app/gui/src/project-view/components/MarkdownEditor/markdown/decoration/linksAndImages.ts
index b04d76b9fdb8..3875cd5ac30d 100644
--- a/app/gui/src/project-view/components/MarkdownEditor/markdown/decoration/linksAndImages.ts
+++ b/app/gui/src/project-view/components/MarkdownEditor/markdown/decoration/linksAndImages.ts
@@ -1,6 +1,6 @@
 import DocumentationImage from '@/components/MarkdownEditor/DocumentationImage.vue'
 import { TreeViewDecorator } from '@/components/MarkdownEditor/markdown/decoration/treeViewDecorator'
-import { type VueHost } from '@/components/VueComponentHost.vue'
+import { type VueHost } from '@/components/VueHostRender.vue'
 import { linkEditPopup } from '@/util/codemirror/linkEditPopup'
 import { linkAttributesFactory, linkAttributesFactoryChanged } from '@/util/codemirror/links'
 import { vueHostChanged } from '@/util/codemirror/vueHostExt'
diff --git a/app/gui/src/project-view/components/MarkdownEditor/markdown/decoration/table.ts b/app/gui/src/project-view/components/MarkdownEditor/markdown/decoration/table.ts
index 7dcb98684fe6..8ca62c41a792 100644
--- a/app/gui/src/project-view/components/MarkdownEditor/markdown/decoration/table.ts
+++ b/app/gui/src/project-view/components/MarkdownEditor/markdown/decoration/table.ts
@@ -1,5 +1,5 @@
 import TableEditor from '@/components/MarkdownEditor/TableEditor.vue'
-import { type VueHost } from '@/components/VueComponentHost.vue'
+import { type VueHost } from '@/components/VueHostRender.vue'
 import type { Text } from '@codemirror/state'
 import { Decoration, WidgetType } from '@codemirror/view'
 import type { SyntaxNode, SyntaxNodeRef } from '@lezer/common'
diff --git a/app/gui/src/project-view/components/MarkdownEditor/markdown/decoration/treeStateDecorator.ts b/app/gui/src/project-view/components/MarkdownEditor/markdown/decoration/treeStateDecorator.ts
index 4e4d7dbe7309..e82d02fd4acf 100644
--- a/app/gui/src/project-view/components/MarkdownEditor/markdown/decoration/treeStateDecorator.ts
+++ b/app/gui/src/project-view/components/MarkdownEditor/markdown/decoration/treeStateDecorator.ts
@@ -1,4 +1,4 @@
-import { type VueHost } from '@/components/VueComponentHost.vue'
+import { type VueHost } from '@/components/VueHostRender.vue'
 import { getVueHost, vueHostChanged } from '@/util/codemirror/vueHostExt'
 import { syntaxTree } from '@codemirror/language'
 import {
diff --git a/app/gui/src/project-view/components/MarkdownEditor/markdown/decoration/treeViewDecorator.ts b/app/gui/src/project-view/components/MarkdownEditor/markdown/decoration/treeViewDecorator.ts
index cdb9bfe7b88e..3b0a7907846d 100644
--- a/app/gui/src/project-view/components/MarkdownEditor/markdown/decoration/treeViewDecorator.ts
+++ b/app/gui/src/project-view/components/MarkdownEditor/markdown/decoration/treeViewDecorator.ts
@@ -1,4 +1,4 @@
-import { type VueHost } from '@/components/VueComponentHost.vue'
+import { type VueHost } from '@/components/VueHostRender.vue'
 import { getVueHost } from '@/util/codemirror/vueHostExt'
 import { syntaxTree } from '@codemirror/language'
 import { type EditorState, RangeSetBuilder, type Text } from '@codemirror/state'
diff --git a/app/gui/src/project-view/components/PlainTextEditor/PlainTextEditorImpl.vue b/app/gui/src/project-view/components/PlainTextEditor/PlainTextEditorImpl.vue
index c158d3456c5c..b57982b42674 100644
--- a/app/gui/src/project-view/components/PlainTextEditor/PlainTextEditorImpl.vue
+++ b/app/gui/src/project-view/components/PlainTextEditor/PlainTextEditorImpl.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import CodeMirrorRoot from '@/components/CodeMirrorRoot.vue'
 import { linkifyUrls } from '@/components/PlainTextEditor/linkifyUrls'
-import VueComponentHost from '@/components/VueComponentHost.vue'
+import VueHostRender, { VueHost } from '@/components/VueHostRender.vue'
 import { useCodeMirror } from '@/util/codemirror'
 import { useLinkTitles } from '@/util/codemirror/links'
 import { useTemplateRef, type ComponentInstance } from 'vue'
@@ -10,11 +10,11 @@ import * as Y from 'yjs'
 const { content } = defineProps<{ content: Y.Text | string }>()
 
 const editorRoot = useTemplateRef<ComponentInstance<typeof CodeMirrorRoot>>('editorRoot')
-const vueHost = useTemplateRef<ComponentInstance<typeof VueComponentHost>>('vueHost')
+const vueHost = new VueHost()
 const { editorView, readonly, contentElement } = useCodeMirror(editorRoot, {
   content: () => content,
   extensions: [linkifyUrls],
-  vueHost: () => vueHost.value || undefined,
+  vueHost: () => vueHost,
 })
 
 useLinkTitles(editorView, { readonly })
@@ -26,7 +26,7 @@ defineExpose({
 
 <template>
   <CodeMirrorRoot ref="editorRoot" v-bind="$attrs" />
-  <VueComponentHost ref="vueHost" />
+  <VueHostRender :host="vueHost" />
 </template>
 
 <style scoped>
diff --git a/app/gui/src/project-view/components/VueComponentHost.vue b/app/gui/src/project-view/components/VueComponentHost.vue
deleted file mode 100644
index b785f728d2d0..000000000000
--- a/app/gui/src/project-view/components/VueComponentHost.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<script setup lang="ts">
-import { useObjectId } from 'enso-common/src/utilities/data/object'
-import { type Component, reactive } from 'vue'
-
-const teleportations = reactive(new Map<Component, HTMLElement>())
-
-defineExpose({
-  register: (component: Component, element: HTMLElement) => {
-    teleportations.set(component, element)
-    return { unregister: () => teleportations.delete(component) }
-  },
-} satisfies VueHost)
-
-const { objectId } = useObjectId()
-</script>
-
-<script lang="ts">
-/**
- * Supports creation of Vue Components within a particular Vue context.
- *
- * This enables creating Vue Components from code run outside any Vue context by APIs that render custom HTML content
- * but aren't Vue-aware.
- */
-export interface VueHost {
-  /**
-   * Request the given component to begin being rendered as a child of the specified HTML element. The returned
-   * `unregister` function should be called when the component should no longer be rendered.
-   */
-  register: (component: Component, element: HTMLElement) => { unregister: () => void }
-}
-</script>
-
-<template>
-  <template v-for="[component, slot] in teleportations.entries()" :key="objectId(component)">
-    <Teleport :to="slot">
-      <component :is="component" />
-    </Teleport>
-  </template>
-</template>
diff --git a/app/gui/src/project-view/components/VueHostRender.vue b/app/gui/src/project-view/components/VueHostRender.vue
new file mode 100644
index 000000000000..7213be14e327
--- /dev/null
+++ b/app/gui/src/project-view/components/VueHostRender.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { type Component, reactive } from 'vue'
+
+const _props = defineProps<{
+  host: VueHost
+}>()
+</script>
+
+<script lang="ts">
+let nextId = 0
+
+/**
+ * Supports creation of Vue Components within a particular Vue context.
+ *
+ * This enables creating Vue Components from code run outside any Vue context by APIs that render custom HTML content
+ * but aren't Vue-aware.
+ *
+ * To render registered components, the VueHost object should be passed to VueHostRender component.
+ */
+export class VueHost {
+  readonly teleportations = reactive(new Map<number | string | symbol, [Component, HTMLElement]>())
+
+  /**
+   * Request the given component to begin being rendered as a child of the specified HTML element. The returned
+   * handle allows updating and unregistering the component.
+   */
+  register(
+    component: Component,
+    element: HTMLElement,
+    customKey?: string | symbol,
+  ): VueComponentHandle {
+    const key = customKey ?? nextId++
+    this.teleportations.set(key, [component, element])
+    return {
+      unregister: () => this.teleportations.delete(key),
+      update: (component: Component, element: HTMLElement) =>
+        this.teleportations.set(key, [component, element]),
+    }
+  }
+}
+
+export interface VueComponentHandle {
+  unregister: () => void
+  update: (component: Component, element: HTMLElement) => void
+}
+</script>
+
+<template>
+  <template v-for="[key, [component, slot]] in host.teleportations.entries()" :key="key">
+    <Teleport :to="slot">
+      <component :is="component" />
+    </Teleport>
+  </template>
+</template>
diff --git a/app/gui/src/project-view/components/shared/AgGridTableView.vue b/app/gui/src/project-view/components/shared/AgGridTableView.vue
index da7cc89a5a43..70af524a0a4b 100644
--- a/app/gui/src/project-view/components/shared/AgGridTableView.vue
+++ b/app/gui/src/project-view/components/shared/AgGridTableView.vue
@@ -1,8 +1,4 @@
 <script lang="ts">
-import { gridBindings } from '@/bindings'
-import { modKey } from '@/composables/events'
-import type { MenuItemDef } from 'ag-grid-enterprise'
-import { ref } from 'vue'
 /**
  * A more specialized version of AGGrid's `MenuItemDef` to simplify testing (the tests need to provide
  * only values actually used by the composable)
@@ -65,7 +61,9 @@ export const commonContextMenuActions = {
  * Component adding some useful logic to AGGrid table component (like keeping track of colum sizes),
  * and using common style for tables in our application.
  */
+import { gridBindings } from '@/bindings'
 import type { TextFormatOptions } from '@/components/visualizations/TableVisualization.vue'
+import { modKey } from '@/composables/events'
 import { useAutoBlur } from '@/util/autoBlur'
 import type {
   CellEditingStartedEvent,
@@ -77,6 +75,9 @@ import type {
   GetRowIdFunc,
   GridApi,
   GridReadyEvent,
+  IHeaderComp,
+  IHeaderParams,
+  MenuItemDef,
   ProcessDataFromClipboardParams,
   RowDataUpdatedEvent,
   RowEditingStartedEvent,
@@ -86,22 +87,32 @@ import type {
 } from 'ag-grid-enterprise'
 import * as iter from 'enso-common/src/utilities/data/iter'
 import { LINE_BOUNDARIES } from 'enso-common/src/utilities/data/string'
-import { type ComponentInstance, reactive, shallowRef, watch } from 'vue'
+import {
+  Component,
+  type ComponentInstance,
+  computed,
+  h,
+  reactive,
+  ref,
+  shallowRef,
+  watch,
+} from 'vue'
 import { clipboardNodeData, writeClipboard } from '../GraphEditor/clipboard'
 import {
   parseTsvData,
   rowsToTsv,
   tableToEnsoExpression,
 } from '../GraphEditor/widgets/WidgetTableEditor/tableParsing'
+import { VueComponentHandle, default as VueComponentHost, VueHost } from '../VueHostRender.vue'
 
 const DEFAULT_ROW_HEIGHT = 22
 
-const _props = defineProps<{
+const props = defineProps<{
   rowData: TData[]
   columnDefs: (ColDef<TData, TValue> | ColGroupDef<TData>)[] | null
   defaultColDef: ColDef<TData>
   getRowId?: GetRowIdFunc<TData>
-  components?: Record<string, unknown>
+  components?: Record<string, Component>
   singleClickEdit?: boolean
   stopEditingWhenCellsLoseFocus?: boolean
   suppressDragLeaveHidesColumns?: boolean
@@ -130,7 +141,7 @@ function onGridReady(event: GridReadyEvent<TData>) {
 }
 
 function getRowHeight(params: RowHeightParams): number {
-  if (_props.textFormatOption === 'off') {
+  if (props.textFormatOption === 'off') {
     return DEFAULT_ROW_HEIGHT
   }
   const rowData = Object.values(params.data)
@@ -149,7 +160,7 @@ function getRowHeight(params: RowHeightParams): number {
 }
 
 watch(
-  () => _props.textFormatOption,
+  () => props.textFormatOption,
   () => {
     gridApi.value?.redrawRows()
     gridApi.value?.resetRowHeights()
@@ -300,7 +311,41 @@ function stopIfPrevented(event: Event) {
   if (event.defaultPrevented) event.stopPropagation()
 }
 
-const { AgGridVue } = await import('ag-grid-vue3')
+// === Wrapping and Hosting Vue Components ===
+
+const vueHost = new VueHost()
+
+const mappedComponents = computed(() => {
+  if (!props.components) return
+  const retval: Record<string, new () => IHeaderComp> = {}
+  for (const [key, comp] of Object.entries(props.components)) {
+    class ComponentWrapper implements IHeaderComp {
+      private readonly container: HTMLElement = document.createElement('div')
+      private handle: VueComponentHandle | undefined
+
+      init(params: IHeaderParams) {
+        this.handle = vueHost.register(h(comp, params), this.container)
+      }
+
+      getGui() {
+        return this.container
+      }
+
+      refresh(params: IHeaderParams) {
+        this.handle?.update(h(comp, params), this.container)
+        return true
+      }
+
+      destroy() {
+        this.handle?.unregister()
+      }
+    }
+    retval[key] = ComponentWrapper
+  }
+  return retval
+})
+
+const { AgGridVue } = await import('./AgGridTableView/AgGridVue')
 </script>
 
 <template>
@@ -320,7 +365,7 @@ const { AgGridVue } = await import('ag-grid-vue3')
       :suppressFieldDotNotation="true"
       :enableRangeSelection="true"
       :popupParent="popupParent"
-      :components="components"
+      :components="mappedComponents"
       :singleClickEdit="singleClickEdit"
       :stopEditingWhenCellsLoseFocus="stopEditingWhenCellsLoseFocus"
       :suppressDragLeaveHidesColumns="suppressDragLeaveHidesColumns"
@@ -339,6 +384,7 @@ const { AgGridVue } = await import('ag-grid-vue3')
       @filterChanged="emit('sortOrFilterUpdated', $event)"
       @contextmenu="stopIfPrevented"
     />
+    <VueComponentHost :host="vueHost" />
   </div>
 </template>
 
diff --git a/app/gui/src/project-view/components/shared/AgGridTableView/AgGridVue.ts b/app/gui/src/project-view/components/shared/AgGridTableView/AgGridVue.ts
new file mode 100644
index 000000000000..268f5433e679
--- /dev/null
+++ b/app/gui/src/project-view/components/shared/AgGridTableView/AgGridVue.ts
@@ -0,0 +1,262 @@
+/**
+ * @file Copy of https://github.com/ag-grid/ag-grid/blob/v32.3.3/packages/ag-grid-vue3/src/AgGridVue.ts
+ * with special overrides for Vue components removed; we handle them in a better way.
+ *
+ * Original file licenced under The MIT License:
+ *
+ * Copyright (c) 2015-2024 AG GRID LTD
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+// This is not our code, so I just blocked failing lints.
+/* eslint-disable vue/require-default-prop */
+/* eslint-disable vue/require-prop-types */
+/* eslint-disable vue/order-in-components */
+
+import type { AgEventType, GridApi, GridOptions, IRowNode, Module } from 'ag-grid-community'
+import {
+  ALWAYS_SYNC_GLOBAL_EVENTS,
+  ComponentUtil,
+  _combineAttributesAndGridOptions,
+  _processOnChange,
+  _warnOnce,
+  createGrid,
+} from 'ag-grid-community'
+import type { PropType } from 'vue'
+import { defineComponent, getCurrentInstance, h, markRaw, toRaw } from 'vue'
+
+import type { Properties } from './Utils'
+import { convertToRaw, getAgGridProperties } from './Utils'
+
+const ROW_DATA_EVENTS: Set<string> = new Set([
+  'rowDataUpdated',
+  'cellValueChanged',
+  'rowValueChanged',
+])
+const DATA_MODEL_ATTR_NAME = 'onUpdate:modelValue' // emit name would be update:ModelValue
+const DATA_MODEL_EMIT_NAME = 'update:modelValue'
+
+const [props, computed, watch] = getAgGridProperties()
+
+export const AgGridVue = defineComponent({
+  render() {
+    return h('div')
+  },
+  props: {
+    gridOptions: {
+      type: Object as PropType<GridOptions>,
+      default: () => ({}) as GridOptions,
+    },
+    componentDependencies: {
+      type: Array as PropType<string[]>,
+      default: () => [],
+    },
+    plugins: [],
+    modules: {
+      type: Array as PropType<Module[]>,
+      default: () => [],
+    },
+    modelValue: {
+      type: Array,
+      default: undefined,
+      required: false,
+    },
+    ...props,
+  },
+  data(): {
+    api: GridApi | undefined
+    gridCreated: boolean
+    isDestroyed: boolean
+    gridReadyFired: boolean
+    emitRowModel?: (() => void | null) | undefined
+    batchTimeout: number | null
+    batchChanges: { [key: string]: any }
+  } {
+    return {
+      api: undefined,
+      gridCreated: false,
+      isDestroyed: false,
+      gridReadyFired: false,
+      emitRowModel: undefined,
+      batchTimeout: null,
+      batchChanges: markRaw({}),
+    }
+  },
+  computed,
+  watch,
+  methods: {
+    globalEventListenerFactory(restrictToSyncOnly?: boolean) {
+      return (eventType: AgEventType) => {
+        if (this.isDestroyed) {
+          return
+        }
+
+        if (eventType === 'gridReady') {
+          this.gridReadyFired = true
+        }
+
+        const alwaysSync = ALWAYS_SYNC_GLOBAL_EVENTS.has(eventType)
+        if ((alwaysSync && !restrictToSyncOnly) || (!alwaysSync && restrictToSyncOnly)) {
+          return
+        }
+
+        this.updateModelIfUsed(eventType)
+      }
+    },
+    processChanges(propertyName: string, currentValue: any, previousValue: any) {
+      if (this.gridCreated) {
+        if (this.skipChange(propertyName, currentValue, previousValue)) {
+          return
+        }
+
+        const options: Properties = {
+          [propertyName]:
+            propertyName === 'rowData' ?
+              Object.isFrozen(currentValue) ?
+                currentValue
+              : markRaw(toRaw(currentValue))
+            : currentValue,
+        }
+        // decouple the row data - if we don't when the grid changes row data directly that'll trigger this component to react to rowData changes,
+        // which can reset grid state (ie row selection)
+        _processOnChange(options, this.api as any)
+      }
+    },
+    checkForBindingConflicts() {
+      const thisAsAny = this as any
+      if (
+        ((thisAsAny.rowData && thisAsAny.rowData !== 'AG-VUE-OMITTED-PROPERTY') ||
+          this.gridOptions.rowData) &&
+        thisAsAny.modelValue
+      ) {
+        _warnOnce('Using both rowData and v-model. rowData will be ignored.')
+      }
+    },
+    getRowData(): any[] {
+      const rowData: any[] = []
+      this.api?.forEachNode((rowNode: IRowNode) => {
+        rowData.push(rowNode.data)
+      })
+      return rowData
+    },
+    updateModelIfUsed(eventType: string) {
+      if (
+        this.gridReadyFired &&
+        this.$attrs[DATA_MODEL_ATTR_NAME] &&
+        ROW_DATA_EVENTS.has(eventType)
+      ) {
+        if (this.emitRowModel) {
+          this.emitRowModel()
+        }
+      }
+    },
+    getRowDataBasedOnBindings() {
+      const thisAsAny = this as any
+
+      const rowData = thisAsAny.modelValue
+      return (
+        rowData ? rowData
+        : thisAsAny.rowData ? thisAsAny.rowData
+        : thisAsAny.gridOptions.rowData
+      )
+    },
+    getProvides() {
+      let instance = getCurrentInstance() as any
+      let provides = {}
+
+      while (instance) {
+        if (instance && instance.provides) {
+          provides = { ...provides, ...instance.provides }
+        }
+
+        instance = instance.parent
+      }
+
+      return provides
+    },
+    /*
+     * Prevents an infinite loop when using v-model for the rowData
+     */
+    skipChange(propertyName: string, currentValue: any, previousValue: any) {
+      if (this.gridReadyFired && propertyName === 'rowData' && this.$attrs[DATA_MODEL_ATTR_NAME]) {
+        if (currentValue === previousValue) {
+          return true
+        }
+
+        if (currentValue && previousValue) {
+          const currentRowData = currentValue as any[]
+          const previousRowData = previousValue as any[]
+          if (currentRowData.length === previousRowData.length) {
+            for (let i = 0; i < currentRowData.length; i++) {
+              if (currentRowData[i] !== previousRowData[i]) {
+                return false
+              }
+            }
+            return true
+          }
+        }
+      }
+
+      return false
+    },
+    debounce(func: () => void, delay: number) {
+      let timeout: number
+      return () => {
+        const later = function () {
+          func()
+        }
+        window.clearTimeout(timeout)
+        timeout = window.setTimeout(later, delay)
+      }
+    },
+  },
+  mounted() {
+    // we debounce the model update to prevent a flood of updates in the event there are many individual
+    // cell/row updates
+    this.emitRowModel = this.debounce(() => {
+      this.$emit(DATA_MODEL_EMIT_NAME, Object.freeze(this.getRowData()))
+    }, 20)
+
+    // the gridOptions we pass to the grid don't need to be reactive (and shouldn't be - it'll cause issues
+    // with mergeDeep for example
+    const gridOptions = markRaw(_combineAttributesAndGridOptions(toRaw(this.gridOptions), this))
+
+    this.checkForBindingConflicts()
+
+    const rowData = this.getRowDataBasedOnBindings()
+    if (rowData !== ComponentUtil.VUE_OMITTED_PROPERTY) {
+      gridOptions.rowData = convertToRaw(rowData)
+    }
+
+    const gridParams = {
+      globalEventListener: this.globalEventListenerFactory().bind(this),
+      globalSyncEventListener: this.globalEventListenerFactory(true).bind(this),
+      modules: this.modules,
+    }
+
+    this.api = createGrid(this.$el as HTMLElement, gridOptions, gridParams)
+    this.gridCreated = true
+  },
+  unmounted() {
+    if (this.gridCreated) {
+      this.api?.destroy()
+      this.isDestroyed = true
+    }
+  },
+})
diff --git a/app/gui/src/project-view/components/shared/AgGridTableView/Utils.ts b/app/gui/src/project-view/components/shared/AgGridTableView/Utils.ts
new file mode 100644
index 000000000000..95db41648a84
--- /dev/null
+++ b/app/gui/src/project-view/components/shared/AgGridTableView/Utils.ts
@@ -0,0 +1,122 @@
+/**
+ * @file Copy of https://github.com/ag-grid/ag-grid/blob/v32.3.3/packages/ag-grid-vue3/src/Utils.ts
+ * Used by our version of AgGridVue.ts.
+ *
+ * Original file licenced under The MIT License:
+ *
+ * Copyright (c) 2015-2024 AG GRID LTD
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import { ComponentUtil, _processOnChange } from 'ag-grid-community'
+import { markRaw, toRaw } from 'vue'
+
+export const kebabProperty = (property: string) => {
+  return property.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase()
+}
+
+export const kebabNameToAttrEventName = (kebabName: string) => {
+  // grid-ready for example would become onGrid-ready in Vue
+  return `on${kebabName.charAt(0).toUpperCase()}${kebabName.substring(1, kebabName.length)}`
+}
+
+export const convertToRaw = (value: any) =>
+  value ?
+    Object.isFrozen(value) ?
+      value
+    : markRaw(toRaw(value))
+  : value
+
+export interface Properties {
+  [propertyName: string]: any
+}
+
+export const getAgGridProperties = (): [Properties, Properties, Properties] => {
+  const props: Properties = {}
+
+  // for example, 'grid-ready' would become 'onGrid-ready': undefined
+  // without this emitting events results in a warning
+  // and adding 'grid-ready' (and variations of this to the emits option in AgGridVue doesn't help either)
+  const eventNameAsProps = ComponentUtil.PUBLIC_EVENTS.map((eventName: string) =>
+    kebabNameToAttrEventName(kebabProperty(eventName)),
+  )
+  eventNameAsProps.forEach((eventName: string) => (props[eventName] = undefined))
+
+  const computed: Properties = {}
+
+  const watch: Properties = {
+    modelValue: {
+      handler(currentValue: any, previousValue: any) {
+        if (!this.gridCreated || !this.api) {
+          return
+        }
+
+        /*
+         * Prevents an infinite loop when using v-model for the rowData
+         */
+        if (currentValue === previousValue) {
+          return
+        }
+        if (currentValue && previousValue) {
+          if (currentValue.length === previousValue.length) {
+            if (currentValue.every((item: any, index: number) => item === previousValue[index])) {
+              return
+            }
+          }
+        }
+
+        _processOnChange({ rowData: currentValue }, this.api)
+      },
+      deep: true,
+    },
+  }
+
+  ComponentUtil.ALL_PROPERTIES.filter((propertyName: string) => propertyName != 'gridOptions') // dealt with in AgGridVue itself
+    .forEach((propertyName: string) => {
+      props[propertyName] = {
+        default: ComponentUtil.VUE_OMITTED_PROPERTY,
+      }
+
+      watch[propertyName] = {
+        handler(currentValue: any, _previousValue: any) {
+          let currValue = currentValue
+
+          if (propertyName === 'rowData' && currentValue != ComponentUtil.VUE_OMITTED_PROPERTY) {
+            // Prevent the grids internal edits from being reactive
+            currValue = convertToRaw(currentValue)
+          }
+
+          this.batchChanges[propertyName] =
+            currValue === ComponentUtil.VUE_OMITTED_PROPERTY ? undefined : currValue
+          if (this.batchTimeout == null) {
+            this.batchTimeout = setTimeout(() => {
+              // Clear the timeout before processing the changes in case processChanges triggers another change.
+              this.batchTimeout = null
+              _processOnChange(this.batchChanges, this.api)
+              this.batchChanges = markRaw({})
+            }, 0)
+          }
+        },
+        deep: true,
+      }
+    })
+
+  return [props, computed, watch]
+}
diff --git a/app/gui/src/project-view/util/codemirror/index.ts b/app/gui/src/project-view/util/codemirror/index.ts
index 2a220fd08784..2c6e16e9b593 100644
--- a/app/gui/src/project-view/util/codemirror/index.ts
+++ b/app/gui/src/project-view/util/codemirror/index.ts
@@ -1,6 +1,6 @@
 import { textEditorsBindings } from '@/bindings'
 import CodeMirrorRoot from '@/components/CodeMirrorRoot.vue'
-import { type VueHost } from '@/components/VueComponentHost.vue'
+import { type VueHost } from '@/components/VueHostRender.vue'
 import { injectKeyboard } from '@/providers/keyboard'
 import { useCompartment, useDispatch, useStateEffect } from '@/util/codemirror/reactivity'
 import { setVueHost } from '@/util/codemirror/vueHostExt'
diff --git a/app/gui/src/project-view/util/codemirror/linkEditPopup.ts b/app/gui/src/project-view/util/codemirror/linkEditPopup.ts
index 96f90e3fc433..df3ad6183415 100644
--- a/app/gui/src/project-view/util/codemirror/linkEditPopup.ts
+++ b/app/gui/src/project-view/util/codemirror/linkEditPopup.ts
@@ -1,5 +1,5 @@
 import LinkEditPopup from '@/components/LinkEditPopup.vue'
-import { type VueHost } from '@/components/VueComponentHost.vue'
+import { type VueHost } from '@/components/VueHostRender.vue'
 import {
   contentFocused,
   contentFocusedChanged,
diff --git a/app/gui/src/project-view/util/codemirror/vueHostExt.ts b/app/gui/src/project-view/util/codemirror/vueHostExt.ts
index 39f619d7de1b..1c9fb26ac97e 100644
--- a/app/gui/src/project-view/util/codemirror/vueHostExt.ts
+++ b/app/gui/src/project-view/util/codemirror/vueHostExt.ts
@@ -1,4 +1,4 @@
-import { type VueHost } from '@/components/VueComponentHost.vue'
+import { type VueHost } from '@/components/VueHostRender.vue'
 import { valueExt } from '@/util/codemirror/stateEffect'
 
 /** A CodeMirror extension for getting and setting a {@link VueHost} for Vue-based decorations. */
diff --git a/distribution/lib/Standard/AWS/0.0.0-dev/src/Database/Redshift/Internal/Redshift_Dialect.enso b/distribution/lib/Standard/AWS/0.0.0-dev/src/Database/Redshift/Internal/Redshift_Dialect.enso
index 36752731167d..64a732229e1e 100644
--- a/distribution/lib/Standard/AWS/0.0.0-dev/src/Database/Redshift/Internal/Redshift_Dialect.enso
+++ b/distribution/lib/Standard/AWS/0.0.0-dev/src/Database/Redshift/Internal/Redshift_Dialect.enso
@@ -185,8 +185,9 @@ type Redshift_Dialect
     ## PRIVATE
        Checks if a feature is supported by the dialect.
     is_feature_supported self feature:Feature -> Boolean =
-        _ = feature
-        True
+        case feature of
+            Feature.Offset -> False
+            _ -> True
 
     ## PRIVATE
        Checks a dialect flag
diff --git a/distribution/lib/Standard/Database/0.0.0-dev/src/DB_Table.enso b/distribution/lib/Standard/Database/0.0.0-dev/src/DB_Table.enso
index 523720f6a7f7..a75ad348260b 100644
--- a/distribution/lib/Standard/Database/0.0.0-dev/src/DB_Table.enso
+++ b/distribution/lib/Standard/Database/0.0.0-dev/src/DB_Table.enso
@@ -44,7 +44,7 @@ import Standard.Table.Internal.Widget_Helpers
 import Standard.Table.Row.Row
 import Standard.Table.Rows_To_Read.Rows_To_Read
 import Standard.Table.Value_Type.By_Type
-from Standard.Table import Aggregate_Column, Auto, Blank_Selector, Column_Ref, Data_Formatter, Join_Condition, Join_Kind, Match_Columns, Position, Previous_Value, Report_Unmatched, Set_Mode, Simple_Expression, Sort_Column, Table, Value_Type
+from Standard.Table import Aggregate_Column, Auto, Blank_Selector, Column_Ref, Data_Formatter, Fill_With, Join_Condition, Join_Kind, Match_Columns, Position, Previous_Value, Report_Unmatched, Set_Mode, Simple_Expression, Sort_Column, Table, Value_Type
 from Standard.Table.Errors import all
 from Standard.Table.Internal.Filter_Condition_Helpers import make_filter_column
 from Standard.Table.Table import make_fill_nothing_default_widget
@@ -3140,6 +3140,49 @@ type DB_Table
         _ = [statistic, of, as, set_mode, group_by, order_by, on_problems]
         Error.throw (Unsupported_Database_Operation.Error "running")
 
+    ## ALIAS shift, lead, lag, slide, displace
+       GROUP Standard.Base.Values
+       ICON column_add
+
+       Returns a table with new columns offset by n rows, where missing values have been replaced with the
+       provided fill_with strategy.
+
+       Arguments:
+       - columns: The columns to offset
+       - n: The number of rows to offset the new columns by. Negative n slides the values down in the columns' order adding records at the start. 
+            Positive n slides the values up in the columns' order adding records at the end. Defaults to -1.
+       - fill_with: The value to replace missing values with. Defaults to adding Nothing Values.
+       - - ..Nothing - Add Nothing values in the spaces created by sliding the existing values.
+       - - ..Closest_Value - If n is negative the first value gets used, if n is negative the last value gets used.
+       - - ..Wrap_Around - In this mode values that slide off the top or bottom reappear at the other end. So no values get lost they are just rotated.
+       - group_by: Applies the offset to each group as a separate batch of records.
+       - order_by: The order to slide the records through. The actual record order remains the same but the records move as per the order defined by these columns.
+       - set_mode: By default creates new columns, but choosing Update replaces the existing fields being offset.
+       - on_problems: Missing columns are always an error. Other warnings like grouping on floating point numbers can be ignored or made an error with this argument.
+
+       Returns:
+       - A Table of all records, with the selected columns offset by the number specifed by n.
+       
+       ? Ordering of rows
+
+         Note that the ordering of rows from the original table is preserved in
+         all cases. The grouping and ordering settings affect how the values move as they are offset, but the order of the rows itself is
+         not changed by this operation.
+
+       ! Error Conditions
+
+         - If the columns specified in `group_by` or `order_by` are not present
+           in the table, a `Missing_Input_Columns` error is raised.
+         - If grouping on floating point numbers, a `Floating_Point_Equality`
+           problem is reported.
+    @columns Widget_Helpers.make_column_name_multi_selector
+    @n (Widget.Numeric_Input display=..Always)
+    @default (self-> Widget_Helpers.make_fill_default_value_selector2)
+    @group_by Widget_Helpers.make_column_name_multi_selector
+    @order_by Widget_Helpers.make_order_by_selector
+    offset self columns:(Vector (Integer | Text | Regex | By_Type))=(Missing_Argument.throw "columns") n:Integer=-1 fill_with:Fill_With=..Nothing (group_by:(Vector | Text | Integer | Regex)=[]) (order_by:(Vector | Text)=[]) (set_mode:Set_Mode=..Add) (on_problems:Problem_Behavior=..Report_Warning) -> Table =
+        _ = [columns, n, fill_with, group_by, order_by, set_mode, on_problems]
+        Error.throw (Unsupported_Database_Operation.Error "offset")
 
 ## PRIVATE
 
diff --git a/distribution/lib/Standard/Database/0.0.0-dev/src/Feature.enso b/distribution/lib/Standard/Database/0.0.0-dev/src/Feature.enso
index d82b0d38b0a4..36c1f55dba08 100644
--- a/distribution/lib/Standard/Database/0.0.0-dev/src/Feature.enso
+++ b/distribution/lib/Standard/Database/0.0.0-dev/src/Feature.enso
@@ -4,58 +4,79 @@ from project.Errors import Unsupported_Database_Operation
 
 ## PRIVATE
 type Feature
+
     ## PRIVATE
        select, remove, reorder, and rename columns.
     Select_Columns
+
     ## PRIVATE
        filter rows in a table.
     Filter
+
     ## PRIVATE
        aggregate values in a table.
     Aggregate
+
     ## PRIVATE
        sort rows in a table.
     Sort
+
     ## PRIVATE
        join tables.
     Join
+
     ## PRIVATE
        combine the results of two queries.
     Union
+
     ## PRIVATE
        remove duplicate rows from a table.
     Distinct
+
     ## PRIVATE
        cleanse text data.
     Text_Cleanse
+
     ## PRIVATE
        Catch all for tests that haven't yet been categorized correctly or use multiple features.
     Integration_Tests
+
     ## PRIVATE
        add a group number column to a table.
     Add_Group_Number
+
     ## PRIVATE
        add a row number column to a table.
     Add_Row_Number
+
     ## PRIVATE
        create a table from a dictionary or vectors.
     Make_Table_From
+
     ## PRIVATE
        currently blocks getting a DB_Column from a DB_Table, but will soon refine to operations on DB_Column.
     Column_Operations
+
     ## PRIVATE
        get_row, take, drop, limit
     Sample
+
     ## PRIVATE
        replace values in a table.
     Replace
+
     ## PRIVATE
        merge two tables.
     Merge
+
     ## PRIVATE
        cross join two tables.
     Cross_Join
 
+    ## PRIVATE
+       offset one or more columns
+    Offset
+
     ## PRIVATE
        Check if a feature is supported by a dialect, and throw an error if it is not.
     if_supported_else_throw self dialect:Any error_name:Text ~action = 
diff --git a/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/Postgres/Postgres_Dialect.enso b/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/Postgres/Postgres_Dialect.enso
index b99fa8bc3c49..2f608ad2f8f6 100644
--- a/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/Postgres/Postgres_Dialect.enso
+++ b/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/Postgres/Postgres_Dialect.enso
@@ -259,8 +259,9 @@ type Postgres_Dialect
     ## PRIVATE
        Checks if a feature is supported by the dialect.
     is_feature_supported self feature:Feature -> Boolean =
-        _ = feature
-        True
+        case feature of
+            Feature.Offset -> False
+            _ -> True
 
     ## PRIVATE
        Checks a dialect flag
diff --git a/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/SQLite/SQLite_Dialect.enso b/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/SQLite/SQLite_Dialect.enso
index 69e4d50e201d..cc4a2317d388 100644
--- a/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/SQLite/SQLite_Dialect.enso
+++ b/distribution/lib/Standard/Database/0.0.0-dev/src/Internal/SQLite/SQLite_Dialect.enso
@@ -270,8 +270,9 @@ type SQLite_Dialect
     ## PRIVATE
        Checks if a feature is supported by the dialect.
     is_feature_supported self feature:Feature -> Boolean =
-        _ = feature
-        True
+        case feature of
+            Feature.Offset -> False
+            _ -> True
 
     ## PRIVATE
        Checks a dialect flag
diff --git a/distribution/lib/Standard/Snowflake/0.0.0-dev/src/Internal/Snowflake_Dialect.enso b/distribution/lib/Standard/Snowflake/0.0.0-dev/src/Internal/Snowflake_Dialect.enso
index 7621cbad3fce..c495c330b2d5 100644
--- a/distribution/lib/Standard/Snowflake/0.0.0-dev/src/Internal/Snowflake_Dialect.enso
+++ b/distribution/lib/Standard/Snowflake/0.0.0-dev/src/Internal/Snowflake_Dialect.enso
@@ -248,8 +248,9 @@ type Snowflake_Dialect
     ## PRIVATE
        Checks if a feature is supported by the dialect.
     is_feature_supported self feature:Feature -> Boolean =
-        _ = feature
-        True
+        case feature of
+            Feature.Offset -> False
+            _ -> True
 
     ## PRIVATE
        Checks a dialect flag
diff --git a/distribution/lib/Standard/Table/0.0.0-dev/src/Fill_With.enso b/distribution/lib/Standard/Table/0.0.0-dev/src/Fill_With.enso
new file mode 100644
index 000000000000..d85d80ea040a
--- /dev/null
+++ b/distribution/lib/Standard/Table/0.0.0-dev/src/Fill_With.enso
@@ -0,0 +1,21 @@
+from Standard.Base import all
+
+polyglot java import org.enso.table.operations.FillWith as Java_Fill_With
+
+type Fill_With
+
+    ## Fills gaps created by offset with Nothing Values
+    Nothing
+
+    ## Fills gaps created by offset with the first value when shifting downwards
+       or the last value when shifting upwards
+    Closest_Value
+    
+    ## Fills the gaps created by offset with the values that got slid off the other end 
+    Wrap_Around
+
+    to_java self = case self of
+        Fill_With.Nothing -> Java_Fill_With.NOTHING
+        Fill_With.Closest_Value -> Java_Fill_With.CLOSEST_VALUE
+        Fill_With.Wrap_Around -> Java_Fill_With.WRAP_AROUND
+        _ -> Nothing
diff --git a/distribution/lib/Standard/Table/0.0.0-dev/src/Internal/Offset_Helper.enso b/distribution/lib/Standard/Table/0.0.0-dev/src/Internal/Offset_Helper.enso
new file mode 100644
index 000000000000..df6c8da657ed
--- /dev/null
+++ b/distribution/lib/Standard/Table/0.0.0-dev/src/Internal/Offset_Helper.enso
@@ -0,0 +1,34 @@
+private
+
+from Standard.Base import all
+import project.Table.Table
+
+import project.Column.Column
+import project.Internal.Java_Problems
+import project.Fill_With.Fill_With
+import project.Set_Mode.Set_Mode
+import project.Internal.Table_Helpers
+import project.Internal.Problem_Builder.Problem_Builder
+import project.Internal.Column_Naming_Helper.Column_Naming_Helper
+
+polyglot java import org.enso.table.operations.Offset as Java_Offset
+
+table_offset_impl table:Table (columns:(Vector | Text | Integer | Regex)=[]) n:Integer=-1 fillWith:Fill_With=..Nothing (group_by:(Vector | Text | Integer | Regex)=[]) (order_by:(Vector | Text)=[]) (set_mode:Set_Mode=..Add) (on_problems:Problem_Behavior=..Report_Warning) -> Table =
+    problem_builder = Problem_Builder.new error_on_missing_columns=True
+    resolved_columns = table.columns_helper.select_columns_helper columns Case_Sensitivity.Default True problem_builder
+    grouping_columns = table.columns_helper.select_columns_helper group_by Case_Sensitivity.Default True problem_builder 
+    ordering = Table_Helpers.resolve_order_by table.columns order_by problem_builder
+    resolved_java_columns = resolved_columns.map c->c.java_column
+    fillWith_java = fillWith.to_java
+    grouping_java_columns = grouping_columns.map c->c.java_column
+    ordering_java_columns = ordering.map c->c.column.java_column
+    directions = ordering.map c->c.associated_selector.direction.to_sign
+    problem_builder.attach_problems_before on_problems <|
+        new_names = resolved_columns.map c-> 
+            if set_mode!=Set_Mode.Add then c.name else
+                Column_Naming_Helper.in_memory.function_name "offset" [c, n, fillWith]
+        new_storages = Java_Problems.with_problem_aggregator on_problems java_problem_aggregator->
+            Java_Offset.offset resolved_java_columns n fillWith_java grouping_java_columns ordering_java_columns directions java_problem_aggregator
+        new_columns = new_names.zip new_storages.to_vector new_name-> new_storage -> Column.from_storage new_name new_storage
+        new_columns.fold table t-> c->
+            t.set c c.name set_mode
diff --git a/distribution/lib/Standard/Table/0.0.0-dev/src/Main.enso b/distribution/lib/Standard/Table/0.0.0-dev/src/Main.enso
index fea12a3eb9e2..74e5ca8d432f 100644
--- a/distribution/lib/Standard/Table/0.0.0-dev/src/Main.enso
+++ b/distribution/lib/Standard/Table/0.0.0-dev/src/Main.enso
@@ -31,6 +31,8 @@ export project.Extensions.Table_Conversions.parse_to_table
 export project.Extensions.Table_Conversions.to_table
 export project.Extensions.Table_Conversions.write_table
 
+export project.Fill_With.Fill_With
+
 export project.Grouping_Method.Grouping_Method
 
 export project.Headers.Headers
diff --git a/distribution/lib/Standard/Table/0.0.0-dev/src/Table.enso b/distribution/lib/Standard/Table/0.0.0-dev/src/Table.enso
index 9abcb0ee2d8d..23298ede0727 100644
--- a/distribution/lib/Standard/Table/0.0.0-dev/src/Table.enso
+++ b/distribution/lib/Standard/Table/0.0.0-dev/src/Table.enso
@@ -50,6 +50,7 @@ import project.Internal.Java_Problems
 import project.Internal.Join_Helpers
 import project.Internal.Lookup_Helpers
 import project.Internal.Lookup_Helpers.Lookup_Column
+import project.Internal.Offset_Helper
 import project.Internal.Parse_Values_Helper
 import project.Internal.Problem_Builder.Problem_Builder
 import project.Internal.Read_Many_Helpers
@@ -61,6 +62,7 @@ import project.Internal.Table_Ref.Table_Ref
 import project.Internal.Union
 import project.Internal.Value_Type_Helpers
 import project.Internal.Widget_Helpers
+import project.Fill_With.Fill_With
 import project.Join_Condition.Join_Condition
 import project.Join_Kind.Join_Kind
 import project.Match_Columns.Match_Columns
@@ -3788,6 +3790,49 @@ type Table
     running self (statistic:Statistic=..Count) (of:(Text | Integer)=0) (as:Text='') (set_mode:Set_Mode=..Add) (group_by:(Vector | Text | Integer | Regex)=[]) (order_by:(Vector | Text)=[]) (on_problems:Problem_Behavior=..Report_Warning) =
         Incomparable_Values.handle_errors <| Add_Running.add_running self statistic of as set_mode group_by order_by on_problems
 
+    ## ALIAS shift, lead, lag, slide, displace
+       GROUP Standard.Base.Values
+       ICON column_add
+
+       Returns a table with new columns offset by n rows, where missing values have been replaced with the
+       provided fill_with strategy.
+
+       Arguments:
+       - columns: The columns to offset
+       - n: The number of rows to offset the new columns by. Negative n slides the values down in the columns' order adding records at the start. 
+            Positive n slides the values up in the columns' order adding records at the end. Defaults to -1.
+       - fill_with: The value to replace missing values with. Defaults to adding Nothing Values.
+       - - ..Nothing - Add Nothing values in the spaces created by sliding the existing values.
+       - - ..Closest_Value - If n is negative the first value gets used, if n is negative the last value gets used.
+       - - ..Wrap_Around - In this mode values that slide off the top or bottom reappear at the other end. So no values get lost they are just rotated.
+       - group_by: Applies the offset to each group as a separate batch of records.
+       - order_by: The order to slide the records through. The actual record order remains the same but the records move as per the order defined by these columns.
+       - set_mode: By default creates new columns, but choosing Update replaces the existing fields being offset.
+       - on_problems: Missing columns are always an error. Other warnings like grouping on floating point numbers can be ignored or made an error with this argument.
+
+       Returns:
+       - A Table of all records, with the selected columns offset by the number specifed by n.
+       
+       ? Ordering of rows
+
+         Note that the ordering of rows from the original table is preserved in
+         all cases. The grouping and ordering settings affect how the values move as they are offset, but the order of the rows itself is
+         not changed by this operation.
+
+       ! Error Conditions
+
+         - If the columns specified in `group_by` or `order_by` are not present
+           in the table, a `Missing_Input_Columns` error is raised.
+         - If grouping on floating point numbers, a `Floating_Point_Equality`
+           problem is reported.
+    @columns Widget_Helpers.make_column_name_multi_selector
+    @n (Widget.Numeric_Input display=..Always)
+    @default (self-> Widget_Helpers.make_fill_default_value_selector2)
+    @group_by Widget_Helpers.make_column_name_multi_selector
+    @order_by Widget_Helpers.make_order_by_selector
+    offset self columns:(Vector (Integer | Text | Regex | By_Type))=(Missing_Argument.throw "columns") n:Integer=-1 fill_with:Fill_With=..Nothing (group_by:(Vector | Text | Integer | Regex)=[]) (order_by:(Vector | Text)=[]) (set_mode:Set_Mode=..Add) (on_problems:Problem_Behavior=..Report_Warning) -> Table =
+        Offset_Helper.table_offset_impl self columns n fill_with group_by order_by set_mode on_problems
+
     ## PRIVATE
     column_naming_helper : Column_Naming_Helper
     column_naming_helper self = Column_Naming_Helper.in_memory
diff --git a/engine/polyglot-api/src/main/scala/org/enso/polyglot/Module.scala b/engine/polyglot-api/src/main/scala/org/enso/polyglot/Module.scala
index 8ac6aadf4c27..05ad055ad287 100644
--- a/engine/polyglot-api/src/main/scala/org/enso/polyglot/Module.scala
+++ b/engine/polyglot-api/src/main/scala/org/enso/polyglot/Module.scala
@@ -44,14 +44,6 @@ class Module(private val value: Value) {
   def evalExpression(code: String): Value =
     value.invokeMember(EVAL_EXPRESSION, code)
 
-  /** Triggers generation of documentation from module sources.
-    *
-    * @return value with `GENERATE_DOCS` invoked on it.
-    */
-  def generateDocs(): Value = {
-    value.invokeMember(GENERATE_DOCS)
-  }
-
   /** Triggers gathering of import statements from module sources.
     *
     * @return value with `GATHER_IMPORT_STATEMENTS` invoked on it.
diff --git a/engine/polyglot-api/src/main/scala/org/enso/polyglot/TopScope.scala b/engine/polyglot-api/src/main/scala/org/enso/polyglot/TopScope.scala
index 3b3150f7376d..afedd4d1e856 100644
--- a/engine/polyglot-api/src/main/scala/org/enso/polyglot/TopScope.scala
+++ b/engine/polyglot-api/src/main/scala/org/enso/polyglot/TopScope.scala
@@ -34,7 +34,26 @@ class TopScope(private val value: Value) {
     value.invokeMember(UNREGISTER_MODULE, qualifiedName): Unit
   }
 
-  def compile(shouldCompileDependencies: Boolean): Unit = {
-    value.invokeMember(COMPILE, shouldCompileDependencies)
+  def compile(
+    shouldCompileDependencies: Boolean
+  ): Unit = {
+    compile(shouldCompileDependencies, None)
   }
+  def compile(
+    shouldCompileDependencies: Boolean,
+    generateDocs: Option[String]
+  ): Unit = {
+    val docsArg = generateDocs.map {
+      case "api" => "api"
+      case "md"  => "md"
+      case other =>
+        throw new IllegalStateException("Invalid docs format: " + other)
+    }
+    value.invokeMember(
+      COMPILE,
+      shouldCompileDependencies,
+      docsArg.getOrElse(false)
+    )
+  }
+
 }
diff --git a/engine/runner/src/main/java/org/enso/runner/Main.java b/engine/runner/src/main/java/org/enso/runner/Main.java
index d7054f698bf2..1f20840d329a 100644
--- a/engine/runner/src/main/java/org/enso/runner/Main.java
+++ b/engine/runner/src/main/java/org/enso/runner/Main.java
@@ -146,8 +146,13 @@ private static Options buildOptions() {
             .build();
     var docs =
         cliOptionBuilder()
+            .hasArg(true)
+            .numberOfArgs(1)
+            .optionalArg(true)
             .longOpt(DOCS_OPTION)
-            .desc("Runs the Enso documentation generator.")
+            .desc(
+                "Runs the Enso documentation generator. Additional argument may specify format -"
+                    + " either the default `md` or `api`.")
             .build();
     var preinstall =
         cliOptionBuilder()
@@ -531,8 +536,16 @@ void printHelp() {
     new HelpFormatter().printHelp(LanguageInfo.ID, CLI_OPTIONS);
   }
 
-  /** Terminates the process with a failure exit code. */
-  private RuntimeException exitFail() {
+  /**
+   * Terminates the process with a failure exit code.
+   *
+   * @param error the error message to send to stderr before terminating the process, can be {@code
+   *     null}
+   */
+  private RuntimeException exitFail(String error) {
+    if (error != null) {
+      stderr(error);
+    }
     return doExit(1);
   }
 
@@ -588,8 +601,7 @@ private void createNew(
                 Template.fromString(n)
                     .getOrElse(
                         () -> {
-                          logger.error("Unknown project template name: '" + n + "'.");
-                          throw exitFail();
+                          throw exitFail("Unknown project template name: '" + n + "'.");
                         }));
 
     PackageManager$.MODULE$
@@ -632,8 +644,7 @@ private void compile(
       boolean logMasking) {
     var file = new File(packagePath);
     if (!file.exists() || !file.isDirectory()) {
-      println("No package exists at " + file + ".");
-      throw exitFail();
+      throw exitFail("No package exists at " + file + ".");
     }
 
     var context =
@@ -652,11 +663,11 @@ private void compile(
 
     var topScope = context.getTopScope();
     try {
-      topScope.compile(shouldCompileDependencies);
+      topScope.compile(shouldCompileDependencies, scala.Option.empty());
       throw exitSuccess();
     } catch (Throwable t) {
       logger.error("Unexpected internal error", t);
-      throw exitFail();
+      throw exitFail("Unexpected internal error");
     } finally {
       context.context().close();
     }
@@ -697,7 +708,7 @@ private void handleRun(
       throws IOException {
     var fileAndProject = Utils.findFileAndProject(path, projectPath);
     if (fileAndProject == null) {
-      throw exitFail();
+      throw exitFail("Cannot find " + path + " and " + projectPath);
     }
     var projectMode = fileAndProject._1();
     var file = fileAndProject._2();
@@ -709,12 +720,10 @@ private void handleRun(
 
         mainFile = pkg.mainFile();
         if (!mainFile.exists()) {
-          println("Main file does not exist.");
-          throw exitFail();
+          throw exitFail("Main file does not exist.");
         }
       } else {
-        println(result.failed().get().getMessage());
-        throw exitFail();
+        throw exitFail(result.failed().get().getMessage());
       }
     }
 
@@ -737,8 +746,7 @@ private void handleRun(
 
     if (inspect) {
       if (enableDebugServer) {
-        println("Cannot use --inspect and --repl and --run at once");
-        throw exitFail();
+        throw exitFail("Cannot use --inspect and --repl and --run at once");
       }
       options.put("inspect", "");
     }
@@ -757,8 +765,7 @@ private void handleRun(
           var mainModuleName = pkg.moduleNameForFile(pkg.mainFile()).toString();
           runPackage(context, mainModuleName, file, additionalArgs);
         } else {
-          System.err.println(result.failed().get().getMessage());
-          throw exitFail();
+          throw exitFail(result.failed().get().getMessage());
         }
       } else {
         runSingleFile(context, file, additionalArgs);
@@ -785,12 +792,15 @@ private void handleRun(
    * @param enableIrCaches are the IR caches enabled
    */
   private void genDocs(
-      String projectPath, Level logLevel, boolean logMasking, boolean enableIrCaches) {
-    if (projectPath.isEmpty()) {
-      println("Path hasn't been provided.");
-      throw exitFail();
+      String docsFormat,
+      String projectPath,
+      Level logLevel,
+      boolean logMasking,
+      boolean enableIrCaches) {
+    if (projectPath == null || projectPath.isEmpty()) {
+      throw exitFail("Specify path to a project with --in-project option");
     }
-    generateDocsFrom(projectPath, logLevel, logMasking, enableIrCaches);
+    generateDocsFrom(docsFormat, projectPath, logLevel, logMasking, enableIrCaches);
     throw exitSuccess();
   }
 
@@ -799,7 +809,7 @@ private void genDocs(
    * path.
    */
   private void generateDocsFrom(
-      String path, Level logLevel, boolean logMasking, boolean enableIrCaches) {
+      String docsFormat, String path, Level logLevel, boolean logMasking, boolean enableIrCaches) {
     var executionContext =
         new PolyglotContext(
             ContextFactory.create()
@@ -816,17 +826,8 @@ private void generateDocsFrom(
     var main = pkg.map(x -> x.mainFile());
 
     if (main.exists(x -> x.exists())) {
-      var mainFile = main.get();
-      var mainModuleName = pkg.get().moduleNameForFile(mainFile).toString();
       var topScope = executionContext.getTopScope();
-      var mainModule = topScope.getModule(mainModuleName);
-      var generated = mainModule.generateDocs();
-      println(generated.toString());
-
-      // TODO:
-      // - go through executed code and get all HTML docs
-      //   with their corresponding atoms/methods etc.
-      // - Save those to files
+      topScope.compile(false, scala.Option.apply(docsFormat == null ? "md" : docsFormat));
     }
   }
 
@@ -840,15 +841,14 @@ private void generateDocsFrom(
    */
   private void preinstallDependencies(String projectPath, Level logLevel) {
     if (projectPath == null) {
-      println("Dependency installation is only available for projects.");
-      throw exitFail();
+      throw exitFail("Dependency installation is only available for projects.");
     }
     try {
       DependencyPreinstaller.preinstallDependencies(new File(projectPath), logLevel);
       throw exitSuccess();
     } catch (RuntimeException error) {
       logger.error("Dependency installation failed: " + error.getMessage(), error);
-      throw exitFail();
+      throw exitFail("Dependency installation failed: " + error.getMessage());
     }
   }
 
@@ -878,12 +878,11 @@ private void runMain(
       var mainType = mainModule.getAssociatedType();
       var mainFun = mainModule.getMethod(mainType, mainMethodName);
       if (mainFun.isEmpty()) {
-        System.err.println(
+        throw exitFail(
             "The module "
                 + mainModule.getName()
                 + " does not contain a `main` "
                 + "function. It could not be run.");
-        throw exitFail();
       }
       var main = mainFun.get();
       if (!DEFAULT_MAIN_METHOD_NAME.equals(mainMethodName)) {
@@ -909,7 +908,7 @@ private void runMain(
         var res = main.execute(listOfArgs.reverse());
         if (!res.isNull()) {
           var textRes = res.isString() ? res.asString() : res.toString();
-          println(textRes);
+          stdout(textRes);
           if (res.isException()) {
             try {
               throw res.throwException();
@@ -926,7 +925,7 @@ private void runMain(
         throw doExit(e.getExitStatus());
       } else {
         printPolyglotException(e, rootPkgPath);
-        throw exitFail();
+        throw exitFail(e.getMessage());
       }
     }
   }
@@ -1004,7 +1003,7 @@ private void displayVersion(boolean useJson) {
     var customVersion = CurrentVersion.getVersion().toString();
     var versionDescription =
         VersionDescription.make("Enso Compiler and Runtime", true, false, List.of(), customVersion);
-    println(versionDescription.asString(useJson));
+    stdout(versionDescription.asString(useJson));
   }
 
   /** Parses the log level option. */
@@ -1017,8 +1016,7 @@ private Level parseLogLevel(String levelOption) {
           Stream.of(Level.values())
               .map(x -> x.toString().toLowerCase())
               .collect(Collectors.joining(", "));
-      System.err.println("Invalid log level. Possible values are " + possible + ".");
-      throw exitFail();
+      throw exitFail("Invalid log level. Possible values are " + possible + ".");
     } else {
       return found.get();
     }
@@ -1029,8 +1027,7 @@ private URI parseUri(String string) {
     try {
       return new URI(string);
     } catch (URISyntaxException ex) {
-      System.err.println("`" + string + "` is not a valid URI.");
-      throw exitFail();
+      throw exitFail("`" + string + "` is not a valid URI.");
     }
   }
 
@@ -1079,12 +1076,11 @@ final void mainEntry(CommandLine line, Level logLevel, boolean logMasking) throw
               .map(x -> Path.of(x))
               .getOrElse(
                   () -> {
-                    logger.error(
+                    throw exitFail(
                         "When uploading, the "
                             + IN_PROJECT_OPTION
                             + " is mandatory "
                             + "to specify which project to upload.");
-                    throw exitFail();
                   });
 
       try {
@@ -1098,7 +1094,7 @@ final void mainEntry(CommandLine line, Level logLevel, boolean logMasking) throw
       } catch (UploadFailedError ex) {
         // We catch this error to avoid printing an unnecessary stack trace.
         // The error itself is already logged.
-        throw exitFail();
+        throw exitFail(ex.getMessage());
       }
     }
 
@@ -1108,14 +1104,13 @@ final void mainEntry(CommandLine line, Level logLevel, boolean logMasking) throw
               .map(x -> Path.of(x))
               .getOrElse(
                   () -> {
-                    logger.error("The " + IN_PROJECT_OPTION + " is mandatory.");
-                    throw exitFail();
+                    throw exitFail("The " + IN_PROJECT_OPTION + " is mandatory.");
                   });
       try {
         ProjectUploader.updateManifest(projectRoot, logLevel);
       } catch (Throwable err) {
         err.printStackTrace();
-        throw exitFail();
+        throw exitFail(err.getMessage());
       }
       throw exitSuccess();
     }
@@ -1164,14 +1159,18 @@ final void mainEntry(CommandLine line, Level logLevel, boolean logMasking) throw
     }
     if (line.hasOption(DOCS_OPTION)) {
       genDocs(
-          line.getOptionValue(IN_PROJECT_OPTION), logLevel, logMasking, shouldEnableIrCaches(line));
+          line.getOptionValue(DOCS_OPTION),
+          line.getOptionValue(IN_PROJECT_OPTION),
+          logLevel,
+          logMasking,
+          shouldEnableIrCaches(line));
     }
     if (line.hasOption(PREINSTALL_OPTION)) {
       preinstallDependencies(line.getOptionValue(IN_PROJECT_OPTION), logLevel);
     }
     if (line.getOptions().length == 0) {
       printHelp();
-      throw exitFail();
+      throw exitFail(null);
     }
   }
 
@@ -1253,8 +1252,8 @@ protected Map<String, String> parseSystemProperties(CommandLine cmdLine) {
         } else if (items.length == 1) {
           props.put(items[0], "true");
         } else {
-          println("Argument to " + SYSTEM_PROPERTY + " must be in the form <property>=<value>");
-          throw exitFail();
+          throw exitFail(
+              "Argument to " + SYSTEM_PROPERTY + " must be in the form <property>=<value>");
         }
       }
       return props;
@@ -1298,7 +1297,7 @@ private void printPolyglotException(PolyglotException exception, File relativeTo
         exception.isSyntaxError(),
         msg,
         relativeTo,
-        this::println,
+        this::stderr,
         fnLangId,
         fnRootName,
         fnSourceSection);
@@ -1314,10 +1313,14 @@ private static final <T> scala.collection.immutable.List<T> join(
     return scala.collection.immutable.$colon$colon$.MODULE$.apply(head, tail);
   }
 
-  void println(String msg) {
+  void stdout(String msg) {
     System.out.println(msg);
   }
 
+  void stderr(String msg) {
+    System.err.println(msg);
+  }
+
   private void launch(String[] args) throws IOException, InterruptedException, URISyntaxException {
     var line = preprocessArguments(args);
 
@@ -1339,14 +1342,13 @@ private void launch(String[] args) throws IOException, InterruptedException, URI
       }
       var shouldLaunchJvm = current == null || !current.equals(jvm);
       if (!shouldLaunchJvm) {
-        println(JVM_OPTION + " option has no effect - already running in JVM " + current);
+        stderr(JVM_OPTION + " option has no effect - already running in JVM " + current);
       } else {
         var commandAndArgs = new ArrayList<String>();
         if (jvm == null) {
           var javaExe = JavaFinder.findJavaExecutable();
           if (javaExe == null) {
-            println("Cannot find java executable");
-            throw exitFail();
+            throw exitFail("Cannot find java executable");
           }
           commandAndArgs.add(javaExe);
         } else {
@@ -1432,9 +1434,8 @@ final CommandLine preprocessArguments(String... args) {
           System.currentTimeMillis() - startParsing);
       return line;
     } catch (Exception e) {
-      println(e.getMessage());
       printHelp();
-      throw exitFail();
+      throw exitFail(e.getMessage());
     }
   }
 
@@ -1461,12 +1462,11 @@ private void launch(CommandLine line, Level logLevel, boolean logMasking) {
         LanguageServerApi.launchLanguageServer(line, conf, logLevel);
         throw exitSuccess();
       } catch (WrongOption e) {
-        System.err.println(e.getMessage());
-        throw exitFail();
+        throw exitFail(e.getMessage());
       }
     } else {
       if (line.hasOption(LANGUAGE_SERVER_NATIVE_OPTION)) {
-        System.out.println(
+        stderr(
             "\"--"
                 + LANGUAGE_SERVER_NATIVE_OPTION
                 + "\" has no effect without --\""
@@ -1487,12 +1487,10 @@ private void launch(CommandLine line, Level logLevel, boolean logMasking) {
           if (logger.isDebugEnabled()) {
             logger.error("Error during execution", ex);
           }
-          System.out.println("Command failed with an error: " + ex);
-          throw exitFail();
+          throw exitFail("Command failed with an error: " + ex.getMessage());
         }
       } catch (WrongOption e) {
-        System.err.println(e.getMessage());
-        throw exitFail();
+        throw exitFail(e.getMessage());
       }
     }
   }
@@ -1508,7 +1506,7 @@ protected String getLanguageId() {
    * @param dir directory with other files that should be older than base
    * @return
    */
-  private static boolean checkOutdatedLauncher(File base, File dir) {
+  private boolean checkOutdatedLauncher(File base, File dir) {
     var needsCheck = base.canExecute();
     if (needsCheck) {
       var files = dir.listFiles();
@@ -1516,8 +1514,7 @@ private static boolean checkOutdatedLauncher(File base, File dir) {
         var baseTime = base.lastModified();
         for (var f : files) {
           if (baseTime < f.lastModified()) {
-            System.err.println(
-                "File " + base + " is older than " + f + " consider running in --jvm mode");
+            stderr("File " + base + " is older than " + f + " consider running in --jvm mode");
             return false;
           }
         }
diff --git a/engine/runner/src/test/java/org/enso/runner/EngineMainTest.java b/engine/runner/src/test/java/org/enso/runner/EngineMainTest.java
index 91d42c609f40..226594f05c6b 100644
--- a/engine/runner/src/test/java/org/enso/runner/EngineMainTest.java
+++ b/engine/runner/src/test/java/org/enso/runner/EngineMainTest.java
@@ -100,7 +100,12 @@ RuntimeException doExit(int exitCode) {
     }
 
     @Override
-    void println(String msg) {
+    void stdout(String msg) {
+      linesOut.add(msg);
+    }
+
+    @Override
+    void stderr(String msg) {
       linesOut.add(msg);
     }
 
diff --git a/engine/runtime-compiler/src/main/java/org/enso/compiler/dump/DocsDispatch.java b/engine/runtime-compiler/src/main/java/org/enso/compiler/dump/DocsDispatch.java
new file mode 100644
index 000000000000..c253917837d0
--- /dev/null
+++ b/engine/runtime-compiler/src/main/java/org/enso/compiler/dump/DocsDispatch.java
@@ -0,0 +1,53 @@
+package org.enso.compiler.dump;
+
+import java.io.IOException;
+import org.enso.compiler.core.ir.Module;
+import org.enso.compiler.core.ir.module.scope.Definition;
+import org.enso.compiler.core.ir.module.scope.definition.Method;
+import org.enso.pkg.QualifiedName;
+
+/**
+ * Class to use from {@link DocsGenerate} to dispatch individual IR elements to provided visitor.
+ */
+abstract class DocsDispatch {
+  static DocsDispatch create(DocsVisit visitor, java.io.PrintWriter writer) {
+    return new DocsDispatch() {
+      @Override
+      boolean dispatchModule(QualifiedName name, Module ir) throws IOException {
+        return visitor.visitModule(name, ir, writer);
+      }
+
+      @Override
+      void dispatchMethod(Definition.Type t, Method.Explicit m) throws IOException {
+        visitor.visitMethod(t, m, writer);
+      }
+
+      @Override
+      void dispatchConversion(Method.Conversion c) throws IOException {
+        visitor.visitConversion(c, writer);
+      }
+
+      @Override
+      boolean dispatchType(Definition.Type t) throws IOException {
+        return visitor.visitType(t, writer);
+      }
+
+      @Override
+      void dispatchConstructor(Definition.Type t, Definition.Data d) throws IOException {
+        visitor.visitConstructor(t, d, writer);
+      }
+    };
+  }
+
+  private DocsDispatch() {}
+
+  abstract boolean dispatchModule(QualifiedName name, Module ir) throws IOException;
+
+  abstract void dispatchMethod(Definition.Type t, Method.Explicit m) throws IOException;
+
+  abstract void dispatchConversion(Method.Conversion c) throws IOException;
+
+  abstract boolean dispatchType(Definition.Type t) throws IOException;
+
+  abstract void dispatchConstructor(Definition.Type t, Definition.Data d) throws IOException;
+}
diff --git a/engine/runtime-compiler/src/main/java/org/enso/compiler/dump/DocsEmitMarkdown.java b/engine/runtime-compiler/src/main/java/org/enso/compiler/dump/DocsEmitMarkdown.java
new file mode 100644
index 000000000000..fa16256b150c
--- /dev/null
+++ b/engine/runtime-compiler/src/main/java/org/enso/compiler/dump/DocsEmitMarkdown.java
@@ -0,0 +1,61 @@
+package org.enso.compiler.dump;
+
+import java.io.IOException;
+import java.io.PrintWriter;
+import org.enso.compiler.core.IR;
+import org.enso.compiler.core.ir.Module;
+import org.enso.compiler.core.ir.module.scope.Definition;
+import org.enso.compiler.core.ir.module.scope.definition.Method;
+import org.enso.compiler.pass.resolve.DocumentationComments;
+import org.enso.compiler.pass.resolve.DocumentationComments$;
+import org.enso.pkg.QualifiedName;
+
+/** Visitor that emits documentation in markdown format. */
+final class DocsEmitMarkdown implements DocsVisit {
+
+  @Override
+  public boolean visitUnknown(IR ir, PrintWriter w) {
+    return true;
+  }
+
+  @Override
+  public boolean visitModule(QualifiedName name, Module module, PrintWriter w) throws IOException {
+    w.println("## Documentation for " + name);
+    writeDocs(module, w);
+    return true;
+  }
+
+  @Override
+  public void visitMethod(Definition.Type t, Method.Explicit m, PrintWriter w) throws IOException {
+    w.println("#### method " + m.methodName().name());
+    writeDocs(m, w);
+  }
+
+  @Override
+  public void visitConversion(Method.Conversion c, PrintWriter w) throws IOException {
+    w.println("#### conversion " + c.methodName().name());
+    writeDocs(c, w);
+  }
+
+  private void writeDocs(IR b, PrintWriter w) throws IOException {
+    var option = b.passData().get(DocumentationComments$.MODULE$);
+    if (option.isDefined()) {
+      var doc = (DocumentationComments.Doc) option.get();
+      w.println(doc.documentation());
+      w.println();
+      w.println();
+    }
+  }
+
+  @Override
+  public boolean visitType(Definition.Type t, PrintWriter w) throws IOException {
+    w.println("#### **type** " + t.name().name());
+    return true;
+  }
+
+  @Override
+  public void visitConstructor(Definition.Type t, Definition.Data d, PrintWriter w)
+      throws IOException {
+    w.println("#### data " + d.name().name());
+  }
+}
diff --git a/engine/runtime-compiler/src/main/java/org/enso/compiler/dump/DocsEmitSignatures.java b/engine/runtime-compiler/src/main/java/org/enso/compiler/dump/DocsEmitSignatures.java
new file mode 100644
index 000000000000..1ac5e2124a94
--- /dev/null
+++ b/engine/runtime-compiler/src/main/java/org/enso/compiler/dump/DocsEmitSignatures.java
@@ -0,0 +1,63 @@
+package org.enso.compiler.dump;
+
+import static org.enso.scala.wrapper.ScalaConversions.asJava;
+
+import java.io.IOException;
+import java.io.PrintWriter;
+import org.enso.compiler.core.IR;
+import org.enso.compiler.core.ir.Module;
+import org.enso.compiler.core.ir.module.scope.Definition;
+import org.enso.compiler.core.ir.module.scope.definition.Method;
+import org.enso.pkg.QualifiedName;
+
+/** Visitor that emits documentation in markdown format. */
+final class DocsEmitSignatures implements DocsVisit {
+
+  @Override
+  public boolean visitUnknown(IR ir, PrintWriter w) throws IOException {
+    w.println("- Unknown IR " + ir.getClass().getName());
+    return true;
+  }
+
+  @Override
+  public boolean visitModule(QualifiedName name, Module module, PrintWriter w) throws IOException {
+    w.println("## Enso Signatures 1.0");
+    w.println("## module " + name);
+    return true;
+  }
+
+  @Override
+  public void visitMethod(Definition.Type t, Method.Explicit m, PrintWriter w) throws IOException {
+    if (t != null) {
+      w.append("    - ");
+    } else {
+      if (m.typeName().isDefined()) {
+        var fqn = DocsUtils.toFqnOrSimpleName(m.typeName().get());
+        w.append(fqn + ".");
+      }
+    }
+    w.println(DocsVisit.toSignature(m));
+  }
+
+  @Override
+  public void visitConversion(Method.Conversion c, PrintWriter w) throws IOException {
+    w.println("#### conversion " + c.methodName().name());
+  }
+
+  @Override
+  public boolean visitType(Definition.Type t, PrintWriter w) throws IOException {
+    var sb = new StringBuilder();
+    sb.append("- type ").append(t.name().name());
+    for (var a : asJava(t.params())) {
+      sb.append(" ").append(DocsVisit.toSignature(a));
+    }
+    w.println(sb.toString());
+    return true;
+  }
+
+  @Override
+  public void visitConstructor(Definition.Type t, Definition.Data d, PrintWriter w)
+      throws IOException {
+    w.println("    - " + DocsVisit.toSignature(d));
+  }
+}
diff --git a/engine/runtime-compiler/src/main/java/org/enso/compiler/dump/DocsGenerate.java b/engine/runtime-compiler/src/main/java/org/enso/compiler/dump/DocsGenerate.java
new file mode 100644
index 000000000000..bf27672d0a28
--- /dev/null
+++ b/engine/runtime-compiler/src/main/java/org/enso/compiler/dump/DocsGenerate.java
@@ -0,0 +1,118 @@
+package org.enso.compiler.dump;
+
+import java.io.IOException;
+import java.io.PrintWriter;
+import java.util.IdentityHashMap;
+import org.enso.compiler.context.CompilerContext;
+import org.enso.compiler.core.IR;
+import org.enso.compiler.core.ir.Module;
+import org.enso.compiler.core.ir.module.scope.Definition;
+import org.enso.compiler.core.ir.module.scope.definition.Method;
+import org.enso.filesystem.FileSystem;
+import org.enso.pkg.QualifiedName;
+import scala.collection.immutable.Seq;
+import scala.jdk.CollectionConverters;
+
+/** Generator of documentation for an Enso project. */
+public final class DocsGenerate {
+  private DocsGenerate() {}
+
+  /**
+   * Iterate over all provide modules and generate documentation using {@code pkg}'s {@link
+   * FileSystem}.
+   *
+   * @param <File> abstract file to operate with
+   * @param visitor visitor to use to generate the output
+   * @param pkg library to generate the documentation for
+   * @param modules parsed modules found in the library
+   * @return directory where the output was generated
+   * @throws IOException when I/O problem occurs
+   */
+  public static <File> File write(
+      DocsVisit visitor, org.enso.pkg.Package<File> pkg, Iterable<CompilerContext.Module> modules)
+      throws IOException {
+    var fs = pkg.fileSystem();
+    var docs = fs.getChild(pkg.root(), "docs");
+    var api = fs.getChild(docs, "api");
+    fs.createDirectories(api);
+
+    for (var module : modules) {
+      var ir = module.getIr();
+      assert ir != null : "need IR for " + module;
+      if (ir.isPrivate()) {
+        continue;
+      }
+      var moduleName = module.getName();
+      var dir = createPkg(fs, api, moduleName);
+      var md = fs.getChild(dir, moduleName.item() + ".md");
+      try (var mdWriter = fs.newBufferedWriter(md);
+          var pw = new PrintWriter(mdWriter)) {
+        visitModule(visitor, moduleName, ir, pw);
+      }
+    }
+    return api;
+  }
+
+  private static <File> File createPkg(FileSystem<File> fs, File root, QualifiedName pkg)
+      throws IOException {
+    var dir = root;
+    for (var item : pkg.pathAsJava()) {
+      dir = fs.getChild(dir, item);
+    }
+    fs.createDirectories(dir);
+    return dir;
+  }
+
+  public static void visitModule(
+      DocsVisit visitor, QualifiedName moduleName, Module ir, PrintWriter w) throws IOException {
+    var dispatch = DocsDispatch.create(visitor, w);
+
+    if (dispatch.dispatchModule(moduleName, ir)) {
+      var moduleBindings = asJava(ir.bindings());
+      var alreadyDispatched = new IdentityHashMap<IR, IR>();
+      for (var b : moduleBindings) {
+        if (alreadyDispatched.containsKey(b)) {
+          continue;
+        }
+        switch (b) {
+          case Definition.Type t -> {
+            if (dispatch.dispatchType(t)) {
+              for (var d : asJava(t.members())) {
+                if (!d.isPrivate()) {
+                  dispatch.dispatchConstructor(t, d);
+                }
+              }
+              for (var mb : moduleBindings) {
+                if (mb instanceof Method.Explicit m) {
+                  if (m.isStaticWrapperForInstanceMethod() || m.isPrivate()) {
+                    alreadyDispatched.put(m, m);
+                    continue;
+                  }
+                  var p = m.methodReference().typePointer();
+                  if (p.isDefined()) {
+                    var methodTypeName = p.get().name();
+                    if (methodTypeName.equals(t.name().name())) {
+                      dispatch.dispatchMethod(t, m);
+                      alreadyDispatched.put(m, m);
+                    }
+                  }
+                }
+              }
+            }
+          }
+          case Method.Explicit m -> {
+            if (!m.isPrivate()) {
+              dispatch.dispatchMethod(null, m);
+            }
+          }
+          case Method.Conversion c -> dispatch.dispatchConversion(c);
+          default -> throw new AssertionError("unknown type " + b.getClass());
+        }
+      }
+    }
+  }
+
+  private static <T> Iterable<T> asJava(Seq<T> seq) {
+    return CollectionConverters.IterableHasAsJava(seq).asJava();
+  }
+}
diff --git a/engine/runtime-compiler/src/main/java/org/enso/compiler/dump/DocsUtils.java b/engine/runtime-compiler/src/main/java/org/enso/compiler/dump/DocsUtils.java
new file mode 100644
index 000000000000..931f1c2ac823
--- /dev/null
+++ b/engine/runtime-compiler/src/main/java/org/enso/compiler/dump/DocsUtils.java
@@ -0,0 +1,155 @@
+package org.enso.compiler.dump;
+
+import static org.enso.scala.wrapper.ScalaConversions.asJava;
+
+import java.util.ArrayList;
+import java.util.List;
+import org.enso.compiler.core.ConstantsNames;
+import org.enso.compiler.core.IR;
+import org.enso.compiler.core.ir.DefinitionArgument;
+import org.enso.compiler.core.ir.Expression;
+import org.enso.compiler.core.ir.Function.Lambda;
+import org.enso.compiler.core.ir.Name;
+import org.enso.compiler.core.ir.expression.Application;
+import org.enso.compiler.core.ir.module.scope.Definition;
+import org.enso.compiler.core.ir.module.scope.definition.Method;
+import org.enso.compiler.core.ir.type.Set;
+import org.enso.compiler.data.BindingsMap;
+import org.enso.compiler.pass.resolve.MethodDefinitions;
+import org.enso.compiler.pass.resolve.TypeNames$;
+import org.enso.compiler.pass.resolve.TypeSignatures;
+import org.enso.compiler.pass.resolve.TypeSignatures$;
+import org.enso.pkg.QualifiedName;
+
+final class DocsUtils {
+  private static final String ANY = "Standard.Base.Any.Any";
+
+  private DocsUtils() {}
+
+  static String toSignature(Method.Explicit m) {
+    var sb = new StringBuilder();
+    sb.append(m.methodName().name());
+    if (m.body() instanceof Lambda fn) {
+      var first = m.isStatic();
+      for (var a : asJava(fn.arguments())) {
+        if (first) {
+          first = false;
+          continue;
+        }
+        sb.append(" ").append(toSignature(a));
+      }
+      var ret = extractTypeOrAny(fn.body());
+      sb.append(" -> ").append(ret);
+    }
+    return sb.toString();
+  }
+
+  static String toSignature(Definition.Data d) {
+    var sb = new StringBuilder();
+    sb.append(d.name().name());
+    for (var a : asJava(d.arguments())) {
+      sb.append(" ").append(toSignature(a));
+    }
+    return sb.toString();
+  }
+
+  static String toFqnOrSimpleName(Name ir) {
+    var typeNameOpt = ir.passData().get(MethodDefinitions.INSTANCE);
+    if (typeNameOpt.isDefined()) {
+      var typeName = (BindingsMap.Resolution) typeNameOpt.get();
+      return typeName.target().qualifiedName().toString();
+    }
+    return ir.name();
+  }
+
+  static String toSignature(DefinitionArgument a) {
+    var sb = new StringBuilder();
+    if (a.suspended()) {
+      sb.append("~");
+    }
+    var name = a.name().name();
+    sb.append(name);
+    if (!ConstantsNames.SELF_ARGUMENT.equals(name)) {
+      var type = extractTypeOrAny(a);
+      sb.append(":").append(type);
+    }
+    if (a.defaultValue().isDefined()) {
+      sb.append("=");
+    }
+    return sb.toString();
+  }
+
+  private static String extractTypeOrAny(IR ir) {
+    var meta = ir.passData().get(TypeSignatures$.MODULE$);
+    if (meta.isDefined()) {
+      var sigMeta = (TypeSignatures.Signature) meta.get();
+      var sigFqn = extractFqnOrNull(sigMeta.signature());
+      if (sigFqn != null) {
+        return sigFqn.toString();
+      }
+      var type =
+          switch (sigMeta.signature()) {
+            case Application.Prefix app -> {
+              var typeConstructor = extractFqnOrNull(app.function());
+              if (typeConstructor == null) {
+                yield null;
+              }
+              var sb = new StringBuilder();
+              sb.append("(");
+              sb.append(typeConstructor);
+              for (var a : asJava(app.arguments())) {
+                var fqn = extractTypeOrAny(a.value());
+                sb.append(" ");
+                sb.append(fqn);
+              }
+              sb.append(")");
+              yield sb.toString();
+            }
+            case Set.Union union -> extractSet(asJava(union.operands()), "|");
+            case Set.Intersection inter -> extractSet(collectInter(inter, new ArrayList<>()), "&");
+            default -> ANY;
+          };
+      return type;
+    } else {
+      if (ir instanceof Application.Force force) {
+        return extractTypeOrAny(force.target());
+      }
+      var fqn = extractFqnOrNull(ir);
+      return fqn == null ? ANY : fqn.toString();
+    }
+  }
+
+  private static List<Expression> collectInter(Expression ir, List<Expression> append) {
+    if (ir instanceof Set.Intersection inter) {
+      var left = collectInter(inter.left(), append);
+      return collectInter(inter.right(), left);
+    } else {
+      append.add(ir);
+      return append;
+    }
+  }
+
+  private static String extractSet(List<Expression> operands, String sep) {
+    var sb = new StringBuilder();
+    for (var op : operands) {
+      if (sb.isEmpty()) {
+        sb.append("(");
+      } else {
+        sb.append(sep);
+      }
+      var opType = extractTypeOrAny(op);
+      sb.append(opType);
+    }
+    sb.append(")");
+    return sb.toString();
+  }
+
+  private static QualifiedName extractFqnOrNull(IR ir) {
+    var typeNameOpt = ir.passData().get(TypeNames$.MODULE$);
+    if (typeNameOpt.isDefined()) {
+      var typeName = (BindingsMap.Resolution) typeNameOpt.get();
+      return typeName.target().qualifiedName();
+    }
+    return null;
+  }
+}
diff --git a/engine/runtime-compiler/src/main/java/org/enso/compiler/dump/DocsVisit.java b/engine/runtime-compiler/src/main/java/org/enso/compiler/dump/DocsVisit.java
new file mode 100644
index 000000000000..39d1463b3fdb
--- /dev/null
+++ b/engine/runtime-compiler/src/main/java/org/enso/compiler/dump/DocsVisit.java
@@ -0,0 +1,85 @@
+package org.enso.compiler.dump;
+
+import java.io.IOException;
+import java.io.PrintWriter;
+import org.enso.compiler.core.IR;
+import org.enso.compiler.core.ir.DefinitionArgument;
+import org.enso.compiler.core.ir.Module;
+import org.enso.compiler.core.ir.module.scope.Definition;
+import org.enso.compiler.core.ir.module.scope.definition.Method;
+import org.enso.pkg.QualifiedName;
+
+/**
+ * Visitor for processing documentation elements in a module. Pass into {@link
+ * DocsGenerate#visitModule}. This interface also includes various static methods to help working
+ * with the {@link IR}.
+ */
+public interface DocsVisit {
+  boolean visitModule(QualifiedName name, Module ir, PrintWriter writer) throws IOException;
+
+  boolean visitUnknown(IR ir, PrintWriter w) throws IOException;
+
+  void visitMethod(Definition.Type t, Method.Explicit m, PrintWriter writer) throws IOException;
+
+  void visitConversion(Method.Conversion c, PrintWriter w) throws IOException;
+
+  boolean visitType(Definition.Type t, PrintWriter w) throws IOException;
+
+  void visitConstructor(Definition.Type t, Definition.Data d, PrintWriter w) throws IOException;
+
+  //
+  // helper methods
+  //
+
+  /**
+   * Converts a method into textual representation of its signature.
+   *
+   * @param method the method to process
+   * @return text representing the method name and its signature (if any)
+   */
+  public static String toSignature(Method.Explicit method) {
+    return DocsUtils.toSignature(method);
+  }
+
+  /**
+   * Converts a constructor into textual representation of its signature.
+   *
+   * @param cons the constructor to process
+   * @return text representing the constructor name and its signature (if any)
+   */
+  public static String toSignature(Definition.Data cons) {
+    return DocsUtils.toSignature(cons);
+  }
+
+  /**
+   * Converts an argument definition into textual representation of its signature.
+   *
+   * @param arg the argument to process
+   * @return text representing the argument
+   */
+  public static String toSignature(DefinitionArgument arg) {
+    return DocsUtils.toSignature(arg);
+  }
+
+  //
+  // Standard visitor implementations
+  //
+
+  /**
+   * Generates markdown files with documentation content.
+   *
+   * @return new instance of visitor generating markdown documentation format
+   */
+  public static DocsVisit createMarkdown() {
+    return new DocsEmitMarkdown();
+  }
+
+  /**
+   * Ignore comments, but generate fully qualified signatures of the visible elements
+   *
+   * @return new instance of visitor generating just signatures
+   */
+  public static DocsVisit createSignatures() {
+    return new DocsEmitSignatures();
+  }
+}
diff --git a/engine/runtime-compiler/src/main/java/org/enso/compiler/phase/ImportResolverForIR.java b/engine/runtime-compiler/src/main/java/org/enso/compiler/phase/ImportResolverForIR.java
index 671be7c2435b..c041dfeda1c3 100644
--- a/engine/runtime-compiler/src/main/java/org/enso/compiler/phase/ImportResolverForIR.java
+++ b/engine/runtime-compiler/src/main/java/org/enso/compiler/phase/ImportResolverForIR.java
@@ -361,7 +361,7 @@ private BindingsMap loadBindingsMap(CompilerContext.Module mod) {
         u.ir(null);
         u.compilationStage(CompilationStage.INITIAL);
       });
-      getCompiler().ensureParsed(mod, false);
+      getCompiler().ensureParsed(mod, false, false);
       bindingsMap = mod.getBindingsMap();
     }
     return bindingsMap;
diff --git a/engine/runtime-compiler/src/main/scala/org/enso/compiler/Compiler.scala b/engine/runtime-compiler/src/main/scala/org/enso/compiler/Compiler.scala
index 3484c211d670..a00d0cce24b6 100644
--- a/engine/runtime-compiler/src/main/scala/org/enso/compiler/Compiler.scala
+++ b/engine/runtime-compiler/src/main/scala/org/enso/compiler/Compiler.scala
@@ -1,11 +1,14 @@
 package org.enso.compiler
 
+import scala.jdk.CollectionConverters.IterableHasAsJava
 import org.enso.compiler.context.{
   CompilerContext,
   FreshNameSupply,
   InlineContext,
   ModuleContext
 }
+import org.enso.compiler.dump.DocsGenerate
+import org.enso.compiler.dump.DocsVisit
 import org.enso.compiler.context.CompilerContext.Module
 import org.enso.compiler.core.CompilerError
 import org.enso.compiler.core.Implicits.AsMetadata
@@ -139,12 +142,14 @@ class Compiler(
     *                         but no results will be written
     * @param useGlobalCacheLocations whether or not the compilation result should
     *                                  be written to the global cache
+    * @param generateDocs should a documenation be generied
     * @return future to track subsequent serialization of the library
     */
   def compile(
     shouldCompileDependencies: Boolean,
     shouldWriteCache: Boolean,
-    useGlobalCacheLocations: Boolean
+    useGlobalCacheLocations: Boolean,
+    generateDocs: Option[String]
   ): Future[java.lang.Boolean] = {
     getPackageRepository.getMainProjectPackage match {
       case None =>
@@ -186,13 +191,25 @@ class Compiler(
               shouldCompileDependencies
             )
 
+            if (generateDocs.isDefined) {
+              val v = if (generateDocs.get == "api") {
+                DocsVisit.createSignatures()
+              } else {
+                DocsVisit.createMarkdown();
+              }
+              val outDir = DocsGenerate.write(v, pkg, packageModules.asJava)
+              printDiagnostic(s"Documentation generated to ${outDir}")
+            }
+
             if (shouldWriteCache) {
               context.serializeLibrary(
                 this,
                 pkg.libraryName,
                 useGlobalCacheLocations
               )
-            } else CompletableFuture.completedFuture(true)
+            } else {
+              CompletableFuture.completedFuture(true)
+            }
         }
     }
   }
@@ -206,7 +223,7 @@ class Compiler(
     parseModule(
       module,
       irCachingEnabled && !context.isInteractive(module),
-      isGenDocs = true
+      true
     )
     module
   }
@@ -220,7 +237,8 @@ class Compiler(
   private def runInternal(
     modules: List[Module],
     generateCode: Boolean,
-    shouldCompileDependencies: Boolean
+    shouldCompileDependencies: Boolean,
+    generateDocs: Boolean = false
   ): CompilerResult = {
     @scala.annotation.tailrec
     def go(
@@ -233,7 +251,8 @@ class Compiler(
           runCompilerPipeline(
             modulesToCompile,
             generateCode,
-            shouldCompileDependencies
+            shouldCompileDependencies,
+            generateDocs
           )
         val pending =
           packageRepository.getPendingModules.toList
@@ -246,12 +265,17 @@ class Compiler(
   private def runCompilerPipeline(
     modules: List[Module],
     generateCode: Boolean,
-    shouldCompileDependencies: Boolean
+    shouldCompileDependencies: Boolean,
+    generateDocs: Boolean
   ): List[Module] = {
     initialize()
     modules.foreach(m =>
       try {
-        parseModule(m, irCachingEnabled && !context.isInteractive(m))
+        parseModule(
+          m,
+          irCachingEnabled && !context.isInteractive(m),
+          generateDocs
+        )
       } catch {
         case e: Throwable =>
           context.log(
@@ -293,12 +317,20 @@ class Compiler(
           )
         )
         context.updateModule(module, _.invalidateCache())
-        parseModule(module, irCachingEnabled && !context.isInteractive(module))
+        parseModule(
+          module,
+          irCachingEnabled && !context.isInteractive(module),
+          generateDocs
+        )
         importedModules
           .filter(isLoadedFromSource)
           .foreach(m => {
             if (m.getBindingsMap == null) {
-              parseModule(m, irCachingEnabled && !context.isInteractive(module))
+              parseModule(
+                m,
+                irCachingEnabled && !context.isInteractive(module),
+                generateDocs
+              )
             }
           })
         runImportsAndExportsResolution(module, generateCode)
@@ -309,7 +341,7 @@ class Compiler(
 
     if (irCachingEnabled) {
       requiredModules.foreach { module =>
-        ensureParsed(module, !context.isInteractive(module))
+        ensureParsed(module, !context.isInteractive(module), generateDocs)
       }
     }
     requiredModules.foreach { module =>
@@ -322,9 +354,10 @@ class Compiler(
       ) {
 
         val moduleContext = ModuleContext(
-          module          = module,
-          freshNameSupply = Some(freshNameSupply),
-          compilerConfig  = config
+          module           = module,
+          freshNameSupply  = Some(freshNameSupply),
+          compilerConfig   = config,
+          isGeneratingDocs = generateDocs
         )
         val compilerOutput =
           runGlobalTypingPasses(context.getIr(module), moduleContext)
@@ -338,142 +371,147 @@ class Compiler(
         )
       }
     }
-    requiredModules.foreach { module =>
-      if (
-        !context
-          .getCompilationStage(module)
-          .isAtLeast(
-            CompilationStage.AFTER_STATIC_PASSES
-          )
-      ) {
+    if (!generateDocs) {
 
-        val moduleContext = ModuleContext(
-          module          = module,
-          freshNameSupply = Some(freshNameSupply),
-          compilerConfig  = config,
-          pkgRepo         = Some(packageRepository)
-        )
-        val compilerOutput =
-          runMethodBodyPasses(context.getIr(module), moduleContext)
-        context.updateModule(
-          module,
-          { u =>
-            u.ir(compilerOutput)
-            u.compilationStage(CompilationStage.AFTER_STATIC_PASSES)
-          }
-        )
-      }
-    }
+      requiredModules.foreach { module =>
+        if (
+          !context
+            .getCompilationStage(module)
+            .isAtLeast(
+              CompilationStage.AFTER_STATIC_PASSES
+            )
+        ) {
 
-    requiredModules.foreach { module =>
-      if (
-        !context
-          .getCompilationStage(module)
-          .isAtLeast(
-            CompilationStage.AFTER_TYPE_INFERENCE_PASSES
+          val moduleContext = ModuleContext(
+            module           = module,
+            freshNameSupply  = Some(freshNameSupply),
+            compilerConfig   = config,
+            pkgRepo          = Some(packageRepository),
+            isGeneratingDocs = generateDocs
           )
-      ) {
-
-        val moduleContext = ModuleContext(
-          module          = module,
-          freshNameSupply = Some(freshNameSupply),
-          compilerConfig  = config,
-          pkgRepo         = Some(packageRepository)
-        )
-        val compilerOutput =
-          runFinalTypeInferencePasses(context.getIr(module), moduleContext)
-        context.updateModule(
-          module,
-          { u =>
-            u.ir(compilerOutput)
-            u.compilationStage(CompilationStage.AFTER_TYPE_INFERENCE_PASSES)
-          }
-        )
+          val compilerOutput =
+            runMethodBodyPasses(context.getIr(module), moduleContext)
+          context.updateModule(
+            module,
+            { u =>
+              u.ir(compilerOutput)
+              u.compilationStage(CompilationStage.AFTER_STATIC_PASSES)
+            }
+          )
+        }
       }
-    }
 
-    runErrorHandling(requiredModules)
+      requiredModules.foreach { module =>
+        if (
+          !context
+            .getCompilationStage(module)
+            .isAtLeast(
+              CompilationStage.AFTER_TYPE_INFERENCE_PASSES
+            )
+        ) {
 
-    val requiredModulesWithScope = requiredModules.map { module =>
-      if (
-        !context
-          .getCompilationStage(module)
-          .isAtLeast(
-            CompilationStage.AFTER_RUNTIME_STUBS
+          val moduleContext = ModuleContext(
+            module           = module,
+            freshNameSupply  = Some(freshNameSupply),
+            compilerConfig   = config,
+            pkgRepo          = Some(packageRepository),
+            isGeneratingDocs = generateDocs
           )
-      ) {
-        val moduleScopeBuilder = module.getScopeBuilder()
-        context.runStubsGenerator(module, moduleScopeBuilder)
-        context.updateModule(
-          module,
-          { u =>
-            u.compilationStage(CompilationStage.AFTER_RUNTIME_STUBS)
-          }
-        )
-        (module, moduleScopeBuilder)
-      } else {
-        (module, module.getScopeBuilder)
+          val compilerOutput =
+            runFinalTypeInferencePasses(context.getIr(module), moduleContext)
+          context.updateModule(
+            module,
+            { u =>
+              u.ir(compilerOutput)
+              u.compilationStage(CompilationStage.AFTER_TYPE_INFERENCE_PASSES)
+            }
+          )
+        }
       }
-    }
 
-    requiredModulesWithScope.foreach { case (module, moduleScopeBuilder) =>
-      if (
-        !context
-          .getCompilationStage(module)
-          .isAtLeast(
-            CompilationStage.AFTER_CODEGEN
-          )
-      ) {
+      runErrorHandling(requiredModules)
 
-        if (generateCode) {
-          context.log(
-            Compiler.defaultLogLevel,
-            "Generating code for module [{0}].",
-            context.getModuleName(module)
+      val requiredModulesWithScope = requiredModules.map { module =>
+        if (
+          !context
+            .getCompilationStage(module)
+            .isAtLeast(
+              CompilationStage.AFTER_RUNTIME_STUBS
+            )
+        ) {
+          val moduleScopeBuilder = module.getScopeBuilder()
+          context.runStubsGenerator(module, moduleScopeBuilder)
+          context.updateModule(
+            module,
+            { u =>
+              u.compilationStage(CompilationStage.AFTER_RUNTIME_STUBS)
+            }
           )
-
-          context.truffleRunCodegen(module, moduleScopeBuilder, config)
+          (module, moduleScopeBuilder)
+        } else {
+          (module, module.getScopeBuilder)
         }
-        context.updateModule(
-          module,
-          { u =>
-            u.compilationStage(CompilationStage.AFTER_CODEGEN)
-          }
-        )
+      }
 
+      requiredModulesWithScope.foreach { case (module, moduleScopeBuilder) =>
         if (
-          shouldCompileDependencies || (!context.isInteractive(
-            module
-          ) && context.isModuleInRootPackage(module))
+          !context
+            .getCompilationStage(module)
+            .isAtLeast(
+              CompilationStage.AFTER_CODEGEN
+            )
         ) {
-          val shouldStoreCache =
-            generateCode &&
-            irCachingEnabled && !context.wasLoadedFromCache(module)
+
+          if (generateCode) {
+            context.log(
+              Compiler.defaultLogLevel,
+              "Generating code for module [{0}].",
+              context.getModuleName(module)
+            )
+
+            context.truffleRunCodegen(module, moduleScopeBuilder, config)
+          }
+          context.updateModule(
+            module,
+            { u =>
+              u.compilationStage(CompilationStage.AFTER_CODEGEN)
+            }
+          )
+
           if (
-            shouldStoreCache && !hasErrors(module) &&
-            !context.isInteractive(module) && !context.isSynthetic(module)
+            shouldCompileDependencies || (!context.isInteractive(
+              module
+            ) && context.isModuleInRootPackage(module))
           ) {
-            if (isInteractiveMode) {
-              context.notifySerializeModule(context.getModuleName(module))
-            } else {
-              context.serializeModule(
-                this,
-                module,
-                useGlobalCacheLocations,
-                true
-              )
+            val shouldStoreCache =
+              generateCode &&
+              irCachingEnabled && !context.wasLoadedFromCache(module)
+            if (
+              shouldStoreCache && !hasErrors(module) &&
+              !context.isInteractive(module) && !context.isSynthetic(module)
+            ) {
+              if (isInteractiveMode) {
+                context.notifySerializeModule(context.getModuleName(module))
+              } else {
+                context.serializeModule(
+                  this,
+                  module,
+                  useGlobalCacheLocations,
+                  true
+                )
+              }
             }
+          } else {
+            context.log(
+              Compiler.defaultLogLevel,
+              "Skipping serialization for [{0}].",
+              context.getModuleName(module)
+            )
           }
-        } else {
-          context.log(
-            Compiler.defaultLogLevel,
-            "Skipping serialization for [{0}].",
-            context.getModuleName(module)
-          )
         }
       }
-    }
 
+    }
     requiredModules
   }
 
@@ -529,7 +567,11 @@ class Compiler(
 
   private def ensureParsedAndAnalyzed(module: Module): Unit = {
     if (module.getBindingsMap() == null) {
-      ensureParsed(module, irCachingEnabled && !context.isInteractive(module))
+      ensureParsed(
+        module,
+        irCachingEnabled && !context.isInteractive(module),
+        false
+      )
     }
     if (context.isSynthetic(module)) {
       // Synthetic modules need to be import-analyzed
@@ -559,7 +601,11 @@ class Compiler(
     * @param module - the scope from which docs are generated.
     */
   def gatherImportStatements(module: Module): Array[String] = {
-    ensureParsed(module, irCachingEnabled && !context.isInteractive(module))
+    ensureParsed(
+      module,
+      irCachingEnabled && !context.isInteractive(module),
+      false
+    )
     val importedModules = context.getIr(module).imports.flatMap {
       case imp: Import.Module =>
         imp.name.parts.take(2).map(_.name) match {
@@ -583,7 +629,7 @@ class Compiler(
   private def parseModule(
     module: Module,
     useCaches: Boolean,
-    isGenDocs: Boolean = false
+    generateDocs: Boolean
   ): Unit = {
     context.log(
       Compiler.defaultLogLevel,
@@ -599,7 +645,7 @@ class Compiler(
       return
     }
 
-    uncachedParseModule(module, isGenDocs)
+    uncachedParseModule(module, generateDocs)
   }
 
   /** Retrieve module bindings from cache, if available.
@@ -616,7 +662,10 @@ class Compiler(
     } else None
   }
 
-  private def uncachedParseModule(module: Module, isGenDocs: Boolean): Unit = {
+  private def uncachedParseModule(
+    module: Module,
+    generateDocs: Boolean
+  ): Unit = {
     context.log(
       Compiler.defaultLogLevel,
       "Loading module [{0}] from source.",
@@ -628,7 +677,7 @@ class Compiler(
       module           = module,
       freshNameSupply  = Some(freshNameSupply),
       compilerConfig   = config,
-      isGeneratingDocs = isGenDocs
+      isGeneratingDocs = generateDocs
     )
 
     val src   = context.getCharacters(module)
@@ -689,10 +738,14 @@ class Compiler(
     */
   def ensureParsed(module: Module): Unit = {
     val useCaches = irCachingEnabled && !context.isInteractive(module)
-    ensureParsed(module, useCaches)
+    ensureParsed(module, useCaches, false)
   }
 
-  def ensureParsed(module: Module, useCaches: Boolean): Unit = {
+  def ensureParsed(
+    module: Module,
+    useCaches: Boolean,
+    generateDocs: Boolean
+  ): Unit = {
     if (
       !context
         .getCompilationStage(module)
@@ -700,7 +753,7 @@ class Compiler(
           CompilationStage.AFTER_PARSING
         )
     ) {
-      parseModule(module, useCaches)
+      parseModule(module, useCaches, generateDocs)
     }
   }
 
diff --git a/engine/runtime-compiler/src/main/scala/org/enso/compiler/phase/ImportResolver.scala b/engine/runtime-compiler/src/main/scala/org/enso/compiler/phase/ImportResolver.scala
index 5b431b38a1dc..c5dfc4d4190e 100644
--- a/engine/runtime-compiler/src/main/scala/org/enso/compiler/phase/ImportResolver.scala
+++ b/engine/runtime-compiler/src/main/scala/org/enso/compiler/phase/ImportResolver.scala
@@ -61,7 +61,7 @@ final class ImportResolver(compiler: Compiler) extends ImportResolverForIR {
                 u.invalidateCache()
               }
             )
-            compiler.ensureParsed(current, false)
+            compiler.ensureParsed(current, false, false)
             return analyzeModule(current)
         }
       // put the list of resolved imports in the module metadata
diff --git a/engine/runtime-integration-tests/src/test/java/org/enso/compiler/dump/test/DocsGenerateTest.java b/engine/runtime-integration-tests/src/test/java/org/enso/compiler/dump/test/DocsGenerateTest.java
new file mode 100644
index 000000000000..80a18fa1a512
--- /dev/null
+++ b/engine/runtime-integration-tests/src/test/java/org/enso/compiler/dump/test/DocsGenerateTest.java
@@ -0,0 +1,392 @@
+package org.enso.compiler.dump.test;
+
+import static org.junit.Assert.assertEquals;
+import static org.junit.Assert.assertNotNull;
+import static org.junit.Assert.assertNull;
+import static org.junit.Assert.assertTrue;
+
+import java.io.IOException;
+import java.io.PrintWriter;
+import java.util.ArrayList;
+import java.util.List;
+import org.enso.compiler.Compiler;
+import org.enso.compiler.core.IR;
+import org.enso.compiler.core.ir.Module;
+import org.enso.compiler.core.ir.module.scope.Definition;
+import org.enso.compiler.core.ir.module.scope.definition.Method;
+import org.enso.compiler.dump.DocsGenerate;
+import org.enso.compiler.dump.DocsVisit;
+import org.enso.interpreter.runtime.EnsoContext;
+import org.enso.pkg.QualifiedName;
+import org.enso.test.utils.ContextUtils;
+import org.enso.test.utils.ProjectUtils;
+import org.graalvm.polyglot.Context;
+import org.junit.AfterClass;
+import org.junit.BeforeClass;
+import org.junit.ClassRule;
+import org.junit.Test;
+import org.junit.rules.TemporaryFolder;
+
+public class DocsGenerateTest {
+  @ClassRule public static final TemporaryFolder TEMP = new TemporaryFolder();
+
+  private static Context ctx;
+  private static EnsoContext leak;
+  private static Compiler compiler;
+
+  public DocsGenerateTest() {}
+
+  @BeforeClass
+  public static void initCtx() {
+    ctx = ContextUtils.defaultContextBuilder().build();
+    leak = ContextUtils.leakContext(ctx);
+  }
+
+  @AfterClass
+  public static void closeCtx() {
+    ctx.close();
+    ctx = null;
+    leak = null;
+  }
+
+  @Test
+  public void simpleType() throws Exception {
+    var code =
+        """
+        type Calc
+            Zero
+            One x
+            Two x y
+
+            create v = Calc.One v
+            sum self = self.x+self.y
+
+        main = Calc.create 42
+        """;
+
+    var v = new MockVisitor();
+
+    generateDocumentation("Calc", code, v);
+
+    assertEquals("One type found", 1, v.visitType.size());
+    assertEquals("Three constructors", 3, v.visitConstructor.size());
+
+    var typeMethods =
+        v.visitMethod.stream()
+            .filter(p -> p.t() != null)
+            .map(
+                p -> {
+                  assertEquals("Name of the type is", "Calc", p.t().name().name());
+                  return p;
+                })
+            .toList();
+    var moduleMethods = new ArrayList<>(v.visitMethod);
+    moduleMethods.removeAll(typeMethods);
+
+    assertEquals(
+        "Two type methods: "
+            + typeMethods.stream()
+                .map(
+                    p -> {
+                      var typePref = p.t() != null ? p.t().name().name() + "." : "";
+                      return typePref + p.ir().methodName().name();
+                    })
+                .toList(),
+        2,
+        typeMethods.size());
+
+    assertEquals("One module method", 1, moduleMethods.size());
+    assertEquals("main", moduleMethods.get(0).ir().methodName().name());
+  }
+
+  @Test
+  public void functionArgumentTypes() throws Exception {
+    var code =
+        """
+        from Standard.Base import Integer
+
+        sum x:Integer y:Integer -> Integer = x+y
+        """;
+
+    var v = new MockVisitor();
+    generateDocumentation("Sum", code, v);
+
+    assertEquals("One method only", 1, v.visitMethod.size());
+    assertNull("No type associated", v.visitMethod.get(0).t());
+    var sum = v.visitMethod.get(0).ir();
+    assertEquals(
+        "sum x:Standard.Base.Data.Numbers.Integer y:Standard.Base.Data.Numbers.Integer ->"
+            + " Standard.Base.Data.Numbers.Integer",
+        DocsVisit.toSignature(sum));
+  }
+
+  @Test
+  public void suspendAndDefault() throws Exception {
+    var code =
+        """
+        from Standard.Base import Integer
+
+        sum ~x:Integer y:Integer=10 = x+y
+        """;
+
+    var v = new MockVisitor();
+    generateDocumentation("Suspend", code, v);
+
+    assertEquals("One method only", 1, v.visitMethod.size());
+    assertNull("No type associated", v.visitMethod.get(0).t());
+    var sum = v.visitMethod.get(0).ir();
+    assertEquals(
+        "sum ~x:Standard.Base.Data.Numbers.Integer y:Standard.Base.Data.Numbers.Integer= ->"
+            + " Standard.Base.Any.Any",
+        DocsVisit.toSignature(sum));
+  }
+
+  @Test
+  public void constructorSignature() throws Exception {
+    var code =
+        """
+        from Standard.Base import Integer
+
+        type Result
+            Sum ~x:Integer y:Integer=10
+        """;
+
+    var v = new MockVisitor();
+    generateDocumentation("TypeResult", code, v);
+
+    assertEquals("No methods", 0, v.visitMethod.size());
+    assertEquals("One constructor", 1, v.visitConstructor.size());
+    var sum = v.visitConstructor.get(0);
+    assertEquals(
+        "Sum ~x:Standard.Base.Data.Numbers.Integer y:Standard.Base.Data.Numbers.Integer=",
+        DocsVisit.toSignature(sum));
+  }
+
+  @Test
+  public void instanceMethodSignature() throws Exception {
+    var code =
+        """
+        from Standard.Base import Integer
+
+        type Result
+            sum self y = self+y
+        """;
+
+    var v = new MockVisitor();
+    generateDocumentation("InstanceResult", code, v);
+
+    assertEquals("No methods", 1, v.visitMethod.size());
+    var p = v.visitMethod.get(0);
+    assertEquals("Result", p.t().name().name());
+    var sum = p.ir();
+    assertEquals(
+        "sum self y:Standard.Base.Any.Any -> Standard.Base.Any.Any", DocsVisit.toSignature(sum));
+  }
+
+  @Test
+  public void staticMethodSignature() throws Exception {
+    var code =
+        """
+        from Standard.Base import Integer
+
+        type Result
+            sum ~x:Integer y:Integer=10 = x+y
+        """;
+
+    var v = new MockVisitor();
+    generateDocumentation("PrivateResult", code, v);
+
+    assertEquals("One sum method", 1, v.visitMethod.size());
+    var p = v.visitMethod.get(0);
+    assertEquals("Result", p.t().name().name());
+    var sum = p.ir();
+    assertEquals(
+        "sum ~x:Standard.Base.Data.Numbers.Integer y:Standard.Base.Data.Numbers.Integer= ->"
+            + " Standard.Base.Any.Any",
+        DocsVisit.toSignature(sum));
+  }
+
+  @Test
+  public void privateAreHidden() throws Exception {
+    var code =
+        """
+        type Result
+            private Zero
+            private One x
+
+            private create v = Result.One v
+            private power self = self.x*self.x
+        """;
+
+    var v = new MockVisitor();
+    generateDocumentation("StaticResult", code, v);
+
+    assertEquals("No methods", 0, v.visitMethod.size());
+    assertEquals("No constructors", 0, v.visitConstructor.size());
+  }
+
+  @Test
+  public void vectorWithElements() throws Exception {
+    var code =
+        """
+        from Standard.Base import Vector, Text
+
+        values a:Text -> Vector Text = [a]
+        """;
+
+    var v = new MockVisitor();
+    generateDocumentation("VectorText", code, v);
+
+    assertEquals("One methods", 1, v.visitMethod.size());
+    assertEquals("No constructors", 0, v.visitConstructor.size());
+
+    var p = v.visitMethod.get(0);
+    assertNull("It is a module method", p.t());
+
+    var m = p.ir();
+    assertEquals("values", m.methodName().name());
+    assertEquals(
+        "Generates vector with argument type as return type",
+        "values a:Standard.Base.Data.Text.Text -> (Standard.Base.Data.Vector.Vector"
+            + " Standard.Base.Data.Text.Text)",
+        DocsVisit.toSignature(m));
+  }
+
+  @Test
+  public void unionTypes() throws Exception {
+    var code =
+        """
+        type A
+        type B
+        type C
+
+        one a:A -> A | B | C = A
+        """;
+
+    var v = new MockVisitor();
+    generateDocumentation("Union", code, v);
+
+    assertEquals("One methods", 1, v.visitMethod.size());
+    assertEquals("No constructors", 0, v.visitConstructor.size());
+
+    var p = v.visitMethod.get(0);
+    assertNull("It is a module method", p.t());
+
+    var m = p.ir();
+    assertEquals("one", m.methodName().name());
+    assertEquals(
+        "Generates vector with argument type as return type",
+        "one a:local.Union.Main.A -> (local.Union.Main.A|local.Union.Main.B|local.Union.Main.C)",
+        DocsVisit.toSignature(m));
+  }
+
+  @Test
+  public void intersectionTypes() throws Exception {
+    var code =
+        """
+        type A
+        type B
+        type C
+
+        one a:A -> A & B & C = a
+        """;
+
+    var v = new MockVisitor();
+    generateDocumentation("Inter", code, v);
+
+    assertEquals("One methods", 1, v.visitMethod.size());
+    assertEquals("No constructors", 0, v.visitConstructor.size());
+
+    var p = v.visitMethod.get(0);
+    assertNull("It is a module method", p.t());
+
+    var m = p.ir();
+    var sig = DocsVisit.toSignature(m);
+    assertEquals("one", m.methodName().name());
+    assertEquals(
+        "Generates vector with argument type as return type",
+        "one a:local.Inter.Main.A -> (local.Inter.Main.A&local.Inter.Main.B&local.Inter.Main.C)",
+        sig);
+  }
+
+  private static void generateDocumentation(String name, String code, DocsVisit v)
+      throws IOException {
+    var pathCalc = TEMP.newFolder(name);
+    ProjectUtils.createProject(name, code, pathCalc.toPath());
+    ProjectUtils.generateProjectDocs(
+        "api",
+        ContextUtils.defaultContextBuilder(),
+        pathCalc.toPath(),
+        (context) -> {
+          var enso = ContextUtils.leakContext(context);
+          var modules = enso.getTopScope().getModules();
+          var optMod =
+              modules.stream().filter(m -> m.getName().toString().contains(name)).findFirst();
+          assertTrue(
+              "Found " + name + " in " + modules.stream().map(m -> m.getName()).toList(),
+              optMod.isPresent());
+          var mod = optMod.get();
+          assertEquals("local." + name + ".Main", mod.getName().toString());
+          var ir = mod.getIr();
+          assertNotNull("Ir for " + mod + " found", ir);
+
+          try {
+            DocsGenerate.visitModule(v, mod.getName(), ir, null);
+          } catch (IOException e) {
+            throw raise(RuntimeException.class, e);
+          }
+        });
+  }
+
+  private static final class MockVisitor implements DocsVisit {
+    private final List<Module> visitModule = new ArrayList<>();
+    private final List<Definition.Type> visitType = new ArrayList<>();
+    private final List<Definition.Data> visitConstructor = new ArrayList<>();
+    private final List<IR> visitUnknown = new ArrayList<>();
+    private final List<TypeAnd<Method.Explicit>> visitMethod = new ArrayList<>();
+    private final List<Method.Conversion> visitConversion = new ArrayList<>();
+
+    @Override
+    public boolean visitModule(QualifiedName name, Module ir, PrintWriter writer)
+        throws IOException {
+      visitModule.add(ir);
+      return true;
+    }
+
+    @Override
+    public boolean visitUnknown(IR ir, PrintWriter w) throws IOException {
+      visitUnknown.add(ir);
+      return true;
+    }
+
+    @Override
+    public void visitMethod(Definition.Type t, Method.Explicit m, PrintWriter writer)
+        throws IOException {
+      visitMethod.add(new TypeAnd<>(t, m));
+    }
+
+    @Override
+    public void visitConversion(Method.Conversion c, PrintWriter w) throws IOException {
+      visitConversion.add(c);
+    }
+
+    @Override
+    public boolean visitType(Definition.Type t, PrintWriter w) throws IOException {
+      visitType.add(t);
+      return true;
+    }
+
+    @Override
+    public void visitConstructor(Definition.Type t, Definition.Data d, PrintWriter w)
+        throws IOException {
+      visitConstructor.add(d);
+    }
+  }
+
+  @SuppressWarnings("unchecked")
+  private static <E extends Exception> E raise(Class<E> type, Exception t) throws E {
+    throw (E) t;
+  }
+
+  record TypeAnd<IRElement>(Definition.Type t, IRElement ir) {}
+}
diff --git a/engine/runtime-integration-tests/src/test/java/org/enso/compiler/test/SerdeCompilerTest.java b/engine/runtime-integration-tests/src/test/java/org/enso/compiler/test/SerdeCompilerTest.java
index 437419b7a6e4..def609c384a0 100644
--- a/engine/runtime-integration-tests/src/test/java/org/enso/compiler/test/SerdeCompilerTest.java
+++ b/engine/runtime-integration-tests/src/test/java/org/enso/compiler/test/SerdeCompilerTest.java
@@ -69,7 +69,7 @@ private void parseSerializedModule(String projectName, String forbiddenMessage)
                 futures.add(future);
                 return null;
               });
-      futures.add(compiler.compile(false, true, true));
+      futures.add(compiler.compile(false, true, true, scala.Option.empty()));
       for (var f : futures) {
         var persisted = f.get(10, TimeUnit.SECONDS);
         assertEquals("Fib_Test library has been fully persisted", true, persisted);
diff --git a/engine/runtime-integration-tests/src/test/java/org/enso/compiler/test/SerializationManagerTest.java b/engine/runtime-integration-tests/src/test/java/org/enso/compiler/test/SerializationManagerTest.java
index e0dfa4f6b5d3..4f439eeb3081 100644
--- a/engine/runtime-integration-tests/src/test/java/org/enso/compiler/test/SerializationManagerTest.java
+++ b/engine/runtime-integration-tests/src/test/java/org/enso/compiler/test/SerializationManagerTest.java
@@ -89,7 +89,7 @@ public void serializeLibrarySuggestions()
     Object result =
         ensoContext
             .getCompiler()
-            .compile(false, true, false)
+            .compile(false, true, false, scala.Option.empty())
             .get(COMPILE_TIMEOUT_SECONDS, TimeUnit.SECONDS);
     Assert.assertEquals(Boolean.TRUE, result);
 
diff --git a/engine/runtime/src/main/java/org/enso/interpreter/runtime/Module.java b/engine/runtime/src/main/java/org/enso/interpreter/runtime/Module.java
index c46da21bab26..1fb62a430711 100644
--- a/engine/runtime/src/main/java/org/enso/interpreter/runtime/Module.java
+++ b/engine/runtime/src/main/java/org/enso/interpreter/runtime/Module.java
@@ -695,7 +695,10 @@ private static Object evalExpression(
     }
 
     private static Object generateDocs(Module module, EnsoContext context) {
-      return context.getCompiler().generateDocs(module.asCompilerModule());
+      var compilerModule = module.asCompilerModule();
+      var res = context.getCompiler().generateDocs(compilerModule);
+      assert res == compilerModule;
+      return module;
     }
 
     @CompilerDirectives.TruffleBoundary
diff --git a/engine/runtime/src/main/java/org/enso/interpreter/runtime/scope/TopLevelScope.java b/engine/runtime/src/main/java/org/enso/interpreter/runtime/scope/TopLevelScope.java
index 3c6aee846d8d..fffc805a3bc1 100644
--- a/engine/runtime/src/main/java/org/enso/interpreter/runtime/scope/TopLevelScope.java
+++ b/engine/runtime/src/main/java/org/enso/interpreter/runtime/scope/TopLevelScope.java
@@ -1,21 +1,10 @@
 package org.enso.interpreter.runtime.scope;
 
-import com.oracle.truffle.api.CompilerDirectives;
-import com.oracle.truffle.api.TruffleFile;
-import com.oracle.truffle.api.dsl.Bind;
-import com.oracle.truffle.api.dsl.Specialization;
-import com.oracle.truffle.api.interop.ArityException;
-import com.oracle.truffle.api.interop.InteropLibrary;
-import com.oracle.truffle.api.interop.UnknownIdentifierException;
-import com.oracle.truffle.api.interop.UnsupportedMessageException;
-import com.oracle.truffle.api.interop.UnsupportedTypeException;
-import com.oracle.truffle.api.library.ExportLibrary;
-import com.oracle.truffle.api.library.ExportMessage;
-import com.oracle.truffle.api.nodes.Node;
 import java.io.File;
 import java.util.Collection;
 import java.util.Optional;
 import java.util.concurrent.ExecutionException;
+
 import org.enso.common.MethodNames;
 import org.enso.compiler.PackageRepository;
 import org.enso.editions.LibraryName;
@@ -30,6 +19,21 @@
 import org.enso.pkg.QualifiedName;
 import org.enso.scala.wrapper.ScalaConversions;
 
+import com.oracle.truffle.api.CompilerDirectives;
+import com.oracle.truffle.api.TruffleFile;
+import com.oracle.truffle.api.dsl.Bind;
+import com.oracle.truffle.api.dsl.Specialization;
+import com.oracle.truffle.api.interop.ArityException;
+import com.oracle.truffle.api.interop.InteropLibrary;
+import com.oracle.truffle.api.interop.UnknownIdentifierException;
+import com.oracle.truffle.api.interop.UnsupportedMessageException;
+import com.oracle.truffle.api.interop.UnsupportedTypeException;
+import com.oracle.truffle.api.library.ExportLibrary;
+import com.oracle.truffle.api.library.ExportMessage;
+import com.oracle.truffle.api.nodes.Node;
+
+import scala.Option;
+
 /** Represents the top scope of Enso execution, containing all the importable modules. */
 @ExportLibrary(InteropLibrary.class)
 public final class TopLevelScope extends EnsoObject {
@@ -184,13 +188,28 @@ private static Object leakContext(EnsoContext context) {
     @CompilerDirectives.TruffleBoundary
     private static Object compile(Object[] arguments, EnsoContext context)
         throws UnsupportedTypeException, ArityException {
-      boolean shouldCompileDependencies = Types.extractArguments(arguments, Boolean.class);
-      boolean shouldWriteCache = !context.isIrCachingDisabled();
       boolean useGlobalCache = context.isUseGlobalCache();
+      boolean shouldCompileDependencies;
+      scala.Option<String> generateDocs;
+      switch (arguments.length) {
+        case 2 -> {
+          shouldCompileDependencies = Boolean.TRUE.equals(arguments[0]);
+          generateDocs = switch (arguments[1]) {
+            case Boolean b when !b -> Option.empty();
+            case String s -> Option.apply(s);
+            default -> Option.empty();
+          };
+        }
+        default -> {
+          shouldCompileDependencies = Types.extractArguments(arguments, Boolean.class);
+          generateDocs = Option.empty();
+        }
+      }
+      boolean shouldWriteCache = !context.isIrCachingDisabled();
       try {
         return context
             .getCompiler()
-            .compile(shouldCompileDependencies, shouldWriteCache, useGlobalCache)
+            .compile(shouldCompileDependencies, shouldWriteCache, useGlobalCache, generateDocs)
             .get();
       } catch (InterruptedException e) {
         throw new RuntimeException(e);
diff --git a/eslint.config.mjs b/eslint.config.mjs
index ffbf4b3fe0b5..fb8ed5021de1 100644
--- a/eslint.config.mjs
+++ b/eslint.config.mjs
@@ -37,7 +37,7 @@ const NAME = 'enso'
  * `node:process` is here because `process.on` does not exist on the namespace import.
  */
 const DEFAULT_IMPORT_ONLY_MODULES =
-  '@vitejs\\u002Fplugin-react|node:process|chalk|string-length|yargs|yargs\\u002Fyargs|sharp|to-ico|connect|morgan|serve-static|tiny-invariant|clsx|create-servers|electron-is-dev|fast-glob|esbuild-plugin-.+|opener|tailwindcss.*|@modyfi\\u002Fvite-plugin-yaml|build-info|is-network-error|validator.+|.*[.]json$'
+  '@vitejs\\u002Fplugin-react|node:process|chalk|string-length|yargs|yargs\\u002Fyargs|sharp|to-ico|connect|morgan|serve-static|tiny-invariant|react-keyed-flatten-children|clsx|create-servers|electron-is-dev|fast-glob|esbuild-plugin-.+|opener|tailwindcss.*|@modyfi\\u002Fvite-plugin-yaml|build-info|is-network-error|validator.+|.*[.]json$'
 const RELATIVE_MODULES =
   'projectManager|server|configParser|authentication|config|debug|detect|fileAssociations|index|ipc|log|naming|paths|preload|projectManagement|security|urlAssociations|contentConfig|desktopEnvironment|#\\u002F.*'
 const ALLOWED_DEFAULT_IMPORT_MODULES = `${DEFAULT_IMPORT_ONLY_MODULES}|postcss|ajv\\u002Fdist\\u002F2020|${RELATIVE_MODULES}`
diff --git a/lib/java/test-utils/src/main/java/org/enso/test/utils/ProjectUtils.java b/lib/java/test-utils/src/main/java/org/enso/test/utils/ProjectUtils.java
index 5eb9a183f974..40704d9f6b30 100644
--- a/lib/java/test-utils/src/main/java/org/enso/test/utils/ProjectUtils.java
+++ b/lib/java/test-utils/src/main/java/org/enso/test/utils/ProjectUtils.java
@@ -15,6 +15,7 @@
 import org.graalvm.polyglot.Context.Builder;
 import org.graalvm.polyglot.Value;
 import org.slf4j.LoggerFactory;
+import scala.Option;
 
 /** Utility methods for creating and running Enso projects. */
 public class ProjectUtils {
@@ -108,6 +109,37 @@ public static void testProjectRun(
     }
   }
 
+  /**
+   * Tests running the project located in the given {@code projDir}. Is equal to running {@code enso
+   * --run <projDir>}.
+   *
+   * @param docsFormat format of the documentation to generate
+   * @param ctxBuilder A context builder that might be initialized with some specific options.
+   * @param projDir Root directory of the project.
+   * @param whenDone callback when generated
+   */
+  public static void generateProjectDocs(
+      String docsFormat, Context.Builder ctxBuilder, Path projDir, Consumer<Context> whenDone) {
+    if (!(projDir.toFile().exists() && projDir.toFile().isDirectory())) {
+      throw new IllegalArgumentException(
+          "Project directory " + projDir + " must already be created");
+    }
+    try (var ctx =
+        ctxBuilder
+            .option(RuntimeOptions.PROJECT_ROOT, projDir.toAbsolutePath().toString())
+            .option(RuntimeOptions.STRICT_ERRORS, "true")
+            .option(RuntimeOptions.DISABLE_IR_CACHES, "true")
+            .build()) {
+      var polyCtx = new PolyglotContext(ctx);
+      var mainSrcPath = projDir.resolve("src").resolve("Main.enso");
+      if (!mainSrcPath.toFile().exists()) {
+        throw new IllegalArgumentException("Main module not found in " + projDir);
+      }
+      polyCtx.getTopScope().compile(false, Option.apply(docsFormat));
+      whenDone.accept(polyCtx.context());
+    }
+  }
+
   /**
    * Just a wrapper for {@link ProjectUtils#testProjectRun(Builder, Path, Consumer)}.
    *
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 11029005972d..0bb54d070a86 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -322,6 +322,9 @@ importers:
       react-hook-form:
         specifier: ^7.54.2
         version: 7.54.2(react@18.3.1)
+      react-keyed-flatten-children:
+        specifier: 3.0.2
+        version: 3.0.2(react@18.3.1)
       react-router:
         specifier: ^6.28.1
         version: 6.28.1(react@18.3.1)
@@ -6557,6 +6560,14 @@ packages:
   react-is@17.0.2:
     resolution: {integrity: sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==}
 
+  react-is@18.3.1:
+    resolution: {integrity: sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==}
+
+  react-keyed-flatten-children@3.0.2:
+    resolution: {integrity: sha512-5oiw2x9QlCSOTeAerw72e3ij0P+kJ60A7mtHvpabbOc4j3mvVQB3YpXCy2Qt/0YOuDWvAq3w/cGRuO7G20KISQ==}
+    peerDependencies:
+      react: '>=15.0.0'
+
   react-refresh@0.14.2:
     resolution: {integrity: sha512-jCvmsr+1IUSMUyzOkRcvnVbX3ZYC6g9TDrDbFuFmRDq7PD4yaGbLKNQL6k2jnArV8hjYxh7hVhAZB6s9HDGpZA==}
     engines: {node: '>=0.10.0'}
@@ -14831,6 +14842,13 @@ snapshots:
 
   react-is@17.0.2: {}
 
+  react-is@18.3.1: {}
+
+  react-keyed-flatten-children@3.0.2(react@18.3.1):
+    dependencies:
+      react: 18.3.1
+      react-is: 18.3.1
+
   react-refresh@0.14.2: {}
 
   react-router-dom@6.28.1(react-dom@18.3.1(react@18.3.1))(react@18.3.1):
diff --git a/std-bits/table/src/main/java/org/enso/table/operations/FillWith.java b/std-bits/table/src/main/java/org/enso/table/operations/FillWith.java
new file mode 100644
index 000000000000..250f649fa09f
--- /dev/null
+++ b/std-bits/table/src/main/java/org/enso/table/operations/FillWith.java
@@ -0,0 +1,7 @@
+package org.enso.table.operations;
+
+public enum FillWith {
+  NOTHING,
+  CLOSEST_VALUE,
+  WRAP_AROUND,
+}
diff --git a/std-bits/table/src/main/java/org/enso/table/operations/Offset.java b/std-bits/table/src/main/java/org/enso/table/operations/Offset.java
new file mode 100644
index 000000000000..f8979986a31b
--- /dev/null
+++ b/std-bits/table/src/main/java/org/enso/table/operations/Offset.java
@@ -0,0 +1,120 @@
+package org.enso.table.operations;
+
+import java.util.Arrays;
+import java.util.LinkedList;
+import java.util.Queue;
+import org.enso.table.data.column.storage.Storage;
+import org.enso.table.data.mask.OrderMask;
+import org.enso.table.data.table.Column;
+import org.enso.table.problems.ProblemAggregator;
+
+public class Offset {
+  public static Storage<?>[] offset(
+      Column[] sourceColumns,
+      int n,
+      FillWith fillWith,
+      Column[] groupingColumns,
+      Column[] orderingColumns,
+      int[] directions,
+      ProblemAggregator problemAggregator) {
+    if (n == 0 || sourceColumns.length == 0)
+      return Arrays.stream(sourceColumns).map(c -> c.getStorage()).toArray(Storage<?>[]::new);
+    var offsetRowVisitorFactory = new OffsetRowVisitorFactory(sourceColumns[0], n, fillWith);
+    GroupingOrderingVisitor.visit(
+        groupingColumns,
+        orderingColumns,
+        directions,
+        problemAggregator,
+        offsetRowVisitorFactory,
+        sourceColumns[0].getSize());
+    return Arrays.stream(sourceColumns)
+        .map(
+            c ->
+                c.getStorage().applyMask(OrderMask.fromArray(offsetRowVisitorFactory.rowOrderMask)))
+        .toArray(Storage<?>[]::new);
+  }
+
+  private static class OffsetRowVisitorFactory implements RowVisitorFactory {
+
+    int[] rowOrderMask;
+    int n;
+    FillWith fillWith;
+
+    OffsetRowVisitorFactory(Column sourceColumn, int n, FillWith fillWith) {
+      rowOrderMask = new int[sourceColumn.getSize()];
+      this.n = n;
+      this.fillWith = fillWith;
+    }
+
+    @Override
+    public OffsetRowVisitor getNewRowVisitor() {
+      return new OffsetRowVisitor(n, fillWith, rowOrderMask);
+    }
+  }
+
+  private static class OffsetRowVisitor implements GroupRowVisitor {
+    Queue<Integer> rolling_queue;
+    Queue<Integer> fill_queue;
+    int n;
+    int current_n;
+    int closestPos;
+    FillWith fillWith;
+    int[] rowOrderMask;
+
+    public OffsetRowVisitor(int n, FillWith fillWith, int[] rowOrderMask) {
+      this.rolling_queue = new LinkedList<>();
+      this.fill_queue = new LinkedList<>();
+      this.current_n = 0;
+      this.closestPos = -1;
+      this.n = n;
+      this.fillWith = fillWith;
+      this.rowOrderMask = rowOrderMask;
+    }
+
+    @Override
+    public void visit(int i) {
+      rolling_queue.add(i);
+
+      if (n < 0 && current_n <= Math.abs(n)) {
+        closestPos = rolling_queue.peek();
+      } else if (n > 0) {
+        closestPos = i;
+      }
+
+      if (current_n < Math.abs(n)) {
+        fill_queue.add(i);
+      } else if (n < 0) {
+        rowOrderMask[i] = rolling_queue.poll();
+      } else if (n > 0) {
+        rowOrderMask[rolling_queue.poll()] = i;
+      }
+
+      current_n++;
+    }
+
+    @Override
+    public void finalise() {
+      while (fillWith == FillWith.WRAP_AROUND && current_n < Math.abs(n) && !fill_queue.isEmpty()) {
+        var i = fill_queue.poll();
+        fill_queue.add(i);
+        current_n++;
+      }
+
+      while (n < 0 && !fill_queue.isEmpty()) {
+        rowOrderMask[fill_queue.poll()] = getFillValue();
+      }
+
+      while (n > 0 && !rolling_queue.isEmpty()) {
+        rowOrderMask[rolling_queue.poll()] = getFillValue();
+      }
+    }
+
+    int getFillValue() {
+      return switch (fillWith) {
+        case NOTHING -> Storage.NOT_FOUND_INDEX;
+        case CLOSEST_VALUE -> closestPos;
+        case WRAP_AROUND -> n < 0 ? rolling_queue.poll() : fill_queue.poll();
+      };
+    }
+  }
+}
diff --git a/test/Table_Tests/src/Common_Table_Operations/Conversion_Spec.enso b/test/Table_Tests/src/Common_Table_Operations/Conversion_Spec.enso
index 671fa4e255b2..142098a8753e 100644
--- a/test/Table_Tests/src/Common_Table_Operations/Conversion_Spec.enso
+++ b/test/Table_Tests/src/Common_Table_Operations/Conversion_Spec.enso
@@ -567,8 +567,15 @@ add_conversion_specs suite_builder setup =
             setup.expect_integer_type c2
             c2.to_vector . should_equal v
 
+            # Testing that `parse` on a column that already has the right type also works (no-op).
             t2 = table_builder [["X", v]]
-            c3 = t2.parse ["X"] Value_Type.Integer . at "X"
+            ## On most backends, existing_type will be Integer,
+               but e.g. on Snowflake it will be Decimal, so to make this test universal
+               we need to set the actual type as target for parse.
+            setup.expect_integer_type (t2.at "X")
+            existing_type = t2.at "X" . value_type
+
+            c3 = t2.parse ["X"] existing_type . at "X"
             setup.expect_integer_type c3
             c3.to_vector . should_equal v
 
diff --git a/test/Table_Tests/src/Common_Table_Operations/Main.enso b/test/Table_Tests/src/Common_Table_Operations/Main.enso
index c5aeabe281e9..2c1fb7a9e006 100644
--- a/test/Table_Tests/src/Common_Table_Operations/Main.enso
+++ b/test/Table_Tests/src/Common_Table_Operations/Main.enso
@@ -29,6 +29,7 @@ import project.Common_Table_Operations.Map_Spec
 import project.Common_Table_Operations.Map_To_Table_Spec
 import project.Common_Table_Operations.Missing_Values_Spec
 import project.Common_Table_Operations.Nothing_Spec
+import project.Common_Table_Operations.Offset_Spec
 import project.Common_Table_Operations.Order_By_Spec
 import project.Common_Table_Operations.Select_Columns_Spec
 import project.Common_Table_Operations.Take_Drop_Spec
@@ -118,36 +119,37 @@ type Test_Selection
         self.run_advanced_edge_case_tests_by_default || (Environment.get "ENSO_ADVANCED_EDGE_CASE_TESTS" . is_nothing . not)
 
 add_specs suite_builder setup =
-    Core_Spec.add_specs suite_builder setup
-    Select_Columns_Spec.add_specs suite_builder setup
+    Add_Group_Number_Spec.add_specs suite_builder setup
+    Add_Row_Number_Spec.add_specs suite_builder setup
+    Aggregate_Spec.add_specs suite_builder setup
+    Coalesce_Spec.add_specs suite_builder setup
     Column_Name_Edge_Cases_Spec.add_specs suite_builder setup
     Column_Operations_Spec.add_specs suite_builder setup
-    Derived_Columns_Spec.add_specs suite_builder setup
-    Date_Time_Spec.add_specs suite_builder setup
     Conversion_Spec.add_specs suite_builder setup
-    Aggregate_Spec.add_specs suite_builder setup
+    Core_Spec.add_specs suite_builder setup
+    Cross_Join_Spec.add_specs suite_builder setup
+    Cross_Tab_Spec.add_specs suite_builder setup
+    Date_Time_Spec.add_specs suite_builder setup
+    Derived_Columns_Spec.add_specs suite_builder setup
+    Distinct_Spec.add_specs suite_builder setup
+    Expression_Spec.add_specs suite_builder detailed=False setup
     Filter_Spec.add_specs suite_builder setup
+    Integration_Tests.add_specs suite_builder setup
+    Join_Spec.add_specs suite_builder setup
+    Lookup_Spec.add_specs suite_builder setup
     Map_Spec.add_specs suite_builder setup
+    Map_To_Table_Spec.add_specs suite_builder setup
     Missing_Values_Spec.add_specs suite_builder setup
+    Nothing_Spec.add_specs suite_builder setup
+    Offset_Spec.add_specs suite_builder setup
     Order_By_Spec.add_specs suite_builder setup
-    Take_Drop_Spec.add_specs suite_builder setup
-    Expression_Spec.add_specs suite_builder detailed=False setup
-    Join_Spec.add_specs suite_builder setup
-    Cross_Join_Spec.add_specs suite_builder setup
-    Zip_Spec.add_specs suite_builder setup
-    Union_Spec.add_specs suite_builder setup
-    Lookup_Spec.add_specs suite_builder setup
     Replace_Spec.add_specs suite_builder setup
-    Map_To_Table_Spec.add_specs suite_builder setup
-    Distinct_Spec.add_specs suite_builder setup
-    Cross_Tab_Spec.add_specs suite_builder setup
-    Transpose_Spec.add_specs suite_builder setup
-    Add_Group_Number_Spec.add_specs suite_builder setup
-    Add_Row_Number_Spec.add_specs suite_builder setup
-    Integration_Tests.add_specs suite_builder setup
+    Select_Columns_Spec.add_specs suite_builder setup
+    Take_Drop_Spec.add_specs suite_builder setup
     Temp_Column_Spec.add_specs suite_builder setup
-    Nothing_Spec.add_specs suite_builder setup
     Text_Cleanse_Spec.add_specs suite_builder setup
-    Coalesce_Spec.add_specs suite_builder setup
+    Transpose_Spec.add_specs suite_builder setup
+    Union_Spec.add_specs suite_builder setup
+    Zip_Spec.add_specs suite_builder setup
 
 main filter=Nothing = run_default_backend add_specs filter
diff --git a/test/Table_Tests/src/Common_Table_Operations/Offset_Spec.enso b/test/Table_Tests/src/Common_Table_Operations/Offset_Spec.enso
new file mode 100644
index 000000000000..048b67f4309e
--- /dev/null
+++ b/test/Table_Tests/src/Common_Table_Operations/Offset_Spec.enso
@@ -0,0 +1,471 @@
+from Standard.Base import all
+from Standard.Test import all
+
+from Standard.Database.Errors import Unsupported_Database_Operation
+import Standard.Database.Feature.Feature
+from Standard.Base.Errors.Common import Missing_Argument, Floating_Point_Equality
+from Standard.Table.Errors import Missing_Input_Columns
+
+from project.Common_Table_Operations.Util import run_default_backend
+import project.Common_Table_Operations.Util
+
+main filter=Nothing = run_default_backend add_specs filter
+
+add_specs suite_builder setup =
+    if setup.is_feature_supported Feature.Offset then (add_offset_specs suite_builder setup) else
+        suite_builder.group setup.prefix+"Table.offset" group_builder->
+            group_builder.specify "offset should report unsupported" <|
+                table_builder = setup.light_table_builder
+                t = table_builder [["ix", [1, 2, 3, 4, 5]], ["X", [100, 3, Nothing, 4, 12]], ["Y", [100, 4, 2, Nothing, 11]]]
+                t2 = t.offset ["X"]
+                t2.should_fail_with (Unsupported_Database_Operation.Error "offset")
+
+add_offset_specs suite_builder setup =
+    prefix = setup.prefix
+    build_sorted_table = Util.build_sorted_table setup
+    t = build_sorted_table [["A", [1, 2, 3]], ["B", [Nothing, Nothing, Nothing]], ["Text Values", ["A", "B", "C"]]]
+    c = t.at 0 
+    c_nothings = t.at 1
+    c_zero_rows = t.take 0 . at 0
+    suite_builder.group prefix+"Column.Offset with default fill strategy" pending="TODO Column.Offset" group_builder->
+        group_builder.specify "Works with default values" <|
+            r = c.offset
+            r.to_vector . should_equal [Nothing, 1, 2]
+            r.name . should_equal c.name
+        group_builder.specify "Negative n shifts the values down" <|
+            r = c.offset -1
+            r.to_vector . should_equal [Nothing, 1, 2]
+        group_builder.specify "Positive n shifts the values up" <|
+            r = c.offset 1
+            r.to_vector . should_equal [2, 3, Nothing]
+        group_builder.specify "Zero n is a no-op" <|
+            r = c.offset 0
+            r.to_vector . should_equal [1, 2, 3]
+        group_builder.specify "Large negative n values work" <|
+            r = c.offset -1024
+            r.to_vector . should_equal [Nothing, Nothing, Nothing]
+        group_builder.specify "Large positive n values work" <|
+            r = c.offset 1024
+            r.to_vector . should_equal [Nothing, Nothing, Nothing]
+        group_builder.specify "Works with zero rows" <|
+            r = c_zero_rows.offset
+            r.to_vector . should_equal []
+    suite_builder.group prefix+"Column.Offset with closest value fill strategy" pending="TODO Column.Offset" group_builder->
+        group_builder.specify "Negative n shifts the values down" <|
+            r = c.offset -1 ..Closest_Value
+            r.to_vector . should_equal [1, 1, 2]
+        group_builder.specify "Positive n shifts the values up" <|
+            r = c.offset 1 ..Closest_Value
+            r.to_vector . should_equal [2, 3, 3]
+        group_builder.specify "Zero n is a no-op" <|
+            r = c.offset 0 ..Closest_Value
+            r.to_vector . should_equal [1, 2, 3]
+        group_builder.specify "Large negative n values work" <|
+            r = c.offset -1024 ..Closest_Value
+            r.to_vector . should_equal [1, 1, 1]
+        group_builder.specify "Large positive n values work" <|
+            r = c.offset 1024 ..Closest_Value
+            r.to_vector . should_equal [3, 3, 3]
+        group_builder.specify "Works with zero rows" <|
+            r = c_zero_rows.offset -1 ..Closest_Value
+            r.to_vector . should_equal []
+        group_builder.specify "Works with negative n and column of nothings" <|
+            r = c_nothings.offset -1 ..Closest_Value
+            r.to_vector . should_equal [Nothing, Nothing, Nothing]
+        group_builder.specify "Works with positive n and column of nothings" <|
+            r = c_nothings.offset 1 ..Closest_Value
+            r.to_vector . should_equal [Nothing, Nothing, Nothing]
+    suite_builder.group prefix+"Column.Offset with wrap around fill strategy" pending="TODO Column.Offset" group_builder->
+        group_builder.specify "Negative n shifts the values down" <|
+            r = c.offset -1 ..Wrap_Around
+            r.to_vector . should_equal [3, 1, 2]
+        group_builder.specify "Positive n shifts the values up" <|
+            r = c.offset 1 ..Wrap_Around
+            r.to_vector . should_equal [2, 3, 1]
+        group_builder.specify "Continues to wrap around after n is bigger than number of rows (negative n)" <|
+            r = c.offset -4 ..Wrap_Around
+            r.to_vector . should_equal [3, 1, 2]
+        group_builder.specify "Continues to wrap around after n is bigger than number of rows (positive n)" <|
+            r = c.offset 4 ..Wrap_Around
+            r.to_vector . should_equal [2, 3, 1]
+        group_builder.specify "Zero n is a no-op" <|
+            r = c.offset 0 ..Wrap_Around
+            r.to_vector . should_equal [1, 2, 3]
+        group_builder.specify "Large negative n values work" <|
+            r = c.offset -1024 ..Wrap_Around
+            r.to_vector . should_equal [3, 1, 2]
+        group_builder.specify "Large positive n values work" <|
+            r = c.offset 1024 ..Wrap_Around
+            r.to_vector . should_equal [2, 3, 1]
+        group_builder.specify "Works with zero rows" <|
+            r = c_zero_rows.offset -1 ..Wrap_Around
+            r.to_vector . should_equal []
+        group_builder.specify "Works with negative n and column of nothings" <|
+            r = c_nothings.offset -1 ..Wrap_Around
+            r.to_vector . should_equal [Nothing, Nothing, Nothing]
+        group_builder.specify "Works with positive n and column of nothings" <|
+            r = c_nothings.offset 1 ..Wrap_Around
+            r.to_vector . should_equal [Nothing, Nothing, Nothing]
+    suite_builder.group prefix+"Column.Offset with constant fill strategy" pending="TODO Column.Offset" group_builder->
+        group_builder.specify "Negative n shifts the values down" <|
+            r = c.offset -1 42
+            r.to_vector . should_equal [42, 1, 2]
+        group_builder.specify "Positive n shifts the values up" <|
+            r = c.offset 1 42
+            r.to_vector . should_equal [2, 3, 42]
+        group_builder.specify "Zero n is a no-op" <|
+            r = c.offset 0 42
+            r.to_vector . should_equal [1, 2, 3]
+        group_builder.specify "Large negative n values work" <|
+            r = c.offset -1024 42
+            r.to_vector . should_equal [42, 42, 42]
+        group_builder.specify "Large positive n values work" <|
+            r = c.offset 1024 42
+            r.to_vector . should_equal [42, 42, 42]
+        group_builder.specify "Works with zero rows" <|
+            r = c_zero_rows.offset -1 42
+            r.to_vector . should_equal []
+        group_builder.specify "Works with negative n and column of nothings" <|
+            r = c_nothings.offset -1 42
+            r.to_vector . should_equal [42, Nothing, Nothing]
+        group_builder.specify "Works with positive n and column of nothings" <|
+            r = c_nothings.offset 1 42
+            r.to_vector . should_equal [Nothing, Nothing, 42]
+        group_builder.specify "Can create mixed colums" <|
+            r = c.offset -1 "42"
+            r.to_vector . should_equal ["42", 1, 2]
+    suite_builder.group prefix+"Table.Offset with default fill strategy" group_builder->
+        group_builder.specify "Works with default values" <|
+            r = t.offset ["A"]
+            r . at "offset([A], -1, Fill_With.Nothing)" . to_vector . should_equal [Nothing, 1, 2]
+        group_builder.specify "Works with negative n values" <|
+            r = t.offset ["A"] -2
+            r . at "offset([A], -2, Fill_With.Nothing)" . to_vector . should_equal [Nothing, Nothing, 1]
+        group_builder.specify "Works with positive n values (n=1)" <|
+            r = t.offset ["A"] 1
+            r . at "offset([A], 1, Fill_With.Nothing)" . to_vector . should_equal [2, 3, Nothing]
+        group_builder.specify "Works with positive n values (n=2)" <|
+            r = t.offset ["A"] 2
+            r . at "offset([A], 2, Fill_With.Nothing)" . to_vector . should_equal [3, Nothing, Nothing]
+        group_builder.specify "Zero n is a no-op" <|
+            r = t.offset ["A"] 0
+            r . at "offset([A], 0, Fill_With.Nothing)" . to_vector . should_equal [1, 2, 3]
+        group_builder.specify "Large negative n values work" <|
+            r = t.offset ["A"] -1024
+            r . at "offset([A], -1024, Fill_With.Nothing)" . to_vector . should_equal [Nothing, Nothing, Nothing]
+        group_builder.specify "Large positive n values work" <|
+            r = t.offset ["A"] 1024
+            r . at "offset([A], 1024, Fill_With.Nothing)" . to_vector . should_equal [Nothing, Nothing, Nothing]
+        group_builder.specify "Works with zero rows" <|
+            r = t.take 0 . offset ["A"]
+            r . at "offset([A], -1, Fill_With.Nothing)" . to_vector . should_equal []
+    suite_builder.group prefix+"Table.Offset with default fill strategy (Text Values)" group_builder->
+        group_builder.specify "Works with default values" <|
+            r = t.offset ["Text Values"]
+            r . at "offset([Text Values], -1, Fill_With.Nothing)" . to_vector . should_equal [Nothing, "A", "B"]
+        group_builder.specify "Works with negative n values" <|
+            r = t.offset ["Text Values"] -2
+            r . at "offset([Text Values], -2, Fill_With.Nothing)" . to_vector . should_equal [Nothing, Nothing, "A"]
+        group_builder.specify "Works with positive n values (n=1)" <|
+            r = t.offset ["Text Values"] 1
+            r . at "offset([Text Values], 1, Fill_With.Nothing)" . to_vector . should_equal ["B", "C", Nothing]
+        group_builder.specify "Works with positive n values (n=2)" <|
+            r = t.offset ["Text Values"] 2
+            r . at "offset([Text Values], 2, Fill_With.Nothing)" . to_vector . should_equal ["C", Nothing, Nothing]
+    suite_builder.group prefix+"Table.Offset with closest value fill strategy" group_builder->
+        group_builder.specify "Negative n shifts the values down" <|
+            r = t.offset ["A"] -1 ..Closest_Value
+            r . at "offset([A], -1, Fill_With.Closest_Value)" . to_vector . should_equal [1, 1, 2]
+        group_builder.specify "Positive n shifts the values up" <|
+            r = t.offset ["A"] 1 ..Closest_Value
+            r . at "offset([A], 1, Fill_With.Closest_Value)" . to_vector . should_equal [2, 3, 3]
+        group_builder.specify "Zero n is a no-op" <|
+            r = t.offset ["A"] 0 ..Closest_Value
+            r . at "offset([A], 0, Fill_With.Closest_Value)" . to_vector . should_equal [1, 2, 3]
+        group_builder.specify "Large negative n values work" <|
+            r = t.offset ["A"] -1024 ..Closest_Value
+            r . at "offset([A], -1024, Fill_With.Closest_Value)" . to_vector . should_equal [1, 1, 1]
+        group_builder.specify "Large positive n values work" <|
+            r = t.offset ["A"] 1024 ..Closest_Value
+            r . at "offset([A], 1024, Fill_With.Closest_Value)" . to_vector . should_equal [3, 3, 3]
+        group_builder.specify "Works with zero rows" <|
+            r = t.take 0 . offset ["A"] -1 ..Closest_Value
+            r . at "offset([A], -1, Fill_With.Closest_Value)" . to_vector . should_equal []
+        group_builder.specify "Works with negative n and column of nothings" <|
+            r = t.offset ["B"] -1 ..Closest_Value
+            r . at "offset([B], -1, Fill_With.Closest_Value)" . to_vector . should_equal [Nothing, Nothing, Nothing]
+        group_builder.specify "Works with positive n and column of nothings" <|
+            r = t.offset ["B"] 1 ..Closest_Value
+            r . at "offset([B], 1, Fill_With.Closest_Value)" . to_vector . should_equal [Nothing, Nothing, Nothing]
+    suite_builder.group prefix+"Table.Offset with wrap around fill strategy" group_builder->
+        group_builder.specify "Negative n shifts the values down" <|
+            r = t.offset ["A"] -1 ..Wrap_Around
+            r . at "offset([A], -1, Fill_With.Wrap_Around)" . to_vector . should_equal [3, 1, 2]
+        group_builder.specify "Positive n shifts the values up" <|
+            r = t.offset ["A"] 1 ..Wrap_Around
+            r . at "offset([A], 1, Fill_With.Wrap_Around)" . to_vector . should_equal [2, 3, 1]
+        group_builder.specify "Negative n shifts the values down (n=2)" <|
+            r = t.offset ["A"] -2 ..Wrap_Around
+            r . at "offset([A], -2, Fill_With.Wrap_Around)" . to_vector . should_equal [2, 3, 1]
+        group_builder.specify "Positive n shifts the values up (n=2)" <|
+            r = t.offset ["A"] 2 ..Wrap_Around
+            r . at "offset([A], 2, Fill_With.Wrap_Around)" . to_vector . should_equal [3, 1, 2]
+        group_builder.specify "Zero n is a no-op" <|
+            r = t.offset ["A"] 0 ..Wrap_Around
+            r . at "offset([A], 0, Fill_With.Wrap_Around)" . to_vector . should_equal [1, 2, 3]
+        group_builder.specify "Larger than num rows negative n values work" <|
+            r = t.offset ["A"] -4 ..Wrap_Around
+            r . at "offset([A], -4, Fill_With.Wrap_Around)" . to_vector . should_equal [3, 1, 2]
+        group_builder.specify "Larger than num rows positive n values work" <|
+            r = t.offset ["A"] 4 ..Wrap_Around
+            r . at "offset([A], 4, Fill_With.Wrap_Around)" . to_vector . should_equal [2, 3, 1]
+        group_builder.specify "Large negative n values work" <|
+            r = t.offset ["A"] -1024 ..Wrap_Around
+            r . at "offset([A], -1024, Fill_With.Wrap_Around)" . to_vector . should_equal [3, 1, 2]
+        group_builder.specify "Large positive n values work" <|
+            r = t.offset ["A"] 1024 ..Wrap_Around
+            r . at "offset([A], 1024, Fill_With.Wrap_Around)" . to_vector . should_equal [2, 3, 1]
+        group_builder.specify "Works with zero rows" <|
+            r = t.take 0 . offset ["A"] -1 ..Wrap_Around
+            r . at "offset([A], -1, Fill_With.Wrap_Around)" . to_vector . should_equal []
+        group_builder.specify "Works with negative n and column of nothings" <|
+            r = t.offset ["B"] -1 ..Wrap_Around
+            r . at "offset([B], -1, Fill_With.Wrap_Around)" . to_vector . should_equal [Nothing, Nothing, Nothing]
+        group_builder.specify "Works with positive n and column of nothings" <|
+            r = t.offset ["B"] 1 ..Wrap_Around
+            r . at "offset([B], 1, Fill_With.Wrap_Around)" . to_vector . should_equal [Nothing, Nothing, Nothing]
+    suite_builder.group prefix+"Table.Offset works with grouping - default fill strategy" group_builder->
+        t2 = build_sorted_table [["Group", ["A", "A", "A", "B", "B", "B", "B", "C", "C"]], ["Col", [1, 2, 3, 1, 2, 3, 4, 1, 2]]]
+        group_builder.specify "Negative n shifts the values down" <|
+            r = t2.offset ["Col"] -1 ..Nothing group_by=["Group"]
+            r . at "offset([Col], -1, Fill_With.Nothing)" .  to_vector . should_equal [Nothing, 1, 2, Nothing, 1, 2, 3, Nothing, 1]
+        group_builder.specify "Positive n shifts the values up" <|
+            r = t2.offset ["Col"] 1 ..Nothing group_by=["Group"]
+            r . at "offset([Col], 1, Fill_With.Nothing)" . to_vector . should_equal [2, 3, Nothing, 2, 3, 4, Nothing, 2, Nothing]
+        group_builder.specify "Negative n shifts the values down (n=2)" <|
+            r = t2.offset ["Col"] -2 ..Nothing group_by=["Group"]
+            r . at "offset([Col], -2, Fill_With.Nothing)" . to_vector . should_equal [Nothing, Nothing, 1, Nothing, Nothing, 1, 2, Nothing, Nothing]
+        group_builder.specify "Positive n shifts the values up (n=2)" <|
+            r = t2.offset ["Col"] 2 ..Nothing group_by=["Group"]
+            r . at "offset([Col], 2, Fill_With.Nothing)" . to_vector . should_equal [3, Nothing, Nothing, 3, 4, Nothing, Nothing, Nothing, Nothing]
+        group_builder.specify "Zero n is a no-op" <|
+            r = t2.offset ["Col"] 0 ..Nothing group_by=["Group"]
+            r . at "offset([Col], 0, Fill_With.Nothing)" . to_vector . should_equal [1, 2, 3, 1, 2, 3, 4, 1, 2]
+        group_builder.specify "Large negative n values work" <|
+            r = t2.offset ["Col"] -1024 ..Nothing group_by=["Group"]
+            r . at "offset([Col], -1024, Fill_With.Nothing)" . to_vector . should_equal [Nothing, Nothing, Nothing, Nothing, Nothing, Nothing, Nothing, Nothing, Nothing]
+        group_builder.specify "Large positive n values work" <|
+            r = t2.offset ["Col"] 1024 ..Nothing group_by=["Group"]
+            r . at "offset([Col], 1024, Fill_With.Nothing)" . to_vector . should_equal [Nothing, Nothing, Nothing, Nothing, Nothing, Nothing, Nothing, Nothing, Nothing]
+    suite_builder.group prefix+"Table.Offset works with grouping - closest fill strategy" group_builder->
+        t2 = build_sorted_table [["Group", ["A", "A", "A", "B", "B", "B", "B", "C", "C"]], ["Col", [1, 2, 3, 1, 2, 3, 4, 1, 2]]]
+        group_builder.specify "Negative n shifts the values down" <|
+            r = t2.offset ["Col"] -1 ..Closest_Value group_by=["Group"]
+            r . at "offset([Col], -1, Fill_With.Closest_Value)" .  to_vector . should_equal [1, 1, 2, 1, 1, 2, 3, 1, 1]
+        group_builder.specify "Positive n shifts the values up" <|
+            r = t2.offset ["Col"] 1 ..Closest_Value group_by=["Group"]
+            r . at "offset([Col], 1, Fill_With.Closest_Value)" . to_vector . should_equal [2, 3, 3, 2, 3, 4, 4, 2, 2]
+        group_builder.specify "Negative n shifts the values down (n=2)" <|
+            r = t2.offset ["Col"] -2 ..Closest_Value group_by=["Group"]
+            r . at "offset([Col], -2, Fill_With.Closest_Value)" . to_vector . should_equal [1, 1, 1, 1, 1, 1, 2, 1, 1]
+        group_builder.specify "Positive n shifts the values up (n=2)" <|
+            r = t2.offset ["Col"] 2 ..Closest_Value group_by=["Group"]
+            r . at "offset([Col], 2, Fill_With.Closest_Value)" . to_vector . should_equal [3, 3, 3, 3, 4, 4, 4, 2, 2]
+        group_builder.specify "Zero n is a no-op" <|
+            r = t2.offset ["Col"] 0 ..Closest_Value group_by=["Group"]
+            r . at "offset([Col], 0, Fill_With.Closest_Value)" . to_vector . should_equal [1, 2, 3, 1, 2, 3, 4, 1, 2]
+        group_builder.specify "Large negative n values work" <|
+            r = t2.offset ["Col"] -1024 ..Closest_Value group_by=["Group"]
+            r . at "offset([Col], -1024, Fill_With.Closest_Value)" . to_vector . should_equal [1, 1, 1, 1, 1, 1, 1, 1, 1]
+        group_builder.specify "Large positive n values work" <|
+            r = t2.offset ["Col"] 1024 ..Closest_Value group_by=["Group"]
+            r . at "offset([Col], 1024, Fill_With.Closest_Value)" . to_vector . should_equal [3, 3, 3, 4, 4, 4, 4, 2, 2]
+    suite_builder.group prefix+"Table.Offset works with grouping - wrap around fill strategy" group_builder->
+        t2 = build_sorted_table [["Group", ["A", "A", "A", "B", "B", "B", "B", "C", "C"]], ["Col", [1, 2, 3, 1, 2, 3, 4, 1, 2]]]
+        group_builder.specify "Negative n shifts the values down" <|
+            r = t2.offset ["Col"] -1 ..Wrap_Around group_by=["Group"]
+            r . at "offset([Col], -1, Fill_With.Wrap_Around)" .  to_vector . should_equal [3, 1, 2, 4, 1, 2, 3, 2, 1]
+        group_builder.specify "Positive n shifts the values up" <|
+            r = t2.offset ["Col"] 1 ..Wrap_Around group_by=["Group"]
+            r . at "offset([Col], 1, Fill_With.Wrap_Around)" . to_vector . should_equal [2, 3, 1, 2, 3, 4, 1, 2, 1]
+        group_builder.specify "Negative n shifts the values down (n=2)" <|
+            r = t2.offset ["Col"] -2 ..Wrap_Around group_by=["Group"]
+            r . at "offset([Col], -2, Fill_With.Wrap_Around)" . to_vector . should_equal [2, 3, 1, 3, 4, 1, 2, 1, 2]
+        group_builder.specify "Positive n shifts the values up (n=2)" <|
+            r = t2.offset ["Col"] 2 ..Wrap_Around group_by=["Group"]
+            r . at "offset([Col], 2, Fill_With.Wrap_Around)" . to_vector . should_equal [3, 1, 2, 3, 4, 1, 2, 1, 2]
+        group_builder.specify "Zero n is a no-op" <|
+            r = t2.offset ["Col"] 0 ..Wrap_Around group_by=["Group"]
+            r . at "offset([Col], 0, Fill_With.Wrap_Around)" . to_vector . should_equal [1, 2, 3, 1, 2, 3, 4, 1, 2]
+        group_builder.specify "Large negative n values work" <|
+            r = t2.offset ["Col"] -1022 ..Wrap_Around group_by=["Group"]
+            r . at "offset([Col], -1022, Fill_With.Wrap_Around)" . to_vector . should_equal [2, 3, 1, 3, 4, 1, 2, 1, 2]
+        group_builder.specify "Large positive n values work" <|
+            r = t2.offset ["Col"] 1022 ..Wrap_Around group_by=["Group"]
+            r . at "offset([Col], 1022, Fill_With.Wrap_Around)" . to_vector . should_equal [3, 1, 2, 3, 4, 1, 2, 1, 2]
+    suite_builder.group prefix+"Table.Offset works with ordering - default fill strategy" group_builder->
+        t2 = build_sorted_table [["Order", [1, 4, 2, 5, 3]], ["Col", ["A", "D", "B", "E", "C"]]]
+        group_builder.specify "Negative n shifts the values down" <|
+            r = t2.offset ["Col"] -1 ..Nothing order_by=["Order"]
+            r . at "offset([Col], -1, Fill_With.Nothing)" .  to_vector . should_equal [Nothing, "C", "A", "D", "B"]
+        group_builder.specify "Positive n shifts the values up" <|
+            r = t2.offset ["Col"] 1 ..Nothing order_by=["Order"]
+            r . at "offset([Col], 1, Fill_With.Nothing)" . to_vector . should_equal ["B", "E", "C", Nothing, "D"]
+        group_builder.specify "Negative n shifts the values down (n=2)" <|
+            r = t2.offset ["Col"] -2 ..Nothing order_by=["Order"]
+            r . at "offset([Col], -2, Fill_With.Nothing)" . to_vector . should_equal [Nothing, "B", Nothing, "C", "A"]
+        group_builder.specify "Positive n shifts the values up (n=2)" <|
+            r = t2.offset ["Col"] 2 ..Nothing order_by=["Order"]
+            r . at "offset([Col], 2, Fill_With.Nothing)" . to_vector . should_equal ["C", Nothing, "D", Nothing, "E"]
+        group_builder.specify "Zero n is a no-op" <|
+            r = t2.offset ["Col"] 0 ..Nothing order_by=["Order"]
+            r . at "offset([Col], 0, Fill_With.Nothing)" . to_vector . should_equal ["A", "D", "B", "E", "C"]
+        group_builder.specify "Large negative n values work" <|
+            r = t2.offset ["Col"] -1024 ..Nothing order_by=["Order"]
+            r . at "offset([Col], -1024, Fill_With.Nothing)" . to_vector . should_equal [Nothing, Nothing, Nothing, Nothing, Nothing]
+        group_builder.specify "Large positive n values work" <|
+            r = t2.offset ["Col"] 1024 ..Nothing order_by=["Order"]
+            r . at "offset([Col], 1024, Fill_With.Nothing)" . to_vector . should_equal [Nothing, Nothing, Nothing, Nothing, Nothing]
+    suite_builder.group prefix+"Table.Offset works with ordering - closest fill strategy" group_builder->
+        t2 = build_sorted_table [["Order", [1, 4, 2, 5, 3]], ["Col", ["A", "D", "B", "E", "C"]]]
+        group_builder.specify "Negative n shifts the values down" <|
+            r = t2.offset ["Col"] -1 ..Closest_Value order_by=["Order"]
+            r . at "offset([Col], -1, Fill_With.Closest_Value)" .  to_vector . should_equal ["A", "C", "A", "D", "B"]
+        group_builder.specify "Positive n shifts the values up" <|
+            r = t2.offset ["Col"] 1 ..Closest_Value order_by=["Order"]
+            r . at "offset([Col], 1, Fill_With.Closest_Value)" . to_vector . should_equal ["B", "E", "C", "E", "D"]
+        group_builder.specify "Negative n shifts the values down (n=2)" <|
+            r = t2.offset ["Col"] -2 ..Closest_Value order_by=["Order"]
+            r . at "offset([Col], -2, Fill_With.Closest_Value)" . to_vector . should_equal ["A", "B", "A", "C", "A"]
+        group_builder.specify "Positive n shifts the values up (n=2)" <|
+            r = t2.offset ["Col"] 2 ..Closest_Value order_by=["Order"]
+            r . at "offset([Col], 2, Fill_With.Closest_Value)" . to_vector . should_equal ["C", "E", "D", "E", "E"]
+        group_builder.specify "Zero n is a no-op" <|
+            r = t2.offset ["Col"] 0 ..Closest_Value order_by=["Order"]
+            r . at "offset([Col], 0, Fill_With.Closest_Value)" . to_vector . should_equal ["A", "D", "B", "E", "C"]
+        group_builder.specify "Large negative n values work" <|
+            r = t2.offset ["Col"] -1024 ..Closest_Value order_by=["Order"]
+            r . at "offset([Col], -1024, Fill_With.Closest_Value)" . to_vector . should_equal ["A", "A", "A", "A", "A"]
+        group_builder.specify "Large positive n values work" <|
+            r = t2.offset ["Col"] 1024 ..Closest_Value order_by=["Order"]
+            r . at "offset([Col], 1024, Fill_With.Closest_Value)" . to_vector . should_equal ["E", "E", "E", "E", "E"]
+    suite_builder.group prefix+"Table.Offset works with ordering - wrap around fill strategy" group_builder->
+        t2 = build_sorted_table [["Order", [1, 4, 2, 5, 3]], ["Col", ["A", "D", "B", "E", "C"]]]
+        group_builder.specify "Negative n shifts the values down" <|
+            r = t2.offset ["Col"] -1 ..Wrap_Around order_by=["Order"]
+            r . at "offset([Col], -1, Fill_With.Wrap_Around)" .  to_vector . should_equal ["E", "C", "A", "D", "B"]
+        group_builder.specify "Positive n shifts the values up" <|
+            r = t2.offset ["Col"] 1 ..Wrap_Around order_by=["Order"]
+            r . at "offset([Col], 1, Fill_With.Wrap_Around)" . to_vector . should_equal ["B", "E", "C", "A", "D"]
+        group_builder.specify "Negative n shifts the values down (n=2)" <|
+            r = t2.offset ["Col"] -2 ..Wrap_Around order_by=["Order"]
+            r . at "offset([Col], -2, Fill_With.Wrap_Around)" . to_vector . should_equal ["D", "B", "E", "C", "A"]
+        group_builder.specify "Positive n shifts the values up (n=2)" <|
+            r = t2.offset ["Col"] 2 ..Wrap_Around order_by=["Order"]
+            r . at "offset([Col], 2, Fill_With.Wrap_Around)" . to_vector . should_equal ["C", "A", "D", "B", "E"]
+        group_builder.specify "Zero n is a no-op" <|
+            r = t2.offset ["Col"] 0 ..Wrap_Around order_by=["Order"]
+            r . at "offset([Col], 0, Fill_With.Wrap_Around)" . to_vector . should_equal ["A", "D", "B", "E", "C"]
+        group_builder.specify "Large negative n values work" <|
+            r = t2.offset ["Col"] -1024 ..Wrap_Around order_by=["Order"]
+            r . at "offset([Col], -1024, Fill_With.Wrap_Around)" . to_vector . should_equal ["B", "E", "C", "A", "D"]
+        group_builder.specify "Large positive n values work" <|
+            r = t2.offset ["Col"] 1024 ..Wrap_Around order_by=["Order"]
+            r . at "offset([Col], 1024, Fill_With.Wrap_Around)" . to_vector . should_equal ["E", "C", "A", "D", "B"]
+    suite_builder.group prefix+"Table.Offset works with multiple columns" group_builder->
+        t2 = build_sorted_table [["Col1", ["A", "B", "C", "D"]], ["Col2", [1, 2, 3, 4]]]
+        group_builder.specify "Negative n shifts the values down" <|
+            r = t2.offset ["Col1", "Col2"] -1 ..Nothing
+            r . at "offset([Col1], -1, Fill_With.Nothing)" .  to_vector . should_equal [Nothing, "A", "B", "C"]
+            r . at "offset([Col2], -1, Fill_With.Nothing)" .  to_vector . should_equal [Nothing, 1, 2, 3]
+        group_builder.specify "Positive n shifts the values up" <|
+            r = t2.offset ["Col1", "Col2"] 1 ..Nothing
+            r . at "offset([Col1], 1, Fill_With.Nothing)" .  to_vector . should_equal ["B", "C", "D", Nothing]
+            r . at "offset([Col2], 1, Fill_With.Nothing)" .  to_vector . should_equal [2, 3, 4, Nothing]
+        group_builder.specify "Negative n shifts the values down (n=2)" <|
+            r = t2.offset ["Col1", "Col2"] -2 ..Nothing
+            r . at "offset([Col1], -2, Fill_With.Nothing)" .  to_vector . should_equal [Nothing, Nothing, "A", "B"]
+            r . at "offset([Col2], -2, Fill_With.Nothing)" .  to_vector . should_equal [Nothing, Nothing, 1, 2]
+        group_builder.specify "Positive n shifts the values up (n=2)" <|
+            r = t2.offset ["Col1", "Col2"] 2 ..Nothing
+            r . at "offset([Col1], 2, Fill_With.Nothing)" .  to_vector . should_equal ["C", "D", Nothing, Nothing]
+            r . at "offset([Col2], 2, Fill_With.Nothing)" .  to_vector . should_equal [3, 4, Nothing, Nothing]
+        group_builder.specify "Zero n is a no-op" <|
+            r = t2.offset ["Col1", "Col2"] 0 ..Nothing
+            r . at "offset([Col1], 0, Fill_With.Nothing)" .  to_vector . should_equal ["A", "B", "C", "D"]
+            r . at "offset([Col2], 0, Fill_With.Nothing)" .  to_vector . should_equal [1, 2, 3, 4]
+        group_builder.specify "Large negative n values work" <|
+            r = t2.offset ["Col1", "Col2"] -1024 ..Nothing
+            r . at "offset([Col1], -1024, Fill_With.Nothing)" .  to_vector . should_equal [Nothing, Nothing, Nothing, Nothing]
+            r . at "offset([Col2], -1024, Fill_With.Nothing)" .  to_vector . should_equal [Nothing, Nothing, Nothing, Nothing]
+        group_builder.specify "Large positive n values work" <|
+            r = t2.offset ["Col1", "Col2"] 1024 ..Nothing
+            r . at "offset([Col1], 1024, Fill_With.Nothing)" .  to_vector . should_equal [Nothing, Nothing, Nothing, Nothing]
+            r . at "offset([Col2], 1024, Fill_With.Nothing)" .  to_vector . should_equal [Nothing, Nothing, Nothing, Nothing]
+    suite_builder.group prefix+"Table.Offset works with multiple columns - updating in place" group_builder->
+        t2 = build_sorted_table [["Col1", ["A", "B", "C", "D"]], ["Col2", [1, 2, 3, 4]]]
+        group_builder.specify "Negative n shifts the values down" <|
+            r = t2.offset ["Col1", "Col2"] -1 ..Nothing set_mode=..Update
+            r . at "Col1" .  to_vector . should_equal [Nothing, "A", "B", "C"]
+            r . at "Col2" .  to_vector . should_equal [Nothing, 1, 2, 3]
+        group_builder.specify "Positive n shifts the values up" <|
+            r = t2.offset ["Col1", "Col2"] 1 ..Nothing set_mode=..Update
+            r . at "Col1" .  to_vector . should_equal ["B", "C", "D", Nothing]
+            r . at "Col2" .  to_vector . should_equal [2, 3, 4, Nothing]
+        group_builder.specify "Negative n shifts the values down (n=2)" <|
+            r = t2.offset ["Col1", "Col2"] -2 ..Nothing set_mode=..Update
+            r . at "Col1" .  to_vector . should_equal [Nothing, Nothing, "A", "B"]
+            r . at "Col2" .  to_vector . should_equal [Nothing, Nothing, 1, 2]
+        group_builder.specify "Positive n shifts the values up (n=2)" <|
+            r = t2.offset ["Col1", "Col2"] 2 ..Nothing set_mode=..Update
+            r . at "Col1" .  to_vector . should_equal ["C", "D", Nothing, Nothing]
+            r . at "Col2" .  to_vector . should_equal [3, 4, Nothing, Nothing]
+        group_builder.specify "Zero n is a no-op" <|
+            r = t2.offset ["Col1", "Col2"] 0 ..Nothing set_mode=..Update
+            r . at "Col1" .  to_vector . should_equal ["A", "B", "C", "D"]
+            r . at "Col2" .  to_vector . should_equal [1, 2, 3, 4]
+        group_builder.specify "Large negative n values work" <|
+            r = t2.offset ["Col1", "Col2"] -1024 ..Nothing set_mode=..Update
+            r . at "Col1" .  to_vector . should_equal [Nothing, Nothing, Nothing, Nothing]
+            r . at "Col2" .  to_vector . should_equal [Nothing, Nothing, Nothing, Nothing]
+        group_builder.specify "Large positive n values work" <|
+            r = t2.offset ["Col1", "Col2"] 1024 ..Nothing set_mode=..Update
+            r . at "Col1" .  to_vector . should_equal [Nothing, Nothing, Nothing, Nothing]
+            r . at "Col2" .  to_vector . should_equal [Nothing, Nothing, Nothing, Nothing]
+        group_builder.specify "Add_Or_Update equivalent to update" <|
+            r = t2.offset ["Col1", "Col2"] -1 ..Nothing set_mode=..Add_Or_Update
+            r . at "Col1" .  to_vector . should_equal [Nothing, "A", "B", "C"]
+            r . at "Col2" .  to_vector . should_equal [Nothing, 1, 2, 3]
+    suite_builder.group prefix+"Table.Offset handles bad inputs gracefully" group_builder->
+        t2 = build_sorted_table [["Col1", ["A", "B", "C", "D"]], ["Col2", [1, 2, 3, 4]]]
+        t3 = build_sorted_table [["Group", [1.1, 1.1, 1.1, 1.1]], ["Col2", [1, 2, 3, 4]]]
+        group_builder.specify "Missing offset columns error" <|
+            r = t2.offset
+            r.should_fail_with (Missing_Argument.Error "columns")
+        group_builder.specify "Empty offset columns is a no-op" <|
+            r = t2.offset []
+            r . at "Col1" .  to_vector . should_equal ["A", "B", "C", "D"]
+            r . at "Col2" .  to_vector . should_equal [1, 2, 3, 4]
+        group_builder.specify "Missing column is an error" <|
+            r = t2.offset ["NotAColumn"]
+            r.should_fail_with (Missing_Input_Columns.Error ["NotAColumn"])
+        group_builder.specify "Missing column is an error - grouping" <|
+            r = t2.offset [] group_by=["NotAColumn"]
+            r.should_fail_with (Missing_Input_Columns.Error ["NotAColumn"])
+        group_builder.specify "Missing column is an error - ordering" <|
+            r = t2.offset [] order_by=["NotAColumn"]
+            r.should_fail_with (Missing_Input_Columns.Error ["NotAColumn"])
+        group_builder.specify "Grouping by float warns" <|
+            r = t3.offset ["Col2"] group_by=["Group"]
+            Problems.expect_warning Floating_Point_Equality r
+            r . at "offset([Col2], -1, Fill_With.Nothing)" .  to_vector . should_equal [Nothing, 1, 2, 3]
+        group_builder.specify "Grouping by float errors if on_problems set" <|
+            r = t3.offset ["Col2"] group_by=["Group"] on_problems=..Report_Error
+            r.should_fail_with Floating_Point_Equality
+        group_builder.specify "Grouping by float errors can be silenced using on_problems" <|
+            r = t3.offset ["Col2"] group_by=["Group"] on_problems=..Ignore
+            Warning.get_all r wrap_errors=True . should_equal []
+            r . at "offset([Col2], -1, Fill_With.Nothing)" .  to_vector . should_equal [Nothing, 1, 2, 3]
+        
+
+