fix: sync space name on switch and add import/export to Settings tab

- Fix stale space name in sidebar when creating or switching spaces by
  syncing editSpaceNameValue with the spaceName prop via useEffect
- Add import/export ZIP buttons to the Settings tab for discoverability
  (previously only on the Spaces tab)
- Add tests for both fixes

https://claude.ai/code/session_01WsFd9hPNmHcP9kJCj7fZHM

Author: claude

packages/ui/src/components/settings/SettingsModal.test.tsx

@@ -174,6 +174,28 @@ describe('SettingsModal', () => {
     expect(onClose).toHaveBeenCalled();
   });
 
+  it('shows export/import space buttons on settings tab when handlers provided', () => {
+    const onExportSpace = vi.fn();
+    const onImportSpace = vi.fn();
+    const onClose = vi.fn();
+    render(
+      <SettingsModal
+        {...defaultProps}
+        initialTab="settings"
+        onExportSpace={onExportSpace}
+        onImportSpace={onImportSpace}
+        onClose={onClose}
+      />,
+    );
+    const exportBtn = screen.getByTestId('settings-export-space-btn');
+    const importBtn = screen.getByTestId('settings-import-space-btn');
+    expect(exportBtn).toBeDefined();
+    expect(importBtn).toBeDefined();
+    exportBtn.click();
+    expect(onExportSpace).toHaveBeenCalled();
+    expect(onClose).toHaveBeenCalled();
+  });
+
   it('shows clear all data button in spaces tab', () => {
     render(<SettingsModal {...defaultProps} initialTab="spaces" />);
     expect(screen.getByTestId('settings-panel-spaces')).toBeDefined();

packages/ui/src/components/settings/SettingsModal.tsx

@@ -283,6 +283,39 @@ export function SettingsModal({
                   </button>
                 </label>
 
+                {(onExportSpace || onImportSpace) && (
+                  <>
+                    <div className="cept-settings-section-divider" />
+                    <h3 className="cept-settings-section-title">Import / Export</h3>
+                    <div className="cept-settings-actions">
+                      {onExportSpace && (
+                        <button
+                          className="cept-settings-action-btn"
+                          onClick={() => { onExportSpace(); onClose(); }}
+                          data-testid="settings-export-space-btn"
+                        >
+                          <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
+                            <path d="M8 2v8M5 5l3-3 3 3M3 11v2h10v-2" />
+                          </svg>
+                          Export space as ZIP
+                        </button>
+                      )}
+                      {onImportSpace && (
+                        <button
+                          className="cept-settings-action-btn"
+                          onClick={() => { onImportSpace(); onClose(); }}
+                          data-testid="settings-import-space-btn"
+                        >
+                          <svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.5">
+                            <path d="M8 10V2M5 7l3 3 3-3M3 11v2h10v-2" />
+                          </svg>
+                          Import space from ZIP
+                        </button>
+                      )}
+                    </div>
+                  </>
+                )}
+
                 <div className="cept-settings-section-divider" />
                 <button
                   className="cept-settings-danger-btn"

packages/ui/src/components/sidebar/Sidebar.test.tsx

@@ -212,6 +212,14 @@ describe('Sidebar', () => {
     expect(screen.getByText('My Workspace')).toBeDefined();
   });
 
+  it('updates displayed space name when spaceName prop changes', () => {
+    const { rerender } = render(<Sidebar pages={mockPages} spaceName="Demo Space" />);
+    expect(screen.getByText('Demo Space')).toBeDefined();
+    rerender(<Sidebar pages={mockPages} spaceName="New Project" />);
+    expect(screen.getByText('New Project')).toBeDefined();
+    expect(screen.queryByText('Demo Space')).toBeNull();
+  });
+
   it('renders back button when onBackToSpace is provided', () => {
     const onBackToSpace = vi.fn();
     render(<Sidebar pages={mockPages} onBackToSpace={onBackToSpace} />);

packages/ui/src/components/sidebar/Sidebar.tsx

@@ -80,6 +80,11 @@ export function Sidebar({
     position: { x: number; y: number };
   } | null>(null);
 
+  // Sync editSpaceNameValue when spaceName prop changes (e.g., after creating or switching spaces)
+  useEffect(() => {
+    setEditSpaceNameValue(spaceName ?? 'Space');
+  }, [spaceName]);
+
   const handleContextMenu = useCallback(
     (id: string, title: string, position: { x: number; y: number }) => {
       setContextMenu({ pageId: id, pageTitle: title, position });