first commit

2026-07-18 01:34:52 +05:30
commit d1308bf149
113 changed files with 20593 additions and 0 deletions
@@ -0,0 +1,83 @@
+# Environment variables — customizing the gallery
+
+The demo (`apps/web`) reads `NEXT_PUBLIC_APG_*` variables at build time and passes them
+to `<PhotoGallery>`. **Everything is optional** — anything you don't set falls back to the
+SDK's built-in defaults (the macOS‑style light / dark / semi‑dark themes).
+
+Put these in `apps/web/.env.local` (gitignored) and restart `pnpm dev`.
+
+> Because Next.js only inlines `NEXT_PUBLIC_*` variables that are referenced statically, the
+> demo reads each one explicitly in [`apps/web/src/lib/galleryConfig.ts`](../apps/web/src/lib/galleryConfig.ts).
+> If you add a new token, add it there too.
+
+---
+
+## Feature flags — show/hide any capability
+
+Each accepts `true` / `false` (or `1` / `0`). Unset = enabled (SDK default).
+
+| Variable | Controls |
+| --- | --- |
+| `NEXT_PUBLIC_APG_EDITOR` | Photo + video editor |
+| `NEXT_PUBLIC_APG_CAMERA` | Custom camera (capture / record) |
+| `NEXT_PUBLIC_APG_AI` | In-browser AI (objects / faces / OCR / semantic) |
+| `NEXT_PUBLIC_APG_MAP` | Map view |
+| `NEXT_PUBLIC_APG_IMPORT` | Upload / import |
+| `NEXT_PUBLIC_APG_EXPORT` | Download / export |
+| `NEXT_PUBLIC_APG_SHARING` | Share links + Shared Albums + Activity |
+
+```bash
+# e.g. ship a viewer-only gallery (no editing, no camera, no uploads)
+NEXT_PUBLIC_APG_EDITOR=false
+NEXT_PUBLIC_APG_CAMERA=false
+NEXT_PUBLIC_APG_IMPORT=false
+```
+
+## Theme & appearance
+
+| Variable | Type | Maps to |
+| --- | --- | --- |
+| `NEXT_PUBLIC_APG_THEME` | `system` \| `light` \| `dark` \| `semi-dark` | Initial theme |
+| `NEXT_PUBLIC_APG_ACCENT` | color | Accent (buttons, highlights, focus) |
+| `NEXT_PUBLIC_APG_RADIUS` | px number | Base corner radius for all rounded UI |
+| `NEXT_PUBLIC_APG_SIDEBAR_RADIUS` | px number | Sidebar panel corner radius |
+| `NEXT_PUBLIC_APG_BG_LIGHT` / `_DARK` | color **or gradient** | App / content background |
+| `NEXT_PUBLIC_APG_ELEVATED_LIGHT` / `_DARK` | color | Cards / raised surfaces |
+| `NEXT_PUBLIC_APG_SIDEBAR_BG_LIGHT` / `_DARK` | color (rgba for opacity) | Sidebar glass backdrop |
+| `NEXT_PUBLIC_APG_TEXT_LIGHT` / `_DARK` | color | Primary text |
+
+- **Gradients**: any `_BG_*` value may be a full CSS gradient, e.g.
+  `linear-gradient(160deg,#1a1a2e,#16213e)`.
+- **Opacity**: use `rgba(...)` (or `#rrggbbaa`) for translucency, e.g. a more/less see-through
+  sidebar: `NEXT_PUBLIC_APG_SIDEBAR_BG_DARK=rgba(20,20,22,0.55)`.
+- Light values apply in **light** + **semi‑dark** (content); dark values apply in **dark** mode
+  and to the **semi‑dark sidebar**.
+
+### Example — branded dark gallery with a gradient background
+
+```bash
+NEXT_PUBLIC_APG_THEME=dark
+NEXT_PUBLIC_APG_ACCENT=#ff375f
+NEXT_PUBLIC_APG_RADIUS=14
+NEXT_PUBLIC_APG_SIDEBAR_RADIUS=18
+NEXT_PUBLIC_APG_BG_DARK=linear-gradient(165deg,#141018,#241426)
+NEXT_PUBLIC_APG_SIDEBAR_BG_DARK=rgba(30,20,38,0.6)
+NEXT_PUBLIC_APG_ELEVATED_DARK=#2a2030
+```
+
+## Using the tokens directly (without env)
+
+If you embed the SDK yourself, pass the same values as props — no env needed:
+
+```tsx
+<PhotoGallery
+  theme="dark"
+  accentColor="#ff375f"
+  themeTokens={{
+    bgDark: 'linear-gradient(165deg,#141018,#241426)',
+    sidebarBgDark: 'rgba(30,20,38,0.6)',
+    sidebarRadius: 18,
+  }}
+  features={{ camera: false }}
+/>
+```