@gabvdl/ui 0.0.14

package/dist/components/changelog/index.d.ts

@@ -0,0 +1,3 @@
+export { Changelog } from './changelog';
+export type { ChangelogEntry, ChangelogProps } from './changelog';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/changelog/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/changelog/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC"}

package/dist/components/copy-button/copy-button.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+export interface CopyButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {
+    /** The text to copy. A function is called lazily, on click. */
+    value: string | (() => string);
+    /** Show the label next to the icon. */
+    label?: string;
+    /** Offer the native share sheet first on touch devices. */
+    share?: boolean;
+    onCopied?: () => void;
+}
+/**
+ * Copy-to-clipboard with the transient check mark — the six lines re-typed in a
+ * dozen projects, minus the empty `catch {}` they all shipped.
+ */
+export declare function CopyButton({ value, label, share, onCopied, className, ...props }: CopyButtonProps): React.JSX.Element;
+//# sourceMappingURL=copy-button.d.ts.map

package/dist/components/copy-button/copy-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-button.d.ts","sourceRoot":"","sources":["../../../src/components/copy-button/copy-button.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC,EAAE,OAAO,CAAC;IACnG,+DAA+D;IAC/D,KAAK,EAAE,MAAM,GAAG,CAAC,MAAM,MAAM,CAAC,CAAC;IAC/B,uCAAuC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2DAA2D;IAC3D,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED;;;GAGG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,KAAa,EACb,QAAQ,EACR,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,qBAuBjB"}

package/dist/components/copy-button/copy-button.js

@@ -0,0 +1,40 @@
+import { jsxs as c, jsx as i } from "react/jsx-runtime";
+import "react";
+import { Check as a, Copy as d } from "lucide-react";
+import { cn as f } from "../../lib/utils.js";
+import { useCopyToClipboard as l } from "../../hooks/use-copy-to-clipboard.js";
+function k({
+  value: o,
+  label: e,
+  share: n = !1,
+  onCopied: r,
+  className: s,
+  ...m
+}) {
+  const { copy: p, copied: t } = l({ share: n });
+  return /* @__PURE__ */ c(
+    "button",
+    {
+      type: "button",
+      onClick: async () => {
+        await p(typeof o == "function" ? o() : o) && (r == null || r());
+      },
+      "aria-label": e ?? (t ? "Copied" : "Copy"),
+      title: t ? "Copied" : "Copy",
+      className: f(
+        "inline-flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-xs font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground",
+        t && "text-emerald-600 dark:text-emerald-400",
+        s
+      ),
+      ...m,
+      children: [
+        t ? /* @__PURE__ */ i(a, { className: "size-3.5" }) : /* @__PURE__ */ i(d, { className: "size-3.5" }),
+        e && /* @__PURE__ */ i("span", { children: t ? "Copied" : e })
+      ]
+    }
+  );
+}
+export {
+  k as CopyButton
+};
+//# sourceMappingURL=copy-button.js.map

package/dist/components/copy-button/copy-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"copy-button.js","sources":["../../../src/components/copy-button/copy-button.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Check, Copy } from 'lucide-react';\n\nimport { cn } from '../../lib/utils';\nimport { useCopyToClipboard } from '../../hooks/use-copy-to-clipboard';\n\nexport interface CopyButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'value'> {\n  /** The text to copy. A function is called lazily, on click. */\n  value: string | (() => string);\n  /** Show the label next to the icon. */\n  label?: string;\n  /** Offer the native share sheet first on touch devices. */\n  share?: boolean;\n  onCopied?: () => void;\n}\n\n/**\n * Copy-to-clipboard with the transient check mark — the six lines re-typed in a\n * dozen projects, minus the empty `catch {}` they all shipped.\n */\nexport function CopyButton({\n  value,\n  label,\n  share = false,\n  onCopied,\n  className,\n  ...props\n}: CopyButtonProps) {\n  const { copy, copied } = useCopyToClipboard({ share });\n\n  return (\n    <button\n      type=\"button\"\n      onClick={async () => {\n        const ok = await copy(typeof value === 'function' ? value() : value);\n        if (ok) onCopied?.();\n      }}\n      aria-label={label ?? (copied ? 'Copied' : 'Copy')}\n      title={copied ? 'Copied' : 'Copy'}\n      className={cn(\n        'inline-flex items-center gap-1.5 rounded-lg px-2 py-1.5 text-xs font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground',\n        copied && 'text-emerald-600 dark:text-emerald-400',\n        className,\n      )}\n      {...props}\n    >\n      {copied ? <Check className=\"size-3.5\" /> : <Copy className=\"size-3.5\" />}\n      {label && <span>{copied ? 'Copied' : label}</span>}\n    </button>\n  );\n}\n"],"names":["CopyButton","value","label","share","onCopied","className","props","copy","copied","useCopyToClipboard","jsxs","cn","jsx","Check","Copy"],"mappings":";;;;;AAoBO,SAASA,EAAW;AAAA,EACzB,OAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAAoB;AAClB,QAAM,EAAE,MAAAC,GAAM,QAAAC,EAAA,IAAWC,EAAmB,EAAE,OAAAN,GAAO;AAErD,SACE,gBAAAO;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,SAAS,YAAY;AAEnB,QADW,MAAMH,EAAK,OAAON,KAAU,aAAaA,EAAA,IAAUA,CAAK,MAC3DG,KAAA,QAAAA;AAAA,MACV;AAAA,MACA,cAAYF,MAAUM,IAAS,WAAW;AAAA,MAC1C,OAAOA,IAAS,WAAW;AAAA,MAC3B,WAAWG;AAAA,QACT;AAAA,QACAH,KAAU;AAAA,QACVH;AAAA,MAAA;AAAA,MAED,GAAGC;AAAA,MAEH,UAAA;AAAA,QAAAE,IAAS,gBAAAI,EAACC,KAAM,WAAU,WAAA,CAAW,IAAK,gBAAAD,EAACE,GAAA,EAAK,WAAU,WAAA,CAAW;AAAA,QACrEZ,KAAS,gBAAAU,EAAC,QAAA,EAAM,UAAAJ,IAAS,WAAWN,EAAA,CAAM;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGjD;"}

package/dist/components/copy-button/index.d.ts

@@ -0,0 +1,3 @@
+export { CopyButton } from './copy-button';
+export type { CopyButtonProps } from './copy-button';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/copy-button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/copy-button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,YAAY,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC"}

package/dist/components/drop-zone/drop-zone.d.ts

@@ -0,0 +1,20 @@
+import { UseFileDropOptions } from './use-file-drop';
+import * as React from 'react';
+export interface DropZoneProps extends UseFileDropOptions {
+    /** Headline inside the zone. */
+    label?: React.ReactNode;
+    /** Small print — say what you accept and how big. */
+    hint?: React.ReactNode;
+    /** Replaces the default body entirely. Gets the live drag state. */
+    children?: (state: {
+        dragging: boolean;
+        open: () => void;
+    }) => React.ReactNode;
+    className?: string;
+}
+/**
+ * A drag-and-drop file target that also clicks through to the file picker, with
+ * the whole-window drag highlight and folder support behind one prop.
+ */
+export declare function DropZone({ label, hint, children, className, ...options }: DropZoneProps): React.JSX.Element;
+//# sourceMappingURL=drop-zone.d.ts.map

package/dist/components/drop-zone/drop-zone.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drop-zone.d.ts","sourceRoot":"","sources":["../../../src/components/drop-zone/drop-zone.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAe,KAAK,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAEvE,MAAM,WAAW,aAAc,SAAQ,kBAAkB;IACvD,gCAAgC;IAChC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,qDAAqD;IACrD,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,oEAAoE;IACpE,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE;QAAE,QAAQ,EAAE,OAAO,CAAC;QAAC,IAAI,EAAE,MAAM,IAAI,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC;IAC/E,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,wBAAgB,QAAQ,CAAC,EACvB,KAAyB,EACzB,IAAI,EACJ,QAAQ,EACR,SAAS,EACT,GAAG,OAAO,EACX,EAAE,aAAa,qBAyCf"}

package/dist/components/drop-zone/drop-zone.js

@@ -0,0 +1,54 @@
+import { jsxs as s, jsx as r, Fragment as p } from "react/jsx-runtime";
+import "react";
+import { Upload as f } from "lucide-react";
+import { cn as a } from "../../lib/utils.js";
+import { useFileDrop as b } from "./use-file-drop.js";
+function D({
+  label: l = "Drop files here",
+  hint: i,
+  children: d,
+  className: m,
+  ...e
+}) {
+  const { dragging: o, rootProps: u, inputProps: c, open: t } = b(e);
+  return /* @__PURE__ */ s(
+    "div",
+    {
+      ...u,
+      onClick: e.disabled ? void 0 : t,
+      onKeyDown: (n) => {
+        (n.key === "Enter" || n.key === " ") && (n.preventDefault(), t());
+      },
+      role: "button",
+      tabIndex: e.disabled ? -1 : 0,
+      "aria-disabled": e.disabled,
+      className: a(
+        "relative flex cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed border-border px-6 py-10 text-center transition-colors outline-none",
+        "hover:border-ring/60 hover:bg-muted/40 focus-visible:ring-2 focus-visible:ring-ring",
+        o && "border-ring bg-muted/60",
+        e.disabled && "pointer-events-none opacity-50",
+        m
+      ),
+      children: [
+        /* @__PURE__ */ r("input", { ...c }),
+        d ? d({ dragging: o, open: t }) : /* @__PURE__ */ s(p, { children: [
+          /* @__PURE__ */ r(
+            f,
+            {
+              className: a(
+                "size-6 text-muted-foreground transition-transform",
+                o && "scale-110 text-foreground"
+              )
+            }
+          ),
+          /* @__PURE__ */ r("p", { className: "text-sm font-medium text-foreground", children: l }),
+          i && /* @__PURE__ */ r("p", { className: "text-xs text-muted-foreground", children: i })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  D as DropZone
+};
+//# sourceMappingURL=drop-zone.js.map

package/dist/components/drop-zone/drop-zone.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drop-zone.js","sources":["../../../src/components/drop-zone/drop-zone.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Upload } from 'lucide-react';\n\nimport { cn } from '../../lib/utils';\nimport { useFileDrop, type UseFileDropOptions } from './use-file-drop';\n\nexport interface DropZoneProps extends UseFileDropOptions {\n  /** Headline inside the zone. */\n  label?: React.ReactNode;\n  /** Small print — say what you accept and how big. */\n  hint?: React.ReactNode;\n  /** Replaces the default body entirely. Gets the live drag state. */\n  children?: (state: { dragging: boolean; open: () => void }) => React.ReactNode;\n  className?: string;\n}\n\n/**\n * A drag-and-drop file target that also clicks through to the file picker, with\n * the whole-window drag highlight and folder support behind one prop.\n */\nexport function DropZone({\n  label = 'Drop files here',\n  hint,\n  children,\n  className,\n  ...options\n}: DropZoneProps) {\n  const { dragging, rootProps, inputProps, open } = useFileDrop(options);\n\n  return (\n    <div\n      {...rootProps}\n      onClick={options.disabled ? undefined : open}\n      onKeyDown={(e) => {\n        if (e.key === 'Enter' || e.key === ' ') {\n          e.preventDefault();\n          open();\n        }\n      }}\n      role=\"button\"\n      tabIndex={options.disabled ? -1 : 0}\n      aria-disabled={options.disabled}\n      className={cn(\n        'relative flex cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed border-border px-6 py-10 text-center transition-colors outline-none',\n        'hover:border-ring/60 hover:bg-muted/40 focus-visible:ring-2 focus-visible:ring-ring',\n        dragging && 'border-ring bg-muted/60',\n        options.disabled && 'pointer-events-none opacity-50',\n        className,\n      )}\n    >\n      <input {...inputProps} />\n      {children ? (\n        children({ dragging, open })\n      ) : (\n        <>\n          <Upload\n            className={cn(\n              'size-6 text-muted-foreground transition-transform',\n              dragging && 'scale-110 text-foreground',\n            )}\n          />\n          <p className=\"text-sm font-medium text-foreground\">{label}</p>\n          {hint && <p className=\"text-xs text-muted-foreground\">{hint}</p>}\n        </>\n      )}\n    </div>\n  );\n}\n"],"names":["DropZone","label","hint","children","className","options","dragging","rootProps","inputProps","open","useFileDrop","jsxs","e","cn","jsx","Fragment","Upload"],"mappings":";;;;;AAoBO,SAASA,EAAS;AAAA,EACvB,OAAAC,IAAQ;AAAA,EACR,MAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,GAAkB;AAChB,QAAM,EAAE,UAAAC,GAAU,WAAAC,GAAW,YAAAC,GAAY,MAAAC,EAAA,IAASC,EAAYL,CAAO;AAErE,SACE,gBAAAM;AAAA,IAAC;AAAA,IAAA;AAAA,MACE,GAAGJ;AAAA,MACJ,SAASF,EAAQ,WAAW,SAAYI;AAAA,MACxC,WAAW,CAACG,MAAM;AAChB,SAAIA,EAAE,QAAQ,WAAWA,EAAE,QAAQ,SACjCA,EAAE,eAAA,GACFH,EAAA;AAAA,MAEJ;AAAA,MACA,MAAK;AAAA,MACL,UAAUJ,EAAQ,WAAW,KAAK;AAAA,MAClC,iBAAeA,EAAQ;AAAA,MACvB,WAAWQ;AAAA,QACT;AAAA,QACA;AAAA,QACAP,KAAY;AAAA,QACZD,EAAQ,YAAY;AAAA,QACpBD;AAAA,MAAA;AAAA,MAGF,UAAA;AAAA,QAAA,gBAAAU,EAAC,SAAA,EAAO,GAAGN,GAAY;AAAA,QACtBL,IACCA,EAAS,EAAE,UAAAG,GAAU,MAAAG,EAAA,CAAM,IAE3B,gBAAAE,EAAAI,GAAA,EACE,UAAA;AAAA,UAAA,gBAAAD;AAAA,YAACE;AAAA,YAAA;AAAA,cACC,WAAWH;AAAA,gBACT;AAAA,gBACAP,KAAY;AAAA,cAAA;AAAA,YACd;AAAA,UAAA;AAAA,UAEF,gBAAAQ,EAAC,KAAA,EAAE,WAAU,uCAAuC,UAAAb,GAAM;AAAA,UACzDC,KAAQ,gBAAAY,EAAC,KAAA,EAAE,WAAU,iCAAiC,UAAAZ,EAAA,CAAK;AAAA,QAAA,EAAA,CAC9D;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAIR;"}

package/dist/components/drop-zone/index.d.ts

@@ -0,0 +1,5 @@
+export { DropZone } from './drop-zone';
+export type { DropZoneProps } from './drop-zone';
+export { useFileDrop } from './use-file-drop';
+export type { FileRejection, UseFileDropOptions } from './use-file-drop';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/drop-zone/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/drop-zone/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,YAAY,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,YAAY,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/drop-zone/use-file-drop.d.ts

@@ -0,0 +1,45 @@
+import * as React from 'react';
+export interface FileRejection {
+    file: File;
+    reason: 'type' | 'size' | 'count';
+}
+export interface UseFileDropOptions {
+    onFiles: (files: File[]) => void;
+    /** Same syntax as `<input accept>`: `image/*,.glb`. */
+    accept?: string;
+    multiple?: boolean;
+    maxFiles?: number;
+    /** Per-file cap, in bytes. */
+    maxSize?: number;
+    /** Walk dropped folders recursively (Chromium/WebKit). */
+    recursive?: boolean;
+    disabled?: boolean;
+    onReject?: (rejections: FileRejection[]) => void;
+}
+/**
+ * The headless half of `<DropZone>`: drag state, the click-to-browse input, and
+ * validation. Spread `rootProps` on any element to make it a drop target.
+ *
+ * Drag events fire for every child element, so the depth counter is what keeps
+ * the highlight from flickering as the pointer crosses them.
+ */
+export declare function useFileDrop({ onFiles, accept, multiple, maxFiles, maxSize, recursive, disabled, onReject, }: UseFileDropOptions): {
+    dragging: boolean;
+    rootProps: {
+        onDragEnter: (e: React.DragEvent) => void;
+        onDragOver: (e: React.DragEvent) => void;
+        onDragLeave: (e: React.DragEvent) => void;
+        onDrop: (e: React.DragEvent) => Promise<void>;
+    };
+    inputProps: {
+        ref: React.RefObject<HTMLInputElement | null>;
+        type: "file";
+        accept: string | undefined;
+        multiple: boolean;
+        disabled: boolean;
+        className: string;
+        onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    };
+    open: () => void | undefined;
+};
+//# sourceMappingURL=use-file-drop.d.ts.map

package/dist/components/drop-zone/use-file-drop.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-file-drop.d.ts","sourceRoot":"","sources":["../../../src/components/drop-zone/use-file-drop.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,IAAI,CAAC;IACX,MAAM,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;CACnC;AAED,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IACjC,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,CAAC,UAAU,EAAE,aAAa,EAAE,KAAK,IAAI,CAAC;CAClD;AAED;;;;;;GAMG;AACH,wBAAgB,WAAW,CAAC,EAC1B,OAAO,EACP,MAAM,EACN,QAAe,EACf,QAAQ,EACR,OAAO,EACP,SAAiB,EACjB,QAAgB,EAChB,QAAQ,GACT,EAAE,kBAAkB;;;yBAgCA,KAAK,CAAC,SAAS;wBAMhB,KAAK,CAAC,SAAS;yBAKd,KAAK,CAAC,SAAS;oBAMd,KAAK,CAAC,SAAS;;;;;;;;;sBAoBnB,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC;;;EAUpD"}

package/dist/components/drop-zone/use-file-drop.js

@@ -0,0 +1,97 @@
+import * as u from "react";
+function A({
+  onFiles: r,
+  accept: s,
+  multiple: a = !0,
+  maxFiles: n,
+  maxSize: t,
+  recursive: y = !1,
+  disabled: l = !1,
+  onReject: c
+}) {
+  const [T, g] = u.useState(!1), p = u.useRef(0), w = u.useRef(null), D = u.useMemo(() => E(s), [s]), d = u.useCallback(
+    (e) => {
+      const f = [], o = [];
+      for (const i of e)
+        L(i, D) ? t != null && i.size > t ? o.push({ file: i, reason: "size" }) : n != null && f.length >= n ? o.push({ file: i, reason: "count" }) : !a && f.length >= 1 ? o.push({ file: i, reason: "count" }) : f.push(i) : o.push({ file: i, reason: "type" });
+      o.length && (c == null || c(o)), f.length && r(f);
+    },
+    [D, n, t, a, r, c]
+  ), m = () => {
+    p.current = 0, g(!1);
+  }, C = {
+    onDragEnter: (e) => {
+      l || !h(e.dataTransfer) || (e.preventDefault(), p.current += 1, g(!0));
+    },
+    onDragOver: (e) => {
+      l || !h(e.dataTransfer) || (e.preventDefault(), e.dataTransfer.dropEffect = "copy");
+    },
+    onDragLeave: (e) => {
+      l || !h(e.dataTransfer) || (e.preventDefault(), p.current -= 1, p.current <= 0 && m());
+    },
+    onDrop: async (e) => {
+      if (l || !h(e.dataTransfer)) return;
+      e.preventDefault(), m();
+      const f = [...e.dataTransfer.files], o = y ? await W(e.dataTransfer.items) : [];
+      d(o.length > 0 ? o : f);
+    }
+  }, P = {
+    ref: w,
+    type: "file",
+    accept: s,
+    multiple: a,
+    disabled: l,
+    className: "hidden",
+    onChange: (e) => {
+      d([...e.target.files ?? []]), e.target.value = "";
+    }
+  }, v = u.useCallback(() => {
+    var e;
+    return (e = w.current) == null ? void 0 : e.click();
+  }, []);
+  return { dragging: T, rootProps: C, inputProps: P, open: v };
+}
+function h(r) {
+  return !!r && Array.from(r.types ?? []).includes("Files");
+}
+function E(r) {
+  return r ? r.split(",").map((s) => s.trim().toLowerCase()).filter(Boolean) : [];
+}
+function L(r, s) {
+  if (s.length === 0) return !0;
+  const a = r.type.toLowerCase(), n = r.name.toLowerCase();
+  return s.some(
+    (t) => t.startsWith(".") ? n.endsWith(t) : t.endsWith("/*") ? a.startsWith(t.slice(0, -1)) : a === t
+  );
+}
+async function W(r) {
+  const s = [...r].map((n) => {
+    var t;
+    return (t = n.webkitGetAsEntry) == null ? void 0 : t.call(n);
+  }).filter(Boolean);
+  if (s.length === 0) return [];
+  const a = [];
+  return await Promise.all(s.map((n) => k(n, a))), a;
+}
+async function k(r, s) {
+  if (r.isFile) {
+    const n = await new Promise(
+      (t) => r.file(t, () => t(null))
+    );
+    n && s.push(n);
+    return;
+  }
+  if (!r.isDirectory) return;
+  const a = r.createReader();
+  for (; ; ) {
+    const n = await new Promise(
+      (t) => a.readEntries(t, () => t([]))
+    );
+    if (n.length === 0) return;
+    await Promise.all(n.map((t) => k(t, s)));
+  }
+}
+export {
+  A as useFileDrop
+};
+//# sourceMappingURL=use-file-drop.js.map

package/dist/components/drop-zone/use-file-drop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-file-drop.js","sources":["../../../src/components/drop-zone/use-file-drop.ts"],"sourcesContent":["import * as React from 'react';\n\nexport interface FileRejection {\n  file: File;\n  reason: 'type' | 'size' | 'count';\n}\n\nexport interface UseFileDropOptions {\n  onFiles: (files: File[]) => void;\n  /** Same syntax as `<input accept>`: `image/*,.glb`. */\n  accept?: string;\n  multiple?: boolean;\n  maxFiles?: number;\n  /** Per-file cap, in bytes. */\n  maxSize?: number;\n  /** Walk dropped folders recursively (Chromium/WebKit). */\n  recursive?: boolean;\n  disabled?: boolean;\n  onReject?: (rejections: FileRejection[]) => void;\n}\n\n/**\n * The headless half of `<DropZone>`: drag state, the click-to-browse input, and\n * validation. Spread `rootProps` on any element to make it a drop target.\n *\n * Drag events fire for every child element, so the depth counter is what keeps\n * the highlight from flickering as the pointer crosses them.\n */\nexport function useFileDrop({\n  onFiles,\n  accept,\n  multiple = true,\n  maxFiles,\n  maxSize,\n  recursive = false,\n  disabled = false,\n  onReject,\n}: UseFileDropOptions) {\n  const [dragging, setDragging] = React.useState(false);\n  const depth = React.useRef(0);\n  const input = React.useRef<HTMLInputElement>(null);\n\n  const accepts = React.useMemo(() => parseAccept(accept), [accept]);\n\n  const take = React.useCallback(\n    (list: File[]) => {\n      const kept: File[] = [];\n      const rejected: FileRejection[] = [];\n\n      for (const file of list) {\n        if (!matches(file, accepts)) rejected.push({ file, reason: 'type' });\n        else if (maxSize != null && file.size > maxSize) rejected.push({ file, reason: 'size' });\n        else if (maxFiles != null && kept.length >= maxFiles) rejected.push({ file, reason: 'count' });\n        else if (!multiple && kept.length >= 1) rejected.push({ file, reason: 'count' });\n        else kept.push(file);\n      }\n\n      if (rejected.length) onReject?.(rejected);\n      if (kept.length) onFiles(kept);\n    },\n    [accepts, maxFiles, maxSize, multiple, onFiles, onReject],\n  );\n\n  const reset = () => {\n    depth.current = 0;\n    setDragging(false);\n  };\n\n  const rootProps = {\n    onDragEnter: (e: React.DragEvent) => {\n      if (disabled || !isFileDrag(e.dataTransfer)) return;\n      e.preventDefault();\n      depth.current += 1;\n      setDragging(true);\n    },\n    onDragOver: (e: React.DragEvent) => {\n      if (disabled || !isFileDrag(e.dataTransfer)) return;\n      e.preventDefault();\n      e.dataTransfer.dropEffect = 'copy';\n    },\n    onDragLeave: (e: React.DragEvent) => {\n      if (disabled || !isFileDrag(e.dataTransfer)) return;\n      e.preventDefault();\n      depth.current -= 1;\n      if (depth.current <= 0) reset();\n    },\n    onDrop: async (e: React.DragEvent) => {\n      if (disabled || !isFileDrag(e.dataTransfer)) return;\n      e.preventDefault();\n      reset();\n      // Read the flat list up front: the DataTransfer is dead once we await.\n      const plain = [...e.dataTransfer.files];\n      // The entries API is the only way to see inside a dropped folder, but it\n      // is non-standard — where it gives us nothing, take the flat list.\n      const walked = recursive ? await walkItems(e.dataTransfer.items) : [];\n      take(walked.length > 0 ? walked : plain);\n    },\n  };\n\n  const inputProps = {\n    ref: input,\n    type: 'file' as const,\n    accept,\n    multiple,\n    disabled,\n    className: 'hidden',\n    onChange: (e: React.ChangeEvent<HTMLInputElement>) => {\n      take([...(e.target.files ?? [])]);\n      e.target.value = ''; // so picking the same file twice fires again\n    },\n  };\n\n  /** Open the OS file picker. */\n  const open = React.useCallback(() => input.current?.click(), []);\n\n  return { dragging, rootProps, inputProps, open };\n}\n\n/**\n * A drag only concerns us when it carries files. Text dragged from elsewhere on\n * the page reports no `Files` type, and must be left alone so it can still drop\n * into whatever the zone wraps (a textarea, say).\n */\nfunction isFileDrag(dt: DataTransfer | null): boolean {\n  return !!dt && Array.from(dt.types ?? []).includes('Files');\n}\n\nfunction parseAccept(accept?: string): string[] {\n  return accept\n    ? accept\n        .split(',')\n        .map((s) => s.trim().toLowerCase())\n        .filter(Boolean)\n    : [];\n}\n\nfunction matches(file: File, accepts: string[]): boolean {\n  if (accepts.length === 0) return true;\n  const type = file.type.toLowerCase();\n  const name = file.name.toLowerCase();\n  return accepts.some((a) =>\n    a.startsWith('.')\n      ? name.endsWith(a)\n      : a.endsWith('/*')\n        ? type.startsWith(a.slice(0, -1))\n        : type === a,\n  );\n}\n\n/* ─── Folder drops ────────────────────────────────────────────────────────────\n * `dataTransfer.files` flattens a dropped folder to nothing. The entries API is\n * the only way to read one, and it is non-standard — hence the `any`s and the\n * silent bail on browsers that lack it.\n */\nasync function walkItems(items: DataTransferItemList): Promise<File[]> {\n  const entries = [...items]\n    .map((item) => (item as any).webkitGetAsEntry?.())\n    .filter(Boolean);\n  if (entries.length === 0) return [];\n\n  const out: File[] = [];\n  await Promise.all(entries.map((entry: any) => walk(entry, out)));\n  return out;\n}\n\nasync function walk(entry: any, out: File[]): Promise<void> {\n  if (entry.isFile) {\n    const file = await new Promise<File | null>((resolve) =>\n      entry.file(resolve, () => resolve(null)),\n    );\n    if (file) out.push(file);\n    return;\n  }\n  if (!entry.isDirectory) return;\n\n  const reader = entry.createReader();\n  // readEntries pages at ~100 entries — keep reading until it returns nothing.\n  for (;;) {\n    const batch: any[] = await new Promise((resolve) =>\n      reader.readEntries(resolve, () => resolve([])),\n    );\n    if (batch.length === 0) return;\n    await Promise.all(batch.map((child) => walk(child, out)));\n  }\n}\n"],"names":["useFileDrop","onFiles","accept","multiple","maxFiles","maxSize","recursive","disabled","onReject","dragging","setDragging","React","depth","input","accepts","parseAccept","take","list","kept","rejected","file","matches","reset","rootProps","isFileDrag","plain","walked","walkItems","inputProps","open","_a","dt","type","name","a","items","entries","item","out","entry","walk","resolve","reader","batch","child"],"mappings":"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"}

package/dist/components/element-picker/element-picker-field.d.ts

@@ -0,0 +1,30 @@
+import { UseElementPickerOptions } from './use-element-picker';
+import * as React from 'react';
+type View = 'preview' | 'html' | 'parsed';
+export interface ElementPickerFieldProps extends UseElementPickerOptions {
+    /** Field label. */
+    label?: React.ReactNode;
+    /** Small print under the label. */
+    hint?: React.ReactNode;
+    /** Text on the trigger while idle. */
+    pickLabel?: string;
+    /** Shown when nothing is selected yet. */
+    emptyLabel?: React.ReactNode;
+    /** Which detail tab a card opens on. Default `parsed`. */
+    defaultView?: View;
+    className?: string;
+}
+/**
+ * The element picker as a form input: a trigger that arms the page, and a list
+ * of what you selected — each with a live thumbnail, its formatted HTML, and
+ * the parse (text, kind, hierarchy, attributes, computed styles) laid out for
+ * reading. Hovering a card spotlights the element back in the page.
+ *
+ * The value is `PickedElement[]`; `info` on each is plain data, so
+ * `JSON.stringify(picked.map((p) => p.info))` is a ready-made payload — which
+ * is the point: this is how you let someone hand an LLM, a scraper or a bug
+ * report the exact bits of a page they mean.
+ */
+export declare function ElementPickerField({ label, hint, pickLabel, emptyLabel, defaultView, className, ...options }: ElementPickerFieldProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=element-picker-field.d.ts.map

package/dist/components/element-picker/element-picker-field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"element-picker-field.d.ts","sourceRoot":"","sources":["../../../src/components/element-picker/element-picker-field.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,OAAO,EAAoB,KAAK,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAiBtF,KAAK,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;AAkQ1C,MAAM,WAAW,uBAAwB,SAAQ,uBAAuB;IACtE,mBAAmB;IACnB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,mCAAmC;IACnC,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0CAA0C;IAC1C,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,0DAA0D;IAC1D,WAAW,CAAC,EAAE,IAAI,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,kBAAkB,CAAC,EACjC,KAAuB,EACvB,IAAI,EACJ,SAA2B,EAC3B,UAAmC,EACnC,WAAsB,EACtB,SAAS,EACT,GAAG,OAAO,EACX,EAAE,uBAAuB,qBA+DzB"}