velo-text 1.0.0-beta.1

package/schemas/portable-doc-v1.json

@@ -0,0 +1,250 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "https://velo-text.dev/schemas/portable-doc-v1.json",
+  "title": "PortableDocument v1",
+  "type": "object",
+  "required": ["schema", "schemaVersion", "id", "revision", "locale", "direction", "createdAt", "updatedAt", "metadata", "page", "root", "assets"],
+  "properties": {
+    "schema": { "const": "portable-doc" },
+    "schemaVersion": { "const": 1 },
+    "id": { "type": "string", "minLength": 1 },
+    "revision": { "type": "integer", "minimum": 0 },
+    "locale": { "type": "string", "examples": ["es-AR", "en-US"] },
+    "direction": { "enum": ["ltr", "rtl", "auto"] },
+    "createdAt": { "type": "string", "format": "date-time" },
+    "updatedAt": { "type": "string", "format": "date-time" },
+    "metadata": { "type": "object" },
+    "page": {
+      "type": "object",
+      "required": ["widthUm", "heightUm", "marginUm"],
+      "properties": {
+        "widthUm": { "type": "integer", "minimum": 1 },
+        "heightUm": { "type": "integer", "minimum": 1 },
+        "marginUm": {
+          "type": "object",
+          "required": ["top", "right", "bottom", "left"],
+          "properties": {
+            "top": { "type": "integer", "minimum": 0 },
+            "right": { "type": "integer", "minimum": 0 },
+            "bottom": { "type": "integer", "minimum": 0 },
+            "left": { "type": "integer", "minimum": 0 }
+          }
+        }
+      }
+    },
+    "root": {
+      "type": "object",
+      "required": ["type", "id", "children"],
+      "properties": {
+        "type": { "const": "root" },
+        "id": { "type": "string" },
+        "children": { "type": "array", "items": { "$ref": "#/definitions/blockNode" } }
+      }
+    },
+    "assets": {
+      "type": "object",
+      "additionalProperties": { "$ref": "#/definitions/assetRef" }
+    }
+  },
+  "definitions": {
+    "textMarks": {
+      "type": "object",
+      "properties": {
+        "bold": { "type": "boolean" },
+        "italic": { "type": "boolean" },
+        "underline": { "type": "boolean" },
+        "strike": { "type": "boolean" },
+        "code": { "type": "boolean" },
+        "color": { "type": "string", "pattern": "^#([0-9A-Fa-f]{6}|[0-9A-Fa-f]{8})$" },
+        "background": { "type": "string" },
+        "fontSizePt": { "type": "number" },
+        "fontFamily": { "type": "string" }
+      }
+    },
+    "inlineNode": {
+      "oneOf": [
+        { "$ref": "#/definitions/textNode" },
+        { "$ref": "#/definitions/variableNode" },
+        { "$ref": "#/definitions/linkNode" },
+        { "$ref": "#/definitions/inlineImageNode" },
+        { "$ref": "#/definitions/hardBreakNode" },
+        { "$ref": "#/definitions/inlineEquationNode" }
+      ]
+    },
+    "textNode": {
+      "type": "object",
+      "required": ["type", "id", "text"],
+      "properties": {
+        "type": { "const": "text" },
+        "id": { "type": "string" },
+        "text": { "type": "string" },
+        "marks": { "$ref": "#/definitions/textMarks" }
+      }
+    },
+    "variableNode": {
+      "type": "object",
+      "required": ["type", "id", "path", "source", "valueType"],
+      "properties": {
+        "type": { "const": "variable" },
+        "id": { "type": "string" },
+        "path": { "type": "string", "pattern": "^[a-zA-Z_][a-zA-Z0-9_]*(\\.[a-zA-Z_][a-zA-Z0-9_]*|\\[\\d+\\])*$" },
+        "source": { "type": "string" },
+        "valueType": { "enum": ["string", "number", "date", "boolean", "image", "unknown"] },
+        "format": { "type": "string" },
+        "fallback": { "type": "string" },
+        "marks": { "$ref": "#/definitions/textMarks" }
+      }
+    },
+    "linkNode": {
+      "type": "object",
+      "required": ["type", "id", "href", "children"],
+      "properties": {
+        "type": { "const": "link" },
+        "id": { "type": "string" },
+        "href": { "type": "string" },
+        "children": { "type": "array", "items": { "$ref": "#/definitions/textNode" } }
+      }
+    },
+    "inlineImageNode": {
+      "type": "object",
+      "required": ["type", "id", "assetId"],
+      "properties": {
+        "type": { "const": "inline-image" },
+        "id": { "type": "string" },
+        "assetId": { "type": "string" }
+      }
+    },
+    "hardBreakNode": {
+      "type": "object",
+      "required": ["type", "id"],
+      "properties": {
+        "type": { "const": "hard-break" },
+        "id": { "type": "string" }
+      }
+    },
+    "inlineEquationNode": {
+      "type": "object",
+      "required": ["type", "id", "latex"],
+      "properties": {
+        "type": { "const": "equation" },
+        "id": { "type": "string" },
+        "latex": { "type": "string", "minLength": 1, "maxLength": 2000 },
+        "display": { "type": "boolean" }
+      }
+    },
+    "blockNode": {
+      "oneOf": [
+        { "$ref": "#/definitions/paragraphNode" }, { "$ref": "#/definitions/headingNode" }, { "$ref": "#/definitions/quoteNode" },
+        { "$ref": "#/definitions/listNode" }, { "$ref": "#/definitions/tableNode" }, { "$ref": "#/definitions/imageBlockNode" },
+        { "$ref": "#/definitions/pageBreakNode" }, { "$ref": "#/definitions/horizontalRuleNode" }, { "$ref": "#/definitions/equationBlockNode" },
+        { "$ref": "#/definitions/columnsNode" }
+      ]
+    },
+    "paragraphNode": {
+      "type": "object",
+      "required": ["type", "id", "children"],
+      "properties": {
+        "type": { "const": "paragraph" },
+        "id": { "type": "string" },
+        "children": { "type": "array", "items": { "$ref": "#/definitions/inlineNode" } },
+        "align": { "enum": ["left", "center", "right", "justify"] }
+      }
+    },
+    "headingNode": {
+      "type": "object",
+      "required": ["type", "id", "level", "children"],
+      "properties": {
+        "type": { "const": "heading" },
+        "id": { "type": "string" },
+        "level": { "enum": [1, 2, 3, 4, 5, 6] },
+        "children": { "type": "array", "items": { "$ref": "#/definitions/inlineNode" } }
+      }
+    },
+    "quoteNode": {
+      "type": "object",
+      "required": ["type", "id", "children"],
+      "properties": {
+        "type": { "const": "quote" },
+        "id": { "type": "string" },
+        "children": { "type": "array", "items": { "$ref": "#/definitions/inlineNode" } }
+      }
+    },
+    "listNode": {
+      "type": "object",
+      "required": ["type", "id", "kind", "items"],
+      "properties": {
+        "type": { "const": "list" },
+        "id": { "type": "string" },
+        "kind": { "enum": ["ordered", "unordered"] },
+        "items": { "type": "array", "items": { "$ref": "#/definitions/listItem" } }
+      }
+    },
+    "listItem": {
+      "type": "object",
+      "required": ["id", "content"],
+      "properties": {
+        "id": { "type": "string" },
+        "content": { "type": "array", "items": { "$ref": "#/definitions/inlineNode" } }
+      }
+    },
+    "tableNode": {
+      "type": "object",
+      "required": ["type", "id", "columns", "rows"],
+      "properties": {
+        "type": { "const": "table" },
+        "id": { "type": "string" },
+        "columns": { "type": "array" },
+        "rows": { "type": "array" }
+      }
+    },
+    "imageBlockNode": {
+      "type": "object",
+      "required": ["type", "id", "assetId"],
+      "properties": {
+        "type": { "const": "image" },
+        "id": { "type": "string" },
+        "assetId": { "type": "string" }
+      }
+    },
+    "pageBreakNode": {
+      "type": "object",
+      "required": ["type", "id"],
+      "properties": {
+        "type": { "const": "page-break" },
+        "id": { "type": "string" }
+      }
+    },
+    "horizontalRuleNode": {
+      "type": "object",
+      "required": ["type", "id"],
+      "properties": { "type": { "const": "horizontal-rule" }, "id": { "type": "string" } }
+    },
+    "equationBlockNode": {
+      "type": "object",
+      "required": ["type", "id", "latex"],
+      "properties": {
+        "type": { "const": "equation-block" },
+        "id": { "type": "string" },
+        "latex": { "type": "string", "minLength": 1, "maxLength": 2000 }, "label": { "type": "string" }
+      }
+    },
+    "columnsNode": {
+      "type": "object",
+      "required": ["type", "id", "columns"],
+      "properties": { "type": { "const": "columns" }, "id": { "type": "string" }, "columns": { "type": "array" }, "gapUm": { "type": "integer" } }
+    },
+    "assetRef": {
+      "type": "object",
+      "required": ["id", "kind", "mediaType", "storageKey", "sha256", "byteLength", "alt"],
+      "properties": {
+        "id": { "type": "string" },
+        "kind": { "const": "image" },
+        "mediaType": { "enum": ["image/png", "image/jpeg", "image/webp", "image/svg+xml"] },
+        "storageKey": { "type": "string" },
+        "sha256": { "type": "string", "pattern": "^[a-f0-9]{64}$" },
+        "byteLength": { "type": "integer", "minimum": 0 },
+        "alt": { "type": "string" }
+      }
+    }
+  }
+}

package/themes/base.css

@@ -0,0 +1,71 @@
+[data-pde-theme="light-neutral"] {
+  --pde-color-bg: #ffffff;
+  --pde-color-surface: #f7f8fa;
+  --pde-color-text: #17191c;
+  --pde-color-muted: #667085;
+  --pde-color-border: #d8dce3;
+  --pde-color-primary: #3659e3;
+  --pde-color-primary-contrast: #ffffff;
+  --pde-color-selection: #cbd7ff;
+  --pde-color-variable-bg: #e8efff;
+  --pde-color-variable-text: #1939a3;
+  --pde-color-danger: #b42318;
+  --pde-shadow-panel: 0 8px 24px rgb(0 0 0 / 12%);
+  --pde-radius-sm: 4px;
+  --pde-radius-md: 8px;
+  --pde-font-ui: system-ui, sans-serif;
+}
+
+[data-pde-theme="light-warm"] {
+  --pde-color-bg: #fffaf3;
+  --pde-color-surface: #fef3e2;
+  --pde-color-text: #2b2111;
+  --pde-color-muted: #8a7a65;
+  --pde-color-border: #e8ddd0;
+  --pde-color-primary: #b54708;
+  --pde-color-primary-contrast: #ffffff;
+  --pde-color-selection: #ffdfb0;
+  --pde-color-variable-bg: #fff0d6;
+  --pde-color-variable-text: #8a3d00;
+  --pde-color-danger: #b42318;
+  --pde-shadow-panel: 0 8px 24px rgb(0 0 0 / 12%);
+  --pde-radius-sm: 4px;
+  --pde-radius-md: 8px;
+  --pde-font-ui: system-ui, sans-serif;
+}
+
+[data-pde-theme="dark-slate"] {
+  --pde-color-bg: #0f172a;
+  --pde-color-surface: #1e293b;
+  --pde-color-text: #e2e8f0;
+  --pde-color-muted: #94a3b8;
+  --pde-color-border: #334155;
+  --pde-color-primary: #60a5fa;
+  --pde-color-primary-contrast: #0f172a;
+  --pde-color-selection: #1d4ed8;
+  --pde-color-variable-bg: #1e3a5f;
+  --pde-color-variable-text: #93c5fd;
+  --pde-color-danger: #f87171;
+  --pde-shadow-panel: 0 8px 24px rgb(0 0 0 / 40%);
+  --pde-radius-sm: 4px;
+  --pde-radius-md: 8px;
+  --pde-font-ui: system-ui, sans-serif;
+}
+
+[data-pde-theme="dark-contrast"] {
+  --pde-color-bg: #000000;
+  --pde-color-surface: #1a1a1a;
+  --pde-color-text: #ffffff;
+  --pde-color-muted: #a3a3a3;
+  --pde-color-border: #404040;
+  --pde-color-primary: #ffffff;
+  --pde-color-primary-contrast: #000000;
+  --pde-color-selection: #3b82f6;
+  --pde-color-variable-bg: #262626;
+  --pde-color-variable-text: #ffffff;
+  --pde-color-danger: #ff4444;
+  --pde-shadow-panel: 0 8px 24px rgb(255 255 255 / 12%);
+  --pde-radius-sm: 4px;
+  --pde-radius-md: 8px;
+  --pde-font-ui: system-ui, sans-serif;
+}

package/themes/components.css

@@ -0,0 +1,135 @@
+@import "./editor-chrome.css";
+@import "./editor-overlays.css";
+@import "./editor-columns.css";
+
+[data-pde-theme="light-neutral"] {
+  --pde-color-bg: #ffffff;
+  --pde-color-surface: #f7f8fa;
+  --pde-color-text: #17191c;
+  --pde-color-muted: #667085;
+  --pde-color-border: #d8dce3;
+  --pde-color-primary: #3659e3;
+  --pde-color-primary-contrast: #ffffff;
+  --pde-color-selection: #cbd7ff;
+  --pde-color-variable-bg: #e8efff;
+  --pde-color-variable-text: #1939a3;
+  --pde-color-danger: #b42318;
+  --pde-shadow-panel: 0 8px 24px rgb(0 0 0 / 12%);
+  --pde-radius-sm: 4px;
+  --pde-radius-md: 8px;
+  --pde-font-ui: system-ui, sans-serif;
+}
+
+[data-pde-theme="light-warm"] {
+  --pde-color-bg: #fffaf3;
+  --pde-color-surface: #fef3e2;
+  --pde-color-text: #2b2111;
+  --pde-color-muted: #8a7a65;
+  --pde-color-border: #e8ddd0;
+  --pde-color-primary: #b54708;
+  --pde-color-primary-contrast: #ffffff;
+  --pde-color-selection: #ffdfb0;
+  --pde-color-variable-bg: #fff0d6;
+  --pde-color-variable-text: #8a3d00;
+  --pde-color-danger: #b42318;
+  --pde-shadow-panel: 0 8px 24px rgb(0 0 0 / 12%);
+  --pde-radius-sm: 4px;
+  --pde-radius-md: 8px;
+  --pde-font-ui: system-ui, sans-serif;
+}
+
+[data-pde-theme="dark-slate"] {
+  --pde-color-bg: #0f172a;
+  --pde-color-surface: #1e293b;
+  --pde-color-text: #e2e8f0;
+  --pde-color-muted: #94a3b8;
+  --pde-color-border: #334155;
+  --pde-color-primary: #60a5fa;
+  --pde-color-primary-contrast: #0f172a;
+  --pde-color-selection: #1d4ed8;
+  --pde-color-variable-bg: #1e3a5f;
+  --pde-color-variable-text: #93c5fd;
+  --pde-color-danger: #f87171;
+  --pde-shadow-panel: 0 8px 24px rgb(0 0 0 / 40%);
+  --pde-radius-sm: 4px;
+  --pde-radius-md: 8px;
+  --pde-font-ui: system-ui, sans-serif;
+}
+
+[data-pde-theme="dark-contrast"] {
+  --pde-color-bg: #000000;
+  --pde-color-surface: #1a1a1a;
+  --pde-color-text: #ffffff;
+  --pde-color-muted: #a3a3a3;
+  --pde-color-border: #404040;
+  --pde-color-primary: #ffffff;
+  --pde-color-primary-contrast: #000000;
+  --pde-color-selection: #3b82f6;
+  --pde-color-variable-bg: #262626;
+  --pde-color-variable-text: #ffffff;
+  --pde-color-danger: #ff4444;
+  --pde-shadow-panel: 0 8px 24px rgb(255 255 255 / 12%);
+  --pde-radius-sm: 4px;
+  --pde-radius-md: 8px;
+  --pde-font-ui: system-ui, sans-serif;
+}
+
+/* === Equations (src/core/equation/index.ts:equationCss) === */
+
+.pde-equation {
+  font-family: "Cambria Math", "Latin Modern Math", "STIX Two Math", serif;
+  display: inline-block;
+  vertical-align: middle;
+  background: var(--pde-color-surface, #f7f8fa);
+  border: 1px solid var(--pde-color-border, #d8dce3);
+  border-radius: var(--pde-radius-sm, 4px);
+  padding: 1px 6px;
+  margin: 4px;
+  white-space: nowrap;
+  color: var(--pde-color-text, #17191c);
+}
+.pde-equation sup {
+  font-size: 0.72em;
+  vertical-align: super;
+  line-height: 0;
+}
+.pde-equation sub {
+  font-size: 0.72em;
+  vertical-align: sub;
+  line-height: 0;
+}
+.pde-equation--block {
+  display: block;
+  text-align: center;
+  margin: 12px auto;
+  padding: 8px 12px;
+  max-width: 90%;
+  white-space: normal;
+}
+.pde-frac { display: inline-block; vertical-align: middle; text-align: center; margin: 0 2px; line-height: 1.15; }
+.pde-frac-num { display: block; border-bottom: 1.5px solid currentColor; padding: 0 5px 1px; }
+.pde-frac-den { display: block; padding: 1px 5px 0; }
+.pde-sqrt { display: inline-flex; align-items: stretch; vertical-align: middle; }
+.pde-sqrt-sym { width: 0.62em; min-height: 1.05em; flex-shrink: 0; display: block; overflow: visible; }
+.pde-sqrt-inner { border-top: 1.35px solid currentColor; padding: 0.08em 0.28em 0.06em 0.04em; margin-left: -1px; line-height: 1.2; }
+
+
+/* === Icons (src/assets/icons/index.ts:iconCss) === */
+
+.pde-icon {
+  display: inline-block;
+  vertical-align: middle;
+  flex-shrink: 0;
+  color: var(--pde-icon-color, currentColor);
+}
+.pde-toolbar .pde-icon {
+  color: var(--pde-color-text, #17191c);
+}
+.pde-toolbar button:hover .pde-icon,
+.pde-toolbar button[aria-pressed="true"] .pde-icon {
+  color: var(--pde-color-primary, #3659e3);
+}
+.pde-toolbar button:disabled .pde-icon {
+  color: var(--pde-color-muted, #667085);
+  opacity: 0.5;
+}

package/themes/editor-chrome.css

@@ -0,0 +1,174 @@
+/* === Editor chrome (block handles, menus, resize, selection, tables) === */
+
+.pde-editor {
+  position: relative;
+  outline: none;
+  padding: 28px 40px 48px 64px;
+  background: var(--pde-color-bg);
+  color: var(--pde-color-text);
+  font-family: var(--pde-font-ui);
+  line-height: 1.6;
+}
+.pde-editor ::selection,
+.pde-root ::selection {
+  background: var(--pde-color-selection, #cbd7ff);
+}
+.pde-editor:focus-visible {
+  outline: 2px solid var(--pde-color-primary, #3659e3);
+  outline-offset: -2px;
+}
+
+.pde-editor > p,
+.pde-editor > h1, .pde-editor > h2, .pde-editor > h3, .pde-editor > h4, .pde-editor > h5, .pde-editor > h6,
+.pde-editor > blockquote, .pde-editor > ul, .pde-editor > ol, .pde-editor > table, .pde-editor > figure,
+.pde-editor > hr, .pde-editor > div {
+  position: relative;
+}
+.pde-editor > p { margin: 0.85em 0; min-height: 1.2em; }
+.pde-editor > h1 { font-size: 2em; margin: 1.35em 0 0.55em; }
+.pde-editor > h2 { font-size: 1.5em; margin: 1.2em 0 0.45em; }
+.pde-editor > h3 { font-size: 1.17em; margin: 1.05em 0 0.4em; }
+.pde-editor > h4 { font-size: 1.05em; margin: 0.95em 0 0.35em; }
+.pde-editor > h5, .pde-editor > h6 { font-size: 1em; margin: 0.85em 0 0.3em; }
+.pde-editor > ul, .pde-editor > ol {
+  margin: 0.85em 0;
+  padding-left: 1.6em;
+}
+.pde-editor > p:first-child,
+.pde-editor > h1:first-child { margin-top: 0; }
+.pde-editor > blockquote {
+  border-left: 3px solid var(--pde-color-primary, #3659e3);
+  padding: 10px 14px 10px 16px;
+  margin: 1.1em 0;
+  color: var(--pde-color-muted);
+  background: var(--pde-color-surface);
+  border-radius: 0 var(--pde-radius-md) var(--pde-radius-md) 0;
+}
+.pde-editor > table,
+.pde-editor table.pde-table {
+  display: table;
+  table-layout: fixed;
+  border-collapse: collapse;
+  margin: 1.1em 0;
+  width: 100%;
+  min-width: 240px;
+  background: var(--pde-color-bg);
+  border: 1px solid var(--pde-color-border, #d8dce3);
+  overflow: visible;
+}
+.pde-editor table.pde-table td,
+.pde-editor table.pde-table th,
+.pde-editor td, .pde-editor th {
+  display: table-cell;
+  border: 1px solid var(--pde-color-border, #d8dce3);
+  padding: 8px 10px;
+  vertical-align: middle;
+  min-width: 64px;
+  min-height: 32px;
+  user-select: text;
+  -webkit-user-select: text;
+}
+.pde-editor table.pde-table--compact td,
+.pde-editor table.pde-table--compact th { padding: 2px 6px; }
+.pde-editor table.pde-table--large td,
+.pde-editor table.pde-table--large th { padding: 14px 12px; }
+.pde-editor table.pde-table th { background: var(--pde-color-surface); font-weight: 600; text-align: center; }
+.pde-editor table.pde-table--list td,
+.pde-editor table.pde-table--list th,
+.pde-editor table.pde-table--list-header td,
+.pde-editor table.pde-table--list-header th {
+  border-left: none;
+  border-right: none;
+}
+.pde-editor table.pde-table--banded-rows tbody tr:nth-child(even) td,
+.pde-editor table.pde-table--banded-rows tbody tr:nth-child(even) th {
+  background: #f4f7ff;
+}
+.pde-editor table.pde-table--banded-cols td:nth-child(even),
+.pde-editor table.pde-table--banded-cols th:nth-child(even) {
+  background: #f7f8fa;
+}
+.pde-editor table.pde-table--first-col td:first-child,
+.pde-editor table.pde-table--first-col th:first-child,
+.pde-editor table.pde-table--list-header td:first-child {
+  background: #eef2ff;
+  font-weight: 600;
+}
+.pde-editor table.pde-table--last-col td:last-child,
+.pde-editor table.pde-table--last-col th:last-child {
+  background: #eef2ff;
+}
+.pde-editor table.pde-table--total-row tr:last-child td {
+  background: #e8efff;
+  font-weight: 600;
+}
+.pde-editor table.pde-table--grid th,
+.pde-editor table.pde-table--grid-banded th,
+.pde-editor table.pde-table--accent th,
+.pde-editor table.pde-table--list th,
+.pde-editor table.pde-table--list-header th {
+  background: #3659e3;
+  color: #fff;
+  border-color: #2d4bc4;
+}
+.pde-editor table.pde-table--accent td:first-child {
+  background: #eef2ff;
+  font-weight: 600;
+}
+.pde-editor figure.pde-image-block {
+  display: block;
+  width: 100%;
+  max-width: 100%;
+  margin: 1.1em 0;
+  text-align: left;
+}
+.pde-editor figure.pde-image-block img {
+  display: inline-block;
+  max-width: 100%;
+  height: auto;
+  vertical-align: top;
+  object-fit: contain;
+  border-radius: var(--pde-radius-md);
+  cursor: nwse-resize;
+}
+.pde-editor figure.pde-image-block img:not([src]) {
+  min-width: 120px;
+  max-height: 180px;
+  background: var(--pde-color-surface);
+}
+.pde-editor hr { border: none; border-top: 1px solid var(--pde-color-border); margin: 1.4em 0; }
+.pde-editor code {
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  font-size: 0.92em;
+  background: color-mix(in srgb, var(--pde-color-text) 10%, var(--pde-color-bg));
+  color: inherit;
+  padding: 0.1em 0.4em;
+  border: none;
+  border-radius: var(--pde-radius-sm);
+  box-shadow: none;
+  outline: none;
+  overflow: hidden;
+  background-clip: padding-box;
+}
+.pde-page-break {
+  margin: 1.6em 0;
+  border: 0;
+  border-top: 2px dashed var(--pde-color-border);
+  height: 0;
+}
+.pde-equation--block { margin: 1.2em auto; }
+.pde-editor .pde-inline-image {
+  height: 1.1em;
+  width: auto;
+  vertical-align: middle;
+  margin: 0 4px;
+}
+
+.pde-variable {
+  background: var(--pde-color-variable-bg, #e8efff);
+  color: var(--pde-color-variable-text, #1939a3);
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-size: 0.9em;
+  user-select: none;
+}