openpencil/openspec/specs/app-menu/spec.md at 5139836816632e761bac68cbbd5d9b176516e9a6

Anton A S c6d70b501b Sync specs & docs with master: eval command, app menu, autosave, unified tools

2026-03-01 16:07:40 +03:00

7 KiB

Raw Blame History

Purpose

Browser-mode menu bar (src/components/AppMenu.vue) with File, Edit, View, Object, Text, and Arrange menus. Uses reka-ui Menubar components. Only visible when !IS_TAURI (Tauri provides native menus).

Requirements

The system SHALL display a menu bar in browser mode (!IS_TAURI) with File, Edit, View, Object, Text, and Arrange menus.

WHEN app runs in browser (not Tauri desktop)
THEN system displays menu bar at top of window

WHEN app runs in Tauri desktop mode
THEN system hides menu bar (Tauri provides native menus)

The system SHALL provide File menu with Open, Save, Save As, and Export actions.

Scenario: Open file

WHEN user clicks File → Open… or presses ⌘O (Ctrl+O on Windows/Linux)
THEN system opens file picker dialog

Scenario: Save file

WHEN user clicks File → Save or presses ⌘S
THEN system saves current document

Scenario: Save As

WHEN user clicks File → Save as… or presses ⌘⇧S
THEN system opens save dialog for new filename

Scenario: Export selection

WHEN user clicks File → Export selection… or presses ⌘⇧E with selection
THEN system exports selected nodes as PNG

Scenario: Export disabled when no selection

WHEN user has no selection
THEN system disables "Export selection…" menu item

The system SHALL provide Edit menu with undo, redo, clipboard, and selection actions.

Scenario: Undo

WHEN user clicks Edit → Undo or presses ⌘Z
THEN system reverts last action

Scenario: Redo

WHEN user clicks Edit → Redo or presses ⌘⇧Z
THEN system reapplies undone action

Scenario: Copy/Paste

WHEN user clicks Edit → Copy (⌘C) or Paste (⌘V)
THEN system performs clipboard operation

Scenario: Duplicate

WHEN user clicks Edit → Duplicate or presses ⌘D
THEN system duplicates selected nodes

Scenario: Delete

WHEN user clicks Edit → Delete or presses ⌫
THEN system removes selected nodes

Scenario: Select all

WHEN user clicks Edit → Select all or presses ⌘A
THEN system selects all nodes on current page

The system SHALL provide View menu with zoom and ruler controls.

Scenario: Zoom to fit

WHEN user clicks View → Zoom to fit or presses ⇧1
THEN system fits all content in viewport

Scenario: Zoom in

WHEN user clicks View → Zoom in or presses ⌘=
THEN system zooms in toward center

Scenario: Zoom out

WHEN user clicks View → Zoom out or presses ⌘-
THEN system zooms out from center

Scenario: Toggle rulers

WHEN user clicks View → Rulers or presses ⇧R
THEN system shows/hides canvas rulers

The system SHALL provide Object menu with grouping, framing, and component actions.

Scenario: Group selection

WHEN user clicks Object → Group or presses ⌘G
THEN system creates GROUP containing selected nodes

Scenario: Ungroup

WHEN user clicks Object → Ungroup or presses ⌘⇧G with grouped selection
THEN system dissolves group and reparents children

Scenario: Frame selection

WHEN user clicks Object → Frame selection or presses ⌘⌥F
THEN system wraps selected nodes in FRAME

Scenario: Create component

WHEN user clicks Object → Create component or presses ⌘⌥K
THEN system converts selection to COMPONENT

Scenario: Create component set

WHEN user clicks Object → Create component set with multiple components selected
THEN system creates COMPONENT_SET containing components

The system SHALL provide Text menu with font size and style controls.

Scenario: Font size adjustment

WHEN user clicks Text → Increase font size (⌘⇧>) or Decrease (⌘⇧<)
THEN system adjusts font size of selected text by 2px

Scenario: Bold toggle

WHEN user clicks Text → Bold or presses ⌘B
THEN system toggles bold weight for selected text

Scenario: Italic toggle

WHEN user clicks Text → Italic or presses ⌘I
THEN system toggles italic style for selected text

Scenario: Underline toggle

WHEN user clicks Text → Underline or presses ⌘U
THEN system toggles underline decoration for selected text

Scenario: Strikethrough toggle

WHEN user clicks Text → Strikethrough or presses S button
THEN system toggles strikethrough decoration for selected text

Scenario: Text alignment submenu

WHEN user clicks Text → Align → Left/Center/Right
THEN system aligns selected text horizontally

The system SHALL provide Arrange menu with z-order controls.

Scenario: Bring to front

WHEN user clicks Arrange → Bring to front or presses ]
THEN system moves selected node to top of parent's children

Scenario: Send to back

WHEN user clicks Arrange → Send to back or presses [
THEN system moves selected node to bottom of parent's children

Scenario: Bring forward

WHEN user clicks Arrange → Bring forward
THEN system moves selected node up one position

Scenario: Send backward

WHEN user clicks Arrange → Send backward
THEN system moves selected node down one position

Requirement: Keyboard shortcut display

The system SHALL display keyboard shortcuts next to menu items.

Scenario: Platform-specific modifier

WHEN app runs on Mac
THEN system displays ⌘ for Command key

Scenario: Windows/Linux modifiers

WHEN app runs on Windows or Linux
THEN system displays Ctrl+ for Control key

Requirement: reka-ui integration

The system SHALL use reka-ui Menubar components for menu implementation.

WHEN component renders
THEN system uses MenubarRoot, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem

Scenario: Submenus

WHEN menu has nested items (e.g., Text → Align)
THEN system uses MenubarSub, MenubarSubTrigger, MenubarSubContent

Scenario: Separators

WHEN menu defines separator: true
THEN system renders MenubarSeparator divider

Requirement: Action binding

The system SHALL bind menu actions to editor store methods.

Scenario: Calling store actions

WHEN user selects menu item
THEN system invokes corresponding method on useEditorStore (e.g., store.saveFigFile(), store.duplicateSelected())

7 KiB Raw Blame History

app-menu Specification