{"_id":"playbook-sdk","_rev":"5-f5305e552976fb2e3eb889f06de0015f","name":"playbook-sdk","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.1":{"name":"playbook-sdk","version":"1.0.1","keywords":["gallery","masonry","grid","assets","images","sdk","component","frontend","ui","responsive","modal","lightbox","media-library","typescript","react","vue","angular"],"author":{"name":"Playbook Labs","email":"beta@playbook.com"},"license":"MIT","_id":"playbook-sdk@1.0.1","maintainers":[{"name":"playbook-labs","email":"developers@playbook.com"}],"dist":{"shasum":"1d99a070cdb96db1633d25faa973c2ef8565e9dd","tarball":"https://registry.npmjs.org/playbook-sdk/-/playbook-sdk-1.0.1.tgz","fileCount":4,"integrity":"sha512-LTopwn0drZqTohy/Qu/c6ocCs8kSCXDcsuWAm7BpK1m/y065oAvqTd37B7SEF2M4fI07nl04YXbgwXotL47xhQ==","signatures":[{"sig":"MEQCIATz8HT+WukjRqgtFFbDK934cb4+JCUu93lR8D2ZKmgnAiAk+3u4XbpQs8BsBYsW3o865PI4Y6dgCbnQ3VCQVXFjjA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":64707},"main":"dist/playbook-sdk.min.js","types":"index.d.ts","unpkg":"dist/playbook-sdk.min.js","module":"dist/playbook-sdk.min.js","browser":"dist/playbook-sdk.min.js","engines":{"node":">=12.0.0"},"gitHead":"8420c58f2766dbe321056666aa1b019ba82b2e80","scripts":{"test":"echo 'No tests yet'","build":"echo 'Build complete'","prepublishOnly":"npm run build"},"typings":"index.d.ts","_npmUser":{"name":"playbook-labs","email":"developers@playbook.com"},"jsdelivr":"dist/playbook-sdk.min.js","_npmVersion":"9.8.1","description":"A lightweight, production-ready frontend SDK for creating beautiful galleries","directories":{},"_nodeVersion":"18.18.0","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/playbook-sdk_1.0.1_1764367552262_0.15406958205888666","host":"s3://npm-registry-packages-npm-production"}},"1.0.2":{"name":"playbook-sdk","version":"1.0.2","keywords":["gallery","masonry","grid","assets","images","sdk","component","frontend","ui","responsive","modal","lightbox","media-library","typescript","react","vue","angular"],"author":{"name":"Playbook Labs","email":"beta@playbook.com"},"license":"MIT","_id":"playbook-sdk@1.0.2","maintainers":[{"name":"playbook-labs","email":"developers@playbook.com"}],"dist":{"shasum":"d7fa77049c0f41f2879213cfb4acff757b8968c2","tarball":"https://registry.npmjs.org/playbook-sdk/-/playbook-sdk-1.0.2.tgz","fileCount":4,"integrity":"sha512-m1McXdMU7uchuh8+MQxucvWcK2y2EA7m0JN38tU9f2lKNPqVgKw2ePP9F3N4eNkQIJ8JRxkCiyGZTTag3cTAgw==","signatures":[{"sig":"MEUCIQDCnlK3hbDTB1kzDzfgGtaHQZTUQ/ycJXlfDbvnHGERpwIgcBjOA528giOrWtCACwueuuQ8gdK36voRnEtbo6/WGmM=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":64651},"main":"dist/playbook-sdk.min.js","types":"index.d.ts","unpkg":"dist/playbook-sdk.min.js","module":"dist/playbook-sdk.min.js","browser":"dist/playbook-sdk.min.js","engines":{"node":">=12.0.0"},"gitHead":"43b1fc9109bfa9223338ea03f6b72290a1f96e71","scripts":{"test":"echo 'No tests yet'","build":"echo 'Build complete'","prepublishOnly":"npm run build"},"typings":"index.d.ts","_npmUser":{"name":"playbook-labs","email":"developers@playbook.com"},"jsdelivr":"dist/playbook-sdk.min.js","_npmVersion":"9.8.1","description":"A lightweight, production-ready frontend SDK for creating beautiful galleries","directories":{},"_nodeVersion":"18.18.0","dependencies":{},"_hasShrinkwrap":false,"devDependencies":{},"_npmOperationalInternal":{"tmp":"tmp/playbook-sdk_1.0.2_1764367784566_0.5639102961816631","host":"s3://npm-registry-packages-npm-production"}},"1.0.3":{"name":"playbook-sdk","version":"1.0.3","description":"A lightweight, production-ready frontend SDK for creating beautiful galleries","main":"dist/playbook-sdk.min.js","module":"dist/playbook-sdk.min.js","browser":"dist/playbook-sdk.min.js","unpkg":"dist/playbook-sdk.min.js","jsdelivr":"dist/playbook-sdk.min.js","types":"index.d.ts","typings":"index.d.ts","scripts":{"build":"echo 'Build complete'","test":"echo 'No tests yet'","prepublishOnly":"npm run build"},"keywords":["gallery","masonry","grid","assets","images","sdk","component","frontend","ui","responsive","modal","lightbox","media-library","typescript","react","vue","angular"],"author":{"name":"Playbook Labs","email":"beta@playbook.com"},"license":"MIT","engines":{"node":">=12.0.0"},"devDependencies":{},"dependencies":{},"_id":"playbook-sdk@1.0.3","gitHead":"a6c16391e936eb6a5892b377e430746ee37cecb0","_nodeVersion":"18.18.0","_npmVersion":"9.8.1","dist":{"integrity":"sha512-KeFX2bIDZPEV6kI1q2KFZURwyWAvUNiqo/aznejLSlB3nTP5JOeiOu/MWBWZq2c9ZaPLEM9tAPKe7YcZf3i5NA==","shasum":"c9476c742b5852a5c3d1ce236f2deba32b50c6fb","tarball":"https://registry.npmjs.org/playbook-sdk/-/playbook-sdk-1.0.3.tgz","fileCount":4,"unpackedSize":65298,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIA3ieioA0BPvpdqdszm04D3/bmCNgWvRvQrLht33zdWvAiBwT/Vp5d3BQpPnJGE4GL/y01zyt4mZKTkuavphhycHrA=="}]},"_npmUser":{"name":"playbook-labs","email":"developers@playbook.com"},"directories":{},"maintainers":[{"name":"playbook-labs","email":"developers@playbook.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/playbook-sdk_1.0.3_1764607227953_0.5901229905626044"},"_hasShrinkwrap":false}},"time":{"created":"2025-11-28T22:05:52.261Z","modified":"2025-12-01T16:40:28.313Z","1.0.0":"2025-11-27T15:44:03.768Z","1.0.1":"2025-11-28T22:05:52.468Z","1.0.2":"2025-11-28T22:09:44.770Z","1.0.3":"2025-12-01T16:40:28.143Z"},"author":{"name":"Playbook Labs","email":"beta@playbook.com"},"license":"MIT","keywords":["gallery","masonry","grid","assets","images","sdk","component","frontend","ui","responsive","modal","lightbox","media-library","typescript","react","vue","angular"],"description":"A lightweight, production-ready frontend SDK for creating beautiful galleries","maintainers":[{"name":"playbook-labs","email":"developers@playbook.com"}],"readme":"# Playbook Gallery SDK\n\nA lightweight frontend SDK for creating masonry grid galleries with search, board navigation, and modal views. Works for asset management, photo galleries, and media libraries.\n\n![Version](https://img.shields.io/badge/version-1.0.0-blue.svg)\n![License](https://img.shields.io/badge/license-MIT-green.svg)\n![Size](https://img.shields.io/badge/size-15kb-orange.svg)\n\n![SDK UI](https://img.playbook.com/W-co81i7JEeSq21dvhvERZ30YSXyXrAiN37FRE6LctI/s:800:677/Z3M6Ly9wbGF5Ym9v/ay1hc3NldHMtcHVi/bGljL2QxZTc0YTI0/LWM4OTQtNDcwMS1h/NzllLTNiYmQ3YjA3/M2VjYw)\n\n## Features\n\n- Fully responsive - adapts from 2 to 8 columns based on screen size\n- Search with AI toggle - regular and semantic search\n- Board navigation - organize assets into categories\n- Modal viewer - full-screen asset view with keyboard navigation\n- Download support - one-click downloads\n- Customizable - extensive configuration options\n- Framework agnostic - works with vanilla JS, React, Vue, Angular\n- Zero dependencies\n- TypeScript support\n- Accessible - ARIA labels and keyboard navigation\n- Lightweight - ~15KB minified\n\n## Installation\n\n### Option 1: CDN (Quickest)\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n  <head>\n    <meta charset=\"UTF-8\" />\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n    <title>My Gallery</title>\n\n    <!-- Optional: Include Tailwind CSS for styling -->\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body>\n    <!-- Your gallery container -->\n    <div id=\"my-gallery\"></div>\n\n    <!-- Include Playbook SDK -->\n    <script src=\"https://unpkg.com/playbook-sdk@latest/dist/playbook-sdk.min.js\"></script>\n\n    <script>\n      // Initialize your gallery\n      const gallery = PlaybookSDK.init({\n        containerId: \"my-gallery\",\n        organizationSlug: \"your-org-slug\",\n        authToken: \"your-auth-token\",\n      });\n    </script>\n  </body>\n</html>\n```\n\n### Option 2: npm\n\n```bash\nnpm install playbook-sdk\n```\n\n```javascript\nimport PlaybookSDK from \"playbook-sdk\";\n\nconst gallery = PlaybookSDK.init({\n  containerId: \"my-gallery\",\n  organizationSlug: \"your-org-slug\",\n  authToken: \"your-auth-token\",\n});\n```\n\n### Option 3: Download\n\nDownload `playbook-sdk.min.js` and include it in your project:\n\n```html\n<script src=\"path/to/playbook-sdk.min.js\"></script>\n```\n\n## Quick Start\n\n### 1. Get Your Playbook API Credentials\n\nRequest API access at [dev.playbook.com](https://dev.playbook.com) or email beta@playbook.com. You'll need:\n\n- **Organization Slug** (e.g., `playbook-sdk`)\n- **Auth Token** (OAuth2 bearer token)\n- **Board ID** (optional - to scope gallery to specific board)\n\n### 2. Create HTML Container\n\n```html\n<div id=\"gallery-container\"></div>\n```\n\n### 3. Initialize SDK\n\n```javascript\nconst gallery = PlaybookSDK.init({\n  containerId: \"gallery-container\",\n  organizationSlug: \"playbook-sdk\", // Your organization/workspace slug\n  authToken: \"your-token-here\", // Your API access token\n  boardId: \"\", // Optional: Scope gallery to specific board\n  enableSearch: true,\n  enableBoards: true,\n  enableModal: true,\n});\n```\n\n### 4. Done\n\nThe SDK will fetch and display your assets from Playbook.\n\n## Configuration Options\n\n```javascript\nPlaybookSDK.init({\n  // ===== Required =====\n  containerId: \"my-gallery\", // ID of the container element\n  organizationSlug: \"your-org-slug\", // Your Playbook workspace slug\n  authToken: \"your-auth-token\", // Your API bearer token\n\n  // ===== Optional Scoping =====\n  boardId: \"\", // Scope to specific board (empty = workspace-wide)\n  // When boardId is set:\n  // - \"All Assets\" shows only assets from this board + nested boards\n  // - Board navigation shows only children of this board\n  // - Users cannot navigate outside this board tree\n\n  // ===== Features =====\n  enableSearch: true, // Show search bar with AI toggle\n  enableBoards: true, // Show board/collection navigation\n  enableModal: true, // Enable full-screen asset viewer\n  enableDownload: true, // Show download button in modal\n  enableInfo: true, // Show info button in modal\n\n  // ===== Responsive Columns =====\n  columnBreakpoints: {\n    default: 2, // Mobile (< 768px)\n    768: 3, // Tablet\n    1024: 4, // Desktop\n    1280: 5, // Large desktop\n    1536: 6, // XL screens\n    1800: 7, // 2XL screens\n    2000: 8, // Ultra-wide\n  },\n\n  // ===== Styling =====\n  theme: \"light\", // 'light' or 'dark' (future)\n  customStyles: {}, // Custom CSS overrides\n\n  // ===== Callbacks =====\n  onAssetClick: function (asset) {\n    console.log(\"Asset clicked:\", asset);\n  },\n\n  onSearch: function (query) {\n    console.log(\"Search performed:\", query);\n  },\n\n  onBoardChange: function (boardId, boardTitle) {\n    console.log(\"Board changed:\", boardTitle || boardId);\n  },\n\n  onModalOpen: function (asset) {\n    console.log(\"Modal opened:\", asset);\n  },\n\n  onModalClose: function () {\n    console.log(\"Modal closed\");\n  },\n\n  onDownload: function (asset) {\n    console.log(\"Asset downloaded:\", asset);\n  },\n});\n```\n\n### Examples\n\n**Workspace-wide gallery:**\n\n```javascript\nPlaybookSDK.init({\n  containerId: \"gallery\",\n  organizationSlug: \"acme-corp\",\n  authToken: \"abc123...\",\n  boardId: \"\", // Empty = show all workspace assets\n});\n```\n\n**Board-scoped gallery:**\n\n```javascript\nPlaybookSDK.init({\n  containerId: \"gallery\",\n  organizationSlug: \"acme-corp\",\n  authToken: \"abc123...\",\n  boardId: \"SddGjNcAFZThZb3yVTSvbGbe\", // Only this board + children\n});\n```\n\n## Usage Examples\n\n### Basic Implementation\n\n```html\n<!DOCTYPE html>\n<html>\n  <head>\n    <title>My Asset Gallery</title>\n    <script src=\"https://cdn.tailwindcss.com\"></script>\n  </head>\n  <body class=\"bg-gray-100 p-8\">\n    <div class=\"max-w-7xl mx-auto\">\n      <h1 class=\"text-4xl font-bold mb-8\">Asset Library</h1>\n      <div id=\"gallery\"></div>\n    </div>\n\n    <script src=\"playbook-sdk.min.js\"></script>\n    <script>\n      PlaybookSDK.init({\n        containerId: \"gallery\",\n        organizationSlug: \"my-company\",\n        authToken: \"your-token-here\",\n      });\n    </script>\n  </body>\n</html>\n```\n\n### With Callbacks\n\n```javascript\nconst gallery = PlaybookSDK.init({\n  containerId: \"gallery\",\n  organizationSlug: \"my-company\",\n  authToken: \"your-token\",\n\n  onAssetClick: function (asset) {\n    // Track analytics\n    gtag(\"event\", \"asset_view\", {\n      asset_id: asset.token,\n      asset_name: asset.title,\n    });\n  },\n\n  onSearch: function (query) {\n    // Track search\n    console.log(\"User searched for:\", query);\n  },\n\n  onBoardChange: function (boardId, boardTitle) {\n    // Track board navigation\n    console.log(\"Navigated to:\", boardTitle);\n  },\n\n  onDownload: function (asset) {\n    // Track downloads\n    gtag(\"event\", \"asset_download\", {\n      asset_id: asset.token,\n    });\n  },\n});\n```\n\n### Custom Column Configuration\n\n```javascript\nPlaybookSDK.init({\n  containerId: \"gallery\",\n  organizationSlug: \"my-company\",\n  authToken: \"your-token\",\n\n  // Custom breakpoints for your design\n  columnBreakpoints: {\n    default: 1, // 1 column on mobile\n    640: 2, // 2 columns on small tablets\n    1024: 3, // 3 columns on desktop\n    1440: 4, // 4 columns on large screens\n  },\n});\n```\n\n### React Integration\n\n```jsx\nimport { useEffect, useRef } from \"react\";\nimport PlaybookSDK from \"playbook-sdk\";\n\nfunction GalleryComponent() {\n  const galleryRef = useRef(null);\n  const sdkInstance = useRef(null);\n\n  useEffect(() => {\n    if (galleryRef.current && !sdkInstance.current) {\n      sdkInstance.current = PlaybookSDK.init({\n        containerId: \"react-gallery\",\n        organizationSlug: \"your-org-slug\",\n        authToken: \"your-auth-token\",\n\n        onAssetClick: (asset) => {\n          console.log(\"Asset clicked:\", asset);\n        },\n      });\n    }\n\n    return () => {\n      if (sdkInstance.current) {\n        PlaybookSDK.destroy(\"react-gallery\");\n        sdkInstance.current = null;\n      }\n    };\n  }, []);\n\n  return <div id='react-gallery' ref={galleryRef} />;\n}\n\nexport default GalleryComponent;\n```\n\n### TypeScript Integration\n\nTypeScript definitions included:\n\n```typescript\nimport PlaybookSDK, {\n  PlaybookConfig,\n  GalleryInstance,\n  Asset,\n  Board,\n} from \"playbook-sdk\";\nimport { useEffect, useRef } from \"react\";\n\nfunction TypeScriptGallery() {\n  const sdkInstance = useRef<GalleryInstance | null>(null);\n\n  useEffect(() => {\n    const config: PlaybookConfig = {\n      containerId: \"ts-gallery\",\n      organizationSlug: \"your-org-slug\",\n      authToken: \"your-auth-token\",\n      enableSearch: true,\n      enableBoards: true,\n\n      onAssetClick: (asset: Asset) => {\n        console.log(\"Asset clicked:\", asset.title);\n      },\n\n      onBoardChange: (boardId: string, boardTitle: string) => {\n        console.log(\"Board changed:\", boardTitle);\n      },\n    };\n\n    sdkInstance.current = PlaybookSDK.init(config);\n\n    return () => {\n      if (sdkInstance.current) {\n        PlaybookSDK.destroy(\"ts-gallery\");\n      }\n    };\n  }, []);\n\n  return <div id='ts-gallery' />;\n}\n```\n\n## Public API Methods\n\nInteract with the gallery instance:\n\n```javascript\nconst gallery = PlaybookSDK.init({\n  /* config */\n});\n\n// Refresh the gallery\ngallery.refresh();\n\n// Programmatically search\ngallery.search(\"logo\");\n\n// Select a specific board\ngallery.selectBoardById(\"brand-assets\");\n\n// Get current assets\nconst assets = gallery.getAssets();\n\n// Destroy the gallery\ngallery.destroy();\n\n// Get gallery instance later\nconst instance = PlaybookSDK.getInstance(\"my-gallery\");\n```\n\n## Styling & Customization\n\nCSS classes are prefixed with `pb-` to avoid conflicts:\n\n```css\n/* Override styles in your CSS */\n.pb-masonry-item img {\n  border-radius: 12px !important;\n  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2) !important;\n}\n\n.pb-board-btn.active {\n  background-color: #your-brand-color !important;\n}\n\n.pb-modal-content {\n  border-radius: 20px !important;\n}\n```\n\n## Keyboard Shortcuts\n\nModal controls:\n\n- `←` Previous asset\n- `→` Next asset\n- `Esc` Close modal\n\n## Browser Support\n\n- Chrome/Edge (latest)\n- Firefox (latest)\n- Safari (latest)\n- Mobile browsers (iOS Safari, Chrome Mobile)\n\n## Support\n\nFor issues and questions:\n\n- Documentation: [Development Portal](https://dev.playbook.com)\n- Email: [beta@playbook.com](mailto:beta@playbook.com)\n\n## Roadmap\n\n- [ ] Dark theme support\n- [ ] Video preview in grid\n- [ ] Drag & drop upload\n- [ ] Batch download\n- [ ] Grid/List view toggle\n- [ ] Advanced filtering\n- [ ] Asset metadata display\n- [ ] Lazy loading optimization\n","readmeFilename":"README.md"}