@dreamboard-games/cli 0.1.30-alpha.1 → 0.1.30-alpha.11

package/dist/runtime-packages/ui-host-runtime/src/components/host-feedback.tsx

@@ -1,212 +0,0 @@
-/**
- * Host-owned inline feedback stack.
- *
- * Visual styling is driven entirely by the active `@dreamboard-games/sdk/ui`
- * `Theme` so the stack re-skins with the rest of the host shell. The
- * earlier implementation relied on raw Tailwind colour classes
- * (`bg-emerald-500/10`, `text-amber-700`, …) which were untouchable
- * by the theme tokens.
- */
-
-import { AlertTriangle, Bell, Clock3, X } from "lucide-react";
-import {
-  intentForVariant,
-  surfaceStyle,
-  useTheme,
-  type ButtonVariant,
-  type Theme,
-} from "@dreamboard-games/sdk/ui";
-import type { HostFeedback } from "../unified-session-store.js";
-
-export interface HostFeedbackStackProps {
-  feedback: HostFeedback[];
-  onDismiss?: (feedbackId: string) => void;
-  className?: string;
-}
-
-interface StackPresentation {
-  title: string;
-  description: string;
-  variant: Extract<ButtonVariant, "danger" | "warning" | "success" | "info">;
-  icon: typeof AlertTriangle;
-}
-
-function describeFeedback(item: HostFeedback): StackPresentation {
-  switch (item.type) {
-    case "YOUR_TURN": {
-      const description =
-        item.payload.activePlayers.length > 1
-          ? "You can act with one of your controlled players."
-          : "You can act now.";
-      return {
-        title: "Your turn",
-        description,
-        variant: "success",
-        icon: Bell,
-      };
-    }
-    case "PROMPT_OPENED": {
-      const payload = item.payload;
-      const description = payload.targetPlayer
-        ? `${payload.title ?? "A prompt is waiting."} (${payload.targetPlayer})`
-        : (payload.title ?? "A prompt is waiting.");
-      return {
-        title: "Response needed",
-        description,
-        variant: "warning",
-        icon: Clock3,
-      };
-    }
-    case "ACTION_REJECTED": {
-      const payload = item.payload;
-      const description = payload.targetPlayer
-        ? `${payload.reason} (${payload.targetPlayer})`
-        : payload.reason;
-      return {
-        title: "Action rejected",
-        description,
-        variant: "danger",
-        icon: AlertTriangle,
-      };
-    }
-  }
-
-  const exhaustive: never = item;
-  throw new Error(
-    `Unsupported host feedback item type: ${String((exhaustive as { type?: unknown }).type)}`,
-  );
-}
-
-interface FeedbackEntryProps {
-  item: HostFeedback;
-  presentation: StackPresentation;
-  theme: Theme;
-  onDismiss?: (feedbackId: string) => void;
-}
-
-function FeedbackEntry({
-  item,
-  presentation,
-  theme,
-  onDismiss,
-}: FeedbackEntryProps) {
-  const intent = intentForVariant(theme, presentation.variant);
-  const Icon = presentation.icon;
-  return (
-    <div
-      role="status"
-      aria-live="polite"
-      style={{
-        ...surfaceStyle(theme, { tone: "card", radius: "lg" }),
-        background: intent.soft,
-        color: intent.onSoft,
-        border: `1px solid ${intent.border}`,
-        boxShadow: theme.elevation.rest,
-        display: "flex",
-        alignItems: "flex-start",
-        gap: theme.space[3],
-        padding: theme.space[3],
-        fontFamily: theme.typography.fontFamily.body,
-      }}
-    >
-      <Icon
-        size={20}
-        strokeWidth={2.5}
-        aria-hidden="true"
-        style={{
-          flexShrink: 0,
-          marginTop: 2,
-          color: intent.solid,
-        }}
-      />
-      <div style={{ flex: 1, minWidth: 0 }}>
-        <div
-          style={{
-            fontFamily: theme.typography.fontFamily.display,
-            fontSize: theme.typography.fontSize.md,
-            fontWeight: theme.typography.fontWeight.bold,
-            lineHeight: theme.typography.lineHeight.tight,
-            color: intent.onSoft,
-          }}
-        >
-          {presentation.title}
-        </div>
-        <div
-          style={{
-            marginTop: theme.space[1],
-            fontSize: theme.typography.fontSize.sm,
-            fontWeight: theme.typography.fontWeight.medium,
-            lineHeight: theme.typography.lineHeight.normal,
-            color: intent.onSoft,
-            opacity: 0.92,
-            wordBreak: "break-word",
-          }}
-        >
-          {presentation.description}
-        </div>
-      </div>
-      {onDismiss ? (
-        <button
-          type="button"
-          aria-label="Dismiss feedback"
-          onClick={() => onDismiss(item.id)}
-          style={{
-            flexShrink: 0,
-            width: 28,
-            height: 28,
-            display: "inline-flex",
-            alignItems: "center",
-            justifyContent: "center",
-            background: "transparent",
-            border: "none",
-            borderRadius: theme.radius.pill,
-            color: intent.onSoft,
-            cursor: "pointer",
-            opacity: 0.7,
-            transition: `opacity ${theme.motion.duration.fast} ${theme.motion.easing.out}`,
-          }}
-          onMouseEnter={(event) => {
-            event.currentTarget.style.opacity = "1";
-          }}
-          onMouseLeave={(event) => {
-            event.currentTarget.style.opacity = "0.7";
-          }}
-        >
-          <X size={16} aria-hidden="true" />
-        </button>
-      ) : null}
-    </div>
-  );
-}
-
-export function HostFeedbackStack({
-  feedback,
-  onDismiss,
-  className,
-}: HostFeedbackStackProps) {
-  const theme = useTheme();
-  if (feedback.length === 0) {
-    return null;
-  }
-
-  return (
-    <div
-      className={className}
-      style={{
-        display: "flex",
-        flexDirection: "column",
-        gap: theme.space[2],
-      }}
-    >
-      {[...feedback].reverse().map((item) => (
-        <FeedbackEntry
-          key={item.id}
-          item={item}
-          presentation={describeFeedback(item)}
-          theme={theme}
-          onDismiss={onDismiss}
-        />
-      ))}
-    </div>
-  );
-}

package/dist/runtime-packages/ui-host-runtime/src/components/host-primitives.tsx

@@ -1,271 +0,0 @@
-import * as React from "react";
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import * as PopoverPrimitive from "@radix-ui/react-popover";
-import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-import { CircleIcon } from "lucide-react";
-import { clsx, type ClassValue } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs));
-}
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 aria-invalid:border-destructive border-[3px] wobbly-border-md",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-border hard-shadow hard-shadow-hover hard-shadow-active bg-white text-foreground hover:bg-primary hover:text-white",
-        outline:
-          "border-border hard-shadow hard-shadow-hover hard-shadow-active bg-transparent hover:bg-muted",
-        secondary:
-          "border-border hard-shadow hard-shadow-hover hard-shadow-active bg-secondary text-secondary-foreground hover:bg-ring hover:text-white",
-      },
-      size: {
-        default: "h-12 px-6 py-2 has-[>svg]:px-4 text-lg",
-        sm: "h-10 gap-1.5 px-4 has-[>svg]:px-3 text-base",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
-
-export function Button({
-  className,
-  variant,
-  size,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
-    asChild?: boolean;
-  }) {
-  const Comp = asChild ? Slot : "button";
-
-  return (
-    <Comp
-      data-slot="button"
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
-  );
-}
-
-const badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
-  {
-    variants: {
-      variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
-        secondary:
-          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
-
-export function Badge({
-  className,
-  variant,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"span"> &
-  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "span";
-
-  return (
-    <Comp
-      data-slot="badge"
-      className={cn(badgeVariants({ variant }), className)}
-      {...props}
-    />
-  );
-}
-
-export function DropdownMenu({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
-}
-
-export function DropdownMenuTrigger({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
-  return (
-    <DropdownMenuPrimitive.Trigger
-      data-slot="dropdown-menu-trigger"
-      {...props}
-    />
-  );
-}
-
-export function DropdownMenuContent({
-  className,
-  sideOffset = 4,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
-  return (
-    <DropdownMenuPrimitive.Portal>
-      <DropdownMenuPrimitive.Content
-        data-slot="dropdown-menu-content"
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
-          className,
-        )}
-        {...props}
-      />
-    </DropdownMenuPrimitive.Portal>
-  );
-}
-
-export function DropdownMenuLabel({
-  className,
-  inset,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
-  inset?: boolean;
-}) {
-  return (
-    <DropdownMenuPrimitive.Label
-      data-slot="dropdown-menu-label"
-      data-inset={inset}
-      className={cn(
-        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className,
-      )}
-      {...props}
-    />
-  );
-}
-
-export function DropdownMenuRadioGroup({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
-  return (
-    <DropdownMenuPrimitive.RadioGroup
-      data-slot="dropdown-menu-radio-group"
-      {...props}
-    />
-  );
-}
-
-export function DropdownMenuRadioItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
-  return (
-    <DropdownMenuPrimitive.RadioItem
-      data-slot="dropdown-menu-radio-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className,
-      )}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <DropdownMenuPrimitive.ItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
-        </DropdownMenuPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </DropdownMenuPrimitive.RadioItem>
-  );
-}
-
-export function DropdownMenuSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
-  return (
-    <DropdownMenuPrimitive.Separator
-      data-slot="dropdown-menu-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  );
-}
-
-export function Popover({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
-  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
-}
-
-export function PopoverTrigger({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
-  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
-}
-
-type PopoverContentProps = React.ComponentProps<
-  typeof PopoverPrimitive.Content
-> & {
-  container?: HTMLElement | null;
-};
-
-export function PopoverContent({
-  className,
-  align = "center",
-  sideOffset = 4,
-  container,
-  ...props
-}: PopoverContentProps) {
-  return (
-    <PopoverPrimitive.Portal container={container ?? undefined}>
-      <PopoverPrimitive.Content
-        data-slot="popover-content"
-        align={align}
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
-          className,
-        )}
-        {...props}
-      />
-    </PopoverPrimitive.Portal>
-  );
-}
-
-export function ScrollArea({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
-  return (
-    <ScrollAreaPrimitive.Root
-      data-slot="scroll-area"
-      className={cn("relative", className)}
-      {...props}
-    >
-      <ScrollAreaPrimitive.Viewport
-        data-slot="scroll-area-viewport"
-        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
-      >
-        {children}
-      </ScrollAreaPrimitive.Viewport>
-      <ScrollAreaPrimitive.ScrollAreaScrollbar
-        data-slot="scroll-area-scrollbar"
-        orientation="vertical"
-        className="flex h-full w-2.5 touch-none border-l border-l-transparent p-px transition-colors select-none"
-      >
-        <ScrollAreaPrimitive.ScrollAreaThumb
-          data-slot="scroll-area-thumb"
-          className="bg-border relative flex-1 rounded-full"
-        />
-      </ScrollAreaPrimitive.ScrollAreaScrollbar>
-      <ScrollAreaPrimitive.Corner />
-    </ScrollAreaPrimitive.Root>
-  );
-}

package/dist/runtime-packages/ui-host-runtime/src/components/host-session-metadata.tsx

@@ -1,135 +0,0 @@
-import { useEffect, useState } from "react";
-import { Check, Copy } from "lucide-react";
-
-type HostMetaField = "gameId" | "sessionId" | "shortCode";
-
-export interface HostSessionMetadataProps {
-  gameId: string;
-  sessionId: string;
-  shortCode: string;
-  className?: string;
-}
-
-export function HostSessionMetadata({
-  gameId,
-  sessionId,
-  shortCode,
-  className,
-}: HostSessionMetadataProps) {
-  const [copiedField, setCopiedField] = useState<HostMetaField | null>(null);
-
-  useEffect(() => {
-    if (!copiedField) {
-      return;
-    }
-
-    const timeoutId = window.setTimeout(() => {
-      setCopiedField(null);
-    }, 1600);
-
-    return () => {
-      window.clearTimeout(timeoutId);
-    };
-  }, [copiedField]);
-
-  const handleCopyMeta = async (field: HostMetaField, value: string) => {
-    if (!value || !navigator.clipboard?.writeText) {
-      return;
-    }
-
-    try {
-      await navigator.clipboard.writeText(value);
-      setCopiedField(field);
-    } catch {
-      // Ignore clipboard failures; the button remains readable.
-    }
-  };
-
-  return (
-    <dl className={className ?? "space-y-3 text-sm"}>
-      <HostSessionMetaRow
-        label="Game ID"
-        value={gameId}
-        copied={copiedField === "gameId"}
-        onCopy={() => void handleCopyMeta("gameId", gameId)}
-        truncate
-      />
-      <HostSessionMetaRow
-        label="Session ID"
-        value={sessionId}
-        copied={copiedField === "sessionId"}
-        onCopy={() => void handleCopyMeta("sessionId", sessionId)}
-        truncate
-      />
-      <HostSessionMetaRow
-        label="Short code"
-        value={shortCode}
-        copied={copiedField === "shortCode"}
-        onCopy={() => void handleCopyMeta("shortCode", shortCode)}
-      />
-    </dl>
-  );
-}
-
-interface HostSessionMetaRowProps {
-  label: string;
-  value: string;
-  copied: boolean;
-  onCopy: () => void;
-  truncate?: boolean;
-}
-
-function HostSessionMetaRow({
-  label,
-  value,
-  copied,
-  onCopy,
-  truncate = false,
-}: HostSessionMetaRowProps) {
-  const displayValue = truncate ? truncateMiddle(value) : value;
-
-  return (
-    <div className="grid grid-cols-[88px_minmax(0,1fr)] items-start gap-3">
-      <dt className="pt-0.5 text-[11px] font-bold uppercase tracking-[0.14em] text-muted-foreground">
-        {label}
-      </dt>
-      <dd className="min-w-0">
-        <button
-          type="button"
-          onClick={onCopy}
-          className={`flex w-full items-center justify-end gap-2 border-[2px] px-2.5 py-2 text-right transition-all ${
-            copied
-              ? "border-[#2d5da1] bg-[#2d5da1] text-white shadow-[2px_2px_0px_0px_#1d3f72]"
-              : "border-border bg-white/85 text-foreground shadow-[2px_2px_0px_0px_#2d2d2d] hover:-translate-y-[1px] hover:bg-[#fff9c4]"
-          } wobbly-border-md`}
-          title={`Copy ${label}`}
-        >
-          <span className="min-w-0 flex-1 truncate font-mono text-[12px] font-bold sm:text-[13px]">
-            {displayValue}
-          </span>
-          <span className="inline-flex shrink-0 items-center gap-1 text-[10px] font-bold uppercase tracking-[0.14em]">
-            {copied ? (
-              <>
-                <Check className="h-3.5 w-3.5" />
-                Copied
-              </>
-            ) : (
-              <>
-                <Copy className="h-3.5 w-3.5" />
-                Copy
-              </>
-            )}
-          </span>
-        </button>
-      </dd>
-    </div>
-  );
-}
-
-function truncateMiddle(value: string, leading = 12, trailing = 8): string {
-  if (value.length <= leading + trailing + 3) {
-    return value;
-  }
-
-  return `${value.slice(0, leading)}...${value.slice(-trailing)}`;
-}

package/dist/runtime-packages/ui-host-runtime/src/components/index.ts

@@ -1,5 +0,0 @@
-export * from "./host-controls.js";
-export * from "./host-feedback.js";
-export * from "./host-feedback-toaster.js";
-export * from "./host-session-metadata.js";
-export * from "./perf-overlay.js";