@godxjp/ui 33.14.0 → 33.16.0

package/dist/props/components/index.d.ts

@@ -2,7 +2,7 @@ export type { AppLauncherApp, AppLauncherGroup, AppLauncherLabels, AppLauncherPr
 export type { ButtonProp } from "./general.prop.js";
 export type { CommandProp, CommandSeparatorProp, InputProp, TextareaProp, FormFieldProp, SearchInputProp, CheckboxProp, CheckboxGroupProp, ChoiceOptionProp, RadioProp, RadioGroupProp, SwitchProp, SliderProp, CalendarProp, DatePickerProp, TimePickerProp, ColorPickerProp, ColorPickerPresetProp, UploadProp, UploadFileItemProp, UploadVariantProp, TreeOptionProp, TreeFieldNamesProp, CascaderProp, TreeSelectProp, ShowCheckedStrategyProp, TransferProp, TransferItemProp, } from "./data-entry.prop.js";
 export type { AvatarProp, EmptyStateProp, DescriptionsProp, DescriptionsItemProp, BadgeProp, DataTableProp, QrCodeProp, } from "./data-display.prop.js";
-export type { ChartDatum, ChartSeriesProp, LineChartProp, BarChartProp, AreaChartProp, PieChartProp, } from "./charts.prop.js";
+export type { ChartDatumSelect, ChartDatum, ChartSeriesProp, LineChartProp, BarChartProp, AreaChartProp, PieChartProp, } from "./charts.prop.js";
 export type { AlertQueryErrorProp, AuthExpiryProviderProp, AlertProp, DialogProp, DialogContentProp, AlertTitleProp, AlertContentProp, AlertDescriptionProp, AlertActionsProp, SheetResponsiveProp, SkeletonRowsProp, } from "./feedback.prop.js";
 export type { DataStateProp, InfiniteQueryStateProp, InfiniteQueryHelpers, PrefetchLinkProp, } from "./query.prop.js";
 export type { DropdownMenuPlacementProp, DropdownMenuTriggerActionProp, PaginationProp, PaginationSizeProp, PaginationAlignProp, StepsProp, StepItemProp, StepStatusProp, StepsTypeProp, TabsProp, TabItemProp, TabsVariantProp, TabsPlacementProp, TabsExtraProp, TabsOnEditProp, } from "./navigation.prop.js";

package/dist/props/registry.d.ts

@@ -717,6 +717,64 @@ export declare const VOCABULARY_REGISTRY: {
 };
 export type VocabularyPropName = keyof typeof VOCABULARY_REGISTRY;
 export declare const COMPONENT_PROP_REGISTRY: {
+    readonly DashboardGridProp: {
+        readonly group: "layout";
+        readonly file: "components/dashboard-grid.prop.ts";
+        readonly vocabulary: readonly ["ClassNameProp", "IdProp", {
+            readonly field: "items";
+            readonly local: true;
+            readonly reason: "DashboardGrid cell-layout editing contract (#1397), owner-approved lab API.";
+        }, {
+            readonly field: "layout";
+            readonly local: true;
+            readonly reason: "DashboardGrid cell-layout editing contract (#1397), owner-approved lab API.";
+        }, {
+            readonly field: "defaultLayout";
+            readonly local: true;
+            readonly reason: "DashboardGrid cell-layout editing contract (#1397), owner-approved lab API.";
+        }, {
+            readonly field: "onLayoutChange";
+            readonly local: true;
+            readonly reason: "DashboardGrid cell-layout editing contract (#1397), owner-approved lab API.";
+        }, {
+            readonly field: "columns";
+            readonly local: true;
+            readonly reason: "DashboardGrid cell-layout editing contract (#1397), owner-approved lab API.";
+        }, {
+            readonly field: "rowHeight";
+            readonly local: true;
+            readonly reason: "DashboardGrid cell-layout editing contract (#1397), owner-approved lab API.";
+        }, {
+            readonly field: "editable";
+            readonly local: true;
+            readonly reason: "DashboardGrid cell-layout editing contract (#1397), owner-approved lab API.";
+        }];
+    };
+    readonly DashboardGridItemProp: {
+        readonly group: "layout";
+        readonly file: "components/dashboard-grid.prop.ts";
+        readonly vocabulary: readonly [{
+            readonly field: "id";
+            readonly local: true;
+            readonly reason: "Persisted grid cell coordinate or identity.";
+        }, {
+            readonly field: "x";
+            readonly local: true;
+            readonly reason: "Persisted grid cell coordinate or identity.";
+        }, {
+            readonly field: "y";
+            readonly local: true;
+            readonly reason: "Persisted grid cell coordinate or identity.";
+        }, {
+            readonly field: "w";
+            readonly local: true;
+            readonly reason: "Persisted grid cell coordinate or identity.";
+        }, {
+            readonly field: "h";
+            readonly local: true;
+            readonly reason: "Persisted grid cell coordinate or identity.";
+        }];
+    };
     readonly AppProviderProp: {
         readonly group: "app";
         readonly file: "components/app.prop.ts";
@@ -2319,7 +2377,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly LineChartProp: {
         readonly group: "data-display";
         readonly file: "components/charts.prop.ts";
-        readonly vocabulary: readonly ["LabelProp", "DescriptionProp", "SizeProp", "EmptyMessageProp", "ClassNameProp", "IdProp", {
+        readonly vocabulary: readonly [{
+            readonly field: "onDatumSelect";
+            readonly local: true;
+            readonly reason: "Pointer and keyboard datum selection action, independent of dashboard state.";
+        }, "LabelProp", "DescriptionProp", "SizeProp", "EmptyMessageProp", "ClassNameProp", "IdProp", {
             readonly field: "data";
             readonly local: true;
             readonly reason: "Chart row data (category + value per series).";
@@ -2372,7 +2434,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly BarChartProp: {
         readonly group: "data-display";
         readonly file: "components/charts.prop.ts";
-        readonly vocabulary: readonly ["LabelProp", "DescriptionProp", "SizeProp", "EmptyMessageProp", "ClassNameProp", "IdProp", {
+        readonly vocabulary: readonly [{
+            readonly field: "onDatumSelect";
+            readonly local: true;
+            readonly reason: "Pointer and keyboard datum selection action, independent of dashboard state.";
+        }, "LabelProp", "DescriptionProp", "SizeProp", "EmptyMessageProp", "ClassNameProp", "IdProp", {
             readonly field: "data";
             readonly local: true;
             readonly reason: "Chart row data (category + value per series).";
@@ -2462,7 +2528,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly HeatmapChartProp: {
         readonly group: "data-display";
         readonly file: "components/charts.prop.ts";
-        readonly vocabulary: readonly ["LabelProp", "DescriptionProp", "SizeProp", "EmptyMessageProp", "ClassNameProp", "IdProp", {
+        readonly vocabulary: readonly [{
+            readonly field: "onDatumSelect";
+            readonly local: true;
+            readonly reason: "Pointer and keyboard datum selection action, independent of dashboard state.";
+        }, "LabelProp", "DescriptionProp", "SizeProp", "EmptyMessageProp", "ClassNameProp", "IdProp", {
             readonly field: "rows";
             readonly local: true;
             readonly reason: "Row categories (y axis) — key + translated label.";
@@ -2499,7 +2569,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly AreaChartProp: {
         readonly group: "data-display";
         readonly file: "components/charts.prop.ts";
-        readonly vocabulary: readonly ["LabelProp", "DescriptionProp", "SizeProp", "EmptyMessageProp", "ClassNameProp", "IdProp", {
+        readonly vocabulary: readonly [{
+            readonly field: "onDatumSelect";
+            readonly local: true;
+            readonly reason: "Pointer and keyboard datum selection action, independent of dashboard state.";
+        }, "LabelProp", "DescriptionProp", "SizeProp", "EmptyMessageProp", "ClassNameProp", "IdProp", {
             readonly field: "data";
             readonly local: true;
             readonly reason: "Chart row data (category + value per series).";
@@ -2556,7 +2630,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly PieChartProp: {
         readonly group: "data-display";
         readonly file: "components/charts.prop.ts";
-        readonly vocabulary: readonly ["LabelProp", "DescriptionProp", "SizeProp", "EmptyMessageProp", "ClassNameProp", "IdProp", {
+        readonly vocabulary: readonly [{
+            readonly field: "onDatumSelect";
+            readonly local: true;
+            readonly reason: "Pointer and keyboard datum selection action, independent of dashboard state.";
+        }, "LabelProp", "DescriptionProp", "SizeProp", "EmptyMessageProp", "ClassNameProp", "IdProp", {
             readonly field: "data";
             readonly local: true;
             readonly reason: "Chart row data (one slice per row).";

package/dist/props/registry.js

@@ -717,6 +717,60 @@ const VOCABULARY_REGISTRY = {
   }
 };
 const COMPONENT_PROP_REGISTRY = {
+  DashboardGridProp: {
+    group: "layout",
+    file: "components/dashboard-grid.prop.ts",
+    vocabulary: [
+      "ClassNameProp",
+      "IdProp",
+      {
+        field: "items",
+        local: true,
+        reason: "DashboardGrid cell-layout editing contract (#1397), owner-approved lab API."
+      },
+      {
+        field: "layout",
+        local: true,
+        reason: "DashboardGrid cell-layout editing contract (#1397), owner-approved lab API."
+      },
+      {
+        field: "defaultLayout",
+        local: true,
+        reason: "DashboardGrid cell-layout editing contract (#1397), owner-approved lab API."
+      },
+      {
+        field: "onLayoutChange",
+        local: true,
+        reason: "DashboardGrid cell-layout editing contract (#1397), owner-approved lab API."
+      },
+      {
+        field: "columns",
+        local: true,
+        reason: "DashboardGrid cell-layout editing contract (#1397), owner-approved lab API."
+      },
+      {
+        field: "rowHeight",
+        local: true,
+        reason: "DashboardGrid cell-layout editing contract (#1397), owner-approved lab API."
+      },
+      {
+        field: "editable",
+        local: true,
+        reason: "DashboardGrid cell-layout editing contract (#1397), owner-approved lab API."
+      }
+    ]
+  },
+  DashboardGridItemProp: {
+    group: "layout",
+    file: "components/dashboard-grid.prop.ts",
+    vocabulary: [
+      { field: "id", local: true, reason: "Persisted grid cell coordinate or identity." },
+      { field: "x", local: true, reason: "Persisted grid cell coordinate or identity." },
+      { field: "y", local: true, reason: "Persisted grid cell coordinate or identity." },
+      { field: "w", local: true, reason: "Persisted grid cell coordinate or identity." },
+      { field: "h", local: true, reason: "Persisted grid cell coordinate or identity." }
+    ]
+  },
   AppProviderProp: { group: "app", file: "components/app.prop.ts", vocabulary: ["ChildrenProp"] },
   ThemeScopeProp: {
     group: "app",
@@ -2843,6 +2897,11 @@ const COMPONENT_PROP_REGISTRY = {
     group: "data-display",
     file: "components/charts.prop.ts",
     vocabulary: [
+      {
+        field: "onDatumSelect",
+        local: true,
+        reason: "Pointer and keyboard datum selection action, independent of dashboard state."
+      },
       "LabelProp",
       "DescriptionProp",
       "SizeProp",
@@ -2879,6 +2938,11 @@ const COMPONENT_PROP_REGISTRY = {
     group: "data-display",
     file: "components/charts.prop.ts",
     vocabulary: [
+      {
+        field: "onDatumSelect",
+        local: true,
+        reason: "Pointer and keyboard datum selection action, independent of dashboard state."
+      },
       "LabelProp",
       "DescriptionProp",
       "SizeProp",
@@ -2952,6 +3016,11 @@ const COMPONENT_PROP_REGISTRY = {
     group: "data-display",
     file: "components/charts.prop.ts",
     vocabulary: [
+      {
+        field: "onDatumSelect",
+        local: true,
+        reason: "Pointer and keyboard datum selection action, independent of dashboard state."
+      },
       "LabelProp",
       "DescriptionProp",
       "SizeProp",
@@ -2988,6 +3057,11 @@ const COMPONENT_PROP_REGISTRY = {
     group: "data-display",
     file: "components/charts.prop.ts",
     vocabulary: [
+      {
+        field: "onDatumSelect",
+        local: true,
+        reason: "Pointer and keyboard datum selection action, independent of dashboard state."
+      },
       "LabelProp",
       "DescriptionProp",
       "SizeProp",
@@ -3025,6 +3099,11 @@ const COMPONENT_PROP_REGISTRY = {
     group: "data-display",
     file: "components/charts.prop.ts",
     vocabulary: [
+      {
+        field: "onDatumSelect",
+        local: true,
+        reason: "Pointer and keyboard datum selection action, independent of dashboard state."
+      },
       "LabelProp",
       "DescriptionProp",
       "SizeProp",

package/dist/styles/chart-layout.css

@@ -326,3 +326,31 @@
     calc(var(--radius) / var(--radius-ratio) / var(--radius-ratio))
   );
 }
+
+.ui-chart-datum,
+.ui-chart-heatmap-cell[data-interactive] {
+  cursor: pointer;
+}
+
+.ui-chart-datum:hover,
+.ui-chart-heatmap-cell[data-interactive]:hover {
+  outline: var(--focus-ring-width) solid hsl(var(--focus-ring-color, var(--ring)));
+  outline-offset: var(--focus-ring-offset);
+}
+
+.ui-chart-bar-hit {
+  width: max(var(--chart-mark-width, 0px), var(--touch-target-min));
+  height: max(var(--chart-mark-height, 0px), var(--touch-target-min));
+}
+
+.ui-chart-point-hit {
+  r: calc(var(--touch-target-min) / 2);
+}
+
+.ui-chart-canvas:has(.ui-chart-datum) .recharts-surface {
+  overflow: visible;
+}
+
+.ui-chart-canvas:has(.ui-chart-datum) .recharts-text {
+  direction: ltr;
+}

package/dist/styles/control.css

@@ -3921,3 +3921,85 @@
     }
   }
 }
+
+@layer components {
+  .ui-dashboard-grid,
+  .ui-dashboard-grid-items,
+  .ui-dashboard-grid-item,
+  .ui-dashboard-grid-content {
+    min-inline-size: 0;
+  }
+  .ui-dashboard-grid-items {
+    display: grid;
+    grid-template-columns: repeat(var(--dashboard-grid-columns, 1), minmax(0, 1fr));
+    grid-auto-rows: var(--dashboard-grid-row-height);
+    gap: var(--dashboard-grid-gap);
+  }
+  .ui-dashboard-grid-item {
+    position: relative;
+    border-radius: var(--dashboard-grid-item-radius);
+  }
+  .ui-dashboard-grid-surface {
+    display: flex;
+    flex-direction: column;
+    block-size: 100%;
+  }
+  .ui-dashboard-grid-item .ui-dashboard-grid-header {
+    padding-inline-start: calc(
+      var(--dashboard-grid-handle-size) + var(--dashboard-grid-handle-inset) * 2
+    );
+  }
+  .ui-dashboard-grid-items[data-stacked] {
+    grid-auto-rows: auto;
+  }
+  .ui-dashboard-grid-content {
+    flex: 1;
+    min-block-size: 0;
+    overflow: auto;
+  }
+  .ui-dashboard-grid-item[data-held] {
+    outline: var(--focus-ring-width) solid
+      hsl(var(--dashboard-grid-preview-ring-color, var(--ring)));
+    outline-offset: var(--focus-ring-offset);
+  }
+  .ui-dashboard-grid-move,
+  .ui-dashboard-grid-resize {
+    position: absolute;
+    z-index: 1;
+    inline-size: var(--dashboard-grid-handle-size);
+    block-size: var(--dashboard-grid-handle-size);
+    min-inline-size: var(--touch-target-min);
+    min-block-size: var(--touch-target-min);
+    touch-action: none;
+  }
+  .ui-dashboard-grid-move {
+    inset-block-start: var(--dashboard-grid-handle-inset);
+    inset-inline-start: var(--dashboard-grid-handle-inset);
+    cursor: grab;
+  }
+  .ui-dashboard-grid-resize {
+    inset-block-end: var(--dashboard-grid-handle-inset);
+    inset-inline-end: var(--dashboard-grid-handle-inset);
+    cursor: nwse-resize;
+    opacity: 0;
+  }
+  .ui-dashboard-grid-item:dir(rtl) .ui-dashboard-grid-resize {
+    cursor: nesw-resize;
+    transform: scaleX(-1);
+  }
+  .ui-dashboard-grid-item:hover .ui-dashboard-grid-resize,
+  .ui-dashboard-grid-item:focus-within .ui-dashboard-grid-resize {
+    opacity: 1;
+  }
+  .ui-dashboard-grid-item[data-held] .ui-dashboard-grid-move {
+    cursor: grabbing;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    .ui-dashboard-grid-item,
+    .ui-dashboard-grid-move,
+    .ui-dashboard-grid-resize {
+      transition: none;
+      animation: none;
+    }
+  }
+}

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "33.14.0",
+  "version": "33.16.0",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",
@@ -404,6 +404,15 @@
         "data-display-layout.css"
       ]
     },
+    "DashboardGrid": {
+      "layers": [
+        "control.css",
+        "toggle.css",
+        "card-layout.css",
+        "dialog-layout.css",
+        "navigation-layout.css"
+      ]
+    },
     "DataState": {
       "layers": [
         "layout.css",

package/dist/styles/navigation-layout.css

@@ -493,6 +493,8 @@
   }
 
   .ui-pagination {
+
+    padding-inline: 0;
     scroll-padding: calc(var(--focus-ring-weight) + var(--focus-outline-offset));
     max-inline-size: 100%;
     overflow-x: auto;

package/dist/styles/table-layout.css

@@ -646,6 +646,12 @@
     table-layout: fixed;
   }
 
+  .ui-data-table-surface[data-table-layout="fixed"]
+    [data-slot="table-cell"]:not(.ui-data-table-ellipsis) {
+    white-space: normal;
+    overflow-wrap: anywhere;
+  }
+
   .ui-data-table-scroll[data-scroll-y] {
     overflow-y: auto;
     max-block-size: var(--table-scroll-block-size, none);