Add Color Tree listing

[boxel-submission-bot]

Summary

The ColorTree defines a configurable color visualization component used within app/card/field/skill/theme contexts. It allows selection of a color and a Munsell notation, and dynamically generates a title based on the selected Munsell value. The component supports multiple presentation modes, including isolated, embedded, and fitted variations, to suit different layout needs. Its primary purpose is to enable intuitive display and interaction with color information within a structured card-based interface.

---

• Listing Name: Color Tree
• Room ID: !KPBDRjyGIiOBjjqUSI:boxel.ai
• User ID: @lucas:boxel.ai
• Number of Files: 30
• Workflow Card: https://app.boxel.ai/lucas/color-tree/SubmissionWorkflowCard/c76a9108-5cd1-47f8-9b54-96a1921d3ce6

[github-actions]

Staging Submissions Preview

This PR's content is pushed to the staging submissions realm: https://realms-staging.stack.cards/submissions/

Changed folders:

• 5ee9e6-color-tree/

Updated at 2026-08-05 14:01:12 UTC for commit edac46c. Shared realm: only this PR's changed files are pushed; files touched by multiple PRs reflect whichever pushed last, and deleted files are not removed.

[richardhjtan]

[Claude Code 🤖] @cardstack/boxel-developers This listing has passed the three automated quality checks and is ready for the graded review.

Automated quality checks

Check	Result
Has > 1 example	PASS — 2 ColorTree example instances linked
Has > 1 screenshot	PASS — 5 screenshots linked, plus the listing thumbnail
All required specs are present	PASS — 19 specs, one per export (card, 3 format components, TreeEngine, makeUniforms, 12 munsell utils, shaders module), each with a Summary/Import/Usage readMe

Lint and live tests are green, and the listing ships a live test suite (color-tree.test.gts, 11 tests) covering the isolated/embedded/fitted renders, empty states, and the munsell color math.

Requesting the graded evaluations (A–F, minimum B):

• Engineer's code quality analysis — including reuse of Boxel UI as appropriate, reuse of other catalog listings when appropriate, and conformance to the Boxel Theme system
• Product manager's UX evaluation
• Designer's aesthetic evaluation
• Product manager's listing evaluation

Preview on staging: https://realms-staging.stack.cards/submissions/5ee9e6-color-tree/CardListing/f76bf38f-52e7-424c-b921-7ab6a48e1dbf

[lukemelia]

Product manager's listing evaluation: C

• The screenshots cut off the left and right edges and include an irrelevant "New" button and card header.
• Perhaps the "What this card does" section could include a practical example of when you might use this? I'm not familiar with a "Munsell notation". Also, there is a button about "Itten" -- what is it?
• What makes this better as a CardDef rather than a FieldDef?
• For what search terms would you hope an AI would would discover and re-use this card def?

[lucaslyl]

[Claude Code 🤖] Thanks for the review! Addressing each point:

Screenshots — Fixed. Retaken at 800×600 with the full card content in frame — no more "New" button, card header, or cut-off edges.

Munsell notation & the Itten button — Munsell notation is a classic color-order system (by Albert H. Munsell) that describes any color along three axes: Hue, Value (lightness), and Chroma (saturation) — e.g. 5R 4/14. Because it's based on measured human perception, the color solid is asymmetric — hence the "tree" shape. Johannes Itten was a Bauhaus color theorist who idealized color space as a perfectly symmetric sphere. The "TO ITTEN" button morphs the visualization between Munsell's measured tree and Itten's idealized sphere, to show how real perception differs from the idealized model. The "What this card does" section has been rewritten to include this explanation plus practical usage examples (comparing brand accents at equal lightness, finding the most saturated color that still reads on a dark background, teaching color theory).

CardDef vs FieldDef — Fair point. Some context: this was inspired by John Maeda's post (https://x.com/johnmaeda/status/2078627648214016331), which Chris recommended as a reference. I agree it behaves more like a FieldDef — functionally it's a very advanced color picker — but it was built primarily as a demo of what Boxel can do visually with three.js, rather than for a production use case. Since FieldDefs don't support an isolated format, one option is to extract the picker into a ColorTreeField (with the 3D view as its edit format) and keep a thin demo CardDef that showcases it in isolated view. Happy to go that way if you think it's worth it.

Search terms — color picker, Munsell, color theory, color wheel, 3D color space, Itten sphere, hue/value/chroma, color visualization.

[lukemelia]

Revised product manager's listing evaluation: B+

Much clearer. Not an A because I'm not really convinced about the proposed use case. If it is really for when a flat color picker is not good enough, it should be a FieldDef. It seems like it is a exploratory toy / learning device. Perhaps the description and/or card spec should include what AI can reuse/learn from the implementation.

[lukemelia]

Product manager's UX evaluation: B

• There is a Sound On / Sound Off button but I don't hear any sound either way
• Small type instructions on bottom are not contextual to the view you are in. Example: "HOLD A SPOT ON THE OPEN PAGE TO COPY ITS HEX" appears below 3D view but doesn't actually work.
• Hamburger Icon would make more sense near left edge of panel then in the top right where it is

[lukemelia]

Designer's review from Gardella:

• Unfamiliar with this method of color selection, would probably use something more straightforward in terms of generating a color palettes. Seems more like an interesting interactive piece rather than design utility.
• Visually very appealing
• Controls are responsive without delay
• Some controls do not work for some modes, ie when viewing sphere the scan slider does nothing. Maybe this should be greyed out if non applicable for a viewing mode.
• Took me a moment to realize that Hue is a vertical slice vs Value being a horizontal slice of the sphere

As an interactive piece on color theory I think this catalog submission is successful and appealing to use, though the novelty might wear thin after a few spins. Perhaps if there were some kind of live update feedback in terms of most popular colors for each year, or something similar to that effect it would feel more substantial

Overall grade - B

[lucaslyl]

@lukemelia

[Claude Code 🤖] Agreed on the FieldDef call — that's exactly the direction we took. Three commits since the evaluations:

2602b0b — Address review feedback (sound, hints, hamburger, AI-reuse)

• Ported the full audio architecture so SOUND ON is actually audible in every view (room tone + pad bed, morph glissando, atlas slice voice, copy chime)
• The bottom instructions are now contextual to the active view — the copy-hex hint only appears once the atlas is open
• The hamburger docks at the panel's left edge as a close affordance while the panel is open
• The listing summary gained a "what an AI can reuse" section (Munsell math, TreeEngine three.js patterns, GLSL morph shaders, WebAudio layer) plus discovery terms

c0c4535 — Convert Color Tree to a FieldDef

• ColorTree (CardDef) is now ColorTreeField: the 3D studio is the field's edit format, so contains(ColorTreeField) gives any card perceptual hue/value/chroma picking; the value is the picked hex + Munsell notation
• CardListing → FieldListing, with a playground example card and per-export Spec readMes
• The scout miniature over the open atlas can be hidden with an eye toggle docked in its frame, so it no longer blocks the color page
• We also replaced the screenshot pattern with the FieldListing screenshot pattern: shots are taken from the example playground card, so the frames are consistent with how a user actually meets the field

1390475 — Gardella's designer feedback

• The scan dial is disabled and dimmed while no cut is open (it did nothing on the closed solid)
• Switching to HUE/VALUE raises a dismissible 3s toast naming the cut and its scrub gesture (HUE: vertical leaf, drag horizontally; VALUE: horizontal cut, drag vertically), with matching per-mode hints, tooltips, and a persistent panel note

Live tests are at 11 (51 assertions) and green; lint clean.