Skip to content

feat: serve CSS from dist-branch SHA + add Layouts admin tab - #165

Merged
jackgranatowski merged 3 commits into
mainfrom
claude/dist-sha-cdn
May 31, 2026
Merged

feat: serve CSS from dist-branch SHA + add Layouts admin tab#165
jackgranatowski merged 3 commits into
mainfrom
claude/dist-sha-cdn

Conversation

@jackgranatowski

@jackgranatowski jackgranatowski commented May 31, 2026

Copy link
Copy Markdown
Contributor

Summary

  • CDN URL now uses immutable dist-branch SHA instead of the release tag, so the jsDelivr URL is stable and doesn't require CSS files to be tracked on main. dist/*.css and dist/*.map are removed from git tracking.
  • New SLASHED_BRICKS_DIST_SHA constant holds the dist-branch commit SHA; SLASHED_BRICKS_CSS_REF is kept as a semver string for version comparison only.
  • version-sync.yml updated to push CSS bundles to the dist orphan branch, capture the resulting SHA, and write it back to slashed-bricks.php on every release.
  • Layouts token tab added to the Svelte admin panel — lets users override container widths, grid column minimums, switcher threshold, bento settings, and all other layout-primitive CSS variables without editing CSS.

What changed

CDN / dist tracking

  • integrations/bricks/slashed-bricks.php — add SLASHED_BRICKS_DIST_SHA; CDN URL uses SHA with no /dist/ prefix
  • scripts/version-sync.js — note that DIST_SHA is CI-managed, not bumped here
  • .github/workflows/version-sync.yml — push to dist branch after build, capture SHA, update PHP
  • .gitignore — ignore dist/*.css and dist/*.map

Layouts tab

  • integrations/bricks/includes/class-tab-registry.php — register layouts as a token tab
  • integrations/bricks/includes/class-token-defaults.php — add get_layouts() with all 26 layout primitive defaults
  • integrations/bricks/includes/class-css-generator.php — add generate_layout_declarations() mapping each key to its --sf-* CSS variable
  • integrations/bricks/admin-app/src/components/LayoutsTab.svelte — new tab component with Basic (containers, grid, switcher, bento) and collapsible Advanced (content-grid, sidebar, cover, frame, reel, imposter, equal-cols) sections
  • integrations/bricks/admin-app/src/App.svelte — import and wire up LayoutsTab

Test plan

  • Admin panel shows a "Layouts" tab between Spacing and Miscellaneous
  • All container/grid/switcher/bento fields show correct placeholder defaults
  • Advanced section expands to reveal content-grid, sidebar, cover, frame, reel, imposter, equal-cols fields
  • Saving a layout override writes the correct --sf-* variable into the generated CSS @layer slashed.overrides
  • Resetting the layouts section restores all fields to defaults
  • On a new release, version-sync.yml pushes CSS to dist branch and updates SLASHED_BRICKS_DIST_SHA in PHP
  • jsDelivr URL resolves correctly using the SHA (no /dist/ prefix needed)

https://claude.ai/code/session_018u9uVFxgL7K6EpPjZPggKR


Generated by Claude Code

Summary by CodeRabbit

  • New Features
    • Added a Layouts tab to the admin interface with controls for container widths, grid minimums, switcher thresholds, bento grid presets, and various layout primitive settings.
    • Updated CSS bundle delivery mechanism to use commit-SHA-based references for improved CDN resolution reliability.

@coderabbitai

coderabbitai Bot commented May 31, 2026

Copy link
Copy Markdown

Review Change Stack

Warning

Review limit reached

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

More reviews will be available in 51 minutes and 24 seconds. Learn how PR review limits work.

Your organization has run out of usage credits. Purchase more in the billing tab.

⌛ How to resolve this issue?

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.

We recommend that you space out your commits to avoid hitting the rate limit.

🚦 How do rate limits work?

CodeRabbit enforces hourly rate limits for each developer per organization.

Our paid plans include higher PR review limits than trial, open-source, and free plans. In all cases, reviews become available again over time. During sustained high-volume PR review activity, CodeRabbit may temporarily slow when the next review becomes available.

Please see our Fair Usage Limits Policy for further information.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 2204cc25-fc6e-40f7-b54b-950a300d036f

📥 Commits

Reviewing files that changed from the base of the PR and between 346d4a5 and efd817b.

⛔ Files ignored due to path filters (30)
  • dist/slashed.essential.css is excluded by !**/dist/**
  • dist/slashed.essential.flat.css is excluded by !**/dist/**
  • dist/slashed.essential.flat.min.css is excluded by !**/dist/**
  • dist/slashed.essential.flat.min.css.map is excluded by !**/dist/**, !**/*.map
  • dist/slashed.essential.min.css is excluded by !**/dist/**
  • dist/slashed.essential.min.css.map is excluded by !**/dist/**, !**/*.map
  • dist/slashed.full.css is excluded by !**/dist/**
  • dist/slashed.full.flat.css is excluded by !**/dist/**
  • dist/slashed.full.flat.min.css is excluded by !**/dist/**
  • dist/slashed.full.flat.min.css.map is excluded by !**/dist/**, !**/*.map
  • dist/slashed.full.min.css is excluded by !**/dist/**
  • dist/slashed.full.min.css.map is excluded by !**/dist/**, !**/*.map
  • dist/slashed.optimal-components.css is excluded by !**/dist/**
  • dist/slashed.optimal-components.flat.css is excluded by !**/dist/**
  • dist/slashed.optimal-components.flat.min.css is excluded by !**/dist/**
  • dist/slashed.optimal-components.flat.min.css.map is excluded by !**/dist/**, !**/*.map
  • dist/slashed.optimal-components.min.css is excluded by !**/dist/**
  • dist/slashed.optimal-components.min.css.map is excluded by !**/dist/**, !**/*.map
  • dist/slashed.optimal-utilities.css is excluded by !**/dist/**
  • dist/slashed.optimal-utilities.flat.css is excluded by !**/dist/**
  • dist/slashed.optimal-utilities.flat.min.css is excluded by !**/dist/**
  • dist/slashed.optimal-utilities.flat.min.css.map is excluded by !**/dist/**, !**/*.map
  • dist/slashed.optimal-utilities.min.css is excluded by !**/dist/**
  • dist/slashed.optimal-utilities.min.css.map is excluded by !**/dist/**, !**/*.map
  • dist/slashed.optimal.css is excluded by !**/dist/**
  • dist/slashed.optimal.flat.css is excluded by !**/dist/**
  • dist/slashed.optimal.flat.min.css is excluded by !**/dist/**
  • dist/slashed.optimal.flat.min.css.map is excluded by !**/dist/**, !**/*.map
  • dist/slashed.optimal.min.css is excluded by !**/dist/**
  • dist/slashed.optimal.min.css.map is excluded by !**/dist/**, !**/*.map
📒 Files selected for processing (11)
  • .github/workflows/version-sync.yml
  • .gitignore
  • integrations/bricks/admin-app/src/App.svelte
  • integrations/bricks/admin-app/src/components/LayoutsTab.svelte
  • integrations/bricks/assets/admin-app/app.css
  • integrations/bricks/assets/admin-app/app.js
  • integrations/bricks/includes/class-css-generator.php
  • integrations/bricks/includes/class-tab-registry.php
  • integrations/bricks/includes/class-token-defaults.php
  • integrations/bricks/slashed-bricks.php
  • scripts/version-sync.js
📝 Walkthrough

Walkthrough

This PR introduces a new "Layouts" tab to the admin UI for managing CSS grid, container, and layout-related custom properties. It extends the admin backend (registry, token defaults, CSS generator) and frontend (Svelte component, routing) to support these settings. Concurrently, the release workflow is updated to publish built CSS bundles to a pinned commit SHA on the dist-release branch, with the PHP constant and CDN URL generation revised to reference that SHA.

Changes

Layouts Tab Feature

Layer / File(s) Summary
Tab Registry & Token Defaults
integrations/bricks/includes/class-tab-registry.php, integrations/bricks/includes/class-token-defaults.php
New layouts token tab is registered and default layout values (container widths, grid minimums, sidebar/cover/frame/reel sizing, etc.) are provided via a new get_layouts() factory method.
Layouts Tab UI Component
integrations/bricks/admin-app/src/components/LayoutsTab.svelte
A new Svelte component renders layout controls divided into "Basic" (containers, grids, switcher threshold, bento presets) and "Advanced" (breakout widths, primitive overrides) sections, each wired to a CSS custom property with computed default fallbacks and scoped styling.
App Navigation & Integration
integrations/bricks/admin-app/src/App.svelte
The main app imports and routes to LayoutsTab when ui.activeTab === 'layouts', enabling the layouts tab in the admin UI.
CSS Generation & Bundle Rebuild
integrations/bricks/includes/class-css-generator.php, integrations/bricks/assets/admin-app/app.css
The CSS generator processes layout overrides and emits sanitized CSS custom property declarations into the overrides layer; the admin CSS bundle is regenerated.

CSS Distribution & SHA Pinning

Layer / File(s) Summary
Release Workflow & Dist Publishing
.github/workflows/version-sync.yml, .gitignore
The release workflow now explicitly publishes rebuilt dist/ contents to a force-updated dist-release branch, captures the commit SHA, and restricts main-branch commits to only slashed-bricks.php and package manifests. Build artifacts are added to .gitignore.
PHP Constant & CDN URL Generation
integrations/bricks/slashed-bricks.php
A new SLASHED_BRICKS_DIST_SHA constant pins the CSS bundle to a specific commit on dist-release. The jsDelivr URL generation now uses this SHA instead of a tag-based path.
Version Sync Script Documentation
scripts/version-sync.js
Comments clarify that SLASHED_BRICKS_CSS_REF is for version comparison only and SLASHED_BRICKS_DIST_SHA (for CDN pinning) is managed by the GitHub Actions workflow.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

  • codeslash-dev/SLASHED#77: Both PRs extend the core token override pipeline by adding a new layouts section to Slashed_Bricks_CSS_Generator and Slashed_Bricks_Token_Defaults.
  • codeslash-dev/SLASHED#66: Both PRs adjust the CI/CD workflow to build and publish generated dist/ artifacts to an orphan branch (the retrieved PR introduces the initial publish-dist.yml flow that this PR's dist-SHA recording builds on).
  • codeslash-dev/SLASHED#74: Both PRs modify slashed_bricks_get_css_url() in integrations/bricks/slashed-bricks.php to change the default CSS bundle source to jsDelivr (main-branch tracking in #74 vs commit-SHA pinning via SLASHED_BRICKS_DIST_SHA in the main PR).
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately captures both main features: serving CSS from dist-branch SHA and adding a Layouts admin tab, matching the file changes and PR objectives.
Docstring Coverage ✅ Passed Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch claude/dist-sha-cdn

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

Comment @coderabbitai help to get the list of available commands and usage tips.

claude added 2 commits May 31, 2026 04:04
CSS bundles are no longer tracked in the main branch. Instead:

- A new SLASHED_BRICKS_DIST_SHA constant in slashed-bricks.php holds
  the commit SHA of the dist branch at release time. jsDelivr serves
  from this SHA (immutable, cached forever), so CDN behaviour is
  identical to before but without CSS files bloating main.

- SLASHED_BRICKS_CSS_REF is kept for version comparison only (the
  dashboard "update available" widget). DIST_SHA is now the CDN ref.

- The CDN URL path no longer includes /dist/ prefix because the dist
  branch has CSS files at its root (not in a subdirectory).

- version-sync.yml now pushes CSS to the dist branch during the release
  workflow and captures the resulting commit SHA, storing it back into
  slashed-bricks.php before committing to main.

- dist/*.css and dist/*.map are gitignored. Local dev still works:
  npm run build populates dist/ locally, and the plugin's symlink-mode
  fallback detects and serves local files automatically.

https://claude.ai/code/session_018u9uVFxgL7K6EpPjZPggKR
Adds a Layouts token tab to the Svelte admin panel, allowing users to
override container widths, grid column minimums, switcher threshold,
bento grid settings, and all other layout-primitive CSS variables
(sidebar, cover, frame, reel, imposter, equal-cols) without editing CSS.

- Register 'layouts' as a token tab in Tab_Registry
- Add get_layouts() defaults to Token_Defaults
- Add generate_layout_declarations() to CSS_Generator for all --sf-* layout vars
- Create LayoutsTab.svelte with Basic (containers/grid/switcher/bento) and
  Advanced (content-grid/sidebar/cover/frame/reel/imposter/equal-cols) sections
- Wire LayoutsTab into App.svelte

https://claude.ai/code/session_018u9uVFxgL7K6EpPjZPggKR

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)
integrations/bricks/slashed-bricks.php (1)

70-75: ⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Docstring is now stale.

The function docstring still says the URL is "pinned to an immutable release tag (see SLASHED_BRICKS_CSS_REF)", but slashed_bricks_get_css_url() now pins to SLASHED_BRICKS_DIST_SHA (the dist-branch commit SHA). Update the wording so the doc matches the implementation.

✏️ Suggested fix
- * Defaults to the jsDelivr CDN pinned to an immutable release tag
- * (see SLASHED_BRICKS_CSS_REF) so the plugin works without any local
- * file setup. The specific file (essential / optimal / full) is chosen
+ * Defaults to the jsDelivr CDN pinned to the immutable dist-branch commit
+ * SHA (see SLASHED_BRICKS_DIST_SHA) so the plugin works without any local
+ * file setup. The specific file (essential / optimal / full) is chosen
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@integrations/bricks/slashed-bricks.php` around lines 70 - 75, Update the
stale docstring for slashed_bricks_get_css_url to reflect that the URL is now
pinned to the dist-branch commit SHA (SLASHED_BRICKS_DIST_SHA) rather than the
immutable release tag SLASHED_BRICKS_CSS_REF; change the wording to mention
SLASHED_BRICKS_DIST_SHA as the pin source and keep the rest of the description
about local copy precedence and css_bundle selection intact so the doc matches
the implementation.
🧹 Nitpick comments (1)
.github/workflows/version-sync.yml (1)

82-110: ⚡ Quick win

Avoid interpolating release-tag input directly into run scripts.

${{ steps.ver.outputs.tag }} (lines 85, 96) derives from github.event.release.tag_name, an attacker-influenceable value that is expanded into the shell before execution (the ${{ steps.dist.outputs.sha }} on line 107 is git-derived and safe). Pass it via env and reference the shell variable instead to eliminate the template-injection surface flagged by static analysis.

🔒 Example hardening for the tag value
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          RELEASE_TAG: ${{ steps.ver.outputs.tag }}
           GIT_AUTHOR_NAME: github-actions[bot]
           ...
         run: |
           set -euo pipefail
           ...
-            echo "release-tag:   ${{ steps.ver.outputs.tag }}"
+            echo "release-tag:   ${RELEASE_TAG}"
           ...
-          git commit -m "build: dist for ${{ steps.ver.outputs.tag }}"
+          git commit -m "build: dist for ${RELEASE_TAG}"
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In @.github/workflows/version-sync.yml around lines 82 - 110, The workflow
currently interpolates steps.ver.outputs.tag directly into the run script (used
when writing SOURCE.txt and in the git commit message), which is
user-controllable; change the step to pass the tag through the environment
(e.g., set env: RELEASE_TAG: ${{ steps.ver.outputs.tag }}) and replace every
literal ${{ steps.ver.outputs.tag }} in the run block with the safe shell
variable $RELEASE_TAG (use proper quoting when embedding into SOURCE.txt and the
git commit message). Keep the existing handling of steps.dist.outputs.sha
(DIST_SHA) as-is, and ensure the sed replacement for SLASHED_BRICKS_DIST_SHA
continues to use the safe DIST_SHA variable.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In @.github/workflows/version-sync.yml:
- Around line 105-113: The sed update step ("Update SLASHED_BRICKS_DIST_SHA in
PHP") runs while the workflow is on the orphan dist-release branch where
integrations/bricks/slashed-bricks.php was removed; move the sed invocation so
it runs after the "Switch back to main working tree" (i.e., checkout main) so
the file exists and the edit persists, and ensure the workflow does not run sed
while on the orphan branch created by git checkout --orphan dist-release / git
rm -rf .; also verify that main has the other versioned edits
(SLASHED_BRICKS_CSS_REF, SLASHED_BRICKS_VERSION, package.json) from the release
flow so you won’t accidentally drop those bumps when committing the DIST_SHA
change.

In @.gitignore:
- Around line 16-21: Update the header comment above the dist entries to replace
the stale workflow reference "publish-dist.yml" with the correct workflow name
"version-sync.yml" (or ".github/workflows/version-sync.yml") so the comment
correctly states that the dist branch is published by version-sync.yml; modify
the comment text that currently mentions "the `dist` branch (publish-dist.yml)"
to "the `dist` branch (version-sync.yml)" in the .gitignore block containing
dist/slashed-bricks.zip, dist/*.css, dist/*.map.

---

Outside diff comments:
In `@integrations/bricks/slashed-bricks.php`:
- Around line 70-75: Update the stale docstring for slashed_bricks_get_css_url
to reflect that the URL is now pinned to the dist-branch commit SHA
(SLASHED_BRICKS_DIST_SHA) rather than the immutable release tag
SLASHED_BRICKS_CSS_REF; change the wording to mention SLASHED_BRICKS_DIST_SHA as
the pin source and keep the rest of the description about local copy precedence
and css_bundle selection intact so the doc matches the implementation.

---

Nitpick comments:
In @.github/workflows/version-sync.yml:
- Around line 82-110: The workflow currently interpolates steps.ver.outputs.tag
directly into the run script (used when writing SOURCE.txt and in the git commit
message), which is user-controllable; change the step to pass the tag through
the environment (e.g., set env: RELEASE_TAG: ${{ steps.ver.outputs.tag }}) and
replace every literal ${{ steps.ver.outputs.tag }} in the run block with the
safe shell variable $RELEASE_TAG (use proper quoting when embedding into
SOURCE.txt and the git commit message). Keep the existing handling of
steps.dist.outputs.sha (DIST_SHA) as-is, and ensure the sed replacement for
SLASHED_BRICKS_DIST_SHA continues to use the safe DIST_SHA variable.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: c08e1cad-98fa-4341-adb0-2257fd89d352

📥 Commits

Reviewing files that changed from the base of the PR and between 4b0ea38 and 346d4a5.

⛔ Files ignored due to path filters (30)
  • dist/slashed.essential.css is excluded by !**/dist/**
  • dist/slashed.essential.flat.css is excluded by !**/dist/**
  • dist/slashed.essential.flat.min.css is excluded by !**/dist/**
  • dist/slashed.essential.flat.min.css.map is excluded by !**/dist/**, !**/*.map
  • dist/slashed.essential.min.css is excluded by !**/dist/**
  • dist/slashed.essential.min.css.map is excluded by !**/dist/**, !**/*.map
  • dist/slashed.full.css is excluded by !**/dist/**
  • dist/slashed.full.flat.css is excluded by !**/dist/**
  • dist/slashed.full.flat.min.css is excluded by !**/dist/**
  • dist/slashed.full.flat.min.css.map is excluded by !**/dist/**, !**/*.map
  • dist/slashed.full.min.css is excluded by !**/dist/**
  • dist/slashed.full.min.css.map is excluded by !**/dist/**, !**/*.map
  • dist/slashed.optimal-components.css is excluded by !**/dist/**
  • dist/slashed.optimal-components.flat.css is excluded by !**/dist/**
  • dist/slashed.optimal-components.flat.min.css is excluded by !**/dist/**
  • dist/slashed.optimal-components.flat.min.css.map is excluded by !**/dist/**, !**/*.map
  • dist/slashed.optimal-components.min.css is excluded by !**/dist/**
  • dist/slashed.optimal-components.min.css.map is excluded by !**/dist/**, !**/*.map
  • dist/slashed.optimal-utilities.css is excluded by !**/dist/**
  • dist/slashed.optimal-utilities.flat.css is excluded by !**/dist/**
  • dist/slashed.optimal-utilities.flat.min.css is excluded by !**/dist/**
  • dist/slashed.optimal-utilities.flat.min.css.map is excluded by !**/dist/**, !**/*.map
  • dist/slashed.optimal-utilities.min.css is excluded by !**/dist/**
  • dist/slashed.optimal-utilities.min.css.map is excluded by !**/dist/**, !**/*.map
  • dist/slashed.optimal.css is excluded by !**/dist/**
  • dist/slashed.optimal.flat.css is excluded by !**/dist/**
  • dist/slashed.optimal.flat.min.css is excluded by !**/dist/**
  • dist/slashed.optimal.flat.min.css.map is excluded by !**/dist/**, !**/*.map
  • dist/slashed.optimal.min.css is excluded by !**/dist/**
  • dist/slashed.optimal.min.css.map is excluded by !**/dist/**, !**/*.map
📒 Files selected for processing (11)
  • .github/workflows/version-sync.yml
  • .gitignore
  • integrations/bricks/admin-app/src/App.svelte
  • integrations/bricks/admin-app/src/components/LayoutsTab.svelte
  • integrations/bricks/assets/admin-app/app.css
  • integrations/bricks/assets/admin-app/app.js
  • integrations/bricks/includes/class-css-generator.php
  • integrations/bricks/includes/class-tab-registry.php
  • integrations/bricks/includes/class-token-defaults.php
  • integrations/bricks/slashed-bricks.php
  • scripts/version-sync.js

Comment thread .github/workflows/version-sync.yml Outdated
Comment thread .gitignore
- version-sync.yml: move sed/DIST_SHA update to after `git checkout main`
  so slashed-bricks.php exists when sed runs (was silently failing on orphan branch)
- version-sync.yml: pass RELEASE_TAG via env instead of interpolating
  steps.ver.outputs.tag directly into shell (template-injection hardening)
- slashed-bricks.php: update stale docstring to reference SLASHED_BRICKS_DIST_SHA
- .gitignore: fix stale workflow reference publish-dist.yml → version-sync.yml

https://claude.ai/code/session_018u9uVFxgL7K6EpPjZPggKR
@jackgranatowski
jackgranatowski merged commit b4d3a2c into main May 31, 2026
9 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants