mirror of
https://github.com/PR0M3TH3AN/Artstr-Studio.git
synced 2026-11-03 20:20:56 +00:00
20cbe78805d7e66f36b004cea27b0c2fa1a1fef1
Template browser cards now render WYSIWYG mini-previews instead of just the background image. Each card shows the full layered composition (color fills, text, image layers, slot artwork) at thumbnail scale, with the design's natural silhouette preserved — discs stay circular, sheets stay rectangular, cover stays wide. Preview renderers (4 total): - Added a `compact` option to renderTemplatePreviewDOM, renderDiscSheetPreviewDOM, renderJewelPreviewDOM, renderDiscPreviewDOM. When compact: drop labels (BACK/SPINE/FRONT, Disc 1/2, FRONT/TRAY, sheet titles), drop shadow, drop border lines. - Compact mode renders each preview at a fixed natural pixel size (720 wide for sheets, 380 for disc-design); fitMiniPreview applies a CSS transform: scale() to fit the thumb. Everything — text, layer positions, slot art — scales together so the mini is a true miniature of what `Preview` shows. Disc-design preview specific fixes: - Was the only renderer not sorting layers by z, so they rendered in array order and a higher-z layer added earlier could be hidden behind a lower-z layer added later. Now sorted ascending and stacked in DOM. - Added explicit z-index values matching the disc-sheet renderer (bg img z:1, layers z:3+sortedIndex, hole z:12) to avoid stacking context surprises from the per-layer transform: rotate(). - Used Number(layer.x) etc. for defensive coercion of legacy payloads. - Made the center hole percentage-sized so it scales with the disc. Cover preview fix: - Dropped the unnecessary `row` wrapper that broke mini-preview sizing. preview is appended directly to container, same shape as the other three renderers. The `!hasArtwork` early-return now only fires in non-compact mode so empty covers still show their silhouette in the card thumb. UI polish: - Close button (×) in the top-right corner of the welcome modal. - Both "Close project" buttons (template-mode and disc-designer) now use the .danger class to match the styling of the other destructive buttons in their panels. Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
CaseWrap Studio
CaseWrap Studio is a static print-layout editor for physical media packaging. It supports DVD/Blu-ray case wraps, Avery 8960/8944 disc-label sheets, Avery 8693/8943 CD jewel-case insert sheets, and reusable single-disc designs.
What it supports
- Separate front, spine, and back case artwork (or one combined wrap image)
- Disc-label sheet mode (two print positions on one Avery 8960/8944 sheet)
- CD jewel insert mode (front + tray inserts on one Avery 8693/8943 sheet)
- Disc Designer mode for creating a reusable single-disc design
- Additional image and text layers
- Drag positioning, z-order changes, rotation, sizing, and opacity
- PDF export through the browser print dialog
- Nostr community browsing/sharing for templates and disc designs
- Publishing, replies, reactions, follows, and reposts from inside the app
Important workflow
All image sources are remote URLs.
That means:
- Case art, disc art, jewel insert art, and extra image layers should use
httporhttpsURLs - Saved project JSON remains portable across machines
- Exported/copied Nostr events can reconstruct layouts from event content
- Community feed data comes from relays listed in the Community panel
- Publishing/social actions require a NIP-07 browser extension (for example Alby or nos2x)
If a URL stops working later, the image will no longer render. For long-term reliability, use stable hosted URLs.
Main file
src/index.htmlis the complete app entrypoint. Open it directly in a browser or serve it from any static host.
Export and print
- Use
Print / Save PDFfor print-ready output - Keep browser scale at
100% - Disable browser headers and footers
Save, restore, and sharing
Save projectwrites project JSONLoad projectrestores project JSONCopy Nostr eventcopies a signed event payloadImport from Nostrrestores a template/design from a copied event- The Community modal lets you browse New/Popular/Search/Mine, preview templates, and import them
- Disc designs can be published and reused independently, then imported into Disc 1 or Disc 2 positions on a disc sheet
Nostr data model
- Template/design payloads are published as kind
30078app-data events withcasewraptags - Typical social events use standard kinds (
1,7,6,3,0) - Template modes include
cover,disc,jewel, anddisc-design - Current schema version is
5; minimum supported schema version is4
Notes
- The app is fully static and does not require a backend
- Local browser autosave is still available
- Older saved projects with embedded data URLs may still load, but new work should use remote URLs
Description
A static site DVD and Blu-Ray Case and disk label designer
Readme
5.7 MiB
0 Stars
1 Watchers
0 Forks
Languages
JavaScript
99.7%
HTML
0.3%