@lightdash/cli 2.411.0 → 2.412.1

package/dist/vendor/template/.claude/skills/reusable-visualization/SKILL.md

@@ -103,6 +103,8 @@ shadcn, charting, theming, floating surfaces, screenshots) still applies.
   NOT `height: 100%` — that collapses to a 0-height invisible box unless every ancestor also
   sets a height, leaving auto-sizing charts like recharts `<ResponsiveContainer>` nothing to
   measure. Confirm the chart actually renders and isn't a blank box.
+- **Fit the frame.** The viewport is an iframe exactly the size of the chart's tile, and
+  the tile never resizes to its content. See "Fitting the frame" below.
 - **Placeholder.** Show a clearly visible placeholder (readable, good contrast — never
   near-white on white) while `!ready`, when a required field is unmapped, or when there are
   no rows.
@@ -114,6 +116,24 @@ shadcn, charting, theming, floating surfaces, screenshots) still applies.
   `getFieldLabel(context, fieldId)`. Never show the query id (`orders_total_revenue`)
   or a name derived from it (humanized, or with the table prefix stripped).
 
+### Fitting the frame
+
+A tile can be anything from about 300px wide and 300px tall (a phone, where a dashboard
+stacks its tiles in one column) to a full-width desktop tile. The template already makes
+the frame the container: it scrolls vertically when the content is taller than the tile,
+and its base font size shrinks in a narrow tile. What is left to the chart:
+
+- Size type, padding and gaps in `rem` or Tailwind classes, never `px`, so they shrink
+  with the frame.
+- A row of items wraps onto more rows as the frame narrows (auto-fit grid columns or
+  `flex-wrap`). The minimum item width is what one item needs to keep its values on one
+  line, capped just under half the frame so two still fit on a phone:
+  `min(<that width in rem>, 45%)`.
+- A value stays on one line and is never truncated. A long label wraps between words.
+  A table is `width: 100%` with wrapping header cells.
+- Add no scroll region of your own. A title or table header row that should stay visible
+  while the frame scrolls is `position: sticky; top: 0` with an opaque background.
+
 ## Series colours
 
 Use the query SDK's host-resolved colour helpers for every series or group:
@@ -607,6 +627,10 @@ Then check both directions: every key you read from `options` is declared, and e
 you declared is read somewhere. `colorPalette` is declared when you use either resolved-
 colour helper or colour from `colorPalette` — it is never read from `options`.
 
+Then resize the frame mentally, to a 320px by 320px phone tile and to a wide desktop
+tile: nothing is wider than the frame, rows of items wrap, and a title or table header
+stays in view if the frame scrolls.
+
 Before returning the declaration, add a `description` to each slot whose role
 could be ambiguous to a viewer, and add `inputGuidance` whenever row shape or ordering
 matters. Keep that help reusable across queries: describe the chart contract rather than a

package/dist/vendor/template/.claude/skills/sdk-features/SKILL.md

@@ -33,6 +33,7 @@ Users describe features by what they see in the Lightdash editor. Translate:
 | Lightdash-owned "View underlying data" dialog (viz only) | `viz-host-underlying-data` | app code opt-in |
 | light/dark mode, "matches my Lightdash theme" | `follow-host-theme` | CSS tokens — see below |
 | "executive summary", "what changed", anomaly callouts, "AI insight", "Analyse this view" | `ai-insights` | app code opt-in |
+| "Adapts to small tiles", responsive, works on a phone, readable in a narrow or short tile (viz only) | `viz-responsive-layout` | layout — see below |
 
 ## Automatic (zero wiring — active on any current-SDK bundle)
 
@@ -89,6 +90,45 @@ For colours CSS can't reach (a chart library's theme object, a logo swap), read
 the mode: `const colorScheme = useColorScheme();` — `'light' | 'dark'`,
 re-rendering on every host toggle.
 
+### `viz-responsive-layout` — a chart type that adapts to small tiles
+
+There is no API to call: this is a layout rework. The chart renders in an iframe
+exactly the size of its tile, and the tile never resizes to its content, so the
+chart adapts to the tile.
+
+The template makes the frame the container, but a chart type built on an older
+template carries its own copies of `src/main.jsx` and `src/index.css` without
+that. Add both pieces first if they are missing:
+
+```jsx
+// src/main.jsx — import useVizContext from '@lightdash/query-sdk', define this,
+// and render <VizFrame /> just before <App /> inside <VizContextProvider>.
+function VizFrame() {
+    const { ready } = useVizContext();
+    React.useEffect(() => {
+        document.documentElement.toggleAttribute('data-viz-frame', ready);
+    }, [ready]);
+    return null;
+}
+```
+
+```css
+/* src/index.css — inside the `@layer base` block that holds the `#root` rules. */
+html[data-viz-frame] {
+  font-size: clamp(12px, calc(4px + 2.5vw), 16px);
+}
+html[data-viz-frame] #root {
+  height: 100vh;
+  overflow-y: auto;
+}
+```
+
+Then follow the "Fitting the frame" section of the `reusable-visualization`
+skill. An older chart type usually needs its fixed column counts and pixel sizes
+replaced with wrapping, `rem`-sized ones and its own scroll regions removed; a
+chart drawn by a library that measures its container often needs nothing more.
+Keep the declaration (fields, config options, palette) unchanged.
+
 ### `viz-pivoted-results` — reusable visualization pivots
 
 Read `pivotDetails` from `useVizContext()`. When it is non-null, match

package/dist/vendor/template/src/index.css

@@ -98,6 +98,16 @@
     z-index: -1;
     background: inherit;
   }
+  /* Chart types (see VizFrame in main.jsx): the frame is the container. It
+     scrolls when the content is taller than the tile, and rem sizes shrink in
+     a narrow tile. */
+  html[data-viz-frame] {
+    font-size: clamp(12px, calc(4px + 2.5vw), 16px);
+  }
+  html[data-viz-frame] #root {
+    height: 100vh;
+    overflow-y: auto;
+  }
   /* `dark` on the shell re-points the theme variables but not the color already
      inherited from <body>, which would leave bare text in light-theme ink. */
   :where(#root > .dark:first-child) {

package/dist/vendor/template/src/main.jsx

@@ -6,6 +6,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import {
     createClient,
     LightdashProvider,
+    useVizContext,
     VizContextProvider,
 } from '@lightdash/query-sdk';
 import { FilterProvider } from '@/lib/filters';
@@ -33,6 +34,16 @@ const lightdash = createClient();
 
 initScreenshotHandler();
 
+// A chart type renders in a frame the size of its tile; a page app grows.
+// Only a chart type receives a viz context, so mark the document for index.css.
+function VizFrame() {
+    const { ready } = useVizContext();
+    React.useEffect(() => {
+        document.documentElement.toggleAttribute('data-viz-frame', ready);
+    }, [ready]);
+    return null;
+}
+
 ReactDOM.createRoot(document.getElementById('root')).render(
     <React.StrictMode>
         <QueryClientProvider client={queryClient}>
@@ -40,6 +51,7 @@ ReactDOM.createRoot(document.getElementById('root')).render(
                 <FilterProvider>
                     <ErrorBoundary>
                         <VizContextProvider>
+                            <VizFrame />
                             <App />
                         </VizContextProvider>
                     </ErrorBoundary>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lightdash/cli",
-  "version": "2.411.0",
+  "version": "2.412.1",
   "description": "Lightdash CLI tool",
   "license": "MIT",
   "repository": {
@@ -22,8 +22,8 @@
     "@actions/core": "1.11.1",
     "@aws-sdk/credential-providers": "3.995.0",
     "@casl/ability": "6.8.0",
-    "@lightdash/common": "2.411.0",
-    "@lightdash/warehouses": "2.411.0",
+    "@lightdash/common": "2.412.1",
+    "@lightdash/warehouses": "2.412.1",
     "@sidvind/better-ajv-errors": "7.0.0",
     "@types/columnify": "1.5.1",
     "ajv": "8.18.0",