v6: Add the operation collections plugin

[trevor-scheer]

Summary

• New @graphiql/plugin-collections package. Save named operations into folder collections that show up as a collapsible tree in the rail.
• Storage is pluggable through CollectionsStorage. The default writes to localStorage; a host can pass its own storage to collectionsPlugin() for a backend-synced setup.
• The localStorage adapter wraps data in a versioned envelope. On a version mismatch it logs a warning and still tries to load, rather than throwing the data away.
• The storage key is injectable via createLocalStorageAdapter(key), so two GraphiQL instances on one page don't clobber each other.
• State lives in a module-level vanilla zustand store, the same way historyStore and docExplorerStore work. Full CRUD on collections and items, plus a moveItem for reordering.
• Tree UI is built from CollectionRow / CollectionItemRow: collapsible folders, MethodPill labels (QRY/MUT/SUB), inline rename, and a per-row kebab menu.
• A save button in the tab strip opens a dialog to name the operation and pick or create a collection. The name defaults to the query's operation name when there is one.
• Clicking a saved item opens it in a new editor tab with the query, variables, and headers it was saved with.
• Reorder by dragging within or across collections. Keyboard users get "Move up / Move down / Move to collection" in the kebab instead, since native HTML5 drag isn't keyboard-accessible.
• Import/export dialog: download every collection as JSON, or import a file in merge mode (skips duplicate IDs) or replace mode.
• Default-installed next to history, so an unmodified <GraphiQL> shows a Collections rail icon. Passing plugins still replaces the defaults if you'd rather leave it out.
• Plugin CSS is imported in packages/graphiql/src/style.css so it renders styled in production, not just in dev.

Test plan

• Open a default GraphiQL setup (no custom plugins prop) and confirm a folder icon appears in the rail next to the history icon
• Click the folder icon — the Collections panel opens with an empty state message
• Click "+ New" — a "New Collection" entry appears in the tree; click it to expand
• Write a query in the editor (e.g. query GetUser { user { id } }), then click the save-to-collection button in the tab strip — the save dialog opens with the operation name pre-filled
• Pick the collection you just made and click Save — the item appears in the tree with a QRY pill
• Reload the page and reopen the Collections panel — the collection and item are still there
• Click the item row — a new editor tab opens with the saved query restored
• Save a mutation to the same collection — confirm it shows a MUT pill
• Drag the mutation row above the query row — the order updates and persists after reload
• Open the item kebab and use "Move up / Move down" — reorder works without dragging
• With two collections, use "Move to: [other collection]" in the kebab — the item moves across
• Collection kebab → Rename, commit with Enter — the name updates
• Collection kebab → Delete — the collection and its items are removed
• Click "↑↓" in the panel header → Export — the JSON shows your collections; Download JSON saves a file
• Import tab: pick that file, choose Merge, click Import — collections merge without duplicates
• Import again with Replace — the previous collections are replaced by the imported set
• Pass plugins={[historyPlugin()]} to <GraphiQL> — the Collections icon does not appear
• npx turbo run types:check --filter=@graphiql/plugin-collections --filter=graphiql passes

Refs: #4219

[changeset-bot]

🦋 Changeset detected

Latest commit: 4a50441

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

This PR includes changesets to release 2 packages

Name	Type
@graphiql/plugin-collections	Minor
graphiql	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