@luzmo/analytics-components-kit 1.0.9-beta.1 → 1.0.9-beta.11

package/components/item-grid/helpers/grid-interactions.d.ts

@@ -1,88 +1 @@
-import type { GridItemData } from '../types';
-import type { DispatchItemActionEvent } from './grid-events';
-import type { GridItemLookup } from './grid-item-management';
-export interface GridInteractionState {
-    activeItemElement?: HTMLElement;
-    activeItemActionToggle?: string;
-}
-interface ShouldRemovePopoverOnMouseoutArgs {
-    event: Event;
-    gridItem: HTMLElement;
-}
-interface ApplyGridItemFocusArgs {
-    event: FocusEvent;
-    focusedItemElement?: HTMLElement;
-    removeItemActionsMenuPopover: (item: HTMLElement) => void;
-}
-interface ClearGridItemFocusArgs {
-    event: FocusEvent;
-    focusedItemElement?: HTMLElement;
-    removeItemActionsMenuPopover: (item: HTMLElement) => void;
-}
-interface ClearGridItemFocusResult {
-    focusedItemElement?: HTMLElement;
-    shouldFocusGrid: boolean;
-}
-interface CleanupActiveGridItemArgs {
-    item: HTMLElement;
-    activeItemElement?: HTMLElement;
-    gridElement: HTMLElement;
-    removeItemActionsMenuPopover: (item: HTMLElement) => void;
-}
-interface HandleGridActionArgs {
-    event: CustomEvent;
-    gridElement: HTMLElement;
-    items: GridItemData[];
-    state: GridInteractionState;
-    cleanupActiveItem: (item: HTMLElement) => void;
-    dispatchItemActionEvent: DispatchItemActionEvent;
-    createItemActionsMenuPopover: (element: HTMLElement, activeActions?: string[]) => void;
-}
-interface HandleGridClickArgs {
-    event: MouseEvent;
-    gridElement: HTMLElement;
-    hostElement: HTMLElement;
-    items: GridItemData[];
-    activeItemActionToggle?: string;
-    cleanupActiveItem: (item: HTMLElement) => void;
-    dispatchItemActionEvent: DispatchItemActionEvent;
-}
-interface TriggerGridItemActionArgs {
-    gridElement: HTMLElement;
-    items: GridItemData[];
-    gridItemData?: GridItemLookup;
-    itemId: string;
-    action: string;
-    options?: {
-        active?: boolean;
-    };
-    state: GridInteractionState;
-    cleanupActiveItem: (item: HTMLElement) => void;
-    dispatchItemActionEvent: DispatchItemActionEvent;
-    createItemActionsMenuPopover: (element: HTMLElement, activeActions?: string[]) => void;
-}
-export interface TriggerGridItemActionResult {
-    result: boolean | undefined;
-    state: GridInteractionState;
-}
-interface DeactivateGridItemsArgs {
-    gridElement: HTMLElement;
-    items: GridItemData[];
-    state: GridInteractionState;
-    cleanupActiveItem: (item: HTMLElement) => void;
-    dispatchItemActionEvent: DispatchItemActionEvent;
-}
-export interface DeactivateGridItemsResult {
-    deactivatedCount: number;
-    state: GridInteractionState;
-}
-export declare const getGridItemElementFromTarget: (target: EventTarget | null) => HTMLElement | undefined;
-export declare const shouldRemovePopoverOnMouseout: ({ event, gridItem }: ShouldRemovePopoverOnMouseoutArgs) => boolean;
-export declare const applyGridItemFocus: ({ event, focusedItemElement, removeItemActionsMenuPopover }: ApplyGridItemFocusArgs) => HTMLElement | undefined;
-export declare const clearGridItemFocus: ({ event, focusedItemElement, removeItemActionsMenuPopover }: ClearGridItemFocusArgs) => ClearGridItemFocusResult;
-export declare const cleanupActiveGridItem: ({ item, activeItemElement, gridElement, removeItemActionsMenuPopover }: CleanupActiveGridItemArgs) => HTMLElement | undefined;
-export declare const handleGridAction: ({ event, gridElement, items, state, cleanupActiveItem, dispatchItemActionEvent, createItemActionsMenuPopover }: HandleGridActionArgs) => GridInteractionState;
-export declare const handleGridClick: ({ event, gridElement, hostElement, items, activeItemActionToggle, cleanupActiveItem, dispatchItemActionEvent }: HandleGridClickArgs) => GridInteractionState;
-export declare const triggerGridItemAction: ({ gridElement, items, gridItemData, itemId, action, options, state, cleanupActiveItem, dispatchItemActionEvent, createItemActionsMenuPopover }: TriggerGridItemActionArgs) => TriggerGridItemActionResult;
-export declare const deactivateGridItems: ({ gridElement, items, state, cleanupActiveItem, dispatchItemActionEvent }: DeactivateGridItemsArgs) => DeactivateGridItemsResult;
-export {};
+export * from '../../../grid-core/helpers/grid-interactions';

package/components/item-grid/helpers/grid-item-management.d.ts

@@ -1,30 +1,9 @@
 import type { LuzmoEmbedVizItem } from '@luzmo/embed';
-import type { GridStackEngine } from 'gridstack';
-import type { AddGridItemInput, GridItemData } from '../types';
-export interface GridItemLookup {
-    item: GridItemData;
-    element: HTMLElement;
+import { type GridItemLookup as CoreGridItemLookup } from '../../../grid-core/helpers/grid-item-management';
+import type { GridItemData } from '../types';
+export { resolveNewGridItem, simulateItemMove, simulateItemPlacement } from '../../../grid-core/helpers/grid-item-management';
+export type { SimulateItemPlacementResult } from '../../../grid-core/helpers/grid-item-management';
+export interface GridItemLookup extends CoreGridItemLookup {
     luzmoElement?: LuzmoEmbedVizItem;
 }
-interface SimulateItemPlacementArgs {
-    item: GridItemData;
-    engine: GridStackEngine;
-    existingItems: GridItemData[];
-    autoPosition: boolean;
-    excludeNodeId?: string;
-}
-export interface SimulateItemPlacementResult {
-    resolvedItem: GridItemData;
-    updatedItems: GridItemData[];
-}
 export declare const mapGridItems: (items: GridItemData[], gridElement: HTMLElement) => GridItemLookup[];
-export declare const simulateItemPlacement: ({ item, engine, existingItems, autoPosition, excludeNodeId }: SimulateItemPlacementArgs) => SimulateItemPlacementResult;
-interface SimulateItemMoveArgs {
-    itemId: string;
-    patch: Partial<NonNullable<GridItemData['position']>>;
-    engine: GridStackEngine;
-    existingItems: GridItemData[];
-}
-export declare const simulateItemMove: ({ itemId, patch, engine, existingItems }: SimulateItemMoveArgs) => GridItemData[];
-export declare const resolveNewGridItem: (newItem: AddGridItemInput) => GridItemData;
-export {};

package/components/item-grid/helpers/grid-item-popover.d.ts

@@ -1,21 +1 @@
-import type { Placement } from '@luzmo/lucero';
-import { type TemplateResult } from 'lit';
-import type { GridItemData } from '../types';
-import type { GridItemLookup } from './grid-item-management';
-interface CreateItemActionsMenuPopoverArgs {
-    element: HTMLElement;
-    activeActions?: string[];
-    getGridItemById: (id: string) => GridItemLookup | undefined;
-    placementItemActionsMenu: Placement;
-    renderOverlayContent: (item?: GridItemData, activeActions?: string[]) => TemplateResult;
-    removeItemActionsMenuPopover: (gridItem: HTMLElement) => void;
-    /**
-     * When false, skip `showPopover()` and use `position: fixed` + Floating UI so the menu does not
-     * enter the document popover top layer (avoids stacking above other `popover="manual"` UIs).
-     * @default true
-     */
-    itemActionsDocumentPopover?: boolean;
-}
-export declare const createItemActionsMenuPopover: ({ element, activeActions, getGridItemById, placementItemActionsMenu, renderOverlayContent, removeItemActionsMenuPopover, itemActionsDocumentPopover }: CreateItemActionsMenuPopoverArgs) => void;
-export declare const removeItemActionsMenuPopover: (gridItem: HTMLElement) => void;
-export {};
+export * from '../../../grid-core/helpers/grid-item-popover';

package/components/item-grid/helpers/grid-items.d.ts

@@ -1,9 +1 @@
-import type { GridStackWidget } from 'gridstack';
-import type { AddGridItemInput, GridItemData } from '../types';
-export declare const normalizeGridItems: (items: GridItemData[]) => void;
-export declare const ensureGridItemId: (item: GridItemData) => string;
-export declare const buildGridWidgetOptions: (item: GridItemData | undefined, id?: string) => GridStackWidget;
-export declare const createGridItemFromInput: (newItem: AddGridItemInput, id: string) => GridItemData;
-export declare const createOrphanGridItemElement: (itemId: string) => HTMLDivElement;
-export declare const readGridItemPosition: (gridItemElement: HTMLElement) => GridItemData["position"];
-export declare const findGridItemElementById: (elements: Iterable<HTMLElement>, id: string | undefined) => HTMLElement | undefined;
+export * from '../../../grid-core/helpers/grid-items';

package/components/item-grid/helpers/grid-keyboard-updates.d.ts

@@ -1,18 +1 @@
-export type GridArrowKey = 'ArrowLeft' | 'ArrowRight' | 'ArrowUp' | 'ArrowDown';
-export interface GridKeyboardNode {
-    x: number;
-    y: number;
-    w: number;
-    h: number;
-}
-export type GridKeyboardUpdate = Partial<Pick<GridKeyboardNode, 'x' | 'y' | 'w' | 'h'>>;
-export interface GridKeyboardUpdateArgs {
-    key: GridArrowKey;
-    node: GridKeyboardNode;
-    maxColumns: number;
-    shiftKey: boolean;
-    ctrlKey: boolean;
-    metaKey: boolean;
-}
-export declare const isGridArrowKey: (key: string) => key is GridArrowKey;
-export declare const getGridKeyboardUpdate: ({ key, node, maxColumns, shiftKey, ctrlKey, metaKey }: GridKeyboardUpdateArgs) => GridKeyboardUpdate | undefined;
+export * from '../../../grid-core/helpers/grid-keyboard-updates';

package/components/item-grid/helpers/grid-keydown-event.d.ts

@@ -1,18 +1 @@
-import type { GridStack } from 'gridstack';
-export interface HandleGridKeyDownArgs {
-    event: KeyboardEvent;
-    viewMode: boolean;
-    focusedItemElement?: HTMLElement;
-    activeItemElement?: HTMLElement;
-    gridElement: HTMLElement;
-    grid?: GridStack;
-    columns: number;
-    onDeleteRequest: (gridItemElement: HTMLElement) => void;
-    removeItemActionsMenuPopover: (gridItem: HTMLElement) => void;
-    createItemActionsMenuPopover: (element: HTMLElement, activeActions?: string[]) => void;
-}
-export interface HandleGridKeyDownResult {
-    focusedItemElement?: HTMLElement;
-    activeItemElement?: HTMLElement;
-}
-export declare const handleGridKeyDown: ({ event, viewMode, focusedItemElement, activeItemElement, gridElement, grid, columns, onDeleteRequest, removeItemActionsMenuPopover, createItemActionsMenuPopover }: HandleGridKeyDownArgs) => HandleGridKeyDownResult;
+export * from '../../../grid-core/helpers/grid-keydown-event';

package/components/item-grid/helpers/grid-popover-cleanup.d.ts

@@ -1,4 +1 @@
-type CleanupCallback = () => void;
-export declare const setPopoverCleanup: (element: HTMLElement, cleanup: CleanupCallback) => void;
-export declare const clearPopoverCleanup: (element: HTMLElement) => void;
-export {};
+export * from '../../../grid-core/helpers/grid-popover-cleanup';

package/components/item-grid/helpers/grid-rendering.d.ts

@@ -1,7 +1,5 @@
-import { ThemeConfig } from '@luzmo/dashboard-contents-types';
 import type { Placement } from '@luzmo/lucero';
 import { type TemplateResult } from 'lit';
-import { repeat } from 'lit/directives/repeat.js';
 import type { GridItemData, InputActionGroup } from '../types';
 interface RenderOverlayContentArgs {
     item?: GridItemData;
@@ -17,53 +15,5 @@ interface RenderOverlayContentArgs {
      */
     itemActionsDocumentPopover?: boolean;
 }
-interface RenderGridItemArgs {
-    item: GridItemData;
-    index: number;
-    initialized: boolean;
-    viewMode: boolean;
-    contentLanguage: string;
-    fullTheme?: ThemeConfig;
-    appServer?: string;
-    apiHost?: string;
-    authKey?: string;
-    authToken?: string;
-    handleMouseover: (event: Event) => void;
-    handleMouseout: (event: Event) => void;
-    handleFocus: (event: FocusEvent) => void;
-    handleBlur: (event: FocusEvent) => void;
-}
-interface RenderGridItemsArgs {
-    items: GridItemData[];
-    initialized: boolean;
-    viewMode: boolean;
-    contentLanguage: string;
-    fullTheme?: ThemeConfig;
-    appServer?: string;
-    apiHost?: string;
-    authKey?: string;
-    authToken?: string;
-    renderItem: (item: GridItemData, index: number) => TemplateResult;
-}
-interface RenderGridArgs {
-    items: GridItemData[];
-    initialized: boolean;
-    viewMode: boolean;
-    contentLanguage: string;
-    fullTheme?: ThemeConfig;
-    appServer?: string;
-    apiHost?: string;
-    authKey?: string;
-    authToken?: string;
-    columns: number;
-    ensureGridItemId: (item: GridItemData) => void;
-    handleMouseover: (event: Event) => void;
-    handleMouseout: (event: Event) => void;
-    handleFocus: (event: FocusEvent) => void;
-    handleBlur: (event: FocusEvent) => void;
-}
 export declare const renderOverlayContent: ({ item, activeActions, defaultItemActionsMenu, placementItemActionsMenu, language, handleAction, itemActionsDocumentPopover }: RenderOverlayContentArgs) => TemplateResult;
-export declare const renderGridItem: ({ item, index, initialized, viewMode, contentLanguage, fullTheme, appServer, apiHost, authKey, authToken, handleMouseover, handleMouseout, handleFocus, handleBlur }: RenderGridItemArgs) => TemplateResult;
-export declare const renderGridItems: ({ items, initialized, viewMode, contentLanguage, fullTheme, appServer, apiHost, authKey, authToken, renderItem }: RenderGridItemsArgs) => ReturnType<typeof repeat>;
-export declare const renderGrid: ({ items, initialized, viewMode, contentLanguage, fullTheme, appServer, apiHost, authKey, authToken, columns, ensureGridItemId, handleMouseover, handleMouseout, handleFocus, handleBlur }: RenderGridArgs) => TemplateResult;
 export {};

package/components/item-grid/helpers/grid-stack-lifecycle.d.ts

@@ -1,26 +1 @@
-import { ThemeConfig } from '@luzmo/dashboard-contents-types';
-import { GridStack, type GridStackNode } from 'gridstack';
-import type { GridItemData } from '../types';
-interface InitializeGridStackArgs {
-    gridElement: HTMLElement;
-    gridItemElements: NodeListOf<HTMLElement>;
-    items: GridItemData[];
-    columns: number;
-    rowHeight: number;
-    viewMode: boolean;
-    fullTheme?: ThemeConfig;
-    onCreateOrUpdateDimensionsHint: (element: HTMLElement, numberOfColumns: string, numberOfRows: string) => void;
-    onRemoveDimensionsHint: (element: HTMLElement) => void;
-    onChange: (changedItems: GridStackNode[]) => void;
-}
-interface CreateOrUpdateDimensionsHintArgs {
-    element: HTMLElement;
-    numberOfColumns: string;
-    numberOfRows: string;
-    offsetHint: number;
-}
-export declare const initializeGridStack: ({ gridElement, gridItemElements, items, columns, rowHeight, viewMode, fullTheme, onCreateOrUpdateDimensionsHint, onRemoveDimensionsHint, onChange }: InitializeGridStackArgs) => GridStack;
-export declare const buildUpdatedItemPositions: (items: GridItemData[], changedItems: GridStackNode[]) => GridItemData[];
-export declare const createOrUpdateDimensionsHint: ({ element, numberOfColumns, numberOfRows, offsetHint }: CreateOrUpdateDimensionsHintArgs) => void;
-export declare const removeDimensionsHint: (element: HTMLElement) => void;
-export {};
+export * from '../../../grid-core/helpers/grid-stack-lifecycle';

package/components/item-grid/helpers/grid-theme.d.ts

@@ -1,16 +1,4 @@
 import type { ThemeConfig } from '@luzmo/dashboard-contents-types';
-export interface GridThemeResolutionArgs {
-    theme?: ThemeConfig;
-    currentTheme?: ThemeConfig;
-}
+import type { GridThemeResolutionArgs } from '../../../grid-core/helpers/grid-theme';
+export * from '../../../grid-core/helpers/grid-theme';
 export declare const resolveGridTheme: ({ theme, currentTheme }: GridThemeResolutionArgs) => Promise<ThemeConfig | undefined>;
-export declare const getGridHalfMargins: (theme?: {
-    margins?: number[];
-}) => [number, number];
-export declare const getDimensionsHintOffset: (theme?: {
-    margins?: number[];
-}) => number;
-export declare const getGridBoxShadow: (theme?: ThemeConfig) => string;
-export declare const getGridCssVariables: (theme?: ThemeConfig) => ReadonlyMap<string, string | undefined>;
-export declare const isGridDarkBackground: (theme?: ThemeConfig) => boolean;
-export declare const applyThemeProperties: (style: CSSStyleDeclaration, fullTheme?: ThemeConfig) => void;

package/components/item-grid/helpers/grid-update-cycle.d.ts

@@ -1,22 +1 @@
-import type { GridStack } from 'gridstack';
-import type { GridItemData } from '../types';
-interface SyncGridItemsArgs {
-    initialized: boolean;
-    grid?: GridStack;
-    hasItemsChanged: boolean;
-    gridItemElements: NodeListOf<HTMLElement>;
-    items: GridItemData[];
-}
-interface ApplyViewModeChangeArgs {
-    initialized: boolean;
-    grid?: GridStack;
-    hasViewModeChanged: boolean;
-    viewMode: boolean;
-    previousViewMode: unknown;
-    activeItemElement?: HTMLElement;
-    gridElement: HTMLElement;
-    cleanupActiveItem: (item: HTMLElement) => void;
-}
-export declare const syncGridItems: ({ initialized, grid, hasItemsChanged, gridItemElements, items }: SyncGridItemsArgs) => void;
-export declare const applyViewModeChange: ({ initialized, grid, hasViewModeChanged, viewMode, previousViewMode, activeItemElement, gridElement, cleanupActiveItem }: ApplyViewModeChangeArgs) => HTMLElement | undefined;
-export {};
+export * from '../../../grid-core/helpers/grid-update-cycle';

package/components/item-grid/index.cjs

@@ -17,4 +17,4 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../item-grid-BfhqMuQA.cjs");exports.LuzmoItemGrid=e.t,Object.defineProperty(exports,"LuzmoItemGridItemActionsMenu",{enumerable:!0,get:function(){return e.n}});
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("../item-grid-DTishUCb.cjs"),t=require("../item-grid-item-actions-menu-C3BUxZJc.cjs");exports.LuzmoItemGrid=e.t,Object.defineProperty(exports,"LuzmoItemGridItemActionsMenu",{enumerable:!0,get:function(){return t.t}});

package/components/item-grid/index.d.ts

@@ -1,12 +1,12 @@
 import { LuzmoItemGrid } from './item-grid';
-import { LuzmoItemGridItemActionsMenu } from './item-grid-item-actions-menu';
+import '../item-grid-item-actions-menu';
 declare global {
     interface HTMLElementTagNameMap {
         'luzmo-item-grid': LuzmoItemGrid;
-        'luzmo-item-grid-item-actions-menu': LuzmoItemGridItemActionsMenu;
     }
 }
 export { LuzmoItemGrid } from './item-grid';
-export { LuzmoItemGridItemActionsMenu } from './item-grid-item-actions-menu';
+export { LuzmoItemGridItemActionsMenu } from '../item-grid-item-actions-menu';
+export type { ItemGridItemActionEventDetail, ItemGridItemActionHoverEventDetail } from '../item-grid-item-actions-menu';
 export type { Action, ActionGroup, AddGridItemInput, ClonedItemPositioning, DefaultActionType, GridItemData, GridItemPatch, GridItemPosition, GridItemPositionPatch, GridItemRenderer, GridItemSizePatch, GridItemStatesChangedEventDetail, InputActionGroup, ItemStates } from './types';
 export type { GridItemActionEventDetail, GridLifecycleEventDetail } from './helpers/grid-events';

package/components/item-grid/index.js

@@ -17,12 +17,6 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  * */
-// Auto-generated initialization code
-(function() {
-	if (typeof document < "u" && !document.querySelector("style[data-luzmo-vars]")) {
-		let e = document.createElement("style");
-		e.setAttribute("data-luzmo-vars", ""), e.textContent = "html{--luzmo-animation-duration: 0.15s;--luzmo-border-color: rgba(var(--luzmo-border-color-rgb), 0.1);--luzmo-border-color-hover: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-down: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-border-color-focus: rgba(var(--luzmo-border-color-rgb), 0.15);--luzmo-border-color-rgb: 0, 0, 0;--luzmo-border-color-full: rgb(180, 180, 180);--luzmo-border-color-full-hover: color-mix(in oklch, var(--luzmo-border-color-full), black 25%);--luzmo-border-color-full-down: color-mix(in oklch, var(--luzmo-border-color-full), black 45%);--luzmo-border-color-full-focus: color-mix(in oklch, var(--luzmo-border-color-full), black 25%);--luzmo-border-color-disabled: #dddddd;--luzmo-border-radius: 6px;--luzmo-border-radius-s: 4px;--luzmo-border-radius-l: 8px;--luzmo-border-radius-xl: 12px;--luzmo-border-radius-full: 999rem;--luzmo-background-color: #ffffff;--luzmo-background-color-rgb: 255, 255, 255;--luzmo-background-color-disabled: #eeeeee;--luzmo-background-color-hover: color-mix( in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 5%), black 1.5% );--luzmo-background-color-down: color-mix(in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 7%), black 1%);--luzmo-background-color-focus: color-mix( in oklch, color-mix(in oklch, var(--luzmo-background-color), var(--luzmo-primary) 5%), black 1.5% );--luzmo-background-color-highlight: rgb(240, 240, 240);--luzmo-background-color-highlight-disabled: rgb(245, 245, 245);--luzmo-background-color-highlight-hover: color-mix(in oklch, var(--luzmo-background-color-highlight), black 10%);--luzmo-background-color-highlight-down: color-mix(in oklch, var(--luzmo-background-color-highlight), black 20%);--luzmo-background-color-highlight-focus: color-mix(in oklch, var(--luzmo-background-color-highlight), black 10%);--luzmo-background-color-alt-1: rgb(250, 250, 250);--luzmo-background-color-alt-2: rgb(239, 239, 239);--luzmo-border-width: 1px;--luzmo-shadow-color-rgb: 0, 0, 0;--luzmo-shadow-opacity: 0.1;--luzmo-shadow-color: rgba(var(--luzmo-shadow-color-rgb), var(--luzmo-shadow-opacity));--luzmo-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', Helvetica, Arial, sans-serif;--luzmo-font-size-xs: 10px;--luzmo-font-size-s: 12px;--luzmo-font-size-m: 14px;--luzmo-font-size: 14px;--luzmo-font-size-l: 16px;--luzmo-font-size-xl: 18px;--luzmo-font-size-xxl: 20px;--luzmo-font-style: normal;--luzmo-line-height: normal;--luzmo-font-weight: 400;--luzmo-font-weight-semibold: 500;--luzmo-font-weight-bold: 600;--luzmo-font-color: #333;--luzmo-font-color-hard: #000;--luzmo-font-color-disabled: var(--luzmo-color-disabled);--luzmo-font-color-extra-dimmed: #888;--luzmo-font-color-hover: color-mix(in oklch, var(--luzmo-font-color), black 8%);--luzmo-font-color-down: color-mix(in oklch, var(--luzmo-font-color), black 20%);--luzmo-font-color-focus: color-mix(in oklch, var(--luzmo-font-color), black 8%);--luzmo-scrollbar-size: 6px;--luzmo-scrollbar-width: thin;--luzmo-scrollbar-track-background: transparent;--luzmo-scrollbar-track-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-thumb-background: rgba(var(--luzmo-border-color-rgb), 0.3);--luzmo-scrollbar-thumb-border-radius: var(--luzmo-border-radius-s);--luzmo-scrollbar-thumb-hover-background: rgba(var(--luzmo-border-color-rgb), 0.4);--luzmo-primary: #4434ff;--luzmo-primary-hover: color-mix(in oklch, var(--luzmo-primary), black 8%);--luzmo-primary-down: color-mix(in oklch, var(--luzmo-primary), black 20%);--luzmo-primary-focus: color-mix(in oklch, var(--luzmo-primary), black 8%);--luzmo-primary-inverse-color: #ffffff;--luzmo-primary-rgb: 68, 52, 255;--luzmo-secondary: #ff00ff;--luzmo-secondary-hover: color-mix(in oklch, var(--luzmo-secondary), black 8%);--luzmo-secondary-down: color-mix(in oklch, var(--luzmo-secondary), black 20%);--luzmo-secondary-focus: color-mix(in oklch, var(--luzmo-secondary), black 8%);--luzmo-secondary-inverse-color: #ffffff;--luzmo-secondary-rgb: 255, 0, 255;--luzmo-secondary-outline: rgba(255, 0, 255, 0.2);--luzmo-negative-color: #ca221c;--luzmo-negative-color-hover: color-mix(in oklch, var(--luzmo-negative-color), black 8%);--luzmo-negative-color-down: color-mix(in oklch, var(--luzmo-negative-color), black 20%);--luzmo-negative-color-focus: color-mix(in oklch, var(--luzmo-negative-color), black 8%);--luzmo-negative-color-rgb: 202, 34, 28;--luzmo-positive-color: rgb(20, 150, 101);--luzmo-positive-color-hover: color-mix(in oklch, var(--luzmo-positive-color), black 8%);--luzmo-positive-color-down: color-mix(in oklch, var(--luzmo-positive-color), black 20%);--luzmo-positive-color-focus: color-mix(in oklch, var(--luzmo-positive-color), black 8%);--luzmo-positive-color-rgb: 20, 150, 101;--luzmo-selected-color: rgb(110, 110, 110);--luzmo-selected-color-hover: color-mix(in oklch, var(--luzmo-selected-color), black 25%);--luzmo-selected-color-down: color-mix(in oklch, var(--luzmo-selected-color), black 45%);--luzmo-selected-color-focus: color-mix(in oklch, var(--luzmo-selected-color), black 25%);--luzmo-selected-color-hard: #1e1e1e;--luzmo-selected-color-hard-hover: color-mix(in oklch, var(--luzmo-selected-color-hard), black 25%);--luzmo-selected-color-hard-down: color-mix(in oklch, var(--luzmo-selected-color-hard), black 45%);--luzmo-selected-color-hard-focus: color-mix(in oklch, var(--luzmo-selected-color-hard), black 25%);--luzmo-color-informative: #1a77e9;--luzmo-color-informative-rgb: 26, 119, 233;--luzmo-color-disabled: #aaaaaa;--luzmo-spacing-1: 2px;--luzmo-spacing-2: 4px;--luzmo-spacing-3: 8px;--luzmo-spacing-4: 12px;--luzmo-spacing-5: 16px;--luzmo-indicator-gap: 2px;--luzmo-indicator-width: 1px;--luzmo-indicator-color: var(--luzmo-primary);--luzmo-component-height-xxs: 20px;--luzmo-component-height-xs: 24px;--luzmo-component-height-s: 28px;--luzmo-component-height: 32px;--luzmo-component-height-l: 40px;--luzmo-component-height-xl: 48px;--luzmo-component-height-xxl: 64px;--luzmo-icon-size-xxs: 12px;--luzmo-icon-size-xs: 14px;--luzmo-icon-size-s: 16px;--luzmo-icon-size-m: 18px;--luzmo-icon-size-l: 20px;--luzmo-icon-size-xl: 22px;--luzmo-icon-size-xxl: 32px}", document.head.appendChild(e);
-	}
-})();
-import { n as e, t } from "../item-grid-xCM8AqRH.js";
-export { t as LuzmoItemGrid, e as LuzmoItemGridItemActionsMenu };
+import { t as e } from "../item-grid-CbXKsQm4.js";
+import { t } from "../item-grid-item-actions-menu-B7ylgTwO.js";
+export { e as LuzmoItemGrid, t as LuzmoItemGridItemActionsMenu };

package/components/item-grid/item-grid.d.ts

@@ -1,28 +1,23 @@
 import '@luzmo/embed';
 import type { ThemeConfig } from '@luzmo/dashboard-contents-types';
-import type { LuzmoEmbedVizItem } from '@luzmo/embed';
-import { Placement } from '@luzmo/lucero';
+import { ItemGridBase, type GridItemData } from '../../grid-core';
 import '@luzmo/lucero/action-button';
 import '@luzmo/lucero/action-group';
-import '@luzmo/lucero/icon';
-import { LuzmoElement } from '@luzmo/lucero/utils';
-import { GridStack } from 'gridstack';
-import { CSSResultArray, PropertyValues, TemplateResult } from 'lit';
+import type { PropertyValues, TemplateResult } from 'lit';
 import { type GridItemLookup } from './helpers/grid-item-management';
-import './item-grid-item-actions-menu';
-import type { AddGridItemInput, ClonedItemPositioning, GridItemData, GridItemPatch, GridItemPositionPatch, GridItemRenderer, GridItemSizePatch, InputActionGroup, ItemStates } from './types';
+import '../item-grid-item-actions-menu';
 /**
  * @customElement luzmo-item-grid
  *
  * A grid component that allows you to create a grid of items.
  *
  * @fires {CustomEvent<GridItemActionEventDetail>} luzmo-item-grid-item-action - Fired when an item action is performed
+ * @fires {CustomEvent<ItemGridItemActionHoverEventDetail>} luzmo-item-grid-item-action-hover - Bubbles from the item actions menu when the pointer enters an action. The detail has only `action` and `type`, not the item.
  * @fires {CustomEvent<GridLifecycleEventDetail>} luzmo-item-grid-layout-changed - Fired when the grid layout is changed
  * @fires {CustomEvent<GridLifecycleEventDetail>} luzmo-item-grid-ready - Fired when the grid is ready
  * @fires {CustomEvent<GridItemStatesChangedEventDetail>} luzmo-item-grid-item-states-changed - Fired when item states change (controlled and uncontrolled mode)
  */
-export declare class LuzmoItemGrid extends LuzmoElement {
-    static get styles(): CSSResultArray;
+export declare class LuzmoItemGrid extends ItemGridBase {
     /**
      * The URL of the app server
      * @default https://app.luzmo.com
@@ -49,203 +44,13 @@ export declare class LuzmoItemGrid extends LuzmoElement {
      * @description The time to cache the data in milliseconds
      */
     cacheTime?: number;
-    /**
-     * The language of the settings interface
-     */
-    language: string;
-    /**
-     * The language to use for locale-aware formatting and labels
-     */
-    contentLanguage: string;
-    /**
-     * The number of columns in the grid.
-     */
-    columns: number;
-    /**
-     * The height of each row in pixels in the grid.
-     */
-    rowHeight: number;
-    /**
-     * Whether the grid is in view mode. When true, dragging, resizing and action buttons are disabled.
-     * @default false
-     */
-    viewMode: boolean;
-    /**
-     * When true (default), the item actions menu uses the Document Popover API (`popover="manual"`),
-     * which paints in the top layer. Set to false when embedding the grid next to another UI that
-     * also uses a document popover (e.g. an analyst side pane) so the actions menu stays in normal
-     * stacking with `position: fixed` + Floating UI instead.
-     * @default true
-     */
-    itemActionsDocumentPopover: boolean;
-    /**
-     * The placement of the item actions menu.
-     * @default 'right-start'
-     */
-    placementItemActionsMenu: Placement;
-    /**
-     * The default item actions menu.
-     * @default [{ type: 'group', actions: ['edit-data', 'item-options', 'clone'] }, { type: 'group', actions: ['delete'] }]
-     */
-    defaultItemActionsMenu?: InputActionGroup[];
-    /**
-     * Where to position a cloned item in the grid.
-     * - `'below-item'` (default): places the clone directly below the original item, shifting other items down.
-     * - `'auto-position'`: lets the grid engine find the first available space (row-major scan, then compact upward).
-     * @default 'below-item'
-     */
-    clonedItemPositioning: ClonedItemPositioning;
-    /**
-     * Grid options configuration
-     */
-    theme?: ThemeConfig;
-    /**
-     * Items to add to the grid.
-     * The array is cloned on set so the component never mutates the caller's data.
-     */
-    set items(value: GridItemData[] | undefined);
-    get items(): GridItemData[];
-    private _items;
-    private _hasControlledItems;
-    /**
-     * Seed value for uncontrolled items mode. The component manages item changes internally from this starting point.
-     * Ignored when `items` is set.
-     */
-    set initialItems(value: GridItemData[] | undefined);
-    get initialItems(): GridItemData[] | undefined;
-    private _initialItems;
-    /**
-     * Custom renderers for different item types
-     */
-    renderers: Record<string, GridItemRenderer>;
-    /**
-     * Controlled item states. When set, the component becomes controlled:
-     * it only reflects what the parent provides and does not update internal state on user interaction.
-     */
-    set itemStates(value: ItemStates | undefined);
-    get itemStates(): ItemStates | undefined;
-    private _itemStates?;
-    /**
-     * Seed value for uncontrolled mode. The component manages state internally from this starting point.
-     * Ignored if `itemStates` is set.
-     *
-     * Only one item with one active action is supported. If multiple items or actions are provided,
-     * a warning is emitted and only the first item with its first action is applied.
-     * Use controlled mode (`itemStates`) for multiple simultaneous active items.
-     */
-    initialItemStates?: ItemStates;
-    private _initialized;
-    private _gridElement;
-    private _gridItemElements;
-    private _grid?;
-    defaultRenderer: GridItemRenderer;
-    private _activeItemElement?;
-    private _activeItemActionToggle?;
-    private _focusedItemElement?;
-    private _fullTheme?;
-    private _internalItemStates;
-    private _initialItemStatesApplied;
-    private _internalItems;
-    private _initialItemsApplied;
-    private _hasWarnedControlledAndInitialItems;
-    private _hasWarnedIgnoredInitialItems;
-    private _suppressItemStatesEvent;
-    private _suppressNextLayoutChangedEvent;
-    private _hasWarnedControlledAndInitialStates;
-    private _internalItemsVersion;
-    private get _isControlled();
-    private get _isItemsControlled();
-    private get _effectiveItems();
-    private get _effectiveItemStates();
-    private _validateItemsHaveIds;
-    private _loadTheme;
-    firstUpdated(): void;
-    disconnectedCallback(): void;
-    protected willUpdate(changedProperties: PropertyValues): void;
+    protected renderItemContent(item: GridItemData): TemplateResult;
+    protected getItemRenderDependencies(): readonly unknown[];
+    protected resolveTheme(theme: ThemeConfig | undefined, currentTheme: ThemeConfig | undefined): Promise<ThemeConfig | undefined>;
+    protected renderOverlayContent(item?: GridItemData, activeActions?: string[]): TemplateResult;
+    /** Retains the public lifecycle hook from the original grid API. */
+    firstUpdated(changedProperties?: PropertyValues): void;
     protected updated(changedProperties: PropertyValues): void;
-    private _setInternalItems;
-    private _handleMouseover;
-    private _handleMouseout;
-    private _handleKeyDown;
-    private _handleFocus;
-    private _handleBlur;
-    private _handleGridClick;
-    private _emitControlledClickAwayDeactivation;
-    private _cleanupActiveItem;
-    private _clearGridItemUiStateForDelete;
-    private _dispatchItemActionEvent;
-    private _sanitizeInitialItemStates;
-    private _diffItemStates;
-    private _computeNextItemStates;
-    private _filterItemStatesToExistingItems;
-    private _reconcileStaleItemStates;
-    private _simulateCloneLayout;
-    private _cleanup;
-    private _restoreItemsLayout;
-    private _initializeGrid;
-    private _applyItemStates;
-    private _createOrUpdateDimensionsHint;
-    private _removeDimensionsHint;
-    private _handleAction;
-    /**
-     * Get the GridStack instance
-     */
-    get grid(): GridStack | undefined;
-    get gridItems(): {
-        item: GridItemData;
-        element: HTMLElement;
-        luzmoElement?: LuzmoEmbedVizItem;
-    }[];
-    /**
-     * Register a custom renderer for a specific type
-     */
-    registerRenderer(type: string, renderer: GridItemRenderer): void;
-    private _renderOverlayContent;
-    private _createItemActionsMenuPopover;
-    private _removeItemActionsMenuPopover;
+    get gridItems(): GridItemLookup[];
     getGridItemById(id: string): GridItemLookup | undefined;
-    scrollToItem(id: string): void;
-    private _createMissingItemError;
-    private _requireGridItem;
-    private _resolvePositionFromEngine;
-    private _requireGridItemWithPosition;
-    private _assertAddItemHasId;
-    addGridItem(newItem: AddGridItemInput): GridItemData[];
-    private _enrichItemsWithEnginePositions;
-    private _updateGridItemPosition;
-    private _dispatchLayoutChangedEvent;
-    private _updateItemField;
-    removeGridItem(itemId: string): GridItemData[];
-    cloneGridItem(itemId: string): GridItemData[];
-    updateGridItemPosition(itemId: string, position: GridItemPositionPatch): GridItemData[];
-    updateGridItemSize(itemId: string, size: GridItemSizePatch): GridItemData[];
-    updateGridItemSlots(itemId: string, slots: NonNullable<GridItemData['slots']>): GridItemData[];
-    updateGridItemOptions(itemId: string, options: NonNullable<GridItemData['options']>): GridItemData[];
-    updateGridItemFilters(itemId: string, filters: NonNullable<GridItemData['filters']>): GridItemData[];
-    updateGridItemType(itemId: string, type: GridItemData['type']): GridItemData[];
-    updateGridItem(itemId: string, patch: GridItemPatch): GridItemData[];
-    /**
-     * Programmatically trigger a toggle action on a grid item.
-     * Toggles the state (active→inactive, inactive→active) unless `active` is explicitly set.
-     * Waits for any pending render to complete before checking for the element.
-     * @param itemId - The ID of the grid item
-     * @param action - The action name to trigger
-     * @param options - Optional configuration
-     * @param options.active - Force active state (true/false). If omitted, toggles the current state.
-     * @returns The new active state (true if activated, false if deactivated), or undefined if item not found
-     */
-    triggerItemAction(itemId: string, action: string, options?: {
-        active?: boolean;
-    }): Promise<boolean | undefined>;
-    activateItemAction(itemId: string, action: string, options?: {
-        active?: boolean;
-    }): Promise<boolean | undefined>;
-    private _triggerControlledItemAction;
-    /**
-     * Deactivate all active items and dispatch deactivation events.
-     * @returns The number of items that were deactivated
-     */
-    deactivateItems(): number;
-    private _renderGrid;
-    protected render(): TemplateResult;
 }