feat: add progress bar support to Upload.Box

[premtsd-code]

Summary

• Adds optional progress?: number prop to Upload.Box file items
• Renders an animated 4px progress bar below each file row when progress is provided
• Shows percentage text (e.g. "45%") instead of "Pending" badge during upload
• Error state turns the progress bar red via is-error styling
• Fully backwards compatible — omitting progress preserves existing behavior
• Adds "With Progress" Storybook story covering uploading, near-complete, completed, and failed states

[changeset-bot]

⚠️ No Changeset found

Latest commit: 0197e8f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

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

💥 An error occurred when fetching the changed packages and changesets in this PR

Some errors occurred when validating the changesets config:
The package or glob expression "@appwrite.io/pink" specified in the `linked` option does not match any package in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "@appwrite.io/pink-icons" specified in the `linked` option does not match any package in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "@appwrite.io/kitchensink" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "@appwrite.io/fonts" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.
The package or glob expression "@appwrite.io/pink-design" is specified in the `ignore` option but it is not found in the project. You may have misspelled the package name or provided an invalid glob expression. Note that glob expressions must be defined according to https://www.npmjs.com/package/micromatch.

[appwrite]

Pink (appwrite/pink)

Project ID: 688b850d003678e26eb4

Sites (1)

Site	Status	Logs	Preview	QR
pink 688b852d002905ceebe1	Ready	View Logs	Preview URL

Tip

Trigger functions via HTTP, SDKs, events, webhooks, or scheduled cron jobs

[github-actions]

🚀 Previews available on pkg.vc!

📦 @appwrite.io/pink-svelte

Install @appwrite.io/pink-svelte with:

pnpm install https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte@8dcaa17

Alternatively, you may specify a branch name or pull request number:

pnpm install https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte~feat-upload-progress-bar
pnpm install https://pkg.vc/-/@appwrite/@appwrite.io/pink-svelte!404

📦 @appwrite.io/pink-icons-svelte

Install @appwrite.io/pink-icons-svelte with:

pnpm install https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte@8dcaa17

Alternatively, you may specify a branch name or pull request number:

pnpm install https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte~feat-upload-progress-bar
pnpm install https://pkg.vc/-/@appwrite/@appwrite.io/pink-icons-svelte!404

[greptile-apps]

Greptile Summary

This PR adds an optional progress?: number prop to Upload.Box file items, rendering an animated 4px progress bar and replacing the "Pending" badge with a live percentage during upload. The implementation is backwards-compatible and correctly handles success, error, and in-progress states.

• All three issues flagged in the previous review round have been addressed: --bgcolor-information is gone (replaced with --bgcolor-accent), the percentage text now uses the clamped value, and error-state detection is unified into a single isError constant that drives both the "Failed" badge and the is-error CSS modifier
• The role=\"progressbar\" element includes correct aria-valuenow/aria-valuemin/aria-valuemax attributes and a descriptive aria-label, which is a nice accessibility touch
• Minor edge case: passing progress={0} is treated as "no progress" (same as omitting the prop) due to the > 0 guard — callers starting a transfer at 0% will see the "Pending" badge until progress reaches 1
• The Storybook stories use module-level let arrays with bind:files, so interactive removals in one story can mutate the shared array and affect other stories within the same browser session

Confidence Score: 5/5

Safe to merge — all previous P1 findings are resolved and only minor P2 style/stories concerns remain.

The three issues flagged in prior review rounds (wrong CSS token, unclamped text, inconsistent error state) are all fixed. The two remaining findings are P2: a minor edge-case around progress: 0 display and a Storybook isolation quirk with module-level mutable arrays. Neither blocks correctness of the component in production.

v2/pink-sb/src/stories/upload/Box.stories.svelte — module-level let arrays shared via bind:files may cause story isolation issues during interactive use.

Vulnerabilities

No security concerns identified. The change is purely presentational (a CSS progress bar driven by a numeric prop) with no network calls, authentication logic, or user-supplied HTML.

Important Files Changed

Filename	Overview
v2/pink-sb/src/lib/upload/Box.svelte	Adds optional progress prop with a unified isError check, clamped percentage display, an accessible role="progressbar" element, and correct CSS tokens (--bgcolor-accent / --bgcolor-error). Previous review concerns (token mismatch, unclamped text, inconsistent error detection) are all resolved. Minor edge case: progress: 0 is excluded from the progress UI by > 0.
v2/pink-sb/src/stories/upload/Box.stories.svelte	Adds "With Progress" story with uploading, near-complete, completed, and failed states. Module-level let arrays are passed via bind:files, meaning removals in one story can mutate the shared array and affect other stories in the same session.

_{Reviews (3): Last reviewed commit: "fix: improve progress bar accessibility,..." | Re-trigger Greptile}