@mieweb/ui 0.6.1 → 0.7.0-dev.178

package/dist/chunk-AES2BKEW.cjs

@@ -0,0 +1,229 @@
+'use strict';
+
+var chunkMSRU3XBH_cjs = require('./chunk-MSRU3XBH.cjs');
+var chunkFSGEDDF2_cjs = require('./chunk-FSGEDDF2.cjs');
+var chunkZDEYV373_cjs = require('./chunk-ZDEYV373.cjs');
+var chunkOR5DRJCW_cjs = require('./chunk-OR5DRJCW.cjs');
+var React = require('react');
+var reactDom = require('react-dom');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+function Autocomplete({
+  items,
+  onSelect,
+  getItemKey,
+  renderItem,
+  filter,
+  value: controlledValue,
+  defaultValue = "",
+  onValueChange,
+  placeholder,
+  emptyMessage,
+  createLabel,
+  onCreate,
+  minQueryLength = 1,
+  clearOnSelect = true,
+  disabled,
+  size,
+  className,
+  inputClassName,
+  inputRef,
+  inputProps,
+  "aria-label": ariaLabel
+}) {
+  const [uncontrolledValue, setUncontrolledValue] = React__namespace.useState(defaultValue);
+  const isControlled = controlledValue !== void 0;
+  const query = isControlled ? controlledValue : uncontrolledValue;
+  const [open, setOpen] = React__namespace.useState(false);
+  const [activeIndex, setActiveIndex] = React__namespace.useState(-1);
+  const containerRef = React__namespace.useRef(null);
+  const listId = React__namespace.useId();
+  const meetsMinLength = query.length >= minQueryLength;
+  const filteredItems = React__namespace.useMemo(() => {
+    if (!filter) return items;
+    return items.filter((item) => filter(item, query));
+  }, [items, filter, query]);
+  const showCreate = Boolean(onCreate && createLabel && query.length > 0);
+  const rows = React__namespace.useMemo(() => {
+    const itemRows = filteredItems.map((item) => ({
+      kind: "item",
+      item,
+      key: getItemKey(item)
+    }));
+    if (showCreate) {
+      itemRows.push({ kind: "create", key: "__create__" });
+    }
+    return itemRows;
+  }, [filteredItems, showCreate, getItemKey]);
+  const hasContent = rows.length > 0 || meetsMinLength && emptyMessage != null;
+  const isOpen = open && meetsMinLength && hasContent;
+  const { anchorRef, floatingRef, style } = chunkZDEYV373_cjs.useAnchoredPosition({ open: isOpen, matchWidth: true, maxHeight: 300 });
+  const outsideRefs = React__namespace.useMemo(
+    () => [containerRef, floatingRef],
+    [floatingRef]
+  );
+  chunkFSGEDDF2_cjs.useClickOutside(outsideRefs, () => setOpen(false), open);
+  const setQuery = React__namespace.useCallback(
+    (next) => {
+      if (!isControlled) setUncontrolledValue(next);
+      onValueChange?.(next);
+    },
+    [isControlled, onValueChange]
+  );
+  React__namespace.useEffect(() => {
+    if (!isOpen) setActiveIndex(-1);
+  }, [isOpen]);
+  const commitRow = (row) => {
+    if (row.kind === "item") {
+      onSelect(row.item);
+    } else {
+      onCreate?.(query);
+    }
+    setOpen(false);
+    setActiveIndex(-1);
+    if (clearOnSelect) setQuery("");
+  };
+  const handleChange = (e) => {
+    setQuery(e.target.value);
+    setOpen(true);
+    setActiveIndex(-1);
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      if (!isOpen) {
+        setOpen(true);
+        return;
+      }
+      setActiveIndex((i) => rows.length === 0 ? -1 : (i + 1) % rows.length);
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      if (!isOpen) return;
+      setActiveIndex(
+        (i) => rows.length === 0 ? -1 : (i - 1 + rows.length) % rows.length
+      );
+    } else if (e.key === "Enter") {
+      if (isOpen && activeIndex >= 0 && activeIndex < rows.length) {
+        e.preventDefault();
+        commitRow(rows[activeIndex]);
+      }
+    } else if (e.key === "Escape") {
+      setOpen(false);
+      setActiveIndex(-1);
+    }
+  };
+  const activeId = isOpen && activeIndex >= 0 && activeIndex < rows.length ? `${listId}-opt-${rows[activeIndex].key}` : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: (node) => {
+        containerRef.current = node;
+        anchorRef.current = node;
+      },
+      "data-slot": "autocomplete",
+      className: chunkOR5DRJCW_cjs.cn("relative", className),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            ref: inputRef,
+            type: "text",
+            role: "combobox",
+            "aria-expanded": isOpen,
+            "aria-controls": listId,
+            "aria-autocomplete": "list",
+            "aria-activedescendant": activeId,
+            "aria-label": ariaLabel,
+            autoComplete: "off",
+            "data-slot": "autocomplete-input",
+            value: query,
+            placeholder,
+            disabled,
+            onChange: handleChange,
+            onKeyDown: handleKeyDown,
+            onFocus: () => {
+              if (meetsMinLength) setOpen(true);
+            },
+            className: chunkOR5DRJCW_cjs.cn(chunkMSRU3XBH_cjs.inputVariants({ size }), inputClassName),
+            ...inputProps
+          }
+        ),
+        isOpen && reactDom.createPortal(
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: floatingRef,
+              style,
+              id: listId,
+              role: "listbox",
+              "data-slot": "autocomplete-list",
+              className: chunkOR5DRJCW_cjs.cn(
+                "border-border overflow-auto rounded-md border",
+                "bg-card text-card-foreground shadow-lg"
+              ),
+              children: rows.length === 0 ? emptyMessage != null && /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  "data-slot": "autocomplete-empty",
+                  className: "text-muted-foreground px-4 py-3 text-sm",
+                  children: emptyMessage
+                }
+              ) : rows.map((row, index) => {
+                const isActive = index === activeIndex;
+                const optionId = `${listId}-opt-${row.key}`;
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    id: optionId,
+                    type: "button",
+                    role: "option",
+                    "aria-selected": isActive,
+                    "data-slot": row.kind === "create" ? "autocomplete-create" : "autocomplete-option",
+                    onMouseEnter: () => setActiveIndex(index),
+                    onMouseDown: (e) => e.preventDefault(),
+                    onClick: () => commitRow(row),
+                    className: chunkOR5DRJCW_cjs.cn(
+                      "w-full px-4 py-3 text-left text-sm transition-colors",
+                      "border-border border-b last:border-b-0",
+                      "focus:outline-none",
+                      isActive ? "bg-muted text-foreground" : "hover:bg-muted",
+                      row.kind === "create" && "text-primary-800 flex items-center gap-2 font-medium"
+                    ),
+                    children: row.kind === "create" ? createLabel(query) : renderItem(row.item)
+                  },
+                  row.key
+                );
+              })
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+}
+Autocomplete.displayName = "Autocomplete";
+
+exports.Autocomplete = Autocomplete;
+//# sourceMappingURL=chunk-AES2BKEW.cjs.map
+//# sourceMappingURL=chunk-AES2BKEW.cjs.map

package/dist/chunk-AES2BKEW.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Autocomplete/Autocomplete.tsx"],"names":["React","useAnchoredPosition","useClickOutside","jsxs","cn","jsx","inputVariants","createPortal"],"mappings":"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","file":"chunk-AES2BKEW.cjs","sourcesContent":["import * as React from 'react';\nimport { createPortal } from 'react-dom';\nimport { type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\nimport { useClickOutside } from '../../hooks/useClickOutside';\nimport { useAnchoredPosition } from '../../hooks/useAnchoredPosition';\nimport { inputVariants } from '../Input';\n\nexport interface AutocompleteProps<T> extends Pick<\n  VariantProps<typeof inputVariants>,\n  'size'\n> {\n  /** Candidate items to search through. */\n  items: T[];\n  /** Called when the user picks an item. */\n  onSelect: (item: T) => void;\n  /** Returns a stable key for an item (used for React keys & option ids). */\n  getItemKey: (item: T) => string;\n  /** Renders the visible content of a result row. */\n  renderItem: (item: T) => React.ReactNode;\n  /**\n   * Predicate used to filter `items` by the current query. When omitted, all\n   * `items` are shown as-is (the caller is responsible for filtering).\n   */\n  filter?: (item: T, query: string) => boolean;\n  /** Controlled query value. */\n  value?: string;\n  /** Default query value (uncontrolled). */\n  defaultValue?: string;\n  /** Called whenever the query changes. */\n  onValueChange?: (query: string) => void;\n  /** Placeholder text for the search input. */\n  placeholder?: string;\n  /** Content shown when there are no matching items. */\n  emptyMessage?: React.ReactNode;\n  /**\n   * Renders the label of a \"create new\" action appended to the results. When\n   * provided together with `onCreate`, the action row is shown.\n   */\n  createLabel?: (query: string) => React.ReactNode;\n  /** Called when the \"create new\" action is chosen. Receives the query. */\n  onCreate?: (query: string) => void;\n  /** Minimum query length before results open. Defaults to 1. */\n  minQueryLength?: number;\n  /** Clear the query after a selection. Defaults to true. */\n  clearOnSelect?: boolean;\n  /** Disable the input. */\n  disabled?: boolean;\n  /** Accessible label for the combobox input. */\n  'aria-label'?: string;\n  /** Class applied to the outer wrapper. */\n  className?: string;\n  /** Class applied to the input element. */\n  inputClassName?: string;\n  /** Forwarded ref to the underlying input. */\n  inputRef?: React.Ref<HTMLInputElement>;\n  /** Additional props forwarded to the input element. */\n  inputProps?: Omit<\n    React.InputHTMLAttributes<HTMLInputElement>,\n    | 'value'\n    | 'defaultValue'\n    | 'onChange'\n    | 'size'\n    | 'placeholder'\n    | 'disabled'\n    | 'aria-label'\n  >;\n}\n\ntype Row<T> =\n  | { kind: 'item'; item: T; key: string }\n  | { kind: 'create'; key: string };\n\n/**\n * A data-agnostic, presentational combobox. It renders a search input with a\n * filterable results popover and an optional \"create new\" action. All data and\n * side effects are supplied via props/callbacks so it can be wired to any store.\n *\n * @example\n * ```tsx\n * <Autocomplete\n *   items={employees}\n *   getItemKey={(e) => e.id}\n *   filter={(e, q) => e.name.toLowerCase().includes(q.toLowerCase())}\n *   renderItem={(e) => <span>{e.name}</span>}\n *   onSelect={handleSelect}\n *   placeholder=\"Search employees…\"\n * />\n * ```\n */\nfunction Autocomplete<T>({\n  items,\n  onSelect,\n  getItemKey,\n  renderItem,\n  filter,\n  value: controlledValue,\n  defaultValue = '',\n  onValueChange,\n  placeholder,\n  emptyMessage,\n  createLabel,\n  onCreate,\n  minQueryLength = 1,\n  clearOnSelect = true,\n  disabled,\n  size,\n  className,\n  inputClassName,\n  inputRef,\n  inputProps,\n  'aria-label': ariaLabel,\n}: AutocompleteProps<T>) {\n  const [uncontrolledValue, setUncontrolledValue] =\n    React.useState(defaultValue);\n  const isControlled = controlledValue !== undefined;\n  const query = isControlled ? controlledValue : uncontrolledValue;\n\n  const [open, setOpen] = React.useState(false);\n  const [activeIndex, setActiveIndex] = React.useState(-1);\n\n  const containerRef = React.useRef<HTMLDivElement>(null);\n  const listId = React.useId();\n\n  const meetsMinLength = query.length >= minQueryLength;\n\n  const filteredItems = React.useMemo(() => {\n    if (!filter) return items;\n    return items.filter((item) => filter(item, query));\n  }, [items, filter, query]);\n\n  const showCreate = Boolean(onCreate && createLabel && query.length > 0);\n\n  const rows = React.useMemo<Row<T>[]>(() => {\n    const itemRows: Row<T>[] = filteredItems.map((item) => ({\n      kind: 'item',\n      item,\n      key: getItemKey(item),\n    }));\n    if (showCreate) {\n      itemRows.push({ kind: 'create', key: '__create__' });\n    }\n    return itemRows;\n  }, [filteredItems, showCreate, getItemKey]);\n\n  const hasContent =\n    rows.length > 0 || (meetsMinLength && emptyMessage != null);\n  const isOpen = open && meetsMinLength && hasContent;\n\n  // Portal + fixed positioning so the listbox escapes overflow-hidden\n  // ancestors (cards, dialogs, scroll containers, …).\n  const { anchorRef, floatingRef, style } = useAnchoredPosition<\n    HTMLDivElement,\n    HTMLDivElement\n  >({ open: isOpen, matchWidth: true, maxHeight: 300 });\n\n  const outsideRefs = React.useMemo(\n    () => [containerRef, floatingRef],\n    [floatingRef]\n  );\n  useClickOutside(outsideRefs, () => setOpen(false), open);\n\n  const setQuery = React.useCallback(\n    (next: string) => {\n      if (!isControlled) setUncontrolledValue(next);\n      onValueChange?.(next);\n    },\n    [isControlled, onValueChange]\n  );\n\n  React.useEffect(() => {\n    if (!isOpen) setActiveIndex(-1);\n  }, [isOpen]);\n\n  const commitRow = (row: Row<T>) => {\n    if (row.kind === 'item') {\n      onSelect(row.item);\n    } else {\n      onCreate?.(query);\n    }\n    setOpen(false);\n    setActiveIndex(-1);\n    if (clearOnSelect) setQuery('');\n  };\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    setQuery(e.target.value);\n    setOpen(true);\n    setActiveIndex(-1);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'ArrowDown') {\n      e.preventDefault();\n      if (!isOpen) {\n        setOpen(true);\n        return;\n      }\n      setActiveIndex((i) => (rows.length === 0 ? -1 : (i + 1) % rows.length));\n    } else if (e.key === 'ArrowUp') {\n      e.preventDefault();\n      if (!isOpen) return;\n      setActiveIndex((i) =>\n        rows.length === 0 ? -1 : (i - 1 + rows.length) % rows.length\n      );\n    } else if (e.key === 'Enter') {\n      if (isOpen && activeIndex >= 0 && activeIndex < rows.length) {\n        e.preventDefault();\n        commitRow(rows[activeIndex]);\n      }\n    } else if (e.key === 'Escape') {\n      setOpen(false);\n      setActiveIndex(-1);\n    }\n  };\n\n  const activeId =\n    isOpen && activeIndex >= 0 && activeIndex < rows.length\n      ? `${listId}-opt-${rows[activeIndex].key}`\n      : undefined;\n\n  return (\n    <div\n      ref={(node) => {\n        containerRef.current = node;\n        anchorRef.current = node;\n      }}\n      data-slot=\"autocomplete\"\n      className={cn('relative', className)}\n    >\n      <input\n        ref={inputRef}\n        type=\"text\"\n        role=\"combobox\"\n        aria-expanded={isOpen}\n        aria-controls={listId}\n        aria-autocomplete=\"list\"\n        aria-activedescendant={activeId}\n        aria-label={ariaLabel}\n        autoComplete=\"off\"\n        data-slot=\"autocomplete-input\"\n        value={query}\n        placeholder={placeholder}\n        disabled={disabled}\n        onChange={handleChange}\n        onKeyDown={handleKeyDown}\n        onFocus={() => {\n          if (meetsMinLength) setOpen(true);\n        }}\n        className={cn(inputVariants({ size }), inputClassName)}\n        {...inputProps}\n      />\n\n      {isOpen &&\n        createPortal(\n          <div\n            ref={floatingRef}\n            style={style}\n            id={listId}\n            role=\"listbox\"\n            data-slot=\"autocomplete-list\"\n            className={cn(\n              'border-border overflow-auto rounded-md border',\n              'bg-card text-card-foreground shadow-lg'\n            )}\n          >\n            {rows.length === 0\n              ? emptyMessage != null && (\n                  <div\n                    data-slot=\"autocomplete-empty\"\n                    className=\"text-muted-foreground px-4 py-3 text-sm\"\n                  >\n                    {emptyMessage}\n                  </div>\n                )\n              : rows.map((row, index) => {\n                  const isActive = index === activeIndex;\n                  const optionId = `${listId}-opt-${row.key}`;\n                  return (\n                    <button\n                      key={row.key}\n                      id={optionId}\n                      type=\"button\"\n                      role=\"option\"\n                      aria-selected={isActive}\n                      data-slot={\n                        row.kind === 'create'\n                          ? 'autocomplete-create'\n                          : 'autocomplete-option'\n                      }\n                      onMouseEnter={() => setActiveIndex(index)}\n                      onMouseDown={(e) => e.preventDefault()}\n                      onClick={() => commitRow(row)}\n                      className={cn(\n                        'w-full px-4 py-3 text-left text-sm transition-colors',\n                        'border-border border-b last:border-b-0',\n                        'focus:outline-none',\n                        isActive\n                          ? 'bg-muted text-foreground'\n                          : 'hover:bg-muted',\n                        row.kind === 'create' &&\n                          'text-primary-800 flex items-center gap-2 font-medium'\n                      )}\n                    >\n                      {row.kind === 'create'\n                        ? createLabel!(query)\n                        : renderItem(row.item)}\n                    </button>\n                  );\n                })}\n          </div>,\n          document.body\n        )}\n    </div>\n  );\n}\n\nAutocomplete.displayName = 'Autocomplete';\n\nexport { Autocomplete };\n"]}

package/dist/chunk-AFKKJEV5.cjs

@@ -0,0 +1,72 @@
+'use strict';
+
+var chunkOR5DRJCW_cjs = require('./chunk-OR5DRJCW.cjs');
+var React = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var scrollAreaVariants = classVarianceAuthority.cva(
+  [
+    "relative overflow-auto",
+    // Thin, theme-aware scrollbars
+    "[scrollbar-width:thin]",
+    "[scrollbar-color:hsl(var(--border))_transparent]",
+    "[&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar]:h-2",
+    "[&::-webkit-scrollbar-track]:bg-transparent",
+    "[&::-webkit-scrollbar-thumb]:rounded-full",
+    "[&::-webkit-scrollbar-thumb]:bg-border",
+    "hover:[&::-webkit-scrollbar-thumb]:bg-muted-foreground/40"
+  ],
+  {
+    variants: {
+      orientation: {
+        vertical: "overflow-x-hidden overflow-y-auto",
+        horizontal: "overflow-x-auto overflow-y-hidden",
+        both: "overflow-auto"
+      }
+    },
+    defaultVariants: {
+      orientation: "vertical"
+    }
+  }
+);
+var ScrollArea = React__namespace.forwardRef(
+  ({ className, orientation, children, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "scroll-area",
+      role: "region",
+      tabIndex: 0,
+      className: chunkOR5DRJCW_cjs.cn(scrollAreaVariants({ orientation }), className),
+      ...props,
+      children
+    }
+  )
+);
+ScrollArea.displayName = "ScrollArea";
+
+exports.ScrollArea = ScrollArea;
+exports.scrollAreaVariants = scrollAreaVariants;
+//# sourceMappingURL=chunk-AFKKJEV5.cjs.map
+//# sourceMappingURL=chunk-AFKKJEV5.cjs.map

package/dist/chunk-AFKKJEV5.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ScrollArea/ScrollArea.tsx"],"names":["cva","React","jsx","cn"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,IAAM,kBAAA,GAAqBA,0BAAA;AAAA,EACzB;AAAA,IACE,wBAAA;AAAA;AAAA,IAEA,wBAAA;AAAA,IACA,kDAAA;AAAA,IACA,uDAAA;AAAA,IACA,6CAAA;AAAA,IACA,2CAAA;AAAA,IACA,wCAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,WAAA,EAAa;AAAA,QACX,QAAA,EAAU,mCAAA;AAAA,QACV,UAAA,EAAY,mCAAA;AAAA,QACZ,IAAA,EAAM;AAAA;AACR,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,WAAA,EAAa;AAAA;AACf;AAEJ;AAkBA,IAAM,UAAA,GAAmBC,gBAAA,CAAA,UAAA;AAAA,EACvB,CAAC,EAAE,SAAA,EAAW,WAAA,EAAa,UAAU,GAAG,KAAA,IAAS,GAAA,qBAC/CC,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,WAAA,EAAU,aAAA;AAAA,MACV,IAAA,EAAK,QAAA;AAAA,MACL,QAAA,EAAU,CAAA;AAAA,MACV,WAAWC,oBAAA,CAAG,kBAAA,CAAmB,EAAE,WAAA,EAAa,GAAG,SAAS,CAAA;AAAA,MAC3D,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA;AAGP;AAGA,UAAA,CAAW,WAAA,GAAc,YAAA","file":"chunk-AFKKJEV5.cjs","sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\nconst scrollAreaVariants = cva(\n  [\n    'relative overflow-auto',\n    // Thin, theme-aware scrollbars\n    '[scrollbar-width:thin]',\n    '[scrollbar-color:hsl(var(--border))_transparent]',\n    '[&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar]:h-2',\n    '[&::-webkit-scrollbar-track]:bg-transparent',\n    '[&::-webkit-scrollbar-thumb]:rounded-full',\n    '[&::-webkit-scrollbar-thumb]:bg-border',\n    'hover:[&::-webkit-scrollbar-thumb]:bg-muted-foreground/40',\n  ],\n  {\n    variants: {\n      orientation: {\n        vertical: 'overflow-x-hidden overflow-y-auto',\n        horizontal: 'overflow-x-auto overflow-y-hidden',\n        both: 'overflow-auto',\n      },\n    },\n    defaultVariants: {\n      orientation: 'vertical',\n    },\n  }\n);\n\nexport interface ScrollAreaProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof scrollAreaVariants> {}\n\n/**\n * A scrollable container with consistent, theme-aware scrollbar styling.\n *\n * @example\n * ```tsx\n * <ScrollArea className=\"h-64\">\n *   <LongContent />\n * </ScrollArea>\n * ```\n */\n/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\nconst ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(\n  ({ className, orientation, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"scroll-area\"\n      role=\"region\"\n      tabIndex={0}\n      className={cn(scrollAreaVariants({ orientation }), className)}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n);\n/* eslint-enable jsx-a11y/no-noninteractive-tabindex */\n\nScrollArea.displayName = 'ScrollArea';\n\nexport { ScrollArea, scrollAreaVariants };\n"]}

package/dist/chunk-AT732HC6.cjs

@@ -0,0 +1,4 @@
+'use strict';
+
+//# sourceMappingURL=chunk-AT732HC6.cjs.map
+//# sourceMappingURL=chunk-AT732HC6.cjs.map

package/dist/{chunk-74K3RRU7.cjs.map → chunk-AT732HC6.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-74K3RRU7.cjs"}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-AT732HC6.cjs"}

package/dist/chunk-BB4WQ4LV.cjs

@@ -0,0 +1,137 @@
+'use strict';
+
+var chunkCKD554XR_cjs = require('./chunk-CKD554XR.cjs');
+var chunkA2QVQF54_cjs = require('./chunk-A2QVQF54.cjs');
+var lucideReact = require('lucide-react');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function isFullDocument(html) {
+  return /<!DOCTYPE|<html/i.test(html);
+}
+function wrapFragment(html) {
+  return `<!DOCTYPE html>
+<html>
+<head><meta charset="utf-8"><style>body{margin:0;padding:8px;font-family:system-ui,sans-serif;font-size:14px}</style></head>
+<body>${html}</body>
+</html>`;
+}
+var HtmlPreviewBlock = ({
+  code,
+  id
+}) => {
+  const [showPreview, setShowPreview] = react.useState(false);
+  const [expanded, setExpanded] = react.useState(false);
+  const iframeRef = react.useRef(null);
+  const [iframeHeight, setIframeHeight] = react.useState(200);
+  const srcdoc = isFullDocument(code) ? code : wrapFragment(code);
+  react.useEffect(() => {
+    function handleMessage(event) {
+      if (event.origin !== "null" && event.origin !== window.location.origin)
+        return;
+      if (event.source !== iframeRef.current?.contentWindow) return;
+      if (event.data?.type === "HTML_PREVIEW_RESIZE" && event.data?.id === id) {
+        setIframeHeight(Math.min(Math.max(event.data.height, 200), 4e3));
+      }
+    }
+    window.addEventListener("message", handleMessage);
+    return () => window.removeEventListener("message", handleMessage);
+  }, [id]);
+  react.useEffect(() => {
+    if (!expanded) return;
+    function handleKey(e) {
+      if (e.key === "Escape") setExpanded(false);
+    }
+    document.addEventListener("keydown", handleKey);
+    return () => document.removeEventListener("keydown", handleKey);
+  }, [expanded]);
+  const togglePreview = react.useCallback(() => setShowPreview((v) => !v), []);
+  const headerActions = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      chunkA2QVQF54_cjs.Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        onClick: togglePreview,
+        className: "h-7 gap-1 px-2 text-xs",
+        children: [
+          showPreview ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Code, { className: "h-3 w-3" }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { className: "h-3 w-3" }),
+          showPreview ? "Code" : "Preview"
+        ]
+      }
+    ),
+    showPreview && /* @__PURE__ */ jsxRuntime.jsx(
+      chunkA2QVQF54_cjs.Button,
+      {
+        variant: "ghost",
+        size: "sm",
+        onClick: () => setExpanded(true),
+        className: "h-7 w-7 p-0",
+        "aria-label": "Expand preview",
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Maximize2, { className: "h-3 w-3" })
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(chunkCKD554XR_cjs.FenceBlock, { code, language: "html", headerActions, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "relative", children: showPreview ? /* @__PURE__ */ jsxRuntime.jsx(
+      "iframe",
+      {
+        ref: iframeRef,
+        srcDoc: srcdoc,
+        sandbox: "allow-scripts allow-forms",
+        referrerPolicy: "no-referrer",
+        className: "w-full border-0",
+        style: { height: iframeHeight },
+        title: "HTML Preview"
+      }
+    ) : /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "overflow-x-auto p-3 text-sm", children: /* @__PURE__ */ jsxRuntime.jsx("code", { children: code }) }) }) }),
+    expanded && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className: "fixed inset-0 z-50 flex items-center justify-center bg-black/50",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": "HTML Preview",
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Close preview",
+              className: "absolute inset-0 h-full w-full cursor-default border-0 bg-transparent p-0",
+              onClick: () => setExpanded(false)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative h-[90vh] w-[90vw] overflow-hidden rounded-lg bg-white shadow-xl dark:bg-neutral-900", children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-b border-neutral-200 px-4 py-2 dark:border-neutral-700", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-medium", children: "HTML Preview" }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                chunkA2QVQF54_cjs.Button,
+                {
+                  variant: "ghost",
+                  size: "sm",
+                  onClick: () => setExpanded(false),
+                  children: "Close"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "iframe",
+              {
+                srcDoc: srcdoc,
+                sandbox: "allow-scripts allow-forms",
+                referrerPolicy: "no-referrer",
+                className: "h-full w-full border-0",
+                title: "HTML Preview (expanded)"
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+};
+
+exports.HtmlPreviewBlock = HtmlPreviewBlock;
+//# sourceMappingURL=chunk-BB4WQ4LV.cjs.map
+//# sourceMappingURL=chunk-BB4WQ4LV.cjs.map

package/dist/chunk-BB4WQ4LV.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Markdown/HtmlPreviewBlock.tsx"],"names":["useState","useRef","useEffect","useCallback","jsxs","Fragment","Button","jsx","Code","Eye","Maximize2","FenceBlock"],"mappings":"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","file":"chunk-BB4WQ4LV.cjs","sourcesContent":["/** Sandboxed iframe preview for HTML code blocks. */\nimport { Code, Eye, Maximize2 } from 'lucide-react';\nimport React, { useCallback, useEffect, useRef, useState } from 'react';\n\nimport { Button } from '../Button';\nimport { FenceBlock } from './FenceBlock';\n\ninterface HtmlPreviewBlockProps {\n  code: string;\n  id: string;\n}\n\nfunction isFullDocument(html: string): boolean {\n  return /<!DOCTYPE|<html/i.test(html);\n}\n\nfunction wrapFragment(html: string): string {\n  return `<!DOCTYPE html>\n<html>\n<head><meta charset=\"utf-8\"><style>body{margin:0;padding:8px;font-family:system-ui,sans-serif;font-size:14px}</style></head>\n<body>${html}</body>\n</html>`;\n}\n\nexport const HtmlPreviewBlock: React.FC<HtmlPreviewBlockProps> = ({\n  code,\n  id,\n}) => {\n  const [showPreview, setShowPreview] = useState(false);\n  const [expanded, setExpanded] = useState(false);\n  const iframeRef = useRef<HTMLIFrameElement>(null);\n  const [iframeHeight, setIframeHeight] = useState(200);\n\n  const srcdoc = isFullDocument(code) ? code : wrapFragment(code);\n\n  useEffect(() => {\n    function handleMessage(event: globalThis.MessageEvent) {\n      // Sandboxed srcDoc iframes report origin \"null\"; validate source to prevent spoofing.\n      if (event.origin !== 'null' && event.origin !== window.location.origin)\n        return;\n      if (event.source !== iframeRef.current?.contentWindow) return;\n      if (event.data?.type === 'HTML_PREVIEW_RESIZE' && event.data?.id === id) {\n        setIframeHeight(Math.min(Math.max(event.data.height, 200), 4000));\n      }\n    }\n    window.addEventListener('message', handleMessage);\n    return () => window.removeEventListener('message', handleMessage);\n  }, [id]);\n\n  useEffect(() => {\n    if (!expanded) return;\n    function handleKey(e: KeyboardEvent) {\n      if (e.key === 'Escape') setExpanded(false);\n    }\n    document.addEventListener('keydown', handleKey);\n    return () => document.removeEventListener('keydown', handleKey);\n  }, [expanded]);\n\n  const togglePreview = useCallback(() => setShowPreview((v) => !v), []);\n\n  const headerActions = (\n    <>\n      <Button\n        variant=\"ghost\"\n        size=\"sm\"\n        onClick={togglePreview}\n        className=\"h-7 gap-1 px-2 text-xs\"\n      >\n        {showPreview ? (\n          <Code className=\"h-3 w-3\" />\n        ) : (\n          <Eye className=\"h-3 w-3\" />\n        )}\n        {showPreview ? 'Code' : 'Preview'}\n      </Button>\n      {showPreview && (\n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          onClick={() => setExpanded(true)}\n          className=\"h-7 w-7 p-0\"\n          aria-label=\"Expand preview\"\n        >\n          <Maximize2 className=\"h-3 w-3\" />\n        </Button>\n      )}\n    </>\n  );\n\n  return (\n    <>\n      <FenceBlock code={code} language=\"html\" headerActions={headerActions}>\n        <div className=\"relative\">\n          {showPreview ? (\n            <iframe\n              ref={iframeRef}\n              srcDoc={srcdoc}\n              // `allow-scripts` lets previewed HTML run its own JS (charts, demos,\n              // and the optional resize-postMessage handshake). It is intentionally\n              // NOT paired with `allow-same-origin`, so the content runs in an\n              // opaque (null) origin with no access to this page, cookies, or storage.\n              sandbox=\"allow-scripts allow-forms\"\n              referrerPolicy=\"no-referrer\"\n              className=\"w-full border-0\"\n              style={{ height: iframeHeight }}\n              title=\"HTML Preview\"\n            />\n          ) : (\n            <pre className=\"overflow-x-auto p-3 text-sm\">\n              <code>{code}</code>\n            </pre>\n          )}\n        </div>\n      </FenceBlock>\n\n      {expanded && (\n        <div\n          className=\"fixed inset-0 z-50 flex items-center justify-center bg-black/50\"\n          role=\"dialog\"\n          aria-modal=\"true\"\n          aria-label=\"HTML Preview\"\n        >\n          <button\n            type=\"button\"\n            aria-label=\"Close preview\"\n            className=\"absolute inset-0 h-full w-full cursor-default border-0 bg-transparent p-0\"\n            onClick={() => setExpanded(false)}\n          />\n          <div className=\"relative h-[90vh] w-[90vw] overflow-hidden rounded-lg bg-white shadow-xl dark:bg-neutral-900\">\n            <div className=\"flex items-center justify-between border-b border-neutral-200 px-4 py-2 dark:border-neutral-700\">\n              <span className=\"text-sm font-medium\">HTML Preview</span>\n              <Button\n                variant=\"ghost\"\n                size=\"sm\"\n                onClick={() => setExpanded(false)}\n              >\n                Close\n              </Button>\n            </div>\n            <iframe\n              srcDoc={srcdoc}\n              sandbox=\"allow-scripts allow-forms\"\n              referrerPolicy=\"no-referrer\"\n              className=\"h-full w-full border-0\"\n              title=\"HTML Preview (expanded)\"\n            />\n          </div>\n        </div>\n      )}\n    </>\n  );\n};\n"]}

package/dist/chunk-BIT27PPD.js

@@ -0,0 +1,49 @@
+import { cn } from './chunk-F3SOEIN2.js';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { jsx } from 'react/jsx-runtime';
+
+var scrollAreaVariants = cva(
+  [
+    "relative overflow-auto",
+    // Thin, theme-aware scrollbars
+    "[scrollbar-width:thin]",
+    "[scrollbar-color:hsl(var(--border))_transparent]",
+    "[&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar]:h-2",
+    "[&::-webkit-scrollbar-track]:bg-transparent",
+    "[&::-webkit-scrollbar-thumb]:rounded-full",
+    "[&::-webkit-scrollbar-thumb]:bg-border",
+    "hover:[&::-webkit-scrollbar-thumb]:bg-muted-foreground/40"
+  ],
+  {
+    variants: {
+      orientation: {
+        vertical: "overflow-x-hidden overflow-y-auto",
+        horizontal: "overflow-x-auto overflow-y-hidden",
+        both: "overflow-auto"
+      }
+    },
+    defaultVariants: {
+      orientation: "vertical"
+    }
+  }
+);
+var ScrollArea = React.forwardRef(
+  ({ className, orientation, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-slot": "scroll-area",
+      role: "region",
+      tabIndex: 0,
+      className: cn(scrollAreaVariants({ orientation }), className),
+      ...props,
+      children
+    }
+  )
+);
+ScrollArea.displayName = "ScrollArea";
+
+export { ScrollArea, scrollAreaVariants };
+//# sourceMappingURL=chunk-BIT27PPD.js.map
+//# sourceMappingURL=chunk-BIT27PPD.js.map

package/dist/chunk-BIT27PPD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ScrollArea/ScrollArea.tsx"],"names":[],"mappings":";;;;;AAIA,IAAM,kBAAA,GAAqB,GAAA;AAAA,EACzB;AAAA,IACE,wBAAA;AAAA;AAAA,IAEA,wBAAA;AAAA,IACA,kDAAA;AAAA,IACA,uDAAA;AAAA,IACA,6CAAA;AAAA,IACA,2CAAA;AAAA,IACA,wCAAA;AAAA,IACA;AAAA,GACF;AAAA,EACA;AAAA,IACE,QAAA,EAAU;AAAA,MACR,WAAA,EAAa;AAAA,QACX,QAAA,EAAU,mCAAA;AAAA,QACV,UAAA,EAAY,mCAAA;AAAA,QACZ,IAAA,EAAM;AAAA;AACR,KACF;AAAA,IACA,eAAA,EAAiB;AAAA,MACf,WAAA,EAAa;AAAA;AACf;AAEJ;AAkBA,IAAM,UAAA,GAAmB,KAAA,CAAA,UAAA;AAAA,EACvB,CAAC,EAAE,SAAA,EAAW,WAAA,EAAa,UAAU,GAAG,KAAA,IAAS,GAAA,qBAC/C,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,WAAA,EAAU,aAAA;AAAA,MACV,IAAA,EAAK,QAAA;AAAA,MACL,QAAA,EAAU,CAAA;AAAA,MACV,WAAW,EAAA,CAAG,kBAAA,CAAmB,EAAE,WAAA,EAAa,GAAG,SAAS,CAAA;AAAA,MAC3D,GAAG,KAAA;AAAA,MAEH;AAAA;AAAA;AAGP;AAGA,UAAA,CAAW,WAAA,GAAc,YAAA","file":"chunk-BIT27PPD.js","sourcesContent":["import * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '../../utils/cn';\n\nconst scrollAreaVariants = cva(\n  [\n    'relative overflow-auto',\n    // Thin, theme-aware scrollbars\n    '[scrollbar-width:thin]',\n    '[scrollbar-color:hsl(var(--border))_transparent]',\n    '[&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar]:h-2',\n    '[&::-webkit-scrollbar-track]:bg-transparent',\n    '[&::-webkit-scrollbar-thumb]:rounded-full',\n    '[&::-webkit-scrollbar-thumb]:bg-border',\n    'hover:[&::-webkit-scrollbar-thumb]:bg-muted-foreground/40',\n  ],\n  {\n    variants: {\n      orientation: {\n        vertical: 'overflow-x-hidden overflow-y-auto',\n        horizontal: 'overflow-x-auto overflow-y-hidden',\n        both: 'overflow-auto',\n      },\n    },\n    defaultVariants: {\n      orientation: 'vertical',\n    },\n  }\n);\n\nexport interface ScrollAreaProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof scrollAreaVariants> {}\n\n/**\n * A scrollable container with consistent, theme-aware scrollbar styling.\n *\n * @example\n * ```tsx\n * <ScrollArea className=\"h-64\">\n *   <LongContent />\n * </ScrollArea>\n * ```\n */\n/* eslint-disable jsx-a11y/no-noninteractive-tabindex */\nconst ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(\n  ({ className, orientation, children, ...props }, ref) => (\n    <div\n      ref={ref}\n      data-slot=\"scroll-area\"\n      role=\"region\"\n      tabIndex={0}\n      className={cn(scrollAreaVariants({ orientation }), className)}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n);\n/* eslint-enable jsx-a11y/no-noninteractive-tabindex */\n\nScrollArea.displayName = 'ScrollArea';\n\nexport { ScrollArea, scrollAreaVariants };\n"]}