@almadar/shell-web 0.0.0-stage → 1.0.0

package/dist/chunk-PRXQGGCO.js

@@ -0,0 +1,580 @@
+import { useEventBus, useTranslate } from './chunk-4YXBKHHM.js';
+import { createContext, useMemo, useContext, useRef, useEffect, useCallback, useState } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import { resolvePageMeta } from '@almadar/core';
+
+function createEditorFocus() {
+  let current = null;
+  return {
+    focused: () => current,
+    focus: (editorId) => {
+      current = editorId;
+    },
+    blur: (editorId) => {
+      if (current === editorId) current = null;
+    }
+  };
+}
+var INERT_EDITOR_FOCUS = { focused: () => null, focus: () => void 0, blur: () => void 0 };
+var EditorFocusContext = createContext(INERT_EDITOR_FOCUS);
+var EditorFocusProvider = ({ children }) => {
+  const focus = useMemo(createEditorFocus, []);
+  return /* @__PURE__ */ jsx(EditorFocusContext.Provider, { value: focus, children });
+};
+EditorFocusProvider.displayName = "EditorFocusProvider";
+function useEditorFocus() {
+  return useContext(EditorFocusContext);
+}
+function mergeCaptureTables(tables) {
+  const merged = {};
+  for (const table of tables) {
+    for (const [target, entry] of Object.entries(table)) {
+      const current = merged[target];
+      if (!current) {
+        merged[target] = { mode: entry.mode, keys: new Set(entry.keys) };
+        continue;
+      }
+      for (const key of entry.keys) current.keys.add(key);
+      if (current.mode === "any" || entry.mode === "any") current.mode = "any";
+      else if (current.mode !== entry.mode) {
+        current.mode = Array.from(/* @__PURE__ */ new Set([...current.mode.split("|"), entry.mode])).sort().join("|");
+      }
+    }
+  }
+  return merged;
+}
+function keyChord(event) {
+  const parts = [];
+  if (event.ctrlKey) parts.push("Control");
+  if (event.altKey) parts.push("Alt");
+  if (event.shiftKey) parts.push("Shift");
+  if (event.metaKey) parts.push("Meta");
+  parts.push(event.key);
+  return parts.join("+");
+}
+function useKeyboardRouter(options) {
+  const {
+    captureTable,
+    keyEvent = "KEY",
+    enabled = true
+  } = options;
+  const eventBus = useEventBus();
+  const captureTableRef = useRef(captureTable);
+  captureTableRef.current = captureTable;
+  const editorFocus = useEditorFocus();
+  useEffect(() => {
+    if (!enabled) return;
+    const handleKeyDown = (event) => {
+      if (event.isComposing) return;
+      const target = editorFocus.focused() ?? "shell";
+      const entry = captureTableRef.current[target];
+      const captured = entry !== void 0 && (entry.keys.has(event.key) || entry.keys.has(keyChord(event)));
+      if (captured) {
+        event.preventDefault();
+      }
+      eventBus.emit(`UI:${keyEvent}`, {
+        editorId: target,
+        key: event.key,
+        code: event.code,
+        ctrl: event.ctrlKey,
+        alt: event.altKey,
+        shift: event.shiftKey,
+        meta: event.metaKey,
+        repeat: event.repeat
+      });
+    };
+    window.addEventListener("keydown", handleKeyDown, { capture: true });
+    return () => {
+      window.removeEventListener("keydown", handleKeyDown, { capture: true });
+    };
+  }, [eventBus, editorFocus, enabled, keyEvent]);
+}
+function useSwipeGesture(callbacks, options = {}) {
+  const { threshold = 50, velocityThreshold = 0.3, preventDefault = false } = options;
+  const startX = useRef(0);
+  const startY = useRef(0);
+  const startTime = useRef(0);
+  const currentX = useRef(0);
+  const tracking = useRef(false);
+  const offsetXRef = useRef(0);
+  const isSwipingRef = useRef(false);
+  const onPointerDown = useCallback((e) => {
+    startX.current = e.clientX;
+    startY.current = e.clientY;
+    currentX.current = e.clientX;
+    startTime.current = Date.now();
+    tracking.current = true;
+    isSwipingRef.current = false;
+    offsetXRef.current = 0;
+    e.target.setPointerCapture?.(e.pointerId);
+  }, []);
+  const onPointerMove = useCallback((e) => {
+    if (!tracking.current) return;
+    if (preventDefault) e.preventDefault();
+    currentX.current = e.clientX;
+    const dx = e.clientX - startX.current;
+    const dy = e.clientY - startY.current;
+    if (Math.abs(dx) > 10 && Math.abs(dx) > Math.abs(dy)) {
+      isSwipingRef.current = true;
+      offsetXRef.current = dx;
+    }
+  }, [preventDefault]);
+  const onPointerUp = useCallback((e) => {
+    if (!tracking.current) return;
+    tracking.current = false;
+    const dx = e.clientX - startX.current;
+    const dy = e.clientY - startY.current;
+    const elapsed = Date.now() - startTime.current;
+    const velocity = Math.abs(dx) / Math.max(elapsed, 1);
+    offsetXRef.current = 0;
+    isSwipingRef.current = false;
+    if (Math.abs(dx) < threshold && velocity < velocityThreshold) return;
+    if (Math.abs(dx) > Math.abs(dy)) {
+      if (dx < -threshold) callbacks.onSwipeLeft?.();
+      else if (dx > threshold) callbacks.onSwipeRight?.();
+    } else {
+      if (dy < -threshold) callbacks.onSwipeUp?.();
+      else if (dy > threshold) callbacks.onSwipeDown?.();
+    }
+  }, [threshold, velocityThreshold, callbacks]);
+  const onPointerCancel = useCallback(() => {
+    tracking.current = false;
+    offsetXRef.current = 0;
+    isSwipingRef.current = false;
+  }, []);
+  return {
+    onPointerDown,
+    onPointerMove,
+    onPointerUp,
+    onPointerCancel,
+    offsetX: offsetXRef.current,
+    isSwiping: isSwipingRef.current
+  };
+}
+function localPoint(canvas, clientX, clientY) {
+  if (!canvas) return { x: clientX, y: clientY };
+  const rect = canvas.getBoundingClientRect();
+  return { x: clientX - rect.left, y: clientY - rect.top };
+}
+function useCanvasGestures(options) {
+  const {
+    canvasRef,
+    enabled = true,
+    wheelStep = 1.1,
+    onPointerDown,
+    onPointerMove,
+    onPointerUp,
+    onZoom,
+    onPanDelta,
+    onMultiTouchStart
+  } = options;
+  const pointers = useRef(/* @__PURE__ */ new Map());
+  const pinch = useRef(null);
+  const computePinch = useCallback(() => {
+    const pts = [...pointers.current.values()];
+    const dx = pts[1].x - pts[0].x;
+    const dy = pts[1].y - pts[0].y;
+    return {
+      distance: Math.hypot(dx, dy) || 1,
+      centroid: { x: (pts[0].x + pts[1].x) / 2, y: (pts[0].y + pts[1].y) / 2 }
+    };
+  }, []);
+  const handlePointerDown = useCallback(
+    (e) => {
+      if (!enabled) return;
+      e.currentTarget.setPointerCapture(e.pointerId);
+      pointers.current.set(e.pointerId, localPoint(canvasRef.current, e.clientX, e.clientY));
+      if (pointers.current.size === 2) {
+        onMultiTouchStart?.();
+        pinch.current = computePinch();
+      } else if (pointers.current.size === 1) {
+        onPointerDown?.(e);
+      }
+    },
+    [enabled, canvasRef, onMultiTouchStart, computePinch, onPointerDown]
+  );
+  const handlePointerMove = useCallback(
+    (e) => {
+      if (!enabled) return;
+      if (pointers.current.has(e.pointerId)) {
+        pointers.current.set(e.pointerId, localPoint(canvasRef.current, e.clientX, e.clientY));
+      }
+      if (pointers.current.size >= 2 && pinch.current) {
+        const next = computePinch();
+        const prev = pinch.current;
+        if (next.distance !== prev.distance) {
+          onZoom?.(next.distance / prev.distance, next.centroid.x, next.centroid.y);
+        }
+        onPanDelta?.(next.centroid.x - prev.centroid.x, next.centroid.y - prev.centroid.y);
+        pinch.current = next;
+        return;
+      }
+      onPointerMove?.(e);
+    },
+    [enabled, canvasRef, computePinch, onZoom, onPanDelta, onPointerMove]
+  );
+  const endPointer = useCallback(
+    (e, fireUp) => {
+      const wasMulti = pointers.current.size >= 2;
+      pointers.current.delete(e.pointerId);
+      if (pointers.current.size < 2) pinch.current = null;
+      if (wasMulti && pointers.current.size === 1) return;
+      if (pointers.current.size === 0 && fireUp) onPointerUp?.(e);
+    },
+    [onPointerUp]
+  );
+  const handlePointerUp = useCallback(
+    (e) => {
+      if (!enabled) return;
+      endPointer(e, true);
+    },
+    [enabled, endPointer]
+  );
+  const handlePointerCancel = useCallback(
+    (e) => {
+      if (!enabled) return;
+      endPointer(e, false);
+    },
+    [enabled, endPointer]
+  );
+  const handleWheel = useCallback(
+    (e) => {
+      if (!enabled) return;
+      e.preventDefault();
+      const { x, y } = localPoint(canvasRef.current, e.clientX, e.clientY);
+      onZoom?.(e.deltaY < 0 ? wheelStep : 1 / wheelStep, x, y);
+    },
+    [enabled, canvasRef, wheelStep, onZoom]
+  );
+  return {
+    onPointerDown: handlePointerDown,
+    onPointerMove: handlePointerMove,
+    onPointerUp: handlePointerUp,
+    onPointerCancel: handlePointerCancel,
+    onWheel: handleWheel
+  };
+}
+function useLongPress(onLongPress, options = {}) {
+  const { duration = 500, moveThreshold = 10 } = options;
+  const timerRef = useRef(null);
+  const startPos = useRef({ x: 0, y: 0 });
+  const isPressedRef = useRef(false);
+  const firedRef = useRef(false);
+  const cancel = useCallback(() => {
+    if (timerRef.current) {
+      clearTimeout(timerRef.current);
+      timerRef.current = null;
+    }
+    isPressedRef.current = false;
+  }, []);
+  const onPointerDown = useCallback((e) => {
+    firedRef.current = false;
+    startPos.current = { x: e.clientX, y: e.clientY };
+    isPressedRef.current = true;
+    timerRef.current = setTimeout(() => {
+      firedRef.current = true;
+      isPressedRef.current = false;
+      onLongPress();
+    }, duration);
+  }, [duration, onLongPress]);
+  const onPointerMove = useCallback((e) => {
+    if (!isPressedRef.current) return;
+    const dx = e.clientX - startPos.current.x;
+    const dy = e.clientY - startPos.current.y;
+    if (Math.sqrt(dx * dx + dy * dy) > moveThreshold) {
+      cancel();
+    }
+  }, [moveThreshold, cancel]);
+  const onPointerUp = useCallback(() => {
+    cancel();
+  }, [cancel]);
+  const onPointerCancel = useCallback(() => {
+    cancel();
+  }, [cancel]);
+  return {
+    onPointerDown,
+    onPointerMove,
+    onPointerUp,
+    onPointerCancel,
+    isPressed: isPressedRef.current
+  };
+}
+
+// src/hooks/useAuthContext.ts
+function useAuthContext() {
+  return {
+    user: null,
+    loading: false,
+    signIn: void 0,
+    signOut: void 0
+  };
+}
+var queryStores = /* @__PURE__ */ new Map();
+function getOrCreateStore(query) {
+  if (!queryStores.has(query)) {
+    queryStores.set(query, {
+      search: "",
+      filters: {},
+      sortField: void 0,
+      sortDirection: void 0,
+      listeners: /* @__PURE__ */ new Set()
+    });
+  }
+  return queryStores.get(query);
+}
+function useQuerySingleton(query) {
+  const [, forceUpdate] = useState({});
+  if (!query) {
+    return null;
+  }
+  const store = useMemo(() => getOrCreateStore(query), [query]);
+  useMemo(() => {
+    const listener = () => forceUpdate({});
+    store.listeners.add(listener);
+    return () => {
+      store.listeners.delete(listener);
+    };
+  }, [store]);
+  const notifyListeners = useCallback(() => {
+    store.listeners.forEach((listener) => listener());
+  }, [store]);
+  const setSearch = useCallback((value) => {
+    store.search = value;
+    notifyListeners();
+  }, [store, notifyListeners]);
+  const setFilter = useCallback((key, value) => {
+    store.filters = { ...store.filters, [key]: value };
+    notifyListeners();
+  }, [store, notifyListeners]);
+  const clearFilters = useCallback(() => {
+    store.filters = {};
+    store.search = "";
+    notifyListeners();
+  }, [store, notifyListeners]);
+  const setSort = useCallback((field, direction) => {
+    store.sortField = field;
+    store.sortDirection = direction;
+    notifyListeners();
+  }, [store, notifyListeners]);
+  return {
+    search: store.search,
+    setSearch,
+    filters: store.filters,
+    setFilter,
+    clearFilters,
+    sortField: store.sortField,
+    sortDirection: store.sortDirection,
+    setSort
+  };
+}
+function parseQueryBinding(binding) {
+  const cleaned = binding.startsWith("@") ? binding.slice(1) : binding;
+  const parts = cleaned.split(".");
+  return {
+    query: parts[0],
+    field: parts.length > 1 ? parts.slice(1).join(".") : void 0
+  };
+}
+
+// src/lib/bus-claim.ts
+var claims = /* @__PURE__ */ new WeakMap();
+function claimDelivery(source, trait, event) {
+  if (source === void 0) return true;
+  const key = `${trait}\0${event}`;
+  const seen = claims.get(source);
+  if (seen === void 0) {
+    claims.set(source, /* @__PURE__ */ new Set([key]));
+    return true;
+  }
+  if (seen.has(key)) return false;
+  seen.add(key);
+  return true;
+}
+var DISPATCH_CLAIM = "$dispatch";
+function claimDispatch(source, event) {
+  return claimDelivery(source, DISPATCH_CLAIM, event);
+}
+var OWNED = "data-orb-head";
+var shellTitle;
+function ownedTag(tag, attrs) {
+  const el = document.createElement(tag);
+  for (const [k, v] of Object.entries(attrs)) el.setAttribute(k, v);
+  el.setAttribute(OWNED, "");
+  return el;
+}
+function usePageHead(input) {
+  const { messages, locale } = useTranslate();
+  const title = input ? resolvePageMeta(input.title, (k) => messages?.[k]) : void 0;
+  const description = input ? resolvePageMeta(input.description, (k) => messages?.[k]) : void 0;
+  const isPublic = input?.access !== "authenticated" && input?.indexing !== "noindex";
+  const canonical = input?.origin !== void 0 ? `${input.origin.replace(/\/+$/, "")}${input.path}` : void 0;
+  const siteName = input?.siteName;
+  const active = input !== null;
+  const originBase = input?.origin?.replace(/\/+$/, "");
+  const hreflang = [];
+  if (originBase !== void 0) {
+    for (const alt of input?.alternates ?? []) hreflang.push([alt.locale, `${originBase}${alt.path}`]);
+    const fallback = input?.alternates?.find((alt) => alt.locale === input.defaultLocale);
+    if (fallback !== void 0) hreflang.push(["x-default", `${originBase}${fallback.path}`]);
+  }
+  const hreflangKey = hreflang.map(([lang, href]) => `${lang} ${href}`).join("\n");
+  useEffect(() => {
+    if (!active || typeof document === "undefined") return void 0;
+    shellTitle ??= document.title;
+    document.title = title ?? siteName ?? shellTitle;
+    const tags = [];
+    if (!isPublic) tags.push(ownedTag("meta", { name: "robots", content: "noindex" }));
+    if (isPublic && description !== void 0) {
+      tags.push(ownedTag("meta", { name: "description", content: description }));
+      tags.push(ownedTag("meta", { property: "og:description", content: description }));
+    }
+    if (isPublic && title !== void 0) tags.push(ownedTag("meta", { property: "og:title", content: title }));
+    if (isPublic && canonical !== void 0) {
+      tags.push(ownedTag("link", { rel: "canonical", href: canonical }));
+      tags.push(ownedTag("meta", { property: "og:url", content: canonical }));
+    }
+    if (isPublic && siteName !== void 0) tags.push(ownedTag("meta", { property: "og:site_name", content: siteName }));
+    if (isPublic) tags.push(ownedTag("meta", { property: "og:locale", content: locale }));
+    if (isPublic && hreflangKey !== "") {
+      for (const line of hreflangKey.split("\n")) {
+        const space = line.indexOf(" ");
+        tags.push(ownedTag("link", { rel: "alternate", hreflang: line.slice(0, space), href: line.slice(space + 1) }));
+      }
+    }
+    for (const stale of Array.from(document.head.querySelectorAll(`[${OWNED}]`))) stale.remove();
+    for (const tag of tags) document.head.appendChild(tag);
+    return () => {
+      for (const tag of tags) tag.remove();
+    };
+  }, [active, title, description, isPublic, canonical, siteName, locale, hreflangKey]);
+}
+function usePullToRefresh(onRefresh, options = {}) {
+  const { threshold = 60, maxPull = 120 } = options;
+  const [pullDistance, setPullDistance] = useState(0);
+  const [isPulling, setIsPulling] = useState(false);
+  const [isRefreshing, setIsRefreshing] = useState(false);
+  const startY = useRef(0);
+  const scrollTopRef = useRef(0);
+  const onTouchStart = useCallback((e) => {
+    const container = e.currentTarget;
+    scrollTopRef.current = container.scrollTop;
+    if (scrollTopRef.current <= 0) {
+      startY.current = e.touches[0].clientY;
+      setIsPulling(true);
+    }
+  }, []);
+  const onTouchMove = useCallback((e) => {
+    if (!isPulling || isRefreshing) return;
+    const container = e.currentTarget;
+    if (container.scrollTop > 0) {
+      setPullDistance(0);
+      return;
+    }
+    const dy = e.touches[0].clientY - startY.current;
+    if (dy > 0) {
+      const distance = Math.min(dy * 0.5, maxPull);
+      setPullDistance(distance);
+    }
+  }, [isPulling, isRefreshing, maxPull]);
+  const onTouchEnd = useCallback(() => {
+    if (!isPulling) return;
+    setIsPulling(false);
+    if (pullDistance >= threshold && !isRefreshing) {
+      setIsRefreshing(true);
+      setPullDistance(threshold);
+      onRefresh();
+    } else {
+      setPullDistance(0);
+    }
+  }, [isPulling, pullDistance, threshold, isRefreshing, onRefresh]);
+  const endRefresh = useCallback(() => {
+    setIsRefreshing(false);
+    setPullDistance(0);
+  }, []);
+  const containerProps = {
+    onTouchStart,
+    onTouchMove,
+    onTouchEnd,
+    style: {
+      transform: pullDistance > 0 ? `translateY(${pullDistance}px)` : void 0,
+      transition: isPulling ? "none" : "transform 300ms ease-out"
+    }
+  };
+  return {
+    pullDistance,
+    isPulling,
+    isRefreshing,
+    containerProps,
+    endRefresh
+  };
+}
+function useDragReorder(initialItems, onReorder) {
+  const [items, setItems] = useState(initialItems);
+  const [dragIndex, setDragIndex] = useState(-1);
+  const [dragOverIndex, setDragOverIndex] = useState(-1);
+  const itemsRef = useRef(initialItems);
+  if (initialItems !== itemsRef.current) {
+    itemsRef.current = initialItems;
+    setItems(initialItems);
+  }
+  const isDragging = dragIndex >= 0;
+  const handleDragStart = useCallback((index) => (e) => {
+    e.preventDefault();
+    setDragIndex(index);
+    setDragOverIndex(index);
+    e.target.setPointerCapture?.(e.pointerId);
+  }, []);
+  const handleDragMove = useCallback((index) => (e) => {
+    if (dragIndex < 0) return;
+    const target = document.elementFromPoint(e.clientX, e.clientY);
+    if (!target) return;
+    let el = target;
+    while (el && !el.dataset.dragIndex) {
+      el = el.parentElement;
+    }
+    if (el?.dataset.dragIndex) {
+      const overIndex = parseInt(el.dataset.dragIndex, 10);
+      if (!isNaN(overIndex) && overIndex !== dragOverIndex) {
+        setDragOverIndex(overIndex);
+      }
+    }
+  }, [dragIndex, dragOverIndex]);
+  const handleDragEnd = useCallback(() => {
+    if (dragIndex >= 0 && dragOverIndex >= 0 && dragIndex !== dragOverIndex) {
+      const newItems = [...items];
+      const [movedItem] = newItems.splice(dragIndex, 1);
+      newItems.splice(dragOverIndex, 0, movedItem);
+      setItems(newItems);
+      onReorder(dragIndex, dragOverIndex, items[dragIndex]);
+    }
+    setDragIndex(-1);
+    setDragOverIndex(-1);
+  }, [dragIndex, dragOverIndex, items, onReorder]);
+  const getDragHandleProps = useCallback((index) => ({
+    onPointerDown: handleDragStart(index),
+    style: { cursor: "grab", touchAction: "none" },
+    "aria-grabbed": dragIndex === index,
+    role: "button"
+  }), [handleDragStart, dragIndex]);
+  const getItemProps = useCallback((index) => ({
+    onPointerMove: handleDragMove(index),
+    onPointerUp: handleDragEnd,
+    "aria-dropeffect": "move",
+    "data-drag-index": String(index),
+    style: {
+      opacity: dragIndex === index ? 0.5 : 1,
+      transition: isDragging ? "transform 150ms ease" : void 0,
+      transform: isDragging && dragOverIndex >= 0 ? index === dragIndex ? "scale(1.02)" : index > dragIndex && index <= dragOverIndex ? "translateY(-100%)" : index < dragIndex && index >= dragOverIndex ? "translateY(100%)" : void 0 : void 0
+    }
+  }), [handleDragMove, handleDragEnd, dragIndex, dragOverIndex, isDragging]);
+  return {
+    items,
+    dragIndex,
+    dragOverIndex,
+    isDragging,
+    getDragHandleProps,
+    getItemProps
+  };
+}
+
+export { EditorFocusProvider, claimDelivery, claimDispatch, keyChord, mergeCaptureTables, parseQueryBinding, useAuthContext, useCanvasGestures, useDragReorder, useEditorFocus, useKeyboardRouter, useLongPress, usePageHead, usePullToRefresh, useQuerySingleton, useSwipeGesture };