/* global React, INK, CREAM, PULSE, GENS, GradText, CTAButton, Reveal, useReveal, SB_EASE, ED_ACCENTS */
// Editing Suite feature page — one section per tool, alternating lean, real UI panels.
const { useState: esS, useEffect: esE } = React;
const EDBadge = ({ label, ac = '#813CED', bg = CREAM }) =>
{label}
;
const EDPanelCard = ({ children, pad = 16 }) =>
{children}
;
const EDSectionShell = ({ label, ac, h1, h2, sub, note, panel, flip = false, lean = 'right', bg = '#fff' }) => (
{h1}
{h2}
{sub}
Join for free
{note &&
{note}
}
{panel}
);
// shared before/after split with draggable handle
const EDSplit = ({ before, after, labelB = 'Before', labelA = 'After', h = 380, beforeFilter }) => {
const [pos, setPos] = esS(50);
return (
);
};
// ---------- § 01 Inpaint ----------
const InpaintPanel = () => {
const [ref, on] = useReveal(0.35);
const [phase, setPhase] = esS('brush'); // brush → done → loop
esE(() => {
if (!on) return;
const t = setInterval(() => setPhase(p => p === 'brush' ? 'done' : 'brush'), 3400);
return () => clearInterval(t);
}, [on]);
const done = phase === 'done';
return (
{done ? 'Edit applied — only where you painted' : 'Brush where it goes'}
add this necklace
APPLY ✦
);
};
// ---------- § 02 Expression ----------
const EDExprPanel = () => {
const [sel, setSel] = esS(1);
return (
{sel === 1 ? 'Playful laugh — her face, still her' : 'Original'}
{['Original', 'Playful laugh', 'Soft smile', 'Wink', 'Seductive', 'Surprised'].map((n, i) =>
setSel(i > 1 ? 1 : i)} style={{ borderRadius: 9999, padding: '7px 13px', fontSize: 11, fontWeight: sel === i ? 700 : 600, cursor: 'pointer', transition: 'all 0.18s',
background: sel === i ? INK : 'rgb(246,243,242)', color: sel === i ? '#fff' : 'rgba(28,27,27,0.6)',
boxShadow: sel === i ? 'none' : 'inset 0 0 0 1px rgba(28,27,27,0.08)' }}>{n})}
);
};
// ---------- § 03 Recolor ----------
const RecolorPanel = () => (
);
// ---------- § 04 Filters ----------
const ED_SLIDERS = [['Contrast', 62], ['Exposure', 48], ['Brightness', 55], ['Sharpness', 70], ['Grain', 22]];
const FiltersPanel = () => (
{ED_SLIDERS.map(([n, v]) =>
)}
SAVE GRADE
);
// ---------- § 05 Upscale ----------
const UpscalePanel = () => {
const [res, setRes] = esS(2);
const zoom = [1.15, 1.15, 1.15][res];
return (
{['1K', '2K', '4K'][res]}
Detail crop · {['1024px', '2048px', '4096px'][res]}
{['1K', '2K', '4K'].map((n, i) =>
setRes(i)} style={{ borderRadius: 9999, padding: '7px 16px', fontSize: 11, fontWeight: res === i ? 700 : 600, cursor: 'pointer', transition: 'all 0.18s',
background: res === i ? INK : 'rgb(246,243,242)', color: res === i ? '#fff' : 'rgba(28,27,27,0.6)',
boxShadow: res === i ? 'none' : 'inset 0 0 0 1px rgba(28,27,27,0.08)' }}>{n})}
Print-ready · platform-ready
);
};
const InpaintSection = () => } />;
const EDExpressionSection = () => } />;
const RecolorSection = () => } />;
const FiltersSection = () => } />;
const UpscaleSection = () => } />;
// ---------- § 06 — After the edit ----------
const EDP_PANEL = { borderRadius: '12px 12px 0 0', background: '#fff', boxShadow: '0 10px 24px rgba(28,27,27,0.10), inset 0 0 0 1px rgba(28,27,27,0.08)', padding: 10, height: '100%', boxSizing: 'border-box', display: 'flex', flexDirection: 'column' };
const ED_NEXT = [
{ t: 'The Scheduler', d: 'Queue the fixed photo to six platforms straight from the board.', kind: 'sched', href: '/#11 Scheduler' },
{ t: 'Create Video', d: 'Make the finished photo move — same scene, with her voice on the track.', kind: 'video', href: '/create-video' },
{ t: 'Photo Shoot', d: 'Love the edit? Shoot a locked set of ten around it.', kind: 'shoot', href: '/#05 Photo Shoot' }];
const EDP_ROWS = [
{ src: 'assets/edits/color.webp', p: 'Instagram', time: '9:00 AM', st: 'Queued' },
{ src: 'assets/shoot/set-2.webp', p: 'TikTok', time: '12:30 PM', st: 'Queued' },
{ src: 'assets/create/out-garden.webp', p: 'OnlyFans', time: 'Yesterday', st: 'Posted' }];
const EDPipeMedia = ({ kind }) => (
{kind === 'sched' &&
This week
Scarlett · 6 platforms
{EDP_ROWS.map((r) =>
{r.p}
{r.time}
{r.st}
)}
}
{kind === 'video' &&
{['Scarlett', '9:16', 'From this photo'].map(c =>
{c})}
}
{kind === 'shoot' &&
Lazy morning · set
10 shots
{[1, 2, 3, 4, 5, 6].map((n, i) =>
)}
}
Fixed.
Now ship it.
The finished photo is already on a board wired into the rest of the studio.
See the full tour →
{ED_NEXT.map((c, i) =>
)}
);
Object.assign(window, { InpaintSection, EDExpressionSection, RecolorSection, FiltersSection, UpscaleSection, EDPipelineSection, EDSplit });
