@juo/orion-core 0.12.0 → 0.14.0

package/dist/{block-CFJIpH_9.js → theme-state-TW-9hD7e.js}

@@ -507,6 +507,24 @@ function E(i2) {
   r[Symbol.dispose] = r;
   return r;
 }
+function serializeBlocks(blocks) {
+  return blocks.map((block) => serializeBlock(block));
+}
+function serializeBlock(block) {
+  return {
+    id: block.id,
+    type: block.type,
+    props: JSON.parse(JSON.stringify(block.props)),
+    slots: Object.fromEntries(
+      Object.entries(block.slots ?? {}).map(([key, value]) => [
+        key,
+        Array.isArray(value) ? value.map(
+          (v2) => typeof v2 === "string" ? v2 : serializeBlock(v2)
+        ) : typeof value === "string" ? value : serializeBlock(value)
+      ])
+    )
+  };
+}
 function createSelectedBlock() {
   const selected = d(null);
   function setSelection(block) {
@@ -571,8 +589,13 @@ function withWrapper(fn) {
     return wrapper;
   };
 }
+const registerBlockListeners = [];
 function registerBlock(block) {
   blockDefinitions.set(block.name, block);
+  registerBlockListeners.forEach((cb) => cb(block.name, block));
+}
+function onRegisterBlock(cb) {
+  registerBlockListeners.push(cb);
 }
 function defineBlock(name, opts) {
   const definition = {
@@ -581,7 +604,8 @@ function defineBlock(name, opts) {
     schema: opts.schema,
     initialValue: opts.initialValue,
     render: opts.renderer,
-    presets: opts.presets
+    presets: opts.presets,
+    locales: opts.locales
   };
   return definition;
 }
@@ -633,8 +657,10 @@ function createCeRenderer(name) {
   return (block) => {
     const wrapper = document.createElement("div");
     wrapper.setAttribute("data-block-id", block.id);
+    wrapper.setAttribute("data-block-type", block.type);
     const el = document.createElement(name);
     el.setAttribute("data-block-id", block.id);
+    el.setAttribute("data-block-type", block.type);
     Object.entries(block.props).forEach(([key, value]) => {
       el[key] = value;
     });
@@ -700,11 +726,183 @@ function createBlockInstanceFromObject(input) {
 function createBlockInstanceFromJSON(input) {
   return createBlockInstanceFromObject(JSON.parse(input));
 }
+const DEFAULT_GLOBAL_STYLES = {
+  volume: "comfort",
+  style: "ghost",
+  corners: "round",
+  buttonCorners: "round",
+  thumbnailCorners: "circle",
+  theme: "preset",
+  themeType: "neutral",
+  colors: {
+    accent: "#000000",
+    secondary: "#000000",
+    tint: "#FFFFFF",
+    callout: "#F5F5F5",
+    success: "#287a25",
+    error: "#a93c3c",
+    information: "#0075a3",
+    warning: "#8a5e00",
+    background: "#FFFFFF"
+  }
+};
+const ThemeStateContext = createContext("theme-state");
+function normalizeLocale(locale) {
+  return locale.trim().toLowerCase().split("-")[0] || "en";
+}
+function toStringRecord(input) {
+  if (input == null)
+    return {};
+  return Object.fromEntries(
+    Object.entries(input).filter(([, value]) => typeof value === "string")
+  );
+}
+function parseBlockLocaleFile(file) {
+  if (file == null) {
+    return { defaults: {}, modes: {} };
+  }
+  const entries = Object.entries(file).filter(
+    ([key, value]) => key !== "overrides" && typeof value === "string"
+  );
+  const topLevel = Object.fromEntries(entries);
+  const overrides = toStringRecord(file.overrides);
+  return {
+    defaults: { ...topLevel, ...overrides },
+    modes: {
+      ...Object.fromEntries(
+        Object.keys(topLevel).map((key) => [key, "default"])
+      ),
+      ...Object.fromEntries(
+        Object.keys(overrides).map((key) => [key, "override"])
+      )
+    }
+  };
+}
+function indexOverrides(overrides) {
+  const indexed = {
+    theme: {},
+    blocks: {}
+  };
+  for (const item of overrides) {
+    if (item.scope.kind === "theme") {
+      indexed.theme[item.key] = item.value;
+      continue;
+    }
+    if (indexed.blocks[item.scope.blockId] == null) {
+      indexed.blocks[item.scope.blockId] = {};
+    }
+    indexed.blocks[item.scope.blockId][item.key] = item.value;
+  }
+  return indexed;
+}
+function createThemeState(deps) {
+  const surfaces = {
+    page: { blocks: d([]) },
+    overlay: { blocks: d([]) }
+  };
+  const locale = d("en");
+  const catalogs = d(null);
+  const globalStyles = d(
+    deps.initialGlobalStyles ?? DEFAULT_GLOBAL_STYLES
+  );
+  function setGlobalStyles(styles) {
+    globalStyles.value = styles;
+  }
+  async function collectBlockDefaults(loc) {
+    const nextDefaults = {};
+    const nextModes = {};
+    for (const block of getDefinedBlocks()) {
+      if (block.locales == null)
+        continue;
+      let file = null;
+      try {
+        file = await block.locales.load(loc);
+      } catch {
+        file = null;
+      }
+      const parsed = parseBlockLocaleFile(file);
+      nextDefaults[block.name] = parsed.defaults;
+      nextModes[block.name] = parsed.modes;
+    }
+    return { defaults: nextDefaults, modes: nextModes };
+  }
+  async function setLocale(nextLocaleRaw) {
+    var _a;
+    const nextLocale = normalizeLocale(nextLocaleRaw);
+    const [blockData, loadedOverrides] = await Promise.all([
+      collectBlockDefaults(nextLocale),
+      ((_a = deps.translations) == null ? void 0 : _a.resolveTranslations(nextLocale).catch(() => [])) ?? Promise.resolve([])
+    ]);
+    const overrides = loadedOverrides.filter(
+      (item) => normalizeLocale(item.locale) === nextLocale
+    );
+    const indexed = indexOverrides(overrides);
+    catalogs.value = {
+      theme: {
+        defaults: {},
+        overrides: indexed.theme
+      },
+      blocks: {
+        defaults: blockData.defaults,
+        modes: blockData.modes,
+        overrides: indexed.blocks
+      }
+    };
+    locale.value = nextLocale;
+  }
+  async function resolve(surface, id, defaultBlock) {
+    surfaces[surface].blocks.value = [];
+    const result = await deps.resolve(surface, id, defaultBlock);
+    surfaces[surface].blocks.value = [
+      ...result.blocks.map((block) => createBlockInstanceFromObject(block))
+    ];
+    return result;
+  }
+  onRegisterBlock(async (_2, block) => {
+    if (block.locales == null || catalogs.value == null)
+      return;
+    const localeAtLoadStart = locale.value;
+    let file = null;
+    try {
+      file = await block.locales.load(localeAtLoadStart);
+    } catch {
+      file = null;
+    }
+    if (catalogs.value == null || locale.value !== localeAtLoadStart)
+      return;
+    const parsed = parseBlockLocaleFile(file);
+    const current = catalogs.value;
+    catalogs.value = {
+      ...current,
+      blocks: {
+        ...current.blocks,
+        defaults: {
+          ...current.blocks.defaults,
+          [block.name]: parsed.defaults
+        },
+        modes: {
+          ...current.blocks.modes,
+          [block.name]: parsed.modes
+        }
+      }
+    };
+  });
+  return {
+    page: surfaces.page,
+    overlay: surfaces.overlay,
+    locales: { locale, catalogs, setLocale },
+    globalStyles,
+    setGlobalStyles,
+    resolve
+  };
+}
 export {
   BlockWrapperEvent as B,
   ContextRequestEvent as C,
+  DEFAULT_GLOBAL_STYLES as D,
   E,
   SelectedBlockContext as S,
+  ThemeStateContext as T,
   createBlockInstance as a,
   createBlockInstanceFromJSON as b,
   createContext as c,
@@ -716,13 +914,17 @@ export {
   getDefinedBlocks as i,
   withWrapper as j,
   createSelectedBlock as k,
-  ContextProvideEvent as l,
-  injectContext as m,
-  n,
-  ContextRoot as o,
+  createThemeState as l,
+  indexOverrides as m,
+  ContextProvideEvent as n,
+  injectContext as o,
   provideContext as p,
+  subscribeContext as q,
   registerBlock as r,
-  subscribeContext as s,
+  serializeBlocks as s,
+  n as t,
   u,
-  w
+  ContextRoot as v,
+  w,
+  onRegisterBlock as x
 };

package/dist/theme-state.d.ts

@@ -0,0 +1,84 @@
+import { ReadonlySignal, Signal } from '@preact/signals-core';
+import { Block, BlockInstance } from './block';
+export type ThemeSurface = "page" | "overlay";
+export type GlobalStyleColors = {
+    accent: string;
+    secondary: string;
+    tint: string;
+    callout: string;
+    success: string;
+    error: string;
+    information: string;
+    warning: string;
+    background: string;
+};
+export type ThemeType = "neutral" | "warm" | "cold";
+export type GlobalStyles = {
+    volume: "compact" | "comfort" | "spacious";
+    style: "bare" | "ghost" | "tinted" | "solid" | "layered";
+    corners: "sharp" | "soft" | "round" | "pill";
+    buttonCorners: "sharp" | "round" | "circle";
+    thumbnailCorners: "sharp" | "round" | "circle";
+    theme: "preset" | "custom";
+    themeType: ThemeType;
+    colors: GlobalStyleColors;
+};
+export declare const DEFAULT_GLOBAL_STYLES: GlobalStyles;
+export type ThemeSurfaceState = {
+    blocks: Signal<BlockInstance[]>;
+};
+export type TranslationMode = "override" | "default";
+export type TranslationScope = {
+    kind: "theme";
+} | {
+    kind: "block";
+    blockId: string;
+};
+export type TranslationOverride = {
+    locale: string;
+    key: string;
+    value: string;
+    scope: TranslationScope;
+};
+export type TranslationCatalogs = {
+    theme: {
+        defaults: Record<string, string>;
+        overrides: Record<string, string>;
+    };
+    blocks: {
+        defaults: Record<string, Record<string, string>>;
+        modes: Record<string, Record<string, TranslationMode>>;
+        overrides: Record<string, Record<string, string>>;
+    };
+};
+export type ThemeLocaleState = {
+    locale: ReadonlySignal<string>;
+    catalogs: ReadonlySignal<TranslationCatalogs | null>;
+    setLocale: (locale: string) => Promise<void>;
+};
+export type ThemeState = {
+    page: ThemeSurfaceState;
+    overlay: ThemeSurfaceState;
+    locales: ThemeLocaleState;
+    globalStyles: ReadonlySignal<GlobalStyles>;
+    setGlobalStyles: (styles: GlobalStyles) => void;
+    resolve: (surface: ThemeSurface, id: string, defaultBlock: string) => Promise<{
+        blocks: Block[];
+    }>;
+};
+export declare const ThemeStateContext: {
+    __context__: ThemeState;
+};
+export declare function indexOverrides(overrides: TranslationOverride[]): {
+    theme: Record<string, string>;
+    blocks: Record<string, Record<string, string>>;
+};
+export declare function createThemeState(deps: {
+    resolve: (surface: ThemeSurface, id: string, defaultBlock: string) => Promise<{
+        blocks: Block[];
+    }>;
+    translations?: {
+        resolveTranslations: (locale: string) => Promise<TranslationOverride[]>;
+    };
+    initialGlobalStyles?: GlobalStyles;
+}): ThemeState;

package/dist/theme-state.locales.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/translation.d.ts

@@ -0,0 +1,13 @@
+import { ReadonlySignal } from '@preact/signals-core';
+import { ThemeLocaleState } from './theme-state';
+export interface TranslationService {
+    readonly locale: ReadonlySignal<string>;
+    resolve(blockType: string | null, blockId: string | null, key: string): string;
+}
+export type TranslationServiceOptions = {
+    loadDefaultTranslations?: (locale: string) => Promise<Record<string, string>>;
+};
+export declare const TranslationContext: {
+    __context__: TranslationService;
+};
+export declare function createTranslationService(locales: ThemeLocaleState, options?: TranslationServiceOptions): TranslationService;

package/dist/translation.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/vue/context.d.ts

@@ -8,5 +8,7 @@ export declare function useContext<C extends UnknownContext>(context: C): Wrap<C
 export declare function useProvideContext<C extends UnknownContext>(context: C, init: ContextType<C>): void;
 type Wrap<T> = T extends Signal<infer V> ? Ref<V> : T extends Function ? T : T extends Record<any, any> ? {
     [K in keyof T]: Wrap<T[K]>;
+} & {
+    $: T;
 } : T;
 export {};

package/dist/vue.js

@@ -1,6 +1,6 @@
 import { toValue, watchEffect, customRef, defineComponent, ref, getCurrentInstance, onMounted, provide, h, renderSlot, inject, computed, createApp, useHost, defineCustomElement } from "vue";
 import { signal, effect, injectContext, provideContext, createCeRenderer } from "@juo/orion-core";
-import { c as createEditorBridge } from "./bridge-BPfBHSPI.js";
+import { c as createEditorBridge } from "./bridge-fHXg0b-e.js";
 const signalsMap = /* @__PURE__ */ new WeakMap();
 function toSignal(ref2) {
   if (!signalsMap.has(ref2)) {
@@ -97,9 +97,15 @@ function wrap(obj) {
   return new Proxy(obj, {
     get(target, key2) {
       const val = target[key2];
+      if (key2 === "$") {
+        return target;
+      }
       if (typeof val === "object" && val != null && "brand" in val) {
         return toRef(val);
       }
+      if (typeof val === "object" && val != null && !Array.isArray(val) && typeof val !== "function") {
+        return wrap(val);
+      }
       return val;
     }
   });
@@ -164,6 +170,7 @@ function createVueCeRenderer(name, component, { shadowRoot = true } = {}) {
       slots: component.slots
     }
   );
+  C.styles = component.styles;
   customElements.define(name, defineCustomElement(C, { shadowRoot }));
   return createCeRenderer(name);
 }

package/dist/web-components/ExtensionRoot.d.ts

@@ -1,11 +1,22 @@
 export default class ExtensionRoot extends HTMLElement {
     private state;
-    private unsubscribeContext?;
+    private themeState;
+    private unsubscribeThemeContext?;
     private 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.
+     */
+    blockWrapper: ((rendered: HTMLElement) => HTMLElement) | null;
     static get observedAttributes(): string[];
     constructor();
     private wrapperCache;
     private withWrapper;
+    private getSurface;
+    private setStateFromThemeState;
     connectedCallback(): void;
     attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
     disconnectedCallback(): void;

package/dist/web-components/editor/InlineText.d.ts

@@ -1,13 +1,17 @@
 export default class InlineText extends HTMLElement {
     private editorBridge;
+    private translationService;
     private propName;
     private blockId;
+    private blockType;
     private boundHandleBlur;
     private boundHandlePointerDown;
     private lastValue;
+    private dispose?;
     static get observedAttributes(): string[];
     constructor();
     connectedCallback(): void;
+    private get isReadonly();
     private initializeEditorMode;
     private handlePointerDown;
     private handleBlur;

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

@@ -1,4 +1,5 @@
 export default class InlineText extends HTMLElement {
-    constructor();
+    private dispose?;
     connectedCallback(): void;
+    disconnectedCallback(): void;
 }

package/dist/web-components-editor.js

@@ -4,63 +4,110 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { o as ContextRoot } from "./block-CFJIpH_9.js";
-import { E as ExtensionRoot, B as Block } from "./ExtensionRoot-BuoY5H2A.js";
-import { c as createEditorBridge, a as createUpdateBlockPropsMessage } from "./bridge-BPfBHSPI.js";
+import { o as injectContext, E, v as ContextRoot } from "./theme-state-TW-9hD7e.js";
+import { E as ExtensionRoot, B as Block } from "./ExtensionRoot-BFk-vt2J.js";
+import { c as createEditorBridge, a as createFocusInlineTextMessage, b as createUpdateBlockTranslationMessage } from "./bridge-fHXg0b-e.js";
+import { T as TranslationContext } from "./juo-workflow-CoWvwYTn.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"];
+    return ["prop", "readonly"];
   }
   connectedCallback() {
     this.style.display = "inline-block";
+    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-id]");
+    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-id]");
+        blockWrapper = rootNode.host.closest("[data-block-type]");
       }
     }
     if (!blockWrapper) {
-      console.warn("juo-text: Could not find parent block with data-block-id");
+      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";
-    this.style.cursor = "text";
+    if (!this.isReadonly) {
+      this.style.cursor = "text";
+      this.style.borderRadius = "2px";
+      this.style.outline = "0.5px solid transparent";
+      this.style.outlineOffset = "2px";
+    }
     this.style.width = "100%";
-    this.style.borderRadius = "2px";
-    this.style.outline = "0.5px solid transparent";
-    this.style.outlineOffset = "2px";
     this.style.overflowWrap = "anywhere";
     this.style.whiteSpace = "pre-wrap";
-    this.injectStyles();
+    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() {
@@ -90,23 +137,21 @@ const _InlineText = class _InlineText extends HTMLElement {
     _InlineText.injectedRoots.add(root);
   }
   sendUpdate() {
-    if (!this.editorBridge || !this.blockId || !this.propName) {
+    var _a;
+    if (!this.editorBridge || !this.blockId || !this.blockType || !this.propName) {
       return;
     }
     const newValue = this.textContent ?? "";
-    if (newValue.trim() === "" && this.lastValue !== null && this.lastValue !== "") {
-      this.textContent = this.lastValue;
-      return;
-    }
     if (this.lastValue === newValue) {
       return;
     }
-    const message = createUpdateBlockPropsMessage(
+    const message = createUpdateBlockTranslationMessage(
       {
         blockId: this.blockId,
-        props: {
-          [this.propName]: newValue
-        }
+        blockType: this.blockType,
+        key: this.propName,
+        value: newValue,
+        locale: (_a = this.translationService) == null ? void 0 : _a.locale.value
       },
       this.blockId
     );
@@ -119,9 +164,13 @@ const _InlineText = class _InlineText extends HTMLElement {
     }
   }
   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());

package/dist/web-components-runtime.js

@@ -1,12 +1,48 @@
-import { o as ContextRoot } from "./block-CFJIpH_9.js";
-import { E as ExtensionRoot, B as Block } from "./ExtensionRoot-BuoY5H2A.js";
+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);
+  return value;
+};
+import { o as injectContext, E, v as ContextRoot } from "./theme-state-TW-9hD7e.js";
+import { E as ExtensionRoot, B as Block } from "./ExtensionRoot-BFk-vt2J.js";
+import { T as TranslationContext } from "./juo-workflow-CoWvwYTn.js";
 class InlineText extends HTMLElement {
   constructor() {
-    super();
+    super(...arguments);
+    __publicField(this, "dispose");
   }
   connectedCallback() {
     this.style.display = "inline-block";
     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) {