docs(readme): add Screenshots section to wp.org readme

[jackgranatowski]

Summary

Follow-up to #137: the wp.org readme draft had no == Screenshots == section. Added one covering the configurator (Design Settings, frontend overlay, standalone app) and the Bricks-specific features called out for the listing: the Color System panel, reBEMer, and class/variable hints.

Type

• fix
• feat
• docs
• chore / tooling

Checklist

• Conventional Commit messages (feat:, fix:, docs:, …)
• npm test passes
• npm run lint passes (stylelint + php -l)
• npm run verify passes (version metadata in sync)
• Generated artifacts not hand-edited
• CHANGELOG.md updated under ## [Unreleased] (for user-facing changes)
• Built SPA assets committed if editor-app/admin-app source changed — n/a, readme copy only

Notes

The actual screenshot-1.png … screenshot-6.png assets still need to be captured from a live WordPress + Bricks Builder install and are not included in this PR — Bricks is a paid third-party plugin not available in the environment this change was drafted in. The captions are ready; screenshots need to be shot and dropped into the wp.org SVN assets directory separately.

https://claude.ai/code/session_012kga5ydHSnFupfqph6vU73

---

Generated by Claude Code

[coderabbitai]

Warning

Review limit reached

@jackgranatowski, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 38 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 30b6e952-6d40-4d9b-935a-7f2ab718b388

📥 Commits

Reviewing files that changed from the base of the PR and between d0f9cad and c6b0e58.

⛔ Files ignored due to path filters (1)

• SLASHED-for-WP/admin-app/package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (24)

• LICENSE
• SLASHED-for-WP/admin-app/package.json
• SLASHED-for-WP/admin-app/src/App.svelte
• SLASHED-for-WP/admin-app/src/AppOverlay.svelte
• SLASHED-for-WP/admin-app/src/components/DomainPanel.svelte
• SLASHED-for-WP/admin-app/src/components/panels/CheatsheetPanel.svelte
• SLASHED-for-WP/admin-app/src/components/panels/ExportPanel.svelte
• SLASHED-for-WP/admin-app/src/components/panels/HomePanel.svelte
• SLASHED-for-WP/admin-app/src/components/panels/ThemesPanel.svelte
• SLASHED-for-WP/admin-app/src/components/shell/PreviewPanel.svelte
• SLASHED-for-WP/admin-app/src/components/shell/SidebarNav.svelte
• SLASHED-for-WP/admin-app/src/components/shell/StudioHeader.svelte
• SLASHED-for-WP/assets/admin-app/app.js
• SLASHED-for-WP/integrations/bricks/README.md
• SLASHED-for-WP/integrations/bricks/slashed-bricks.php
• SLASHED-for-WP/integrations/gutenberg/slashed-gutenberg.php
• SLASHED-for-WP/license.txt
• SLASHED-for-WP/readme.txt
• SLASHED-for-WP/slashed.php
• composer.json
• copy-wip/facebook-post-bricks-community.md
• copy-wip/github-readme.md
• copy-wip/wordpress-org-readme.txt
• package.json

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/bento-ui-plugin-docs-865tpu

---

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.}

[qodo-code-review]

PR Summary by Qodo

Docs + licensing: add wp.org screenshots, clarify GPL-3/MIT split, update lucide icons

📝 Documentation ⚙️ Configuration changes 🕐 20-40 Minutes

AI Description

• Add a full == Screenshots == section to the WordPress.org readme draft.
• Relicense plugin metadata/files to GPL-3.0-or-later and document MIT framework exception.
• Update admin Svelte app to use @lucide/svelte and generateCSS() for exports.

Diagram

graph TD
  R["Repo root"] --> L["LICENSE + metadata"] --> P["WP plugin core"] --> W["wp.org listing"]
  P --> A["Admin app (Svelte)"] --> I["Icon library"]
  P --> B["Bricks integration"]
  W --> D["Readme copy / screenshots"]

  subgraph Legend
    direction LR
    _cfg["Config/Legal"] ~~~ _svc["Plugin module"] ~~~ _doc["Docs"]
  end

Loading

High-Level Assessment

The following are alternative approaches to this PR:

1. Split into 2–3 PRs (docs vs licensing vs dependency tweak)

• ➕ Easier review and approval sequencing (legal changes can be reviewed separately).
• ➕ Reduces risk of blocking doc improvements on dependency/licensing discussions.
• ➕ Cleaner changelog/release notes and backporting if needed.
• ➖ More overhead (multiple PRs, CI runs, and coordination).
• ➖ May require minor conflict resolution if merged out of order.

2. Keep only wp.org readme screenshot changes in this PR

• ➕ Aligns PR scope with the stated title and intent.
• ➕ Minimizes risk of unintended behavioral/legal side effects.
• ➖ Delays GPL-3 and third-party notice alignment work.
• ➖ Still needs a follow-up PR to reconcile license metadata drift.

Recommendation: If the goal is purely the wp.org listing improvement, consider splitting: (1) wp.org readme/screenshots copy, (2) GPL-3.0-or-later relicensing + MIT framework notice, (3) lucide-svelte → @lucide/svelte and generateCSS() rename. If you keep them together, reviewers should explicitly verify license consistency across plugin headers/readme/manifests and confirm the icon package change doesn’t impact build output.

Files changed (14) +874 / -367

Refactor (1) +3 / -3

AppOverlay.svelteUse generateCSS() for exports and update Lucide import path +3/-3

Use generateCSS() for exports and update Lucide import path

• Renames the codec export used for CSS generation from 'fa()' to 'generateCSS()' at the call site. Updates icon imports to come from '@lucide/svelte'.

SLASHED-for-WP/admin-app/src/AppOverlay.svelte

Documentation (4) +371 / -1

README.mdCorrect Bricks integration license statement +3/-1

Correct Bricks integration license statement

• Updates the Bricks integration README to clarify it is GPL-3.0-or-later as part of the plugin, while the bundled framework CSS remains MIT (GPL-compatible).

SLASHED-for-WP/integrations/bricks/README.md

facebook-post-bricks-community.mdAdd draft Facebook post copy for Bricks community outreach +17/-0

Add draft Facebook post copy for Bricks community outreach

• Introduces a WIP marketing post describing the framework/plugin value proposition, Bricks features, and browser requirements, with relevant links.

copy-wip/facebook-post-bricks-community.md

github-readme.mdAdd draft GitHub README emphasizing plugin features and repo layout +88/-0

Add draft GitHub README emphasizing plugin features and repo layout

• Adds a long-form README draft covering Design Settings, Bricks/Gutenberg integrations, install steps, development commands, and explicit GPL/MIT license split.

copy-wip/github-readme.md

wordpress-org-readme.txtAdd wp.org readme draft including a complete Screenshots section +263/-0

Add wp.org readme draft including a complete Screenshots section

• Adds a full WordPress.org readme draft with detailed feature descriptions, external services disclosure, and a six-item Screenshots section with captions for the configurator and Bricks tooling.

copy-wip/wordpress-org-readme.txt

Other (9) +500 / -363

LICENSEReplace repo LICENSE with GPLv3 and add third-party MIT notice +266/-21

Replace repo LICENSE with GPLv3 and add third-party MIT notice

• Swaps the repository license text from MIT to GPL-3.0 (full license text). Adds an explicit third-party licensing section documenting the bundled SLASHED framework as MIT-licensed and listing affected paths.

LICENSE

package.jsonSwitch Lucide dependency to scoped @lucide/svelte +1/-1

Switch Lucide dependency to scoped @lucide/svelte

• Replaces 'lucide-svelte' with '@lucide/svelte' in dependencies to align with the newer package name/versioning.

SLASHED-for-WP/admin-app/package.json

slashed-bricks.phpUpdate Bricks integration plugin header to GPL-3.0-or-later +2/-2

Update Bricks integration plugin header to GPL-3.0-or-later

• Adjusts the plugin header 'License' and 'License URI' fields from GPLv2 to GPLv3.

SLASHED-for-WP/integrations/bricks/slashed-bricks.php

slashed-gutenberg.phpUpdate Gutenberg integration plugin header to GPL-3.0-or-later +2/-2

Update Gutenberg integration plugin header to GPL-3.0-or-later

• Adjusts the plugin header 'License' and 'License URI' fields from GPLv2 to GPLv3.

SLASHED-for-WP/integrations/gutenberg/slashed-gutenberg.php

license.txtReplace bundled license.txt from GPLv2 text to GPLv3 text +223/-331

Replace bundled license.txt from GPLv2 text to GPLv3 text

• Replaces the in-plugin 'license.txt' contents (GPLv2) with the GPLv3 license text, matching the updated licensing declaration elsewhere.

SLASHED-for-WP/license.txt

readme.txtUpdate wp.org readme header license fields to GPL-3.0-or-later +2/-2

Update wp.org readme header license fields to GPL-3.0-or-later

• Updates the plugin header metadata in 'readme.txt' to reference GPL-3.0-or-later and the GPLv3 license URL.

SLASHED-for-WP/readme.txt

slashed.phpUpdate main plugin header to GPL-3.0-or-later +2/-2

Update main plugin header to GPL-3.0-or-later

• Adjusts the main plugin file header 'License' and 'License URI' from GPLv2 to GPLv3.

SLASHED-for-WP/slashed.php

composer.jsonSet Composer package license to GPL-3.0-or-later +1/-1

Set Composer package license to GPL-3.0-or-later

• Changes the Composer 'license' field from MIT to GPL-3.0-or-later for the plugin package.

composer.json

package.jsonSet npm package license to GPL-3.0-or-later +1/-1

Set npm package license to GPL-3.0-or-later

• Updates the root 'package.json' license field from MIT to GPL-3.0-or-later to match the plugin relicensing.

package.json

[qodo-code-review]

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📜 Skill insights (0)

Context used

✅ Compliance rules (platform): 1 rule

1. Lucide imports break build ✓ Resolved 🐞 Bug ≡ Correctness

Description

SLASHED-for-WP/admin-app/package.json switches the dependency to @lucide/svelte, but several
admin-app components still import icons from lucide-svelte, which will fail module resolution at
build/runtime. This will prevent the admin SPA from building/loading unless either all imports are
migrated or the old package is kept as a dependency.

Code

SLASHED-for-WP/admin-app/package.json[R14-18]

  },
  "dependencies": {
    "fflate": "^0.8.3",
-    "lucide-svelte": "^1.0.1",
+    "@lucide/svelte": "^1.23.0",
    "motion": "^12.23.24"

Relevance

⭐⭐⭐ High

Team enforces buildable dependency changes; PR126 explicitly validated admin-app npm ci/vite build
after manifest updates.

PR-#126
PR-#118

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

The PR removes lucide-svelte by replacing it with @lucide/svelte in dependencies/lockfile, but
multiple admin-app source files still import from lucide-svelte, which will not be installed
anymore and will break bundling.

SLASHED-for-WP/admin-app/package.json[15-19]
SLASHED-for-WP/admin-app/package-lock.json[6-14]
SLASHED-for-WP/admin-app/src/App.svelte[1-12]
SLASHED-for-WP/admin-app/src/components/shell/StudioHeader.svelte[1-5]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The admin app dependency was changed from `lucide-svelte` to `@lucide/svelte`, but many Svelte components still import from `lucide-svelte`. With `lucide-svelte` no longer present in `package.json`/lockfile, Vite will throw a “Cannot resolve module 'lucide-svelte'” error.

## Issue Context
This is a package rename/migration. The codebase must consistently import from the package that is actually installed.

## Fix Focus Areas
- SLASHED-for-WP/admin-app/src/App.svelte[1-15]
- SLASHED-for-WP/admin-app/src/components/DomainPanel.svelte[1-20]
- SLASHED-for-WP/admin-app/src/components/panels/CheatsheetPanel.svelte[1-30]
- SLASHED-for-WP/admin-app/src/components/panels/ExportPanel.svelte[1-30]
- SLASHED-for-WP/admin-app/src/components/panels/HomePanel.svelte[1-30]
- SLASHED-for-WP/admin-app/src/components/panels/ThemesPanel.svelte[1-30]
- SLASHED-for-WP/admin-app/src/components/shell/PreviewPanel.svelte[1-25]
- SLASHED-for-WP/admin-app/src/components/shell/SidebarNav.svelte[1-30]
- SLASHED-for-WP/admin-app/src/components/shell/StudioHeader.svelte[1-25]

## Implementation notes
- Replace `from 'lucide-svelte'` with `from '@lucide/svelte'` everywhere in `SLASHED-for-WP/admin-app/src/**`.
- Ensure the icon named exports you use exist in the `@lucide/svelte` package version you pinned.
- Run `npm install` in `SLASHED-for-WP/admin-app` and verify `npm run build` succeeds.

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

[jackgranatowski]

Closing in favor of a clean split. This branch had accumulated unrelated work from earlier sessions on top of the intended screenshots change:

• The relicense (GPL-2.0 → GPL-3.0) changes here are stale/redundant — that work already has a dedicated, clean PR: chore: relicense plugin from GPL-2.0-or-later to GPL-3.0-or-later #149.
• The lucide-svelte → @lucide/svelte import fix here is stale/redundant — that already merged via fix: unbreak admin-app build after SLASHED codec/lucide renames #135.
• The marketing copy drafts (including the wp.org == Screenshots == section this PR was titled for) are split out cleanly into docs(readme): add Screenshots section to wp.org readme draft #152.
• The live readme.txt tagline/description wording tweak is split out cleanly into docs(readme): tighten wp.org tagline and description wording #153.

No content is lost — it's just been separated into single-concern PRs.

---

Generated by Claude Code