@flamingo-stack/openframe-frontend-core 0.0.481 → 0.0.482

package/src/components/help-center-pages/.index.md

@@ -0,0 +1,51 @@
+<!-- source-hash: 11abd507c828259270fd4bb423cdd291 -->
+Barrel module that aggregates all Help Center full-page components into a single import site for consumers across `openframe-frontend` and `multi-platform-hub`.
+
+## Key Components
+
+**New Help Center Pages**
+
+| Export | Description |
+|---|---|
+| `RoadmapPage` | Full-page product roadmap view |
+| `ProductReleasesListPage` | Paginated list of product releases |
+| `DeliveryPage` | Delivery status/tracking page |
+| `OnboardingGuidesCatalogPage` | Browsable catalog of onboarding guides |
+
+**Re-exported Existing Pages**
+
+| Export | Source |
+|---|---|
+| `FaqDocumentPage` | `../faq` |
+| `LegalDocumentPage` | `../shared/legal-document` |
+| `ReleaseDetailPage` | `../shared/product-release` |
+| `OnboardingGuideDetailView` | `../onboarding-guides` |
+| `DocsHubPage` | `../docs` |
+| `HelpCenterList` | `../tickets` |
+
+All prop types are explicitly named-exported alongside their components to avoid `TS2308` ambiguous re-export collisions.
+
+## Usage Example
+
+```typescript
+// Single import site — no need to hunt individual module paths
+import {
+  RoadmapPage,
+  ProductReleasesListPage,
+  FaqDocumentPage,
+  LegalDocumentPage,
+  ReleaseDetailPage,
+  type RoadmapPageProps,
+} from '@openframe/components/help-center/pages'
+
+// Mount in a host route — each page owns its own PageShell + PageLayout chrome
+export default function RoadmapRoute() {
+  return <RoadmapPage endpointConfig={config} />
+}
+```
+
+> **Note:** The Help Center *index/landing* page is intentionally excluded from this barrel — it remains host-local since its links and icons are app-specific. This barrel is also kept separate from the top-level `components/index.ts`.
+
+## Source
+
+[`index.ts` on GitHub](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/index.ts)

package/src/components/help-center-pages/.onboarding-guides-catalog-page.md

@@ -0,0 +1,53 @@
+<!-- source-hash: 7e3576a6e8e61a9c7585053d4853ae5c -->
+A page-level wrapper that composes `DevSectionPage` chrome around `OnboardingGuidesCatalogView` for the `/onboarding-guides` route. Supports both SSR (server-pre-fetched data) and self-fetch (client-side endpoint) modes.
+
+## Key Components
+
+| Export | Type | Description |
+|---|---|---|
+| `OnboardingGuidesCatalogPage` | `React.FC` | Full catalog page with layout chrome and guide grid |
+| `OnboardingGuidesCatalogPageProps` | `interface` | Props contract for both SSR and self-fetch modes |
+| `SectionSummary` | local type | Shape of section pill data `{ section, section_order, count }` |
+
+**Internal composition:**
+- **`DevSectionPage`** — provides `sectionKey="onboarding"` page chrome (back button, title, subtitle, optional `PageShell`)
+- **`OnboardingGuidesCatalogView`** — RAG search, section pills, and guide grid; all data props forwarded verbatim
+
+## Usage Example
+
+**SSR mode** (data pre-fetched on server):
+
+```typescript
+import { OnboardingGuidesCatalogPage } from './onboarding-guides-catalog-page'
+
+// In a Next.js Server Component or page
+export default function Page() {
+  const guides = await fetchGuides()
+  const sections = await fetchSections()
+
+  return (
+    <OnboardingGuidesCatalogPage
+      initialGuides={guides}
+      initialSections={sections}
+      initialSection="getting-started"
+      basePath="/onboarding-guides"
+      title="Onboarding Guides"
+      backButton={{ label: 'Home', href: '/' }}
+    />
+  )
+}
+```
+
+**Self-fetch mode** (view fetches its own data):
+
+```typescript
+<OnboardingGuidesCatalogPage
+  guidesEndpoint="/api/onboarding-guides"
+  sectionsEndpoint="/api/onboarding-guides/sections"
+  basePath="/onboarding-guides"
+  shell={false} // host layout already provides the container
+  belowContent={<RelatedResources />}
+/>
+```
+
+> **`shell` prop:** Pass `shell={false}` when the host layout already wraps the page in a container — this prevents double-wrapping by skipping the internal `PageShell`.

package/src/components/help-center-pages/.product-releases-list-page.md

@@ -0,0 +1,51 @@
+<!-- source-hash: 73adfe4f62e2d590fb27930462fa6c3b -->
+Composes the full `/releases` list page by wrapping `<ProductReleasesView>` in `<DevSectionPage>` chrome with configurable API endpoint, detail navigation, SSR hydration, and optional layout slots.
+
+## Key Components
+
+### `ProductReleasesListPage` (exported function)
+The primary page component. Renders `DevSectionPage` with `sectionKey="releases"` and mounts `ProductReleasesView` inside it.
+
+### `ProductReleasesListPageProps` (exported interface)
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `releasesEndpoint` | `string` | `/api/releases` | GET list API route |
+| `basePath` | `string` | `/releases` | Fallback detail-href prefix |
+| `buildCardProps` | `(release) => ProductReleaseCardExtras` | lib default | Per-card prop builder |
+| `initialData` | `ProductReleaseListResponse` | — | SSR hydration payload |
+| `backButton` | `{ label?, href? } \| false` | `{ href: '/' }` | Back-button config; `false` hides it |
+| `title` | `string` | — | Page title override |
+| `subtitle` | `string` | — | Page subtitle override |
+| `belowContent` | `ReactNode` | — | Slot rendered below the list |
+| `shell` | `boolean` | `true` | Set `false` when host layout provides the page container |
+
+## Usage Example
+
+```typescript
+import { ProductReleasesListPage } from '@openframe-oss-lib/product-releases-list-page'
+
+// Basic usage — all defaults
+export default function ReleasesPage() {
+  return <ProductReleasesListPage />
+}
+
+// With SSR hydration and custom endpoint
+export default function ReleasesPage({ initialData }) {
+  return (
+    <ProductReleasesListPage
+      releasesEndpoint="/api/v2/releases"
+      basePath="/changelog"
+      initialData={initialData}
+      backButton={{ label: 'Home', href: '/' }}
+      title="Changelog"
+      subtitle="What's new in OpenFrame"
+      shell={false}
+    />
+  )
+}
+```
+
+## Source
+
+[`product-releases-list-page.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/product-releases-list-page.tsx)

package/src/components/help-center-pages/.roadmap-page.md

@@ -0,0 +1,46 @@
+<!-- source-hash: a9df8b784ccb65a41a5463aa2c434289 -->
+Composable page component that wires `DevSectionPage` chrome (shell, hero, navigation) together with `RoadmapView` for the `/roadmap` route, used by both `openframe-frontend` and the hub without hand-composing the layout.
+
+## Key Components
+
+| Export | Type | Description |
+|---|---|---|
+| `RoadmapPage` | `React.FC<RoadmapPageProps>` | Full roadmap page assembling `DevSectionPage` + `RoadmapView` |
+| `RoadmapPageProps` | `interface` | All props for configuring endpoints, SSR hydration, layout, and content slots |
+
+### Notable Props
+
+- **`roadmapEndpoint`** — GET list endpoint; defaults to `/api/roadmap`
+- **`buildRefreshUrl`** — per-task URL builder called after a vote cast
+- **`votingOptions`** — full `UseRoadmapVotingOptions` override; takes precedence over `voteApiEndpoint`
+- **`initialItems`** — pre-fetched `RoadmapItem[]` for SSR hydration, skipping the initial client fetch
+- **`shell`** — pass `false` when the host layout already provides the page container
+- **`belowContent`** — arbitrary `ReactNode` slot rendered below the list (e.g. a related-content rail)
+
+## Usage Example
+
+```typescript
+// Minimal — client-side fetch only
+<RoadmapPage roadmapEndpoint="/api/roadmap" voteApiEndpoint="/api/roadmap/vote" />
+
+// SSR-hydrated (hub usage)
+<RoadmapPage
+  initialItems={serverFetchedItems}
+  buildRefreshUrl={(id) => `/api/roadmap/${id}`}
+  votingOptions={{ voteApiEndpoint: '/api/roadmap/vote', onVoteSuccess: refetch }}
+  belowContent={<RelatedContentRail />}
+  showLeftMargin
+/>
+
+// Embedded inside a host layout that already provides PageShell
+<RoadmapPage
+  shell={false}
+  backButton={{ label: 'Back', href: '/dashboard' }}
+  title="Product Roadmap"
+  subtitle="Vote on upcoming features"
+/>
+```
+
+## Source
+
+[`roadmap-page.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/roadmap-page.tsx)

package/src/components/icons/.figma-icon.md

@@ -1,21 +1,27 @@
-<!-- source-hash: 2e19c8763dc7d38a5489d5ea07e02d43 -->
-A deprecated React component that renders the Figma logo as an inline SVG icon.
+<!-- source-hash: 7a1c58ab3574dbd9e8ba0faa56f294fe -->
+Renders the Figma brand icon as an inline SVG React component with configurable size and color.
 
 ## Key Components
 
-- **`FigmaIconProps`** — Interface accepting optional `className` (default: `'w-6 h-6'`) and `color` (default: `#000000`) props
+- **`FigmaIconProps`** — Interface accepting optional `className` (default: `'w-6 h-6'`) and `color` (default: `'currentColor'`) props
 - **`FigmaIcon`** — Deprecated SVG icon component rendering the Figma logo at a 256×256 viewBox
 
+> **Deprecated:** Use icons from `icons-v2-generated` instead.
+
 ## Usage Example
 
 ```typescript
 import { FigmaIcon } from './figma-icon';
 
-// Default usage
+// Default size and inherited color
 <FigmaIcon />
 
-// Custom size and color
-<FigmaIcon className="w-8 h-8" color="#1ABCFE" />
+// Custom size and explicit color
+<FigmaIcon className="w-8 h-8" color="#F24E1E" />
 ```
 
-> **⚠️ Deprecated:** Use icons from `icons-v2-generated` instead of this component.
+## Notes
+
+- The `color` prop maps directly to the SVG `fill` attribute, so passing `'currentColor'` inherits the parent element's CSS `color` value.
+- The rendered SVG is always `800×800` in pixel dimensions but scales via the `className` Tailwind utilities.
+- This component is marked `@deprecated`; migrate to the [`icons-v2-generated`](https://github.com/flamingo-stack/openframe-oss-lib) package for future-proof icon usage.

package/src/components/icons/.index.md

@@ -1,34 +1,38 @@
-<!-- source-hash: 482d4ff0bbd5bfd82d2f3d065a5094b1 -->
-Barrel export file for the **deprecated** icons v1 module, re-exporting all icon components from their individual files into a single entry point.
+<!-- source-hash: 3ed9bb21a047ced4b0a494599c9b4a9b -->
+Barrel export file (marked `"use client"`) that re-exports all icon components from the deprecated `icons` module of `@flamingo-stack/openframe-frontend-core`.
 
-> ⚠️ **Deprecated** — Migrate to `@flamingo-stack/openframe-frontend-core/components/icons-v2` which provides 1600+ icons, a consistent API, better TypeScript support, and smaller bundle size.
+> **⚠️ Deprecated:** This module is deprecated. Migrate to `icons-v2` for 1600+ icons, improved TypeScript support, and smaller bundle size.
 
 ## Key Components
 
-Exports are organized into the following categories:
+Organized export groups:
 
 | Category | Examples |
 |---|---|
-| Logo icons | `FlamingoLogo`, `OpenFrameLogo`, `OpenmspLogo` |
-| Navigation & feature | `SearchIcon`, `FilterIcon`, `DashboardIcon`, `DevicesIcon` |
-| UI state | `CheckCircleIcon`, `ErrorIcon`, `CopyIcon`, `SendIcon` |
-| Brand & social | `GitHubIcon`, `SlackIcon`, `MicrosoftIcon`, `GoogleLogo` |
-| Social platforms | `YouTubeIcon`, `InstagramIcon`, `TelegramIcon` |
-| OS icons | `WindowsIcon`, `MacOSIcon`, `LinuxIcon` |
-| Shell types | `PowerShellIcon`, `BashIcon`, `PythonIcon`, `DenoIcon` |
-| OpenFrame AI agents | `NaturalLanguageIcon`, `SmartEscalationIcon`, `AuditLoggingIcon` |
-| Trust page | `ShieldLockIcon`, `FolderShieldIcon`, `ShieldCheckIcon` |
-| Review platforms | `G2Icon`, `CapterraIcon`, `TrustpilotIcon` |
-| Utilities | `icon-utils` (wildcard), `device-type-icons` (wildcard) |
-
-Also exports `XIcon` aliased as `IconsXIcon` to avoid naming conflicts with `ui/custom-icons`.
+| **Logo icons** | `FlamingoLogo`, `OpenFrameLogo`, `OpenmspLogo`, `ElestioLogo` |
+| **Navigation & feature** | `SearchIcon`, `FilterIcon`, `MenuIcon`, `MingoIcon`, `ShellIcon` |
+| **UI state** | `CheckCircleIcon`, `ErrorIcon`, `CopyIcon`, `SendIcon`, `ThumbsUpIcon` |
+| **Brand & social** | `GitHubIcon`, `SlackIcon`, `GoogleLogo`, `MicrosoftIcon`, `LinkedInIcon` |
+| **Social platforms** | `YouTubeIcon`, `InstagramIcon`, `TelegramIcon`, `GlobeIcon` |
+| **Tab navigation** | `BotIcon`, `ShieldIcon`, `NetworkIcon`, `CpuIcon`, `UsersIcon` |
+| **Operating systems** | `WindowsIcon`, `MacOSIcon`, `LinuxIcon` |
+| **Shell types** | `PowerShellIcon`, `BashIcon`, `PythonIcon`, `DenoIcon`, `NushellIcon` |
+| **Trust page** | `ShieldLockIcon`, `FolderShieldIcon`, `EyeIcon`, `ShieldCheckIcon` |
+| **AI & OpenFrame** | `AiRobotIcon`, `SparklesIcon`, `NaturalLanguageIcon`, `SmartEscalationIcon` |
+| **Review platforms** | `G2Icon`, `CapterraIcon`, `TrustpilotIcon` |
+| **GitHub stats** | `CustomStarIcon`, `CustomForkIcon`, `CustomLicenseIcon` |
+| **Wildcard exports** | `tool-directory-icons`, `device-type-icons`, `icon-utils` |
+
+Notable alias: `XIcon` is exported as `IconsXIcon` to avoid naming conflicts with `ui/custom-icons`.
 
 ## Usage Example
 
 ```typescript
-// ❌ Deprecated — avoid
-import { CopyIcon, FlamingoLogo } from '@flamingo-stack/openframe-frontend-core/components/icons';
+// ❌ Deprecated — avoid new usage
+import { CopyIcon, GitHubIcon } from '@flamingo-stack/openframe-frontend-core/components/icons';
 
-// ✅ Recommended — use icons-v2 instead
-import { CopyIcon, FlamingoLogo } from '@flamingo-stack/openframe-frontend-core/components/icons-v2';
-```
+// ✅ Recommended — migrate to icons-v2
+import { CopyIcon, GitHubIcon } from '@flamingo-stack/openframe-frontend-core/components/icons-v2';
+```
+
+**Source:** [`components/icons/index.ts`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/components/icons/index.ts)

package/src/components/icons/.vendor-directory-icon.md

@@ -1,32 +1,44 @@
-<!-- source-hash: bb86444b1d7f0013339971e9d47458b3 -->
-A React SVG icon component that renders a vendor directory/search icon, featuring a 3D package/box with a magnifying glass overlay to represent searching through vendor directories.
+<!-- source-hash: 9f5009b34317d5970b3bb61aa96ef597 -->
+SVG icon component representing a vendor directory with a magnifying glass overlay, used for navigation or labeling in the OpenFrame UI.
+
+> **⚠️ Deprecated:** Use icons from `icons-v2-generated` instead.
 
 ## Key Components
 
-- **VendorDirectoryIcon**: Main functional component that renders the SVG icon
-- **VendorDirectoryIconProps**: TypeScript interface defining customizable props including color, dimensions, and CSS classes
+### `VendorDirectoryIcon`
+
+A React functional component rendering an inline SVG icon composed of two paths:
+- A 3D box/package shape representing a vendor directory
+- A search/magnifying glass overlay indicating lookup functionality
+
+**Props (`VendorDirectoryIconProps`):**
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `color` | `string` | `'white'` | SVG fill color |
+| `className` | `string` | `''` | Additional CSS classes |
+| `width` | `number` | `20` | Icon width in pixels |
+| `height` | `number` | `20` | Icon height in pixels |
 
 ## Usage Example
 
 ```typescript
 import { VendorDirectoryIcon } from './vendor-directory-icon';
 
-// Basic usage with defaults (white, 20x20px)
+// Default white icon
 <VendorDirectoryIcon />
 
-// Customized appearance
-<VendorDirectoryIcon 
-  color="#3B82F6" 
-  width={32} 
-  height={32} 
-  className="hover:opacity-80 transition-opacity" 
+// Custom color and size
+<VendorDirectoryIcon
+  color="#6366f1"
+  width={24}
+  height={24}
+  className="mr-2"
 />
-
-// In a button or navigation
-<button className="flex items-center gap-2">
-  <VendorDirectoryIcon color="currentColor" />
-  <span>Search Vendors</span>
-</button>
 ```
 
-The icon uses a fixed 20x20 viewBox that scales proportionally with the width/height props. The SVG contains two main path elements: a 3D isometric package/directory icon and a magnifying glass overlay, making it perfect for vendor search or directory browsing functionality in applications.
+## Notes
+
+- Renders a `20×20` viewBox SVG regardless of `width`/`height` — dimensions scale the output without distorting paths.
+- The `fill` on both SVG paths is driven by the `color` prop, making it straightforward to theme via a single value.
+- Source: [`src/.../vendor-directory-icon.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/src/vendor-directory-icon.tsx)

package/src/components/icons/.x-logo.md

@@ -1,24 +1,40 @@
-<!-- source-hash: 8fc7a78c442730b70f2df9f64dbec86a -->
-SVG icon component rendering the X (formerly Twitter) logo, marked as deprecated in favor of the `icons-v2-generated` icon library.
+<!-- source-hash: 9d0e89ed90b28e45cad1770300716677 -->
+Renders a 24×24 SVG icon representing the X (formerly Twitter) logo, accepting standard SVG props for flexible styling.
 
 ## Key Components
 
-- **`XLogoProps`** — Extends `React.SVGProps<SVGSVGElement>` with an optional `className` prop, allowing full SVG attribute passthrough
-- **`XLogo`** — Deprecated functional component rendering a 24×24 X logo SVG with two filled paths
+### `XLogo`
+**@deprecated** — Use icons from `icons-v2-generated` instead.
+
+A React functional component that renders the X social media logo as an inline SVG.
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `className` | `string` | `''` | CSS class applied to the `<svg>` element |
+| `color` | `string` | `'white'` | Fill color for both SVG paths |
+| `...props` | `React.SVGProps<SVGSVGElement>` | — | Any valid SVG attribute (e.g. `onClick`, `aria-label`) |
 
 ## Usage Example
 
 ```typescript
 import { XLogo } from './x-logo';
 
-// Basic usage
+// Default white icon
 <XLogo />
 
-// With custom class and color
-<XLogo className="social-icon" color="black" />
+// Custom color and size override via SVG props
+<XLogo color="#000000" className="my-icon" width={32} height={32} />
 
-// With SVG passthrough props
-<XLogo width={32} height={32} aria-label="X (Twitter)" />
+// With accessibility label
+<XLogo color="currentColor" aria-label="X (Twitter)" role="img" />
 ```
 
-> **Deprecated:** Use icons from `icons-v2-generated` instead of this component.
+> **Migration note:** This component is deprecated. Replace usages with the equivalent export from `icons-v2-generated`:
+> ```typescript
+> // Preferred
+> import { XIcon } from '@/icons-v2-generated';
+> ```
+
+## Source
+
+[`x-logo.tsx`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/x-logo.tsx)

package/src/components/icons-v2-generated/.index.md

@@ -1,52 +1,41 @@
-<!-- source-hash: 256f84597b248eb290145454cccf170b -->
-Barrel export file that re-exports all icon components from their respective category modules, providing a single entry point for the entire icon library.
+<!-- source-hash: 23823569c4e8297fd22fb192a9801927 -->
+Central barrel export file that re-exports all icon categories from the icon library, providing a single entry point for consuming the complete icon set.
 
 ## Key Components
 
-All exports are organized into the following categories:
+All exports are organized into the following thematic categories:
 
 | Category | Module |
 |---|---|
-| Alphabet | `./alphabet` |
-| Arrows | `./arrows` |
-| Audio & Visual | `./audio-and-visual` |
-| Brand Logos | `./brand-logos` |
-| Buildings | `./buildings` |
-| Charts | `./charts` |
-| Clothes | `./clothes` |
-| Coding | `./coding` |
-| Communication | `./communication` |
-| Date & Time | `./date-and-time` |
-| Design | `./design` |
-| Devices | `./devices` |
-| Documents | `./documents` |
-| Finance | `./finance` |
-| Food & Drinks | `./food-and-drinks` |
-| Health | `./health` |
-| Household | `./household` |
-| Interface | `./interface` |
-| Loaders | `./loaders` |
-| Map & Travel | `./map-and-travel` |
-| Media Playback | `./media-playback` |
-| Numbers | `./number` |
-| School | `./school` |
-| Security | `./security` |
-| Shopping | `./shopping` |
-| Signs & Symbols | `./signs-and-symbols` |
-| Sort & Filter | `./sort-and-filter` |
-| Sport | `./sport` |
-| Text Editor | `./text-editor` |
-| Users | `./users` |
-| Vehicles & Delivery | `./vehicles-and-delivery` |
-| Weather & Nature | `./weather-and-nature` |
+| Alphabet & Numbers | `alphabet`, `number` |
+| UI & Interface | `interface`, `loaders`, `sort-and-filter`, `text-editor` |
+| Media & Communication | `audio-and-visual`, `communication`, `media-playback` |
+| Branding & Logos | `brand-logos`, `logos` |
+| Documents & Coding | `documents`, `coding` |
+| People & Shopping | `users`, `shopping`, `clothes` |
+| Travel & Vehicles | `map-and-travel`, `vehicles-and-delivery`, `buildings` |
+| Data & Finance | `charts`, `finance` |
+| Health & Lifestyle | `health`, `household`, `food-and-drinks`, `sport`, `school` |
+| Nature & Environment | `weather-and-nature` |
+| Utility | `arrows`, `design`, `devices`, `date-and-time`, `security`, `signs-and-symbols` |
 
 ## Usage Example
 
 ```typescript
-// Import any icon directly from the root index
-import { ArrowRight, ShieldCheck, UserCircle, BellIcon } from '@/components/icons';
+// Import any icon directly from the library root
+import {
+  IconArrowRight,
+  IconShoppingCart,
+  IconCloudRain,
+  IconUser,
+} from '@openframe-oss-lib/icons';
 
-// Use in a React/Vue component
-<ArrowRight className="w-4 h-4" />
-<ShieldCheck className="text-green-500" />
-```
+// Or import everything (tree-shaking recommended)
+import * as Icons from '@openframe-oss-lib/icons';
+```
+
+> **Tip:** Bundlers like Vite and webpack support tree-shaking on barrel files, so only the icons you import will be included in your final bundle.
+
+## Source
+
+[`index.ts`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/index.ts)

package/src/components/icons-v2-generated/brand-logos/.index.md

@@ -1,37 +1,43 @@
-<!-- source-hash: e6afc9b85ea10202c2ceb37c9ce04360 -->
-Barrel export file that re-exports all brand and third-party logo icon components from their individual modules, providing a single import entry point for the icons library.
+<!-- source-hash: 4d6552da02cf57fbcf6bc82eb08acbbe -->
+Central barrel export file for the brand/logo icon collection, re-exporting all named icon components from their individual modules.
 
 ## Key Components
 
-A flat collection of named icon exports organized by brand/platform category:
+This file aggregates **90+ brand and platform icon components** across several categories:
 
-| Category | Icons |
-|----------|-------|
-| **Adobe** | `AdobeAeIcon`, `AdobeAiIcon`, `AdobePdfIcon`, `AdobeIdIcon`, `AdobePrIcon`, `AdobePsIcon`, `AdobeXdIcon` |
-| **Apple** | `AppleIcon`, `AppleIncIcon`, `AppleLogoIcon`, `AppStoreIcon` |
-| **Google** | `GoogleIcon`, `GoogleLogoIcon`, `GoogleDriveIcon`, `GooglePlayIcon`, `GoogleSheetsIcon`, `GoogleGeminiLogoIcon` |
-| **Microsoft** | `MicrosoftLogoIcon`, `MicrosoftLogoGreyIcon`, `Office365LogoIcon`, `WindowsIcon`, `WindowsLogoIcon` |
-| **AI Platforms** | `AnthropicLogoIcon`, `GeminiLogoIcon`, `OpenaiLogoIcon` (+ grey variants) |
-| **Social** | `FacebookIcon`, `InstagramIcon`, `LinkedinIcon`, `TwitterIcon`, `TwitterXIcon`, `TiktokIcon`, `YoutubeIcon` |
-| **MSP/IT Tools** | `MeshcentralLogoIcon`, `FleetMdmLogoIcon`, `OsqueryLogoIcon`, `PowershellLogoIcon` |
-| **Dev Tools** | `GithubIcon`, `FigmaIcon`, `FramerIcon`, `TrelloIcon`, `ClickupLogoIcon` |
+| Category | Examples |
+|---|---|
+| Adobe Suite | `AdobeAeIcon`, `AdobeAiIcon`, `AdobePsIcon`, `AdobeXdIcon` |
+| AI Platforms | `AnthropicLogoIcon`, `GeminiLogoIcon`, `OpenaiLogoIcon` |
+| Apple / Google | `AppleIcon`, `GoogleIcon`, `GooglePlayIcon`, `AppStoreIcon` |
+| Microsoft / Azure | `MicrosoftLogoIcon`, `AzureAdLogoIcon`, `Office365LogoIcon` |
+| Social Media | `TwitterXIcon`, `LinkedinIcon`, `InstagramIcon`, `TiktokIcon` |
+| Dev / IT Tools | `GithubIcon`, `FleetMdmLogoIcon`, `MeshcentralLogoIcon`, `OsqueryLogoIcon` |
+| Productivity | `ClickupLogoIcon`, `HubspotLogoIcon`, `TrelloIcon`, `SlackLogoIcon` |
 
-> Many brands include both a standard and a `Grey` variant (e.g., `SlackLogoIcon` / `SlackLogoGreyIcon`), useful for active/inactive states.
+Many brands include both a standard and a grey variant (e.g., `SlackLogoIcon` / `SlackLogoGreyIcon`), useful for active/inactive or colored/monochrome UI states.
 
 ## Usage Example
 
 ```typescript
-// Import one or many icons from the single barrel entry point
+// Import individual icons as needed
 import {
   GithubIcon,
   SlackLogoIcon,
   SlackLogoGreyIcon,
   OpenaiLogoIcon,
-} from '@/components/icons/brands';
+  WindowsLogoGreyIcon,
+} from '@openframe-oss-lib/icons/brands';
 
 // Use in a React/Vue component
-export function IntegrationBadge({ active }: { active: boolean }) {
+function IntegrationBadge({ active }: { active: boolean }) {
   const SlackIcon = active ? SlackLogoIcon : SlackLogoGreyIcon;
-  return <SlackIcon className="w-6 h-6" />;
+  return <SlackIcon width={24} height={24} />;
 }
-```
+```
+
+## Notes
+
+- Grey variants (e.g., `*LogoGreyIcon`) are ideal for disabled, inactive, or muted UI states.
+- All icons are individually tree-shakeable — only imported icons are included in your bundle.
+- Source: [`index.ts`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/index.ts)

package/src/components/icons-v2-generated/communication/.index.md

@@ -1,39 +1,35 @@
-<!-- source-hash: 155d73e9306c860e0982599d8e1c76b7 -->
-Barrel export file that re-exports all communication-related SVG icon components from their individual modules, providing a single entry point for the icons category.
+<!-- source-hash: da41026faa599a0c75a37f0a2b5d2b5f -->
+Barrel export file that re-exports all communication-related icon components from their individual modules, providing a single import point for the icon library's communication category.
 
 ## Key Components
 
-This file exports **79 icon components** across several communication categories:
+This file exports **80 icon components** organized into logical groups:
 
-| Category | Icons |
-|----------|-------|
-| **Call** | `CallIcon`, `CallInboundIcon`, `CallOutboundIcon`, `CallRingingIcon`, `CallHangupIcon`, `CallMissed01Icon`, `CallMissed02Icon`, `CallPauseIcon`, `CallLockIcon`, `CallUnlockIcon`, `CallSignalIcon`, `CallOffIcon`, `CallMinusIcon`, `CallPlusIcon`, `CallXmarkIcon` |
-| **Chat** | `ChatBlankIcon`, `ChatCheckIcon`, `ChatEllipsisIcon`, `ChatFaceIcon`, `ChatHeartIcon`, `ChatLanguageIcon`, `ChatOffIcon`, `ChatPlusIcon`, `ChatQuoteIcon`, `ChatStarIcon`, `ChatTextIcon`, `ChatVoicemailIcon`, `ChatXmarkIcon` |
-| **Email** | `EmailIcon`, `EmailCheckIcon`, `EmailOpenIcon`, `EmailLockIcon`, `EmailHeartIcon`, `EmailShieldIcon`, `EmailSearchIcon`, `EmailArrowDownIcon`, `EmailArrowUpIcon`, `EmailBannedIcon`, `EmailReadingIcon`, `EmailReadingHeartIcon`, `EmailsIcon` |
-| **Message** | `MessageBlankIcon`, `MessageCheckIcon`, `MessageRobotIcon`, `MessageTextIcon`, `MessageVoicemailIcon`, `MessagesIcon`, `MessageXmarkIcon` |
-| **Inbox** | `InboxIcon`, `InboxArrowDownIcon`, `InboxArrowUpIcon`, `InboxContentIcon` |
-| **Misc** | `AtSignIcon`, `DeleteIcon`, `DialpadIcon`, `MailboxIcon`, `Send01Icon`, `Send02Icon`, `Send03Icon`, `StoryAddIcon`, `TelephoneRetroIcon`, `VoicemailIcon` |
+| Group | Icons |
+|---|---|
+| **Call** | `CallIcon`, `CallHangupIcon`, `CallInboundIcon`, `CallOutboundIcon`, `CallMissed01Icon`, `CallMissed02Icon`, `CallRingingIcon`, `CallSignalIcon`, `CallLockIcon`, `CallUnlockIcon`, `CallPauseIcon`, `CallPlusIcon`, `CallMinusIcon`, `CallOffIcon`, `CallXmarkIcon` |
+| **Chat** | `ChatBlankIcon`, `ChatCheckIcon`, `ChatEllipsisIcon`, `ChatExclamationIcon`, `ChatFaceIcon`, `ChatHeartIcon`, `ChatIndicatorIcon`, `ChatLanguageIcon`, `ChatMinusIcon`, `ChatOffIcon`, `ChatPlusIcon`, `ChatQuestionIcon`, `ChatQuoteIcon`, `ChatStarIcon`, `ChatTextIcon`, `ChatVoicemailIcon`, `ChatXmarkIcon`, `ChatsIcon` |
+| **Email** | `EmailIcon`, `EmailArrowDownIcon`, `EmailArrowUpIcon`, `EmailBannedIcon`, `EmailCheckIcon`, `EmailHeartIcon`, `EmailLockIcon`, `EmailOpenIcon`, `EmailReadingIcon`, `EmailReadingHeartIcon`, `EmailSearchIcon`, `EmailShieldIcon`, `EmailsIcon` |
+| **Message** | `MessageBlankIcon`, `MessageCheckIcon`, `MessageEllipsisIcon`, `MessageExclamationIcon`, `MessageFaceIcon`, `MessageHeartIcon`, `MessageIndicatorIcon`, `MessageLanguageIcon`, `MessageMinusIcon`, `MessageOffIcon`, `MessagePlusIcon`, `MessageQuestionIcon`, `MessageQuoteIcon`, `MessageRobotIcon`, `MessageStarIcon`, `MessageTextIcon`, `MessageVoicemailIcon`, `MessageXmarkIcon`, `MessagesIcon` |
+| **Inbox** | `InboxIcon`, `InboxArrowDownIcon`, `InboxArrowUpIcon`, `InboxContentIcon`, `MailboxIcon` |
+| **Misc** | `AtSignIcon`, `DeleteIcon`, `DialpadIcon`, `Send01Icon`, `Send02Icon`, `Send03Icon`, `StoryAddIcon`, `TelephoneRetroIcon`, `VoicemailIcon`, `MingoMonochromeIcon` |
 
 ## Usage Example
 
 ```typescript
-// Import specific icons from the barrel
+// Import individual icons as needed
+import { CallIcon, MessageTextIcon, EmailIcon } from '@openframe/icons/communication';
+
+// Or import multiple icons
 import {
-  CallIcon,
-  EmailIcon,
-  MessageRobotIcon,
-  ChatHeartIcon
-} from '@/components/icons/communication';
-
-// Use in a React component
-function SupportPanel() {
-  return (
-    <div>
-      <CallIcon />
-      <EmailIcon />
-      <MessageRobotIcon /> {/* Mingo AI indicator */}
-      <ChatHeartIcon />
-    </div>
-  );
-}
-```
+  CallRingingIcon,
+  ChatCheckIcon,
+  EmailOpenIcon,
+  InboxIcon,
+  Send01Icon
+} from '@openframe/icons/communication';
+```
+
+## Source
+
+[`index.ts`](https://github.com/flamingo-stack/openframe-oss-lib/blob/main/index.ts)