@contractspec/lib.ui-kit-web 3.8.0 → 3.9.2

package/dist/browser/ui/data-table.js

@@ -736,6 +736,7 @@ function ResizeHandle({
   }, [column]);
   return /* @__PURE__ */ jsxDEV6("span", {
     role: "separator",
+    "aria-label": `Resize ${column.label} column`,
     "aria-orientation": "vertical",
     tabIndex: -1,
     className: "absolute inset-y-0 right-0 flex w-3 cursor-col-resize items-center justify-center",
@@ -748,6 +749,7 @@ function ResizeHandle({
 function renderHeaderContent(controller, column) {
   if (column.kind === "selection" && controller.selectionMode === "multiple") {
     return /* @__PURE__ */ jsxDEV6(Checkbox, {
+      "aria-label": "Select all rows",
       checked: controller.allRowsSelected || (controller.someRowsSelected ? "indeterminate" : false),
       onCheckedChange: (checked) => controller.toggleAllRowsSelected?.(Boolean(checked)),
       onClick: (event) => event.stopPropagation()
@@ -762,6 +764,7 @@ function renderCellContent(row, cell) {
     return null;
   if (cell.kind === "selection") {
     return /* @__PURE__ */ jsxDEV6(Checkbox, {
+      "aria-label": `Select row ${row.id}`,
       checked: row.isSelected,
       onCheckedChange: (checked) => row.toggleSelected?.(Boolean(checked))
     }, undefined, false, undefined, this);
@@ -771,6 +774,7 @@ function renderCellContent(row, cell) {
       variant: "ghost",
       size: "icon",
       className: "h-7 w-7",
+      "aria-label": row.isExpanded ? `Collapse row ${row.id}` : `Expand row ${row.id}`,
       onClick: () => row.toggleExpanded?.(),
       children: row.isExpanded ? /* @__PURE__ */ jsxDEV6(ChevronDown, {
         className: "h-4 w-4"

package/dist/browser/ui/data-table.parts.js

@@ -397,6 +397,7 @@ function ResizeHandle({
   }, [column]);
   return /* @__PURE__ */ jsxDEV4("span", {
     role: "separator",
+    "aria-label": `Resize ${column.label} column`,
     "aria-orientation": "vertical",
     tabIndex: -1,
     className: "absolute inset-y-0 right-0 flex w-3 cursor-col-resize items-center justify-center",
@@ -409,6 +410,7 @@ function ResizeHandle({
 function renderHeaderContent(controller, column) {
   if (column.kind === "selection" && controller.selectionMode === "multiple") {
     return /* @__PURE__ */ jsxDEV4(Checkbox, {
+      "aria-label": "Select all rows",
       checked: controller.allRowsSelected || (controller.someRowsSelected ? "indeterminate" : false),
       onCheckedChange: (checked) => controller.toggleAllRowsSelected?.(Boolean(checked)),
       onClick: (event) => event.stopPropagation()
@@ -423,6 +425,7 @@ function renderCellContent(row, cell) {
     return null;
   if (cell.kind === "selection") {
     return /* @__PURE__ */ jsxDEV4(Checkbox, {
+      "aria-label": `Select row ${row.id}`,
       checked: row.isSelected,
       onCheckedChange: (checked) => row.toggleSelected?.(Boolean(checked))
     }, undefined, false, undefined, this);
@@ -432,6 +435,7 @@ function renderCellContent(row, cell) {
       variant: "ghost",
       size: "icon",
       className: "h-7 w-7",
+      "aria-label": row.isExpanded ? `Collapse row ${row.id}` : `Expand row ${row.id}`,
       onClick: () => row.toggleExpanded?.(),
       children: row.isExpanded ? /* @__PURE__ */ jsxDEV4(ChevronDown, {
         className: "h-4 w-4"

package/dist/browser/ui/visualization/Visualization.js

@@ -334,6 +334,13 @@ echarts2.use([
   FunnelChart,
   MapChart
 ]);
+function canRenderCanvasCharts() {
+  if (typeof document === "undefined") {
+    return false;
+  }
+  const canvas = document.createElement("canvas");
+  return typeof canvas.getContext === "function" && canvas.getContext("2d") !== null;
+}
 function Visualization({
   model,
   className,
@@ -343,8 +350,9 @@ function Visualization({
   const chartRef = React2.useRef(null);
   const option = React2.useMemo(() => buildVisualizationEChartsOption(model), [model]);
   React2.useEffect(() => {
-    if (!shouldRenderEChart(model) || !chartRef.current)
+    if (!shouldRenderEChart(model) || !chartRef.current || !canRenderCanvasCharts()) {
       return;
+    }
     registerGeoMap(model);
     const chart = echarts2.init(chartRef.current, undefined, {
       renderer: "canvas"

package/dist/ui/data-table.js

@@ -731,6 +731,7 @@ function ResizeHandle({
   }, [column]);
   return /* @__PURE__ */ jsxDEV6("span", {
     role: "separator",
+    "aria-label": `Resize ${column.label} column`,
     "aria-orientation": "vertical",
     tabIndex: -1,
     className: "absolute inset-y-0 right-0 flex w-3 cursor-col-resize items-center justify-center",
@@ -743,6 +744,7 @@ function ResizeHandle({
 function renderHeaderContent(controller, column) {
   if (column.kind === "selection" && controller.selectionMode === "multiple") {
     return /* @__PURE__ */ jsxDEV6(Checkbox, {
+      "aria-label": "Select all rows",
       checked: controller.allRowsSelected || (controller.someRowsSelected ? "indeterminate" : false),
       onCheckedChange: (checked) => controller.toggleAllRowsSelected?.(Boolean(checked)),
       onClick: (event) => event.stopPropagation()
@@ -757,6 +759,7 @@ function renderCellContent(row, cell) {
     return null;
   if (cell.kind === "selection") {
     return /* @__PURE__ */ jsxDEV6(Checkbox, {
+      "aria-label": `Select row ${row.id}`,
       checked: row.isSelected,
       onCheckedChange: (checked) => row.toggleSelected?.(Boolean(checked))
     }, undefined, false, undefined, this);
@@ -766,6 +769,7 @@ function renderCellContent(row, cell) {
       variant: "ghost",
       size: "icon",
       className: "h-7 w-7",
+      "aria-label": row.isExpanded ? `Collapse row ${row.id}` : `Expand row ${row.id}`,
       onClick: () => row.toggleExpanded?.(),
       children: row.isExpanded ? /* @__PURE__ */ jsxDEV6(ChevronDown, {
         className: "h-4 w-4"

package/dist/ui/data-table.parts.js

@@ -392,6 +392,7 @@ function ResizeHandle({
   }, [column]);
   return /* @__PURE__ */ jsxDEV4("span", {
     role: "separator",
+    "aria-label": `Resize ${column.label} column`,
     "aria-orientation": "vertical",
     tabIndex: -1,
     className: "absolute inset-y-0 right-0 flex w-3 cursor-col-resize items-center justify-center",
@@ -404,6 +405,7 @@ function ResizeHandle({
 function renderHeaderContent(controller, column) {
   if (column.kind === "selection" && controller.selectionMode === "multiple") {
     return /* @__PURE__ */ jsxDEV4(Checkbox, {
+      "aria-label": "Select all rows",
       checked: controller.allRowsSelected || (controller.someRowsSelected ? "indeterminate" : false),
       onCheckedChange: (checked) => controller.toggleAllRowsSelected?.(Boolean(checked)),
       onClick: (event) => event.stopPropagation()
@@ -418,6 +420,7 @@ function renderCellContent(row, cell) {
     return null;
   if (cell.kind === "selection") {
     return /* @__PURE__ */ jsxDEV4(Checkbox, {
+      "aria-label": `Select row ${row.id}`,
       checked: row.isSelected,
       onCheckedChange: (checked) => row.toggleSelected?.(Boolean(checked))
     }, undefined, false, undefined, this);
@@ -427,6 +430,7 @@ function renderCellContent(row, cell) {
       variant: "ghost",
       size: "icon",
       className: "h-7 w-7",
+      "aria-label": row.isExpanded ? `Collapse row ${row.id}` : `Expand row ${row.id}`,
       onClick: () => row.toggleExpanded?.(),
       children: row.isExpanded ? /* @__PURE__ */ jsxDEV4(ChevronDown, {
         className: "h-4 w-4"

package/dist/ui/visualization/Visualization.js

@@ -329,6 +329,13 @@ echarts2.use([
   FunnelChart,
   MapChart
 ]);
+function canRenderCanvasCharts() {
+  if (typeof document === "undefined") {
+    return false;
+  }
+  const canvas = document.createElement("canvas");
+  return typeof canvas.getContext === "function" && canvas.getContext("2d") !== null;
+}
 function Visualization({
   model,
   className,
@@ -338,8 +345,9 @@ function Visualization({
   const chartRef = React2.useRef(null);
   const option = React2.useMemo(() => buildVisualizationEChartsOption(model), [model]);
   React2.useEffect(() => {
-    if (!shouldRenderEChart(model) || !chartRef.current)
+    if (!shouldRenderEChart(model) || !chartRef.current || !canRenderCanvasCharts()) {
       return;
+    }
     registerGeoMap(model);
     const chart = echarts2.init(chartRef.current, undefined, {
       renderer: "canvas"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contractspec/lib.ui-kit-web",
-  "version": "3.8.0",
+  "version": "3.9.2",
   "description": "Web UI components with Radix primitives",
   "keywords": [
     "contractspec",
@@ -31,9 +31,9 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@contractspec/lib.contracts-spec": "4.0.0",
-    "@contractspec/lib.presentation-runtime-core": "3.8.0",
-    "@contractspec/lib.ui-kit-core": "3.7.6",
+    "@contractspec/lib.contracts-spec": "4.1.2",
+    "@contractspec/lib.presentation-runtime-core": "3.8.3",
+    "@contractspec/lib.ui-kit-core": "3.7.8",
     "@hookform/resolvers": "5.2.2",
     "@radix-ui/react-accordion": "^1.2.11",
     "@radix-ui/react-alert-dialog": "^1.1.14",
@@ -96,12 +96,12 @@
     "typescript": "^5.9.3",
     "react": "19.2.0",
     "react-dom": "19.2.0",
-    "@contractspec/tool.typescript": "3.7.6",
+    "@contractspec/tool.typescript": "3.7.8",
     "@types/geojson": "^7946.0.14",
     "@sentry/nextjs": "^10.42.0",
     "maplibre-gl": "^5.20.2",
     "react-map-gl": "^8.0.4",
-    "@contractspec/tool.bun": "3.7.6"
+    "@contractspec/tool.bun": "3.7.8"
   },
   "exports": {
     ".": {