@epicbagel/saas-kit 1.2.2 → 1.3.0

package/README.md

@@ -135,6 +135,90 @@ public in 1.1.0, and these were the decisions about its props then:
 - The drop handling follows AI SDK Elements' `PromptInput` and its
   `globalDrop` (Apache-2.0; see `THIRD_PARTY_NOTICES.md`).
 
+### A reply in the background (1.2.3)
+
+- **A running turn.** `pending` does two things: it ends the thread on the
+  running line, and it locks the composer. A reply worked on in the
+  background, while the user keeps writing, needs only the first. Put a turn
+  with `status: "running"` in `messages`, and the thread draws the line
+  `pending` draws, labelled with the turn's `text` (else `pendingLabel`),
+  where the turn sits, while the composer stays free. Replace it with the
+  reply when that lands.
+
+  ```tsx
+  <Chat
+    messages={[
+      ...messages,
+      ...(replyOwed ? [{ id: "reply", role: "assistant", status: "running", text: "Reading your files…" } as const] : []),
+    ]}
+    onSend={send}
+  />
+  ```
+
+- **It is not a message.** The row is the one `pending` draws: its own row
+  of the log, which announces it as it appears, with no message id, so the
+  scroller neither anchors it nor tracks it. It has no time marker, files or
+  rich `content`, and the turns either side of it keep their time grouping.
+
+## File preview (1.3.0)
+
+`primitives/file-preview` shows a file in a dialog without leaving the page:
+the kit's large preview dialog on desktop and its near-full-height drawer on
+mobile, with the file's name, a download action and a close button in the
+header.
+
+```tsx
+import { FilePreview } from "@epicbagel/saas-kit/primitives/file-preview";
+
+<FilePreview
+  open={open}
+  onOpenChange={setOpen}
+  title={file.name}
+  mediaType={file.mediaType}
+  file={blob} // fetched by the app, with its own authentication
+  loading={!blob && !error}
+  error={error}
+  onDownload={download}
+/>
+```
+
+- **Each type its own way.** A PDF opens in the browser's own viewer (no PDF
+  engine in the bundle), an image as an image, text (plain text, CSV, JSON,
+  code) as it is, Markdown rendered through `LazyMarkdown`, audio and video
+  in the browser's player. Office documents, archives and anything else say
+  "No preview for this file." and offer the download; `fallback` replaces
+  that message. An image, player or text that won't load says so, with the
+  download.
+- **The app fetches.** The dialog is presentation only. Pass the file as a
+  `Blob` (`file`), fetched with whatever authentication the app needs, or a
+  short-lived, safe URL (`src`). Text and Markdown are read from the `Blob`,
+  or fetched from `src`, which must then allow it (the same origin, or
+  CORS). Nothing is read or fetched while the dialog is closed.
+- **Safe by construction.** A `Blob` is shown through an object URL the
+  dialog revokes when it closes or the file changes. A PDF from a `Blob` is
+  always shown as `application/pdf`, whatever type the blob carries, so a
+  file can never render as a page of your origin; text is never
+  interpreted; a Markdown file's raw HTML is ignored and its links open in a
+  new tab. A `src` is framed as it is, so serve it with its real type.
+- **Telling the type.** `filePreviewKind({ name, mediaType })` returns `pdf`,
+  `image`, `text`, `markdown`, `audio`, `video` or `none`, which is what the
+  dialog uses unless you pass `kind`. The media type decides when it says
+  something, and the extension when it is missing or generic
+  (`application/octet-stream`); text named `.md` is Markdown, and a name
+  that says text wins over a type with no preview (Windows reports a `.csv`
+  as `application/vnd.ms-excel`). Call it to choose between opening a
+  preview and downloading straight away.
+- **Long text.** A text file over 500,000 characters shows its start, cut at
+  a line break, under `truncatedLabel`.
+- **Copy.** `downloadLabel` ("Download file"), `loadingLabel` ("Loading
+  preview…"), `unavailableLabel` ("No preview for this file."),
+  `failedLabel` ("This file couldn't be shown here.") and `truncatedLabel`
+  can all be replaced; the close button's name ("Close preview") is fixed
+  for now.
+
+`primitives/document-preview` is the same dialog with every `src` in the
+browser's viewer, as it was in ui-kit; its API is unchanged.
+
 ## License
 
 MIT. Some components and styles are adapted from shadcn/ui, and the file

package/dist/chunk-2TKLS73N.js

@@ -0,0 +1,121 @@
+"use client";
+import {
+  ResponsiveDialog,
+  ResponsiveDialogClose,
+  ResponsiveDialogContent,
+  ResponsiveDialogDescription,
+  ResponsiveDialogHeader,
+  ResponsiveDialogTitle
+} from "./chunk-JTI4244T.js";
+import {
+  Icon
+} from "./chunk-KN4RPX35.js";
+import {
+  Button
+} from "./chunk-HQRWRRZJ.js";
+import {
+  cn
+} from "./chunk-G6SRSWXB.js";
+
+// src/primitives/file-preview-internals.tsx
+import { Download, Loader2, X } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function PreviewDialog({
+  open,
+  onOpenChange,
+  title,
+  onDownload,
+  downloading,
+  downloadLabel,
+  children
+}) {
+  return /* @__PURE__ */ jsx(ResponsiveDialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs(ResponsiveDialogContent, { presentation: "preview", className: "h-[92dvh] outline-none", children: [
+    /* @__PURE__ */ jsxs(ResponsiveDialogHeader, { className: "shrink-0 border-b border-border", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+        /* @__PURE__ */ jsx(ResponsiveDialogTitle, { className: "min-w-0 flex-1 truncate text-left", children: title }),
+        onDownload && /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "icon-compact",
+            variant: "ghost",
+            onClick: onDownload,
+            disabled: downloading,
+            title: downloadLabel,
+            "aria-label": downloadLabel,
+            children: /* @__PURE__ */ jsx(Icon, { icon: downloading ? Loader2 : Download, size: "sm", spin: downloading })
+          }
+        ),
+        /* @__PURE__ */ jsx(ResponsiveDialogClose, { asChild: true, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "icon-compact",
+            variant: "ghost",
+            title: "Close preview",
+            "aria-label": "Close preview",
+            children: /* @__PURE__ */ jsx(Icon, { icon: X, size: "sm" })
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxs(ResponsiveDialogDescription, { className: "sr-only", children: [
+        "Preview of ",
+        title
+      ] })
+    ] }),
+    children
+  ] }) });
+}
+function PreviewStage({
+  layout = "center",
+  label,
+  children
+}) {
+  const scrolls = layout === "scroll";
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "preview-stage",
+      role: scrolls ? "region" : void 0,
+      "aria-label": scrolls ? label : void 0,
+      tabIndex: scrolls ? 0 : void 0,
+      className: cn(
+        "min-h-0 flex-1",
+        scrolls ? "overflow-y-auto overscroll-contain bg-background p-4 outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/50 sm:p-6" : "flex items-center justify-center overflow-hidden bg-muted"
+      ),
+      children
+    }
+  );
+}
+function PreviewLoading({ label }) {
+  return /* @__PURE__ */ jsxs("div", { role: "status", className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+    /* @__PURE__ */ jsx(Icon, { icon: Loader2, size: "sm", spin: true }),
+    label
+  ] });
+}
+function PreviewNotice({
+  icon,
+  alert = false,
+  message,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: alert ? "alert" : void 0,
+      className: "flex max-w-sm flex-col items-center gap-3 p-6 text-center text-sm text-muted-foreground",
+      children: [
+        /* @__PURE__ */ jsx(Icon, { icon, size: "lg" }),
+        /* @__PURE__ */ jsx("span", { children: message }),
+        children
+      ]
+    }
+  );
+}
+
+export {
+  PreviewDialog,
+  PreviewStage,
+  PreviewLoading,
+  PreviewNotice
+};

package/dist/chunk-4UUTKR3V.cjs

@@ -0,0 +1,53 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }"use client";
+
+
+var _chunkKWLSBTB2cjs = require('./chunk-KWLSBTB2.cjs');
+
+// src/primitives/image.tsx
+var _react = require('react');
+var _jsxruntime = require('react/jsx-runtime');
+var fitStyles = { cover: "object-cover", contain: "object-contain" };
+var radiusStyles = { none: "", sm: "rounded-sm", md: "rounded-md", xl: "rounded-xl", full: "rounded-full" };
+var Image = _react.forwardRef.call(void 0, function Image2({ fit = "cover", frameHeight, radius = "none", width = "auto", align = "start", border = false, shadow = "none", emphasis = "full", loadingIndicator = "none", className, onLoad, onError, src, ...props }, ref) {
+  const [loaded, setLoaded] = _react.useState.call(void 0, loadingIndicator === "none" || !src);
+  _react.useEffect.call(void 0, () => {
+    setLoaded(loadingIndicator === "none" || !src);
+  }, [loadingIndicator, src]);
+  const loading = loadingIndicator === "pulse" && !loaded;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "img",
+    {
+      ref,
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        fitStyles[fit],
+        radiusStyles[radius],
+        frameHeight === "sm" && "h-16",
+        frameHeight === "md" && "h-28",
+        width === "full" && "w-full",
+        width === "preview" && "w-full max-w-[380px]",
+        width === "preview-lg" && "w-full max-w-[440px]",
+        align === "center" && "mx-auto",
+        border && "border",
+        shadow === "subtle" && "shadow-xs",
+        loading && "animate-pulse bg-muted",
+        emphasis === "soft-until-parent-hover" && "transition-opacity duration-200 md:opacity-70 md:group-hover:opacity-100",
+        className
+      ),
+      src,
+      ...props,
+      "aria-busy": loading || void 0,
+      onLoad: (event) => {
+        setLoaded(true);
+        _optionalChain([onLoad, 'optionalCall', _ => _(event)]);
+      },
+      onError: (event) => {
+        setLoaded(true);
+        _optionalChain([onError, 'optionalCall', _2 => _2(event)]);
+      }
+    }
+  );
+});
+
+
+
+exports.Image = Image;

package/dist/chunk-BTHYGHOH.cjs

@@ -0,0 +1,143 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }"use client";
+
+
+
+
+
+
+
+
+
+var _chunk2BHI5ZWJcjs = require('./chunk-2BHI5ZWJ.cjs');
+
+
+
+
+
+
+
+
+
+var _chunkWDXEJDMOcjs = require('./chunk-WDXEJDMO.cjs');
+
+
+var _chunkKWLSBTB2cjs = require('./chunk-KWLSBTB2.cjs');
+
+// src/primitives/responsive-dialog.tsx
+var _react = require('react'); var React = _interopRequireWildcard(_react);
+var _reactresponsive = require('react-responsive');
+var _jsxruntime = require('react/jsx-runtime');
+var DesktopContext = React.createContext(false);
+var useIsDesktop = () => React.useContext(DesktopContext);
+var DESKTOP_QUERY = { minWidth: 1024 };
+var ResponsiveDialog = ({ children, ...props }) => {
+  const isDesktop = _reactresponsive.useMediaQuery.call(void 0, DESKTOP_QUERY);
+  const Root = isDesktop ? _chunkWDXEJDMOcjs.Dialog : _chunk2BHI5ZWJcjs.Drawer;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DesktopContext.Provider, { value: isDesktop, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Root, { ...props, children }) });
+};
+ResponsiveDialog.displayName = "ResponsiveDialog";
+var ResponsiveDialogTrigger = ({
+  children,
+  ...props
+}) => {
+  const Trigger = useIsDesktop() ? _chunkWDXEJDMOcjs.DialogTrigger : _chunk2BHI5ZWJcjs.DrawerTrigger;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Trigger, { ...props, children });
+};
+ResponsiveDialogTrigger.displayName = "ResponsiveDialogTrigger";
+var ResponsiveDialogClose = ({
+  children,
+  ...props
+}) => {
+  const Close = useIsDesktop() ? _chunkWDXEJDMOcjs.DialogClose : _chunk2BHI5ZWJcjs.DrawerClose;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Close, { ...props, children });
+};
+ResponsiveDialogClose.displayName = "ResponsiveDialogClose";
+var ResponsiveDialogContent = React.forwardRef(({ className, children, presentation = "default", ...props }, ref) => {
+  if (useIsDesktop()) {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _chunkWDXEJDMOcjs.DialogContent,
+      {
+        ref,
+        className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+          "flex max-h-[85vh] max-w-md flex-col gap-0 overflow-hidden p-0",
+          presentation === "preview" && "max-w-2xl sm:h-[85vh] [&>button:last-child]:hidden",
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    _chunk2BHI5ZWJcjs.DrawerContent,
+    {
+      ref,
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, "max-h-[92vh]", className),
+      ...props,
+      children
+    }
+  );
+});
+ResponsiveDialogContent.displayName = "ResponsiveDialogContent";
+var ResponsiveDialogHeader = ({
+  className,
+  visibility = "visible",
+  ...props
+}) => {
+  const Header = useIsDesktop() ? _chunkWDXEJDMOcjs.DialogHeader : _chunk2BHI5ZWJcjs.DrawerHeader;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    Header,
+    {
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, useIsDesktop() && "p-4", visibility === "screen-reader" && "sr-only", className),
+      ...props
+    }
+  );
+};
+ResponsiveDialogHeader.displayName = "ResponsiveDialogHeader";
+var ResponsiveDialogBody = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: _chunkKWLSBTB2cjs.cn.call(void 0, "min-h-0 flex-1 overflow-y-auto px-4 pb-6", className), ...props });
+ResponsiveDialogBody.displayName = "ResponsiveDialogBody";
+var ResponsiveDialogFooter = ({
+  className,
+  layout = "auto",
+  ...props
+}) => {
+  const isDesktop = useIsDesktop();
+  const Footer = isDesktop ? _chunkWDXEJDMOcjs.DialogFooter : _chunk2BHI5ZWJcjs.DrawerFooter;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    Footer,
+    {
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "mt-0 shrink-0 gap-2 border-t bg-background p-4",
+        layout === "fill" ? "flex-row space-x-0 [&>*]:min-w-0 [&>*]:flex-1" : isDesktop ? "flex-row justify-end space-x-0 [&>*]:flex-none" : "grid grid-cols-2 [&>*]:w-full",
+        className
+      ),
+      ...props
+    }
+  );
+};
+ResponsiveDialogFooter.displayName = "ResponsiveDialogFooter";
+var ResponsiveDialogTitle = React.forwardRef(({ className, visuallyHidden = false, ...props }, ref) => {
+  const Title = useIsDesktop() ? _chunkWDXEJDMOcjs.DialogTitle : _chunk2BHI5ZWJcjs.DrawerTitle;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Title, { ref, className: _chunkKWLSBTB2cjs.cn.call(void 0, visuallyHidden && "sr-only", className), ...props });
+});
+ResponsiveDialogTitle.displayName = "ResponsiveDialogTitle";
+var ResponsiveDialogDescription = React.forwardRef(({ className, visuallyHidden = false, ...props }, ref) => {
+  const Description = useIsDesktop() ? _chunkWDXEJDMOcjs.DialogDescription : _chunk2BHI5ZWJcjs.DrawerDescription;
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, Description, { ref, className: _chunkKWLSBTB2cjs.cn.call(void 0, visuallyHidden && "sr-only", className), ...props });
+});
+ResponsiveDialogDescription.displayName = "ResponsiveDialogDescription";
+
+
+
+
+
+
+
+
+
+
+
+exports.ResponsiveDialog = ResponsiveDialog; exports.ResponsiveDialogTrigger = ResponsiveDialogTrigger; exports.ResponsiveDialogClose = ResponsiveDialogClose; exports.ResponsiveDialogContent = ResponsiveDialogContent; exports.ResponsiveDialogHeader = ResponsiveDialogHeader; exports.ResponsiveDialogBody = ResponsiveDialogBody; exports.ResponsiveDialogFooter = ResponsiveDialogFooter; exports.ResponsiveDialogTitle = ResponsiveDialogTitle; exports.ResponsiveDialogDescription = ResponsiveDialogDescription;

package/dist/chunk-GRY77463.cjs

@@ -0,0 +1,121 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});"use client";
+
+
+
+
+
+
+
+var _chunkBTHYGHOHcjs = require('./chunk-BTHYGHOH.cjs');
+
+
+var _chunkT2ZFSPE4cjs = require('./chunk-T2ZFSPE4.cjs');
+
+
+var _chunkL4DH72UFcjs = require('./chunk-L4DH72UF.cjs');
+
+
+var _chunkKWLSBTB2cjs = require('./chunk-KWLSBTB2.cjs');
+
+// src/primitives/file-preview-internals.tsx
+var _lucidereact = require('lucide-react');
+var _jsxruntime = require('react/jsx-runtime');
+function PreviewDialog({
+  open,
+  onOpenChange,
+  title,
+  onDownload,
+  downloading,
+  downloadLabel,
+  children
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkBTHYGHOHcjs.ResponsiveDialog, { open, onOpenChange, children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkBTHYGHOHcjs.ResponsiveDialogContent, { presentation: "preview", className: "h-[92dvh] outline-none", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkBTHYGHOHcjs.ResponsiveDialogHeader, { className: "shrink-0 border-b border-border", children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex min-w-0 items-center gap-2", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkBTHYGHOHcjs.ResponsiveDialogTitle, { className: "min-w-0 flex-1 truncate text-left", children: title }),
+        onDownload && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _chunkL4DH72UFcjs.Button,
+          {
+            type: "button",
+            size: "icon-compact",
+            variant: "ghost",
+            onClick: onDownload,
+            disabled: downloading,
+            title: downloadLabel,
+            "aria-label": downloadLabel,
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkT2ZFSPE4cjs.Icon, { icon: downloading ? _lucidereact.Loader2 : _lucidereact.Download, size: "sm", spin: downloading })
+          }
+        ),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkBTHYGHOHcjs.ResponsiveDialogClose, { asChild: true, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          _chunkL4DH72UFcjs.Button,
+          {
+            type: "button",
+            size: "icon-compact",
+            variant: "ghost",
+            title: "Close preview",
+            "aria-label": "Close preview",
+            children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkT2ZFSPE4cjs.Icon, { icon: _lucidereact.X, size: "sm" })
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _chunkBTHYGHOHcjs.ResponsiveDialogDescription, { className: "sr-only", children: [
+        "Preview of ",
+        title
+      ] })
+    ] }),
+    children
+  ] }) });
+}
+function PreviewStage({
+  layout = "center",
+  label,
+  children
+}) {
+  const scrolls = layout === "scroll";
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "div",
+    {
+      "data-slot": "preview-stage",
+      role: scrolls ? "region" : void 0,
+      "aria-label": scrolls ? label : void 0,
+      tabIndex: scrolls ? 0 : void 0,
+      className: _chunkKWLSBTB2cjs.cn.call(void 0, 
+        "min-h-0 flex-1",
+        scrolls ? "overflow-y-auto overscroll-contain bg-background p-4 outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring/50 sm:p-6" : "flex items-center justify-center overflow-hidden bg-muted"
+      ),
+      children
+    }
+  );
+}
+function PreviewLoading({ label }) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { role: "status", className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkT2ZFSPE4cjs.Icon, { icon: _lucidereact.Loader2, size: "sm", spin: true }),
+    label
+  ] });
+}
+function PreviewNotice({
+  icon,
+  alert = false,
+  message,
+  children
+}) {
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "div",
+    {
+      role: alert ? "alert" : void 0,
+      className: "flex max-w-sm flex-col items-center gap-3 p-6 text-center text-sm text-muted-foreground",
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunkT2ZFSPE4cjs.Icon, { icon, size: "lg" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: message }),
+        children
+      ]
+    }
+  );
+}
+
+
+
+
+
+
+exports.PreviewDialog = PreviewDialog; exports.PreviewStage = PreviewStage; exports.PreviewLoading = PreviewLoading; exports.PreviewNotice = PreviewNotice;

package/dist/chunk-HHV4G77I.js

@@ -0,0 +1,55 @@
+"use client";
+import {
+  CopyButton
+} from "./chunk-NW3OWKBN.js";
+import {
+  cn
+} from "./chunk-G6SRSWXB.js";
+
+// src/primitives/code-block.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var HEIGHTS = {
+  none: "",
+  sm: "max-h-40 overflow-y-auto",
+  md: "max-h-64 overflow-y-auto",
+  lg: "max-h-96 overflow-y-auto",
+  viewport: "min-h-[55vh] max-h-[65vh] overflow-y-auto"
+};
+function CodeBlock({
+  children,
+  copy,
+  copyLabel,
+  wrap = false,
+  maxHeight = "none",
+  className
+}) {
+  const copyText = typeof copy === "string" ? copy : children;
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
+    /* @__PURE__ */ jsx(
+      "pre",
+      {
+        className: cn(
+          "rounded-md border border-border bg-muted/40 p-3 font-mono text-xs leading-relaxed",
+          wrap ? "whitespace-pre-wrap break-words" : "overflow-x-auto",
+          HEIGHTS[maxHeight],
+          copy ? "pr-12" : void 0
+        ),
+        children
+      }
+    ),
+    copy ? /* @__PURE__ */ jsx(
+      CopyButton,
+      {
+        text: copyText,
+        label: copyLabel,
+        size: "sm",
+        variant: "ghost",
+        className: "absolute right-1.5 top-1.5"
+      }
+    ) : null
+  ] });
+}
+
+export {
+  CodeBlock
+};