{# NO HEADING OF ITS OWN, and no close: this panel is the BODY of the card core builds for a loaded tool, and that card's header already carries the name, the key that opens it, an eye and an X. See views/toolLoader.js. Nothing is lifted into that header. Import, export and save act on the whole region set, but they are the END of the workflow this panel reads top to bottom -- tool, category, regions -- so they sit at the bottom of the body as a row of small pills, the way the image layer card carries its opacity and channel-names controls. A `data-tool-extras` div would have put them above the title instead, which is where the eye finds them first. #}

{# Only ever populated from a real file the user picked. #} {# One row of icons, no label above it: four tools whose glyphs say what they are, with the shortcut and the gesture in the tooltip rather than printed permanently underneath. Native `title` and not `data-tooltip`, because `.tool-card-body` clips its overflow and this is the first row in it -- a styled bubble would be cut off at the top edge. The three that MAKE a shape start disabled, because until the store has loaded this panel does not yet know whether there is a category to put one in -- and offering a live pen that refuses every stroke is worse than one that visibly waits. The first render decides. Freehand is the one already pressed. #} {# Making a category is the first thing to do in an empty project and a rare thing afterwards, so it is a button at the TOP of the section -- where the eye is already going -- that reveals a field, rather than a field standing open at the bottom under everything it creates. #}

Categories

{# Deliberately not a

. This markup is server-rendered and on screen before the plugin's scripts have finished loading, so for a moment there is nobody to call preventDefault -- and an Enter in that window submits natively and NAVIGATES THE PAGE, taking the panel and anything unsaved with it. No form, no default action to suppress. #} {# Categories with their regions nested under them, built by roiTree.js. A project starts with none: the names are the user's to choose, so the panel asks rather than shipping an "Uncategorized" nobody picked. #}

{# The name field is a step in the save, not part of the resting panel: the first click on Save opens it with the name already filled in, and the second click writes. Most saves are the same name as last time, so standing the field up permanently would spend three rows of a 288px column on a decision almost nobody is making. Enter writes, Escape and the x close it. #} {# Everything that leaves this panel, on one line of pills. Getting regions in and out is not the work -- the work is above -- so these are the size of the image layer card's own in-body controls rather than full-width buttons competing with the list. Exactly one save destination is ever offered: a project with a native file gets the write, and Export is the download beside it. When a cell table puts "Map to cells" on the row too, Import and Export drop to their icons so five controls still fit the column. #}

{# Only for a project that has cells. The save buttons write the polygons somewhere; this writes onto the rows, which is a different thing to want and is meaningless without a table -- so it is absent rather than disabled for a project that is nothing but an image. #} {# The one control on this panel whose result a user cannot see before pressing it -- it writes onto their own rows, and the rules it writes by (overlaps, image scope, what a blank means) do not fit in a line of hint text under a button. #}

{# Opened by the ? above. Plain