afterbefore 0.2.20 → 0.2.22

package/dist/overlay/index.js

@@ -10,7 +10,7 @@ var initialState = {
   lastCapture: null
 };
 function useOverlayState() {
-  const [state, setState] = useState(initialState);
+  const [state2, setState] = useState(initialState);
   const captureComplete = useCallback(
     (result) => {
       setState({ phase: "ready", lastCapture: result });
@@ -20,7 +20,7 @@ function useOverlayState() {
   const reset = useCallback(() => {
     setState(initialState);
   }, []);
-  return { state, captureComplete, reset };
+  return { state: state2, captureComplete, reset };
 }
 
 // src/overlay/capture.ts
@@ -31,7 +31,9 @@ var DEFAULT_FRAME_SETTINGS = {
   bgType: "color",
   bgColor: "#000000",
   bgImage: null,
-  padding: 40
+  padding: 40,
+  browserChrome: false,
+  browserTheme: "dark"
 };
 var FRAME_SIZE_PRESETS = [
   { label: "1920 x 1080", hint: "Desktop / HD", w: 1920, h: 1080 },
@@ -62,7 +64,7 @@ async function toPngDataUrl(el, opts) {
 async function capture(options) {
   const { mode, element } = options;
   if (mode === "viewport") {
-    return captureViewport();
+    return captureViewport(options.frameSettings);
   }
   if (mode === "fullpage") {
     return captureFullPage();
@@ -72,19 +74,19 @@ async function capture(options) {
   }
   throw new Error(`Invalid capture mode: ${mode}`);
 }
-async function captureViewport() {
+async function captureViewport(frameSettings) {
   const dpr = window.devicePixelRatio || 1;
   const vw = window.innerWidth;
   const vh = window.innerHeight;
   const scrollY = window.scrollY;
   const fullDataUrl = await captureFullPage();
-  const img = await loadImage(fullDataUrl);
+  const fullImg = await loadImage(fullDataUrl);
   const canvas = document.createElement("canvas");
   canvas.width = vw * dpr;
   canvas.height = vh * dpr;
   const ctx = canvas.getContext("2d");
   ctx.drawImage(
-    img,
+    fullImg,
     0,
     scrollY * dpr,
     vw * dpr,
@@ -94,8 +96,77 @@ async function captureViewport() {
     vw * dpr,
     vh * dpr
   );
+  const viewportDataUrl = canvas.toDataURL("image/png");
+  if (!frameSettings?.browserChrome) {
+    return viewportDataUrl;
+  }
+  const viewportImg = await loadImage(viewportDataUrl);
+  return drawBrowserChrome(viewportImg, frameSettings.browserTheme, dpr);
+}
+function drawBrowserChrome(img, theme, dpr) {
+  const TITLE_BAR_H = 40;
+  const URL_BAR_H = 28;
+  const URL_BAR_MARGIN_TOP = 6;
+  const URL_BAR_MARGIN_BOTTOM = 6;
+  const CHROME_H = TITLE_BAR_H + URL_BAR_H + URL_BAR_MARGIN_TOP + URL_BAR_MARGIN_BOTTOM;
+  const imgW = img.width;
+  const imgH = img.height;
+  const canvas = document.createElement("canvas");
+  canvas.width = imgW;
+  canvas.height = imgH + CHROME_H * dpr;
+  const ctx = canvas.getContext("2d");
+  const colors = theme === "dark" ? { titleBar: "#1C1C1C", urlBar: "#262626", text: "#7B7B7B", border: "#333333" } : { titleBar: "#F5F5F5", urlBar: "#FFFFFF", text: "#999999", border: "#EBEBEB" };
+  ctx.fillStyle = colors.titleBar;
+  ctx.fillRect(0, 0, canvas.width, CHROME_H * dpr);
+  ctx.fillStyle = colors.border;
+  ctx.fillRect(0, (CHROME_H - 1) * dpr, canvas.width, dpr);
+  const dotY = TITLE_BAR_H / 2 * dpr;
+  const dotR = 6 * dpr;
+  const dotStartX = 18 * dpr;
+  const dotGap = 20 * dpr;
+  const dotColors = ["#FF5F57", "#FEBC2E", "#28C840"];
+  for (let i = 0; i < 3; i++) {
+    ctx.beginPath();
+    ctx.arc(dotStartX + i * dotGap, dotY, dotR, 0, Math.PI * 2);
+    ctx.fillStyle = dotColors[i];
+    ctx.fill();
+  }
+  const urlBarY = (TITLE_BAR_H + URL_BAR_MARGIN_TOP) * dpr;
+  const urlBarPadX = 80 * dpr;
+  const urlBarX = urlBarPadX;
+  const urlBarW = canvas.width - urlBarPadX * 2;
+  const urlBarH = URL_BAR_H * dpr;
+  const urlBarR = 6 * dpr;
+  ctx.fillStyle = colors.urlBar;
+  roundRect(ctx, urlBarX, urlBarY, urlBarW, urlBarH, urlBarR);
+  ctx.fill();
+  if (theme === "light") {
+    ctx.strokeStyle = colors.border;
+    ctx.lineWidth = dpr;
+    roundRect(ctx, urlBarX, urlBarY, urlBarW, urlBarH, urlBarR);
+    ctx.stroke();
+  }
+  ctx.fillStyle = colors.text;
+  ctx.font = `${11 * dpr}px -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif`;
+  ctx.textAlign = "center";
+  ctx.textBaseline = "middle";
+  ctx.fillText("localhost", canvas.width / 2, urlBarY + urlBarH / 2);
+  ctx.drawImage(img, 0, CHROME_H * dpr);
   return canvas.toDataURL("image/png");
 }
+function roundRect(ctx, x, y, w, h, r) {
+  ctx.beginPath();
+  ctx.moveTo(x + r, y);
+  ctx.lineTo(x + w - r, y);
+  ctx.quadraticCurveTo(x + w, y, x + w, y + r);
+  ctx.lineTo(x + w, y + h - r);
+  ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
+  ctx.lineTo(x + r, y + h);
+  ctx.quadraticCurveTo(x, y + h, x, y + h - r);
+  ctx.lineTo(x, y + r);
+  ctx.quadraticCurveTo(x, y, x + r, y);
+  ctx.closePath();
+}
 async function captureFullPage() {
   const scrollY = window.scrollY;
   const body = document.body;
@@ -177,8 +248,67 @@ function loadImage(src) {
   });
 }
 
+// src/overlay/font.ts
+var FONT_FAMILY = "'Inter var', 'Inter', system-ui, -apple-system, sans-serif";
+var FONT_FEATURE_SETTINGS = "'ss11' 1, 'calt' 1";
+var fontBase = {
+  fontFamily: FONT_FAMILY,
+  fontFeatureSettings: FONT_FEATURE_SETTINGS
+};
+function style(fontSize, lineHeight, fontWeight, letterSpacing, extra) {
+  return { fontSize, lineHeight: `${lineHeight}px`, fontWeight, letterSpacing, ...extra };
+}
+var text = {
+  // --- Title (Medium 500) ---
+  title: {
+    h1: style(56, 64, 500, "-0.01em"),
+    h2: style(48, 56, 500, "-0.01em"),
+    h3: style(40, 48, 500, "-0.01em"),
+    h4: style(32, 40, 500, "-0.005em"),
+    h5: style(24, 32, 500, "0em"),
+    h6: style(20, 28, 500, "0em")
+  },
+  // --- Label (Medium 500) ---
+  label: {
+    xl: style(24, 32, 500, "-0.015em"),
+    lg: style(18, 24, 500, "-0.015em"),
+    md: style(16, 24, 500, "-0.011em"),
+    sm: style(14, 20, 500, "-0.006em"),
+    xs: style(12, 16, 500, "0em")
+  },
+  // --- Paragraph (Regular 400) ---
+  paragraph: {
+    xl: style(24, 32, 400, "-0.015em"),
+    lg: style(18, 24, 400, "-0.015em"),
+    md: style(16, 24, 400, "-0.011em"),
+    sm: style(14, 20, 400, "-0.006em"),
+    xs: style(12, 16, 400, "0em")
+  },
+  // --- Subheading (Medium 500, uppercase) ---
+  subheading: {
+    md: style(16, 24, 500, "0.06em", { textTransform: "uppercase" }),
+    sm: style(14, 20, 500, "0.06em", { textTransform: "uppercase" }),
+    xs: style(12, 16, 500, "0.04em", { textTransform: "uppercase" }),
+    xxs: style(11, 12, 500, "0.02em", { textTransform: "uppercase" })
+  }
+};
+var INTER_CSS_ID = "afterbefore-inter-font";
+function injectInterFont() {
+  if (document.getElementById(INTER_CSS_ID)) return;
+  const preconnect = document.createElement("link");
+  preconnect.rel = "preconnect";
+  preconnect.href = "https://rsms.me/";
+  document.head.appendChild(preconnect);
+  const stylesheet = document.createElement("link");
+  stylesheet.id = INTER_CSS_ID;
+  stylesheet.rel = "stylesheet";
+  stylesheet.href = "https://rsms.me/inter/inter.css";
+  document.head.appendChild(stylesheet);
+}
+
 // src/overlay/ui/toolbar.tsx
 import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
+import { createPortal } from "react-dom";
 import {
   ArrowUp,
   Camera,
@@ -191,11 +321,73 @@ import {
   FileText,
   Monitor,
   MousePointer2,
-  Settings,
   Trash2 as Trash22,
   X as X2
 } from "lucide-react";
 
+// src/overlay/color.ts
+var gray = {
+  950: "#171717",
+  900: "#1C1C1C",
+  800: "#262626",
+  700: "#333333",
+  600: "#5C5C5C",
+  500: "#7B7B7B",
+  400: "#A3A3A3",
+  300: "#D1D1D1",
+  200: "#EBEBEB",
+  100: "#F5F5F5",
+  50: "#F7F7F7",
+  0: "#FFFFFF"
+};
+var bg = {
+  base: gray[900],
+  elevated: gray[950],
+  dropdown: gray[900]
+};
+var fg = {
+  strong: gray[200],
+  default: gray[300],
+  sub: gray[500],
+  muted: gray[600],
+  faint: gray[600]
+};
+var stroke = {
+  soft: "rgba(255, 255, 255, 0.08)",
+  default: "rgba(255, 255, 255, 0.1)",
+  strong: "rgba(255, 255, 255, 0.12)",
+  interactive: "rgba(255, 255, 255, 0.18)"
+};
+var state = {
+  subtle: "rgba(255, 255, 255, 0.04)",
+  button: "rgba(255, 255, 255, 0.06)",
+  input: "rgba(255, 255, 255, 0.07)",
+  active: "rgba(255, 255, 255, 0.08)",
+  hover: "rgba(255, 255, 255, 0.1)",
+  hoverStrong: "rgba(255, 255, 255, 0.12)",
+  pressed: "rgba(255, 255, 255, 0.14)"
+};
+var accent = {
+  primary: "#335CFF",
+  toggle: "#38bdf8",
+  check: "#4ade80",
+  highlight: "rgba(125, 211, 252, 0.96)"
+};
+var feedback = {
+  success: "rgba(34, 197, 94, 0.9)",
+  error: "rgba(239, 68, 68, 0.9)",
+  errorText: "rgba(239, 68, 68, 0.9)",
+  errorBg: "rgba(239, 68, 68, 0.1)"
+};
+var shadow = {
+  toolbar: "0 8px 32px rgba(0, 0, 0, 0.4)",
+  panel: "0 14px 36px rgba(0, 0, 0, 0.32)",
+  dropdown: "0 10px 30px rgba(0, 0, 0, 0.3)",
+  tooltip: "0 8px 28px rgba(0, 0, 0, 0.28)",
+  toast: "0 2px 8px rgba(0, 0, 0, 0.3)",
+  status: "0 4px 20px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.08)"
+};
+
 // src/overlay/ui/settings-panel.tsx
 import { useEffect, useRef, useState as useState2 } from "react";
 import {
@@ -207,140 +399,110 @@ import {
   X
 } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-function SettingsPanel({
-  style,
-  onClose,
-  selectedMode,
+function SettingsContent({
   frameSettings,
-  onFrameSettingsChange
+  onFrameSettingsChange,
+  saveDir,
+  picking,
+  onPickFolder
 }) {
-  const [saveDir, setSaveDir] = useState2(null);
-  const [picking, setPicking] = useState2(false);
-  useEffect(() => {
-    fetch("/__afterbefore/config").then((r) => r.json()).then((data) => setSaveDir(data.saveDir)).catch(() => {
-    });
-  }, []);
-  const handlePickFolder = async () => {
-    setPicking(true);
-    try {
-      const res = await fetch("/__afterbefore/pick-folder", { method: "POST" });
-      const data = await res.json();
-      if (data.folder) {
-        await fetch("/__afterbefore/config", {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ saveDir: data.folder })
-        });
-        setSaveDir(data.folder);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      SettingsRow,
+      {
+        title: "Frame",
+        control: /* @__PURE__ */ jsx(
+          ToggleSwitch,
+          {
+            enabled: frameSettings.enabled,
+            onChange: () => onFrameSettingsChange({ ...frameSettings, enabled: !frameSettings.enabled })
+          }
+        )
       }
-    } catch {
-    } finally {
-      setPicking(false);
-    }
-  };
-  const shortDir = saveDir ? saveDir.replace(/^\/Users\/[^/]+/, "~") : "~/Desktop";
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      style: {
-        minWidth: 300,
-        padding: "12px 16px",
-        borderRadius: 12,
-        background: "rgb(32, 32, 36)",
-        border: "1px solid rgba(255, 255, 255, 0.1)",
-        boxShadow: "0 14px 36px rgba(0, 0, 0, 0.32)",
-        ...style
-      },
-      children: [
-        /* @__PURE__ */ jsx(SettingsHeader, { onClose }),
-        /* @__PURE__ */ jsx(SettingsDivider, {}),
-        selectedMode === "component" && /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(
-            SettingsRow,
-            {
-              title: "Frame",
-              description: "Wrap in a sized canvas with background",
-              control: /* @__PURE__ */ jsx(
-                ToggleSwitch,
-                {
-                  enabled: frameSettings.enabled,
-                  onChange: () => onFrameSettingsChange({ ...frameSettings, enabled: !frameSettings.enabled })
-                }
-              )
-            }
-          ),
-          frameSettings.enabled && /* @__PURE__ */ jsxs(Fragment, { children: [
-            /* @__PURE__ */ jsx(SettingsDivider, {}),
+    ),
+    frameSettings.enabled && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(SettingsDivider, {}),
+      /* @__PURE__ */ jsx(
+        FrameSizeControl,
+        {
+          size: frameSettings.size,
+          onChange: (size) => onFrameSettingsChange({ ...frameSettings, size })
+        }
+      ),
+      /* @__PURE__ */ jsx(SettingsDivider, {}),
+      /* @__PURE__ */ jsx(
+        FrameBackgroundControl,
+        {
+          bgType: frameSettings.bgType,
+          bgColor: frameSettings.bgColor,
+          bgImage: frameSettings.bgImage,
+          frameSize: frameSettings.size,
+          onChange: (updates) => onFrameSettingsChange({ ...frameSettings, ...updates })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(SettingsDivider, {}),
+    /* @__PURE__ */ jsx(
+      SettingsRow,
+      {
+        title: "Browser Chrome",
+        control: /* @__PURE__ */ jsx(
+          ToggleSwitch,
+          {
+            enabled: frameSettings.browserChrome,
+            onChange: () => onFrameSettingsChange({ ...frameSettings, browserChrome: !frameSettings.browserChrome })
+          }
+        )
+      }
+    ),
+    frameSettings.browserChrome && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(SettingsDivider, {}),
+      /* @__PURE__ */ jsx(
+        SettingsRow,
+        {
+          title: "Theme",
+          control: /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 2, flexShrink: 0 }, children: [
             /* @__PURE__ */ jsx(
-              FrameSizeControl,
+              SegmentButton,
               {
-                size: frameSettings.size,
-                onChange: (size) => onFrameSettingsChange({ ...frameSettings, size })
+                active: frameSettings.browserTheme === "light",
+                onClick: () => onFrameSettingsChange({ ...frameSettings, browserTheme: "light" }),
+                style: { borderRadius: "6px 0 0 6px" },
+                children: "Light"
               }
             ),
-            /* @__PURE__ */ jsx(SettingsDivider, {}),
             /* @__PURE__ */ jsx(
-              FrameBackgroundControl,
+              SegmentButton,
               {
-                bgType: frameSettings.bgType,
-                bgColor: frameSettings.bgColor,
-                bgImage: frameSettings.bgImage,
-                frameSize: frameSettings.size,
-                onChange: (updates) => onFrameSettingsChange({ ...frameSettings, ...updates })
+                active: frameSettings.browserTheme === "dark",
+                onClick: () => onFrameSettingsChange({ ...frameSettings, browserTheme: "dark" }),
+                style: { borderRadius: "0 6px 6px 0" },
+                children: "Dark"
               }
             )
-          ] }),
-          /* @__PURE__ */ jsx(SettingsDivider, {})
-        ] }),
-        /* @__PURE__ */ jsx(
-          SettingsRow,
+          ] })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(SettingsDivider, {}),
+    saveDir !== void 0 && onPickFolder && /* @__PURE__ */ jsx(
+      SettingsRow,
+      {
+        title: "Save Location",
+        description: /* @__PURE__ */ jsx(
+          "span",
           {
-            title: "Save Location",
-            description: /* @__PURE__ */ jsx(
-              "span",
-              {
-                style: {
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                  whiteSpace: "nowrap",
-                  display: "block"
-                },
-                title: shortDir,
-                children: shortDir
-              }
-            ),
-            control: /* @__PURE__ */ jsx(SmallButton, { onClick: handlePickFolder, children: picking ? "..." : "Change" })
+            style: {
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
+              display: "block"
+            },
+            title: saveDir,
+            children: saveDir
           }
-        )
-      ]
-    }
-  );
-}
-function SettingsHeader({ onClose }) {
-  const [hovered, setHovered] = useState2(false);
-  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", paddingBottom: 8 }, children: [
-    /* @__PURE__ */ jsx("span", { style: { fontSize: 14, fontWeight: 600, color: "rgba(255, 255, 255, 0.92)" }, children: "Settings" }),
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        onClick: onClose,
-        onMouseEnter: () => setHovered(true),
-        onMouseLeave: () => setHovered(false),
-        style: {
-          width: 24,
-          height: 24,
-          borderRadius: 6,
-          border: "none",
-          background: hovered ? "rgba(255, 255, 255, 0.1)" : "transparent",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          cursor: "pointer",
-          color: hovered ? "rgba(255, 255, 255, 0.8)" : "rgba(255, 255, 255, 0.46)",
-          padding: 0,
-          transition: "background 0.12s ease, color 0.12s ease"
-        },
-        children: /* @__PURE__ */ jsx(X, { size: 14, strokeWidth: 2 })
+        ),
+        control: /* @__PURE__ */ jsx(SmallButton, { onClick: onPickFolder, children: picking ? "..." : "Change" })
       }
     )
   ] });
@@ -350,16 +512,23 @@ function SettingsRow({
   description,
   control
 }) {
-  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, padding: "14px 0" }, children: [
-    /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 3, flex: 1, minWidth: 0 }, children: [
-      /* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "rgba(255, 255, 255, 0.92)" }, children: title }),
-      description && /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "rgba(255, 255, 255, 0.42)", lineHeight: 1.3 }, children: description })
+  return /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, padding: "10px 0" }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 2, flex: 1, minWidth: 0 }, children: [
+      /* @__PURE__ */ jsx("span", { style: { ...text.label.sm, color: fg.strong }, children: title }),
+      description && /* @__PURE__ */ jsx("span", { style: { ...text.paragraph.xs, color: fg.muted }, children: description })
     ] }),
     /* @__PURE__ */ jsx("div", { style: { flexShrink: 0 }, children: control })
   ] });
 }
 function SettingsDivider() {
-  return /* @__PURE__ */ jsx("div", { style: { height: 1, background: "rgba(255, 255, 255, 0.08)" } });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      style: {
+        borderBottom: `1px solid ${stroke.soft}`
+      }
+    }
+  );
 }
 function ToggleSwitch({
   enabled,
@@ -375,7 +544,7 @@ function ToggleSwitch({
         height: 22,
         borderRadius: 999,
         border: "none",
-        background: enabled ? "#38bdf8" : "rgba(255, 255, 255, 0.18)",
+        background: enabled ? accent.toggle : stroke.interactive,
         position: "relative",
         cursor: "pointer",
         padding: 0,
@@ -407,12 +576,9 @@ function FrameSizeControl({
   const [sizeOpen, setSizeOpen] = useState2(false);
   const currentPreset = FRAME_SIZE_PRESETS.find((p) => p.w === size.w && p.h === size.h);
   const isCustom = !currentPreset;
-  return /* @__PURE__ */ jsxs("div", { style: { padding: "14px 0" }, children: [
+  return /* @__PURE__ */ jsxs("div", { style: { padding: "10px 0" }, children: [
     /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16 }, children: [
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 3 }, children: [
-        /* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "rgba(255, 255, 255, 0.92)" }, children: "Size" }),
-        /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "rgba(255, 255, 255, 0.42)", lineHeight: 1.3 }, children: "Set the frame dimensions" })
-      ] }),
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("span", { style: { ...text.label.sm, color: fg.strong }, children: "Size" }) }),
       /* @__PURE__ */ jsxs("div", { style: { position: "relative", flexShrink: 0 }, children: [
         /* @__PURE__ */ jsxs(
           "button",
@@ -425,11 +591,11 @@ function FrameSizeControl({
               height: 30,
               padding: "0 10px",
               borderRadius: 7,
-              border: "1px solid rgba(255,255,255,0.1)",
-              background: "rgba(255,255,255,0.07)",
-              color: "rgba(255,255,255,0.88)",
+              border: `1px solid ${stroke.default}`,
+              background: state.input,
+              color: fg.strong,
               cursor: "pointer",
-              fontSize: 12,
+              ...text.label.xs,
               fontFamily: "inherit",
               whiteSpace: "nowrap"
             },
@@ -447,11 +613,11 @@ function FrameSizeControl({
               bottom: "calc(100% + 4px)",
               right: 0,
               minWidth: 180,
-              background: "rgb(32, 32, 36)",
-              border: "1px solid rgba(255, 255, 255, 0.1)",
+              background: bg.base,
+              border: `1px solid ${stroke.default}`,
               borderRadius: 8,
               padding: "4px 0",
-              boxShadow: "0 10px 30px rgba(0, 0, 0, 0.3)",
+              boxShadow: shadow.dropdown,
               zIndex: 1
             },
             children: FRAME_SIZE_PRESETS.map((preset) => /* @__PURE__ */ jsxs(
@@ -464,7 +630,7 @@ function FrameSizeControl({
                 },
                 children: [
                   /* @__PURE__ */ jsx("span", { children: preset.label }),
-                  /* @__PURE__ */ jsx("span", { style: { marginLeft: 6, fontSize: 10, color: "rgba(255,255,255,0.34)" }, children: preset.hint })
+                  /* @__PURE__ */ jsx("span", { style: { marginLeft: 6, fontSize: 10, color: fg.faint }, children: preset.hint })
                 ]
               },
               preset.label
@@ -523,12 +689,9 @@ function FrameBackgroundControl({
     reader.readAsDataURL(file);
     e.target.value = "";
   };
-  return /* @__PURE__ */ jsxs("div", { style: { padding: "14px 0" }, children: [
+  return /* @__PURE__ */ jsxs("div", { style: { padding: "10px 0" }, children: [
     /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16 }, children: [
-      /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 3 }, children: [
-        /* @__PURE__ */ jsx("span", { style: { fontSize: 13, fontWeight: 600, color: "rgba(255, 255, 255, 0.92)" }, children: "Background" }),
-        /* @__PURE__ */ jsx("span", { style: { fontSize: 11, color: "rgba(255, 255, 255, 0.42)", lineHeight: 1.3 }, children: "Frame background color or image" })
-      ] }),
+      /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("span", { style: { ...text.label.sm, color: fg.strong }, children: "Background" }) }),
       /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 2, flexShrink: 0 }, children: [
         /* @__PURE__ */ jsxs(
           SegmentButton,
@@ -582,7 +745,7 @@ function FrameBackgroundControl({
               height: 28,
               borderRadius: 4,
               objectFit: "cover",
-              border: "1px solid rgba(255,255,255,0.12)"
+              border: `1px solid ${stroke.strong}`
             }
           }
         ),
@@ -602,7 +765,7 @@ function SegmentButton({
   children,
   active,
   onClick,
-  style
+  style: style2
 }) {
   return /* @__PURE__ */ jsx(
     "button",
@@ -612,16 +775,16 @@ function SegmentButton({
         display: "flex",
         alignItems: "center",
         gap: 4,
-        height: 26,
+        height: 28,
         padding: "0 10px",
-        border: "1px solid rgba(255,255,255,0.1)",
-        background: active ? "rgba(255,255,255,0.14)" : "rgba(255,255,255,0.04)",
-        color: active ? "rgba(255,255,255,0.92)" : "rgba(255,255,255,0.5)",
+        border: `1px solid ${stroke.default}`,
+        background: active ? state.pressed : state.subtle,
+        color: active ? fg.strong : fg.sub,
         cursor: "pointer",
-        fontSize: 11,
+        ...text.label.xs,
         fontFamily: "inherit",
         transition: "background 0.12s ease, color 0.12s ease",
-        ...style
+        ...style2
       },
       children
     }
@@ -641,7 +804,7 @@ function ColorSwatch({
           width: 24,
           height: 24,
           borderRadius: 6,
-          border: "1px solid rgba(255,255,255,0.18)",
+          border: `1px solid ${stroke.interactive}`,
           background: color,
           cursor: "pointer",
           padding: 0
@@ -683,12 +846,12 @@ function SmallButton({
         display: "flex",
         alignItems: "center",
         gap: 4,
-        padding: "3px 8px",
+        padding: "4px 10px",
         borderRadius: 6,
-        border: "1px solid rgba(255,255,255,0.12)",
-        background: hovered ? "rgba(255,255,255,0.12)" : "rgba(255,255,255,0.06)",
-        color: "rgba(255,255,255,0.78)",
-        fontSize: 11,
+        border: `1px solid ${stroke.strong}`,
+        background: hovered ? state.hoverStrong : state.button,
+        color: fg.default,
+        ...text.label.xs,
         cursor: "pointer",
         fontFamily: "inherit",
         transition: "background 0.12s ease"
@@ -702,7 +865,7 @@ function NumInput({
   onChange
 }) {
   const [editing, setEditing] = useState2(false);
-  const [text, setText] = useState2(String(value));
+  const [text2, setText] = useState2(String(value));
   useEffect(() => {
     if (!editing) {
       setText(String(value));
@@ -712,14 +875,14 @@ function NumInput({
     "input",
     {
       type: "text",
-      value: editing ? text : String(value),
+      value: editing ? text2 : String(value),
       onFocus: () => {
         setEditing(true);
         setText(String(value));
       },
       onBlur: () => {
         setEditing(false);
-        onChange(text);
+        onChange(text2);
       },
       onChange: (e) => setText(e.target.value),
       onKeyDown: (e) => {
@@ -730,12 +893,12 @@ function NumInput({
       style: {
         width: 54,
         padding: "4px 6px",
-        background: "rgba(255, 255, 255, 0.07)",
-        border: "1px solid rgba(255, 255, 255, 0.1)",
+        background: state.input,
+        border: `1px solid ${stroke.default}`,
         borderRadius: 7,
-        color: "rgba(255, 255, 255, 0.9)",
-        fontSize: 12,
-        fontFamily: "system-ui, -apple-system, sans-serif",
+        color: fg.strong,
+        ...text.label.xs,
+        fontFamily: "inherit",
         textAlign: "center",
         outline: "none"
       }
@@ -747,7 +910,7 @@ function HexInput({
   onChange
 }) {
   const [editing, setEditing] = useState2(false);
-  const [text, setText] = useState2(value);
+  const [text2, setText] = useState2(value);
   useEffect(() => {
     if (!editing) {
       setText(value);
@@ -763,14 +926,14 @@ function HexInput({
     "input",
     {
       type: "text",
-      value: editing ? text : value,
+      value: editing ? text2 : value,
       onFocus: () => {
         setEditing(true);
         setText(value);
       },
       onBlur: () => {
         setEditing(false);
-        commit(text);
+        commit(text2);
       },
       onChange: (e) => setText(e.target.value),
       onKeyDown: (e) => {
@@ -781,12 +944,12 @@ function HexInput({
       style: {
         width: 72,
         padding: "4px 6px",
-        background: "rgba(255, 255, 255, 0.07)",
-        border: "1px solid rgba(255, 255, 255, 0.1)",
+        background: state.input,
+        border: `1px solid ${stroke.default}`,
         borderRadius: 7,
-        color: "rgba(255, 255, 255, 0.9)",
-        fontSize: 12,
-        fontFamily: "system-ui, -apple-system, sans-serif",
+        color: fg.strong,
+        ...text.label.xs,
+        fontFamily: "inherit",
         textAlign: "left",
         outline: "none"
       }
@@ -799,7 +962,7 @@ function StaticText({ children }) {
     {
       style: {
         fontSize: 11,
-        color: "rgba(255,255,255,0.35)",
+        color: fg.faint,
         minWidth: 8,
         textAlign: "center"
       },
@@ -820,12 +983,12 @@ function DropItem({
         display: "block",
         width: "100%",
         padding: "7px 12px",
-        background: active ? "rgba(255, 255, 255, 0.08)" : "transparent",
+        background: active ? state.active : "transparent",
         border: "none",
-        color: "rgba(255, 255, 255, 0.86)",
+        color: fg.strong,
         textAlign: "left",
         cursor: "pointer",
-        fontSize: 13,
+        ...text.paragraph.sm,
         fontFamily: "inherit"
       },
       children
@@ -879,6 +1042,20 @@ function snapToCorner(x, y) {
   }
   return y < cy ? "top-right" : "bottom-right";
 }
+function getCornerPosition(corner, w, h) {
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  switch (corner) {
+    case "bottom-right":
+      return { x: vw - EDGE_MARGIN - w, y: vh - EDGE_MARGIN - h };
+    case "bottom-left":
+      return { x: EDGE_MARGIN, y: vh - EDGE_MARGIN - h };
+    case "top-right":
+      return { x: vw - EDGE_MARGIN - w, y: EDGE_MARGIN };
+    case "top-left":
+      return { x: EDGE_MARGIN, y: EDGE_MARGIN };
+  }
+}
 var MODES = [
   { mode: "component", label: "Component", icon: MousePointer2 },
   { mode: "viewport", label: "Viewport", icon: Monitor },
@@ -896,8 +1073,29 @@ function Toolbar({
   frameSettings,
   onFrameSettingsChange
 }) {
-  const [settingsOpen, setSettingsOpen] = useState3(false);
   const [historyOpen, setHistoryOpen] = useState3(false);
+  const [modesExpanded, setModesExpanded] = useState3(true);
+  const [buttonsVisible, setButtonsVisible] = useState3(expanded);
+  const [animIn, setAnimIn] = useState3(expanded);
+  const [animDone, setAnimDone] = useState3(expanded);
+  useEffect2(() => {
+    if (expanded) {
+      setAnimDone(false);
+      setButtonsVisible(true);
+      setAnimIn(false);
+      requestAnimationFrame(() => {
+        requestAnimationFrame(() => setAnimIn(true));
+      });
+      const timer = setTimeout(() => setAnimDone(true), 250);
+      return () => clearTimeout(timer);
+    } else if (buttonsVisible) {
+      setHistoryOpen(false);
+      setAnimDone(false);
+      setAnimIn(false);
+      const timer = setTimeout(() => setButtonsVisible(false), 150);
+      return () => clearTimeout(timer);
+    }
+  }, [expanded]);
   const [corner, setCorner] = useState3(() => {
     try {
       const stored = localStorage.getItem("ab-toolbar-corner");
@@ -910,6 +1108,7 @@ function Toolbar({
   });
   const [dragging, setDragging] = useState3(false);
   const [dragPos, setDragPos] = useState3(null);
+  const [snapAnim, setSnapAnim] = useState3(null);
   const dragState = useRef2(null);
   const toolbarRef = useRef2(null);
   const [cameraHovered, setCameraHovered] = useState3(false);
@@ -923,8 +1122,8 @@ function Toolbar({
         return;
       }
       if (e.key === "Escape") {
-        if (settingsOpen) {
-          setSettingsOpen(false);
+        if (historyOpen) {
+          setHistoryOpen(false);
           return;
         }
         onCancel();
@@ -934,7 +1133,7 @@ function Toolbar({
     };
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
-  }, [expanded, onCancel, onCapture, selectedMode, settingsOpen]);
+  }, [expanded, onCancel, onCapture, selectedMode, historyOpen]);
   const handleMouseDown = useCallback2(
     (e) => {
       e.preventDefault();
@@ -971,22 +1170,35 @@ function Toolbar({
       if (!ds) return;
       if (ds.distance < 5) {
         onToggle();
+        setDragging(false);
+        setDragPos(null);
+        dragState.current = null;
       } else {
         const el = toolbarRef.current;
         const w = el?.offsetWidth ?? CONTAINER_SIZE;
         const h = el?.offsetHeight ?? CONTAINER_SIZE;
-        const centerX = ds.origX + (e.clientX - ds.startX) + w / 2;
-        const centerY = ds.origY + (e.clientY - ds.startY) + h / 2;
+        const currentX = ds.origX + (e.clientX - ds.startX);
+        const currentY = ds.origY + (e.clientY - ds.startY);
+        const centerX = currentX + w / 2;
+        const centerY = currentY + h / 2;
         const newCorner = snapToCorner(centerX, centerY);
         setCorner(newCorner);
         try {
           localStorage.setItem("ab-toolbar-corner", newCorner);
         } catch {
         }
+        const targetPos = getCornerPosition(newCorner, w, h);
+        setDragging(false);
+        setDragPos(null);
+        setSnapAnim({ x: currentX, y: currentY, animate: false });
+        dragState.current = null;
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => {
+            setSnapAnim({ ...targetPos, animate: true });
+            setTimeout(() => setSnapAnim(null), 300);
+          });
+        });
       }
-      setDragging(false);
-      setDragPos(null);
-      dragState.current = null;
     };
     window.addEventListener("mousemove", handleMouseMove);
     window.addEventListener("mouseup", handleMouseUp);
@@ -998,7 +1210,13 @@ function Toolbar({
   const panelSide = isRightCorner(corner) ? "left" : "right";
   const tooltipSide = panelSide;
   const bottom = isBottomCorner(corner);
-  const positionStyle = dragging && dragPos ? { left: dragPos.x, top: dragPos.y } : getCornerStyle(corner);
+  const positionStyle = dragging && dragPos ? { left: dragPos.x, top: dragPos.y } : snapAnim ? {
+    left: snapAnim.x,
+    top: snapAnim.y,
+    ...snapAnim.animate && {
+      transition: "left 0.3s cubic-bezier(0.23, 1, 0.32, 1), top 0.3s cubic-bezier(0.23, 1, 0.32, 1)"
+    }
+  } : getCornerStyle(corner);
   const cameraTooltipLabel = expanded ? "Close" : void 0;
   const cameraTooltipStyle = cameraTooltipLabel ? tooltipSide === "left" ? { right: "calc(100% + 10px)", top: "50%", transform: "translateY(-50%)" } : { left: "calc(100% + 10px)", top: "50%", transform: "translateY(-50%)" } : void 0;
   const cameraButton = /* @__PURE__ */ jsxs2("div", { style: { position: "relative" }, children: [
@@ -1008,14 +1226,17 @@ function Toolbar({
         style: {
           position: "absolute",
           ...cameraTooltipStyle,
-          background: "rgb(32, 32, 36)",
-          border: "1px solid rgba(255, 255, 255, 0.1)",
+          background: bg.base,
+          border: `1px solid ${stroke.default}`,
           borderRadius: 6,
-          padding: "3px 8px",
-          color: "rgba(255, 255, 255, 0.88)",
-          fontSize: 11,
+          padding: "0 8px",
+          height: 24,
+          display: "flex",
+          alignItems: "center",
+          color: fg.strong,
+          ...text.label.xs,
           whiteSpace: "nowrap",
-          boxShadow: "0 8px 28px rgba(0, 0, 0, 0.28)",
+          boxShadow: shadow.tooltip,
           pointerEvents: "none"
         },
         children: cameraTooltipLabel
@@ -1036,7 +1257,7 @@ function Toolbar({
           alignItems: "center",
           justifyContent: "center",
           cursor: dragging ? "grabbing" : "pointer",
-          background: expanded && cameraHovered ? "rgba(255, 255, 255, 0.12)" : "transparent",
+          background: expanded && cameraHovered ? state.hoverStrong : "transparent",
           transition: "background 0.12s ease"
         },
         children: [
@@ -1048,7 +1269,12 @@ function Toolbar({
 @keyframes ab-spin {
   0% { transform: rotate(0deg); }
   100% { transform: rotate(360deg); }
-}`
+}
+@keyframes ab-panel-in {
+  from { opacity: 0; transform: translateY(4px); }
+  to { opacity: 1; transform: translateY(0); }
+}
+`
               }
             }
           ),
@@ -1059,78 +1285,111 @@ function Toolbar({
               strokeWidth: 2,
               style: { animation: "ab-spin 0.8s linear infinite", color: "white" }
             }
-          ) : phase === "ready" ? /* @__PURE__ */ jsx2(Check, { size: 16, strokeWidth: 2.6, color: "#4ade80" }) : expanded ? /* @__PURE__ */ jsx2(
+          ) : phase === "ready" ? /* @__PURE__ */ jsx2(Check, { size: 16, strokeWidth: 2.6, color: accent.check }) : expanded ? /* @__PURE__ */ jsx2(
             X2,
             {
               size: 16,
               strokeWidth: 1.7,
-              color: cameraHovered ? "rgba(255, 255, 255, 0.96)" : "rgba(255, 255, 255, 0.52)"
+              color: cameraHovered ? fg.strong : fg.sub
             }
           ) : /* @__PURE__ */ jsx2(
             Camera,
             {
               size: 16,
               strokeWidth: 1.9,
-              color: "rgba(255, 255, 255, 0.52)"
+              color: fg.sub
             }
           )
         ]
       }
     )
   ] });
-  const toolbarButtons = expanded ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
-    /* @__PURE__ */ jsx2("div", { style: { display: "flex", flexDirection: "column", alignItems: "center", gap: 2, padding: "4px 0" }, children: MODES.map(({ mode, label, icon: ModeIcon }) => /* @__PURE__ */ jsx2(
-      IconButton,
-      {
-        active: selectedMode === mode,
-        tooltipSide,
-        tooltip: label,
-        onClick: () => {
-          setSettingsOpen(false);
-          setHistoryOpen(false);
-          if (mode === "viewport" || mode === "fullpage") {
-            onModeChange(mode);
-            onCapture(mode);
-          } else {
-            onModeChange(mode);
-          }
-        },
-        children: /* @__PURE__ */ jsx2(ModeIcon, { size: 16, strokeWidth: 1.7 })
+  const toolbarButtons = buttonsVisible ? /* @__PURE__ */ jsx2(
+    "div",
+    {
+      style: {
+        overflow: animDone ? "visible" : "hidden",
+        maxHeight: animIn ? 195 : 0,
+        transition: animIn ? "max-height 250ms cubic-bezier(0.23, 1, 0.32, 1)" : "max-height 150ms cubic-bezier(0.23, 1, 0.32, 1)"
       },
-      mode
-    )) }),
-    /* @__PURE__ */ jsx2(Separator, { vertical: false }),
-    /* @__PURE__ */ jsx2(
-      SettingsButton,
-      {
-        open: settingsOpen,
-        onClick: () => {
-          setSettingsOpen((prev) => !prev);
-          setHistoryOpen(false);
-        },
-        selectedMode,
-        frameSettings,
-        onFrameSettingsChange,
-        panelSide,
-        tooltipSide,
-        bottom
-      }
-    ),
-    /* @__PURE__ */ jsx2(
-      HistoryButton,
-      {
-        open: historyOpen,
-        onClick: () => {
-          setHistoryOpen((prev) => !prev);
-          setSettingsOpen(false);
-        },
-        panelSide,
-        tooltipSide,
-        bottom
-      }
-    ),
-    /* @__PURE__ */ jsx2(Separator, { vertical: false })
-  ] }) : null;
+      children: /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          style: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            opacity: animIn ? 1 : 0,
+            transform: animIn ? "translateY(0)" : `translateY(${bottom ? 6 : -6}px)`,
+            transition: animIn ? "opacity 200ms cubic-bezier(0.23, 1, 0.32, 1), transform 200ms cubic-bezier(0.23, 1, 0.32, 1)" : "opacity 150ms cubic-bezier(0.23, 1, 0.32, 1), transform 150ms cubic-bezier(0.23, 1, 0.32, 1)",
+            willChange: "transform, opacity"
+          },
+          children: [
+            /* @__PURE__ */ jsx2("div", { style: { paddingBottom: 2 }, children: /* @__PURE__ */ jsx2(
+              IconButton,
+              {
+                active: selectedMode === "component" && !historyOpen,
+                tooltipSide,
+                tooltip: "Component",
+                onClick: () => {
+                  setHistoryOpen(false);
+                  onModeChange("component");
+                },
+                children: /* @__PURE__ */ jsx2(MousePointer2, { size: 16, strokeWidth: 1.7 })
+              }
+            ) }),
+            MODES.filter((m) => m.mode !== "component").map(({ mode, label, icon: ModeIcon }) => /* @__PURE__ */ jsx2(
+              "div",
+              {
+                style: {
+                  maxHeight: modesExpanded ? 34 : 0,
+                  opacity: modesExpanded ? 1 : 0,
+                  transition: "max-height 200ms cubic-bezier(0.23, 1, 0.32, 1), opacity 150ms cubic-bezier(0.23, 1, 0.32, 1)"
+                },
+                children: /* @__PURE__ */ jsx2(
+                  IconButton,
+                  {
+                    active: selectedMode === mode && !historyOpen,
+                    tooltipSide,
+                    tooltip: label,
+                    onClick: () => {
+                      setHistoryOpen(false);
+                      onModeChange(mode);
+                      onCapture(mode);
+                    },
+                    children: /* @__PURE__ */ jsx2(ModeIcon, { size: 16, strokeWidth: 1.7 })
+                  }
+                )
+              },
+              mode
+            )),
+            /* @__PURE__ */ jsx2(
+              Separator,
+              {
+                vertical: false,
+                onClick: () => setModesExpanded((p) => !p)
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              HistoryButton,
+              {
+                open: historyOpen,
+                onClick: () => {
+                  setHistoryOpen((prev) => !prev);
+                },
+                selectedMode,
+                frameSettings,
+                onFrameSettingsChange,
+                panelSide,
+                tooltipSide,
+                bottom
+              }
+            )
+          ]
+        }
+      )
+    }
+  ) : null;
   return /* @__PURE__ */ jsx2(
     "div",
     {
@@ -1143,11 +1402,11 @@ function Toolbar({
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
-        background: "rgb(32, 32, 36)",
+        background: bg.base,
         borderRadius: 999,
         padding: 6,
-        boxShadow: "0 8px 32px rgba(0, 0, 0, 0.4)",
-        fontFamily: "system-ui, -apple-system, sans-serif",
+        boxShadow: shadow.toolbar,
+        ...fontBase,
         userSelect: "none"
       },
       children: bottom ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
@@ -1184,14 +1443,17 @@ function IconButton({
         style: {
           position: "absolute",
           ...tooltipStyle,
-          background: "rgb(32, 32, 36)",
-          border: "1px solid rgba(255, 255, 255, 0.1)",
+          background: bg.base,
+          border: `1px solid ${stroke.default}`,
           borderRadius: 6,
-          padding: "3px 8px",
-          color: "rgba(255, 255, 255, 0.88)",
-          fontSize: 11,
+          padding: "0 8px",
+          height: 24,
+          display: "flex",
+          alignItems: "center",
+          color: fg.strong,
+          ...text.label.xs,
           whiteSpace: "nowrap",
-          boxShadow: "0 8px 28px rgba(0, 0, 0, 0.28)",
+          boxShadow: shadow.tooltip,
           pointerEvents: "none"
         },
         children: tooltip
@@ -1208,13 +1470,13 @@ function IconButton({
           height: 32,
           borderRadius: "50%",
           border: "none",
-          background: active || hovered ? "rgba(255, 255, 255, 0.12)" : "transparent",
+          background: active || hovered ? state.hoverStrong : "transparent",
           display: "flex",
           alignItems: "center",
           justifyContent: "center",
           cursor: "pointer",
           padding: 0,
-          color: active || hovered ? "rgba(255, 255, 255, 0.96)" : "rgba(255, 255, 255, 0.52)",
+          color: active || hovered ? fg.strong : fg.sub,
           transition: "background 0.12s ease, color 0.12s ease"
         },
         children
@@ -1222,37 +1484,11 @@ function IconButton({
     )
   ] });
 }
-function SettingsButton({
-  open,
-  onClick,
-  selectedMode,
-  frameSettings,
-  onFrameSettingsChange,
-  panelSide,
-  tooltipSide,
-  bottom
-}) {
-  const verticalAlign = bottom ? { bottom: 0 } : { top: 0 };
-  const panelStyle = panelSide === "left" ? { right: "calc(100% + 10px)", ...verticalAlign } : { left: "calc(100% + 10px)", ...verticalAlign };
-  return /* @__PURE__ */ jsxs2("div", { style: { position: "relative" }, children: [
-    /* @__PURE__ */ jsx2(IconButton, { active: open, tooltipSide, tooltip: !open ? "Settings" : void 0, onClick, children: /* @__PURE__ */ jsx2(Settings, { size: 16, strokeWidth: 1.7 }) }),
-    open && /* @__PURE__ */ jsx2(
-      SettingsPanel,
-      {
-        style: { position: "absolute", ...panelStyle },
-        onClose: onClick,
-        selectedMode,
-        frameSettings,
-        onFrameSettingsChange
-      }
-    )
-  ] });
-}
 function DropItem2({
   children,
   onClick,
   active,
-  accent
+  accent: accent2
 }) {
   return /* @__PURE__ */ jsx2(
     "button",
@@ -1262,41 +1498,79 @@ function DropItem2({
         display: "block",
         width: "100%",
         padding: "7px 12px",
-        background: active ? "rgba(255, 255, 255, 0.08)" : "transparent",
+        background: active ? state.active : "transparent",
         border: "none",
-        color: accent ? "rgba(125, 211, 252, 0.96)" : "rgba(255, 255, 255, 0.86)",
+        color: accent2 ? accent.highlight : fg.strong,
         textAlign: "left",
         cursor: "pointer",
-        fontSize: 13,
+        ...text.paragraph.sm,
         fontFamily: "inherit"
       },
       children
     }
   );
 }
-function Separator({ vertical = true }) {
+function Separator({
+  vertical = true,
+  onClick
+}) {
   return /* @__PURE__ */ jsx2(
     "div",
     {
+      onClick,
       style: {
+        position: "relative",
         width: vertical ? 1 : 24,
         height: vertical ? 18 : 1,
-        background: "rgba(255,255,255,0.12)",
+        background: stroke.strong,
         flexShrink: 0,
-        margin: vertical ? "0 6px" : "6px 0"
-      }
+        margin: vertical ? "0 6px" : "6px 0",
+        cursor: onClick ? "pointer" : void 0
+      },
+      children: onClick && /* @__PURE__ */ jsx2("div", { style: { position: "absolute", inset: vertical ? "0 -8px" : "-8px 0" } })
+    }
+  );
+}
+function PanelTab({
+  children,
+  active,
+  onClick
+}) {
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      onClick,
+      style: {
+        flex: 1,
+        padding: "6px 0",
+        border: "none",
+        borderBottom: `2px solid ${active ? fg.strong : "transparent"}`,
+        background: "transparent",
+        color: active ? fg.strong : fg.muted,
+        ...text.label.xs,
+        fontFamily: "inherit",
+        cursor: "pointer",
+        transition: "color 0.12s ease, border-color 0.12s ease"
+      },
+      children
     }
   );
 }
 function HistoryButton({
   open,
   onClick,
+  selectedMode,
+  frameSettings,
+  onFrameSettingsChange,
   panelSide,
   tooltipSide,
   bottom
 }) {
+  const [activeTab, setActiveTab] = useState3("screenshots");
   const [toast, setToast] = useState3(null);
   const [pushing, setPushing] = useState3(false);
+  const [saveDir, setSaveDir] = useState3(null);
+  const [picking, setPicking] = useState3(false);
   const [repos, setRepos] = useState3([]);
   const [branches, setBranches] = useState3([]);
   const [screenshots, setScreenshots] = useState3([]);
@@ -1309,6 +1583,30 @@ function HistoryButton({
   const [editingFile, setEditingFile] = useState3(null);
   const [editValue, setEditValue] = useState3("");
   const [hoveredThumb, setHoveredThumb] = useState3(null);
+  useEffect2(() => {
+    if (!open) return;
+    fetch("/__afterbefore/config").then((r) => r.json()).then((data) => setSaveDir(data.saveDir)).catch(() => {
+    });
+  }, [open]);
+  const handlePickFolder = async () => {
+    setPicking(true);
+    try {
+      const res = await fetch("/__afterbefore/pick-folder", { method: "POST" });
+      const data = await res.json();
+      if (data.folder) {
+        await fetch("/__afterbefore/config", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ saveDir: data.folder })
+        });
+        setSaveDir(data.folder);
+      }
+    } catch {
+    } finally {
+      setPicking(false);
+    }
+  };
+  const shortDir = saveDir ? saveDir.replace(/^\/Users\/[^/]+/, "~") : "~/Desktop";
   useEffect2(() => {
     if (!open) {
       setRepoDropOpen(false);
@@ -1425,255 +1723,259 @@ function HistoryButton({
           maxWidth: 360,
           padding: "10px 12px",
           borderRadius: 12,
-          background: "rgb(32, 32, 36)",
-          border: "1px solid rgba(255, 255, 255, 0.1)",
-          boxShadow: "0 14px 36px rgba(0, 0, 0, 0.32)"
+          background: bg.base,
+          border: `1px solid ${stroke.default}`,
+          boxShadow: shadow.panel,
+          animation: "ab-panel-in 150ms cubic-bezier(0.23, 1, 0.32, 1)"
         },
         children: [
-          /* @__PURE__ */ jsx2(
-            "div",
+          /* @__PURE__ */ jsxs2("div", { style: { display: "flex", gap: 2, marginBottom: 10 }, children: [
+            /* @__PURE__ */ jsx2(PanelTab, { active: activeTab === "screenshots", onClick: () => setActiveTab("screenshots"), children: "Screenshots" }),
+            /* @__PURE__ */ jsx2(PanelTab, { active: activeTab === "settings", onClick: () => setActiveTab("settings"), children: "Settings" })
+          ] }),
+          activeTab === "settings" && /* @__PURE__ */ jsx2(
+            SettingsContent,
             {
-              style: {
-                fontSize: 11,
-                color: "rgba(255, 255, 255, 0.46)",
-                letterSpacing: "0.03em",
-                textTransform: "uppercase",
-                marginBottom: 10
-              },
-              children: "Screenshots"
+              frameSettings,
+              onFrameSettingsChange,
+              saveDir: shortDir,
+              picking,
+              onPickFolder: handlePickFolder
             }
           ),
-          /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: 6, marginBottom: 10 }, children: [
-            /* @__PURE__ */ jsx2(
-              FilterDropdown,
-              {
-                label: "Project",
-                value: selectedRepo,
-                options: repos,
-                isOpen: repoDropOpen,
-                onToggle: () => {
-                  setRepoDropOpen((p) => !p);
-                  setBranchDropOpen(false);
-                },
-                onSelect: (repo) => {
-                  setSelectedRepo(repo);
-                  setSelectedBranch(null);
-                  setRepoDropOpen(false);
+          activeTab === "screenshots" && /* @__PURE__ */ jsxs2(Fragment2, { children: [
+            /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: 6, marginBottom: 10 }, children: [
+              /* @__PURE__ */ jsx2(
+                FilterDropdown,
+                {
+                  label: "Project",
+                  value: selectedRepo,
+                  options: repos,
+                  isOpen: repoDropOpen,
+                  onToggle: () => {
+                    setRepoDropOpen((p) => !p);
+                    setBranchDropOpen(false);
+                  },
+                  onSelect: (repo) => {
+                    setSelectedRepo(repo);
+                    setSelectedBranch(null);
+                    setRepoDropOpen(false);
+                  }
                 }
-              }
-            ),
-            /* @__PURE__ */ jsx2(
-              FilterDropdown,
-              {
-                label: "Branch",
-                value: selectedBranch,
-                options: branches,
-                isOpen: branchDropOpen,
-                onToggle: () => {
-                  setBranchDropOpen((p) => !p);
-                  setRepoDropOpen(false);
-                },
-                onSelect: (branch) => {
-                  setSelectedBranch(branch);
-                  setBranchDropOpen(false);
+              ),
+              /* @__PURE__ */ jsx2(
+                FilterDropdown,
+                {
+                  label: "Branch",
+                  value: selectedBranch,
+                  options: branches,
+                  isOpen: branchDropOpen,
+                  onToggle: () => {
+                    setBranchDropOpen((p) => !p);
+                    setRepoDropOpen(false);
+                  },
+                  onSelect: (branch) => {
+                    setSelectedBranch(branch);
+                    setBranchDropOpen(false);
+                  }
                 }
-              }
-            )
-          ] }),
-          loading ? /* @__PURE__ */ jsx2(
-            "div",
-            {
-              style: {
-                padding: "12px 0",
-                textAlign: "center",
-                fontSize: 12,
-                color: "rgba(255, 255, 255, 0.35)"
-              },
-              children: "Loading..."
-            }
-          ) : screenshots.length === 0 ? /* @__PURE__ */ jsx2(
-            "div",
-            {
-              style: {
-                padding: "12px 0",
-                textAlign: "center",
-                fontSize: 12,
-                color: "rgba(255, 255, 255, 0.35)"
-              },
-              children: "No screenshots yet"
-            }
-          ) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
-            /* @__PURE__ */ jsx2(
+              )
+            ] }),
+            loading ? /* @__PURE__ */ jsx2(
               "div",
               {
                 style: {
-                  maxHeight: 240,
-                  overflowY: "auto",
-                  display: "flex",
-                  flexDirection: "column",
-                  gap: 8
+                  padding: "12px 0",
+                  textAlign: "center",
+                  ...text.paragraph.xs,
+                  color: fg.faint
                 },
-                children: screenshots.map((shot) => {
-                  const imgUrl = `/__afterbefore/history/image?repo=${encodeURIComponent(selectedRepo || "")}&branch=${encodeURIComponent(selectedBranch || "")}&file=${encodeURIComponent(shot.filename)}`;
-                  const isEditing = editingFile === shot.filename;
-                  return /* @__PURE__ */ jsxs2(
-                    "div",
-                    {
-                      style: {
-                        display: "flex",
-                        gap: 10,
-                        alignItems: "center"
-                      },
-                      children: [
-                        /* @__PURE__ */ jsxs2(
-                          "div",
-                          {
-                            style: {
-                              position: "relative",
-                              width: 56,
-                              height: 36,
-                              flexShrink: 0,
-                              borderRadius: 4,
-                              overflow: "hidden",
-                              cursor: "pointer"
-                            },
-                            onMouseEnter: () => setHoveredThumb(shot.filename),
-                            onMouseLeave: () => setHoveredThumb(null),
-                            onClick: () => setLightboxSrc(imgUrl),
-                            children: [
-                              /* @__PURE__ */ jsx2(
-                                "img",
-                                {
-                                  src: imgUrl,
-                                  alt: "",
-                                  style: {
-                                    width: 56,
-                                    height: 36,
-                                    objectFit: "cover",
-                                    border: "1px solid rgba(255, 255, 255, 0.1)",
-                                    borderRadius: 4,
-                                    background: "rgba(255, 255, 255, 0.05)",
-                                    display: "block"
-                                  }
-                                }
-                              ),
-                              /* @__PURE__ */ jsx2(
-                                "div",
-                                {
-                                  style: {
-                                    position: "absolute",
-                                    inset: 0,
-                                    background: "rgba(0, 0, 0, 0.55)",
-                                    display: "flex",
-                                    alignItems: "center",
-                                    justifyContent: "center",
-                                    borderRadius: 4,
-                                    opacity: hoveredThumb === shot.filename ? 1 : 0,
-                                    transition: "opacity 0.15s ease"
-                                  },
-                                  children: /* @__PURE__ */ jsx2(Eye, { size: 16, strokeWidth: 1.8, color: "rgba(255, 255, 255, 0.9)" })
-                                }
-                              )
-                            ]
-                          }
-                        ),
-                        /* @__PURE__ */ jsx2("div", { style: { flex: 1, minWidth: 0 }, children: isEditing ? /* @__PURE__ */ jsx2(
-                          "input",
-                          {
-                            autoFocus: true,
-                            value: editValue,
-                            onChange: (e) => setEditValue(e.target.value),
-                            onKeyDown: (e) => {
-                              if (e.key === "Enter") handleRename(shot.filename, editValue);
-                              if (e.key === "Escape") setEditingFile(null);
-                            },
-                            onBlur: () => handleRename(shot.filename, editValue),
-                            style: {
-                              width: "100%",
-                              fontSize: 12,
-                              color: "rgba(255, 255, 255, 0.88)",
-                              background: "rgba(255, 255, 255, 0.1)",
-                              border: "1px solid rgba(255, 255, 255, 0.2)",
-                              borderRadius: 4,
-                              padding: "2px 6px",
-                              outline: "none",
-                              fontFamily: "inherit"
-                            }
-                          }
-                        ) : /* @__PURE__ */ jsx2(
-                          "div",
-                          {
-                            onClick: () => {
-                              setEditingFile(shot.filename);
-                              setEditValue(shot.filename.replace(/\.png$/, ""));
-                            },
-                            style: {
-                              fontSize: 12,
-                              color: "rgba(255, 255, 255, 0.88)",
-                              cursor: "pointer",
-                              overflow: "hidden",
-                              textOverflow: "ellipsis",
-                              whiteSpace: "nowrap"
-                            },
-                            title: "Click to rename",
-                            children: formatTimestamp(shot.filename)
-                          }
-                        ) }),
-                        /* @__PURE__ */ jsx2(
-                          "button",
-                          {
-                            onClick: () => handleDelete(shot.filename),
-                            title: "Delete screenshot",
-                            style: {
-                              flexShrink: 0,
-                              width: 24,
-                              height: 24,
-                              borderRadius: 4,
-                              border: "none",
-                              background: "transparent",
-                              color: "rgba(255, 255, 255, 0.35)",
-                              cursor: "pointer",
-                              display: "flex",
-                              alignItems: "center",
-                              justifyContent: "center",
-                              padding: 0
-                            },
-                            onMouseEnter: (e) => {
-                              e.currentTarget.style.color = "rgba(239, 68, 68, 0.9)";
-                              e.currentTarget.style.background = "rgba(239, 68, 68, 0.1)";
-                            },
-                            onMouseLeave: (e) => {
-                              e.currentTarget.style.color = "rgba(255, 255, 255, 0.35)";
-                              e.currentTarget.style.background = "transparent";
-                            },
-                            children: /* @__PURE__ */ jsx2(Trash22, { size: 13, strokeWidth: 1.8 })
-                          }
-                        )
-                      ]
-                    },
-                    shot.filename
-                  );
-                })
+                children: "Loading..."
               }
-            ),
-            /* @__PURE__ */ jsx2(
+            ) : screenshots.length === 0 ? /* @__PURE__ */ jsx2(
               "div",
               {
                 style: {
-                  height: 1,
-                  background: "rgba(255, 255, 255, 0.08)",
-                  margin: "8px 0"
-                }
+                  padding: "12px 0",
+                  textAlign: "center",
+                  ...text.paragraph.xs,
+                  color: fg.faint
+                },
+                children: "No screenshots yet"
               }
-            ),
-            /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: [
-              /* @__PURE__ */ jsxs2(ActionButton, { onClick: handleOpenFolder, children: [
-                /* @__PURE__ */ jsx2(FolderOpen, { size: 13, strokeWidth: 1.8 }),
-                "Open Folder"
-              ] }),
-              /* @__PURE__ */ jsxs2(ActionButton, { onClick: handlePush, disabled: pushing, children: [
-                /* @__PURE__ */ jsx2(ArrowUp, { size: 13, strokeWidth: 1.8 }),
-                pushing ? "Pushing..." : "Push to PR"
+            ) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
+              /* @__PURE__ */ jsx2(
+                "div",
+                {
+                  style: {
+                    maxHeight: 240,
+                    overflowY: "auto",
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: 8
+                  },
+                  children: screenshots.map((shot) => {
+                    const imgUrl = `/__afterbefore/history/image?repo=${encodeURIComponent(selectedRepo || "")}&branch=${encodeURIComponent(selectedBranch || "")}&file=${encodeURIComponent(shot.filename)}`;
+                    const isEditing = editingFile === shot.filename;
+                    return /* @__PURE__ */ jsxs2(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          gap: 10,
+                          alignItems: "center"
+                        },
+                        children: [
+                          /* @__PURE__ */ jsxs2(
+                            "div",
+                            {
+                              style: {
+                                position: "relative",
+                                width: 56,
+                                height: 36,
+                                flexShrink: 0,
+                                borderRadius: 4,
+                                overflow: "hidden",
+                                cursor: "pointer"
+                              },
+                              onMouseEnter: () => setHoveredThumb(shot.filename),
+                              onMouseLeave: () => setHoveredThumb(null),
+                              onClick: () => setLightboxSrc(imgUrl),
+                              children: [
+                                /* @__PURE__ */ jsx2(
+                                  "img",
+                                  {
+                                    src: imgUrl,
+                                    alt: "",
+                                    style: {
+                                      width: 56,
+                                      height: 36,
+                                      objectFit: "cover",
+                                      border: `1px solid ${stroke.default}`,
+                                      borderRadius: 4,
+                                      background: state.subtle,
+                                      display: "block"
+                                    }
+                                  }
+                                ),
+                                /* @__PURE__ */ jsx2(
+                                  "div",
+                                  {
+                                    style: {
+                                      position: "absolute",
+                                      inset: 0,
+                                      background: "rgba(0, 0, 0, 0.55)",
+                                      display: "flex",
+                                      alignItems: "center",
+                                      justifyContent: "center",
+                                      borderRadius: 4,
+                                      opacity: hoveredThumb === shot.filename ? 1 : 0,
+                                      transition: "opacity 0.15s ease"
+                                    },
+                                    children: /* @__PURE__ */ jsx2(Eye, { size: 16, strokeWidth: 1.8, color: fg.strong })
+                                  }
+                                )
+                              ]
+                            }
+                          ),
+                          /* @__PURE__ */ jsx2("div", { style: { flex: 1, minWidth: 0 }, children: isEditing ? /* @__PURE__ */ jsx2(
+                            "input",
+                            {
+                              autoFocus: true,
+                              value: editValue,
+                              onChange: (e) => setEditValue(e.target.value),
+                              onKeyDown: (e) => {
+                                if (e.key === "Enter") handleRename(shot.filename, editValue);
+                                if (e.key === "Escape") setEditingFile(null);
+                              },
+                              onBlur: () => handleRename(shot.filename, editValue),
+                              style: {
+                                width: "100%",
+                                ...text.label.xs,
+                                color: fg.strong,
+                                background: state.hover,
+                                border: `1px solid ${stroke.interactive}`,
+                                borderRadius: 4,
+                                padding: "2px 6px",
+                                outline: "none",
+                                fontFamily: "inherit"
+                              }
+                            }
+                          ) : /* @__PURE__ */ jsx2(
+                            "div",
+                            {
+                              onClick: () => {
+                                setEditingFile(shot.filename);
+                                setEditValue(shot.filename.replace(/\.png$/, ""));
+                              },
+                              style: {
+                                ...text.label.xs,
+                                color: fg.strong,
+                                cursor: "pointer",
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                                whiteSpace: "nowrap"
+                              },
+                              title: "Click to rename",
+                              children: formatTimestamp(shot.filename)
+                            }
+                          ) }),
+                          /* @__PURE__ */ jsx2(
+                            "button",
+                            {
+                              onClick: () => handleDelete(shot.filename),
+                              title: "Delete screenshot",
+                              style: {
+                                flexShrink: 0,
+                                width: 24,
+                                height: 24,
+                                borderRadius: 4,
+                                border: "none",
+                                background: "transparent",
+                                color: fg.faint,
+                                cursor: "pointer",
+                                display: "flex",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                padding: 0
+                              },
+                              onMouseEnter: (e) => {
+                                e.currentTarget.style.color = feedback.error;
+                                e.currentTarget.style.background = feedback.errorBg;
+                              },
+                              onMouseLeave: (e) => {
+                                e.currentTarget.style.color = fg.faint;
+                                e.currentTarget.style.background = "transparent";
+                              },
+                              children: /* @__PURE__ */ jsx2(Trash22, { size: 13, strokeWidth: 1.8 })
+                            }
+                          )
+                        ]
+                      },
+                      shot.filename
+                    );
+                  })
+                }
+              ),
+              /* @__PURE__ */ jsx2(
+                "div",
+                {
+                  style: {
+                    height: 1,
+                    background: state.active,
+                    margin: "8px 0"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxs2("div", { style: { display: "flex", flexDirection: "column", gap: 2 }, children: [
+                /* @__PURE__ */ jsxs2(ActionButton, { onClick: handleOpenFolder, children: [
+                  /* @__PURE__ */ jsx2(FolderOpen, { size: 13, strokeWidth: 1.8 }),
+                  "Open Folder"
+                ] }),
+                /* @__PURE__ */ jsxs2(ActionButton, { onClick: handlePush, disabled: pushing, children: [
+                  /* @__PURE__ */ jsx2(ArrowUp, { size: 13, strokeWidth: 1.8 }),
+                  pushing ? "Pushing..." : "Push to PR"
+                ] })
               ] })
             ] })
           ] }),
@@ -1688,12 +1990,11 @@ function HistoryButton({
                 marginBottom: 8,
                 padding: "6px 12px",
                 borderRadius: 6,
-                fontSize: 12,
-                fontWeight: 500,
+                ...text.label.xs,
                 whiteSpace: "nowrap",
                 color: "white",
-                background: toast.type === "success" ? "rgba(34, 197, 94, 0.9)" : "rgba(239, 68, 68, 0.9)",
-                boxShadow: "0 2px 8px rgba(0,0,0,0.3)"
+                background: toast.type === "success" ? feedback.success : feedback.error,
+                boxShadow: shadow.toast
               },
               children: toast.message
             }
@@ -1701,65 +2002,68 @@ function HistoryButton({
         ]
       }
     ),
-    lightboxSrc && /* @__PURE__ */ jsxs2(
-      "div",
-      {
-        onClick: () => setLightboxSrc(null),
-        onKeyDown: (e) => {
-          if (e.key === "Escape") setLightboxSrc(null);
-        },
-        style: {
-          position: "fixed",
-          inset: 0,
-          bottom: 100,
-          zIndex: 2147483646,
-          background: "rgba(0, 0, 0, 0.85)",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "center",
-          cursor: "zoom-out"
-        },
-        children: [
-          /* @__PURE__ */ jsx2(
-            "img",
-            {
-              src: lightboxSrc,
-              alt: "",
-              onClick: (e) => e.stopPropagation(),
-              style: {
-                maxWidth: "90vw",
-                maxHeight: "calc(100% - 32px)",
-                borderRadius: 8,
-                boxShadow: "0 20px 60px rgba(0, 0, 0, 0.5)",
-                cursor: "default"
+    lightboxSrc && createPortal(
+      /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          "data-afterbefore": "true",
+          onClick: () => setLightboxSrc(null),
+          onKeyDown: (e) => {
+            if (e.key === "Escape") setLightboxSrc(null);
+          },
+          style: {
+            position: "fixed",
+            inset: 0,
+            zIndex: 2147483647,
+            background: "rgba(0, 0, 0, 0.85)",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            cursor: "zoom-out"
+          },
+          children: [
+            /* @__PURE__ */ jsx2(
+              "img",
+              {
+                src: lightboxSrc,
+                alt: "",
+                onClick: (e) => e.stopPropagation(),
+                style: {
+                  maxWidth: "90vw",
+                  maxHeight: "calc(100vh - 64px)",
+                  borderRadius: 8,
+                  boxShadow: "0 20px 60px rgba(0, 0, 0, 0.5)",
+                  cursor: "default"
+                }
               }
-            }
-          ),
-          /* @__PURE__ */ jsx2(
-            "button",
-            {
-              onClick: () => setLightboxSrc(null),
-              style: {
-                position: "absolute",
-                top: 16,
-                right: 16,
-                width: 32,
-                height: 32,
-                borderRadius: "50%",
-                border: "none",
-                background: "rgba(255, 255, 255, 0.15)",
-                color: "white",
-                cursor: "pointer",
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "center",
-                padding: 0
-              },
-              children: /* @__PURE__ */ jsx2(X2, { size: 18, strokeWidth: 2 })
-            }
-          )
-        ]
-      }
+            ),
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                onClick: () => setLightboxSrc(null),
+                style: {
+                  position: "absolute",
+                  top: 16,
+                  right: 16,
+                  width: 32,
+                  height: 32,
+                  borderRadius: "50%",
+                  border: "none",
+                  background: state.pressed,
+                  color: "white",
+                  cursor: "pointer",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  padding: 0
+                },
+                children: /* @__PURE__ */ jsx2(X2, { size: 18, strokeWidth: 2 })
+              }
+            )
+          ]
+        }
+      ),
+      document.body
     )
   ] });
 }
@@ -1776,9 +2080,8 @@ function FilterDropdown({
       "div",
       {
         style: {
-          fontSize: 11,
-          color: "rgba(255, 255, 255, 0.42)",
-          letterSpacing: "0.02em",
+          ...text.subheading.xxs,
+          color: fg.muted,
           marginBottom: 3
         },
         children: label
@@ -1798,11 +2101,11 @@ function FilterDropdown({
             height: 30,
             padding: "0 8px",
             borderRadius: 7,
-            border: "1px solid rgba(255,255,255,0.1)",
-            background: "rgba(255,255,255,0.07)",
-            color: "rgba(255,255,255,0.88)",
+            border: `1px solid ${stroke.default}`,
+            background: state.input,
+            color: fg.strong,
             cursor: "pointer",
-            fontSize: 12,
+            ...text.label.xs,
             fontFamily: "inherit"
           },
           children: [
@@ -1831,11 +2134,11 @@ function FilterDropdown({
             right: 0,
             maxHeight: 160,
             overflowY: "auto",
-            background: "rgb(32, 32, 36)",
-            border: "1px solid rgba(255, 255, 255, 0.1)",
+            background: bg.base,
+            border: `1px solid ${stroke.default}`,
             borderRadius: 8,
             padding: "4px 0",
-            boxShadow: "0 10px 30px rgba(0, 0, 0, 0.3)",
+            boxShadow: shadow.dropdown,
             zIndex: 1
           },
           children: options.map((opt) => /* @__PURE__ */ jsx2(
@@ -1872,9 +2175,9 @@ function ActionButton({
         width: "100%",
         padding: "6px 8px",
         border: "none",
-        background: hovered ? "rgba(255, 255, 255, 0.08)" : "transparent",
-        color: "rgba(255, 255, 255, 0.78)",
-        fontSize: 12,
+        background: hovered ? state.active : "transparent",
+        color: fg.default,
+        ...text.label.xs,
         borderRadius: 6,
         cursor: disabled ? "wait" : "pointer",
         textAlign: "left",
@@ -1907,18 +2210,18 @@ function Inspector({ onSelect, onCancel }) {
   const hoveredEl = useRef3(null);
   const styleEl = useRef3(null);
   useEffect3(() => {
-    const style = document.createElement("style");
-    style.setAttribute("data-afterbefore", "true");
-    style.textContent = [
+    const style2 = document.createElement("style");
+    style2.setAttribute("data-afterbefore", "true");
+    style2.textContent = [
       "* { cursor: crosshair !important; }",
       "[data-afterbefore], [data-afterbefore] * { cursor: auto !important; }",
       "[data-afterbefore] button, [data-afterbefore] label, [data-afterbefore] a { cursor: pointer !important; }",
       "[data-afterbefore] input, [data-afterbefore] textarea { cursor: text !important; }"
     ].join("\n");
-    document.head.appendChild(style);
-    styleEl.current = style;
+    document.head.appendChild(style2);
+    styleEl.current = style2;
     return () => {
-      style.remove();
+      style2.remove();
     };
   }, []);
   const isOverlayElement = useCallback3((el) => {
@@ -2015,12 +2318,15 @@ async function saveCapture(mode, dataUrl) {
   }
 }
 function AfterBefore() {
-  const { state, captureComplete, reset } = useOverlayState();
+  const { state: state2, captureComplete, reset } = useOverlayState();
   const [toolbarActive, setToolbarActive] = useState5(false);
   const [inspectorActive, setInspectorActive] = useState5(false);
   const [loading, setLoading] = useState5(false);
   const [selectedMode, setSelectedMode] = useState5("component");
   const [frameSettings, setFrameSettings] = useState5(DEFAULT_FRAME_SETTINGS);
+  useEffect4(() => {
+    injectInterFont();
+  }, []);
   useEffect4(() => {
     try {
       const stored = localStorage.getItem("ab-frame-settings");
@@ -2037,16 +2343,16 @@ function AfterBefore() {
     }
   }, []);
   useEffect4(() => {
-    if (state.phase === "ready") {
+    if (state2.phase === "ready") {
       const timer = setTimeout(() => {
         reset();
       }, 1500);
       return () => clearTimeout(timer);
     }
-  }, [state.phase, reset]);
+  }, [state2.phase, reset]);
   const handleToggle = useCallback4(() => {
     if (loading) return;
-    if (state.phase === "ready") {
+    if (state2.phase === "ready") {
       reset();
     }
     if (toolbarActive || inspectorActive) {
@@ -2061,7 +2367,7 @@ function AfterBefore() {
         setInspectorActive(false);
       }
     }
-  }, [state.phase, loading, toolbarActive, inspectorActive, selectedMode, reset]);
+  }, [state2.phase, loading, toolbarActive, inspectorActive, selectedMode, reset]);
   const performCapture = useCallback4(
     async (mode, element) => {
       setLoading(true);
@@ -2128,7 +2434,7 @@ function AfterBefore() {
       {
         expanded: toolbarActive,
         onToggle: handleToggle,
-        phase: state.phase,
+        phase: state2.phase,
         loading,
         selectedMode,
         onModeChange: handleModeChange,