50: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"] 51: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"] 52:T1498,"use client" import * as React from "react" import { Slot } from "@radix-ui/react-slot" import { cn } from "@/lib/utils" type CornersProps = React.ComponentProps<"div"> & { /** Put the corners on the child element instead of a new div. */ asChild?: boolean /** * viewfinder moves the frame onto the part you point at or focus; kagi sets two corners round a phrase, as 「」 quote it; * glide keeps no frame at rest and carries one between the controls of a group, at any depth, as you point or move focus. */ variant?: "viewfinder" | "kagi" | "glide" } /** The direct child of root that holds node. */ function partOf(root: HTMLElement, node: EventTarget | null) { let el = node instanceof HTMLElement ? node : null while (el && el.parentElement !== root) el = el.parentElement return el } function aim(root: HTMLElement, part: HTMLElement) { const r = root.getBoundingClientRect() const p = part.getBoundingClientRect() root.style.setProperty("--ot-aim-x", `${p.left - r.left - root.clientLeft}px`) root.style.setProperty("--ot-aim-y", `${p.top - r.top - root.clientTop}px`) root.style.setProperty("--ot-aim-w", `${p.width}px`) root.style.setProperty("--ot-aim-h", `${p.height}px`) root.dataset.aim = "" } function rest(root: HTMLElement) { for (const k of ["x", "y", "w", "h"]) root.style.removeProperty(`--ot-aim-${k}`) delete root.dataset.aim } const CONTROL = 'a[href], button, input, select, textarea, summary, [role="button"], [tabindex]:not([tabindex="-1"])' /** glide: the control under node, at any depth inside root, if it can be used. */ function controlOf(root: HTMLElement, node: EventTarget | null) { const el = node instanceof Element ? node.closest(CONTROL) : null return el && root.contains(el) && el !== root && !el.matches(":disabled, [aria-disabled='true']") ? el : null } /** glide: frame el. Arriving from rest, the marks appear where they land instead of travelling in from the corner. */ function glideTo(root: HTMLElement, el: HTMLElement, by: "pointer" | "focus") { const landing = !("aim" in root.dataset) if (landing) root.dataset.landing = "" aim(root, el) root.dataset.aim = by if (landing) requestAnimationFrame(() => requestAnimationFrame(() => delete root.dataset.landing)) } /** * Four corner marks: a frame that doesn't close. Tune it with the custom * properties --ot-corner (length), --ot-corner-inset and --ot-corner-colour. */ function Corners({ className, asChild = false, variant, onPointerOver, onPointerLeave, onFocus, onBlur, ...props }: CornersProps) { const Comp = asChild ? Slot : "div" const finder = variant === "viewfinder" ? { onPointerOver: (e: React.PointerEvent) => { onPointerOver?.(e) const part = partOf(e.currentTarget, e.target) if (part) aim(e.currentTarget, part) }, onPointerLeave: (e: React.PointerEvent) => { onPointerLeave?.(e) // A tap leaves at once; keep the frame where the finger put it. Focus inside keeps it too. if (e.pointerType !== "touch" && !e.currentTarget.contains(document.activeElement)) rest(e.currentTarget) }, onFocus: (e: React.FocusEvent) => { onFocus?.(e) const part = partOf(e.currentTarget, e.target) if (part) aim(e.currentTarget, part) }, onBlur: (e: React.FocusEvent) => { onBlur?.(e) if (!e.currentTarget.contains(e.relatedTarget as Node | null)) rest(e.currentTarget) }, } : variant === "glide" ? { // ponytail: it moves only when the pointer or focus does; a reflow under a still frame waits for the next move. onPointerOver: (e: React.PointerEvent) => { onPointerOver?.(e) const el = controlOf(e.currentTarget, e.target) if (el && e.pointerType !== "touch") glideTo(e.currentTarget, el, "pointer") }, onPointerLeave: (e: React.PointerEvent) => { onPointerLeave?.(e) // The hand has gone: the frame goes back to where you are, or away. const here = controlOf(e.currentTarget, document.activeElement) if (here) glideTo(e.currentTarget, here, "focus") else delete e.currentTarget.dataset.aim // it fades where it is; the last place stays for the fade }, onFocus: (e: React.FocusEvent) => { onFocus?.(e) const el = controlOf(e.currentTarget, e.target) if (el) glideTo(e.currentTarget, el, "focus") }, onBlur: (e: React.FocusEvent) => { onBlur?.(e) if (!e.currentTarget.contains(e.relatedTarget as Node | null) && e.currentTarget.dataset.aim === "focus") delete e.currentTarget.dataset.aim }, } : { onPointerOver, onPointerLeave, onFocus, onBlur } return } export { Corners, type CornersProps } 4f:["$","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","@radix-ui/react-slot",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40radix-ui%2Freact-slot","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":"@radix-ui/react-slot"}]]}]}]]}],["$","$L50",null,{"namespace":"@0nlytype","registryDependencies":["https://thedirectors.agency/ui/r/0nlytype.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/0nlytype/ui/corners.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]