@flamingo-stack/openframe-frontend-core 0.0.717 → 0.0.718

package/dist/chunk-YYYVS7CX.js

@@ -0,0 +1,130 @@
+"use client";
+
+// src/hooks/ui/use-auto-limit-tags.ts
+import { useCallback, useEffect, useRef, useState } from "react";
+function useAutoLimitTags({
+  count,
+  limitTags = "auto",
+  placeholder = "",
+  reserveInputWidth = true
+}) {
+  const middleRef = useRef(null);
+  const measureRef = useRef(null);
+  const textMeasureRef = useRef(null);
+  const badgeRef = useRef(null);
+  const inputRef = useRef(null);
+  const [measuredCount, setMeasuredCount] = useState(null);
+  const recalculate = useCallback(() => {
+    const middle = middleRef.current;
+    const measure2 = measureRef.current;
+    if (!middle || !measure2) {
+      setMeasuredCount(null);
+      return;
+    }
+    if (count === 0) {
+      setMeasuredCount(0);
+      return;
+    }
+    const cs = getComputedStyle(middle);
+    const padL = parseFloat(cs.paddingLeft) || 0;
+    const padR = parseFloat(cs.paddingRight) || 0;
+    const gap = parseFloat(cs.gap) || 0;
+    const middleW = middle.clientWidth;
+    let inputReservedW = 0;
+    let trailingGap = 0;
+    if (reserveInputWidth) {
+      const textW = textMeasureRef.current?.offsetWidth ?? 60;
+      const inputMinW = inputRef.current ? parseFloat(getComputedStyle(inputRef.current).minWidth) || 60 : 60;
+      inputReservedW = Math.max(textW + 8, inputMinW);
+      trailingGap = gap;
+    }
+    const available = middleW - padL - padR - inputReservedW - trailingGap;
+    const tagEls = Array.from(measure2.children);
+    const widths = tagEls.map((el) => el.offsetWidth);
+    let total = 0;
+    for (let i = 0; i < widths.length; i++) {
+      total += widths[i] + (i > 0 ? gap : 0);
+    }
+    if (total <= available) {
+      setMeasuredCount(count);
+      return;
+    }
+    const badgeW = badgeRef.current?.offsetWidth ?? 40;
+    const spaceWithBadge = available - badgeW - gap;
+    let used = 0;
+    let fitCount = 0;
+    for (let i = 0; i < widths.length; i++) {
+      const need = widths[i] + (i > 0 ? gap : 0);
+      if (used + need > spaceWithBadge) break;
+      used += need;
+      fitCount++;
+    }
+    setMeasuredCount(Math.max(0, fitCount));
+  }, [count, placeholder, reserveInputWidth]);
+  useEffect(() => {
+    if (limitTags !== "auto") return void 0;
+    const el = middleRef.current;
+    if (!el) return void 0;
+    const ro = new ResizeObserver(recalculate);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [recalculate, limitTags]);
+  const visibleCount = limitTags !== "auto" ? Math.min(limitTags, count) : measuredCount === null ? count : Math.min(measuredCount, count);
+  return { visibleCount, middleRef, measureRef, textMeasureRef, badgeRef, inputRef };
+}
+
+// src/hooks/ui/use-keyboard-collision-padding.ts
+import { useSyncExternalStore } from "react";
+var KEYBOARD_INSET_VAR = "--of-keyboard-inset";
+function measure() {
+  if (typeof document === "undefined") return 0;
+  const inset = Number.parseFloat(getComputedStyle(document.documentElement).getPropertyValue(KEYBOARD_INSET_VAR));
+  if (!(inset > 0)) return 0;
+  const layoutHeight = document.documentElement.clientHeight;
+  const viewport = window.visualViewport;
+  const viewportBottom = viewport ? viewport.offsetTop + viewport.height : layoutHeight;
+  return Math.max(0, Math.round(viewportBottom - (layoutHeight - inset)));
+}
+var listeners = /* @__PURE__ */ new Set();
+var padding = 0;
+var teardown = null;
+function sync() {
+  const next = measure();
+  if (next === padding) return;
+  padding = next;
+  for (const notify of listeners) notify();
+}
+function subscribe(onStoreChange) {
+  listeners.add(onStoreChange);
+  if (listeners.size === 1) {
+    padding = measure();
+    const observer = new MutationObserver(sync);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["style"] });
+    const viewport = window.visualViewport;
+    viewport?.addEventListener("resize", sync);
+    viewport?.addEventListener("scroll", sync);
+    teardown = () => {
+      observer.disconnect();
+      viewport?.removeEventListener("resize", sync);
+      viewport?.removeEventListener("scroll", sync);
+    };
+  }
+  return () => {
+    listeners.delete(onStoreChange);
+    if (listeners.size > 0) return;
+    teardown?.();
+    teardown = null;
+  };
+}
+function useKeyboardCollisionPadding() {
+  return useSyncExternalStore(
+    subscribe,
+    () => padding,
+    () => 0
+  );
+}
+
+export {
+  useAutoLimitTags,
+  useKeyboardCollisionPadding
+};