@caretcms/core 0.2.0 → 0.4.0

package/static/cms/editor/section-controls/utils.js

@@ -1,33 +1,40 @@
 import { SPACING_Y_VALUES } from './constants.js';
 
+/** @param {string} key @returns {string} */
 export function humanizeSectionKey(key) {
   const short = key.startsWith('home.') ? key.slice('home.'.length) : key;
   return short.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase());
 }
 
+/** @param {unknown} value @returns {string | undefined} */
 export function normalizeSpacingY(value) {
   if (typeof value !== 'string') return undefined;
   return SPACING_Y_VALUES.includes(value) && value !== 'default' ? value : undefined;
 }
 
+/** @param {unknown} value @returns {string} */
 export function spacingToken(value) {
   return normalizeSpacingY(value) || 'default';
 }
 
+/** @param {unknown} value @returns {number} */
 export function spacingIndex(value) {
   const idx = SPACING_Y_VALUES.indexOf(spacingToken(value));
   return idx === -1 ? 0 : idx;
 }
 
+/** @param {unknown} value @returns {string} */
 export function spacingButtonLabel(value) {
   const token = spacingToken(value);
   return token === 'default' ? 'Space' : `Space:${token}`;
 }
 
+/** @param {unknown} value @returns {value is Record<string, unknown>} */
 export function isRecord(value) {
   return typeof value === 'object' && value !== null && !Array.isArray(value);
 }
 
+/** @param {string} key @returns {string} */
 export function generateSectionId(key) {
   return `sec-${key.replace(/\./g, '-')}-${Date.now().toString(36)}-${Math.random()
     .toString(36)

package/static/cms/editor/section-controls.css

@@ -25,7 +25,6 @@
 .cms-section-editable.cms-section-disabled-preview .cms-section-chip {
   opacity: 1;
   transform: translateY(0);
-  pointer-events: auto;
 }
 
 .cms-highlight-all .cms-section-editable {
@@ -57,7 +56,6 @@
 .cms-section-controls:focus-within {
   opacity: 1;
   transform: translateY(0);
-  pointer-events: auto;
 }
 
 .cms-section-chip {
@@ -112,6 +110,14 @@
   padding: 5px 7px;
   cursor: pointer;
   transition: all 0.16s ease;
+  pointer-events: none;
+}
+
+.cms-section-editable:hover .cms-section-btn,
+.cms-section-editable.cms-section-active .cms-section-btn,
+.cms-section-controls:focus-within .cms-section-btn,
+.cms-section-editable.cms-section-disabled-preview .cms-section-btn {
+  pointer-events: auto;
 }
 
 .cms-section-btn:hover {
@@ -173,7 +179,6 @@ body.cms-section-dragging .cms-section-controls {
 .cms-section-editable.cms-section-active .cms-section-boundary-actions,
 body.cms-spacing-dragging .cms-section-boundary-actions {
   opacity: 1;
-  pointer-events: auto;
 }
 
 .cms-section-insert-handle {
@@ -189,6 +194,7 @@ body.cms-spacing-dragging .cms-section-boundary-actions {
   cursor: pointer;
   box-shadow: 0 8px 18px rgba(0, 0, 0, 0.26);
   transition: border-color 0.16s ease, transform 0.16s ease, background 0.16s ease;
+  pointer-events: none;
 }
 
 .cms-section-insert-plus {
@@ -224,6 +230,15 @@ body.cms-spacing-dragging .cms-section-boundary-actions {
   cursor: ns-resize;
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
   transition: border-color 0.16s ease, color 0.16s ease, background 0.16s ease;
+  pointer-events: none;
+}
+
+.cms-section-editable:hover .cms-section-insert-handle,
+.cms-section-editable.cms-section-active .cms-section-insert-handle,
+.cms-section-editable:hover .cms-section-gap-handle,
+.cms-section-editable.cms-section-active .cms-section-gap-handle,
+body.cms-spacing-dragging .cms-section-gap-handle {
+  pointer-events: auto;
 }
 
 .cms-section-gap-grip {

package/static/cms/editor/security.js

@@ -1,15 +1,24 @@
 import { CLOUD, getCloudSessionToken, isCloudMode } from './config.js';
 
+/**
+ * @param {string} action
+ * @returns {Promise<string | null>}
+ */
 async function getTurnstileToken(action) {
-  if (typeof window.cmsGetTurnstileToken !== 'function') return null;
+  const getToken = /** @type {Window & { cmsGetTurnstileToken?: (action: string) => unknown }} */ (
+    window
+  ).cmsGetTurnstileToken;
+  if (typeof getToken !== 'function') return null;
   try {
-    return await window.cmsGetTurnstileToken(action);
+    const token = await getToken(action);
+    return typeof token === 'string' && token.trim() ? token.trim() : null;
   } catch {
     return null;
   }
 }
 
 export async function mutateHeaders() {
+  /** @type {Record<string, string>} */
   const headers = { 'Content-Type': 'application/json', 'x-caret-request': '1' };
   if (isCloudMode()) {
     if (CLOUD?.publicToken) headers['x-caret-token'] = CLOUD.publicToken;
@@ -24,6 +33,7 @@ export async function mutateHeaders() {
 }
 
 export function readHeaders() {
+  /** @type {Record<string, string>} */
   const headers = {};
   if (isCloudMode()) {
     if (CLOUD?.publicToken) headers['x-caret-token'] = CLOUD.publicToken;
@@ -34,6 +44,7 @@ export function readHeaders() {
 }
 
 export async function uploadHeaders() {
+  /** @type {Record<string, string>} */
   const headers = { 'x-caret-request': '1' };
   if (isCloudMode()) {
     if (CLOUD?.publicToken) headers['x-caret-token'] = CLOUD.publicToken;

package/static/cms/editor/stega-hydrate.js

@@ -12,6 +12,7 @@
  * Decode logic mirrors runtime/stega.ts (the editor bundle is hand-authored JS,
  * separate from the TS runtime, so the few lines are intentionally duplicated).
  */
+import { parseCaretAttr } from './helpers.js';
 
 const TAG_BASE = 0xe0000;
 const TAG_MAX = 0xe007f;
@@ -19,12 +20,14 @@ const START = String.fromCodePoint(TAG_BASE + 0x00);
 const END = String.fromCodePoint(TAG_BASE + 0x01);
 const TAG_RE = /[\u{E0000}-\u{E007F}]/gu;
 
+/** @param {string} b64 @returns {string} */
 function fromBase64(b64) {
   const binary = atob(b64);
   const bytes = Uint8Array.from(binary, (c) => c.charCodeAt(0));
   return new TextDecoder().decode(bytes);
 }
 
+/** @param {string} value @returns {unknown} */
 export function stegaDecode(value) {
   const start = value.indexOf(START);
   if (start === -1) return undefined;
@@ -43,6 +46,7 @@ export function stegaDecode(value) {
   }
 }
 
+/** @param {string} value @returns {string} */
 export function stegaClean(value) {
   return value.replace(TAG_RE, '');
 }
@@ -51,28 +55,37 @@ export function stegaClean(value) {
  * Find every stega-tagged text node under `root`, decode its key, strip the
  * invisible characters, and tag the containing element with `data-caret`.
  * Returns the number of elements newly promoted.
+ * @param {Node | null} [root]
+ * @returns {number}
  */
 export function hydrateStega(root) {
   const scope = root || document.body;
   if (!scope) return 0;
 
   const walker = document.createTreeWalker(scope, NodeFilter.SHOW_TEXT);
+  /** @type {Text[]} */
   const tagged = [];
   let node = walker.nextNode();
   while (node) {
-    if (node.nodeValue && node.nodeValue.indexOf(START) !== -1) tagged.push(node);
+    if (node instanceof Text && node.nodeValue && node.nodeValue.indexOf(START) !== -1) {
+      tagged.push(node);
+    }
     node = walker.nextNode();
   }
 
   let promoted = 0;
   for (const textNode of tagged) {
-    const key = stegaDecode(textNode.nodeValue);
+    const value = textNode.nodeValue || '';
+    const key = stegaDecode(value);
     // Always strip the invisible characters so they never affect layout/copy.
-    textNode.nodeValue = stegaClean(textNode.nodeValue);
-    if (typeof key !== 'string' || key.indexOf('::') === -1) continue;
+    textNode.nodeValue = stegaClean(value);
+    if (typeof key !== 'string') continue;
+    const binding = parseCaretAttr(key);
+    if (!binding?.collection || !binding.id) continue;
 
     const el = textNode.parentElement;
     if (!el || el.hasAttribute('data-caret')) continue; // explicit attr wins
+    if (el.closest('script, style, template, noscript')) continue;
     el.setAttribute('data-caret', key);
     promoted++;
   }