feat: add simple palette mode with basic variant filtering - #186
Merged
Conversation
…fixes
Load-message dialog:
- Move the not-editable callout out of the scrolling preview card and up
under the PREVIEW header, so it stays put while the message scrolls. A
verdict with no blocks now says "Nothing to preview." rather than
leaving an empty card behind the callout.
- Disable the footer's "Load message" button whenever that callout owns
the next step (sign in, or open as a new message) — the host has said
the message can't be loaded, so the callout's button is the way
forward. A bare no-match verdict keeps the button live for a retry.
Toolbar:
- Swap the "Find message" icon for Slack's four-colour mark, inlined as
an SVG (same 3.5 box as the icons beside it).
Palette:
- Rename the Rich Text "Section" variant to "Rich Text Section": simple
mode lists it without its section heading, so the label carries it.
- Add `paletteMode` ('advanced' default | 'simple'). Simple mode opens on
a flat list of the variants flagged `basic` — no sections, no search —
behind an "Advanced" link whose tooltip says what's on the other side;
the same link leads back. A palette flagging no `basic` variants has no
simple list to show, so it stays advanced and the link is withheld.
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UDKJELLHkb1HryHes5J843
Contributor
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
block-kitchen | 88c8850 | Commit Preview URL Branch Preview URL |
Aug 15 2026, 05:21 PM |
- Add a "Palette" header selector so the playground can switch the builder between advanced (package default) and simple palette modes — the feature was invisible in the demo, which passes no `paletteMode`. - Reset the palette's expansion and search when a host flips `paletteMode` at runtime, so the new mode starts from the top instead of inheriting the old one's state (adjusted during render, not in an effect). - Turn the demo's edit-mode menu into a plain "Mode" dropdown beside the other header selectors, and move its contents into a "Sample Data" dialog reachable in either mode — the message store is what a reader needs in order to choose a mode, so it shouldn't be behind one. In write-only mode the dialog says what that mode does with the store. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01UDKJELLHkb1HryHes5J843
Contributor
Cloudflare preview✅ Deployed |
Simple mode's header was a lone right-aligned "Advanced" link over empty space, with nothing naming what the rail below held. Pair it with a muted title so the row reads as a pane header. Rendered only where the mode switch is — a palette that opens straight onto its named sections is already self-describing and keeps its untitled header. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01UDKJELLHkb1HryHes5J843
It's exported from the root entry but appeared nowhere in the docs — no props table, no example, not even in the exports list. Adds a Templates section covering the props, the consumer-owned `Template` shape, why the package ships none of its own, how a selection gets applied (`onSelect` hands back the template; re-seeding needs a `key` bump because `initialBlocks` is mount-only), and the `.bk-root` ancestor the scoped stylesheet requires — the one that silently renders it unstyled. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01UDKJELLHkb1HryHes5J843
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Adds an optional "simple" palette mode that opens on a flat list of variants flagged
basic(in the built-in palette, just Rich Text Section), with no search box. An "Advanced" link at the top swaps in the full sectioned palette with search. Nothing is removed — it's a smaller first screen for ordinary messages.Why
Users writing a typical message only need the Rich Text Section block. The full palette with all its sections and search can feel overwhelming on first encounter. This change lets callers opt into a gentler onboarding experience that doesn't hide any features — they're just behind a clearly labeled link.
A custom palette can opt its own variants into the simple list by setting
basic: trueon them. A palette with nobasicvariants stays in advanced mode automatically.Changes
Palettecomponent: Addedmodeprop ('advanced'|'simple'). In simple mode, renders a flat list ofbasicvariants with an "Advanced" link that toggles to the full palette. The link includes a tooltip explaining what's on the other side.PaletteVariantinterface: Added optionalbasicboolean flag to mark variants for inclusion in simple mode.defaultPalette: Marked the Rich Text Section variant asbasic: trueand updated its label to "Rich Text Section" (self-describing since it appears without a section heading in simple mode).BlockKitchencomponent: Wired through the newpaletteModeprop to thePalettecomponent.PaletteModetype: New exported type for the mode option.LoadMessageDialog: Moved the not-editable verdict callout above the scrolling preview card (so it stays visible while the message scrolls) and disabled the load button when the verdict offers an action ("Open as new" or "Sign in"), making the callout's button the primary path forward.SlackMarkcomponent: New SVG icon for the Slack sign-in button.palette-modes.test.tsx) covering simple mode rendering, toggling, search clearing, and custom palettes. UpdatedLoadMessageDialogtests to verify the new verdict callout positioning and button disable logic.SimpleMode,SimpleModeAdvancedLink, andSimpleModeWithoutBasicVariantsstories demonstrating the feature.paletteModeprop and new "Simple vs advanced palette" section.Test plan
pnpm typecheck— newPaletteModetype and prop signaturespnpm lint— code stylepnpm test— newpalette-modes.test.tsxsuite covers simple mode toggling, search clearing, custom palettes, and verdict button disable logic; existing tests updated for verdict callout repositioningpnpm storybook—SimpleMode,SimpleModeAdvancedLink, andSimpleModeWithoutBasicVariantsstories verify UI and interactionshttps://claude.ai/code/session_01UDKJELLHkb1HryHes5J843
Need help on this PR? Tag
@codesmith-botwith what you need. Autofix is disabled.