dreamboard 0.1.21 → 0.1.22

package/dist/dev-host/dev-runtime-platform.ts

@@ -0,0 +1,419 @@
+import { createRequire } from "node:module";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { existsSync } from "node:fs";
+import type { Alias, ServerOptions } from "vite";
+import { resolveDevDiagnosticsLevel } from "./dev-diagnostics.js";
+
+export interface DevRuntimePlatformOptions {
+  importMetaUrl: string;
+  projectRoot: string;
+  debug: boolean;
+  port?: number;
+  host?: string | boolean;
+  allowedHosts?: string[];
+  tailwindCssEntry: string;
+}
+
+export interface DevRuntimePlatform {
+  devHostRoot: string;
+  repoRoot: string;
+  cliRoot: string;
+  diagnosticsLevel: ReturnType<typeof resolveDevDiagnosticsLevel>;
+  viteLogLevel: "info" | "warn";
+  serverConfig: ServerOptions;
+  resolveDedupe: string[];
+  resolveAlias: Alias[];
+  optimizeDepsExclude: string[];
+}
+
+export function createDevRuntimePlatform(
+  options: DevRuntimePlatformOptions,
+): DevRuntimePlatform {
+  const devHostRoot = resolveDevHostRoot(options.importMetaUrl);
+  const cliRoot = resolveCliRoot(options.importMetaUrl);
+  const repoRoot = resolveRepoRoot(cliRoot);
+  const require = createRequire(options.importMetaUrl);
+  const diagnosticsLevel = resolveDevDiagnosticsLevel(options.debug);
+  const uiSdkRoot = resolvePackageRoot(
+    require,
+    cliRoot,
+    "@dreamboard/ui-sdk",
+    "@dreamboard-games/ui-sdk",
+    "packages/ui-sdk",
+  );
+  const apiClientClientGen = resolvePackageSubpath(
+    require,
+    "@dreamboard/api-client/client.gen",
+    "@dreamboard-games/api-client/client.gen",
+  );
+  const uiHostRuntimeRoot = resolveWorkspaceOrPackagedSource(
+    repoRoot,
+    cliRoot,
+    "packages/ui-host-runtime",
+    "dist/runtime-packages/ui-host-runtime",
+  );
+  const uiRoot = resolveWorkspaceOrPackagedSource(
+    repoRoot,
+    cliRoot,
+    "packages/ui",
+    "dist/runtime-packages/ui",
+  );
+  const tailwindConfigRoot = resolveWorkspaceOrPackagedSource(
+    repoRoot,
+    cliRoot,
+    "packages/tailwind-config",
+    "dist/runtime-packages/tailwind-config",
+  );
+
+  return {
+    devHostRoot,
+    repoRoot,
+    cliRoot,
+    diagnosticsLevel,
+    viteLogLevel: diagnosticsLevel === "verbose" ? "info" : "warn",
+    serverConfig: {
+      host: options.host ?? "localhost",
+      allowedHosts: options.allowedHosts,
+      port: options.port ?? 5352,
+      strictPort: false,
+      watch: {
+        ignored: createProjectOnlyWatchIgnored(options.projectRoot),
+      },
+      headers: {
+        "Access-Control-Allow-Origin": "*",
+        "Access-Control-Allow-Methods": "GET, OPTIONS",
+      },
+      fs: {
+        allow: [options.projectRoot, repoRoot],
+      },
+    },
+    resolveDedupe: [
+      "react",
+      "react-dom",
+      "@dreamboard/ui-sdk",
+      "@dreamboard/sdk-types",
+    ],
+    resolveAlias: [
+      {
+        find: /^react$/,
+        replacement: resolveCliDependency(
+          require,
+          cliRoot,
+          "react",
+          "node_modules/react/index.js",
+        ),
+      },
+      {
+        find: /^react\/jsx-runtime$/,
+        replacement: resolveCliDependency(
+          require,
+          cliRoot,
+          "react/jsx-runtime",
+          "node_modules/react/jsx-runtime.js",
+        ),
+      },
+      {
+        find: /^react\/jsx-dev-runtime$/,
+        replacement: resolveCliDependency(
+          require,
+          cliRoot,
+          "react/jsx-dev-runtime",
+          "node_modules/react/jsx-dev-runtime.js",
+        ),
+      },
+      {
+        find: /^react-dom$/,
+        replacement: resolveCliDependency(
+          require,
+          cliRoot,
+          "react-dom",
+          "node_modules/react-dom/index.js",
+        ),
+      },
+      {
+        find: /^react-dom\/client$/,
+        replacement: resolveCliDependency(
+          require,
+          cliRoot,
+          "react-dom/client",
+          "node_modules/react-dom/client.js",
+        ),
+      },
+      {
+        find: /^@dreamboard\/ui-sdk$/,
+        replacement: path.resolve(uiSdkRoot, "src/index.ts"),
+      },
+      {
+        find: /^@dreamboard\/ui-sdk\/reducer$/,
+        replacement: path.resolve(uiSdkRoot, "src/reducer.ts"),
+      },
+      {
+        // Must resolve to the same source tree as the `@dreamboard/ui-sdk`
+        // alias. If this subpath falls through to `node_modules/.../dist` it
+        // creates a second RuntimeContext identity, and consumers calling
+        // `useRuntimeContext` on the workspace-source copy will never find
+        // the provider that's set up via the dist copy (and vice versa).
+        find: /^@dreamboard\/ui-sdk\/components$/,
+        replacement: path.resolve(uiSdkRoot, "src/components/index.ts"),
+      },
+      {
+        // Keep generated workspace adapters and legacy internal imports on the
+        // same source instance as PluginRuntime so React context identity stays
+        // shared in dev.
+        find: /^@dreamboard\/ui-sdk\/internal$/,
+        replacement: path.resolve(uiSdkRoot, "src/internal.ts"),
+      },
+      {
+        find: /^@dreamboard\/ui-sdk\/workspace-contract$/,
+        replacement: path.resolve(uiSdkRoot, "src/workspace-contract.ts"),
+      },
+      {
+        find: /^@dreamboard\/ui-sdk\/internal\/runtime-context$/,
+        replacement: path.resolve(
+          uiSdkRoot,
+          "src/context/RuntimeContext.tsx",
+        ),
+      },
+      {
+        find: /^@dreamboard\/ui-sdk\/internal\/usePluginRuntime$/,
+        replacement: path.resolve(
+          uiSdkRoot,
+          "src/hooks/usePluginRuntime.ts",
+        ),
+      },
+      {
+        find: /^@dreamboard\/ui-sdk\/internal\/createPluginRuntimeAPI$/,
+        replacement: path.resolve(
+          uiSdkRoot,
+          "src/runtime/createPluginRuntimeAPI.ts",
+        ),
+      },
+      {
+        find: /^@dreamboard\/ui-sdk\/internal\/useHandLayout$/,
+        replacement: path.resolve(uiSdkRoot, "src/hooks/useHandLayout.ts"),
+      },
+      {
+        find: /^@dreamboard\/ui-sdk\/internal\/usePanZoom$/,
+        replacement: path.resolve(uiSdkRoot, "src/hooks/usePanZoom.ts"),
+      },
+      {
+        find: /^@dreamboard\/ui-sdk\/internal\/useIsMobile$/,
+        replacement: path.resolve(uiSdkRoot, "src/hooks/useIsMobile.ts"),
+      },
+      {
+        find: /^@dreamboard\/ui-sdk\/internal\/player-state$/,
+        replacement: path.resolve(
+          uiSdkRoot,
+          "src/types/player-state.ts",
+        ),
+      },
+      {
+        find: /^@dreamboard\/ui-sdk\/internal\/tiled-board$/,
+        replacement: path.resolve(
+          uiSdkRoot,
+          "src/types/tiled-board.ts",
+        ),
+      },
+      {
+        find: /^@dreamboard\/ui-sdk\/internal\/plugin-state$/,
+        replacement: path.resolve(
+          uiSdkRoot,
+          "src/types/plugin-state.ts",
+        ),
+      },
+      {
+        find: /^@dreamboard\/ui-sdk\/types\/runtime-api$/,
+        replacement: path.resolve(
+          uiSdkRoot,
+          "src/types/runtime-api.ts",
+        ),
+      },
+      {
+        find: /^@dreamboard\/ui-host-runtime\/components$/,
+        replacement: path.resolve(uiHostRuntimeRoot, "src/components/index.ts"),
+      },
+      {
+        find: /^@dreamboard\/ui-host-runtime\/runtime$/,
+        replacement: path.resolve(uiHostRuntimeRoot, "src/runtime/index.ts"),
+      },
+      {
+        find: /^@dreamboard\/ui\/components\/(.*)$/,
+        replacement: path.resolve(uiRoot, "src/components/$1.tsx"),
+      },
+      {
+        find: /^@dreamboard\/ui\/lib\/(.*)$/,
+        replacement: path.resolve(uiRoot, "src/lib/$1.ts"),
+      },
+      {
+        find: /^@dreamboard\/tailwind-config$/,
+        replacement: path.resolve(tailwindConfigRoot, "shared-styles.css"),
+      },
+      {
+        find: /^@dreamboard\/manifest-contract$/,
+        replacement: path.resolve(
+          options.projectRoot,
+          "shared/manifest-contract.ts",
+        ),
+      },
+      {
+        find: /^@dreamboard\/ui-contract$/,
+        replacement: path.resolve(
+          options.projectRoot,
+          "shared/generated/ui-contract.ts",
+        ),
+      },
+      {
+        find: /^@dreamboard\/ui-sdk\/plugin-styles\.css$/,
+        replacement: resolveCliDependency(
+          require,
+          cliRoot,
+          "@dreamboard/ui-sdk/plugin-styles.css",
+          "packages/ui-sdk/src/plugin-styles.css",
+        ),
+      },
+      {
+        find: /^@dreamboard\/api-client\/client\.gen$/,
+        replacement: apiClientClientGen,
+      },
+      {
+        find: /^@shared\/(.*)$/,
+        replacement: path.resolve(options.projectRoot, "shared/$1"),
+      },
+      {
+        find: /^tailwindcss$/,
+        replacement: options.tailwindCssEntry,
+      },
+    ],
+    // Author SDKs are resolved from the project, not the CLI root. Let Vite
+    // transform them fresh so its CLI-scoped dependency cache cannot pin an
+    // older local snapshot after `dreamboard sync`.
+    optimizeDepsExclude: [
+      "@dreamboard/ui-sdk",
+      "@dreamboard/ui-sdk/workspace-contract",
+      "@dreamboard/app-sdk",
+      "@dreamboard/app-sdk/reducer",
+      "@dreamboard/sdk-types",
+    ],
+  };
+}
+
+function createProjectOnlyWatchIgnored(
+  projectRoot: string,
+): (file: string) => boolean {
+  const normalizedProjectRoot = path.resolve(projectRoot);
+
+  return (file) => {
+    const normalizedFile = path.resolve(file);
+    const relativePath = path.relative(normalizedProjectRoot, normalizedFile);
+    const isInsideProject =
+      relativePath === "" ||
+      (relativePath.length > 0 &&
+        !relativePath.startsWith("..") &&
+        !path.isAbsolute(relativePath));
+
+    if (!isInsideProject) {
+      return true;
+    }
+
+    const pathSegments = relativePath.split(path.sep);
+    return (
+      pathSegments.includes(".dreamboard") ||
+      pathSegments.includes("node_modules")
+    );
+  };
+}
+
+function resolveWorkspaceOrPackagedSource(
+  repoRoot: string,
+  cliRoot: string,
+  workspaceRelativePath: string,
+  packagedRelativePath: string,
+): string {
+  const workspacePath = path.resolve(repoRoot, workspaceRelativePath);
+  if (existsSync(workspacePath)) return workspacePath;
+  return path.resolve(cliRoot, packagedRelativePath);
+}
+
+function resolvePackageRoot(
+  require: NodeJS.Require,
+  cliRoot: string,
+  specifier: string,
+  publicSpecifier: string,
+  fallbackRelativePath: string,
+): string {
+  try {
+    return path.dirname(require.resolve(`${specifier}/package.json`));
+  } catch {
+    try {
+      return path.dirname(require.resolve(`${publicSpecifier}/package.json`));
+    } catch {
+      return path.resolve(cliRoot, "..", "..", fallbackRelativePath);
+    }
+  }
+}
+
+function resolvePackageSubpath(
+  require: NodeJS.Require,
+  specifier: string,
+  publicSpecifier: string,
+): string {
+  try {
+    return require.resolve(specifier);
+  } catch {
+    return require.resolve(publicSpecifier);
+  }
+}
+
+function resolveCliDependency(
+  require: NodeJS.Require,
+  cliRoot: string,
+  specifier: string,
+  fallbackRelativePath: string,
+): string {
+  try {
+    return require.resolve(specifier);
+  } catch {
+    return path.resolve(cliRoot, fallbackRelativePath);
+  }
+}
+
+function resolveDevHostRoot(importMetaUrl: string): string {
+  const currentDir = path.dirname(fileURLToPath(importMetaUrl));
+  const packagedDirCandidate = path.resolve(currentDir, "dev-host");
+  if (existsSync(packagedDirCandidate)) return packagedDirCandidate;
+  const sourceDirCandidate = path.resolve(currentDir, "../src/dev-host");
+  return existsSync(sourceDirCandidate) ? sourceDirCandidate : currentDir;
+}
+
+function resolveCliRoot(importMetaUrl: string): string {
+  let currentDir = path.dirname(fileURLToPath(importMetaUrl));
+
+  while (true) {
+    if (existsSync(path.join(currentDir, "package.json"))) {
+      return currentDir;
+    }
+
+    const parentDir = path.dirname(currentDir);
+    if (parentDir === currentDir) {
+      return path.resolve(resolveDevHostRoot(importMetaUrl), "../..");
+    }
+    currentDir = parentDir;
+  }
+}
+
+function resolveRepoRoot(cliRoot: string): string {
+  let currentDir = cliRoot;
+
+  while (true) {
+    if (existsSync(path.join(currentDir, "pnpm-workspace.yaml"))) {
+      return currentDir;
+    }
+
+    const parentDir = path.dirname(currentDir);
+    if (parentDir === currentDir) {
+      return cliRoot;
+    }
+    currentDir = parentDir;
+  }
+}

package/dist/dev-host/dev-virtual-modules-plugin.ts

@@ -0,0 +1,63 @@
+import path from "node:path";
+import { normalizePath, type Plugin } from "vite";
+import type { DreamboardDevRuntimeConfig } from "./dev-runtime-config.js";
+
+export function createVirtualDevModulesPlugin(options: {
+  projectRoot: string;
+  runtimeConfig: DreamboardDevRuntimeConfig;
+  generatedFallbackStylesheetPath: string | null;
+}): Plugin {
+  const configModuleId = "virtual:dreamboard-dev-config";
+  const resolvedConfigModuleId = `\0${configModuleId}`;
+  const projectEntryModuleId = "virtual:dreamboard-project-entry";
+  const resolvedProjectEntryModuleId = `\0${projectEntryModuleId}`;
+  const projectAppPath = path.resolve(options.projectRoot, "ui/App.tsx");
+  const projectStylePath = path.resolve(options.projectRoot, "ui/style.css");
+
+  return {
+    name: "dreamboard-dev-virtual-modules",
+    resolveId(id) {
+      if (id === configModuleId) {
+        return resolvedConfigModuleId;
+      }
+      if (id === projectEntryModuleId) {
+        return resolvedProjectEntryModuleId;
+      }
+      return null;
+    },
+    load(id) {
+      if (id === resolvedConfigModuleId) {
+        return `export const devConfig = ${JSON.stringify(options.runtimeConfig)};\nexport default devConfig;\n`;
+      }
+      if (id === resolvedProjectEntryModuleId) {
+        const fallbackImport = options.generatedFallbackStylesheetPath
+          ? `import "/@fs/${normalizePath(options.generatedFallbackStylesheetPath)}";\n`
+          : "";
+        return `${fallbackImport}import { createElement } from "react";
+import { createRoot } from "react-dom/client";
+import { ErrorBoundary, PluginRuntime } from "@dreamboard/ui-sdk";
+import "/@fs/${normalizePath(projectStylePath)}";
+import App from "/@fs/${normalizePath(projectAppPath)}";
+
+const rootElement = document.getElementById("root");
+if (!rootElement) {
+  throw new Error("Dreamboard dev plugin root element was not found.");
+}
+
+createRoot(rootElement).render(
+  createElement(
+    ErrorBoundary,
+    null,
+    createElement(
+      PluginRuntime,
+      null,
+      createElement(App),
+    ),
+  ),
+);
+`;
+      }
+      return null;
+    },
+  };
+}

package/dist/dev-host/host-main.css

@@ -0,0 +1,182 @@
+@import "@dreamboard/tailwind-config";
+@import url("https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&family=Patrick+Hand&display=swap");
+
+:root {
+  color-scheme: light;
+  --background: oklch(0.985 0.005 85);
+  --foreground: oklch(0.25 0 0);
+  --card: oklch(0.985 0.005 85);
+  --card-foreground: oklch(0.25 0 0);
+  --popover: oklch(0.985 0.005 85);
+  --popover-foreground: oklch(0.25 0 0);
+  --primary: oklch(0.6 0.2 25);
+  --primary-foreground: oklch(1 0 0);
+  --secondary: oklch(0.92 0.01 85);
+  --secondary-foreground: oklch(0.25 0 0);
+  --muted: oklch(0.92 0.01 85);
+  --muted-foreground: oklch(0.5 0 0);
+  --accent: oklch(0.97 0.05 100);
+  --accent-foreground: oklch(0.25 0 0);
+  --destructive: oklch(0.6 0.2 25);
+  --destructive-foreground: oklch(1 0 0);
+  --border: oklch(0.25 0 0);
+  --input: oklch(0.25 0 0);
+  --ring: oklch(0.45 0.15 250);
+  --radius: 0.75rem;
+  --font-display: "Kalam", cursive;
+  --font-sans: "Patrick Hand", cursive;
+}
+
+html,
+body,
+#app {
+  height: 100%;
+  min-height: 100%;
+  margin: 0;
+}
+
+body {
+  min-height: 100vh;
+  background-color: #f5f1e7;
+  background-image:
+    radial-gradient(
+      circle at top left,
+      rgba(255, 255, 255, 0.9),
+      transparent 40%
+    ),
+    radial-gradient(#dcd5c9 1px, transparent 1px);
+  background-size: 100% 100%, 24px 24px;
+  background-attachment: fixed, fixed;
+  color: #1f2937;
+  font-family: var(--font-sans);
+}
+
+#app {
+  display: block;
+}
+
+#app > * {
+  min-height: 100%;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-family: var(--font-display);
+  font-weight: 700;
+}
+
+.wobbly-border {
+  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
+}
+
+.wobbly-border-md {
+  border-radius: 25px 8px 25px 8px / 8px 25px 8px 25px;
+}
+
+.wobbly-border-lg {
+  border-radius: 45px 15px 45px 15px / 15px 45px 15px 45px;
+}
+
+.hard-shadow {
+  box-shadow: 4px 4px 0 0 #2d2d2d;
+}
+
+.hard-shadow-lg {
+  box-shadow: 8px 8px 0 0 #2d2d2d;
+}
+
+.dev-drawer-content {
+  background-color: rgba(247, 239, 220, 0.96);
+  color: #1f2937;
+}
+
+.dev-drawer-surface {
+  background-image:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0.08)),
+    radial-gradient(rgba(80, 58, 34, 0.09) 1px, transparent 1px);
+  background-size: 100% 100%, 18px 18px;
+  color: #1f2937;
+}
+
+.dev-drawer-header {
+  background-color: rgba(255, 252, 244, 0.96);
+  color: #1f2937;
+}
+
+.dev-drawer-label {
+  background-color: #e5e0d8;
+  color: #6b5a45;
+}
+
+.dev-drawer-session-pill {
+  background-color: #fff3b5;
+  color: #1f2937;
+}
+
+.dev-drawer-session-dot {
+  background-color: #d97706;
+}
+
+.dev-drawer-close {
+  background-color: #fff;
+  color: #6b7280;
+}
+
+.dev-drawer-close:hover {
+  background-color: #e5e0d8;
+}
+
+.dev-drawer-note {
+  background-color: rgba(255, 255, 255, 0.72);
+  color: rgba(31, 41, 55, 0.8);
+}
+
+.dev-drawer-card {
+  background-color: #fffdf7;
+  color: #1f2937;
+}
+
+.dev-drawer-card-title {
+  color: #7a6956;
+}
+
+.dev-drawer-controls-card {
+  background-color: #fff3b5;
+  color: #1f2937;
+}
+
+.dev-drawer-feedback-card {
+  background-color: #fffaf0;
+  color: #1f2937;
+}
+
+.dev-drawer-input {
+  background-color: #fff;
+  color: #1f2937;
+}
+
+.dev-drawer-primary-button {
+  background-color: #1f2937;
+  color: #fff8e8;
+}
+
+.dev-drawer-primary-button:hover {
+  background-color: #111827;
+}
+
+.dev-drawer-danger-button {
+  background-color: #ff4d4d;
+  color: #fff;
+}
+
+.dev-drawer-danger-button:hover {
+  background-color: #e60000;
+}
+
+.dev-drawer-toolbar-shell {
+  background-color: rgba(255, 255, 255, 0.72);
+}