@juo/blocks 1.0.0

package/dist/ExtensionRoot-CZyBNJZY.js

@@ -0,0 +1,159 @@
+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 { signal, effect, createBlockInstance } from "@juo/blocks";
+import { d, j as withWrapper, t as subscribeContext, T as ThemeStateContext, E, v as n } from "./theme-state-BZplRS92.js";
+import "./juo-workflow-RSrOuKUH.js";
+class Block extends HTMLElement {
+  constructor() {
+    super();
+    /** @description The block name to render */
+    __publicField(this, "name", signal(null));
+    __publicField(this, "disposeEffect");
+  }
+  static get observedAttributes() {
+    return ["name"];
+  }
+  connectedCallback() {
+    this.name.value = this.getAttribute("name") ?? null;
+    this.disposeEffect = effect(() => {
+      this.renderBlock(this.name.value);
+    });
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if (name === "name" && oldValue !== newValue) {
+      this.name.value = newValue ?? null;
+    }
+  }
+  disconnectedCallback() {
+    if (this.disposeEffect) {
+      this.disposeEffect();
+      this.disposeEffect = void 0;
+    }
+  }
+  renderBlock(name) {
+    if (name == null) {
+      console.error("'name' attribute is required");
+      this.replaceChildren();
+      return;
+    }
+    const props = Object.fromEntries(
+      Array.from(this.attributes).map((attr) => [attr.name, attr.value])
+    );
+    const block = createBlockInstance(name, { props });
+    if (block == null) {
+      console.error(`Block definition for '${name}' not found`);
+      this.replaceChildren();
+      return;
+    }
+    this.replaceChildren(block.definition.render(block));
+  }
+}
+class ExtensionRoot extends HTMLElement {
+  constructor() {
+    super();
+    __publicField(this, "state", d(null));
+    __publicField(this, "themeState", null);
+    __publicField(this, "unsubscribeThemeContext");
+    __publicField(this, "disposeEffect");
+    /**
+     * Optional function to wrap each rendered block element.
+     * Called with the rendered block HTMLElement, must return an HTMLElement.
+     * When set, the wrapper sits between the editor wrapper (outer) and the actual block (inner).
+     * Must be set before blocks are first rendered; changing it afterwards has no effect
+     * on already-cached block wrappers.
+     */
+    __publicField(this, "blockWrapper", null);
+    __publicField(this, "wrapperCache", /* @__PURE__ */ new WeakMap());
+  }
+  static get observedAttributes() {
+    return ["name", "surface"];
+  }
+  withWrapper(block) {
+    if (!this.wrapperCache.has(block)) {
+      const blockWrapper = this.blockWrapper;
+      const wrapper = withWrapper((block2) => {
+        const rendered = block2.definition.render(block2);
+        return blockWrapper ? blockWrapper(rendered) : rendered;
+      });
+      this.wrapperCache.set(block, wrapper);
+    }
+    return this.wrapperCache.get(block)(block);
+  }
+  getSurface() {
+    return this.getAttribute("surface") === "overlay" ? "overlay" : "page";
+  }
+  setStateFromThemeState(themeState) {
+    const surface = this.getSurface();
+    this.state.value = surface === "overlay" ? themeState.overlay : themeState.page;
+  }
+  connectedCallback() {
+    this.state.value = null;
+    this.themeState = null;
+    this.style.display = "flex";
+    this.style.flexDirection = "column";
+    this.style.gap = "16px";
+    this.style.maxWidth = "100%";
+    this.style.justifySelf = "center";
+    this.unsubscribeThemeContext = subscribeContext(
+      this,
+      ThemeStateContext,
+      (contextValue) => {
+        this.themeState = contextValue;
+        this.setStateFromThemeState(contextValue);
+      }
+    );
+    this.disposeEffect = E(() => {
+      const state = this.state.value;
+      if (state == null) {
+        this.replaceChildren();
+        return;
+      }
+      const name = this.getAttribute("name");
+      if (name == null) {
+        console.error("'name' attribute is required");
+        this.replaceChildren();
+        return;
+      }
+      const blocks = state.blocks.value;
+      n(() => {
+        var _a;
+        try {
+          const extensionBlocks = (((_a = blocks.at(0)) == null ? void 0 : _a.slots) ?? {})[name] ?? [];
+          const children = extensionBlocks.map(
+            (block) => this.withWrapper(block)
+          ) ?? [];
+          this.replaceChildren(...children);
+        } catch (error) {
+          console.error(error);
+          this.replaceChildren();
+        }
+      });
+    });
+  }
+  attributeChangedCallback(name, oldValue, newValue) {
+    if ((name === "name" || name === "surface") && oldValue !== newValue && this.state.value) {
+      if (name === "surface") {
+        if (this.themeState) {
+          this.setStateFromThemeState(this.themeState);
+          return;
+        }
+      }
+      this.state.value = { ...this.state.value };
+    }
+  }
+  disconnectedCallback() {
+    if (this.unsubscribeThemeContext) {
+      this.unsubscribeThemeContext();
+      this.unsubscribeThemeContext = void 0;
+    }
+    if (this.disposeEffect) {
+      this.disposeEffect();
+      this.disposeEffect = void 0;
+    }
+  }
+}
+export {
+  Block as B,
+  ExtensionRoot as E
+};

package/dist/block-VhmfGB3N.js

@@ -0,0 +1,51 @@
+import { signal } from "@juo/blocks";
+const signalsMap = /* @__PURE__ */ new WeakMap();
+function toSignal(value) {
+  if (!signalsMap.has(value)) {
+    const initialValue = typeof value === "function" ? value() : value;
+    const s = signal(initialValue);
+    signalsMap.set(value, s);
+  }
+  return signalsMap.get(value);
+}
+function getSignalValue(signal2) {
+  return typeof signal2 === "function" ? signal2() : signal2.value;
+}
+function setSignalValue(signal2, value) {
+  if (typeof signal2 === "function") {
+    throw new Error("Readonly signal - cannot set value on computed signal");
+  }
+  signal2.value = value;
+}
+function wrapContext(obj, toState) {
+  if (typeof obj !== "object" || obj == null) {
+    return obj;
+  }
+  return new Proxy(obj, {
+    get(target, key) {
+      const val = target[key];
+      if (typeof val === "object" && val != null && "brand" in val) {
+        return toState(val);
+      }
+      return val;
+    }
+  });
+}
+function createSlotChildren(block) {
+  const blocks = Array.isArray(block) ? block : [block];
+  return blocks.map((b) => {
+    if (typeof b === "string") {
+      const el = document.createElement("span");
+      el.innerText = b;
+      return el;
+    }
+    return b.definition.render(b);
+  });
+}
+export {
+  createSlotChildren as c,
+  getSignalValue as g,
+  setSignalValue as s,
+  toSignal as t,
+  wrapContext as w
+};

package/dist/block.d.ts

@@ -0,0 +1,96 @@
+import { JSONSchema } from 'json-schema-to-ts';
+type Schema = {} | (JSONSchema & {
+    type: "object";
+});
+export interface BlockPreset<TState = unknown, TContext extends Record<string, unknown> = Record<string, unknown>> {
+    label: string;
+    description?: string;
+    group?: string;
+    state: TState;
+    context: TContext;
+}
+export type BlockPresets = Record<string, BlockPreset<unknown, Record<string, unknown>>>;
+export type BlockRenderer = (block: BlockInstance) => HTMLElement;
+export type BlockLocaleFile = {
+    overrides?: Record<string, string>;
+    [key: string]: string | Record<string, string> | undefined;
+};
+export type BlockDefinition<T = unknown> = {
+    name: string;
+    group: "internal" | "juo" | "theme" | "integration" | "page" | "workflow" | "action";
+    schema: Schema;
+    initialValue: T | (() => T);
+    render: BlockRenderer;
+    presets?: BlockPresets;
+    locales?: {
+        /** Locale codes supported by this block (e.g. ["en", "de", "nl"]). */
+        supported?: string[];
+        load: (locale: string) => Promise<BlockLocaleFile>;
+    };
+};
+export type Block = {
+    id: string;
+    type: string;
+    props: any;
+    slots: any;
+};
+export type BlockInstance = Block & {
+    readonly definition: BlockDefinition;
+};
+export declare function serializeBlocks(blocks: (Block | BlockInstance)[]): Block[];
+export declare function createSelectedBlock(): {
+    selected: import('@preact/signals-core').Signal<BlockInstance | null>;
+    setSelection: (block: BlockInstance) => void;
+    clearSelection: (block?: BlockInstance) => void;
+};
+export declare const SelectedBlockContext: {
+    __context__: {
+        selected: import('@preact/signals-core').Signal<BlockInstance | null>;
+        setSelection: (block: BlockInstance) => void;
+        clearSelection: (block?: BlockInstance) => void;
+    };
+};
+declare global {
+    interface Window {
+        _juoBlocks: Map<string, BlockDefinition<unknown>>;
+    }
+}
+export declare class BlockWrapperEvent extends Event {
+    readonly block: BlockInstance;
+    readonly callback: (wrapper: HTMLElement) => void;
+    constructor(block: BlockInstance, callback: (wrapper: HTMLElement) => void);
+}
+declare global {
+    interface HTMLElementEventMap {
+        "juo:block-wrapper-render": BlockWrapperEvent;
+    }
+}
+export declare function withWrapper(fn: (block: BlockInstance) => HTMLElement): (block: BlockInstance) => HTMLElement;
+export declare function registerBlock<T>(block: BlockDefinition<T>): void;
+export declare function onRegisterBlock(cb: (name: string, block: BlockDefinition) => void): void;
+export declare function defineBlock<T>(name: string, opts: {
+    group: "internal" | "juo" | "theme" | "integration" | "page" | "workflow" | "action";
+    schema: JSONSchema;
+    initialValue: T | (() => T);
+    renderer: (block: BlockInstance) => HTMLElement;
+    presets?: BlockPresets;
+    locales?: {
+        supported?: string[];
+        load: (locale: string) => Promise<BlockLocaleFile>;
+    };
+}): BlockDefinition<T>;
+export declare function defineBlockRuntime<T = never>(name: string, opts: {
+    group: "internal" | "juo" | "theme" | "integration" | "page" | "workflow" | "action";
+    renderer: (block: BlockInstance) => HTMLElement;
+}): BlockDefinition<T>;
+export declare function getDefinedBlocks(): BlockDefinition[];
+export declare function createCeRenderer(name: string): (block: BlockInstance) => HTMLDivElement;
+export declare function createBlockInstance(name: string, opts?: {
+    props?: any;
+    slots?: any;
+    id?: string;
+}): BlockInstance;
+export declare function createBlockInstanceFromObject(input: Block): BlockInstance;
+export declare function createBlockInstanceFromJSON(input: string): BlockInstance;
+export {};
+//# sourceMappingURL=block.d.ts.map

package/dist/block.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"block.d.ts","sourceRoot":"","sources":["../src/block.ts"],"names":[],"mappings":"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"}