@elabs-ai/components-flow 4.1.0 → 5.0.0

package/src/inspector-panel/inspector-panel.tsx

@@ -1,5 +1,5 @@
 import { type CSSProperties, type ReactNode } from "react";
-import { Reveal, useCollapsiblePanel } from "@elabs-ai/components-ui";
+import { Reveal, useCollapsiblePanel, useLocale } from "@elabs-ai/components-ui";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
 
 const INSPECTOR_PANEL_WIDTH = "18rem";
@@ -41,10 +41,10 @@ export interface InspectorPanelProps {
  * motion safe) when `open`/`defaultOpen` drive it.
  */
 export function InspectorPanel({
-  title = "Inspector",
+  title,
   children,
   onClose,
-  emptyMessage = "Select a node to see its details.",
+  emptyMessage,
   hasSelection = true,
   selectionKey,
   open,
@@ -54,6 +54,9 @@ export function InspectorPanel({
   width = INSPECTOR_PANEL_WIDTH,
   className,
 }: InspectorPanelProps) {
+  const { t } = useLocale();
+  const resolvedTitle = title ?? t("flow.inspectorPanel.title");
+  const resolvedEmptyMessage = emptyMessage ?? t("flow.inspectorPanel.emptyMessage");
   const panel = useCollapsiblePanel({
     side,
     open,
@@ -84,11 +87,11 @@ export function InspectorPanel({
         {/* Detail-tier surface: raised `card` — robust across themes (#193). */}
         <div className="flex h-full w-full flex-col bg-card">
           <div className="flex items-center justify-between border-b px-4 py-3">
-            <h3 className="text-body font-semibold text-foreground">{title}</h3>
+            <h3 className="text-body font-semibold text-foreground">{resolvedTitle}</h3>
             {onClose ? (
               <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"
               >
@@ -129,7 +132,7 @@ export function InspectorPanel({
             </Reveal>
           ) : (
             <div tabIndex={0} className="focus-ring flex-1 overflow-y-auto p-4 text-body">
-              <p className="text-muted-foreground">{emptyMessage}</p>
+              <p className="text-muted-foreground">{resolvedEmptyMessage}</p>
             </div>
           )}
         </div>

package/src/legend/legend.test.tsx

@@ -1,3 +1,4 @@
+import { LocaleProvider } from "@elabs-ai/components-ui";
 import { cleanup, render, screen } from "@testing-library/react";
 import { afterEach, describe, expect, it } from "vitest";
 import { computeEdgeWeightScale, type WeightedEdgeLike } from "../flow-weighted-edge/weight-scale";
@@ -212,4 +213,14 @@ describe('Legend variant="scale", kind="color"', () => {
     });
     expect(group).toHaveAttribute("tabindex", "0");
   });
+
+  it("formats the default tick label with the active LocaleProvider locale, not the host locale", () => {
+    render(
+      <LocaleProvider locale="de-DE">
+        <Legend variant="scale" kind="color" domain={[0, 1000]} />
+      </LocaleProvider>,
+    );
+    // de-DE groups thousands with a period, never a comma.
+    expect(screen.getByText("1.000")).toBeInTheDocument();
+  });
 });

package/src/legend/legend.tsx

@@ -1,3 +1,4 @@
+import { useLocale } from "@elabs-ai/components-ui";
 import { cn } from "@elabs-ai/components-ui/lib/cn";
 import { computeEdgeWeightScale, type WeightedEdgeLike } from "../flow-weighted-edge/weight-scale";
 
@@ -33,7 +34,11 @@ export 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
@@ -51,8 +56,6 @@ export interface LegendScaleProps {
 
 export type LegendProps = LegendCategoricalProps | LegendScaleProps;
 
-const defaultFormat = (value: number): string => value.toLocaleString();
-
 /**
  * Small legend mapping colors/types to labels for a canvas or chart
  * (`variant: "categorical"`, the default), or — via `variant="scale"` — a
@@ -121,16 +124,21 @@ function scaleKindLabel(kind: "width" | "color"): string {
 function LegendScale({
   kind,
   domain,
-  format = defaultFormat,
+  format,
   ticks = "minmax",
   title,
   className,
 }: LegendScaleProps) {
+  // The active `LocaleProvider` locale, not a hardcoded `toLocaleString()` —
+  // otherwise a `de-DE`-configured app still reads the domain ticks in the
+  // browser's host locale.
+  const { formatNumber } = useLocale();
+  const format_ = format ?? formatNumber;
   const [min, max] = domain;
   // e.g. "Edge width scale, 2 to 48, minimum to maximum" — a single accessible
   // name for the whole reading key, since it is one keyboard tab stop, not one
   // per tick.
-  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 (
     <div
@@ -145,9 +153,9 @@ function LegendScale({
     >
       {title ? <div className="text-body font-medium text-foreground">{title}</div> : null}
       {kind === "width" ? (
-        <LegendScaleWidth domain={domain} format={format} ticks={ticks} />
+        <LegendScaleWidth domain={domain} format={format_} ticks={ticks} />
       ) : (
-        <LegendScaleColor domain={domain} format={format} />
+        <LegendScaleColor domain={domain} format={format_} />
       )}
     </div>
   );

package/src/templates-flow-workspace.stories.tsx

@@ -10,8 +10,10 @@ import type { Meta, StoryObj } from "@storybook/react-vite";
 import { useState } from "react";
 import {
   Button,
+  NavUser,
   Sidebar,
   SidebarContent,
+  SidebarFooter,
   SidebarGroup,
   SidebarGroupContent,
   SidebarHeader,
@@ -131,9 +133,12 @@ function FlowWorkspaceTemplate() {
             </SidebarGroupContent>
           </SidebarGroup>
         </SidebarContent>
+        <SidebarFooter>
+          <NavUser user={{ name: "Avery Rao", email: "avery@example.com" }} />
+        </SidebarFooter>
       </Sidebar>
       <SidebarInset className="flex flex-col overflow-hidden">
-        <header className="flex h-14 shrink-0 items-center gap-2 border-b px-4">
+        <header className="flex h-header shrink-0 items-center gap-2 border-b px-4">
           <SidebarTrigger />
           <h1 className="text-body font-medium capitalize">{active}</h1>
         </header>
@@ -159,7 +164,7 @@ function FlowWorkspaceTemplate() {
 }
 
 const meta = {
-  title: "Patterns/Templates/Flow Workspace",
+  title: "Patterns/Templates/Starters/Flow Workspace",
   parameters: { layout: "fullscreen" },
   tags: ["autodocs"],
 } satisfies Meta;