fix(canvas): make table & structural containers droppable; empty table cells fill the row#66
Merged
Merged
Conversation
The generic empty-container affordance (`.canvas-host [data-bareforge-container]:empty`) gives childless containers a visible, droppable footprint via `min-height`, `min-width: 120px` and `margin: 4px 0`. On an empty `x-table-cell` that margin breaks the table layout: the cell is a subgrid grid item, and a stretched grid item fills `track − margins`, so an empty cell beside populated siblings renders ~8px shorter and vertically centred instead of filling the row. The `min-width: 120px` also fights the table's equal-width column tracks. Override both for empty table cells (`margin: 0; min-width: 0`) so the cell stretches to the row height and follows its column track. The affordance's `min-height` floor and dashed `(empty)` label survive, so an all-empty row keeps a droppable footprint while subgrid stretch wins the moment a sibling makes the row taller. Editor-only (`.canvas-host`); the export is unaffected. Extends the adjacent editor-only table-fallback CSS on this branch. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Several BareDOM container components collapsed to ~0 height when empty on the canvas, so they had no footprint to drop children into and couldn't be authored. Register slot metadata and seed sensible defaults so they behave like first-class containers in edit mode. - meta/slots.cljs: register slots for x-table / x-table-row / x-table-cell and a batch of other structural containers (x-bento-grid, x-fieldset, x-form, x-collapse, x-tabs, x-carousel, x-timeline(+item), x-scroll*, …) that previously fell through to the leaf default and got no container affordance. - meta/augment.cljs + ui/palette.cljs: x-table's `columns` attribute is a grid-template-columns track list (its subgrid rows inherit it). Drive the inspector field through the :grid-columns transform (edit a count, store a real track list) and seed a dropped table with `repeat(3, 1fr)` — same shape/convention as x-grid — so a fresh table has a real, editable column config instead of relying on the canvas auto-flow fallback. - render/canvas_view.cljs: arm canvas-pan from the composed-path target, not `.-target`. Inspector fields are custom elements (x-search-field, x-text-area) whose real input lives in shadow DOM; a keydown retargeted to the host made the editable-widget check miss, swallowing spaces typed into inspector fields. Extracted editable-target? as a pure, tested fn. Tests added for slot metadata, the columns transform/default, and the space-pan editable-target guard. Pairs with the empty-table-cell stretch CSS in the previous commit. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
`manifest-url`'s docstring wrapped its example CDN URL right before `@vanelsas/baredom`, so the `@` opened a line and Closure Advanced parsed it as an unknown JSDoc annotation, emitting a parse note on every release build. Rewrap so `@` follows the `/` on the same line — note gone, release build is clean. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Merged
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.
Problem
Several BareDOM container components are CSS-grid based and collapse to ~0 height when empty on the canvas, so in edit mode they had no footprint to drop children into and couldn't be authored.
x-tablewas the worst case:columnsset it fell back to implicit max-content tracks (overflow) and its subgrid rows collapsed to a single stacked column.x-table-cells picked up the generic empty-container affordance'smargin: 4px 0, and since a stretched grid item fillstrack − margins, empty cells rendered ~8px shorter than and vertically offset from their populated siblings — looking broken even oncecolumnswas correct.Changes
meta/slots.cljs— register slot metadata forx-table/x-table-row/x-table-celland a batch of other structural containers (x-bento-grid,x-fieldset,x-form,x-collapse,x-tabs,x-carousel,x-timeline(+item),x-scroll*, …) that previously fell through to the leaf default and got no container affordance.meta/augment.cljs+ui/palette.cljs—x-table'scolumnsis agrid-template-columnstrack list its subgrid rows inherit. Drive the inspector field through the:grid-columnstransform (edit a count, store a real track list) and seed a dropped table withrepeat(3, 1fr)— same convention asx-grid— so a fresh table has a real, editable column config rather than relying on the auto-flow fallback.render/canvas_view.cljs— arm canvas-pan from the composed-path target, not.-target. Inspector fields are custom elements (x-search-field,x-text-area) whose real input lives in shadow DOM; a keydown retargeted to the host made the editable-widget check miss and swallowed spaces typed into inspector fields. Extractededitable-target?as a pure, tested fn.public/index.html(editor-only CSS,.canvas-host):columnsis unset, andmin-width: 0so populated table elements shrink to their track;x-table-celloverride (margin: 0; min-width: 0) so empty cells stretch to the row height and follow their column track, while themin-heightfloor + dashed(empty)label keep an all-empty row droppable.Tests added for slot metadata, the columns transform/default, and the space-pan editable-target guard.
Verification (all four gates green)
clj-kondo --lint src test scripts— 0 errors, 0 warningscljfmt check— cleannpx shadow-cljs compile test— 866 tests / 2532 assertions, 0 failures, 0 errorsnpx shadow-cljs release app— build completed, 0 warnings🤖 Generated with Claude Code
Also includes a small unrelated cleanup:
manifest-url's docstring (export/integrity.cljs) wrapped before@vanelsas/baredom, making Closure parse@vanelsasas a JSDoc tag and emit a parse note on every release build. Rewrapped so@follows the/; release build is now note-free.