@layers-app/shared 0.3.9 → 0.4.0

package/docs/README.md

@@ -1,499 +1,499 @@
-# @layers-app/shared - Usage Guide
-
-**Version:** 0.2.0
-**Type:** ESM Library for React applications
-
----
-
-## 📦 Installation
-
-```bash
-npm install @layers-app/shared
-# or
-yarn add @layers-app/shared
-# or
-pnpm add @layers-app/shared
-```
-
----
-
-## 🚀 Quick Start
-
-### 1. Import Styles (Required)
-
-Import styles **once** in your application entry point:
-
-```typescript
-// main.tsx or App.tsx
-import '@layers-app/shared/styles';
-```
-
-### 2. Use Components
-
-```typescript
-import {
-  CustomKBD,
-  FilePicker,
-  EmojiPicker,
-  SearchFilters,
-  // ... other components
-} from '@layers-app/shared';
-
-function App() {
-  return (
-    <>
-      <CustomKBD value="Ctrl" />
-      <FilePicker onSelect={(file) => console.log(file)} />
-      <EmojiPicker onSelect={(emoji) => console.log(emoji)} />
-    </>
-  );
-}
-```
-
----
-
-## 📚 Available Exports
-
-### Components
-
-- `NoData` - Empty state component
-- `FilePicker` / `FilePickerUpload` - File selection and upload
-- `EmojiPicker` - Emoji selector
-- `AppContainer` - Application container
-- `CustomKBD` - Keyboard key display
-- `SubmitModal` - Submission modal
-- `UserAvatar` - User avatar component
-- `WorkspaceMenu` / `WorkspaceAvatar` - Workspace components
-- `NavbarResizer` - Resizable navbar
-- `ErrorPage` / `ErrorAlert` - Error displays
-- `OnBoarding` - Onboarding flow
-- `ProjectIcon` - Project icon display
-- `ColorPicker` / `ColorPickerPopover` / `NewColorPicker` - Color pickers
-- `AnimationWrapper` - Animation container
-- `SearchFilters` - Search filter components
-- `AttachmentsGalleryModal` - Attachment gallery
-- `ImageModal` - Image modal viewer
-- `Logotype` - Logo component
-- `SortableList` - Drag-and-drop sortable list
-- `ThemeIndicator` - Theme indicator
-- `CommentsPanel` / `CommentComposer` - Comments system
-- `PinModal` - Pin modal
-- `PaymentSuccess` / `PaymentError` / `PaymentCancel` - Payment status pages
-- `StorageUsageProgress` / `StorageUsageEntityList` - Storage components
-- `LanguagePicker` - Language selector
-- `FrontTable` - Table component
-- `CommunitiesDialog` - Communities dialog
-- `NotPublicPanel` - Not public panel
-- `BottomDrawerWithoutHeader` - Bottom drawer
-- `Copyright` - Copyright notice
-- `EntityTitle` - Entity title
-- `CircleColorPicker` - Circle color picker
-- `FormViewer` - Form viewer
-- `BouncingLogo` - Animated logo
-- `CommentFilterMenu` - Comment filter
-- `RemoveConfirmModal` - Confirmation modal
-- `AppSidebarButton` - Sidebar button
-- `NavMenu` - Navigation menu
-- `EntityIcon` - Entity icon
-
-### Helpers
-
-- `showNotifications` - Show notifications
-- `pickRandomEmoji` - Random emoji selector
-- `themeUtils` - Theme utilities
-- `combineStatuses` - Combine statuses
-- `download` - Download helper
-- `generateLink` - Link generator
-- `feature` - Feature flags
-- `fileUtils` - File utilities
-- `formatBytes` - Format bytes
-- `filterHierarchyByTypes` - Filter hierarchy
-- `getRandomIconColor` - Random icon color
-- `getFileIcons` - File icons
-- `getFileType` - File type detection
-- `getPartOfTheDay` - Time of day
-- `isAppMode` - App mode detection
-- `dates` - Date utilities
-- `hotjar` - Hotjar integration
-
-### Hooks
-
-- `useMenu` - Menu hook
-- `useDateFnsLocale` - Date-fns locale
-- `useFormatDistance` - Format distance
-- `useSwipeDetect` - Swipe detection
-- `useOAuthErrorParams` - OAuth error params
-- `useDateUtils` - Date utilities
-- `useNumberQueryParam` - Number query param
-- `useDisableWindowScroll` - Disable scroll
-- `useAsyncStatus` - Async status
-- `useAppContainer` - App container
-- `useAppContainerStore` - App container store
-- `useAppContainerDataStore` - App container data store
-
-### Store
-
-- `searchModal` - Search modal store
-- `onboarding` - Onboarding store
-- `workspacesOrder` - Workspaces order
-- `timezoneStore` - Timezone store
-- `plansModal` - Plans modal store
-- `discordDialogStore` - Discord dialog store
-- `accessOptionsControl` - Access options control
-
-### Utils
-
-- `formatStorage` - Format storage
-- `getPlanBadgeColor` - Plan badge color
-- `queryParams` - Query params utilities
-
----
-
-## 🎨 Styling
-
-### CSS Modules
-
-This library uses **CSS Modules** for component styling. All styles are bundled into a single `index.css` file.
-
-**Structure:**
-
-```
-dist/
-├── index.css                              ← All styles (54 KB)
-├── index.js                               ← JavaScript
-└── components/
-    └── CustomKBD/
-        ├── index.js
-        └── CustomKBD.module.css.js       ← CSS classes mapping
-```
-
-### How It Works
-
-1. **Import styles once:**
-
-   ```typescript
-   import '@layers-app/shared/styles';
-   ```
-
-2. **All components automatically get correct CSS classes**
-
-   ```typescript
-   // Component uses CSS Modules internally
-   import styles from './CustomKBD.module.css';
-   <Box className={styles.root} />  // ✅ Scoped class applied
-   ```
-
-3. **No naming conflicts** - classes are scoped (e.g., `_root_195do_1`)
-
----
-
-## ⚙️ Peer Dependencies
-
-Install these dependencies in your project:
-
-### Required
-
-```json
-{
-  "react": "^18.3.1",
-  "react-dom": "^18.3.1",
-  "@mantine/core": "8.3.5",
-  "@mantine/hooks": "8.3.5",
-  "@mantine/form": "8.3.5",
-  "@mantine/modals": "8.3.5",
-  "@mantine/notifications": "8.3.5"
-}
-```
-
-### Optional (based on usage)
-
-```json
-{
-  "@dnd-kit/core": "^6.0.0",
-  "@dnd-kit/sortable": "^8.0.0",
-  "@tabler/icons-react": "^3.7.0",
-  "framer-motion": "^11.3.24",
-  "date-fns": "^4.1.0",
-  "i18next": "^25.5.2",
-  "react-i18next": "^15.7.3",
-  "react-router-dom": "^7.5.2",
-  "zustand": "^5.0.3",
-  "@reduxjs/toolkit": "^2.2.7",
-  "@tanstack/react-query": "^5.52.2"
-}
-```
-
-Full list available in `package.json` `peerDependencies`.
-
----
-
-## 🔧 Configuration
-
-### TypeScript
-
-Types are included. No additional configuration needed.
-
-```typescript
-import { CustomKBD } from '@layers-app/shared';
-
-// ✅ Full TypeScript support
-```
-
-### Vite
-
-```typescript
-// vite.config.ts
-export default defineConfig({
-  // No special configuration needed
-  // Styles are auto-loaded via import '@layers-app/shared/styles'
-});
-```
-
-### Webpack
-
-```javascript
-// webpack.config.js
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        use: ['style-loader', 'css-loader'],
-      },
-    ],
-  },
-};
-```
-
----
-
-## 📖 Usage Examples
-
-### Using FilePicker
-
-```typescript
-import { FilePicker } from '@layers-app/shared';
-
-function MyComponent() {
-  const handleFileSelect = (file: File) => {
-    console.log('Selected file:', file);
-  };
-
-  return (
-    <FilePicker
-      onSelect={handleFileSelect}
-      accept="image/*"
-      maxSize={5 * 1024 * 1024} // 5MB
-    />
-  );
-}
-```
-
-### Using EmojiPicker
-
-```typescript
-import { EmojiPicker } from '@layers-app/shared';
-
-function MyComponent() {
-  const handleEmojiSelect = (emoji: string) => {
-    console.log('Selected emoji:', emoji);
-  };
-
-  return (
-    <EmojiPicker
-      onSelect={handleEmojiSelect}
-      position="bottom-start"
-    />
-  );
-}
-```
-
-### Using SearchFilters
-
-```typescript
-import { SearchFilters } from '@layers-app/shared';
-
-function MyComponent() {
-  const [filters, setFilters] = useState({});
-
-  return (
-    <SearchFilters
-      value={filters}
-      onChange={setFilters}
-      fields={[
-        { name: 'status', type: 'select', options: [...] },
-        { name: 'date', type: 'date' },
-      ]}
-    />
-  );
-}
-```
-
-### Using SortableList
-
-```typescript
-import { SortableList } from '@layers-app/shared';
-
-function MyComponent() {
-  const [items, setItems] = useState([...]);
-
-  return (
-    <SortableList
-      items={items}
-      onReorder={setItems}
-      renderItem={(item) => <div>{item.name}</div>}
-    />
-  );
-}
-```
-
----
-
-## 🏗️ Build Information
-
-### Output Structure
-
-```
-dist/
-├── index.js                  # Main entry point (ESM)
-├── index.d.ts                # TypeScript types
-├── index.css                 # All styles (54 KB)
-├── components/               # Component modules
-├── hooks/                    # Hooks modules
-├── helpers/                  # Helper modules
-└── assets/                   # Asset files
-```
-
-### Bundle Characteristics
-
-- **Format:** ESM only
-- **Tree-shaking:** Full support
-- **CSS:** Scoped CSS Modules
-- **TypeScript:** Full type definitions
-- **Size:** ~457 KB total (400 KB JS + 54 KB CSS + 3 KB CSS mappings)
-
----
-
-## 🔍 Advanced Usage
-
-### Accessing Individual CSS
-
-If you need specific component styles:
-
-```typescript
-// Import individual component CSS (rarely needed)
-import '@layers-app/shared/dist/components/CustomKBD/CustomKBD.module.css.js';
-```
-
-### Using Assets
-
-```typescript
-// Access assets directly
-import logo from '@layers-app/shared/assets/logo.svg';
-```
-
-### Custom Theme
-
-```typescript
-// Apply Mantine theme
-import { MantineProvider } from '@mantine/core';
-
-function App() {
-  return (
-    <MantineProvider theme={{ /* your theme */ }}>
-      {/* Your app */}
-    </MantineProvider>
-  );
-}
-```
-
----
-
-## 📊 Performance
-
-### Optimization Tips
-
-1. **Import only what you need:**
-
-   ```typescript
-   // ✅ Good - tree-shaking works
-   import { CustomKBD } from '@layers-app/shared';
-   // ❌ Bad - imports everything
-   import * as Shared from '@layers-app/shared';
-   ```
-
-2. **Styles are loaded once:**
-
-   ```typescript
-   // Import in main.tsx only
-   import '@layers-app/shared/styles';
-   ```
-
-3. **Use lazy loading for heavy components:**
-   ```typescript
-   const FormViewer = lazy(() =>
-     import('@layers-app/shared').then((m) => ({ default: m.FormViewer })),
-   );
-   ```
-
----
-
-## 🐛 Troubleshooting
-
-### Styles not applied
-
-**Solution:** Ensure you imported styles:
-
-```typescript
-import '@layers-app/shared/styles';
-```
-
-### TypeScript errors
-
-**Solution:** Check peer dependencies are installed:
-
-```bash
-npm install react react-dom @mantine/core @mantine/hooks
-```
-
-### Build errors
-
-**Solution:** Ensure you're using ESM-compatible bundler (Vite, Webpack 5+, etc.)
-
----
-
-## 📝 Notes
-
-### CSS Modules Explained
-
-Files like `CustomKBD.module.css.js` are **JavaScript mappings** for CSS Modules:
-
-```javascript
-// CustomKBD.module.css.js
-export default { root: '_root_195do_1' };
-```
-
-**This is correct behavior!** Actual styles are in `index.css`.
-
-### Internal vs External Packages
-
-- All `@layers-app/*` packages are internal monorepo packages
-- External dependencies should be managed through package.json
-
----
-
-## 🔗 Links
-
-- **Repository:** [GitHub](https://github.com/yourusername/layers)
-- **Issues:** [Report a bug](https://github.com/yourusername/layers/issues)
-- **Documentation:** See `/docs` folder
-
----
-
-## 📄 License
-
-See LICENSE file in the repository.
-
----
-
-**Made with ❤️ by the Layers team**
+# @layers-app/shared - Usage Guide
+
+**Version:** 0.2.0
+**Type:** ESM Library for React applications
+
+---
+
+## 📦 Installation
+
+```bash
+npm install @layers-app/shared
+# or
+yarn add @layers-app/shared
+# or
+pnpm add @layers-app/shared
+```
+
+---
+
+## 🚀 Quick Start
+
+### 1. Import Styles (Required)
+
+Import styles **once** in your application entry point:
+
+```typescript
+// main.tsx or App.tsx
+import '@layers-app/shared/styles';
+```
+
+### 2. Use Components
+
+```typescript
+import {
+  CustomKBD,
+  FilePicker,
+  EmojiPicker,
+  SearchFilters,
+  // ... other components
+} from '@layers-app/shared';
+
+function App() {
+  return (
+    <>
+      <CustomKBD value="Ctrl" />
+      <FilePicker onSelect={(file) => console.log(file)} />
+      <EmojiPicker onSelect={(emoji) => console.log(emoji)} />
+    </>
+  );
+}
+```
+
+---
+
+## 📚 Available Exports
+
+### Components
+
+- `NoData` - Empty state component
+- `FilePicker` / `FilePickerUpload` - File selection and upload
+- `EmojiPicker` - Emoji selector
+- `AppContainer` - Application container
+- `CustomKBD` - Keyboard key display
+- `SubmitModal` - Submission modal
+- `UserAvatar` - User avatar component
+- `WorkspaceMenu` / `WorkspaceAvatar` - Workspace components
+- `NavbarResizer` - Resizable navbar
+- `ErrorPage` / `ErrorAlert` - Error displays
+- `OnBoarding` - Onboarding flow
+- `ProjectIcon` - Project icon display
+- `ColorPicker` / `ColorPickerPopover` / `NewColorPicker` - Color pickers
+- `AnimationWrapper` - Animation container
+- `SearchFilters` - Search filter components
+- `AttachmentsGalleryModal` - Attachment gallery
+- `ImageModal` - Image modal viewer
+- `Logotype` - Logo component
+- `SortableList` - Drag-and-drop sortable list
+- `ThemeIndicator` - Theme indicator
+- `CommentsPanel` / `CommentComposer` - Comments system
+- `PinModal` - Pin modal
+- `PaymentSuccess` / `PaymentError` / `PaymentCancel` - Payment status pages
+- `StorageUsageProgress` / `StorageUsageEntityList` - Storage components
+- `LanguagePicker` - Language selector
+- `FrontTable` - Table component
+- `CommunitiesDialog` - Communities dialog
+- `NotPublicPanel` - Not public panel
+- `BottomDrawerWithoutHeader` - Bottom drawer
+- `Copyright` - Copyright notice
+- `EntityTitle` - Entity title
+- `CircleColorPicker` - Circle color picker
+- `FormViewer` - Form viewer
+- `BouncingLogo` - Animated logo
+- `CommentFilterMenu` - Comment filter
+- `RemoveConfirmModal` - Confirmation modal
+- `AppSidebarButton` - Sidebar button
+- `NavMenu` - Navigation menu
+- `EntityIcon` - Entity icon
+
+### Helpers
+
+- `showNotifications` - Show notifications
+- `pickRandomEmoji` - Random emoji selector
+- `themeUtils` - Theme utilities
+- `combineStatuses` - Combine statuses
+- `download` - Download helper
+- `generateLink` - Link generator
+- `feature` - Feature flags
+- `fileUtils` - File utilities
+- `formatBytes` - Format bytes
+- `filterHierarchyByTypes` - Filter hierarchy
+- `getRandomIconColor` - Random icon color
+- `getFileIcons` - File icons
+- `getFileType` - File type detection
+- `getPartOfTheDay` - Time of day
+- `isAppMode` - App mode detection
+- `dates` - Date utilities
+- `hotjar` - Hotjar integration
+
+### Hooks
+
+- `useMenu` - Menu hook
+- `useDateFnsLocale` - Date-fns locale
+- `useFormatDistance` - Format distance
+- `useSwipeDetect` - Swipe detection
+- `useOAuthErrorParams` - OAuth error params
+- `useDateUtils` - Date utilities
+- `useNumberQueryParam` - Number query param
+- `useDisableWindowScroll` - Disable scroll
+- `useAsyncStatus` - Async status
+- `useAppContainer` - App container
+- `useAppContainerStore` - App container store
+- `useAppContainerDataStore` - App container data store
+
+### Store
+
+- `searchModal` - Search modal store
+- `onboarding` - Onboarding store
+- `workspacesOrder` - Workspaces order
+- `timezoneStore` - Timezone store
+- `plansModal` - Plans modal store
+- `discordDialogStore` - Discord dialog store
+- `accessOptionsControl` - Access options control
+
+### Utils
+
+- `formatStorage` - Format storage
+- `getPlanBadgeColor` - Plan badge color
+- `queryParams` - Query params utilities
+
+---
+
+## 🎨 Styling
+
+### CSS Modules
+
+This library uses **CSS Modules** for component styling. All styles are bundled into a single `index.css` file.
+
+**Structure:**
+
+```
+dist/
+├── index.css                              ← All styles (54 KB)
+├── index.js                               ← JavaScript
+└── components/
+    └── CustomKBD/
+        ├── index.js
+        └── CustomKBD.module.css.js       ← CSS classes mapping
+```
+
+### How It Works
+
+1. **Import styles once:**
+
+   ```typescript
+   import '@layers-app/shared/styles';
+   ```
+
+2. **All components automatically get correct CSS classes**
+
+   ```typescript
+   // Component uses CSS Modules internally
+   import styles from './CustomKBD.module.css';
+   <Box className={styles.root} />  // ✅ Scoped class applied
+   ```
+
+3. **No naming conflicts** - classes are scoped (e.g., `_root_195do_1`)
+
+---
+
+## ⚙️ Peer Dependencies
+
+Install these dependencies in your project:
+
+### Required
+
+```json
+{
+  "react": "^18.3.1",
+  "react-dom": "^18.3.1",
+  "@mantine/core": "8.3.5",
+  "@mantine/hooks": "8.3.5",
+  "@mantine/form": "8.3.5",
+  "@mantine/modals": "8.3.5",
+  "@mantine/notifications": "8.3.5"
+}
+```
+
+### Optional (based on usage)
+
+```json
+{
+  "@dnd-kit/core": "^6.0.0",
+  "@dnd-kit/sortable": "^8.0.0",
+  "@tabler/icons-react": "^3.7.0",
+  "framer-motion": "^11.3.24",
+  "date-fns": "^4.1.0",
+  "i18next": "^25.5.2",
+  "react-i18next": "^15.7.3",
+  "react-router-dom": "^7.5.2",
+  "zustand": "^5.0.3",
+  "@reduxjs/toolkit": "^2.2.7",
+  "@tanstack/react-query": "^5.52.2"
+}
+```
+
+Full list available in `package.json` `peerDependencies`.
+
+---
+
+## 🔧 Configuration
+
+### TypeScript
+
+Types are included. No additional configuration needed.
+
+```typescript
+import { CustomKBD } from '@layers-app/shared';
+
+// ✅ Full TypeScript support
+```
+
+### Vite
+
+```typescript
+// vite.config.ts
+export default defineConfig({
+  // No special configuration needed
+  // Styles are auto-loaded via import '@layers-app/shared/styles'
+});
+```
+
+### Webpack
+
+```javascript
+// webpack.config.js
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader'],
+      },
+    ],
+  },
+};
+```
+
+---
+
+## 📖 Usage Examples
+
+### Using FilePicker
+
+```typescript
+import { FilePicker } from '@layers-app/shared';
+
+function MyComponent() {
+  const handleFileSelect = (file: File) => {
+    console.log('Selected file:', file);
+  };
+
+  return (
+    <FilePicker
+      onSelect={handleFileSelect}
+      accept="image/*"
+      maxSize={5 * 1024 * 1024} // 5MB
+    />
+  );
+}
+```
+
+### Using EmojiPicker
+
+```typescript
+import { EmojiPicker } from '@layers-app/shared';
+
+function MyComponent() {
+  const handleEmojiSelect = (emoji: string) => {
+    console.log('Selected emoji:', emoji);
+  };
+
+  return (
+    <EmojiPicker
+      onSelect={handleEmojiSelect}
+      position="bottom-start"
+    />
+  );
+}
+```
+
+### Using SearchFilters
+
+```typescript
+import { SearchFilters } from '@layers-app/shared';
+
+function MyComponent() {
+  const [filters, setFilters] = useState({});
+
+  return (
+    <SearchFilters
+      value={filters}
+      onChange={setFilters}
+      fields={[
+        { name: 'status', type: 'select', options: [...] },
+        { name: 'date', type: 'date' },
+      ]}
+    />
+  );
+}
+```
+
+### Using SortableList
+
+```typescript
+import { SortableList } from '@layers-app/shared';
+
+function MyComponent() {
+  const [items, setItems] = useState([...]);
+
+  return (
+    <SortableList
+      items={items}
+      onReorder={setItems}
+      renderItem={(item) => <div>{item.name}</div>}
+    />
+  );
+}
+```
+
+---
+
+## 🏗️ Build Information
+
+### Output Structure
+
+```
+dist/
+├── index.js                  # Main entry point (ESM)
+├── index.d.ts                # TypeScript types
+├── index.css                 # All styles (54 KB)
+├── components/               # Component modules
+├── hooks/                    # Hooks modules
+├── helpers/                  # Helper modules
+└── assets/                   # Asset files
+```
+
+### Bundle Characteristics
+
+- **Format:** ESM only
+- **Tree-shaking:** Full support
+- **CSS:** Scoped CSS Modules
+- **TypeScript:** Full type definitions
+- **Size:** ~457 KB total (400 KB JS + 54 KB CSS + 3 KB CSS mappings)
+
+---
+
+## 🔍 Advanced Usage
+
+### Accessing Individual CSS
+
+If you need specific component styles:
+
+```typescript
+// Import individual component CSS (rarely needed)
+import '@layers-app/shared/dist/components/CustomKBD/CustomKBD.module.css.js';
+```
+
+### Using Assets
+
+```typescript
+// Access assets directly
+import logo from '@layers-app/shared/assets/logo.svg';
+```
+
+### Custom Theme
+
+```typescript
+// Apply Mantine theme
+import { MantineProvider } from '@mantine/core';
+
+function App() {
+  return (
+    <MantineProvider theme={{ /* your theme */ }}>
+      {/* Your app */}
+    </MantineProvider>
+  );
+}
+```
+
+---
+
+## 📊 Performance
+
+### Optimization Tips
+
+1. **Import only what you need:**
+
+   ```typescript
+   // ✅ Good - tree-shaking works
+   import { CustomKBD } from '@layers-app/shared';
+   // ❌ Bad - imports everything
+   import * as Shared from '@layers-app/shared';
+   ```
+
+2. **Styles are loaded once:**
+
+   ```typescript
+   // Import in main.tsx only
+   import '@layers-app/shared/styles';
+   ```
+
+3. **Use lazy loading for heavy components:**
+   ```typescript
+   const FormViewer = lazy(() =>
+     import('@layers-app/shared').then((m) => ({ default: m.FormViewer })),
+   );
+   ```
+
+---
+
+## 🐛 Troubleshooting
+
+### Styles not applied
+
+**Solution:** Ensure you imported styles:
+
+```typescript
+import '@layers-app/shared/styles';
+```
+
+### TypeScript errors
+
+**Solution:** Check peer dependencies are installed:
+
+```bash
+npm install react react-dom @mantine/core @mantine/hooks
+```
+
+### Build errors
+
+**Solution:** Ensure you're using ESM-compatible bundler (Vite, Webpack 5+, etc.)
+
+---
+
+## 📝 Notes
+
+### CSS Modules Explained
+
+Files like `CustomKBD.module.css.js` are **JavaScript mappings** for CSS Modules:
+
+```javascript
+// CustomKBD.module.css.js
+export default { root: '_root_195do_1' };
+```
+
+**This is correct behavior!** Actual styles are in `index.css`.
+
+### Internal vs External Packages
+
+- All `@layers-app/*` packages are internal monorepo packages
+- External dependencies should be managed through package.json
+
+---
+
+## 🔗 Links
+
+- **Repository:** [GitHub](https://github.com/yourusername/layers)
+- **Issues:** [Report a bug](https://github.com/yourusername/layers/issues)
+- **Documentation:** See `/docs` folder
+
+---
+
+## 📄 License
+
+See LICENSE file in the repository.
+
+---
+
+**Made with ❤️ by the Layers team**