v0.6.25: Add .sf-bg layer, overflow-fade variants, button/card components - #94
Merged
jackgranatowski merged 11 commits intoJun 29, 2026
Merged
Conversation
Panel layout (desktop/mobile):
- Inject sf-panel-push stylesheet into document.head on mount; use
html.sf-panel-active { padding-right: 420px; box-sizing: border-box }
so the page shrinks beside the panel even when themes set overflow-x:hidden
- Toggle sf-panel-active class via $effect (add on desktop+open, remove otherwise)
- Detect mobile (≤768px) via MediaQueryList; on mobile the panel is a
full-width overlay instead of pushing content
- Position panel/trigger relative to --wp-admin--admin-bar--height CSS var
Modular scale live preview (JS + PHP):
- persistence.ts: computeScaleTokens() pre-computes all derived text/space
clamp tokens using the same pow() formula as the CSS framework; derived
tokens are injected as unlayered CSS so they beat @layer slashed.overrides
hardcoded values from legacy WP settings
- class-css-generator.php: flat_has_any() detects when scale source tokens
are saved as flat overrides; generate_typography_declarations() and
generate_spacing_declarations() skip emitting per-size hardcoded clamp
values in that case, letting the framework's CSS compute them instead
Sync script fix:
- sync-core.mjs local mode now preserves syncignored files before wiping
src/ (mirrors GitHub API mode behaviour); previously App.svelte,
AppOverlay.svelte, persistence.ts etc. were deleted on every build
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01R5nboHaQC81NxMpVfaktdf
Update vendored slashed.full.css bundle and sync panel component changes for SliderRow, BordersPanel, LayoutPanel, and SpacingPanel that were present on this branch. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01R5nboHaQC81NxMpVfaktdf
|
Warning Review limit reached
Next review available in: 48 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the 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 configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (5)
📝 WalkthroughWalkthroughAdds raw CSS expression editing to ChangesRaw CSS Token Editing, Modular-Scale Derivation, and PHP Clamp Suppression
AppOverlay Mobile-Responsive Behavior
sync-core Preservation, Header Relocation, and Framework CSS
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related issues
Possibly related PRs
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
…PCS array formatting - StudioHeader.svelte (plugin): reorder toolbar so Save comes first, then Undo/Redo, then the secondary actions (Share, Import, Reset) — matches the layout in the framework configurator and AppOverlay - class-css-generator.php: put each array item on its own line to satisfy WordPress.Arrays.ArrayDeclarationSpacing.ArrayItemNoNewLine (PHPCS error) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01R5nboHaQC81NxMpVfaktdf
PR Summary by QodoRelease v0.6.25: add .sf-bg layer, overflow-fade variants, and admin token UX fixes Description
Diagram
High-Level Assessment
Files changed (11)
|
Code Review by Qodo
1.
|
![qodo-code-review[bot]](https://avatars.githubusercontent.com/in/484649?s=60&v=4){kind=small}
Add assertWithinSrc() and isFile() checks before reading and writing preserved syncignore entries in both local and GitHub modes, preventing a malicious/malformed .syncignore from escaping the src/ directory or crashing on directory entries.
![github-advanced-security[bot]](https://avatars.githubusercontent.com/in/57789?s=60&v=4){kind=small}
window.slashedApp.rest.url is PHP-injected but treated as a tainted DOM source by static analysis. Parsing with URL() and asserting origin === window.location.origin eliminates the client-side request forgery vector (CWE-918) before the fetch call.
…tion Replace assertWithinSrc() helper calls in the syncignore preservation blocks with inline resolve()+startsWith(SRC_ROOT) checks — the explicit pattern CodeQL's TaintedPath (CWE-022) sanitizer detection recognises. Both save and restore phases in local and GitHub modes are covered.
…QL CWE-918 The compiled artifact contained the old wpSave without origin validation. Patch app.js directly to match the source fix in persistence.ts. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01L9LLXdjBSrE5BZdPSomqJs
…; exclude compiled assets
sync-core.mjs: replace Map-keyed approach with array of {rel,content} so both
the save and restore phases use resolve(join(SRC,rel)).startsWith(SRC_ROOT)
inline — the canonical CodeQL path-traversal sanitizer pattern on each sink.
codeql.yml: exclude SLASHED-for-WP/assets/** and integrations/bricks/assets/**
(compiled build artifacts) from CodeQL scanning. Source TypeScript is already
analyzed; scanning minified bundles produces false-positive SSRF alerts.
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01L9LLXdjBSrE5BZdPSomqJs
… paths-ignore Replace statSync(path)+readFileSync(path) with openSync→fstatSync(fd)→readFileSync(fd) in both preservation blocks. All three operations share the same file descriptor so the file cannot be swapped between the type-check and the read (CWE-367 / js/file-system-race). Also revert the paths-ignore workaround from codeql.yml added in the previous commit; real fixes should address the root cause, not suppress the scanner. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01L9LLXdjBSrE5BZdPSomqJs
…liderRow
- flat_has_any(): call validate_override_value() so detection matches
emission logic; invalid values no longer suppress legacy clamp rules
- persistence.ts: fix spread order to { ...derived, ...ov } so user
overrides always win over computed derived tokens in the live preview
- SliderRow.svelte: include isEditing in showRaw so the raw input stays
visible while focused even on empty; defer onReset() to onblur
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01L9LLXdjBSrE5BZdPSomqJs
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 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 `@SLASHED-for-WP/admin-app/framework-css/badges/slashed.full.css`:
- Around line 2719-2722: The :where(:has(> .sf-bg)) rule is forcing parent
elements to position: relative, which can overwrite intentionally set absolute,
fixed, or sticky positioning. Update the selector in slashed.full.css so the
auto-isolation remains, but positioning is only applied when the parent is known
to be static or via an explicit opt-in class; keep the rule scoped around
.sf-bg-related wrappers rather than globally changing every parent.
In `@SLASHED-for-WP/admin-app/scripts/sync-core.mjs`:
- Around line 269-276: The preserved-file handling in sync-core.mjs still
follows symlinks because srcPath is only checked lexically before openSync, so a
.syncignore entry can escape src/ and preserve outside content. Update the
preserved-file loops around the file-open/read logic to reject symlinks using a
no-follow open or another handle-based check, and keep the inode-safe stat/read
flow in place without reintroducing a pre-open lstatSync race.
In `@SLASHED-for-WP/admin-app/src/AppOverlay.svelte`:
- Around line 209-214: The panel push style in AppOverlay.svelte is mutating the
root box model by setting box-sizing on html, which can affect the entire host
page. Update the pushStyle CSS in the AppOverlay/panel push logic so it only
applies padding/overflow-related changes on html and remove the box-sizing rule
from the sf-panel-active styling.
In `@SLASHED-for-WP/admin-app/src/components/panels/BordersPanel.svelte`:
- Around line 74-82: The radius and component value helpers in
BordersPanel.svelte are treating valid "0" overrides as falsy, so they
incorrectly fall back to defaults. Update getRadius and getComponentVal to
distinguish missing/empty values from numeric zero by checking for
null/undefined/empty string before parsing, and keep returning the parsed value
when it is 0. Preserve the existing var/calc/clamp handling while ensuring
zero-valued overrides remain selected by the slider.
In `@SLASHED-for-WP/includes/class-css-generator.php`:
- Around line 98-117: The CSS source-key detection in class-css-generator.php is
only checking legacy per-size tokens, so scale-only overrides can still be
shadowed by previously saved hardcoded values. Update the skip logic around
flat_has_any in the CSS generator to also recognize the derived scale inputs
used by persistence.ts, specifically the text-scale, text-display-scale, and
space-scale tokens, so frontend output is regenerated consistently with the
client preview. Keep the fix localized to the scale-detection flow in the CSS
generator and ensure the existing text and space branches both honor these
scale-based overrides.
🪄 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: ef7e12fc-6bc4-4a07-a43f-dbc4224f7140
📒 Files selected for processing (12)
SLASHED-for-WP/admin-app/framework-css/badges/slashed.full.cssSLASHED-for-WP/admin-app/scripts/sync-core.mjsSLASHED-for-WP/admin-app/src/AppOverlay.svelteSLASHED-for-WP/admin-app/src/components/inputs/SliderRow.svelteSLASHED-for-WP/admin-app/src/components/panels/BordersPanel.svelteSLASHED-for-WP/admin-app/src/components/panels/LayoutPanel.svelteSLASHED-for-WP/admin-app/src/components/panels/SpacingPanel.svelteSLASHED-for-WP/admin-app/src/components/shell/StudioHeader.svelteSLASHED-for-WP/admin-app/src/lib/persistence.tsSLASHED-for-WP/assets/admin-app/app.cssSLASHED-for-WP/assets/admin-app/app.jsSLASHED-for-WP/includes/class-css-generator.php
- sync-core.mjs: use O_NOFOLLOW flag in openSync so symlinked .syncignore entries cannot read files outside src/ without a TOCTOU-prone pre-check - slashed.full.css: remove position:relative from :where(:has(>.sf-bg)) to avoid clobbering intentional absolute/fixed/sticky parents; add opt-in .sf-bg-parent class for static wrappers that need a containing block - AppOverlay.svelte: replace box-sizing:border-box on html.sf-panel-active with overflow-x:clip to avoid mutating the root box model site-wide - BordersPanel.svelte: fix getRadiusValue/getComponentVal to use isNaN(parsed) instead of ||, so a saved value of 0 is preserved correctly - class-css-generator.php: add --sf-text-scale, --sf-text-display-scale, and --sf-space-scale to the flat_has_any detection keys so scale-only overrides correctly suppress legacy hardcoded clamp declarations on the frontend Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01L9LLXdjBSrE5BZdPSomqJs
This was referenced Jun 29, 2026
This was referenced Jul 7, 2026
11 tasks
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
3 participants
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.
Summary
This release adds three major component systems to the SLASHED framework:
Background layer (
.sf-bg): A new absolutely-positioned cover media component that sits behind parent content. Supports bare<img>or wrapper with nested<img>/<video>/<picture>. Auto-promotes parent to positioned, isolated stacking context via:has(), composing natively under.sf-scrim.Overflow fade variants: Extends
.sf-overflow-fadewith directional modifiers (--left,--right,--top,--bottom,--block,--inline) using mask gradients. Replaces hardcoded--sf-scroll-shadow-sizereferences with--sf-mask-scrim-startand--sf-mask-scrim-endtokens for consistency.Button and card components: Staged (commented) component definitions for
.sf-btn(with style/semantic/width variants and loading state) and.sf-card(with media, avatar, title subcomponents). Includes form layout helpers (.sf-field,.sf-form-row,.sf-form-col,.sf-form-inline) and table component tokens.Admin app improvements:
SliderRowcomponent with raw CSS expression mode for modular-scale source tokensFramework version: Updated to v0.6.25
Type
Checklist
npm testpassesnpm run lintpassesnpm run verifypassesCHANGELOG.mdupdatedNotes
All component definitions are staged (commented out) pending v0.8 release. The
.sf-bglayer and overflow-fade variants are production-ready. Raw CSS expression mode in the admin app enables power users to reference framework tokens directly (e.g.,var(--sf-container-default)) in the live preview.https://claude.ai/code/session_01R5nboHaQC81NxMpVfaktdf
Summary by CodeRabbit
New Features
Bug Fixes