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:T14a8,"use client"; import { forwardRef } from "react"; import type { AnchorHTMLAttributes, MouseEvent, ReactNode } from "react"; import { cn } from "../../utils"; import { useSoundCue } from "../../sound/use-sound"; import "./link.css"; export interface LinkProps extends Omit, "className"> { /** Destination URL */ href: string; /** Visual weight: `default` reads as inline copy, `muted` recedes into supporting text */ variant?: "default" | "muted"; /** Marks the destination as off-site: appends an arrow glyph and defaults `target` * to `_blank`, which in turn brings the safe `rel` and the "opens in a new tab" * announcement. Override `target` with `_self`, `_parent` or `_top` and both drop * away — the resolved target decides those, not this flag */ external?: boolean; /** When the underline shows: only on hover/focus (`hover`, the default), always, or never */ underline?: "hover" | "always" | "none"; /** Anchor `target`. `external` fills this in as `_blank` when left unset */ target?: string; /** Anchor `rel`. Merged with, never replaced by, the `noopener noreferrer` tokens * required whenever `target` opens a new browsing context — any value other than * `_self`, `_parent`, or `_top` (case-insensitively), not just `_blank` */ rel?: string; /** Link content */ children?: ReactNode; /** Additional CSS classes */ className?: string; /** * Plays the matching interface cue through the sound controller. Off * by default; only audible once the user has enabled sound. */ sound?: boolean; } // Per the HTML standard, *any* target naming a browsing context that doesn't // already exist opens a new top-level one — identical to `_blank`, // `window.opener` intact — not just the literal string `"_blank"`. Only // these three keywords are guaranteed to stay in the current context, and // the standard matches them ASCII-case-insensitively. const SAME_TAB_TARGETS = new Set(["_self", "_parent", "_top"]); export const Link = forwardRef(function Link( { href, variant = "default", external = false, underline = "hover", target, rel, children, className, sound = false, onClick, ...rest }, ref ) { const playCue = useSoundCue(sound); // The single call site for the cue: never a second listener, and never // `preventDefault` — navigation is untouched, this only rides alongside it. function handleClick(event: MouseEvent) { playCue("press"); onClick?.(event); } // `external` only *defaults* the tab target — a caller who passes both // `external` and an explicit `target` (e.g. a named frame) still wins. const computedTarget = external ? (target ?? "_blank") : target; // A new context that keeps a handle on `window.opener` can repaint the tab // it came from, so the safe tokens are non-negotiable whenever the link // opens one — the `_blank` that `external` defaults to, an explicit // `target="_blank"`, or any other named target that isn't one of the three // same-tab keywords above. Existing tokens are preserved with a Set so a // caller-supplied `rel` is extended, never dropped. // // The predicate reads the RESOLVED target and nothing else. `external` // alone already resolves to `_blank`, so it needs no separate clause — and // a caller who passes `external` with `target="_self"` genuinely stays in // this tab, where forcing `noreferrer` would strip a referrer the // destination may rely on for no safety gain. const opensNewContext = !!computedTarget && !SAME_TAB_TARGETS.has(computedTarget.toLowerCase()); let computedRel = rel; if (opensNewContext) { const tokens = new Set(rel?.split(/\s+/).filter(Boolean)); tokens.add("noopener"); tokens.add("noreferrer"); computedRel = [...tokens].join(" "); } const classes = cn( "ft-link inline-flex w-fit items-center gap-1 no-underline transition-colors focus-visible:outline-none", variant === "default" ? "ft-link--default text-sm" : "text-muted-foreground text-[13px]", underline === "always" && "underline underline-offset-[3px]", underline === "hover" && "hover:underline focus-visible:underline hover:underline-offset-[3px] focus-visible:underline-offset-[3px]", className ); return ( {children} {external && ( <> {/* The arrow says "off-site", which `external` alone settles. This sentence says "and it will open somewhere else", which only the resolved target can settle — an `external` link pointed back at `_self` stays right here, and announcing a new tab that never opens is a lie a screen-reader user acts on. */} {opensNewContext && (opens in a new tab)} )} ); }); 53:T9c3,/* * `--ft-accent` is the brand purple shared, by name only, across every * component in the Actions family — none of them can reach a real shared * token file, so each declares the same fallback locally under its own * name (`--ft-link-accent`) and *reads* `--ft-accent` through `var()` * rather than redeclaring it. A flat `--ft-accent: …` here would shadow * whatever an ancestor set, since a property declared on a closer element * always wins regardless of its value — that would make retinting the * family from a shared ancestor silently stop working for this component * alone. */ .ft-link { --ft-link-accent: var( --ft-accent, light-dark(oklch(0.5432 0.2528 300.22), oklch(0.604 0.2606 301.75)) ); } /* * The muted variant intentionally skips these two custom properties and * uses the ordinary `text-muted-foreground` token instead — it is supporting * copy, not a call to action, so it does not carry the brand hue. */ .ft-link--default { color: var(--ft-link, light-dark(oklch(0.45 0.1013 293.57), oklch(0.8112 0.1013 293.57))); } .ft-link--default:hover { color: var(--ft-link-hover, light-dark(oklch(0.36 0.1013 293.28), oklch(0.8943 0.0549 293.28))); } .ft-link:focus-visible { border-radius: 3px; box-shadow: 0 0 0 3px color-mix(in oklch, var(--ft-link-accent) 35%, transparent); } /* * The external-link arrow nudges a pixel up and to the right on * interaction — the direction it points, so the gesture reads as "this * leaves the page" rather than as decoration. `--ft-ease-out` because the * arrow arrives; it does not toggle back and forth in place. * * `box-shadow` is deliberately absent from the transition list: it is the * focus ring above, and a focus ring must never animate. * * 150ms = tokens.DURATIONS.fast, cubic-bezier(0.16, 1, 0.3, 1) = tokens.EASINGS.out */ @media (prefers-reduced-motion: no-preference) { .ft-link-icon { transition: transform var(--ft-link-icon-duration, var(--ft-duration-fast, 150ms)) var(--ft-ease-out, cubic-bezier(0.16, 1, 0.3, 1)); } /* Keyboard parity is not optional, and it is not free-standing: `:focus-visible` is declared unconditionally while `:hover` is gated behind `(hover: hover)`, so a touch device that synthesises a sticky hover never leaves the arrow parked off-centre. */ .ft-link:focus-visible .ft-link-icon { transform: translate(1px, -1px); } @media (hover: hover) { .ft-link:hover .ft-link-icon { transform: translate(1px, -1px); } } } 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":[null,["$","$L50",null,{"namespace":"@fancy-ui","registryDependencies":["https://fancy-ui.rama.app/r/internals-dom.json","https://fancy-ui.rama.app/r/sound.json","https://fancy-ui.rama.app/r/utils.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"react/src/components/link/Link.tsx","content":"$52","type":"registry:ui","target":"@ui/fancy/components/link/Link.tsx"},{"path":"react/src/components/link/index.ts","content":"\"use client\";\n\nexport { Link } from \"./Link\";\nexport type { LinkProps } from \"./Link\";\n","type":"registry:ui","target":"@ui/fancy/components/link/index.ts"},{"path":"react/src/components/link/link.css","content":"$53","type":"registry:ui","target":"@ui/fancy/components/link/link.css"}],"className":"h-[70svh] min-h-80"}]]}]