@elytracms/studio 0.0.36 → 0.0.38

package/dist/components/cms/rich-text/insert.d.ts

@@ -0,0 +1,21 @@
+import type { Editor } from '@tiptap/react';
+import type { ComponentNode } from '@elytracms/core/project-graph';
+import type { ComponentManifest } from '@elytracms/core/component-registry';
+import type { AssetsStore } from '../../assets/assets-store';
+/**
+ * Reference-carrying node insertions shared by the toolbar controls and the slash
+ * menu (EC-314). Centralised so both entry points produce byte-identical envelopes
+ * (the shapes `reference-extraction` indexes).
+ */
+/** Insert an `image` node for a project asset (canonical `attrs.ref`, snapshot `src`). */
+export declare function insertAssetImage(editor: Editor, assetId: string, assets: AssetsStore | null): void;
+/** Insert a `componentEmbed` wrapping a fresh ComponentNode built from manifest defaults. */
+export declare function insertComponentEmbed(editor: Editor, manifest: ComponentManifest): void;
+/** A fresh ComponentNode from a manifest's prop defaults (mirrors builder node-factory). */
+export declare function embedNodeFromManifest(manifest: ComponentManifest): ComponentNode;
+/**
+ * The components embeddable in a rich-text field: the field's `allow` list, or every
+ * non-primitive component when open — matching the `blocks` field and the
+ * `validateRichTextEmbeds` leash.
+ */
+export declare function listEmbeddable(allow: string[] | undefined, registered: ComponentManifest[]): ComponentManifest[];

package/dist/components/cms/rich-text/insert.js

@@ -0,0 +1,55 @@
+import { assetNode } from '@elytracms/core/cms-core';
+import { COMPONENT_EMBED_NODE_TYPE } from '@elytracms/core/rich-text';
+import { staticProp } from '@elytracms/core/project-graph';
+import { isPrimitive } from '@elytracms/core/component-registry';
+/**
+ * Reference-carrying node insertions shared by the toolbar controls and the slash
+ * menu (EC-314). Centralised so both entry points produce byte-identical envelopes
+ * (the shapes `reference-extraction` indexes).
+ */
+/** Insert an `image` node for a project asset (canonical `attrs.ref`, snapshot `src`). */
+export function insertAssetImage(editor, assetId, assets) {
+    const record = assets?.assets.find((a) => a.id === assetId);
+    editor
+        .chain()
+        .focus()
+        .insertContent({
+        type: 'image',
+        attrs: { src: record?.url ?? '', alt: record?.alt ?? '', ref: assetNode(assetId) },
+    })
+        .run();
+}
+/** Insert a `componentEmbed` wrapping a fresh ComponentNode built from manifest defaults. */
+export function insertComponentEmbed(editor, manifest) {
+    editor
+        .chain()
+        .focus()
+        .insertContent({ type: COMPONENT_EMBED_NODE_TYPE, attrs: { node: embedNodeFromManifest(manifest) } })
+        .run();
+}
+/** A fresh ComponentNode from a manifest's prop defaults (mirrors builder node-factory). */
+export function embedNodeFromManifest(manifest) {
+    const props = {};
+    for (const [name, spec] of Object.entries(manifest.props)) {
+        if (spec.default !== undefined)
+            props[name] = staticProp(spec.default);
+    }
+    return { id: newEmbedId(), componentId: manifest.id, props };
+}
+/**
+ * The components embeddable in a rich-text field: the field's `allow` list, or every
+ * non-primitive component when open — matching the `blocks` field and the
+ * `validateRichTextEmbeds` leash.
+ */
+export function listEmbeddable(allow, registered) {
+    const permitted = allow && allow.length > 0
+        ? registered.filter((m) => allow.includes(m.id))
+        : registered.filter((m) => !isPrimitive(m.id));
+    return permitted.filter((m) => m.clientRenderable !== false);
+}
+/** A unique id for an embedded node (studio runs in the browser; crypto is present). */
+function newEmbedId() {
+    const uuid = globalThis.crypto?.randomUUID?.();
+    return uuid ? `embed-${uuid}` : `embed-${Math.random().toString(36).slice(2)}`;
+}
+//# sourceMappingURL=insert.js.map

package/dist/components/cms/rich-text/insert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"insert.js","sourceRoot":"","sources":["../../../../src/components/cms/rich-text/insert.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,0BAA0B,CAAA;AACpD,OAAO,EAAE,yBAAyB,EAAE,MAAM,2BAA2B,CAAA;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAA;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,oCAAoC,CAAA;AAIhE;;;;GAIG;AAEH,0FAA0F;AAC1F,MAAM,UAAU,gBAAgB,CAAC,MAAc,EAAE,OAAe,EAAE,MAA0B;IAC1F,MAAM,MAAM,GAAG,MAAM,EAAE,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,KAAK,OAAO,CAAC,CAAA;IAC3D,MAAM;SACH,KAAK,EAAE;SACP,KAAK,EAAE;SACP,aAAa,CAAC;QACb,IAAI,EAAE,OAAO;QACb,KAAK,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,IAAI,EAAE,EAAE,GAAG,EAAE,SAAS,CAAC,OAAO,CAAC,EAAE;KACnF,CAAC;SACD,GAAG,EAAE,CAAA;AACV,CAAC;AAED,6FAA6F;AAC7F,MAAM,UAAU,oBAAoB,CAAC,MAAc,EAAE,QAA2B;IAC9E,MAAM;SACH,KAAK,EAAE;SACP,KAAK,EAAE;SACP,aAAa,CAAC,EAAE,IAAI,EAAE,yBAAyB,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,qBAAqB,CAAC,QAAQ,CAAC,EAAE,EAAE,CAAC;SACpG,GAAG,EAAE,CAAA;AACV,CAAC;AAED,4FAA4F;AAC5F,MAAM,UAAU,qBAAqB,CAAC,QAA2B;IAC/D,MAAM,KAAK,GAA2B,EAAE,CAAA;IACxC,KAAK,MAAM,CAAC,IAAI,EAAE,IAAI,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE,CAAC;QAC1D,IAAI,IAAI,CAAC,OAAO,KAAK,SAAS;YAAE,KAAK,CAAC,IAAI,CAAC,GAAG,UAAU,CAAC,IAAI,CAAC,OAAoB,CAAC,CAAA;IACrF,CAAC;IACD,OAAO,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,WAAW,EAAE,QAAQ,CAAC,EAAE,EAAE,KAAK,EAAE,CAAA;AAC9D,CAAC;AAED;;;;GAIG;AACH,MAAM,UAAU,cAAc,CAC5B,KAA2B,EAC3B,UAA+B;IAE/B,MAAM,SAAS,GACb,KAAK,IAAI,KAAK,CAAC,MAAM,GAAG,CAAC;QACvB,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;QAChD,CAAC,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAA;IAClD,OAAO,SAAS,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,gBAAgB,KAAK,KAAK,CAAC,CAAA;AAC9D,CAAC;AAED,wFAAwF;AACxF,SAAS,UAAU;IACjB,MAAM,IAAI,GAAG,UAAU,CAAC,MAAM,EAAE,UAAU,EAAE,EAAE,CAAA;IAC9C,OAAO,IAAI,CAAC,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,EAAE,CAAA;AAChF,CAAC","sourcesContent":["import type { Editor } from '@tiptap/react'\nimport { assetNode } from '@elytracms/core/cms-core'\nimport { COMPONENT_EMBED_NODE_TYPE } from '@elytracms/core/rich-text'\nimport { staticProp } from '@elytracms/core/project-graph'\nimport type { ComponentNode, JsonValue } from '@elytracms/core/project-graph'\nimport { isPrimitive } from '@elytracms/core/component-registry'\nimport type { ComponentManifest } from '@elytracms/core/component-registry'\nimport type { AssetsStore } from '../../assets/assets-store'\n\n/**\n * Reference-carrying node insertions shared by the toolbar controls and the slash\n * menu (EC-314). Centralised so both entry points produce byte-identical envelopes\n * (the shapes `reference-extraction` indexes).\n */\n\n/** Insert an `image` node for a project asset (canonical `attrs.ref`, snapshot `src`). */\nexport function insertAssetImage(editor: Editor, assetId: string, assets: AssetsStore | null): void {\n  const record = assets?.assets.find((a) => a.id === assetId)\n  editor\n    .chain()\n    .focus()\n    .insertContent({\n      type: 'image',\n      attrs: { src: record?.url ?? '', alt: record?.alt ?? '', ref: assetNode(assetId) },\n    })\n    .run()\n}\n\n/** Insert a `componentEmbed` wrapping a fresh ComponentNode built from manifest defaults. */\nexport function insertComponentEmbed(editor: Editor, manifest: ComponentManifest): void {\n  editor\n    .chain()\n    .focus()\n    .insertContent({ type: COMPONENT_EMBED_NODE_TYPE, attrs: { node: embedNodeFromManifest(manifest) } })\n    .run()\n}\n\n/** A fresh ComponentNode from a manifest's prop defaults (mirrors builder node-factory). */\nexport function embedNodeFromManifest(manifest: ComponentManifest): ComponentNode {\n  const props: ComponentNode['props'] = {}\n  for (const [name, spec] of Object.entries(manifest.props)) {\n    if (spec.default !== undefined) props[name] = staticProp(spec.default as JsonValue)\n  }\n  return { id: newEmbedId(), componentId: manifest.id, props }\n}\n\n/**\n * The components embeddable in a rich-text field: the field's `allow` list, or every\n * non-primitive component when open — matching the `blocks` field and the\n * `validateRichTextEmbeds` leash.\n */\nexport function listEmbeddable(\n  allow: string[] | undefined,\n  registered: ComponentManifest[],\n): ComponentManifest[] {\n  const permitted =\n    allow && allow.length > 0\n      ? registered.filter((m) => allow.includes(m.id))\n      : registered.filter((m) => !isPrimitive(m.id))\n  return permitted.filter((m) => m.clientRenderable !== false)\n}\n\n/** A unique id for an embedded node (studio runs in the browser; crypto is present). */\nfunction newEmbedId(): string {\n  const uuid = globalThis.crypto?.randomUUID?.()\n  return uuid ? `embed-${uuid}` : `embed-${Math.random().toString(36).slice(2)}`\n}\n"]}

package/dist/components/cms/rich-text/link-control.d.ts

@@ -0,0 +1,22 @@
+import type { Editor } from '@tiptap/react';
+import type { DocumentRef } from '@elytracms/core/cms-core';
+/** A pickable internal-link destination: a document plus its display labels. */
+export interface LinkTarget {
+    ref: DocumentRef;
+    label: string;
+    collectionLabel: string;
+}
+interface LinkControlProps {
+    editor: Editor;
+    /** Documents linkable across the workspace (empty ⇒ external-only). */
+    targets: LinkTarget[];
+}
+/**
+ * The rich-text link control (EC-314): set/clear a link on the selection, either as
+ * an external URL (a literal `href`) or an internal document — which writes a
+ * structured `attrs.ref` (`referenceNode`, EC-290) so the link stays indexed like a
+ * relation and resolves to a live path in delivery. Applying an empty URL clears the
+ * link, so the one control both sets and removes.
+ */
+export declare function LinkControl({ editor, targets }: LinkControlProps): import("react").JSX.Element;
+export {};

package/dist/components/cms/rich-text/link-control.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { FileText, Link2, Trash2 } from 'lucide-react';
+import { referenceNode } from '@elytracms/core/cms-core';
+import { Button, Input, Popover, PopoverContent, PopoverTrigger, Row, Separator, Stack, Text, } from '@elytracms/studio/ui';
+import { cn } from '@elytracms/studio/lib/utils';
+import { translate } from '@elytracms/studio/lib/i18n';
+const MAX_RESULTS = 40;
+/**
+ * The rich-text link control (EC-314): set/clear a link on the selection, either as
+ * an external URL (a literal `href`) or an internal document — which writes a
+ * structured `attrs.ref` (`referenceNode`, EC-290) so the link stays indexed like a
+ * relation and resolves to a live path in delivery. Applying an empty URL clears the
+ * link, so the one control both sets and removes.
+ */
+export function LinkControl({ editor, targets }) {
+    const [open, setOpen] = useState(false);
+    const [href, setHref] = useState('');
+    const [query, setQuery] = useState('');
+    const isLink = editor.isActive('link');
+    const results = useMemo(() => {
+        const q = query.trim().toLowerCase();
+        const matched = q
+            ? targets.filter((t) => t.label.toLowerCase().includes(q) || t.collectionLabel.toLowerCase().includes(q))
+            : targets;
+        return matched.slice(0, MAX_RESULTS);
+    }, [targets, query]);
+    function onOpenChange(next) {
+        if (next) {
+            const current = editor.getAttributes('link').href;
+            setHref(typeof current === 'string' ? current : '');
+            setQuery('');
+        }
+        setOpen(next);
+    }
+    function applyExternal() {
+        const url = href.trim();
+        const chain = editor.chain().focus().extendMarkRange('link');
+        if (url)
+            chain.setLink({ href: url }).run();
+        else
+            chain.unsetLink().run();
+        setOpen(false);
+    }
+    function applyDocument(target) {
+        editor
+            .chain()
+            .focus()
+            .extendMarkRange('link')
+            .setMark('link', { href: null, ref: referenceNode(target.ref) })
+            .run();
+        setOpen(false);
+    }
+    function remove() {
+        editor.chain().focus().extendMarkRange('link').unsetLink().run();
+        setOpen(false);
+    }
+    return (_jsxs(Popover, { open: open, onOpenChange: onOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx(Button, { type: "button", variant: isLink ? 'secondary' : 'ghost', size: "icon-sm", "aria-label": translate('richText.link.add'), "aria-pressed": isLink, title: translate('richText.link.add'), onMouseDown: (e) => e.preventDefault(), children: _jsx(Link2, { className: "size-3.5" }) }) }), _jsx(PopoverContent, { align: "start", className: "w-80", children: _jsxs(Stack, { gap: "2", children: [_jsx(Text, { as: "span", size: "xs", tone: "muted", className: "uppercase tracking-wide", children: translate('richText.link.external') }), _jsxs(Row, { gap: "2", align: "center", children: [_jsx(Input, { autoFocus: true, value: href, placeholder: translate('richText.link.externalPlaceholder'), onChange: (e) => setHref(e.target.value), onKeyDown: (e) => {
+                                        if (e.key === 'Enter') {
+                                            e.preventDefault();
+                                            applyExternal();
+                                        }
+                                    } }), _jsx(Button, { type: "button", size: "sm", onClick: applyExternal, children: translate('richText.link.apply') })] }), targets.length > 0 ? (_jsxs(_Fragment, { children: [_jsx(Separator, { className: "my-0.5" }), _jsx(Text, { as: "span", size: "xs", tone: "muted", className: "uppercase tracking-wide", children: translate('richText.link.document') }), _jsx(Input, { value: query, placeholder: translate('richText.link.documentSearch'), onChange: (e) => setQuery(e.target.value) }), _jsx(Stack, { gap: "none", className: "max-h-52 overflow-y-auto", children: results.length === 0 ? (_jsx(Text, { as: "span", size: "xs", tone: "muted", className: "px-1 py-2", children: translate('richText.link.documentEmpty') })) : (results.map((target) => (_jsxs("button", { type: "button", onMouseDown: (e) => e.preventDefault(), onClick: () => applyDocument(target), className: cn('flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm', 'hover:bg-muted focus-visible:bg-muted outline-none'), children: [_jsx(FileText, { className: "size-3.5 shrink-0 text-muted-foreground" }), _jsx("span", { className: "min-w-0 flex-1 truncate", children: target.label }), _jsx("span", { className: "shrink-0 text-xs text-muted-foreground", children: target.collectionLabel })] }, `${target.ref.collection}:${target.ref.id}`)))) })] })) : null, isLink ? (_jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "self-start", onClick: remove, children: [_jsx(Trash2, { className: "size-3.5" }), " ", translate('richText.link.remove')] })) : null] }) })] }));
+}
+//# sourceMappingURL=link-control.js.map

package/dist/components/cms/rich-text/link-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"link-control.js","sourceRoot":"","sources":["../../../../src/components/cms/rich-text/link-control.tsx"],"names":[],"mappings":"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","sourcesContent":["import { useMemo, useState } from 'react'\nimport { FileText, Link2, Trash2 } from 'lucide-react'\nimport type { Editor } from '@tiptap/react'\nimport { referenceNode } from '@elytracms/core/cms-core'\nimport type { DocumentRef } from '@elytracms/core/cms-core'\nimport {\n  Button,\n  Input,\n  Popover,\n  PopoverContent,\n  PopoverTrigger,\n  Row,\n  Separator,\n  Stack,\n  Text,\n} from '@elytracms/studio/ui'\nimport { cn } from '@elytracms/studio/lib/utils'\nimport { translate } from '@elytracms/studio/lib/i18n'\n\n/** A pickable internal-link destination: a document plus its display labels. */\nexport interface LinkTarget {\n  ref: DocumentRef\n  label: string\n  collectionLabel: string\n}\n\ninterface LinkControlProps {\n  editor: Editor\n  /** Documents linkable across the workspace (empty ⇒ external-only). */\n  targets: LinkTarget[]\n}\n\nconst MAX_RESULTS = 40\n\n/**\n * The rich-text link control (EC-314): set/clear a link on the selection, either as\n * an external URL (a literal `href`) or an internal document — which writes a\n * structured `attrs.ref` (`referenceNode`, EC-290) so the link stays indexed like a\n * relation and resolves to a live path in delivery. Applying an empty URL clears the\n * link, so the one control both sets and removes.\n */\nexport function LinkControl({ editor, targets }: LinkControlProps) {\n  const [open, setOpen] = useState(false)\n  const [href, setHref] = useState('')\n  const [query, setQuery] = useState('')\n  const isLink = editor.isActive('link')\n\n  const results = useMemo(() => {\n    const q = query.trim().toLowerCase()\n    const matched = q\n      ? targets.filter((t) => t.label.toLowerCase().includes(q) || t.collectionLabel.toLowerCase().includes(q))\n      : targets\n    return matched.slice(0, MAX_RESULTS)\n  }, [targets, query])\n\n  function onOpenChange(next: boolean) {\n    if (next) {\n      const current = editor.getAttributes('link').href\n      setHref(typeof current === 'string' ? current : '')\n      setQuery('')\n    }\n    setOpen(next)\n  }\n\n  function applyExternal() {\n    const url = href.trim()\n    const chain = editor.chain().focus().extendMarkRange('link')\n    if (url) chain.setLink({ href: url }).run()\n    else chain.unsetLink().run()\n    setOpen(false)\n  }\n\n  function applyDocument(target: LinkTarget) {\n    editor\n      .chain()\n      .focus()\n      .extendMarkRange('link')\n      .setMark('link', { href: null, ref: referenceNode(target.ref) })\n      .run()\n    setOpen(false)\n  }\n\n  function remove() {\n    editor.chain().focus().extendMarkRange('link').unsetLink().run()\n    setOpen(false)\n  }\n\n  return (\n    <Popover open={open} onOpenChange={onOpenChange}>\n      <PopoverTrigger asChild>\n        <Button\n          type=\"button\"\n          variant={isLink ? 'secondary' : 'ghost'}\n          size=\"icon-sm\"\n          aria-label={translate('richText.link.add')}\n          aria-pressed={isLink}\n          title={translate('richText.link.add')}\n          onMouseDown={(e) => e.preventDefault()}\n        >\n          <Link2 className=\"size-3.5\" />\n        </Button>\n      </PopoverTrigger>\n      <PopoverContent align=\"start\" className=\"w-80\">\n        <Stack gap=\"2\">\n          <Text as=\"span\" size=\"xs\" tone=\"muted\" className=\"uppercase tracking-wide\">\n            {translate('richText.link.external')}\n          </Text>\n          <Row gap=\"2\" align=\"center\">\n            <Input\n              autoFocus\n              value={href}\n              placeholder={translate('richText.link.externalPlaceholder')}\n              onChange={(e) => setHref(e.target.value)}\n              onKeyDown={(e) => {\n                if (e.key === 'Enter') {\n                  e.preventDefault()\n                  applyExternal()\n                }\n              }}\n            />\n            <Button type=\"button\" size=\"sm\" onClick={applyExternal}>\n              {translate('richText.link.apply')}\n            </Button>\n          </Row>\n\n          {targets.length > 0 ? (\n            <>\n              <Separator className=\"my-0.5\" />\n              <Text as=\"span\" size=\"xs\" tone=\"muted\" className=\"uppercase tracking-wide\">\n                {translate('richText.link.document')}\n              </Text>\n              <Input\n                value={query}\n                placeholder={translate('richText.link.documentSearch')}\n                onChange={(e) => setQuery(e.target.value)}\n              />\n              <Stack gap=\"none\" className=\"max-h-52 overflow-y-auto\">\n                {results.length === 0 ? (\n                  <Text as=\"span\" size=\"xs\" tone=\"muted\" className=\"px-1 py-2\">\n                    {translate('richText.link.documentEmpty')}\n                  </Text>\n                ) : (\n                  results.map((target) => (\n                    <button\n                      key={`${target.ref.collection}:${target.ref.id}`}\n                      type=\"button\"\n                      onMouseDown={(e) => e.preventDefault()}\n                      onClick={() => applyDocument(target)}\n                      className={cn(\n                        'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm',\n                        'hover:bg-muted focus-visible:bg-muted outline-none',\n                      )}\n                    >\n                      <FileText className=\"size-3.5 shrink-0 text-muted-foreground\" />\n                      <span className=\"min-w-0 flex-1 truncate\">{target.label}</span>\n                      <span className=\"shrink-0 text-xs text-muted-foreground\">{target.collectionLabel}</span>\n                    </button>\n                  ))\n                )}\n              </Stack>\n            </>\n          ) : null}\n\n          {isLink ? (\n            <Button type=\"button\" variant=\"ghost\" size=\"sm\" className=\"self-start\" onClick={remove}>\n              <Trash2 className=\"size-3.5\" /> {translate('richText.link.remove')}\n            </Button>\n          ) : null}\n        </Stack>\n      </PopoverContent>\n    </Popover>\n  )\n}\n"]}

package/dist/components/cms/rich-text/ref-link.d.ts

@@ -0,0 +1,14 @@
+/**
+ * The CMS link mark (EC-314), extending TipTap's Link with a structured `ref`
+ * attribute (EC-290/291).
+ *
+ * A link either points *outward* (a literal `href`, handled by the base extension)
+ * or *inward* to a project document, in which case it carries a self-typed
+ * reference envelope at `attrs.ref` (`{ type: 'reference', collection, id }`). The
+ * reference-extractor keys on that envelope — node/mark *type* is irrelevant to it —
+ * so an internal link stays indexed identically to a relation field, and the
+ * delivery renderer resolves `ref` to a live path (falling back to `href` only when
+ * no `ref` is present). `rendered: false` keeps `ref` out of the editor's HTML (it
+ * is storage/JSON only) while still round-tripping through `getJSON()`.
+ */
+export declare const RefLink: import("@tiptap/core").Mark<import("@tiptap/extension-link").LinkOptions, any>;

package/dist/components/cms/rich-text/ref-link.js

@@ -0,0 +1,26 @@
+import Link from '@tiptap/extension-link';
+/**
+ * The CMS link mark (EC-314), extending TipTap's Link with a structured `ref`
+ * attribute (EC-290/291).
+ *
+ * A link either points *outward* (a literal `href`, handled by the base extension)
+ * or *inward* to a project document, in which case it carries a self-typed
+ * reference envelope at `attrs.ref` (`{ type: 'reference', collection, id }`). The
+ * reference-extractor keys on that envelope — node/mark *type* is irrelevant to it —
+ * so an internal link stays indexed identically to a relation field, and the
+ * delivery renderer resolves `ref` to a live path (falling back to `href` only when
+ * no `ref` is present). `rendered: false` keeps `ref` out of the editor's HTML (it
+ * is storage/JSON only) while still round-tripping through `getJSON()`.
+ */
+export const RefLink = Link.extend({
+    addAttributes() {
+        return {
+            ...this.parent?.(),
+            ref: {
+                default: null,
+                rendered: false,
+            },
+        };
+    },
+});
+//# sourceMappingURL=ref-link.js.map

package/dist/components/cms/rich-text/ref-link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ref-link.js","sourceRoot":"","sources":["../../../../src/components/cms/rich-text/ref-link.ts"],"names":[],"mappings":"AAAA,OAAO,IAAI,MAAM,wBAAwB,CAAA;AAEzC;;;;;;;;;;;;GAYG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,IAAI,CAAC,MAAM,CAAC;IACjC,aAAa;QACX,OAAO;YACL,GAAG,IAAI,CAAC,MAAM,EAAE,EAAE;YAClB,GAAG,EAAE;gBACH,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,KAAK;aAChB;SACF,CAAA;IACH,CAAC;CACF,CAAC,CAAA","sourcesContent":["import Link from '@tiptap/extension-link'\n\n/**\n * The CMS link mark (EC-314), extending TipTap's Link with a structured `ref`\n * attribute (EC-290/291).\n *\n * A link either points *outward* (a literal `href`, handled by the base extension)\n * or *inward* to a project document, in which case it carries a self-typed\n * reference envelope at `attrs.ref` (`{ type: 'reference', collection, id }`). The\n * reference-extractor keys on that envelope — node/mark *type* is irrelevant to it —\n * so an internal link stays indexed identically to a relation field, and the\n * delivery renderer resolves `ref` to a live path (falling back to `href` only when\n * no `ref` is present). `rendered: false` keeps `ref` out of the editor's HTML (it\n * is storage/JSON only) while still round-tripping through `getJSON()`.\n */\nexport const RefLink = Link.extend({\n  addAttributes() {\n    return {\n      ...this.parent?.(),\n      ref: {\n        default: null,\n        rendered: false,\n      },\n    }\n  },\n})\n"]}

package/dist/components/cms/rich-text/slash-command.d.ts

@@ -0,0 +1,27 @@
+import { Extension } from '@tiptap/react';
+import type { Editor, Range } from '@tiptap/react';
+import type { LucideIcon } from 'lucide-react';
+/**
+ * Notion-style slash menu (EC-314): typing `/` at the caret opens a filterable
+ * command palette that inserts block-level content — headings, lists, quote, code,
+ * divider — and, when available, an image or a component embed (delegated to the
+ * editor's shared pickers via {@link SlashCommandOptions}). Built on TipTap's
+ * `Suggestion` utility; the menu is a React overlay positioned at the caret.
+ */
+export interface SlashCommandOptions {
+    /** Open the asset picker (omitted ⇒ no `/image` item). */
+    onImage?: () => void;
+    /** Open the component-embed picker (omitted ⇒ no `/embed` item). */
+    onEmbed?: () => void;
+}
+export interface SlashItem {
+    key: string;
+    title: string;
+    keywords: string;
+    icon: LucideIcon;
+    run: (editor: Editor, range: Range) => void;
+}
+/** The command list, gated by which media actions the editor provided. */
+export declare function buildSlashItems(options: SlashCommandOptions): SlashItem[];
+/** Build the slash-command extension bound to the editor's shared media pickers. */
+export declare function createSlashCommand(options: SlashCommandOptions): Extension<SlashCommandOptions, any>;

package/dist/components/cms/rich-text/slash-command.js

@@ -0,0 +1,158 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useState } from 'react';
+import { Extension, ReactRenderer } from '@tiptap/react';
+import Suggestion from '@tiptap/suggestion';
+import { Blocks, Heading1, Heading2, Heading3, ImagePlus, List, ListOrdered, Minus, Pilcrow, Quote, SquareCode, } from 'lucide-react';
+import { translate } from '@elytracms/studio/lib/i18n';
+import { cn } from '@elytracms/studio/lib/utils';
+/** The command list, gated by which media actions the editor provided. */
+export function buildSlashItems(options) {
+    const block = (run) => (editor, range) => run(editor.chain().focus().deleteRange(range)).run();
+    const items = [
+        { key: 'text', title: translate('richText.slash.text'), keywords: 'paragraph text plain', icon: Pilcrow, run: block((c) => c.setParagraph()) },
+        { key: 'h1', title: translate('richText.heading', { level: 1 }), keywords: 'heading title h1', icon: Heading1, run: block((c) => c.toggleHeading({ level: 1 })) },
+        { key: 'h2', title: translate('richText.heading', { level: 2 }), keywords: 'heading subtitle h2', icon: Heading2, run: block((c) => c.toggleHeading({ level: 2 })) },
+        { key: 'h3', title: translate('richText.heading', { level: 3 }), keywords: 'heading h3', icon: Heading3, run: block((c) => c.toggleHeading({ level: 3 })) },
+        { key: 'bulletList', title: translate('richText.bulletList'), keywords: 'bullet unordered list ul', icon: List, run: block((c) => c.toggleBulletList()) },
+        { key: 'orderedList', title: translate('richText.orderedList'), keywords: 'ordered numbered list ol', icon: ListOrdered, run: block((c) => c.toggleOrderedList()) },
+        { key: 'blockquote', title: translate('richText.blockquote'), keywords: 'quote blockquote', icon: Quote, run: block((c) => c.toggleBlockquote()) },
+        { key: 'codeBlock', title: translate('richText.codeBlock'), keywords: 'code block pre', icon: SquareCode, run: block((c) => c.toggleCodeBlock()) },
+        { key: 'divider', title: translate('richText.horizontalRule'), keywords: 'divider rule hr separator', icon: Minus, run: block((c) => c.setHorizontalRule()) },
+    ];
+    if (options.onImage) {
+        items.push({
+            key: 'image',
+            title: translate('richText.image.add'),
+            keywords: 'image picture photo media',
+            icon: ImagePlus,
+            run: (editor, range) => {
+                editor.chain().focus().deleteRange(range).run();
+                options.onImage?.();
+            },
+        });
+    }
+    if (options.onEmbed) {
+        items.push({
+            key: 'embed',
+            title: translate('richText.embed.add'),
+            keywords: 'embed component block',
+            icon: Blocks,
+            run: (editor, range) => {
+                editor.chain().focus().deleteRange(range).run();
+                options.onEmbed?.();
+            },
+        });
+    }
+    return items;
+}
+const SlashMenu = forwardRef((props, ref) => {
+    const [selected, setSelected] = useState(0);
+    useEffect(() => setSelected(0), [props.items]);
+    useImperativeHandle(ref, () => ({
+        onKeyDown: ({ event }) => {
+            const count = props.items.length;
+            if (count === 0)
+                return false;
+            if (event.key === 'ArrowUp') {
+                setSelected((s) => (s + count - 1) % count);
+                return true;
+            }
+            if (event.key === 'ArrowDown') {
+                setSelected((s) => (s + 1) % count);
+                return true;
+            }
+            if (event.key === 'Enter') {
+                const item = props.items[selected];
+                if (item)
+                    props.command(item);
+                return true;
+            }
+            return false;
+        },
+    }));
+    if (props.items.length === 0) {
+        return (_jsx("div", { className: "ec-rte-slash", children: _jsx("span", { className: "px-2 py-1.5 text-xs text-muted-foreground", children: translate('richText.slash.empty') }) }));
+    }
+    return (_jsx("div", { className: "ec-rte-slash", role: "menu", children: props.items.map((item, i) => {
+            const Icon = item.icon;
+            return (_jsxs("button", { type: "button", role: "menuitem", onMouseEnter: () => setSelected(i), onMouseDown: (e) => {
+                    e.preventDefault();
+                    props.command(item);
+                }, className: cn('flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-left text-sm outline-none', i === selected ? 'bg-muted' : 'hover:bg-muted/60'), children: [_jsx(Icon, { className: "size-4 shrink-0 text-muted-foreground" }), _jsx("span", { className: "truncate", children: item.title })] }, item.key));
+        }) }));
+});
+SlashMenu.displayName = 'SlashMenu';
+/** Position a floating element under the caret, flipping above near the viewport edge. */
+function place(el, rect) {
+    if (!rect)
+        return;
+    const margin = 8;
+    const height = el.offsetHeight || 280;
+    const below = rect.bottom + 4;
+    const flip = below + height > window.innerHeight - margin && rect.top - height > margin;
+    el.style.position = 'fixed';
+    el.style.left = `${Math.min(rect.left, window.innerWidth - 260)}px`;
+    el.style.top = flip ? `${rect.top - height - 4}px` : `${below}px`;
+    el.style.zIndex = '60';
+}
+/** The suggestion config (everything but the `editor`, which the extension injects). */
+function slashSuggestion(options) {
+    return {
+        char: '/',
+        startOfLine: false,
+        items: ({ query }) => {
+            const q = query.trim().toLowerCase();
+            const all = buildSlashItems(options);
+            if (!q)
+                return all;
+            return all.filter((item) => item.title.toLowerCase().includes(q) || item.keywords.includes(q));
+        },
+        command: ({ editor, range, props }) => props.run(editor, range),
+        render: () => {
+            let renderer = null;
+            let wrapper = null;
+            return {
+                onStart: (props) => {
+                    renderer = new ReactRenderer(SlashMenu, {
+                        props,
+                        editor: props.editor,
+                    });
+                    wrapper = document.createElement('div');
+                    wrapper.appendChild(renderer.element);
+                    document.body.appendChild(wrapper);
+                    place(wrapper, props.clientRect?.());
+                },
+                onUpdate: (props) => {
+                    renderer?.updateProps(props);
+                    if (wrapper)
+                        place(wrapper, props.clientRect?.());
+                },
+                onKeyDown: (props) => {
+                    if (props.event.key === 'Escape') {
+                        wrapper?.remove();
+                        wrapper = null;
+                        return true;
+                    }
+                    return renderer?.ref?.onKeyDown(props) ?? false;
+                },
+                onExit: () => {
+                    wrapper?.remove();
+                    wrapper = null;
+                    renderer?.destroy();
+                    renderer = null;
+                },
+            };
+        },
+    };
+}
+/** Build the slash-command extension bound to the editor's shared media pickers. */
+export function createSlashCommand(options) {
+    return Extension.create({
+        name: 'slashCommand',
+        addOptions: () => options,
+        addProseMirrorPlugins() {
+            return [Suggestion({ editor: this.editor, ...slashSuggestion(this.options) })];
+        },
+    });
+}
+//# sourceMappingURL=slash-command.js.map

package/dist/components/cms/rich-text/slash-command.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slash-command.js","sourceRoot":"","sources":["../../../../src/components/cms/rich-text/slash-command.tsx"],"names":[],"mappings":"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","sourcesContent":["import { forwardRef, useEffect, useImperativeHandle, useState } from 'react'\nimport type { ComponentType } from 'react'\nimport { Extension, ReactRenderer } from '@tiptap/react'\nimport type { Editor, Range } from '@tiptap/react'\nimport Suggestion from '@tiptap/suggestion'\nimport type { SuggestionKeyDownProps, SuggestionOptions, SuggestionProps } from '@tiptap/suggestion'\nimport {\n  Blocks,\n  Heading1,\n  Heading2,\n  Heading3,\n  ImagePlus,\n  List,\n  ListOrdered,\n  Minus,\n  Pilcrow,\n  Quote,\n  SquareCode,\n} from 'lucide-react'\nimport type { LucideIcon } from 'lucide-react'\nimport { translate } from '@elytracms/studio/lib/i18n'\nimport { cn } from '@elytracms/studio/lib/utils'\n\n/**\n * Notion-style slash menu (EC-314): typing `/` at the caret opens a filterable\n * command palette that inserts block-level content — headings, lists, quote, code,\n * divider — and, when available, an image or a component embed (delegated to the\n * editor's shared pickers via {@link SlashCommandOptions}). Built on TipTap's\n * `Suggestion` utility; the menu is a React overlay positioned at the caret.\n */\n\nexport interface SlashCommandOptions {\n  /** Open the asset picker (omitted ⇒ no `/image` item). */\n  onImage?: () => void\n  /** Open the component-embed picker (omitted ⇒ no `/embed` item). */\n  onEmbed?: () => void\n}\n\nexport interface SlashItem {\n  key: string\n  title: string\n  keywords: string\n  icon: LucideIcon\n  run: (editor: Editor, range: Range) => void\n}\n\n/** The command list, gated by which media actions the editor provided. */\nexport function buildSlashItems(options: SlashCommandOptions): SlashItem[] {\n  const block = (run: (chain: ReturnType<Editor['chain']>) => ReturnType<Editor['chain']>) =>\n    (editor: Editor, range: Range) => run(editor.chain().focus().deleteRange(range)).run()\n\n  const items: SlashItem[] = [\n    { key: 'text', title: translate('richText.slash.text'), keywords: 'paragraph text plain', icon: Pilcrow, run: block((c) => c.setParagraph()) },\n    { key: 'h1', title: translate('richText.heading', { level: 1 }), keywords: 'heading title h1', icon: Heading1, run: block((c) => c.toggleHeading({ level: 1 })) },\n    { key: 'h2', title: translate('richText.heading', { level: 2 }), keywords: 'heading subtitle h2', icon: Heading2, run: block((c) => c.toggleHeading({ level: 2 })) },\n    { key: 'h3', title: translate('richText.heading', { level: 3 }), keywords: 'heading h3', icon: Heading3, run: block((c) => c.toggleHeading({ level: 3 })) },\n    { key: 'bulletList', title: translate('richText.bulletList'), keywords: 'bullet unordered list ul', icon: List, run: block((c) => c.toggleBulletList()) },\n    { key: 'orderedList', title: translate('richText.orderedList'), keywords: 'ordered numbered list ol', icon: ListOrdered, run: block((c) => c.toggleOrderedList()) },\n    { key: 'blockquote', title: translate('richText.blockquote'), keywords: 'quote blockquote', icon: Quote, run: block((c) => c.toggleBlockquote()) },\n    { key: 'codeBlock', title: translate('richText.codeBlock'), keywords: 'code block pre', icon: SquareCode, run: block((c) => c.toggleCodeBlock()) },\n    { key: 'divider', title: translate('richText.horizontalRule'), keywords: 'divider rule hr separator', icon: Minus, run: block((c) => c.setHorizontalRule()) },\n  ]\n  if (options.onImage) {\n    items.push({\n      key: 'image',\n      title: translate('richText.image.add'),\n      keywords: 'image picture photo media',\n      icon: ImagePlus,\n      run: (editor, range) => {\n        editor.chain().focus().deleteRange(range).run()\n        options.onImage?.()\n      },\n    })\n  }\n  if (options.onEmbed) {\n    items.push({\n      key: 'embed',\n      title: translate('richText.embed.add'),\n      keywords: 'embed component block',\n      icon: Blocks,\n      run: (editor, range) => {\n        editor.chain().focus().deleteRange(range).run()\n        options.onEmbed?.()\n      },\n    })\n  }\n  return items\n}\n\n/** Imperative handle the suggestion render loop calls for keyboard navigation. */\ninterface SlashMenuHandle {\n  onKeyDown: (props: SuggestionKeyDownProps) => boolean\n}\n\nconst SlashMenu = forwardRef<SlashMenuHandle, SuggestionProps<SlashItem, SlashItem>>((props, ref) => {\n  const [selected, setSelected] = useState(0)\n  useEffect(() => setSelected(0), [props.items])\n\n  useImperativeHandle(ref, () => ({\n    onKeyDown: ({ event }) => {\n      const count = props.items.length\n      if (count === 0) return false\n      if (event.key === 'ArrowUp') {\n        setSelected((s) => (s + count - 1) % count)\n        return true\n      }\n      if (event.key === 'ArrowDown') {\n        setSelected((s) => (s + 1) % count)\n        return true\n      }\n      if (event.key === 'Enter') {\n        const item = props.items[selected]\n        if (item) props.command(item)\n        return true\n      }\n      return false\n    },\n  }))\n\n  if (props.items.length === 0) {\n    return (\n      <div className=\"ec-rte-slash\">\n        <span className=\"px-2 py-1.5 text-xs text-muted-foreground\">\n          {translate('richText.slash.empty')}\n        </span>\n      </div>\n    )\n  }\n\n  return (\n    <div className=\"ec-rte-slash\" role=\"menu\">\n      {props.items.map((item, i) => {\n        const Icon = item.icon\n        return (\n          <button\n            key={item.key}\n            type=\"button\"\n            role=\"menuitem\"\n            onMouseEnter={() => setSelected(i)}\n            onMouseDown={(e) => {\n              e.preventDefault()\n              props.command(item)\n            }}\n            className={cn(\n              'flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-left text-sm outline-none',\n              i === selected ? 'bg-muted' : 'hover:bg-muted/60',\n            )}\n          >\n            <Icon className=\"size-4 shrink-0 text-muted-foreground\" />\n            <span className=\"truncate\">{item.title}</span>\n          </button>\n        )\n      })}\n    </div>\n  )\n})\nSlashMenu.displayName = 'SlashMenu'\n\n/** Position a floating element under the caret, flipping above near the viewport edge. */\nfunction place(el: HTMLElement, rect: DOMRect | null | undefined): void {\n  if (!rect) return\n  const margin = 8\n  const height = el.offsetHeight || 280\n  const below = rect.bottom + 4\n  const flip = below + height > window.innerHeight - margin && rect.top - height > margin\n  el.style.position = 'fixed'\n  el.style.left = `${Math.min(rect.left, window.innerWidth - 260)}px`\n  el.style.top = flip ? `${rect.top - height - 4}px` : `${below}px`\n  el.style.zIndex = '60'\n}\n\n/** The suggestion config (everything but the `editor`, which the extension injects). */\nfunction slashSuggestion(options: SlashCommandOptions): Omit<SuggestionOptions<SlashItem, SlashItem>, 'editor'> {\n  return {\n    char: '/',\n    startOfLine: false,\n    items: ({ query }) => {\n      const q = query.trim().toLowerCase()\n      const all = buildSlashItems(options)\n      if (!q) return all\n      return all.filter((item) => item.title.toLowerCase().includes(q) || item.keywords.includes(q))\n    },\n    command: ({ editor, range, props }) => props.run(editor, range),\n    render: () => {\n      let renderer: ReactRenderer<SlashMenuHandle, SuggestionProps<SlashItem, SlashItem>> | null = null\n      let wrapper: HTMLDivElement | null = null\n\n      return {\n        onStart: (props) => {\n          renderer = new ReactRenderer(SlashMenu as ComponentType<SuggestionProps<SlashItem, SlashItem>>, {\n            props,\n            editor: props.editor,\n          })\n          wrapper = document.createElement('div')\n          wrapper.appendChild(renderer.element)\n          document.body.appendChild(wrapper)\n          place(wrapper, props.clientRect?.())\n        },\n        onUpdate: (props) => {\n          renderer?.updateProps(props)\n          if (wrapper) place(wrapper, props.clientRect?.())\n        },\n        onKeyDown: (props) => {\n          if (props.event.key === 'Escape') {\n            wrapper?.remove()\n            wrapper = null\n            return true\n          }\n          return renderer?.ref?.onKeyDown(props) ?? false\n        },\n        onExit: () => {\n          wrapper?.remove()\n          wrapper = null\n          renderer?.destroy()\n          renderer = null\n        },\n      }\n    },\n  }\n}\n\n/** Build the slash-command extension bound to the editor's shared media pickers. */\nexport function createSlashCommand(options: SlashCommandOptions) {\n  return Extension.create<SlashCommandOptions>({\n    name: 'slashCommand',\n    addOptions: () => options,\n    addProseMirrorPlugins() {\n      return [Suggestion({ editor: this.editor, ...slashSuggestion(this.options) })]\n    },\n  })\n}\n"]}

package/dist/components/cms/rich-text/toolbar-button.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+interface ToolbarButtonProps {
+    active?: boolean;
+    disabled?: boolean;
+    label: string;
+    onClick: () => void;
+    children: ReactNode;
+}
+/**
+ * A single rich-text toolbar toggle (EC-314): pressed state, tooltip, and a
+ * selection-preserving click (`onMouseDown` default-prevented so clicking the button
+ * never blurs the editor or collapses the current selection).
+ */
+export declare function ToolbarButton({ active, disabled, label, onClick, children }: ToolbarButtonProps): import("react").JSX.Element;
+export {};

package/dist/components/cms/rich-text/toolbar-button.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '@elytracms/studio/ui';
+/**
+ * A single rich-text toolbar toggle (EC-314): pressed state, tooltip, and a
+ * selection-preserving click (`onMouseDown` default-prevented so clicking the button
+ * never blurs the editor or collapses the current selection).
+ */
+export function ToolbarButton({ active = false, disabled, label, onClick, children }) {
+    return (_jsx(Button, { type: "button", variant: active ? 'secondary' : 'ghost', size: "icon-sm", disabled: disabled, "aria-label": label, "aria-pressed": active, title: label, onMouseDown: (e) => e.preventDefault(), onClick: onClick, children: children }));
+}
+//# sourceMappingURL=toolbar-button.js.map

package/dist/components/cms/rich-text/toolbar-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar-button.js","sourceRoot":"","sources":["../../../../src/components/cms/rich-text/toolbar-button.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAU7C;;;;GAIG;AACH,MAAM,UAAU,aAAa,CAAC,EAAE,MAAM,GAAG,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,OAAO,EAAE,QAAQ,EAAsB;IACtG,OAAO,CACL,KAAC,MAAM,IACL,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,OAAO,EACvC,IAAI,EAAC,SAAS,EACd,QAAQ,EAAE,QAAQ,gBACN,KAAK,kBACH,MAAM,EACpB,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,EACtC,OAAO,EAAE,OAAO,YAEf,QAAQ,GACF,CACV,CAAA;AACH,CAAC","sourcesContent":["import type { ReactNode } from 'react'\nimport { Button } from '@elytracms/studio/ui'\n\ninterface ToolbarButtonProps {\n  active?: boolean\n  disabled?: boolean\n  label: string\n  onClick: () => void\n  children: ReactNode\n}\n\n/**\n * A single rich-text toolbar toggle (EC-314): pressed state, tooltip, and a\n * selection-preserving click (`onMouseDown` default-prevented so clicking the button\n * never blurs the editor or collapses the current selection).\n */\nexport function ToolbarButton({ active = false, disabled, label, onClick, children }: ToolbarButtonProps) {\n  return (\n    <Button\n      type=\"button\"\n      variant={active ? 'secondary' : 'ghost'}\n      size=\"icon-sm\"\n      disabled={disabled}\n      aria-label={label}\n      aria-pressed={active}\n      title={label}\n      onMouseDown={(e) => e.preventDefault()}\n      onClick={onClick}\n    >\n      {children}\n    </Button>\n  )\n}\n"]}

package/dist/components/cms/rich-text/toolbar.d.ts

@@ -0,0 +1,19 @@
+import type { Editor } from '@tiptap/react';
+import type { LinkTarget } from './link-control';
+interface RichTextToolbarProps {
+    editor: Editor;
+    /** Internal-link destinations across the workspace (empty ⇒ external-only). */
+    targets: LinkTarget[];
+    /** Open the shared image picker (omitted ⇒ no image button). */
+    onOpenImage?: () => void;
+    /** Open the shared component-embed picker (omitted ⇒ no embed button). */
+    onOpenEmbed?: () => void;
+}
+/**
+ * The CMS rich-text toolbar (EC-314) — a compact, Notion-grade control strip that
+ * reads its active/enabled state reactively from the editor (`useEditorState`) so a
+ * pressed control always mirrors the caret. Every button prevents the default
+ * mousedown so clicking it never steals the editor selection.
+ */
+export declare function RichTextToolbar({ editor, targets, onOpenImage, onOpenEmbed }: RichTextToolbarProps): import("react").JSX.Element;
+export {};

package/dist/components/cms/rich-text/toolbar.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEditorState } from '@tiptap/react';
+import { Blocks, Bold, ChevronDown, Code, ImagePlus, Italic, List, ListOrdered, Minus, Pilcrow, Quote, Redo2, SquareCode, Strikethrough, Underline, Undo2, } from 'lucide-react';
+import { Button, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Toolbar, ToolbarGroup, ToolbarSeparator, } from '@elytracms/studio/ui';
+import { translate } from '@elytracms/studio/lib/i18n';
+import { ToolbarButton } from './toolbar-button';
+import { LinkControl } from './link-control';
+/**
+ * The CMS rich-text toolbar (EC-314) — a compact, Notion-grade control strip that
+ * reads its active/enabled state reactively from the editor (`useEditorState`) so a
+ * pressed control always mirrors the caret. Every button prevents the default
+ * mousedown so clicking it never steals the editor selection.
+ */
+export function RichTextToolbar({ editor, targets, onOpenImage, onOpenEmbed }) {
+    const state = useEditorState({
+        editor,
+        selector: ({ editor }) => ({
+            bold: editor.isActive('bold'),
+            italic: editor.isActive('italic'),
+            underline: editor.isActive('underline'),
+            strike: editor.isActive('strike'),
+            code: editor.isActive('code'),
+            bulletList: editor.isActive('bulletList'),
+            orderedList: editor.isActive('orderedList'),
+            blockquote: editor.isActive('blockquote'),
+            codeBlock: editor.isActive('codeBlock'),
+            paragraph: editor.isActive('paragraph'),
+            headingLevel: [1, 2, 3, 4, 5, 6].find((l) => editor.isActive('heading', { level: l })) ?? null,
+            canUndo: editor.can().undo(),
+            canRedo: editor.can().redo(),
+        }),
+    });
+    const styleLabel = state.headingLevel != null
+        ? translate('richText.heading', { level: state.headingLevel })
+        : translate('richText.paragraph');
+    return (_jsxs(Toolbar, { className: "h-10 flex-wrap gap-0.5 rounded-none border-x-0 border-t-0 bg-muted/30 px-1.5", children: [_jsxs(DropdownMenu, { children: [_jsx(DropdownMenuTrigger, { asChild: true, children: _jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "h-7 gap-1 px-2 font-medium", onMouseDown: (e) => e.preventDefault(), children: [styleLabel, _jsx(ChevronDown, { className: "size-3 opacity-60" })] }) }), _jsxs(DropdownMenuContent, { align: "start", className: "min-w-40", children: [_jsxs(DropdownMenuItem, { onSelect: () => editor.chain().focus().setParagraph().run(), children: [_jsx(Pilcrow, { className: "size-3.5" }), " ", translate('richText.paragraph')] }), [1, 2, 3].map((level) => (_jsxs(DropdownMenuItem, { onSelect: () => editor.chain().focus().toggleHeading({ level }).run(), children: [_jsxs("span", { className: "w-3.5 text-center text-xs font-semibold", children: ["H", level] }), ' ', translate('richText.heading', { level })] }, level)))] })] }), _jsx(ToolbarSeparator, {}), _jsxs(ToolbarGroup, { children: [_jsx(ToolbarButton, { active: state.bold, label: translate('richText.bold'), onClick: () => editor.chain().focus().toggleBold().run(), children: _jsx(Bold, { className: "size-3.5" }) }), _jsx(ToolbarButton, { active: state.italic, label: translate('richText.italic'), onClick: () => editor.chain().focus().toggleItalic().run(), children: _jsx(Italic, { className: "size-3.5" }) }), _jsx(ToolbarButton, { active: state.underline, label: translate('richText.underline'), onClick: () => editor.chain().focus().toggleUnderline().run(), children: _jsx(Underline, { className: "size-3.5" }) }), _jsx(ToolbarButton, { active: state.strike, label: translate('richText.strike'), onClick: () => editor.chain().focus().toggleStrike().run(), children: _jsx(Strikethrough, { className: "size-3.5" }) }), _jsx(ToolbarButton, { active: state.code, label: translate('richText.code'), onClick: () => editor.chain().focus().toggleCode().run(), children: _jsx(Code, { className: "size-3.5" }) })] }), _jsx(ToolbarSeparator, {}), _jsxs(ToolbarGroup, { children: [_jsx(ToolbarButton, { active: state.bulletList, label: translate('richText.bulletList'), onClick: () => editor.chain().focus().toggleBulletList().run(), children: _jsx(List, { className: "size-3.5" }) }), _jsx(ToolbarButton, { active: state.orderedList, label: translate('richText.orderedList'), onClick: () => editor.chain().focus().toggleOrderedList().run(), children: _jsx(ListOrdered, { className: "size-3.5" }) }), _jsx(ToolbarButton, { active: state.blockquote, label: translate('richText.blockquote'), onClick: () => editor.chain().focus().toggleBlockquote().run(), children: _jsx(Quote, { className: "size-3.5" }) }), _jsx(ToolbarButton, { active: state.codeBlock, label: translate('richText.codeBlock'), onClick: () => editor.chain().focus().toggleCodeBlock().run(), children: _jsx(SquareCode, { className: "size-3.5" }) }), _jsx(ToolbarButton, { active: false, label: translate('richText.horizontalRule'), onClick: () => editor.chain().focus().setHorizontalRule().run(), children: _jsx(Minus, { className: "size-3.5" }) })] }), _jsx(ToolbarSeparator, {}), _jsxs(ToolbarGroup, { children: [_jsx(LinkControl, { editor: editor, targets: targets }), onOpenImage ? (_jsx(ToolbarButton, { label: translate('richText.image.add'), onClick: onOpenImage, children: _jsx(ImagePlus, { className: "size-3.5" }) })) : null, onOpenEmbed ? (_jsx(ToolbarButton, { label: translate('richText.embed.add'), onClick: onOpenEmbed, children: _jsx(Blocks, { className: "size-3.5" }) })) : null] }), _jsx("div", { className: "flex-1" }), _jsxs(ToolbarGroup, { children: [_jsx(ToolbarButton, { active: false, disabled: !state.canUndo, label: translate('richText.undo'), onClick: () => editor.chain().focus().undo().run(), children: _jsx(Undo2, { className: "size-3.5" }) }), _jsx(ToolbarButton, { active: false, disabled: !state.canRedo, label: translate('richText.redo'), onClick: () => editor.chain().focus().redo().run(), children: _jsx(Redo2, { className: "size-3.5" }) })] })] }));
+}
+//# sourceMappingURL=toolbar.js.map