@watt-ui/react 0.1.0 → 0.1.2

package/src/components/alarm-feed.tsx

@@ -1,15 +1,20 @@
 "use client";
 import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import type { ForwardedRef, RefAttributes, ReactElement } from "react";
-import { forwardRef } from "react";
+import { forwardRef, useEffect } from "react";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { useRef } from "react";
 import { cx, part } from "../internal.js";
-import type { AlarmEvent, Density } from "../types.js";
-export interface AlarmFeedProps<T extends AlarmEvent = AlarmEvent> extends Omit<
-  React.HTMLAttributes<HTMLDivElement>,
-  "children"
-> {
+import type { AlarmEvent, Density, MotionProps } from "../types.js";
+import {
+  MotionProvider,
+  motionStyle,
+  highlightChange,
+  useMotion,
+} from "../motion.js";
+export interface AlarmFeedProps<T extends AlarmEvent = AlarmEvent>
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">,
+    MotionProps {
   items: readonly T[];
   children: (item: T, index: number) => React.ReactNode;
   density?: Density;
@@ -27,6 +32,7 @@ function Root<T extends AlarmEvent>(
     rowHeight = 80,
     height = 400,
     empty,
+    motion,
     className,
     style,
     ...props
@@ -35,6 +41,28 @@ function Root<T extends AlarmEvent>(
 ) {
   const host = useRef<HTMLDivElement>(null);
   const hostRef = useComposedRefs(host, forwardedRef);
+  const previousItems = useRef(items);
+  const resolvedMotion = useMotion(motion);
+  const duration =
+    typeof resolvedMotion === "object" ? resolvedMotion.duration : undefined;
+  const easing =
+    typeof resolvedMotion === "object" ? resolvedMotion.easing : undefined;
+  useEffect(() => {
+    const old = previousItems.current;
+    previousItems.current = items;
+    if (old === items || resolvedMotion === false || !host.current) return;
+    const known = new Set(old.map((item) => item.id));
+    const added = new Set(
+      items.filter((item) => !known.has(item.id)).map((item) => item.id),
+    );
+    const stop: (() => void)[] = [];
+    for (const element of host.current.querySelectorAll<HTMLElement>(
+      "[data-slot=alarm-feed-item]",
+    ))
+      if (added.has(element.dataset.alarmId!))
+        stop.push(highlightChange(element));
+    return () => stop.forEach((cancel) => cancel());
+  }, [items, resolvedMotion === false, duration, easing]);
   const virtualizer = useVirtualizer({
     count: items.length,
     initialRect: { width: 0, height: virtualized ? height : 0 },
@@ -48,62 +76,69 @@ function Root<T extends AlarmEvent>(
     ? virtualizer.getVirtualItems()
     : items.map((item, index) => ({ key: item.id, index, start: 0 }));
   return (
-    <div
-      {...props}
-      ref={hostRef}
-      tabIndex={props.tabIndex ?? (virtualized ? 0 : undefined)}
-      data-slot="alarm-feed"
-      data-density={density}
-      className={cx("watt-root overflow-auto", className)}
-      style={{ ...(virtualized ? { height } : {}), ...style }}
-    >
-      {!items.length ? (
-        empty
-      ) : (
-        <div
-          role="list"
-          style={
-            virtualized
-              ? { height: virtualizer.getTotalSize(), position: "relative" }
-              : undefined
-          }
-        >
-          {rows.map((row) => {
-            const item = items[row.index]!;
-            return (
-              <div
-                role="listitem"
-                key={row.key}
-                data-index={row.index}
-                ref={virtualized ? virtualizer.measureElement : undefined}
-                aria-posinset={row.index + 1}
-                aria-setsize={items.length}
-                data-slot="alarm-feed-item"
-                data-severity={item.severity}
-                data-state={item.status}
-                className={cx(
-                  "border-b border-[var(--watt-border)] last:border-0",
-                  density === "compact" ? "py-2.5" : "py-4",
-                )}
-                style={
-                  virtualized
-                    ? {
-                        position: "absolute",
-                        top: 0,
-                        left: 0,
-                        width: "100%",
-                        transform: `translateY(${row.start}px)`,
-                      }
-                    : undefined
-                }
-              >
-                {children(item, row.index)}
-              </div>
-            );
-          })}
-        </div>
-      )}
-    </div>
+    <MotionProvider motion={motion}>
+      <div
+        {...props}
+        ref={hostRef}
+        tabIndex={props.tabIndex ?? (virtualized ? 0 : undefined)}
+        data-slot="alarm-feed"
+        data-density={density}
+        className={cx("watt-root overflow-auto", className)}
+        style={{
+          ...(virtualized ? { height } : {}),
+          ...style,
+          ...motionStyle(motion),
+        }}
+      >
+        {!items.length ? (
+          empty
+        ) : (
+          <div
+            role="list"
+            style={
+              virtualized
+                ? { height: virtualizer.getTotalSize(), position: "relative" }
+                : undefined
+            }
+          >
+            {rows.map((row) => {
+              const item = items[row.index]!;
+              return (
+                <div
+                  role="listitem"
+                  key={row.key}
+                  data-index={row.index}
+                  ref={virtualized ? virtualizer.measureElement : undefined}
+                  aria-posinset={row.index + 1}
+                  aria-setsize={items.length}
+                  data-slot="alarm-feed-item"
+                  data-alarm-id={item.id}
+                  data-severity={item.severity}
+                  data-state={item.status}
+                  className={cx(
+                    "watt-motion border-b border-[var(--watt-border)] last:border-0",
+                    density === "compact" ? "py-2.5" : "py-4",
+                  )}
+                  style={
+                    virtualized
+                      ? {
+                          position: "absolute",
+                          top: 0,
+                          left: 0,
+                          width: "100%",
+                          transform: `translateY(${row.start}px)`,
+                        }
+                      : undefined
+                  }
+                >
+                  {children(item, row.index)}
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </div>
+    </MotionProvider>
   );
 }
 const Severity = forwardRef<

package/src/components/asset-tree.tsx

@@ -11,8 +11,10 @@ import {
 } from "@headless-tree/core";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { cx } from "../internal.js";
+import { Slot } from "@radix-ui/react-slot";
+import { MotionProvider, motionStyle } from "../motion.js";
 import type { ForwardedRef, RefAttributes, ReactElement } from "react";
-import type { Density, PlantAsset } from "../types.js";
+import type { Density, MotionProps, PartProps, PlantAsset } from "../types.js";
 export interface AssetTreeRow<T> {
   item: T;
   level: number;
@@ -30,10 +32,9 @@ export type AssetTreeItem<T extends PlantAsset> =
         ? never
         : AssetTreeItem<C>
       : never);
-export interface AssetTreeProps<T extends PlantAsset = PlantAsset> extends Omit<
-  React.HTMLAttributes<HTMLDivElement>,
-  "children"
-> {
+export interface AssetTreeProps<T extends PlantAsset = PlantAsset>
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">,
+    MotionProps {
   items: readonly T[];
   children: (row: AssetTreeRow<AssetTreeItem<T>>) => React.ReactNode;
   expandedIds?: string[];
@@ -64,6 +65,7 @@ function Root<T extends PlantAsset>(
     height = 360,
     rowHeight = density === "compact" ? 36 : 48,
     empty,
+    motion,
     className,
     style,
     ...props
@@ -203,7 +205,8 @@ function Root<T extends PlantAsset>(
         data-slot="asset-tree-row"
         data-index={index}
         data-selected={item.isSelected() || undefined}
-        className="absolute top-0 left-0 flex w-full items-center border-b border-[var(--watt-border)] outline-offset-[-2px] data-[selected]:bg-[var(--watt-subtle)] focus-visible:outline-2 focus-visible:outline-[var(--watt-accent)]"
+        data-expanded={item.isExpanded()}
+        className="watt-motion absolute top-0 left-0 flex w-full items-center border-b border-[var(--watt-border)] outline-offset-[-2px] data-[selected]:bg-[var(--watt-subtle)] focus-visible:outline-2 focus-visible:outline-[var(--watt-accent)]"
         style={{
           height: rowHeight,
           paddingInlineStart: item.getItemMeta().level * 20,
@@ -224,34 +227,56 @@ function Root<T extends PlantAsset>(
     );
   };
   return (
-    <div
-      {...containerProps}
-      {...props}
-      ref={hostRef}
-      data-slot="asset-tree"
-      data-density={density}
-      className={cx("watt-root overflow-auto text-sm", className)}
-      style={{ height, ...style }}
-    >
-      {!items.length ? (
-        empty
-      ) : (
-        <div
-          role="presentation"
-          style={{ height: virtualizer.getTotalSize(), position: "relative" }}
-        >
-          {virtualizer.getVirtualItems().map((row) => {
-            const item = visible[row.index];
-            return item && indexed.has(item.getId())
-              ? renderRow(item, row.index, row.start)
-              : null;
-          })}
-        </div>
-      )}
-    </div>
+    <MotionProvider motion={motion}>
+      <div
+        {...containerProps}
+        {...props}
+        ref={hostRef}
+        data-slot="asset-tree"
+        data-density={density}
+        className={cx("watt-root overflow-auto text-sm", className)}
+        style={{ height, ...style, ...motionStyle(motion) }}
+      >
+        {!items.length ? (
+          empty
+        ) : (
+          <div
+            role="presentation"
+            style={{ height: virtualizer.getTotalSize(), position: "relative" }}
+          >
+            {virtualizer.getVirtualItems().map((row) => {
+              const item = visible[row.index];
+              return item && indexed.has(item.getId())
+                ? renderRow(item, row.index, row.start)
+                : null;
+            })}
+          </div>
+        )}
+      </div>
+    </MotionProvider>
   );
 }
+export interface AssetTreeIndicatorProps extends PartProps {
+  expanded: boolean;
+}
+const Indicator = forwardRef<HTMLElement, AssetTreeIndicatorProps>(
+  ({ expanded, asChild, className, style, ...props }, ref) => {
+    const Component = asChild ? Slot : "span";
+    return (
+      <Component
+        {...props}
+        ref={ref as never}
+        aria-hidden={props["aria-hidden"] ?? true}
+        data-slot="asset-tree-indicator"
+        data-expanded={expanded}
+        className={cx("watt-motion inline-flex shrink-0", className)}
+        style={{ transform: `rotate(${expanded ? 90 : 0}deg)`, ...style }}
+      />
+    );
+  },
+);
 export const AssetTree = {
+  Indicator,
   Root: forwardRef(Root) as <T extends PlantAsset = PlantAsset>(
     props: AssetTreeProps<T> & RefAttributes<HTMLDivElement>,
   ) => ReactElement,

package/src/components/battery-soc.tsx

@@ -2,7 +2,8 @@
 import { createContext, forwardRef, useContext } from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cx, part } from "../internal.js";
-import type { PartProps, RootProps, Density } from "../types.js";
+import type { PartProps, RootProps, Density, MotionProps } from "../types.js";
+import { MotionProvider, motionStyle } from "../motion.js";
 const Context = createContext<{
   value: number | null;
   density: Density;
@@ -13,25 +14,39 @@ function useSOC() {
     throw new Error("BatterySOC parts require BatterySOC.Root");
   return value;
 }
-export interface BatterySOCProps extends RootProps {
+export interface BatterySOCProps extends RootProps, MotionProps {
   value: number | null;
 }
 const Root = forwardRef<HTMLElement, BatterySOCProps>(
-  ({ value, asChild, density = "comfortable", className, ...props }, ref) => {
+  (
+    {
+      value,
+      asChild,
+      density = "comfortable",
+      motion,
+      className,
+      style,
+      ...props
+    },
+    ref,
+  ) => {
     const Component = asChild ? Slot : "div";
     const valid =
       value !== null && Number.isFinite(value) && value >= 0 && value <= 100;
     return (
-      <Context.Provider value={{ value: valid ? value : null, density }}>
-        <Component
-          {...props}
-          ref={ref as never}
-          data-slot="battery-soc"
-          data-invalid={!valid || undefined}
-          data-density={density}
-          className={cx("watt-root flex flex-col gap-3", className)}
-        />
-      </Context.Provider>
+      <MotionProvider motion={motion}>
+        <Context.Provider value={{ value: valid ? value : null, density }}>
+          <Component
+            {...props}
+            ref={ref as never}
+            data-slot="battery-soc"
+            data-invalid={!valid || undefined}
+            data-density={density}
+            style={{ ...style, ...motionStyle(motion) }}
+            className={cx("watt-root flex flex-col gap-3", className)}
+          />
+        </Context.Provider>
+      </MotionProvider>
     );
   },
 );
@@ -68,7 +83,7 @@ const Fill = forwardRef<HTMLElement, PartProps>(
         aria-hidden="true"
         data-slot="battery-soc-fill"
         className={cx(
-          "h-full bg-[var(--watt-accent)] transition-[width] duration-500 motion-reduce:transition-none",
+          "watt-motion watt-soc-fill h-full bg-[var(--watt-accent)]",
           className,
         )}
         style={{ width: `${value ?? 0}%`, ...style }}

package/src/components/data-freshness.tsx

@@ -1,9 +1,17 @@
 "use client";
-import { createContext, forwardRef, useContext } from "react";
+import { createContext, forwardRef, useContext, useRef } from "react";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { Slot } from "@radix-ui/react-slot";
 import { cx, part, useNow } from "../internal.js";
 import { parseTimestamp, formatTime } from "../domain.js";
-import type { DataQuality, PartProps, RootProps, Timestamp } from "../types.js";
+import type {
+  DataQuality,
+  MotionProps,
+  PartProps,
+  RootProps,
+  Timestamp,
+} from "../types.js";
+import { MotionProvider, motionStyle, useChangeFeedback } from "../motion.js";
 interface Freshness {
   timestamp: Timestamp | null;
   quality?: DataQuality;
@@ -14,7 +22,7 @@ function useFreshness() {
   if (!ctx) throw new Error("DataFreshness parts require DataFreshness.Root");
   return ctx;
 }
-export interface DataFreshnessProps extends RootProps, Freshness {}
+export interface DataFreshnessProps extends RootProps, Freshness, MotionProps {}
 const Root = forwardRef<HTMLElement, DataFreshnessProps>(
   (
     {
@@ -23,29 +31,38 @@ const Root = forwardRef<HTMLElement, DataFreshnessProps>(
       density = "comfortable",
       asChild,
       className,
+      motion,
+      style,
       ...props
     },
     ref,
   ) => {
+    const host = useRef<HTMLElement>(null);
+    const hostRef = useComposedRefs(host, ref);
+    useChangeFeedback(host, quality, motion);
     const Component = asChild ? Slot : "span";
     return (
-      <Context.Provider value={{ timestamp, quality }}>
-        <Component
-          {...props}
-          ref={ref as never}
-          data-slot="data-freshness"
-          data-density={density}
-          data-quality={quality}
-          className={cx(
-            "watt-root inline-flex items-center gap-2 text-sm text-[var(--watt-muted)] data-[density=compact]:gap-1 data-[density=compact]:text-xs",
-            className,
-          )}
-        />
-      </Context.Provider>
+      <MotionProvider motion={motion}>
+        <Context.Provider value={{ timestamp, quality }}>
+          <Component
+            {...props}
+            ref={hostRef as never}
+            data-slot="data-freshness"
+            data-density={density}
+            data-quality={quality}
+            style={{ ...style, ...motionStyle(motion) }}
+            className={cx(
+              "watt-root watt-motion inline-flex items-center gap-2 text-sm text-[var(--watt-muted)] data-[density=compact]:gap-1 data-[density=compact]:text-xs",
+              className,
+            )}
+          />
+        </Context.Provider>
+      </MotionProvider>
     );
   },
 );
-export interface FreshnessTimeProps extends React.ComponentPropsWithoutRef<"time"> {
+export interface FreshnessTimeProps
+  extends React.ComponentPropsWithoutRef<"time"> {
   timeZone: string;
   locale?: string;
   formatter?: (timestamp: number) => React.ReactNode;

package/src/components/energy-flow.tsx

@@ -115,6 +115,29 @@ const Root = forwardRef<HTMLElement, EnergyFlowProps>(
       [measure],
     );
     const hostRef = useComposedRefs(host, ref);
+    useEffect(() => {
+      const root = host.current;
+      if (!root) return;
+      let visible = true;
+      const syncMotion = () => {
+        root.style.setProperty(
+          "--watt-flow-play-state",
+          visible && !document.hidden ? "running" : "paused",
+        );
+      };
+      const visibility = new IntersectionObserver(([entry]) => {
+        visible = entry?.isIntersecting ?? false;
+        syncMotion();
+      });
+      visibility.observe(root);
+      document.addEventListener("visibilitychange", syncMotion);
+      syncMotion();
+      return () => {
+        visibility.disconnect();
+        document.removeEventListener("visibilitychange", syncMotion);
+        root.style.removeProperty("--watt-flow-play-state");
+      };
+    }, []);
     useEffect(() => {
       observer.current = new ResizeObserver(measure);
       if (host.current) observer.current.observe(host.current);
@@ -266,7 +289,7 @@ function Edge({
   const duration = 3 / (settings.speed || 1);
   const motionStyle = {
     animationDuration: `${duration}s`,
-    animationPlayState: settings.speed === 0 ? "paused" : "running",
+    animationPlayState: settings.speed === 0 ? "paused" : "var(--watt-flow-play-state, running)",
   } as React.CSSProperties;
   return (
     <LabelContext.Provider value={geometry.middle}>

package/src/components/power-metric.tsx

@@ -1,27 +1,36 @@
 "use client";
-import { forwardRef } from "react";
+import { forwardRef, useRef } from "react";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { Slot } from "@radix-ui/react-slot";
 import { cx, part } from "../internal.js";
 import { formatNumber } from "../domain.js";
-import type { PartProps, RootProps } from "../types.js";
-const Root = forwardRef<HTMLElement, RootProps>(
-  ({ asChild, density = "comfortable", className, ...props }, ref) => {
+import type { MotionProps, PartProps, RootProps } from "../types.js";
+import { MotionProvider, motionStyle, useChangeFeedback } from "../motion.js";
+export interface PowerMetricProps extends RootProps, MotionProps {}
+const Root = forwardRef<HTMLElement, PowerMetricProps>(
+  (
+    { asChild, density = "comfortable", motion, className, style, ...props },
+    ref,
+  ) => {
     const Component = asChild ? Slot : "div";
     return (
-      <Component
-        {...props}
-        ref={ref as never}
-        data-slot="power-metric"
-        data-density={density}
-        className={cx(
-          "watt-root flex flex-col gap-2 data-[density=compact]:gap-1",
-          className,
-        )}
-      />
+      <MotionProvider motion={motion}>
+        <Component
+          {...props}
+          ref={ref as never}
+          data-slot="power-metric"
+          data-density={density}
+          style={{ ...style, ...motionStyle(motion) }}
+          className={cx(
+            "watt-root flex flex-col gap-2 data-[density=compact]:gap-1",
+            className,
+          )}
+        />
+      </MotionProvider>
     );
   },
 );
-export interface MetricValueProps extends PartProps {
+export interface MetricValueProps extends PartProps, MotionProps {
   value: number | null;
   formatter?: (value: number) => React.ReactNode;
   fallback?: React.ReactNode;
@@ -35,20 +44,26 @@ const Value = forwardRef<HTMLElement, MetricValueProps>(
       fallback = "—",
       children,
       className,
+      motion,
+      style,
       ...props
     },
     ref,
   ) => {
+    const host = useRef<HTMLElement>(null);
+    const hostRef = useComposedRefs(host, ref);
+    useChangeFeedback(host, value, motion);
     const Component = asChild ? Slot : "span";
     return (
       <Component
         {...props}
-        ref={ref as never}
+        ref={hostRef as never}
         data-slot="power-metric-value"
         className={cx(
-          "text-5xl font-medium tabular-nums tracking-tight",
+          "watt-motion text-5xl font-medium tabular-nums tracking-tight",
           className,
         )}
+        style={{ ...style, ...motionStyle(motion) }}
       >
         {children ??
           (value !== null && Number.isFinite(value)

package/src/components/status-indicator.tsx

@@ -1,26 +1,45 @@
 "use client";
-import { forwardRef } from "react";
+import { forwardRef, useRef } from "react";
+import { useComposedRefs } from "@radix-ui/react-compose-refs";
 import { Slot } from "@radix-ui/react-slot";
 import { cx, part } from "../internal.js";
-import type { EquipmentStatus, RootProps } from "../types.js";
-export interface StatusIndicatorProps extends RootProps {
+import type { EquipmentStatus, MotionProps, RootProps } from "../types.js";
+import { MotionProvider, motionStyle, useChangeFeedback } from "../motion.js";
+export interface StatusIndicatorProps extends RootProps, MotionProps {
   status: EquipmentStatus;
 }
 const Root = forwardRef<HTMLElement, StatusIndicatorProps>(
-  ({ status, density = "comfortable", asChild, className, ...props }, ref) => {
+  (
+    {
+      status,
+      density = "comfortable",
+      asChild,
+      motion,
+      className,
+      style,
+      ...props
+    },
+    ref,
+  ) => {
+    const host = useRef<HTMLElement>(null);
+    const hostRef = useComposedRefs(host, ref);
+    useChangeFeedback(host, status, motion);
     const Component = asChild ? Slot : "span";
     return (
-      <Component
-        {...props}
-        ref={ref as never}
-        data-slot="status-indicator"
-        data-status={status}
-        data-density={density}
-        className={cx(
-          "watt-status inline-flex items-center gap-2 text-sm data-[density=compact]:gap-1 data-[density=compact]:text-xs",
-          className,
-        )}
-      />
+      <MotionProvider motion={motion}>
+        <Component
+          {...props}
+          ref={hostRef as never}
+          data-slot="status-indicator"
+          data-status={status}
+          data-density={density}
+          style={{ ...style, ...motionStyle(motion) }}
+          className={cx(
+            "watt-status watt-motion inline-flex items-center gap-2 text-sm data-[density=compact]:gap-1 data-[density=compact]:text-xs",
+            className,
+          )}
+        />
+      </MotionProvider>
     );
   },
 );