@tokshare/pick 0.0.0-stage → 0.1.0

package/dist/react.d.cts

@@ -0,0 +1,65 @@
+import * as react from 'react';
+import { CSSProperties, ButtonHTMLAttributes, ReactNode } from 'react';
+import { PickOptions, FieldOptions, PickController } from '@tokshare/pick';
+
+interface TokShareSettings {
+    /** Your publishable key (pk_live_… or pk_test_…). React reserves `key`, hence `pickKey`. */
+    pickKey?: string;
+    /** Relay URL. Defaults to the hosted relay. */
+    relay?: string;
+    locale?: PickOptions["locale"];
+    theme?: PickOptions["theme"];
+}
+/** Sets the key (and optionally relay, locale, theme) once for every TokShare component inside it. */
+declare function TokShareProvider({ children, ...settings }: TokShareSettings & {
+    children?: ReactNode;
+}): react.JSX.Element;
+/** Options shared by the field, the button and the hook. Sizes take bytes or "5MB", "500KB". */
+interface TokSharePickOptions extends Omit<PickOptions, "key" | "ui" | "maxFileBytes" | "signal"> {
+    /** Overrides the provider's key. */
+    pickKey?: string;
+    maxFileBytes?: number | string;
+    /** Phone shrinks photos so the longest side is at most this many pixels. Short for resizeImages. */
+    resize?: number;
+}
+/**
+ * `const { pick } = useTokSharePick({ accept: "image/*" })`, then `const files = await pick()` in a click
+ * handler. Options given to pick() override the hook's, which override the provider's.
+ */
+declare function useTokSharePick(defaults?: TokSharePickOptions): {
+    /** Opens the phone window; resolves with the files, or [] if the person cancels. */
+    pick: (options?: TokSharePickOptions) => Promise<File[]>;
+    /** The same with live events (phone, progress, file) and your own UI if you pass ui: false. */
+    open: (options?: TokSharePickOptions & {
+        ui?: boolean;
+    }) => PickController;
+};
+interface TokSharePickProps extends TokSharePickOptions, Pick<FieldOptions, "name" | "phone" | "phoneOnMobile" | "label"> {
+    /** Every time the list changes: files from this computer and from the phone, in order. */
+    onChange?: (files: File[]) => void;
+    className?: string;
+    style?: CSSProperties;
+    id?: string;
+}
+interface TokSharePickHandle {
+    /** The files in the field right now. */
+    readonly files: readonly File[];
+    /** The hidden <input type="file" name> the files are kept in, for forms. */
+    readonly input: HTMLInputElement | null;
+    remove(file: File): void;
+    clear(): void;
+}
+/**
+ * The complete upload field: drop zone, "Browse files" and "Use your phone". With `name`, a normal
+ * form submit includes the files. Changing an option rebuilds the field (and empties it).
+ */
+declare const TokSharePick: react.ForwardRefExoticComponent<TokSharePickProps & react.RefAttributes<TokSharePickHandle>>;
+interface TokSharePickButtonProps extends TokSharePickOptions, Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof TokSharePickOptions | "onError"> {
+    /** The files the person sent (not called if they cancel). */
+    onFiles?: (files: File[]) => void;
+    onError?: (error: unknown) => void;
+}
+/** A button that opens the phone window and hands you the files. Takes every <button> prop too. */
+declare const TokSharePickButton: react.ForwardRefExoticComponent<TokSharePickButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { TokSharePick, TokSharePickButton, type TokSharePickButtonProps, type TokSharePickHandle, type TokSharePickOptions, type TokSharePickProps, TokShareProvider, type TokShareSettings, useTokSharePick };

package/dist/react.d.ts

@@ -0,0 +1,65 @@
+import * as react from 'react';
+import { CSSProperties, ButtonHTMLAttributes, ReactNode } from 'react';
+import { PickOptions, FieldOptions, PickController } from '@tokshare/pick';
+
+interface TokShareSettings {
+    /** Your publishable key (pk_live_… or pk_test_…). React reserves `key`, hence `pickKey`. */
+    pickKey?: string;
+    /** Relay URL. Defaults to the hosted relay. */
+    relay?: string;
+    locale?: PickOptions["locale"];
+    theme?: PickOptions["theme"];
+}
+/** Sets the key (and optionally relay, locale, theme) once for every TokShare component inside it. */
+declare function TokShareProvider({ children, ...settings }: TokShareSettings & {
+    children?: ReactNode;
+}): react.JSX.Element;
+/** Options shared by the field, the button and the hook. Sizes take bytes or "5MB", "500KB". */
+interface TokSharePickOptions extends Omit<PickOptions, "key" | "ui" | "maxFileBytes" | "signal"> {
+    /** Overrides the provider's key. */
+    pickKey?: string;
+    maxFileBytes?: number | string;
+    /** Phone shrinks photos so the longest side is at most this many pixels. Short for resizeImages. */
+    resize?: number;
+}
+/**
+ * `const { pick } = useTokSharePick({ accept: "image/*" })`, then `const files = await pick()` in a click
+ * handler. Options given to pick() override the hook's, which override the provider's.
+ */
+declare function useTokSharePick(defaults?: TokSharePickOptions): {
+    /** Opens the phone window; resolves with the files, or [] if the person cancels. */
+    pick: (options?: TokSharePickOptions) => Promise<File[]>;
+    /** The same with live events (phone, progress, file) and your own UI if you pass ui: false. */
+    open: (options?: TokSharePickOptions & {
+        ui?: boolean;
+    }) => PickController;
+};
+interface TokSharePickProps extends TokSharePickOptions, Pick<FieldOptions, "name" | "phone" | "phoneOnMobile" | "label"> {
+    /** Every time the list changes: files from this computer and from the phone, in order. */
+    onChange?: (files: File[]) => void;
+    className?: string;
+    style?: CSSProperties;
+    id?: string;
+}
+interface TokSharePickHandle {
+    /** The files in the field right now. */
+    readonly files: readonly File[];
+    /** The hidden <input type="file" name> the files are kept in, for forms. */
+    readonly input: HTMLInputElement | null;
+    remove(file: File): void;
+    clear(): void;
+}
+/**
+ * The complete upload field: drop zone, "Browse files" and "Use your phone". With `name`, a normal
+ * form submit includes the files. Changing an option rebuilds the field (and empties it).
+ */
+declare const TokSharePick: react.ForwardRefExoticComponent<TokSharePickProps & react.RefAttributes<TokSharePickHandle>>;
+interface TokSharePickButtonProps extends TokSharePickOptions, Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof TokSharePickOptions | "onError"> {
+    /** The files the person sent (not called if they cancel). */
+    onFiles?: (files: File[]) => void;
+    onError?: (error: unknown) => void;
+}
+/** A button that opens the phone window and hands you the files. Takes every <button> prop too. */
+declare const TokSharePickButton: react.ForwardRefExoticComponent<TokSharePickButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+export { TokSharePick, TokSharePickButton, type TokSharePickButtonProps, type TokSharePickHandle, type TokSharePickOptions, type TokSharePickProps, TokShareProvider, type TokShareSettings, useTokSharePick };

package/dist/react.js

@@ -0,0 +1,140 @@
+"use client";
+
+// src/react.tsx
+import { mountField, open, parseSize, pick } from "@tokshare/pick";
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { jsx } from "react/jsx-runtime";
+var TokShareContext = createContext({});
+function TokShareProvider({ children, ...settings }) {
+  const parent = useContext(TokShareContext);
+  const { pickKey, relay, locale, theme } = settings;
+  const value = useMemo(() => ({ ...parent, ...defined({ pickKey, relay, locale, theme }) }), [parent, pickKey, relay, locale, theme]);
+  return /* @__PURE__ */ jsx(TokShareContext.Provider, { value, children });
+}
+function defined(value) {
+  return Object.fromEntries(Object.entries(value).filter(([, entry]) => entry !== void 0));
+}
+function toCoreOptions(settings, props, component) {
+  const { pickKey, maxFileBytes, resize, ...rest } = props;
+  const key = pickKey ?? settings.pickKey;
+  if (!key) throw new Error(`${component}: pass pickKey, or wrap your app in <TokShareProvider pickKey="pk_\u2026">.`);
+  const bytes = parseSize(maxFileBytes);
+  return {
+    ...defined({ relay: settings.relay, locale: settings.locale, theme: settings.theme }),
+    ...defined(rest),
+    key,
+    ...bytes ? { maxFileBytes: bytes } : {},
+    ...resize && resize > 0 && rest.resizeImages === void 0 ? { resizeImages: { maxDimension: resize } } : {}
+  };
+}
+function useTokSharePick(defaults = {}) {
+  const settings = useContext(TokShareContext);
+  const latest = useRef({ settings, defaults });
+  latest.current = { settings, defaults };
+  return useMemo(() => ({
+    /** Opens the phone window; resolves with the files, or [] if the person cancels. */
+    pick: (options = {}) => pick(toCoreOptions(latest.current.settings, { ...latest.current.defaults, ...options }, "useTokSharePick")),
+    /** The same with live events (phone, progress, file) and your own UI if you pass ui: false. */
+    open: (options = {}) => {
+      const { ui, ...rest } = options;
+      return open({ ...toCoreOptions(latest.current.settings, { ...latest.current.defaults, ...rest }, "useTokSharePick"), ...ui === void 0 ? {} : { ui } });
+    }
+  }), []);
+}
+var TokSharePick = forwardRef(function TokSharePick2(props, ref) {
+  const { onChange, className, style, id, ...options } = props;
+  const settings = useContext(TokShareContext);
+  const core = toCoreOptions(settings, options, "<TokSharePick>");
+  const signature = JSON.stringify(core);
+  const container = useRef(null);
+  const controller = useRef(null);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  useEffect(() => {
+    const field = mountField(container.current, JSON.parse(signature));
+    controller.current = field;
+    const off = field.on("change", (files) => onChangeRef.current?.(files));
+    return () => {
+      off();
+      field.destroy();
+      if (controller.current === field) controller.current = null;
+    };
+  }, [signature]);
+  useImperativeHandle(ref, () => ({
+    get files() {
+      return controller.current?.files ?? [];
+    },
+    get input() {
+      return controller.current?.input ?? null;
+    },
+    remove: (file) => controller.current?.remove(file),
+    clear: () => controller.current?.clear()
+  }), []);
+  return /* @__PURE__ */ jsx("div", { ref: container, className, style, id });
+});
+var PICK_OPTION_NAMES = [
+  "pickKey",
+  "maxFileBytes",
+  "resize",
+  "accept",
+  "multiple",
+  "maxFiles",
+  "resizeImages",
+  "confirmPhone",
+  "siteName",
+  "relay",
+  "locale",
+  "theme",
+  "strings",
+  "direct",
+  "announce"
+];
+var TokSharePickButton = forwardRef(function TokSharePickButton2(props, ref) {
+  const { onFiles, onError, onClick, children, disabled, type, ...rest } = props;
+  const options = {};
+  const buttonProps = {};
+  for (const [name, value] of Object.entries(rest)) {
+    (PICK_OPTION_NAMES.includes(name) ? options : buttonProps)[name] = value;
+  }
+  const { pick: pickFiles } = useTokSharePick(options);
+  const [busy, setBusy] = useState(false);
+  const mounted = useRef(true);
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  const handleClick = useCallback(async (event) => {
+    onClick?.(event);
+    if (event.defaultPrevented) return;
+    setBusy(true);
+    try {
+      const files = await pickFiles();
+      if (files.length) onFiles?.(files);
+    } catch (error) {
+      if (onError) onError(error);
+      else console.error(error);
+    } finally {
+      if (mounted.current) setBusy(false);
+    }
+  }, [onClick, onFiles, onError, pickFiles]);
+  return /* @__PURE__ */ jsx("button", { ref, type: type ?? "button", disabled: disabled || busy, "aria-busy": busy || void 0, onClick: handleClick, ...buttonProps, children: children ?? "From my phone" });
+});
+export {
+  TokSharePick,
+  TokSharePickButton,
+  TokShareProvider,
+  useTokSharePick
+};
+//# sourceMappingURL=react.js.map

package/dist/react.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/react.tsx"],"sourcesContent":["\"use client\";\n// @tokshare/pick/react: the upload field, a phone button and a hook, as React components.\n//\n//   <TokShareProvider pickKey=\"pk_live_…\">            once, near the top of the app\n//     <TokSharePick name=\"photos\" accept=\"image/*\" maxFileBytes=\"5MB\" onChange={setFiles} />\n//     <TokSharePickButton accept=\"image/*\" onFiles={addFiles}>From my phone</TokSharePickButton>\n//   </TokShareProvider>\n//\n// The core is imported from \"@tokshare/pick\" (not bundled in), so an app that uses both gets one copy.\nimport { mountField, open, parseSize, pick, type FieldController, type FieldOptions, type PickController, type PickOptions } from \"@tokshare/pick\";\nimport {\n  createContext, forwardRef, useCallback, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState,\n  type ButtonHTMLAttributes, type CSSProperties, type MouseEvent, type ReactNode,\n} from \"react\";\n\n// ---- Shared settings ----------------------------------------------------------------------------\n\nexport interface TokShareSettings {\n  /** Your publishable key (pk_live_… or pk_test_…). React reserves `key`, hence `pickKey`. */\n  pickKey?: string;\n  /** Relay URL. Defaults to the hosted relay. */\n  relay?: string;\n  locale?: PickOptions[\"locale\"];\n  theme?: PickOptions[\"theme\"];\n}\n\nconst TokShareContext = createContext<TokShareSettings>({});\n\n/** Sets the key (and optionally relay, locale, theme) once for every TokShare component inside it. */\nexport function TokShareProvider({ children, ...settings }: TokShareSettings & { children?: ReactNode }) {\n  const parent = useContext(TokShareContext);\n  const { pickKey, relay, locale, theme } = settings;\n  const value = useMemo(() => ({ ...parent, ...defined({ pickKey, relay, locale, theme }) }), [parent, pickKey, relay, locale, theme]);\n  return <TokShareContext.Provider value={value}>{children}</TokShareContext.Provider>;\n}\n\n/** Options shared by the field, the button and the hook. Sizes take bytes or \"5MB\", \"500KB\". */\nexport interface TokSharePickOptions extends Omit<PickOptions, \"key\" | \"ui\" | \"maxFileBytes\" | \"signal\"> {\n  /** Overrides the provider's key. */\n  pickKey?: string;\n  maxFileBytes?: number | string;\n  /** Phone shrinks photos so the longest side is at most this many pixels. Short for resizeImages. */\n  resize?: number;\n}\n\nfunction defined<T extends object>(value: T): Partial<T> {\n  return Object.fromEntries(Object.entries(value).filter(([, entry]) => entry !== undefined)) as Partial<T>;\n}\n\n/** Provider settings + component props → core options. Throws early if no key was given anywhere. */\nfunction toCoreOptions(settings: TokShareSettings, props: TokSharePickOptions, component: string): PickOptions {\n  const { pickKey, maxFileBytes, resize, ...rest } = props;\n  const key = pickKey ?? settings.pickKey;\n  if (!key) throw new Error(`${component}: pass pickKey, or wrap your app in <TokShareProvider pickKey=\"pk_…\">.`);\n  const bytes = parseSize(maxFileBytes);\n  return {\n    ...defined({ relay: settings.relay, locale: settings.locale, theme: settings.theme }),\n    ...defined(rest),\n    key,\n    ...(bytes ? { maxFileBytes: bytes } : {}),\n    ...(resize && resize > 0 && rest.resizeImages === undefined ? { resizeImages: { maxDimension: resize } } : {}),\n  };\n}\n\n// ---- Hook ---------------------------------------------------------------------------------------\n\n/**\n * `const { pick } = useTokSharePick({ accept: \"image/*\" })`, then `const files = await pick()` in a click\n * handler. Options given to pick() override the hook's, which override the provider's.\n */\nexport function useTokSharePick(defaults: TokSharePickOptions = {}) {\n  const settings = useContext(TokShareContext);\n  const latest = useRef({ settings, defaults });\n  latest.current = { settings, defaults };\n  return useMemo(() => ({\n    /** Opens the phone window; resolves with the files, or [] if the person cancels. */\n    pick: (options: TokSharePickOptions = {}): Promise<File[]> =>\n      pick(toCoreOptions(latest.current.settings, { ...latest.current.defaults, ...options }, \"useTokSharePick\")),\n    /** The same with live events (phone, progress, file) and your own UI if you pass ui: false. */\n    open: (options: TokSharePickOptions & { ui?: boolean } = {}): PickController => {\n      const { ui, ...rest } = options;\n      return open({ ...toCoreOptions(latest.current.settings, { ...latest.current.defaults, ...rest }, \"useTokSharePick\"), ...(ui === undefined ? {} : { ui }) });\n    },\n  }), []);\n}\n\n// ---- Upload field -------------------------------------------------------------------------------\n\nexport interface TokSharePickProps extends TokSharePickOptions, Pick<FieldOptions, \"name\" | \"phone\" | \"phoneOnMobile\" | \"label\"> {\n  /** Every time the list changes: files from this computer and from the phone, in order. */\n  onChange?: (files: File[]) => void;\n  className?: string;\n  style?: CSSProperties;\n  id?: string;\n}\n\nexport interface TokSharePickHandle {\n  /** The files in the field right now. */\n  readonly files: readonly File[];\n  /** The hidden <input type=\"file\" name> the files are kept in, for forms. */\n  readonly input: HTMLInputElement | null;\n  remove(file: File): void;\n  clear(): void;\n}\n\n/**\n * The complete upload field: drop zone, \"Browse files\" and \"Use your phone\". With `name`, a normal\n * form submit includes the files. Changing an option rebuilds the field (and empties it).\n */\nexport const TokSharePick = forwardRef<TokSharePickHandle, TokSharePickProps>(function TokSharePick(props, ref) {\n  const { onChange, className, style, id, ...options } = props;\n  const settings = useContext(TokShareContext);\n  // name, phone, phoneOnMobile and label ride along with the pick options.\n  const core = toCoreOptions(settings, options, \"<TokSharePick>\") as FieldOptions;\n  // Inline objects (strings={{…}}) are new on every render: rebuild only when the values change.\n  const signature = JSON.stringify(core);\n  const container = useRef<HTMLDivElement>(null);\n  const controller = useRef<FieldController | null>(null);\n  const onChangeRef = useRef(onChange);\n  onChangeRef.current = onChange;\n\n  useEffect(() => {\n    const field = mountField(container.current!, JSON.parse(signature) as FieldOptions);\n    controller.current = field;\n    const off = field.on(\"change\", (files) => onChangeRef.current?.(files));\n    return () => {\n      off();\n      field.destroy();\n      if (controller.current === field) controller.current = null;\n    };\n  }, [signature]);\n\n  useImperativeHandle(ref, () => ({\n    get files() { return controller.current?.files ?? []; },\n    get input() { return controller.current?.input ?? null; },\n    remove: (file: File) => controller.current?.remove(file),\n    clear: () => controller.current?.clear(),\n  }), []);\n\n  return <div ref={container} className={className} style={style} id={id} />;\n});\n\n// ---- Button -------------------------------------------------------------------------------------\n\nexport interface TokSharePickButtonProps\n  extends TokSharePickOptions, Omit<ButtonHTMLAttributes<HTMLButtonElement>, keyof TokSharePickOptions | \"onError\"> {\n  /** The files the person sent (not called if they cancel). */\n  onFiles?: (files: File[]) => void;\n  onError?: (error: unknown) => void;\n}\n\nconst PICK_OPTION_NAMES = [\n  \"pickKey\", \"maxFileBytes\", \"resize\", \"accept\", \"multiple\", \"maxFiles\", \"resizeImages\", \"confirmPhone\",\n  \"siteName\", \"relay\", \"locale\", \"theme\", \"strings\", \"direct\", \"announce\",\n] as const satisfies readonly (keyof TokSharePickOptions)[];\n\n/** A button that opens the phone window and hands you the files. Takes every <button> prop too. */\nexport const TokSharePickButton = forwardRef<HTMLButtonElement, TokSharePickButtonProps>(function TokSharePickButton(props, ref) {\n  const { onFiles, onError, onClick, children, disabled, type, ...rest } = props;\n  const options: Record<string, unknown> = {};\n  const buttonProps: Record<string, unknown> = {};\n  for (const [name, value] of Object.entries(rest)) {\n    ((PICK_OPTION_NAMES as readonly string[]).includes(name) ? options : buttonProps)[name] = value;\n  }\n  const { pick: pickFiles } = useTokSharePick(options as TokSharePickOptions);\n  const [busy, setBusy] = useState(false);\n  const mounted = useRef(true);\n  useEffect(() => { mounted.current = true; return () => { mounted.current = false; }; }, []);\n\n  const handleClick = useCallback(async (event: MouseEvent<HTMLButtonElement>) => {\n    onClick?.(event);\n    if (event.defaultPrevented) return;\n    setBusy(true);\n    try {\n      const files = await pickFiles();\n      if (files.length) onFiles?.(files);\n    } catch (error) {\n      if (onError) onError(error);\n      else console.error(error);\n    } finally {\n      if (mounted.current) setBusy(false);\n    }\n  }, [onClick, onFiles, onError, pickFiles]);\n\n  return (\n    <button ref={ref} type={type ?? \"button\"} disabled={disabled || busy} aria-busy={busy || undefined} onClick={handleClick} {...buttonProps}>\n      {children ?? \"From my phone\"}\n    </button>\n  );\n});\n"],"mappings":"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","names":["TokSharePick","TokSharePickButton"]}

package/package.json

@@ -1,6 +1,73 @@
 {
   "name": "@tokshare/pick",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Let visitors send files from their phone to your website: a button, a QR code, and File objects in your page.",
+  "keywords": [
+    "file upload",
+    "phone",
+    "qr code",
+    "mobile upload",
+    "file picker",
+    "camera upload",
+    "react"
+  ],
+  "author": "Peter Torki (https://petertorki.tech)",
+  "license": "MIT",
+  "homepage": "https://tokshare.vercel.app",
+  "type": "module",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./react": {
+      "types": "./dist/react.d.ts",
+      "import": "./dist/react.js",
+      "require": "./dist/react.cjs"
+    },
+    "./picker.js": "./dist/picker.global.js"
+  },
+  "unpkg": "./dist/picker.global.js",
+  "jsdelivr": "./dist/picker.global.js",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "sideEffects": [
+    "./dist/picker.global.js"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "test": "vitest run",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "tsup && vitest run"
+  },
+  "peerDependencies": {
+    "react": ">=17"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "@tokshare/pick-protocol": "workspace:*",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "happy-dom": "^18.0.1",
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "tsup": "^8.5.0",
+    "typescript": "^5.8.3",
+    "uqr": "^0.1.3",
+    "vitest": "^3.2.4"
+  }
+}