(\n currentSpace\n );\n\n // Handle Space Selection\n const handleSpaceSelect = (space: ProxySpace) => {\n setActiveSpace(space);\n // Example: Navigate to the selected space's dashboard\n router.push(`/dashboard/${space.proxyId}`);\n };\n\n return (\n \n \n\n {/* Helper to toggle view for demo purposes */}\n setIsExpanded(!isExpanded)}\n className=\"text-xs text-gray-400 mt-2 ml-2\"\n >\n {isExpanded ? \"Collapse\" : \"Expand\"}\n \n
\n );\n};\n\nexport default MySpaceSelector;\n```\n\n## 3. Key Concepts\n\n- **`api` Prop**: This prop injects the backend logic using your axios instance. This keeps `nitx-ui` unopinionated about your network layer.\n- **Imports**: All main components, types, and logic helpers are exported from the root `\"nitxui\"` package.\n\n---\n\n# Assets Module (v2.0.0+)\n\nThe full asset browser (folders, uploads via Uppy/TUS, rename/move/delete,\npreviews, links, drag-and-drop) previously copy-pasted across signage, reach,\nand studio now lives here. Consumers wire it up with an adapter + provider and\nrender `` from a thin page shell.\n\n## Requirements\n\n- `@tanstack/react-query` v5 peer with a `QueryClientProvider` mounted above\n the provider.\n- The Uppy peers (`@uppy/core`, `@uppy/react`, `@uppy/tus`, `@uppy/dropbox`,\n `@uppy/google-drive`) when the upload feature is enabled (pnpm installs\n them automatically as nitxui peers).\n\nEverything else ships inside the package: the Uppy Dashboard stylesheet is\nimported by the upload modal itself, and all card/preview artwork (folder,\nprocessing clock, document type icons, video play badge, link fallback) is\nbundled — override any of it via the provider's `images` prop if a product\nwants its own look.\n\n## 1. Mount the provider (space layout level)\n\nMount high enough that every consumer of the hooks (page, pickers, canvas\npanels, the global upload modal) sits below it. Minimal form — the provider\nbuilds the API from your axios instance and defaults the upload endpoints\nfrom `NEXT_PUBLIC_API_URL` / `NEXT_PUBLIC_COMPANION_URL`:\n\n```tsx\n\"use client\";\nimport { AssetsProvider } from \"nitxui\";\nimport axios from \"@/lib/axios\"; // must carry Authorization + X-Space-Uuid\n\n auth?.access_token }} // getter — tokens refresh\n>\n {children}\n\n```\n\nFull config when a product needs more:\n\n```tsx\n {...} }}\n spaceUuid={activeSpace?.space_uuid}\n features={{\n folders: true, // false = flat listing (studio mode)\n links: false, // signage's link asset type + editor flows\n canvas: false, // canvas asset type support\n dragDrop: false, // drag assets onto folder cards\n upload: true,\n }}\n upload={{\n getAccessToken: () => auth?.access_token,\n // endpoint / companionUrl default from env; maxFileSize /\n // allowedFileTypes override the default upload policy\n }}\n navigation={{\n // required only when features.links is on — the package never builds\n // route paths itself, so [spaceId] vs [space_id] params don't matter\n toLinkNew: () => router.push(`${base}/links/new`),\n toLinkEdit: (uuid) => router.push(`${base}/links/${uuid}`),\n fromLinksBack: () => router.push(base),\n }}\n images={{ folder: \"/my-folder-art.svg\" }} // optional artwork overrides\n>\n {children}\n\n```\n\n## 2. Render the browser from a page shell\n\n```tsx\n\"use client\";\nimport dynamic from \"next/dynamic\";\nconst AssetsBrowser = dynamic(() => import(\"nitxui\").then(m => m.AssetsBrowser), { ssr: false });\n\nexport default function AssetsPage() {\n return ;\n}\n```\n\nOptional props: `onTitleChange` (feed your topbar), `emptyStateImages`,\n`renderAssetActions` (extra per-asset buttons, e.g. signage's send-to-screen),\n`renderFolderMenuItems` (extra folder menu entries, e.g. create-sequence).\n\nLinks flows are page-content components rendered by your own route shells:\n\n```tsx\n// assets/links/[id]/page.tsx\n\n// assets/links/new/page.tsx\n\n```\n\n## 3. Other exports\n\n- `AssetsUploadModal` — controlled upload modal usable outside the browser\n (e.g. reach's email-builder flow): `open`, `onClose`, `folderUuid?`,\n `onUploadComplete?`.\n- `useAssetsQuery` + mutations, `assetKeys`, `useAssetsStore`, `useLazyLoading`\n — for custom surfaces like signage's canvas AssetsPanel.\n- Canonical types: `Asset`, `Folder`, `Path`, `AssetType`, `AssetsApi`.\n (The content browser's looser picker types are exported as `ContentAsset` /\n `ContentFolder` since v2.)\n\n## i18n\n\nAll strings ship in the bundled en/ar catalogs and resolve through the\nconsumer's `react-i18next` language (`ar` → RTL-aware layouts). Apps without\ni18next initialised render English.\n\n## Known gotcha: duplicate preact under pnpm\n\nUppy's Dashboard renders with preact. If your app has another dependency\nthat pins its own preact (e.g. `next-auth`), pnpm can resolve **two preact\ninstances**, which crashes the upload modal at mount with\n`Cannot read properties of undefined (reading '__H')`. Fix it in the\nconsuming app's `package.json` (overrides are root-only by design):\n\n```json\n\"pnpm\": { \"overrides\": { \"preact\": \"10.29.8\" } }\n```\n\nthen `pnpm install` and restart the dev server. Verify with\n`pnpm why preact` — exactly one version should appear.\n\n## Known gotcha: yalc + pnpm during local development\n\npnpm **copies** `file:` dependencies into its store at install time, so\n`yalc push` alone does not reach a pnpm app. After every push, run\n`pnpm install` in the consuming app and restart its dev server (webpack\nnever hot-reloads node_modules). npm apps get a live symlink and only need\nthe dev-server restart. This only matters during the yalc phase — registry\ninstalls behave normally.\n\n## License\n\nMIT\n\n---\n\n## Screenshots\n\n\n\n---\n\n## Contributing\n\nPull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.\n\n---\n\n## Author\n\n[Nitx Team](https://nitx.io)\n\n\n","readmeFilename":"README.md"}