@dreamboard-games/ui-sdk 0.0.42 → 0.0.45

package/src/components/ResourceCounter.tsx

@@ -1,275 +1,269 @@
-/**
- * Displays resource counts with icons and animated updates.
- *
- * The chip frame (border, fill, shadow, padding, gap) is sourced from
- * the active {@link useTheme}. Authors can still override per-chip
- * colours via {@link ResourceDisplayConfig.bgColor} /
- * {@link ResourceDisplayConfig.iconColor} / {@link ResourceDisplayConfig.textColor}
- * (Tailwind class names) — those win over the theme defaults so existing
- * callers that pass game-specific palettes (Catan: wheat/wood/brick…)
- * keep their look.
- */
-
-import { motion, AnimatePresence } from "framer-motion";
-import { clsx } from "clsx";
-import { createElement, type ComponentType, type ReactNode } from "react";
+import {
+  createContext,
+  createElement,
+  useContext,
+  useMemo,
+  type ComponentType,
+  type HTMLAttributes,
+  type ReactElement,
+  type ReactNode,
+} from "react";
 import type { ResourceId } from "@dreamboard/manifest-contract";
 import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "../internal/ui/tooltip.js";
-import { useTheme } from "../theme/ThemeProvider.js";
-
-type CssVariableStyle = React.CSSProperties & {
-  [K in `--${string}`]?: string | number;
-};
+  composeEventHandlers,
+  renderPrimitive,
+  type PrimitiveCommonProps,
+} from "../primitives/index.js";
 
-export interface ResourceDisplayConfig {
-  type: ResourceId;
+export interface ResourceDisplayConfig<Resource extends string = ResourceId> {
+  type: Resource;
   label: string;
   icon:
     | ReactNode
     | ComponentType<{
         className?: string;
         strokeWidth?: number;
-        "aria-hidden"?: string;
+        "aria-hidden"?: boolean | "true" | "false";
       }>;
   iconColor?: string;
   bgColor?: string;
   textColor?: string;
 }
 
-export interface ResourceCounterProps {
-  resources: ResourceDisplayConfig[];
-  counts: Record<ResourceId, number>;
-  layout?: "row" | "grid" | "compact";
-  /** Number of columns for grid layout */
-  columns?: number;
-  showZero?: boolean;
-  size?: "sm" | "md" | "lg";
-  onResourceClick?: (resourceType: ResourceId) => void;
+export interface ResourceCounterItemState<
+  Resource extends string = ResourceId,
+> {
+  type: Resource;
+  label: string;
+  icon: ResourceDisplayConfig<Resource>["icon"];
+  iconColor?: string;
+  bgColor?: string;
+  textColor?: string;
+  count: number;
+  isZero: boolean;
+  interactive: boolean;
+  select: () => void;
+  renderIcon: (props?: ResourceIconProps) => ReactNode;
+  dataAttributes: {
+    "data-resource-id": Resource;
+    "data-resource-count": number;
+    "data-resource-zero": boolean | undefined;
+    "data-interactive": boolean | undefined;
+  };
+}
+
+export interface ResourceIconProps {
   className?: string;
+  strokeWidth?: number;
+  "aria-hidden"?: boolean | "true" | "false";
 }
 
-export function ResourceCounter({
-  resources,
-  counts,
-  layout = "row",
-  columns = 5,
-  showZero = true,
-  size = "md",
-  onResourceClick,
-  className,
-}: ResourceCounterProps) {
-  const theme = useTheme();
-  const reducedMotion = theme.motion.reducedMotion === "true";
+export type ResourceCounterRootProps<Resource extends string = ResourceId> =
+  Omit<PrimitiveCommonProps, "children"> &
+    Omit<HTMLAttributes<HTMLElement>, "children"> & {
+      resources: ReadonlyArray<ResourceDisplayConfig<Resource>>;
+      counts: Partial<Record<Resource, number>>;
+      zero?: "show" | "hide";
+      onResourceClick?: (resourceType: Resource) => void;
+      children: ReactNode;
+    };
 
-  const sizeConfig = {
-    sm: {
-      icon: "w-4 h-4",
-      fontSize: theme.typography.fontSize.sm,
-      paddingBlock: theme.space[1],
-      paddingInline: theme.space[2],
-      gap: theme.space[1],
-    },
-    md: {
-      icon: "w-5 h-5",
-      fontSize: theme.typography.fontSize.md,
-      paddingBlock: theme.space[1.5],
-      paddingInline: theme.space[3],
-      gap: theme.space[1.5],
-    },
-    lg: {
-      icon: "w-6 h-6",
-      fontSize: theme.typography.fontSize.lg,
-      paddingBlock: theme.space[2],
-      paddingInline: theme.space[4],
-      gap: theme.space[2],
-    },
-  } as const;
+export type BoundResourceCounterRootProps<
+  Resource extends string = ResourceId,
+> = Omit<ResourceCounterRootProps<Resource>, "resources">;
 
-  const styles = sizeConfig[size];
+export type ResourceCounterProps<Resource extends string = ResourceId> =
+  ResourceCounterRootProps<Resource>;
 
-  const filteredResources = showZero
-    ? resources
-    : resources.filter((r) => (counts[r.type] ?? 0) > 0);
+export type ResourceCounterPartProps<Resource extends string = ResourceId> =
+  Omit<PrimitiveCommonProps, "children"> &
+    Omit<HTMLAttributes<HTMLElement>, "children"> & {
+      children?:
+        | ReactNode
+        | ((resource: ResourceCounterItemState<Resource>) => ReactNode);
+    };
 
-  // Base chip styling pulled from the theme. Caller-supplied
-  // `bgColor`/`textColor` (Tailwind classes) override these inline
-  // defaults via the `style` cascade — when a Tailwind class sets
-  // `background-color`, it wins because we don't pass `background`
-  // when the caller provided a `bgColor` class.
-  const baseChipStyle = (
-    bgColorClass: string | undefined,
-  ): React.CSSProperties => ({
-    display: "inline-flex",
-    alignItems: "center",
-    gap: styles.gap,
-    paddingBlock: styles.paddingBlock,
-    paddingInline: styles.paddingInline,
-    borderRadius: theme.radius.md,
-    border: `2px solid ${theme.semantic.border.default}`,
-    background: bgColorClass ? undefined : theme.semantic.surface.card,
-    boxShadow: theme.elevation.rest,
-    fontFamily: theme.typography.fontFamily.body,
-    transition: `transform ${theme.motion.duration.fast} ${theme.motion.easing.out}, box-shadow ${theme.motion.duration.normal} ${theme.motion.easing.out}`,
-  });
+const ResourceCounterItemContext =
+  createContext<ResourceCounterItemState<string> | null>(null);
+
+function useResourceCounterItemContext<Resource extends string>() {
+  const value = useContext(ResourceCounterItemContext);
+  if (!value) {
+    throw new Error(
+      "ResourceCounter item primitives must be rendered inside <ResourceCounter.Item>.",
+    );
+  }
+  return value as ResourceCounterItemState<Resource>;
+}
 
+function renderResourceIcon(
+  icon: ResourceDisplayConfig<string>["icon"],
+  props: ResourceIconProps = {},
+) {
+  if (typeof icon === "function") {
+    return createElement(icon, {
+      "aria-hidden": true,
+      strokeWidth: 2.5,
+      ...props,
+    });
+  }
+  const {
+    strokeWidth: _strokeWidth,
+    "aria-hidden": ariaHidden,
+    ...spanProps
+  } = props;
   return (
-    <div
-      className={clsx(
-        layout === "grid" && "grid",
-        layout === "row" && "flex flex-wrap",
-        layout === "compact" && "flex flex-wrap",
-        layout === "row" && "gap-3 sm:gap-4",
-        layout === "compact" && "gap-2",
-        layout === "grid" && "gap-3 sm:gap-4",
-        className,
-      )}
-      style={
-        layout === "grid"
-          ? {
-              gridTemplateColumns: `repeat(${columns}, 1fr)`,
-              fontFamily: theme.typography.fontFamily.body,
-            }
-          : { fontFamily: theme.typography.fontFamily.body }
-      }
-      role="list"
-      aria-label="Resource counts"
+    <span
+      aria-hidden={ariaHidden === undefined ? true : ariaHidden !== "false"}
+      {...spanProps}
     >
-      <TooltipProvider delayDuration={200}>
-        <AnimatePresence mode="popLayout">
-          {filteredResources.map(
-            ({ type, label, icon, iconColor, bgColor, textColor }) => {
-              const count = counts[type] ?? 0;
-              const iconNode =
-                typeof icon === "function" ? (
-                  createElement(icon, {
-                    className: clsx(styles.icon, iconColor),
-                    strokeWidth: 2.5,
-                    "aria-hidden": "true",
-                  })
-                ) : (
-                  <span
-                    className={clsx(styles.icon, iconColor)}
-                    aria-hidden="true"
-                    style={{
-                      display: "inline-flex",
-                      alignItems: "center",
-                      justifyContent: "center",
-                      fontSize: "1.1em",
-                    }}
-                  >
-                    {icon}
-                  </span>
-                );
-              const content = (
-                <>
-                  {iconNode}
-                  <motion.span
-                    key={count}
-                    initial={reducedMotion ? { scale: 1 } : { scale: 1.5 }}
-                    animate={{ scale: 1 }}
-                    className={clsx("font-bold", textColor)}
-                    style={{
-                      fontSize: styles.fontSize,
-                      fontFamily: theme.typography.fontFamily.tabular,
-                      fontWeight: theme.typography.fontWeight.bold,
-                      color: textColor
-                        ? undefined
-                        : theme.semantic.text.primary,
-                    }}
-                  >
-                    {count}
-                  </motion.span>
-                </>
-              );
+      {icon}
+    </span>
+  );
+}
 
-              const sharedClassName = clsx(
-                "flex items-center focus-visible:outline-none",
-                bgColor,
-                onResourceClick
-                  ? "cursor-pointer focus-visible:ring-2 focus-visible:ring-offset-2"
-                  : "cursor-help",
-              );
+function resolveResourceChildren<Resource extends string>(
+  children: ResourceCounterPartProps<Resource>["children"],
+  resource: ResourceCounterItemState<Resource>,
+) {
+  return typeof children === "function" ? children(resource) : children;
+}
 
-              const sharedStyle: React.CSSProperties = {
-                ...baseChipStyle(bgColor),
-                color: textColor ? undefined : theme.semantic.text.primary,
-              };
+export function ResourceCounterRoot<Resource extends string = ResourceId>({
+  resources,
+  counts,
+  zero = "show",
+  onResourceClick,
+  children,
+  "aria-label": ariaLabel,
+  ...props
+}: ResourceCounterRootProps<Resource>) {
+  const items = useMemo(
+    () =>
+      resources
+        .map((resource) => {
+          const count = counts[resource.type] ?? 0;
+          return {
+            ...resource,
+            count,
+            isZero: count === 0,
+            interactive: Boolean(onResourceClick),
+            select: () => onResourceClick?.(resource.type),
+            renderIcon: (iconProps) =>
+              renderResourceIcon(resource.icon, iconProps),
+            dataAttributes: {
+              "data-resource-id": resource.type,
+              "data-resource-count": count,
+              "data-resource-zero": count === 0 || undefined,
+              "data-interactive": onResourceClick ? true : undefined,
+            },
+          } satisfies ResourceCounterItemState<Resource>;
+        })
+        .filter((resource) => zero === "show" || !resource.isZero),
+    [counts, onResourceClick, resources, zero],
+  );
 
-              const focusVisibleStyle: CssVariableStyle = onResourceClick
-                ? ({
-                    // Theming the focus ring requires a CSS variable hop
-                    // because Tailwind's focus-visible:ring-offset uses
-                    // `--tw-ring-offset-color`. We expose the theme
-                    // border.focus token here so consumers without our
-                    // Tailwind preset still get a visible ring.
-                    "--tw-ring-color": theme.semantic.border.focus,
-                    "--tw-ring-offset-color": theme.semantic.surface.app,
-                  } satisfies CssVariableStyle)
-                : {};
+  return renderPrimitive("div", {
+    role: "list",
+    "aria-label": ariaLabel ?? "Resource counts",
+    "data-dreamboard-resource-counter": "",
+    ...props,
+    children: items.map((resource) => (
+      <ResourceCounterItemContext.Provider key={resource.type} value={resource}>
+        {children}
+      </ResourceCounterItemContext.Provider>
+    )),
+  });
+}
 
-              const chip = onResourceClick ? (
-                <button
-                  type="button"
-                  onClick={() => onResourceClick(type)}
-                  className={sharedClassName}
-                  style={{ ...sharedStyle, ...focusVisibleStyle }}
-                  aria-label={`${label}: ${count}`}
-                >
-                  {content}
-                </button>
-              ) : (
-                <div
-                  className={sharedClassName}
-                  style={sharedStyle}
-                  aria-label={`${label}: ${count}`}
-                >
-                  {content}
-                </div>
-              );
+export function ResourceCounterItem<Resource extends string = ResourceId>({
+  children,
+  onClick,
+  "aria-label": ariaLabel,
+  ...props
+}: ResourceCounterPartProps<Resource>) {
+  const resource = useResourceCounterItemContext<Resource>();
+  return renderPrimitive("span", {
+    role: "listitem",
+    "aria-label": ariaLabel ?? `${resource.label}: ${resource.count}`,
+    ...resource.dataAttributes,
+    ...props,
+    onClick: composeEventHandlers(
+      onClick,
+      resource.interactive ? resource.select : undefined,
+    ),
+    children: resolveResourceChildren(children, resource),
+  });
+}
 
-              return (
-                <motion.div
-                  key={type}
-                  layout={!reducedMotion}
-                  initial={
-                    reducedMotion
-                      ? { opacity: 0, scale: 1 }
-                      : { opacity: 0, scale: 0.8 }
-                  }
-                  animate={{ opacity: 1, scale: 1 }}
-                  exit={{ opacity: 0, scale: 0.8 }}
-                  whileHover={
-                    onResourceClick && !reducedMotion
-                      ? { scale: 1.05 }
-                      : undefined
-                  }
-                  whileTap={
-                    onResourceClick && !reducedMotion
-                      ? { scale: 0.95 }
-                      : undefined
-                  }
-                  role="listitem"
-                >
-                  <Tooltip>
-                    <TooltipTrigger asChild>{chip}</TooltipTrigger>
-                    <TooltipContent side="top" sideOffset={6}>
-                      <p className="font-sans text-sm font-bold">{label}</p>
-                      <p className="font-sans text-xs font-normal opacity-90">
-                        Quantity: {count}
-                      </p>
-                    </TooltipContent>
-                  </Tooltip>
-                </motion.div>
-              );
-            },
-          )}
-        </AnimatePresence>
-      </TooltipProvider>
-    </div>
-  );
+export function ResourceCounterIcon<Resource extends string = ResourceId>({
+  className,
+  strokeWidth,
+  "aria-hidden": ariaHidden,
+}: ResourceIconProps): ReactNode {
+  const resource = useResourceCounterItemContext<Resource>();
+  return resource.renderIcon({
+    className,
+    strokeWidth,
+    "aria-hidden": ariaHidden,
+  });
+}
+
+export function ResourceCounterCount<Resource extends string = ResourceId>({
+  children,
+  ...props
+}: ResourceCounterPartProps<Resource>) {
+  const resource = useResourceCounterItemContext<Resource>();
+  return renderPrimitive("span", {
+    ...props,
+    "data-dreamboard-resource-count": "",
+    children: resolveResourceChildren(children ?? resource.count, resource),
+  });
+}
+
+export function ResourceCounterLabel<Resource extends string = ResourceId>({
+  children,
+  ...props
+}: ResourceCounterPartProps<Resource>) {
+  const resource = useResourceCounterItemContext<Resource>();
+  return renderPrimitive("span", {
+    ...props,
+    "data-dreamboard-resource-label": "",
+    children: resolveResourceChildren(children ?? resource.label, resource),
+  });
+}
+
+export interface ResourceCounterComponents<
+  Resource extends string = ResourceId,
+> {
+  Root(props: BoundResourceCounterRootProps<Resource>): ReactElement;
+  Item(props: ResourceCounterPartProps<Resource>): ReactElement;
+  Icon(props: ResourceIconProps): ReactNode;
+  Count(props: ResourceCounterPartProps<Resource>): ReactElement;
+  Label(props: ResourceCounterPartProps<Resource>): ReactElement;
+}
+
+export function createResourceCounter<Resource extends string>(
+  resources: ReadonlyArray<ResourceDisplayConfig<Resource>>,
+): ResourceCounterComponents<Resource> {
+  return {
+    Root(props) {
+      return createElement(ResourceCounterRoot<Resource>, {
+        ...props,
+        resources,
+      });
+    },
+    Item: ResourceCounterItem,
+    Icon: ResourceCounterIcon,
+    Count: ResourceCounterCount,
+    Label: ResourceCounterLabel,
+  } satisfies ResourceCounterComponents<Resource>;
 }
+
+export const ResourceCounter = {
+  Root: ResourceCounterRoot,
+  Item: ResourceCounterItem,
+  Icon: ResourceCounterIcon,
+  Count: ResourceCounterCount,
+  Label: ResourceCounterLabel,
+};

package/src/components/Toast.tsx

@@ -1,10 +1,9 @@
 /**
  * Plugin-internal toast notification system.
  *
- * `<ToastProvider>` exposes a `useToast()` API that game authors call
- * imperatively to surface their own game-specific feedback ("Resource
- * gained", "Card discarded", "Tip: rotate the board with R", …). It
- * is intentionally NOT wired to the host notification stream:
+ * `<ToastProvider>` exposes `<Toast.Actions>` for game-specific feedback
+ * ("Resource gained", "Card discarded", "Tip: rotate the board with R", …).
+ * It is intentionally NOT wired to the host notification stream:
  * `YOUR_TURN`, `PROMPT_OPENED` and `ACTION_REJECTED` events are owned
  * by `@dreamboard/ui-host-runtime`'s `<HostFeedbackToaster>` and must
  * not be mirrored from inside the plugin tree.
@@ -27,7 +26,7 @@ import { ThemedButton } from "./ThemedButton.js";
 
 export type ToastType = "success" | "error" | "info" | "warning";
 
-export interface Toast {
+export interface ToastNotification {
   id: string;
   type: ToastType;
   message: string;
@@ -35,7 +34,7 @@ export interface Toast {
 }
 
 interface ToastContextValue {
-  toasts: Toast[];
+  toasts: ToastNotification[];
   show: (message: string, type?: ToastType, duration?: number) => void;
   dismiss: (id: string) => void;
   success: (message: string, duration?: number) => void;
@@ -46,17 +45,19 @@ interface ToastContextValue {
 
 const ToastContext = createContext<ToastContextValue | null>(null);
 
+export type ToastActionsValue = ToastContextValue;
+
 export interface ToastProviderProps {
   children: ReactNode;
 }
 
 export function ToastProvider({ children }: ToastProviderProps) {
-  const [toasts, setToasts] = useState<Toast[]>([]);
+  const [toasts, setToasts] = useState<ToastNotification[]>([]);
 
   const show = useCallback(
     (message: string, type: ToastType = "info", duration = 3000) => {
       const id = `toast-${Date.now()}-${Math.random()}`;
-      const toast: Toast = { id, type, message, duration };
+      const toast: ToastNotification = { id, type, message, duration };
 
       setToasts((prev) => {
         // Dedup by `(type, message)` so a fast burst of identical
@@ -120,11 +121,23 @@ export function useToast() {
   return context;
 }
 
+export interface ToastActionsProps {
+  children: (actions: ToastActionsValue) => ReactNode;
+}
+
+export function ToastActions({ children }: ToastActionsProps) {
+  return <>{children(useToast())}</>;
+}
+
+export const Toast = {
+  Actions: ToastActions,
+} as const;
+
 function ToastContainer({
   toasts,
   onDismiss,
 }: {
-  toasts: Toast[];
+  toasts: ToastNotification[];
   onDismiss: (id: string) => void;
 }) {
   return (
@@ -184,7 +197,7 @@ function ToastItem({
   toast,
   onDismiss,
 }: {
-  toast: Toast;
+  toast: ToastNotification;
   onDismiss: (id: string) => void;
 }) {
   const theme = useTheme();