From ef7d4803f71769ddf944fa21c89543583c22fcb9 Mon Sep 17 00:00:00 2001 From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com> Date: Wed, 20 May 2026 15:30:46 -0400 Subject: [PATCH] Text/Shape/Hand tools, Designer-tab restructure, rename to Artstr Studio - New left-palette tools: Hand (pan), Shape (drag to draw a primitive), Text (click to place). Removed the redundant sidebar add-buttons. - Pencil strokes now keep a constant on-screen thickness (pixel-space viewBox) instead of scaling with stroke length/aspect. - Restructured tabs: "Disc Designer" -> "Designer", which now hosts a Layout panel with Custom Art (default) + Disc Design; Custom Art moved off the Template tab. Underlying appMode/save-format unchanged. - Renamed the app from CaseWrap Studio to Artstr Studio (brand text only; Nostr tags and localStorage keys kept for compatibility); smaller one-line logo wordmark. - README updated for the new tabs, tools, and keyboard shortcuts. Co-Authored-By: Claude Opus 4.7 --- README.md | 46 +++-- TODO.md | 2 +- docs/BADGES_FEATURE.md | 6 +- docs/PEN_TOOL_FEATURE.md | 8 +- src/index.html | 413 +++++++++++++++++++++++++++++++-------- 5 files changed, 379 insertions(+), 96 deletions(-) diff --git a/README.md b/README.md index a6fd7a2..c22d3e7 100644 --- a/README.md +++ b/README.md @@ -1,19 +1,34 @@ -# CaseWrap Studio +# Artstr Studio -CaseWrap Studio is a static, browser-only design tool for printable physical media packaging — and increasingly, a general-purpose Nostr-native graphics editor. It started as a DVD/Blu-ray case wrap maker and now also covers Avery 8960/8944 disc labels, Avery 8693/8943 CD jewel-case inserts, single-disc designs, and free-form custom art canvases. Designs publish to and load from Nostr, are forkable and editable in place, and can be tipped via Lightning. +Artstr Studio is a static, browser-only design tool for printable physical media packaging — and increasingly, a general-purpose Nostr-native graphics editor. It started as a DVD/Blu-ray case wrap maker and now also covers Avery 8960/8944 disc labels, Avery 8693/8943 CD jewel-case inserts, single-disc designs, and free-form custom art canvases. Designs publish to and load from Nostr, are forkable and editable in place, and can be tipped via Lightning. -## Modes +## Tabs and layouts -The editor has two tools at the top level: +The editor has two tabs at the top level, each with its own Layout panel: - **Template** — designs that map to a real printed surface. - **Case cover** — DVD / Blu-ray wraps with separate front / spine / back artwork or a single combined wrap image. - **Disc labels** — Avery 8960 / 8944 sheets with two disc positions. - - **CD jewel inserts** — Avery 8693 / 8943 sheets with a front insert + tray insert. - - **Custom art** — free-form canvas with size presets (1920×1080, square sizes, etc.) or custom dimensions. Treats the project as generic art rather than packaging. -- **Disc Designer** — make a reusable single-disc design, publish it on Nostr, and import it later into either disc position of a disc-label sheet. + - **CD jewel inserts** — Avery 8693 / 8943 sheets with a front insert + tray insert (chosen via the Template preset). +- **Designer** — free-form and reusable designs. + - **Custom art** (the Designer tab's default) — a free-form canvas with size presets (1920×1080, square sizes, etc.) or custom dimensions. Treats the project as generic art rather than packaging. + - **Disc design** — a reusable single-disc design you can publish on Nostr and import later into either disc position of a disc-label sheet. -Each mode keeps its own metadata (title / identifiers / category / language) so loading a template in the Disc Designer doesn't overwrite the Designer's work in progress, and vice versa. +Each layout keeps its own metadata (title / identifiers / category / language) so switching layouts — or loading a project — doesn't overwrite a design already in progress. + +## Tools + +A left-edge tool palette drives canvas interaction; a matching right-edge panel +holds the active tool's options. Both are docked flush with the canvas. + +- **Select** (`V`) — select, move, resize, and rotate layers. +- **Hand** (`H`) — drag to pan the canvas. +- **Pen** (`P`) — click to place Bézier anchors, click-drag to pull curve handles; closing a path fills it. Selecting an existing pen path — or a primitive / single-path SVG via **Make editable path** — exposes draggable anchors and handles. +- **Pencil** (`B`) — freehand strokes, committed as vector paths at a constant on-screen thickness. +- **Shape** (`S`) — drag out a rectangle / rounded-rect / circle / ellipse / triangle / polygon / star / line. +- **Text** (`T`) — click to drop a text box, then type. + +The Pen / Shape / Text panels also edit the selected shape's fill and stroke. ## Layers @@ -26,7 +41,7 @@ Layers compose on top of the per-mode artwork: - **Custom path / SVG upload** — upload an `.svg` file. Single-path SVGs land as editable shapes; multi-element SVGs preserve their internal fills and stacking, with a per-element editor that lets you change each `` / `` / `` etc. fill and stroke individually. - **QR code** — encode any URL or text as a scannable QR layer. Adjustable error-correction level (L/M/Q/H), quiet zone, module / background colors, and an optional transparent background for placing over artwork. -Every layer supports drag / resize / rotate / opacity / z-order, an aspect-ratio lock toggle on the W/H inputs (default on), and a lock toggle that prevents accidental drags. +Every layer supports drag / resize / rotate / opacity / z-order, an aspect-ratio lock toggle on the W/H inputs (default on), a lock toggle that prevents accidental drags, and a visibility (eye) toggle in the layer list. ### Layer clipping / masking @@ -43,9 +58,16 @@ Cross-target and cross-tool copy/paste — Copy / Cut on a selected layer, Copy ## Editor canvas +The canvas is a unified, Illustrator-style workspace: the tool palette, the +scrolling canvas, the contextual options panel, and the zoom bar are docked +flush around the artboard. Sidebar panels are collapsible (click the heading); +they start collapsed except the Layout panel, and selecting a layer opens the +Layers panel automatically. + - **Undo / redo** — Ctrl+Z / Ctrl+Shift+Z (and Ctrl+Y), or the topbar buttons. A 50-deep in-memory history covering layer edits, mode switches, artwork loads, metadata, and more. Defers to the browser's native text-input undo while an input is focused. -- **Fit-to-view by default** — the canvas auto-scales so the whole artboard fits the preview area; it re-fits on window resize. A sticky zoom toolbar at the bottom of the canvas has zoom in/out, a 20–200% slider, Fit, and 1:1. +- **Fit-to-view by default** — the canvas auto-scales so the whole artboard fits the preview area; it re-fits on window resize. The bottom zoom bar has zoom in/out, a 20–200% slider, Fit, and 1:1. - **Off-canvas veil** — layer content that extends past the artboard edge renders under a translucent veil, so the printable area is always visually clear. The veil is dropped from PDF / JPEG export. +- **Keyboard** — `Delete` / `Backspace` removes the selected layer; arrow keys nudge it (`Shift` for a larger step); `[` / `]` send it back / forward; `Ctrl+D` duplicates; `Ctrl+C` / `X` / `V` copy / cut / paste a layer. ## Nostr integration @@ -74,7 +96,7 @@ Two flavors of Lightning are wired in: ## Save, share, restore - **Save project** writes the design (with metadata) to a JSON file. -- **Load from file** detects whether the JSON is a template or a disc design and switches the active tool automatically. +- **Load from file** detects which layout the JSON belongs to (cover / disc / jewel / custom art / disc design) and switches to it automatically. - **Publish to Nostr** opens a preview/metadata confirmation modal before signing. - **Copy share link** copies an `naddr1…` (replaceable-event address) or `nevent1…` (specific event id) URL. - **Copy event ID** is available once a project has been published. @@ -95,7 +117,7 @@ Two flavors of Lightning are wired in: - `src/index.html` — the complete single-file app. Open it directly in a browser, or serve it from any static host. Vercel rewrites in `vercel.json` map `/share/:id` and `/u/:npub` to the SPA entry. - `src/vendor/qrcode.min.js` — vendored QR encoder (used for Lightning tip invoices). -- `docs/` — feature specs for unbuilt work (badges, collections, NWC zaps, zap-gated templates). +- `docs/` — feature specs. `PEN_TOOL_FEATURE.md` covers the now-shipped pen / pencil / vector tooling; badges, collections, NWC zaps, and zap-gated templates are still unbuilt. - `TODO.md` — running list of deferred work and cleanup items. ## Schema diff --git a/TODO.md b/TODO.md index e07252c..94dc6c2 100644 --- a/TODO.md +++ b/TODO.md @@ -1,4 +1,4 @@ -# CaseWrap Studio — TODO +# Artstr Studio — TODO Running list of deferred work. Detailed specs for the larger items live in `docs/`. Each entry notes scope and where the spec is (if any). diff --git a/docs/BADGES_FEATURE.md b/docs/BADGES_FEATURE.md index 554b861..0e82870 100644 --- a/docs/BADGES_FEATURE.md +++ b/docs/BADGES_FEATURE.md @@ -79,7 +79,7 @@ to show on a profile: | `early-adopter` | Early Adopter | Joined before a cutoff date | Manual | | `verified-designer` | Verified Designer | Manually awarded by app admins | Manual | -App issues badges from a dedicated CaseWrap app keypair (not tied to any user's NIP-07 key). +App issues badges from a dedicated Artstr app keypair (not tied to any user's NIP-07 key). The app keypair's pubkey and private key are stored in the app's admin config. --- @@ -99,7 +99,7 @@ async function fetchProfileBadges(pubkey) { async function resolveDisplayBadges(pubkey) { const profileBadges = await fetchProfileBadges(pubkey); - // Filter to only CaseWrap-issued badges (by app issuer pubkey) + // Filter to only Artstr-issued badges (by app issuer pubkey) // Return array of { id, name, thumbUrl } for known badges } ``` @@ -193,7 +193,7 @@ Clicking yes publishes/updates their kind 30008 event via NIP-07. ## Future Enhancements - User-to-user badge awards ("Community Pick" badge that any user can nominate for) -- Badge showcase page listing all CaseWrap badges and current recipients +- Badge showcase page listing all Artstr badges and current recipients - Integration with zap receipts to auto-award "Zap Magnet" by scanning kind 9735 events --- diff --git a/docs/PEN_TOOL_FEATURE.md b/docs/PEN_TOOL_FEATURE.md index 6ac7ffb..4b68bc2 100644 --- a/docs/PEN_TOOL_FEATURE.md +++ b/docs/PEN_TOOL_FEATURE.md @@ -380,9 +380,11 @@ toggling the eye shows it again. bit jaggy — matches the project's early-web aesthetic. No smoothing slider, no Bézier fitting on freehand strokes. 2. **Pencil node-editability** — DECIDED: no. Only pen paths are - node-editable. Pencil `shape.pen.nodes` is still stored (for a possible - future re-pass) but the editor never shows draggable anchors for a - `tool: 'pencil'` path. + node-editable. A pencil stroke commits as a plain `kind: 'path'` layer + (no `shape.pen`); "Make editable path" still works on it by parsing the + `d` string. The pencil path is stored in a **pixel-space viewBox** + (1 unit = 1px) rather than a 0–100 one, so its `stroke-width` is a true + on-screen thickness — constant regardless of stroke length or direction. 3. **Closed pen path default fill** — DECIDED: yes, fill it on close with a solid accent color, so a finished closed path is immediately visible. The user can switch to none / gradient via the existing fill controls. diff --git a/src/index.html b/src/index.html index 45c99ee..2fbd6dd 100644 --- a/src/index.html +++ b/src/index.html @@ -3,7 +3,7 @@ - CaseWrap Studio + Artstr Studio @@ -135,12 +135,12 @@ } h1 { - font-size: 2.2rem !important; + font-size: 1.15rem !important; line-height: 1; margin: 0; font-family: 'Press Start 2P' !important; font-weight: normal !important; - letter-spacing: 0.12em; + letter-spacing: 0.06em; white-space: nowrap; color: #00d9ff; } @@ -417,11 +417,22 @@ } #layoutFieldset { order: 10; } + #designerLayoutFieldset { order: 10; } #coverSizeFieldset { order: 20; } #coverArtworkFieldset, #discArtworkFieldset, #jewelArtworkFieldset { order: 30; } #designerFieldset { order: 15; } + + /* The Designer-tab Layout panel spans both app modes (Custom Art runs as + a template mode, Disc Design as the designer mode), so it isn't keyed + off .template-only / .designer-only — show it for either. */ + #designerLayoutFieldset { display: none; } + body.app-designer #designerLayoutFieldset, + body.template-customart #designerLayoutFieldset { display: block; } + /* Custom Art now lives on the Designer tab, so the Template-tab Layout + panel hides while Custom Art is active. */ + body.template-customart #layoutFieldset { display: none !important; } #layersFieldset { order: 40; } #designerMetadataFieldset { order: 45; } #exportFieldset { order: 50; } @@ -572,6 +583,11 @@ font-size: .86rem; } + body.app-designer .status { + flex-basis: 100%; + justify-content: flex-start; + } + .pill { border: 1px solid var(--line); background: #fff; @@ -1678,6 +1694,7 @@ .toolPaletteBtn { width:36px; height:36px; display:flex; align-items:center; justify-content:center; border:1px solid transparent; border-radius:0; background:transparent; color:var(--ink); cursor:pointer; font-size:1.15rem; line-height:1; } .toolPaletteBtn:hover { background:rgba(127,127,127,.14); } .toolPaletteBtn.active { background:var(--accent); color:#fff; } + .toolPaletteDivider { height:1px; background:var(--line); margin:3px 2px; } .toolOptions { grid-area: options; display: flex; @@ -1701,6 +1718,9 @@ .penOverlay { position:absolute; inset:0; z-index:998; pointer-events:none; } body.tool-drawing .penOverlay { pointer-events:auto; cursor:crosshair; } body.tool-drawing .freeLayer { pointer-events:none !important; } + body.tool-hand .penOverlay { cursor:grab; } + body.tool-panning .penOverlay { cursor:grabbing; } + body.tool-text .penOverlay { cursor:text; } @media print { .toolPalette, .toolOptions, .penOverlay { display:none !important; } } body.exporting .toolPalette, body.exporting .toolOptions, body.exporting .penOverlay, body.exporting .canvasToolbar { display:none !important; } @@ -2048,8 +2068,8 @@
- -

CaseWrap

+ +

Artstr Studio

Design printable case wraps and disc labels, then save, print, or share them on Nostr.

@@ -2057,7 +2077,7 @@
- +
@@ -2079,7 +2099,6 @@
-
@@ -2356,6 +2375,14 @@ +
+ Layout +
+ + +
+
+
Disc Design @@ -2878,8 +2905,12 @@
+ + + +
+ +
@@ -2929,7 +2990,7 @@