@owlmeans/web-wl 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 OwlMeans Common — Fullstack typescript framework
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,744 @@
+# @owlmeans/web-wl
+
+Web-specific whitelabeling functionality for OwlMeans Common Libraries. This package provides React components and browser-optimized services for implementing client-side whitelabeling, enabling web applications to dynamically customize branding, theming, and content based on entity-specific configurations.
+
+## Overview
+
+The `@owlmeans/web-wl` package serves as the web-specific implementation of the OwlMeans Whitelabeling Subsystem, designed for React-based frontend applications with focus on dynamic branding and user experience customization. It provides:
+
+- **Web Whitelabeling Service**: Browser-optimized service for loading and caching whitelabeling data
+- **React Components**: React components for whitelabel-aware UI elements
+- **Caching Strategy**: Efficient client-side caching of whitelabeling configurations
+- **API Integration**: Seamless integration with server-side whitelabeling providers
+- **Performance Optimization**: Optimized loading and rendering of dynamic branding content
+
+This package follows the OwlMeans "quadra" pattern as the **web** implementation, complementing:
+- **@owlmeans/wled**: Common whitelabeling declarations and base functionality *(base package)*
+- **@owlmeans/client-wl**: Base client whitelabeling functionality
+- **@owlmeans/server-wl**: Server-side whitelabeling implementation
+- **@owlmeans/web-wl**: Web browser whitelabeling implementation *(this package)*
+
+## Installation
+
+```bash
+npm install @owlmeans/web-wl
+```
+
+## Dependencies
+
+This package requires and integrates with:
+- `@owlmeans/wled`: Core whitelabeling types and modules
+- `@owlmeans/client`: Base client functionality
+- `@owlmeans/client-module`: Client module system for API calls
+- `@owlmeans/context`: Context management and service registration
+- React: Peer dependency for web components
+
+## Key Concepts
+
+### Web Whitelabeling Service
+Browser-optimized service that:
+- **Loads Whitelabeling Data**: Fetches entity-specific branding from server APIs
+- **Caches Configurations**: Implements client-side caching for performance
+- **Extracts Data**: Provides convenient access to specific whitelabeling data types
+- **Handles Errors**: Graceful error handling for failed whitelabeling requests
+
+### React Component Integration
+React components that automatically adapt to whitelabeling configurations:
+- **Dynamic Branding**: Components that change appearance based on entity branding
+- **Conditional Rendering**: Show/hide content based on whitelabeling rules
+- **Theme Integration**: Automatic theme switching based on entity configurations
+- **Performance**: Optimized rendering with minimal re-renders
+
+### Client-side Caching
+Efficient caching strategy:
+- **Memory Caching**: In-memory cache for frequently accessed configurations
+- **Cache Invalidation**: Smart cache invalidation strategies
+- **Performance**: Reduced API calls and improved user experience
+
+## API Reference
+
+### Factory Functions
+
+#### `makeWlService(alias?: string): WlWebService`
+
+Creates a web whitelabeling service instance with caching capabilities.
+
+```typescript
+import { makeWlService } from '@owlmeans/web-wl'
+
+const wlService = makeWlService('main-wl')
+context.registerService(wlService)
+```
+
+**Parameters:**
+- `alias`: Optional service alias (defaults to `DEFAULT_ALIAS`)
+
+**Returns:** `WlWebService` - Web whitelabeling service instance
+
+### Core Interfaces
+
+#### `WlWebService`
+
+Web-specific whitelabeling service interface.
+
+```typescript
+interface WlWebService extends InitializedService {
+  load: (entityId: string) => Promise<ProvidedWLSet>
+  extract: <T>(key: string, set: ProvidedWLSet) => T | undefined
+}
+```
+
+**Methods:**
+
+**`load(entityId: string): Promise<ProvidedWLSet>`**
+- **Purpose**: Load complete whitelabeling data set for an entity
+- **Parameters**: `entityId` - Entity identifier
+- **Returns**: Promise resolving to whitelabeling data set
+- **Behavior**: 
+  - Checks cache first for existing data
+  - Makes API call to server if not cached
+  - Caches successful responses
+  - Returns comprehensive whitelabeling data
+
+**`extract<T>(key: string, set: ProvidedWLSet): T | undefined`**
+- **Purpose**: Extract specific whitelabeling data type from a data set
+- **Parameters**: 
+  - `key` - Provider key (e.g., 'company-provider', 'styles-provider')
+  - `set` - Whitelabeling data set
+- **Returns**: Extracted data of type T or undefined if not found
+- **Usage**: Convenient access to specific provider data
+
+#### `ProvidedWLSet`
+
+Collection of whitelabeling data from multiple providers.
+
+```typescript
+interface ProvidedWLSet<T extends Record<string, any> = Record<string, any>> {
+  [providerKey: string]: ProvidedWL<T>
+}
+```
+
+#### `Config`
+
+Configuration interface for web whitelabeling.
+
+```typescript
+interface Config extends ClientConfig {
+  // Inherits client configuration
+  // Plus whitelabeling-specific web settings
+}
+```
+
+#### `Context<C extends Config = Config>`
+
+Web context interface with whitelabeling support.
+
+```typescript
+interface Context<C extends Config = Config> extends ClientContext<C> {
+  // Inherits client context functionality
+  // With typed configuration for whitelabeling
+}
+```
+
+### React Components
+
+#### Whitelabeling Provider Component
+
+```typescript
+interface WlProviderProps {
+  entityId: string                    // Entity to load whitelabeling for
+  children: React.ReactNode          // Child components
+  fallback?: React.ReactNode         // Fallback content while loading
+  onError?: (error: Error) => void   // Error handler
+}
+
+const WlProvider: FC<WlProviderProps> = (props) => { /* ... */ }
+```
+
+#### Whitelabel-aware Components
+
+```typescript
+interface WlBrandProps {
+  entityId: string
+  type: 'square' | 'wide'           // Logo type
+  alt?: string                      // Alt text
+  fallback?: React.ReactNode        // Fallback if no logo
+}
+
+const WlBrand: FC<WlBrandProps> = (props) => { /* ... */ }
+
+interface WlThemeProps {
+  entityId: string
+  children: React.ReactNode
+}
+
+const WlTheme: FC<WlThemeProps> = (props) => { /* ... */ }
+```
+
+### Constants
+
+#### `DEFAULT_ALIAS`
+
+Default service alias for whitelabeling service.
+
+```typescript
+const DEFAULT_ALIAS = 'wl-web-service'
+```
+
+## Usage Examples
+
+### Basic Web Whitelabeling Setup
+
+```typescript
+import { makeWlService } from '@owlmeans/web-wl'
+import { makeWebContext } from '@owlmeans/web-client'
+
+// Create web context
+const context = makeWebContext(config)
+
+// Create and register whitelabeling service
+const wlService = makeWlService()
+context.registerService(wlService)
+
+// Initialize context
+await context.configure().init()
+
+// Load whitelabeling data for an entity
+const entityId = 'company-123'
+const whitelabelData = await wlService.load(entityId)
+
+console.log('Whitelabeling data:', whitelabelData)
+```
+
+### React Component Integration
+
+```typescript
+import React, { useEffect, useState } from 'react'
+import { useContext } from '@owlmeans/client'
+import type { WlWebService, ProvidedWLSet } from '@owlmeans/web-wl'
+import type { CompanyInfo, CustomStyles, CustomMedia } from '@owlmeans/wled'
+
+interface WhitelabeledAppProps {
+  entityId: string
+  children: React.ReactNode
+}
+
+const WhitelabeledApp: React.FC<WhitelabeledAppProps> = ({ entityId, children }) => {
+  const context = useContext()
+  const [whitelabelData, setWhitelabelData] = useState<ProvidedWLSet | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<Error | null>(null)
+
+  useEffect(() => {
+    const loadWhitelabeling = async () => {
+      try {
+        setLoading(true)
+        const wlService = context.service<WlWebService>('wl-web-service')
+        const data = await wlService.load(entityId)
+        setWhitelabelData(data)
+      } catch (err) {
+        setError(err as Error)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    loadWhitelabeling()
+  }, [entityId, context])
+
+  if (loading) {
+    return <div>Loading branding...</div>
+  }
+
+  if (error) {
+    return <div>Error loading branding: {error.message}</div>
+  }
+
+  if (!whitelabelData) {
+    return <div>No branding data available</div>
+  }
+
+  // Extract specific whitelabeling data
+  const wlService = context.service<WlWebService>('wl-web-service')
+  const companyInfo = wlService.extract<CompanyInfo>('company-provider', whitelabelData)
+  const customStyles = wlService.extract<CustomStyles>('styles-provider', whitelabelData)
+  const customMedia = wlService.extract<CustomMedia>('media-provider', whitelabelData)
+
+  return (
+    <WhitelabelThemeProvider styles={customStyles}>
+      <div className="whitelabeled-app">
+        <header>
+          {customMedia?.brand?.wideLogo && (
+            <img 
+              src={customMedia.brand.wideLogo} 
+              alt={companyInfo?.fullName || 'Logo'} 
+              className="company-logo"
+            />
+          )}
+          <h1>{companyInfo?.fullName || 'Application'}</h1>
+        </header>
+        
+        <main>
+          {children}
+        </main>
+        
+        <footer>
+          <p>{companyInfo?.description}</p>
+        </footer>
+      </div>
+    </WhitelabelThemeProvider>
+  )
+}
+```
+
+### Dynamic Theme Application
+
+```typescript
+import React, { useMemo } from 'react'
+import { ThemeProvider, createTheme } from '@mui/material/styles'
+import type { CustomStyles } from '@owlmeans/wled'
+
+interface WhitelabelThemeProviderProps {
+  styles?: CustomStyles
+  children: React.ReactNode
+}
+
+const WhitelabelThemeProvider: React.FC<WhitelabelThemeProviderProps> = ({ 
+  styles, 
+  children 
+}) => {
+  const theme = useMemo(() => {
+    const baseTheme = createTheme()
+
+    if (!styles) {
+      return baseTheme
+    }
+
+    return createTheme({
+      ...baseTheme,
+      palette: {
+        ...baseTheme.palette,
+        primary: {
+          main: styles.colors.primaryColor,
+          contrastText: '#ffffff'
+        },
+        secondary: {
+          main: styles.colors.secondaryColor || baseTheme.palette.secondary.main
+        },
+        background: {
+          default: styles.colors.primaryBackground || baseTheme.palette.background.default,
+          paper: styles.colors.secondaryBackground || baseTheme.palette.background.paper
+        }
+      },
+      typography: {
+        ...baseTheme.typography,
+        fontFamily: styles.font.fontFamily || baseTheme.typography.fontFamily,
+        fontSize: styles.font.basicSize || baseTheme.typography.fontSize
+      }
+    })
+  }, [styles])
+
+  return (
+    <ThemeProvider theme={theme}>
+      {children}
+    </ThemeProvider>
+  )
+}
+```
+
+### Whitelabel-aware Components
+
+```typescript
+import React from 'react'
+import { useContext } from '@owlmeans/client'
+import type { WlWebService } from '@owlmeans/web-wl'
+import type { CustomMedia } from '@owlmeans/wled'
+
+interface CompanyLogoProps {
+  entityId: string
+  type?: 'square' | 'wide'
+  className?: string
+  alt?: string
+}
+
+const CompanyLogo: React.FC<CompanyLogoProps> = ({ 
+  entityId, 
+  type = 'wide', 
+  className,
+  alt = 'Company Logo'
+}) => {
+  const context = useContext()
+  const [logoUrl, setLogoUrl] = React.useState<string | null>(null)
+
+  React.useEffect(() => {
+    const loadLogo = async () => {
+      try {
+        const wlService = context.service<WlWebService>('wl-web-service')
+        const whitelabelData = await wlService.load(entityId)
+        const mediaData = wlService.extract<CustomMedia>('media-provider', whitelabelData)
+        
+        const logo = type === 'square' 
+          ? mediaData?.brand?.squareLogo 
+          : mediaData?.brand?.wideLogo
+          
+        setLogoUrl(logo || null)
+      } catch (error) {
+        console.error('Failed to load company logo:', error)
+        setLogoUrl(null)
+      }
+    }
+
+    loadLogo()
+  }, [entityId, type, context])
+
+  if (!logoUrl) {
+    return (
+      <div className={`company-logo-placeholder ${className || ''}`}>
+        {alt}
+      </div>
+    )
+  }
+
+  return (
+    <img 
+      src={logoUrl} 
+      alt={alt} 
+      className={`company-logo ${className || ''}`}
+    />
+  )
+}
+
+// Usage
+<CompanyLogo 
+  entityId="company-123" 
+  type="wide" 
+  className="header-logo"
+  alt="Acme Corporation"
+/>
+```
+
+### Custom Hook for Whitelabeling
+
+```typescript
+import { useState, useEffect } from 'react'
+import { useContext } from '@owlmeans/client'
+import type { WlWebService, ProvidedWLSet } from '@owlmeans/web-wl'
+
+interface UseWhitelabelResult<T = any> {
+  data: T | null
+  loading: boolean
+  error: Error | null
+  reload: () => void
+}
+
+export const useWhitelabel = <T = any>(
+  entityId: string, 
+  providerKey?: string
+): UseWhitelabelResult<T> => {
+  const context = useContext()
+  const [data, setData] = useState<T | null>(null)
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<Error | null>(null)
+
+  const loadData = async () => {
+    try {
+      setLoading(true)
+      setError(null)
+      
+      const wlService = context.service<WlWebService>('wl-web-service')
+      const whitelabelData = await wlService.load(entityId)
+      
+      if (providerKey) {
+        const extracted = wlService.extract<T>(providerKey, whitelabelData)
+        setData(extracted || null)
+      } else {
+        setData(whitelabelData as T)
+      }
+    } catch (err) {
+      setError(err as Error)
+      setData(null)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    loadData()
+  }, [entityId, providerKey])
+
+  return {
+    data,
+    loading,
+    error,
+    reload: loadData
+  }
+}
+
+// Usage examples
+const CompanyInfoDisplay: React.FC<{ entityId: string }> = ({ entityId }) => {
+  const { data: companyInfo, loading, error } = useWhitelabel<CompanyInfo>(
+    entityId, 
+    'company-provider'
+  )
+
+  if (loading) return <div>Loading company info...</div>
+  if (error) return <div>Error: {error.message}</div>
+  if (!companyInfo) return <div>No company information available</div>
+
+  return (
+    <div>
+      <h2>{companyInfo.fullName}</h2>
+      <p>{companyInfo.description}</p>
+    </div>
+  )
+}
+
+const StylesDisplay: React.FC<{ entityId: string }> = ({ entityId }) => {
+  const { data: styles, loading, error } = useWhitelabel<CustomStyles>(
+    entityId, 
+    'styles-provider'
+  )
+
+  if (loading || error || !styles) return null
+
+  return (
+    <div style={{
+      backgroundColor: styles.colors.primaryBackground,
+      color: styles.colors.primaryColor,
+      fontFamily: styles.font.fontFamily
+    }}>
+      Custom styled content
+    </div>
+  )
+}
+```
+
+### Multi-entity Whitelabeling
+
+```typescript
+import React, { useState } from 'react'
+import { useWhitelabel } from './useWhitelabel'
+
+const MultiEntityDemo: React.FC = () => {
+  const [selectedEntity, setSelectedEntity] = useState('entity-1')
+  
+  const entities = [
+    { id: 'entity-1', name: 'Company A' },
+    { id: 'entity-2', name: 'Company B' },
+    { id: 'entity-3', name: 'Company C' }
+  ]
+
+  const { data: whitelabelData, loading } = useWhitelabel(selectedEntity)
+
+  return (
+    <div>
+      <select 
+        value={selectedEntity} 
+        onChange={(e) => setSelectedEntity(e.target.value)}
+      >
+        {entities.map(entity => (
+          <option key={entity.id} value={entity.id}>
+            {entity.name}
+          </option>
+        ))}
+      </select>
+
+      {loading ? (
+        <div>Loading whitelabel data...</div>
+      ) : (
+        <WhitelabeledApp entityId={selectedEntity}>
+          <div>Content for {selectedEntity}</div>
+        </WhitelabeledApp>
+      )}
+    </div>
+  )
+}
+```
+
+## Caching Strategy
+
+### Memory Cache Implementation
+
+```typescript
+// Internal caching implementation (simplified)
+class WhitelabelCache {
+  private cache = new Map<string, ProvidedWLSet>()
+  private ttl = 5 * 60 * 1000 // 5 minutes
+  private timestamps = new Map<string, number>()
+
+  set(entityId: string, data: ProvidedWLSet): void {
+    this.cache.set(entityId, data)
+    this.timestamps.set(entityId, Date.now())
+  }
+
+  get(entityId: string): ProvidedWLSet | undefined {
+    const timestamp = this.timestamps.get(entityId)
+    if (timestamp && Date.now() - timestamp > this.ttl) {
+      this.cache.delete(entityId)
+      this.timestamps.delete(entityId)
+      return undefined
+    }
+    return this.cache.get(entityId)
+  }
+
+  clear(): void {
+    this.cache.clear()
+    this.timestamps.clear()
+  }
+
+  invalidate(entityId: string): void {
+    this.cache.delete(entityId)
+    this.timestamps.delete(entityId)
+  }
+}
+```
+
+### Cache Management
+
+```typescript
+// Utility functions for cache management
+export const clearWhitelabelCache = (context: Context) => {
+  const wlService = context.service<WlWebService>('wl-web-service')
+  // Cache clearing would be implemented in the service
+}
+
+export const preloadWhitelabeling = async (
+  context: Context, 
+  entityIds: string[]
+) => {
+  const wlService = context.service<WlWebService>('wl-web-service')
+  
+  // Preload whitelabeling data for multiple entities
+  await Promise.all(
+    entityIds.map(entityId => wlService.load(entityId))
+  )
+}
+```
+
+## Error Handling
+
+### Graceful Error Handling
+
+```typescript
+const ErrorBoundaryWhitelabel: React.FC<{ 
+  children: React.ReactNode
+  fallback?: React.ReactNode 
+}> = ({ children, fallback }) => {
+  return (
+    <ErrorBoundary
+      fallback={fallback || <div>Failed to load branding</div>}
+      onError={(error) => {
+        console.error('Whitelabeling error:', error)
+        // Report to error tracking service
+      }}
+    >
+      {children}
+    </ErrorBoundary>
+  )
+}
+
+// Usage
+<ErrorBoundaryWhitelabel fallback={<DefaultBranding />}>
+  <WhitelabeledApp entityId={entityId}>
+    <AppContent />
+  </WhitelabeledApp>
+</ErrorBoundaryWhitelabel>
+```
+
+## Performance Optimization
+
+### Lazy Loading and Code Splitting
+
+```typescript
+import React, { lazy, Suspense } from 'react'
+
+// Lazy load whitelabel components
+const WhitelabeledDashboard = lazy(() => import('./WhitelabeledDashboard'))
+
+const App: React.FC = () => (
+  <Suspense fallback={<div>Loading...</div>}>
+    <WhitelabeledDashboard entityId="company-123" />
+  </Suspense>
+)
+```
+
+### Memoization
+
+```typescript
+import React, { memo, useMemo } from 'react'
+
+const MemoizedWhitelabelComponent = memo<{ entityId: string }>(({ entityId }) => {
+  const { data } = useWhitelabel(entityId, 'company-provider')
+  
+  const memoizedContent = useMemo(() => {
+    if (!data) return null
+    
+    return (
+      <div>
+        <h1>{data.fullName}</h1>
+        <p>{data.description}</p>
+      </div>
+    )
+  }, [data])
+
+  return memoizedContent
+})
+```
+
+## Integration with OwlMeans Ecosystem
+
+### Context Integration
+```typescript
+import { makeWebContext } from '@owlmeans/web-client'
+
+const context = makeWebContext(config)
+const wlService = context.service<WlWebService>('wl-web-service')
+```
+
+### Module System Integration
+```typescript
+import { modules } from '@owlmeans/web-wl'
+
+// Modules are automatically integrated via service
+context.registerService(wlService)
+```
+
+### Client Integration
+```typescript
+import { useContext } from '@owlmeans/client'
+
+const wlService = useContext().service<WlWebService>('wl-web-service')
+```
+
+## Best Practices
+
+1. **Caching**: Implement appropriate caching strategies for performance
+2. **Error Handling**: Provide graceful fallbacks for failed whitelabeling requests
+3. **Performance**: Use memoization and lazy loading for large applications
+4. **User Experience**: Show loading states during whitelabeling data fetch
+5. **Accessibility**: Ensure dynamic content maintains accessibility standards
+6. **Testing**: Test with different entity configurations and error scenarios
+
+## Related Packages
+
+- **@owlmeans/wled**: Core whitelabeling types and modules
+- **@owlmeans/client-wl**: Base client whitelabeling functionality
+- **@owlmeans/server-wl**: Server-side whitelabeling implementation
+- **@owlmeans/client**: Base client functionality
+- **@owlmeans/client-module**: Client module system for API calls
+
+## TypeScript Support
+
+This package is written in TypeScript and provides full type safety:
+
+```typescript
+import type { 
+  WlWebService,
+  ProvidedWLSet,
+  Config,
+  Context
+} from '@owlmeans/web-wl'
+
+const wlService: WlWebService = makeWlService()
+const context: Context = makeWebContext(config)
+```

package/build/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from './logo.js';
+//# sourceMappingURL=index.d.ts.map

package/build/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA"}

package/build/components/index.js

@@ -0,0 +1,2 @@
+export * from './logo.js';
+//# sourceMappingURL=index.js.map

package/build/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAA"}

package/build/components/logo.d.ts

@@ -0,0 +1,4 @@
+import type { FC } from 'react';
+import type { WLLogoProps } from './types.js';
+export declare const WlLogo: FC<WLLogoProps>;
+//# sourceMappingURL=logo.d.ts.map

package/build/components/logo.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"logo.d.ts","sourceRoot":"","sources":["../../src/components/logo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,EAAE,MAAM,OAAO,CAAA;AAI/B,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,YAAY,CAAA;AAG7C,eAAO,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAelC,CAAA"}

package/build/components/logo.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext, useValue } from '@owlmeans/client';
+import { DEFAULT_ALIAS } from '../consts.js';
+export const WlLogo = ({ entityId, defImg }) => {
+    const context = useContext();
+    const wl = useValue(async () => {
+        const srv = context.service(DEFAULT_ALIAS);
+        if (entityId != null) {
+            const wl = await srv.load(entityId);
+            return wl['wl-logo'];
+        }
+        return { brand: {} };
+    }, [entityId]);
+    return (wl?.brand.wideLogo ?? defImg)
+        && _jsx("img", { src: wl?.brand.wideLogo ?? defImg, style: { maxWidth: '50%' } });
+};
+//# sourceMappingURL=logo.js.map

package/build/components/logo.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"logo.js","sourceRoot":"","sources":["../../src/components/logo.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAEvD,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA;AAI5C,MAAM,CAAC,MAAM,MAAM,GAAoB,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE;IAC9D,MAAM,OAAO,GAAG,UAAU,EAAmB,CAAA;IAC7C,MAAM,EAAE,GAAG,QAAQ,CAAqB,KAAK,IAAI,EAAE;QACjD,MAAM,GAAG,GAAG,OAAO,CAAC,OAAO,CAAe,aAAa,CAAC,CAAA;QACxD,IAAI,QAAQ,IAAI,IAAI,EAAE,CAAC;YACrB,MAAM,EAAE,GAAG,MAAM,GAAG,CAAC,IAAI,CAAc,QAAQ,CAAC,CAAA;YAEhD,OAAO,EAAE,CAAC,SAAS,CAAC,CAAA;QACtB,CAAC;QAED,OAAO,EAAE,KAAK,EAAE,EAAE,EAAE,CAAA;IACtB,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAA;IAEd,OAAO,CAAC,EAAE,EAAE,KAAK,CAAC,QAAQ,IAAI,MAAM,CAAC;WAChC,cAAK,GAAG,EAAE,EAAE,EAAE,KAAK,CAAC,QAAQ,IAAI,MAAM,EAAE,KAAK,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAI,CAAA;AAC7E,CAAC,CAAA"}

package/build/components/types.d.ts

@@ -0,0 +1,7 @@
+export interface WLComponentProps {
+    entityId?: string;
+}
+export interface WLLogoProps extends WLComponentProps {
+    defImg?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/build/components/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/components/types.ts"],"names":[],"mappings":"AACA,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,MAAM,WAAW,WAAY,SAAQ,gBAAgB;IACnD,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB"}

package/build/components/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/build/components/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/components/types.ts"],"names":[],"mappings":""}

package/build/consts.d.ts

@@ -0,0 +1,2 @@
+export declare const DEFAULT_ALIAS = "wl-web-serivce";
+//# sourceMappingURL=consts.d.ts.map

package/build/consts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../src/consts.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,aAAa,mBAAmB,CAAA"}

package/build/consts.js

@@ -0,0 +1,2 @@
+export const DEFAULT_ALIAS = 'wl-web-serivce';
+//# sourceMappingURL=consts.js.map

package/build/consts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"consts.js","sourceRoot":"","sources":["../src/consts.ts"],"names":[],"mappings":"AACA,MAAM,CAAC,MAAM,aAAa,GAAG,gBAAgB,CAAA"}

package/build/index.d.ts

@@ -0,0 +1,6 @@
+export type * from './types.js';
+export * from './consts.js';
+export * from './modules.js';
+export * from './service.js';
+export * from './components/index.js';
+//# sourceMappingURL=index.d.ts.map

package/build/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,mBAAmB,YAAY,CAAA;AAC/B,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,uBAAuB,CAAA"}

package/build/index.js

@@ -0,0 +1,5 @@
+export * from './consts.js';
+export * from './modules.js';
+export * from './service.js';
+export * from './components/index.js';
+//# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAEA,cAAc,aAAa,CAAA;AAC3B,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,uBAAuB,CAAA"}

package/build/modules.d.ts

@@ -0,0 +1,3 @@
+import type { ClientModule } from '@owlmeans/client-module';
+export declare const modules: ClientModule<unknown>[];
+//# sourceMappingURL=modules.d.ts.map

package/build/modules.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"modules.d.ts","sourceRoot":"","sources":["../src/modules.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAK3D,eAAO,MAAM,OAAO,EAAgB,YAAY,CAAC,OAAO,CAAC,EAAE,CAAA"}

package/build/modules.js

@@ -0,0 +1,5 @@
+import { elevate } from '@owlmeans/client-module';
+import { WL_PROVIDE, modules as wlModules } from '@owlmeans/wled';
+elevate(wlModules, WL_PROVIDE);
+export const modules = wlModules;
+//# sourceMappingURL=modules.js.map

package/build/modules.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"modules.js","sourceRoot":"","sources":["../src/modules.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAA;AAEjD,OAAO,EAAE,UAAU,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAEjE,OAAO,CAAC,SAAS,EAAE,UAAU,CAAC,CAAA;AAE9B,MAAM,CAAC,MAAM,OAAO,GAAG,SAAoC,CAAA"}

package/build/service.d.ts

@@ -0,0 +1,3 @@
+import type { WlWebService } from './types.js';
+export declare const makeWlService: (alias?: string) => WlWebService;
+//# sourceMappingURL=service.d.ts.map

package/build/service.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"service.d.ts","sourceRoot":"","sources":["../src/service.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAkC,YAAY,EAAE,MAAM,YAAY,CAAA;AAK9E,eAAO,MAAM,aAAa,WAAW,MAAM,KAAmB,YAqB7D,CAAA"}

package/build/service.js

@@ -0,0 +1,20 @@
+import { DEFAULT_ALIAS } from './consts.js';
+import { createService } from '@owlmeans/context';
+import { WL_PROVIDE } from '@owlmeans/wled';
+export const makeWlService = (alias = DEFAULT_ALIAS) => {
+    const cache = {};
+    const service = createService(alias, {
+        load: async (entityId) => {
+            if (cache[entityId] != null) {
+                return cache[entityId];
+            }
+            const context = service.assertCtx();
+            const module = context.module(WL_PROVIDE);
+            const [wlSet] = await module.call({ params: { entity: entityId } });
+            return cache[entityId] = wlSet;
+        },
+        extract: (key, set) => set[key]
+    });
+    return service;
+};
+//# sourceMappingURL=service.js.map

package/build/service.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"service.js","sourceRoot":"","sources":["../src/service.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAE3C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAG3C,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,QAAgB,aAAa,EAAgB,EAAE;IAC3E,MAAM,KAAK,GAA0C,EAAE,CAAA;IAEvD,MAAM,OAAO,GAAiB,aAAa,CAAe,KAAK,EAAE;QAC/D,IAAI,EAAE,KAAK,EAAC,QAAQ,EAAC,EAAE;YACrB,IAAI,KAAK,CAAC,QAAQ,CAAC,IAAI,IAAI,EAAE,CAAC;gBAC5B,OAAO,KAAK,CAAC,QAAQ,CAAC,CAAA;YACxB,CAAC;YAED,MAAM,OAAO,GAAG,OAAO,CAAC,SAAS,EAAmB,CAAA;YAEpD,MAAM,MAAM,GAAG,OAAO,CAAC,MAAM,CAA8B,UAAU,CAAC,CAAA;YACtE,MAAM,CAAC,KAAK,CAAC,GAAG,MAAM,MAAM,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,CAAC,CAAA;YAEnE,OAAO,KAAK,CAAC,QAAQ,CAAC,GAAG,KAA2B,CAAA;QACtD,CAAC;QAED,OAAO,EAAE,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,GAAG,CAAC;KAChC,CAAC,CAAA;IAEF,OAAO,OAAO,CAAA;AAChB,CAAC,CAAA"}

package/build/types.d.ts

@@ -0,0 +1,15 @@
+import type { InitializedService } from '@owlmeans/context';
+import type { ProvidedWL } from '@owlmeans/wled';
+import type { AppConfig, AppContext } from '@owlmeans/web-client';
+export interface WlWebService extends InitializedService {
+    load: <T extends {} = {}>(entityId: string, resource?: string) => Promise<ProvidedWLSet<T>>;
+    extract<T extends {} = {}>(key: string, set: ProvidedWLSet<any>): ProvidedWL<T>;
+}
+export interface ProvidedWLSet<T extends {} = {}> {
+    [key: string]: ProvidedWL<T>;
+}
+export interface Config extends AppConfig {
+}
+export interface Context<C extends Config = Config> extends AppContext<C> {
+}
+//# sourceMappingURL=types.d.ts.map

package/build/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAA;AAChD,OAAO,KAAK,EAAC,SAAS,EAAE,UAAU,EAAC,MAAM,sBAAsB,CAAA;AAE/D,MAAM,WAAW,YAAa,SAAQ,kBAAkB;IACtD,IAAI,EAAE,CAAC,CAAC,SAAS,EAAE,GAAG,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,CAAA;IAC3F,OAAO,CAAE,CAAC,SAAS,EAAE,GAAG,EAAE,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,aAAa,CAAC,GAAG,CAAC,GAAG,UAAU,CAAC,CAAC,CAAC,CAAA;CACjF;AAED,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,EAAE,GAAG,EAAE;IAC9C,CAAC,GAAG,EAAE,MAAM,GAAG,UAAU,CAAC,CAAC,CAAC,CAAA;CAC7B;AAED,MAAM,WAAW,MAAO,SAAQ,SAAS;CACxC;AAED,MAAM,WAAW,OAAO,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,CAAE,SAAQ,UAAU,CAAC,CAAC,CAAC;CACxE"}

package/build/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/build/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,40 @@
+{
+  "name": "@owlmeans/web-wl",
+  "version": "0.1.0",
+  "type": "module",
+  "scripts": {
+    "build": "tsc -b",
+    "dev": "sleep 390 && nodemon -e ts,tsx,json --watch src --exec \"tsc -p ./tsconfig.json\"",
+    "watch": "tsc -b -w --preserveWatchOutput --pretty"
+  },
+  "main": "build/index.js",
+  "module": "build/index.js",
+  "types": "build/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./build/index.js",
+      "require": "./build/index.js",
+      "default": "./build/index.js",
+      "module": "./build/index.js",
+      "types": "./build/index.d.ts"
+    }
+  },
+  "dependencies": {
+    "@owlmeans/client": "^0.1.0",
+    "@owlmeans/client-module": "^0.1.0",
+    "@owlmeans/context": "^0.1.0",
+    "@owlmeans/wled": "^0.1.0"
+  },
+  "peerDependencies": {
+    "react": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.3.11",
+    "nodemon": "^3.1.7",
+    "typescript": "^5.6.3"
+  },
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/components/index.ts

@@ -0,0 +1 @@
+export * from './logo.js'

package/src/components/logo.tsx

@@ -0,0 +1,23 @@
+import type { FC } from 'react'
+import { useContext, useValue } from '@owlmeans/client'
+import type { Config, Context, WlWebService } from '../types.js'
+import { DEFAULT_ALIAS } from '../consts.js'
+import type { WLLogoProps } from './types.js'
+import type { CustomMedia } from '@owlmeans/wled'
+
+export const WlLogo: FC<WLLogoProps> = ({ entityId, defImg }) => {
+  const context = useContext<Config, Context>()
+  const wl = useValue<CustomMedia | null>(async () => {
+    const srv = context.service<WlWebService>(DEFAULT_ALIAS)
+    if (entityId != null) {
+      const wl = await srv.load<CustomMedia>(entityId)
+
+      return wl['wl-logo']
+    }
+
+    return { brand: {} }
+  }, [entityId])
+
+  return (wl?.brand.wideLogo ?? defImg)
+    && <img src={wl?.brand.wideLogo ?? defImg} style={{ maxWidth: '50%' }} />
+}

package/src/components/types.ts

@@ -0,0 +1,8 @@
+
+export interface WLComponentProps {
+  entityId?: string
+}
+
+export interface WLLogoProps extends WLComponentProps {
+  defImg?: string
+}

package/src/consts.ts

@@ -0,0 +1,2 @@
+
+export const DEFAULT_ALIAS = 'wl-web-serivce'

package/src/index.ts

@@ -0,0 +1,7 @@
+
+export type * from './types.js'
+export * from './consts.js'
+export * from './modules.js'
+export * from './service.js'
+export * from './components/index.js'
+

package/src/modules.ts

@@ -0,0 +1,8 @@
+
+import { elevate } from '@owlmeans/client-module'
+import type { ClientModule } from '@owlmeans/client-module'
+import { WL_PROVIDE, modules as wlModules } from '@owlmeans/wled'
+
+elevate(wlModules, WL_PROVIDE)
+
+export const modules = wlModules as ClientModule<unknown>[]

package/src/service.ts

@@ -0,0 +1,29 @@
+import type { ClientModule } from '@owlmeans/client-module'
+import { DEFAULT_ALIAS } from './consts.js'
+import type { Config, Context, ProvidedWLSet, WlWebService } from './types.js'
+import { createService } from '@owlmeans/context'
+import { WL_PROVIDE } from '@owlmeans/wled'
+
+
+export const makeWlService = (alias: string = DEFAULT_ALIAS): WlWebService => {
+  const cache: { [entityId: string]: ProvidedWLSet } = {}
+
+  const service: WlWebService = createService<WlWebService>(alias, {
+    load: async entityId => {
+      if (cache[entityId] != null) {
+        return cache[entityId]
+      }
+
+      const context = service.assertCtx<Config, Context>()
+
+      const module = context.module<ClientModule<ProvidedWLSet>>(WL_PROVIDE)
+      const [wlSet] = await module.call({ params: { entity: entityId } })
+
+      return cache[entityId] = wlSet as ProvidedWLSet<any>
+    },
+
+    extract: (key, set) => set[key]
+  })
+
+  return service
+}

package/src/types.ts

@@ -0,0 +1,19 @@
+
+import type { InitializedService } from '@owlmeans/context'
+import type { ProvidedWL } from '@owlmeans/wled'
+import type {AppConfig, AppContext} from '@owlmeans/web-client'
+
+export interface WlWebService extends InitializedService {
+  load: <T extends {} = {}>(entityId: string, resource?: string) => Promise<ProvidedWLSet<T>>
+  extract <T extends {} = {}>(key: string, set: ProvidedWLSet<any>): ProvidedWL<T>
+}
+
+export interface ProvidedWLSet<T extends {} = {}> {
+  [key: string]: ProvidedWL<T>
+}
+
+export interface Config extends AppConfig {
+}
+
+export interface Context<C extends Config = Config> extends AppContext<C> {
+}

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": [
+    "../tsconfig.default.json",
+    "../tsconfig.react.json",
+  ],
+  "compilerOptions": {
+    "rootDir": "./src/", /* Specify the root folder within your source files. */
+    "outDir": "./build/", /* Specify an output folder for all emitted files. */
+    "moduleResolution": "Bundler",
+  },
+  "exclude": [
+    "./dist/**/*",
+    "./build/**/*",
+    "./*.ts"
+  ]
+}

package/tsconfig.tsbuildinfo

@@ -0,0 +1 @@
+{"root":["./src/consts.ts","./src/index.ts","./src/modules.ts","./src/service.ts","./src/types.ts","./src/components/index.ts","./src/components/logo.tsx","./src/components/types.ts"],"version":"5.6.3"}