Consolidate ASCII effects into component variants

[harshjdhv]

Summary

• replace the three ASCII registry entries with one ascii-effect component
• document image, flow, and glitch as variants on one docs page
• remove the ASCII color palette buttons from the components catalog
• keep color customization available through component props
• remove the now-unneeded shared-source registry generator behavior

Validation

• pnpm --filter web exec tsc --noEmit
• targeted ESLint checks
• pnpm validate:registry
• registry source parity check

Summary by CodeRabbit

• New Features

  • Added a consolidated ASCII Effect component with image, flow, and glitch examples.
  • Added interactive previews and dedicated documentation covering configuration options and usage.
  • Added the component to the documentation and component registries.

• Improvements

  • Simplified the ASCII Effects gallery by removing the runtime color palette selector.
  • Streamlined component generation to use a single component name.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
componentry	Ready	Preview, Comment	Jul 22, 2026 6:51pm

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 85e78c5b-bee7-42e9-9745-4009ea81c301

📥 Commits

Reviewing files that changed from the base of the PR and between 8b59c3a and f5fc118.

📒 Files selected for processing (13)

• apps/web/app/docs/page.tsx
• apps/web/components/docs/ascii-effect.tsx
• apps/web/components/docs/ascii-effects.tsx
• apps/web/components/docs/lazy-registry.ts
• apps/web/components/docs/previews/ascii-effect-preview.tsx
• apps/web/components/docs/previews/ascii-effects-preview.tsx
• apps/web/public/r/ascii-effect.json
• apps/web/public/r/ascii-flow.json
• apps/web/public/r/ascii-glitch.json
• apps/web/public/r/registry.json
• apps/web/registry/index.ts
• docs/COMPONENT_CREATION_GUIDE.md
• scripts/generate-registry.js

---

📝 Walkthrough

Walkthrough

The ASCII Effects documentation is consolidated into a single ascii-effect entry with dedicated image, flow, glitch, and catalog previews. Gallery palette controls are removed, registry metadata and lazy loading are updated, and registry generation now accepts one component name.

Changes

ASCII Effect documentation and previews

Layer / File(s)	Summary
Consolidated docs and previews apps/web/components/docs/ascii-effect.tsx, apps/web/components/docs/previews/ascii-effect-preview.tsx, apps/web/app/docs/page.tsx	Adds unified ASCII Effect documentation and previews, removes palette state and selector UI, and updates catalog preview wiring.
Registry and lazy-loading alignment apps/web/registry/index.ts, apps/web/public/r/ascii-effect.json, apps/web/public/r/registry.json, apps/web/components/docs/lazy-registry.ts	Replaces separate ASCII registry entries with ascii-effect metadata and lazy documentation loading.
Single-source registry generation scripts/generate-registry.js, docs/COMPONENT_CREATION_GUIDE.md	Derives generated source filenames from the component argument and removes shared-source generation guidance.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Sequence Diagram(s)

sequenceDiagram
  participant DocsGallery
  participant LazyRegistry
  participant AsciiEffectDocs
  participant AsciiEffectPreview
  DocsGallery->>LazyRegistry: resolve ascii-effect
  LazyRegistry->>AsciiEffectDocs: dynamically import docs
  AsciiEffectDocs->>AsciiEffectPreview: render image, flow, and glitch previews

Loading

Possibly related PRs

• harshjdhv/componentry#12: Refactors the same ASCII Effects documentation flow, including palette wiring and catalog preview consolidation.

Suggested reviewers: copilot

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/consolidate-ascii-effect

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 Checkov (3.3.8)

apps/web/public/r/ascii-effect.json

Traceback (most recent call last):
File "/usr/local/bin/checkov", line 2, in
from checkov.main import Checkov
ModuleNotFoundError: No module named 'checkov'

apps/web/public/r/registry.json

Traceback (most recent call last):
File "/usr/local/bin/checkov", line 2, in
from checkov.main import Checkov
ModuleNotFoundError: No module named 'checkov'

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

scripts/generate-registry.js

Oops! Something went wrong! :(

ESLint: 9.39.1

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './library.js' is not defined by "exports" in /node_modules/@workspace/eslint-config/package.json
Referenced from: /.eslintrc.js
at exportsNotFound (node:internal/modules/esm/resolve:310:10)
at packageExportsResolve (node:internal/modules/esm/resolve:658:9)
at resolveExports (node:internal/modules/cjs/loader:685:36)
at Module._findPath (node:internal/modules/cjs/loader:752:31)
at Module._resolveFilename (node:internal/modules/cjs/loader:1461:27)
at wrapResolveFilename (node:internal/modules/cjs/loader:1049:27)
at resolveForCJSWithHooks (node:internal/modules/cjs/loader:1094:12)
at require.resolve (node:internal/modules/helpers:171:31)
at Object.resolve (/node_modules/.pnpm/@eslint+eslintrc@3.3.3/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:2447:46)
at ConfigArrayFactory._loadExtendedShareableConfig (/node_modules/.pnpm/@eslint+eslintrc@3.3.3/node_modules/@eslint/eslintrc/dist/eslintrc.cjs:3383:33)
(node:2) ESLintRCWarning: You are using an eslintrc configuration file, which is deprecated and support will be removed in v10.0.0. Please migrate to an eslint.config.js file. See https://eslint.org/docs/latest/use/configure/migration-guide for details. An eslintrc configuration file is used because you have the ESLINT_USE_FLAT_CONFIG environment variable set to false. If you want to use an eslint.config.js file, remove the environment variable. If you want to find the location of the eslintrc configuration file, use the --debug flag.
(Use node --trace-warnings ... to show where the warning was created)

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[Copilot]

Pull request overview

Consolidates the three separate ASCII effect components (image/flow/glitch) into a single ascii-effect registry entry and docs page, removing legacy registry items and catalog UI for palette switching while keeping customization available via props.

Changes:

• Replaced ascii-image, ascii-flow, and ascii-glitch registry/docs routing with a single ascii-effect component entry.
• Added a unified docs page and previews that demonstrate AsciiEffect via the variant prop.
• Simplified the registry generator and removed documentation for the deprecated “shared source file” registry pattern.

Reviewed changes

Copilot reviewed 13 out of 13 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
scripts/generate-registry.js	Removes the optional “source name” argument to align registry generation with 1:1 component files.
docs/COMPONENT_CREATION_GUIDE.md	Removes docs for shared-source registry generation; updates generator usage to single-arg form.
apps/web/registry/index.ts	Consolidates ASCII Effects metadata into a single ascii-effect entry.
apps/web/public/r/registry.json	Updates registry list to include ascii-effect and removes legacy ASCII items.
apps/web/public/r/ascii-glitch.json	Removes legacy registry item.
apps/web/public/r/ascii-flow.json	Removes legacy registry item.
apps/web/public/r/ascii-effect.json	Renames/retitles the registry item to ascii-effect and updates description.
apps/web/components/docs/previews/ascii-effects-preview.tsx	Removes legacy per-effect preview implementation.
apps/web/components/docs/previews/ascii-effect-preview.tsx	Adds unified previews driven by AsciiEffect + variant.
apps/web/components/docs/lazy-registry.ts	Updates docs import map to the single ascii-effect docs page.
apps/web/components/docs/ascii-effects.tsx	Removes legacy multi-page docs implementation.
apps/web/components/docs/ascii-effect.tsx	Adds unified docs page with variant examples and consolidated props table.
apps/web/app/docs/page.tsx	Removes ASCII palette UI and updates catalog preview to new unified preview component.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.