diff --git a/src/help/panel-credits.md b/src/help/panel-credits.md new file mode 100644 index 0000000..0714810 --- /dev/null +++ b/src/help/panel-credits.md @@ -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', , , 'design-contributor']` +- `['link', '::', ]` + +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. diff --git a/src/help/panel-export.md b/src/help/panel-export.md new file mode 100644 index 0000000..34900f3 --- /dev/null +++ b/src/help/panel-export.md @@ -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. diff --git a/src/help/panel-layers.md b/src/help/panel-layers.md new file mode 100644 index 0000000..d3fac2e --- /dev/null +++ b/src/help/panel-layers.md @@ -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. diff --git a/src/help/panel-metadata.md b/src/help/panel-metadata.md new file mode 100644 index 0000000..ceb04d4 --- /dev/null +++ b/src/help/panel-metadata.md @@ -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:` + (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 `:`; 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. diff --git a/src/help/panel-print-save.md b/src/help/panel-print-save.md new file mode 100644 index 0000000..8e1f62a --- /dev/null +++ b/src/help/panel-print-save.md @@ -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 ` × 300` before + exporting. diff --git a/src/help/panel-tool-options.md b/src/help/panel-tool-options.md new file mode 100644 index 0000000..bb2749f --- /dev/null +++ b/src/help/panel-tool-options.md @@ -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. diff --git a/src/help/panels.md b/src/help/panels.md new file mode 100644 index 0000000..2fee026 --- /dev/null +++ b/src/help/panels.md @@ -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. diff --git a/src/index.html b/src/index.html index d9b2e6e..38830ac 100644 --- a/src/index.html +++ b/src/index.html @@ -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';