@alfadocs/ui-kit-debug 0.67.1 → 0.68.0

package/dist/_chunks/editor-overlay-wYm22wZK.js.map

@@ -1 +1 @@
-{"version":3,"file":"editor-overlay-wYm22wZK.js","sources":["../../src/components/editor-overlay/editor-overlay.tsx"],"sourcesContent":["/* ------------------------------------------------------------------ */\n/* EditorOverlay — a non-modal, liquid-glass bar docked INSIDE an        */\n/* editor region (Gemini / Mac Mail \"Help me write\" style).             */\n/*                                                                      */\n/* Unlike Dialog it does NOT centre on screen, trap focus, or make the  */\n/* page inert — and there is NO scrim, so the editor stays visible and   */\n/* usable behind it. It expands from the AI pill into a frosted,         */\n/* translucent, rounded bar across the editor's block-end edge. The      */\n/* host must be `position: relative` (the RichTextEditor editor region   */\n/* is); the overlay anchors to it absolutely. Escape and the close       */\n/* button dismiss it. Reusable for any editor-attached surface (AI       */\n/* draft, future inline tools).                                         */\n/* ------------------------------------------------------------------ */\n\nimport { useCallback, useEffect, useId, useRef, type ReactNode } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { X } from 'lucide-react';\nimport { cva } from 'class-variance-authority';\n\nimport { IconButton } from '../button';\n\nexport interface EditorOverlayProps {\n  /** Controlled visibility. */\n  open: boolean;\n  /** Close request (Escape or the close button). */\n  onClose: () => void;\n  /** Optional visible heading; renders a header row with a close button. */\n  title?: ReactNode;\n  /** Accessible name for the overlay region (use when there is no visible title). */\n  ariaLabel?: string;\n  /** Body content. */\n  children: ReactNode;\n  /** Optional footer slot (e.g. action buttons), right-aligned. */\n  footer?: ReactNode;\n  /** Extra classes on the glass card. */\n  className?: string;\n}\n\n// Non-blocking liquid-glass bar docked across the editor's block-end edge,\n// expanding from the AI pill. No scrim — the editor stays visible + usable.\nconst cardVariants = cva(\n  [\n    // Spans the editor's block-end edge (a docked bar) and expands from the pill.\n    'ds:absolute ds:z-20',\n    'ds:[inset-inline-start:var(--spacing-md)] ds:[inset-inline-end:var(--spacing-md)]',\n    'ds:[inset-block-end:var(--spacing-md)]',\n    // Slim docked bar — compact but with a little breathing room.\n    'ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]',\n    'ds:p-[var(--spacing-md)]',\n    'ds:rounded-[var(--radius-lg)]',\n    // Apple \"Liquid Glass\": a translucent base + backdrop blur/saturate so the\n    // editor shows through, a specular top \"rim\" + inner hairline ring, and a\n    // soft drop shadow for a floating slab. --card-border is theme-aware (dark\n    // hairline on light themes, bright on dark), so the rim reads in all four.\n    'ds:bg-[color-mix(in_srgb,var(--popover)_64%,transparent)]',\n    'ds:backdrop-blur-xl ds:backdrop-saturate-150',\n    'ds:border ds:border-[color-mix(in_srgb,var(--card-border)_70%,transparent)]',\n    'ds:shadow-[inset_0_1px_0_0_var(--card-border),inset_0_0_0_1px_color-mix(in_srgb,var(--card-border)_35%,transparent),var(--shadow-lg)]',\n    // Liquid-glass grow out of the pill (bottom-inline-end origin).\n    'ds:origin-bottom-right ds:animate-in ds:fade-in-0 ds:zoom-in-95',\n    'ds:motion-reduce:animate-none',\n  ].join(' '),\n);\n\nconst titleClass =\n  'ds:text-[length:var(--font-size-base)] ds:font-medium ds:text-[color:var(--foreground)]';\n\nexport function EditorOverlay({\n  open,\n  onClose,\n  title,\n  ariaLabel,\n  children,\n  footer,\n  className,\n}: EditorOverlayProps): React.JSX.Element | null {\n  const { t } = useTranslation();\n  const cardRef = useRef<HTMLDivElement>(null);\n  const restoreFocusRef = useRef<HTMLElement | null>(null);\n  const titleId = useId();\n\n  const handleClose = useCallback(() => onClose(), [onClose]);\n\n  useEffect(() => {\n    if (!open) return undefined;\n    restoreFocusRef.current = document.activeElement as HTMLElement | null;\n    // Move focus into the overlay (non-modal: we don't trap it, just seed it).\n    const raf = window.requestAnimationFrame(() => {\n      const focusable = cardRef.current?.querySelector<HTMLElement>(\n        'input, textarea, button, [tabindex]:not([tabindex=\"-1\"])',\n      );\n      (focusable ?? cardRef.current)?.focus();\n    });\n    const onKeyDown = (event: KeyboardEvent): void => {\n      if (event.key === 'Escape') {\n        event.stopPropagation();\n        handleClose();\n      }\n    };\n    document.addEventListener('keydown', onKeyDown);\n    return () => {\n      window.cancelAnimationFrame(raf);\n      document.removeEventListener('keydown', onKeyDown);\n      restoreFocusRef.current?.focus?.();\n    };\n  }, [open, handleClose]);\n\n  if (!open) return null;\n\n  return (\n    <div data-component=\"editor-overlay\">\n      <div\n        ref={cardRef}\n        role=\"dialog\"\n        aria-modal=\"false\"\n        aria-labelledby={title ? titleId : undefined}\n        aria-label={title ? undefined : ariaLabel}\n        tabIndex={-1}\n        className={[cardVariants(), className].filter(Boolean).join(' ')}\n      >\n        {title ? (\n          <div className=\"ds:flex ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)]\">\n            <div id={titleId} className={titleClass}>\n              {title}\n            </div>\n            <IconButton\n              size=\"sm\"\n              intent=\"ghost\"\n              icon={<X />}\n              aria-label={t('common.close')}\n              onClick={handleClose}\n            />\n          </div>\n        ) : null}\n        <div className=\"ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]\">\n          {children}\n        </div>\n        {footer ? (\n          <div className=\"ds:flex ds:flex-wrap ds:items-center ds:justify-end ds:gap-[var(--spacing-sm)]\">\n            {footer}\n          </div>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n"],"names":["cardVariants","cva","titleClass","EditorOverlay","open","onClose","title","ariaLabel","children","footer","className","t","useTranslation","cardRef","useRef","restoreFocusRef","titleId","useId","handleClose","useCallback","useEffect","raf","_b","_a","onKeyDown","event","jsx","jsxs","IconButton","X"],"mappings":";;;;;;AAwCA,MAAMA,IAAeC;AAAA,EACnB;AAAA;AAAA,IAEE;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,EAAA,EACA,KAAK,GAAG;AACZ,GAEMC,IACJ;AAEK,SAASC,EAAc;AAAA,EAC5B,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AACF,GAAiD;AAC/C,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACRC,IAAUC,EAAuB,IAAI,GACrCC,IAAkBD,EAA2B,IAAI,GACjDE,IAAUC,EAAA,GAEVC,IAAcC,EAAY,MAAMd,KAAW,CAACA,CAAO,CAAC;AA0B1D,SAxBAe,EAAU,MAAM;AACd,QAAI,CAAChB,EAAM;AACX,IAAAW,EAAgB,UAAU,SAAS;AAEnC,UAAMM,IAAM,OAAO,sBAAsB,MAAM;;AAI7C,OAACC,MAHiBC,IAAAV,EAAQ,YAAR,gBAAAU,EAAiB;AAAA,QACjC;AAAA,YAEYV,EAAQ,YAArB,QAAAS,EAA+B;AAAA,IAClC,CAAC,GACKE,IAAY,CAACC,MAA+B;AAChD,MAAIA,EAAM,QAAQ,aAChBA,EAAM,gBAAA,GACNP,EAAA;AAAA,IAEJ;AACA,oBAAS,iBAAiB,WAAWM,CAAS,GACvC,MAAM;;AACX,aAAO,qBAAqBH,CAAG,GAC/B,SAAS,oBAAoB,WAAWG,CAAS,IACjDF,KAAAC,IAAAR,EAAgB,YAAhB,gBAAAQ,EAAyB,UAAzB,QAAAD,EAAA,KAAAC;AAAA,IACF;AAAA,EACF,GAAG,CAACnB,GAAMc,CAAW,CAAC,GAEjBd,IAGH,gBAAAsB,EAAC,OAAA,EAAI,kBAAe,kBAClB,UAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKd;AAAA,MACL,MAAK;AAAA,MACL,cAAW;AAAA,MACX,mBAAiBP,IAAQU,IAAU;AAAA,MACnC,cAAYV,IAAQ,SAAYC;AAAA,MAChC,UAAU;AAAA,MACV,WAAW,CAACP,EAAA,GAAgBU,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAE9D,UAAA;AAAA,QAAAJ,IACC,gBAAAqB,EAAC,OAAA,EAAI,WAAU,yEACb,UAAA;AAAA,UAAA,gBAAAD,EAAC,OAAA,EAAI,IAAIV,GAAS,WAAWd,GAC1B,UAAAI,GACH;AAAA,UACA,gBAAAoB;AAAA,YAACE;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,QAAO;AAAA,cACP,wBAAOC,GAAA,EAAE;AAAA,cACT,cAAYlB,EAAE,cAAc;AAAA,cAC5B,SAASO;AAAA,YAAA;AAAA,UAAA;AAAA,QACX,EAAA,CACF,IACE;AAAA,QACJ,gBAAAQ,EAAC,OAAA,EAAI,WAAU,kDACZ,UAAAlB,EAAA,CACH;AAAA,QACCC,IACC,gBAAAiB,EAAC,OAAA,EAAI,WAAU,kFACZ,aACH,IACE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAER,IApCgB;AAsCpB;"}
+{"version":3,"file":"editor-overlay-wYm22wZK.js","sources":["../../src/components/editor-overlay/editor-overlay.tsx"],"sourcesContent":["/* ------------------------------------------------------------------ */\n/* EditorOverlay — a non-modal, liquid-glass bar docked INSIDE an        */\n/* editor region (Gemini / Mac Mail \"Help me write\" style).             */\n/*                                                                      */\n/* Unlike Dialog it does NOT centre on screen, trap focus, or make the  */\n/* page inert — and there is NO scrim, so the editor stays visible and   */\n/* usable behind it. It expands from the AI pill into a frosted,         */\n/* translucent, rounded bar across the editor's block-end edge. The      */\n/* host must be `position: relative` (the RichTextEditor editor region   */\n/* is); the overlay anchors to it absolutely. Escape and the close       */\n/* button dismiss it. Reusable for any editor-attached surface (AI       */\n/* draft, future inline tools).                                         */\n/* ------------------------------------------------------------------ */\n\nimport { useCallback, useEffect, useId, useRef, type ReactNode } from 'react';\nimport { useTranslation } from 'react-i18next';\nimport { X } from 'lucide-react';\nimport { cva } from 'class-variance-authority';\n\nimport { IconButton } from '../button';\n\nexport interface EditorOverlayProps {\n  /** Controlled visibility. */\n  open: boolean;\n  /** Close request (Escape or the close button). */\n  onClose: () => void;\n  /** Optional visible heading; renders a header row with a close button. */\n  title?: ReactNode;\n  /** Accessible name for the overlay region (use when there is no visible title). */\n  ariaLabel?: string;\n  /** Body content. */\n  children: ReactNode;\n  /** Optional footer slot (e.g. action buttons), right-aligned. */\n  footer?: ReactNode;\n  /** Extra classes on the glass card. */\n  className?: string;\n}\n\n// Non-blocking liquid-glass bar docked across the editor's block-end edge,\n// expanding from the AI pill. No scrim — the editor stays visible + usable.\nconst cardVariants = cva(\n  [\n    // Spans the editor's block-end edge (a docked bar) and expands from the pill.\n    'ds:absolute ds:z-20',\n    'ds:[inset-inline-start:var(--spacing-md)] ds:[inset-inline-end:var(--spacing-md)]',\n    'ds:[inset-block-end:var(--spacing-md)]',\n    // Slim docked bar — compact but with a little breathing room.\n    'ds:flex ds:flex-col ds:gap-[var(--spacing-sm)]',\n    'ds:p-[var(--spacing-md)]',\n    'ds:rounded-[var(--radius-lg)]',\n    // Apple \"Liquid Glass\": a translucent base + backdrop blur/saturate so the\n    // editor shows through, a specular top \"rim\" + inner hairline ring, and a\n    // soft drop shadow for a floating slab. --card-border is theme-aware (dark\n    // hairline on light themes, bright on dark), so the rim reads in all four.\n    'ds:bg-[color-mix(in_srgb,var(--popover)_64%,transparent)]',\n    'ds:backdrop-blur-xl ds:backdrop-saturate-150',\n    'ds:border ds:border-[color-mix(in_srgb,var(--card-border)_70%,transparent)]',\n    'ds:shadow-[inset_0_1px_0_0_var(--card-border),inset_0_0_0_1px_color-mix(in_srgb,var(--card-border)_35%,transparent),var(--shadow-lg)]',\n    // Liquid-glass grow out of the pill (bottom-inline-end origin).\n    'ds:origin-bottom-right ds:animate-in ds:fade-in-0 ds:zoom-in-95',\n    'ds:motion-reduce:animate-none',\n  ].join(' '),\n);\n\nconst titleClass =\n  'ds:text-[length:var(--font-size-base)] ds:font-medium ds:text-[color:var(--foreground)]';\n\nexport function EditorOverlay({\n  open,\n  onClose,\n  title,\n  ariaLabel,\n  children,\n  footer,\n  className,\n}: EditorOverlayProps): React.JSX.Element | null {\n  const { t } = useTranslation();\n  const cardRef = useRef<HTMLDivElement>(null);\n  const restoreFocusRef = useRef<HTMLElement | null>(null);\n  const titleId = useId();\n\n  const handleClose = useCallback(() => onClose(), [onClose]);\n\n  useEffect(() => {\n    if (!open) return undefined;\n    restoreFocusRef.current = document.activeElement as HTMLElement | null;\n    // Move focus into the overlay (non-modal: we don't trap it, just seed it).\n    const raf = window.requestAnimationFrame(() => {\n      const focusable = cardRef.current?.querySelector<HTMLElement>(\n        'input, textarea, button, [tabindex]:not([tabindex=\"-1\"])',\n      );\n      (focusable ?? cardRef.current)?.focus();\n    });\n    const onKeyDown = (event: KeyboardEvent): void => {\n      if (event.key === 'Escape') {\n        event.stopPropagation();\n        handleClose();\n      }\n    };\n    document.addEventListener('keydown', onKeyDown);\n    return () => {\n      window.cancelAnimationFrame(raf);\n      document.removeEventListener('keydown', onKeyDown);\n      restoreFocusRef.current?.focus?.();\n    };\n  }, [open, handleClose]);\n\n  if (!open) return null;\n\n  return (\n    <div data-component=\"editor-overlay\">\n      <div\n        ref={cardRef}\n        role=\"dialog\"\n        aria-modal=\"false\"\n        aria-labelledby={title ? titleId : undefined}\n        aria-label={title ? undefined : ariaLabel}\n        tabIndex={-1}\n        className={[cardVariants(), className].filter(Boolean).join(' ')}\n      >\n        {/* Header only when there's a visible title — a title-less overlay is a\n            header-less composer (named via ariaLabel) whose consumer provides\n            its own inline close so no empty band is reserved for it. */}\n        {title ? (\n          <div className=\"ds:flex ds:items-center ds:justify-between ds:gap-[var(--spacing-sm)]\">\n            <div id={titleId} className={titleClass}>\n              {title}\n            </div>\n            <IconButton\n              size=\"sm\"\n              intent=\"ghost\"\n              icon={<X />}\n              aria-label={t('common.close')}\n              onClick={handleClose}\n            />\n          </div>\n        ) : null}\n        <div className=\"ds:flex ds:flex-col ds:gap-[var(--spacing-xs)]\">\n          {children}\n        </div>\n        {footer ? (\n          <div className=\"ds:flex ds:flex-wrap ds:items-center ds:justify-end ds:gap-[var(--spacing-sm)]\">\n            {footer}\n          </div>\n        ) : null}\n      </div>\n    </div>\n  );\n}\n"],"names":["cardVariants","cva","titleClass","EditorOverlay","open","onClose","title","ariaLabel","children","footer","className","t","useTranslation","cardRef","useRef","restoreFocusRef","titleId","useId","handleClose","useCallback","useEffect","raf","_b","_a","onKeyDown","event","jsx","jsxs","IconButton","X"],"mappings":";;;;;;AAwCA,MAAMA,IAAeC;AAAA,EACnB;AAAA;AAAA,IAEE;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA;AAAA,EAAA,EACA,KAAK,GAAG;AACZ,GAEMC,IACJ;AAEK,SAASC,EAAc;AAAA,EAC5B,MAAAC;AAAA,EACA,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AACF,GAAiD;AAC/C,QAAM,EAAE,GAAAC,EAAA,IAAMC,EAAA,GACRC,IAAUC,EAAuB,IAAI,GACrCC,IAAkBD,EAA2B,IAAI,GACjDE,IAAUC,EAAA,GAEVC,IAAcC,EAAY,MAAMd,KAAW,CAACA,CAAO,CAAC;AA0B1D,SAxBAe,EAAU,MAAM;AACd,QAAI,CAAChB,EAAM;AACX,IAAAW,EAAgB,UAAU,SAAS;AAEnC,UAAMM,IAAM,OAAO,sBAAsB,MAAM;;AAI7C,OAACC,MAHiBC,IAAAV,EAAQ,YAAR,gBAAAU,EAAiB;AAAA,QACjC;AAAA,YAEYV,EAAQ,YAArB,QAAAS,EAA+B;AAAA,IAClC,CAAC,GACKE,IAAY,CAACC,MAA+B;AAChD,MAAIA,EAAM,QAAQ,aAChBA,EAAM,gBAAA,GACNP,EAAA;AAAA,IAEJ;AACA,oBAAS,iBAAiB,WAAWM,CAAS,GACvC,MAAM;;AACX,aAAO,qBAAqBH,CAAG,GAC/B,SAAS,oBAAoB,WAAWG,CAAS,IACjDF,KAAAC,IAAAR,EAAgB,YAAhB,gBAAAQ,EAAyB,UAAzB,QAAAD,EAAA,KAAAC;AAAA,IACF;AAAA,EACF,GAAG,CAACnB,GAAMc,CAAW,CAAC,GAEjBd,IAGH,gBAAAsB,EAAC,OAAA,EAAI,kBAAe,kBAClB,UAAA,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAKd;AAAA,MACL,MAAK;AAAA,MACL,cAAW;AAAA,MACX,mBAAiBP,IAAQU,IAAU;AAAA,MACnC,cAAYV,IAAQ,SAAYC;AAAA,MAChC,UAAU;AAAA,MACV,WAAW,CAACP,EAAA,GAAgBU,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAK9D,UAAA;AAAA,QAAAJ,IACC,gBAAAqB,EAAC,OAAA,EAAI,WAAU,yEACb,UAAA;AAAA,UAAA,gBAAAD,EAAC,OAAA,EAAI,IAAIV,GAAS,WAAWd,GAC1B,UAAAI,GACH;AAAA,UACA,gBAAAoB;AAAA,YAACE;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,QAAO;AAAA,cACP,wBAAOC,GAAA,EAAE;AAAA,cACT,cAAYlB,EAAE,cAAc;AAAA,cAC5B,SAASO;AAAA,YAAA;AAAA,UAAA;AAAA,QACX,EAAA,CACF,IACE;AAAA,QACJ,gBAAAQ,EAAC,OAAA,EAAI,WAAU,kDACZ,UAAAlB,EAAA,CACH;AAAA,QACCC,IACC,gBAAAiB,EAAC,OAAA,EAAI,WAAU,kFACZ,aACH,IACE;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,GAER,IAvCgB;AAyCpB;"}