Repository navigation
feat(palette): show component previews in the insert search - #76
Merged
flowtricks merged 1 commit intoNov 10, 2026
Merged
flowtricks merged 1 commit into
flowtricks merged 1 commit into
Conversation
The insert palette (Cmd+K) lists components as a three-column grid of previews instead of a text list, so a section can be recognised by how it looks before it is inserted. - Components split into Sections (root renders <section>, directly or through another component, depth-bounded) and Blocks, each with a pill and a hit count. ScanComponent gains an optional rootComponent for this. - Each card shows a photograph of the component at its first real place in the project: a hidden, sandboxed window loads each page with #avb-design so the source anchors stay, maps anchor pairs to call sites of the page file (sections wrapped in a Section hull land correctly), and captures the region. Pages behind dynamic routes are reached through links found on fixed pages; components hidden at 1440 px are retaken at 1200 px. Photos are cached per project in userData and invalidated by the thumbnail fingerprint. A stale cache is refreshed in the background when the palette opens, with time limits on every page call. - Without a photo (unused component, Studio in a browser, unreadable image) the card falls back to the live preview route, now with a page layout that renders at the frame width, top aligned. - Arrow keys move in the grid, Space (empty search) or Shift+Space opens a large view, Esc closes only that layer, Enter inserts as before. - At most 12 live frames are mounted; photos do not count against that. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Owner
|
Thanks so much for this helpful update! |
flowtricks
added a commit
that referenced
this pull request
Nov 10, 2026
Assets: Cloudflare R2, Bunny Storage and S3-compatible hosts sit beside
the project's own files. The panel heading switches source, the trail
starts at Assets, and hosts can be browsed, uploaded to, renamed,
reordered and deleted, with image, video, audio and font ("Aa") tiles.
Replace and Copy link are on every tile; Replace refuses code under
src/. Connect with Cloudflare or Bunny is the default, manual keys sit
under Advanced, and keys stay in the main process or on the Studio
server. Every file type can be selected; Compress skips what it cannot
compress.
Style panel: edits show on the canvas before the save lands, on one
shared protocol for Desktop and Studio that keeps Astro scoping, skips
grouped rules and restores the original on a failed save (rewrites
#77). Other properties rows are code fields, colour variables appear in
gradient fields, arrows step a number with the caret after its unit,
typed nested selectors keep their text, a new property fills a blank
line, and the selector field no longer swallows the first click.
Search: the Components tab is a grid of live previews that render each
component with its .stacki defaults or its first use on a page, and
open hidden dialogs and details (rewrites #76). Folder pills filter it,
tabs slide, the popup resizes smoothly, and the last tab and folder are
remembered. The other tabs use the classic list again.
Elsewhere: optional commit types in the git panel, "Version history"
with app dropdowns, reset menus on loop section labels, stylesheet and
folder locks against selector cleanup, dotted class labels in the
Navigator and on the canvas, inserted HTML lining up with its
siblings, dropdowns that preview on hover only for live canvas
previews, and colour swatches that resolve on a textarea.
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
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
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.
The insert search (Cmd+K) lists components as text, so you have to know a section by name before you can use it. This shows what each component looks like before it is inserted.
What changes
<section>, directly or through another component.pagelayout that renders at the frame width, top aligned.How the photos are made
Stale photos are refreshed in the background when the palette opens. Nothing runs while the palette stays closed.
#avb-design, so theavb-s/avb-eanchors stay in the DOM. Anchors are mapped to call sites in the source file, which also places sections wrapped in a sharedSectioncomponent correctly.Behaviour changes to check
studio/test/quickInsert.browser.tsis updated to match.thumbs.tsexports a few more helpers, andcaptureImage/makeWindowtake optional arguments. Project thumbnails behave as before.Sections,Blocks,Space to enlarge,No preview available.Validation
render={false}and renders nowhere.Not tested: Windows and Linux, and projects with more than 60 pages. Photos of very small blocks can come out poorly, one such card on my site is blank.
It's one commit touching 46 files, about half of it tests. I'm happy to split it (for example grid and keyboard first, photos second) or to change the approach if you'd prefer something else.
🤖 Generated with Claude Code