Skip to content

Add comprehensive public API audit for SLASHED v0.3.0 - #94

Closed
jackgranatowski wants to merge 1 commit into
mainfrom
claude/slashed-api-audit-gOCrE
Closed

Add comprehensive public API audit for SLASHED v0.3.0#94
jackgranatowski wants to merge 1 commit into
mainfrom
claude/slashed-api-audit-gOCrE

Conversation

@jackgranatowski

@jackgranatowski jackgranatowski commented May 25, 2026

Copy link
Copy Markdown
Contributor

Summary

This PR adds a detailed public API audit document (audits/audit-c.md) for SLASHED v0.3.0, conducted on 2026-05-25. The audit comprehensively reviews the framework's CSS token system, naming conventions, class definitions, cascade layers, bundle configuration, and documentation before the planned API freeze.

Key Findings

The audit identifies 17 priority issues across 7 categories:

Critical Issues (🔴)

  • Incomplete PUBLIC API contract: ~120 tokens lack explicit PUBLIC/INTERNAL classification, including animation presets, gradients, opacity scales, icon tokens, typography aliases, and font families. This prevents reliable SemVer versioning for v1.0.

Major Issues (🟠)

  • Undeclared cross-file consumer hooks: --sf-field-border-color, --sf-field-text-color, --sf-color-code-block-bg/text used across files but not formally declared in tokens.css or PUBLIC API list
  • Scoped override tokens without declaration: --sf-icon-size, --sf-bento-cols, --sf-bento-row enable inline style overrides but lack formal PUBLIC status or documentation
  • Inconsistent size modifier scales: Layout primitives (stack, cluster, grid, section, icon) use different scale ranges (--2xs through --3xl vs --xs through --xl) without documented rationale
  • Animation keyframes without tokens: sf-spin and sf-shimmer keyframes lack corresponding --sf-animation-* tokens, breaking consistency with other animations
  • Hardcoded values instead of tokens: .is-dragging uses hardcoded opacity: 0.5 (should use --sf-opacity-50), .is-pending uses 0.7 (outside opacity scale), .skip-link uses z-index: 9999 (should use --sf-z-max)
  • Undocumented public classes: .sf-entrance--* (6 animation classes) exist in bundle but have zero documentation
  • Cascade layer semantics change in flat bundle: Flat bundle changes CSS cascade behavior compared to layered bundle without warning in documentation

Minor Issues (🟡)

  • Incorrect alias chain depth comment (claims ≤2 hops, actual is 3)
  • Missing documentation for .sf-icon--boxed, .sf-section--collapse, .sf-alternate token behavior
  • Dead references in code comments to non-existent audit documents
  • Deprecated tokens not marked as such in generated documentation
  • .visually-hidden and .skip-link missing from states.md documentation

Recommendations

Before API freeze:

  1. Complete PUBLIC API contract by classifying all ~120 tokens
  2. Formally declare scoped override tokens with usage documentation
  3. Standardize size modifier scales across all layout primitives
  4. Add missing --sf-animation-spin and --sf-animation-shimmer tokens
  5. Replace all hardcoded values with corresponding tokens
  6. Document .sf-entrance--* classes and their container-type requirements
  7. Add deprecation warnings to generated token documentation
  8. Document flat bundle cascade behavior changes

https://claude.ai/code/session_015tffPLQtpF4fh1ogtwGFpE

Summary by CodeRabbit

  • Documentation
    • Added comprehensive API audit (v0.3.0) documenting identified issues in token contracts, naming consistency, and documentation gaps with priority markers.

Review Change Stack

Full audit of SLASHED v0.3.0 public API covering token contract
completeness (A), naming consistency (B), class completeness (C),
cascade layer correctness (D), bundle consistency (E), doc sync (F),
and API-freeze concerns (G). 2 critical and 15 orange findings.

https://claude.ai/code/session_015tffPLQtpF4fh1ogtwGFpE
@coderabbitai

coderabbitai Bot commented May 25, 2026

Copy link
Copy Markdown
📝 Walkthrough

Walkthrough

This PR introduces a comprehensive pre-freeze audit of the public API (v0.3.0) that systematically identifies contract incompleteness, naming inconsistencies, code-documentation misalignment, cascade semantic risks, and freeze-readiness issues across seven audit categories with a consolidated risk priority table.

Changes

Public API v0.3.0 Pre-Freeze Audit

Layer / File(s) Summary
API Contract Audit
audits/audit-c.md
Audit header and categories A–B identify incomplete public token contract (missing --sf-* families, undeclared consumer hooks, scoped override token gaps) and UI API naming inconsistencies (size modifier scales, animation token gaps, modifier syntax variations).
Implementation-Documentation Alignment
audits/audit-c.md
Category C uncovers missing class definitions in docs/layout.md and docs/states.md, documentation gaps for animation classes sf-entrance--*, hardcoded inline values (opacity, duration, z-index) outside declared token scales, and structural issues in core/motion.css.
Cascade Layers and Bundle Consistency
audits/audit-c.md
Category D confirms cascade layer consistency but flags flat-bundle semantic risks and layer ordering that could trigger resets during future overwrites; category E validates bundle export correctness but notes missing .min.css exports in package.json.
Documentation Sync and Freeze Readiness
audits/audit-c.md
Category F details dead audit references, deprecated token gaps, and missing class documentation in state/layout docs; category G reaffirms contract incompleteness and scoped token ambiguity; final risk priority table consolidates 🔴 and 🟠 issues with file locations.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

  • codeslash-dev/SLASHED#54: Both PRs focus on the public-API "freeze" initiative, with this audit identifying alias-chain and API-surface defects that directly inform freeze readiness and CI checklist actions.
🚥 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 'Add comprehensive public API audit for SLASHED v0.3.0' directly and clearly summarizes the main change: adding a detailed audit document (audits/audit-c.md) for the public API before the planned freeze.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
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/slashed-api-audit-gOCrE

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.

@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

🤖 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 `@audits/audit-c.md`:
- Around line 77-79: The markdown fenced code blocks containing examples like
"--sf-stack-gap → --sf-space-content → --sf-content-gap → --sf-space-s",
"--sf-cluster-gap → --sf-space-gap → --sf-gap → --sf-space-m", and
"…slashed.states, slashed.themes…" (and the other occurrences around the same
areas) are missing language identifiers; update each triple-backtick fence to
include a language tag (e.g., ```text) so the blocks become ```text ... ``` to
satisfy markdownlint MD040 and improve rendering for the blocks showing the SF
token chains and slashed.* examples.
- Around line 329-330: The audit text currently claims view() timelines require
ancestors with container-type or overflow: visible; update the wording in
audits/audit-c.md to state instead that animation-timeline: view uses the
subject element’s nearest ancestor scroll container and a view timeline is only
created if that nearest ancestor has scrollable overflow (i.e., an ancestor
scroll container that can actually scroll), removing the incorrect
“container-type/overflow: visible” requirement; also add brief citations to the
spec/MDN (e.g., MDN `view-timeline`, `animation-timeline: view`,
`view-timeline-inset`, and CSS Scroll‑driven Animations Module Level 1) to
support the corrected rule.
🪄 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: 1e82126f-0beb-4a40-92d9-c84e776a7ddb

📥 Commits

Reviewing files that changed from the base of the PR and between 6e00221 and 4619fd1.

📒 Files selected for processing (1)
  • audits/audit-c.md

Comment thread audits/audit-c.md
Comment on lines +77 to +79
```
--sf-stack-gap → --sf-space-content → --sf-content-gap → --sf-space-s
```

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

Add language identifiers to fenced code blocks.

These fences are missing language tags, which triggers markdownlint MD040 and reduces readability in rendered docs.

Suggested patch
-```
+```text
 --sf-stack-gap → --sf-space-content → --sf-content-gap → --sf-space-s

- +text
--sf-cluster-gap → --sf-space-gap → --sf-gap → --sf-space-m


-```
+```text
…slashed.states, slashed.themes…

Also applies to: 84-86, 272-274

🧰 Tools
🪛 markdownlint-cli2 (0.22.1)

[warning] 77-77: Fenced code blocks should have a language specified

(MD040, fenced-code-language)

🤖 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 `@audits/audit-c.md` around lines 77 - 79, The markdown fenced code blocks
containing examples like "--sf-stack-gap → --sf-space-content → --sf-content-gap
→ --sf-space-s", "--sf-cluster-gap → --sf-space-gap → --sf-gap → --sf-space-m",
and "…slashed.states, slashed.themes…" (and the other occurrences around the
same areas) are missing language identifiers; update each triple-backtick fence
to include a language tag (e.g., ```text) so the blocks become ```text ... ```
to satisfy markdownlint MD040 and improve rendering for the blocks showing the
SF token chains and slashed.* examples.

Comment thread audits/audit-c.md
Comment on lines +329 to +330
Klasy są w bundlu `essential`, mają tokeny (`--sf-scroll-timeline-range-*`), Safari fallback, ale zero dokumentacji poza kodem. W szczególności: brak opisu że te klasy potrzebują ancestor z `container-type` lub `overflow: visible` aby `view()` timeline działał.

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

🧩 Analysis chain

🌐 Web query:

For CSS scroll-driven animations using animation-timeline: view(), is an ancestor with container-typeoroverflow: visible required? Please provide MDN/spec references and browser-compat notes.

💡 Result:

No. You do not need an ancestor with container-type, and you do not need overflow: visible. For animation-timeline: view, the key requirement is that the subject element has a nearest ancestor scroller (a “nearest ancestor scroll container”) whose scrollport is created by having scrollable overflow; if the scroller “does not overflow its container in the axis dimension or if the overflow is hidden or clipped, no scroll progress timeline will be created” [1]. MDN / reference details 1) How scroller lookup works for view - view “create[s] an anonymous view progress timeline based on when an element comes into view inside its nearest scroll container” [2]. - MDN’s view documentation also reiterates that the view timeline is based on the subject’s visibility within its nearest ancestor scroller [3]. 2) Overflow requirements (not container-type) - MDN’s view-timeline shorthand documentation explicitly states that if the scroller “does not overflow its container in the axis dimension or if the overflow is hidden or clipped, no scroll progress timeline will be created” [1]. - MDN’s view-timeline-inset property includes the same requirement: if “the scroller element does not overflow its container in the axis dimension or if the overflow is hidden or clipped, no scroll progress timeline will be created” [4]. So for view, overflow: visible is just the default value, but what matters is whether there is a scroll container with scrollable overflow; and if the nearest scroll container’s overflow is hidden or clipped, the view progress timeline won’t be created [1][4]. container-type does not appear as a prerequisite in these references. Spec (CSS Scroll-driven Animations Module Level 1) - The spec defines that a ViewTimeline is “inactive” if its source or subject’s nearest ancestor scroll container has “no scrollable overflow” (or if there is no such ancestor, e.g. print media) [5]. This aligns with the MDN language about “no scroll progress timeline … created” [1][4]. Browser-compat notes (practical) - Chrome and other engines will typically treat overflow: hidden / overflow: clip as preventing the relevant scroll progress timeline from being created for the view-based timeline (because the scroll container ends up effectively not providing scrollable overflow for the ViewTimeline), as reflected by MDN’s warning that hidden/clipped overflow results in no timeline [1][4]. - The Chrome developer guide also describes View Timelines as depending on the subject being tracked within the scroller/view region (named/anonymous view timelines) but does not add any container-type requirement [6]. Answering the question directly - container-type ancestor required? No evidence from MDN/spec; view tracks the subject’s visibility within its nearest ancestor scroll container [2][3][5]. - overflow: visible ancestor required? No. What is required is a nearest ancestor scroll container with scrollable overflow; if the nearest scroll container’s overflow is hidden or clipped (or otherwise doesn’t create scrollable overflow in the axis), the view progress timeline is inactive / not created [1][4][5].

Citations:


Fix the audit’s view() ancestor requirement claim (it’s not accurate).

For animation-timeline: view, there’s no requirement for ancestors with container-type, and overflow: visible is not needed. The ViewTimeline is based on the subject element’s nearest ancestor scroll container; if that nearest scroll container doesn’t have scrollable overflow (e.g., overflow is hidden/clipped so no axis scrollable overflow), the view progress timeline won’t be created. Update the audit wording at audits/audit-c.md (lines 329-330) to reflect the “nearest ancestor scroll container with scrollable overflow” rule and cite the spec/MDN (e.g., MDN view-timeline, animation-timeline: view, view-timeline-inset, and CSS Scroll-driven Animations Module Level 1).

🧰 Tools
🪛 LanguageTool

[typographical] ~329-~329: Przed spójnikiem „że” stawiamy przecinek: "opisu, że".
Context: ...tacji poza kodem. W szczególności: brak opisu że te klasy potrzebują ancestor z `contain...

(BRAK_PRZECINKA_ZE)

🤖 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 `@audits/audit-c.md` around lines 329 - 330, The audit text currently claims
view() timelines require ancestors with container-type or overflow: visible;
update the wording in audits/audit-c.md to state instead that
animation-timeline: view uses the subject element’s nearest ancestor scroll
container and a view timeline is only created if that nearest ancestor has
scrollable overflow (i.e., an ancestor scroll container that can actually
scroll), removing the incorrect “container-type/overflow: visible” requirement;
also add brief citations to the spec/MDN (e.g., MDN `view-timeline`,
`animation-timeline: view`, `view-timeline-inset`, and CSS Scroll‑driven
Animations Module Level 1) to support the corrected rule.

@jackgranatowski
jackgranatowski marked this pull request as draft May 26, 2026 07:56
@jackgranatowski
jackgranatowski deleted the claude/slashed-api-audit-gOCrE branch May 31, 2026 18:00
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