millionco · ben-million · Mar 9, 2026 · Mar 9, 2026
diff --git a/.changeset/giant-pets-glow.md b/.changeset/giant-pets-glow.md
@@ -0,0 +1,13 @@
+---
+"@ben-million/tweaker": minor
+---
+
+Simplify Tweaker into a drag-only DOM repositioning tool.
+
+Remove the old gray-scale and style-tweaking workflow in favor of:
+
+- toggling Tweaker on and off
+- dragging page elements to preview DOM moves
+- pressing Enter to copy a position-only prompt
+
+This also removes the old color-centric public API and exports, including the gray-scale helpers and related props.
diff --git a/README.md b/README.md
@@ -1,19 +1,19 @@
 # tweaker
 
-A dev tool for tweaking colors along gray scales in React apps. Pick any element, adjust its color along a gray scale, then copy the result as an AI-ready prompt.
+A dev tool for dragging page elements and turning the result into an AI-ready DOM repositioning prompt.
 
 ## Install
 
 ```bash
-npm install tweaker
+npm install @ben-million/tweaker
 ```
 
 ## Usage
 
 Add the `<Tweaker />` component to your app layout, ideally only in development:
 
 ```tsx
-import { Tweaker } from "tweaker";
+import { Tweaker } from "@ben-million/tweaker";
 
 const App = () => (
   <>
@@ -23,65 +23,42 @@ const App = () => (
 );
 ```
 
-### With a specific scale
-
-```tsx
-<Tweaker activeScale="slate" />
-```
-
-### With custom scales
-
-```tsx
-import { Tweaker } from "tweaker";
-import type { GrayScale } from "tweaker";
-
-const customScales: Record<string, GrayScale> = {
-  brand: {
-    label: "Brand",
-    shades: {
-      "50": "oklch(0.985 0.003 250)",
-      "100": "oklch(0.968 0.006 250)",
-      // ... 200-950
-    },
-  },
-};
-
-<Tweaker scales={customScales} activeScale="brand" />;
-```
-
 ## Keybinds
 
-| Key         | Action                                                 |
-| ----------- | ------------------------------------------------------ |
-| `T`         | Enter picking mode                                     |
-| `B`         | Switch to background color                             |
-| `F`         | Switch to text (foreground) color                      |
-| `D`         | Switch to border color                                 |
-| `Space`     | Persist current change, copy prompt, pick next element |
-| `Escape`    | Copy prompt, restore all changes, and exit             |
-| `0-9` / `.` | Type a value directly (0–10 scale)                     |
+| Key      | Action                                     |
+| -------- | ------------------------------------------ |
+| `T`      | Toggle Tweaker on or off                   |
+| `Enter`  | Copy the current DOM repositioning prompt  |
+| `Escape` | Restore all previews, clear state, and off |
 
 ## Workflow
 
-1. Press `T` or click the pill to start picking
-2. Click an element — its color is detected and mapped to the gray scale
-3. Move your mouse up/down to adjust the shade (vertical slider)
-4. Press `B`, `F`, or `D` to switch between background, text, or border
-5. Press `Space` to persist and pick the next element (cumulative prompt)
-6. Press `Escape` to copy the full prompt and reset
+1. Toggle Tweaker on with `T` or the pill in the bottom-left corner
+2. Drag any element on the page to preview its new position
+3. Repeat for as many elements as you want
+4. Press `Enter` to copy a prompt that only describes DOM order and spacing changes
+5. Press `Escape` or toggle Tweaker off to restore all previews and clear the session
 
 The copied prompt is formatted for AI coding agents:
 
 ```
-Change the following colors using the design system's gray scale:
+Reposition the following dragged elements within their current parent in the DOM.
+Do not use CSS transforms in the final implementation — reorder the JSX and adjust spacing instead.
 
-- background color of div.card ("Settings") → Slate 200 (oklch(0.929 0.013 255.5))
-- text color of p.description ("Configure your...") → Slate 600 (oklch(0.446 0.043 257.3))
-```
+- <Card> div.card ("Settings")
+  Source: src/components/card.tsx
+  Parent: <SettingsPanel> div.stack (flex, column, gap: 16px)
+  Drag preview: x=0px, y=-48px
+  Move from child #3 to child #1 (of 4)
 
-## Built-in scales
+  Neighbors at target position:
+    Below: button.primary ("Save") — 16px gap
 
-Neutral, Slate, Gray, Zinc, Stone, Mauve, Olive — matching Tailwind CSS v4 gray palettes.
+  Current element margins: top=0px, bottom=0px
+
+  → Re-order this element in the JSX to be child #1 of its parent.
+  → The gaps match the parent's gap (16px) — no extra margins needed.
+```
 
 ## License
 

diff --git a/packages/tweaker/package.json b/packages/tweaker/package.json
@@ -1,12 +1,13 @@
 {
   "name": "@ben-million/tweaker",
   "version": "0.9.2",
-  "description": "A dev tool for tweaking colors along gray scales in React apps",
+  "description": "A dev tool for dragging page elements and generating DOM repositioning prompts",
   "keywords": [
-    "color",
-    "design-system",
     "dev-tools",
-    "gray-scale",
+    "dom",
+    "drag-and-drop",
+    "layout",
+    "prompt",
     "react"
   ],
   "homepage": "https://github.com/millionco/tweaker#readme",
@@ -33,14 +34,15 @@
   "scripts": {
     "dev": "tsdown --watch",
     "build": "rm -rf dist && NODE_ENV=production tsdown",
+    "test": "vitest run --environment jsdom",
     "typecheck": "tsc --noEmit"
   },
-  "dependencies": {
-    "motion": "^12.0.0"
-  },
   "devDependencies": {
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "jsdom": "^28.1.0",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
     "tsdown": "^0.20.3"
   },
   "peerDependencies": {

diff --git a/packages/tweaker/src/constants.ts b/packages/tweaker/src/constants.ts
@@ -1,27 +1,13 @@
-export const SLIDER_MAX = 10;
 export const TEXT_PREVIEW_MAX_LENGTH = 30;
-export const TYPING_RESET_DELAY_MS = 1500;
-export const SHADE_KEYS = [
-  "50",
-  "100",
-  "200",
-  "300",
-  "400",
-  "500",
-  "600",
-  "700",
-  "800",
-  "900",
-  "950",
-];
-export const FONT_SIZE_MIN_PX = 1;
-export const FONT_SIZE_MAX_PX = 200;
-export const PADDING_MIN_PX = -200;
-export const PADDING_MAX_PX = 200;
-export const MOUSE_COLOR_SENSITIVITY = 0.02;
-export const MOUSE_SIZE_SENSITIVITY = 0.1;
-export const MOUSE_PADDING_SENSITIVITY = 0.2;
-export const MINIMAP_WIDTH_PX = 160;
-export const MINIMAP_HEIGHT_PX = 100;
-export const THUMB_SIZE_PX = 10;
-export const DOM_TREE_MAX_NODES = 40;
+export const TWEAKER_OFFSET_PX = 16;
+export const TWEAKER_Z_INDEX = 9999;
+export const TWEAKER_BUTTON_GAP_PX = 8;
+export const TWEAKER_BUTTON_PADDING_X_PX = 12;
+export const TWEAKER_BUTTON_PADDING_Y_PX = 8;
+export const TWEAKER_BUTTON_BORDER_RADIUS_PX = 999;
+export const TWEAKER_BUTTON_FONT_SIZE_PX = 12;
+export const TWEAKER_STATUS_FONT_SIZE_PX = 11;
+export const TWEAKER_DRAG_THRESHOLD_PX = 3;
+export const TWEAKER_HOVER_OUTLINE_WIDTH_PX = 2;
+export const TWEAKER_HOVER_OUTLINE_OFFSET_PX = 2;
+export const TWEAKER_STATUS_RESET_DELAY_MS = 2000;
diff --git a/packages/tweaker/src/gray-scales.ts b/packages/tweaker/src/gray-scales.ts
diff --git a/packages/tweaker/src/index.tsx b/packages/tweaker/src/index.tsx
@@ -1,3 +1,2 @@
 export { Tweaker } from "./tweaker";
-export { GRAY_SCALES } from "./gray-scales";
-export type { TweakerProps, GrayScale } from "./types";
+export type { TweakerProps } from "./types";