bump staging

components/board/BoardCanvas.tsx

@@ -2,8 +2,8 @@
 
 import { useContext, useRef, useState, useCallback, useEffect, useMemo } from "react";
 import { ProjectContext } from "@src/context/ProjectContext";
-import { getBoardMap } from "@src/lib/project/project-state";
-import BoardCard, { BoardCardData } from "./BoardCard";
+import { getBoardMap, BoardCardData, BoardArrowData } from "@src/lib/project/project-state";
+import BoardCard from "./BoardCard";
 import styles from "./BoardCanvas.module.css";
 import { v4 as uuidv4 } from "uuid";
 import { Trash2, Plus, Minus, Copy } from "lucide-react";
@@ -25,12 +25,6 @@ const DEFAULT_CARD_COLORS = [
     "#6b7280",
 ];
 
-export interface BoardArrowData {
-    id: string;
-    fromCardId: string;
-    toCardId: string;
-}
-
 interface CardContextMenuState {
     position: { x: number; y: number };
     card: BoardCardData;
@@ -460,6 +454,7 @@ const BoardCanvas = ({ isVisible }: { isVisible: boolean }) => {
     // Create new card on double-click
     const handleDoubleClick = useCallback(
         (e: React.MouseEvent) => {
+            e.preventDefault();
             if ((e.target as HTMLElement).closest(`.${styles.card}`)) return;
             if ((e.target as HTMLElement).closest(`.${styles.zoom_controls}`)) return;
             if ((e.target as HTMLElement).closest(`.${styles.hints}`)) return;

components/board/BoardCard.tsx

@@ -3,17 +3,7 @@
 import { useRef, useState, useCallback, useEffect } from "react";
 import styles from "./BoardCanvas.module.css";
 import { useTranslations } from "next-intl";
-
-export interface BoardCardData {
-    id: string;
-    title: string;
-    description: string;
-    color: string;
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-}
+import { BoardCardData } from "@src/lib/project/project-state";
 
 interface BoardCardProps {
     card: BoardCardData;
@@ -129,6 +119,7 @@ const BoardCard = ({
     const handleResizeStart = useCallback(
         (e: React.MouseEvent) => {
             e.stopPropagation();
+            e.preventDefault();
             resizeStart.current = {
                 x: e.clientX,
                 y: e.clientY,

components/dashboard/account/ProfileSettings.tsx

@@ -3,7 +3,7 @@
 import { useEffect, useState } from "react";
 import { editUserInfo, logout } from "@src/lib/utils/requests";
 import { useRouter } from "next/navigation";
-import { ArrowRight, Trash2 } from "lucide-react";
+import { ArrowRight, Trash2, Save } from "lucide-react";
 import { useTranslations } from "next-intl";
 
 import form from "./../../utils/Form.module.css";
@@ -226,6 +226,7 @@ const ProfileSettings = ({ dangerOpen, onDangerToggle }: { dangerOpen: boolean;
 
             <div className={sharedStyles.formActions}>
                 <button onClick={handleSave} className={`${sharedStyles.formBtn}`} disabled={loading || !isDirty}>
+                    <Save size={18} />
                     {loading ? t("saving") : tCommon("save")}
                 </button>
                 <button type="button" className={dangerStyles.arrowBtn} onClick={onDangerToggle} title={t("dangerZoneTitle")}>

components/dashboard/preferences/AppearanceSettings.tsx

@@ -10,6 +10,7 @@ import { useTheme } from "next-themes";
 import { useSettings } from "@src/lib/utils/hooks";
 import { useTranslations } from "next-intl";
 import Dropdown, { DropdownOption } from "@components/utils/Dropdown";
+import { Save } from "lucide-react";
 
 const THEME_COLORS: Record<
     string,
@@ -144,6 +145,7 @@ const AppearanceSettings = () => {
 
             <div className={sharedStyles.formActions}>
                 <button onClick={onSave} className={`${sharedStyles.formBtn} `}>
+                    <Save size={18} />
                     {tCommon("save")}
                 </button>
             </div>

components/dashboard/preferences/KeybindsSettings.tsx

@@ -11,6 +11,7 @@ import { tinykeys } from "@node_modules/tinykeys/dist/tinykeys";
 import { editUserSettings } from "@src/lib/utils/requests";
 import { DEFAULT_KEYBINDS, DefaultKeyBind, prettyPrintKeybind, UserKeybindsMap } from "@src/lib/utils/keybinds";
 import { useTranslations } from "next-intl";
+import { Save } from "lucide-react";
 
 export type KeybindElementProps = {
     id: string;
@@ -261,6 +262,7 @@ const KeybindsSettings = () => {
                     disabled={!hasUpdatedKeybinds}
                     className={`${sharedStyles.formBtn}`}
                 >
+                    <Save size={18} />
                     {t("save")}
                 </button>
             </div>

components/dashboard/project/DangerZone.module.css

@@ -1,7 +1,7 @@
 .arrowBtn {
     display: flex;
-    width: 36px;
-    height: 36px;
+    width: 40px;
+    height: 40px;
     flex-shrink: 0;
     border-radius: 50%;
     border: 2px solid var(--separator);

components/dashboard/project/ExportProject.tsx

@@ -12,11 +12,12 @@ import styles from "./ExportProject.module.css";
 import optionCard from "./OptionCard.module.css";
 import { importFilePopup } from "@src/lib/screenplay/popup";
 import { UserContext } from "@src/context/UserContext";
-import { getAdapterByExtension, getAdapterByFilename } from "@src/lib/adapters/registry";
+import { getAdapterByExtension } from "@src/lib/adapters/registry";
 import { BaseExportOptions } from "@src/lib/adapters/screenplay-adapter";
 import Dropdown, { DropdownOption } from "@components/utils/Dropdown";
 import { PDFExportOptions } from "@src/lib/adapters/pdf/pdf-adapter";
 import { ScriptioExportOptions } from "@src/lib/adapters/scriptio/scriptio-adapter";
+import { importFileIntoProject } from "@src/lib/import/import-project";
 
 export enum ExportFormat {
     PDF = "pdf",
@@ -68,26 +69,15 @@ const ExportProject = () => {
         const file = event.target.files?.[0];
         if (!file) return;
 
-        const adapter = getAdapterByFilename(file.name);
-        if (!adapter) {
-            console.error("Unsupported file type");
-            return;
-        }
-
-        const reader = new FileReader();
-        reader.onload = async (e) => {
-            const content = e.target?.result as ArrayBuffer;
-            if (!content || !editor) return;
-
-            const confirmImport = () => {
-                adapter.import(content, editor);
-                editor.commands.focus(); // Required to trigger pagination recompute
-            };
-
-            importFilePopup(userContext, confirmImport);
+        const confirmImport = async () => {
+            try {
+                await importFileIntoProject(file, editor, titlePageEditor, repository);
+            } catch (error) {
+                console.error("Import failed:", error);
+            }
         };
 
-        reader.readAsArrayBuffer(file);
+        importFilePopup(userContext, confirmImport);
         event.target.value = ""; // Reset input so the same file can be selected again if needed
     };
 

components/dashboard/project/LayoutSettings.module.css

@@ -75,6 +75,15 @@
     gap: 8px;
 }
 
+.labelRow {
+    display: flex;
+    gap: 16px;
+}
+
+.labelRow > div {
+    flex: 1;
+}
+
 .marginRow {
     display: flex;
     align-items: center;
@@ -98,12 +107,14 @@
 .marginInputWrapper {
     display: flex;
     align-items: center;
-    gap: 8px;
     background: var(--main-bg);
     border: 1px solid var(--separator);
     border-radius: 8px;
-    padding: 2px 10px;
+    padding: 0 2px;
     transition: border-color 0.2s ease;
+    gap: 0;
+    height: 40px;
+    box-sizing: border-box;
 }
 
 .marginInputWrapper:focus-within {
@@ -113,35 +124,67 @@
 .marginIcon {
     color: var(--secondary-text);
     flex-shrink: 0;
+    margin: 0 4px;
 }
 
 .marginInput {
-    width: 45px !important;
+    width: 36px !important;
     text-align: center;
-    padding: 6px 4px !important;
+    padding: 0 !important;
     font-size: 0.95rem;
     border: none !important;
     background: transparent !important;
     outline: none !important;
     box-shadow: none !important;
     color: var(--primary-text);
+    height: 100%;
 }
 
-/* Hide number input spinners */
+/* Hide native number spinners */
 .marginInput::-webkit-outer-spin-button,
 .marginInput::-webkit-inner-spin-button {
     -webkit-appearance: none;
     margin: 0;
 }
+
 .marginInput[type="number"] {
     -moz-appearance: textfield;
 }
 
+.marginStepGroup {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 0;
+}
+
+.marginStepBtn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 18px;
+    height: 10px;
+    border-radius: 2px;
+    border: none;
+    background: transparent;
+    color: var(--secondary-text);
+    cursor: pointer;
+    transition: all 0.2s ease;
+    padding: 0;
+}
+
+.marginStepBtn:hover {
+    background: var(--secondary);
+    color: var(--primary-text);
+}
+
 .marginUnit {
-    font-size: 0.85rem;
+    font-size: 0.8rem;
     color: var(--secondary-text);
     user-select: none;
     font-weight: 500;
+    margin-left: 2px;
+    margin-right: 4px;
 }
 
 .styleGroup {
@@ -150,7 +193,10 @@
     background: var(--main-bg);
     border: 1px solid var(--separator);
     border-radius: 8px;
-    padding: 4px;
+    padding: 0 4px;
+    height: 40px;
+    align-items: center;
+    box-sizing: border-box;
 }
 
 .styleBtn {