@prolibu-suite/cobalt-core 0.1.2 → 0.2.0

package/dist/collection/components/co-rich-text-toolbar/co-rich-text-toolbar.css

@@ -0,0 +1,55 @@
+/* ============================================================
+   co-rich-text-toolbar  —  formatting toolbar (shadow DOM)
+   ============================================================ */
+
+:host {
+  display: block;
+  font-family: var(--co-font-family-primary);
+}
+
+.co-rich-text-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--co-spacing-xxs, 2px);
+  padding: var(--co-spacing-xs) var(--co-spacing-sm);
+  border-bottom: 1px solid var(--co-semantic-border-subtle);
+  /* Light surface (white in light mode, dark in dark mode). NOTE: do NOT use
+     --co-semantic-surface-primary here — it resolves to base-negro (black). */
+  background: var(--co-semantic-surface-secondary);
+}
+
+.co-rich-text-toolbar__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  border: none;
+  border-radius: var(--co-border-radius-xxs);
+  background: transparent;
+  color: var(--co-semantic-text-secondary);
+  cursor: pointer;
+  transition: background 0.12s ease, color 0.12s ease;
+}
+
+.co-rich-text-toolbar__btn:hover:not(:disabled) {
+  background: var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.06));
+  color: var(--co-semantic-text-default);
+}
+
+.co-rich-text-toolbar__btn--active {
+  background: var(--co-semantic-surface-hover, rgba(37, 99, 235, 0.12));
+  color: var(--co-color-primary-azul);
+}
+
+.co-rich-text-toolbar__btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.co-rich-text-toolbar__btn:focus-visible {
+  outline: 2px solid var(--co-semantic-border-focus, var(--co-color-primary-azul));
+  outline-offset: 1px;
+}

package/dist/collection/components/co-rich-text-toolbar/co-rich-text-toolbar.js

@@ -0,0 +1,289 @@
+import { h } from "@stencil/core";
+/**
+ * Formatting toolbar for co-rich-text-editor. Receives the Tiptap editor
+ * instance via the `editor` JS property, runs commands, and reflects active
+ * state. Can also be placed standalone and wired to any editor instance.
+ *
+ * @part toolbar - The toolbar container
+ * @part button - A toolbar button
+ */
+export class CoRichTextToolbar {
+    constructor() {
+        /** Toolbar layout variant. */
+        this.variant = 'basic';
+        this.disabled = false;
+        this.items = [];
+        /** Bumped on every editor transaction to refresh active state. */
+        this.tick = 0;
+        this.onTransaction = () => { this.tick++; };
+        this.run = (item) => {
+            const editor = this.editor;
+            if (!editor || this.disabled)
+                return;
+            // Cast: link/undo/redo command types are registered by their extensions,
+            // which are bundled via StarterKit and not visible to core's TS view.
+            const chain = editor.chain().focus();
+            switch (item.action) {
+                case 'bold':
+                    chain.toggleBold().run();
+                    break;
+                case 'italic':
+                    chain.toggleItalic().run();
+                    break;
+                case 'underline':
+                    chain.toggleUnderline().run();
+                    break;
+                case 'strike':
+                    chain.toggleStrike().run();
+                    break;
+                case 'code':
+                    chain.toggleCode().run();
+                    break;
+                case 'bulletList':
+                    chain.toggleBulletList().run();
+                    break;
+                case 'orderedList':
+                    chain.toggleOrderedList().run();
+                    break;
+                case 'blockquote':
+                    chain.toggleBlockquote().run();
+                    break;
+                case 'heading':
+                    chain.toggleHeading(item.payload).run();
+                    break;
+                case 'undo':
+                    chain.undo().run();
+                    break;
+                case 'redo':
+                    chain.redo().run();
+                    break;
+                case 'link':
+                    this.toggleLink();
+                    break;
+                case 'image':
+                    this.insertImage();
+                    break;
+                default: chain.run();
+            }
+            this.coAction.emit({ action: item.action, payload: item.payload });
+        };
+    }
+    async componentWillLoad() {
+        const rt = await import('@prolibu-suite/cobalt-rich-text');
+        this.items = rt.toolbarItems(this.variant === 'none' ? 'compact' : this.variant);
+    }
+    async onVariantChange(v) {
+        const rt = await import('@prolibu-suite/cobalt-rich-text');
+        this.items = rt.toolbarItems((v === 'none' ? 'compact' : v));
+    }
+    onEditorChange(next, prev) {
+        prev === null || prev === void 0 ? void 0 : prev.off('transaction', this.onTransaction);
+        next === null || next === void 0 ? void 0 : next.on('transaction', this.onTransaction);
+        this.tick++;
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.editor) === null || _a === void 0 ? void 0 : _a.off('transaction', this.onTransaction);
+    }
+    isActive(item) {
+        if (!this.editor)
+            return false;
+        if (item.type !== 'toggle')
+            return false;
+        try {
+            return this.editor.isActive(item.action, item.payload);
+        }
+        catch (_a) {
+            return false;
+        }
+    }
+    /** Accept only fetchable URL schemes from the prompt (no javascript: etc.). */
+    static safeUrl(raw, schemes) {
+        var _a, _b;
+        const url = raw === null || raw === void 0 ? void 0 : raw.trim();
+        if (!url)
+            return null;
+        const scheme = (_b = (_a = /^([a-z][a-z0-9+.-]*):/i.exec(url)) === null || _a === void 0 ? void 0 : _a[1]) === null || _b === void 0 ? void 0 : _b.toLowerCase();
+        if (!scheme)
+            return url; // relative URL
+        return schemes.includes(scheme) ? url : null;
+    }
+    toggleLink() {
+        const editor = this.editor;
+        if (!editor)
+            return;
+        const chain = editor.chain().focus();
+        if (editor.isActive('link')) {
+            chain.unsetLink().run();
+            return;
+        }
+        const raw = typeof window !== 'undefined' ? window.prompt('Enter URL') : null;
+        const url = CoRichTextToolbar.safeUrl(raw, ['http', 'https', 'mailto', 'tel']);
+        if (url)
+            chain.setLink({ href: url }).run();
+    }
+    insertImage() {
+        const editor = this.editor;
+        if (!(editor === null || editor === void 0 ? void 0 : editor.schema.nodes.image))
+            return;
+        const raw = typeof window !== 'undefined' ? window.prompt('Image URL') : null;
+        const url = CoRichTextToolbar.safeUrl(raw, ['http', 'https']);
+        if (url)
+            editor.chain().focus().setImage({ src: url }).run();
+    }
+    /** Hide buttons whose node/mark isn't in the editor's schema — e.g. the
+     *  image button on the `full` toolbar with a preset that has no image node
+     *  (clicking it would call an unregistered command and throw). */
+    supportedBySchema(item) {
+        const editor = this.editor;
+        if (!editor)
+            return true; // optimistic until the editor is wired
+        const { nodes, marks } = editor.schema;
+        switch (item.action) {
+            case 'image': return !!nodes.image;
+            case 'bulletList': return !!nodes.bulletList;
+            case 'orderedList': return !!nodes.orderedList;
+            case 'blockquote': return !!nodes.blockquote;
+            case 'heading': return !!nodes.heading;
+            case 'code': return !!marks.code;
+            case 'underline': return !!marks.underline;
+            case 'strike': return !!marks.strike;
+            case 'link': return !!marks.link;
+            default: return true;
+        }
+    }
+    canRun(item) {
+        var _a, _b, _c, _d;
+        if (!this.editor || this.disabled)
+            return false;
+        const can = this.editor.can();
+        if (item.action === 'undo')
+            return (_b = (_a = can.undo) === null || _a === void 0 ? void 0 : _a.call(can)) !== null && _b !== void 0 ? _b : true;
+        if (item.action === 'redo')
+            return (_d = (_c = can.redo) === null || _c === void 0 ? void 0 : _c.call(can)) !== null && _d !== void 0 ? _d : true;
+        return true;
+    }
+    render() {
+        if (this.variant === 'none' || this.items.length === 0)
+            return null;
+        // reference tick so Stencil re-renders on selection changes
+        void this.tick;
+        return (h("div", { class: "co-rich-text-toolbar", role: "toolbar", "aria-label": "Formatting", part: "toolbar" }, this.items.filter((item) => this.supportedBySchema(item)).map((item) => {
+            var _a;
+            return (h("button", { key: `${item.action}-${JSON.stringify((_a = item.payload) !== null && _a !== void 0 ? _a : '')}`, type: "button", class: { 'co-rich-text-toolbar__btn': true, 'co-rich-text-toolbar__btn--active': this.isActive(item) }, title: item.label, "aria-label": item.label, "aria-pressed": item.type === 'toggle' ? String(this.isActive(item)) : undefined, disabled: !this.canRun(item), onMouseDown: (e) => e.preventDefault(), onClick: () => this.run(item), part: "button" }, h("co-icon", { name: item.icon, size: 18 })));
+        })));
+    }
+    static get is() { return "co-rich-text-toolbar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-rich-text-toolbar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-rich-text-toolbar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "editor": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Editor",
+                    "resolved": "Editor | undefined",
+                    "references": {
+                        "Editor": {
+                            "location": "import",
+                            "path": "@prolibu-suite/cobalt-rich-text",
+                            "id": "../rich-text/dist/index.d.ts::Editor",
+                            "referenceLocation": "Editor"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Editor instance (set as a property by the host editor)."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'none' | 'compact' | 'basic' | 'full'",
+                    "resolved": "\"basic\" | \"compact\" | \"full\" | \"none\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Toolbar layout variant."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'basic'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "items": {},
+            "tick": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "coAction",
+                "name": "coAction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted whenever a toolbar action runs (observability for hosts)."
+                },
+                "complexType": {
+                    "original": "{ action: string; payload?: unknown }",
+                    "resolved": "{ action: string; payload?: unknown; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get watchers() {
+        return [{
+                "propName": "variant",
+                "methodName": "onVariantChange"
+            }, {
+                "propName": "editor",
+                "methodName": "onEditorChange"
+            }];
+    }
+}

package/dist/collection/components/co-rich-text-viewer/co-rich-text-viewer.css

@@ -0,0 +1,78 @@
+/* ============================================================
+   co-rich-text-viewer  —  read-only renderer (shadow DOM)
+   ============================================================ */
+
+:host {
+  display: block;
+  font-family: var(--co-font-family-primary);
+  font-size: var(--co-font-size-14);
+  color: var(--co-semantic-text-default);
+  line-height: 1.5;
+}
+
+.co-rich-text-viewer {
+  padding: var(--co-spacing-md) 0;
+}
+.co-rich-text-viewer--compact {
+  padding: var(--co-spacing-sm) 0;
+}
+
+.co-rich-text-viewer--empty {
+  color: var(--co-semantic-text-muted);
+  font-style: italic;
+}
+
+.co-rich-text-viewer p { margin: 0 0 var(--co-spacing-sm); }
+.co-rich-text-viewer p:last-child { margin-bottom: 0; }
+
+.co-rich-text-viewer h1,
+.co-rich-text-viewer h2,
+.co-rich-text-viewer h3,
+.co-rich-text-viewer h4 {
+  margin: var(--co-spacing-md) 0 var(--co-spacing-sm);
+  font-weight: 600;
+  line-height: 1.3;
+}
+
+.co-rich-text-viewer ul,
+.co-rich-text-viewer ol {
+  padding-left: var(--co-spacing-xl);
+  margin: 0 0 var(--co-spacing-sm);
+}
+
+.co-rich-text-viewer blockquote {
+  border-left: 3px solid var(--co-semantic-border-subtle);
+  padding-left: var(--co-spacing-md);
+  margin: 0 0 var(--co-spacing-sm);
+  color: var(--co-semantic-text-secondary);
+}
+
+.co-rich-text-viewer a {
+  color: var(--co-color-primary-azul);
+  text-decoration: underline;
+}
+
+.co-rich-text-viewer img {
+  max-width: 100%;
+  height: auto;
+  border-radius: var(--co-border-radius-xs);
+  margin: var(--co-spacing-sm) 0;
+}
+
+.co-rich-text-viewer code {
+  font-family: var(--co-font-family-mono);
+  font-size: 0.9em;
+  background: var(--co-semantic-surface-hover, rgba(0, 0, 0, 0.06));
+  padding: 0.1em 0.3em;
+  border-radius: var(--co-border-radius-xxs);
+}
+
+.co-rich-text-viewer .co-rte-variable,
+.co-rich-text-viewer [data-variable] {
+  display: inline-block;
+  padding: 0.05em 0.4em;
+  border-radius: var(--co-border-radius-xxs);
+  background: var(--co-color-primary-azul);
+  color: var(--co-color-base-blanco, #fff);
+  font-size: 0.9em;
+}

package/dist/collection/components/co-rich-text-viewer/co-rich-text-viewer.js

@@ -0,0 +1,232 @@
+import { h } from "@stencil/core";
+// The `/sanitizer` subpath has no Tiptap import → tiny bundle. Stencil's
+// classic TS moduleResolution can't read package.json `exports`, so the
+// subpath is mapped in tsconfig `paths` (rollup resolves it via `exports`).
+import { sanitize } from "../../../../../rich-text/dist/sanitizer";
+/**
+ * Read-only renderer for rich-text content. For `format="html"` it only runs
+ * the package's canonical sanitizer (the `/sanitizer` subpath has no Tiptap
+ * import → tiny). `format="json"` lazily pulls the serializer to turn a
+ * ProseMirror document into sanitized HTML.
+ *
+ * @part content - The rendered content container
+ * @part empty - The empty-state element
+ */
+export class CoRichTextViewer {
+    constructor() {
+        /** HTML string (default) or ProseMirror JSON string. */
+        this.value = null;
+        /** Input format. `html` is the lightweight path. */
+        this.format = 'html';
+        /** Sanitization profile to apply. */
+        this.preset = 'document';
+        /** Reduced padding. */
+        this.compact = false;
+        this.html = '';
+    }
+    componentWillLoad() {
+        return this.compute();
+    }
+    watchInputs() {
+        return this.compute();
+    }
+    get parsedFeatures() {
+        if (!this.features)
+            return undefined;
+        if (typeof this.features === 'string') {
+            try {
+                return JSON.parse(this.features);
+            }
+            catch (_a) {
+                return undefined;
+            }
+        }
+        return this.features;
+    }
+    async compute() {
+        if (!this.value) {
+            this.html = '';
+            return;
+        }
+        if (this.format === 'html') {
+            this.html = sanitize(this.value, this.preset, this.parsedFeatures);
+            return;
+        }
+        // JSON mode — lazily import the serializer (pulls Tiptap on demand only).
+        try {
+            const doc = JSON.parse(this.value);
+            const rt = await import('@prolibu-suite/cobalt-rich-text');
+            this.html = rt.jsonToHtml(doc, this.preset, this.parsedFeatures);
+        }
+        catch (_a) {
+            this.html = '';
+        }
+    }
+    render() {
+        if (!this.html) {
+            return (h("div", { class: "co-rich-text-viewer co-rich-text-viewer--empty", part: "empty" }, this.emptyText || ''));
+        }
+        return (h("div", { class: { 'co-rich-text-viewer': true, 'co-rich-text-viewer--compact': this.compact }, part: "content", innerHTML: this.html }));
+    }
+    static get is() { return "co-rich-text-viewer"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["co-rich-text-viewer.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["co-rich-text-viewer.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | null",
+                    "resolved": "null | string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "HTML string (default) or ProseMirror JSON string."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value",
+                "defaultValue": "null"
+            },
+            "format": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'html' | 'json'",
+                    "resolved": "\"html\" | \"json\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Input format. `html` is the lightweight path."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "format",
+                "defaultValue": "'html'"
+            },
+            "preset": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "RichTextPreset",
+                    "resolved": "\"comment\" | \"document\" | \"email\" | \"task\"",
+                    "references": {
+                        "RichTextPreset": {
+                            "location": "import",
+                            "path": "@prolibu-suite/cobalt-rich-text",
+                            "id": "../rich-text/dist/index.d.ts::RichTextPreset",
+                            "referenceLocation": "RichTextPreset"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Sanitization profile to apply."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "preset",
+                "defaultValue": "'document'"
+            },
+            "features": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | object",
+                    "resolved": "object | string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Feature overrides used when the content was authored with them (JSON\nstring for HTML attr, or object via JS property) \u2014 keeps the whitelist\nin lock-step with the editor that produced the content."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "features"
+            },
+            "emptyText": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Text shown when there is no content."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "empty-text"
+            },
+            "compact": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Reduced padding."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "compact",
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "html": {}
+        };
+    }
+    static get watchers() {
+        return [{
+                "propName": "value",
+                "methodName": "watchInputs"
+            }, {
+                "propName": "format",
+                "methodName": "watchInputs"
+            }, {
+                "propName": "preset",
+                "methodName": "watchInputs"
+            }, {
+                "propName": "features",
+                "methodName": "watchInputs"
+            }];
+    }
+}

package/dist/collection/components/co-row/co-row.js

@@ -13,11 +13,11 @@ export class CoRow {
         this.size = 'sm';
     }
     render() {
-        return (h("div", { key: '368c70a0173c99d0b7f2b6438008998271a9bf42', class: {
+        return (h("div", { key: '23841a9145b930d4c9ccf77038132b6d62077395', class: {
                 'co-row': true,
                 [`co-row--${this.position}`]: true,
                 [`co-row--${this.size}`]: true,
-            }, part: "row" }, h("div", { key: '4766e3f0de343b06de936b61871e0c1e35703d52', class: "co-row__prefix" }, h("slot", { key: 'c705ca6d95787f4a5dd58fd82bf45eb81c1ab245', name: "prefix" })), h("div", { key: '73f07efd56ca95cf11196d87e292fb75b0f38fea', class: "co-row__content" }, h("slot", { key: '46c58feb7e058233707fc4f7aa3b8fcfe52f8e5e' })), h("div", { key: '58b87d77d70d0a0142963059cec5c36f947cb418', class: "co-row__suffix" }, h("slot", { key: '67562449f840f81bf30b611badd6e8d45858f449', name: "suffix" }))));
+            }, part: "row" }, h("div", { key: '2b3672bf156732fa74ae2cf88751678cd1acc6b3', class: "co-row__prefix" }, h("slot", { key: '663ad19611357ec125d8634fddbf3f3b897ae39b', name: "prefix" })), h("div", { key: '58deed652fad6d3f5b49b2b31855aa7f1b5e7784', class: "co-row__content" }, h("slot", { key: 'c5e73b4048c5aa2ba0f6ffc7e7d8c23d7f5d6e37' })), h("div", { key: 'd9cce5c7877f51ec5e79b493401e42b26fa426c1', class: "co-row__suffix" }, h("slot", { key: '741c8cf347a4046122eb01ae3001263d6c9d09d6', name: "suffix" }))));
     }
     static get is() { return "co-row"; }
     static get encapsulation() { return "shadow"; }