docs: sidebar-panel pages — left fieldsets + right Tool Options pane

Adds a "Sidebar panels" group to the in-app docs: - panels.md — overview + a table of every sidebar panel with where it lives + a one-liner - panel-metadata.md — Project Metadata fields (title, category, IMDb/UPC/TVDB/MBID/custom-tag/language) + how they feed publish + designer-mode equivalent - panel-layers.md — Layers panel — per-mode surface scoping (Cover/Disc/Jewel/Custom Art/Slide/Deck/ Pixel/Book), per-row controls, reorder + group + multi-select, layer-options field list - panel-export.md — Export options panel — show/print toggles for guides/bleed/safe/crops/fold, mode- specific hides - panel-print-save.md — Save / Open project JSON + Print/Save-as- PDF print-dialog tips + Export JPEG/PNG + mode-specific gotchas - panel-credits.md — Credits panel — Linked Designs contributor surfacing, tip button, publish-time tag emission, private-publish behaviour - panel-tool-options.md — Right-side floating Tool Options pane — how it switches between tool options and layer options, cross-links to per-tool docs Registered as a new "Sidebar panels" group ordered after Vector tools in the docs sidebar. Co-Authored-By: Claude Opus 4.7 <[email protected]>
2026-11-08 14:40:08 +00:00 · 2026-06-04 09:08:27 -04:00
1 parent 2d201ee522
commit e9f3682bff
@@ -0,0 +1,46 @@
+# Credits panel
+
+Surfaces every contributor whose published design you've imported
+into the current project — typically via a **Linked Designs** layer.
+
+## When the panel appears
+
+- Hidden by default.
+- Appears under Project Metadata once you add a layer whose source
+  is another author's Nostr event.
+- Hides again if you remove every linked layer.
+
+## What it shows
+
+For each contributor:
+
+- **Avatar + display name** — pulled from their kind-0 profile.
+- **One-line link count** — how many distinct linked designs of
+  theirs you've used.
+- **Tip button** — opens a lightning-tip flow if the author has
+  a `lud16` on their profile.
+
+## How it feeds publish
+
+At publish time the resolver walks the linked tree once and adds
+two tag families to your event:
+
+- `['p', <contributor-pubkey>, <relay-hint>, 'design-contributor']`
+- `['link', '<kind>:<pubkey>:<dTag>', <relay-hint>]`
+
+External clients reading your event can resolve those links and
+credit the right authors.
+
+## Private designs
+
+Private publishes intentionally **don't** emit the link / p tags
+(it would leak the link graph through unencrypted tags). The
+panel still shows you the credits in-app for awareness.
+
+## Tips
+
+- If a contributor's avatar shows as a placeholder, their profile
+  hasn't been cached yet — wait a few seconds for the profile
+  request to resolve.
+- Premium-locked linked sources are credited the same way once
+  you unlock them.
@@ -0,0 +1,47 @@
+# Export options panel
+
+Lives below the metadata + above the print/save panel. Controls
+what print marks render on the canvas + what gets included in the
+exported file.
+
+## Show / hide toggles
+
+These affect the **on-screen** display only — they're separate
+from the `print*` toggles below.
+
+- **Show guides** — trim lines around the artwork.
+- **Show bleed** — outer bleed boundary line.
+- **Show safe area** — interior safe zone.
+- **Show crops** — corner cut marks outside the trim.
+- **Show fold** — for cover wrap, the back↔spine + spine↔front
+  fold lines.
+
+## Print toggles
+
+These affect what gets included in the **exported** file
+(JPEG / PNG / PDF / print-dialog output):
+
+- **Print guides** — embed the trim guides in the output.
+- **Print crops** — embed corner cut marks in the output.
+- **Print bleed** — extend the output to include the bleed area.
+
+Printers usually want crop marks ON + bleed ON; production
+PDF + JPEG usually wants both OFF.
+
+## Mode interaction
+
+- The toggles are global per project; they apply to whichever mode
+  is active.
+- Pixel-art mode hides the export options entirely (pixel-art has
+  its own PNG / sprite-sheet / GIF exporters in the pixel toolbox).
+- Book mode hides them too while editing chapter markdown (chapter
+  pagination has its own controls); they reappear in the per-page
+  canvas editor + cover editor.
+
+## Tips
+
+- Toggle "Show crops" ON while designing to leave room around the
+  trim edges; toggle "Print crops" ON only when exporting for a
+  printer.
+- For social-media exports, leave every print* off — the output is
+  pixel-perfect to the trim.
@@ -0,0 +1,79 @@
+# Layers panel
+
+The persistent layer list on the left sidebar. Lists every layer
+on the **current surface** — switches automatically based on the
+active mode + which sub-surface you're editing.
+
+## How the layer list scopes per mode
+
+| Mode | Surfaces |
+|------|----------|
+| **Cover** | Back / Spine / Front (or one combined wrap). |
+| **Disc-label sheet** | Disc 1 / Disc 2. |
+| **Jewel inserts** | Jewel front / Jewel tray. |
+| **Custom Art / Slide** | One Canvas. |
+| **Deck (editing a slide)** | The slide's canvas. |
+| **Pixel art** | The pixel grid. |
+| **Book — page editor** | The current book page (master layers shown underneath as a translucent underlay). |
+| **Book — master editor** | The current master. |
+| **Book — cover editor** | Cover front / Spine / Back, switchable via the dropdown at the top of the panel. |
+| **Designer tab** | The single disc surface. |
+
+The **Target** dropdown at the top of the layer list picks which
+sub-surface a *new layer* gets added to. Adding from the canvas
+(drop image, draw shape, etc) automatically tags the new layer
+with the active surface.
+
+## Per-row controls
+
+Each row in the layer list shows:
+
+- **Visibility (eye)** — hide / show without removing.
+- **Lock** — refuse pointer input on the canvas. The row still
+  highlights but drag / select skip it.
+- **Name** — auto-named on creation; double-click to rename.
+- **Type chip** — small label showing image / text / shape / QR /
+  pixel-art / linked-design.
+
+## Reorder + group
+
+- **Drag** rows to reorder. Z-order on the canvas follows the
+  list order (top of the list = top of the stack).
+- **Cmd/Ctrl + ]** / **Cmd/Ctrl + [** sends selected layers
+  forward / backward.
+- **Shift+click** to multi-select; then drag a contiguous block.
+- **Group** — select multiple rows + click the Group button (or
+  Cmd/Ctrl + G) to collapse them under a single expandable row.
+  Groups have their own visibility / lock toggles that cascade.
+
+## Layer options (the per-layer right-side pane)
+
+Clicking a layer in the list (or selecting it on the canvas)
+populates a contextual options block in the right-side floating
+pane. Common controls:
+
+- **Position** — x / y / w / h in inches (or px in screen-DPI
+  modes). Aspect-ratio lock keeps width + height proportional.
+- **Rotation** — 0–360°.
+- **Opacity** — 0–1.
+- **Fit** — for image layers: cover / contain / fill / none.
+- **Clip** — clip-to-shape pulls another layer's path as the clip
+  source. Useful for clipping an image to an arbitrary outline.
+- **Color** — solid colour with the eyedropper inline.
+- **Premium gating** — per-layer paywall hint (gating intent only
+  in v1; full encrypted-publish path lives elsewhere).
+
+The exact fields differ by layer type — text layers show font /
+size / alignment, image layers show fit + src, shape layers show
+fill / stroke / per-anchor counts, etc.
+
+## Tips
+
+- Locking layers is the easiest way to prevent accidental moves
+  while you adjust adjacent ones.
+- The Layers panel hides in pixel-edit mode (the pixel editor has
+  its own frames + onion-skin controls) and in Book Pages overview
+  (no active surface).
+- For complex multi-layer art, group early — moving a group of
+  five layers as one is much faster than clicking them one at a
+  time.
@@ -0,0 +1,49 @@
+# Project Metadata panel
+
+Lives near the top of the left sidebar. The fields here feed both
+the local project file (when you Save as JSON) and the published
+Nostr event's discovery tags.
+
+## Fields
+
+- **Title** *(required for publish)* — the human-readable name of
+  your design. Used as the event's `title` tag + as part of the
+  d-tag for replaceable events. For books, also drives
+  `{book-title}` token resolution.
+- **Category** *(required for publish)* — discovery facet. The
+  picker offers common categories (movie / comic / book / album /
+  game / etc); custom values land as `category:custom`.
+- **IMDb ID** — for movies. Emits an `i` tag with `imdb:<id>`
+  (NIP-73). Lets you deduplicate against other community designs
+  for the same title.
+- **UPC / TVDB ID / MusicBrainz Disc ID** — same idea for other
+  media types. Each emits an `i` tag with its scheme prefix.
+- **Custom tag** — free-form discovery `t` tag. Lowercases +
+  hyphenates on emit.
+- **Language** — affects feed filters in the community browser.
+  Defaults to `en`.
+
+## How the fields feed publish
+
+When you click **Publish to Nostr**, the publish-confirm modal
+shows every metadata field with a side-by-side preview. Anything
+empty stays out of the event's tags. The event's d-tag is built
+from `<mode>:<imdbId-or-title>`; once published, re-publishing
+under the same d-tag replaces the event in place (NIP-33).
+
+## Designer-mode equivalent
+
+The Designer tab has its own metadata fieldset
+(`designerMetadataFieldset`) with the same fields but scoped to the
+single-disc design event (`casewrap-disc-design`). Switching tabs
+preserves both sets independently.
+
+## Tips
+
+- Setting an IMDb / UPC ID lets the community browser group your
+  design with other releases of the same title — useful for finding
+  forks + remixes.
+- Leave Category set sensibly: the default feed filters use it.
+- For private publishes, the metadata fields still emit but the
+  event's content is encrypted — tags stay public, only the design
+  payload is hidden.
@@ -0,0 +1,58 @@
+# Save / Print / Export panel
+
+The bottom panel in the left sidebar. Local-only output —
+publishing to Nostr lives in the top-right Publish flow, not here.
+
+## Save / Open (project JSON)
+
+- **Save project** — downloads a `.json` file containing the
+  entire project state (every layer, every mode's data, the
+  metadata, the visibility setting). One file per active design.
+- **Open project** — pick a saved JSON file. Loads it into the
+  current session, replacing the active project. Use case: round-
+  trip a design via email / a cloud-drive sync without going
+  through Nostr.
+
+## Print
+
+- **Print / Save as PDF** — opens the browser print dialog. Pick
+  **Save as PDF** in the destination dropdown to export to PDF.
+- The print toggles in the Export options panel above control
+  what gets included (bleed, crop marks, guides).
+
+### Print-dialog tips
+
+- Set **scale to 100%** — anything else changes the trim
+  dimensions.
+- Disable **headers and footers** — your browser may add page
+  numbers / URLs otherwise.
+- For double-sided cover wraps, print the same event twice
+  with a blank back the second time if your printer doesn't
+  duplex the spine correctly.
+
+## Export
+
+- **Export JPEG** — direct rasterised export at the artboard's
+  natural pixel size, JPEG-compressed (~0.92 quality). One file
+  per artboard.
+- **Export PNG** — same but as PNG (lossless). Sometimes available
+  only for modes that support transparent backgrounds.
+- Pixel-art mode has its own dedicated exports (PNG at multiple
+  scales, sprite sheet, animated GIF) in the pixel toolbox; the
+  panel here is hidden.
+- Book mode has its own dedicated **Export PDF…** flow (page range,
+  bleed, crop marks, split output) from the Pages overview toolbar.
+
+## Designer tab
+
+The Designer tab has a separate `designerPrintSaveFieldset` with
+the same buttons but scoped to the single-disc surface.
+
+## Tips
+
+- The JSON save is the fastest way to back up a draft you don't
+  want to publish yet — drop the file in a private cloud folder
+  + reopen anywhere.
+- For mass production, use the JPEG export at 300 DPI by tweaking
+  the artboard's pixel dimensions to `<inches> × 300` before
+  exporting.
@@ -0,0 +1,59 @@
+# Tool Options pane (right side)
+
+The floating panel next to the canvas. Its contents switch based on
+the active tool + the currently-selected layer. Empty until you
+pick a tool or a layer.
+
+## Two modes of content
+
+The pane swaps between two kinds of content depending on what's
+active:
+
+1. **Tool options** — when no layer is selected, shows the active
+   tool's drawing parameters (fill / stroke / size / kind etc).
+   These apply to the *next* layer you draw.
+2. **Layer options** — when a layer IS selected, shows that
+   layer's properties (x / y / w / h / rotation / opacity / fit /
+   clip / fill / type-specific fields). Edits apply live.
+
+You can have both modes briefly at once if you draw a new layer
+while a different layer is selected — the new layer's options
+take over the moment it lands.
+
+## Per-tool contents
+
+The per-tool docs cover the specific controls each tool surfaces:
+
+- [Pen tool](#/help/tool-pen) — Fill toggle + colour, Stroke
+  colour + width, mid-draw Finish / Cancel, path actions block
+  (Pointed corner / Curved smooth / Delete anchor / Average /
+  Join endpoints / Close path / Reverse direction).
+- [Pencil tool](#/help/tool-pencil) — Stroke colour + width.
+- [Shape tool](#/help/tool-shape) — Kind picker (rect / rounded
+  rect / circle / ellipse / triangle / polygon / star / line),
+  Fill toggle + colour, Stroke colour + width.
+- [Text tool](#/help/tool-text) — Font / Colour / Point size /
+  Alignment + Bold / Italic toggles.
+- [Direct Selection](#/help/tool-direct-select) — Hint + the
+  Path Actions block when anchors are selected.
+- [Eyedropper](#/help/tool-eyedropper) — no panel; uses the
+  active swatch.
+- [Select](#/help/tool-select) / [Hand](#/help/tool-hand) — no
+  panel of their own; they show the *selected layer's* options.
+
+## Per-layer contents
+
+When a layer is selected, the pane shows that layer's edit
+controls. See the [Layers panel](#/help/panel-layers) page for the
+full layer-options field list — the floating pane is the live
+edit surface for those fields.
+
+## Tips
+
+- The pane is intentionally floating + slim so it stays out of the
+  way on small viewports. On wider viewports it docks against the
+  right side of the canvas.
+- If you can't find a field you expect to see, check: (a) is the
+  right tool active? (b) is a layer of the right type selected?
+- Hiding the layers panel (sidebar collapse) does not hide the
+  Tool Options pane.
@@ -0,0 +1,29 @@
+# Sidebar panels — overview
+
+Artstr Studio has two stacks of panels around the canvas:
+
+- **Left sidebar** — persistent. Holds project metadata, the layout
+  picker, mode-specific settings, the layers list, and the export +
+  save/print buttons.
+- **Right pane** (the floating **Tool Options**) — contextual.
+  Changes based on the active tool + the selected layer.
+
+## Left-sidebar groups
+
+| Panel | What it covers |
+|-------|----------------|
+| [Project Metadata](#/help/panel-metadata) | Title, category, IDs, language, custom tag. |
+| Template type picker | Switches between Cover / Disc / Jewel / Custom Art / Slide / Deck / Pixel Art / Book — see the per-mode pages under *Template-mode layouts*. |
+| Mode-specific fieldsets | Cover size + artwork mode, Custom Art dimensions, Deck theme + import, Book document settings, etc. (Each mode's page covers its panel.) |
+| [Credits](#/help/panel-credits) | Linked-design contributors surfaced for attribution. |
+| [Layers](#/help/panel-layers) | The per-mode layer list. Where most of your interaction lives. |
+| [Export options](#/help/panel-export) | Show / hide / print guides + bleed + crops. |
+| [Save / Print](#/help/panel-print-save) | Project JSON save/open + Print/Save as PDF + Export JPEG/PNG. |
+
+## Right pane
+
+- [Tool Options](#/help/panel-tool-options) — overview of the
+  contextual pane and how it switches with the active tool.
+
+The per-tool sections under *Vector tools* (Pen, Shape, Text, etc)
+cover what each tool's contextual options do.
@@ -12067,6 +12067,13 @@
      { slug: 'pathfinder',      title: 'Pathfinder',         group: 'Vector tools', file: 'help/pathfinder.md' },
      { slug: 'align-distribute',title: 'Align & Distribute', group: 'Vector tools', file: 'help/align-distribute.md' },
      { slug: 'free-transform',  title: 'Free Transform',     group: 'Vector tools', file: 'help/free-transform.md' },
+      { slug: 'panels',             title: 'Overview',            group: 'Sidebar panels', file: 'help/panels.md' },
+      { slug: 'panel-metadata',     title: 'Project Metadata',    group: 'Sidebar panels', file: 'help/panel-metadata.md' },
+      { slug: 'panel-layers',       title: 'Layers',              group: 'Sidebar panels', file: 'help/panel-layers.md' },
+      { slug: 'panel-export',       title: 'Export options',      group: 'Sidebar panels', file: 'help/panel-export.md' },
+      { slug: 'panel-print-save',   title: 'Save / Print',        group: 'Sidebar panels', file: 'help/panel-print-save.md' },
+      { slug: 'panel-credits',      title: 'Credits',             group: 'Sidebar panels', file: 'help/panel-credits.md' },
+      { slug: 'panel-tool-options', title: 'Tool Options pane',   group: 'Sidebar panels', file: 'help/panel-tool-options.md' },
    ];
    const _docsCache = new Map(); // slug → rendered HTML
    let _docsActiveSlug = 'index';