@flamingo-stack/openframe-frontend-core 0.0.711 → 0.0.712

package/dist/chunk-3K5ZLZE7.js

@@ -0,0 +1,292 @@
+"use client";
+import {
+  breakpoints,
+  createLocalStorageAdapter,
+  useMediaQuery
+} from "./chunk-ADBE7QF3.js";
+
+// src/hooks/ui/use-drag-and-drop-enabled.ts
+var DRAG_AND_DROP_MEDIA_QUERY = `(pointer: fine) and (hover: hover) and ${breakpoints.md}`;
+function useDragAndDropEnabled() {
+  return useMediaQuery(DRAG_AND_DROP_MEDIA_QUERY) ?? false;
+}
+
+// src/hooks/ui/use-horizontal-scrollbar.ts
+import { useRef, useState, useCallback } from "react";
+function useHorizontalScrollbar() {
+  const scrollElRef = useRef(null);
+  const trackRef = useRef(null);
+  const thumbRef = useRef(null);
+  const roRef = useRef(null);
+  const moRef = useRef(null);
+  const [thumbRatio, setThumbRatio] = useState(0);
+  const [canScrollLeft, setCanScrollLeft] = useState(false);
+  const [canScrollRight, setCanScrollRight] = useState(false);
+  const prevCanScrollLeftRef = useRef(false);
+  const prevCanScrollRightRef = useRef(false);
+  const isDraggingRef = useRef(false);
+  const dragStartRef = useRef({ mouseX: 0, scrollLeft: 0 });
+  const rafIdRef = useRef(0);
+  const syncThumbToDOM = useCallback(() => {
+    const el = scrollElRef.current;
+    const thumb = thumbRef.current;
+    if (!el || !thumb) return;
+    const maxScroll = el.scrollWidth - el.clientWidth;
+    if (maxScroll <= 0) {
+      thumb.style.left = "0%";
+      return;
+    }
+    const ratio = el.clientWidth / el.scrollWidth;
+    const fraction = Math.min(Math.max(el.scrollLeft, 0), maxScroll) / maxScroll;
+    thumb.style.left = `${fraction * (1 - ratio) * 100}%`;
+  }, []);
+  const syncEdgeFades = useCallback(() => {
+    const el = scrollElRef.current;
+    if (!el) return;
+    const maxScroll = el.scrollWidth - el.clientWidth;
+    const ratio = el.clientWidth / el.scrollWidth;
+    if (ratio >= 1 || maxScroll <= 0) {
+      if (prevCanScrollLeftRef.current) {
+        prevCanScrollLeftRef.current = false;
+        setCanScrollLeft(false);
+      }
+      if (prevCanScrollRightRef.current) {
+        prevCanScrollRightRef.current = false;
+        setCanScrollRight(false);
+      }
+      return;
+    }
+    const fraction = Math.min(Math.max(el.scrollLeft, 0), maxScroll) / maxScroll;
+    const left = fraction > 1e-3;
+    const right = fraction < 0.999;
+    if (left !== prevCanScrollLeftRef.current) {
+      prevCanScrollLeftRef.current = left;
+      setCanScrollLeft(left);
+    }
+    if (right !== prevCanScrollRightRef.current) {
+      prevCanScrollRightRef.current = right;
+      setCanScrollRight(right);
+    }
+  }, []);
+  const measure = useCallback(() => {
+    const el = scrollElRef.current;
+    if (!el) return;
+    const ratio = el.clientWidth / el.scrollWidth;
+    setThumbRatio(ratio >= 1 ? 0 : ratio);
+    syncThumbToDOM();
+    syncEdgeFades();
+  }, [syncThumbToDOM, syncEdgeFades]);
+  const scrollRef = useCallback(
+    (node) => {
+      if (roRef.current) {
+        roRef.current.disconnect();
+        roRef.current = null;
+      }
+      if (moRef.current) {
+        moRef.current.disconnect();
+        moRef.current = null;
+      }
+      if (rafIdRef.current) {
+        cancelAnimationFrame(rafIdRef.current);
+        rafIdRef.current = 0;
+      }
+      scrollElRef.current = node;
+      if (node) {
+        const ratio = node.clientWidth / node.scrollWidth;
+        setThumbRatio(ratio >= 1 ? 0 : ratio);
+        const ro = new ResizeObserver(measure);
+        roRef.current = ro;
+        const observeAll = () => {
+          ro.disconnect();
+          ro.observe(node);
+          for (const child of Array.from(node.children)) ro.observe(child);
+        };
+        observeAll();
+        moRef.current = new MutationObserver(() => {
+          observeAll();
+          measure();
+        });
+        moRef.current.observe(node, { childList: true });
+        requestAnimationFrame(() => {
+          syncThumbToDOM();
+          syncEdgeFades();
+        });
+      } else {
+        setThumbRatio(0);
+        prevCanScrollLeftRef.current = false;
+        prevCanScrollRightRef.current = false;
+        setCanScrollLeft(false);
+        setCanScrollRight(false);
+      }
+    },
+    [measure, syncThumbToDOM, syncEdgeFades]
+  );
+  const onScroll = useCallback(() => {
+    if (isDraggingRef.current) return;
+    if (rafIdRef.current) cancelAnimationFrame(rafIdRef.current);
+    rafIdRef.current = requestAnimationFrame(() => {
+      syncThumbToDOM();
+      syncEdgeFades();
+    });
+  }, [syncThumbToDOM, syncEdgeFades]);
+  const onTrackClick = useCallback((e) => {
+    if (e.target.closest("[data-scrollbar-thumb]")) return;
+    const track = trackRef.current;
+    const el = scrollElRef.current;
+    if (!track || !el) return;
+    const ratio = el.clientWidth / el.scrollWidth;
+    if (ratio >= 1) return;
+    const rect = track.getBoundingClientRect();
+    const thumbWidth = rect.width * ratio;
+    const maxThumbOffset = rect.width - thumbWidth;
+    if (maxThumbOffset <= 0) return;
+    const targetFraction = Math.max(0, Math.min(1, (e.clientX - rect.left - thumbWidth / 2) / maxThumbOffset));
+    const targetScrollLeft = targetFraction * (el.scrollWidth - el.clientWidth);
+    el.scrollTo({ left: targetScrollLeft, behavior: "smooth" });
+  }, []);
+  const onTrackWheel = useCallback((e) => {
+    const el = scrollElRef.current;
+    if (!el) return;
+    e.preventDefault();
+    el.scrollLeft += e.deltaX || e.deltaY;
+  }, []);
+  const onThumbPointerDown = useCallback((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const el = scrollElRef.current;
+    if (!el) return;
+    isDraggingRef.current = true;
+    dragStartRef.current = { mouseX: e.clientX, scrollLeft: el.scrollLeft };
+    const target = e.currentTarget;
+    target.setPointerCapture(e.pointerId);
+    target.style.cursor = "grabbing";
+  }, []);
+  const onThumbPointerMove = useCallback(
+    (e) => {
+      if (!isDraggingRef.current) return;
+      const el = scrollElRef.current;
+      const track = trackRef.current;
+      if (!el || !track) return;
+      const currentThumbRatio = el.clientWidth / el.scrollWidth;
+      if (currentThumbRatio >= 1) return;
+      const trackWidth = track.clientWidth;
+      const thumbWidth = trackWidth * currentThumbRatio;
+      const maxThumbTravel = trackWidth - thumbWidth;
+      if (maxThumbTravel <= 0) return;
+      const mouseDelta = e.clientX - dragStartRef.current.mouseX;
+      const scrollRange = el.scrollWidth - el.clientWidth;
+      el.scrollLeft = Math.min(
+        Math.max(dragStartRef.current.scrollLeft + mouseDelta / maxThumbTravel * scrollRange, 0),
+        scrollRange
+      );
+      syncThumbToDOM();
+      syncEdgeFades();
+    },
+    [syncThumbToDOM, syncEdgeFades]
+  );
+  const onThumbPointerUp = useCallback((e) => {
+    isDraggingRef.current = false;
+    const target = e.currentTarget;
+    target.releasePointerCapture(e.pointerId);
+    target.style.cursor = "grab";
+  }, []);
+  const onThumbPointerCancel = useCallback((e) => {
+    isDraggingRef.current = false;
+    const target = e.currentTarget;
+    target.style.cursor = "grab";
+  }, []);
+  return {
+    scrollRef,
+    trackRef,
+    thumbRef,
+    thumbRatio,
+    canScrollLeft,
+    canScrollRight,
+    onScroll,
+    onTrackClick,
+    onTrackWheel,
+    onThumbPointerDown,
+    onThumbPointerMove,
+    onThumbPointerUp,
+    onThumbPointerCancel
+  };
+}
+
+// src/hooks/ui/use-local-storage.ts
+import { useEffect, useMemo, useRef as useRef2, useState as useState2 } from "react";
+
+// src/utils/storage-event.ts
+function readLocalStorageUpdateDetail(event) {
+  if (!("detail" in event)) return null;
+  const detail = event.detail;
+  if (typeof detail !== "object" || detail === null) return null;
+  if (!("key" in detail) || typeof detail.key !== "string") return null;
+  const newValue = "newValue" in detail ? detail.newValue : null;
+  if (newValue !== null && newValue !== void 0 && typeof newValue !== "string") return null;
+  return { key: detail.key, newValue: newValue ?? null };
+}
+
+// src/hooks/ui/use-local-storage.ts
+function useLocalStorage(key, initialValue, options) {
+  const initialValueRef = useRef2(initialValue);
+  useEffect(() => {
+    initialValueRef.current = initialValue;
+  });
+  const validate = options?.validate;
+  const storage = useMemo(
+    () => createLocalStorageAdapter({ key, validate, logTag: `[useLocalStorage:${key}]` }),
+    [key, validate]
+  );
+  const [storedValue, setStoredValue] = useState2(() => storage.load() ?? initialValue);
+  const isInitialized = useRef2(true);
+  const isFromStorageEvent = useRef2(false);
+  useEffect(() => {
+    if (!isInitialized.current) return void 0;
+    const syncFromStorage = (source) => {
+      const next = storage.load();
+      isFromStorageEvent.current = true;
+      setStoredValue(next ?? initialValueRef.current);
+      console.log(`\u{1F504} ${next === null ? "Cleared" : "Updated"} localStorage key "${key}" from ${source}`);
+    };
+    const handleStorageChange = (e) => {
+      if (e.key !== key) return;
+      syncFromStorage("storage event");
+    };
+    const handleCustomStorageUpdate = (event) => {
+      const detail = readLocalStorageUpdateDetail(event);
+      if (detail?.key !== key) return;
+      syncFromStorage("custom storage event");
+    };
+    window.addEventListener("storage", handleStorageChange);
+    window.addEventListener("localStorageUpdate", handleCustomStorageUpdate);
+    return () => {
+      window.removeEventListener("storage", handleStorageChange);
+      window.removeEventListener("localStorageUpdate", handleCustomStorageUpdate);
+    };
+  }, [key, storage]);
+  useEffect(() => {
+    if (!isInitialized.current) return;
+    if (isFromStorageEvent.current) {
+      isFromStorageEvent.current = false;
+      return;
+    }
+    storage.save(storedValue);
+  }, [storage, storedValue]);
+  const setValue = (value) => {
+    try {
+      const valueToStore = value instanceof Function ? value(storedValue) : value;
+      setStoredValue(valueToStore);
+    } catch (error) {
+      console.error(`Error setting value for localStorage key "${key}":`, error);
+    }
+  };
+  return [storedValue, setValue];
+}
+
+export {
+  DRAG_AND_DROP_MEDIA_QUERY,
+  useDragAndDropEnabled,
+  useHorizontalScrollbar,
+  readLocalStorageUpdateDetail,
+  useLocalStorage
+};

package/dist/chunk-3LU4UFPS.cjs

@@ -0,0 +1,14 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+// src/styles/layout-steps.ts
+var LAYOUT_STEPS = {
+  sm: { viewport: 640, content: 640 },
+  md: { viewport: 800, content: 720 },
+  lg: { viewport: 1280, content: 1024 },
+  xl: { viewport: 1440, content: 1216 },
+  "2xl": { viewport: 1536, content: 1312 }
+};
+
+
+
+exports.LAYOUT_STEPS = LAYOUT_STEPS;

package/dist/{chunk-3UNL26CD.cjs → chunk-3RKBJT6K.cjs}

@@ -1,12 +1,14 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
 
 
-var _chunkFYOKS5RIcjs = require('./chunk-FYOKS5RI.cjs');
+var _chunkPPXR22YCcjs = require('./chunk-PPXR22YC.cjs');
 
 
+var _chunkETYLOZOBcjs = require('./chunk-ETYLOZOB.cjs');
 
 
-var _chunk6NTPY5QAcjs = require('./chunk-6NTPY5QA.cjs');
+
+var _chunkF5BPGWGTcjs = require('./chunk-F5BPGWGT.cjs');
 
 
 var _chunkMGHIV4L6cjs = require('./chunk-MGHIV4L6.cjs');
@@ -64,7 +66,7 @@ function DetailPageSkeleton({
   ] });
   if (bare) return content;
   return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-    _chunkFYOKS5RIcjs.PageLayout,
+    _chunkPPXR22YCcjs.PageLayout,
     {
       showHeader: false,
       className: "mx-auto max-w-[1280px] bg-ods-bg px-6 py-6 content-md:px-20 content-md:py-10",
@@ -77,7 +79,7 @@ function DetailPageSkeleton({
 var _lucidereact = require('lucide-react');
 
 function formatDate(value) {
-  return _chunk6NTPY5QAcjs.formatDateWithTimezone.call(void 0, value, null, "long");
+  return _chunkF5BPGWGTcjs.formatDateWithTimezone.call(void 0, value, null, "long");
 }
 function ArticleAuthorByline({
   author,
@@ -93,7 +95,7 @@ function ArticleAuthorByline({
 }) {
   const runtime = _chunkUJ7AXHRZcjs.useChatRuntime.call(void 0, );
   if (!author) return null;
-  const proxiedAvatar = avatar ? proxyImageUrl ? proxyImageUrl(avatar) : _nullishCoalesce(_chunk6NTPY5QAcjs.getProxiedImageUrl.call(void 0, avatar, {
+  const proxiedAvatar = avatar ? proxyImageUrl ? proxyImageUrl(avatar) : _nullishCoalesce(_chunkETYLOZOBcjs.getProxiedImageUrl.call(void 0, avatar, {
     proxyPrefix: _optionalChain([runtime, 'optionalAccess', _2 => _2.endpoints, 'access', _3 => _3.imageProxyUrlPrefix]),
     skipDomains: _optionalChain([runtime, 'optionalAccess', _4 => _4.endpoints, 'access', _5 => _5.imageProxySkipDomains]),
     directHttps: true
@@ -101,7 +103,7 @@ function ArticleAuthorByline({
   const avatarSizeClass = size === "lg" ? "w-16 h-16" : "w-14 h-14";
   const avatarIconClass = size === "lg" ? "w-8 h-8" : "w-7 h-7";
   const avatarDim = size === "lg" ? 64 : 56;
-  const formattedBio = _chunk6NTPY5QAcjs.formatBioText.call(void 0, _nullishCoalesce(bio, () => ( null)));
+  const formattedBio = _chunkF5BPGWGTcjs.formatBioText.call(void 0, _nullishCoalesce(bio, () => ( null)));
   const dateLabel = publishedAt ? formatDate(publishedAt) : "";
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "div",

package/dist/{chunk-6GLQLTJI.js → chunk-3SEEGNRE.js}

@@ -1,25 +1,25 @@
 "use client";
 import {
   ContactForm
-} from "./chunk-VMMHJFHG.js";
+} from "./chunk-N67XG5GY.js";
 import {
   DeliveryRow,
   DevCardRowContent,
   DevCardRowSkeletonList,
   DevSectionPage,
   ListEmptyState
-} from "./chunk-VWFZRMQR.js";
+} from "./chunk-G3OMVCID.js";
 import {
   EmptyState,
   UnifiedPagination
-} from "./chunk-F57ECE2I.js";
+} from "./chunk-6YPTUHM7.js";
 import {
   TICKET_MARK_READ_DEBOUNCE_MS,
   TICKET_TEXT_MAX_CHARS,
   TOAST_COPY,
   isOptimistic,
   useOptionalTicketLive
-} from "./chunk-NF7GNGYG.js";
+} from "./chunk-DDWFCWOE.js";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -29,37 +29,36 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-  DEV_SECTION_PARAM_KEYS,
-  HUBSPOT_DO_NOT_COLLECT_FORM_PROPS,
-  TICKET_OPEN_PARAM,
   Textarea,
-  TicketAttachmentsList,
-  devSectionAnchorId
-} from "./chunk-5HB7FLCV.js";
+  TicketAttachmentsList
+} from "./chunk-FCAVAEHF.js";
 import {
   toast,
   useScrollToHash
-} from "./chunk-KUC673HM.js";
-import {
-  PAGE_PARAM_LIMITS,
-  pageCount,
-  positiveInt
-} from "./chunk-CUME3VTQ.js";
+} from "./chunk-6T3BTD6Q.js";
 import {
   ChatAttachmentAddButton,
   ChatAttachmentChipStrip,
-  ChatInput,
   ChatMessageRow,
   ChatMessageRowSkeleton,
   ChatTicketItem,
-  formatRelativeTime,
+  DEV_SECTION_PARAM_KEYS,
+  HUBSPOT_DO_NOT_COLLECT_FORM_PROPS,
+  TICKET_OPEN_PARAM,
+  devSectionAnchorId,
   useChatAttachments,
   useChatIdentity
-} from "./chunk-SMAAV3HL.js";
+} from "./chunk-ROBQ5TR7.js";
+import {
+  formatRelativeTime
+} from "./chunk-2NASBO7O.js";
+import {
+  ChatInput
+} from "./chunk-KBJJQFYU.js";
 import {
   STICKY_HEADER_OFFSET_PX,
   scrollElementIntoView
-} from "./chunk-CZ7Y7UG4.js";
+} from "./chunk-CMZ3QTFQ.js";
 import {
   usePathname,
   useRouter,
@@ -68,25 +67,34 @@ import {
 import {
   CONTENT_CARD_SKELETON_FRAME_CLASS,
   Card,
-  SquareAvatar,
   StatusBadge,
   getStatusColorScheme
-} from "./chunk-FI6GMDO7.js";
+} from "./chunk-TTVOLEUS.js";
 import {
-  embedAuthedFetch
-} from "./chunk-FXJ3WWUB.js";
+  SquareAvatar
+} from "./chunk-IYVFSLWJ.js";
+import {
+  PAGE_PARAM_LIMITS,
+  pageCount,
+  positiveInt
+} from "./chunk-AGVXKD4K.js";
 import {
   useRequiredChatRuntime
 } from "./chunk-E4ABZWTJ.js";
+import {
+  embedAuthedFetch
+} from "./chunk-ADBE7QF3.js";
 import {
   Input,
   Label,
-  RequiredMark,
-  Skeleton
-} from "./chunk-FLKJYMVB.js";
+  RequiredMark
+} from "./chunk-CMGFZHCN.js";
 import {
   Button
 } from "./chunk-YDPKUAP4.js";
+import {
+  Skeleton
+} from "./chunk-FYEJTF5Y.js";
 
 // src/components/tickets/ticket-center.tsx
 import { useQueryClient as useQueryClient2 } from "@tanstack/react-query";