Enhance SVG wallpaper realism via gap analysis: enrich sparse void motifs and mode composers#110
Draft
Enhance SVG wallpaper realism via gap analysis: enrich sparse void motifs and mode composers#110
Conversation
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
- Created a new SVG template for "Night Aurora Mountains" to enhance visual variety in night scenes. - Added JSON scene templates for "Desert Night," "Eclipse Corona," and "Ocean Night," each with distinct layers for sky gradients, star fields, and other atmospheric elements. - Introduced a vignette SVG template for radial gradient edge darkening to improve depth and focus in scenes.
Co-authored-by: Anselmoo <13209783+Anselmoo@users.noreply.github.com>
Copilot
AI
changed the title
[WIP] Improve SVG generation based on gap analysis
Enhance SVG wallpaper realism via gap analysis: enrich sparse void motifs and mode composers
Mar 3, 2026
There was a problem hiding this comment.
Pull request overview
Adds an SVG template/scenes system and expands wallpaper generation + UI tooling to increase scene layering density (especially for sparse “Void” variants and mode composers), and to provide a manifest-driven gallery/composer UI.
Changes:
- Introduces an SVG template engine (templates, fragments, scene manifests) with Vitest coverage.
- Expands wallpaper rendering primitives (bricks), motifs, and mode composers; adds wallpaper generation/manifest/bundling scripts.
- Adds new Vue routes and views for wallpaper browsing and interactive composition.
Reviewed changes
Copilot reviewed 78 out of 96 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/wallpaper/types.ts | Adds shared wallpaper/type definitions for bricks, motifs, composers, and manifests. |
| src/wallpaper/templates/vignette.svg | Adds reusable vignette template for edge darkening. |
| src/wallpaper/templates/scenes/ocean-night.scene.json | Adds scene manifest for an ocean night composition. |
| src/wallpaper/templates/scenes/eclipse-corona.scene.json | Adds scene manifest for eclipse/corona composition. |
| src/wallpaper/templates/scenes/desert-night.scene.json | Adds scene manifest for desert night composition. |
| src/wallpaper/templates/fragments/wave-crest.svg | Adds wave crest fragment for ocean scene layering. |
| src/wallpaper/templates/fragments/vignette-overlay.svg | Adds vignette overlay fragment for scene manifests. |
| src/wallpaper/templates/fragments/star-field-sparse.svg | Adds sparse star-field fragment. |
| src/wallpaper/templates/fragments/star-field-dense.svg | Adds dense star-field fragment + Milky Way blur. |
| src/wallpaper/templates/fragments/sky-gradient.svg | Adds sky gradient fragment used by multiple scenes. |
| src/wallpaper/templates/fragments/ocean-surface.svg | Adds ocean surface fragment with gradients/reflections. |
| src/wallpaper/templates/fragments/mountain-ridge-3layer.svg | Adds 3-layer ridge fragment for depth. |
| src/wallpaper/templates/fragments/moon-full-corona.svg | Adds full moon + corona fragment. |
| src/wallpaper/templates/fragments/moon-crescent.svg | Adds crescent moon fragment with mask + glow. |
| src/wallpaper/templates/fragments/horizon-haze.svg | Adds horizon haze fragment for atmospheric depth. |
| src/wallpaper/templates/fragments/dunes-4layer.svg | Adds layered dunes fragment. |
| src/wallpaper/templates/fragments/corona-rings.svg | Adds eclipse corona rings fragment. |
| src/wallpaper/templates/engine.ts | Implements template substitution, SVG parsing, and scene assembly. |
| src/wallpaper/templates/bloom-ellipse.svg | Adds reusable bloom ellipse template. |
| src/wallpaper/templates/background-glow.svg | Adds reusable background glow template. |
| src/wallpaper/templates/tests/engine.test.ts | Adds tests for applyVars/parseBrickOutput/renderTemplate/assembleScene. |
| src/wallpaper/templates/README.md | Documents the template engine philosophy and usage. |
| src/wallpaper/renderer.ts | Adds renderer entry point + spec builder + filename helper. |
| src/wallpaper/motifs/ocean-vars.ts | Adds token mapping for ocean scene templates. |
| src/wallpaper/motifs/midnight-atelier.ts | Implements/enriches MidnightAtelier motif across modes. |
| src/wallpaper/motifs/index.ts | Registers motif functions by seedId. |
| src/wallpaper/motifs/graphite-flux.ts | Implements/enriches GraphiteFlux motif across modes. |
| src/wallpaper/motifs/eclipse-vars.ts | Adds token mapping for eclipse corona scene templates. |
| src/wallpaper/motifs/desert-vars.ts | Adds token mapping for desert scene templates. |
| src/wallpaper/motifs/aurora-vars.ts | Adds token mapping for aurora template variables. |
| src/wallpaper/motifs/tests/ocean-vars.test.ts | Adds tests ensuring ocean vars are complete/valid. |
| src/wallpaper/motifs/tests/eclipse-vars.test.ts | Adds tests ensuring eclipse vars are complete/valid. |
| src/wallpaper/motifs/tests/desert-vars.test.ts | Adds tests ensuring desert vars are complete/valid. |
| src/wallpaper/motifs/tests/aurora-vars.test.ts | Adds tests ensuring aurora vars are complete/valid. |
| src/wallpaper/motifs/tests/aurora-noir.test.ts | Adds motif-level tests for aurora-noir output. |
| src/wallpaper/modes/triadic.ts | Enriches triadic mode with scene elements (glows/nebula/stars). |
| src/wallpaper/modes/split-complementary.ts | Enriches split-complementary mode with split wash + fog/vignette. |
| src/wallpaper/modes/monochromatic.ts | Enriches monochromatic mode with depth gradient + texture. |
| src/wallpaper/modes/index.ts | Registers/enables mode composers. |
| src/wallpaper/modes/balanced.ts | Enriches balanced mode with subtle horizon glow + fog/vignette. |
| src/wallpaper/modes/analogous.ts | Enriches analogous mode with wash + cloud band + horizon glow. |
| src/wallpaper/composer.ts | Adds brick merging + final SVG document wrapping. |
| src/wallpaper/bricks/vignette.ts | Implements vignette brick backed by a template. |
| src/wallpaper/bricks/text.ts | Implements optional label pill text brick. |
| src/wallpaper/bricks/svg-format.ts | Centralizes numeric formatting policy for SVG outputs. |
| src/wallpaper/bricks/shapes.ts | Adds reusable geometric primitives (rings/arcs/rays/bands/curtains/brush). |
| src/wallpaper/bricks/particles.ts | Adds seeded particle + spark primitives for stars/embers. |
| src/wallpaper/bricks/noise.ts | Adds noise and turbulence texture/filter bricks. |
| src/wallpaper/bricks/index.ts | Re-exports brick APIs for motif/mode consumption. |
| src/wallpaper/bricks/gradient.ts | Adds linear/radial gradient bricks for overlays. |
| src/wallpaper/bricks/effects.ts | Adds bloom ellipse brick backed by template engine. |
| src/wallpaper/bricks/background.ts | Adds background atmospheric glow brick backed by template engine. |
| src/wallpaper/bricks/tests/svg-format.test.ts | Adds tests for numeric formatting helpers. |
| src/wallpaper/bricks/tests/effects.test.ts | Adds tests for bloom ellipse brick output structure. |
| src/vue-app/views/WallpapersView.vue | Adds manifest-driven wallpaper gallery view. |
| src/vue-app/views/WallpaperComposerView.vue | Adds interactive composer view for seed/mode/platform/text selection. |
| src/vue-app/router/index.ts | Adds routes for wallpapers gallery and composer. |
| src/vue-app/router/tests/index.spec.ts | Updates router tests for newly-added routes/components. |
| src/vue-app/composables/useWallpapers.ts | Adds composable to load/filter wallpapers manifest entries. |
| src/vue-app/composables/useWallpaperComposer.ts | Adds composable for interactive wallpaper composition state. |
| src/vue-app/components/wallpapers/WallpaperFilters.vue | Adds filter UI component for gallery browsing. |
| src/vue-app/components/wallpapers/WallpaperCard.vue | Adds wallpaper card component for grid display + downloads. |
| src/vue-app/components/layout/AppNav.vue | Adds navigation entries for wallpapers routes. |
| scripts/generate-wallpapers.ts | Adds CLI generator for SVG + Playwright PNG rasterization. |
| scripts/generate-wallpapers-manifest.ts | Adds manifest builder scanning generated outputs for the gallery. |
| scripts/generate-template-previews.ts | Adds template preview generator for quick visual checks. |
| scripts/bundle-wallpapers.ts | Adds bundling script to create downloadable wallpaper archives. |
| scripts/audit-wallpaper-elements.ts | Adds an audit/quality gate script for generated SVG content. |
| package.json | Adds npm scripts for wallpaper generation/manifest/bundle workflows. |
| caligo-vscode-theme | Updates the subproject commit pointer. |
| biome.json | Updates Biome schema reference. |
| .vscode/settings.json | Changes default VS Code theme setting. |
| .serena/project.yml | Adds Serena project configuration file(s). |
| .serena/memories/wallpaper/quality_audit.md | Adds stored audit notes for wallpaper quality issues. |
| .serena/memories/wallpaper/gap-analysis-2026-03.md | Adds stored gap-analysis notes for wallpaper realism. |
| .serena/memories/task_completion.md | Adds stored task completion checklist. |
| .serena/memories/suggested_commands.md | Adds stored suggested commands for local workflows. |
| .serena/memories/style_and_conventions.md | Adds stored style/conventions notes. |
| .serena/memories/publication-readiness-session-note.md | Adds stored publication readiness notes. |
| .serena/memories/project_overview.md | Adds stored project overview notes. |
| .serena/.gitignore | Adds Serena cache ignore file. |
| .gitignore | Updates ignores to exclude template previews from VCS. |
| .github/dependabot.yml | Adds Dependabot configuration. |
| .devcontainer/devcontainer.json | Adds devcontainer configuration. |
Comments suppressed due to low confidence (5)
src/wallpaper/composer.ts:1
- The current defs “deduplication” drops an entire defs block if any ID inside it has been seen, which can silently discard other new defs IDs contained in the same block. A safer approach is to either (1) split defs into per-ID units and only skip the duplicates, or (2) only skip the specific duplicate IDs while keeping other new defs content (e.g., by parsing and filtering individual
<filter>,<linearGradient>,<radialGradient>, etc. elements).
src/wallpaper/renderer.ts:1 "Core"is not part of theModeTopicunion ("Stillness" | "Drift" | "Break" | "Void" | "Pulse"), so these fallbacks will cause a TypeScript type error (and also produce an inconsistent topic label at runtime). Consider changing the fallback to"Stillness"(matchingnone) or expanding theModeTopictype +MODE_TOPICSmapping if “Core” is intended to be a real topic.
src/wallpaper/renderer.ts:1"Core"is not part of theModeTopicunion ("Stillness" | "Drift" | "Break" | "Void" | "Pulse"), so these fallbacks will cause a TypeScript type error (and also produce an inconsistent topic label at runtime). Consider changing the fallback to"Stillness"(matchingnone) or expanding theModeTopictype +MODE_TOPICSmapping if “Core” is intended to be a real topic.
src/wallpaper/bricks/shapes.ts:1brushStrokeBrickusesMath.random(), making output non-deterministic across runs for the sameseedId/harmonyMode, which conflicts with the wallpaper pipeline’s deterministic-generation goals (seed-based reproducibility). Consider switching this to a seeded RNG derived fromparams.seedId,params.harmonyMode, andoptions.id(similar toparticles.ts) so the same inputs render the same stroke geometry.
src/wallpaper/templates/engine.ts:1applyVars()acceptsRecord<string, string | number>, butassembleScene()restrictsvarstoRecord<string, string>, forcing callers to pre-stringify numeric values (or preventing numeric use altogether). Consider widening this toRecord<string, string | number>(or reusing a sharedTemplateVarstype) to keep the template engine API consistent and easier to use.
Comment on lines
+4
to
+6
| import type { Platform, TextVariant } from "../../wallpaper/types"; | ||
| // biome-ignore lint/correctness/noUnusedImports: used in template | ||
| import type { HarmonyMode } from "../composables/useWallpaperComposer"; |
There was a problem hiding this comment.
These type-only imports omit the .js extension, while the rest of the codebase appears to follow NodeNext-style explicit extensions (e.g. ../../wallpaper/types.js). To avoid module-resolution inconsistencies (especially under NodeNext/strict TS configs and build tooling), update these imports to include the .js extension to match project conventions.
Suggested change
| import type { Platform, TextVariant } from "../../wallpaper/types"; | |
| // biome-ignore lint/correctness/noUnusedImports: used in template | |
| import type { HarmonyMode } from "../composables/useWallpaperComposer"; | |
| import type { Platform, TextVariant } from "../../wallpaper/types.js"; | |
| // biome-ignore lint/correctness/noUnusedImports: used in template | |
| import type { HarmonyMode } from "../composables/useWallpaperComposer.js"; |
scripts/bundle-wallpapers.ts
Outdated
Comment on lines
+44
to
+46
| // Use a streaming zip approach without external dependencies | ||
| // We'll write a ZIP file using built-in Node.js streams and zlib | ||
| await writeZip(filtered, OUTPUT_ZIP); |
There was a problem hiding this comment.
The comments claim a “streaming zip approach without external dependencies”, but writeZip() shells out to system zip and falls back to tar. Updating these comments to reflect the actual implementation would prevent confusion for maintainers (or alternatively, implement the described Node-based ZIP writer if that’s the goal).
.serena/project.yml
Outdated
Comment on lines
+1
to
+2
| # the name by which the project can be referenced within Serena | ||
| project_name: "caligo-vscode-theme" |
There was a problem hiding this comment.
This PR adds a large amount of .serena/ project configuration and “memories” content to source control. If these files are not intended to be versioned (they often contain local/agent-specific operational notes), consider re-adding .serena/ to .gitignore and removing the committed memory artifacts; if they are intended, it would help to document that expectation (e.g., in CONTRIBUTING) to avoid accidental churn and repository noise.
Owner
|
@copilot apply changes based on the comments in this thread |
…, remove .serena from git Co-authored-by: Anselmoo <13209783+Anselmoo@users.noreply.github.com>
Contributor
Author
Done in commit
|
Copilot stopped work on behalf of
Anselmoo due to an error
March 4, 2026 06:31
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
.jsextension to all type imports inWallpaperComposerView.vue(review comment)bundle-wallpapers.tsto reflect actualzip/tarshell-out implementation (review comment).serena/to.gitignoreand remove all committed.serena/memory files from version control (review comment)Original prompt
i removed the large svgs, so you have to run it in the cloud new, important is know to use the gap analysis to enhance the code generated svgs now as figure out that becomes more realistic
[Chronological Review: The conversation began with the user attaching files related to the "caligo-vscode-theme" project and expressing concerns about the quality of SVG images. The user requested to analyze the repository and perform a gap analysis to enhance the generated SVGs. The user then removed large SVG files and indicated the need to run the project in the cloud, emphasizing the importance of gap analysis for improving the realism of the SVGs. The conversation has focused on analyzing the current state of the project and identifying areas for improvement.][Intent Mapping:
[Technical Inventory:
[Code Archaeology: No specific code changes were detailed, but the user mentioned removing large SVG files and the need to enhance the generated SVGs.]
[Progress Assessment:
[Context Validation: All critical information for continuation is captured, including the need for gap analysis and the removal of large SVGs.]
[Recent Commands Analysis:
1. Conversation Overview: - Primary Objectives: - "this need 'mcp_ai-agent-guid_gap-frameworks-analyzers'" - User wants to perform a gap analysis to enhance SVG quality. - "i removed the large svgs, so you have to run it in the cloud new" - User has removed large SVGs and wants to run the project in the cloud. - Session Context: The conversation has revolved around analyzing the current state of the "caligo-vscode-theme" project, focusing on SVG quality and the need for gap analysis. - User Intent Evolution: The user initially expressed concerns about SVG quality and conversion methods, then moved towards removing large files and emphasizing the importance of gap analysis.- Technical Foundation:
- Repository: caligo-vscode-theme
- Tools:
- mcp_zen-of-langua_analyze_repository - For analyzing the repository.
- mcp_ai-agent-guid_gap-frameworks-analyzers - For performing gap analysis.
- mcp_chrome-devtoo_click - For interacting with SVG images.
- Codebase Status:
- No specific files were detailed, but the user mentioned removing large SVG files to improve project performance.
- Problem Resolution:
- Issues Encountered: Concerns about SVG quality and the need for realistic representations.
- Solutions Implemented: Removal of large SVG files.
- Debugging Context: Ongoing need for gap analysis to enhance SVG realism.
- Progress Tracking:
- Completed Tasks: Removal of large SVG files.
- Partially Complete Work: Running the project in the cloud and performing gap analysis.
- Active Work State:
- Current Focus: Analyzing the repository and preparing for gap analysis.
- Recent Context: User emphasized the need for gap analysis to improve SVG quality.
- Immediate Context: The user was focused on enhancing SVG realism through gap analysis.
- Recent Operations:
- Last Agent Commands:
- 'mcp_zen-of-langua_analyze_repository'
- 'mcp_ai-agent-guid_gap-frameworks-analyzers'
- 'mcp_chrome-devtoo_click'
- Tool Results Summary: No specific results were provided, but the user indicated a need for analysis and enhancement of SVGs.
- Pre-Summary State: The agent was active...
Created from VS Code.
💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.