fix(admin-app): vendor optional/ CSS layers and track framework's dist/ rename - #173
Conversation
…t/ rename sync-core.mjs only ever vendored core/ chrome layers, so main.ts's new `@framework-css/optional/components.css` import (and its tokens.components.css dependency) had no vendored source and broke `npm run build:admin-app` in CI. Also follow the framework's own badges/ -> dist/ rename for the full CSS bundle PreviewPanel.svelte imports, and re-sync src/ + framework-css/ to match the framework's current main.
Bundled framework CSS was pinned to v0.6.34, well behind the framework's current v0.7.1 release. Ran `npm run update-framework` to pull the latest release bundles, regenerate data/inventory.json + classes-hints.json + variables-hints.json from framework source, and stamp SLASHED_*_CSS_REF to v0.7.1.
package-lock.json still said MIT; package.json has said GPL-3.0-or-later since the license change. npm install regenerates this automatically, it had just drifted.
Code Review by QodoSorry, something went wrongWe weren't able to complete the code review on our side. Please try again |
📝 WalkthroughWalkthroughThis PR introduces a new optional ChangesComponents System, Token Refactors, and Configurator Wiring
Estimated code review effort: 4 (Complex) | ~75 minutes Sequence Diagram(s)sequenceDiagram
participant SyncScript
participant LocalRepo
participant GitHubAPI
participant FrameworkCSS
SyncScript->>LocalRepo: vendorChromeLocal(core layers)
SyncScript->>LocalRepo: vendorOptionalLocal(optional layers)
SyncScript->>GitHubAPI: vendorChromeRemote(core layers)
SyncScript->>GitHubAPI: vendorOptionalRemote(optional layers)
SyncScript->>FrameworkCSS: write framework-css/core/* and framework-css/optional/*
Possibly related issues
Possibly related PRs
Suggested labels: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 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 |
PR Summary by QodoFix admin-app vendoring for optional CSS + dist/ rename; sync framework v0.7.1
AI Description
Diagram
High-Level Assessment
Files changed (48)
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (6)
SLASHED-for-WP/admin-app/src/components/panels/ComponentsPanel.svelte (4)
85-89: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueUnused
parseNumhelper.
parseNumis defined but never called in this file (getValhandles numeric extraction instead). Looks like leftover copy-paste from another panel.🤖 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 `@SLASHED-for-WP/admin-app/src/components/panels/ComponentsPanel.svelte` around lines 85 - 89, The parseNum helper in ComponentsPanel.svelte is unused and should be removed; keep the file focused on the numeric extraction already handled by getVal. Delete the parseNum function and any related dead code, and make sure no references remain so the component only contains the active logic.
91-97: 🎯 Functional Correctness | 🔵 Trivial | 💤 Low valueMedia radius slider doesn't reflect the live inner radius.
getValfalls back to the statict.defaultwhenever the override looks like a var/calc/clamp expression. For "Media radius" (rawDefaultvar(--sf-card-radius, var(--sf-radius-m))), this means the slider's numeric display stays pinned at0.5even after the user changes "Radius (inner)" away from its default — unlike the "Radius (outer, computed)" readout below, which correctly derives fromcardRadius. Minor UX inconsistency, not a functional break since the token still resolves correctly in CSS.🤖 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 `@SLASHED-for-WP/admin-app/src/components/panels/ComponentsPanel.svelte` around lines 91 - 97, The Media radius slider is using getVal to fall back to t.default for var/calc/clamp values, which keeps the displayed value static instead of reflecting the live inner radius. Update getVal in ComponentsPanel.svelte so the Media radius token derives its numeric display from the current cardRadius/inner radius state rather than always returning the default when the override is an expression, matching the behavior of the “Radius (outer, computed)” readout.
37-52: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueDuplicate inline type for
BUTTON_TOKENS/CARD_TOKENS.Both arrays repeat the identical
Array<{ label: string; token: string; ... }>shape. Extracting a sharedTokenDeftype would reduce duplication.🤖 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 `@SLASHED-for-WP/admin-app/src/components/panels/ComponentsPanel.svelte` around lines 37 - 52, The `BUTTON_TOKENS` and `CARD_TOKENS` constants in `ComponentsPanel.svelte` repeat the same inline array item shape, so extract a shared token type to remove duplication. Define a reusable `TokenDef` (or similarly named) type near these constants and apply it to both arrays, keeping the existing fields like `label`, `token`, `unit`, `min`, `max`, `step`, `default`, `rawDefault`, and `variableOptions`. Update any related typings in the panel so both token lists use the shared definition consistently.
116-117: 🎯 Functional Correctness | 🔵 Trivial | ⚡ Quick winMagic array indices for computed radius/padding are fragile.
cardRadius/cardPaddingrely onCARD_TOKENS[2]andCARD_TOKENS[0]positionally. IfCARD_TOKENSis ever reordered or a new entry inserted, this silently computes the wrong "Radius (outer, computed)" value with no compile-time signal.💡 Proposed fix
- let cardRadius = $derived(getVal(CARD_TOKENS[2])); - let cardPadding = $derived(getVal(CARD_TOKENS[0])); + let cardRadius = $derived(getVal(CARD_TOKENS.find(t => t.token === "--sf-card-radius")!)); + let cardPadding = $derived(getVal(CARD_TOKENS.find(t => t.token === "--sf-card-padding")!));🤖 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 `@SLASHED-for-WP/admin-app/src/components/panels/ComponentsPanel.svelte` around lines 116 - 117, The computed cardRadius and cardPadding values are using fragile positional access into CARD_TOKENS, so reordering the array can silently break the radius/padding display. Update the ComponentsPanel.svelte logic to stop relying on CARD_TOKENS[2] and CARD_TOKENS[0] directly; instead use explicit token lookup by name or a dedicated mapping/helper in the same computed section where getVal is used, so the intent stays stable even if CARD_TOKENS changes.SLASHED-for-WP/admin-app/src/components/panels/EffectsPanel.svelte (1)
26-26: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick win
DROP_SHADOW_STEPSand the inline token list can drift apart.
DROP_SHADOW_STEPS(Line 26) drives the preview SVGs, but the editable token list at Line 326-332 hardcodes the same five steps (xs/s/m/l/xl) with labels/defaults independently. If a step is ever added/removed from one list, the other silently falls out of sync (e.g. preview shows a step with no matching input, or vice versa).💡 Proposed fix
- {`#each` [ - { label: "Extra small", token: "--sf-drop-shadow-xs", default: "drop-shadow(0 0.5px 1px oklch(…))" }, - { label: "Small", token: "--sf-drop-shadow-s", default: "drop-shadow(0 1px 2px oklch(…))" }, - { label: "Medium", token: "--sf-drop-shadow-m", default: "drop-shadow(0 4px 6px oklch(…))" }, - { label: "Large", token: "--sf-drop-shadow-l", default: "drop-shadow(0 8px 16px oklch(…))" }, - { label: "Extra large", token: "--sf-drop-shadow-xl", default: "drop-shadow(0 16px 32px oklch(…))" }, - ] as t (t.token)} + {`#each` DROP_SHADOW_TOKENS as t (t.token)}and hoist a single
DROP_SHADOW_TOKENSconstant (labels + defaults) thatDROP_SHADOW_STEPS(for the preview) can derive from via.map(t => t.step).Also applies to: 326-332
🤖 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 `@SLASHED-for-WP/admin-app/src/components/panels/EffectsPanel.svelte` at line 26, `DROP_SHADOW_STEPS` and the editable token list in `EffectsPanel.svelte` are duplicated sources of truth and can drift out of sync. Hoist a single `DROP_SHADOW_TOKENS` constant containing each step’s step/label/default data, then derive `DROP_SHADOW_STEPS` from it with a map so the preview SVGs and the token inputs always stay aligned. Update the preview logic and the token rendering code to reference the shared constant instead of hardcoded `xs/s/m/l/xl` values.SLASHED-for-WP/admin-app/src/components/inputs/SliderRow.svelte (1)
22-101: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueSolid state model, minor readability nit.
The picker/raw/slider derivation logic is well thought out (sentinel value,
isExprShapeddetection,manualViewoverride layer). One small nit:allOptionsis typed as an inline{ label: string; value: string }[](Line 35) rather than reusing the importedVarOptiontype — purely cosmetic.🤖 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 `@SLASHED-for-WP/admin-app/src/components/inputs/SliderRow.svelte` around lines 22 - 101, The `SliderRow.svelte` option list is using an inline `{ label: string; value: string }[]` shape instead of the existing `VarOption` type, which is just a readability inconsistency. Update `allOptions` in `SliderRow` to reuse `VarOption` (or a shared derived type based on it) so the picker logic stays aligned with the imported option model and the type is defined in one place.
🤖 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 `@scripts/registry-sources.js`:
- Line 31: The CLASS_FILES entry includes a nonexistent optional/utilities.css
source, so update scripts/registry-sources.js by either removing that path from
CLASS_FILES or adding the missing file under
SLASHED-for-WP/admin-app/framework-css/optional. Make sure the registry list
matches the actual optional CSS sources, especially alongside components.css and
tokens.components.css, so downstream source resolution does not fail.
In `@SLASHED-for-WP/admin-app/src/components/inputs/SliderRow.svelte`:
- Around line 144-169: The raw-text branch in SliderRow.svelte hides the “back
to variable” button too aggressively, unlike the slider branch. Update the
conditional around the back link in the showRawText section to match the same
visibility rule used for the slider path (the one based on canPick/currentRaw),
so rows with rawDefault/onRawSet but no variableOptions still show an explicit
way back to variable mode.
In `@SLASHED-for-WP/admin-app/src/components/panels/BordersPanel.svelte`:
- Line 62: The mediaRadius derived value in BordersPanel.svelte only parses a
numeric rem value and fails for raw token expressions like var() or calc(),
causing the preview to fall back to 0rem. Update the mediaRadius computation to
use the same fallback handling as getRadiusValue() and getComponentVal(), so raw
overrides from onRawSet are resolved before parsing and the preview matches the
selected radius.
In `@SLASHED-for-WP/data/classes-hints.json`:
- Around line 2-61: The sf-is-* entries in classes-hints.json currently reuse
raw selector fragments as their descriptions, which makes the class-hint UI show
incorrect copy. Update the affected objects under the classes-hints data block
so each symbol (sf-is-disabled, sf-is-readonly, sf-is-active, sf-is-selected,
sf-is-current, sf-is-highlighted, sf-is-pressed, sf-is-valid, sf-is-success,
sf-is-invalid, sf-is-error, sf-is-warning, sf-is-info, sf-is-danger,
sf-is-empty) has the intended per-class description text instead of the
placeholder selector strings.
---
Nitpick comments:
In `@SLASHED-for-WP/admin-app/src/components/inputs/SliderRow.svelte`:
- Around line 22-101: The `SliderRow.svelte` option list is using an inline `{
label: string; value: string }[]` shape instead of the existing `VarOption`
type, which is just a readability inconsistency. Update `allOptions` in
`SliderRow` to reuse `VarOption` (or a shared derived type based on it) so the
picker logic stays aligned with the imported option model and the type is
defined in one place.
In `@SLASHED-for-WP/admin-app/src/components/panels/ComponentsPanel.svelte`:
- Around line 85-89: The parseNum helper in ComponentsPanel.svelte is unused and
should be removed; keep the file focused on the numeric extraction already
handled by getVal. Delete the parseNum function and any related dead code, and
make sure no references remain so the component only contains the active logic.
- Around line 91-97: The Media radius slider is using getVal to fall back to
t.default for var/calc/clamp values, which keeps the displayed value static
instead of reflecting the live inner radius. Update getVal in
ComponentsPanel.svelte so the Media radius token derives its numeric display
from the current cardRadius/inner radius state rather than always returning the
default when the override is an expression, matching the behavior of the “Radius
(outer, computed)” readout.
- Around line 37-52: The `BUTTON_TOKENS` and `CARD_TOKENS` constants in
`ComponentsPanel.svelte` repeat the same inline array item shape, so extract a
shared token type to remove duplication. Define a reusable `TokenDef` (or
similarly named) type near these constants and apply it to both arrays, keeping
the existing fields like `label`, `token`, `unit`, `min`, `max`, `step`,
`default`, `rawDefault`, and `variableOptions`. Update any related typings in
the panel so both token lists use the shared definition consistently.
- Around line 116-117: The computed cardRadius and cardPadding values are using
fragile positional access into CARD_TOKENS, so reordering the array can silently
break the radius/padding display. Update the ComponentsPanel.svelte logic to
stop relying on CARD_TOKENS[2] and CARD_TOKENS[0] directly; instead use explicit
token lookup by name or a dedicated mapping/helper in the same computed section
where getVal is used, so the intent stays stable even if CARD_TOKENS changes.
In `@SLASHED-for-WP/admin-app/src/components/panels/EffectsPanel.svelte`:
- Line 26: `DROP_SHADOW_STEPS` and the editable token list in
`EffectsPanel.svelte` are duplicated sources of truth and can drift out of sync.
Hoist a single `DROP_SHADOW_TOKENS` constant containing each step’s
step/label/default data, then derive `DROP_SHADOW_STEPS` from it with a map so
the preview SVGs and the token inputs always stay aligned. Update the preview
logic and the token rendering code to reference the shared constant instead of
hardcoded `xs/s/m/l/xl` values.
🪄 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: 9bf0e216-88e6-4bd5-bc8b-3ccd4c032cae
⛔ Files ignored due to path filters (6)
SLASHED-for-WP/admin-app/framework-css/dist/slashed.full.cssis excluded by!**/dist/**SLASHED-for-WP/dist/slashed.full.cssis excluded by!**/dist/**SLASHED-for-WP/dist/slashed.optimal-components.cssis excluded by!**/dist/**SLASHED-for-WP/dist/slashed.optimal-utilities.cssis excluded by!**/dist/**SLASHED-for-WP/dist/slashed.optimal.cssis excluded by!**/dist/**package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (43)
SLASHED-for-WP/admin-app/.vendored-manifest.jsonSLASHED-for-WP/admin-app/framework-css/core/layout.cssSLASHED-for-WP/admin-app/framework-css/core/macros.cssSLASHED-for-WP/admin-app/framework-css/core/themes.cssSLASHED-for-WP/admin-app/framework-css/core/tokens.cssSLASHED-for-WP/admin-app/framework-css/core/tokens.layout.cssSLASHED-for-WP/admin-app/framework-css/core/tokens.macros.cssSLASHED-for-WP/admin-app/framework-css/optional/components.cssSLASHED-for-WP/admin-app/framework-css/optional/tokens.components.cssSLASHED-for-WP/admin-app/scripts/sync-core.mjsSLASHED-for-WP/admin-app/src/App.svelteSLASHED-for-WP/admin-app/src/components/CommandPalette.svelteSLASHED-for-WP/admin-app/src/components/DomainPanel.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/ComponentsPanel.svelteSLASHED-for-WP/admin-app/src/components/panels/EffectsPanel.svelteSLASHED-for-WP/admin-app/src/components/panels/HomePanel.svelteSLASHED-for-WP/admin-app/src/components/panels/LayoutPanel.svelteSLASHED-for-WP/admin-app/src/components/panels/MacrosPanel.svelteSLASHED-for-WP/admin-app/src/components/panels/MiscPanel.svelteSLASHED-for-WP/admin-app/src/components/panels/MotionPanel.svelteSLASHED-for-WP/admin-app/src/components/panels/SpacingPanel.svelteSLASHED-for-WP/admin-app/src/components/panels/TypographyPanel.svelteSLASHED-for-WP/admin-app/src/components/shell/PreviewPanel.svelteSLASHED-for-WP/admin-app/src/components/shell/SidebarNav.svelteSLASHED-for-WP/admin-app/src/data/api-index.generated.jsonSLASHED-for-WP/admin-app/src/data/classes.generated.jsonSLASHED-for-WP/admin-app/src/data/domain-patterns.jsonSLASHED-for-WP/admin-app/src/data/token-registry.generated.jsonSLASHED-for-WP/admin-app/src/lib/variableScales.tsSLASHED-for-WP/admin-app/src/main.tsSLASHED-for-WP/admin-app/vite.config.jsSLASHED-for-WP/assets/admin-app/app.cssSLASHED-for-WP/assets/admin-app/app.jsSLASHED-for-WP/data/classes-hints.jsonSLASHED-for-WP/data/inventory.jsonSLASHED-for-WP/data/variables-hints.jsonSLASHED-for-WP/integrations/bricks/data/inventory.jsonSLASHED-for-WP/integrations/bricks/slashed-bricks.phpSLASHED-for-WP/integrations/gutenberg/slashed-gutenberg.phpSLASHED-for-WP/slashed.phpscripts/registry-sources.js
| 'optional/forms.css', | ||
| 'optional/components.css', | ||
| 'optional/theme-example.css', | ||
| 'optional/utilities.css', |
There was a problem hiding this comment.
🗄️ Data Integrity & Integration | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
fd -i 'utilities.css' -p optionalRepository: codeslash-dev/SLASHED-Plugins
Length of output: 263
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n[repo files mentioning utilities.css]\n'
rg -n --hidden --glob '!**/.git/**' 'utilities\.css' .
printf '\n[paths named optional or containing optional/utilities.css]\n'
fd -a -HI 'optional' .
fd -a -HI 'utilities.css' .Repository: codeslash-dev/SLASHED-Plugins
Length of output: 3380
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n[exact path search]\n'
fd -a -HI 'utilities\.css$' .
printf '\n[reference search]\n'
rg -n --hidden --glob '!**/.git/**' 'optional/utilities\.css|utilities\.css' .
printf '\n[registry-sources context]\n'
sed -n '1,120p' scripts/registry-sources.jsRepository: codeslash-dev/SLASHED-Plugins
Length of output: 3758
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '\n[framework optional directory]\n'
find SLASHED-for-WP/admin-app/framework-css/optional -maxdepth 2 -type f | sort
printf '\n[context around registry source files]\n'
ls -la SLASHED-for-WP/admin-app/framework-cssRepository: codeslash-dev/SLASHED-Plugins
Length of output: 650
Remove optional/utilities.css from CLASS_FILES or add the missing source file. SLASHED-for-WP/admin-app/framework-css/optional/ has components.css and tokens.components.css, but no utilities.css, so scripts/registry-sources.js:31 now points at a nonexistent source path.
🤖 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 `@scripts/registry-sources.js` at line 31, The CLASS_FILES entry includes a
nonexistent optional/utilities.css source, so update scripts/registry-sources.js
by either removing that path from CLASS_FILES or adding the missing file under
SLASHED-for-WP/admin-app/framework-css/optional. Make sure the registry list
matches the actual optional CSS sources, especially alongside components.css and
tokens.components.css, so downstream source resolution does not fail.
Source: Coding guidelines
| {:else if showRawText} | ||
| <input | ||
| type="text" | ||
| value={rawDraft} | ||
| placeholder={rawDefault} | ||
| onfocus={() => { isEditing = true; }} | ||
| onfocus={() => { isEditingRaw = true; }} | ||
| onblur={() => { | ||
| isEditing = false; | ||
| if (!rawDraft.trim()) onReset(); | ||
| isEditingRaw = false; | ||
| const v = rawDraft.trim(); | ||
| if (!v) backToVariable(); | ||
| else onRawSet?.(v); | ||
| }} | ||
| onkeydown={(e) => { | ||
| if (e.key === "Enter") (e.currentTarget as HTMLInputElement).blur(); | ||
| }} | ||
| oninput={(e) => { | ||
| rawDraft = (e.target as HTMLInputElement).value; | ||
| const v = rawDraft.trim(); | ||
| if (v && onRawSet) onRawSet(v); | ||
| }} | ||
| class="w-full bg-black/5 dark:bg-white/5 border border-black/10 dark:border-white/10 rounded px-2 py-1.5 text-[11px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-500 focus:outline-none focus:border-indigo-500" | ||
| class="w-full bg-black/8 dark:bg-white/8 border border-indigo-500/50 rounded px-2 py-1.5 text-[11px] font-mono text-slate-700 dark:text-slate-300 placeholder:text-slate-500 focus:outline-none" | ||
| /> | ||
| {#if canPick} | ||
| <button | ||
| onclick={backToVariable} | ||
| class="text-[9px] font-mono text-indigo-600 dark:text-indigo-400 hover:underline cursor-pointer mt-0.5" | ||
| >← back to variable</button> | ||
| {/if} |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Inconsistent "back to variable" affordance in raw-text mode.
In the slider branch (Line 173), the back button shows when canPick || currentRaw !== undefined. In the raw-text branch (Line 164), it only shows when canPick. For rows with rawDefault/onRawSet but no variableOptions (e.g. LayoutPanel's sticky offsets, per the comment at Line 49-52), a user who opens raw-text mode via the </> toggle and enters an override has no visible way back except re-clicking </> — the explicit link is silently omitted here. Align the condition with the slider branch for consistency.
💡 Proposed fix
{`#if` canPick}
+ {:else if currentRaw !== undefined}
<button
onclick={backToVariable}
class="text-[9px] font-mono text-indigo-600 dark:text-indigo-400 hover:underline cursor-pointer mt-0.5"
>← back to variable</button>
{/if}🤖 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 `@SLASHED-for-WP/admin-app/src/components/inputs/SliderRow.svelte` around lines
144 - 169, The raw-text branch in SliderRow.svelte hides the “back to variable”
button too aggressively, unlike the slider branch. Update the conditional around
the back link in the showRawText section to match the same visibility rule used
for the slider path (the one based on canPick/currentRaw), so rows with
rawDefault/onRawSet but no variableOptions still show an explicit way back to
variable mode.
| let borderStyle = $derived(overrides["--sf-border-style"] ?? "solid"); | ||
| let focusRingColor = $derived(overrides["--sf-focus-ring-color"] ?? ""); | ||
| let dividerColor = $derived(overrides["--sf-divider-color"] ?? ""); | ||
| let mediaRadius = $derived(parseNum(overrides["--sf-media-radius"]?.replace("rem",""), 0)); |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
file='SLASHED-for-WP/admin-app/src/components/panels/BordersPanel.svelte'
# Show the relevant area around the derived values and helper functions.
sed -n '50,120p' "$file"
printf '\n---- preview usage ----\n'
sed -n '390,430p' "$file"
printf '\n---- raw-set / variable-options references ----\n'
rg -n 'onRawSet|variableOptions|mediaRadius|getRadiusValue|getComponentVal|sf-media-radius' "$file"Repository: codeslash-dev/SLASHED-Plugins
Length of output: 7446
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Locate parseNum and all media-radius references.
rg -n 'function parseNum|const parseNum|export .*parseNum|parseNum\(' SLASHED-for-WP/admin-app/src
printf '\n---- media radius references ----\n'
rg -n --hidden --glob '!**/node_modules/**' --glob '!**/dist/**' '--sf-media-radius|mediaRadius' SLASHED-for-WP/admin-app/src
printf '\n---- BordersPanel surrounding CSS/output ----\n'
sed -n '430,520p' SLASHED-for-WP/admin-app/src/components/panels/BordersPanel.svelteRepository: codeslash-dev/SLASHED-Plugins
Length of output: 4639
mediaRadius should handle raw var()/calc() overrides like the other radius helpers. getRadiusValue() and getComponentVal() already fall back for raw token expressions, but this derived value just calls parseNum(...). When --sf-media-radius is set through onRawSet, parseFloat("var(--sf-radius-m)") becomes NaN, so the preview box renders as 0rem instead of matching the selected radius.
🤖 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 `@SLASHED-for-WP/admin-app/src/components/panels/BordersPanel.svelte` at line
62, The mediaRadius derived value in BordersPanel.svelte only parses a numeric
rem value and fails for raw token expressions like var() or calc(), causing the
preview to fall back to 0rem. Update the mediaRadius computation to use the same
fallback handling as getRadiusValue() and getComponentVal(), so raw overrides
from onRawSet are resolved before parsing and the preview matches the selected
radius.
| "sf-is-disabled": { | ||
| "description": ".sf-is-hidden {", | ||
| "category": "States" | ||
| }, | ||
| "sf-is-readonly": { | ||
| "description": ".sf-is-hidden {", | ||
| "category": "States" | ||
| }, | ||
| "sf-is-active": { | ||
| "description": ".sf-is-loading {", | ||
| "category": "States" | ||
| }, | ||
| "sf-is-selected": { | ||
| "description": ".sf-is-loading {", | ||
| "category": "States" | ||
| }, | ||
| "sf-is-current": { | ||
| "description": ".sf-is-loading {", | ||
| "category": "States" | ||
| }, | ||
| "sf-is-highlighted": { | ||
| "description": ".sf-is-loading {", | ||
| "category": "States" | ||
| }, | ||
| "sf-is-pressed": { | ||
| "description": ".sf-is-loading {", | ||
| "category": "States" | ||
| }, | ||
| "sf-is-valid": { | ||
| "description": ".sf-is-open {", | ||
| "category": "States" | ||
| }, | ||
| "sf-is-success": { | ||
| "description": ".sf-is-open {", | ||
| "category": "States" | ||
| }, | ||
| "sf-is-invalid": { | ||
| "description": ".sf-is-open {", | ||
| "category": "States" | ||
| }, | ||
| "sf-is-error": { | ||
| "description": ".sf-is-open {", | ||
| "category": "States" | ||
| }, | ||
| "sf-is-warning": { | ||
| "description": ".sf-is-open {", | ||
| "category": "States" | ||
| }, | ||
| "sf-is-info": { | ||
| "description": ".sf-is-open {", | ||
| "category": "States" | ||
| }, | ||
| "sf-is-danger": { | ||
| "description": ".sf-is-open {", | ||
| "category": "States" | ||
| }, | ||
| "sf-is-empty": { | ||
| "description": ".sf-is-dragging {", | ||
| "category": "States" | ||
| }, |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Locate the script that generates classes-hints.json to find the description-extraction bug
fd -i 'gen-classes-hints'
fd -i 'classes-hints' --extension js --extension mjs
rg -n "classes-hints.json" --type js --type json -g '!node_modules'Repository: codeslash-dev/SLASHED-Plugins
Length of output: 167
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Map the relevant files and search for the hint JSON and its consumers/generators.
git ls-files | rg '(^|/)(data/classes-hints\.json|class-token-page\.php|classes-hints|hint|token-page|class-token)'Repository: codeslash-dev/SLASHED-Plugins
Length of output: 346
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Inspect the relevant consumer to see how the JSON fields are used.
ast-grep outline SLASHED-for-WP/includes/class-token-page.php --view expanded || true
printf '\n--- class-token-page.php (relevant slices) ---\n'
cat -n SLASHED-for-WP/includes/class-token-page.php | sed -n '1,260p'
printf '\n--- classes-hints.json (top slice) ---\n'
cat -n SLASHED-for-WP/data/classes-hints.json | sed -n '1,120p'Repository: codeslash-dev/SLASHED-Plugins
Length of output: 15609
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Find where classHints/description is consumed in the admin app.
rg -n "classHints|description" SLASHED-for-WP -g '!*.min.*' -g '!*.map'Repository: codeslash-dev/SLASHED-Plugins
Length of output: 50386
🏁 Script executed:
#!/bin/bash
set -euo pipefail
# Narrow down to the actual frontend source that consumes slashedApp.classHints.
git ls-files SLASHED-for-WP | rg '(^|/)(assets/admin-app|src|admin-app)/.*\.(js|jsx|ts|tsx|vue|svelte)$|(^|/)(app|main)\.(js|ts)$'
printf '\n--- classHints references ---\n'
rg -n --max-count 50 "classHints" SLASHED-for-WP --glob '!*.min.*' --glob '!*.map'
printf '\n--- likely tooltip/label references ---\n'
rg -n --max-count 80 "tooltip|hint|description|class hint|classHints" SLASHED-for-WP/assets SLASHED-for-WP/src --glob '!*.min.*' --glob '!*.map'Repository: codeslash-dev/SLASHED-Plugins
Length of output: 50386
🏁 Script executed:
#!/bin/bash
set -euo pipefail
printf '%s\n' '--- integrations/gutenberg/assets/editor/panel.js around class hint rendering ---'
cat -n SLASHED-for-WP/integrations/gutenberg/assets/editor/panel.js | sed -n '380,450p'
printf '\n%s\n' '--- integrations/bricks/editor-app/src/lib/class-hints.js ---'
cat -n SLASHED-for-WP/integrations/bricks/editor-app/src/lib/class-hints.js | sed -n '1,260p'
printf '\n%s\n' '--- admin app class hint usage references ---'
rg -n "classHints|hint|description" SLASHED-for-WP/admin-app/src SLASHED-for-WP/integrations/gutenberg/assets/editor/panel.js SLASHED-for-WP/integrations/bricks/editor-app/src/lib/class-hints.js --glob '!*.min.*' --glob '!*.map'Repository: codeslash-dev/SLASHED-Plugins
Length of output: 50386
Replace the sf-is-* hint text in SLASHED-for-WP/data/classes-hints.json
The description values for sf-is-disabled through sf-is-empty are raw selector fragments (.sf-is-hidden {, .sf-is-loading {, .sf-is-open {, .sf-is-dragging {) instead of class descriptions, and they feed the class-hint UI. Regenerate this block with the intended per-class copy.
🤖 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 `@SLASHED-for-WP/data/classes-hints.json` around lines 2 - 61, The sf-is-*
entries in classes-hints.json currently reuse raw selector fragments as their
descriptions, which makes the class-hint UI show incorrect copy. Update the
affected objects under the classes-hints data block so each symbol
(sf-is-disabled, sf-is-readonly, sf-is-active, sf-is-selected, sf-is-current,
sf-is-highlighted, sf-is-pressed, sf-is-valid, sf-is-success, sf-is-invalid,
sf-is-error, sf-is-warning, sf-is-info, sf-is-danger, sf-is-empty) has the
intended per-class description text instead of the placeholder selector strings.
2 participants
sync-core.mjs only ever vendored core/ chrome layers, so main.ts's new
@framework-css/optional/components.cssimport (and itstokens.components.css dependency) had no vendored source and broke
npm run build:admin-appin CI. Also follow the framework's ownbadges/ -> dist/ rename for the full CSS bundle PreviewPanel.svelte
imports, and re-sync src/ + framework-css/ to match the framework's
current main.
Summary by CodeRabbit