@withwiz/gallery 0.1.0

package/README.md

@@ -0,0 +1,484 @@
+# @withwiz/gallery
+
+**English** | [한국어](./README.ko.md)
+
+Host-independent gallery module for Next.js 16 + Prisma 7. Self-contained admin UI, headless lightbox, drop-in API route factories.
+
+## Status
+
+**v0.1.0** — Sprints 1–6 complete (`@withwiz/gallery` scaffold + validators + services + server layer + hooks/primitive UI + admin composite UI + Prisma partial + ballet preset + README). Sprint 7 (ballet migration) not yet executed.
+
+## Features
+
+- **Headless** — drop into any Next.js host via `setGalleryConfig` (Prisma client / API wrapper / storage / revalidate / i18n / limits).
+- **Admin UI** — 5 composite components (`GalleryAdminManager`, `GalleryEditForm`, `GalleryHomePreview`, `GalleryManagerLayout`, `CategoryAdminManager`) + 2 primitives (`ImageDropZone`, `ToggleSwitch`). Self-contained 3-pane layout.
+- **API routes** — `createGalleryRoutes(config)` returns Next.js Route Handlers for 6 endpoint groups (collection / item / publish toggle / bulk / category collection / category item).
+- **RSC loaders** — `getGalleryItems`, `getFeaturedGalleries`, `getRecentGalleries`, `getGalleryCount` for server components / dashboards.
+- **Public preset** — `PublicGalleryMosaic` (presets/ballet) — 1–7 tile adaptive mosaic + lightbox.
+- **Headless lightbox hook** — `useGalleryLightbox` with ESC / Arrow key bindings + wrap-around.
+- **Image upload primitive** — `useImageDropZone` + `<ImageDropZone>` (host-side validate + accept/maxSize).
+- **Storage-agnostic** — R2 / S3 / local filesystem — host injects via `config.storage`.
+- **Host-model-name-agnostic** — the Prisma `Gallery` model makes no assumption about the host's User/Admin/Account model name. Only an `authorId: String` column.
+- **Typed error hierarchy** — `GalleryNotFoundError`, `CategoryNotFoundError`, `CategoryInUseError`, `PermissionDeniedError` for the host to catch and handle.
+
+## Install
+
+Currently consumed via `file:` reference inside the monorepo (not yet published to npm):
+
+```bash
+# host root
+npm install file:../node-packages/withwiz-gallery
+```
+
+After publishing:
+
+```bash
+npm install @withwiz/gallery
+```
+
+### Peer dependencies
+
+| Package | Range |
+|---|---|
+| `next` | `>=16` |
+| `react` / `react-dom` | `>=19` |
+| `@prisma/client` | `>=7` |
+| `zod` | `>=4` |
+| `clsx` | `>=2` |
+| `tailwind-merge` | `>=3` |
+| `sonner` | `>=2` (optional) |
+
+## Quick start
+
+### 1. Merge the Prisma schema
+
+Copy or symlink this package's partial schema into the host's `prisma/` directory.
+
+```jsonc
+// host package.json
+{
+  "prisma": { "schema": "./prisma" }
+}
+```
+
+```bash
+# in the host
+cp node_modules/@withwiz/gallery/prisma/gallery.schema.prisma prisma/
+npx prisma generate
+npx prisma migrate dev --create-only
+```
+
+The partial defines two models (`GalleryCategory`, `Gallery`) plus indexes and `@@map`. Because `authorId` is a plain `String` column (no `@relation`), the host's User-model name is irrelevant and the multi-file schema validates cleanly.
+
+Migrating from a ballet-style enum-based schema? See [Migration from ballet enum-based schema](#migration-from-ballet-enum-based-schema) below.
+
+### 2. `setGalleryConfig` (host bootstrap)
+
+**Call this at module top-level** — client components invoke `getGalleryConfig()` on mount.
+
+```ts
+// host: lib/gallery-config.ts
+import { setGalleryConfig } from "@withwiz/gallery/server";
+import type { GalleryConfig } from "@withwiz/gallery/server";
+import { prisma } from "./prisma";
+import { withAdminApi } from "@/lib/api-middleware"; // host's auth wrapper
+import { isR2Enabled, collectR2Keys, deleteR2Keys } from "@/lib/r2";
+import { revalidatePath } from "next/cache";
+
+export const galleryConfig: GalleryConfig = {
+  prisma,
+  apiWrapper: withAdminApi,
+  authorIdFromContext: (ctx) => ctx.user!.id,
+  limits: {
+    maxFeatured: 7,
+    mosaicCount: 7,
+    batchMax: 20,
+    captionMaxLength: 200,
+  },
+  revalidate: revalidatePath,
+  revalidatePaths: ["/", "/home/v1"],
+  storage: {
+    isEnabled: isR2Enabled,
+    collectKeys: collectR2Keys,
+    deleteKeys: deleteR2Keys,
+  },
+  i18n: {
+    "admin.title": "Gallery",
+    "admin.newButton": "New image",
+    "form.caption": "Caption",
+    "form.save": "Save",
+    "form.cancel": "Cancel",
+    // see @withwiz/gallery/types → GalleryI18nKey for the full key list
+  },
+};
+
+setGalleryConfig(galleryConfig);
+```
+
+### 3. Mount route handlers
+
+Thin re-export per endpoint.
+
+```ts
+// host: app/api/admin/galleries/route.ts
+import { createGalleryRoutes } from "@withwiz/gallery/server";
+import { galleryConfig } from "@/lib/gallery-config";
+
+const { collection } = createGalleryRoutes(galleryConfig);
+export const { GET, POST, DELETE } = collection;
+```
+
+```ts
+// host: app/api/admin/galleries/[id]/route.ts
+import { createGalleryRoutes } from "@withwiz/gallery/server";
+import { galleryConfig } from "@/lib/gallery-config";
+
+const { item } = createGalleryRoutes(galleryConfig);
+export const { GET, PUT, DELETE } = item;
+```
+
+```ts
+// host: app/api/admin/galleries/[id]/publish/route.ts
+import { createGalleryRoutes } from "@withwiz/gallery/server";
+import { galleryConfig } from "@/lib/gallery-config";
+
+const { publishToggle } = createGalleryRoutes(galleryConfig);
+export const { PATCH } = publishToggle;
+```
+
+```ts
+// host: app/api/admin/galleries/bulk/route.ts
+import { createGalleryRoutes } from "@withwiz/gallery/server";
+import { galleryConfig } from "@/lib/gallery-config";
+
+const { bulk } = createGalleryRoutes(galleryConfig);
+export const { POST, PATCH } = bulk;
+```
+
+```ts
+// host: app/api/admin/gallery-categories/route.ts
+import { createGalleryRoutes } from "@withwiz/gallery/server";
+import { galleryConfig } from "@/lib/gallery-config";
+
+const { categoryCollection } = createGalleryRoutes(galleryConfig);
+export const { GET, POST } = categoryCollection;
+```
+
+```ts
+// host: app/api/admin/gallery-categories/[id]/route.ts
+import { createGalleryRoutes } from "@withwiz/gallery/server";
+import { galleryConfig } from "@/lib/gallery-config";
+
+const { categoryItem } = createGalleryRoutes(galleryConfig);
+export const { GET, PUT, DELETE } = categoryItem;
+```
+
+### 4. Mount the admin UI
+
+```tsx
+// host: app/admin/galleries/page.tsx
+import { GalleryAdminManager } from "@withwiz/gallery/components";
+import "@withwiz/gallery/components/gallery.css";
+import "@/lib/gallery-config"; // setGalleryConfig as a module side effect
+
+export default function GalleryAdminPage() {
+  return <GalleryAdminManager />;
+}
+```
+
+```tsx
+// host: app/admin/galleries/new/page.tsx
+import { GalleryAdminManager } from "@withwiz/gallery/components";
+import "@/lib/gallery-config";
+
+export default function GalleryNewPage() {
+  return <GalleryAdminManager initialMode="new" />;
+}
+```
+
+```tsx
+// host: app/admin/galleries/[id]/page.tsx
+import { GalleryAdminManager } from "@withwiz/gallery/components";
+import "@/lib/gallery-config";
+
+export default async function GalleryEditPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+  return <GalleryAdminManager initialSelectedId={id} />;
+}
+```
+
+```tsx
+// host: app/admin/gallery-categories/page.tsx
+import { CategoryAdminManager } from "@withwiz/gallery/components";
+import "@/lib/gallery-config";
+
+export default function CategoryAdminPage() {
+  return <CategoryAdminManager />;
+}
+```
+
+### 5. Public gallery (RSC + client)
+
+```tsx
+// host: app/page.tsx (RSC)
+import { PublicGalleryMosaic } from "@withwiz/gallery/presets/ballet";
+import { getFeaturedGalleries } from "@withwiz/gallery/server";
+import { galleryConfig } from "@/lib/gallery-config";
+import "@withwiz/gallery/components/gallery.css";
+
+export default async function HomePage() {
+  const featured = await getFeaturedGalleries(galleryConfig, 7);
+  const images = featured.map((g) => ({
+    src: g.imageUrl,
+    alt: g.caption ?? "Gallery",
+  }));
+  return (
+    <PublicGalleryMosaic
+      images={images}
+      count={7}
+      i18n={{ sectionLabel: "Gallery", moments: "Moments from the stage" }}
+    />
+  );
+}
+```
+
+## API reference
+
+### `@withwiz/gallery` (main entry)
+
+```ts
+import {
+  setGalleryConfig,
+  getGalleryConfig,
+  cn,
+  getVariantUrl,
+  GalleryError,
+  GalleryNotFoundError,
+  CategoryNotFoundError,
+  CategoryInUseError,
+  PermissionDeniedError,
+} from "@withwiz/gallery";
+```
+
+### `@withwiz/gallery/server`
+
+| Export | Signature |
+|---|---|
+| `setGalleryConfig(config)` | DI setter — call once at module top-level |
+| `getGalleryConfig()` | Returns the registered config (throws if unset) |
+| `createGalleryService(config)` | CRUD object (`list` / `get` / `create` / `update` / `remove` / `bulk*`) |
+| `createCategoryService(config)` | Category CRUD (`list` / `getBySlug` / `create` / `update` / `remove` / `reorder`) |
+| `createGalleryRoutes(config)` | 6 Next.js Route Handler groups (`collection` / `item` / `publishToggle` / `bulk` / `categoryCollection` / `categoryItem`) |
+| `getGalleryItems(config, opts)` | RSC pagination loader |
+| `getFeaturedGalleries(config, limit?)` | RSC featured list |
+| `getRecentGalleries(config, limit)` | RSC recent items (dashboard) |
+| `getGalleryCount(config, opts?)` | RSC count (dashboard) |
+| `buildPaginatedResult(items, page, limit, total)` | helper |
+
+Typed errors (also re-exported from the server entry):
+
+- `GalleryError` (base)
+- `GalleryNotFoundError`
+- `CategoryNotFoundError`
+- `CategoryInUseError`
+- `PermissionDeniedError`
+
+### `@withwiz/gallery/components`
+
+| Export | Description |
+|---|---|
+| `GalleryAdminManager` | 3-pane admin mount point (`initialMode?` / `initialSelectedId?`) |
+| `GalleryManagerLayout` | 3-pane primitive (left = list / center = form / right = preview) |
+| `GalleryEditForm` | Single/multi form (`value` / `multipleMode` / `onSubmit` / `onSubmitMany`) |
+| `GalleryHomePreview` | 7-tile mosaic + drag reorder + featured toggle |
+| `CategoryAdminManager` | Category CRUD UI |
+| `ImageDropZone` | Image dropzone (`accept` / `maxSize` / `multiple` / `disabled` / `validate`) |
+| `ToggleSwitch` | size sm/md/lg, ARIA switch role |
+
+CSS (host imports explicitly):
+
+```ts
+import "@withwiz/gallery/components/gallery.css";
+```
+
+### `@withwiz/gallery/hooks`
+
+| Export | Signature |
+|---|---|
+| `useGalleryLightbox(images)` | `{ isOpen, currentIndex, current, open, close, next, prev }` — auto-bound ESC / Arrow, wrap-around |
+| `useImageDropZone(opts)` | Headless dropzone — `inputProps / containerProps / files / rejectedReasons / clear` |
+| `useScrollReveal(opts?)` | IntersectionObserver-based fade-in — `{ ref, isVisible }` |
+
+### `@withwiz/gallery/validators`
+
+```ts
+import { createGallerySchemas } from "@withwiz/gallery/validators";
+
+const schemas = createGallerySchemas({
+  batchMax: 20,
+  captionMaxLength: 200,
+});
+// schemas.CreateGallerySchema / UpdateGallerySchema / BatchCreateGallerySchema
+// / BulkUpdateSchema / CreateCategorySchema / UpdateCategorySchema / ReorderCategorySchema
+```
+
+### `@withwiz/gallery/types`
+
+```ts
+import type {
+  GalleryConfig,
+  GalleryI18nKey,
+  GallerySlotName,
+  GalleryListItem,
+  GalleryDetail,
+  GalleryCategoryItem,
+  CreateGalleryInput,
+  UpdateGalleryInput,
+  CreateCategoryInput,
+  UpdateCategoryInput,
+  PaginatedResult,
+  PaginationMeta,
+  SortOrder,
+  PrismaLike,
+  ApiContext,
+  RouteHandler,
+  ApiWrapper,
+} from "@withwiz/gallery/types";
+```
+
+### `@withwiz/gallery/presets/ballet`
+
+```ts
+import { PublicGalleryMosaic } from "@withwiz/gallery/presets/ballet";
+import type { PublicGalleryMosaicProps } from "@withwiz/gallery/presets/ballet";
+```
+
+Signature:
+
+```ts
+function PublicGalleryMosaic(props: {
+  images: { src: string; alt?: string }[];
+  count?: number;          // default 7
+  i18n?: {
+    sectionLabel?: string;
+    moments?: string;
+    expandAria?: string;
+    lbClose?: string;
+    lbPrev?: string;
+    lbNext?: string;
+  };
+  className?: string;
+  scrollReveal?: boolean;  // default true
+  hideHeader?: boolean;    // default false
+}): JSX.Element | null;
+```
+
+## Host-independence guarantees
+
+- **Zero `@withwiz/pms` imports** — this package does not depend on any domain package.
+- **Zero direct `process.env` reads** — environment variables are read by the host and bound into `config.storage`, etc.
+- **No assumption about the host's User model name** — the Prisma `Gallery` model has only an `authorId: String` column and no `@relation`.
+- **All infrastructure is injected via `GalleryConfig`** — Prisma client / API wrapper / storage / revalidate / i18n / limits.
+- **Storage / auth / revalidate are the host's responsibility** — this package only deals with keys/paths; actual R2/S3/local calls are delegated to the host via `config.storage.deleteKeys`, etc.
+- **`presets/ballet` does not import `next/image`, `next/navigation`, or `useI18n`** — images use plain `<img>`, labels come from props.
+
+## CSS customization
+
+Override the CSS variables from the host's root CSS.
+
+```css
+/* host: app/globals.css */
+:root {
+  --gallery-accent: 212 175 55;   /* RGB triplet (NOT hex) */
+  --gallery-bg: 10 10 10;
+  --gallery-fg: 254 254 254;
+  --gallery-border: 30 30 30;
+}
+```
+
+These four variables are defined as fallbacks inside `:where(.gallery-toggle, .gallery-dropzone, .gallery-manager, .gallery-edit-form, .gallery-home-preview, .gallery-category-admin, .gallery-public-mosaic, .gallery-lightbox, ...)`, so the package works out of the box (dark tone + gold accent) without any host override.
+
+The admin components also support per-slot customization via `config.ui.classNames[slot]` / `config.ui.slots[slot]`.
+
+## Migration from ballet enum-based schema
+
+ballet's existing schema:
+
+```prisma
+enum GalleryCategory { PERFORMANCE | REHEARSAL | ACTIVITY | ARTIST }
+model Gallery {
+  category GalleryCategory
+  // ...
+}
+```
+
+This package's new schema replaces the enum with a `gallery_categories` table + a `Gallery.categoryId` FK. Migration steps:
+
+1. Merge this package's `gallery.schema.prisma` into the host's `prisma/` (copy or symlink).
+2. Run `npx prisma migrate dev --create-only` to auto-generate the migration SQL.
+3. Manually remove `DROP COLUMN category` / `DROP TYPE "GalleryCategory"` from the generated SQL (separate them into a follow-up migration).
+4. Insert the contents of `prisma/migrations/2026-05-24-enum-to-table.sql` (shipped with this package) at that location — seeds the 4 categories, backfills `galleries.category_id`, and includes a PL/pgSQL verification block.
+5. `npx prisma migrate dev` to apply.
+6. Once verification passes, run the second migration (separate file) to `DROP` the enum column and type.
+
+Reference the shipped `prisma/migrations/2026-05-24-enum-to-table.sql` as-is.
+
+The ballet code (`src/components/sections/Gallery.tsx` — `gallery-mosaic` / `lightbox-*` classes) and this package (`gallery-public-mosaic` / `gallery-lightbox__*` classes) use different prefixes and are isolated. During ballet migration, remove those classes from the existing `main.css` and import only this package's `gallery.css`.
+
+## Architecture
+
+```
+@withwiz/toolkit            (lowest)
+   ↑
+@withwiz/pms                (performance-management domain CMS)
+   ↑                        ↑
+   │                        │ consumed as a host
+host app (ballet, yeroom)   │
+   ↓                        │
+   └─→ @withwiz/gallery ┘  (this package — depends on no host)
+```
+
+`@withwiz/gallery` depends on no host project (ballet, yeroom, etc.), no domain package (`@withwiz/pms`, etc.), and no host domain model (`User`, `Admin`, `Account`, etc.). Whatever the host uses (Next 16 / Prisma 7 assumed), a single `setGalleryConfig` call integrates it.
+
+## Repository layout
+
+```
+node-packages/withwiz-gallery/
+├── package.json
+├── tsup.config.ts
+├── README.md
+├── prisma/
+│   ├── gallery.schema.prisma            # GalleryCategory + Gallery partial models
+│   └── migrations/
+│       └── 2026-05-24-enum-to-table.sql # ballet enum → table backfill
+├── docs/superpowers/{specs,plans}/      # design docs + sprint contracts/reports
+└── src/
+    ├── index.ts              # main entry — config, types, errors, utils
+    ├── config.ts
+    ├── errors.ts
+    ├── types/                # GalleryConfig / domain / pagination / api-context / i18n
+    ├── validators/           # createGallerySchemas
+    ├── services/             # createGalleryService / createCategoryService / helpers
+    ├── server/               # createGalleryRoutes + loaders + server re-exports
+    ├── components/           # admin UI + ImageDropZone + ToggleSwitch + gallery.css
+    ├── hooks/                # useGalleryLightbox / useImageDropZone / useScrollReveal
+    ├── utils/                # cn / image-variants / api-helpers
+    └── presets/
+        └── ballet.tsx        # PublicGalleryMosaic
+```
+
+## Scripts
+
+```bash
+npm run build       # tsup multi-entry CJS/ESM/DTS
+npm test            # vitest run (221 tests, 23 files)
+npm run test:watch  # vitest watch
+```
+
+## License
+
+MIT

package/dist/chunk-B3MQL6ZR.mjs

@@ -0,0 +1,79 @@
+// src/hooks/useScrollReveal.ts
+import { useEffect, useRef, useState } from "react";
+function useScrollReveal(opts) {
+  const threshold = opts?.threshold ?? 0.1;
+  const once = opts?.once ?? true;
+  const ref = useRef(null);
+  const [isVisible, setIsVisible] = useState(false);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (typeof globalThis.IntersectionObserver === "undefined") {
+      return;
+    }
+    const el = ref.current;
+    if (!el) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            setIsVisible(true);
+            if (once) observer.unobserve(entry.target);
+          } else if (!once) {
+            setIsVisible(false);
+          }
+        }
+      },
+      { threshold }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [threshold, once]);
+  return { ref, isVisible };
+}
+
+// src/hooks/useGalleryLightbox.ts
+import { useCallback, useEffect as useEffect2, useState as useState2 } from "react";
+function useGalleryLightbox(images) {
+  const [currentIndex, setCurrentIndex] = useState2(-1);
+  const isOpen = currentIndex >= 0 && currentIndex < images.length;
+  const current = isOpen ? images[currentIndex] ?? null : null;
+  const open = useCallback(
+    (index) => {
+      if (images.length === 0) return;
+      if (index < 0 || index >= images.length) return;
+      setCurrentIndex(index);
+    },
+    [images.length]
+  );
+  const close = useCallback(() => {
+    setCurrentIndex(-1);
+  }, []);
+  const next = useCallback(() => {
+    if (images.length === 0) return;
+    setCurrentIndex((prev2) => prev2 < 0 ? prev2 : (prev2 + 1) % images.length);
+  }, [images.length]);
+  const prev = useCallback(() => {
+    if (images.length === 0) return;
+    setCurrentIndex((p) => p < 0 ? p : (p - 1 + images.length) % images.length);
+  }, [images.length]);
+  useEffect2(() => {
+    if (!isOpen) return;
+    if (typeof window === "undefined") return;
+    const handler = (e) => {
+      if (e.key === "Escape") close();
+      else if (e.key === "ArrowLeft") prev();
+      else if (e.key === "ArrowRight") next();
+    };
+    window.addEventListener("keydown", handler);
+    return () => {
+      window.removeEventListener("keydown", handler);
+    };
+  }, [isOpen, close, next, prev]);
+  return { isOpen, currentIndex: isOpen ? currentIndex : -1, current, open, close, next, prev };
+}
+
+export {
+  useScrollReveal,
+  useGalleryLightbox
+};
+//# sourceMappingURL=chunk-B3MQL6ZR.mjs.map

package/dist/chunk-B3MQL6ZR.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useScrollReveal.ts","../src/hooks/useGalleryLightbox.ts"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\n\n/** IntersectionObserver 기반 스크롤 reveal hook.\n *\n *  - SSR safe: `typeof window === \"undefined\"` 이면 effect 가 nothing.\n *  - jsdom 등 `IntersectionObserver` 미정의 환경에서도 effect 가 nothing (가드).\n *  - `once: true` (default) — 한번 visible 후 unobserve, 이후 다시 false 로 돌아가지 않음.\n *  - `once: false` — visible 진입/이탈에 따라 toggle.\n *\n *  반환되는 ref 는 React 19 의 `RefObject<HTMLElement | null>` 시그니처 — host 가 어떤\n *  구체 element 타입에든 마운트 가능하도록 광폭 타입을 둔다.\n */\nexport function useScrollReveal(opts?: { threshold?: number; once?: boolean }): {\n  ref: React.RefObject<HTMLElement | null>;\n  isVisible: boolean;\n} {\n  const threshold = opts?.threshold ?? 0.1;\n  const once = opts?.once ?? true;\n  const ref = useRef<HTMLElement | null>(null);\n  const [isVisible, setIsVisible] = useState(false);\n\n  useEffect(() => {\n    if (typeof window === \"undefined\") return;\n    if (typeof (globalThis as { IntersectionObserver?: unknown }).IntersectionObserver === \"undefined\") {\n      return;\n    }\n    const el = ref.current;\n    if (!el) return;\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        for (const entry of entries) {\n          if (entry.isIntersecting) {\n            setIsVisible(true);\n            if (once) observer.unobserve(entry.target);\n          } else if (!once) {\n            setIsVisible(false);\n          }\n        }\n      },\n      { threshold },\n    );\n\n    observer.observe(el);\n    return () => observer.disconnect();\n  }, [threshold, once]);\n\n  return { ref, isVisible };\n}\n","import { useCallback, useEffect, useState } from \"react\";\n\nexport interface LightboxImage {\n  src: string;\n  alt?: string;\n}\n\nexport interface UseGalleryLightboxReturn {\n  isOpen: boolean;\n  currentIndex: number;\n  current: LightboxImage | null;\n  open: (index: number) => void;\n  close: () => void;\n  next: () => void;\n  prev: () => void;\n}\n\n/** headless 갤러리 라이트박스. open 상태에서 ESC / ←/→ 키바인딩 자동 등록.\n *\n *  - 이미지 0개일 때 `open` 호출은 no-op.\n *  - `next` / `prev` 는 wrap-around (마지막 다음 = 처음).\n *  - SSR safe: window keydown listener 는 isOpen && typeof window !== \"undefined\" 일 때만 등록.\n */\nexport function useGalleryLightbox(images: LightboxImage[]): UseGalleryLightboxReturn {\n  const [currentIndex, setCurrentIndex] = useState(-1);\n  const isOpen = currentIndex >= 0 && currentIndex < images.length;\n  const current = isOpen ? images[currentIndex] ?? null : null;\n\n  const open = useCallback(\n    (index: number) => {\n      if (images.length === 0) return;\n      if (index < 0 || index >= images.length) return;\n      setCurrentIndex(index);\n    },\n    [images.length],\n  );\n\n  const close = useCallback(() => {\n    setCurrentIndex(-1);\n  }, []);\n\n  const next = useCallback(() => {\n    if (images.length === 0) return;\n    setCurrentIndex((prev) => (prev < 0 ? prev : (prev + 1) % images.length));\n  }, [images.length]);\n\n  const prev = useCallback(() => {\n    if (images.length === 0) return;\n    setCurrentIndex((p) => (p < 0 ? p : (p - 1 + images.length) % images.length));\n  }, [images.length]);\n\n  useEffect(() => {\n    if (!isOpen) return;\n    if (typeof window === \"undefined\") return;\n    const handler = (e: KeyboardEvent) => {\n      if (e.key === \"Escape\") close();\n      else if (e.key === \"ArrowLeft\") prev();\n      else if (e.key === \"ArrowRight\") next();\n    };\n    window.addEventListener(\"keydown\", handler);\n    return () => {\n      window.removeEventListener(\"keydown\", handler);\n    };\n  }, [isOpen, close, next, prev]);\n\n  return { isOpen, currentIndex: isOpen ? currentIndex : -1, current, open, close, next, prev };\n}\n"],"mappings":";AAAA,SAAS,WAAW,QAAQ,gBAAgB;AAYrC,SAAS,gBAAgB,MAG9B;AACA,QAAM,YAAY,MAAM,aAAa;AACrC,QAAM,OAAO,MAAM,QAAQ;AAC3B,QAAM,MAAM,OAA2B,IAAI;AAC3C,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,YAAU,MAAM;AACd,QAAI,OAAO,WAAW,YAAa;AACnC,QAAI,OAAQ,WAAkD,yBAAyB,aAAa;AAClG;AAAA,IACF;AACA,UAAM,KAAK,IAAI;AACf,QAAI,CAAC,GAAI;AAET,UAAM,WAAW,IAAI;AAAA,MACnB,CAAC,YAAY;AACX,mBAAW,SAAS,SAAS;AAC3B,cAAI,MAAM,gBAAgB;AACxB,yBAAa,IAAI;AACjB,gBAAI,KAAM,UAAS,UAAU,MAAM,MAAM;AAAA,UAC3C,WAAW,CAAC,MAAM;AAChB,yBAAa,KAAK;AAAA,UACpB;AAAA,QACF;AAAA,MACF;AAAA,MACA,EAAE,UAAU;AAAA,IACd;AAEA,aAAS,QAAQ,EAAE;AACnB,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,WAAW,IAAI,CAAC;AAEpB,SAAO,EAAE,KAAK,UAAU;AAC1B;;;AChDA,SAAS,aAAa,aAAAA,YAAW,YAAAC,iBAAgB;AAuB1C,SAAS,mBAAmB,QAAmD;AACpF,QAAM,CAAC,cAAc,eAAe,IAAIA,UAAS,EAAE;AACnD,QAAM,SAAS,gBAAgB,KAAK,eAAe,OAAO;AAC1D,QAAM,UAAU,SAAS,OAAO,YAAY,KAAK,OAAO;AAExD,QAAM,OAAO;AAAA,IACX,CAAC,UAAkB;AACjB,UAAI,OAAO,WAAW,EAAG;AACzB,UAAI,QAAQ,KAAK,SAAS,OAAO,OAAQ;AACzC,sBAAgB,KAAK;AAAA,IACvB;AAAA,IACA,CAAC,OAAO,MAAM;AAAA,EAChB;AAEA,QAAM,QAAQ,YAAY,MAAM;AAC9B,oBAAgB,EAAE;AAAA,EACpB,GAAG,CAAC,CAAC;AAEL,QAAM,OAAO,YAAY,MAAM;AAC7B,QAAI,OAAO,WAAW,EAAG;AACzB,oBAAgB,CAACC,UAAUA,QAAO,IAAIA,SAAQA,QAAO,KAAK,OAAO,MAAO;AAAA,EAC1E,GAAG,CAAC,OAAO,MAAM,CAAC;AAElB,QAAM,OAAO,YAAY,MAAM;AAC7B,QAAI,OAAO,WAAW,EAAG;AACzB,oBAAgB,CAAC,MAAO,IAAI,IAAI,KAAK,IAAI,IAAI,OAAO,UAAU,OAAO,MAAO;AAAA,EAC9E,GAAG,CAAC,OAAO,MAAM,CAAC;AAElB,EAAAF,WAAU,MAAM;AACd,QAAI,CAAC,OAAQ;AACb,QAAI,OAAO,WAAW,YAAa;AACnC,UAAM,UAAU,CAAC,MAAqB;AACpC,UAAI,EAAE,QAAQ,SAAU,OAAM;AAAA,eACrB,EAAE,QAAQ,YAAa,MAAK;AAAA,eAC5B,EAAE,QAAQ,aAAc,MAAK;AAAA,IACxC;AACA,WAAO,iBAAiB,WAAW,OAAO;AAC1C,WAAO,MAAM;AACX,aAAO,oBAAoB,WAAW,OAAO;AAAA,IAC/C;AAAA,EACF,GAAG,CAAC,QAAQ,OAAO,MAAM,IAAI,CAAC;AAE9B,SAAO,EAAE,QAAQ,cAAc,SAAS,eAAe,IAAI,SAAS,MAAM,OAAO,MAAM,KAAK;AAC9F;","names":["useEffect","useState","prev"]}

package/dist/chunk-BC3TPJQY.mjs

@@ -0,0 +1,122 @@
+// src/hooks/useImageDropZone.ts
+import { useCallback, useRef, useState } from "react";
+var DEFAULT_ACCEPT = ["image/jpeg", "image/png", "image/webp"];
+var DEFAULT_MAX_SIZE = 10 * 1024 * 1024;
+function useImageDropZone(opts) {
+  const {
+    onFiles,
+    accept = DEFAULT_ACCEPT,
+    maxSize = DEFAULT_MAX_SIZE,
+    multiple = true,
+    validate,
+    disabled = false
+  } = opts;
+  const [isDragging, setIsDragging] = useState(false);
+  const [rejectedReasons, setRejectedReasons] = useState([]);
+  const dragCounter = useRef(0);
+  const processFiles = useCallback(
+    (incoming) => {
+      if (disabled) return;
+      const accepted = [];
+      const rejected = [];
+      const slice = multiple ? incoming : incoming.slice(0, 1);
+      for (const file of slice) {
+        if (accept.length > 0 && !accept.includes(file.type)) {
+          rejected.push(`${file.name}: \uC9C0\uC6D0\uD558\uC9C0 \uC54A\uB294 \uD615\uC2DD (${file.type || "unknown"})`);
+          continue;
+        }
+        if (file.size > maxSize) {
+          rejected.push(
+            `${file.name}: \uD30C\uC77C \uD06C\uAE30 \uCD08\uACFC (${(file.size / 1024 / 1024).toFixed(1)}MB > ${(maxSize / 1024 / 1024).toFixed(1)}MB)`
+          );
+          continue;
+        }
+        if (validate) {
+          const result = validate(file);
+          if (!result.ok) {
+            rejected.push(`${file.name}: ${result.reason}`);
+            continue;
+          }
+        }
+        accepted.push(file);
+      }
+      setRejectedReasons(rejected);
+      if (accepted.length > 0) {
+        void onFiles(accepted);
+      }
+    },
+    [accept, maxSize, multiple, validate, disabled, onFiles]
+  );
+  const onDragEnter = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (disabled) return;
+      dragCounter.current += 1;
+      const types = e.dataTransfer?.types;
+      if (!types || (typeof types.includes === "function" ? types.includes("Files") : Array.from(types).includes("Files"))) {
+        setIsDragging(true);
+      }
+    },
+    [disabled]
+  );
+  const onDragOver = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+    },
+    []
+  );
+  const onDragLeave = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      if (disabled) return;
+      dragCounter.current = Math.max(0, dragCounter.current - 1);
+      if (dragCounter.current === 0) {
+        setIsDragging(false);
+      }
+    },
+    [disabled]
+  );
+  const onDrop = useCallback(
+    (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      dragCounter.current = 0;
+      setIsDragging(false);
+      if (disabled) return;
+      const incoming = Array.from(e.dataTransfer?.files ?? []);
+      processFiles(incoming);
+    },
+    [disabled, processFiles]
+  );
+  const onChange = useCallback(
+    (e) => {
+      if (disabled) return;
+      const incoming = Array.from(e.target.files ?? []);
+      processFiles(incoming);
+      try {
+        e.target.value = "";
+      } catch {
+      }
+    },
+    [disabled, processFiles]
+  );
+  return {
+    isDragging,
+    dropProps: { onDragEnter, onDragOver, onDragLeave, onDrop },
+    inputProps: {
+      type: "file",
+      accept: accept.join(","),
+      multiple,
+      onChange
+    },
+    rejectedReasons
+  };
+}
+
+export {
+  useImageDropZone
+};
+//# sourceMappingURL=chunk-BC3TPJQY.mjs.map