@arronqzy/abuilder 0.1.0

package/README.md

@@ -0,0 +1,111 @@
+# @arronqzy/abuilder
+
+Abuilder 可视化编辑器 npm 包。安装后在 React 应用中引入 `App` 即可渲染完整编辑器（含蓝图、工作区、在线预览）。
+
+## 安装
+
+```bash
+npm install @arronqzy/abuilder react react-dom
+# 或
+pnpm add @arronqzy/abuilder react react-dom
+```
+
+## 使用
+
+```tsx
+import { createRoot } from "react-dom/client";
+import { App } from "@arronqzy/abuilder";
+import "@arronqzy/abuilder/styles.css";
+
+createRoot(document.getElementById("root")!).render(<App />);
+```
+
+### 可选配置
+
+```tsx
+<App
+  className="h-screen"
+  defaultTheme="dark"
+  initialZoom={1}
+/>
+```
+
+### 在线预览
+
+URL 带 `?preview=online&projectId=<工作区ID>` 时自动进入预览模式。也可手动传入：
+
+```tsx
+<App previewSearch="?preview=online&projectId=xxx" />
+```
+
+## 高级导出
+
+除 `App` 外，也可直接使用底层组件：
+
+```tsx
+import { ReactViewPanel, ReactViewOnlinePreview } from "@arronqzy/abuilder";
+```
+
+## 发布到 npm
+
+### 构建
+
+```bash
+pnpm -C packages/ui run build:css
+pnpm -C packages/react-view run build:css
+pnpm -C packages/abuilder build
+```
+
+### 登录
+
+```bash
+npm login
+```
+
+需有 `@arronqzy` scope 发布权限，且 npm 账号已开启 **2FA（双因素认证）**。
+
+若发布报 `403 ... Two-factor authentication ... is required`：
+
+1. 打开 [npm 账号安全设置](https://www.npmjs.com/settings/~/security)
+2. 开启 **Two-Factor Authentication**（建议选 *Authorization and writes*）
+3. 重新登录：`npm logout && npm login`（按提示输入 OTP）
+4. 再执行 publish
+
+也可使用 [Granular Access Token](https://www.npmjs.com/settings/~/tokens)（勾选 publish 权限），然后：
+
+```bash
+npm config set //registry.npmjs.org/:_authToken=你的token
+```
+
+### 先发布依赖包
+
+```bash
+pnpm --filter @arronqzy/blueprint-dsl publish --access public --no-git-checks
+pnpm --filter @arronqzy/rx-store publish --access public --no-git-checks
+pnpm --filter @arronqzy/ui publish --access public --no-git-checks
+pnpm --filter @arronqzy/react-blueprint publish --access public --no-git-checks
+pnpm --filter @arronqzy/react-view publish --access public --no-git-checks
+```
+
+### 发布 abuilder
+
+不要用 `pnpm -C packages/abuilder publish`（会触发 npm 参数错误）。
+
+```bash
+pnpm --filter @arronqzy/abuilder publish --access public --no-git-checks
+```
+
+### 发布前自检
+
+```bash
+cd packages/abuilder && pnpm pack
+tar -tzf arronqzy-abuilder-*.tgz | grep styles.css
+```
+
+应能看到 `package/dist/styles.css`。
+
+## 宿主应用要求
+
+- React 18+
+- 构建工具需支持 CSS 导入（Vite / Webpack 5 等）
+- 根节点容器建议 `height: 100%`（样式已包含 `#root` / `#app` 规则）

package/dist/index.cjs

@@ -0,0 +1,58 @@
+'use strict';
+
+var react = require('react');
+var ui = require('@arronqzy/ui');
+var reactView = require('@arronqzy/react-view');
+var jsxRuntime = require('react/jsx-runtime');
+
+// src/App.tsx
+function App({
+  className,
+  initialZoom,
+  defaultTheme = "dark",
+  previewSearch
+}) {
+  const search = previewSearch ?? (typeof window !== "undefined" ? window.location.search : "");
+  const previewParams = react.useMemo(
+    () => reactView.parseOnlinePreviewSearchParams(search),
+    [search]
+  );
+  if (previewParams) {
+    if (typeof document !== "undefined") {
+      document.documentElement.classList.remove("dark");
+      document.documentElement.classList.add("light");
+      document.documentElement.dataset.theme = "light";
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "light min-h-[100vh] w-full bg-white text-gray-900",
+        "data-theme": "light",
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          reactView.ReactViewOnlinePreview,
+          {
+            projectId: previewParams.projectId,
+            previewInstanceId: previewParams.previewInstanceId
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(ui.ThemeProvider, { defaultTheme, enableSystem: false, children: /* @__PURE__ */ jsxRuntime.jsx(reactView.ReactViewPanel, { className, initialZoom }) });
+}
+
+Object.defineProperty(exports, "ReactViewOnlinePreview", {
+  enumerable: true,
+  get: function () { return reactView.ReactViewOnlinePreview; }
+});
+Object.defineProperty(exports, "ReactViewPanel", {
+  enumerable: true,
+  get: function () { return reactView.ReactViewPanel; }
+});
+Object.defineProperty(exports, "parseOnlinePreviewSearchParams", {
+  enumerable: true,
+  get: function () { return reactView.parseOnlinePreviewSearchParams; }
+});
+exports.App = App;
+//# sourceMappingURL=index.cjs.map
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/App.tsx"],"names":["useMemo","parseOnlinePreviewSearchParams","jsx","ReactViewOnlinePreview","ThemeProvider","ReactViewPanel"],"mappings":";;;;;;;;AAoBO,SAAS,GAAI,CAAA;AAAA,EAClB,SAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAe,GAAA,MAAA;AAAA,EACf;AACF,CAAqB,EAAA;AACnB,EAAA,MAAM,SACJ,aACC,KAAA,OAAO,WAAW,WAAc,GAAA,MAAA,CAAO,SAAS,MAAS,GAAA,EAAA,CAAA;AAE5D,EAAA,MAAM,aAAgB,GAAAA,aAAA;AAAA,IACpB,MAAMC,yCAA+B,MAAM,CAAA;AAAA,IAC3C,CAAC,MAAM;AAAA,GACT;AAEA,EAAA,IAAI,aAAe,EAAA;AACjB,IAAI,IAAA,OAAO,aAAa,WAAa,EAAA;AACnC,MAAS,QAAA,CAAA,eAAA,CAAgB,SAAU,CAAA,MAAA,CAAO,MAAM,CAAA;AAChD,MAAS,QAAA,CAAA,eAAA,CAAgB,SAAU,CAAA,GAAA,CAAI,OAAO,CAAA;AAC9C,MAAS,QAAA,CAAA,eAAA,CAAgB,QAAQ,KAAQ,GAAA,OAAA;AAAA;AAG3C,IACE,uBAAAC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAU,EAAA,mDAAA;AAAA,QACV,YAAW,EAAA,OAAA;AAAA,QAEX,QAAA,kBAAAA,cAAA;AAAA,UAACC,gCAAA;AAAA,UAAA;AAAA,YACC,WAAW,aAAc,CAAA,SAAA;AAAA,YACzB,mBAAmB,aAAc,CAAA;AAAA;AAAA;AACnC;AAAA,KACF;AAAA;AAIJ,EACE,uBAAAD,cAAA,CAACE,oBAAc,YAA4B,EAAA,YAAA,EAAc,OACvD,QAAC,kBAAAF,cAAA,CAAAG,wBAAA,EAAA,EAAe,SAAsB,EAAA,WAAA,EAA0B,CAClE,EAAA,CAAA;AAEJ","file":"index.cjs","sourcesContent":["import { useMemo } from \"react\";\nimport { ThemeProvider } from \"@arronqzy/ui\";\nimport {\n  ReactViewOnlinePreview,\n  ReactViewPanel,\n  parseOnlinePreviewSearchParams,\n} from \"@arronqzy/react-view\";\n\nexport type AbuilderAppProps = {\n  className?: string;\n  initialZoom?: number;\n  /** 编辑器默认主题 */\n  defaultTheme?: \"dark\" | \"light\";\n  /**\n   * 在线预览模式的 URL 查询串。\n   * 默认读取 `window.location.search`；含 `?preview=online&projectId=...` 时进入预览页。\n   */\n  previewSearch?: string;\n};\n\nexport function App({\n  className,\n  initialZoom,\n  defaultTheme = \"dark\",\n  previewSearch,\n}: AbuilderAppProps) {\n  const search =\n    previewSearch ??\n    (typeof window !== \"undefined\" ? window.location.search : \"\");\n\n  const previewParams = useMemo(\n    () => parseOnlinePreviewSearchParams(search),\n    [search]\n  );\n\n  if (previewParams) {\n    if (typeof document !== \"undefined\") {\n      document.documentElement.classList.remove(\"dark\");\n      document.documentElement.classList.add(\"light\");\n      document.documentElement.dataset.theme = \"light\";\n    }\n\n    return (\n      <div\n        className=\"light min-h-[100vh] w-full bg-white text-gray-900\"\n        data-theme=\"light\"\n      >\n        <ReactViewOnlinePreview\n          projectId={previewParams.projectId}\n          previewInstanceId={previewParams.previewInstanceId}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <ThemeProvider defaultTheme={defaultTheme} enableSystem={false}>\n      <ReactViewPanel className={className} initialZoom={initialZoom} />\n    </ThemeProvider>\n  );\n}\n"]}

package/dist/index.d.cts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+export { ReactViewOnlinePreview, ReactViewPanel, ReactViewPanelProps, parseOnlinePreviewSearchParams } from '@arronqzy/react-view';
+
+type AbuilderAppProps = {
+    className?: string;
+    initialZoom?: number;
+    /** 编辑器默认主题 */
+    defaultTheme?: "dark" | "light";
+    /**
+     * 在线预览模式的 URL 查询串。
+     * 默认读取 `window.location.search`；含 `?preview=online&projectId=...` 时进入预览页。
+     */
+    previewSearch?: string;
+};
+declare function App({ className, initialZoom, defaultTheme, previewSearch, }: AbuilderAppProps): react_jsx_runtime.JSX.Element;
+
+export { type AbuilderAppProps, App };

package/dist/index.d.ts

@@ -0,0 +1,17 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+export { ReactViewOnlinePreview, ReactViewPanel, ReactViewPanelProps, parseOnlinePreviewSearchParams } from '@arronqzy/react-view';
+
+type AbuilderAppProps = {
+    className?: string;
+    initialZoom?: number;
+    /** 编辑器默认主题 */
+    defaultTheme?: "dark" | "light";
+    /**
+     * 在线预览模式的 URL 查询串。
+     * 默认读取 `window.location.search`；含 `?preview=online&projectId=...` 时进入预览页。
+     */
+    previewSearch?: string;
+};
+declare function App({ className, initialZoom, defaultTheme, previewSearch, }: AbuilderAppProps): react_jsx_runtime.JSX.Element;
+
+export { type AbuilderAppProps, App };

package/dist/index.js

@@ -0,0 +1,45 @@
+import { useMemo } from 'react';
+import { ThemeProvider } from '@arronqzy/ui';
+import { parseOnlinePreviewSearchParams, ReactViewOnlinePreview, ReactViewPanel } from '@arronqzy/react-view';
+export { ReactViewOnlinePreview, ReactViewPanel, parseOnlinePreviewSearchParams } from '@arronqzy/react-view';
+import { jsx } from 'react/jsx-runtime';
+
+// src/App.tsx
+function App({
+  className,
+  initialZoom,
+  defaultTheme = "dark",
+  previewSearch
+}) {
+  const search = previewSearch ?? (typeof window !== "undefined" ? window.location.search : "");
+  const previewParams = useMemo(
+    () => parseOnlinePreviewSearchParams(search),
+    [search]
+  );
+  if (previewParams) {
+    if (typeof document !== "undefined") {
+      document.documentElement.classList.remove("dark");
+      document.documentElement.classList.add("light");
+      document.documentElement.dataset.theme = "light";
+    }
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "light min-h-[100vh] w-full bg-white text-gray-900",
+        "data-theme": "light",
+        children: /* @__PURE__ */ jsx(
+          ReactViewOnlinePreview,
+          {
+            projectId: previewParams.projectId,
+            previewInstanceId: previewParams.previewInstanceId
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(ThemeProvider, { defaultTheme, enableSystem: false, children: /* @__PURE__ */ jsx(ReactViewPanel, { className, initialZoom }) });
+}
+
+export { App };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/App.tsx"],"names":[],"mappings":";;;;;;;AAoBO,SAAS,GAAI,CAAA;AAAA,EAClB,SAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAe,GAAA,MAAA;AAAA,EACf;AACF,CAAqB,EAAA;AACnB,EAAA,MAAM,SACJ,aACC,KAAA,OAAO,WAAW,WAAc,GAAA,MAAA,CAAO,SAAS,MAAS,GAAA,EAAA,CAAA;AAE5D,EAAA,MAAM,aAAgB,GAAA,OAAA;AAAA,IACpB,MAAM,+BAA+B,MAAM,CAAA;AAAA,IAC3C,CAAC,MAAM;AAAA,GACT;AAEA,EAAA,IAAI,aAAe,EAAA;AACjB,IAAI,IAAA,OAAO,aAAa,WAAa,EAAA;AACnC,MAAS,QAAA,CAAA,eAAA,CAAgB,SAAU,CAAA,MAAA,CAAO,MAAM,CAAA;AAChD,MAAS,QAAA,CAAA,eAAA,CAAgB,SAAU,CAAA,GAAA,CAAI,OAAO,CAAA;AAC9C,MAAS,QAAA,CAAA,eAAA,CAAgB,QAAQ,KAAQ,GAAA,OAAA;AAAA;AAG3C,IACE,uBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAU,EAAA,mDAAA;AAAA,QACV,YAAW,EAAA,OAAA;AAAA,QAEX,QAAA,kBAAA,GAAA;AAAA,UAAC,sBAAA;AAAA,UAAA;AAAA,YACC,WAAW,aAAc,CAAA,SAAA;AAAA,YACzB,mBAAmB,aAAc,CAAA;AAAA;AAAA;AACnC;AAAA,KACF;AAAA;AAIJ,EACE,uBAAA,GAAA,CAAC,iBAAc,YAA4B,EAAA,YAAA,EAAc,OACvD,QAAC,kBAAA,GAAA,CAAA,cAAA,EAAA,EAAe,SAAsB,EAAA,WAAA,EAA0B,CAClE,EAAA,CAAA;AAEJ","file":"index.js","sourcesContent":["import { useMemo } from \"react\";\nimport { ThemeProvider } from \"@arronqzy/ui\";\nimport {\n  ReactViewOnlinePreview,\n  ReactViewPanel,\n  parseOnlinePreviewSearchParams,\n} from \"@arronqzy/react-view\";\n\nexport type AbuilderAppProps = {\n  className?: string;\n  initialZoom?: number;\n  /** 编辑器默认主题 */\n  defaultTheme?: \"dark\" | \"light\";\n  /**\n   * 在线预览模式的 URL 查询串。\n   * 默认读取 `window.location.search`；含 `?preview=online&projectId=...` 时进入预览页。\n   */\n  previewSearch?: string;\n};\n\nexport function App({\n  className,\n  initialZoom,\n  defaultTheme = \"dark\",\n  previewSearch,\n}: AbuilderAppProps) {\n  const search =\n    previewSearch ??\n    (typeof window !== \"undefined\" ? window.location.search : \"\");\n\n  const previewParams = useMemo(\n    () => parseOnlinePreviewSearchParams(search),\n    [search]\n  );\n\n  if (previewParams) {\n    if (typeof document !== \"undefined\") {\n      document.documentElement.classList.remove(\"dark\");\n      document.documentElement.classList.add(\"light\");\n      document.documentElement.dataset.theme = \"light\";\n    }\n\n    return (\n      <div\n        className=\"light min-h-[100vh] w-full bg-white text-gray-900\"\n        data-theme=\"light\"\n      >\n        <ReactViewOnlinePreview\n          projectId={previewParams.projectId}\n          previewInstanceId={previewParams.previewInstanceId}\n        />\n      </div>\n    );\n  }\n\n  return (\n    <ThemeProvider defaultTheme={defaultTheme} enableSystem={false}>\n      <ReactViewPanel className={className} initialZoom={initialZoom} />\n    </ThemeProvider>\n  );\n}\n"]}