@grafloria/element 0.4.8 → 0.4.10

package/README.md

@@ -1,11 +1,8 @@
 # @grafloria/element
 
-`<grafloria-flow>` — the universal embed for the
-[Grafloria](https://github.com/grafloria/grafloria) diagram engine. A custom
-element with no framework wall: plain HTML, Vue, Svelte, Solid, Lit, a CMS
-block, or a notebook cell all speak "element with attributes and events".
-Includes the high-level kits: dashboard (drag-pack grid + widgets), class-UML,
-and ERD.
+`<grafloria-flow>` and the kits of **Grafloria Diagrams** and **Grafloria Dashboards**, for any framework or none. Grafloria is an MIT diagram and dashboard engine for JavaScript: one headless core, native Angular, React and Vue bindings, one document format and one undo stack.
+
+A custom element with no framework wall: plain HTML, Vue, Svelte, Solid, Lit, a CMS block or a notebook cell all speak "element with attributes and events". The same package carries `dashboard()` (the dashboard layout kit, also published as `@grafloria/dashboard`) and the UML and ER kits.
 
 ```html
 <script type="module" src="grafloria.js"></script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafloria/element",
-  "version": "0.4.8",
+  "version": "0.4.10",
   "type": "module",
   "main": "./src/index.js",
   "types": "./src/index.d.ts",
@@ -11,7 +11,7 @@
   "dependencies": {
     "tslib": "^2.3.0"
   },
-  "description": "The <grafloria-flow> custom element and high-level diagram kits (dashboard, UML, ERD) \u2014 works in any framework or none",
+  "description": "Web component, dashboard kit and UML/ERD kits for Grafloria — diagrams and dashboards in any framework or none. Grafloria is an MIT diagram and dashboard engine for JavaScript.",
   "license": "MIT",
   "author": "Ramy Othman",
   "homepage": "https://grafloria.com/javascript/",
@@ -33,7 +33,9 @@
     "erd",
     "svg",
     "layout",
-    "mermaid"
+    "mermaid",
+    "dashboard-layout",
+    "workflow-editor"
   ],
   "publishConfig": {
     "access": "public"

package/src/index.d.ts

@@ -12,13 +12,13 @@
  * on the server, where `customElements` does not exist). Call
  * `Grafloria.define('my-flow')` yourself if you want a different tag name.
  */
-export { GrafloriaFlowElement, defineGrafloriaFlow, GRAFLORIA_EVENTS } from './lib/grafloria-flow-element.js';
-export { Grafloria, render, renderStatic } from './lib/grafloria.js';
-export type { DiagramSpec, RenderSpec, RenderOptions } from './lib/grafloria.js';
-export { fromDocument } from './lib/load.js';
-export type { SavedDiagram, FromDocumentOptions, LoadedDiagramSpec } from './lib/load.js';
-export { registerNodeType, unregisterNodeType, registeredNodeTypes, getNodeType, hasNodeType, renderFromTemplate, } from './lib/node-type-registry.js';
-export type { NodeTypeRenderer } from './lib/node-type-registry.js';
+export { GrafloriaFlowElement, defineGrafloriaFlow, GRAFLORIA_EVENTS } from './lib/grafloria-flow-element';
+export { Grafloria, render, renderStatic } from './lib/grafloria';
+export type { DiagramSpec, RenderSpec, RenderOptions } from './lib/grafloria';
+export { fromDocument } from './lib/load';
+export type { SavedDiagram, FromDocumentOptions, LoadedDiagramSpec } from './lib/load';
+export { registerNodeType, unregisterNodeType, registeredNodeTypes, getNodeType, hasNodeType, renderFromTemplate, } from './lib/node-type-registry';
+export type { NodeTypeRenderer } from './lib/node-type-registry';
 export type { DiagramInstance, CreateDiagramOptions, NodeSpec, EdgeSpec, PortSpec, HydrationSnapshot, StaticRenderOptions, StaticRenderResult, Theme, } from '@grafloria/renderer';
 export { renderToStaticSVG, LIGHT_THEME, DARK_THEME } from '@grafloria/renderer';
 export { createDiagramApi } from '@grafloria/renderer';
@@ -74,15 +74,15 @@ export { GroupModel } from '@grafloria/engine';
 export { GroupCollapseService, PROXY_NODE_GROUP_KEY, PROXY_LINK_GROUP_KEY } from '@grafloria/engine';
 export { serveLayout } from '@grafloria/engine';
 export type { LayoutPort, LayoutServePort, LayoutProgress } from '@grafloria/engine';
-export { erDiagram, erRowCenterY, ER_ROW_H, ER_HEAD_H, umlDiagram, ensureDiagramKitStyles, DIAGRAM_KIT_STYLE_ID, updateEntity, updateClass, addColumnAt, removeColumnAt, renameColumnAt, bindCardEditing, matchColumns, rowIndexFromY, scoreMatch, matchTier, assignTiers, singularize, bindJoinGuidance, ensureJoinGuidanceStyles, JOIN_GUIDANCE_STYLE_ID, } from './lib/diagram-kit/index.js';
-export type { JoinColumn, JoinEnd, MatchTier, JoinGuidanceApi, JoinGuidanceOptions, JoinGuidanceHandle, } from './lib/diagram-kit/index.js';
-export type { ErColumn, ErEntitySpec, ErRelationshipSpec, ErCardinality, ErSide, ErDiagramOptions, UmlClassSpec, UmlRelationshipSpec, UmlRelationKind, UmlSide, UmlDiagramOptions, ErEntityDelta, UmlClassDelta, CardEditingHandle, } from './lib/diagram-kit/index.js';
-export { erTable, umlClass, erTables, umlClasses, CardHandle, ErTable, ErField, ErColumnList, UmlClass, UmlMemberList, } from './lib/diagram-kit/index.js';
-export type { HandleApi } from './lib/diagram-kit/index.js';
-export { bindDashboardGrid, rowHeightFor, boardHeightFor, columnUnitFor, cellToRect, pointToCell, sizeToSpan, gridItemFromCell, cellFromGridItem, buildCommitCommands, ensureDashboardKitStyles, DASHBOARD_KIT_STYLE_ID, dashboard, defaultWidgetRenderer, renderKpiWidget, renderLineWidget, renderBarWidget, renderDonutWidget, renderFunnelWidget, renderTableWidget, BUILT_IN_WIDGET_KINDS, } from './lib/dashboard-kit/index.js';
-export type { DashboardGridApi, DashboardGridOptions, DashboardGridHandle, CellRect, WorldRect, DashboardGridGeometry, TileDelta, DashboardOptions, DashboardSpec, DashboardSnapshot, DragHandleOption, DragGripOptions, DashboardHandle, DashboardViewSpec, DashboardWidgetSpec, WidgetHandle, WidgetRenderer, KpiWidgetData, LineWidgetData, LineSeries, BarWidgetData, DonutWidgetData, FunnelWidgetData, TableWidgetData, } from './lib/dashboard-kit/index.js';
-export { bindStencilPalette, bindShapeDataPanel, ensureStencilKitStyles } from './lib/stencil-kit/index.js';
-export type { StencilPaletteApi, StencilPaletteOptions, StencilPaletteHandle, ShapeDataPanelApi, ShapeDataPanelOptions, ShapeDataPanelHandle, } from './lib/stencil-kit/index.js';
+export { erDiagram, erRowCenterY, ER_ROW_H, ER_HEAD_H, umlDiagram, ensureDiagramKitStyles, DIAGRAM_KIT_STYLE_ID, updateEntity, updateClass, addColumnAt, removeColumnAt, renameColumnAt, bindCardEditing, matchColumns, rowIndexFromY, scoreMatch, matchTier, assignTiers, singularize, bindJoinGuidance, ensureJoinGuidanceStyles, JOIN_GUIDANCE_STYLE_ID, } from './lib/diagram-kit';
+export type { JoinColumn, JoinEnd, MatchTier, JoinGuidanceApi, JoinGuidanceOptions, JoinGuidanceHandle, } from './lib/diagram-kit';
+export type { ErColumn, ErEntitySpec, ErRelationshipSpec, ErCardinality, ErSide, ErDiagramOptions, UmlClassSpec, UmlRelationshipSpec, UmlRelationKind, UmlSide, UmlDiagramOptions, ErEntityDelta, UmlClassDelta, CardEditingHandle, } from './lib/diagram-kit';
+export { erTable, umlClass, erTables, umlClasses, CardHandle, ErTable, ErField, ErColumnList, UmlClass, UmlMemberList, } from './lib/diagram-kit';
+export type { HandleApi } from './lib/diagram-kit';
+export { bindDashboardGrid, rowHeightFor, boardHeightFor, columnUnitFor, cellToRect, pointToCell, sizeToSpan, gridItemFromCell, cellFromGridItem, buildCommitCommands, ensureDashboardKitStyles, DASHBOARD_KIT_STYLE_ID, dashboard, defaultWidgetRenderer, renderKpiWidget, renderLineWidget, renderBarWidget, renderDonutWidget, renderFunnelWidget, renderTableWidget, BUILT_IN_WIDGET_KINDS, } from './lib/dashboard-kit';
+export type { DashboardGridApi, DashboardGridOptions, DashboardGridHandle, CellRect, WorldRect, DashboardGridGeometry, TileDelta, DashboardOptions, DashboardSpec, DashboardSnapshot, DragHandleOption, DragGripOptions, DashboardHandle, DashboardViewSpec, DashboardWidgetSpec, WidgetHandle, WidgetRenderer, KpiWidgetData, LineWidgetData, LineSeries, BarWidgetData, DonutWidgetData, FunnelWidgetData, TableWidgetData, } from './lib/dashboard-kit';
+export { bindStencilPalette, bindShapeDataPanel, ensureStencilKitStyles } from './lib/stencil-kit';
+export type { StencilPaletteApi, StencilPaletteOptions, StencilPaletteHandle, ShapeDataPanelApi, ShapeDataPanelOptions, ShapeDataPanelHandle, } from './lib/stencil-kit';
 export * from '@grafloria/engine';
 export * from '@grafloria/renderer';
 export { NodeModel, PortModel, distanceToSegment, rotatePoint, coalesce, } from '@grafloria/engine';

package/src/index.js

@@ -12,14 +12,14 @@
  * on the server, where `customElements` does not exist). Call
  * `Grafloria.define('my-flow')` yourself if you want a different tag name.
  */
-import { defineGrafloriaFlow } from './lib/grafloria-flow-element.js';
-export { GrafloriaFlowElement, defineGrafloriaFlow, GRAFLORIA_EVENTS } from './lib/grafloria-flow-element.js';
-export { Grafloria, render, renderStatic } from './lib/grafloria.js';
+import { defineGrafloriaFlow } from './lib/grafloria-flow-element';
+export { GrafloriaFlowElement, defineGrafloriaFlow, GRAFLORIA_EVENTS } from './lib/grafloria-flow-element';
+export { Grafloria, render, renderStatic } from './lib/grafloria';
 // The LOAD front door — the other half of `DiagramSerializer.serialize()`.
 // `render(fromDocument(json), host)` is the one-liner; see lib/load.ts for why
 // the loaded models go back in as models rather than being re-specced.
-export { fromDocument } from './lib/load.js';
-export { registerNodeType, unregisterNodeType, registeredNodeTypes, getNodeType, hasNodeType, renderFromTemplate, } from './lib/node-type-registry.js';
+export { fromDocument } from './lib/load';
+export { registerNodeType, unregisterNodeType, registeredNodeTypes, getNodeType, hasNodeType, renderFromTemplate, } from './lib/node-type-registry';
 export { renderToStaticSVG, LIGHT_THEME, DARK_THEME } from '@grafloria/renderer';
 // React Flow-parity helper surface (getIntersectingNodes & friends) — an embed
 // gets the same convenience wrapper the frameworks get, from the same import.
@@ -215,10 +215,10 @@ export { erDiagram, erRowCenterY, ER_ROW_H, ER_HEAD_H, umlDiagram, ensureDiagram
 updateEntity, updateClass, addColumnAt, removeColumnAt, renameColumnAt, bindCardEditing, matchColumns, rowIndexFromY, 
 // Live join guidance (query-builder): score every other table's columns
 // against a connection drag's source column and tint the kit rows by fit.
-scoreMatch, matchTier, assignTiers, singularize, bindJoinGuidance, ensureJoinGuidanceStyles, JOIN_GUIDANCE_STYLE_ID, } from './lib/diagram-kit/index.js';
+scoreMatch, matchTier, assignTiers, singularize, bindJoinGuidance, ensureJoinGuidanceStyles, JOIN_GUIDANCE_STYLE_ID, } from './lib/diagram-kit';
 // Typed façade handles (domain-API decision, Option B): the OO surface —
 // CardHandle → ErTable/UmlClass, ErField — over the data-first kit.
-export { erTable, umlClass, erTables, umlClasses, CardHandle, ErTable, ErField, ErColumnList, UmlClass, UmlMemberList, } from './lib/diagram-kit/index.js';
+export { erTable, umlClass, erTables, umlClasses, CardHandle, ErTable, ErField, ErColumnList, UmlClass, UmlMemberList, } from './lib/diagram-kit';
 // ===========================================================================
 // THE DASHBOARD KIT — Phase 2 of the dashboard-grid plan.
 //
@@ -236,10 +236,10 @@ dashboard,
 // …and the built-in renderers behind `kind`, so a dashboard is useful with
 // no renderWidget at all. Composable: call defaultWidgetRenderer first, then
 // decorate the host.
-defaultWidgetRenderer, renderKpiWidget, renderLineWidget, renderBarWidget, renderDonutWidget, renderFunnelWidget, renderTableWidget, BUILT_IN_WIDGET_KINDS, } from './lib/dashboard-kit/index.js';
+defaultWidgetRenderer, renderKpiWidget, renderLineWidget, renderBarWidget, renderDonutWidget, renderFunnelWidget, renderTableWidget, BUILT_IN_WIDGET_KINDS, } from './lib/dashboard-kit';
 // The stencil kit — a Visio-style palette that drags shape masters onto the
 // canvas (T6/T7). Pairs with listStencils()/registerStencils() above.
-export { bindStencilPalette, bindShapeDataPanel, ensureStencilKitStyles } from './lib/stencil-kit/index.js';
+export { bindStencilPalette, bindShapeDataPanel, ensureStencilKitStyles } from './lib/stencil-kit';
 /* ==========================================================================
  * PHASE 0 — THE INVERSION.
  *

package/src/lib/dashboard-kit/dashboard.d.ts

@@ -43,9 +43,9 @@
  * round-trips with no extra work — same as every other kit.
  */
 import { GroupModel, NodeModel, type GridColumnLayout } from '@grafloria/engine';
-import { type DashboardGridHandle, type DashboardGridOptions, type DashboardResponsiveOptions } from './grid-binder.js';
-import type { DragHandleOption } from './grid-binder.js';
-import type { SplitNode } from './split-layout.js';
+import { type DashboardGridHandle, type DashboardGridOptions, type DashboardResponsiveOptions } from './grid-binder';
+import type { DragHandleOption } from './grid-binder';
+import type { SplitNode } from './split-layout';
 /** A widget, declared as data. */
 export interface DashboardWidgetSpec {
     id: string;
@@ -268,6 +268,12 @@ export interface DashboardHandle {
     readonly activeView: string;
     /** A widget handle by id (undefined when unknown). */
     widget(id: string): WidgetHandle | undefined;
+    /**
+     * SELECT a widget and move keyboard focus to it — what a press on the widget
+     * does. The selected widget shows its painted grip (`dragHandle: { grip }`)
+     * and a quiet ring; a void click clears. False when the id is unknown.
+     */
+    focusWidget(id: string): boolean;
     /** Every widget handle of a view (default: the active one). */
     widgetsOf(viewId?: string): WidgetHandle[];
     /**

package/src/lib/dashboard-kit/dashboard.js

@@ -44,11 +44,11 @@
  */
 import { __awaiter } from "tslib";
 import { BatchCommand, BringNodeToFrontCommand, Command, GroupModel, NodeModel, RemoveFromGroupCommand, RemoveGroupCommand, RemoveNodeCommand, SendNodeToBackCommand, } from '@grafloria/engine';
-import { bindDashboardGrid, } from './grid-binder.js';
-import { bindDashboardSplit, SPLIT_TREE_KEY } from './split-binder.js';
-import { gridItemFromCell } from './grid-mapping.js';
-import { ensureDashboardKitStyles } from './styles.js';
-import { defaultWidgetRenderer } from './widgets.js';
+import { bindDashboardGrid, } from './grid-binder';
+import { bindDashboardSplit, SPLIT_TREE_KEY } from './split-binder';
+import { gridItemFromCell } from './grid-mapping';
+import { ensureDashboardKitStyles } from './styles';
+import { defaultWidgetRenderer } from './widgets';
 /**
  * Add a widget node AND its board membership as ONE undoable step.
  *
@@ -504,6 +504,11 @@ export function createDashboardHandle(ctx) {
         widget(id) {
             return makeWidgetHandle(id);
         },
+        focusWidget(id) {
+            var _a, _b;
+            const b = binders.get((_a = viewOfWidget.get(id)) !== null && _a !== void 0 ? _a : '');
+            return (_b = b === null || b === void 0 ? void 0 : b.focusWidget(id)) !== null && _b !== void 0 ? _b : false;
+        },
         widgetsOf(viewId) {
             var _a;
             const v = views.find((x) => x.id === (viewId !== null && viewId !== void 0 ? viewId : ctx.active));

package/src/lib/dashboard-kit/grid-binder.d.ts

@@ -50,7 +50,7 @@
  * second `bindDashboardGrid` on the section for a nested pack grid.
  */
 import { Command, type DiagramModel, type GridColumnLayout, type GroupModel, type NodeModel } from '@grafloria/engine';
-import { type CellRect, type WorldRect } from './grid-mapping.js';
+import { type CellRect, type WorldRect } from './grid-mapping';
 /** The slice of a DiagramInstance the binder needs (structural, test-friendly). */
 export interface DashboardGridApi {
     getModel(): DiagramModel;

package/src/lib/dashboard-kit/grid-binder.js

@@ -52,8 +52,8 @@
 import { __awaiter } from "tslib";
 import { AddToGroupCommand, BatchCommand, Command, GridPackEngine, RemoveFromGroupCommand, } from '@grafloria/engine';
 import { LiveRegionController, registerTool } from '@grafloria/renderer';
-import { buildCommitCommands, cellFromGridItem, cellToRect, columnUnitFor, gridItemFromCell, pointToCell, rowHeightFor, sizeToSpan, } from './grid-mapping.js';
-import { ensureDashboardKitStyles } from './styles.js';
+import { buildCommitCommands, cellFromGridItem, cellToRect, columnUnitFor, gridItemFromCell, pointToCell, rowHeightFor, sizeToSpan, } from './grid-mapping';
+import { ensureDashboardKitStyles } from './styles';
 /** The class of the painted grip element (a child of the node host). */
 export const GRIP_CLASS = 'axdb-grip';
 /** The container class that turns the caption strip's grip dots on. */
@@ -609,6 +609,20 @@ export function bindDashboardGrid(api, group, options = {}) {
      * and the ROVING TABINDEX — exactly one member per board is a tab stop.
      * Runs with the handles, so a repainted host gets it back too.
      */
+    /**
+     * THE SELECTED WIDGET — the one a press or keyboard focus last landed on.
+     * Stamped on its host as `axdb-selected`; that is what shows the painted
+     * grip (the DevExpress designer shows an item's bar on the selected item
+     * only). A press on a member selects it even when it starts no gesture; a
+     * void click clears it. Distinct from the roving tab stop, which must stay.
+     */
+    let selectedId;
+    const selectWidget = (id) => {
+        if (id === selectedId)
+            return;
+        selectedId = id;
+        syncA11y();
+    };
     const syncA11y = (only) => {
         var _a, _b;
         if (disposed)
@@ -616,6 +630,8 @@ export function bindDashboardGrid(api, group, options = {}) {
         const members = [...((_a = group.members) !== null && _a !== void 0 ? _a : [])].filter((id) => !!diagram.getNode(id));
         if (focusedId && !members.includes(focusedId))
             focusedId = undefined;
+        if (selectedId && !members.includes(selectedId))
+            selectedId = undefined;
         const stop = focusedId !== null && focusedId !== void 0 ? focusedId : members[0];
         for (const id of members) {
             if (only && !only.has(id))
@@ -634,6 +650,7 @@ export function bindDashboardGrid(api, group, options = {}) {
             host.setAttribute('aria-roledescription', 'dashboard widget');
             host.setAttribute('aria-label', bits.join(', '));
             host.setAttribute('tabindex', id === stop ? '0' : '-1');
+            host.classList.toggle('axdb-selected', id === selectedId);
         }
     };
     /**
@@ -1688,11 +1705,15 @@ export function bindDashboardGrid(api, group, options = {}) {
                 // The board's own empty area: a void click. Nothing to drag, and the
                 // selection clears exactly as a click outside any board would.
                 (_f = (_e = diagram).clearSelection) === null || _f === void 0 ? void 0 : _f.call(_e);
+                selectWidget(undefined);
                 api.render();
                 return;
             }
             const node = diagram.getNode(onGrip ? gripId : hit.node.id);
-            if (!node || ((_g = node.state) === null || _g === void 0 ? void 0 : _g.locked) === true)
+            if (!node)
+                return;
+            selectWidget(node.id); // a press selects, whether or not it starts a gesture
+            if (((_g = node.state) === null || _g === void 0 ? void 0 : _g.locked) === true)
                 return; // pinned: refuse; click still focuses
             if (isStatic)
                 return; // a static board: claimed and deadened, click still focuses
@@ -1833,8 +1854,9 @@ export function bindDashboardGrid(api, group, options = {}) {
         const hit = memberHostAt(e.target);
         if (!hit || disposed)
             return;
-        if (focusedId !== hit.id) {
+        if (focusedId !== hit.id || selectedId !== hit.id) {
             focusedId = hit.id;
+            selectedId = hit.id;
             syncA11y();
         }
     };
@@ -2186,6 +2208,7 @@ export function bindDashboardGrid(api, group, options = {}) {
             if (disposed || !((_a = group.members) !== null && _a !== void 0 ? _a : new Set()).has(id) || !diagram.getNode(id))
                 return false;
             focusedId = id;
+            selectedId = id;
             syncA11y();
             (_c = (_b = hostOf(id)) === null || _b === void 0 ? void 0 : _b.focus) === null || _c === void 0 ? void 0 : _c.call(_b, { preventScroll: true });
             return true;

package/src/lib/dashboard-kit/index.d.ts

@@ -1,7 +1,7 @@
-export { bindDashboardGrid, type DashboardGridApi, type DashboardGridOptions, type DashboardGridHandle, type DashboardResponsiveOptions, type DragHandleOption, type DragGripOptions, normalizeDragHandle, } from './grid-binder.js';
-export { bindDashboardSplit, SetSplitTreeCommand, SPLIT_TREE_KEY, type DashboardSplitOptions, type DashboardSplitHandle, } from './split-binder.js';
-export { projectSplit, dividersOf, addSplitLeaf, removeSplitLeaf, insertSplitLeaf, moveSplitDivider, splitFromCells, cellsFromSplit, splitLeaves, type SplitNode, type SplitGroup, type SplitLeaf, type SplitDir, type SplitSide, type SplitDivider, } from './split-layout.js';
-export { rowHeightFor, boardHeightFor, columnUnitFor, cellToRect, pointToCell, sizeToSpan, spanWidthPx, gridItemFromCell, cellFromGridItem, buildCommitCommands, type CellRect, type WorldRect, type DashboardGridGeometry, type TileDelta, } from './grid-mapping.js';
-export { ensureDashboardKitStyles, DASHBOARD_KIT_STYLE_ID } from './styles.js';
-export { dashboard, type DashboardOptions, type DashboardSpec, type DashboardSnapshot, type DashboardHandle, type DashboardViewSpec, type DashboardWidgetSpec, type WidgetHandle, } from './dashboard.js';
-export { defaultWidgetRenderer, renderKpiWidget, renderLineWidget, renderBarWidget, renderDonutWidget, renderFunnelWidget, renderTableWidget, BUILT_IN_WIDGET_KINDS, type WidgetRenderer, type KpiWidgetData, type LineWidgetData, type LineSeries, type BarWidgetData, type DonutWidgetData, type FunnelWidgetData, type TableWidgetData, } from './widgets.js';
+export { bindDashboardGrid, type DashboardGridApi, type DashboardGridOptions, type DashboardGridHandle, type DashboardResponsiveOptions, type DragHandleOption, type DragGripOptions, normalizeDragHandle, } from './grid-binder';
+export { bindDashboardSplit, SetSplitTreeCommand, SPLIT_TREE_KEY, type DashboardSplitOptions, type DashboardSplitHandle, } from './split-binder';
+export { projectSplit, dividersOf, addSplitLeaf, removeSplitLeaf, insertSplitLeaf, moveSplitDivider, splitFromCells, cellsFromSplit, splitLeaves, type SplitNode, type SplitGroup, type SplitLeaf, type SplitDir, type SplitSide, type SplitDivider, } from './split-layout';
+export { rowHeightFor, boardHeightFor, columnUnitFor, cellToRect, pointToCell, sizeToSpan, spanWidthPx, gridItemFromCell, cellFromGridItem, buildCommitCommands, type CellRect, type WorldRect, type DashboardGridGeometry, type TileDelta, } from './grid-mapping';
+export { ensureDashboardKitStyles, DASHBOARD_KIT_STYLE_ID } from './styles';
+export { dashboard, type DashboardOptions, type DashboardSpec, type DashboardSnapshot, type DashboardHandle, type DashboardViewSpec, type DashboardWidgetSpec, type WidgetHandle, } from './dashboard';
+export { defaultWidgetRenderer, renderKpiWidget, renderLineWidget, renderBarWidget, renderDonutWidget, renderFunnelWidget, renderTableWidget, BUILT_IN_WIDGET_KINDS, type WidgetRenderer, type KpiWidgetData, type LineWidgetData, type LineSeries, type BarWidgetData, type DonutWidgetData, type FunnelWidgetData, type TableWidgetData, } from './widgets';

package/src/lib/dashboard-kit/index.js

@@ -1,10 +1,10 @@
-export { bindDashboardGrid, normalizeDragHandle, } from './grid-binder.js';
-export { bindDashboardSplit, SetSplitTreeCommand, SPLIT_TREE_KEY, } from './split-binder.js';
-export { projectSplit, dividersOf, addSplitLeaf, removeSplitLeaf, insertSplitLeaf, moveSplitDivider, splitFromCells, cellsFromSplit, splitLeaves, } from './split-layout.js';
-export { rowHeightFor, boardHeightFor, columnUnitFor, cellToRect, pointToCell, sizeToSpan, spanWidthPx, gridItemFromCell, cellFromGridItem, buildCommitCommands, } from './grid-mapping.js';
-export { ensureDashboardKitStyles, DASHBOARD_KIT_STYLE_ID } from './styles.js';
+export { bindDashboardGrid, normalizeDragHandle, } from './grid-binder';
+export { bindDashboardSplit, SetSplitTreeCommand, SPLIT_TREE_KEY, } from './split-binder';
+export { projectSplit, dividersOf, addSplitLeaf, removeSplitLeaf, insertSplitLeaf, moveSplitDivider, splitFromCells, cellsFromSplit, splitLeaves, } from './split-layout';
+export { rowHeightFor, boardHeightFor, columnUnitFor, cellToRect, pointToCell, sizeToSpan, spanWidthPx, gridItemFromCell, cellFromGridItem, buildCommitCommands, } from './grid-mapping';
+export { ensureDashboardKitStyles, DASHBOARD_KIT_STYLE_ID } from './styles';
 // The DATA-FIRST authoring API (the erDiagram/umlDiagram equivalent).
-export { dashboard, } from './dashboard.js';
+export { dashboard, } from './dashboard';
 // The built-in renderers behind `kind` — dashboard()'s default renderWidget.
-export { defaultWidgetRenderer, renderKpiWidget, renderLineWidget, renderBarWidget, renderDonutWidget, renderFunnelWidget, renderTableWidget, BUILT_IN_WIDGET_KINDS, } from './widgets.js';
+export { defaultWidgetRenderer, renderKpiWidget, renderLineWidget, renderBarWidget, renderDonutWidget, renderFunnelWidget, renderTableWidget, BUILT_IN_WIDGET_KINDS, } from './widgets';
 //# sourceMappingURL=index.js.map

package/src/lib/dashboard-kit/split-binder.d.ts

@@ -23,8 +23,8 @@
  * the authored size.
  */
 import { Command, type GroupModel } from '@grafloria/engine';
-import type { DashboardGridApi, DashboardGridHandle, DashboardGridOptions } from './grid-binder.js';
-import { type SplitNode } from './split-layout.js';
+import type { DashboardGridApi, DashboardGridHandle, DashboardGridOptions } from './grid-binder';
+import { type SplitNode } from './split-layout';
 /** Group metadata key the tree persists under. */
 export declare const SPLIT_TREE_KEY = "dashboardTree";
 export interface DashboardSplitOptions extends Pick<DashboardGridOptions, 'columns' | 'gap' | 'padding' | 'rtl' | 'fluid' | 'static' | 'dragHandle' | 'designHeight' | 'baseRowHeight' | 'dragOut' | 'removeZone' | 'onRemoveRequest' | 'onDropIn' | 'onGesture'> {

package/src/lib/dashboard-kit/split-binder.js

@@ -25,10 +25,10 @@
 import { __awaiter } from "tslib";
 import { Command } from '@grafloria/engine';
 import { LiveRegionController, registerTool } from '@grafloria/renderer';
-import { dragHandleSelector, gripHostOf, gripOf, normalizeDragHandle, pressOnDragHandle, syncGrip, DRAG_HANDLE_CLASS } from './grid-binder.js';
-import { cellFromGridItem } from './grid-mapping.js';
-import { addSplitLeaf, cellsFromSplit, cloneSplit, dividersOf, groupRectsOf, insertSplitLeaf, moveSplitDivider, normalizeSplit, pathToLeaf, projectSplit, removeSplitLeaf, splitFromCells, splitLeaves, } from './split-layout.js';
-import { ensureDashboardKitStyles } from './styles.js';
+import { dragHandleSelector, gripHostOf, gripOf, normalizeDragHandle, pressOnDragHandle, syncGrip, DRAG_HANDLE_CLASS } from './grid-binder';
+import { cellFromGridItem } from './grid-mapping';
+import { addSplitLeaf, cellsFromSplit, cloneSplit, dividersOf, groupRectsOf, insertSplitLeaf, moveSplitDivider, normalizeSplit, pathToLeaf, projectSplit, removeSplitLeaf, splitFromCells, splitLeaves, } from './split-layout';
+import { ensureDashboardKitStyles } from './styles';
 /** Group metadata key the tree persists under. */
 export const SPLIT_TREE_KEY = 'dashboardTree';
 /**
@@ -369,11 +369,21 @@ export function bindDashboardSplit(api, group, options = {}) {
             return '';
         return `${Math.round((r.width / f.width) * 100)} percent wide, ${Math.round((r.height / f.height) * 100)} percent tall`;
     };
+    /** The selected widget (see grid-binder): stamped `axdb-selected`, shows the grip. */
+    let selectedId;
+    const selectWidget = (id) => {
+        if (id === selectedId)
+            return;
+        selectedId = id;
+        syncA11y();
+    };
     const syncA11y = () => {
         var _a, _b, _c, _d;
         if (disposed)
             return;
         const order = splitLeaves(paintedTree()).filter((id) => !!diagram.getNode(id));
+        if (selectedId && !order.includes(selectedId))
+            selectedId = undefined;
         // No corner handles on a split board: size comes from the dividers. A host
         // that carried the grid's handle (a board switched live) sheds it here.
         for (const id of order)
@@ -401,6 +411,7 @@ export function bindDashboardSplit(api, group, options = {}) {
             host.setAttribute('aria-roledescription', 'dashboard widget');
             host.setAttribute('aria-label', bits.filter(Boolean).join(', '));
             host.setAttribute('tabindex', id === stop ? '0' : '-1');
+            host.classList.toggle('axdb-selected', id === selectedId);
         });
     };
     // -- commit -----------------------------------------------------------------
@@ -637,11 +648,15 @@ export function bindDashboardSplit(api, group, options = {}) {
             const onGrip = !!gripId && ((_f = group.members) !== null && _f !== void 0 ? _f : new Set()).has(gripId);
             if (!hit.node && !onGrip) {
                 (_h = (_g = diagram).clearSelection) === null || _h === void 0 ? void 0 : _h.call(_g);
+                selectWidget(undefined);
                 api.render();
                 return;
             }
             const node = diagram.getNode(onGrip ? gripId : hit.node.id);
-            if (!node || ((_j = node.state) === null || _j === void 0 ? void 0 : _j.locked) === true || isStatic)
+            if (!node)
+                return;
+            selectWidget(node.id); // a press selects, whether or not it starts a gesture
+            if (((_j = node.state) === null || _j === void 0 ? void 0 : _j.locked) === true || isStatic)
                 return;
             if (((_k = node.getMetadata) === null || _k === void 0 ? void 0 : _k.call(node, 'widgetMovable')) === false)
                 return;
@@ -779,8 +794,9 @@ export function bindDashboardSplit(api, group, options = {}) {
         const hit = memberHostAt(e.target);
         if (!hit || disposed)
             return;
-        if (focusedId !== hit.id) {
+        if (focusedId !== hit.id || selectedId !== hit.id) {
             focusedId = hit.id;
+            selectedId = hit.id;
             syncA11y();
         }
     };
@@ -978,6 +994,7 @@ export function bindDashboardSplit(api, group, options = {}) {
             if (!((_a = group.members) !== null && _a !== void 0 ? _a : new Set()).has(id) || !diagram.getNode(id))
                 return false;
             focusedId = id;
+            selectedId = id;
             syncA11y();
             (_c = (_b = hostOf(id)) === null || _b === void 0 ? void 0 : _b.focus) === null || _c === void 0 ? void 0 : _c.call(_b, { preventScroll: true });
             return true;

package/src/lib/dashboard-kit/split-layout.d.ts

@@ -16,7 +16,7 @@
  * tree as plain JSON (`dashboardTree` on the board's group). One tree write
  * per gesture is the whole undo story.
  */
-import type { CellRect, WorldRect } from './grid-mapping.js';
+import type { CellRect, WorldRect } from './grid-mapping';
 export type SplitDir = 'row' | 'column';
 export interface SplitLeaf {
     id: string;

package/src/lib/dashboard-kit/styles.js

@@ -192,21 +192,50 @@ const CSS = `
 .grafloria-node-host > .axdb-grip {
   position: absolute; z-index: 4; box-sizing: border-box; width: 24px; height: 12px;
   border: 1px solid var(--axdb-line, #e7eaf1); border-radius: 3px; background: var(--axdb-card, #fff);
-  color: var(--axdb-muted, #5a6478); cursor: grab; opacity: .8;
+  color: var(--axdb-muted, #5a6478); cursor: grab;
+  /* Shown on the SELECTED widget only (the DevExpress designer shows an item's
+     bar on the selected item): a press or keyboard focus selects, a void
+     click clears. Hidden, it takes no pointer either. */
+  opacity: 0; pointer-events: none; transition: opacity .12s ease;
 }
+.grafloria-node-host.axdb-selected > .axdb-grip, .grafloria-node-host:focus-within > .axdb-grip { opacity: 1; pointer-events: auto; }
 .grafloria-node-host > .axdb-grip::before {
   content: ''; position: absolute; left: 5px; top: 2px; width: 12px; height: 6px;
   background: radial-gradient(circle, currentColor 1px, transparent 1.4px) 0 0 / 4px 3px;
 }
-.grafloria-node-host:hover > .axdb-grip, .grafloria-node-host > .axdb-grip:hover { opacity: 1; border-color: #3b52d9; color: #3b52d9; }
-.grafloria-node-host > .axdb-grip--inside { top: 5px; }
+.grafloria-node-host > .axdb-grip:hover { border-color: #3b52d9; color: #3b52d9; }
+/* The selected card says so, quietly. */
+.grafloria-node-host.axdb-selected > .axdb-widget { box-shadow: 0 0 0 1.5px rgba(59, 82, 217, .55), 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .05); }
+/* INSIDE: centred on the header's text line and flush with the card padding,
+   per size tier (padding 13/15, then 8/14, 4/12, 2/12). */
+.grafloria-node-host > .axdb-grip--inside { top: 14px; }
+.grafloria-node-host > .axdb-grip--inside.axdb-grip--left { left: 15px; }
+.grafloria-node-host > .axdb-grip--inside.axdb-grip--right { right: 15px; }
+.grafloria-node-host > .axdb-grip--inside.axdb-grip--center { top: 3px; }
+@container axdb-tile (max-height: 90px) {
+  .grafloria-node-host > .axdb-grip--inside { top: 9px; }
+  .grafloria-node-host > .axdb-grip--inside.axdb-grip--left { left: 14px; }
+  .grafloria-node-host > .axdb-grip--inside.axdb-grip--right { right: 14px; }
+  .grafloria-node-host > .axdb-grip--inside.axdb-grip--center { top: 2px; }
+}
+@container axdb-tile (max-height: 46px) {
+  .grafloria-node-host > .axdb-grip--inside { top: 5px; }
+  .grafloria-node-host > .axdb-grip--inside.axdb-grip--left { left: 12px; }
+  .grafloria-node-host > .axdb-grip--inside.axdb-grip--right { right: 12px; }
+  .grafloria-node-host > .axdb-grip--inside.axdb-grip--center { top: 1px; }
+}
+@container axdb-tile (max-height: 26px) {
+  .grafloria-node-host > .axdb-grip--inside { top: 2px; }
+}
+/* OUTSIDE: a tab on the card's top edge, its corners in line with the card's. */
 .grafloria-node-host > .axdb-grip--outside { top: -11px; height: 11px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; box-shadow: 0 -1px 2px rgba(16, 24, 40, .08); }
-.grafloria-node-host > .axdb-grip--left { left: 8px; }
-.grafloria-node-host > .axdb-grip--right { right: 8px; }
+.grafloria-node-host > .axdb-grip--outside.axdb-grip--left { left: 10px; }
+.grafloria-node-host > .axdb-grip--outside.axdb-grip--right { right: 10px; }
 .grafloria-node-host > .axdb-grip--center { left: 50%; transform: translateX(-50%); }
-.grafloria-node-host.axdb-gp-inside.axdb-gp-left .axdb-widget > .axdb-widget-h { padding-left: 24px; }
-.grafloria-node-host.axdb-gp-inside.axdb-gp-right .axdb-widget > .axdb-widget-h { padding-right: 24px; }
-.grafloria-node-host.axdb-gp-inside.axdb-gp-center .axdb-widget > .axdb-widget-h { padding-top: 10px; }
+/* The header makes room for an inside grip on its side; a centred one sits above it. */
+.grafloria-node-host.axdb-gp-inside.axdb-gp-left .axdb-widget > .axdb-widget-h { padding-left: 32px; }
+.grafloria-node-host.axdb-gp-inside.axdb-gp-right .axdb-widget > .axdb-widget-h { padding-right: 32px; }
+.grafloria-node-host.axdb-gp-inside.axdb-gp-center .axdb-widget > .axdb-widget-h { padding-top: 12px; }
 .axdb-widget-b { flex: 1; min-height: 0; position: relative; }
 .axdb-widget-b > svg { display: block; width: 100%; height: 100%; }
 .axdb-widget-b.axdb-scroll { overflow: auto; }

package/src/lib/dashboard-kit/widgets.d.ts

@@ -28,7 +28,7 @@
  * (that is exactly what demos/dashboard/dashboard-builder.html does for its
  * focus ring and pin marker).
  */
-import type { DashboardWidgetSpec } from './dashboard.js';
+import type { DashboardWidgetSpec } from './dashboard';
 /** The signature every renderer here (and `renderWidget`) satisfies. */
 export type WidgetRenderer = (widget: DashboardWidgetSpec, host: HTMLElement) => void;
 /** `kind: 'kpi'` — one headline number, an optional change, an optional trend. */

package/src/lib/dashboard-kit/widgets.js

@@ -28,7 +28,7 @@
  * (that is exactly what demos/dashboard/dashboard-builder.html does for its
  * focus ring and pin marker).
  */
-import { ensureDashboardKitStyles } from './styles.js';
+import { ensureDashboardKitStyles } from './styles';
 /** The kinds `defaultWidgetRenderer` knows; anything else gets the placeholder. */
 export const BUILT_IN_WIDGET_KINDS = ['kpi', 'line', 'bar', 'donut', 'funnel', 'table'];
 /**

package/src/lib/diagram-kit/card.d.ts

@@ -14,8 +14,8 @@
  * port-reconciliation code count those, and the affordance is neither a column
  * nor a member.
  */
-import type { ErColumn, ErEntitySpec } from './er.js';
-import type { UmlClassSpec } from './uml.js';
+import type { ErColumn, ErEntitySpec } from './er';
+import type { UmlClassSpec } from './uml';
 /** Row height / header height of the entity card — sizing is derived from these. */
 export declare const ER_ROW_H = 25;
 export declare const ER_HEAD_H = 28;

package/src/lib/diagram-kit/editing.js

@@ -26,7 +26,7 @@
  * row-selection handler and the binder's node/​waypoint double-click never also
  * fire for the same gesture.
  */
-import { updateEntity, updateClass, addColumnAt, removeColumnAt, renameColumnAt } from './update.js';
+import { updateEntity, updateClass, addColumnAt, removeColumnAt, renameColumnAt } from './update';
 const bindings = new WeakMap();
 const ROW_SELECTOR = '.axk-row, .axk-member';
 /** Resolve the node id + the clicked row's global index (among selectable rows). */

package/src/lib/diagram-kit/er.d.ts

@@ -1,4 +1,4 @@
-import { erRowCenterY, ER_ROW_H, ER_HEAD_H } from './card.js';
+import { erRowCenterY, ER_ROW_H, ER_HEAD_H } from './card';
 export { erRowCenterY, ER_ROW_H, ER_HEAD_H };
 export interface ErColumn {
     name: string;

package/src/lib/diagram-kit/er.js

@@ -20,12 +20,12 @@
  * render(spec, container);
  * ```
  */
-import { ensureDiagramKitStyles } from './styles.js';
-import { bindRowInteractions } from './rows.js';
-import { entityCardContent, entityAutoHeight, entityAutoWidth, erRowCenterY, ER_ROW_H, ER_HEAD_H, } from './card.js';
-import { bindCardEditing } from './editing.js';
+import { ensureDiagramKitStyles } from './styles';
+import { bindRowInteractions } from './rows';
+import { entityCardContent, entityAutoHeight, entityAutoWidth, erRowCenterY, ER_ROW_H, ER_HEAD_H, } from './card';
+import { bindCardEditing } from './editing';
 // Layout constants + the row-centre helper live in card.ts now (the ONE source
-// of truth shared with update.ts). Re-exported here so `import … from './er.js'`
+// of truth shared with update.ts). Re-exported here so `import … from './er'`
 // keeps working.
 export { erRowCenterY, ER_ROW_H, ER_HEAD_H };
 const CARDINALITY = {

package/src/lib/diagram-kit/handles.d.ts

@@ -20,10 +20,10 @@
  * where it is safe, never on the stored NodeModel (which the engine
  * reconstructs from data on undo/paste/collab; see the decision doc).
  */
-import type { ErColumn, ErEntitySpec } from './er.js';
-import type { UmlClassSpec } from './uml.js';
-import { updateEntity, updateClass } from './update.js';
-import type { RowRef } from './rows.js';
+import type { ErColumn, ErEntitySpec } from './er';
+import type { UmlClassSpec } from './uml';
+import { updateEntity, updateClass } from './update';
+import type { RowRef } from './rows';
 /** The slice of DiagramInstance the handles need (same shape update.ts uses). */
 export interface HandleApi {
     container: HTMLElement;

package/src/lib/diagram-kit/handles.js

@@ -1,5 +1,5 @@
 import { __awaiter } from "tslib";
-import { updateEntity, updateClass } from './update.js';
+import { updateEntity, updateClass } from './update';
 const deep = (v) => JSON.parse(JSON.stringify(v));
 // ---------------------------------------------------------------------------
 // Base

package/src/lib/diagram-kit/index.d.ts

@@ -1,10 +1,10 @@
-export { erDiagram, erRowCenterY, ER_ROW_H, ER_HEAD_H, type ErColumn, type ErEntitySpec, type ErRelationshipSpec, type ErCardinality, type ErSide, type ErDiagramOptions, } from './er.js';
-export { umlDiagram, type UmlClassSpec, type UmlRelationshipSpec, type UmlRelationKind, type UmlSide, type UmlDiagramOptions, } from './uml.js';
-export { ensureDiagramKitStyles, DIAGRAM_KIT_STYLE_ID } from './styles.js';
-export { bindRowInteractions, type RowRef, type RowInteractionsHandle } from './rows.js';
-export { updateEntity, updateClass, addColumnAt, removeColumnAt, renameColumnAt, type ErEntityDelta, type UmlClassDelta, } from './update.js';
-export { bindCardEditing, type CardEditingHandle } from './editing.js';
-export { matchColumns, rowIndexFromY } from './card.js';
-export { entityCardContent, entityAutoHeight, classCardContent, classAutoHeight } from './card.js';
-export { scoreMatch, matchTier, assignTiers, singularize, bindJoinGuidance, ensureJoinGuidanceStyles, JOIN_GUIDANCE_STYLE_ID, type JoinColumn, type JoinEnd, type MatchTier, type JoinGuidanceApi, type JoinGuidanceOptions, type JoinGuidanceHandle, } from './join-guidance.js';
-export { erTable, umlClass, erTables, umlClasses, CardHandle, ErTable, ErField, ErColumnList, UmlClass, UmlMemberList, type HandleApi, } from './handles.js';
+export { erDiagram, erRowCenterY, ER_ROW_H, ER_HEAD_H, type ErColumn, type ErEntitySpec, type ErRelationshipSpec, type ErCardinality, type ErSide, type ErDiagramOptions, } from './er';
+export { umlDiagram, type UmlClassSpec, type UmlRelationshipSpec, type UmlRelationKind, type UmlSide, type UmlDiagramOptions, } from './uml';
+export { ensureDiagramKitStyles, DIAGRAM_KIT_STYLE_ID } from './styles';
+export { bindRowInteractions, type RowRef, type RowInteractionsHandle } from './rows';
+export { updateEntity, updateClass, addColumnAt, removeColumnAt, renameColumnAt, type ErEntityDelta, type UmlClassDelta, } from './update';
+export { bindCardEditing, type CardEditingHandle } from './editing';
+export { matchColumns, rowIndexFromY } from './card';
+export { entityCardContent, entityAutoHeight, classCardContent, classAutoHeight } from './card';
+export { scoreMatch, matchTier, assignTiers, singularize, bindJoinGuidance, ensureJoinGuidanceStyles, JOIN_GUIDANCE_STYLE_ID, type JoinColumn, type JoinEnd, type MatchTier, type JoinGuidanceApi, type JoinGuidanceOptions, type JoinGuidanceHandle, } from './join-guidance';
+export { erTable, umlClass, erTables, umlClasses, CardHandle, ErTable, ErField, ErColumnList, UmlClass, UmlMemberList, type HandleApi, } from './handles';

package/src/lib/diagram-kit/index.js

@@ -1,15 +1,15 @@
-export { erDiagram, erRowCenterY, ER_ROW_H, ER_HEAD_H, } from './er.js';
-export { umlDiagram, } from './uml.js';
-export { ensureDiagramKitStyles, DIAGRAM_KIT_STYLE_ID } from './styles.js';
-export { bindRowInteractions } from './rows.js';
-export { updateEntity, updateClass, addColumnAt, removeColumnAt, renameColumnAt, } from './update.js';
-export { bindCardEditing } from './editing.js';
-export { matchColumns, rowIndexFromY } from './card.js';
+export { erDiagram, erRowCenterY, ER_ROW_H, ER_HEAD_H, } from './er';
+export { umlDiagram, } from './uml';
+export { ensureDiagramKitStyles, DIAGRAM_KIT_STYLE_ID } from './styles';
+export { bindRowInteractions } from './rows';
+export { updateEntity, updateClass, addColumnAt, removeColumnAt, renameColumnAt, } from './update';
+export { bindCardEditing } from './editing';
+export { matchColumns, rowIndexFromY } from './card';
 // The card CONTENT builders — shared with the stencil palette so a dropped
 // "Entity"/"Class" is the identical card erDiagram()/umlDiagram() produce.
-export { entityCardContent, entityAutoHeight, classCardContent, classAutoHeight } from './card.js';
+export { entityCardContent, entityAutoHeight, classCardContent, classAutoHeight } from './card';
 // Live join guidance — score every other table's columns against a connection
 // drag's source column and tint the kit rows by fit (the query-builder story).
-export { scoreMatch, matchTier, assignTiers, singularize, bindJoinGuidance, ensureJoinGuidanceStyles, JOIN_GUIDANCE_STYLE_ID, } from './join-guidance.js';
-export { erTable, umlClass, erTables, umlClasses, CardHandle, ErTable, ErField, ErColumnList, UmlClass, UmlMemberList, } from './handles.js';
+export { scoreMatch, matchTier, assignTiers, singularize, bindJoinGuidance, ensureJoinGuidanceStyles, JOIN_GUIDANCE_STYLE_ID, } from './join-guidance';
+export { erTable, umlClass, erTables, umlClasses, CardHandle, ErTable, ErField, ErColumnList, UmlClass, UmlMemberList, } from './handles';
 //# sourceMappingURL=index.js.map

package/src/lib/diagram-kit/uml.js

@@ -22,10 +22,10 @@
  * spec.finalize(api); // attaches multiplicity chips (needs the live model)
  * ```
  */
-import { ensureDiagramKitStyles } from './styles.js';
-import { bindRowInteractions } from './rows.js';
-import { classCardContent, classAutoHeight, classAutoWidth } from './card.js';
-import { bindCardEditing } from './editing.js';
+import { ensureDiagramKitStyles } from './styles';
+import { bindRowInteractions } from './rows';
+import { classCardContent, classAutoHeight, classAutoWidth } from './card';
+import { bindCardEditing } from './editing';
 const STROKE = '#475569';
 const DASH = '6,4';
 /**

package/src/lib/diagram-kit/update.d.ts

@@ -27,7 +27,7 @@
  * intended extension point — every basic command does it). When no engine is
  * present the edit still applies, just non-undoably.
  */
-import type { ErColumn } from './er.js';
+import type { ErColumn } from './er';
 /** What an ER table edit can change. Omitted fields are left as they were. */
 export interface ErEntityDelta {
     name?: string;

package/src/lib/diagram-kit/update.js

@@ -29,7 +29,7 @@
  */
 import { __awaiter } from "tslib";
 import { Command, PortModel, LinkModel } from '@grafloria/engine';
-import { entityCardContent, entityAutoHeight, entityAutoWidth, classCardContent, classAutoHeight, classAutoWidth, erRowCenterY, rowIndexFromY, matchColumns, } from './card.js';
+import { entityCardContent, entityAutoHeight, entityAutoWidth, classCardContent, classAutoHeight, classAutoWidth, erRowCenterY, rowIndexFromY, matchColumns, } from './card';
 /**
  * The single undoable edit. Captures the card's whole before-state on first
  * execute and restores it on undo, so an edit — however many rows and edges it

package/src/lib/grafloria-flow-element.js

@@ -1,5 +1,5 @@
 import { createDiagram, DARK_THEME, LIGHT_THEME } from '@grafloria/renderer';
-import { getNodeType, renderFromTemplate } from './node-type-registry.js';
+import { getNodeType, renderFromTemplate } from './node-type-registry';
 /**
  * `<grafloria-flow>` — the universal embed.
  *

package/src/lib/grafloria.d.ts

@@ -1,8 +1,8 @@
 import type { CreateDiagramOptions, DiagramInstance, EdgeSpec, NodeSpec, StaticRenderOptions, StaticRenderResult } from '@grafloria/renderer';
-import { defineGrafloriaFlow } from './grafloria-flow-element.js';
-import type { DashboardSpec } from './dashboard-kit/index.js';
-import { registerNodeType, registeredNodeTypes } from './node-type-registry.js';
-import type { NodeTypeRenderer } from './node-type-registry.js';
+import { defineGrafloriaFlow } from './grafloria-flow-element';
+import type { DashboardSpec } from './dashboard-kit';
+import { registerNodeType, registeredNodeTypes } from './node-type-registry';
+import type { NodeTypeRenderer } from './node-type-registry';
 /**
  * `Grafloria` — the Mermaid-shaped top-level API.
  *

package/src/lib/grafloria.js

@@ -1,6 +1,6 @@
 import { createDiagram, renderToStaticSVG } from '@grafloria/renderer';
-import { defineGrafloriaFlow } from './grafloria-flow-element.js';
-import { registerNodeType, registeredNodeTypes, getNodeType } from './node-type-registry.js';
+import { defineGrafloriaFlow } from './grafloria-flow-element';
+import { registerNodeType, registeredNodeTypes, getNodeType } from './node-type-registry';
 /**
  * Mount `spec` into `target` and return the live instance.
  *

package/src/lib/load.d.ts

@@ -1,7 +1,7 @@
 import type { DiagramDocumentEnvelope, DiagramModel, LinkModel, NodeModel, SerializedDiagramData } from '@grafloria/engine';
-import { type DashboardGridHandle } from './dashboard-kit/grid-binder.js';
-import { type WidgetRenderer } from './dashboard-kit/widgets.js';
-import { type DashboardHandle } from './dashboard-kit/dashboard.js';
+import { type DashboardGridHandle } from './dashboard-kit/grid-binder';
+import { type WidgetRenderer } from './dashboard-kit/widgets';
+import { type DashboardHandle } from './dashboard-kit/dashboard';
 /** Anything `DiagramSerializer.deserialize()` accepts, or the JSON string of it. */
 export type SavedDiagram = SerializedDiagramData | DiagramDocumentEnvelope | Record<string, unknown> | string;
 export interface FromDocumentOptions {

package/src/lib/load.js

@@ -62,17 +62,17 @@
  * itself wrote keeps the registry the general seam it is meant to be.
  */
 import { DiagramSerializer } from '@grafloria/engine';
-import { getNodeType } from './node-type-registry.js';
-import { bindRowInteractions } from './diagram-kit/rows.js';
-import { bindCardEditing } from './diagram-kit/editing.js';
-import { ensureDiagramKitStyles } from './diagram-kit/styles.js';
-import { bindDashboardGrid } from './dashboard-kit/grid-binder.js';
-import { bindDashboardSplit, SPLIT_TREE_KEY } from './dashboard-kit/split-binder.js';
-import { gridItemFromCell } from './dashboard-kit/grid-mapping.js';
-import { cellFromGridItem } from './dashboard-kit/grid-mapping.js';
-import { ensureDashboardKitStyles } from './dashboard-kit/styles.js';
-import { defaultWidgetRenderer } from './dashboard-kit/widgets.js';
-import { createDashboardHandle, } from './dashboard-kit/dashboard.js';
+import { getNodeType } from './node-type-registry';
+import { bindRowInteractions } from './diagram-kit/rows';
+import { bindCardEditing } from './diagram-kit/editing';
+import { ensureDiagramKitStyles } from './diagram-kit/styles';
+import { bindDashboardGrid } from './dashboard-kit/grid-binder';
+import { bindDashboardSplit, SPLIT_TREE_KEY } from './dashboard-kit/split-binder';
+import { gridItemFromCell } from './dashboard-kit/grid-mapping';
+import { cellFromGridItem } from './dashboard-kit/grid-mapping';
+import { ensureDashboardKitStyles } from './dashboard-kit/styles';
+import { defaultWidgetRenderer } from './dashboard-kit/widgets';
+import { createDashboardHandle, } from './dashboard-kit/dashboard';
 /** True when the node is an ER entity card or a UML class card. */
 function isDiagramKitCard(node) {
     return node.getMetadata('kitEntity') !== undefined || node.getMetadata('kitClass') !== undefined;

package/src/lib/stencil-kit/card-builders.js

@@ -13,8 +13,8 @@
  * a canvas that was never built by a kit.
  */
 import { NodeModel } from '@grafloria/engine';
-import { entityCardContent, entityAutoHeight, classCardContent, classAutoHeight, bindRowInteractions, bindCardEditing, ensureDiagramKitStyles, } from '../diagram-kit/index.js';
-import { registerStencilBuilder } from './builders.js';
+import { entityCardContent, entityAutoHeight, classCardContent, classAutoHeight, bindRowInteractions, bindCardEditing, ensureDiagramKitStyles, } from '../diagram-kit';
+import { registerStencilBuilder } from './builders';
 /** Cards are transparent: the HTML body IS the card, the shape must not paint. */
 const CARD_SHAPE = { type: 'rect', fill: 'none', stroke: 'none' };
 const CARD_STYLE = { fill: 'transparent', stroke: 'transparent', strokeWidth: 0 };

package/src/lib/stencil-kit/index.d.ts

@@ -1,7 +1,7 @@
-export { bindStencilPalette } from './palette.js';
-export type { StencilPaletteApi, StencilPaletteOptions, StencilPaletteHandle, } from './palette.js';
-export { bindShapeDataPanel } from './shape-data.js';
-export type { ShapeDataPanelApi, ShapeDataPanelOptions, ShapeDataPanelHandle } from './shape-data.js';
-export { ensureStencilKitStyles } from './styles.js';
-export { registerStencilBuilder, getStencilBuilder, unregisterStencilBuilder, registeredStencilBuilders, } from './builders.js';
-export type { StencilBuilder, StencilBuildContext } from './builders.js';
+export { bindStencilPalette } from './palette';
+export type { StencilPaletteApi, StencilPaletteOptions, StencilPaletteHandle, } from './palette';
+export { bindShapeDataPanel } from './shape-data';
+export type { ShapeDataPanelApi, ShapeDataPanelOptions, ShapeDataPanelHandle } from './shape-data';
+export { ensureStencilKitStyles } from './styles';
+export { registerStencilBuilder, getStencilBuilder, unregisterStencilBuilder, registeredStencilBuilders, } from './builders';
+export type { StencilBuilder, StencilBuildContext } from './builders';

package/src/lib/stencil-kit/index.js

@@ -1,8 +1,8 @@
-export { bindStencilPalette } from './palette.js';
-export { bindShapeDataPanel } from './shape-data.js';
-export { ensureStencilKitStyles } from './styles.js';
-export { registerStencilBuilder, getStencilBuilder, unregisterStencilBuilder, registeredStencilBuilders, } from './builders.js';
-import { registerCardBuilders } from './card-builders.js';
+export { bindStencilPalette } from './palette';
+export { bindShapeDataPanel } from './shape-data';
+export { ensureStencilKitStyles } from './styles';
+export { registerStencilBuilder, getStencilBuilder, unregisterStencilBuilder, registeredStencilBuilders, } from './builders';
+import { registerCardBuilders } from './card-builders';
 // The ER/UML card builders ship registered — dropping "Entity" gives a real,
 // editable table out of the box.
 registerCardBuilders();

package/src/lib/stencil-kit/palette.js

@@ -16,8 +16,8 @@ import { __awaiter } from "tslib";
  */
 import { listStencils, NodeFactory, AddNodeCommand, BatchCommand, } from '@grafloria/engine';
 import { getShape } from '@grafloria/renderer';
-import { ensureStencilKitStyles } from './styles.js';
-import { getStencilBuilder } from './builders.js';
+import { ensureStencilKitStyles } from './styles';
+import { getStencilBuilder } from './builders';
 const SVG_NS = 'http://www.w3.org/2000/svg';
 /** The MIME the palette drags with — namespaced so a page's other DnD is untouched. */
 const DND_TYPE = 'application/x-grafloria-master';

package/src/lib/stencil-kit/shape-data.js

@@ -27,8 +27,8 @@
  * kit card's Name rows) is load-bearing for existing demos and gates.
  */
 import { BatchCommand, MoveNodeCommand, ResizeNodeCommand, SetLinkDisplayLabelCommand, SetLinkPathTypeCommand, SetNodeDataCommand, SetNodeLabelCommand, SetNodeShapeConfigCommand, SetNodeStyleCommand, UpdateLinkStyleCommand, } from '@grafloria/engine';
-import { erTable, umlClass } from '../diagram-kit/index.js';
-import { ensureStencilKitStyles } from './styles.js';
+import { erTable, umlClass } from '../diagram-kit';
+import { ensureStencilKitStyles } from './styles';
 /** The schema a node's shape data follows, via the master it was stamped from. */
 function schemaFor(engine, node) {
     var _a, _b, _c, _d;