From c5a04423ad3608b69856a92cb87cd7db389068cf Mon Sep 17 00:00:00 2001 From: thePR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com> Date: Mon, 18 May 2026 18:47:22 -0400 Subject: [PATCH] Draft vector shapes feature, prune shipped feature docs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit VECTOR_SHAPES_FEATURE.md plans a new shape layer type that subsumes primitives (rect / rounded-rect / circle / ellipse / polygon / star / line / custom SVG path) under a single discriminated kind, plus solid / linear-gradient / radial-gradient fills, strokes, and clip support that any layer type can use. JSON storage is purely additive, backwards compatible with existing payloads, and forward compatible for unknown shape kinds. Phased delivery: A primitives + solid fill, B gradients, C strokes, D custom paths, E masking. Pruned docs for features that have already shipped in this codebase: - COLOR_AND_FONT_LAYERS_FEATURE.md — color layers + font picker - CUSTOM_ART_MODE_FEATURE.md — custom-art template mode - EDIT_DESIGN_FEATURE.md — replaceable-event edit-in-place - LIGHTNING_ZAPS_FEATURE.md — LNURL-pay tip flow - PROFILE_PAGES_FEATURE.md — /u/:npub profile pages - STREAMING_RELAY_SYNC_FEATURE.md — progressive feed loading - TEMPLATE_FORKING_FEATURE.md — Fork off! flow - TRUST_AND_BLOCK_FEATURE.md — block / mute-sync / trust tiers / report - WOT_SOFT_MODERATION_FEATURE.md — hop-1 mute/report blur - ZAP_TRACKING_FEATURE.md — NIP-57 zap requests and receipt sums Co-Authored-By: Claude Opus 4.7 --- docs/COLOR_AND_FONT_LAYERS_FEATURE.md | 222 -------------- docs/CUSTOM_ART_MODE_FEATURE.md | 398 -------------------------- docs/EDIT_DESIGN_FEATURE.md | 209 -------------- docs/LIGHTNING_ZAPS_FEATURE.md | 361 ----------------------- docs/PROFILE_PAGES_FEATURE.md | 363 ----------------------- docs/STREAMING_RELAY_SYNC_FEATURE.md | 168 ----------- docs/TEMPLATE_FORKING_FEATURE.md | 162 ----------- docs/TRUST_AND_BLOCK_FEATURE.md | 248 ---------------- docs/VECTOR_SHAPES_FEATURE.md | 395 +++++++++++++++++++++++++ docs/WOT_SOFT_MODERATION_FEATURE.md | 239 ---------------- docs/ZAP_TRACKING_FEATURE.md | 241 ---------------- 11 files changed, 395 insertions(+), 2611 deletions(-) delete mode 100644 docs/COLOR_AND_FONT_LAYERS_FEATURE.md delete mode 100644 docs/CUSTOM_ART_MODE_FEATURE.md delete mode 100644 docs/EDIT_DESIGN_FEATURE.md delete mode 100644 docs/LIGHTNING_ZAPS_FEATURE.md delete mode 100644 docs/PROFILE_PAGES_FEATURE.md delete mode 100644 docs/STREAMING_RELAY_SYNC_FEATURE.md delete mode 100644 docs/TEMPLATE_FORKING_FEATURE.md delete mode 100644 docs/TRUST_AND_BLOCK_FEATURE.md create mode 100644 docs/VECTOR_SHAPES_FEATURE.md delete mode 100644 docs/WOT_SOFT_MODERATION_FEATURE.md delete mode 100644 docs/ZAP_TRACKING_FEATURE.md diff --git a/docs/COLOR_AND_FONT_LAYERS_FEATURE.md b/docs/COLOR_AND_FONT_LAYERS_FEATURE.md deleted file mode 100644 index f1108fe..0000000 --- a/docs/COLOR_AND_FONT_LAYERS_FEATURE.md +++ /dev/null @@ -1,222 +0,0 @@ -# Color Fill Layers + Text Font Family Picker - -## Goals -Expand the layer system with **two complementary additions**: - -1. A new `color` layer type — a solid-color rectangle, useful as a tint, background, or accent block. -2. A **font family picker** on existing `text` layers so creators aren't locked into the browser default. - -### Product goals -1. Add visual range without adding a new editor surface — both changes live in the existing layer panel. -2. Stay print-safe: no network-dependent fonts in v1. -3. No migration burden on existing payloads. - -### Non-goals (v1) -- Gradient or pattern fills (color layers are flat fill only). -- Strokes / borders on color layers. -- Google Fonts or any web-fetched fonts. -- Per-character font styling (text layer is one font for the whole block, same as today). -- Drop shadows, blur, or other effects. - ---- - -## Current state - -### Existing layer types -| Type | Fields beyond standard | Where rendered | -|---|---|---| -| `image` | `src`, `fit?` | main canvas, cover preview, disc-sheet preview, jewel preview, disc-design preview | -| `text` | `html`, `fontSize`, `color`, `align`, `bold`, `italic` | same 5 places | - -Standard fields shared by every layer: `id`, `type`, `name`, `target`, `x`, `y`, `w`, `h`, `rotate`, `opacity`, `z`. - -### Existing UI structure -- **Per-target panels** (`renderLayerList`): one collapsible panel per region (page / cover-trim / back / spine / front / disc-top / disc-bottom / jewel-front / jewel-tray / designer-disc). Each has an "Add image" URL input and an "Add text" button. -- **Selected-layer controls** (`#layerControls`): one shared `
` block that conditionally shows `#layerImageControls` for image layers and `#textLayerControls` for text layers via display:block/none. -- **Renderers** in 5 locations: - - `renderLayers()` — main editor canvas - - `renderTemplatePreviewDOM()` — cover preview in the template browser - - `renderDiscSheetPreviewDOM()` — disc sheet preview - - `renderJewelPreviewDOM()` — jewel preview - - `renderDiscPreviewDOM()` — disc-design preview - -Each renderer has the same `if (layer.type === 'text') { … } else if (layer.type === 'image' && layer.src) { … }` shape. - ---- - -## Color layer - -### Data model -```js -{ - id: 'layer-…', - type: 'color', - name: 'Color block', - target: '', - color: '#3b82f6', // hex string, accent blue default - x, y, w, h, // inches, same as image/text - rotate: 0, - opacity: 0.6, // default less than 1 so it reads as a tint - z: -} -``` - -### `addColorLayer(targetOverride)` helper -Sits next to `addImageLayer` / `addTextLayer` in the script. Same pattern: -- Resolve target from override or current `#layerTarget` value. -- Get `bounds = targetBounds(target)`. -- Insert centered, 70%×70% of the target bounds (same as image/text default sizing). - -### Add-button placement -Inside `renderLayerList`'s per-target panel, alongside the existing Add image / Add text controls. Markup roughly: -``` -[ image url input ] [ + Image ] [ + Text ] [ + Color ] -``` -Single inline button — no extra inputs needed at add time (color picker lives on the selected layer). - -### Selected-layer controls -Add a third sub-panel to `#layerControls`: -```html - -``` -Toggled in `updateSelectedLayerControls()` alongside the existing image/text panels. - -The existing **opacity** input applies to all layer types, so users can fine-tune the tint there. - -### Rendering -Each of the 5 render sites gets a new branch: -```js -} else if (layer.type === 'color') { - el.style.background = layer.color || '#000'; -} -``` -Place after the `text` branch, before the `image` branch (or wherever it fits each renderer's existing structure). - -The element already has `opacity`, `transform: rotate(…)`, position, and size set by the shared code. No extra work needed. - -### Defaults (locked in) -- Default color: `#3b82f6` (accent blue — obviously visible against most artwork). -- Default opacity: `0.6` (reads as tint, not as a blocker). -- Selectable / draggable / resizable just like image and text layers. - ---- - -## Text font family picker - -### Data model -Add one field to existing text layers: -```js -{ … , fontFamily: 'Arial, sans-serif' } -``` - -Existing text layers without `fontFamily` continue rendering with the browser default (no migration). - -### Font list (locked in, web-safe only) - -| Label | CSS value | -|---|---| -| System default | `inherit` | -| Sans-serif (Arial) | `Arial, Helvetica, sans-serif` | -| Sans-serif (Helvetica) | `Helvetica, Arial, sans-serif` | -| Sans-serif (Verdana) | `Verdana, Geneva, sans-serif` | -| Sans-serif (Trebuchet) | `"Trebuchet MS", sans-serif` | -| Sans-serif (Tahoma) | `Tahoma, Geneva, sans-serif` | -| Sans-serif (Arial Black) | `"Arial Black", sans-serif` | -| Sans-serif (Impact) | `Impact, "Arial Narrow Bold", sans-serif` | -| Serif (Times) | `"Times New Roman", Times, serif` | -| Serif (Georgia) | `Georgia, serif` | -| Serif (Palatino) | `"Palatino Linotype", "Book Antiqua", Palatino, serif` | -| Monospace (Courier) | `"Courier New", Courier, monospace` | -| Monospace (Consolas) | `Consolas, "Courier New", monospace` | -| Cursive (Comic Sans) | `"Comic Sans MS", "Comic Sans", cursive` | -| Cursive (Brush Script) | `"Brush Script MT", cursive` | - -Each `