@dreamboard-games/ui-sdk 0.0.41

package/src/components/PromptDialogHost.tsx

@@ -0,0 +1,92 @@
+import { useEffect, useState, type ReactNode } from "react";
+import { clsx } from "clsx";
+import { Dialog, DialogContent, DialogTitle } from "../internal/ui/dialog.js";
+import { useSeatInbox } from "../hooks/useSeatInbox.js";
+import { Prompt } from "../primitives/prompt.js";
+import type {
+  InteractionContextOption,
+  InteractionDescriptor,
+} from "../types/plugin-state.js";
+
+export interface PromptDialogHostProps {
+  contentClassName?: string;
+  messageClassName?: string;
+  optionClassName?: string;
+  optionsClassName?: string;
+  overlayClassName?: string;
+  titleClassName?: string;
+  renderBody?: (prompt: InteractionDescriptor) => ReactNode;
+  renderOptionLabel?: (
+    option: InteractionContextOption,
+    prompt: InteractionDescriptor,
+  ) => ReactNode;
+  onSubmitError?: (
+    error: unknown,
+    prompt: InteractionDescriptor,
+    option: InteractionContextOption,
+  ) => void;
+}
+
+export function PromptDialogHost(props: PromptDialogHostProps) {
+  const { prompts } = useSeatInbox();
+  const prompt = prompts[0];
+  if (!prompt) return null;
+  return (
+    <PromptDialog key={prompt.interactionKey} prompt={prompt} {...props} />
+  );
+}
+
+function PromptDialog({
+  contentClassName,
+  messageClassName,
+  optionClassName,
+  optionsClassName,
+  overlayClassName,
+  prompt,
+  renderBody,
+  renderOptionLabel,
+  titleClassName,
+  onSubmitError,
+}: PromptDialogHostProps & {
+  prompt: InteractionDescriptor;
+}) {
+  const [open, setOpen] = useState(true);
+
+  useEffect(() => {
+    setOpen(true);
+  }, [prompt.interactionKey]);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent
+        className={contentClassName}
+        overlayClassName={overlayClassName}
+      >
+        <Prompt.Root interaction={prompt.interactionKey}>
+          <DialogTitle className={titleClassName}>
+            <Prompt.Title />
+          </DialogTitle>
+          <Prompt.Message className={messageClassName} />
+          {renderBody?.(prompt)}
+          <div className={clsx("flex flex-wrap gap-2", optionsClassName)}>
+            {(prompt.context?.options ?? []).map((option) => (
+              <Prompt.Option
+                key={option.id}
+                className={optionClassName}
+                value={option.id}
+                onSubmitSuccess={() => setOpen(false)}
+                onSubmitError={(error) =>
+                  onSubmitError?.(error, prompt, option)
+                }
+              >
+                {renderOptionLabel?.(option, prompt) ??
+                  option.label ??
+                  option.id}
+              </Prompt.Option>
+            ))}
+          </div>
+        </Prompt.Root>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/src/components/ResourceCounter.test.tsx

@@ -0,0 +1,29 @@
+import { expect, test } from "bun:test";
+import { renderToString } from "react-dom/server";
+import { ThemeProvider } from "../theme/ThemeProvider.js";
+import {
+  ResourceCounter,
+  type ResourceDisplayConfig,
+} from "./ResourceCounter.js";
+
+const resources: ResourceDisplayConfig[] = [
+  { type: "gold", label: "Gold", icon: "🪙" },
+];
+
+test("ResourceCounter renders tooltip triggers for each resource chip", () => {
+  const html = renderToString(
+    <ThemeProvider>
+      <ResourceCounter
+        resources={resources}
+        counts={{ gold: 3 }}
+        layout="row"
+        size="md"
+        showZero
+      />
+    </ThemeProvider>,
+  );
+
+  expect(html).toContain('data-slot="tooltip-trigger"');
+  expect(html).toContain('aria-label="Gold: 3"');
+  expect(html).not.toContain("title=");
+});

package/src/components/ResourceCounter.tsx

@@ -0,0 +1,275 @@
+/**
+ * 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 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;
+};
+
+export interface ResourceDisplayConfig {
+  type: ResourceId;
+  label: string;
+  icon:
+    | ReactNode
+    | ComponentType<{
+        className?: string;
+        strokeWidth?: number;
+        "aria-hidden"?: string;
+      }>;
+  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;
+  className?: string;
+}
+
+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";
+
+  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;
+
+  const styles = sizeConfig[size];
+
+  const filteredResources = showZero
+    ? resources
+    : resources.filter((r) => (counts[r.type] ?? 0) > 0);
+
+  // 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}`,
+  });
+
+  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"
+    >
+      <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>
+                </>
+              );
+
+              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",
+              );
+
+              const sharedStyle: React.CSSProperties = {
+                ...baseChipStyle(bgColor),
+                color: textColor ? undefined : theme.semantic.text.primary,
+              };
+
+              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)
+                : {};
+
+              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>
+              );
+
+              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>
+  );
+}

package/src/components/ThemedButton.tsx

@@ -0,0 +1,78 @@
+import type { ComponentProps } from "react";
+import { clsx } from "clsx";
+import { Button as ShadcnButton } from "../internal/ui/button.js";
+import {
+  buttonStyle,
+  type ButtonSize,
+  type ButtonVariant,
+} from "../theme/derive.js";
+import { useTheme } from "../theme/ThemeProvider.js";
+
+type ShadcnButtonProps = ComponentProps<typeof ShadcnButton>;
+
+export interface ThemedButtonProps
+  extends Omit<ShadcnButtonProps, "variant" | "size"> {
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  pressed?: boolean;
+}
+
+export function ThemedButton({
+  variant = "primary",
+  size = "md",
+  pressed = false,
+  disabled,
+  className,
+  style,
+  ...props
+}: ThemedButtonProps) {
+  const theme = useTheme();
+  return (
+    <ShadcnButton
+      variant={toShadcnVariant(variant)}
+      size={toShadcnSize(size)}
+      disabled={disabled}
+      data-dreamboard-button
+      data-dreamboard-button-variant={variant}
+      data-dreamboard-button-size={size}
+      className={clsx("font-sans", className)}
+      style={{
+        ...buttonStyle(theme, { variant, size, disabled, pressed }),
+        ...style,
+      }}
+      {...props}
+    />
+  );
+}
+
+function toShadcnVariant(
+  variant: ButtonVariant,
+): NonNullable<ShadcnButtonProps["variant"]> {
+  switch (variant) {
+    case "danger":
+      return "destructive";
+    case "ghost":
+      return "ghost";
+    case "secondary":
+      return "secondary";
+    case "primary":
+    case "submitted":
+    case "success":
+    case "warning":
+    case "info":
+      return "default";
+  }
+}
+
+function toShadcnSize(
+  size: ButtonSize,
+): NonNullable<ShadcnButtonProps["size"]> {
+  switch (size) {
+    case "sm":
+      return "sm";
+    case "md":
+      return "default";
+    case "lg":
+      return "lg";
+  }
+}