diff --git a/packages/react/components/Editor/components/MovablePattern.mjs b/packages/react/components/Editor/components/MovablePattern.mjs
new file mode 100644
index 00000000000..3bc7046493a
--- /dev/null
+++ b/packages/react/components/Editor/components/MovablePattern.mjs
@@ -0,0 +1,370 @@
+import React, { useRef } from 'react'
+import { PanZoomPattern } from 'shared/components/workbench/pan-zoom-pattern.mjs'
+import { MovableStack } from './stack.mjs'
+
+export const MovablePattern = ({
+ renderProps,
+ showButtons = true,
+ update,
+ fitImmovable = false,
+ immovable = [],
+ layoutPath,
+}) => {
+ const svgRef = useRef(null)
+ if (!renderProps) return null
+
+ // keep a fresh copy of the layout because we might manipulate it without saving to the gist
+ let layout =
+ renderProps.settings[0].layout === true
+ ? {
+ ...renderProps.autoLayout,
+ width: renderProps.width,
+ height: renderProps.height,
+ }
+ : renderProps.settings[0].layout
+
+ // Helper method to update part layout and re-calculate width * height
+ const updateLayout = (name, config, history = true) => {
+ // Start creating new layout
+ const newLayout = { ...layout }
+ newLayout.stacks[name] = config
+
+ // Pattern topLeft and bottomRight
+ let topLeft = { x: 0, y: 0 }
+ let bottomRight = { x: 0, y: 0 }
+ for (const pname in renderProps.stacks) {
+ if (immovable.includes(pname) && !fitImmovable) continue
+ let partLayout = newLayout.stacks[pname]
+
+ // Pages part does not have its topLeft and bottomRight set by core since it's added post-draft
+ if (partLayout?.tl) {
+ // set the pattern extremes
+ topLeft.x = Math.min(topLeft.x, partLayout.tl.x)
+ topLeft.y = Math.min(topLeft.y, partLayout.tl.y)
+ bottomRight.x = Math.max(bottomRight.x, partLayout.br.x)
+ bottomRight.y = Math.max(bottomRight.y, partLayout.br.y)
+ }
+ }
+
+ newLayout.width = bottomRight.x - topLeft.x
+ newLayout.height = bottomRight.y - topLeft.y
+ newLayout.bottomRight = bottomRight
+ newLayout.topLeft = topLeft
+
+ if (history) {
+ update.ui(layoutPath, newLayout)
+ } else {
+ // we don't put it in the gist if it shouldn't contribute to history because we need some of the data calculated here for rendering purposes on the initial layout, but we don't want to actually save a layout until the user manipulates it. This is what allows the layout to respond appropriately to settings changes. Once the user has starting playing with the layout, all bets are off
+ layout = newLayout
+ }
+ }
+
+ const sortedStacks = {}
+ Object.keys(renderProps.stacks)
+ .sort((a, b) => {
+ const hasA = immovable.includes(a)
+ const hasB = immovable.includes(b)
+ if (hasA && !hasB) return -1
+ if (!hasA && hasB) return 1
+ return 0
+ })
+ .forEach((s) => (sortedStacks[s] = renderProps.stacks[s]))
+
+ const sortedRenderProps = { ...renderProps, stacks: sortedStacks }
+
+ const Stack = ({ stackName, stack, settings, components, t }) => (
+
+ )
+
+ return (
+
+ )
+}
+
+/*
+ * This React component is a long way from perfect, but it's a start for
+ * handling custom layouts.
+ *
+ * There are a few reasons that (at least in my opinion) implementing this is non-trivial:
+ *
+ * 1) React re-render vs DOM updates
+ *
+ * For performance reasons, we can't re-render with React when the user drags a
+ * pattern part (or rotates it). It would kill performance.
+ * So, we don't re-render with React upon dragging/rotating, but instead manipulate
+ * the DOM directly.
+ *
+ * So far so good, but of course we don't want a pattern that's only correctly laid
+ * out in the DOM. We want to update the pattern gist so that the new layout is stored.
+ * For this, we re-render with React on the end of the drag (or rotate).
+ *
+ * Handling this balance between DOM updates and React re-renders is a first contributing
+ * factor to why this component is non-trivial
+ *
+ * 2) SVG vs DOM coordinates
+ *
+ * When we drag or rotate with the mouse, all the events are giving us coordinates of
+ * where the mouse is in the DOM.
+ *
+ * The layout uses coordinates from the embedded SVG which are completely different.
+ *
+ * We run `getScreenCTM().inverse()` on the svg element to pass to
+ * `matrixTransform` on a `DOMPointReadOnly` for dom to svg space
+ * conversions.
+ *
+ * 3) Part-level transforms
+ *
+ * All parts use their center as the transform-origin to simplify
+ * transforms, especially flipping and rotating.
+ *
+ * 4) Bounding box
+ *
+ * We use `getBoundingClientRect` rather than `getBBox` because it provides
+ * more data and factors in the transforms. We then use our `domToSvg`
+ * function to move the points back into the SVG space.
+ */
+//import { useRef, useState, useEffect, useCallback } from 'react'
+//import { generateStackTransform, getTransformedBounds } from '@freesewing/core'
+//import { getProps } from 'pkgs/react-components/src/pattern/utils.mjs'
+//import { angle } from '../utils.mjs'
+//import { drag } from 'd3-drag'
+//import { select } from 'd3-selection'
+//import { Buttons } from './transform-buttons.mjs'
+
+export const MovableStack = ({
+ stackName,
+ stack,
+ components,
+ t,
+ movable = true,
+ layout,
+ updateLayout,
+ showButtons,
+ settings,
+}) => {
+ const stackExists = !movable || typeof layout?.move?.x !== 'undefined'
+
+ // Use a ref for direct DOM manipulation
+ const stackRef = useRef(null)
+ const innerRef = useRef(null)
+
+ // State variable to switch between moving or rotating the part
+ const [rotate, setRotate] = useState(false)
+
+ // This is kept as state to avoid re-rendering on drag, which would kill performance
+ // It's a bit of an anti-pattern, but we'll directly manipulate the properties instead of updating the state
+ // Managing the difference between re-render and direct DOM updates makes this
+ // whole thing a bit tricky to wrap your head around
+ const stackRotation = layout?.rotate || 0
+ const [liveTransforms] = useState({
+ translateX: layout?.move.x,
+ translateY: layout?.move.y,
+ rotation: stackRotation,
+ flipX: !!layout?.flipX,
+ flipY: !!layout?.flipY,
+ })
+
+ const center = stack.topLeft && {
+ x: stack.topLeft.x + (stack.bottomRight.x - stack.topLeft.x) / 2,
+ y: stack.topLeft.y + (stack.bottomRight.y - stack.topLeft.y) / 2,
+ }
+
+ const setTransforms = useCallback(() => {
+ // get the transform attributes
+ const { translateX, translateY, rotation, flipX, flipY } = liveTransforms
+ const transforms = generateStackTransform(translateX, translateY, rotation, flipX, flipY, stack)
+
+ const me = select(stackRef.current)
+ me.attr('transform', transforms.join(' '))
+
+ return transforms
+ }, [liveTransforms, stackRef, stack])
+
+ /** update the layout either locally or in the gist */
+ const updateStacklayout = useCallback(
+ (history = true) => {
+ /** don't mess with what we don't lay out */
+ if (!stackRef.current || !movable) return
+
+ // set the transforms on the stack in order to calculate from the latest position
+ const transforms = setTransforms()
+
+ // apply the transforms to the bounding box to get the new extents of the stack
+ const { topLeft, bottomRight } = getTransformedBounds(stack, transforms)
+
+ // update it on the draft component
+ updateLayout(
+ stackName,
+ {
+ move: {
+ x: liveTransforms.translateX,
+ y: liveTransforms.translateY,
+ },
+ rotate: liveTransforms.rotation % 360,
+ flipX: liveTransforms.flipX,
+ flipY: liveTransforms.flipY,
+ tl: topLeft,
+ br: bottomRight,
+ },
+ history
+ )
+ },
+ [stackRef, setTransforms, updateLayout, liveTransforms, movable, stack, stackName]
+ )
+
+ // update the layout on mount
+ useEffect(() => {
+ // only update if there's a rendered part and it's not an imovable part
+ if (stackRef.current && movable) {
+ updateStacklayout(false)
+ }
+ }, [stackRef, movable, updateStacklayout])
+
+ /** reset the part's transforms */
+ const resetPart = () => {
+ liveTransforms.rotation = 0
+ liveTransforms.flipX = 0
+ liveTransforms.flipY = 0
+ updateStacklayout()
+ }
+
+ /** toggle between dragging and rotating */
+ const toggleDragRotate = () => {
+ // only respond if the part should be able to drag/rotate
+ if (!stackRef.current || !movable) {
+ return
+ }
+
+ setRotate(!rotate)
+ }
+
+ /** Method to flip (mirror) the part along the X or Y axis */
+ const flip = (axis) => {
+ if (axis === 'x') liveTransforms.flipX = !liveTransforms.flipX
+ else liveTransforms.flipY = !liveTransforms.flipY
+ updateStacklayout()
+ }
+
+ /** method to rotate 90 degrees */
+ const rotate90 = (direction = 1) => {
+ if (liveTransforms.flipX) direction *= -1
+ if (liveTransforms.flipY) direction *= -1
+
+ liveTransforms.rotation += 90 * direction
+
+ updateStacklayout()
+ }
+
+ /** get the delta rotation from the start of the drag event to now */
+ const getRotation = (event) =>
+ angle(center, event.subject) - angle(center, { x: event.x, y: event.y })
+
+ let didDrag = false
+ const handleDrag =
+ movable &&
+ drag()
+ // subject allows us to save data from the start of the event to use throughout event handing
+ .subject(function (event) {
+ return rotate
+ ? // if we're rotating, the subject is the mouse position
+ { x: event.x, y: event.y }
+ : // if we're moving, the subject is the part's x,y coordinates
+ { x: liveTransforms.translateX, y: liveTransforms.translateY }
+ })
+ .on('drag', function (event) {
+ if (!event.dx && !event.dy) return
+
+ if (rotate) {
+ let newRotation = getRotation(event)
+ // shift key to snap the rotation
+ if (event.sourceEvent.shiftKey) {
+ newRotation = Math.ceil(newRotation / 15) * 15
+ }
+ // reverse the rotation direction one time per flip. if we're flipped both directions, rotation will be positive again
+ if (liveTransforms.flipX) newRotation *= -1
+ if (liveTransforms.flipY) newRotation *= -1
+
+ liveTransforms.rotation = stackRotation + newRotation
+ } else {
+ liveTransforms.translateX = event.x
+ liveTransforms.translateY = event.y
+ }
+
+ // a drag happened, so we should update the layout when we're done
+ didDrag = true
+ setTransforms()
+ })
+ .on('end', function () {
+ // save to gist if anything actually changed
+ if (didDrag) updateStacklayout()
+
+ didDrag = false
+ })
+
+ // Initialize drag handler
+ useEffect(() => {
+ // don't drag the pages
+ if (!movable || !stackExists) return
+ handleDrag(select(stackRef.current))
+ }, [stackRef, movable, stackExists, handleDrag])
+
+ // // Don't just assume this makes sense
+ if (!stackExists) return null
+
+ const { Group, Part } = components
+ return (
+
+
+ {[...stack.parts].map((part, key) => (
+
+ ))}
+
+ {movable && (
+ <>
+
+ {showButtons ? (
+
+ ) : null}
+
+ )}
+
+ )
+}
diff --git a/packages/react/components/Editor/components/menus/Container.mjs b/packages/react/components/Editor/components/menus/Container.mjs
index d758cdc51ad..c095e84c0d1 100644
--- a/packages/react/components/Editor/components/menus/Container.mjs
+++ b/packages/react/components/Editor/components/menus/Container.mjs
@@ -106,11 +106,6 @@ export const MenuItem = ({
return (
<>
- {config.choiceTitles ? config.choiceTitles[current] : i18n?.en?.o?.[name]?.d}
-
- }
label={false}
id={config.name}
labelBR={