Add customizable profile layout system

Author: TFQ0

README.md

@@ -4,21 +4,30 @@ A browser-based editor for creating a personal GitHub profile README from one re
 
 The built-in TFQ0 design remains the canonical example, but users no longer need to edit eight SVG files by hand.
 
-## Design and media customization
+## Templates, layout, and media customization
 
-Configuration v2 adds three focused customization systems:
+Configuration v3 provides seven templates: Quality Control, Classic Terminal, Retro Arcade, Anime HUD, Bento Grid, Signal Poster, and Custom Canvas. The templates use generic, original interface elements and include no franchise characters, logos, or copied artwork.
 
-- Four ready-made visual presets: Quality Control, Classic Terminal, Retro Arcade, and Anime HUD. They use generic interface elements and include no franchise characters, logos, or copied artwork.
-- Curated font presets that map to controlled, SVG-safe font stacks rather than accepting arbitrary CSS.
-- Structured remote media entries for images and GIFs referenced by HTTPS URL, with accessibility and attribution information kept alongside each entry.
+The templates are more than palette swaps: they provide structurally distinct compositions that adapt independently to desktop and mobile output. Custom Canvas uses the same validated rendering system and offers constrained layout controls rather than unrestricted canvas editing.
 
-Applying a visual preset changes presentation without replacing a user's profile text, repositories, links, or media. Loading a complete sample is a separate, confirmed action. Valid v1 configurations migrate automatically when imported or restored from browser storage.
+The customization contract includes:
+
+- Responsive composition, alignment, spacing, and placement choices within safe layout bounds.
+- Two to six workflow steps, with an allowlisted safe shape selected for each step.
+- Decorative shapes described through a bounded SVG-safe DSL. The renderer converts validated shape data into SVG; users cannot insert arbitrary SVG elements or path commands.
+- Curated font presets that map to controlled, SVG-safe system font stacks.
+- Structured remote media entries for images and GIFs referenced by HTTPS URL, with accessibility and attribution information kept alongside each entry. Media remains separate README content and is not inserted into the generated hero canvas.
+
+Applying a template changes its visual system and layout defaults without replacing the user's profile text, repositories, links, sections, or media. Loading a complete sample is a separate, confirmed action that replaces profile content. Valid v1 and v2 configurations migrate automatically when imported or restored from browser storage.
+
+The editor does not accept arbitrary raw CSS, SVG markup, SVG paths, or remote fonts. Decorative elements are code-generated from allowlisted primitives and bounded numeric values.
 
 ## What it includes
 
 - Live desktop and mobile preview in dark and light themes.
 - Animated and reduced-motion/static SVG variants.
-- Design, font, profile, hero, project, skill, link, structured media, palette, section, Markdown, and footer editing.
+- Seven structurally distinct responsive templates plus constrained custom layout controls.
+- Design, font, profile, hero, workflow-step shape, decorative shape, project, skill, link, structured media, palette, section, Markdown, and footer editing.
 - Optional public GitHub repository import with no login or token.
 - Local autosave of the last valid configuration.
 - Versioned `profile.config.json` import/export.
@@ -29,13 +38,14 @@ Applying a visual preset changes presentation without replacing a user's profile
 
 ## Use the studio
 
-1. Open the app, choose a design, then select **Start a blank profile** or customize the TFQ0 example.
-2. Work through Profile, Hero, Projects, Skills, Links, Media, Colors, and Sections.
-3. Check the desktop/mobile, dark/light, and animated/static previews.
-4. Resolve validation errors and review any design warnings in Export.
-5. To keep only the image, choose its desktop/mobile, dark/light, and animated/static options, then select **Download SVG**.
-6. To publish the complete profile, download the ZIP instead.
-7. Upload its `README.md` and `assets/` directory to the public GitHub repository whose name exactly matches your username.
+1. Open the app and choose one of the seven templates, then adjust its constrained layout controls if desired.
+2. Select **Start a blank profile**, customize the TFQ0 example, or explicitly load another complete content sample.
+3. Work through Profile, Hero, workflow steps and shapes, Projects, Skills, Links, Media, Colors, and Sections.
+4. Check the desktop/mobile, dark/light, and animated/static previews. Responsive compositions can adapt between desktop and mobile rather than preserving identical coordinates.
+5. Resolve validation errors and review any design warnings in Export.
+6. To keep only the image, choose its desktop/mobile, dark/light, and animated/static options, then select **Download SVG**.
+7. To publish the complete profile, download the ZIP instead.
+8. Upload its `README.md` and `assets/` directory to the public GitHub repository whose name exactly matches your username.
 
 Keep the exported `profile.config.json`; importing it later restores an editable profile instead of requiring manual SVG changes.
 
@@ -62,7 +72,8 @@ The production site is written to `dist/`. Vite uses relative asset URLs, so the
 
 ```text
 src/
-├── domain/profile.ts       # strict versioned config and template metadata
+├── domain/profile.ts       # strict v3 config plus v1/v2 migration
+├── domain/presets.ts       # trusted template defaults and visual presets
 ├── generator/
 │   ├── svg.ts              # pure eight-variant SVG renderer
 │   ├── readme.ts           # GitHub README renderer
@@ -74,14 +85,15 @@ src/
 └── App.tsx                 # editor state and workflows
 ```
 
-`ProfileConfig` is the single source of truth. The visible preview, README source, SVG files, saved config, and ZIP are all produced from the same validated object. Imported GitHub data becomes an editable snapshot; it is never a hidden dependency of later exports.
+`ProfileConfig` is the single source of truth. The visible preview, README source, SVG files, saved config, and ZIP are all produced from the same validated object. Template, responsive layout, workflow-shape, and decorative-shape values are resolved through trusted renderer registries. Imported GitHub data becomes an editable snapshot; it is never a hidden dependency of later exports.
 
 ## Privacy and output safety
 
 - The editor has no backend and requests no GitHub token.
 - Drafts and the short-lived public repository cache stay in browser storage.
 - Only public repository metadata is fetched directly from GitHub's public API.
 - Generated SVGs contain no scripts, event handlers, remote fonts, external images, tracking, or live CI claims.
+- Layout and decorative SVG output is generated only from validated, bounded controls and allowlisted shape primitives; raw CSS, SVG markup, and path data are not accepted.
 - User-selected media is referenced by HTTPS URL in the README rather than copied into the ZIP or embedded in the generated hero SVG.
 - Previewing or viewing remote media may send an ordinary request to its third-party host. Remote content can disappear or change independently of the Studio.
 - Static fallbacks are generated for visitors who prefer reduced motion.

SETUP.md

@@ -21,14 +21,27 @@ npm run build
 
 These checks cover TypeScript, strict config parsing, all eight SVG variants, reduced-motion output, README-to-asset references, deterministic ZIP contents, unsafe input handling, public GitHub import errors, cache validation, and the WebMCP contract.
 
-For the v2 configuration, verification also covers every design and font preset, migration of valid v1 drafts, structured remote-media validation and attribution, rejection of unsafe media URLs, and preservation of user content when applying a visual preset.
+The v3 verification matrix must also cover:
 
-For a release, also inspect representative long content in desktop/mobile and dark/light previews. Design warnings are advisory because fixed SVG artwork cannot measure browser font metrics during generation.
+- Quality Control, Classic Terminal, Retro Arcade, Anime HUD, Bento Grid, Signal Poster, and Custom Canvas.
+- Every supported responsive composition in desktop and mobile output, including constrained alignment, spacing, and placement boundary values.
+- Two-step and six-step workflows, every allowlisted per-step shape, ordering, and text-fit limits.
+- Decorative shapes at their count and numeric boundaries, plus rejection of unknown primitives, excessive values, raw SVG, arbitrary path data, and CSS injection.
+- Every curated font preset and rejection of arbitrary font-family values or remote font references.
+- Migration of valid v1 and v2 drafts to v3, with user content and existing visual choices preserved.
+- Structured remote-media validation and attribution, rejection of unsafe media URLs, and confirmation that media remains separate HTTPS README content rather than hero SVG content.
+- Preservation of profile text, repositories, links, sections, and media when applying a template. Loading a complete sample must remain a separate confirmed replacement action.
+
+For a release, inspect all seven templates with representative and maximum-length content in desktop/mobile, dark/light, and animated/static previews. Confirm that compositions are visibly distinct, remain within the SVG viewBox, and adapt safely between desktop and mobile. Design warnings are advisory because fixed SVG artwork cannot measure browser font metrics during generation.
+
+Exercise the constrained custom layout controls at minimum and maximum values, then verify that the visible preview, downloaded current SVG, and matching ZIP asset render the same configuration. Check workflows with two and six steps and mix every safe step shape. Decorative-shape tests must confirm that generated primitives remain bounded and cannot obscure required text or controls.
 
 The preview toolbar can download its currently selected SVG by itself. Use the Export panel's complete ZIP when publishing the full README and all responsive theme variants.
 
 When changing the editor layout, inspect 1440 px, 1180 px, 900 px, 620 px, and 320 px viewport widths. Confirm that navigation and export actions remain reachable, keyboard focus remains visible, remote media stays within the preview, and no horizontal page overflow is introduced.
 
+Custom Canvas is constrained despite its name. Do not add arbitrary raw CSS, SVG markup, SVG path input, or remote fonts. Layouts, workflow shapes, and decorative shapes must be selected or composed through validated controls and code-generated renderer primitives.
+
 ## Production output
 
 `npm run build` creates the static site in `dist/`. The build uses relative asset paths and can be hosted at a domain root or a project subpath.

src/App.test.tsx

@@ -74,4 +74,64 @@ describe("Profile Studio workspace", () => {
       "preview-heading",
     );
   });
+
+  it("applies seven content-safe presets, customizes layout, and grows a six-step workflow", () => {
+    const presetCards = Array.from(
+      container.querySelectorAll<HTMLButtonElement>(".preset-card"),
+    );
+    expect(presetCards).toHaveLength(7);
+    expect(presetCards.map((card) => card.querySelector("strong")?.textContent)).toEqual([
+      "Quality Control",
+      "Classic Terminal",
+      "Retro Arcade",
+      "Anime HUD",
+      "Bento Grid",
+      "Signal Poster",
+      "Custom Canvas",
+    ]);
+    expect(container.querySelector(".generated-hero")?.textContent).toContain("TALAL ALQAHS");
+
+    const bento = presetCards.find((card) => card.textContent?.includes("Bento Grid"))!;
+    act(() => bento.click());
+
+    expect(bento.getAttribute("aria-pressed")).toBe("true");
+    expect(container.querySelector(".generated-hero")?.textContent).toContain("TALAL ALQAHS");
+    expect(container.querySelector(".generated-hero svg")?.getAttribute("data-composition")).toBe(
+      "bento",
+    );
+
+    const compositionLabel = Array.from(container.querySelectorAll("label")).find(
+      (label) => label.querySelector(".field-label-row > span")?.textContent === "Composition",
+    )!;
+    const composition = compositionLabel.querySelector("select")!;
+    act(() => {
+      composition.value = "poster";
+      composition.dispatchEvent(new Event("change", { bubbles: true }));
+    });
+
+    expect(composition.value).toBe("poster");
+    expect(bento.getAttribute("aria-pressed")).toBe("false");
+    expect(container.querySelector(".generated-hero svg")?.getAttribute("data-composition")).toBe(
+      "poster",
+    );
+
+    act(() => container.querySelector<HTMLButtonElement>("#step-hero")!.click());
+    const workflowCard = Array.from(container.querySelectorAll<HTMLElement>(".editor-card")).find(
+      (card) => card.querySelector("h3")?.textContent === "Workflow",
+    )!;
+    for (let count = 4; count < 6; count += 1) {
+      const addStep = Array.from(workflowCard.querySelectorAll<HTMLButtonElement>("button")).find(
+        (button) => button.textContent?.trim() === "Add step",
+      )!;
+      act(() => addStep.click());
+    }
+
+    expect(workflowCard.querySelector(".list-heading span")?.textContent).toBe("6/6");
+    expect(workflowCard.querySelectorAll("input[maxlength='12']")).toHaveLength(6);
+    expect(
+      Array.from(workflowCard.querySelectorAll("button")).some(
+        (button) => button.textContent?.trim() === "Add step",
+      ),
+    ).toBe(false);
+  });
 });