@blocksdiy/blocks-client-sdk 1.24.1 → 1.25.0

package/dist/app/ui/ui-styles.js

@@ -0,0 +1,458 @@
+/**
+ * The UI the platform adds to an app (the standalone login, the 404 page, the loading screen):
+ * shadcn's components as the app's own registry styles them (radix-nova) and Tailwind 4 draws
+ * them, written out as CSS. Neither the SDK nor app-render has Tailwind, and an app's Tailwind only
+ * generates the classes in its own files, so these can't be utility classes.
+ *
+ * Unlayered, so the app's CSS (in Tailwind's cascade layers) never restyles it. Every rule is
+ * scoped to `.blocks-ui`, except two that touch nothing of the app's: the login page's
+ * `body:has(...)` margin, and the dark fallbacks, which set only this UI's own `--ui-*` properties.
+ */
+const STYLE_ID = "blocks-ui-styles";
+const APP_TOKENS_STYLE_ID = "blocks-ui-app-tokens";
+/**
+ * The app's shadcn color tokens this UI reads, with shadcn's light and dark defaults. Each is read
+ * through a typed copy (`--ui-<token>`, registered as an inherited `<color>`): when the app's
+ * token isn't a full color (an older app's bare HSL numbers, or the host's placeholder before the
+ * bundle's CSS arrives), the copy inherits the default of the current mode instead of leaving the
+ * UI unstyled. Copies, never the tokens themselves: typing `--primary` would break the apps that
+ * wrap it in `hsl()`.
+ */
+const COLOR_TOKENS = {
+    background: { light: "#ffffff", dark: "#0a0a0a" },
+    foreground: { light: "#0a0a0a", dark: "#fafafa" },
+    card: { light: "#ffffff", dark: "#171717" },
+    "card-foreground": { light: "#0a0a0a", dark: "#fafafa" },
+    primary: { light: "#171717", dark: "#e5e5e5" },
+    "primary-foreground": { light: "#fafafa", dark: "#171717" },
+    muted: { light: "#f5f5f5", dark: "#262626" },
+    "muted-foreground": { light: "#737373", dark: "#a1a1a1" },
+    destructive: { light: "#e7000b", dark: "#ff6467" },
+    border: { light: "#e5e5e5", dark: "#282828" },
+    input: { light: "#e5e5e5", dark: "#343434" },
+    ring: { light: "#a1a1a1", dark: "#737373" },
+};
+/** Every app token this UI reads: the colors, and the ones it reads as they are. */
+const APP_TOKENS = new Set([...Object.keys(COLOR_TOKENS), "radius", "font-sans", "font-heading"]);
+const colorTokens = Object.entries(COLOR_TOKENS);
+const tokenRegistrations = colorTokens
+    .map(([token, { light }]) => `@property --ui-${token} { syntax: "<color>"; inherits: true; initial-value: ${light}; }`)
+    .join("\n");
+const darkFallbacks = colorTokens.map(([token, { dark }]) => `  --ui-${token}: ${dark};`).join("\n");
+const tokenCopies = colorTokens.map(([token]) => `  --ui-${token}: var(--${token});`).join("\n");
+/** Tailwind 4's `transition-*` timing. */
+const EASE = "150ms cubic-bezier(0.4, 0, 0.2, 1)";
+/** Tailwind 4's opacity modifier (`bg-primary/80`). */
+const alpha = (token, percent) => `color-mix(in oklab, var(--ui-${token}) ${percent}%, transparent)`;
+/** The radius scale of an app's `index.css` (`rounded-lg` is `--radius`). */
+const RADIUS = "var(--radius, 0.625rem)";
+const UI_STYLES = `
+${tokenRegistrations}
+
+.dark {
+${darkFallbacks}
+}
+
+body:has(.ui-login-page) {
+  margin: 0;
+}
+
+.blocks-ui,
+.blocks-ui *,
+.blocks-ui *::before,
+.blocks-ui *::after {
+  box-sizing: border-box;
+}
+
+.blocks-ui {
+${tokenCopies}
+}
+
+/* Card */
+.blocks-ui .ui-card {
+  --ui-card-spacing: 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: var(--ui-card-spacing);
+  overflow: hidden;
+  overflow-wrap: anywhere;
+  border-radius: calc(${RADIUS} * 1.4);
+  background: var(--ui-card);
+  padding-block: var(--ui-card-spacing);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--ui-card-foreground);
+  box-shadow: 0 0 0 1px ${alpha("foreground", 10)};
+}
+.blocks-ui .ui-card-header {
+  display: grid;
+  gap: 0.25rem;
+  padding-inline: var(--ui-card-spacing);
+  text-align: center;
+}
+.blocks-ui .ui-card-title {
+  margin: 0;
+  font-family: var(--font-heading, inherit);
+  font-size: 1.25rem;
+  line-height: 1.375;
+  font-weight: 500;
+}
+.blocks-ui .ui-card-description {
+  margin: 0;
+  color: var(--ui-muted-foreground);
+}
+.blocks-ui .ui-card-content {
+  display: grid;
+  gap: 1.25rem;
+  padding-inline: var(--ui-card-spacing);
+}
+.blocks-ui .ui-strong {
+  font-weight: 500;
+  color: var(--ui-foreground);
+}
+
+/* Icon tile (shadcn's empty-state media) */
+.blocks-ui .ui-icon-tile {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.5rem;
+  height: 2.5rem;
+  margin: 0 auto 0.5rem;
+  flex-shrink: 0;
+  border-radius: calc(${RADIUS} * 1.8);
+  background: var(--ui-muted);
+  color: var(--ui-foreground);
+}
+.blocks-ui .ui-icon-tile svg {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+/* Form */
+.blocks-ui .ui-form,
+.blocks-ui .ui-actions {
+  display: grid;
+  gap: 1rem;
+  margin: 0;
+}
+.blocks-ui .ui-actions {
+  gap: 0.5rem;
+}
+.blocks-ui .ui-field {
+  display: grid;
+  gap: 0.5rem;
+}
+.blocks-ui .ui-label {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1;
+  font-weight: 500;
+  user-select: none;
+}
+.blocks-ui .ui-input {
+  width: 100%;
+  min-width: 0;
+  height: 2rem;
+  margin: 0;
+  padding: 0.25rem 0.625rem;
+  border: 1px solid var(--ui-input);
+  border-radius: ${RADIUS};
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  outline: none;
+  transition:
+    color ${EASE},
+    background-color ${EASE},
+    border-color ${EASE};
+}
+.blocks-ui .ui-input::placeholder {
+  color: var(--ui-muted-foreground);
+}
+.blocks-ui .ui-input:focus-visible {
+  border-color: var(--ui-ring);
+  box-shadow: 0 0 0 3px ${alpha("ring", 50)};
+}
+.blocks-ui .ui-input:disabled {
+  pointer-events: none;
+  cursor: not-allowed;
+  background: ${alpha("input", 50)};
+  opacity: 0.5;
+}
+.dark .blocks-ui .ui-input {
+  background: ${alpha("input", 30)};
+}
+.dark .blocks-ui .ui-input:disabled {
+  background: ${alpha("input", 80)};
+}
+@media (min-width: 768px) {
+  .blocks-ui .ui-input {
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+  }
+}
+
+/* Button */
+.blocks-ui .ui-button {
+  display: inline-flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+  gap: 0.375rem;
+  height: 2rem;
+  margin: 0;
+  padding: 0 0.625rem;
+  border: 1px solid transparent;
+  border-radius: ${RADIUS};
+  background-color: transparent;
+  background-clip: padding-box;
+  color: inherit;
+  font: inherit;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  white-space: nowrap;
+  text-decoration: none;
+  cursor: pointer;
+  outline: none;
+  user-select: none;
+  transition: all ${EASE};
+}
+.blocks-ui .ui-button svg {
+  width: 1rem;
+  height: 1rem;
+  flex-shrink: 0;
+  pointer-events: none;
+}
+.blocks-ui .ui-button:focus-visible {
+  border-color: var(--ui-ring);
+  box-shadow: 0 0 0 3px ${alpha("ring", 50)};
+}
+.blocks-ui .ui-button:active:not([aria-haspopup]) {
+  translate: 0 1px;
+}
+.blocks-ui .ui-button:disabled {
+  pointer-events: none;
+  opacity: 0.5;
+}
+.blocks-ui .ui-button-full {
+  width: 100%;
+}
+.blocks-ui .ui-button-default {
+  background-color: var(--ui-primary);
+  color: var(--ui-primary-foreground);
+}
+.blocks-ui .ui-button-outline {
+  border-color: var(--ui-border);
+  background-color: var(--ui-background);
+}
+.dark .blocks-ui .ui-button-outline {
+  border-color: var(--ui-input);
+  background-color: ${alpha("input", 30)};
+}
+@media (hover: hover) {
+  .blocks-ui .ui-button-default:hover {
+    background-color: ${alpha("primary", 80)};
+  }
+  .blocks-ui .ui-button-outline:hover {
+    background-color: var(--ui-muted);
+    color: var(--ui-foreground);
+  }
+  .dark .blocks-ui .ui-button-outline:hover {
+    background-color: ${alpha("input", 50)};
+  }
+}
+
+/* Separator with a label */
+.blocks-ui .ui-separator-text {
+  position: relative;
+  text-align: center;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+.blocks-ui .ui-separator-text::after {
+  content: "";
+  position: absolute;
+  inset: 50% 0 auto;
+  border-top: 1px solid var(--ui-border);
+}
+.blocks-ui .ui-separator-text span {
+  position: relative;
+  z-index: 1;
+  padding: 0 0.5rem;
+  background: var(--ui-card);
+  color: var(--ui-muted-foreground);
+}
+
+/* Alert (destructive) */
+.blocks-ui .ui-alert {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.125rem 0.5rem;
+  width: 100%;
+  padding: 0.5rem 0.625rem;
+  border: 1px solid var(--ui-border);
+  border-radius: ${RADIUS};
+  background: var(--ui-card);
+  color: var(--ui-destructive);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  text-align: start;
+}
+.blocks-ui .ui-alert svg {
+  grid-row: span 2;
+  width: 1rem;
+  height: 1rem;
+  translate: 0 0.125rem;
+}
+.blocks-ui .ui-alert-description {
+  color: ${alpha("destructive", 90)};
+}
+
+/* Spinner */
+.blocks-ui .ui-spinner {
+  width: 1rem;
+  height: 1rem;
+  animation: blocks-ui-spin 1s linear infinite;
+}
+@keyframes blocks-ui-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* The login's page: a page of its own, so it sets the type the app's CSS would. */
+.blocks-ui.ui-login-page {
+  display: flex;
+  min-height: 100vh;
+  min-height: 100svh;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5rem;
+  padding: 1.5rem;
+  background: var(--ui-muted);
+  color: var(--ui-foreground);
+  font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji");
+  line-height: 1.5;
+  -webkit-font-smoothing: antialiased;
+}
+.blocks-ui .ui-login {
+  display: flex;
+  width: 100%;
+  max-width: 24rem;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+@media (min-width: 768px) {
+  .blocks-ui.ui-login-page {
+    padding: 2.5rem;
+  }
+}
+
+/* Empty state (the 404 page), inside the app's layout and type */
+.blocks-ui.ui-empty {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  min-height: 50vh;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+  padding: 3rem;
+  text-align: center;
+  text-wrap: balance;
+}
+.blocks-ui .ui-empty-header {
+  display: flex;
+  max-width: 24rem;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+.blocks-ui .ui-empty-title {
+  margin: 0;
+  font-family: var(--font-heading, inherit);
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+  font-weight: 500;
+  letter-spacing: -0.025em;
+}
+.blocks-ui .ui-empty-description {
+  margin: 0;
+  color: var(--ui-muted-foreground);
+  font-size: 0.875rem;
+  line-height: 1.625;
+}
+
+/* Loading and quiet notes */
+.blocks-ui.ui-loading {
+  display: flex;
+  min-height: 100vh;
+  min-height: 100svh;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+}
+.blocks-ui.ui-loading {
+  color: var(--ui-muted-foreground);
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+`;
+/** Adds the stylesheet once; every component that renders this UI calls it before it lays out. */
+export const ensureUiStyles = () => {
+    if (document.getElementById(STYLE_ID)) {
+        return;
+    }
+    const style = document.createElement("style");
+    style.id = STYLE_ID;
+    style.textContent = UI_STYLES;
+    document.head.appendChild(style);
+};
+/** How often `char` occurs in `value`. */
+const count = (value, char) => value.split(char).length - 1;
+/**
+ * A token this UI reads, with a value that stays inside its declaration: no braces, semicolons,
+ * angle brackets, escapes, `!important` or comment markers, and its quotes and parentheses closed.
+ */
+const isSafeToken = ([name, value]) => APP_TOKENS.has(name) &&
+    typeof value === "string" &&
+    value.length > 0 &&
+    value.length <= 200 &&
+    !/[{};<>\\!]|\/\*/.test(value) &&
+    count(value, '"') % 2 === 0 &&
+    count(value, "'") % 2 === 0 &&
+    count(value, "(") === count(value, ")");
+const declarations = (tokens) => Object.entries(tokens ?? {})
+    .filter(isSafeToken)
+    .map(([name, value]) => `--${name}: ${value};`)
+    .join(" ");
+/**
+ * The app's own tokens, on the login only. A signed-out visitor's page has no app CSS (the bundle
+ * loads after sign-in), so the platform's public app data carries the tokens of the app's
+ * `index.css`, and they are set on the login's page: light, and under the host's `dark` class.
+ * Checked again here, since it is network data written into a stylesheet.
+ */
+export const applyLoginAppTokens = (theme) => {
+    const light = declarations(theme?.variables);
+    const dark = declarations(theme?.darkVariables);
+    let style = document.getElementById(APP_TOKENS_STYLE_ID);
+    if (!light && !dark) {
+        style?.remove();
+        return;
+    }
+    if (!style) {
+        style = document.createElement("style");
+        style.id = APP_TOKENS_STYLE_ID;
+        document.head.appendChild(style);
+    }
+    style.textContent = `.ui-login-page { ${light} }\n.dark .ui-login-page { ${dark} }`;
+};

package/dist/dev-config.d.ts

@@ -0,0 +1,15 @@
+/**
+ * What the boilerplate's `index.html` declares for the dev server (Vite fills the `VITE_*`
+ * placeholders): the platform origin the login posts to, and the app this workspace builds.
+ */
+export interface BlocksDevConfig {
+    apiHost?: string;
+    appId?: string;
+}
+export declare const devConfig: () => BlocksDevConfig | undefined;
+/**
+ * Where the signed-in token is kept: per app on the dev server, as the builder's sandbox seeds it,
+ * and `token` under app-render.
+ */
+export declare const tokenStorageKey: () => string;
+//# sourceMappingURL=dev-config.d.ts.map

package/dist/dev-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev-config.d.ts","sourceRoot":"","sources":["../src/dev-config.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,SAAS,mCAAmF,CAAC;AAE1G;;;GAGG;AACH,eAAO,MAAM,eAAe,cAG3B,CAAC"}

package/dist/dev-config.js

@@ -0,0 +1,9 @@
+export const devConfig = () => window.__BLOCKS_DEV__;
+/**
+ * Where the signed-in token is kept: per app on the dev server, as the builder's sandbox seeds it,
+ * and `token` under app-render.
+ */
+export const tokenStorageKey = () => {
+    const appId = devConfig()?.appId;
+    return appId ? `token-${appId}` : "token";
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blocksdiy/blocks-client-sdk",
-  "version": "1.24.1",
+  "version": "1.25.0",
   "type": "module",
   "description": "Blocks client sdk",
   "keywords": [],
@@ -28,6 +28,11 @@
       "import": "./dist/Page.js",
       "require": "./dist/Page.js",
       "types": "./dist/Page.d.ts"
+    },
+    "./app": {
+      "import": "./dist/app/index.js",
+      "require": "./dist/app/index.js",
+      "types": "./dist/app/index.d.ts"
     }
   },
   "directories": {
@@ -46,25 +51,36 @@
     ]
   },
   "dependencies": {
-    "@blocksdiy/blocks-client-api": "1.30.0",
-    "@blocksdiy/react-common": "1.62.0",
-    "@tanstack/react-query": "^5.101.0"
+    "@blocksdiy/blocks-client-api": "1.30.1",
+    "@blocksdiy/react-common": "1.62.1",
+    "@tanstack/react-query": "^5.101.0",
+    "react-error-boundary": "^6.1.6"
   },
   "devDependencies": {
     "@blockscom/eslint-config": "4.6.4",
+    "jsdom": "^26.1.0",
+    "react-dom": "^19.2.8",
+    "react-router": "^8.4.0",
     "tsc-alias": "^1.8.10",
-    "typescript": "^5.9.3"
+    "typescript": "^5.9.3",
+    "vitest": "^4.1.11"
   },
   "engines": {
     "node": ">=24.22.1"
   },
   "peerDependencies": {
-    "react": ">=18"
+    "react": ">=19",
+    "react-router": ">=7"
+  },
+  "peerDependenciesMeta": {
+    "react-router": {
+      "optional": true
+    }
   },
   "scripts": {
     "clean": "rm -rf ./dist/ && rm -rf tsconfig.tsbuildinfo && rm -rf node_modules",
     "build": "rm -rf dist && tsc && tsc-alias && echo $(date +%s) > .build-sentinel.json",
-    "test": "jest --passWithNoTests --config ./test/jest.json",
+    "test": "jest --passWithNoTests --config ./test/jest.json && vitest run",
     "lint": "pnpm eslint src/",
     "lint-fix": "pnpm eslint src/ --fix"
   }