@scaleflex/asset-picker 0.1.0 → 0.2.0

package/CHANGELOG.md

@@ -7,24 +7,40 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.2.0] - 2026-03-22
+
 ### Added
 
+- `@scaleflex/uploader` integration with drop zone and upload panel
+- Uploader uses built-in header with back button; close (X) button in modal mode
 - Select-all functionality for asset selection
 - Stats endpoint integration
 - Tags filter with suggested and other tags from API
-- GitHub Pages demo
+- Resolution info on asset cards
+- Custom theming example
+- GitHub Pages demo with centered layout and auth UX
 
 ### Changed
 
+- Adopted Scaleflex design system with oklch color tokens across all components
+- Polished header: search sizing, close button, box-shadow replaced with border-bottom
+- Styled filter system: rounded pinned chips, accent backgrounds, icon colors, Clear filters button
+- Styled selection bar: primary background, outline Confirm button
+- Styled dropdowns: metadata field selector, regional settings, filter options
+- Styled list view: checkbox borders, header labels, type column color
+- Increased asset checkbox size to 22x22px in grid and list views
+- Used Lucide icons for checkboxes, calendar, grid view, and select button
 - Improved filter UX: temporary chips, search focus, "Clear all" placement, and outside click handling
-- Improved sort system
-- Filter validation and debounced filter application
-- SVG preview rendering
+- Improved sort system, filter validation, and debounced filter application
+- SVG preview rendering improvements
 
 ### Fixed
 
 - Filter popover overflowing right edge of widget
 - Filter popover not closing on filters-bar empty area click
+- Size filter inputs overlapping
+- List view checkboxes rendering at exact 22x22px with border-box sizing
+- Metadata field selector dropdown being clipped at the top
 - Approval filter and filter constants
 - Date presets and serialization
 - Filter component UX issues
@@ -35,7 +51,7 @@ Initial release.
 
 ### Added
 
-- `<asset-picker>` web component built with Lit 3 and Shadow DOM
+- `<sfx-asset-picker>` web component built with Lit 3 and Shadow DOM
 - Reactive store-based state management with `StoreController`
 - Asset browsing with grid and list view modes
 - Folder navigation with breadcrumb trail

package/README.md

@@ -14,9 +14,18 @@
 <p align="center">
   <a href="https://www.npmjs.com/package/@scaleflex/asset-picker"><img src="https://img.shields.io/npm/v/@scaleflex/asset-picker.svg?style=flat-square" alt="npm version"></a>
   <a href="https://www.npmjs.com/package/@scaleflex/asset-picker"><img src="https://img.shields.io/npm/dm/@scaleflex/asset-picker.svg?style=flat-square" alt="npm downloads"></a>
+  <a href="https://bundlephobia.com/package/@scaleflex/asset-picker"><img src="https://img.shields.io/bundlephobia/minzip/@scaleflex/asset-picker?style=flat-square" alt="bundle size"></a>
   <img src="https://img.shields.io/badge/license-proprietary-red?style=flat-square" alt="license">
 </p>
 
+<p align="center">
+  <a href="https://scaleflex.github.io/asset-picker/">Live Demo</a> |
+  <a href="https://scaleflex.github.io/asset-picker/#/docs/getting-started">Documentation</a> |
+  <a href="https://scaleflex.github.io/asset-picker/#/examples/basic">Examples</a> |
+  <a href="https://www.npmjs.com/package/@scaleflex/asset-picker">npm</a> |
+  <a href="https://www.scaleflex.com/page/digital-asset-management">Scaleflex DAM</a>
+</p>
+
 ---
 
 ## Table of Contents
@@ -57,7 +66,7 @@ The npm package contains **only pre-built, minified production files** (`dist/`)
 
 ## Features
 
-- **Framework-agnostic** — standard `<asset-picker>` custom element, works in any stack
+- **Framework-agnostic** — standard `<sfx-asset-picker>` custom element, works in any stack
 - **First-class React wrapper** — `forwardRef` component with controlled `open` prop and imperative ref
 - **Two auth modes** — session tokens or security templates
 - **Grid & list views** — switchable with persistent user preference
@@ -104,7 +113,7 @@ pnpm add @scaleflex/asset-picker
 |---|---|
 | `@scaleflex/asset-picker` | `AssetPicker` class + all TypeScript types |
 | `@scaleflex/asset-picker/react` | React wrapper component |
-| `@scaleflex/asset-picker/define` | Side-effect import — registers `<asset-picker>` custom element |
+| `@scaleflex/asset-picker/define` | Side-effect import — registers `<sfx-asset-picker>` custom element |
 
 Both ESM (`import`) and CJS (`require`) builds are provided.
 
@@ -115,14 +124,14 @@ Both ESM (`import`) and CJS (`require`) builds are provided.
 ### Vanilla JS / Web Component
 
 ```html
-<asset-picker></asset-picker>
+<sfx-asset-picker></sfx-asset-picker>
 
 <script type="module">
   // 1. Register the custom element (once)
   import '@scaleflex/asset-picker/define';
 
   // 2. Grab the element
-  const picker = document.querySelector('asset-picker');
+  const picker = document.querySelector('sfx-asset-picker');
 
   // 3. Configure
   picker.config = {
@@ -228,14 +237,15 @@ Use when your backend already manages Scaleflex sessions.
 | `defaultViewMode` | `'grid' \| 'list'` | `'grid'` | Initial view mode |
 | `defaultSortBy` | `SortBy` | `'created_at'` | Initial sort field (see table below) |
 | `defaultSortDirection` | `'asc' \| 'desc'` | `'desc'` | Initial sort direction |
-| `hiddenTabs` | `TabKey[]` | `[]` | Tabs to hide: `'assets'`, `'folders'` |
+| `tabs` | `TabKey[]` | `['assets', 'folders']` | Tabs to show. If only one, the dropdown is hidden |
 | `enabledFilters` | `FilterKey[]` | all | Restrict which filters appear in the toolbar |
-| `allowedFileTypes` | `string[]` | `undefined` | Restrict selectable file types (e.g. `['image', 'video']`) |
-| `rootFolderUuid` | `string` | `undefined` | Start browsing from a specific folder UUID |
+| `rootFolderPath` | `string` | `'/'` | Start browsing from a specific folder path (e.g. `'/marketing/banners/'`) |
 | `showMetadata` | `boolean` | `true` | Show metadata sections in the preview panel |
 | `brandColor` | `string` | from API | Brand accent colour as hex (e.g. `'#3b82f6'`). Overrides the API-fetched value |
-| `defaultFilters` | `Filters` | `undefined` | Filters pre-applied on open. User can modify/remove |
-| `forcedFilters` | `Filters` | `undefined` | Filters always active. Shown as locked chips the user cannot remove |
+| `rememberLastFolder` | `boolean` | `false` | Persist the last browsed folder and restore on next open |
+| `rememberLastView` | `boolean` | `false` | Persist the last used view mode (grid/list) and restore on next open |
+| `defaultFilters` | `FiltersInput` | `undefined` | Filters pre-applied on open. User can modify/remove |
+| `forcedFilters` | `FiltersInput` | `undefined` | Filters always active. Shown as locked chips the user cannot remove |
 | `onSelect` | `(assets: Asset[]) => void` | `undefined` | Callback when assets are selected |
 | `onCancel` | `() => void` | `undefined` | Callback when the picker is cancelled |
 
@@ -399,7 +409,7 @@ If not set, the picker uses the brand colour configured in your Scaleflex projec
 
 ### CSS Custom Properties
 
-For fine-grained control, override these CSS custom properties on the `<asset-picker>` element or any ancestor. All variables use the `--ap-` prefix.
+For fine-grained control, override these CSS custom properties on the `<sfx-asset-picker>` element or any ancestor. All variables use the `--ap-` prefix.
 
 #### Colours