feat(layout): Add grid node type for scrollable dashboard layouts - #575

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@apps/sqlrooms-cli-ui/src/createDashboardAiTools.ts`:
- Around line 14-17: The schema field layoutType is currently required and
causes minimal create_dashboard_artifact calls (e.g., {} or { title }) to fail;
update the Zod definition for layoutType to be optional with a sensible default
(e.g., .optional().default('dock')) so validation succeeds when callers omit
it—modify the layoutType declaration in the dashboard schema (the symbol
layoutType) and ensure create_dashboard_artifact consumers rely on that default
rather than passing a value.

In `@examples/layout/src/store.tsx`:
- Around line 86-103: createGridLayoutItem always returns x: 0 causing new
charts to stack in the left column; change it to compute x from existing layout
so items fill the next grid slot (matching createDashboardGridNode's two-column
behavior). Inside createGridLayoutItem, compute colsPerRow = Math.max(1,
Math.floor(cols / w)), derive an index from the current layout (e.g.,
layout.length or count of items at that y), and set x = (index % colsPerRow) * w
so new items alternate into the next column(s) instead of always x: 0; keep y,
w, h logic the same and reference the layout array, cols, w, and
createGridLayoutItem.

In `@packages/layout/src/node-renderers/grid-node-renderer/GridLayout.tsx`:
- Around line 123-126: createDefaultItem and the layouts fallback use a fixed
12-column and increment y by 1 which causes overlap because each item has h: 2
and ignores node.cols; update createDefaultItem to read the effective column
count (use node.cols || 12) and compute x = (index * w) % cols and y =
Math.floor((index * w) / cols) * h so rows advance by item height; likewise,
when generating the fallback layouts (the code that maps breakpoints into
LayoutGridItem arrays), pass the resolved cols for that breakpoint into the
layout generator so each breakpoint uses its correct column count instead of
hardcoded 12. Ensure you reference and update createDefaultItem and the
layouts-generation block that produces the LayoutGridItem arrays to use the same
cols logic and formula.

---

Outside diff comments:
In `@packages/mosaic/src/dashboard/MosaicDashboardSlice.ts`:
- Around line 403-425: ensureLayoutContainsDashboardPanels currently only
appends missing panels and when layoutType === 'grid' it may rebuild a fresh
grid containing only the first missing panel (losing dashboard panels that were
present in a non-grid incoming layout) or leave non-grid shapes unchanged; fix
by normalizing any incoming layout to a proper grid before adding panels: when
layoutType === 'grid' gather existing dashboard panel nodes (using
collectPanelIds and getMosaicDashboardPanelId to identify them), transform the
current layout into a grid container preserving those existing panel nodes, then
append any missing panels via appendPanelToGridLayout; keep appendPanelToLayout
for non-grid paths and reuse createDashboardPanelNode for new nodes so no panels
are lost.

---

Nitpick comments:
In `@apps/sqlrooms-cli-ui/src/createDashboardCommands.ts`:
- Around line 22-27: The DashboardCreateArtifactCommandInput schema currently
makes layoutType required; change the z.enum(['dock','grid']) call in
DashboardCreateArtifactCommandInput to include .optional().default('grid')
(e.g., z.enum([...]).optional().default('grid').describe(...)) so callers that
omit layoutType get 'grid' by default; apply the same change to the other
layoutType schema occurrence in the file (the second layoutType definition
around lines 130-133) to ensure backward compatibility across both command
schemas.

In `@packages/layout/src/node-renderers/leaf-node-renderer/LeafLayoutHeader.tsx`:
- Around line 12-14: The selector is performing derived work by calling
state.layout.findAncestorOfType inside useStoreWithLayout; instead, select the
stable raw piece (e.g., select state.layout or a getter like layout) with
useStoreWithLayout and then compute gridAncestor inside the LeafLayoutHeader
component using React.useMemo calling layout.findAncestorOfType(nodeId, 'grid');
update references to gridAncestor to use the memoized value and keep nodeId and
useStoreWithLayout as the lookup anchors.

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@apps/sqlrooms-cli-ui/src/createDashboardAiTools.ts`:
- Line 56: Update the instruction string in DASHBOARD_AI_INSTRUCTIONS to reflect
the actual default layout type: change the text that says omitted values default
to "dock" to state they default to "grid" so the LLM will assume the correct
default when calling create_dashboard_artifact; this should match the Zod schema
default ('grid') and the store function createDashboardArtifact which sets
layoutType = 'grid'.

In
`@packages/layout/src/node-renderers/grid-node-renderer/useScrollNewGridChildIntoView.ts`:
- Around line 3-4: The module-level Maps previousGridChildIdsByNodeId and
pendingGridScrollItemByNodeId are never pruned on unmount; update the
useScrollNewGridChildIntoView hook to remove the current node's entries from
both Maps when the component unmounts: inside the effect that currently cancels
the animation frame (the cleanup associated with the hook), also call
previousGridChildIdsByNodeId.delete(nodeId) and
pendingGridScrollItemByNodeId.delete(nodeId) (using the same nodeId captured by
the hook) so entries are removed alongside cancelAnimationFrame, ensuring no
memory leak or test cross-talk.
- Around line 30-42: The two back-to-back calls in useScrollNewGridChildIntoView
(scrollContainer.scrollTo(...) and addedElement.scrollIntoView(...)) conflict
and cancel the precise scroll; remove the addedElement.scrollIntoView(...) call
and keep the computed scrollContainer.scrollTo(...) call so the exact offset is
applied (ensure you only call scrollTo with behavior:'smooth' and then return
true).

---

Nitpick comments:
In `@examples/layout/src/store.tsx`:
- Around line 71-73: The file defines a redundant local helper getLayoutNodeKey
that duplicates the canonical getLayoutNodeId from `@sqlrooms/layout`; remove the
local getLayoutNodeKey, add getLayoutNodeId to the existing import list, and
update calls (e.g., inside createDashboardGridNode) to use getLayoutNodeId
instead of getLayoutNodeKey so the file uses the shared utility.

In `@packages/layout-config/src/LayoutConfig.ts`:
- Around line 164-166: Replace the legacy .strict() call on the LayoutGridNode
schema by using the Zod top-level z.strictObject pattern to match the project's
existing schemas (e.g., LayoutSplitNode/LayoutTabsNode); specifically update the
LayoutGridNode definition that currently extends BaseLayoutGridNode and lazily
includes LayoutNode children to be created with z.strictObject so the schema is
created via z.strictObject({...}) rather than calling .strict() on the result.

In
`@packages/layout/src/node-renderers/grid-node-renderer/useScrollNewGridChildIntoView.ts`:
- Around line 6-13: getGridItemElement currently builds an array of all
[data-layout-grid-item-id] elements then .finds the match, which unnecessarily
allocates memory; change it to query for the specific attribute value using a
single DOM query (use scrollContainer.querySelector with an attribute-value
selector) and protect the itemId by escaping it with CSS.escape() so you perform
one pass and return the matching HTMLElement or undefined without creating an
intermediate array.

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@examples/layout/src/store.tsx`:
- Around line 51-69: getDashboardTitle currently returns generic "Grid layout"
or "Dock layout" for any dashboard with layoutType 'grid' or 'dock', which makes
user-created dashboards indistinguishable; update getDashboardTitle to return
the friendly names only for the seeded/known dashboardIds (e.g., 'growth-grid'
-> 'Grid layout', 'overview' -> 'Dock layout') and otherwise prefer an explicit
meta.title or fall back to the dashboardId (meta.title ?? `Dashboard
${meta.dashboardId}`) for user-created dashboards; locate and update
getDashboardTitle and any duplicate implementation (the other instance around
the later block) to check meta.dashboardId against the seeded IDs rather than
switching solely on meta.layoutType, and ensure addDashboard-created items keep
unique titles.
- Around line 83-125: createGridLayoutItem currently returns layout items
missing the required resizeHandles field; update the function to read
resizeHandles from the LayoutGridNode (e.g., const { resizeHandles } = node or
node.resizeHandles ?? default) and include that resizeHandles property on both
the early return item and the fallback return item (the objects with i, x, y, w,
h). Also ensure any seeded layouts.lg entries elsewhere in the file are updated
to include the same resizeHandles value extracted from the node so all
generated/seeded LayoutGridItem objects conform to the LayoutGridItem schema.