@lowdefy/server-dev 4.7.3 → 5.0.0

package/lib/client/App.js

@@ -29,6 +29,7 @@ import { getReloadVersion } from './utils/useMutateCache.js';
 import useRootConfig from './utils/useRootConfig.js';
 
 import actions from '../../build/plugins/actions.js';
+import blockMetas from '../../build/plugins/blockMetas.json';
 import blocks from '../../build/plugins/blocks.js';
 import icons from '../../build/plugins/icons.js';
 import operators from '../../build/plugins/operators/client.js';
@@ -38,6 +39,10 @@ const App = ({ auth, lowdefy }) => {
   const router = useRouter();
   const { data: rootConfig } = useRootConfig(router.basePath);
 
+  if (rootConfig?.theme) {
+    lowdefy.theme = rootConfig.theme;
+  }
+
   const { redirect, pageId } = setPageId(router, rootConfig);
   if (redirect) {
     router.push(`/${pageId}`);
@@ -60,6 +65,7 @@ const App = ({ auth, lowdefy }) => {
             router={router}
             types={{
               actions,
+              blockMetas,
               blocks,
               icons,
               operators,

package/lib/client/BuildErrorPage.js

@@ -25,7 +25,7 @@ const typeColors = {
 };
 
 function getTypeColor(type) {
-  return typeColors[type] ?? '#595959';
+  return typeColors[type] ?? 'var(--ant-color-text-secondary)';
 }
 
 const ErrorItem = ({ type, message, source }) => {
@@ -50,7 +50,9 @@ const ErrorItem = ({ type, message, source }) => {
         {type}
       </span>
       <p style={{ fontSize: 14, margin: '4px 0', fontFamily: 'monospace' }}>{message}</p>
-      {source && <p style={{ fontSize: 13, color: '#8c8c8c', margin: 0 }}>{source}</p>}
+      {source && (
+        <p style={{ fontSize: 13, color: 'var(--ant-color-text-tertiary)', margin: 0 }}>{source}</p>
+      )}
     </div>
   );
 };
@@ -67,6 +69,8 @@ const BuildErrorPage = ({ errors, message, source }) => {
         flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'center',
+        backgroundColor: 'var(--ant-color-bg-layout)',
+        color: 'var(--ant-color-text)',
         fontFamily:
           "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
         padding: '0 24px',
@@ -79,7 +83,7 @@ const BuildErrorPage = ({ errors, message, source }) => {
         {errorList.map((err, i) => (
           <ErrorItem key={i} type={err.type} message={err.message} source={err.source} />
         ))}
-        <p style={{ fontSize: 13, color: '#8c8c8c', marginTop: 24 }}>
+        <p style={{ fontSize: 13, color: 'var(--ant-color-text-tertiary)', marginTop: 24 }}>
           Fix the error{errorList.length > 1 ? 's' : ''} in your config and the page will rebuild
           automatically.
         </p>

package/lib/client/BuildingPage.js

@@ -26,6 +26,8 @@ const BuildingPage = () => {
         flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'center',
+        backgroundColor: 'var(--ant-color-bg-layout)',
+        color: 'var(--ant-color-text)',
         fontFamily:
           "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
       }}
@@ -45,7 +47,7 @@ const BuildingPage = () => {
           left: 0,
           width: '100%',
           height: 3,
-          backgroundColor: '#f0f0f0',
+          backgroundColor: 'var(--ant-color-fill-quaternary)',
           overflow: 'hidden',
         }}
       >
@@ -53,7 +55,7 @@ const BuildingPage = () => {
           style={{
             width: '40%',
             height: '100%',
-            backgroundColor: '#1890ff',
+            backgroundColor: 'var(--ant-color-primary)',
             animation: 'building-progress 1.5s ease-in-out infinite',
           }}
         />

package/lib/client/ErrorBar.js

@@ -0,0 +1,152 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import React, { useCallback, useState } from 'react';
+
+function getBarStyle(errors) {
+  const hasError = errors.some((e) => e.type !== 'ConfigWarning');
+  return {
+    position: 'fixed',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    height: 28,
+    backgroundColor: hasError ? '#cf1322' : '#d48806',
+    color: '#fff',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: '0 12px',
+    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace',
+    fontSize: 12,
+    lineHeight: '14px',
+    zIndex: 99999,
+    boxShadow: '0 -1px 4px rgba(0,0,0,0.15)',
+  };
+}
+
+function formatErrorsForCopy(errors) {
+  return errors
+    .map((e) => {
+      let text = `[${e.type}] ${e.message}`;
+      if (e.source) text += `\n  Source: ${e.source}`;
+      if (e.stack) text += `\n${e.stack}`;
+      return text;
+    })
+    .join('\n\n');
+}
+
+function CopyIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+      <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1" />
+    </svg>
+  );
+}
+
+function CheckIcon() {
+  return (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  );
+}
+
+const ErrorBar = ({ errors }) => {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(() => {
+    const text = formatErrorsForCopy(errors);
+    navigator.clipboard.writeText(text).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    });
+  }, [errors]);
+
+  if (!errors || errors.length === 0) return null;
+
+  const latest = errors[errors.length - 1];
+  const count = errors.length;
+
+  return (
+    <div style={getBarStyle(errors)}>
+      <div
+        style={{
+          overflow: 'hidden',
+          textOverflow: 'ellipsis',
+          whiteSpace: 'nowrap',
+          flex: 1,
+          minWidth: 0,
+        }}
+      >
+        <span style={{ opacity: 0.8 }}>{latest.type}: </span>
+        <span>{latest.message}</span>
+        {latest.source && <span style={{ opacity: 0.7, marginLeft: 8 }}>{latest.source}</span>}
+      </div>
+      <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0, marginLeft: 12 }}>
+        {count > 1 && (
+          <span
+            style={{
+              backgroundColor: 'rgba(255,255,255,0.25)',
+              borderRadius: 8,
+              padding: '1px 7px',
+              fontSize: 11,
+            }}
+          >
+            {count}
+          </span>
+        )}
+        <button
+          onClick={handleCopy}
+          title={copied ? 'Copied!' : 'Copy all errors'}
+          style={{
+            background: 'none',
+            border: 'none',
+            color: '#fff',
+            cursor: 'pointer',
+            padding: 2,
+            display: 'flex',
+            alignItems: 'center',
+            opacity: copied ? 1 : 0.7,
+          }}
+        >
+          {copied ? <CheckIcon /> : <CopyIcon />}
+        </button>
+      </div>
+    </div>
+  );
+};
+
+export default ErrorBar;

package/lib/client/InstallingPluginsPage.js

@@ -26,6 +26,8 @@ const InstallingPluginsPage = ({ packages }) => {
         flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'center',
+        backgroundColor: 'var(--ant-color-bg-layout)',
+        color: 'var(--ant-color-text)',
         fontFamily:
           "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
       }}

package/lib/client/Page.js

@@ -14,7 +14,7 @@
   limitations under the License.
 */
 
-import React from 'react';
+import React, { useEffect, useRef } from 'react';
 import { GenIcon } from 'react-icons/lib';
 import Client from '@lowdefy/client';
 
@@ -36,6 +36,17 @@ const Page = ({
 }) => {
   const { data: pageConfig } = usePageConfig(pageId, router.basePath);
 
+  // Push build warnings to ErrorBar via runtime error callback
+  const pushedWarningsRef = useRef(null);
+  useEffect(() => {
+    if (pageConfig?._warnings && pageConfig._warnings !== pushedWarningsRef.current) {
+      pushedWarningsRef.current = pageConfig._warnings;
+      for (const warning of pageConfig._warnings) {
+        lowdefy._runtimeErrorCallback?.(warning);
+      }
+    }
+  }, [pageConfig?._warnings, lowdefy]);
+
   if (!pageConfig) {
     router.replace(`/404`);
     return '';

package/lib/client/Reload.js

@@ -34,6 +34,11 @@ const Reload = ({ children, basePath, lowdefy }) => {
         if (lowdefy._internal?.initialised) {
           lowdefy._internal.initialised = false;
         }
+        // Refresh JIT CSS link to pick up newly compiled Tailwind classes
+        const cssLink = document.getElementById('tailwind-jit-css');
+        if (cssLink) {
+          cssLink.href = `${basePath}/tailwind-jit.css?v=${Date.now()}`;
+        }
         setReset(true);
         console.log('Reloaded config.');
       }, 600);

package/lib/client/RestartingPage.js

@@ -26,6 +26,8 @@ const RestartingPage = () => {
         flexDirection: 'column',
         alignItems: 'center',
         justifyContent: 'center',
+        backgroundColor: 'var(--ant-color-bg-layout)',
+        color: 'var(--ant-color-text)',
         fontFamily:
           "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
       }}

package/lib/client/utils/usePageConfig.js

@@ -71,6 +71,12 @@ async function fetchPageConfig(url) {
   data._jsEntries = jsEntries;
   data._dynamicIcons = dynamicIcons;
 
+  // Bust CSS cache so the browser picks up newly compiled Tailwind classes
+  const cssLink = document.getElementById('tailwind-jit-css');
+  if (cssLink) {
+    cssLink.href = `${basePath}/tailwind-jit.css?v=${Date.now()}`;
+  }
+
   return data;
 }
 

package/lib/server/compileCss.js

@@ -0,0 +1,39 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import fs from 'fs';
+import path from 'path';
+import postcss from 'postcss';
+import tailwindcssPlugin from '@tailwindcss/postcss';
+
+async function compileCss(buildDirectory) {
+  const serverDirectory = path.resolve(buildDirectory, '..');
+  const inputPath = path.join(buildDirectory, 'globals.css');
+  const outputPath = path.join(serverDirectory, 'public/tailwind-jit.css');
+  if (!fs.existsSync(inputPath)) return;
+  const css = fs.readFileSync(inputPath, 'utf8');
+  const result = await postcss([tailwindcssPlugin()]).process(css, {
+    from: inputPath,
+    to: outputPath,
+  });
+  // The Tailwind PostCSS plugin consumes the @layer order declaration from
+  // globals.css during compilation. Re-inject it as the first line so the
+  // browser establishes the correct cascade priority (antd > base/preflight).
+  const layerOrder = '@layer theme, base, antd, components, utilities;\n';
+  fs.writeFileSync(outputPath, layerOrder + result.css);
+}
+
+export default compileCss;

package/lib/server/jitPageBuilder.js

@@ -19,6 +19,7 @@ import path from 'path';
 import { serializer } from '@lowdefy/helpers';
 import { buildPageJit, createContext, makeId } from '@lowdefy/build/dev';
 
+import compileCss from './compileCss.js';
 import createLogger from './log/createLogger.js';
 import PageCache from './pageCache.mjs';
 
@@ -174,11 +175,12 @@ async function buildPageIfNeeded({ pageId, buildDirectory, configDirectory }) {
       return result;
     }
     pageCache.markCompiled(pageId);
+    await compileCss(buildDirectory);
     jitLogger.info(
       { spin: 'succeed', color: 'white' },
       `Built page "${pageId}" in ${formatDuration(Date.now() - startTime)}.`
     );
-    return true;
+    return { built: true, warnings: result?._warnings };
   } finally {
     pageCache.releaseBuildLock(pageId);
   }

package/manager/getContext.mjs

@@ -22,6 +22,7 @@ import { hideBin } from 'yargs/helpers';
 import pino from 'pino';
 import { createNodeLogger } from '@lowdefy/logger/node';
 import checkMockUserWarning from './processes/checkMockUserWarning.mjs';
+import compileCss from './processes/compileCss.mjs';
 import initialBuild from './processes/initialBuild.mjs';
 import installPlugins from './processes/installPlugins.mjs';
 import lowdefyBuild from './processes/lowdefyBuild.mjs';
@@ -86,6 +87,7 @@ async function getContext() {
     }
   };
 
+  context.compileCss = compileCss(context);
   context.nextBuild = nextBuild(context);
   context.readDotEnv = readDotEnv(context);
   context.reloadClients = reloadClients(context);

package/manager/processes/compileCss.mjs

@@ -0,0 +1,54 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import fs from 'fs';
+import path from 'path';
+import postcss from 'postcss';
+import tailwindcssPlugin from '@tailwindcss/postcss';
+
+function formatDuration(ms) {
+  if (ms < 1000) return `${ms}ms`;
+  return `${(ms / 1000).toFixed(2)}s`;
+}
+
+function compileCss({ directories, logger }) {
+  return async () => {
+    const inputPath = path.join(directories.build, 'globals.css');
+    const outputPath = path.join(directories.server, 'public/tailwind-jit.css');
+    if (!fs.existsSync(inputPath)) return;
+
+    logger.info({ spin: 'start' }, 'Compiling CSS...');
+    const startTime = Date.now();
+
+    const css = fs.readFileSync(inputPath, 'utf8');
+    const result = await postcss([tailwindcssPlugin()]).process(css, {
+      from: inputPath,
+      to: outputPath,
+    });
+    // The Tailwind PostCSS plugin consumes the @layer order declaration from
+    // globals.css during compilation. Re-inject it as the first line so the
+    // browser establishes the correct cascade priority (antd > base/preflight).
+    const layerOrder = '@layer theme, base, antd, components, utilities;\n';
+    fs.writeFileSync(outputPath, layerOrder + result.css);
+
+    logger.info(
+      { spin: 'succeed' },
+      `Compiled CSS in ${formatDuration(Date.now() - startTime)}.`
+    );
+  };
+}
+
+export default compileCss;

package/manager/processes/initialBuild.mjs

@@ -22,6 +22,7 @@ function initialBuild(context) {
     await context.checkMockUserWarning();
     await context.installPlugins();
     await context.nextBuild();
+    await context.compileCss();
   };
 }
 

package/manager/processes/nextBuild.mjs

@@ -30,7 +30,7 @@ function nextBuild({ bin, logger }) {
     try {
       await spawnProcess({
         command: 'node',
-        args: [bin.next, 'build'],
+        args: ['--max-old-space-size=4096', bin.next, 'build'],
         stdOutLineHandler: (line) => logger.debug(line),
         stdErrLineHandler: (line) => {
           logger.debug(line);

package/manager/run.mjs

@@ -57,7 +57,7 @@ The run script does the following:
     - <build-dir>/config.json changes, rebuild and restart server.
 
   If user styles change:
-    - <public-dir>/styles.less changes, rebuild and restart server.
+    - <public-dir>/styles.css changes, rebuild and restart server.
 
   If new plugin type in an existing plugin package is used:
     - <build-dir>/plugins/** changes,  rebuild next and restart server.

package/manager/utils/createCustomPluginTypesMap.mjs

@@ -15,12 +15,15 @@
   limitations under the License.
 */
 
+import { createRequire } from 'node:module';
 import path from 'path';
 import { get } from '@lowdefy/helpers';
 import { readFile } from '@lowdefy/node-utils';
 import { createPluginTypesMap } from '@lowdefy/build';
 import YAML from 'yaml';
 
+const require = createRequire(import.meta.url);
+
 async function getPluginDefinitions({ directories }) {
   let lowdefyYaml = await readFile(path.join(directories.config, 'lowdefy.yaml'));
   if (!lowdefyYaml) {
@@ -42,6 +45,7 @@ async function createCustomPluginTypesMap({ directories, logger }) {
       events: {},
       providers: {},
     },
+    blockMetas: {},
     blocks: {},
     connections: {},
     icons: {},
@@ -50,10 +54,6 @@ async function createCustomPluginTypesMap({ directories, logger }) {
       server: {},
     },
     requests: {},
-    styles: {
-      packages: {},
-      blocks: {},
-    },
   };
 
   const pluginDefinitions = await getPluginDefinitions({ directories });
@@ -61,7 +61,7 @@ async function createCustomPluginTypesMap({ directories, logger }) {
   for (const plugin of pluginDefinitions) {
     let types;
     try {
-      types = (await import(`${plugin.name}/types`)).default;
+      types = require(`${plugin.name}/types`);
     } catch (e) {
       logger.error(`Failed to import plugin "${plugin.name}".`);
       logger.debug(e);
@@ -69,7 +69,7 @@ async function createCustomPluginTypesMap({ directories, logger }) {
       throw new Error(`Failed to import plugin "${plugin.name}".`);
     }
     createPluginTypesMap({
-      packageTypes: types,
+      packageTypes: types.default ?? types,
       typesMap: customTypesMap,
       packageName: plugin.name,
       version: plugin.version,

package/manager/utils/updatePageTailwindCss.mjs

@@ -0,0 +1,73 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import fs from 'fs';
+import path from 'path';
+import YAML from 'yaml';
+
+function collectStrings(obj, strings) {
+  if (!obj || typeof obj !== 'object') {
+    if (typeof obj === 'string') strings.push(obj);
+    return;
+  }
+  if (Array.isArray(obj)) {
+    for (const item of obj) collectStrings(item, strings);
+    return;
+  }
+  for (const value of Object.values(obj)) {
+    collectStrings(value, strings);
+  }
+}
+
+async function updatePageTailwindCss({ changedFiles, context }) {
+  let contentWritten = false;
+
+  changedFiles
+    .filter((f) => f.endsWith('.yaml') || f.endsWith('.yml'))
+    .forEach((f) => {
+      try {
+        const content = fs.readFileSync(
+          path.join(context.directories.config, f),
+          'utf8'
+        );
+        const doc = YAML.parse(content);
+
+        const pageId = path.basename(f, path.extname(f));
+        const allStrings = [];
+        collectStrings(doc, allStrings);
+        if (allStrings.length > 0) {
+          const contentPath = path.join(
+            context.directories.server,
+            'lowdefy-build',
+            'tailwind',
+            `${pageId}.html`
+          );
+          fs.mkdirSync(path.dirname(contentPath), { recursive: true });
+          fs.writeFileSync(contentPath, allStrings.join('\n'));
+          contentWritten = true;
+        }
+      } catch {
+        // YAML parse error — skip
+      }
+    });
+
+  if (contentWritten) {
+    await context.compileCss();
+  }
+  return contentWritten;
+}
+
+export default updatePageTailwindCss;

package/manager/watchers/lowdefyBuildWatcher.mjs

@@ -19,6 +19,7 @@ import path from 'path';
 import getLowdefyVersion from '../utils/getLowdefyVersion.mjs';
 import loadSkeletonSourceFiles from '../utils/loadSkeletonSourceFiles.mjs';
 import setupWatcher from '../utils/setupWatcher.mjs';
+import updatePageTailwindCss from '../utils/updatePageTailwindCss.mjs';
 
 function lowdefyBuildWatcher(context) {
   const fixRelativePathConfigDir = (item) =>
@@ -50,10 +51,11 @@ function lowdefyBuildWatcher(context) {
 
       if (isSkeletonChange) {
         await context.lowdefyBuild();
+        await context.compileCss();
       } else {
-        // Page-only changes: write signal file so the server invalidates its page cache
         const invalidatePath = path.join(context.directories.build, 'invalidatePages');
         fs.writeFileSync(invalidatePath, String(Date.now()));
+        await updatePageTailwindCss({ changedFiles, context });
         context.logger.info('Page files changed, invalidated all pages.');
       }
     } catch (error) {

package/manager/watchers/nextBuildWatcher.mjs

@@ -38,8 +38,9 @@ const trackedFiles = [
   'build/plugins/operators/clientJsMap.js',
   'build/plugins/operators/server.js',
   'build/plugins/operators/serverJsMap.js',
-  'build/plugins/styles.less',
-  'public/styles.less',
+  'build/plugins/styles.css',
+  'build/globals.css',
+  'public/styles.css',
   'package.json',
 ];
 
@@ -94,7 +95,7 @@ async function nextBuildWatcher(context) {
     if (install) {
       context.logger.warn('Plugin dependencies have changed and will be reinstalled.');
       await context.installPlugins();
-      // Rebuild Lowdefy artifacts (blocks.js, icons.js, styles.less, etc.)
+      // Rebuild Lowdefy artifacts (blocks.js, icons.js, styles.css, etc.)
       // so newly installed packages are included in the Next.js bundle.
       await context.lowdefyBuild();
       // Re-hash all tracked files to avoid detecting our own build output
@@ -106,6 +107,7 @@ async function nextBuildWatcher(context) {
       );
     }
     await context.nextBuild();
+    await context.compileCss();
     context.restartServer();
   };
 

package/next.config.js

@@ -1,32 +1,18 @@
-const withLess = require('next-with-less');
 const lowdefyConfig = require('./build/config.json');
+const blockPackages = require('./build/blockPackages.json');
 
-const nextConfig = withLess({
+// Transpile @lowdefy/client plus all block plugin packages that may
+// contain CSS imports (e.g., AG Grid themes, loaders, markdown).
+// Built dynamically so custom user plugins are included automatically.
+const transpilePackages = ['@lowdefy/client', ...blockPackages];
+
+const nextConfig = {
   basePath: lowdefyConfig.basePath,
   // reactStrictMode: true,
-  webpack: (config, { isServer }) => {
-    if (!isServer) {
-      config.resolve.fallback = {
-        assert: false,
-        buffer: false,
-        crypto: false,
-        events: false,
-        fs: false,
-        path: false,
-        process: require.resolve('process/browser'),
-        util: false,
-      };
-    }
-    return config;
-  },
+  turbopack: {},
+  transpilePackages,
   compress: false,
-  outputFileTracing: false,
   poweredByHeader: false,
-  generateEtags: false,
-  optimizeFonts: false,
-  eslint: {
-    ignoreDuringBuilds: true,
-  },
-});
+};
 
 module.exports = nextConfig;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lowdefy/server-dev",
-  "version": "4.7.3",
+  "version": "5.0.0",
   "license": "Apache-2.0",
   "description": "",
   "homepage": "https://lowdefy.com",
@@ -36,55 +36,57 @@
     ".npmrc"
   ],
   "dependencies": {
-    "@lowdefy/actions-core": "4.7.3",
-    "@lowdefy/api": "4.7.3",
-    "@lowdefy/block-utils": "4.7.3",
-    "@lowdefy/blocks-aggrid": "4.7.3",
-    "@lowdefy/blocks-antd": "4.7.3",
-    "@lowdefy/blocks-basic": "4.7.3",
-    "@lowdefy/blocks-color-selectors": "4.7.3",
-    "@lowdefy/blocks-echarts": "4.7.3",
-    "@lowdefy/blocks-loaders": "4.7.3",
-    "@lowdefy/blocks-markdown": "4.7.3",
-    "@lowdefy/blocks-qr": "4.7.3",
-    "@lowdefy/build": "4.7.3",
-    "@lowdefy/client": "4.7.3",
-    "@lowdefy/engine": "4.7.3",
-    "@lowdefy/errors": "4.7.3",
-    "@lowdefy/helpers": "4.7.3",
-    "@lowdefy/layout": "4.7.3",
-    "@lowdefy/logger": "4.7.3",
-    "@lowdefy/node-utils": "4.7.3",
-    "@lowdefy/operators-change-case": "4.7.3",
-    "@lowdefy/operators-diff": "4.7.3",
-    "@lowdefy/operators-js": "4.7.3",
-    "@lowdefy/operators-moment": "4.7.3",
-    "@lowdefy/operators-mql": "4.7.3",
-    "@lowdefy/operators-nunjucks": "4.7.3",
-    "@lowdefy/operators-uuid": "4.7.3",
-    "@lowdefy/operators-yaml": "4.7.3",
-    "@lowdefy/plugin-next-auth": "4.7.3",
+    "@lowdefy/actions-core": "5.0.0",
+    "@lowdefy/api": "5.0.0",
+    "@lowdefy/block-utils": "5.0.0",
+    "@lowdefy/blocks-aggrid": "5.0.0",
+    "@lowdefy/blocks-antd": "5.0.0",
+    "@lowdefy/blocks-basic": "5.0.0",
+    "@lowdefy/blocks-echarts": "5.0.0",
+    "@lowdefy/blocks-loaders": "5.0.0",
+    "@lowdefy/blocks-markdown": "5.0.0",
+    "@lowdefy/build": "5.0.0",
+    "@lowdefy/client": "5.0.0",
+    "@lowdefy/connection-axios-http": "5.0.0",
+    "@lowdefy/engine": "5.0.0",
+    "@lowdefy/errors": "5.0.0",
+    "@lowdefy/helpers": "5.0.0",
+    "@lowdefy/layout": "5.0.0",
+    "@lowdefy/logger": "5.0.0",
+    "@lowdefy/node-utils": "5.0.0",
+    "@lowdefy/operators-change-case": "5.0.0",
+    "@lowdefy/operators-dayjs": "5.0.0",
+    "@lowdefy/operators-diff": "5.0.0",
+    "@lowdefy/operators-js": "5.0.0",
+    "@lowdefy/operators-mql": "5.0.0",
+    "@lowdefy/operators-nunjucks": "5.0.0",
+    "@lowdefy/operators-uuid": "5.0.0",
+    "@lowdefy/operators-yaml": "5.0.0",
+    "@lowdefy/plugin-next-auth": "5.0.0",
+    "@ant-design/cssinjs": "2.1.2",
+    "antd": "6.3.1",
+    "dayjs": "1.11.19",
     "chokidar": "3.5.3",
     "dotenv": "16.3.1",
-    "next": "13.5.4",
-    "next-auth": "4.24.5",
+    "@tailwindcss/postcss": "4.2.1",
+    "next": "16.1.6",
+    "postcss": "8.5.6",
+    "tailwindcss": "4.2.1",
+    "next-auth": "4.24.10",
     "opener": "1.5.2",
     "pino": "8.16.2",
     "process": "0.11.10",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-icons": "4.12.0",
+    "react-icons": "5.6.0",
     "swr": "2.2.4",
     "uuid": "13.0.0",
     "yaml": "2.3.4",
     "yargs": "17.7.2"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "13.5.4",
+    "@next/eslint-plugin-next": "16.1.6",
     "jest": "28.1.3",
-    "less": "4.1.3",
-    "less-loader": "11.1.3",
-    "next-with-less": "3.0.1",
     "webpack": "5.94.0"
   },
   "engines": {

package/package.original.json

@@ -1,6 +1,6 @@
 {
   "name": "@lowdefy/server-dev",
-  "version": "4.7.3",
+  "version": "5.0.0",
   "license": "Apache-2.0",
   "description": "",
   "homepage": "https://lowdefy.com",
@@ -44,55 +44,57 @@
     "prepublishOnly": "pnpm build"
   },
   "dependencies": {
-    "@lowdefy/actions-core": "4.7.3",
-    "@lowdefy/api": "4.7.3",
-    "@lowdefy/block-utils": "4.7.3",
-    "@lowdefy/blocks-aggrid": "4.7.3",
-    "@lowdefy/blocks-antd": "4.7.3",
-    "@lowdefy/blocks-basic": "4.7.3",
-    "@lowdefy/blocks-color-selectors": "4.7.3",
-    "@lowdefy/blocks-echarts": "4.7.3",
-    "@lowdefy/blocks-loaders": "4.7.3",
-    "@lowdefy/blocks-markdown": "4.7.3",
-    "@lowdefy/blocks-qr": "4.7.3",
-    "@lowdefy/build": "4.7.3",
-    "@lowdefy/client": "4.7.3",
-    "@lowdefy/engine": "4.7.3",
-    "@lowdefy/errors": "4.7.3",
-    "@lowdefy/helpers": "4.7.3",
-    "@lowdefy/layout": "4.7.3",
-    "@lowdefy/logger": "4.7.3",
-    "@lowdefy/node-utils": "4.7.3",
-    "@lowdefy/operators-change-case": "4.7.3",
-    "@lowdefy/operators-diff": "4.7.3",
-    "@lowdefy/operators-js": "4.7.3",
-    "@lowdefy/operators-moment": "4.7.3",
-    "@lowdefy/operators-mql": "4.7.3",
-    "@lowdefy/operators-nunjucks": "4.7.3",
-    "@lowdefy/operators-uuid": "4.7.3",
-    "@lowdefy/operators-yaml": "4.7.3",
-    "@lowdefy/plugin-next-auth": "4.7.3",
+    "@lowdefy/actions-core": "5.0.0",
+    "@lowdefy/api": "5.0.0",
+    "@lowdefy/block-utils": "5.0.0",
+    "@lowdefy/blocks-aggrid": "5.0.0",
+    "@lowdefy/blocks-antd": "5.0.0",
+    "@lowdefy/blocks-basic": "5.0.0",
+    "@lowdefy/blocks-echarts": "5.0.0",
+    "@lowdefy/blocks-loaders": "5.0.0",
+    "@lowdefy/blocks-markdown": "5.0.0",
+    "@lowdefy/build": "5.0.0",
+    "@lowdefy/client": "5.0.0",
+    "@lowdefy/connection-axios-http": "5.0.0",
+    "@lowdefy/engine": "5.0.0",
+    "@lowdefy/errors": "5.0.0",
+    "@lowdefy/helpers": "5.0.0",
+    "@lowdefy/layout": "5.0.0",
+    "@lowdefy/logger": "5.0.0",
+    "@lowdefy/node-utils": "5.0.0",
+    "@lowdefy/operators-change-case": "5.0.0",
+    "@lowdefy/operators-dayjs": "5.0.0",
+    "@lowdefy/operators-diff": "5.0.0",
+    "@lowdefy/operators-js": "5.0.0",
+    "@lowdefy/operators-mql": "5.0.0",
+    "@lowdefy/operators-nunjucks": "5.0.0",
+    "@lowdefy/operators-uuid": "5.0.0",
+    "@lowdefy/operators-yaml": "5.0.0",
+    "@lowdefy/plugin-next-auth": "5.0.0",
+    "@ant-design/cssinjs": "2.1.2",
+    "antd": "6.3.1",
+    "dayjs": "1.11.19",
     "chokidar": "3.5.3",
     "dotenv": "16.3.1",
-    "next": "13.5.4",
-    "next-auth": "4.24.5",
+    "@tailwindcss/postcss": "4.2.1",
+    "next": "16.1.6",
+    "postcss": "8.5.6",
+    "tailwindcss": "4.2.1",
+    "next-auth": "4.24.10",
     "opener": "1.5.2",
     "pino": "8.16.2",
     "process": "0.11.10",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-icons": "4.12.0",
+    "react-icons": "5.6.0",
     "swr": "2.2.4",
     "uuid": "13.0.0",
     "yaml": "2.3.4",
     "yargs": "17.7.2"
   },
   "devDependencies": {
-    "@next/eslint-plugin-next": "13.5.4",
+    "@next/eslint-plugin-next": "16.1.6",
     "jest": "28.1.3",
-    "less": "4.1.3",
-    "less-loader": "11.1.3",
-    "next-with-less": "3.0.1",
     "webpack": "5.94.0"
   },
   "engines": {

package/pages/_app.js

@@ -14,18 +14,74 @@
   limitations under the License.
 */
 
-import React, { Suspense, useCallback, useRef } from 'react';
+// CSS layer order — MUST be the first CSS import. Turbopack treats this as critical
+// CSS that loads before hydration, locking the cascade priority (antd > base/preflight)
+// before antd's StyleProvider injects @layer antd {} at runtime.
+import '../build/layer-order.css';
+
+import React, { Suspense, useCallback, useEffect, useRef, useState } from 'react';
 import dynamic from 'next/dynamic';
+import { useRouter } from 'next/router';
+import useSWR from 'swr';
 
 import { ErrorBoundary } from '@lowdefy/block-utils';
+import { useDarkMode } from '@lowdefy/client';
+import { StyleProvider } from '@ant-design/cssinjs';
+import { App as AntdApp, ConfigProvider, theme as antdTheme } from 'antd';
 
 import Auth from '../lib/client/auth/Auth.js';
+import ErrorBar from '../lib/client/ErrorBar.js';
+import request from '../lib/client/utils/request.js';
+
+// Full Tailwind CSS — also loaded via <link href="tailwind-jit.css"> in _document.js
+// for hot-reloading. The Turbopack chunk provides layer ordering guarantee on initial load.
+import '../build/globals.css';
 
-// Must be in _app due to next specifications.
-import '../build/plugins/styles.less';
+function ThemeTokenResolver({ lowdefyRef, children }) {
+  const { token } = antdTheme.useToken();
+  if (!lowdefyRef.current.theme) {
+    lowdefyRef.current.theme = {};
+  }
+  lowdefyRef.current.theme._resolvedAntdToken = token;
+  return children;
+}
 
 function App({ Component }) {
+  const router = useRouter();
   const lowdefyRef = useRef({});
+  const [runtimeErrors, setRuntimeErrors] = useState([]);
+  // Subscribe to rootConfig SWR cache — deduplicates with inner App.js fetch.
+  // Without suspense so _app.js doesn't suspend — just re-renders when data arrives.
+  const { data: rootConfig } = useSWR(`${router.basePath}/api/root`, (url) => request({ url }));
+  if (rootConfig?.theme) {
+    lowdefyRef.current.theme = rootConfig.theme;
+  }
+
+  const algorithm = useDarkMode({
+    baseAlgorithm: lowdefyRef.current.theme?.antd?.algorithm,
+    configDarkMode: lowdefyRef.current.theme?.darkMode,
+  });
+
+  // Runtime error callback — pushes errors to state for ErrorBar display.
+  // Accepts Error objects (with .name) or plain objects (with .type) from build warnings.
+  lowdefyRef.current._runtimeErrorCallback = useCallback((error) => {
+    setRuntimeErrors((prev) => [
+      ...prev,
+      {
+        type: error.type ?? error.name,
+        message: error.message,
+        source: error.source,
+        stack: error.stack,
+      },
+    ]);
+  }, []);
+
+  // Clear runtime errors on route change
+  useEffect(() => {
+    const clearErrors = () => setRuntimeErrors([]);
+    router.events.on('routeChangeStart', clearErrors);
+    return () => router.events.off('routeChangeStart', clearErrors);
+  }, [router.events]);
 
   const handleError = useCallback((error) => {
     if (lowdefyRef.current?._internal?.handleError) {
@@ -36,15 +92,40 @@ function App({ Component }) {
   }, []);
 
   return (
-    <ErrorBoundary fullPage onError={handleError}>
-      <Suspense fallback="">
-        <Auth>
-          {(auth) => {
-            return <Component auth={auth} lowdefy={lowdefyRef.current} />;
-          }}
-        </Auth>
-      </Suspense>
-    </ErrorBoundary>
+    <StyleProvider layer>
+      <ConfigProvider
+        theme={{
+          ...lowdefyRef.current.theme?.antd,
+          cssVar: { key: 'lowdefy' },
+          hashed: false,
+          algorithm,
+        }}
+      >
+        <AntdApp>
+          <ThemeTokenResolver lowdefyRef={lowdefyRef}>
+            <ErrorBoundary fullPage onError={handleError}>
+              <Suspense
+                fallback={
+                  <div
+                    style={{
+                      minHeight: '100vh',
+                      background: 'var(--ant-color-bg-layout)',
+                    }}
+                  />
+                }
+              >
+                <Auth>
+                  {(auth) => {
+                    return <Component auth={auth} lowdefy={lowdefyRef.current} />;
+                  }}
+                </Auth>
+              </Suspense>
+            </ErrorBoundary>
+            <ErrorBar errors={runtimeErrors} />
+          </ThemeTokenResolver>
+        </AntdApp>
+      </ConfigProvider>
+    </StyleProvider>
   );
 }
 

package/pages/_document.js

@@ -25,11 +25,23 @@ const basePath = lowdefyConfig.basePath ?? '';
 class LowdefyDocument extends Document {
   render() {
     return (
-      <Html>
+      <Html className="lowdefy">
         <Head>
+          {/* Synchronous script that creates the @layer order declaration and keeps
+              it as the first child of <head> via MutationObserver. antd's CSS-in-JS
+              uses prependQueue to inject <style> tags at the top of <head>, which
+              would otherwise make @layer antd the first (lowest priority) layer.
+              MutationObserver fires before paint, so the browser never sees the
+              wrong cascade order. */}
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `(function(){var s=document.createElement("style");s.id="__lf-layer-order";s.textContent="@layer theme, base, antd, components, utilities;";document.head.prepend(s);new MutationObserver(function(){if(document.head.firstChild!==s)document.head.prepend(s)}).observe(document.head,{childList:true})})();`,
+            }}
+          />
           <link rel="manifest" href={`${basePath}/manifest.webmanifest`} />
           <link rel="icon" type="image/svg+xml" href={`${basePath}/icon.svg`} />
           <link rel="apple-touch-icon" href={`${basePath}/apple-touch-icon.png`} />
+          <link id="tailwind-jit-css" rel="stylesheet" href={`${basePath}/tailwind-jit.css`} />
           <meta name="viewport" content="width=device-width, initial-scale=1" />
           <script
             dangerouslySetInnerHTML={{

package/pages/api/page/[pageId].js

@@ -39,6 +39,7 @@ async function handler({ context, req, res }) {
         type: err.name ?? 'Error',
         message: err.message,
         source: err.source ?? null,
+        stack: err.stack ?? null,
       });
     }
     res.status(500).json({
@@ -63,6 +64,9 @@ async function handler({ context, req, res }) {
   if (pageConfig === null) {
     res.status(404).send('Page not found.');
   } else {
+    if (buildResult?.warnings?.length > 0) {
+      pageConfig._warnings = buildResult.warnings;
+    }
     res.status(200).json(pageConfig);
   }
 }