{
  "schema_version": "1.0.0",
  "challenge_slug": "canvely-app",
  "challenge_version": "1.0.0",
  "requirements": [
    {
      "id": "CANVELY-01",
      "title": "App frame",
      "description": "The screen shows an agent-designed Canvely wordmark, the workspace name \"Orchard Studio\", the file name \"Hazel & Rye — Spring Menu\", a toolbar with the Move, Rectangle, Ellipse, and Text tools, a layers panel, the canvas, and a properties panel."
    },
    {
      "id": "CANVELY-02",
      "title": "Initial document",
      "description": "On first load the view fits all three frames; every visible layer renders at its supplied position, size, rotation, fill, opacity, corner radius, stroke, and text; children stack in supplied order with the last child on top; frames clip their children, so the Sun ellipse is cut off at the Story frame's top and right edges; the hidden Old headline layer is not drawn; each frame shows its name on the canvas."
    },
    {
      "id": "CANVELY-03",
      "title": "Layers panel tree",
      "description": "The layers panel shows the full tree with the topmost layer of each parent listed first, a type indicator and name per row, and collapsible frames and groups; arrow keys move between rows while focus is in the panel; selecting a row selects the layer on the canvas, and a canvas selection highlights and reveals its row."
    },
    {
      "id": "CANVELY-04",
      "title": "Rename, hide, and lock",
      "description": "A row can be renamed in place and an empty name keeps the previous name; toggling visibility hides or shows the layer and everything inside it on the canvas; toggling lock prevents selecting, moving, resizing, and rotating the layer and everything inside it on the canvas, while a locked layer can still be selected through its row and then edited in the properties panel, duplicated, or deleted."
    },
    {
      "id": "CANVELY-05",
      "title": "Layer order",
      "description": "Dragging a row in the layers panel reorders the layer among its siblings and the canvas stacking updates to match; Ctrl/Cmd+] and Ctrl/Cmd+[ and a visible control move the selection one step forward or backward."
    },
    {
      "id": "CANVELY-06",
      "title": "Zoom around the pointer",
      "description": "Ctrl/Cmd+wheel zooms between 10% and 800% around the pointer, so the document point under the pointer stays under it, and never zooms the browser page."
    },
    {
      "id": "CANVELY-07",
      "title": "Pan and zoom controls",
      "description": "Wheel or trackpad scrolling and Space+drag pan the canvas; visible controls zoom in, zoom out, fit all content (also Shift+1), and reset to 100% (also Shift+0); the current zoom is shown as a percentage."
    },
    {
      "id": "CANVELY-08",
      "title": "Shape-accurate click selection",
      "description": "A click selects the topmost visible, unlocked layer under the pointer using its real shape: with the Ribbon unselected, a click above its upper-right edge but inside its bounding box selects nothing; clicking Menu title selects Menu title although the hidden Old headline lies above it; clicking the locked Background or a frame's empty area selects nothing."
    },
    {
      "id": "CANVELY-09",
      "title": "Group and frame selection",
      "description": "Clicking the Logo mark selects the Header group, a double-click selects the Logo lockup group, and a further double-click selects the Logo mark; Escape then selects the Logo lockup group, and Escape on a direct child of a frame clears the selection; a frame is selected by clicking its name on the canvas or its row."
    },
    {
      "id": "CANVELY-10",
      "title": "Multi-selection and marquee",
      "description": "Shift+click adds or removes a layer; dragging on an empty spot, including the locked Background, draws a marquee that selects the visible, unlocked direct children of that frame it intersects, with groups counted as one layer; a marquee started outside all frames selects the frames it intersects; a multi-selection shows one bounding box."
    },
    {
      "id": "CANVELY-11",
      "title": "Move and nudge",
      "description": "Dragging a selection moves it exactly with the pointer, apart from snapping, at a zoom below 50% and at a zoom above 200%; a frame moves by dragging its name; moving a group or frame moves everything inside it; Arrow keys move the selection by 1 px and Shift+Arrow by 10 px in document units."
    },
    {
      "id": "CANVELY-12",
      "title": "Snapping and guides",
      "description": "While a selection is dragged, its edges and center snap to the edges and centers of sibling layers and the parent frame within about 5 screen pixels at any zoom level; a visible guide line marks each active snap and disappears when the drag ends."
    },
    {
      "id": "CANVELY-13",
      "title": "Resize",
      "description": "A single selected layer shows eight resize handles; dragging a handle keeps the opposite edge or corner fixed; the current width and height are shown while resizing; resized text rewraps at the same font size; resizing a frame leaves its children in place relative to its top-left corner."
    },
    {
      "id": "CANVELY-14",
      "title": "Resize modifiers and limits",
      "description": "Holding Shift while resizing keeps the aspect ratio; holding Alt/Option resizes symmetrically around the center; width and height stop at 1 px and the layer never flips."
    },
    {
      "id": "CANVELY-15",
      "title": "Resize a rotated layer",
      "description": "With the Ribbon (rotated 30°) selected, the handles sit on its rotated outline; dragging any corner or edge handle resizes it along its own axes, keeps the opposite corner or edge fixed on screen, and leaves its rotation at 30°."
    },
    {
      "id": "CANVELY-16",
      "title": "Resize multiple layers and groups",
      "description": "Resizing a multi-selection of unrotated layers, or the Swatches group, scales each contained layer's position and size proportionally within the bounding box; setting the Swatches group's W from 296 to 148 in the properties panel gives each swatch W 44 at X 32, 84, and 136."
    },
    {
      "id": "CANVELY-17",
      "title": "Rotate",
      "description": "A single selected rectangle, ellipse, or text layer rotates around its center by dragging just outside a corner handle or a rotation handle; Shift snaps to 15° steps; the angle is shown while rotating and in the properties panel."
    },
    {
      "id": "CANVELY-18",
      "title": "Properties panel",
      "description": "For one selected layer the panel edits X, Y, W, H, rotation, opacity, and fill color, plus corner radius for rectangles and font size for text; X and Y are relative to the parent frame, so the Story headline shows X 32 and Y 176; values apply on Enter or blur; invalid input such as letters, a W below 1, or an opacity above 100% is rejected and the previous value restored; the fields update live while the layer is moved, resized, or rotated on the canvas."
    },
    {
      "id": "CANVELY-19",
      "title": "Mixed values",
      "description": "With several layers selected, each shared property shows the common value or a clear Mixed state, so selecting Menu title and Item 1 shows X as 40 and W as Mixed; entering a value applies it to every selected layer."
    },
    {
      "id": "CANVELY-20",
      "title": "Create layers",
      "description": "The Rectangle, Ellipse, and Text tools (also V, R, O, T) create a layer by dragging or at a default size by clicking; Shift constrains rectangles and ellipses to a square or circle; a layer drawn over a frame becomes its topmost child and one drawn outside all frames becomes a top-level layer; afterwards the Move tool is active and the new layer is selected and named by type with an increasing number."
    },
    {
      "id": "CANVELY-21",
      "title": "Text editing on the canvas",
      "description": "Double-clicking a text layer that sits directly in a frame, or pressing Enter with a text layer selected, edits its text in place at the layer's position, size, zoom level, and rotation, including the rotated Fresh daily text; typed text wraps within the box width; Escape or a click outside commits; committing empty text removes the text layer."
    },
    {
      "id": "CANVELY-22",
      "title": "Group and ungroup",
      "description": "Ctrl/Cmd+G groups two or more selected siblings into a new selected group at the stacking position of the topmost selected layer; Ctrl/Cmd+Shift+G ungroups while keeping the children selected, in place, and in stacking order; frames, and layers with different parents, are not grouped and a visible message explains why; the layers panel reflects every change."
    },
    {
      "id": "CANVELY-23",
      "title": "Duplicate and delete",
      "description": "Ctrl/Cmd+D and a visible control duplicate the selection, including all children of groups and frames, with each copy 10 px right and 10 px down directly above its original, and select the copies; Delete, Backspace, and a visible control remove the selection."
    },
    {
      "id": "CANVELY-24",
      "title": "Undo and redo",
      "description": "Ctrl/Cmd+Z, Ctrl/Cmd+Shift+Z, and visible controls undo and redo at least 50 steps; each completed move, resize, rotation, property edit, reorder, group, ungroup, rename, visibility or lock change, creation, deletion, duplication, Arrow key press, and text-editing session is exactly one step; creating a text layer together with its first edit is one step, and a new text layer committed empty leaves no step; selection and view changes are not steps; a new change after an undo clears the redo history."
    },
    {
      "id": "CANVELY-25",
      "title": "Persistence and reset",
      "description": "Document changes survive a page reload through local storage without cookies; a reset demo action, after a confirmation step, restores the supplied document and clears the history."
    },
    {
      "id": "CANVELY-26",
      "title": "Keyboard access",
      "description": "Every control is reachable by keyboard with a visible focus indicator and an accessible name; editor shortcuts take precedence over matching browser shortcuts and do not fire while typing in a text field or editing text on the canvas."
    },
    {
      "id": "CANVELY-27",
      "title": "Mobile layout",
      "description": "At 390px viewport width the document has no horizontal overflow; the canvas is visible, a one-finger touch drag on empty canvas pans it, and visible controls zoom it; layers can be selected by tapping the canvas and through the layers panel; the selection's properties can be edited; undo and redo are reachable."
    },
    {
      "id": "CANVELY-28",
      "title": "Fictional product notice",
      "description": "The visible verbatim note \"Canvely is a fictional product created for UIBenchmark.\" appears on the screen."
    },
    {
      "id": "CANVELY-29",
      "title": "Static production output",
      "description": "The production build outputs a static site under dist/ that renders the editor without a development server and without external network requests."
    }
  ]
}