Skip to content

fix(canvas): make table & structural containers droppable; empty table cells fill the row#66

Merged
avanelsas merged 3 commits into
mainfrom
fix/table-droppable-containers
Jun 9, 2026
Merged

fix(canvas): make table & structural containers droppable; empty table cells fill the row#66
avanelsas merged 3 commits into
mainfrom
fix/table-droppable-containers

Conversation

@avanelsas

@avanelsas avanelsas commented Jun 9, 2026

Copy link
Copy Markdown
Owner

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-table was the worst case:

  • With no columns set it fell back to implicit max-content tracks (overflow) and its subgrid rows collapsed to a single stacked column.
  • Empty x-table-cells picked up the generic empty-container affordance's margin: 4px 0, and since a stretched grid item fills track − margins, empty cells rendered ~8px shorter than and vertically offset from their populated siblings — looking broken even once columns was correct.

Changes

  • meta/slots.cljs — register slot metadata 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.cljsx-table's columns is a grid-template-columns track list its subgrid rows inherit. 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 convention as x-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. Extracted editable-target? as a pure, tested fn.
  • public/index.html (editor-only CSS, .canvas-host):
    • table-fallback tracks when columns is unset, and min-width: 0 so populated table elements shrink to their track;
    • empty x-table-cell override (margin: 0; min-width: 0) so empty cells stretch to the row height and follow their column track, while the min-height floor + 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 warnings
  • cljfmt check — clean
  • npx shadow-cljs compile test — 866 tests / 2532 assertions, 0 failures, 0 errors
  • npx shadow-cljs release app — build completed, 0 warnings

Note: the genuine width unevenness in x-table itself (integer columns shorthand expanding to repeat(N,1fr) rather than minmax(0,1fr)) is fixed separately in the BareDOM library — avanelsas/baredom#265. This PR is the editor-side companion.

🤖 Generated with Claude Code


Also includes a small unrelated cleanup: manifest-url's docstring (export/integrity.cljs) wrapped before @vanelsas/baredom, making Closure parse @vanelsas as a JSDoc tag and emit a parse note on every release build. Rewrapped so @ follows the /; release build is now note-free.

avanelsas and others added 3 commits June 9, 2026 12:35
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>
@avanelsas avanelsas merged commit 0c48bbe into main Jun 9, 2026
1 check passed
@avanelsas avanelsas mentioned this pull request Jun 10, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant