pagiera 0.2.0-alpha.61 → 0.2.0-alpha.63

package/dist/full-editor.js

@@ -115,6 +115,8 @@ function AiSettings({ mcp, available, enterToSend, onEnterToSend }) {
 import {
   IconArrowBackUp,
   IconArrowForwardUp,
+  IconArrowsMaximize,
+  IconArrowsMinimize,
   IconCommand,
   IconCode as IconCode2,
   IconComponents as IconComponents4,
@@ -10250,13 +10252,14 @@ function EditorShell({
   inspectorVisible = true,
   overlays,
   dock,
-  page
+  page,
+  focused = false
 }) {
   const hidden = page ? "hidden" : "";
   return (
     // `pg-scope` is the box the editor's stylesheet is confined to (see
     // scripts/build-full-css.mjs); it takes no space of its own.
-    /* @__PURE__ */ jsx24("div", { className: "pg-scope", style: { display: "contents" }, children: /* @__PURE__ */ jsxs20("div", { className: "pg-editor flex h-screen w-full flex-col overflow-hidden bg-ed-frame font-sans text-xs text-ed-text selection:bg-[var(--ed-accent-soft)]", children: [
+    /* @__PURE__ */ jsx24("div", { className: "pg-scope", style: { display: "contents" }, children: /* @__PURE__ */ jsxs20("div", { className: `pg-editor flex w-full flex-col overflow-hidden bg-ed-frame font-sans text-xs text-ed-text selection:bg-[var(--ed-accent-soft)] ${focused ? "fixed inset-0 z-[900] h-dvh" : "h-screen"}`, children: [
       /* @__PURE__ */ jsxs20("header", { className: "relative z-40 grid h-12 shrink-0 grid-cols-[260px_minmax(0,1fr)_288px] items-center gap-2 bg-ed-frame px-2", children: [
         /* @__PURE__ */ jsx24("div", { className: "flex min-w-0 items-center gap-1 px-1", children: toolbarLeft }),
         /* @__PURE__ */ jsx24("div", { className: "scrollbar-none flex h-full min-w-0 items-end justify-start gap-1 overflow-x-auto px-1", children: toolbarCenter }),
@@ -19499,6 +19502,39 @@ function Editor({
     }
     return !current;
   });
+  const [focusMode, setFocusMode] = useState20(false);
+  useEffect20(() => {
+    try {
+      setFocusMode(localStorage.getItem("pagiera:focus") === "1");
+    } catch {
+    }
+  }, []);
+  const toggleFocusMode = useCallback4(() => setFocusMode((current) => {
+    try {
+      localStorage.setItem("pagiera:focus", current ? "0" : "1");
+    } catch {
+    }
+    return !current;
+  }), []);
+  useEffect20(() => {
+    const onKey = (event) => {
+      if (!(event.ctrlKey || event.metaKey) || !event.shiftKey || event.altKey) return;
+      if (event.key.toLowerCase() !== "f") return;
+      event.preventDefault();
+      toggleFocusMode();
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [toggleFocusMode]);
+  useEffect20(() => {
+    if (!focusMode) return;
+    const root = document.documentElement;
+    const previous = root.style.overflow;
+    root.style.overflow = "hidden";
+    return () => {
+      root.style.overflow = previous;
+    };
+  }, [focusMode]);
   const frames = useMemo8(() => {
     if (showAllBreakpoints) return allFrames;
     const groups = /* @__PURE__ */ new Map();
@@ -22680,6 +22716,15 @@ function Editor({
     /* @__PURE__ */ jsx47("span", { className: "hidden text-[10px] text-ed-faint lg:block", children: "Curated responsive starting points" }),
     /* @__PURE__ */ jsx47(ChromeButton, { onClick: () => openLeftPanel("Layers"), children: "Back to canvas" })
   ] }) : /* @__PURE__ */ jsxs41(Fragment13, { children: [
+    /* @__PURE__ */ jsx47(
+      ToolButton,
+      {
+        label: focusMode ? "Exit focus mode (Ctrl+Shift+F)" : "Focus mode (Ctrl+Shift+F)",
+        active: focusMode,
+        onClick: toggleFocusMode,
+        children: focusMode ? /* @__PURE__ */ jsx47(IconArrowsMinimize, { size: 15, stroke: 1.7 }) : /* @__PURE__ */ jsx47(IconArrowsMaximize, { size: 15, stroke: 1.7 })
+      }
+    ),
     /* @__PURE__ */ jsx47("span", { className: "hidden lg:block", children: /* @__PURE__ */ jsx47(SaveIndicator, { status: saveStatus, error: saveError }) }),
     /* @__PURE__ */ jsx47("div", { className: "mx-0.5 hidden h-4 w-px bg-ed-border lg:block" }),
     componentMode ? null : /* @__PURE__ */ jsx47(Fragment13, { children: /* @__PURE__ */ jsxs41("div", { className: "relative flex items-stretch", children: [
@@ -23855,7 +23900,8 @@ function Editor({
       inspector,
       inspectorVisible: !workspacePage,
       page: workspacePage,
-      overlays
+      overlays,
+      focused: focusMode
     }
   );
 }