@obelism/content-react 0.0.0-stage → 0.1.0

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,55 @@
-# Temporary Holding Version
+# Obelism Content React 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.
+```bash
+npm i @obelism/content @obelism/content-react
+```
+
+## Live preview
+
+```tsx
+// app/layout.tsx: starts the bridge, so blocks are selectable on every page
+;<ContentBridge />
+
+// A client component rendering an entry
+;('use client')
+import { editable, useLiveEntry } from '@obelism/content-react'
+
+export const Page = ({ entry }) => {
+	const { fields } = useLiveEntry(entry) // the editor's unsaved version while editing
+	return fields.body.map((block) => (
+		<section key={block._uid} {...editable(block)}>
+			…
+		</section>
+	))
+}
+```
+
+- `useLiveEntry(entry, { url? })`: `entry`, or the editor's live version of it.
+- `useContentBridge()`: `{ isEditing, entryId, environment }`, after hydration.
+- `useContentBridgeEvent('saved' | 'published' | 'update', listener)`, e.g.
+  `router.refresh()` on publish.
+- `<ContentBridge url? prompt? />`: pass `url` only when not on content.obelism.studio.
+
+## Prompt editing
+
+`<ContentBridge />` shows editors a prompt box inside the visual editor (see
+`@obelism/content`). `<ContentBridge prompt={false} />` leaves it out;
+`useContentPrompt()` gives `{ available, prompting, canUndo, selectedUid,
+prompt, undo, select }` for your own UI.
+
+## Rich text
+
+```tsx
+<RichText
+	document={entry.fields.body}
+	embeddedEntry={({ entry }) => <Card entry={entry} />}
+	nodes={{ heading: ({ node, children }) => <h2>{children}</h2> }}
+	marks={{
+		link: ({ mark, children }) => (
+			<Link href={mark.attrs.href}>{children}</Link>
+		),
+	}}
+/>
+```
+
+Works in server components too (it isn't a client component).

package/dist/bridge-ca5685t4.js

@@ -0,0 +1,131 @@
+'use client';
+var react = require('react');
+var bridge = require('@obelism/content/bridge');
+
+const noop = ()=>{};
+// The page's bridge, as a React external store: subscribing starts it (after
+// mount, never during render), so it is null on the server, while hydrating,
+// and until then.
+const useBridge = (options)=>{
+    const startWith = react.useRef(options);
+    const { url } = options;
+    const subscribe = react.useCallback((onChange)=>{
+        bridge.getContentBridge({
+            ...startWith.current,
+            url
+        });
+        onChange();
+        return noop;
+    }, [
+        url
+    ]);
+    return react.useSyncExternalStore(subscribe, bridge.peekContentBridge, ()=>null);
+};
+// Starts the visual editor bridge. Put it in the root 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 a root layout it
+// is.
+const ContentBridge = ({ url, prompt })=>{
+    useBridge({
+        url,
+        prompt
+    });
+    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, so markup matches;
+// the real state follows right after.
+const useContentBridge = ({ url } = {})=>{
+    const bridge = useBridge({
+        url
+    });
+    if (!bridge?.isEditing) return NOT_EDITING;
+    const { isEditing, mode, entryId, environment } = bridge;
+    return {
+        isEditing,
+        mode,
+        entryId,
+        environment
+    };
+};
+// Calls `listener` on a bridge event, e.g. to refetch server data once the
+// editor saved or published:
+//
+//   const router = useRouter()
+//   useContentBridgeEvent('saved', () => router.refresh())
+const useContentBridgeEvent = (event, listener, { url } = {})=>{
+    const bridge = useBridge({
+        url
+    });
+    const latest = react.useRef(listener);
+    react.useEffect(()=>{
+        latest.current = listener;
+    });
+    react.useEffect(()=>bridge?.on(event, (payload)=>latest.current(payload)), [
+        bridge,
+        event
+    ]);
+};
+function useLiveEntry(entry, { url } = {}) {
+    const bridge = useBridge({
+        url
+    });
+    const [live, setLive] = react.useState(null);
+    const id = entry?.id;
+    react.useEffect(()=>{
+        if (!id || !bridge) return;
+        return bridge.on('update', ({ entry: next })=>{
+            if (next.id === id) setLive(next);
+        });
+    }, [
+        bridge,
+        id
+    ]);
+    // A live version only stands in for the entry it was sent for.
+    if (live && live.id === id) return live;
+    return entry ?? 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 { available, prompting, prompt } = useContentPrompt()
+//   if (!available) return null
+//   … <button onClick={() => prompt('Make it shorter')}>
+const useContentPrompt = ({ url } = {})=>{
+    const bridge$1 = useBridge({
+        url
+    });
+    const subscribe = react.useCallback((onChange)=>bridge$1 ? bridge$1.on('change', onChange) : noop, [
+        bridge$1
+    ]);
+    const state = react.useSyncExternalStore(subscribe, ()=>bridge$1?.getState() ?? bridge.INITIAL_STATE, ()=>bridge.INITIAL_STATE);
+    return {
+        ...state,
+        available: state.features.includes('prompt'),
+        mode: bridge$1?.mode ?? null,
+        prompt: bridge$1 ? bridge$1.prompt : notStarted,
+        undo: bridge$1 ? bridge$1.undo : noop,
+        select: bridge$1 ? bridge$1.select : noop,
+        save: bridge$1 ? bridge$1.save : notOnSite,
+        publish: bridge$1 ? bridge$1.publish : notOnSite,
+        signOut: bridge$1 ? bridge$1.signOut : noop,
+        setSelecting: bridge$1 ? bridge$1.setSelecting : noop
+    };
+};
+
+exports.ContentBridge = ContentBridge;
+exports.useContentBridge = useContentBridge;
+exports.useContentBridgeEvent = useContentBridgeEvent;
+exports.useContentPrompt = useContentPrompt;
+exports.useLiveEntry = useLiveEntry;

package/dist/bridge-opx0v5j0.mjs

@@ -0,0 +1,127 @@
+'use client';
+import { useRef, useEffect, useState, useCallback, useSyncExternalStore } from 'react';
+import { INITIAL_STATE, getContentBridge, peekContentBridge } from '@obelism/content/bridge';
+
+const noop = ()=>{};
+// The page's bridge, as a React external store: subscribing starts it (after
+// mount, never during render), so it is null on the server, while hydrating,
+// and until then.
+const useBridge = (options)=>{
+    const startWith = useRef(options);
+    const { url } = options;
+    const subscribe = useCallback((onChange)=>{
+        getContentBridge({
+            ...startWith.current,
+            url
+        });
+        onChange();
+        return noop;
+    }, [
+        url
+    ]);
+    return useSyncExternalStore(subscribe, peekContentBridge, ()=>null);
+};
+// Starts the visual editor bridge. Put it in the root 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 a root layout it
+// is.
+const ContentBridge = ({ url, prompt })=>{
+    useBridge({
+        url,
+        prompt
+    });
+    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, so markup matches;
+// the real state follows right after.
+const useContentBridge = ({ url } = {})=>{
+    const bridge = useBridge({
+        url
+    });
+    if (!bridge?.isEditing) return NOT_EDITING;
+    const { isEditing, mode, entryId, environment } = bridge;
+    return {
+        isEditing,
+        mode,
+        entryId,
+        environment
+    };
+};
+// Calls `listener` on a bridge event, e.g. to refetch server data once the
+// editor saved or published:
+//
+//   const router = useRouter()
+//   useContentBridgeEvent('saved', () => router.refresh())
+const useContentBridgeEvent = (event, listener, { url } = {})=>{
+    const bridge = useBridge({
+        url
+    });
+    const latest = useRef(listener);
+    useEffect(()=>{
+        latest.current = listener;
+    });
+    useEffect(()=>bridge?.on(event, (payload)=>latest.current(payload)), [
+        bridge,
+        event
+    ]);
+};
+function useLiveEntry(entry, { url } = {}) {
+    const bridge = useBridge({
+        url
+    });
+    const [live, setLive] = useState(null);
+    const id = entry?.id;
+    useEffect(()=>{
+        if (!id || !bridge) return;
+        return bridge.on('update', ({ entry: next })=>{
+            if (next.id === id) setLive(next);
+        });
+    }, [
+        bridge,
+        id
+    ]);
+    // A live version only stands in for the entry it was sent for.
+    if (live && live.id === id) return live;
+    return entry ?? 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 { available, prompting, prompt } = useContentPrompt()
+//   if (!available) return null
+//   … <button onClick={() => prompt('Make it shorter')}>
+const useContentPrompt = ({ url } = {})=>{
+    const bridge = useBridge({
+        url
+    });
+    const subscribe = useCallback((onChange)=>bridge ? bridge.on('change', onChange) : noop, [
+        bridge
+    ]);
+    const state = useSyncExternalStore(subscribe, ()=>bridge?.getState() ?? INITIAL_STATE, ()=>INITIAL_STATE);
+    return {
+        ...state,
+        available: state.features.includes('prompt'),
+        mode: bridge?.mode ?? null,
+        prompt: bridge ? bridge.prompt : notStarted,
+        undo: bridge ? bridge.undo : noop,
+        select: bridge ? bridge.select : noop,
+        save: bridge ? bridge.save : notOnSite,
+        publish: bridge ? bridge.publish : notOnSite,
+        signOut: bridge ? bridge.signOut : noop,
+        setSelecting: bridge ? bridge.setSelecting : noop
+    };
+};
+
+export { ContentBridge as C, useContentBridgeEvent as a, useContentPrompt as b, useLiveEntry as c, useContentBridge as u };

package/dist/index.d.mts

@@ -0,0 +1,57 @@
+import { BridgeOptions, ContentBridge as ContentBridge$1, BridgeState, PromptResult, BridgeEvent, BridgeListener } from '@obelism/content/bridge';
+export { BridgeEvent, BridgeEvents, BridgeOptions, BridgeState, PromptBoxOptions, PromptLabels, PromptResult } from '@obelism/content/bridge';
+import { Entry, RichTextNode, RichTextMark, EntryStub, Asset } from '@obelism/content';
+export { Asset, Block, Entry, EntryStub, RichTextDocument, RichTextNode, editable } from '@obelism/content';
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type ContentBridgeProps = BridgeOptions;
+declare const ContentBridge: ({ url, prompt }: ContentBridgeProps) => null;
+type ContentBridgeState = Pick<ContentBridge$1, 'isEditing' | 'mode' | 'entryId' | 'environment'>;
+declare const useContentBridge: ({ url, }?: BridgeOptions) => ContentBridgeState;
+declare const useContentBridgeEvent: <E extends BridgeEvent>(event: E, listener: BridgeListener<E>, { url }?: BridgeOptions) => void;
+declare function useLiveEntry<TEntry extends Entry>(entry: TEntry, options?: BridgeOptions): TEntry;
+declare function useLiveEntry<TEntry extends Entry>(entry: TEntry | null | undefined, options?: BridgeOptions): TEntry | null;
+type ContentPromptState = BridgeState & {
+    available: boolean;
+    mode: ContentBridge$1['mode'];
+    prompt: (prompt: string, options?: {
+        uid?: string | null;
+    }) => Promise<PromptResult>;
+    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">) => ContentPromptState;
+
+type RichTextNodeProps = {
+    node: RichTextNode;
+    children?: ReactNode;
+};
+type RichTextMarkProps = {
+    mark: RichTextMark;
+    children?: ReactNode;
+};
+type RichTextComponents = {
+    nodes?: Partial<Record<string, (props: RichTextNodeProps) => ReactNode>>;
+    marks?: Partial<Record<string, (props: RichTextMarkProps) => ReactNode>>;
+    embeddedEntry?: (props: {
+        entry: Entry | EntryStub;
+        node: RichTextNode;
+    }) => ReactNode;
+    embeddedAsset?: (props: {
+        asset: Asset;
+        node: RichTextNode;
+    }) => ReactNode;
+};
+type RichTextProps = RichTextComponents & {
+    document: RichTextNode | null | undefined;
+};
+declare const RichText: ({ document, nodes, marks, embeddedEntry, embeddedAsset: EmbeddedAsset, }: RichTextProps) => react.JSX.Element | null;
+
+export { ContentBridge, RichText, useContentBridge, useContentBridgeEvent, useContentPrompt, useLiveEntry };
+export type { ContentBridgeProps, ContentBridgeState, ContentPromptState, RichTextComponents, 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.tsx"],"mappings":";;;;;;;AAEA,KAAK,kBAAkB,GAAG,aAAa;AACvC,cAAc,aAAa,oBAAoB,kBAAkB;AACjE,KAAK,kBAAkB,GAAG,IAAI,CAACA,eAAM;AACrC,cAAc,gBAAgB,cAAc,aAAa,KAAK,kBAAkB;AAChF,cAAc,qBAAqB,aAAa,WAAW,sBAAsB,cAAc,eAAe,aAAa;AAC3H,iBAAiB,YAAY,gBAAgB,KAAK,2BAA2B,aAAa;AAC1F,iBAAiB,YAAY,gBAAgB,KAAK,8CAA8C,aAAa;AAC7G,KAAK,kBAAkB,GAAG,WAAW;AACrC;AACA,UAAUA,eAAM;AAChB;AACA;AACA,UAAU,OAAO,CAAC,YAAY;AAC9B;AACA;AACA,gBAAgB,OAAO;AACvB,mBAAmB,OAAO;AAC1B;AACA;AACA;AACA,cAAc,gBAAgB,cAAc,IAAI,CAAC,aAAa,aAAa,kBAAkB;;ACnB7F,KAAK,iBAAiB;AACtB,UAAU,YAAY;AACtB,eAAe,SAAS;AACxB;AACA,KAAK,iBAAiB;AACtB,UAAU,YAAY;AACtB,eAAe,SAAS;AACxB;AACA,KAAK,kBAAkB;AACvB,YAAY,OAAO,CAAC,MAAM,iBAAiB,iBAAiB,KAAK,SAAS;AAC1E,YAAY,OAAO,CAAC,MAAM,iBAAiB,iBAAiB,KAAK,SAAS;AAC1E;AACA,eAAe,KAAK,GAAG,SAAS;AAChC,cAAc,YAAY;AAC1B,UAAU,SAAS;AACnB;AACA,eAAe,KAAK;AACpB,cAAc,YAAY;AAC1B,UAAU,SAAS;AACnB;AACA,KAAK,aAAa,GAAG,kBAAkB;AACvC,cAAc,YAAY;AAC1B;AACA,cAAc,QAAQ,6EAA6E,aAAa,KAAK,KAAK,CAAC,GAAG,CAAC,OAAO;;","names":["Bridge"]}

package/dist/index.d.ts

@@ -0,0 +1,57 @@
+import { BridgeOptions, ContentBridge as ContentBridge$1, BridgeState, PromptResult, BridgeEvent, BridgeListener } from '@obelism/content/bridge';
+export { BridgeEvent, BridgeEvents, BridgeOptions, BridgeState, PromptBoxOptions, PromptLabels, PromptResult } from '@obelism/content/bridge';
+import { Entry, RichTextNode, RichTextMark, EntryStub, Asset } from '@obelism/content';
+export { Asset, Block, Entry, EntryStub, RichTextDocument, RichTextNode, editable } from '@obelism/content';
+import * as react from 'react';
+import { ReactNode } from 'react';
+
+type ContentBridgeProps = BridgeOptions;
+declare const ContentBridge: ({ url, prompt }: ContentBridgeProps) => null;
+type ContentBridgeState = Pick<ContentBridge$1, 'isEditing' | 'mode' | 'entryId' | 'environment'>;
+declare const useContentBridge: ({ url, }?: BridgeOptions) => ContentBridgeState;
+declare const useContentBridgeEvent: <E extends BridgeEvent>(event: E, listener: BridgeListener<E>, { url }?: BridgeOptions) => void;
+declare function useLiveEntry<TEntry extends Entry>(entry: TEntry, options?: BridgeOptions): TEntry;
+declare function useLiveEntry<TEntry extends Entry>(entry: TEntry | null | undefined, options?: BridgeOptions): TEntry | null;
+type ContentPromptState = BridgeState & {
+    available: boolean;
+    mode: ContentBridge$1['mode'];
+    prompt: (prompt: string, options?: {
+        uid?: string | null;
+    }) => Promise<PromptResult>;
+    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">) => ContentPromptState;
+
+type RichTextNodeProps = {
+    node: RichTextNode;
+    children?: ReactNode;
+};
+type RichTextMarkProps = {
+    mark: RichTextMark;
+    children?: ReactNode;
+};
+type RichTextComponents = {
+    nodes?: Partial<Record<string, (props: RichTextNodeProps) => ReactNode>>;
+    marks?: Partial<Record<string, (props: RichTextMarkProps) => ReactNode>>;
+    embeddedEntry?: (props: {
+        entry: Entry | EntryStub;
+        node: RichTextNode;
+    }) => ReactNode;
+    embeddedAsset?: (props: {
+        asset: Asset;
+        node: RichTextNode;
+    }) => ReactNode;
+};
+type RichTextProps = RichTextComponents & {
+    document: RichTextNode | null | undefined;
+};
+declare const RichText: ({ document, nodes, marks, embeddedEntry, embeddedAsset: EmbeddedAsset, }: RichTextProps) => react.JSX.Element | null;
+
+export { ContentBridge, RichText, useContentBridge, useContentBridgeEvent, useContentPrompt, useLiveEntry };
+export type { ContentBridgeProps, ContentBridgeState, ContentPromptState, RichTextComponents, 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.tsx"],"mappings":";;;;;;;AAEA,KAAK,kBAAkB,GAAG,aAAa;AACvC,cAAc,aAAa,oBAAoB,kBAAkB;AACjE,KAAK,kBAAkB,GAAG,IAAI,CAACA,eAAM;AACrC,cAAc,gBAAgB,cAAc,aAAa,KAAK,kBAAkB;AAChF,cAAc,qBAAqB,aAAa,WAAW,sBAAsB,cAAc,eAAe,aAAa;AAC3H,iBAAiB,YAAY,gBAAgB,KAAK,2BAA2B,aAAa;AAC1F,iBAAiB,YAAY,gBAAgB,KAAK,8CAA8C,aAAa;AAC7G,KAAK,kBAAkB,GAAG,WAAW;AACrC;AACA,UAAUA,eAAM;AAChB;AACA;AACA,UAAU,OAAO,CAAC,YAAY;AAC9B;AACA;AACA,gBAAgB,OAAO;AACvB,mBAAmB,OAAO;AAC1B;AACA;AACA;AACA,cAAc,gBAAgB,cAAc,IAAI,CAAC,aAAa,aAAa,kBAAkB;;ACnB7F,KAAK,iBAAiB;AACtB,UAAU,YAAY;AACtB,eAAe,SAAS;AACxB;AACA,KAAK,iBAAiB;AACtB,UAAU,YAAY;AACtB,eAAe,SAAS;AACxB;AACA,KAAK,kBAAkB;AACvB,YAAY,OAAO,CAAC,MAAM,iBAAiB,iBAAiB,KAAK,SAAS;AAC1E,YAAY,OAAO,CAAC,MAAM,iBAAiB,iBAAiB,KAAK,SAAS;AAC1E;AACA,eAAe,KAAK,GAAG,SAAS;AAChC,cAAc,YAAY;AAC1B,UAAU,SAAS;AACnB;AACA,eAAe,KAAK;AACpB,cAAc,YAAY;AAC1B,UAAU,SAAS;AACnB;AACA,KAAK,aAAa,GAAG,kBAAkB;AACvC,cAAc,YAAY;AAC1B;AACA,cAAc,QAAQ,6EAA6E,aAAa,KAAK,KAAK,CAAC,GAAG,CAAC,OAAO;;","names":["Bridge"]}

package/dist/index.js

@@ -0,0 +1,181 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var bunchee_group_0 = require('./bridge-ca5685t4.js');
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var content = require('@obelism/content');
+
+const DefaultAsset = ({ asset })=>{
+    if (asset.mimeType.startsWith('image/')) {
+        return /*#__PURE__*/ jsxRuntime.jsx("figure", {
+            children: /*#__PURE__*/ jsxRuntime.jsx("img", {
+                src: asset.url,
+                alt: typeof asset.alt === 'string' ? asset.alt : '',
+                width: asset.width ?? undefined,
+                height: asset.height ?? undefined
+            })
+        });
+    }
+    return /*#__PURE__*/ jsxRuntime.jsx("p", {
+        children: /*#__PURE__*/ jsxRuntime.jsx("a", {
+            href: asset.url,
+            children: asset.filename
+        })
+    });
+};
+const renderMark = (mark, children, marks)=>{
+    const Custom = marks?.[mark.type];
+    if (Custom) return /*#__PURE__*/ jsxRuntime.jsx(Custom, {
+        mark: mark,
+        children: children
+    });
+    switch(mark.type){
+        case 'bold':
+            return /*#__PURE__*/ jsxRuntime.jsx("strong", {
+                children: children
+            });
+        case 'italic':
+            return /*#__PURE__*/ jsxRuntime.jsx("em", {
+                children: children
+            });
+        case 'underline':
+            return /*#__PURE__*/ jsxRuntime.jsx("u", {
+                children: children
+            });
+        case 'strike':
+            return /*#__PURE__*/ jsxRuntime.jsx("s", {
+                children: children
+            });
+        case 'code':
+            return /*#__PURE__*/ jsxRuntime.jsx("code", {
+                children: children
+            });
+        case 'link':
+            {
+                const href = String(mark.attrs?.href ?? '');
+                if (!content.SAFE_HREF.test(href)) return children;
+                const blank = mark.attrs?.target === '_blank';
+                return /*#__PURE__*/ jsxRuntime.jsx("a", {
+                    href: href,
+                    title: mark.attrs?.title ? String(mark.attrs.title) : undefined,
+                    target: blank ? '_blank' : undefined,
+                    rel: blank ? 'noopener noreferrer' : undefined,
+                    children: children
+                });
+            }
+        default:
+            return children;
+    }
+};
+// Renders a rich text document as React elements: no HTML strings, links
+// limited to safe schemes, and every node, mark and embed overridable.
+//
+//   <RichText
+//     document={entry.fields.body}
+//     embeddedEntry={({ entry }) => <Card entry={entry} />}
+//   />
+const RichText = ({ document, nodes, marks, embeddedEntry, embeddedAsset: EmbeddedAsset = DefaultAsset })=>{
+    if (!document) return null;
+    const render = (node, key)=>{
+        if (node.type === 'text') {
+            const text = node.text ?? '';
+            return /*#__PURE__*/ jsxRuntime.jsx(react.Fragment, {
+                children: (node.marks ?? []).reduceRight((inner, mark)=>renderMark(mark, inner, marks), text)
+            }, key);
+        }
+        const children = node.content && node.content.length > 0 ? node.content.map((child, index)=>render(child, index)) : undefined;
+        const Custom = nodes?.[node.type];
+        if (Custom) {
+            return /*#__PURE__*/ jsxRuntime.jsx(Custom, {
+                node: node,
+                children: children
+            }, key);
+        }
+        switch(node.type){
+            case 'doc':
+                return /*#__PURE__*/ jsxRuntime.jsx(react.Fragment, {
+                    children: children
+                }, key);
+            case 'paragraph':
+                return /*#__PURE__*/ jsxRuntime.jsx("p", {
+                    children: children
+                }, key);
+            case 'heading':
+                {
+                    const Heading = `h${content.headingLevel(node)}`;
+                    return /*#__PURE__*/ jsxRuntime.jsx(Heading, {
+                        children: children
+                    }, key);
+                }
+            case 'blockquote':
+                return /*#__PURE__*/ jsxRuntime.jsx("blockquote", {
+                    children: children
+                }, key);
+            case 'bulletList':
+                return /*#__PURE__*/ jsxRuntime.jsx("ul", {
+                    children: children
+                }, key);
+            case 'orderedList':
+                {
+                    const start = Number(node.attrs?.start ?? 1);
+                    return /*#__PURE__*/ jsxRuntime.jsx("ol", {
+                        start: start !== 1 ? start : undefined,
+                        children: children
+                    }, key);
+                }
+            case 'listItem':
+                return /*#__PURE__*/ jsxRuntime.jsx("li", {
+                    children: children
+                }, key);
+            case 'codeBlock':
+                {
+                    const language = node.attrs?.language;
+                    return /*#__PURE__*/ jsxRuntime.jsx("pre", {
+                        children: /*#__PURE__*/ jsxRuntime.jsx("code", {
+                            className: language ? `language-${String(language)}` : undefined,
+                            children: children
+                        })
+                    }, key);
+                }
+            case 'hardBreak':
+                return /*#__PURE__*/ jsxRuntime.jsx("br", {}, key);
+            case 'horizontalRule':
+                return /*#__PURE__*/ jsxRuntime.jsx("hr", {}, key);
+            case 'embeddedEntry':
+                {
+                    const entry = node.attrs?.entry;
+                    if (!entry || !embeddedEntry) return null;
+                    const EmbeddedEntry = embeddedEntry;
+                    return /*#__PURE__*/ jsxRuntime.jsx(EmbeddedEntry, {
+                        entry: entry,
+                        node: node
+                    }, key);
+                }
+            case 'embeddedAsset':
+                {
+                    const asset = node.attrs?.asset;
+                    if (!asset) return null;
+                    return /*#__PURE__*/ jsxRuntime.jsx(EmbeddedAsset, {
+                        asset: asset,
+                        node: node
+                    }, key);
+                }
+            default:
+                return null;
+        }
+    };
+    return /*#__PURE__*/ jsxRuntime.jsx(jsxRuntime.Fragment, {
+        children: render(document, 'doc')
+    });
+};
+
+exports.ContentBridge = bunchee_group_0.ContentBridge;
+exports.useContentBridge = bunchee_group_0.useContentBridge;
+exports.useContentBridgeEvent = bunchee_group_0.useContentBridgeEvent;
+exports.useContentPrompt = bunchee_group_0.useContentPrompt;
+exports.useLiveEntry = bunchee_group_0.useLiveEntry;
+Object.defineProperty(exports, "editable", {
+	enumerable: true,
+	get: function () { return content.editable; }
+});
+exports.RichText = RichText;

package/dist/index.mjs

@@ -0,0 +1,171 @@
+export { C as ContentBridge, u as useContentBridge, a as useContentBridgeEvent, b as useContentPrompt, c as useLiveEntry } from './bridge-opx0v5j0.mjs';
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { Fragment as Fragment$1 } from 'react';
+import { headingLevel, SAFE_HREF } from '@obelism/content';
+export { editable } from '@obelism/content';
+
+const DefaultAsset = ({ asset })=>{
+    if (asset.mimeType.startsWith('image/')) {
+        return /*#__PURE__*/ jsx("figure", {
+            children: /*#__PURE__*/ jsx("img", {
+                src: asset.url,
+                alt: typeof asset.alt === 'string' ? asset.alt : '',
+                width: asset.width ?? undefined,
+                height: asset.height ?? undefined
+            })
+        });
+    }
+    return /*#__PURE__*/ jsx("p", {
+        children: /*#__PURE__*/ jsx("a", {
+            href: asset.url,
+            children: asset.filename
+        })
+    });
+};
+const renderMark = (mark, children, marks)=>{
+    const Custom = marks?.[mark.type];
+    if (Custom) return /*#__PURE__*/ jsx(Custom, {
+        mark: mark,
+        children: children
+    });
+    switch(mark.type){
+        case 'bold':
+            return /*#__PURE__*/ jsx("strong", {
+                children: children
+            });
+        case 'italic':
+            return /*#__PURE__*/ jsx("em", {
+                children: children
+            });
+        case 'underline':
+            return /*#__PURE__*/ jsx("u", {
+                children: children
+            });
+        case 'strike':
+            return /*#__PURE__*/ jsx("s", {
+                children: children
+            });
+        case 'code':
+            return /*#__PURE__*/ jsx("code", {
+                children: children
+            });
+        case 'link':
+            {
+                const href = String(mark.attrs?.href ?? '');
+                if (!SAFE_HREF.test(href)) return children;
+                const blank = mark.attrs?.target === '_blank';
+                return /*#__PURE__*/ jsx("a", {
+                    href: href,
+                    title: mark.attrs?.title ? String(mark.attrs.title) : undefined,
+                    target: blank ? '_blank' : undefined,
+                    rel: blank ? 'noopener noreferrer' : undefined,
+                    children: children
+                });
+            }
+        default:
+            return children;
+    }
+};
+// Renders a rich text document as React elements: no HTML strings, links
+// limited to safe schemes, and every node, mark and embed overridable.
+//
+//   <RichText
+//     document={entry.fields.body}
+//     embeddedEntry={({ entry }) => <Card entry={entry} />}
+//   />
+const RichText = ({ document, nodes, marks, embeddedEntry, embeddedAsset: EmbeddedAsset = DefaultAsset })=>{
+    if (!document) return null;
+    const render = (node, key)=>{
+        if (node.type === 'text') {
+            const text = node.text ?? '';
+            return /*#__PURE__*/ jsx(Fragment$1, {
+                children: (node.marks ?? []).reduceRight((inner, mark)=>renderMark(mark, inner, marks), text)
+            }, key);
+        }
+        const children = node.content && node.content.length > 0 ? node.content.map((child, index)=>render(child, index)) : undefined;
+        const Custom = nodes?.[node.type];
+        if (Custom) {
+            return /*#__PURE__*/ jsx(Custom, {
+                node: node,
+                children: children
+            }, key);
+        }
+        switch(node.type){
+            case 'doc':
+                return /*#__PURE__*/ jsx(Fragment$1, {
+                    children: children
+                }, key);
+            case 'paragraph':
+                return /*#__PURE__*/ jsx("p", {
+                    children: children
+                }, key);
+            case 'heading':
+                {
+                    const Heading = `h${headingLevel(node)}`;
+                    return /*#__PURE__*/ jsx(Heading, {
+                        children: children
+                    }, key);
+                }
+            case 'blockquote':
+                return /*#__PURE__*/ jsx("blockquote", {
+                    children: children
+                }, key);
+            case 'bulletList':
+                return /*#__PURE__*/ jsx("ul", {
+                    children: children
+                }, key);
+            case 'orderedList':
+                {
+                    const start = Number(node.attrs?.start ?? 1);
+                    return /*#__PURE__*/ jsx("ol", {
+                        start: start !== 1 ? start : undefined,
+                        children: children
+                    }, key);
+                }
+            case 'listItem':
+                return /*#__PURE__*/ jsx("li", {
+                    children: children
+                }, key);
+            case 'codeBlock':
+                {
+                    const language = node.attrs?.language;
+                    return /*#__PURE__*/ jsx("pre", {
+                        children: /*#__PURE__*/ jsx("code", {
+                            className: language ? `language-${String(language)}` : undefined,
+                            children: children
+                        })
+                    }, key);
+                }
+            case 'hardBreak':
+                return /*#__PURE__*/ jsx("br", {}, key);
+            case 'horizontalRule':
+                return /*#__PURE__*/ jsx("hr", {}, key);
+            case 'embeddedEntry':
+                {
+                    const entry = node.attrs?.entry;
+                    if (!entry || !embeddedEntry) return null;
+                    const EmbeddedEntry = embeddedEntry;
+                    return /*#__PURE__*/ jsx(EmbeddedEntry, {
+                        entry: entry,
+                        node: node
+                    }, key);
+                }
+            case 'embeddedAsset':
+                {
+                    const asset = node.attrs?.asset;
+                    if (!asset) return null;
+                    return /*#__PURE__*/ jsx(EmbeddedAsset, {
+                        asset: asset,
+                        node: node
+                    }, key);
+                }
+            default:
+                return null;
+        }
+    };
+    return /*#__PURE__*/ jsx(Fragment, {
+        children: render(document, 'doc')
+    });
+};
+
+export { RichText };

package/package.json

@@ -1,6 +1,65 @@
 {
-  "name": "@obelism/content-react",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+	"name": "@obelism/content-react",
+	"description": "Obelism Content React SDK: live preview in the visual editor and rich text",
+	"version": "0.1.0",
+	"keywords": [
+		"cms",
+		"headless-cms",
+		"visual-editor",
+		"typescript",
+		"obelism",
+		"react"
+	],
+	"license": "MIT",
+	"author": "Obelism <hello@obelism.studio> (https://www.obelism.studio)",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/Obelism/content-sdk"
+	},
+	"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": {
+		"react": ">=18.0.0"
+	},
+	"dependencies": {
+		"@obelism/content": "^0.1.0"
+	},
+	"devDependencies": {
+		"@obelism/content-typescript-config": "^0.0.0",
+		"@testing-library/react": "^16.3.3",
+		"@types/react": "^19.3.0",
+		"@types/react-dom": "^19.2.4",
+		"@typescript/typescript6": "^6.0.2",
+		"bunchee": "^7.0.2",
+		"jsdom": "^30.1.2",
+		"npm-run-all2": "^9.0.2",
+		"oxlint": "^1.88.0",
+		"react": "^19.3.1",
+		"react-dom": "^19.3.1",
+		"typescript": "^7.0.2",
+		"vitest": "^5.0.4"
+	}
+}