@c2n/dashboard 0.0.11

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Nguyen Thai Vinh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,101 @@
+# @c2n/dashboard
+
+A grid of resizable panes: `c2-dashboard` owns the tracks, `c2-dash-card` owns one pane of them.
+
+A pane draws a handle on every edge it shares with a neighbour. Dragging one resizes the **track**, not the pane, so
+everything on either side of it stays aligned; the first drag switches that track to pixels and the `fr` tracks
+around it give up the space in proportion to their weight, down to the minimums. A handle is a window splitter: it
+is in the tab order, and the arrow keys move it 10px a step, 1px with Shift.
+
+A pane has no surface of its own — put a `c2-card`, or any markup, in it.
+
+```bash
+npm install @c2n/dashboard
+```
+
+## Markup
+
+```html
+<script type="module">
+  import '@c2n/dashboard'
+</script>
+
+<c2-dashboard columns="320px 1fr" rows="1fr 1fr" storage-key="trading-desk" style="height: 480px">
+  <c2-dash-card col="1" row="1" row-span="2" min-width="240">
+    <span slot="header">Watchlist</span>
+    <c2-card>…</c2-card>
+  </c2-dash-card>
+
+  <c2-dash-card col="2" row="1" min-height="120" expand-full>
+    <span slot="header">Price</span>
+    <c2-line-chart></c2-line-chart>
+  </c2-dash-card>
+
+  <c2-dash-card col="2" row="2">
+    <span slot="header">Orders</span>
+    <c2-table></c2-table>
+  </c2-dash-card>
+</c2-dashboard>
+```
+
+`columns` and `rows` take a track count (`columns="3"`) or an explicit list (`columns="320px 1fr"`). The grid needs a
+height whenever its rows use `fr`, since the row tracks divide the host's height.
+
+## Layout
+
+```js
+const grid = document.querySelector('c2-dashboard')
+
+// The sizes at the end of every gesture — also what `storage-key` writes to localStorage.
+grid.addEventListener('layout-change', (event) => {
+  console.log(event.detail.columns, event.detail.rows)
+})
+
+// Placement chosen at runtime, keyed by each card's `card-id`; every field wins over the card's own attributes.
+grid.layout = {
+  watchlist: { col: 1, row: 1, rowSpan: 2 },
+  orders: { visible: false },
+}
+
+grid.reset() // back to the authored tracks, and the stored ones are forgotten
+```
+
+## Expanding
+
+`expand-width`, `expand-height` and `expand-full` add controls that grow a pane over the whole row, column or grid.
+They move into the header row when the `header` or `actions` slot is filled, and float over the top-right corner
+when neither is. The state is the `expanded` property (`none` | `width` | `height` | `full`), so an app can drive it
+from its own button, and `expand-change` reports it.
+
+The controls are not a closed set. `actions` puts your own buttons at the end of the header row, `controls` puts
+them inside the built-in group immediately before the expand buttons, `footer` adds a status row under the content,
+and every built-in icon is a slot whose fallback is the default drawing:
+
+```html
+<c2-dash-card col="2" row="1" expand-full>
+  <span slot="header">Price</span>
+  <c2-badge slot="actions" tone="success">Live</c2-badge>
+  <c2-icon-button slot="controls" aria-label="Order settings">…</c2-icon-button>
+  <c2-feather-maximize slot="expand-full-icon"></c2-feather-maximize>
+  <c2-feather-minimize slot="collapse-full-icon"></c2-feather-minimize>
+  <c2-line-chart></c2-line-chart>
+  <span slot="footer">updated 14:32</span>
+</c2-dash-card>
+```
+
+An expanded pane covers its neighbours, so give it a background:
+
+```css
+c2-dash-card {
+  --c2-dash-card--background: #ffffff;
+  --c2-dash-card__expanded--background: #ffffff;
+}
+```
+
+## Theming
+
+Everything visible is a CSS custom property — the gutter (`--c2-dashboard--gap`), the pane surface
+(`--c2-dash-card--background`, `--c2-dash-card--border`, `--c2-dash-card--border-radius`), the header row
+(`--c2-dash-card__header--*`), the expand controls (`--c2-dash-card__control--*`) and the handles
+(`--c2-dash-card__handle--size`, `--c2-dash-card__handle__hover--background`). See the component page for the
+complete table.

package/dist/dash-card-DYabhvcS.js

@@ -0,0 +1,353 @@
+import { DASHBOARD_TAG } from "./dashboard-host.js";
+import { LitElement, html, nothing, svg, unsafeCSS } from "lit";
+import { property, state } from "lit/decorators.js";
+import { isServer } from "lit-html/is-server.js";
+import { customElement } from "@c2n/core/element-helper.js";
+import { classMap } from "lit/directives/class-map.js";
+//#region src/dash-card.scss?inline
+var dash_card_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  position: relative;\n  display: block;\n  box-sizing: border-box;\n  grid-column: var(--_grid-column, auto);\n  grid-row: var(--_grid-row, auto);\n  min-width: 0;\n  min-height: 0;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([expanded=width]),\n:host([expanded=height]),\n:host([expanded=full]) {\n  isolation: isolate;\n  z-index: var(--c2-dash-card__expanded--z-index,20);\n  background: var(--c2-dash-card__expanded--background,var(--c2-dash-card--background,transparent));\n  animation: c2-dash-card-expand var(--c2-dash-card__expanded--animation-duration,200ms) cubic-bezier(0.25, 0.46, 0.45, 0.94);\n}\n\n@keyframes c2-dash-card-expand {\n  from {\n    transform: scale(0.97);\n  }\n  to {\n    transform: scale(1);\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  :host([expanded=width]),\n  :host([expanded=height]),\n  :host([expanded=full]) {\n    animation: none;\n  }\n}\n.c2-dash-card {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  box-sizing: border-box;\n  height: 100%;\n  min-width: 0;\n  min-height: 0;\n  padding: var(--c2-dash-card--padding,0px);\n  overflow: var(--c2-dash-card--overflow,hidden);\n  color: inherit;\n  background: var(--c2-dash-card--background,transparent);\n  border: var(--c2-dash-card--border,none);\n  border-radius: var(--c2-dash-card--border-radius,0px);\n  box-shadow: var(--c2-dash-card--box-shadow,none);\n}\n\n.c2-dash-card__header {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  justify-content: space-between;\n  box-sizing: border-box;\n  gap: var(--c2-dash-card__header--gap,12px);\n  min-width: 0;\n  min-height: var(--c2-dash-card__header--min-height,44px);\n  padding: var(--c2-dash-card__header--padding-block,8px) var(--c2-dash-card__header--padding-inline,12px);\n  font-size: var(--c2-dash-card__header--font-size,14px);\n  font-weight: var(--c2-dash-card__header--font-weight,600);\n  color: var(--c2-dash-card__header--color,#18181b);\n  background: var(--c2-dash-card__header--background,transparent);\n  border-bottom: var(--c2-dash-card__header--border-bottom,none);\n}\n\n.c2-dash-card:not(.has-header) .c2-dash-card__header {\n  position: absolute;\n  top: var(--c2-dash-card__controls--offset,4px);\n  right: var(--c2-dash-card__controls--offset,4px);\n  z-index: 2;\n  min-height: 0;\n  padding: 0;\n  background: none;\n  border: none;\n}\n\n.c2-dash-card:not(.has-header) .c2-dash-card__title {\n  display: none;\n}\n\n.c2-dash-card__title {\n  display: flex;\n  flex: 1 1 auto;\n  align-items: center;\n  min-width: 0;\n}\n\n.c2-dash-card__actions {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  gap: var(--c2-dash-card__actions--gap,8px);\n  min-width: 0;\n}\n\n.c2-dash-card__controls {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  gap: var(--c2-dash-card__controls--gap,2px);\n}\n\n.c2-dash-card__control {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: var(--c2-dash-card__control--size,24px);\n  height: var(--c2-dash-card__control--size,24px);\n  padding: 0;\n  margin: 0;\n  color: var(--c2-dash-card__control--color,#71717a);\n  cursor: pointer;\n  background: var(--c2-dash-card__control--background,transparent);\n  border: none;\n  border-radius: var(--c2-dash-card__control--border-radius,6px);\n}\n\n.c2-dash-card__control:hover {\n  color: var(--c2-dash-card__control__hover--color,#18181b);\n  background: var(--c2-dash-card__control__hover--background,#f4f4f5);\n}\n\n.c2-dash-card__control:focus-visible {\n  outline: var(--c2-dash-card__control__focus--outline,2px solid rgba(2, 101, 220, 0.4));\n  outline-offset: var(--c2-dash-card__control__focus--outline-offset,2px);\n}\n\n.c2-dash-card__control-icon {\n  width: var(--c2-dash-card__control--icon-size,16px);\n  height: var(--c2-dash-card__control--icon-size,16px);\n}\n\n.c2-dash-card__control ::slotted(*) {\n  width: var(--c2-dash-card__control--icon-size,16px);\n  height: var(--c2-dash-card__control--icon-size,16px);\n}\n\n.c2-dash-card__body {\n  flex: 1 1 auto;\n  min-width: 0;\n  min-height: 0;\n}\n\n.c2-dash-card__footer {\n  display: flex;\n  flex: 0 0 auto;\n  align-items: center;\n  box-sizing: border-box;\n  gap: var(--c2-dash-card__footer--gap,8px);\n  min-width: 0;\n  min-height: var(--c2-dash-card__footer--min-height,36px);\n  padding: var(--c2-dash-card__footer--padding-block,6px) var(--c2-dash-card__footer--padding-inline,12px);\n  font-size: var(--c2-dash-card__footer--font-size,12px);\n  color: var(--c2-dash-card__footer--color,#71717a);\n  background: var(--c2-dash-card__footer--background,transparent);\n  border-top: var(--c2-dash-card__footer--border-top,none);\n}\n\n.c2-dash-card__handle {\n  position: absolute;\n  z-index: 3;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: var(--c2-dash-card__handle--background,transparent);\n  touch-action: none;\n}\n\n.c2-dash-card__handle:focus-visible {\n  outline: var(--c2-dash-card__handle__focus--outline,2px solid rgba(2, 101, 220, 0.4));\n}\n\n.c2-dash-card__handle-bar {\n  display: block;\n  background: transparent;\n  border-radius: var(--c2-dash-card__handle--border-radius,999px);\n  transition: background var(--c2-dash-card__handle--transition-duration,150ms) ease;\n}\n\n.c2-dash-card__handle:hover .c2-dash-card__handle-bar,\n.c2-dash-card__handle:focus-visible .c2-dash-card__handle-bar {\n  background: var(--c2-dash-card__handle__hover--background,rgba(2, 101, 220, 0.2));\n}\n\n.c2-dash-card__handle.is-dragging .c2-dash-card__handle-bar {\n  background: var(--c2-dash-card__handle__active--background,rgb(2, 101, 220));\n}\n\n.c2-dash-card__handle--left,\n.c2-dash-card__handle--right {\n  top: 0;\n  width: var(--c2-dash-card__handle--size,6px);\n  height: 100%;\n  cursor: col-resize;\n}\n.c2-dash-card__handle--left .c2-dash-card__handle-bar,\n.c2-dash-card__handle--right .c2-dash-card__handle-bar {\n  width: 2px;\n  height: calc(100% - 2 * var(--c2-dash-card__handle--inset,2px));\n}\n\n.c2-dash-card__handle--left {\n  left: calc(-1 * var(--c2-dash-card__handle--size,6px) / 2);\n}\n\n.c2-dash-card__handle--right {\n  right: calc(-1 * var(--c2-dash-card__handle--size,6px) / 2);\n}\n\n.c2-dash-card__handle--top,\n.c2-dash-card__handle--bottom {\n  left: 0;\n  width: 100%;\n  height: var(--c2-dash-card__handle--size,6px);\n  cursor: row-resize;\n}\n.c2-dash-card__handle--top .c2-dash-card__handle-bar,\n.c2-dash-card__handle--bottom .c2-dash-card__handle-bar {\n  width: calc(100% - 2 * var(--c2-dash-card__handle--inset,2px));\n  height: 2px;\n}\n\n.c2-dash-card__handle--top {\n  top: calc(-1 * var(--c2-dash-card__handle--size,6px) / 2);\n}\n\n.c2-dash-card__handle--bottom {\n  bottom: calc(-1 * var(--c2-dash-card__handle--size,6px) / 2);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .c2-dash-card__handle-bar {\n    transition: none;\n  }\n}";
+//#endregion
+//#region \0@oxc-project+runtime@0.148.0/helpers/esm/decorate.js
+function __decorate(decorators, target, key, desc) {
+	var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+	if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+	else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+	return c > 3 && r && Object.defineProperty(target, key, r), r;
+}
+//#endregion
+//#region src/dash-card.ts
+var KEYBOARD_STEP = 10;
+var KEYBOARD_FINE_STEP = 1;
+var ICONS = {
+	expandWidth: svg`<polyline points="10 7 5 12 10 17" /><polyline points="14 7 19 12 14 17" />`,
+	collapseWidth: svg`<polyline points="5 7 10 12 5 17" /><polyline points="19 7 14 12 19 17" />`,
+	expandHeight: svg`<polyline points="7 10 12 5 17 10" /><polyline points="7 14 12 19 17 14" />`,
+	collapseHeight: svg`<polyline points="7 5 12 10 17 5" /><polyline points="7 19 12 14 17 19" />`,
+	expandFull: svg`<path d="M8 3H5a2 2 0 0 0-2 2v3M16 3h3a2 2 0 0 1 2 2v3M8 21H5a2 2 0 0 1-2-2v-3M16 21h3a2 2 0 0 0 2-2v-3" />`,
+	collapseFull: svg`<path d="M8 3v3a2 2 0 0 1-2 2H3M16 3v3a2 2 0 0 0 2 2h3M8 21v-3a2 2 0 0 0-2-2H3M16 21v-3a2 2 0 0 1 2-2h3" />`
+};
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
+var DashCard = class DashCard extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.cardId = void 0;
+		this.col = 1;
+		this.row = 1;
+		this.colSpan = 1;
+		this.rowSpan = 1;
+		this.minWidth = 0;
+		this.minHeight = 0;
+		this.resize = "both";
+		this.expandWidth = false;
+		this.expandHeight = false;
+		this.expandFull = false;
+		this.expanded = "none";
+		this.hasHeader = false;
+		this.hasActions = false;
+		this.hasSlottedControls = false;
+		this.hasFooter = false;
+		this.dashboard = void 0;
+	}
+	static {
+		this.styles = unsafeCSS(dash_card_default);
+	}
+	/** The grid reads this during a drag; a hidden card asks for nothing. */
+	get constraint() {
+		if (this.hidden) return void 0;
+		const placement = this.placement;
+		return {
+			col: placement.col,
+			colSpan: placement.colSpan,
+			row: placement.row,
+			rowSpan: placement.rowSpan,
+			minWidth: Math.max(0, this.minWidth),
+			minHeight: Math.max(0, this.minHeight)
+		};
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this.attachToDashboard();
+	}
+	disconnectedCallback() {
+		this.dashboard?.unregisterCard(this);
+		this.dashboard = void 0;
+		super.disconnectedCallback();
+	}
+	/** Called by the grid when its shape or its layout record changed. */
+	hostChanged() {
+		this.requestUpdate();
+	}
+	willUpdate() {
+		const visible = this.dashboard?.placementOf(this.cardId)?.visible;
+		if (visible !== void 0) this.hidden = !visible;
+	}
+	updated() {
+		const placement = this.placement;
+		this.style.setProperty("--_grid-column", `${placement.col} / span ${placement.colSpan}`);
+		this.style.setProperty("--_grid-row", `${placement.row} / span ${placement.rowSpan}`);
+		this.syncHandleValues();
+	}
+	/**
+	* The splitter values are written straight onto the handles rather than re-rendered: a drag changes them on
+	* every pointer move, and nothing else about the card changes with them.
+	*/
+	syncHandleValues() {
+		const dashboard = this.dashboard;
+		if (!dashboard) return;
+		for (const handle of this.renderRoot.querySelectorAll(".c2-dash-card__handle")) {
+			const axis = handle.dataset.axis === "column" ? "column" : "row";
+			const index = Number(handle.dataset.track);
+			if (!Number.isFinite(index)) continue;
+			handle.setAttribute("aria-valuenow", String(dashboard.splitterValue(axis, index)));
+		}
+	}
+	/** `slotchange` does not fire for a server-rendered shadow root, so read every slot once. */
+	firstUpdated() {
+		for (const slot of this.renderRoot.querySelectorAll("slot")) this.updateSection(slot);
+	}
+	/**
+	* The grid may upgrade after its cards do — the card element is in the document either way, so find it and wait
+	* for the definition rather than for a parent that is already alive.
+	*/
+	attachToDashboard() {
+		const host = this.closest(DASHBOARD_TAG);
+		if (!host) return;
+		if (typeof host.registerCard !== "function") {
+			if (isServer) return;
+			customElements.whenDefined(DASHBOARD_TAG).then(() => {
+				if (this.isConnected) this.attachToDashboard();
+			});
+			return;
+		}
+		this.dashboard = host;
+		host.registerCard(this);
+	}
+	get placement() {
+		const override = this.dashboard?.placementOf(this.cardId);
+		const columnCount = this.dashboard?.columnCount ?? 0;
+		const rowCount = this.dashboard?.rowCount ?? 0;
+		const wide = this.expanded === "width" || this.expanded === "full";
+		const tall = this.expanded === "height" || this.expanded === "full";
+		let col = wide ? 1 : override?.col ?? this.col;
+		let row = tall ? 1 : override?.row ?? this.row;
+		let colSpan = wide ? Math.max(1, columnCount) : override?.colSpan ?? this.colSpan;
+		let rowSpan = tall ? Math.max(1, rowCount) : override?.rowSpan ?? this.rowSpan;
+		if (columnCount > 0) {
+			col = clamp(Math.trunc(col), 1, columnCount);
+			colSpan = clamp(Math.trunc(colSpan), 1, columnCount - col + 1);
+		}
+		if (rowCount > 0) {
+			row = clamp(Math.trunc(row), 1, rowCount);
+			rowSpan = clamp(Math.trunc(rowSpan), 1, rowCount - row + 1);
+		}
+		return {
+			col: Math.max(1, col),
+			row: Math.max(1, row),
+			colSpan: Math.max(1, colSpan),
+			rowSpan: Math.max(1, rowSpan)
+		};
+	}
+	handleSlotChange(event) {
+		this.updateSection(event.target);
+	}
+	updateSection(slot) {
+		const filled = slot.assignedNodes({ flatten: true }).some((node) => node.nodeType === Node.ELEMENT_NODE || (node.textContent ?? "").trim() !== "");
+		switch (slot.name) {
+			case "header":
+				this.hasHeader = filled;
+				break;
+			case "actions":
+				this.hasActions = filled;
+				break;
+			case "controls":
+				this.hasSlottedControls = filled;
+				break;
+			case "footer": this.hasFooter = filled;
+		}
+	}
+	startDrag(event, axis, index) {
+		const dashboard = this.dashboard;
+		if (!dashboard || event.button !== 0) return;
+		event.preventDefault();
+		const handle = event.currentTarget;
+		let last = axis === "column" ? event.clientX : event.clientY;
+		const move = (moveEvent) => {
+			const delta = (axis === "column" ? moveEvent.clientX : moveEvent.clientY) - last;
+			if (delta === 0) return;
+			last += axis === "column" ? dashboard.resizeColumn(index, delta) : dashboard.resizeRow(index, delta);
+		};
+		const finish = (endEvent) => {
+			handle.releasePointerCapture(endEvent.pointerId);
+			handle.removeEventListener("pointermove", move);
+			handle.removeEventListener("pointerup", finish);
+			handle.removeEventListener("pointercancel", finish);
+			handle.classList.remove("is-dragging");
+			dashboard.commitResize();
+			this.syncHandleValues();
+		};
+		handle.setPointerCapture(event.pointerId);
+		handle.classList.add("is-dragging");
+		handle.addEventListener("pointermove", move);
+		handle.addEventListener("pointerup", finish);
+		handle.addEventListener("pointercancel", finish);
+	}
+	handleHandleKeydown(event, axis, index) {
+		const dashboard = this.dashboard;
+		if (!dashboard) return;
+		const step = event.shiftKey ? KEYBOARD_FINE_STEP : KEYBOARD_STEP;
+		const back = axis === "column" ? "ArrowLeft" : "ArrowUp";
+		const forward = axis === "column" ? "ArrowRight" : "ArrowDown";
+		const delta = event.key === back ? -step : event.key === forward ? step : 0;
+		if (delta === 0) return;
+		event.preventDefault();
+		if (axis === "column") dashboard.resizeColumn(index, delta);
+		else dashboard.resizeRow(index, delta);
+		dashboard.commitResize();
+		this.syncHandleValues();
+	}
+	toggleExpanded(axis) {
+		let wide = this.expanded === "width" || this.expanded === "full";
+		let tall = this.expanded === "height" || this.expanded === "full";
+		if (axis === "width") wide = !wide;
+		else if (axis === "height") tall = !tall;
+		else wide = tall = !(wide && tall);
+		this.expanded = wide && tall ? "full" : wide ? "width" : tall ? "height" : "none";
+		this.dispatchEvent(new CustomEvent("expand-change", {
+			detail: { expanded: this.expanded },
+			bubbles: false,
+			composed: true
+		}));
+	}
+	renderControl(axis, active, label, icon) {
+		const slot = `${active ? "collapse" : "expand"}-${axis}-icon`;
+		return html`
+      <button class="c2-dash-card__control" part="control" type="button" aria-label=${label} aria-pressed=${active} @click=${() => this.toggleExpanded(axis)}>
+        <slot name=${slot}>
+          <svg
+            class="c2-dash-card__control-icon"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.6"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            aria-hidden="true"
+          >
+            ${icon}
+          </svg>
+        </slot>
+      </button>
+    `;
+	}
+	renderControls() {
+		const wide = this.expanded === "width" || this.expanded === "full";
+		const tall = this.expanded === "height" || this.expanded === "full";
+		return html`
+      <slot name="controls" @slotchange=${this.handleSlotChange}></slot>
+      ${this.expandWidth ? this.renderControl("width", wide, wide ? "Collapse to the original width" : "Expand to the full width", wide ? ICONS.collapseWidth : ICONS.expandWidth) : nothing}
+      ${this.expandHeight ? this.renderControl("height", tall, tall ? "Collapse to the original height" : "Expand to the full height", tall ? ICONS.collapseHeight : ICONS.expandHeight) : nothing}
+      ${this.expandFull ? this.renderControl("full", wide && tall, wide && tall ? "Collapse the card" : "Expand the card", wide && tall ? ICONS.collapseFull : ICONS.expandFull) : nothing}
+    `;
+	}
+	renderHandle(axis, edge, index) {
+		return html`
+      <div
+        class="c2-dash-card__handle c2-dash-card__handle--${edge}"
+        part="handle handle-${edge}"
+        role="separator"
+        tabindex="0"
+        aria-orientation=${axis === "column" ? "vertical" : "horizontal"}
+        aria-label=${axis === "column" ? "Resize column" : "Resize row"}
+        aria-valuenow=${this.dashboard?.splitterValue(axis, index) ?? 0}
+        data-axis=${axis}
+        data-track=${index}
+        @pointerdown=${(event) => this.startDrag(event, axis, index)}
+        @keydown=${(event) => this.handleHandleKeydown(event, axis, index)}
+      >
+        <span class="c2-dash-card__handle-bar"></span>
+      </div>
+    `;
+	}
+	renderHandles() {
+		if (!this.dashboard || this.resize === "none") return nothing;
+		const placement = this.placement;
+		const horizontal = this.resize === "both" || this.resize === "horizontal";
+		const vertical = this.resize === "both" || this.resize === "vertical";
+		const wide = this.expanded === "width" || this.expanded === "full";
+		const tall = this.expanded === "height" || this.expanded === "full";
+		const lastColumn = placement.col + placement.colSpan - 1;
+		const lastRow = placement.row + placement.rowSpan - 1;
+		return html`
+      ${horizontal && !wide && lastColumn < this.dashboard.columnCount ? this.renderHandle("column", "right", lastColumn - 1) : nothing}
+      ${horizontal && !wide && placement.col > 1 ? this.renderHandle("column", "left", placement.col - 2) : nothing}
+      ${vertical && !tall && lastRow < this.dashboard.rowCount ? this.renderHandle("row", "bottom", lastRow - 1) : nothing}
+      ${vertical && !tall && placement.row > 1 ? this.renderHandle("row", "top", placement.row - 2) : nothing}
+    `;
+	}
+	render() {
+		const hasControls = this.hasSlottedControls || this.expandWidth || this.expandHeight || this.expandFull;
+		const hasHeaderRow = this.hasHeader || this.hasActions;
+		return html`
+      <div class=${classMap({
+			"c2-dash-card": true,
+			"has-header": hasHeaderRow
+		})}>
+        <div class="c2-dash-card__header" part="header" ?hidden=${!hasHeaderRow && !hasControls}>
+          <div class="c2-dash-card__title"><slot name="header" @slotchange=${this.handleSlotChange}></slot></div>
+          <div class="c2-dash-card__actions">
+            <slot name="actions" @slotchange=${this.handleSlotChange}></slot>
+            <div class="c2-dash-card__controls" part="controls" ?hidden=${!hasControls}>${this.renderControls()}</div>
+          </div>
+        </div>
+        <div class="c2-dash-card__body" part="body"><slot></slot></div>
+        <div class="c2-dash-card__footer" part="footer" ?hidden=${!this.hasFooter}>
+          <slot name="footer" @slotchange=${this.handleSlotChange}></slot>
+        </div>
+      </div>
+      ${this.renderHandles()}
+    `;
+	}
+};
+__decorate([property({ attribute: "card-id" })], DashCard.prototype, "cardId", void 0);
+__decorate([property({ type: Number })], DashCard.prototype, "col", void 0);
+__decorate([property({ type: Number })], DashCard.prototype, "row", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "col-span"
+})], DashCard.prototype, "colSpan", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "row-span"
+})], DashCard.prototype, "rowSpan", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "min-width"
+})], DashCard.prototype, "minWidth", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "min-height"
+})], DashCard.prototype, "minHeight", void 0);
+__decorate([property({ reflect: true })], DashCard.prototype, "resize", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "expand-width"
+})], DashCard.prototype, "expandWidth", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "expand-height"
+})], DashCard.prototype, "expandHeight", void 0);
+__decorate([property({
+	type: Boolean,
+	attribute: "expand-full"
+})], DashCard.prototype, "expandFull", void 0);
+__decorate([property({ reflect: true })], DashCard.prototype, "expanded", void 0);
+__decorate([state()], DashCard.prototype, "hasHeader", void 0);
+__decorate([state()], DashCard.prototype, "hasActions", void 0);
+__decorate([state()], DashCard.prototype, "hasSlottedControls", void 0);
+__decorate([state()], DashCard.prototype, "hasFooter", void 0);
+__decorate([state()], DashCard.prototype, "dashboard", void 0);
+DashCard = __decorate([customElement("c2-dash-card")], DashCard);
+//#endregion
+export { __decorate as n, DashCard as t };

package/dist/dash-card.js

@@ -0,0 +1,2 @@
+import { t as DashCard } from "./dash-card-DYabhvcS.js";
+export { DashCard };

package/dist/dashboard-host.js

@@ -0,0 +1,4 @@
+//#region src/dashboard-host.ts
+var DASHBOARD_TAG = "c2-dashboard";
+//#endregion
+export { DASHBOARD_TAG };

package/dist/dashboard.js

@@ -0,0 +1,244 @@
+import { n as __decorate } from "./dash-card-DYabhvcS.js";
+import { LitElement, html, unsafeCSS } from "lit";
+import { property, state } from "lit/decorators.js";
+import { isServer } from "lit-html/is-server.js";
+import { customElement } from "@c2n/core/element-helper.js";
+//#region src/dashboard.scss?inline
+var dashboard_default = "/* ex : var((width: 24px), width, c2-checkbox)  returns var(--c2-checkbox-width, 24px) */\n:host {\n  display: grid;\n  box-sizing: border-box;\n  grid-template-columns: var(--_columns, 1fr);\n  grid-template-rows: var(--_rows, auto);\n  gap: var(--c2-dashboard--gap,8px);\n  padding: var(--c2-dashboard--padding,0px);\n  background: var(--c2-dashboard--background,transparent);\n  border: var(--c2-dashboard--border,none);\n  border-radius: var(--c2-dashboard--border-radius,0px);\n  min-width: 0;\n  min-height: 0;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\nslot {\n  display: contents;\n}\n\n::slotted(*) {\n  min-width: 0;\n  min-height: 0;\n}";
+//#endregion
+//#region src/dashboard.ts
+var FRACTION = /^([\d.]*)fr$/;
+/** The weight of an `fr` track, `0` for any track that does not flex. */
+function parseFraction(size) {
+	const match = FRACTION.exec(size.trim());
+	if (!match) return 0;
+	if (match[1] === "") return 1;
+	const value = Number.parseFloat(match[1]);
+	return Number.isFinite(value) && value > 0 ? value : 0;
+}
+function repeatFraction(count) {
+	return Array.from({ length: Math.max(1, Math.trunc(count)) }, () => "1fr");
+}
+/** `3` and `'3'` are three `1fr` tracks; anything else is a list of simple track sizes, separated by spaces or commas. */
+function toTracks(input) {
+	if (Array.isArray(input)) return input.length > 0 ? [...input] : ["1fr"];
+	if (typeof input === "number") return repeatFraction(input);
+	const text = String(input ?? "").trim();
+	if (text === "") return ["1fr"];
+	if (/^\d+$/.test(text)) return repeatFraction(Number.parseInt(text, 10));
+	const tracks = text.split(/[\s,]+/).filter(Boolean);
+	return tracks.length > 0 ? tracks : ["1fr"];
+}
+var Dashboard = class Dashboard extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this.columns = 2;
+		this.rows = 1;
+		this.minColumnWidth = 50;
+		this.minRowHeight = 50;
+		this.storageKey = void 0;
+		this.layout = void 0;
+		this.columnTracks = [];
+		this.rowTracks = [];
+		this.cards = /* @__PURE__ */ new Set();
+		this.pixelCache = /* @__PURE__ */ new Map();
+	}
+	static {
+		this.styles = unsafeCSS(dashboard_default);
+	}
+	/** Column tracks as they are laid out right now. */
+	get columnSizes() {
+		return [...this.columnTracks];
+	}
+	/** Row tracks as they are laid out right now. */
+	get rowSizes() {
+		return [...this.rowTracks];
+	}
+	get columnCount() {
+		return this.columnTracks.length;
+	}
+	get rowCount() {
+		return this.rowTracks.length;
+	}
+	willUpdate(changed) {
+		if (!this.hasUpdated || changed.has("columns") || changed.has("rows") || changed.has("storageKey")) this.syncTracks();
+	}
+	updated(changed) {
+		this.pixelCache.clear();
+		this.style.setProperty("--_columns", this.columnTracks.join(" "));
+		this.style.setProperty("--_rows", this.rowTracks.join(" "));
+		if (changed.has("columnTracks") || changed.has("rowTracks") || changed.has("layout")) for (const card of this.cards) card.hostChanged();
+	}
+	/** Back to the authored tracks, and the stored ones are forgotten. */
+	reset() {
+		if (this.storageKey && !isServer) try {
+			localStorage.removeItem(this.storageKey);
+		} catch {}
+		this.columnTracks = toTracks(this.columns);
+		this.rowTracks = toTracks(this.rows);
+		this.emitLayoutChange();
+	}
+	registerCard(card) {
+		this.cards.add(card);
+		card.hostChanged();
+	}
+	unregisterCard(card) {
+		this.cards.delete(card);
+	}
+	placementOf(cardId) {
+		return cardId ? this.layout?.[cardId] : void 0;
+	}
+	resizeColumn(index, delta) {
+		this.pixelCache.clear();
+		const result = this.resizeTrack(this.columnTracks, index, delta, "column");
+		if (!result) return 0;
+		this.columnTracks = result.tracks;
+		return result.applied;
+	}
+	resizeRow(index, delta) {
+		this.pixelCache.clear();
+		const result = this.resizeTrack(this.rowTracks, index, delta, "row");
+		if (!result) return 0;
+		this.rowTracks = result.tracks;
+		return result.applied;
+	}
+	commitResize() {
+		this.persist();
+		this.emitLayoutChange();
+	}
+	/**
+	* Where the splitter after `index` sits, as a percentage of the tracks' total. A focusable `separator` is a
+	* window splitter, and a window splitter has to report a value.
+	*/
+	splitterValue(axis, index) {
+		if (isServer || index < 0) return 0;
+		const sizes = this.trackPixels(axis);
+		const total = sizes.reduce((sum, size) => sum + size, 0);
+		if (total <= 0) return 0;
+		const leading = sizes.slice(0, index + 1).reduce((sum, size) => sum + size, 0);
+		return Math.round(leading / total * 100);
+	}
+	/**
+	* Reading a used track size forces layout, and a drag asks for it from every card's handles on every pointer
+	* move. The answer cannot change until something writes to the DOM, so it is cached until one of them does.
+	*/
+	trackPixels(axis) {
+		const cached = this.pixelCache.get(axis);
+		if (cached) return cached;
+		const sizes = getComputedStyle(this)[axis === "column" ? "gridTemplateColumns" : "gridTemplateRows"].split(" ").map((size) => Number.parseFloat(size)).filter((size) => Number.isFinite(size));
+		this.pixelCache.set(axis, sizes);
+		return sizes;
+	}
+	/** What is left of the host along `axis` once the tracks, the gutters and the padding have taken their share. */
+	freeSpace(axis, tracks) {
+		const style = getComputedStyle(this);
+		const gap = Number.parseFloat(axis === "column" ? style.columnGap : style.rowGap) || 0;
+		const padding = axis === "column" ? (Number.parseFloat(style.paddingLeft) || 0) + (Number.parseFloat(style.paddingRight) || 0) : (Number.parseFloat(style.paddingTop) || 0) + (Number.parseFloat(style.paddingBottom) || 0);
+		const inner = (axis === "column" ? this.clientWidth : this.clientHeight) - padding;
+		const used = tracks.reduce((sum, size) => sum + size, 0) + gap * Math.max(0, tracks.length - 1);
+		return Math.max(0, inner - used);
+	}
+	emitLayoutChange() {
+		this.dispatchEvent(new CustomEvent("layout-change", {
+			detail: {
+				columns: [...this.columnTracks],
+				rows: [...this.rowTracks]
+			},
+			bubbles: false,
+			composed: true
+		}));
+	}
+	resizeTrack(tracks, index, delta, axis) {
+		if (isServer || index < 0 || index >= tracks.length) return void 0;
+		const minOf = (track) => this.trackMin(axis, track);
+		const computed = this.trackPixels(axis);
+		const current = computed[index];
+		if (!Number.isFinite(current)) return void 0;
+		let effective = delta;
+		if (delta > 0) {
+			let totalFraction = 0;
+			const flexible = [];
+			for (let track = 0; track < tracks.length; track++) {
+				if (track === index) continue;
+				const fraction = parseFraction(tracks[track]);
+				if (fraction <= 0) continue;
+				flexible.push({
+					px: computed[track] ?? 0,
+					min: minOf(track),
+					fraction
+				});
+				totalFraction += fraction;
+			}
+			for (const track of flexible) effective = Math.min(effective, Math.max(0, (track.px - track.min) * (totalFraction / track.fraction)));
+			if (flexible.length === 0) effective = Math.min(effective, this.freeSpace(axis, computed));
+		}
+		const next = Math.round(Math.max(minOf(index), current + effective));
+		const resized = [...tracks];
+		resized[index] = `${next}px`;
+		return {
+			tracks: resized,
+			applied: next - current
+		};
+	}
+	/** The largest minimum any card covering this track asks for, spread over the tracks that card spans. */
+	trackMin(axis, index) {
+		let min = axis === "column" ? this.minColumnWidth : this.minRowHeight;
+		for (const card of this.cards) {
+			const constraint = card.constraint;
+			if (!constraint) continue;
+			const start = (axis === "column" ? constraint.col : constraint.row) - 1;
+			const span = axis === "column" ? constraint.colSpan : constraint.rowSpan;
+			const size = axis === "column" ? constraint.minWidth : constraint.minHeight;
+			if (size <= 0 || index < start || index > start + span - 1) continue;
+			min = Math.max(min, size / span);
+		}
+		return Math.max(0, min);
+	}
+	syncTracks() {
+		const columns = toTracks(this.columns);
+		const rows = toTracks(this.rows);
+		const stored = this.readStored();
+		this.columnTracks = stored?.columns?.length === columns.length ? [...stored.columns] : columns;
+		this.rowTracks = stored?.rows?.length === rows.length ? [...stored.rows] : rows;
+	}
+	readStored() {
+		if (!this.storageKey || isServer) return null;
+		try {
+			const raw = localStorage.getItem(this.storageKey);
+			if (!raw) return null;
+			const parsed = JSON.parse(raw);
+			return parsed && typeof parsed === "object" ? parsed : null;
+		} catch {
+			return null;
+		}
+	}
+	persist() {
+		if (!this.storageKey || isServer) return;
+		try {
+			localStorage.setItem(this.storageKey, JSON.stringify({
+				columns: this.columnTracks,
+				rows: this.rowTracks
+			}));
+		} catch {}
+	}
+	render() {
+		return html`<slot></slot>`;
+	}
+};
+__decorate([property()], Dashboard.prototype, "columns", void 0);
+__decorate([property()], Dashboard.prototype, "rows", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "min-column-width"
+})], Dashboard.prototype, "minColumnWidth", void 0);
+__decorate([property({
+	type: Number,
+	attribute: "min-row-height"
+})], Dashboard.prototype, "minRowHeight", void 0);
+__decorate([property({ attribute: "storage-key" })], Dashboard.prototype, "storageKey", void 0);
+__decorate([property({ attribute: false })], Dashboard.prototype, "layout", void 0);
+__decorate([state()], Dashboard.prototype, "columnTracks", void 0);
+__decorate([state()], Dashboard.prototype, "rowTracks", void 0);
+Dashboard = __decorate([customElement("c2-dashboard")], Dashboard);
+//#endregion
+export { Dashboard };

package/package.json

@@ -0,0 +1,84 @@
+{
+  "name": "@c2n/dashboard",
+  "version": "0.0.11",
+  "type": "module",
+  "main": "dist/dashboard.js",
+  "exports": {
+    ".": {
+      "types": "./types/src/dashboard.d.ts",
+      "default": "./dist/dashboard.js"
+    },
+    "./dash-card.js": {
+      "types": "./types/src/dash-card.d.ts",
+      "default": "./dist/dash-card.js"
+    },
+    "./dashboard-host.js": {
+      "types": "./types/src/dashboard-host.d.ts",
+      "default": "./dist/dashboard-host.js"
+    },
+    "./react": {
+      "types": "./react.d.ts",
+      "default": "./react.js"
+    },
+    "./vue": {
+      "types": "./vue.d.ts",
+      "default": "./vue.js"
+    },
+    "./custom-elements.json": "./custom-elements.json"
+  },
+  "files": [
+    "dist",
+    "types",
+    "react.d.ts",
+    "react.js",
+    "vue.d.ts",
+    "vue.js"
+  ],
+  "keywords": [
+    "dashboard",
+    "grid",
+    "resizable",
+    "layout",
+    "web component",
+    "lit"
+  ],
+  "license": "MIT",
+  "author": "code2nguyen@gmail.com",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/code2nguyen/web-components.git"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "wireit",
+    "build:only": "vite build",
+    "type-check": "wireit"
+  },
+  "wireit": {
+    "type-check": {
+      "dependencies": [
+        "../../core:build"
+      ],
+      "command": "tsc -p tsconfig.lib.json --composite false"
+    },
+    "build": {
+      "dependencies": [
+        "type-check"
+      ],
+      "command": "vite build"
+    }
+  },
+  "dependencies": {
+    "@c2n/core": "0.0.11",
+    "lit": "3.3.3"
+  },
+  "devDependencies": {
+    "@c2n/config": "*"
+  },
+  "customElements": "custom-elements.json",
+  "gitHead": "bf962fba5e49a0ac7555a082584e262949d323a5"
+}

package/react.d.ts

@@ -0,0 +1,26 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// JSX types for the custom elements of @c2n/dashboard. Import once, anywhere in the program:
+//
+//     import '@c2n/dashboard/react'
+//
+// Register the elements at module scope before React renders, or React writes an object prop as an
+// attribute and it stringifies.
+
+import type { DetailedHTMLProps, HTMLAttributes } from 'react'
+import type { DashCard } from '@c2n/dashboard/dash-card.js'
+import type { Dashboard } from '@c2n/dashboard'
+
+/** Standard React host-element attributes plus the element's own public properties. */
+type C2Props<T> = DetailedHTMLProps<HTMLAttributes<T>, T> & Partial<Omit<T, keyof HTMLElement>>
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'c2-dash-card': C2Props<DashCard>
+      'c2-dashboard': C2Props<Dashboard>
+    }
+  }
+}
+
+export {}

package/react.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}

package/types/src/dash-card.d.ts

@@ -0,0 +1,194 @@
+import { LitElement, type TemplateResult } from 'lit';
+import type { TypedAddEventListener, TypedRemoveEventListener } from '@c2n/core/event-helper.js';
+import { type DashCardConstraint } from './dashboard-host';
+/** Which edges of the card can be dragged. */
+export type DashCardResize = 'both' | 'horizontal' | 'vertical' | 'none';
+/** How far the card is expanded over its authored placement. */
+export type DashCardExpanded = 'none' | 'width' | 'height' | 'full';
+/** Detail of the `expand-change` event. */
+export interface DashCardExpandChangeDetail {
+    /** The new expansion state. */
+    expanded: DashCardExpanded;
+}
+/** Events fired by {@link DashCard}, keyed for `addEventListener`. */
+export interface DashCardEventMap {
+    'expand-change': CustomEvent<DashCardExpandChangeDetail>;
+}
+export interface DashCard {
+    addEventListener: TypedAddEventListener<DashCard, DashCardEventMap>;
+    removeEventListener: TypedRemoveEventListener<DashCard, DashCardEventMap>;
+}
+/**
+ * One pane of a `c2-dashboard`. It owns its place in the grid (`col`, `row`, `col-span`, `row-span`), the drag
+ * handles on the edges it shares with a neighbour, and the optional expand controls; it draws no surface of its
+ * own, so put a `c2-card` — or any markup — in the default slot.
+ *
+ * A handle resizes the whole grid track, never just this card, and it only appears where there is a neighbour to
+ * take the space from: the right edge has one when another column follows, the left edge when one precedes. Drag
+ * it, or focus it and use the arrow keys (10px a step, 1px with Shift).
+ *
+ * Filling the `header`, `actions` or `footer` slot turns on that row; with the header and actions both empty the
+ * expand controls float over the top-right corner of the pane instead. An expanded card covers its neighbours, so
+ * give it — or the card inside it — a background.
+ *
+ * Every built-in icon is a slot whose fallback is the default drawing, so a pane can use the host application's own
+ * icon set without giving up the behaviour.
+ *
+ * @tag c2-dash-card
+ *
+ * @slot - Pane content. Give it `height: 100%` (a `c2-card` already stretches) so it follows the row track.
+ * @slot header - Title area of the header row; filling it turns the row on.
+ * @slot actions - Your own controls at the end of the header row, before the built-in expand buttons and separated
+ * from them by `--c2-dash-card__actions--gap`.
+ * @slot controls - Your own controls inside the built-in group, immediately before the expand buttons — for a
+ * button that belongs with them, such as a refresh or a close.
+ * @slot footer - Status bar under the pane content; filling it turns the row on.
+ * @slot expand-width-icon - Icon of the full-width control while the card is not expanded that way.
+ * @slot collapse-width-icon - Icon of the full-width control while it is.
+ * @slot expand-height-icon - Icon of the full-height control while the card is not expanded that way.
+ * @slot collapse-height-icon - Icon of the full-height control while it is.
+ * @slot expand-full-icon - Icon of the fullscreen control while the card is not expanded.
+ * @slot collapse-full-icon - Icon of the fullscreen control while it is.
+ *
+ * @event {CustomEvent<DashCardExpandChangeDetail>} expand-change - The card was expanded or collapsed through one
+ * of its own controls. Does not bubble: listen on the element.
+ *
+ * @csspart header - The header row, or the floating control group when the header and actions slots are empty.
+ * @csspart body - The wrapper around the default slot.
+ * @csspart footer - The footer row.
+ * @csspart controls - The group holding the `controls` slot and the built-in expand buttons.
+ * @csspart control - One built-in expand button.
+ * @csspart handle - Every drag handle. Each also carries the part of its edge.
+ * @csspart handle-left - The handle on the left edge.
+ * @csspart handle-right - The handle on the right edge.
+ * @csspart handle-top - The handle on the top edge.
+ * @csspart handle-bottom - The handle on the bottom edge.
+ *
+ * @cssproperty {background} [--c2-dash-card--background=transparent]
+ * @cssproperty {border} [--c2-dash-card--border=none]
+ * @cssproperty {border-radius} [--c2-dash-card--border-radius=0px]
+ * @cssproperty {box-shadow} [--c2-dash-card--box-shadow=none]
+ * @cssproperty {padding} [--c2-dash-card--padding=0px]
+ * @cssproperty {overflow} [--c2-dash-card--overflow=hidden] - `hidden` keeps the content inside the track; switch
+ * it to `visible` for a pane that has to overflow, such as one holding a menu.
+ *
+ * @cssproperty {background} --c2-dash-card__expanded--background - Fill while the card is expanded over its
+ * neighbours; falls back to `--c2-dash-card--background`, which is transparent, so set one of the two.
+ * @cssproperty {number} [--c2-dash-card__expanded--z-index=20]
+ * @cssproperty {duration} [--c2-dash-card__expanded--animation-duration=200ms] - Length of the scale-in the card
+ * plays when it expands or collapses. Ignored under `prefers-reduced-motion`.
+ *
+ * @cssproperty {pixel} [--c2-dash-card__header--min-height=44px]
+ * @cssproperty {padding} [--c2-dash-card__header--padding-block=8px]
+ * @cssproperty {padding} [--c2-dash-card__header--padding-inline=12px]
+ * @cssproperty {pixel} [--c2-dash-card__header--gap=12px]
+ * @cssproperty {background} [--c2-dash-card__header--background=transparent]
+ * @cssproperty {border} [--c2-dash-card__header--border-bottom=none]
+ * @cssproperty {color} [--c2-dash-card__header--color=#18181b]
+ * @cssproperty {pixel} [--c2-dash-card__header--font-size=14px]
+ * @cssproperty {font-weight} [--c2-dash-card__header--font-weight=600]
+ *
+ * @cssproperty {pixel} [--c2-dash-card__footer--min-height=36px]
+ * @cssproperty {padding} [--c2-dash-card__footer--padding-block=6px]
+ * @cssproperty {padding} [--c2-dash-card__footer--padding-inline=12px]
+ * @cssproperty {pixel} [--c2-dash-card__footer--gap=8px]
+ * @cssproperty {background} [--c2-dash-card__footer--background=transparent]
+ * @cssproperty {border} [--c2-dash-card__footer--border-top=none]
+ * @cssproperty {color} [--c2-dash-card__footer--color=#71717a]
+ * @cssproperty {pixel} [--c2-dash-card__footer--font-size=12px]
+ *
+ * @cssproperty {pixel} [--c2-dash-card__actions--gap=8px]
+ * @cssproperty {pixel} [--c2-dash-card__controls--gap=2px]
+ * @cssproperty {pixel} [--c2-dash-card__controls--offset=4px] - Inset of the floating control group from the
+ * top-right corner, used only while the header row is off.
+ *
+ * @cssproperty {pixel} [--c2-dash-card__control--size=24px]
+ * @cssproperty {pixel} [--c2-dash-card__control--icon-size=16px]
+ * @cssproperty {border-radius} [--c2-dash-card__control--border-radius=6px]
+ * @cssproperty {color} [--c2-dash-card__control--color=#71717a]
+ * @cssproperty {background} [--c2-dash-card__control--background=transparent]
+ * @cssproperty {background} [--c2-dash-card__control__hover--background=#f4f4f5]
+ * @cssproperty {color} [--c2-dash-card__control__hover--color=#18181b]
+ * @cssproperty {outline} [--c2-dash-card__control__focus--outline=2px solid rgba(2, 101, 220, 0.4)]
+ * @cssproperty {pixel} [--c2-dash-card__control__focus--outline-offset=2px]
+ *
+ * @cssproperty {pixel} [--c2-dash-card__handle--size=6px] - Thickness of the grab area on an edge. It reaches into
+ * the pane, so it stays grabbable however wide the grid gutter is.
+ * @cssproperty {pixel} [--c2-dash-card__handle--inset=2px] - Gap between the handle's visible bar and the ends of
+ * the edge.
+ * @cssproperty {background} [--c2-dash-card__handle--background=transparent]
+ * @cssproperty {background} [--c2-dash-card__handle__hover--background=rgba(2, 101, 220, 0.2)]
+ * @cssproperty {background} [--c2-dash-card__handle__active--background=rgb(2, 101, 220)]
+ * @cssproperty {border-radius} [--c2-dash-card__handle--border-radius=999px]
+ * @cssproperty {duration} [--c2-dash-card__handle--transition-duration=150ms]
+ * @cssproperty {outline} [--c2-dash-card__handle__focus--outline=2px solid rgba(2, 101, 220, 0.4)]
+ */
+export declare class DashCard extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Identifier the grid's `layout` record is keyed by. */
+    cardId: string | undefined;
+    /** 1-based column the card starts in. */
+    col: number;
+    /** 1-based row the card starts in. */
+    row: number;
+    /** Number of columns the card occupies. */
+    colSpan: number;
+    /** Number of rows the card occupies. */
+    rowSpan: number;
+    /** Smallest width in pixels the card accepts; it raises the minimum of every column it covers. */
+    minWidth: number;
+    /** Smallest height in pixels the card accepts; it raises the minimum of every row it covers. */
+    minHeight: number;
+    /** Which edges carry a drag handle. */
+    resize: DashCardResize;
+    /** Offers a control that expands the card across every column. */
+    expandWidth: boolean;
+    /** Offers a control that expands the card across every row. */
+    expandHeight: boolean;
+    /** Offers a control that expands the card over the whole grid. */
+    expandFull: boolean;
+    /** How far the card is currently expanded. Settable, so an app can expand a card from its own control. */
+    expanded: DashCardExpanded;
+    private hasHeader;
+    private hasActions;
+    private hasSlottedControls;
+    private hasFooter;
+    private dashboard;
+    /** The grid reads this during a drag; a hidden card asks for nothing. */
+    get constraint(): DashCardConstraint | undefined;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    /** Called by the grid when its shape or its layout record changed. */
+    hostChanged(): void;
+    willUpdate(): void;
+    updated(): void;
+    /**
+     * The splitter values are written straight onto the handles rather than re-rendered: a drag changes them on
+     * every pointer move, and nothing else about the card changes with them.
+     */
+    private syncHandleValues;
+    /** `slotchange` does not fire for a server-rendered shadow root, so read every slot once. */
+    firstUpdated(): void;
+    /**
+     * The grid may upgrade after its cards do — the card element is in the document either way, so find it and wait
+     * for the definition rather than for a parent that is already alive.
+     */
+    private attachToDashboard;
+    private get placement();
+    private handleSlotChange;
+    private updateSection;
+    private startDrag;
+    private handleHandleKeydown;
+    private toggleExpanded;
+    private renderControl;
+    private renderControls;
+    private renderHandle;
+    private renderHandles;
+    render(): TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-dash-card': DashCard;
+    }
+}
+//# sourceMappingURL=dash-card.d.ts.map

package/types/src/dash-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dash-card.d.ts","sourceRoot":"","sources":["../../src/dash-card.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAiC,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAKpF,OAAO,KAAK,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAA;AAChG,OAAO,EAAiB,KAAK,kBAAkB,EAAsB,MAAM,kBAAkB,CAAA;AAG7F,8CAA8C;AAC9C,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,YAAY,GAAG,UAAU,GAAG,MAAM,CAAA;AAExE,gEAAgE;AAChE,MAAM,MAAM,gBAAgB,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAA;AAEnE,2CAA2C;AAC3C,MAAM,WAAW,0BAA0B;IACzC,+BAA+B;IAC/B,QAAQ,EAAE,gBAAgB,CAAA;CAC3B;AAED,sEAAsE;AACtE,MAAM,WAAW,gBAAgB;IAC/B,eAAe,EAAE,WAAW,CAAC,0BAA0B,CAAC,CAAA;CACzD;AAED,MAAM,WAAW,QAAQ;IACvB,gBAAgB,EAAE,qBAAqB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAA;IACnE,mBAAmB,EAAE,wBAAwB,CAAC,QAAQ,EAAE,gBAAgB,CAAC,CAAA;CAC1E;AA0BD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwGG;AACH,qBACa,QAAS,SAAQ,UAAU;IACtC,OAAgB,MAAM,0BAAoB;IAE1C,yDAAyD;IACrB,MAAM,EAAE,MAAM,GAAG,SAAS,CAAY;IAE1E,yCAAyC;IACb,GAAG,SAAI;IAEnC,sCAAsC;IACV,GAAG,SAAI;IAEnC,2CAA2C;IACQ,OAAO,SAAI;IAE9D,wCAAwC;IACW,OAAO,SAAI;IAE9D,kGAAkG;IAC9C,QAAQ,SAAI;IAEhE,gGAAgG;IAC3C,SAAS,SAAI;IAElE,uCAAuC;IACV,MAAM,EAAE,cAAc,CAAS;IAE5D,kEAAkE;IACV,WAAW,UAAQ;IAE3E,+DAA+D;IACN,YAAY,UAAQ;IAE7E,kEAAkE;IACX,UAAU,UAAQ;IAEzE,0GAA0G;IAC7E,QAAQ,EAAE,gBAAgB,CAAS;IAEvD,OAAO,CAAC,SAAS,CAAQ;IACzB,OAAO,CAAC,UAAU,CAAQ;IAC1B,OAAO,CAAC,kBAAkB,CAAQ;IAClC,OAAO,CAAC,SAAS,CAAQ;IACzB,OAAO,CAAC,SAAS,CAAuC;IAEjE,yEAAyE;IACzE,IAAI,UAAU,IAAI,kBAAkB,GAAG,SAAS,CAW/C;IAEQ,iBAAiB;IAKjB,oBAAoB;IAM7B,sEAAsE;IACtE,WAAW;IAIF,UAAU;IAKV,OAAO;IAOhB;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAWxB,6FAA6F;IACpF,YAAY;IAIrB;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IAczB,OAAO,KAAK,SAAS,GAuBpB;IAED,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,aAAa;IAoBrB,OAAO,CAAC,SAAS;IA+BjB,OAAO,CAAC,mBAAmB;IAe3B,OAAO,CAAC,cAAc;IAWtB,OAAO,CAAC,aAAa;IAwBrB,OAAO,CAAC,cAAc;IAsCtB,OAAO,CAAC,YAAY;IAqBpB,OAAO,CAAC,aAAa;IAkBZ,MAAM;CAsBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,QAAQ,CAAA;KACzB;CACF"}

package/types/src/dashboard-host.d.ts

@@ -0,0 +1,51 @@
+/**
+ * The contract between `c2-dashboard` and `c2-dash-card`. It lives in its own module so neither element has to
+ * import the other's class: the grid imports the card to register the tag, the card only imports these types.
+ */
+/** Placement of one card, 1-based like CSS grid. Every field overrides the card's own attribute. */
+export interface DashCardPlacement {
+    /** 1-based column the card starts in. */
+    col?: number;
+    /** 1-based row the card starts in. */
+    row?: number;
+    /** Number of columns the card occupies. */
+    colSpan?: number;
+    /** Number of rows the card occupies. */
+    rowSpan?: number;
+    /** `false` hides the card, which is how a layout drops a card without removing it from the markup. */
+    visible?: boolean;
+}
+/** What one card contributes to the minimum size of the tracks it covers, read during a drag. */
+export interface DashCardConstraint {
+    col: number;
+    colSpan: number;
+    row: number;
+    rowSpan: number;
+    minWidth: number;
+    minHeight: number;
+}
+/** The part of `c2-dashboard` a card talks to. */
+export interface DashboardHost extends HTMLElement {
+    readonly columnCount: number;
+    readonly rowCount: number;
+    registerCard(card: DashboardCard): void;
+    unregisterCard(card: DashboardCard): void;
+    /** Resizes one column by `delta` pixels, clamped by the minimums; returns the change that was actually applied. */
+    resizeColumn(index: number, delta: number): number;
+    /** Resizes one row by `delta` pixels, clamped by the minimums; returns the change that was actually applied. */
+    resizeRow(index: number, delta: number): number;
+    /** End of a gesture: persist the track sizes and report them. */
+    commitResize(): void;
+    /** Where the splitter after `index` sits, as a percentage of the tracks' total — the handles' `aria-valuenow`. */
+    splitterValue(axis: 'column' | 'row', index: number): number;
+    placementOf(cardId: string | undefined): DashCardPlacement | undefined;
+}
+/** The part of `c2-dash-card` the grid reads back. */
+export interface DashboardCard extends HTMLElement {
+    /** `undefined` while the card is hidden, so a hidden card constrains nothing. */
+    readonly constraint: DashCardConstraint | undefined;
+    /** The grid changed shape: re-render the placement and the handles. */
+    hostChanged(): void;
+}
+export declare const DASHBOARD_TAG = "c2-dashboard";
+//# sourceMappingURL=dashboard-host.d.ts.map

package/types/src/dashboard-host.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard-host.d.ts","sourceRoot":"","sources":["../../src/dashboard-host.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,oGAAoG;AACpG,MAAM,WAAW,iBAAiB;IAChC,yCAAyC;IACzC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,sCAAsC;IACtC,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,2CAA2C;IAC3C,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,sGAAsG;IACtG,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,iGAAiG;AACjG,MAAM,WAAW,kBAAkB;IACjC,GAAG,EAAE,MAAM,CAAA;IACX,OAAO,EAAE,MAAM,CAAA;IACf,GAAG,EAAE,MAAM,CAAA;IACX,OAAO,EAAE,MAAM,CAAA;IACf,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,kDAAkD;AAClD,MAAM,WAAW,aAAc,SAAQ,WAAW;IAChD,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAA;IACzB,YAAY,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI,CAAA;IACvC,cAAc,CAAC,IAAI,EAAE,aAAa,GAAG,IAAI,CAAA;IACzC,mHAAmH;IACnH,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IAClD,gHAAgH;IAChH,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IAC/C,iEAAiE;IACjE,YAAY,IAAI,IAAI,CAAA;IACpB,kHAAkH;IAClH,aAAa,CAAC,IAAI,EAAE,QAAQ,GAAG,KAAK,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IAC5D,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,iBAAiB,GAAG,SAAS,CAAA;CACvE;AAED,sDAAsD;AACtD,MAAM,WAAW,aAAc,SAAQ,WAAW;IAChD,iFAAiF;IACjF,QAAQ,CAAC,UAAU,EAAE,kBAAkB,GAAG,SAAS,CAAA;IACnD,uEAAuE;IACvE,WAAW,IAAI,IAAI,CAAA;CACpB;AAED,eAAO,MAAM,aAAa,iBAAiB,CAAA"}

package/types/src/dashboard.d.ts

@@ -0,0 +1,111 @@
+import { LitElement, type PropertyValues } from 'lit';
+import type { TypedAddEventListener, TypedRemoveEventListener } from '@c2n/core/event-helper.js';
+import type { DashCardPlacement, DashboardCard } from './dashboard-host';
+import './dash-card';
+export type { DashCardPlacement } from './dashboard-host';
+/** Track sizes the grid is laid out with. Both are CSS track lists, one entry per track. */
+export interface DashboardLayoutChangeDetail {
+    /** Column tracks, e.g. `['320px', '1fr']`. */
+    columns: string[];
+    /** Row tracks. */
+    rows: string[];
+}
+/** Events fired by {@link Dashboard}, keyed for `addEventListener`. */
+export interface DashboardEventMap {
+    'layout-change': CustomEvent<DashboardLayoutChangeDetail>;
+}
+export interface Dashboard {
+    addEventListener: TypedAddEventListener<Dashboard, DashboardEventMap>;
+    removeEventListener: TypedRemoveEventListener<Dashboard, DashboardEventMap>;
+}
+/**
+ * Grid of resizable panes. The children are `c2-dash-card` elements, placed by their `col`/`row` attributes; each
+ * one draws drag handles on the edges it shares with a neighbour, and dragging one resizes the whole track, so the
+ * cards on either side stay aligned. `columns` and `rows` take a track count (`columns="3"` is three equal columns)
+ * or an explicit track list (`columns="320px 1fr"`); a track is switched to pixels the first time it is dragged, and
+ * the `fr` tracks around it give up the space in proportion to their weight, down to the minimums. With a
+ * `storage-key` the sizes survive a reload.
+ *
+ * The grid is the sizing authority: a card never sets its own width. Give the element a height (or place it in a
+ * flex/grid parent that does) whenever the rows use `fr`, since the row tracks divide the host's height.
+ *
+ * @tag c2-dashboard
+ *
+ * @slot - The `c2-dash-card` panes. Anything else becomes an ordinary grid item, placed by your own CSS.
+ *
+ * @event {CustomEvent<DashboardLayoutChangeDetail>} layout-change - The track sizes changed and the gesture ended.
+ * Does not bubble: listen on the element.
+ *
+ * @cssproperty {pixel} [--c2-dashboard--gap=8px] - Gutter between the cards. The drag handles sit inside the cards,
+ * so a gutter under ~6px is hard to grab.
+ * @cssproperty {padding} [--c2-dashboard--padding=0px] - Inset around the tracks. With a `background` it is what
+ * turns the gutters into a visible frame between the panes.
+ * @cssproperty {background} [--c2-dashboard--background=transparent]
+ * @cssproperty {border} [--c2-dashboard--border=none]
+ * @cssproperty {border-radius} [--c2-dashboard--border-radius=0px]
+ */
+export declare class Dashboard extends LitElement {
+    static styles: import("lit").CSSResult;
+    /** Column count (`3`) or an explicit track list (`'320px 1fr'`). Each entry must be one simple size. */
+    columns: number | string | string[];
+    /** Row count (`2`) or an explicit track list (`'auto 1fr'`). */
+    rows: number | string | string[];
+    /** Floor for every column, in pixels. A card's own `min-width` raises it for the tracks that card covers. */
+    minColumnWidth: number;
+    /** Floor for every row, in pixels. A card's own `min-height` raises it for the tracks that card covers. */
+    minRowHeight: number;
+    /** `localStorage` key the track sizes are stored under. Without it the grid starts from the authored tracks. */
+    storageKey: string | undefined;
+    /**
+     * Placement overrides keyed by the cards' `card-id`, for a layout that is chosen at runtime rather than authored
+     * in the markup. Each entry wins over the card's own `col`/`row`/`col-span`/`row-span`/visibility.
+     */
+    layout: Record<string, DashCardPlacement> | undefined;
+    private columnTracks;
+    private rowTracks;
+    private cards;
+    /** Used track sizes, valid until the next write to the tracks. */
+    private pixelCache;
+    /** Column tracks as they are laid out right now. */
+    get columnSizes(): string[];
+    /** Row tracks as they are laid out right now. */
+    get rowSizes(): string[];
+    get columnCount(): number;
+    get rowCount(): number;
+    protected willUpdate(changed: PropertyValues): void;
+    protected updated(changed: PropertyValues): void;
+    /** Back to the authored tracks, and the stored ones are forgotten. */
+    reset(): void;
+    registerCard(card: DashboardCard): void;
+    unregisterCard(card: DashboardCard): void;
+    placementOf(cardId: string | undefined): DashCardPlacement | undefined;
+    resizeColumn(index: number, delta: number): number;
+    resizeRow(index: number, delta: number): number;
+    commitResize(): void;
+    /**
+     * Where the splitter after `index` sits, as a percentage of the tracks' total. A focusable `separator` is a
+     * window splitter, and a window splitter has to report a value.
+     */
+    splitterValue(axis: 'column' | 'row', index: number): number;
+    /**
+     * Reading a used track size forces layout, and a drag asks for it from every card's handles on every pointer
+     * move. The answer cannot change until something writes to the DOM, so it is cached until one of them does.
+     */
+    private trackPixels;
+    /** What is left of the host along `axis` once the tracks, the gutters and the padding have taken their share. */
+    private freeSpace;
+    private emitLayoutChange;
+    private resizeTrack;
+    /** The largest minimum any card covering this track asks for, spread over the tracks that card spans. */
+    private trackMin;
+    private syncTracks;
+    private readStored;
+    private persist;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'c2-dashboard': Dashboard;
+    }
+}
+//# sourceMappingURL=dashboard.d.ts.map

package/types/src/dashboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dashboard.d.ts","sourceRoot":"","sources":["../../src/dashboard.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAmB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAA;AAItE,OAAO,KAAK,EAAE,qBAAqB,EAAE,wBAAwB,EAAE,MAAM,2BAA2B,CAAA;AAChG,OAAO,KAAK,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAA;AAIxE,OAAO,aAAa,CAAA;AAEpB,YAAY,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAA;AAEzD,4FAA4F;AAC5F,MAAM,WAAW,2BAA2B;IAC1C,8CAA8C;IAC9C,OAAO,EAAE,MAAM,EAAE,CAAA;IACjB,kBAAkB;IAClB,IAAI,EAAE,MAAM,EAAE,CAAA;CACf;AAED,uEAAuE;AACvE,MAAM,WAAW,iBAAiB;IAChC,eAAe,EAAE,WAAW,CAAC,2BAA2B,CAAC,CAAA;CAC1D;AAED,MAAM,WAAW,SAAS;IACxB,gBAAgB,EAAE,qBAAqB,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAA;IACrE,mBAAmB,EAAE,wBAAwB,CAAC,SAAS,EAAE,iBAAiB,CAAC,CAAA;CAC5E;AAiCD;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,0BAAoB;IAE1C,wGAAwG;IAC5F,OAAO,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,CAAI;IAEnD,gEAAgE;IACpD,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,CAAI;IAEhD,6GAA6G;IAClD,cAAc,SAAK;IAE9E,2GAA2G;IAClD,YAAY,SAAK;IAE1E,gHAAgH;IACxE,UAAU,EAAE,MAAM,GAAG,SAAS,CAAY;IAElF;;;OAGG;IAC6B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,iBAAiB,CAAC,GAAG,SAAS,CAAY;IAExF,OAAO,CAAC,YAAY,CAAe;IACnC,OAAO,CAAC,SAAS,CAAe;IAEzC,OAAO,CAAC,KAAK,CAA2B;IAExC,kEAAkE;IAClE,OAAO,CAAC,UAAU,CAAwC;IAE1D,oDAAoD;IACpD,IAAI,WAAW,IAAI,MAAM,EAAE,CAE1B;IAED,iDAAiD;IACjD,IAAI,QAAQ,IAAI,MAAM,EAAE,CAEvB;IAED,IAAI,WAAW,IAAI,MAAM,CAExB;IAED,IAAI,QAAQ,IAAI,MAAM,CAErB;cAEkB,UAAU,CAAC,OAAO,EAAE,cAAc;cAIlC,OAAO,CAAC,OAAO,EAAE,cAAc;IAUlD,sEAAsE;IACtE,KAAK;IAaL,YAAY,CAAC,IAAI,EAAE,aAAa;IAKhC,cAAc,CAAC,IAAI,EAAE,aAAa;IAIlC,WAAW,CAAC,MAAM,EAAE,MAAM,GAAG,SAAS,GAAG,iBAAiB,GAAG,SAAS;IAItE,YAAY,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM;IAQlD,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM;IAQ/C,YAAY;IAKZ;;;OAGG;IACH,aAAa,CAAC,IAAI,EAAE,QAAQ,GAAG,KAAK,EAAE,KAAK,EAAE,MAAM,GAAG,MAAM;IAS5D;;;OAGG;IACH,OAAO,CAAC,WAAW;IAYnB,iHAAiH;IACjH,OAAO,CAAC,SAAS;IAYjB,OAAO,CAAC,gBAAgB;IAUxB,OAAO,CAAC,WAAW;IAkCnB,yGAAyG;IACzG,OAAO,CAAC,QAAQ;IAchB,OAAO,CAAC,UAAU;IASlB,OAAO,CAAC,UAAU;IAYlB,OAAO,CAAC,OAAO;IASN,MAAM;CAGhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,cAAc,EAAE,SAAS,CAAA;KAC1B;CACF"}

package/vue.d.ts

@@ -0,0 +1,50 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+//
+// Vue template types for the custom elements of @c2n/dashboard. Import once, anywhere in the program:
+//
+//     import '@c2n/dashboard/vue'
+//
+// Tell the compiler about the tags as well, or every c2-* tag is resolved as a Vue component and renders
+// nothing: template.compilerOptions.isCustomElement = (tag) => tag.startsWith('c2-') in vite.config.ts.
+
+import type { DefineComponent, HTMLAttributes } from 'vue'
+import type { DashCard, DashCardEventMap } from '@c2n/dashboard/dash-card.js'
+import type { Dashboard, DashboardEventMap } from '@c2n/dashboard'
+
+/** The element's own public properties, plus every attribute Vue understands on a host element. */
+type C2Props<T> = Partial<Omit<T, keyof HTMLElement>> & HTMLAttributes
+
+declare module 'vue' {
+  interface GlobalComponents {
+    'c2-dash-card': DefineComponent<
+      C2Props<DashCard> & {
+        'card-id'?: unknown
+        'col-span'?: unknown
+        'row-span'?: unknown
+        'min-width'?: unknown
+        'min-height'?: unknown
+        'expand-width'?: unknown
+        'expand-height'?: unknown
+        'expand-full'?: unknown
+        onExpandChange?: (event: DashCardEventMap['expand-change']) => void
+      }
+    >
+    'c2-dashboard': DefineComponent<
+      C2Props<Dashboard> & {
+        'min-column-width'?: unknown
+        'min-row-height'?: unknown
+        'storage-key'?: unknown
+        onLayoutChange?: (event: DashboardEventMap['layout-change']) => void
+      }
+    >
+  }
+}
+
+declare module '@vue/runtime-dom' {
+  interface HTMLAttributes {
+    /** Vue's own definition omits it, and slotting a plain element into a component needs it. */
+    slot?: string
+  }
+}
+
+export {}

package/vue.js

@@ -0,0 +1,3 @@
+// GENERATED by @c2n/framework-types. Do not edit by hand.
+// Types only — see the matching .d.ts.
+export {}