[GenAI] [DRAFT] Add a offset slider to modify the placement of the video

DEPOT_BUILD.md

@@ -0,0 +1,63 @@
+# Depot Build — cap-web
+
+Local Docker build of `apps/web` OOMs on Docker Desktop default RAM. Use Depot remote builder instead.
+
+## Prereqs
+
+- `depot` CLI installed (`brew install depot/tap/depot`)
+- `.env` with:
+  ```
+  export DEPOT_DEV_API_KEY=depot_org_...
+  export DEPOT_DEV_ORG_ID=..
+  export DEPOT_DEV_PROJECT_ID=...
+  ```
+
+## Build + load into local Docker
+
+```bash
+source .env
+DEPOT_TOKEN=$DEPOT_DEV_API_KEY \
+  depot build \
+    --project $DEPOT_DEV_PROJECT_ID \
+    -f apps/web/Dockerfile \
+    -t cap-web:local \
+    --load \
+    .
+```
+
+Flags:
+- `--project` — Depot project ID (org token alone insufficient).
+- `--load` — pull built image into local Docker daemon as `cap-web:local`.
+- Build context = repo root (Dockerfile does `COPY . .`).
+
+## Verify
+
+```bash
+docker images cap-web:local
+```
+
+## Use in compose
+
+`docker-compose.yml` references `cap-web:local`. Bring up:
+
+```bash
+docker compose up -d --force-recreate cap-web
+```
+
+## Push to registry (optional)
+
+```bash
+DEPOT_TOKEN=$DEPOT_DEV_API_KEY \
+  depot build \
+    --project $DEPOT_DEV_PROJECT_ID \
+    -f apps/web/Dockerfile \
+    -t ghcr.io/<org>/cap-web:<tag> \
+    --push \
+    .
+```
+
+## Notes
+
+- Org token (`depot_org_...`) works for `depot build` with `--project`. Does NOT work for `depot projects list` (user-scoped).
+- Local `docker build` fails: `ResourceExhausted: cannot allocate memory` during Next.js build. Bump Docker Desktop RAM to 12GB+ if you want local build.
+- `--no-cache` on `docker compose build` skips `cap-web` because compose entry uses `image:` not `build:`. Depot is the build path.

MR_TEST_REVIEW.md

@@ -0,0 +1,80 @@
+# MR Review — `crates/rendering/src/lib.rs` test changes
+
+Branch: `position-offset-field` vs `main`. Scope: tests in `mod tests` only.
+
+## Summary of test diff
+
+| Status | Test | Notes |
+|--------|------|-------|
+| Removed | (none) | |
+| Modified | (none) | Existing tests untouched. |
+| Added | `position_offset_zero_matches_centered_offset` | Sanity check: zero offset == pre-feature baseline. |
+| Added | `position_offset_shifts_image_within_available_room` | Asserts ±50 shifts image by `room * 0.5` on x and y. |
+| Added | `position_offset_clamps_to_keep_image_visible` | Extreme values (±500) clamp to keep image inside frame. |
+| Added | `position_offset_does_not_change_display_size` | Invariant: offset only translates, never resizes. |
+
+No regressions in existing coverage. No callers/signatures of `display_offset` / `display_size` changed outwardly, so old tests still exercise the same surface.
+
+## Code under test (recap)
+
+New tail in `display_layout`:
+
+```rust
+let room = output_size - target_size;
+let shift_x = (project.background.position_offset_x / 100.0) * room.x;
+let shift_y = (project.background.position_offset_y / 100.0) * room.y;
+let raw_offset = centered_offset + XY::new(shift_x, shift_y);
+let max_x = room.x.max(0.0);
+let max_y = room.y.max(0.0);
+let offset = XY::new(
+    raw_offset.x.clamp(0.0, max_x),
+    raw_offset.y.clamp(0.0, max_y),
+);
+```
+
+Plus refactor: `display_offset` + `display_size` collapse into single `display_layout`. `display_bounds` drops `output_size` param; uses `display_offset + display_size` for end.
+
+## Correctness analysis
+
+### Refactor (non-test) sanity
+- `display_bounds` previously did `output_size - display_offset` for `base_end`. That assumed symmetric centering — invalid once offset is asymmetric. New form `display_offset + display_size` is correct under any offset.
+- `display_size` was previously `(output - 2*offset)`, only valid when image was centered. Now derived directly from layout. Correct.
+- Fold of two functions into `display_layout` returning `(offset, size)` — same outputs, no behavior drift in the no-offset case (verified by `position_offset_zero_matches_centered_offset` and the untouched existing tests).
+
+### Logic correctness — what the math actually does
+`centered_offset` is the **left/top margin** when image is centered, i.e. `room/2`. New shift = `(pct/100) * room`. So:
+
+| pct | raw_offset | post-clamp | meaning |
+|-----|-----------|-----------|---------|
+| 0   | room/2    | room/2    | centered |
+| +50 | room      | room      | image flush against right/bottom edge |
+| -50 | 0         | 0         | flush against left/top |
+| +100| 1.5·room  | room (clamped) | saturated |
+| -100| -room/2   | 0 (clamped) | saturated |
+
+**Issue**: useful slider range is `[-50, +50]`; values past ±50 are clamped no-ops. If product spec wanted ±100 to be the extremes (typical slider UX), the divisor should be `200.0` instead of `100.0`, or shift should be `(pct/100) * (room/2)`. As-is, half the slider range is dead. The tests *encode* this behavior rather than challenge it — `position_offset_shifts_image_within_available_room` uses ±50 and asserts shift == `room * 0.5`, which mathematically matches, but documents the half-range-dead UX. **Worth confirming with design before merge.**
+
+### Test-by-test verdict
+
+1. **`position_offset_zero_matches_centered_offset`** — Correct. Guards against accidental drift when feature flag is off (offset=0). Uses auto-aspect path (no `aspect_ratio`).
+
+2. **`position_offset_shifts_image_within_available_room`** — Correct given the code. Caveats:
+   - Uses `aspect_ratio: Wide`, so only the fixed-aspect branch is exercised.
+   - Does not cover combined non-zero x AND y simultaneously.
+   - Does not cover intermediate values (e.g. 25%) to verify linearity.
+   - Hard-codes the half-range-saturation behavior (see issue above).
+
+3. **`position_offset_clamps_to_keep_image_visible`** — Correct. Tests extreme out-of-range (±500) and asserts image stays in `[0, output]`. Good. But: also worth asserting image is **at the edge** (not at center), to catch a bug where clamp is too aggressive.
+
+4. **`position_offset_does_not_change_display_size`** — Correct invariant. Only checks the fixed-aspect branch.
+
+### Coverage gaps
+- **Auto-aspect-ratio branch with non-zero offset is untested.** The auto branch computes `target_size = output - centered*2` differently; the same room-shift logic should apply but isn't asserted. Test 1 covers offset=0 on auto path only — insufficient.
+- **No test for `display_bounds` change.** The signature/body change isn't directly exercised; relies on integration with `ProjectUniforms::new`.
+- **Sign of y-axis convention**: `position_offset_y = +50` produces `centered.y + room.y/2` (image moves *down* in frame coords). Test 2 names it `shifted_down` — consistent. Confirm UI sends positive Y for "down" or negate at boundary.
+- **Float strictness**: tests use `1e-6` epsilon; `f64::EPSILON` would be tighter. Current tolerance is fine but loose.
+
+## Recommendation
+- **LGTM on test correctness** (assertions match implementation).
+- **Block on**: confirm whether the ±50 = full-extreme is the intended slider semantics. If not, fix code (`/200.0` or `room/2` factor), update tests accordingly.
+- **Nice-to-have**: add an auto-aspect branch shift test, and a combined x+y test.

apps/desktop/src/routes/editor/ConfigSidebar.tsx

@@ -1,3 +1,4 @@
+import { PositionOffsetField } from "@cap/ui-solid";
 import { NumberField } from "@kobalte/core";
 import {
 	Collapsible,
@@ -59,6 +60,7 @@ import IconLucideGauge from "~icons/lucide/gauge";
 import IconLucideGrid from "~icons/lucide/grid";
 import IconLucideKeyboard from "~icons/lucide/keyboard";
 import IconLucideMonitor from "~icons/lucide/monitor";
+import IconLucideMove from "~icons/lucide/move";
 import IconLucideMoon from "~icons/lucide/moon";
 import IconLucidePalette from "~icons/lucide/palette";
 import IconLucideRabbit from "~icons/lucide/rabbit";
@@ -2022,6 +2024,19 @@ function BackgroundConfig(props: { scrollRef: HTMLDivElement }) {
 					formatTooltip="%"
 				/>
 			</Field>
+			<PositionOffsetField
+				icon={<IconLucideMove class="size-4" />}
+				value={{
+					x: project.background.positionOffsetX ?? 0,
+					y: project.background.positionOffsetY ?? 0,
+				}}
+				onChange={(v) =>
+					batch(() => {
+						setProject("background", "positionOffsetX", v.x);
+						setProject("background", "positionOffsetY", v.y);
+					})
+				}
+			/>
 			<Field name="Rounded Corners" icon={<IconCapCorners class="size-4" />}>
 				<div class="flex flex-col gap-3">
 					<Slider

apps/desktop/src/routes/screenshot-editor/popovers/BackgroundSettingsPopover.tsx

@@ -1,3 +1,4 @@
+import { PositionOffsetField } from "@cap/ui-solid";
 import { Popover } from "@kobalte/core/popover";
 import { RadioGroup as KRadioGroup } from "@kobalte/core/radio-group";
 import { Tabs as KTabs } from "@kobalte/core/tabs";
@@ -16,6 +17,7 @@ import type { BackgroundSource } from "~/utils/tauri";
 import IconCapBgBlur from "~icons/cap/bg-blur";
 import IconCapCircleX from "~icons/cap/circle-x";
 import IconCapImage from "~icons/cap/image";
+import IconLucideMove from "~icons/lucide/move";
 import {
 	DEFAULT_GRADIENT_FROM,
 	DEFAULT_GRADIENT_TO,
@@ -539,6 +541,19 @@ export function BackgroundSettingsPopover() {
 								formatTooltip="%"
 							/>
 						</Field>
+						<PositionOffsetField
+							icon={<IconLucideMove class="size-4" />}
+							value={{
+								x: project.background.positionOffsetX ?? 0,
+								y: project.background.positionOffsetY ?? 0,
+							}}
+							onChange={(v) =>
+								batch(() => {
+									setProject("background", "positionOffsetX", v.x);
+									setProject("background", "positionOffsetY", v.y);
+								})
+							}
+						/>
 					</div>
 				</Popover.Content>
 			</Popover.Portal>

apps/desktop/src/utils/tauri.ts

@@ -434,7 +434,7 @@ export type AudioInputLevelChange = number
 export type AudioMeta = { path: string; start_time?: number | null; device_id?: string | null }
 export type AuthSecret = { api_key: string } | { token: string; expires: number }
 export type AuthStore = { secret: AuthSecret; user_id: string | null; plan: Plan | null; organizations?: Organization[] }
-export type BackgroundConfiguration = { source: BackgroundSource; blur: number; padding: number; rounding: number; roundingType: CornerStyle; inset: number; crop: Crop | null; shadow: number; advancedShadow: ShadowConfiguration | null; border: BorderConfiguration | null }
+export type BackgroundConfiguration = { source: BackgroundSource; blur: number; padding: number; positionOffsetX: number; positionOffsetY: number; rounding: number; roundingType: CornerStyle; inset: number; crop: Crop | null; shadow: number; advancedShadow: ShadowConfiguration | null; border: BorderConfiguration | null }
 export type BackgroundSource = { type: "wallpaper"; path: string | null } | { type: "image"; path: string | null } | { type: "color"; value: [number, number, number]; alpha?: number } | { type: "gradient"; from: [number, number, number]; to: [number, number, number]; angle?: number; noise_intensity?: number | null; noise_scale?: number | null; animated?: boolean | null; animation_speed?: number | null }
 export type BorderConfiguration = { enabled: boolean; width: number; color: [number, number, number]; opacity: number }
 export type Camera = { hide: boolean; mirror: boolean; position: CameraPosition; size: number; zoomSize: number | null; rounding: number; shadow: number; advancedShadow: ShadowConfiguration | null; shape: CameraShape; roundingType: CornerStyle; scaleDuringZoom?: number }

apps/storybook/.storybook/preview.ts

@@ -1,3 +1,4 @@
+import "../../desktop/src/styles/theme.css";
 import "@cap/ui-solid/main.css";
 
 const preview: Preview = {

apps/storybook/package.json

@@ -8,6 +8,7 @@
 	},
 	"dependencies": {
 		"@cap/ui-solid": "workspace:*",
+		"@radix-ui/colors": "^3.0.0",
 		"postcss-pseudo-companion-classes": "^0.1.1",
 		"solid-js": "^1.9.3",
 		"zod": "^3"

crates/project/src/configuration.rs

@@ -235,6 +235,8 @@ pub struct BackgroundConfiguration {
     pub source: BackgroundSource,
     pub blur: f64,
     pub padding: f64,
+    pub position_offset_x: f64,
+    pub position_offset_y: f64,
     pub rounding: f64,
     pub rounding_type: CornerStyle,
     pub inset: u32,
@@ -261,6 +263,8 @@ impl Default for BackgroundConfiguration {
             source: BackgroundSource::default(),
             blur: 0.0,
             padding: 0.0,
+            position_offset_x: 0.0,
+            position_offset_y: 0.0,
             rounding: 0.0,
             rounding_type: CornerStyle::default(),
             inset: 0,

crates/rendering/src/coord.rs

@@ -108,16 +108,12 @@ impl Coord<CroppedDisplaySpace> {
         resolution_base: XY<u32>,
     ) -> Coord<FrameSpace> {
         let crop = ProjectUniforms::get_crop(options, project);
-        let output_size = ProjectUniforms::get_output_size(options, project, resolution_base);
         let padding_offset = ProjectUniforms::display_offset(options, project, resolution_base);
-
-        let output_size = XY::new(output_size.0, output_size.1).map(|v| v as f64);
+        let display_size = ProjectUniforms::display_size(options, project, resolution_base);
 
         let position_ratio = self.coord / crop.size.map(|v| v as f64);
 
-        Coord::new(
-            padding_offset.coord + (output_size - padding_offset.coord * 2.0) * position_ratio,
-        )
+        Coord::new(padding_offset.coord + display_size.coord * position_ratio)
     }
 }