@sevenfold/setto-client 0.2.3 → 0.2.6

package/README.md

@@ -137,7 +137,7 @@ The `/admin` dashboard does **not** activate edit mode. Use **Begynn å redigere
 |--------|-----|
 | Edit text | Click any `<T>` element — it becomes `contentEditable` |
 | Edit section colours | Click a section or block background (not text) |
-| Follow a link | Ctrl/Cmd + click on nav links |
+| Follow a link | Ctrl/Cmd + click (desktop) · **Naviger ↗** chip when focused (touch) |
 | Publish | Top toolbar → **Publiser** |
 | Exit | Top toolbar → **Avslutt** (removes `?setto=edit`) |
 

package/dist/edit-mode/link-action-chip.d.ts

@@ -0,0 +1,11 @@
+import { type RefObject } from 'react';
+interface LinkActionChipProps {
+    anchorRef: RefObject<HTMLElement | null>;
+    visible: boolean;
+}
+/**
+ * Touch-only chip shown when editable link/button text is focused.
+ * Replaces Ctrl/Cmd+click on coarse-pointer devices.
+ */
+export declare function LinkActionChip({ anchorRef, visible }: LinkActionChipProps): import("react").ReactPortal | null;
+export {};

package/dist/lib/link-context.d.ts

@@ -0,0 +1,4 @@
+/** Editable text inside a navigation target (link or button), excluding language toggles. */
+export declare function isLinkContext(el: HTMLElement): boolean;
+/** Same as Ctrl/Cmd+click — follow the parent link or trigger the parent button. */
+export declare function activateLinkContext(el: HTMLElement): void;

package/dist/lib/place-caret-at-point.d.ts

@@ -0,0 +1,2 @@
+/** Place the text caret at viewport coordinates inside a contentEditable element. */
+export declare function placeCaretAtPoint(x: number, y: number, el: HTMLElement): void;

package/dist/lib/use-coarse-pointer.d.ts

@@ -0,0 +1,2 @@
+/** True on touch-first devices (phones, tablets without hover). */
+export declare function useCoarsePointer(): boolean;

package/dist/setto-client.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useEffect, useState, useRef, useLayoutEffect, createContext, useContext, useCallback, useMemo, useId, useSyncExternalStore, forwardRef } from "react";
+import { useEffect, useSyncExternalStore, useState, useRef, useLayoutEffect, createContext, useContext, useCallback, useMemo, useId, forwardRef } from "react";
 import { useTranslation } from "react-i18next";
 import { createPortal } from "react-dom";
 function __rest(s, e) {
@@ -20987,6 +20987,7 @@ function useSettoDocumentLayout(active) {
         html.setto-edit-mode #root {
           width: 100%;
           min-height: calc(100dvh - var(--setto-toolbar-height));
+          /* Containing block for position:fixed descendants so they sit below the toolbar. */
           transform: translateZ(0);
         }
 
@@ -21006,6 +21007,10 @@ function useSettoDocumentLayout(active) {
           z-index: 2147483645;
         }
 
+        html.setto-edit-mode #setto-hint-root [data-setto-ui] {
+          pointer-events: auto;
+        }
+
         html.setto-edit-mode #setto-section-toolbar-root {
           position: fixed;
           inset: 0;
@@ -21049,43 +21054,68 @@ function notifyLayoutChange() {
     window.dispatchEvent(new Event("resize"));
   });
 }
-const MARGIN$1 = 10;
-const OFFSET = 14;
+function isLinkContext(el) {
+  const key = el.getAttribute("data-setto-key");
+  if (key?.startsWith("lang.")) return false;
+  if (el.closest("[data-setto-no-hint]")) return false;
+  return !!(el.closest("a[href]") || el.closest("button"));
+}
+function activateLinkContext(el) {
+  const anchor = el.closest("a[href]");
+  if (anchor instanceof HTMLAnchorElement) {
+    anchor.click();
+    return;
+  }
+  const button = el.closest("button");
+  if (button instanceof HTMLButtonElement) {
+    button.click();
+  }
+}
+const QUERY = "(hover: none) and (pointer: coarse)";
+function subscribe(onChange) {
+  const mq = window.matchMedia(QUERY);
+  mq.addEventListener("change", onChange);
+  return () => mq.removeEventListener("change", onChange);
+}
+function getSnapshot() {
+  return window.matchMedia(QUERY).matches;
+}
+function useCoarsePointer() {
+  return useSyncExternalStore(subscribe, getSnapshot, () => false);
+}
+const MARGIN$2 = 10;
+const OFFSET$1 = 14;
 function hintLabel() {
   const isMac = navigator.platform.toUpperCase().includes("MAC");
   return isMac ? "⌘+klikk for å åpne" : "Ctrl+klikk for å åpne";
 }
-function isActionContext(editable) {
-  const key = editable.getAttribute("data-setto-key");
-  if (key?.startsWith("lang.")) return false;
-  if (editable.closest("[data-setto-no-hint]")) return false;
-  return !!(editable.closest("a[href]") || editable.closest("button"));
-}
 function placeTooltip(anchor, width, height) {
   const vw = window.innerWidth;
   const vh = window.innerHeight;
-  let left = anchor.x + OFFSET;
-  let top = anchor.y + OFFSET;
-  if (left + width > vw - MARGIN$1) {
-    left = anchor.x - width - OFFSET;
+  let left = anchor.x + OFFSET$1;
+  let top = anchor.y + OFFSET$1;
+  if (left + width > vw - MARGIN$2) {
+    left = anchor.x - width - OFFSET$1;
   }
-  if (left < MARGIN$1) {
-    left = MARGIN$1;
+  if (left < MARGIN$2) {
+    left = MARGIN$2;
   }
-  if (top + height > vh - MARGIN$1) {
-    top = anchor.y - height - OFFSET;
+  if (top + height > vh - MARGIN$2) {
+    top = anchor.y - height - OFFSET$1;
   }
-  if (top < MARGIN$1) {
-    top = MARGIN$1;
+  if (top < MARGIN$2) {
+    top = MARGIN$2;
   }
   return { left, top };
 }
 function EditLinkHint() {
+  const coarsePointer = useCoarsePointer();
   const [anchor, setAnchor] = useState(null);
   const [position, setPosition] = useState(null);
   const tipRef = useRef(null);
   const text = hintLabel();
   useEffect(() => {
+    if (coarsePointer) return;
     const onMove = (e) => {
       const target = e.target;
       if (!(target instanceof Element)) {
@@ -21093,7 +21123,7 @@ function EditLinkHint() {
         return;
       }
       const editable = target.closest("[data-setto-key]");
-      if (!(editable instanceof HTMLElement) || !isActionContext(editable)) {
+      if (!(editable instanceof HTMLElement) || !isLinkContext(editable)) {
         setAnchor(null);
         return;
       }
@@ -21101,7 +21131,7 @@ function EditLinkHint() {
     };
     document.addEventListener("mousemove", onMove, true);
     return () => document.removeEventListener("mousemove", onMove, true);
-  }, []);
+  }, [coarsePointer]);
   useLayoutEffect(() => {
     if (!anchor || !tipRef.current) {
       setPosition(null);
@@ -21110,11 +21140,11 @@ function EditLinkHint() {
     const { width, height } = tipRef.current.getBoundingClientRect();
     setPosition(placeTooltip(anchor, width, height));
   }, [anchor, text]);
-  if (!anchor) return null;
+  if (coarsePointer || !anchor) return null;
   const style = {
     position: "fixed",
-    left: position?.left ?? anchor.x + OFFSET,
-    top: position?.top ?? anchor.y + OFFSET,
+    left: position?.left ?? anchor.x + OFFSET$1,
+    top: position?.top ?? anchor.y + OFFSET$1,
     visibility: position ? "visible" : "hidden",
     background: "#1a1a1a",
     color: "#fff",
@@ -21176,11 +21206,11 @@ function useSectionEdit() {
 }
 const SECTION_TOOLBAR_HEIGHT = 44;
 const GAP = 8;
-const MARGIN = 8;
+const MARGIN$1 = 8;
 function computePosition(targetEl, toolbarW, toolbarH) {
   const rect = targetEl.getBoundingClientRect();
   let left = rect.left + (rect.width - toolbarW) / 2;
-  left = Math.max(MARGIN, Math.min(left, window.innerWidth - toolbarW - MARGIN));
+  left = Math.max(MARGIN$1, Math.min(left, window.innerWidth - toolbarW - MARGIN$1));
   const minTop = TOOLBAR_HEIGHT + GAP;
   const top = Math.max(minTop, rect.top - toolbarH - GAP);
   return { top, left };
@@ -21434,7 +21464,7 @@ function SectionToolbar() {
         top: pos?.top ?? -9999,
         left: pos?.left ?? 0,
         width: "max-content",
-        maxWidth: `calc(100vw - ${MARGIN * 2}px)`,
+        maxWidth: `calc(100vw - ${MARGIN$1 * 2}px)`,
         minHeight: SECTION_TOOLBAR_HEIGHT,
         zIndex: 2147483646,
         display: "flex",
@@ -22442,17 +22472,127 @@ function useSetto() {
   }
   return ctx;
 }
-function isLinkContext(el) {
-  const key = el.getAttribute("data-setto-key");
-  if (key?.startsWith("lang.")) return false;
-  if (el.closest("[data-setto-no-hint]")) return false;
-  return !!(el.closest("a[href]") || el.closest("button"));
+const MARGIN = 10;
+const OFFSET = 8;
+const MIN_TOUCH = 44;
+function placeChip(anchor, width, height) {
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  let left = anchor.left + anchor.width / 2 - width / 2;
+  let top = anchor.bottom + OFFSET;
+  if (left + width > vw - MARGIN) left = vw - width - MARGIN;
+  if (left < MARGIN) left = MARGIN;
+  if (top + height > vh - MARGIN) {
+    top = anchor.top - height - OFFSET;
+  }
+  if (top < MARGIN) top = MARGIN;
+  return { left, top };
+}
+function LinkActionChip({ anchorRef, visible }) {
+  const chipRef = useRef(null);
+  const [position, setPosition] = useState(null);
+  useLayoutEffect(() => {
+    if (!visible || !anchorRef.current) {
+      setPosition(null);
+      return;
+    }
+    const update = () => {
+      const el = anchorRef.current;
+      const chip = chipRef.current;
+      if (!el) return;
+      const rect = el.getBoundingClientRect();
+      const width = chip?.offsetWidth ?? 120;
+      const height = chip?.offsetHeight ?? MIN_TOUCH;
+      setPosition(placeChip(rect, width, height));
+    };
+    update();
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [visible, anchorRef]);
+  if (!visible || !anchorRef.current) return null;
+  const host = document.getElementById("setto-hint-root") ?? document.body;
+  const style = {
+    position: "fixed",
+    left: position?.left ?? 0,
+    top: position?.top ?? 0,
+    visibility: position ? "visible" : "hidden",
+    minHeight: MIN_TOUCH,
+    minWidth: MIN_TOUCH,
+    padding: "10px 14px",
+    background: "#1a1a1a",
+    color: "#fff",
+    fontSize: 13,
+    fontWeight: 500,
+    border: "none",
+    borderRadius: 8,
+    boxShadow: "0 4px 16px rgba(0,0,0,0.2)",
+    fontFamily: "system-ui, sans-serif",
+    whiteSpace: "nowrap",
+    touchAction: "manipulation",
+    zIndex: 2147483647
+  };
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        ref: chipRef,
+        type: "button",
+        "data-setto-ui": true,
+        style,
+        onMouseDown: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+        },
+        onClick: (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          const el = anchorRef.current;
+          if (el) activateLinkContext(el);
+          el?.blur();
+        },
+        children: "Naviger ↗"
+      }
+    ),
+    host
+  );
+}
+function placeCaretAtPoint(x, y, el) {
+  el.focus();
+  const doc = el.ownerDocument;
+  const selection = doc.getSelection();
+  if (!selection) return;
+  const range = rangeFromPoint(doc, x, y);
+  if (!range) return;
+  if (!el.contains(range.startContainer)) {
+    range.selectNodeContents(el);
+    range.collapse(false);
+  }
+  selection.removeAllRanges();
+  selection.addRange(range);
+}
+function rangeFromPoint(doc, x, y) {
+  if (doc.caretRangeFromPoint) {
+    return doc.caretRangeFromPoint(x, y);
+  }
+  const legacy = doc;
+  const pos = legacy.caretPositionFromPoint?.(x, y);
+  if (!pos) return null;
+  const range = doc.createRange();
+  range.setStart(pos.offsetNode, pos.offset);
+  range.collapse(true);
+  return range;
 }
 function T({ k }) {
   const { t, i18n } = useTranslation();
   const { editMode, store } = useSetto();
   const ref = useRef(null);
   const [focused, setFocused] = useState(false);
+  const [linkContext, setLinkContext] = useState(false);
+  const coarsePointer = useCoarsePointer();
   const [, force] = useState(0);
   useEffect(() => {
     if (!store) return;
@@ -22472,6 +22612,15 @@ function T({ k }) {
     if (e.ctrlKey || e.metaKey) return;
     e.preventDefault();
   };
+  const handleMouseUp = (e) => {
+    if (e.button !== 0) return;
+    e.stopPropagation();
+    const el = e.currentTarget;
+    if (isLinkContext(el) && (e.ctrlKey || e.metaKey)) return;
+    if (isLinkContext(el)) {
+      placeCaretAtPoint(e.clientX, e.clientY, el);
+    }
+  };
   const handleClick = (e) => {
     e.stopPropagation();
     const el = e.currentTarget;
@@ -22479,7 +22628,6 @@ function T({ k }) {
     if (isLinkContext(el)) {
       e.preventDefault();
     }
-    el.focus();
   };
   const commit = (el) => {
     const text = el.textContent ?? "";
@@ -22487,37 +22635,47 @@ function T({ k }) {
   };
   const handleBlur = (e) => {
     setFocused(false);
+    setLinkContext(false);
     commit(e.currentTarget);
   };
   const handleInput = (e) => {
     store?.set(k, i18n.language, e.currentTarget.textContent ?? "");
   };
   const lang = toBcp47(i18n.language);
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      ref,
-      "data-setto-key": k,
-      contentEditable: true,
-      suppressContentEditableWarning: true,
-      lang,
-      spellCheck: true,
-      role: "textbox",
-      tabIndex: 0,
-      onFocus: () => setFocused(true),
-      onBlur: handleBlur,
-      onInput: handleInput,
-      onMouseDown: handleMouseDown,
-      onClick: handleClick,
-      style: {
-        cursor: "text",
-        outline: focused ? "2px solid #640AFF" : void 0,
-        outlineOffset: 2,
-        borderRadius: 2,
-        transition: "outline-color 120ms"
+  const showLinkChip = coarsePointer && focused && linkContext;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref,
+        "data-setto-key": k,
+        contentEditable: true,
+        suppressContentEditableWarning: true,
+        lang,
+        spellCheck: true,
+        role: "textbox",
+        tabIndex: 0,
+        onFocus: (e) => {
+          setFocused(true);
+          setLinkContext(isLinkContext(e.currentTarget));
+        },
+        onBlur: handleBlur,
+        onInput: handleInput,
+        onMouseDown: handleMouseDown,
+        onMouseUp: handleMouseUp,
+        onClick: handleClick,
+        style: {
+          cursor: "text",
+          color: "inherit",
+          outline: focused ? "2px solid #640AFF" : void 0,
+          outlineOffset: 2,
+          borderRadius: 2,
+          transition: "outline-color 120ms"
+        }
       }
-    }
-  );
+    ),
+    showLinkChip ? /* @__PURE__ */ jsx(LinkActionChip, { anchorRef: ref, visible: focused }) : null
+  ] });
 }
 function toBcp47(code) {
   const base = (code.split("-")[0] ?? code).toLowerCase();