@elabs-ai/components-flow 4.1.0 → 4.2.0

package/dist/index.d.ts

@@ -762,7 +762,11 @@ interface LegendScaleProps {
     kind: "width" | "color";
     /** `[min, max]` of the underlying value the ramp represents. */
     domain: [number, number];
-    /** Formats a domain value for display at a tick. @default `(v) => v.toLocaleString()` */
+    /**
+     * Formats a domain value for display at a tick.
+     * @default the active `LocaleProvider` locale's `formatNumber` (host locale
+     * when no provider is mounted) — never a hardcoded `toLocaleString()`.
+     */
     format?: (value: number) => string;
     /**
      * Sample count for `kind: "width"`: `"minmax"` draws a min/max pair of

package/dist/index.js

@@ -1226,15 +1226,15 @@ function FlowMiniMap({
 
 // src/inspector-panel/inspector-panel.tsx
 import "react";
-import { Reveal, useCollapsiblePanel } from "@elabs-ai/components-ui";
+import { Reveal, useCollapsiblePanel, useLocale } from "@elabs-ai/components-ui";
 import { cn as cn7 } from "@elabs-ai/components-ui/lib/cn";
 import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var INSPECTOR_PANEL_WIDTH = "18rem";
 function InspectorPanel({
-  title = "Inspector",
+  title,
   children,
   onClose,
-  emptyMessage = "Select a node to see its details.",
+  emptyMessage,
   hasSelection = true,
   selectionKey,
   open,
@@ -1244,6 +1244,9 @@ function InspectorPanel({
   width = INSPECTOR_PANEL_WIDTH,
   className
 }) {
+  const { t } = useLocale();
+  const resolvedTitle = title ?? t("flow.inspectorPanel.title");
+  const resolvedEmptyMessage = emptyMessage ?? t("flow.inspectorPanel.emptyMessage");
   const panel = useCollapsiblePanel({
     side,
     open,
@@ -1272,12 +1275,12 @@ function InspectorPanel({
             className: cn7(panel.containerClassName, "absolute inset-y-0 flex h-full border-s"),
             children: /* @__PURE__ */ jsxs8("div", { className: "flex h-full w-full flex-col bg-card", children: [
               /* @__PURE__ */ jsxs8("div", { className: "flex items-center justify-between border-b px-4 py-3", children: [
-                /* @__PURE__ */ jsx11("h3", { className: "text-body font-semibold text-foreground", children: title }),
+                /* @__PURE__ */ jsx11("h3", { className: "text-body font-semibold text-foreground", children: resolvedTitle }),
                 onClose ? /* @__PURE__ */ jsx11(
                   "button",
                   {
                     type: "button",
-                    "aria-label": "Close inspector",
+                    "aria-label": t("flow.inspectorPanel.close"),
                     onClick: onClose,
                     className: "rounded-sm p-1 text-muted-foreground hover:text-foreground focus-ring",
                     children: /* @__PURE__ */ jsx11(
@@ -1308,7 +1311,7 @@ function InspectorPanel({
                   children
                 },
                 selectionKey
-              ) : /* @__PURE__ */ jsx11("div", { tabIndex: 0, className: "focus-ring flex-1 overflow-y-auto p-4 text-body", children: /* @__PURE__ */ jsx11("p", { className: "text-muted-foreground", children: emptyMessage }) })
+              ) : /* @__PURE__ */ jsx11("div", { tabIndex: 0, className: "focus-ring flex-1 overflow-y-auto p-4 text-body", children: /* @__PURE__ */ jsx11("p", { className: "text-muted-foreground", children: resolvedEmptyMessage }) })
             ] })
           }
         )
@@ -1318,6 +1321,7 @@ function InspectorPanel({
 }
 
 // src/legend/legend.tsx
+import { useLocale as useLocale2 } from "@elabs-ai/components-ui";
 import { cn as cn8 } from "@elabs-ai/components-ui/lib/cn";
 
 // src/flow-weighted-edge/weight-scale.ts
@@ -1357,7 +1361,6 @@ function computeEdgeWeightScale(edges, opts = {}) {
 
 // src/legend/legend.tsx
 import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
-var defaultFormat = (value) => value.toLocaleString();
 function Legend(props) {
   if (props.variant === "scale") {
     return /* @__PURE__ */ jsx12(LegendScale, { ...props });
@@ -1406,13 +1409,15 @@ function scaleKindLabel(kind) {
 function LegendScale({
   kind,
   domain,
-  format = defaultFormat,
+  format,
   ticks = "minmax",
   title,
   className
 }) {
+  const { formatNumber } = useLocale2();
+  const format_ = format ?? formatNumber;
   const [min, max] = domain;
-  const ariaLabel = `Edge ${scaleKindLabel(kind)} scale, ${format(min)} to ${format(max)}, minimum to maximum`;
+  const ariaLabel = `Edge ${scaleKindLabel(kind)} scale, ${format_(min)} to ${format_(max)}, minimum to maximum`;
   return /* @__PURE__ */ jsxs9(
     "div",
     {
@@ -1426,7 +1431,7 @@ function LegendScale({
       tabIndex: 0,
       children: [
         title ? /* @__PURE__ */ jsx12("div", { className: "text-body font-medium text-foreground", children: title }) : null,
-        kind === "width" ? /* @__PURE__ */ jsx12(LegendScaleWidth, { domain, format, ticks }) : /* @__PURE__ */ jsx12(LegendScaleColor, { domain, format })
+        kind === "width" ? /* @__PURE__ */ jsx12(LegendScaleWidth, { domain, format: format_, ticks }) : /* @__PURE__ */ jsx12(LegendScaleColor, { domain, format: format_ })
       ]
     }
   );