@obelism/content-vue 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Obelism
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,87 @@
-# Temporary Holding Version
+# Obelism Content Vue SDK
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Live preview in the visual editor and rich text, for Vue 3 and Nuxt.
+
+```bash
+npm i @obelism/content @obelism/content-vue
+```
+
+## Live preview
+
+```vue
+<!-- app.vue: starts the bridge, so blocks are selectable on every page -->
+<template>
+	<ContentBridge />
+	<NuxtPage />
+</template>
+
+<script setup lang="ts">
+import { ContentBridge } from '@obelism/content-vue'
+</script>
+```
+
+```vue
+<!-- A component rendering an entry -->
+<script setup lang="ts">
+import { editable, useLiveEntry } from '@obelism/content-vue'
+
+const props = defineProps<{ entry: PageEntry }>()
+// The editor's unsaved version while editing, `entry` everywhere else.
+const live = useLiveEntry(() => props.entry)
+</script>
+
+<template>
+	<main v-bind="editable(live)">
+		<section
+			v-for="block in live.fields.body"
+			:key="block._uid"
+			v-bind="editable(block)"
+		>
+			…
+		</section>
+	</main>
+</template>
+```
+
+- `useLiveEntry(entry, { url? })`: a computed ref of `entry` (a ref, getter or
+  value), or the editor's live version of it.
+- `useContentBridge()`: a computed ref of `{ isEditing, mode, entryId,
+environment }`, after mount.
+- `useContentBridgeEvent('saved' | 'published' | 'update', listener)`, e.g.
+  `refreshNuxtData()` on publish.
+- `<ContentBridge url? prompt? page-path? />`: pass `url` only when not on
+  content.obelism.studio; `pagePath(path, locale)` maps a CMS path in a locale
+  to the site's URL for pages made with New page (default `/` + path).
+
+Call the composables in `setup`. The bridge starts after mount, so server
+rendering and hydration always see "not editing".
+
+## Prompt editing
+
+`<ContentBridge />` shows editors a prompt box inside the visual editor (see
+`@obelism/content`). `<ContentBridge :prompt="false" />` leaves it out;
+`useContentPrompt()` gives a computed ref of `{ available, mode, prompting,
+canUndo, selectedUid, prompt, createPage, undo, select, save, publish, signOut,
+setSelecting }` for your own UI.
+
+## Rich text
+
+```vue
+<RichText
+	:document="entry.fields.body"
+	:embedded-entry="Card"
+	:nodes="{ heading: Heading }"
+	:marks="{ link: Link }"
+/>
+```
+
+Overrides are components: a node or mark override gets `node` or `mark` as a
+prop and its rendered children in the default slot, an embed gets `entry` or
+`asset` and `node`.
+
+```ts
+const Heading: FunctionalComponent<RichTextNodeProps> = (_, { slots }) =>
+	h('h2', { class: 'title' }, slots.default?.())
+```
+
+Renders on the server too.

package/dist/index.d.mts

@@ -0,0 +1,157 @@
+import * as _obelism_content_bridge from '@obelism/content/bridge';
+import { BridgeOptions, ContentBridge as ContentBridge$1, BridgeState, PromptResult, CreatePageResult, BridgeEvent, BridgeListener } from '@obelism/content/bridge';
+export { BridgeEvent, BridgeEvents, BridgeOptions, BridgeState, PromptBoxOptions, PromptLabels, PromptResult } from '@obelism/content/bridge';
+import * as vue from 'vue';
+import { PropType, ComputedRef, MaybeRefOrGetter, Component, VNodeChild } from 'vue';
+import { Entry, RichTextNode, RichTextMark, EntryStub, Asset } from '@obelism/content';
+export { Asset, Block, Entry, EntryStub, RichTextDocument, RichTextNode, editable } from '@obelism/content';
+
+type ContentBridgeProps = BridgeOptions;
+declare const ContentBridge: vue.DefineComponent<vue.ExtractPropTypes<{
+    url: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    prompt: {
+        type: PropType<BridgeOptions["prompt"]>;
+        default: undefined;
+    };
+    pagePath: {
+        type: PropType<BridgeOptions["pagePath"]>;
+        default: undefined;
+    };
+    productPath: {
+        type: PropType<BridgeOptions["productPath"]>;
+        default: undefined;
+    };
+    collectionPath: {
+        type: PropType<BridgeOptions["collectionPath"]>;
+        default: undefined;
+    };
+}>, () => null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    url: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    prompt: {
+        type: PropType<BridgeOptions["prompt"]>;
+        default: undefined;
+    };
+    pagePath: {
+        type: PropType<BridgeOptions["pagePath"]>;
+        default: undefined;
+    };
+    productPath: {
+        type: PropType<BridgeOptions["productPath"]>;
+        default: undefined;
+    };
+    collectionPath: {
+        type: PropType<BridgeOptions["collectionPath"]>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    prompt: boolean | (Omit<_obelism_content_bridge.PromptBoxOptions, "labels"> & {
+        labels?: Partial<_obelism_content_bridge.PromptLabels & _obelism_content_bridge.SiteEditorLabels> | undefined;
+    }) | undefined;
+    pagePath: ((path: string, locale: string) => string) | undefined;
+    productPath: ((handle: string, locale: string) => string) | undefined;
+    collectionPath: ((handle: string, locale: string) => string) | undefined;
+    url: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+type ContentBridgeState = Pick<ContentBridge$1, 'isEditing' | 'mode' | 'entryId' | 'environment'>;
+declare const useContentBridge: ({ url, }?: BridgeOptions) => ComputedRef<ContentBridgeState>;
+declare const useContentBridgeEvent: <E extends BridgeEvent>(event: E, listener: BridgeListener<E>, { url }?: BridgeOptions) => void;
+declare function useLiveEntry<TEntry extends Entry>(entry: MaybeRefOrGetter<TEntry>, options?: BridgeOptions): ComputedRef<TEntry>;
+declare function useLiveEntry<TEntry extends Entry>(entry: MaybeRefOrGetter<TEntry | null | undefined>, options?: BridgeOptions): ComputedRef<TEntry | null>;
+type ContentPromptState = BridgeState & {
+    available: boolean;
+    mode: ContentBridge$1['mode'];
+    prompt: (prompt: string, options?: {
+        uid?: string | null;
+    }) => Promise<PromptResult>;
+    createPage: (path: string, prompt: string) => Promise<CreatePageResult>;
+    undo: () => void;
+    select: (uid: string | null) => void;
+    save: () => Promise<void>;
+    publish: () => Promise<void>;
+    signOut: () => void;
+    setSelecting: (selecting: boolean) => void;
+};
+declare const useContentPrompt: ({ url, }?: Pick<BridgeOptions, "url">) => ComputedRef<ContentPromptState>;
+
+type RichTextNodeProps = {
+    node: RichTextNode;
+};
+type RichTextMarkProps = {
+    mark: RichTextMark;
+};
+type RichTextEmbeddedEntryProps = {
+    entry: Entry | EntryStub;
+    node: RichTextNode;
+};
+type RichTextEmbeddedAssetProps = {
+    asset: Asset;
+    node: RichTextNode;
+};
+type RichTextComponents = {
+    nodes?: Partial<Record<string, Component<RichTextNodeProps>>> | undefined;
+    marks?: Partial<Record<string, Component<RichTextMarkProps>>> | undefined;
+    embeddedEntry?: Component<RichTextEmbeddedEntryProps> | undefined;
+    embeddedAsset?: Component<RichTextEmbeddedAssetProps> | undefined;
+};
+type RichTextProps = RichTextComponents & {
+    document: RichTextNode | null | undefined;
+};
+declare const RichText: vue.DefineComponent<vue.ExtractPropTypes<{
+    document: {
+        type: PropType<RichTextNode | null | undefined>;
+        default: null;
+    };
+    nodes: {
+        type: PropType<RichTextComponents["nodes"]>;
+        default: undefined;
+    };
+    marks: {
+        type: PropType<RichTextComponents["marks"]>;
+        default: undefined;
+    };
+    embeddedEntry: {
+        type: PropType<RichTextComponents["embeddedEntry"]>;
+        default: undefined;
+    };
+    embeddedAsset: {
+        type: PropType<RichTextComponents["embeddedAsset"]>;
+        default: undefined;
+    };
+}>, () => VNodeChild, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    document: {
+        type: PropType<RichTextNode | null | undefined>;
+        default: null;
+    };
+    nodes: {
+        type: PropType<RichTextComponents["nodes"]>;
+        default: undefined;
+    };
+    marks: {
+        type: PropType<RichTextComponents["marks"]>;
+        default: undefined;
+    };
+    embeddedEntry: {
+        type: PropType<RichTextComponents["embeddedEntry"]>;
+        default: undefined;
+    };
+    embeddedAsset: {
+        type: PropType<RichTextComponents["embeddedAsset"]>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    nodes: Partial<Record<string, Component<RichTextNodeProps>>> | undefined;
+    marks: Partial<Record<string, Component<RichTextMarkProps>>> | undefined;
+    embeddedEntry: Component<RichTextEmbeddedEntryProps> | undefined;
+    embeddedAsset: Component<RichTextEmbeddedAssetProps> | undefined;
+    document: RichTextNode | null | undefined;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { ContentBridge, RichText, useContentBridge, useContentBridgeEvent, useContentPrompt, useLiveEntry };
+export type { ContentBridgeProps, ContentBridgeState, ContentPromptState, RichTextComponents, RichTextEmbeddedAssetProps, RichTextEmbeddedEntryProps, RichTextMarkProps, RichTextNodeProps, RichTextProps };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","sources":["../src/bridge.ts","../src/RichText.ts"],"mappings":";;;;;;;;AAKA,KAAK,kBAAkB,GAAG,aAAa;AACvC,cAAc,aAAa,EAAE,GAAG,CAAC,eAAe,CAAC,GAAG,CAAC,gBAAgB;AACrE;AACA,cAAc,iBAAiB;AAC/B;AACA;AACA;AACA,cAAc,QAAQ,CAAC,aAAa;AACpC;AACA;AACA;AACA,cAAc,QAAQ,CAAC,aAAa;AACpC;AACA;AACA;AACA,cAAc,QAAQ,CAAC,aAAa;AACpC;AACA;AACA;AACA,cAAc,QAAQ,CAAC,aAAa;AACpC;AACA;AACA,4BAA4B,GAAG,CAAC,qBAAqB,EAAE,GAAG,CAAC,qBAAqB,cAAc,GAAG,CAAC,WAAW,EAAE,QAAQ,CAAC,GAAG,CAAC,gBAAgB;AAC5I;AACA,cAAc,iBAAiB;AAC/B;AACA;AACA;AACA,cAAc,QAAQ,CAAC,aAAa;AACpC;AACA;AACA;AACA,cAAc,QAAQ,CAAC,aAAa;AACpC;AACA;AACA;AACA,cAAc,QAAQ,CAAC,aAAa;AACpC;AACA;AACA;AACA,cAAc,QAAQ,CAAC,aAAa;AACpC;AACA;AACA,MAAM,QAAQ;AACd,uBAAuB,IAAI,CAAC,uBAAuB,CAAC,gBAAgB;AACpE,iBAAiB,OAAO,CAAC,uBAAuB,CAAC,YAAY,GAAG,uBAAuB,CAAC,gBAAgB;AACxG;AACA;AACA;AACA;AACA;AACA,uBAAuB,GAAG,CAAC,uBAAuB;AAClD,KAAK,kBAAkB,GAAG,IAAI,CAACA,eAAM;AACrC,cAAc,gBAAgB,cAAc,aAAa,KAAK,WAAW,CAAC,kBAAkB;AAC5F,cAAc,qBAAqB,aAAa,WAAW,sBAAsB,cAAc,eAAe,aAAa;AAC3H,iBAAiB,YAAY,gBAAgB,KAAK,SAAS,gBAAgB,oBAAoB,aAAa,GAAG,WAAW;AAC1H,iBAAiB,YAAY,gBAAgB,KAAK,SAAS,gBAAgB,uCAAuC,aAAa,GAAG,WAAW;AAC7I,KAAK,kBAAkB,GAAG,WAAW;AACrC;AACA,UAAUA,eAAM;AAChB;AACA;AACA,UAAU,OAAO,CAAC,YAAY;AAC9B,kDAAkD,OAAO,CAAC,gBAAgB;AAC1E;AACA;AACA,gBAAgB,OAAO;AACvB,mBAAmB,OAAO;AAC1B;AACA;AACA;AACA,cAAc,gBAAgB,cAAc,IAAI,CAAC,aAAa,aAAa,WAAW,CAAC,kBAAkB;;ACzEzG,KAAK,iBAAiB;AACtB,UAAU,YAAY;AACtB;AACA,KAAK,iBAAiB;AACtB,UAAU,YAAY;AACtB;AACA,KAAK,0BAA0B;AAC/B,WAAW,KAAK,GAAG,SAAS;AAC5B,UAAU,YAAY;AACtB;AACA,KAAK,0BAA0B;AAC/B,WAAW,KAAK;AAChB,UAAU,YAAY;AACtB;AACA,KAAK,kBAAkB;AACvB,YAAY,OAAO,CAAC,MAAM,SAAS,SAAS,CAAC,iBAAiB;AAC9D,YAAY,OAAO,CAAC,MAAM,SAAS,SAAS,CAAC,iBAAiB;AAC9D,oBAAoB,SAAS,CAAC,0BAA0B;AACxD,oBAAoB,SAAS,CAAC,0BAA0B;AACxD;AACA,KAAK,aAAa,GAAG,kBAAkB;AACvC,cAAc,YAAY;AAC1B;AACA,cAAc,QAAQ,EAAE,GAAG,CAAC,eAAe,CAAC,GAAG,CAAC,gBAAgB;AAChE;AACA,cAAc,QAAQ,CAAC,YAAY;AACnC;AACA;AACA;AACA,cAAc,QAAQ,CAAC,kBAAkB;AACzC;AACA;AACA;AACA,cAAc,QAAQ,CAAC,kBAAkB;AACzC;AACA;AACA;AACA,cAAc,QAAQ,CAAC,kBAAkB;AACzC;AACA;AACA;AACA,cAAc,QAAQ,CAAC,kBAAkB;AACzC;AACA;AACA,UAAU,UAAU,cAAc,GAAG,CAAC,qBAAqB,EAAE,GAAG,CAAC,qBAAqB,cAAc,GAAG,CAAC,WAAW,EAAE,QAAQ,CAAC,GAAG,CAAC,gBAAgB;AAClJ;AACA,cAAc,QAAQ,CAAC,YAAY;AACnC;AACA;AACA;AACA,cAAc,QAAQ,CAAC,kBAAkB;AACzC;AACA;AACA;AACA,cAAc,QAAQ,CAAC,kBAAkB;AACzC;AACA;AACA;AACA,cAAc,QAAQ,CAAC,kBAAkB;AACzC;AACA;AACA;AACA,cAAc,QAAQ,CAAC,kBAAkB;AACzC;AACA;AACA,MAAM,QAAQ;AACd,WAAW,OAAO,CAAC,MAAM,SAAS,SAAS,CAAC,iBAAiB;AAC7D,WAAW,OAAO,CAAC,MAAM,SAAS,SAAS,CAAC,iBAAiB;AAC7D,mBAAmB,SAAS,CAAC,0BAA0B;AACvD,mBAAmB,SAAS,CAAC,0BAA0B;AACvD,cAAc,YAAY;AAC1B,uBAAuB,GAAG,CAAC,uBAAuB;;","names":["Bridge"]}

package/dist/index.d.ts

@@ -0,0 +1,157 @@
+import * as _obelism_content_bridge from '@obelism/content/bridge';
+import { BridgeOptions, ContentBridge as ContentBridge$1, BridgeState, PromptResult, CreatePageResult, BridgeEvent, BridgeListener } from '@obelism/content/bridge';
+export { BridgeEvent, BridgeEvents, BridgeOptions, BridgeState, PromptBoxOptions, PromptLabels, PromptResult } from '@obelism/content/bridge';
+import * as vue from 'vue';
+import { PropType, ComputedRef, MaybeRefOrGetter, Component, VNodeChild } from 'vue';
+import { Entry, RichTextNode, RichTextMark, EntryStub, Asset } from '@obelism/content';
+export { Asset, Block, Entry, EntryStub, RichTextDocument, RichTextNode, editable } from '@obelism/content';
+
+type ContentBridgeProps = BridgeOptions;
+declare const ContentBridge: vue.DefineComponent<vue.ExtractPropTypes<{
+    url: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    prompt: {
+        type: PropType<BridgeOptions["prompt"]>;
+        default: undefined;
+    };
+    pagePath: {
+        type: PropType<BridgeOptions["pagePath"]>;
+        default: undefined;
+    };
+    productPath: {
+        type: PropType<BridgeOptions["productPath"]>;
+        default: undefined;
+    };
+    collectionPath: {
+        type: PropType<BridgeOptions["collectionPath"]>;
+        default: undefined;
+    };
+}>, () => null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    url: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    prompt: {
+        type: PropType<BridgeOptions["prompt"]>;
+        default: undefined;
+    };
+    pagePath: {
+        type: PropType<BridgeOptions["pagePath"]>;
+        default: undefined;
+    };
+    productPath: {
+        type: PropType<BridgeOptions["productPath"]>;
+        default: undefined;
+    };
+    collectionPath: {
+        type: PropType<BridgeOptions["collectionPath"]>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    prompt: boolean | (Omit<_obelism_content_bridge.PromptBoxOptions, "labels"> & {
+        labels?: Partial<_obelism_content_bridge.PromptLabels & _obelism_content_bridge.SiteEditorLabels> | undefined;
+    }) | undefined;
+    pagePath: ((path: string, locale: string) => string) | undefined;
+    productPath: ((handle: string, locale: string) => string) | undefined;
+    collectionPath: ((handle: string, locale: string) => string) | undefined;
+    url: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+type ContentBridgeState = Pick<ContentBridge$1, 'isEditing' | 'mode' | 'entryId' | 'environment'>;
+declare const useContentBridge: ({ url, }?: BridgeOptions) => ComputedRef<ContentBridgeState>;
+declare const useContentBridgeEvent: <E extends BridgeEvent>(event: E, listener: BridgeListener<E>, { url }?: BridgeOptions) => void;
+declare function useLiveEntry<TEntry extends Entry>(entry: MaybeRefOrGetter<TEntry>, options?: BridgeOptions): ComputedRef<TEntry>;
+declare function useLiveEntry<TEntry extends Entry>(entry: MaybeRefOrGetter<TEntry | null | undefined>, options?: BridgeOptions): ComputedRef<TEntry | null>;
+type ContentPromptState = BridgeState & {
+    available: boolean;
+    mode: ContentBridge$1['mode'];
+    prompt: (prompt: string, options?: {
+        uid?: string | null;
+    }) => Promise<PromptResult>;
+    createPage: (path: string, prompt: string) => Promise<CreatePageResult>;
+    undo: () => void;
+    select: (uid: string | null) => void;
+    save: () => Promise<void>;
+    publish: () => Promise<void>;
+    signOut: () => void;
+    setSelecting: (selecting: boolean) => void;
+};
+declare const useContentPrompt: ({ url, }?: Pick<BridgeOptions, "url">) => ComputedRef<ContentPromptState>;
+
+type RichTextNodeProps = {
+    node: RichTextNode;
+};
+type RichTextMarkProps = {
+    mark: RichTextMark;
+};
+type RichTextEmbeddedEntryProps = {
+    entry: Entry | EntryStub;
+    node: RichTextNode;
+};
+type RichTextEmbeddedAssetProps = {
+    asset: Asset;
+    node: RichTextNode;
+};
+type RichTextComponents = {
+    nodes?: Partial<Record<string, Component<RichTextNodeProps>>> | undefined;
+    marks?: Partial<Record<string, Component<RichTextMarkProps>>> | undefined;
+    embeddedEntry?: Component<RichTextEmbeddedEntryProps> | undefined;
+    embeddedAsset?: Component<RichTextEmbeddedAssetProps> | undefined;
+};
+type RichTextProps = RichTextComponents & {
+    document: RichTextNode | null | undefined;
+};
+declare const RichText: vue.DefineComponent<vue.ExtractPropTypes<{
+    document: {
+        type: PropType<RichTextNode | null | undefined>;
+        default: null;
+    };
+    nodes: {
+        type: PropType<RichTextComponents["nodes"]>;
+        default: undefined;
+    };
+    marks: {
+        type: PropType<RichTextComponents["marks"]>;
+        default: undefined;
+    };
+    embeddedEntry: {
+        type: PropType<RichTextComponents["embeddedEntry"]>;
+        default: undefined;
+    };
+    embeddedAsset: {
+        type: PropType<RichTextComponents["embeddedAsset"]>;
+        default: undefined;
+    };
+}>, () => VNodeChild, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    document: {
+        type: PropType<RichTextNode | null | undefined>;
+        default: null;
+    };
+    nodes: {
+        type: PropType<RichTextComponents["nodes"]>;
+        default: undefined;
+    };
+    marks: {
+        type: PropType<RichTextComponents["marks"]>;
+        default: undefined;
+    };
+    embeddedEntry: {
+        type: PropType<RichTextComponents["embeddedEntry"]>;
+        default: undefined;
+    };
+    embeddedAsset: {
+        type: PropType<RichTextComponents["embeddedAsset"]>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    nodes: Partial<Record<string, Component<RichTextNodeProps>>> | undefined;
+    marks: Partial<Record<string, Component<RichTextMarkProps>>> | undefined;
+    embeddedEntry: Component<RichTextEmbeddedEntryProps> | undefined;
+    embeddedAsset: Component<RichTextEmbeddedAssetProps> | undefined;
+    document: RichTextNode | null | undefined;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { ContentBridge, RichText, useContentBridge, useContentBridgeEvent, useContentPrompt, useLiveEntry };
+export type { ContentBridgeProps, ContentBridgeState, ContentPromptState, RichTextComponents, RichTextEmbeddedAssetProps, RichTextEmbeddedEntryProps, RichTextMarkProps, RichTextNodeProps, RichTextProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

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

package/dist/index.js

@@ -0,0 +1,347 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var bridge = require('@obelism/content/bridge');
+var content = require('@obelism/content');
+
+const noop = ()=>{};
+// Started after mount, never during setup, so it is null on the server and
+// while hydrating, and markup matches. Call the composables in `setup`.
+const useBridge = (options)=>{
+    const bridge$1 = vue.shallowRef(null);
+    vue.onMounted(()=>{
+        bridge$1.value = bridge.getContentBridge(options);
+    });
+    return bridge$1;
+};
+// Starts the visual editor bridge. Put it in the root (`app.vue` or a
+// layout), so clicking a block selects it in the editor on every page, also
+// those without `useLiveEntry`, and editors get the prompt box
+// (`:prompt="false"` leaves it out). Renders nothing, and does nothing
+// outside the editor. Its options apply when it is the first to start the
+// bridge, which in the root it is.
+const ContentBridge = vue.defineComponent({
+    name: 'ContentBridge',
+    props: {
+        url: {
+            type: String,
+            default: undefined
+        },
+        prompt: {
+            type: [
+                Boolean,
+                Object
+            ],
+            default: undefined
+        },
+        pagePath: {
+            type: Function,
+            default: undefined
+        },
+        productPath: {
+            type: Function,
+            default: undefined
+        },
+        collectionPath: {
+            type: Function,
+            default: undefined
+        }
+    },
+    setup (props) {
+        useBridge({
+            url: props.url,
+            prompt: props.prompt,
+            pagePath: props.pagePath,
+            productPath: props.productPath,
+            collectionPath: props.collectionPath
+        });
+        return ()=>null;
+    }
+});
+const NOT_EDITING = {
+    isEditing: false,
+    mode: null,
+    entryId: null,
+    environment: null
+};
+// Whether the page is open in the visual editor (or signed in to edit on the
+// site), and on which entry. Always "not editing" during server rendering
+// and hydration; the real state follows right after.
+const useContentBridge = ({ url } = {})=>{
+    const bridge = useBridge({
+        url
+    });
+    return vue.computed(()=>{
+        const current = bridge.value;
+        if (!current?.isEditing) return NOT_EDITING;
+        const { isEditing, mode, entryId, environment } = current;
+        return {
+            isEditing,
+            mode,
+            entryId,
+            environment
+        };
+    });
+};
+// Calls `listener` on a bridge event, e.g. to refetch server data once the
+// editor saved or published:
+//
+//   const { refresh } = await useAsyncData(…)
+//   useContentBridgeEvent('saved', () => refresh())
+const useContentBridgeEvent = (event, listener, { url } = {})=>{
+    const bridge = useBridge({
+        url
+    });
+    vue.watch(bridge, (current, _previous, onCleanup)=>{
+        if (current) onCleanup(current.on(event, listener));
+    }, {
+        immediate: true
+    });
+};
+function useLiveEntry(entry, { url } = {}) {
+    const bridge = useBridge({
+        url
+    });
+    const live = vue.shallowRef(null);
+    const id = vue.computed(()=>vue.toValue(entry)?.id);
+    vue.watch([
+        bridge,
+        id
+    ], ([current, currentId], _previous, onCleanup)=>{
+        if (!current || !currentId) return;
+        onCleanup(current.on('update', ({ entry: next })=>{
+            if (next.id === currentId) live.value = next;
+        }));
+    }, {
+        immediate: true
+    });
+    // A live version only stands in for the entry it was sent for.
+    return vue.computed(()=>{
+        const current = vue.toValue(entry);
+        if (live.value && live.value.id === current?.id) return live.value;
+        return current ?? null;
+    });
+}
+const notStarted = ()=>Promise.reject(new Error('Prompts only work inside the visual editor'));
+const notOnSite = ()=>Promise.reject(new Error('Only while signed in to edit on the site'));
+// For your own prompt UI instead of the built-in box (render
+// `<ContentBridge :prompt="false" />`):
+//
+//   const prompt = useContentPrompt()
+//   // <button v-if="prompt.available" @click="prompt.prompt('Make it shorter')">
+const useContentPrompt = ({ url } = {})=>{
+    const bridge$1 = useBridge({
+        url
+    });
+    const state = vue.shallowRef(bridge.INITIAL_STATE);
+    vue.watch(bridge$1, (current, _previous, onCleanup)=>{
+        if (!current) return;
+        state.value = current.getState();
+        onCleanup(current.on('change', ()=>{
+            state.value = current.getState();
+        }));
+    }, {
+        immediate: true
+    });
+    return vue.computed(()=>{
+        const current = bridge$1.value;
+        return {
+            ...state.value,
+            available: state.value.features.includes('prompt'),
+            mode: current?.mode ?? null,
+            prompt: current ? current.prompt : notStarted,
+            createPage: current ? current.createPage : notOnSite,
+            undo: current ? current.undo : noop,
+            select: current ? current.select : noop,
+            save: current ? current.save : notOnSite,
+            publish: current ? current.publish : notOnSite,
+            signOut: current ? current.signOut : noop,
+            setSelecting: current ? current.setSelecting : noop
+        };
+    });
+};
+
+const defaultAsset = (asset)=>{
+    if (asset.mimeType.startsWith('image/')) {
+        return vue.h('figure', [
+            vue.h('img', {
+                src: asset.url,
+                alt: typeof asset.alt === 'string' ? asset.alt : '',
+                width: asset.width ?? undefined,
+                height: asset.height ?? undefined
+            })
+        ]);
+    }
+    return vue.h('p', [
+        vue.h('a', {
+            href: asset.url
+        }, asset.filename)
+    ]);
+};
+const renderMark = (mark, children, marks)=>{
+    const Custom = marks?.[mark.type];
+    if (Custom) return vue.h(Custom, {
+        mark
+    }, {
+        default: ()=>children
+    });
+    switch(mark.type){
+        case 'bold':
+            return vue.h('strong', [
+                children
+            ]);
+        case 'italic':
+            return vue.h('em', [
+                children
+            ]);
+        case 'underline':
+            return vue.h('u', [
+                children
+            ]);
+        case 'strike':
+            return vue.h('s', [
+                children
+            ]);
+        case 'code':
+            return vue.h('code', [
+                children
+            ]);
+        case 'link':
+            {
+                const href = String(mark.attrs?.href ?? '');
+                if (!content.SAFE_HREF.test(href)) return children;
+                const blank = mark.attrs?.target === '_blank';
+                return vue.h('a', {
+                    href,
+                    title: mark.attrs?.title ? String(mark.attrs.title) : undefined,
+                    target: blank ? '_blank' : undefined,
+                    rel: blank ? 'noopener noreferrer' : undefined
+                }, [
+                    children
+                ]);
+            }
+        default:
+            return children;
+    }
+};
+// Renders a rich text document as Vue elements: no HTML strings, links
+// limited to safe schemes, and every node, mark and embed overridable.
+//
+//   <RichText
+//     :document="entry.fields.body"
+//     :embedded-entry="Card"
+//     :nodes="{ heading: Heading }"
+//   />
+const RichText = vue.defineComponent({
+    name: 'RichText',
+    props: {
+        document: {
+            type: Object,
+            default: null
+        },
+        nodes: {
+            type: Object,
+            default: undefined
+        },
+        marks: {
+            type: Object,
+            default: undefined
+        },
+        embeddedEntry: {
+            type: [
+                Object,
+                Function
+            ],
+            default: undefined
+        },
+        embeddedAsset: {
+            type: [
+                Object,
+                Function
+            ],
+            default: undefined
+        }
+    },
+    setup (props) {
+        const render = (node)=>{
+            if (node.type === 'text') {
+                return (node.marks ?? []).reduceRight((inner, mark)=>renderMark(mark, inner, props.marks), node.text ?? '');
+            }
+            const children = node.content && node.content.length > 0 ? node.content.map(render).filter((child)=>child != null) : undefined;
+            const Custom = props.nodes?.[node.type];
+            if (Custom) {
+                return vue.h(Custom, {
+                    node
+                }, children ? {
+                    default: ()=>children
+                } : undefined);
+            }
+            switch(node.type){
+                case 'doc':
+                    return children ?? null;
+                case 'paragraph':
+                    return vue.h('p', children);
+                case 'heading':
+                    return vue.h(`h${content.headingLevel(node)}`, children);
+                case 'blockquote':
+                    return vue.h('blockquote', children);
+                case 'bulletList':
+                    return vue.h('ul', children);
+                case 'orderedList':
+                    {
+                        const start = Number(node.attrs?.start ?? 1);
+                        return vue.h('ol', {
+                            start: start !== 1 ? start : undefined
+                        }, children);
+                    }
+                case 'listItem':
+                    return vue.h('li', children);
+                case 'codeBlock':
+                    {
+                        const language = node.attrs?.language;
+                        return vue.h('pre', [
+                            vue.h('code', {
+                                class: language ? `language-${String(language)}` : undefined
+                            }, children)
+                        ]);
+                    }
+                case 'hardBreak':
+                    return vue.h('br');
+                case 'horizontalRule':
+                    return vue.h('hr');
+                case 'embeddedEntry':
+                    {
+                        const entry = node.attrs?.entry;
+                        if (!entry || !props.embeddedEntry) return null;
+                        return vue.h(props.embeddedEntry, {
+                            entry,
+                            node
+                        });
+                    }
+                case 'embeddedAsset':
+                    {
+                        const asset = node.attrs?.asset;
+                        if (!asset) return null;
+                        return props.embeddedAsset ? vue.h(props.embeddedAsset, {
+                            asset,
+                            node
+                        }) : defaultAsset(asset);
+                    }
+                default:
+                    return null;
+            }
+        };
+        return ()=>props.document ? render(props.document) : null;
+    }
+});
+
+Object.defineProperty(exports, "editable", {
+	enumerable: true,
+	get: function () { return content.editable; }
+});
+exports.ContentBridge = ContentBridge;
+exports.RichText = RichText;
+exports.useContentBridge = useContentBridge;
+exports.useContentBridgeEvent = useContentBridgeEvent;
+exports.useContentPrompt = useContentPrompt;
+exports.useLiveEntry = useLiveEntry;

package/dist/index.mjs

@@ -0,0 +1,337 @@
+import { defineComponent, shallowRef, onMounted, computed, watch, toValue, h } from 'vue';
+import { getContentBridge, INITIAL_STATE } from '@obelism/content/bridge';
+import { headingLevel, SAFE_HREF } from '@obelism/content';
+export { editable } from '@obelism/content';
+
+const noop = ()=>{};
+// Started after mount, never during setup, so it is null on the server and
+// while hydrating, and markup matches. Call the composables in `setup`.
+const useBridge = (options)=>{
+    const bridge = shallowRef(null);
+    onMounted(()=>{
+        bridge.value = getContentBridge(options);
+    });
+    return bridge;
+};
+// Starts the visual editor bridge. Put it in the root (`app.vue` or a
+// layout), so clicking a block selects it in the editor on every page, also
+// those without `useLiveEntry`, and editors get the prompt box
+// (`:prompt="false"` leaves it out). Renders nothing, and does nothing
+// outside the editor. Its options apply when it is the first to start the
+// bridge, which in the root it is.
+const ContentBridge = defineComponent({
+    name: 'ContentBridge',
+    props: {
+        url: {
+            type: String,
+            default: undefined
+        },
+        prompt: {
+            type: [
+                Boolean,
+                Object
+            ],
+            default: undefined
+        },
+        pagePath: {
+            type: Function,
+            default: undefined
+        },
+        productPath: {
+            type: Function,
+            default: undefined
+        },
+        collectionPath: {
+            type: Function,
+            default: undefined
+        }
+    },
+    setup (props) {
+        useBridge({
+            url: props.url,
+            prompt: props.prompt,
+            pagePath: props.pagePath,
+            productPath: props.productPath,
+            collectionPath: props.collectionPath
+        });
+        return ()=>null;
+    }
+});
+const NOT_EDITING = {
+    isEditing: false,
+    mode: null,
+    entryId: null,
+    environment: null
+};
+// Whether the page is open in the visual editor (or signed in to edit on the
+// site), and on which entry. Always "not editing" during server rendering
+// and hydration; the real state follows right after.
+const useContentBridge = ({ url } = {})=>{
+    const bridge = useBridge({
+        url
+    });
+    return computed(()=>{
+        const current = bridge.value;
+        if (!current?.isEditing) return NOT_EDITING;
+        const { isEditing, mode, entryId, environment } = current;
+        return {
+            isEditing,
+            mode,
+            entryId,
+            environment
+        };
+    });
+};
+// Calls `listener` on a bridge event, e.g. to refetch server data once the
+// editor saved or published:
+//
+//   const { refresh } = await useAsyncData(…)
+//   useContentBridgeEvent('saved', () => refresh())
+const useContentBridgeEvent = (event, listener, { url } = {})=>{
+    const bridge = useBridge({
+        url
+    });
+    watch(bridge, (current, _previous, onCleanup)=>{
+        if (current) onCleanup(current.on(event, listener));
+    }, {
+        immediate: true
+    });
+};
+function useLiveEntry(entry, { url } = {}) {
+    const bridge = useBridge({
+        url
+    });
+    const live = shallowRef(null);
+    const id = computed(()=>toValue(entry)?.id);
+    watch([
+        bridge,
+        id
+    ], ([current, currentId], _previous, onCleanup)=>{
+        if (!current || !currentId) return;
+        onCleanup(current.on('update', ({ entry: next })=>{
+            if (next.id === currentId) live.value = next;
+        }));
+    }, {
+        immediate: true
+    });
+    // A live version only stands in for the entry it was sent for.
+    return computed(()=>{
+        const current = toValue(entry);
+        if (live.value && live.value.id === current?.id) return live.value;
+        return current ?? null;
+    });
+}
+const notStarted = ()=>Promise.reject(new Error('Prompts only work inside the visual editor'));
+const notOnSite = ()=>Promise.reject(new Error('Only while signed in to edit on the site'));
+// For your own prompt UI instead of the built-in box (render
+// `<ContentBridge :prompt="false" />`):
+//
+//   const prompt = useContentPrompt()
+//   // <button v-if="prompt.available" @click="prompt.prompt('Make it shorter')">
+const useContentPrompt = ({ url } = {})=>{
+    const bridge = useBridge({
+        url
+    });
+    const state = shallowRef(INITIAL_STATE);
+    watch(bridge, (current, _previous, onCleanup)=>{
+        if (!current) return;
+        state.value = current.getState();
+        onCleanup(current.on('change', ()=>{
+            state.value = current.getState();
+        }));
+    }, {
+        immediate: true
+    });
+    return computed(()=>{
+        const current = bridge.value;
+        return {
+            ...state.value,
+            available: state.value.features.includes('prompt'),
+            mode: current?.mode ?? null,
+            prompt: current ? current.prompt : notStarted,
+            createPage: current ? current.createPage : notOnSite,
+            undo: current ? current.undo : noop,
+            select: current ? current.select : noop,
+            save: current ? current.save : notOnSite,
+            publish: current ? current.publish : notOnSite,
+            signOut: current ? current.signOut : noop,
+            setSelecting: current ? current.setSelecting : noop
+        };
+    });
+};
+
+const defaultAsset = (asset)=>{
+    if (asset.mimeType.startsWith('image/')) {
+        return h('figure', [
+            h('img', {
+                src: asset.url,
+                alt: typeof asset.alt === 'string' ? asset.alt : '',
+                width: asset.width ?? undefined,
+                height: asset.height ?? undefined
+            })
+        ]);
+    }
+    return h('p', [
+        h('a', {
+            href: asset.url
+        }, asset.filename)
+    ]);
+};
+const renderMark = (mark, children, marks)=>{
+    const Custom = marks?.[mark.type];
+    if (Custom) return h(Custom, {
+        mark
+    }, {
+        default: ()=>children
+    });
+    switch(mark.type){
+        case 'bold':
+            return h('strong', [
+                children
+            ]);
+        case 'italic':
+            return h('em', [
+                children
+            ]);
+        case 'underline':
+            return h('u', [
+                children
+            ]);
+        case 'strike':
+            return h('s', [
+                children
+            ]);
+        case 'code':
+            return h('code', [
+                children
+            ]);
+        case 'link':
+            {
+                const href = String(mark.attrs?.href ?? '');
+                if (!SAFE_HREF.test(href)) return children;
+                const blank = mark.attrs?.target === '_blank';
+                return h('a', {
+                    href,
+                    title: mark.attrs?.title ? String(mark.attrs.title) : undefined,
+                    target: blank ? '_blank' : undefined,
+                    rel: blank ? 'noopener noreferrer' : undefined
+                }, [
+                    children
+                ]);
+            }
+        default:
+            return children;
+    }
+};
+// Renders a rich text document as Vue elements: no HTML strings, links
+// limited to safe schemes, and every node, mark and embed overridable.
+//
+//   <RichText
+//     :document="entry.fields.body"
+//     :embedded-entry="Card"
+//     :nodes="{ heading: Heading }"
+//   />
+const RichText = defineComponent({
+    name: 'RichText',
+    props: {
+        document: {
+            type: Object,
+            default: null
+        },
+        nodes: {
+            type: Object,
+            default: undefined
+        },
+        marks: {
+            type: Object,
+            default: undefined
+        },
+        embeddedEntry: {
+            type: [
+                Object,
+                Function
+            ],
+            default: undefined
+        },
+        embeddedAsset: {
+            type: [
+                Object,
+                Function
+            ],
+            default: undefined
+        }
+    },
+    setup (props) {
+        const render = (node)=>{
+            if (node.type === 'text') {
+                return (node.marks ?? []).reduceRight((inner, mark)=>renderMark(mark, inner, props.marks), node.text ?? '');
+            }
+            const children = node.content && node.content.length > 0 ? node.content.map(render).filter((child)=>child != null) : undefined;
+            const Custom = props.nodes?.[node.type];
+            if (Custom) {
+                return h(Custom, {
+                    node
+                }, children ? {
+                    default: ()=>children
+                } : undefined);
+            }
+            switch(node.type){
+                case 'doc':
+                    return children ?? null;
+                case 'paragraph':
+                    return h('p', children);
+                case 'heading':
+                    return h(`h${headingLevel(node)}`, children);
+                case 'blockquote':
+                    return h('blockquote', children);
+                case 'bulletList':
+                    return h('ul', children);
+                case 'orderedList':
+                    {
+                        const start = Number(node.attrs?.start ?? 1);
+                        return h('ol', {
+                            start: start !== 1 ? start : undefined
+                        }, children);
+                    }
+                case 'listItem':
+                    return h('li', children);
+                case 'codeBlock':
+                    {
+                        const language = node.attrs?.language;
+                        return h('pre', [
+                            h('code', {
+                                class: language ? `language-${String(language)}` : undefined
+                            }, children)
+                        ]);
+                    }
+                case 'hardBreak':
+                    return h('br');
+                case 'horizontalRule':
+                    return h('hr');
+                case 'embeddedEntry':
+                    {
+                        const entry = node.attrs?.entry;
+                        if (!entry || !props.embeddedEntry) return null;
+                        return h(props.embeddedEntry, {
+                            entry,
+                            node
+                        });
+                    }
+                case 'embeddedAsset':
+                    {
+                        const asset = node.attrs?.asset;
+                        if (!asset) return null;
+                        return props.embeddedAsset ? h(props.embeddedAsset, {
+                            asset,
+                            node
+                        }) : defaultAsset(asset);
+                    }
+                default:
+                    return null;
+            }
+        };
+        return ()=>props.document ? render(props.document) : null;
+    }
+});
+
+export { ContentBridge, RichText, useContentBridge, useContentBridgeEvent, useContentPrompt, useLiveEntry };

package/package.json

@@ -1,6 +1,64 @@
 {
-  "name": "@obelism/content-vue",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+	"name": "@obelism/content-vue",
+	"description": "Obelism Content Vue SDK: live preview in the visual editor and rich text, for Vue and Nuxt",
+	"version": "0.1.1",
+	"keywords": [
+		"cms",
+		"headless-cms",
+		"visual-editor",
+		"typescript",
+		"obelism",
+		"vue",
+		"nuxt"
+	],
+	"license": "MIT",
+	"author": "Obelism <hello@obelism.studio> (https://www.obelism.studio)",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/Obelism/sdk",
+		"directory": "packages/content-vue"
+	},
+	"sideEffects": false,
+	"files": [
+		"dist"
+	],
+	"exports": {
+		"import": {
+			"types": "./dist/index.d.mts",
+			"default": "./dist/index.mjs"
+		},
+		"require": {
+			"types": "./dist/index.d.ts",
+			"default": "./dist/index.js"
+		}
+	},
+	"scripts": {
+		"build": "bunchee",
+		"dev": "bunchee --watch --no-clean",
+		"test": "vitest",
+		"test:coverage": "vitest run --coverage",
+		"test:ci": "vitest run",
+		"lint": "npm-run-all --parallel lint:*",
+		"lint:oxlint": "oxlint",
+		"lint:types": "tsc --noEmit",
+		"clean": "rm -rf ./node_modules && rm -rf ./dist && rm -rf ./.turbo"
+	},
+	"peerDependencies": {
+		"vue": ">=3.3.0"
+	},
+	"dependencies": {
+		"@obelism/content": "^0.30.0"
+	},
+	"devDependencies": {
+		"@obelism/sdk-typescript-config": "^0.0.0",
+		"@typescript/typescript6": "^6.0.2",
+		"@vue/test-utils": "^2.5.1",
+		"bunchee": "^7.0.2",
+		"jsdom": "^30.1.3",
+		"npm-run-all2": "^9.0.4",
+		"oxlint": "^1.91.0",
+		"typescript": "^7.0.2",
+		"vitest": "^5.1.0",
+		"vue": "^3.5.45"
+	}
+}