52: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"] 53: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"] 54:T4389,"use client"; import * as React from "react"; import { AnimatePresence, MotionConfig, motion } from "motion/react"; import { ArrowLeftRightIcon, CheckIcon, CopyIcon, XIcon } from "lucide-react"; import { cn } from "@/lib/utils"; import { useControllableState } from "@/lib/use-controllable-state"; import { LanguageSwitcher } from "./language-switcher"; import type { Locale } from "./types"; import { getLanguageName, isRtl } from "./locale-data"; export type { Locale }; /** Per-part class overrides, merged after the defaults with `cn`. */ export interface TranslationWidgetClassNames { /** The outer card */ root?: string; /** The header bar holding both language pickers and the swap button */ header?: string; /** Each text pane (source and target) */ pane?: string; /** Both textareas */ textarea?: string; /** The toolbar under each pane */ footer?: string; /** The swap button */ swap?: string; /** The static language chip shown when a locale is not pickable */ chip?: string; } export interface TranslationWidgetProps extends Omit< React.ComponentPropsWithoutRef<"div">, "defaultValue" | "onChange" > { /** Available locales for the per-pane language pickers. Omit to show static chips. */ locales?: Locale[]; /** BCP 47 code of the source locale (e.g. "en"). Provide this to control it. */ sourceLocale?: string; /** Initial source locale when uncontrolled */ defaultSourceLocale?: string; /** Callback when the source locale changes */ onSourceLocaleChange?: (code: string) => void; /** BCP 47 code of the target locale (e.g. "fr", "ar"). Provide this to control it. */ targetLocale?: string; /** Initial target locale when uncontrolled */ defaultTargetLocale?: string; /** Callback when the target locale changes */ onTargetLocaleChange?: (code: string) => void; /** Source text. Provide this to control the source pane. */ sourceText?: string; /** Initial source text when uncontrolled */ defaultSourceText?: string; /** Callback when the source text changes. Makes the source pane editable. */ onSourceChange?: (text: string) => void; /** Target text. Provide this to control the target pane. */ targetText?: string; /** Initial target text when uncontrolled */ defaultTargetText?: string; /** Callback when the target text changes */ onTargetChange?: (text: string) => void; /** Placeholder for the source pane (default: "Source text") */ sourcePlaceholder?: string; /** Placeholder for the target pane (default: "Translation") */ targetPlaceholder?: string; /** Accessible label for the source pane (default: "Source text") */ sourceLabel?: string; /** Accessible label for the target pane (default: "Target text") */ targetLabel?: string; /** Keep the source pane read-only even when `onSourceChange` is set */ readOnlySource?: boolean; /** Called after the swap button exchanges locales and texts */ onSwap?: () => void; /** Show the character count under the source pane (default: true) */ showCount?: boolean; /** Show a copy-to-clipboard button under the target pane (default: true) */ showCopy?: boolean; /** Show a clear button under an editable source pane (default: true) */ showClear?: boolean; /** Maximum characters in either pane; the count shows `n / max` when set */ maxLength?: number; /** Show a loading skeleton in the target pane, e.g. while a translation is fetched */ loading?: boolean; /** Called with the target text after it is copied to the clipboard */ onTargetCopy?: (text: string) => void; /** Per-part class overrides */ classNames?: TranslationWidgetClassNames; } function getLocaleLabel(code: string): string { return getLanguageName(code, "english") ?? code; } const ICON_BUTTON_CLASS = cn( "inline-flex size-8 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-[color,background-color,box-shadow] outline-none", "hover:bg-accent hover:text-accent-foreground", "focus-visible:ring-[3px] focus-visible:ring-ring/50", "disabled:pointer-events-none disabled:opacity-50", ); const SKELETON_WIDTHS = ["w-11/12", "w-4/5", "w-3/5"]; export const TranslationWidget = React.forwardRef( function TranslationWidget( { locales, sourceLocale, defaultSourceLocale, onSourceLocaleChange, targetLocale, defaultTargetLocale, onTargetLocaleChange, sourceText, defaultSourceText, onSourceChange, targetText, defaultTargetText, onTargetChange, sourcePlaceholder = "Source text", targetPlaceholder = "Translation", sourceLabel = "Source text", targetLabel = "Target text", readOnlySource = false, onSwap, showCount = true, showCopy = true, showClear = true, maxLength, loading = false, onTargetCopy, classNames, dir, className, ...rest }, forwardedRef, ) { const [source, setSource] = useControllableState( sourceText, defaultSourceText ?? "", onSourceChange, ); const [target, setTarget] = useControllableState( targetText, defaultTargetText ?? "", onTargetChange, ); const [activeSourceLocale, setActiveSourceLocale] = useControllableState( sourceLocale, defaultSourceLocale ?? locales?.[0]?.code ?? "en", onSourceLocaleChange, ); const [activeTargetLocale, setActiveTargetLocale] = useControllableState( targetLocale, defaultTargetLocale ?? locales?.[1]?.code ?? locales?.[0]?.code ?? "en", onTargetLocaleChange, ); // Each swap turns the icon another half revolution, so it always spins the // same way instead of rocking back and forth. const [swapCount, setSwapCount] = React.useState(0); const [copied, setCopied] = React.useState(false); const copiedTimer = React.useRef | null>(null); const sourceRef = React.useRef(null); React.useEffect( () => () => { if (copiedTimer.current) clearTimeout(copiedTimer.current); }, [], ); const sourceRtl = isRtl(activeSourceLocale); const targetRtl = isRtl(activeTargetLocale); const sourceReadOnly = readOnlySource || !onSourceChange; const targetReadOnly = targetText !== undefined && !onTargetChange; const sourceTextChangeable = sourceText === undefined || onSourceChange !== undefined; const targetTextChangeable = targetText === undefined || onTargetChange !== undefined; const sourceLocaleChangeable = sourceLocale === undefined || onSourceLocaleChange !== undefined; const targetLocaleChangeable = targetLocale === undefined || onTargetLocaleChange !== undefined; const canPickSourceLocale = locales !== undefined && sourceLocaleChangeable; const canPickTargetLocale = locales !== undefined && targetLocaleChangeable; // Swap is all-or-nothing: exchanging only locales or only texts would leave // each pane showing a text in the wrong language. const canSwap = sourceTextChangeable && targetTextChangeable && sourceLocaleChangeable && targetLocaleChangeable; const handleSwap = () => { // Locales first: any caller side effect on a locale change (e.g. re-translating) // runs before the text exchange, so the swapped texts win. const prevSourceLocale = activeSourceLocale; const prevTargetLocale = activeTargetLocale; const prevSource = source; const prevTarget = target; setActiveSourceLocale(prevTargetLocale); setActiveTargetLocale(prevSourceLocale); setSource(prevTarget); setTarget(prevSource); setSwapCount((n) => n + 1); onSwap?.(); }; const handleCopy = async () => { const clipboard = typeof navigator !== "undefined" ? navigator.clipboard : undefined; if (!clipboard?.writeText || !target) return; try { await clipboard.writeText(target); } catch { return; } setCopied(true); onTargetCopy?.(target); if (copiedTimer.current) clearTimeout(copiedTimer.current); copiedTimer.current = setTimeout(() => setCopied(false), 1500); }; const handleClear = () => { setSource(""); sourceRef.current?.focus(); }; const id = React.useId(); const sourceId = `${id}-source`; const targetId = `${id}-target`; const countId = `${id}-count`; const atLimit = maxLength !== undefined && source.length >= maxLength; const renderChip = (code: string) => ( {getLocaleLabel(code)} {code} ); const paneClass = cn( "relative flex min-w-0 flex-col transition-shadow", "focus-within:ring-[3px] focus-within:ring-ring/20 focus-within:ring-inset", classNames?.pane, ); const textareaClass = cn( "block min-h-40 w-full flex-1 resize-none bg-transparent px-4 pt-3 pb-1 text-base leading-relaxed outline-none field-sizing-content", "placeholder:text-muted-foreground sm:text-[0.9375rem]", classNames?.textarea, ); const footerClass = cn("flex h-11 items-center gap-1 px-2.5", classNames?.footer); return (

{canPickSourceLocale ? ( ) : ( renderChip(activeSourceLocale) )}

{canPickTargetLocale ? ( ) : ( renderChip(activeTargetLocale) )}

setSource(e.target.value)}
                readOnly={sourceReadOnly}
                placeholder={sourcePlaceholder}
                aria-label={`${sourceLabel} (${getLocaleLabel(activeSourceLocale)})`}
                aria-describedby={showCount ? countId : undefined}
                maxLength={maxLength}
                dir={sourceRtl ? "rtl" : "ltr"}
                lang={activeSourceLocale}
                rows={5}
                className={cn(textareaClass, sourceReadOnly && "cursor-default")}
              />
              <div className={footerClass}>
                {showCount && (
                  <span
                    id={countId}
                    className={cn(
                      "ps-1.5 text-xs text-muted-foreground tabular-nums",
                      atLimit && "text-destructive",
                    )}
                  >
                    {maxLength !== undefined ? `${source.length} / ${maxLength}` : source.length}
                    <span className="sr-only">{" characters"}</span>
                  </span>
                )}
                <div className="ms-auto flex items-center gap-0.5">
                  {showClear && !sourceReadOnly && (
                    <button
                      type="button"
                      onClick={handleClear}
                      disabled={!source}
                      aria-label="Clear source text"
                      className={ICON_BUTTON_CLASS}
                    >
                      <XIcon aria-hidden="true" className="size-4" />
                    </button>
                  )}
                </div>
              </div>
            </div>

<div className={cn(paneClass, "bg-muted/40")}>
              <div className="relative flex flex-1 flex-col">
                <textarea
                  id={targetId}
                  value={target}
                  onChange={(e) => setTarget(e.target.value)}
                  readOnly={targetReadOnly}
                  placeholder={loading ? undefined : targetPlaceholder}
                  aria-label={`${targetLabel} (${getLocaleLabel(activeTargetLocale)})`}
                  aria-busy={loading || undefined}
                  maxLength={maxLength}
                  dir={targetRtl ? "rtl" : "ltr"}
                  lang={activeTargetLocale}
                  rows={5}
                  className={cn(
                    textareaClass,
                    targetReadOnly && "cursor-default",
                    loading && "opacity-0",
                  )}
                />
                {loading && (
                  <div
                    aria-hidden="true"
                    data-slot="skeleton"
                    className="pointer-events-none absolute inset-x-4 top-4 space-y-3"
                  >
                    {SKELETON_WIDTHS.map((width) => (
                      <div
                        key={width}
                        className={cn("h-3.5 animate-pulse rounded-full bg-foreground/10", width)}
                      />
                    ))}
                  </div>
                )}
              </div>
              <div className={footerClass}>
                <div className="ms-auto flex items-center gap-0.5">
                  {showCopy && (
                    <button
                      type="button"
                      onClick={handleCopy}
                      disabled={!target || loading}
                      aria-label={copied ? "Copied" : "Copy translation"}
                      className={ICON_BUTTON_CLASS}
                    >
                      <AnimatePresence mode="wait" initial={false}>
                        <motion.span
                          key={copied ? "copied" : "copy"}
                          aria-hidden="true"
                          className="inline-flex"
                          initial={{ opacity: 0, scale: 0.6 }}
                          animate={{ opacity: 1, scale: 1 }}
                          exit={{ opacity: 0, scale: 0.6 }}
                          transition={{ duration: 0.12 }}
                        >
                          {copied ? (
                            <CheckIcon className="size-4 text-primary" />
                          ) : (
                            <CopyIcon className="size-4" />
                          )}
                        </motion.span>
                      </AnimatePresence>
                    </button>
                  )}
                  <span role="status" aria-live="polite" className="sr-only">
                    {copied ? "Translation copied to clipboard" : ""}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </MotionConfig>
    );
  },
);
51:["$","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","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","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":"lucide-react"}]]}]}],["$","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"}]]}]}]]}],["$","$L52",null,{"namespace":"@babelize","registryDependencies":["https://elements.babelize.co/r/language-switcher.json","https://elements.babelize.co/r/locale-types.json","https://elements.babelize.co/r/locale-data.json","https://elements.babelize.co/r/use-controllable-state.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"ui/translation-widget.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]
</article></body></html>