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

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";

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

@@ -1,194 +0,0 @@
-import { useEffect, useState } from "react";
-import {
-  PERF_MARK_NAMES,
-  clearPerfEntries,
-  getPerfEntries,
-  isPerfEnabled,
-  type PerfEntry,
-} from "../perf.js";
-
-/**
- * Tier-0 input-latency HUD.
- *
- * Enabled when {@link isPerfEnabled} returns true (dev build or
- * `localStorage.dreamboard.perf = 1`) AND the URL contains `?perf=1`.
- * The explicit query flag keeps the overlay off in the normal dev
- * experience; flip it on for a targeted benchmarking session.
- *
- * Shared by `apps/web` (real game sessions) and `apps/dreamboard-cli`
- * (`dreamboard dev` local host) so both surfaces expose the same HUD
- * against the same `clientActionId`-keyed ring buffer.
- */
-const REFRESH_INTERVAL_MS = 500;
-const MAX_ROWS = 10;
-
-interface RowStats {
-  clientActionId: string;
-  totalMs: number | null;
-  serverMs: number | null;
-  postAckTailMs: number | null;
-  sseMs: number | null;
-  renderMs: number | null;
-  version: number | undefined;
-  syncId: number | undefined;
-}
-
-function firstMarkMs(entry: PerfEntry, name: string): number | null {
-  const mark = entry.marks.find((m) => m.name === name);
-  return mark ? mark.timestampMs : null;
-}
-
-function deltaMs(a: number | null, b: number | null): number | null {
-  if (a === null || b === null) return null;
-  return Math.round((b - a) * 10) / 10;
-}
-
-function toRowStats(entry: PerfEntry): RowStats {
-  const t0 = firstMarkMs(entry, PERF_MARK_NAMES.T0_CLICK);
-  const t2 = firstMarkMs(entry, PERF_MARK_NAMES.T2_HTTP_SENT);
-  const t3 = firstMarkMs(entry, PERF_MARK_NAMES.T3_HTTP_RESPONSE);
-  const t4 = firstMarkMs(entry, PERF_MARK_NAMES.T4_SSE_RECEIVED);
-  const t7 = firstMarkMs(entry, PERF_MARK_NAMES.T7_STATE_SYNC_RECEIVED);
-  const t8 = firstMarkMs(entry, PERF_MARK_NAMES.T8_RENDER_COMMIT);
-  return {
-    clientActionId: entry.clientActionId,
-    totalMs: deltaMs(t0, t8),
-    serverMs: deltaMs(t2, t3),
-    postAckTailMs: deltaMs(t3, t8),
-    sseMs: deltaMs(t3, t4),
-    renderMs: deltaMs(t7, t8),
-    version: entry.version,
-    syncId: entry.syncId,
-  };
-}
-
-function formatMs(value: number | null): string {
-  if (value === null) return "—";
-  return `${value.toFixed(1)}ms`;
-}
-
-function formatActionId(actionId: string): string {
-  return actionId.length > 8 ? `${actionId.slice(0, 8)}…` : actionId;
-}
-
-function usePerfOverlayEnabled(): boolean {
-  const [enabled, setEnabled] = useState(false);
-  useEffect(() => {
-    if (typeof window === "undefined") return;
-    if (!isPerfEnabled()) {
-      setEnabled(false);
-      return;
-    }
-    const check = () => {
-      const params = new URLSearchParams(window.location.search);
-      setEnabled(params.get("perf") === "1");
-    };
-    check();
-    window.addEventListener("popstate", check);
-    return () => window.removeEventListener("popstate", check);
-  }, []);
-  return enabled;
-}
-
-export const PerfOverlay: React.FC = () => {
-  const enabled = usePerfOverlayEnabled();
-  const [rows, setRows] = useState<RowStats[]>([]);
-
-  useEffect(() => {
-    if (!enabled) return;
-    const refresh = () => {
-      const entries = getPerfEntries();
-      const sliced = entries.slice(-MAX_ROWS).reverse();
-      setRows(sliced.map(toRowStats));
-    };
-    refresh();
-    const handle = window.setInterval(refresh, REFRESH_INTERVAL_MS);
-    return () => window.clearInterval(handle);
-  }, [enabled]);
-
-  if (!enabled) return null;
-
-  return (
-    <div
-      className="fixed bottom-4 right-4 z-[9999] max-w-[640px] rounded-md border border-slate-700 bg-slate-900/90 p-3 font-mono text-[11px] text-slate-100 shadow-lg backdrop-blur"
-      data-testid="perf-overlay"
-    >
-      <div className="mb-2 flex items-center justify-between gap-3">
-        <span className="font-bold uppercase tracking-wider text-emerald-300">
-          Tier-0 Input Perf
-        </span>
-        <div className="flex items-center gap-2">
-          <button
-            type="button"
-            className="rounded border border-slate-600 px-2 py-0.5 text-[10px] uppercase hover:bg-slate-700"
-            onClick={() => {
-              clearPerfEntries();
-              setRows([]);
-            }}
-          >
-            Clear
-          </button>
-          <button
-            type="button"
-            className="rounded border border-slate-600 px-2 py-0.5 text-[10px] uppercase hover:bg-slate-700"
-            onClick={() => {
-              // eslint-disable-next-line no-console
-              console.table(getPerfEntries());
-            }}
-          >
-            Dump
-          </button>
-        </div>
-      </div>
-      {rows.length === 0 ? (
-        <div className="py-2 text-slate-400">
-          No samples yet. Submit an action to populate the HUD.
-        </div>
-      ) : (
-        <table className="w-full border-collapse">
-          <thead className="text-slate-400">
-            <tr>
-              <th className="pr-2 text-left font-semibold">action</th>
-              <th className="pr-2 text-right font-semibold">v</th>
-              <th className="pr-2 text-right font-semibold">total</th>
-              <th className="pr-2 text-right font-semibold">server</th>
-              <th className="pr-2 text-right font-semibold">post-ack</th>
-              <th className="pr-2 text-right font-semibold">sse</th>
-              <th className="text-right font-semibold">render</th>
-            </tr>
-          </thead>
-          <tbody>
-            {rows.map((row) => (
-              <tr
-                key={row.clientActionId}
-                className="border-t border-slate-800 align-top"
-              >
-                <td className="pr-2 text-slate-300">
-                  {formatActionId(row.clientActionId)}
-                </td>
-                <td className="pr-2 text-right text-slate-400">
-                  {row.version ?? "—"}
-                </td>
-                <td className="pr-2 text-right text-emerald-200">
-                  {formatMs(row.totalMs)}
-                </td>
-                <td className="pr-2 text-right text-slate-200">
-                  {formatMs(row.serverMs)}
-                </td>
-                <td className="pr-2 text-right text-amber-200">
-                  {formatMs(row.postAckTailMs)}
-                </td>
-                <td className="pr-2 text-right text-slate-200">
-                  {formatMs(row.sseMs)}
-                </td>
-                <td className="text-right text-slate-200">
-                  {formatMs(row.renderMs)}
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      )}
-    </div>
-  );
-};