feat(plugin-basic-ui): Expose edge width customization interface

[FutureSeller]

This PR allows users to customize the width of edge.

[changeset-bot]

🦋 Changeset detected

Latest commit: 97dab54

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@stackflow/plugin-basic-ui	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[coderabbitai]

📝 Walkthrough

Summary by CodeRabbit

• New Features
  • Exposed theme interfaces to customize edge width, enabling configurable edge styling across the application.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

Walkthrough

The PR introduces configurability for edge element width in the basic-ui plugin by adding a new "edge" theming token with width property. The changes establish a theme contract, integrate dynamic CSS variable assignment, and update component styling to use the configurable value instead of a hardcoded value.

Changes

Cohort / File(s)	Change Summary
Changeset documentation .changeset/slow-trees-hunt.md	Adds release entry describing the feature to expose interfaces for modifying edge width
Theme contract extensions/plugin-basic-ui/src/basicUIPlugin.css.ts	Introduces edge: { width: string } to GLOBAL_VARS and androidValues, establishing the theming token for edge width
Plugin configuration extensions/plugin-basic-ui/src/basicUIPlugin.tsx	Extends dynamic CSS vars map to include edge.width from _options.edge?.width; minor formatting consolidation in transitionDuration mapping
Component styling and rendering extensions/plugin-basic-ui/src/components/AppScreen.css.ts, extensions/plugin-basic-ui/src/components/AppScreen.tsx	Replaces hardcoded edge width with globalVars.edge.width in CSS; adds inline CSS variable assignment via assignInlineVars and compactMap in component

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Changes follow a consistent, repetitive pattern for adding a new theming token across files
• No complex logic or behavioral modifications; purely configuration-driven
• Minimal cognitive load per file change; all modifications are straightforward property additions

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title accurately summarizes the main change: exposing edge width customization interface in plugin-basic-ui, which aligns with the changeset and code modifications.
Description check	✅ Passed	The PR description is directly related to the changeset, stating the core objective of allowing users to customize the width of edge.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled by default for public repositories
• Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between c23c5e6 and 1747c02.

📒 Files selected for processing (5)

• .changeset/slow-trees-hunt.md (1 hunks)
• extensions/plugin-basic-ui/src/basicUIPlugin.css.ts (2 hunks)
• extensions/plugin-basic-ui/src/basicUIPlugin.tsx (2 hunks)
• extensions/plugin-basic-ui/src/components/AppScreen.css.ts (1 hunks)
• extensions/plugin-basic-ui/src/components/AppScreen.tsx (1 hunks)

🧰 Additional context used

📓 Path-based instructions (3)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Write source in TypeScript with strict typing enabled across the codebase

Files:

• extensions/plugin-basic-ui/src/components/AppScreen.css.ts
• extensions/plugin-basic-ui/src/basicUIPlugin.tsx
• extensions/plugin-basic-ui/src/basicUIPlugin.css.ts
• extensions/plugin-basic-ui/src/components/AppScreen.tsx

extensions/plugin-*/**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

Plugins must implement only the documented lifecycle hooks (onInit, onBeforePush/onPushed, onBeforePop/onPopped, onBeforeReplace/onReplaced, onBeforeStepPush/onStepPushed, onBeforeStepPop/onStepPopped, onBeforeStepReplace/onStepReplaced, onChanged)

Files:

• extensions/plugin-basic-ui/src/components/AppScreen.css.ts
• extensions/plugin-basic-ui/src/basicUIPlugin.tsx
• extensions/plugin-basic-ui/src/basicUIPlugin.css.ts
• extensions/plugin-basic-ui/src/components/AppScreen.tsx

.changeset/*.md

📄 CodeRabbit inference engine (AGENTS.md)

Include a Changeset entry for any user-facing package change

Files:

• .changeset/slow-trees-hunt.md

🧬 Code graph analysis (2)

extensions/plugin-basic-ui/src/components/AppScreen.css.ts (2)

extensions/plugin-basic-ui/src/basicUIPlugin.css.ts (1)

• globalVars (51-54)

extensions/plugin-basic-ui/src/index.ts (1)

• globalVars (3-3)

extensions/plugin-basic-ui/src/components/AppScreen.tsx (3)

extensions/plugin-basic-ui/src/utils/compactMap.ts (1)

• compactMap (1-13)

extensions/plugin-basic-ui/src/basicUIPlugin.css.ts (1)

• globalVars (51-54)

extensions/plugin-basic-ui/src/index.ts (1)

• globalVars (3-3)

🔇 Additional comments (7)

extensions/plugin-basic-ui/src/basicUIPlugin.css.ts (2)

46-48: LGTM! Edge width token properly added to global vars.

The edge width token follows the same pattern as other nested theme tokens (appBar, bottomSheet, modal) in the codebase.

---

94-96: LGTM! Default edge width maintains backward compatibility.

The default value of "1.25rem" matches the previously hardcoded value in AppScreen.css.ts, ensuring backward compatibility. The cupertino theme correctly inherits this value through spreading androidValues.

extensions/plugin-basic-ui/src/components/AppScreen.css.ts (1)

198-198: LGTM! Edge width now uses theme variable.

The migration from hardcoded "1.25rem" to globalVars.edge.width enables customization while maintaining the same default value. This is consistent with other theme-driven properties in the file.

extensions/plugin-basic-ui/src/basicUIPlugin.tsx (2)

72-72: LGTM! Formatting improvement.

Consolidating the transitionDuration assignment to a single line improves readability without any functional change.

---

93-94: LGTM! Edge width correctly wired into dynamic CSS variables.

The implementation properly:

• Uses optional chaining to handle missing edge configuration
• Leverages compactMap to filter out undefined values
• Maintains type safety through RecursivePartial<css.GlobalVars>

.changeset/slow-trees-hunt.md (1)

1-5: LGTM! Changeset properly included.

The changeset correctly documents this as a minor release for the new edge width customization feature. This satisfies the coding guideline requirement for including a changeset entry for user-facing package changes.

extensions/plugin-basic-ui/src/components/AppScreen.tsx (1)

311-315: LGTM! Edge width properly injected via inline CSS variables.

The implementation correctly:

• Uses assignInlineVars with compactMap to set the edge width
• Applies optional chaining to handle missing edge configuration
• Only injects the variable when the edge element is actually rendered (cupertino theme, non-root activity, swipe back enabled)

This is consistent with other inline variable assignments in the component.

Tip

📝 Customizable high-level summaries are now available in beta!

You can now customize how CodeRabbit generates the high-level summary in your pull requests — including its content, structure, tone, and formatting.

• Provide your own instructions using the high_level_summary_instructions setting.
• Format the summary however you like (bullet lists, tables, multi-section layouts, contributor stats, etc.).
• Use high_level_summary_in_walkthrough to move the summary from the description to the walkthrough section.

Example instruction:

"Divide the high-level summary into five sections:

1. 📝 Description — Summarize the main change in 50–60 words, explaining what was done.
2. 📓 References — List relevant issues, discussions, documentation, or related PRs.
3. 📦 Dependencies & Requirements — Mention any new/updated dependencies, environment variable changes, or configuration updates.
4. 📊 Contributor Summary — Include a Markdown table showing contributions:
   | Contributor | Lines Added | Lines Removed | Files Changed |
5. ✔️ Additional Notes — Add any extra reviewer context.
   Keep each section concise (under 200 words) and use bullet or numbered lists for clarity."

Note: This feature is currently in beta for Pro-tier users, and pricing will be announced later.

---

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 and usage tips.}

[pkg-pr-new]

@stackflow/demo

yarn add https://pkg.pr.new/@stackflow/[email protected]

commit: 97dab54