@juo/blocks 1.0.0

package/dist/web-components/runtime/InlineText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"InlineText.d.ts","sourceRoot":"","sources":["../../../src/web-components/runtime/InlineText.ts"],"names":[],"mappings":"AAIA,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,WAAW;IACjD,OAAO,CAAC,OAAO,CAAC,CAAa;IAE7B,iBAAiB;IAqCjB,oBAAoB;CAIrB"}

package/dist/web-components/runtime/main.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=main.d.ts.map

package/dist/web-components/runtime/main.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../src/web-components/runtime/main.ts"],"names":[],"mappings":""}

package/dist/web-components-editor.js

@@ -0,0 +1,183 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { p as injectContext, E, x as ContextRoot } from "./theme-state-BZplRS92.js";
+import { E as ExtensionRoot, B as Block } from "./ExtensionRoot-CZyBNJZY.js";
+import { a as createEditorBridge, b as createFocusInlineTextMessage, d as createUpdateBlockTranslationMessage } from "./bridge-DQsM97cH.js";
+import { T as TranslationContext } from "./juo-workflow-RSrOuKUH.js";
+const _InlineText = class _InlineText extends HTMLElement {
+  constructor() {
+    super();
+    __publicField(this, "editorBridge", null);
+    __publicField(this, "translationService", null);
+    __publicField(this, "propName", null);
+    __publicField(this, "blockId", null);
+    __publicField(this, "blockType", null);
+    __publicField(this, "boundHandleBlur", this.handleBlur.bind(this));
+    __publicField(this, "boundHandlePointerDown", this.handlePointerDown.bind(this));
+    __publicField(this, "lastValue", null);
+    __publicField(this, "dispose");
+  }
+  static get observedAttributes() {
+    return ["prop", "readonly"];
+  }
+  connectedCallback() {
+    if (!this.style.display) this.style.display = "inline-block";
+    if (!this.style.overflowWrap) this.style.overflowWrap = "anywhere";
+    this.propName = this.getAttribute("prop");
+    if (!this.propName) {
+      console.warn("juo-text: 'prop' attribute is required");
+      return;
+    }
+    let blockWrapper = this.closest("[data-block-type]");
+    if (!blockWrapper) {
+      const rootNode = this.getRootNode();
+      if (rootNode instanceof ShadowRoot && rootNode.host) {
+        blockWrapper = rootNode.host.closest("[data-block-type]");
+      }
+    }
+    if (!blockWrapper) {
+      console.warn(
+        "juo-text: Could not find parent block with data-block-type"
+      );
+      return;
+    }
+    this.blockId = blockWrapper.getAttribute("data-block-id");
+    this.blockType = blockWrapper.getAttribute("data-block-type");
+    if (!this.blockId) {
+      console.warn("juo-text: Parent block has no data-block-id attribute");
+      return;
+    }
+    if (!this.blockType) {
+      console.warn("juo-text: Parent block has no data-block-type attribute");
+      return;
+    }
+    this.translationService = injectContext(this, TranslationContext);
+    this.initializeEditorMode();
+  }
+  get isReadonly() {
+    return this.hasAttribute("readonly");
+  }
+  initializeEditorMode() {
+    this.editorBridge = createEditorBridge();
+    this.contentEditable = "false";
+    if (!this.isReadonly) {
+      this.style.cursor = "text";
+      this.style.borderRadius = "2px";
+      this.style.outline = "0.5px solid transparent";
+      this.style.outlineOffset = "2px";
+    }
+    if (!this.style.width) this.style.width = "100%";
+    if (!this.style.overflowWrap) this.style.overflowWrap = "anywhere";
+    if (!this.style.whiteSpace) this.style.whiteSpace = "pre-wrap";
+    if (!this.isReadonly) {
+      this.injectStyles();
+    }
+    this.addEventListener("blur", this.boundHandleBlur);
+    this.addEventListener("pointerdown", this.boundHandlePointerDown);
+    this.lastValue = this.textContent || "";
+    if (this.translationService && this.propName && this.blockType && this.blockId) {
+      const key = this.propName;
+      const fallbackText = this.textContent ?? "";
+      this.dispose = E(() => {
+        const service = this.translationService;
+        if (!service) return;
+        void service.locale.value;
+        const resolved = service.resolve(this.blockType, this.blockId, key);
+        const value = resolved === key && fallbackText.trim().length > 0 ? fallbackText : resolved;
+        this.textContent = value;
+        this.lastValue = value;
+      });
+    }
+  }
+  handlePointerDown() {
+    if (this.isReadonly) return;
+    if (this.contentEditable === "plaintext-only") return;
+    if (this.editorBridge && this.blockId && this.propName) {
+      this.editorBridge.sendMessage(
+        createFocusInlineTextMessage(
+          { blockId: this.blockId, key: this.propName },
+          this.blockId
+        )
+      );
+    }
+    this.textContent = this.lastValue ?? "";
+    this.contentEditable = "plaintext-only";
+  }
+  handleBlur() {
+    this.contentEditable = "false";
+    this.sendUpdate();
+  }
+  injectStyles() {
+    const rootNode = this.getRootNode();
+    const root = rootNode instanceof ShadowRoot ? rootNode : document;
+    if (_InlineText.injectedRoots.has(root)) {
+      return;
+    }
+    const style = document.createElement("style");
+    style.textContent = `
+      juo-text:hover {
+        outline-color: #CACACA !important;
+      }
+      juo-text:focus {
+        outline-color: #717171 !important;
+      }
+    `;
+    if (root instanceof ShadowRoot) {
+      root.appendChild(style);
+    } else {
+      document.head.appendChild(style);
+    }
+    _InlineText.injectedRoots.add(root);
+  }
+  sendUpdate() {
+    var _a;
+    if (!this.editorBridge || !this.blockId || !this.blockType || !this.propName) {
+      return;
+    }
+    const newValue = this.textContent ?? "";
+    if (this.lastValue === newValue) {
+      return;
+    }
+    const message = createUpdateBlockTranslationMessage(
+      {
+        blockId: this.blockId,
+        blockType: this.blockType,
+        key: this.propName,
+        value: newValue,
+        locale: (_a = this.translationService) == null ? void 0 : _a.locale.value
+      },
+      this.blockId
+    );
+    this.editorBridge.sendMessage(message);
+    this.lastValue = newValue;
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "prop" && oldValue !== newValue) {
+      this.propName = newValue;
+    }
+  }
+  disconnectedCallback() {
+    var _a;
+    this.removeEventListener("blur", this.boundHandleBlur);
+    this.removeEventListener("pointerdown", this.boundHandlePointerDown);
+    (_a = this.dispose) == null ? void 0 : _a.call(this);
+    this.dispose = void 0;
+    this.editorBridge = null;
+    this.translationService = null;
+  }
+};
+__publicField(_InlineText, "injectedRoots", /* @__PURE__ */ new WeakSet());
+let InlineText = _InlineText;
+if (customElements.get("juo-context-root") == null) {
+  customElements.define("juo-context-root", ContextRoot);
+}
+if (customElements.get("juo-extension-root") == null) {
+  customElements.define("juo-extension-root", ExtensionRoot);
+}
+if (customElements.get("juo-block") == null) {
+  customElements.define("juo-block", Block);
+}
+if (customElements.get("juo-text") == null) {
+  customElements.define("juo-text", InlineText);
+}

package/dist/web-components-runtime.js

@@ -0,0 +1,55 @@
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+import { p as injectContext, E, x as ContextRoot } from "./theme-state-BZplRS92.js";
+import { E as ExtensionRoot, B as Block } from "./ExtensionRoot-CZyBNJZY.js";
+import { T as TranslationContext } from "./juo-workflow-RSrOuKUH.js";
+class InlineText extends HTMLElement {
+  constructor() {
+    super(...arguments);
+    __publicField(this, "dispose");
+  }
+  connectedCallback() {
+    if (!this.style.display) this.style.display = "inline-block";
+    if (!this.style.overflowWrap) this.style.overflowWrap = "anywhere";
+    const key = this.getAttribute("prop");
+    if (!key) return;
+    let blockEl = this.closest("[data-block-type]");
+    if (!blockEl) {
+      const root = this.getRootNode();
+      if (root instanceof ShadowRoot && root.host instanceof HTMLElement) {
+        blockEl = root.host.closest("[data-block-type]");
+      }
+    }
+    const blockType = (blockEl == null ? void 0 : blockEl.getAttribute("data-block-type")) ?? null;
+    const blockId = (blockEl == null ? void 0 : blockEl.getAttribute("data-block-id")) ?? null;
+    const service = injectContext(this, TranslationContext);
+    const fallbackText = this.textContent ?? "";
+    this.dispose = E(() => {
+      void service.locale.value;
+      const resolved = service.resolve(blockType, blockId, key);
+      const value = resolved === key && fallbackText.trim().length > 0 ? fallbackText : resolved;
+      this.textContent = value;
+      if (this.hasAttribute("hide-parent-if-empty") && this.parentElement) {
+        this.parentElement.hidden = value.trim() === "";
+      }
+    });
+  }
+  disconnectedCallback() {
+    var _a;
+    (_a = this.dispose) == null ? void 0 : _a.call(this);
+    this.dispose = void 0;
+  }
+}
+if (customElements.get("juo-context-root") == null) {
+  customElements.define("juo-context-root", ContextRoot);
+}
+if (customElements.get("juo-extension-root") == null) {
+  customElements.define("juo-extension-root", ExtensionRoot);
+}
+if (customElements.get("juo-block") == null) {
+  customElements.define("juo-block", Block);
+}
+if (customElements.get("juo-text") == null) {
+  customElements.define("juo-text", InlineText);
+}

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "@juo/blocks",
+  "private": false,
+  "version": "1.0.0",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "devDependencies": {
+    "@types/react": "19.1.0",
+    "@types/react-dom": "19.1.0",
+    "jsdom": "24.0.0",
+    "json-schema-to-ts": "3.1.1",
+    "preact": "10.26.8",
+    "react": "19.1.0",
+    "react-dom": "19.1.0",
+    "typescript": "5.7.3",
+    "vite": "5.4.21",
+    "vite-plugin-dts": "4.5.4",
+    "vitest": "3.2.4",
+    "vue": "3.5.13"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/main.d.ts",
+      "default": "./dist/core.js"
+    },
+    "./vue": {
+      "types": "./dist/vue/main.d.ts",
+      "default": "./dist/vue.js"
+    },
+    "./react": {
+      "types": "./dist/react/main.d.ts",
+      "default": "./dist/react.js"
+    },
+    "./preact": {
+      "types": "./dist/preact/main.d.ts",
+      "default": "./dist/preact.js"
+    },
+    "./editor": {
+      "types": "./dist/editor/main.d.ts",
+      "default": "./dist/editor.js"
+    },
+    "./web-components/editor": {
+      "types": "./dist/web-components/editor/main.d.ts",
+      "default": "./dist/web-components-editor.js"
+    },
+    "./web-components/runtime": {
+      "types": "./dist/web-components/runtime/main.d.ts",
+      "default": "./dist/web-components-runtime.js"
+    }
+  },
+  "dependencies": {
+    "@preact/signals-core": "1.11.0"
+  },
+  "scripts": {
+    "dev": "vite build -w",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "test": "vitest"
+  }
+}