@flamingo-stack/openframe-frontend-core 0.0.213 → 0.0.214

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

@@ -1,39 +0,0 @@
-<!-- source-hash: bdc3702e0fe4e374acdfea6c089ef641 -->
-A React SVG icon component that renders a fleet/grid pattern with six circles arranged in a 3x2 layout, commonly used to represent multiple items, applications, or a dashboard grid.
-
-## Key Components
-
-- **FleetIcon** - Forwardable React component that renders an SVG with six circles
-- **FleetIconProps** - TypeScript interface extending SVGProps with custom size, color, and className options
-- **Default Props** - Size defaults to 16px, color defaults to white
-
-## Usage Example
-
-```typescript
-import { FleetIcon } from './fleet-icon'
-
-// Basic usage
-<FleetIcon />
-
-// Custom size and color
-<FleetIcon size={24} color="#3b82f6" />
-
-// With custom styling
-<FleetIcon 
-  size={32} 
-  color="currentColor" 
-  className="hover:opacity-80 transition-opacity" 
-/>
-
-// With ref forwarding
-const iconRef = useRef<SVGSVGElement>(null)
-<FleetIcon ref={iconRef} size={20} />
-
-// As a clickable element
-<button onClick={handleClick}>
-  <FleetIcon size={18} color="#059669" />
-  <span>View Applications</span>
-</button>
-```
-
-The component uses a 14x14 viewBox with circles positioned at coordinates that create a visually balanced grid pattern. It supports all standard SVG props through prop spreading and integrates with the project's `cn` utility for className merging.

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

@@ -1,35 +0,0 @@
-<!-- source-hash: f32c8e718257f79d463e31e96d749bac -->
-A React SVG icon component for MeshCentral remote access software, providing a scalable vector graphic representation with customizable styling properties.
-
-## Key Components
-
-- **`MeshCentralIcon`** - Main React functional component that renders the MeshCentral logo as an SVG
-- **`MeshCentralIconProps`** - TypeScript interface defining component props:
-  - `className?: string` - Optional CSS classes for styling
-  - `size?: number | string` - Icon dimensions (default: 16px)
-  - `color?: string` - Fill color for the SVG paths (default: 'white')
-
-## Usage Example
-
-```typescript
-import { MeshCentralIcon } from './meshcentral-icon';
-
-// Basic usage with defaults (16px, white)
-<MeshCentralIcon />
-
-// Customized icon
-<MeshCentralIcon 
-  size={32}
-  color="#2563eb" 
-  className="hover:opacity-80 transition-opacity"
-/>
-
-// Responsive icon
-<MeshCentralIcon 
-  size="2rem"
-  color="currentColor"
-  className="text-blue-600 dark:text-blue-400"
-/>
-```
-
-The component renders a detailed SVG with multiple path elements forming the MeshCentral logo, using a 512x512 viewBox for crisp scaling at any size. The SVG structure maintains aspect ratio and provides clean vector graphics suitable for both light and dark themes.

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

@@ -1,34 +0,0 @@
-<!-- source-hash: 3b5cb1abf955acf4d62987a1d45ff2c8 -->
-A React component that renders a customizable refresh/reload SVG icon with configurable size, color, and styling properties.
-
-## Key Components
-
-- **RefreshIconProps**: Interface defining optional props for customization
-  - `className` - CSS class name for styling
-  - `size` - Icon dimensions in pixels (default: 22)
-  - `color` - Fill color for the icon (default: '#888888')
-- **RefreshIcon**: Main component that renders a circular refresh arrow SVG
-
-## Usage Example
-
-```typescript
-import { RefreshIcon } from './refresh-icon';
-
-// Basic usage with defaults
-<RefreshIcon />
-
-// Customized refresh icon
-<RefreshIcon 
-  className="my-refresh-icon" 
-  size={32} 
-  color="#007bff" 
-/>
-
-// In a button component
-<button onClick={handleRefresh}>
-  <RefreshIcon size={18} color="#ffffff" />
-  Refresh Data
-</button>
-```
-
-The component renders a clean, modern refresh icon with two curved arrows forming a circular pattern, perfect for refresh buttons, reload indicators, or sync status displays.

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

@@ -1,35 +0,0 @@
-<!-- source-hash: b37c82db332e759e3fdf73bead000401 -->
-A React component that renders an SVG tactical icon with customizable size, styling, and color properties.
-
-## Key Components
-
-- **TacticalIcon**: A functional React component that renders a tactical/military-style icon as an SVG
-- **Props Interface**: 
-  - `size?: number` - Controls width and height (default: 16px)
-  - `className?: string` - Optional CSS class for styling
-  - `color?: string` - Fill color for the icon (default: 'white')
-
-## Usage Example
-
-```typescript
-import { TacticalIcon } from './tactical-icon'
-
-// Basic usage with defaults
-<TacticalIcon />
-
-// Customized icon
-<TacticalIcon 
-  size={24} 
-  color="#FF0000" 
-  className="tactical-indicator" 
-/>
-
-// Large icon with custom styling
-<TacticalIcon 
-  size={48} 
-  color="currentColor" 
-  className="hover:opacity-75 transition-opacity" 
-/>
-```
-
-The component uses a complex SVG path to create a detailed tactical symbol, making it suitable for military applications, gaming interfaces, or strategic planning tools. The icon is scalable and maintains its proportions at any size while allowing full customization of appearance through standard CSS properties.

package/src/components/ui/.button.md

@@ -1,69 +0,0 @@
-<!-- source-hash: c4b8d37ede69f03fe1bce212068811c0 -->
-A reusable button component with comprehensive variant support, icon handling, and Next.js navigation integration for the OpenFrame design system.
-
-## Key Components
-
-- **Button**: Main React component with forwardRef support
-- **buttonVariants**: CVA-based style variants with 20+ predefined styles
-- **ButtonProps**: TypeScript interface extending HTML button attributes
-- **Navigation Integration**: Built-in Next.js router and Link component support
-
-## Usage Example
-
-```typescript
-import { Button } from './button'
-import { ExternalLink, Plus } from 'lucide-react'
-
-// Primary CTA button
-<Button variant="primary" size="lg">
-  Get Started
-</Button>
-
-// Button with icons
-<Button 
-  variant="secondary" 
-  leftIcon={<Plus />} 
-  rightIcon={<ExternalLink />}
->
-  Add Item
-</Button>
-
-// Navigation button with Next.js Link
-<Button 
-  variant="outline" 
-  href="/dashboard"
-  openInNewTab={true}
->
-  Open Dashboard
-</Button>
-
-// Icon-only button
-<Button 
-  variant="ghost" 
-  size="icon"
-  centerIcon={<Plus />}
-  aria-label="Add item"
-/>
-
-// Loading state
-<Button 
-  variant="primary" 
-  loading={true}
-  disabled={true}
->
-  Processing...
-</Button>
-
-// Custom styling with dual navigation
-<Button
-  variant="flamingo-primary"
-  navigateUrl="/dashboard"
-  showExternalLinkOnHover={true}
-  alignment="left"
-  noPadding={true}
->
-  Custom Action
-</Button>
-```
-
-The component supports 20+ variants (primary, secondary, outline, ghost, destructive, etc.), multiple sizes, accessibility features, and advanced navigation patterns including dual-mode navigation and external link handling.

package/src/components/ui/.log-table-row.md

@@ -1,47 +0,0 @@
-<!-- source-hash: ef91f8df50a8d9fa66e1d939cdc2b6a5 -->
-A responsive table row component for displaying log entries with detailed information and action controls in the Flamingo/OpenFrame system.
-
-## Key Components
-
-- **LogTableRow**: Main component with responsive desktop/mobile layouts
-- **LogTableRowProps**: Interface defining log entry structure (ID, timestamp, status, source, device, description)
-- **FleetMDMIcon**: Internal SVG icon component for MDM source visualization
-- **StatusTag integration**: Uses status tags with variant-based styling
-- **Button components**: Action buttons for "more options" and "log details"
-
-## Usage Example
-
-```typescript
-import { LogTableRow } from './log-table-row'
-
-function LogsList() {
-  return (
-    <div className="space-y-2">
-      <LogTableRow
-        logId="LOG-001"
-        timestamp="2024-01-15 14:30:22"
-        status={{
-          label: "Success",
-          variant: "success"
-        }}
-        source={{
-          name: "Fleet MDM",
-          icon: <FleetMDMIcon />
-        }}
-        device={{
-          name: "MacBook-Pro-123",
-          organization: "Acme Corp"
-        }}
-        description={{
-          title: "Device enrollment completed",
-          details: "Successfully enrolled device into MDM system"
-        }}
-        onMoreClick={() => console.log('More actions clicked')}
-        onDetailsClick={() => console.log('View details clicked')}
-      />
-    </div>
-  )
-}
-```
-
-The component automatically switches between detailed desktop layout (showing all fields in separate columns) and compact mobile layout (condensed information with essential actions).

package/src/components/ui/.selectable-device-card.md

@@ -1,46 +0,0 @@
-<!-- source-hash: ff9f153f95ede31a79f3bd2078852119 -->
-A client-side React component that renders a selectable card for displaying device information with hover states and selection feedback.
-
-## Key Components
-
-- **`SelectableDeviceCardProps`** - Interface defining component props including title, device type, icon, subtitle, selection state, and click handler
-- **`SelectableDeviceCard`** - Main functional component that renders an interactive device card with visual feedback for selection states
-
-## Key Features
-
-- **Device Type Icons** - Automatically displays appropriate icons based on device type or accepts custom icons
-- **Selection States** - Visual distinction between selected and unselected states with different color schemes
-- **Hover Effects** - Smooth transitions and hover states for better user interaction
-- **Responsive Design** - Adaptive sizing for icons and text across different screen sizes
-- **Accessibility** - Proper click handling and visual feedback for selection
-
-## Usage Example
-
-```typescript
-import { SelectableDeviceCard } from './selectable-device-card'
-import { DeviceType } from '../icons/device-type-icons/get-device-type-icon'
-
-function DeviceList() {
-  const [selectedDevice, setSelectedDevice] = useState<string | null>(null)
-
-  return (
-    <div className="space-y-2">
-      <SelectableDeviceCard
-        title="MacBook Pro"
-        type={DeviceType.LAPTOP}
-        subtitle="Connected via WiFi"
-        selected={selectedDevice === 'macbook'}
-        onSelect={() => setSelectedDevice('macbook')}
-      />
-      
-      <SelectableDeviceCard
-        title="iPhone 15"
-        type={DeviceType.MOBILE}
-        subtitle="Last seen: 2 hours ago"
-        selected={selectedDevice === 'iphone'}
-        onSelect={() => setSelectedDevice('iphone')}
-      />
-    </div>
-  )
-}
-```

package/src/hooks/.api-hooks-stub.md

@@ -1,45 +0,0 @@
-<!-- source-hash: f4fc25c5acc64d9e92e2f93976f24738 -->
-A hook injection system that enables ui-kit components to access API hooks from consuming projects while providing fallback stub implementations.
-
-## Key Components
-
-**Type Definitions:**
-- `UseVendorsHook` - Type for vendor data fetching hook with filtering and pagination options
-- `UseSubcategoryCountHook` - Type for subcategory count fetching hook
-
-**Hook Management:**
-- `setUseVendorsHook()` - Injects vendor hook implementation from main project
-- `setUseSubcategoryCountHook()` - Injects subcategory count hook implementation
-- `useVendors()` - Consumer-facing hook with fallback to stub data
-- `useSubcategoryCountByCategory()` - Consumer-facing hook with fallback to stub data
-
-## Usage Example
-
-**In main project (hook injection):**
-```typescript
-import { setUseVendorsHook, setUseSubcategoryCountHook } from '@ui-kit/api-hooks-stub';
-import { useVendors as realUseVendors, useSubcategoryCount } from './api/hooks';
-
-// Setup hooks during app initialization
-setUseVendorsHook(realUseVendors);
-setUseSubcategoryCountHook(useSubcategoryCount);
-```
-
-**In ui-kit components:**
-```typescript
-import { useVendors, useSubcategoryCountByCategory } from './api-hooks-stub';
-
-function VendorList() {
-  const { data, isLoading, error } = useVendors({ 
-    filtering: ['active'], 
-    pageSize: 20 
-  });
-  
-  const subcategoryCount = useSubcategoryCountByCategory('technology');
-  
-  if (isLoading) return <div>Loading...</div>;
-  return <div>{data?.vendors.map(vendor => ...)}</div>;
-}
-```
-
-This pattern allows ui-kit components to remain decoupled from specific API implementations while gracefully degrading to stub data when hooks aren't properly injected.

package/src/hooks/api/.use-product-releases.md

@@ -1,53 +0,0 @@
-<!-- source-hash: 5ef95c525ada086cb9ed9dcf9679709a -->
-A comprehensive set of React Query hooks for managing product releases, providing both public-facing and admin functionality with automatic cache management and toast notifications.
-
-## Key Components
-
-- **Query Key Factory** (`releaseKeys`) - Structured cache key management for React Query
-- **Public Hooks** - `useReleases()`, `useRelease()` for fetching public release data
-- **Admin Query Hooks** - `useAdminReleases()`, `useAdminRelease()` for admin interfaces
-- **Admin Mutation Hooks** - `useCreateRelease()`, `useUpdateRelease()`, `useDeleteRelease()` for CRUD operations
-- **Automatic Cache Invalidation** - Mutations automatically refresh related queries
-- **Toast Integration** - Built-in success/error notifications via `useToast()`
-
-## Usage Example
-
-```typescript
-'use client'
-import { useReleases, useCreateRelease } from './use-product-releases'
-
-function ReleasesPage() {
-  // Fetch releases with filtering
-  const { data: releases, isLoading } = useReleases({
-    tags: ['feature', 'bugfix'],
-    release_status: ['published'],
-    featured: true,
-    limit: 10
-  })
-
-  // Admin create mutation
-  const createRelease = useCreateRelease()
-
-  const handleCreate = async () => {
-    await createRelease.mutateAsync({
-      title: 'New Release',
-      version: '1.2.0',
-      release_type: 'minor',
-      release_status: 'draft'
-    })
-  }
-
-  if (isLoading) return <div>Loading...</div>
-
-  return (
-    <div>
-      {releases?.data.map(release => (
-        <div key={release.slug}>{release.title}</div>
-      ))}
-      <button onClick={handleCreate}>Create Release</button>
-    </div>
-  )
-}
-```
-
-The hooks require `QueryClientProvider` wrapper and should only be used in client components due to the `'use client'` directive.

package/src/stories/.OrganizationSelector.stories.md

@@ -1,42 +0,0 @@
-<!-- source-hash: e98134c8b03bd09e8fc3edeb2e50f64d -->
-A Storybook configuration file defining interactive stories for the OrganizationSelector component, including various states and usage scenarios.
-
-## Key Components
-
-- **Sample Data**: `sampleOrganizations` - Mock data array with 10 fictional organizations for testing
-- **Meta Configuration**: Storybook metadata with component settings, layout, and control types
-- **Story Variants**: Seven different stories showcasing component states and interactions
-- **Interactive Story**: `WithSearchInteractive` - Demonstrates real state management with React hooks
-
-## Usage Example
-
-```typescript
-// Basic story with default props
-export const Default: Story = {
-  args: {
-    organizations: sampleOrganizations,
-    value: '',
-    onValueChange: () => {},
-    placeholder: 'Choose organization',
-    label: 'Organization',
-  },
-}
-
-// Interactive story with state management
-export const WithSearchInteractive: Story = {
-  render: () => {
-    const [value, setValue] = useState('')
-    return (
-      <OrganizationSelector
-        organizations={sampleOrganizations}
-        value={value}
-        onValueChange={setValue}
-        label="Organization"
-        searchable
-      />
-    )
-  },
-}
-```
-
-The stories cover common use cases including default state, search functionality, loading states, disabled state, preselected values, and scenarios with limited data sets.

package/src/stories/.SelectableDeviceCard.stories.md

@@ -1,30 +0,0 @@
-<!-- source-hash: 1a01780173e4f46ca59a5e44727afa17 -->
-Storybook stories configuration file that defines interactive documentation and test cases for the SelectableDeviceCard component, showcasing various states including selection, device types, and group interactions.
-
-## Key Components
-
-- **Meta Configuration**: Storybook metadata with component controls and documentation
-- **Story Variants**: Eight different story configurations demonstrating component states
-- **Interactive Examples**: Stories with React hooks for dynamic selection behavior
-- **Device Type Demos**: Examples for desktop, laptop, server, and mobile device types
-- **Selection Group**: Multi-card selection scenario with state management
-
-## Usage Example
-
-```typescript
-import { SelectableDeviceCard } from './SelectableDeviceCard.stories'
-
-// Basic story usage in Storybook
-const basicExample = Default.args // { title: 'MacBook Pro', type: 'laptop' }
-
-// Interactive story with state
-const interactiveStory = Interactive.render({
-  title: 'My Device',
-  type: 'desktop'
-})
-
-// Selection group pattern
-const selectionGroup = SelectionGroup.decorators[0]()
-```
-
-The stories cover essential use cases including default states, selected states, subtitle variations, different device types (desktop, laptop, server), custom icons, and interactive selection groups. Each story includes proper controls for testing different props and demonstrates real-world usage patterns for device selection interfaces.

package/src/utils/.lite-youtube-embed-stub.md

@@ -1,37 +0,0 @@
-<!-- source-hash: 90b0001b941d30b6c3699508d4981c9a -->
-A lightweight React component that provides YouTube video embedding functionality using a standard iframe approach, serving as a simplified alternative to more complex lite YouTube embed solutions.
-
-## Key Components
-
-- **`LiteYouTubeEmbedProps`** - Interface defining component props including video ID, title, poster image, and styling options
-- **`LiteYouTubeEmbed`** - React functional component that renders a YouTube iframe with proper accessibility and permissions settings
-
-## Usage Example
-
-```typescript
-import { LiteYouTubeEmbed } from './lite-youtube-embed-stub';
-
-function VideoPlayer() {
-  return (
-    <LiteYouTubeEmbed
-      id="dQw4w9WgXcQ"
-      title="Never Gonna Give You Up"
-      className="video-container"
-    />
-  );
-}
-
-// With custom styling
-function StyledVideo() {
-  return (
-    <LiteYouTubeEmbed
-      id="awc-yAnkhIo"
-      title="OpenFrame Demo"
-      poster="custom-thumbnail.jpg"
-      className="w-full aspect-video rounded-lg"
-    />
-  );
-}
-```
-
-The component automatically configures iframe permissions for media playback, autoplay, and fullscreen functionality. While it accepts a `poster` prop in the interface, the current implementation relies on YouTube's default iframe behavior for thumbnail display. This stub version prioritizes simplicity over advanced features like lazy loading or custom poster images.

package/src/utils/.lite-youtube-embed.md

@@ -1,33 +0,0 @@
-<!-- source-hash: fcad50083a3635f489d5b92635164c9a -->
-A lightweight YouTube embed component that displays a thumbnail image with play button overlay, only loading the actual iframe when clicked to improve initial page performance.
-
-## Key Components
-
-- **LiteYouTubeEmbedProps** - Interface defining component props including video ID, title, custom thumbnail URL, and CSS classes
-- **LiteYouTubeEmbed** - Main component that renders either a clickable thumbnail or full YouTube iframe based on load state
-- **handleLoad** - State handler that switches from thumbnail to iframe when user clicks
-
-## Usage Example
-
-```typescript
-import { LiteYouTubeEmbed } from './lite-youtube-embed';
-
-// Basic usage with video ID
-<LiteYouTubeEmbed 
-  id="dQw4w9WgXcQ" 
-  title="Never Gonna Give You Up"
-/>
-
-// With custom thumbnail and styling
-<LiteYouTubeEmbed 
-  id="awc-yAnkhIo" 
-  title="OpenFrame Demo"
-  thumbnail="https://img.youtube.com/vi/awc-yAnkhIo/hqdefault.jpg"
-  className="w-full max-w-2xl mx-auto rounded-lg shadow-lg"
-/>
-
-// Minimal usage
-<LiteYouTubeEmbed id="VIDEO_ID" />
-```
-
-The component automatically uses YouTube's `maxresdefault.jpg` thumbnail if no custom thumbnail is provided, and includes a styled red play button overlay that mimics YouTube's interface. The iframe loads with standard YouTube embed permissions for autoplay, fullscreen, and media controls.