51:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 52:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 53:T239e,"use client"; import SmoothButton from "@/components/smoothui/smooth-button"; import { cx } from "class-variance-authority"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import React from "react"; import SiriOrb from "../siri-orb"; import { useClickOutside } from "./use-click-outside"; const SPEED = 1; const SUCCESS_DURATION = 1500; const DOCK_HEIGHT = 44; const FEEDBACK_BORDER_RADIUS = 14; const DOCK_BORDER_RADIUS = 20; const SPRING_STIFFNESS = 550; const SPRING_DAMPING = 45; const SPRING_MASS = 0.7; const CLOSE_DELAY = 0.08; interface FooterContext { closeFeedback: () => void; openFeedback: () => void; showFeedback: boolean; success: boolean; } const FooterContext = React.createContext({} as FooterContext); const useFooter = () => React.useContext(FooterContext); export function MorphSurface() { const rootRef = React.useRef(null); const feedbackRef = React.useRef(null); const [showFeedback, setShowFeedback] = React.useState(false); const [success, setSuccess] = React.useState(false); const shouldReduceMotion = useReducedMotion(); const closeFeedback = React.useCallback(() => { setShowFeedback(false); feedbackRef.current?.blur(); }, []); const openFeedback = React.useCallback(() => { setShowFeedback(true); setTimeout(() => { feedbackRef.current?.focus(); }); }, []); const onFeedbackSuccess = React.useCallback(() => { closeFeedback(); setSuccess(true); setTimeout(() => { setSuccess(false); }, SUCCESS_DURATION); }, [closeFeedback]); useClickOutside(rootRef, closeFeedback); const context = React.useMemo( () => ({ closeFeedback, openFeedback, showFeedback, success, }), [showFeedback, success, openFeedback, closeFeedback] ); return (

); } function Dock() { const { showFeedback, openFeedback } = useFooter(); const shouldReduceMotion = useReducedMotion(); return ( ); } const FEEDBACK_WIDTH = 360; const FEEDBACK_HEIGHT = 200; function Feedback({ ref, onSuccess, }: { ref: React.Ref; onSuccess: () => void; }) { const { closeFeedback, showFeedback } = useFooter(); const shouldReduceMotion = useReducedMotion(); const submitRef = React.useRef(null); function onSubmit(e: React.FormEvent) { e.preventDefault(); onSuccess(); } function onKeyDown(e: React.KeyboardEvent) { if (e.key === "Escape") { closeFeedback(); } if (e.key === "Enter" && e.metaKey) { e.preventDefault(); submitRef.current?.click(); } } return (

{showFeedback ? (

AI Input

</motion.div>
        ) : null}
      </AnimatePresence>
      <AnimatePresence>
        {showFeedback ? (
          <motion.div
            animate={shouldReduceMotion ? { opacity: 1 } : { opacity: 1 }}
            className="absolute top-2 left-3"
            exit={
              shouldReduceMotion
                ? { opacity: 0, transition: { duration: 0 } }
                : { opacity: 0 }
            }
            initial={shouldReduceMotion ? { opacity: 1 } : { opacity: 0 }}
            transition={
              shouldReduceMotion ? { duration: 0 } : { duration: 0.2 }
            }
          >
            <SiriOrb
              colors={{
                bg: "oklch(22.64% 0 0)",
              }}
              size="24px"
            />
          </motion.div>
        ) : null}
      </AnimatePresence>
    </form>
  );
}

// Add default export for lazy loading
export default MorphSurface;
54:T431,"use client";

import { type RefObject, useEffect } from "react";

export function useClickOutside<T extends HTMLElement = HTMLElement>(
  ref: RefObject<T | null> | RefObject<T | null>[],
  handler: (event: Event) => void,
  eventType: EventType = "mousedown"
): void {
  useEffect(() => {
    function callback(event: Event) {
      const target = event.target as Node;

// Do nothing if the target is not connected element with document
      if (!target?.isConnected) {
        return;
      }

const isOutside = Array.isArray(ref)
        ? ref
            .filter((r) => Boolean(r.current))
            .every((r) => r.current && !r.current.contains(target))
        : ref.current && !ref.current.contains(target);

if (isOutside) {
        handler(event);
      }
    }

window.addEventListener(eventType, callback);

return () => {
      window.removeEventListener(eventType, callback);
    };
  }, [eventType, handler, ref]);
}
50:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L51",null,{"namespace":"@smoothui","registryDependencies":["https://smoothui.dev/r/smooth-button.json","https://smoothui.dev/r/siri-orb.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"index.tsx","content":"$53","type":"registry:ui","target":"components/smoothui/morph-surface/index.tsx"},{"path":"use-click-outside.tsx","content":"$54","type":"registry:ui","target":"components/smoothui/morph-surface/use-click-outside.tsx"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>