@bloklabs/angular 1.2.6 → 1.4.0

package/README.md

@@ -0,0 +1,65 @@
+# @bloklabs/angular
+
+The Angular block editor bindings for [Blok](https://blokeditor.com) — a headless, Notion-like rich text editor whose content is JSON blocks, not HTML.
+
+## Install
+
+```bash
+npm install @bloklabs/angular @bloklabs/core
+```
+
+`@bloklabs/core` and `@angular/core` / `@angular/common` / `@angular/forms` are peer dependencies.
+
+## Usage
+
+`BlokEditorComponent` is a standalone component: it mounts the editor, manages its lifecycle, and takes every editor config option as an input.
+
+```typescript
+import { Component } from '@angular/core';
+import { BlokEditorComponent } from '@bloklabs/angular';
+import { Header, Paragraph, List } from '@bloklabs/core/tools';
+
+@Component({
+  selector: 'app-editor',
+  standalone: true,
+  imports: [BlokEditorComponent],
+  template: `<blok-editor [tools]="tools" />`,
+})
+export class EditorComponent {
+  tools = {
+    paragraph: Paragraph,
+    header: { class: Header, placeholder: 'Enter a heading' },
+    list: List,
+  };
+}
+```
+
+## Saving
+
+The `(save)` output fires with the latest content on every change, so you never have to call `save()` by hand.
+
+```typescript
+import type { OutputData } from '@bloklabs/core';
+
+// template: <blok-editor [tools]="tools" (save)="onSave($event)" />
+onSave(data: OutputData) {
+  console.log(data.blocks);
+}
+```
+
+The component also implements `ControlValueAccessor`, so it works with `[(ngModel)]` and reactive forms.
+
+## Also exported
+
+- `BlokContentDirective` (`[blokContent]`) — the mount point, if you drive the editor yourself.
+- `injectBlocks()` — a reactive snapshot of the block tree plus a manipulation API.
+- `createAngularBlock` — author block tools as Angular components.
+- `provideBlok` / `BLOK_DEFAULT_CONFIG` — share default editor config through DI.
+
+## Docs
+
+- [Quick start](https://blokeditor.com/docs/quick-start?framework=angular)
+- [`BlokEditor` reference](https://blokeditor.com/docs/blok-editor?framework=angular)
+- [`useBlocks` reference](https://blokeditor.com/docs/use-blocks?framework=angular)
+
+Licensed under Apache-2.0.

package/fesm2022/bloklabs-angular.mjs

@@ -182,7 +182,8 @@ class BlokContentDirective {
     /** Emits the live Blok instance once it is ready, after `instance` is populated. */
     ready = new EventEmitter();
     /** The live Blok instance, or null before `isReady` resolves / after destroy. */
-    instance = signal(null, ...(ngDevMode ? [{ debugName: "instance" }] : []));
+    instance = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "instance" }] : /* istanbul ignore next */ []));
     /** The editor created by the most recent construction; used as the staleness key. */
     current = null;
     destroyed = false;
@@ -250,10 +251,10 @@ class BlokContentDirective {
         this.registry = undefined;
         this.instance.set(null);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: BlokContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: BlokContentDirective, isStandalone: true, selector: "[blokContent]", inputs: { config: "config", recreateKey: "recreateKey" }, outputs: { ready: "ready" }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: BlokContentDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.7", type: BlokContentDirective, isStandalone: true, selector: "[blokContent]", inputs: { config: "config", recreateKey: "recreateKey" }, outputs: { ready: "ready" }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: BlokContentDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: BlokContentDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[blokContent]',
@@ -1753,9 +1754,15 @@ const DATA_ATTR = {
     /** Editor or element is empty */
     empty: 'data-blok-empty',
     /** Present on the editor wrapper while read-only mode is active.
-     *  Public styling hook — lets hosts (and Blok's own CSS, e.g. the
-     *  gutter auto-collapse) key rules off the editing state without JS. */
+     *  Public styling hook — lets hosts key rules off the editing state
+     *  without JS. Deliberately does NOT collapse the gutter: plain
+     *  read-only still shows the block-hover copy-link control there, and
+     *  in-place readOnly.set() flips must not shift the layout. */
     readonly: 'data-blok-readonly',
+    /** Present on the editor wrapper while read-only mode hides ALL editor
+     *  controls (readOnly: { hideControls: true }). Public styling hook —
+     *  drives the gutter auto-collapse for genuinely chromeless read-only. */
+    controlsHidden: 'data-blok-controls-hidden',
     /** Present on the editor wrapper when config.hideToolbar is true.
      *  Public styling hook — drives the gutter auto-collapse (the gutter
      *  exists solely to house the toolbar's +/⠿ controls). */
@@ -2066,8 +2073,16 @@ const mountChildBlocks = (container, children) => {
  * `BlokEditor`). Delegates instance lifecycle to an internal `BlokContentDirective`
  * and layers the typed reactive input/output API on top.
  *
- * Reactive inputs (`readOnly`, `theme`, `width`, `placeholder`, `autofocus`) are
- * synced in place after mount via effects; everything else seeds construction.
+ * Reactive inputs (`readOnly`, `hideToolbar`, `inlineToolbar`, `theme`,
+ * `width`, `placeholder`, `autofocus`, `styleTokens`, `i18n`, `data`) are
+ * synced in place after mount via effects — `hideToolbar` through
+ * `editor.toolbar.setHidden()`, `inlineToolbar` through
+ * `editor.tools.setInlineToolbar()` (content-compared),
+ * `styleTokens` through `editor.tokens.set()` (replace semantics),
+ * `i18n` through `editor.i18n.update()` (deep-equal–deduped; seeded at
+ * construction so the locale resolves during boot) and `data`
+ * through `editor.render()` (deep-equal–deduped); everything else seeds
+ * construction.
  *
  * Implementation note: classic `@Input()`/`@ViewChild()` decorators are used
  * (not signal `input()`/`viewChild()`) for JIT compatibility — see
@@ -2080,7 +2095,8 @@ class BlokEditorComponent {
     defaults = inject(BLOK_DEFAULT_CONFIG, { optional: true }) ?? {};
     contentQuery;
     /** Signal bridge for the @ViewChild directive so effects react to its arrival. */
-    content = signal(null, ...(ngDevMode ? [{ debugName: "content" }] : []));
+    content = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "content" }] : /* istanbul ignore next */ []));
     /**
      * Output half of two-way `[(data)]`. Emits the editor's serialized content on
      * every change. Wiring the core `onSave` callback is gated on this being
@@ -2115,28 +2131,69 @@ class BlokEditorComponent {
     // ---- Reactive inputs (signal-backed setters; synced in place, never recreate) ----
     // Default undefined (not false) so an unset input falls back to a provideBlok
     // default; the readOnly effect / buildConfig coerce undefined to false.
-    readOnly$ = signal(undefined, ...(ngDevMode ? [{ debugName: "readOnly$" }] : []));
+    // Accepts the object form (`{ hideControls }`) too — it flows through
+    // buildConfig unchanged and the effect expands it to
+    // `readOnly.set(enabled, { hideControls })`.
+    readOnly$ = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "readOnly$" }] : /* istanbul ignore next */ []));
     set readOnly(value) {
         this.readOnly$.set(value);
     }
-    theme$ = signal(undefined, ...(ngDevMode ? [{ debugName: "theme$" }] : []));
+    hideToolbar$ = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "hideToolbar$" }] : /* istanbul ignore next */ []));
+    set hideToolbar(value) {
+        this.hideToolbar$.set(value);
+    }
+    inlineToolbar$ = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "inlineToolbar$" }] : /* istanbul ignore next */ []));
+    set inlineToolbar(value) {
+        this.inlineToolbar$.set(value);
+    }
+    theme$ = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "theme$" }] : /* istanbul ignore next */ []));
     set theme(value) {
         this.theme$.set(value);
     }
-    width$ = signal(undefined, ...(ngDevMode ? [{ debugName: "width$" }] : []));
+    width$ = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "width$" }] : /* istanbul ignore next */ []));
     set width(value) {
         this.width$.set(value);
     }
-    placeholder$ = signal(undefined, ...(ngDevMode ? [{ debugName: "placeholder$" }] : []));
+    placeholder$ = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "placeholder$" }] : /* istanbul ignore next */ []));
     set placeholder(value) {
         this.placeholder$.set(value);
     }
-    autofocus$ = signal(false, ...(ngDevMode ? [{ debugName: "autofocus$" }] : []));
+    /**
+     * Theme tokens. Construction-only config forced hosts with a live light/dark
+     * toggle to recreate the editor or hand-write the global stylesheet Blok
+     * already injects; this drives the runtime `tokens` API instead.
+     */
+    styleTokens$ = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "styleTokens$" }] : /* istanbul ignore next */ []));
+    set styleTokens(value) {
+        this.styleTokens$.set(value);
+    }
+    /**
+     * Locale, host message overrides and text direction. `config.i18n` was
+     * consumed once at boot, so a host driving a language switcher had to
+     * recreate the editor (losing caret, focus and undo stack) to relabel the
+     * UI; this drives the runtime `i18n.update` API instead. `defaultLocale` is
+     * not forwarded — it only affects the INITIAL locale resolution.
+     */
+    i18n$ = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "i18n$" }] : /* istanbul ignore next */ []));
+    set i18n(value) {
+        this.i18n$.set(value);
+    }
+    autofocus$ = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "autofocus$" }] : /* istanbul ignore next */ []));
     set autofocus(value) {
         this.autofocus$.set(value);
     }
     // ---- Reactive content (seeds construction, then re-renders on change) ----
-    data$ = signal(undefined, ...(ngDevMode ? [{ debugName: "data$" }] : []));
+    data$ = signal(undefined, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "data$" }] : /* istanbul ignore next */ []));
     set data(value) {
         this.data$.set(value);
     }
@@ -2144,7 +2201,7 @@ class BlokEditorComponent {
     tools;
     /**
      * Escape hatch: a full config object for keys without a dedicated input
-     * (i18n, sanitizer, minHeight, inlineToolbar, …). Layered between provideBlok
+     * (sanitizer, minHeight, …). Layered between provideBlok
      * defaults and the discrete inputs.
      */
     config;
@@ -2156,6 +2213,14 @@ class BlokEditorComponent {
      * no-op, so it won't clobber the caret. Renders are serialized via `renderChain`.
      */
     lastRenderedData;
+    /** Last token set pushed through `tokens.set`, for deep-equal deduping. */
+    appliedTokens;
+    /** Last i18n config pushed through `i18n.update`, for deep-equal deduping. */
+    appliedI18n;
+    /** Editor instance the i18n baseline above belongs to. */
+    i18nAppliedFor = null;
+    /** Last value pushed through `tools.setInlineToolbar`, for content-compare deduping. */
+    appliedInlineToolbar;
     seededEditor = null;
     renderChain = Promise.resolve();
     /** Registered by `ControlValueAccessor.registerOnChange` (Angular forms). */
@@ -2178,7 +2243,8 @@ class BlokEditorComponent {
         });
     };
     /** Live Blok instance, or null until `isReady` resolves / after destroy. */
-    instance = computed(() => this.content()?.instance() ?? null, ...(ngDevMode ? [{ debugName: "instance" }] : []));
+    instance = computed(() => this.content()?.instance() ?? null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "instance" }] : /* istanbul ignore next */ []));
     /** Guards `ready` to one emission per editor instance. */
     lastReadyInstance = null;
     /**
@@ -2189,7 +2255,17 @@ class BlokEditorComponent {
     buildConfig() {
         // Precedence: provideBlok defaults < [config] escape hatch < discrete inputs.
         const cfg = { ...this.defaults, ...this.config };
+        // The object form ({ hideControls }) is preserved as-is; the readOnly
+        // effect expands it into `readOnly.set(enabled, { hideControls })`.
         cfg.readOnly = this.readOnly$() ?? this.config?.readOnly ?? this.defaults.readOnly ?? false;
+        const hideToolbar = this.hideToolbar$();
+        if (hideToolbar !== undefined) {
+            cfg.hideToolbar = hideToolbar;
+        }
+        const inlineToolbar = this.inlineToolbar$();
+        if (inlineToolbar !== undefined) {
+            cfg.inlineToolbar = inlineToolbar;
+        }
         // tools registries are MERGED (not replaced) across all three layers so a
         // shared registry composes with per-instance additions.
         if (this.tools !== undefined ||
@@ -2213,6 +2289,12 @@ class BlokEditorComponent {
         if (placeholder !== undefined) {
             cfg.placeholder = placeholder;
         }
+        // Seeded at construction (not applied by the i18n effect) so the locale is
+        // resolved during boot instead of flashing the default language first.
+        const i18n = this.i18n$();
+        if (i18n !== undefined) {
+            cfg.i18n = i18n;
+        }
         // Opt-in: only attach each core callback when the consumer actually consumes
         // it (an observed output, a registered forms hook, or a provided transform).
         // Their mere presence makes the core serialize / run hooks on every change.
@@ -2261,11 +2343,39 @@ class BlokEditorComponent {
         // (the Angular analog of React's `editor` effect-dependency).
         effect(() => {
             const editor = this.instance();
-            const readOnly = this.readOnly$();
+            const readOnly = this.readOnly$() ?? this.config?.readOnly;
             if (editor) {
-                void editor.readOnly.set(readOnly ?? normalizeReadOnlyConfig(this.config?.readOnly).enabled);
+                const { enabled, hideControls } = normalizeReadOnlyConfig(readOnly);
+                // Only the object form carries options; the boolean form keeps the
+                // one-argument call so it never clobbers a config-seeded hideControls.
+                if (typeof readOnly === 'object' && readOnly !== null) {
+                    void editor.readOnly.set(enabled, { hideControls });
+                }
+                else {
+                    void editor.readOnly.set(enabled);
+                }
             }
         });
+        effect(() => {
+            const editor = this.instance();
+            const hideToolbar = this.hideToolbar$();
+            if (editor && hideToolbar !== undefined) {
+                editor.toolbar.setHidden(hideToolbar);
+            }
+        });
+        // Content-compared (not identity): a new array with the same tool names is
+        // a no-op, so template-inline array literals don't thrash the assignment.
+        effect(() => {
+            const editor = this.instance();
+            const inlineToolbar = this.inlineToolbar$();
+            if (!editor ||
+                inlineToolbar === undefined ||
+                deepEqual(inlineToolbar, this.appliedInlineToolbar)) {
+                return;
+            }
+            this.appliedInlineToolbar = Array.isArray(inlineToolbar) ? [...inlineToolbar] : inlineToolbar;
+            editor.tools.setInlineToolbar(inlineToolbar);
+        });
         effect(() => {
             const editor = this.instance();
             const theme = this.theme$();
@@ -2287,6 +2397,43 @@ class BlokEditorComponent {
                 editor.placeholder.set(placeholder);
             }
         });
+        effect(() => {
+            const editor = this.instance();
+            const tokens = this.styleTokens$() ?? this.config?.style?.tokens;
+            if (!editor || tokens === undefined || deepEqual(tokens, this.appliedTokens)) {
+                return;
+            }
+            this.appliedTokens = { ...tokens };
+            editor.tokens.set(tokens);
+        });
+        effect(() => {
+            const editor = this.instance();
+            const i18n = this.i18n$() ?? this.config?.i18n;
+            if (!editor) {
+                return;
+            }
+            /*
+             * A freshly constructed editor already resolved this config during its
+             * own boot (buildConfig seeds it), so record the baseline and push
+             * nothing — re-applying it here would reload the locale after mount and
+             * flash the default language.
+             */
+            if (this.i18nAppliedFor !== editor) {
+                this.i18nAppliedFor = editor;
+                this.appliedI18n = i18n === undefined ? undefined : { ...i18n };
+                return;
+            }
+            if (i18n === undefined || deepEqual(i18n, this.appliedI18n)) {
+                return;
+            }
+            this.appliedI18n = { ...i18n };
+            const { locale, messages, direction } = i18n;
+            void editor.i18n.update({
+                ...(locale === undefined ? {} : { locale }),
+                ...(messages === undefined ? {} : { messages }),
+                ...(direction === undefined ? {} : { direction }),
+            });
+        });
         effect(() => {
             const editor = this.instance();
             if (editor && this.autofocus$()) {
@@ -2366,8 +2513,8 @@ class BlokEditorComponent {
     setDisabledState(isDisabled) {
         this.readOnly$.set(isDisabled);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: BlokEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.25", type: BlokEditorComponent, isStandalone: true, selector: "blok-editor", inputs: { onBeforeRender: "onBeforeRender", onBeforePaste: "onBeforePaste", readOnly: "readOnly", theme: "theme", width: "width", placeholder: "placeholder", autofocus: "autofocus", data: "data", tools: "tools", config: "config", recreateKey: "recreateKey" }, outputs: { ready: "ready", dataChange: "dataChange", save: "save", change: "change", afterRender: "afterRender", themeChange: "themeChange", blocksRendered: "blocksRendered", blockRendered: "blockRendered" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: BlokEditorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.7", type: BlokEditorComponent, isStandalone: true, selector: "blok-editor", inputs: { onBeforeRender: "onBeforeRender", onBeforePaste: "onBeforePaste", readOnly: "readOnly", hideToolbar: "hideToolbar", inlineToolbar: "inlineToolbar", theme: "theme", width: "width", placeholder: "placeholder", styleTokens: "styleTokens", i18n: "i18n", autofocus: "autofocus", data: "data", tools: "tools", config: "config", recreateKey: "recreateKey" }, outputs: { ready: "ready", dataChange: "dataChange", save: "save", change: "change", afterRender: "afterRender", themeChange: "themeChange", blocksRendered: "blocksRendered", blockRendered: "blockRendered" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => BlokEditorComponent),
@@ -2375,7 +2522,7 @@ class BlokEditorComponent {
             },
         ], viewQueries: [{ propertyName: "contentQuery", first: true, predicate: BlokContentDirective, descendants: true }], exportAs: ["blok"], ngImport: i0, template: `<div blokContent [config]="buildConfig()" [recreateKey]="recreateKey"></div>`, isInline: true, dependencies: [{ kind: "directive", type: BlokContentDirective, selector: "[blokContent]", inputs: ["config", "recreateKey"], outputs: ["ready"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: BlokEditorComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.7", ngImport: i0, type: BlokEditorComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'blok-editor',
@@ -2417,12 +2564,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImpo
                 type: Input
             }], readOnly: [{
                 type: Input
+            }], hideToolbar: [{
+                type: Input
+            }], inlineToolbar: [{
+                type: Input
             }], theme: [{
                 type: Input
             }], width: [{
                 type: Input
             }], placeholder: [{
                 type: Input
+            }], styleTokens: [{
+                type: Input
+            }], i18n: [{
+                type: Input
             }], autofocus: [{
                 type: Input
             }], data: [{
@@ -2492,8 +2647,10 @@ function createAngularBlock(spec) {
             this.pointerDrag = () => api?.blocks?.isPointerDragActive === true;
             this.mirror = fillDefaults(spec.propSchema, (options.data ?? {}));
             this.lastRendered = this.mirror;
-            this.dataSig = signal(this.mirror, ...(ngDevMode ? [{ debugName: "dataSig" }] : []));
-            this.readOnlySig = signal(options.readOnly, ...(ngDevMode ? [{ debugName: "readOnlySig" }] : []));
+            this.dataSig = signal(this.mirror, /* @ts-ignore */
+            ...(ngDevMode ? [{ debugName: "dataSig" }] : /* istanbul ignore next */ []));
+            this.readOnlySig = signal(options.readOnly, /* @ts-ignore */
+            ...(ngDevMode ? [{ debugName: "readOnlySig" }] : /* istanbul ignore next */ []));
             this.ctx = {
                 data: this.dataSig.asReadonly(),
                 commit: this.commit,
@@ -2662,13 +2819,15 @@ const BLOCK_CHANGED_EVENT = 'block changed';
 function injectBlocks(editor) {
     // Bumped on every `block changed`; the shared API's read methods touch it (via
     // the onRead seam) so template/computed reads stay reactive.
-    const version = signal(0, ...(ngDevMode ? [{ debugName: "version" }] : []));
+    const version = signal(0, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "version" }] : /* istanbul ignore next */ []));
     const touch = () => {
         version();
     };
     // The API bound to the CURRENT editor; EMPTY_API while null. A signal so the
     // facade's reads track the editor-identity swap.
-    const bound = signal(EMPTY_API, ...(ngDevMode ? [{ debugName: "bound" }] : []));
+    const bound = signal(EMPTY_API, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "bound" }] : /* istanbul ignore next */ []));
     // One subscription record (no `let` reassignment), re-bound on editor change.
     const sub = { editor: null, handler: null };
     const unsubscribe = () => {
@@ -2750,9 +2909,58 @@ function injectBlocks(editor) {
     };
 }
 
+// packages/angular/src/useBlokReady.ts
+/**
+ * Resolves the caller's scope description to an element, or null when it is
+ * not available yet.
+ * @param within - the scope description passed in options
+ */
+function resolveScope(within) {
+    const value = typeof within === 'function' ? within() : within;
+    if (value === null || value === undefined) {
+        return null;
+    }
+    return value instanceof ElementRef ? value.nativeElement : value;
+}
+/**
+ * Angular factory exposing the live readiness of the Blok editors in a DOM
+ * scope as a boolean signal.
+ *
+ * The readiness logic itself is framework-agnostic and lives in core
+ * (`Blok.readyState` / `Blok.subscribeReady`) — the SAME implementation behind
+ * React's and Vue's `useBlokReady`, so the three adapters cannot drift. This
+ * wrapper supplies only Angular's reactivity: a signal re-read on every
+ * registry change, unsubscribed through the injector's `DestroyRef`.
+ *
+ * Call it in an injection context (component constructor / field initializer).
+ * The signal starts `false` and takes its first real reading in
+ * `afterNextRender` — browser-only by contract, and late enough for a
+ * `@ViewChild` scope to exist. Over-waiting is safe; under-waiting is a bug.
+ * @param options - scope and readiness depth
+ */
+function injectBlokReady(options = {}) {
+    const { within, settleOn } = options;
+    const ready = signal(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "ready" }] : /* istanbul ignore next */ []));
+    const read = () => {
+        const scope = within === undefined ? null : resolveScope(within);
+        // A scope that was asked for but has not resolved yet is NOT the global
+        // scope — reporting ready here would gate on the wrong set of editors.
+        ready.set(within !== undefined && scope === null
+            ? false
+            : Blok.readyState({
+                within: scope,
+                settleOn,
+            }).ready);
+    };
+    inject(DestroyRef).onDestroy(Blok.subscribeReady(read));
+    afterNextRender(read);
+    return ready.asReadonly();
+}
+
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { BLOK_BLOCK_CONTEXT, BLOK_DEFAULT_CONFIG, BlokContentDirective, BlokEditorComponent, createAngularBlock, injectBlocks, provideBlok };
+export { BLOK_BLOCK_CONTEXT, BLOK_DEFAULT_CONFIG, BlokContentDirective, BlokEditorComponent, createAngularBlock, injectBlocks, injectBlokReady, provideBlok };
 //# sourceMappingURL=bloklabs-angular.mjs.map