@owlmeans/client-panel 0.1.2 → 0.1.4

package/README.md

@@ -1,791 +1,87 @@
 # @owlmeans/client-panel
 
-React client panel library for OwlMeans Common applications. This package provides a comprehensive set of UI components and utilities for building administrative panels, forms, and user interfaces with integrated internationalization, validation, and layout management.
+Schema-driven React form components with react-hook-form integration, i18n, and action buttons.
 
 ## Overview
 
-The `@owlmeans/client-panel` package extends the OwlMeans client ecosystem with pre-built UI components designed for panel applications. It provides:
-
-- **Form Components**: Advanced form handling with validation and internationalization
-- **Layout Components**: Flexible layout system for panel interfaces
-- **Authentication Components**: Pre-built authentication UI components
-- **Helper Utilities**: Form helpers, context providers, and utility functions
-- **Internationalization**: Full i18n support with contextual translations
-- **Validation Integration**: AJV schema validation with React Hook Form
-- **Error Handling**: Comprehensive error display and management
-- **Responsive Design**: Mobile-friendly responsive layout components
-
-This package is part of the OwlMeans panel UI ecosystem:
-- **@owlmeans/client-panel**: React panel components *(this package)*
-- **@owlmeans/web-panel**: Web-specific panel implementations
-- **@owlmeans/native-panel**: React Native panel components
+- `ClientForm` — form wrapper with react-hook-form, AJV schema validation, and submit handling
+- `ActionCtrl` — i18n-aware button component for form actions (submit, cancel, etc.)
+- `InputCtrl` — labeled input field component backed by react-hook-form
+- `useFormRef()` — hook to get a ref for programmatic form operations
+- `FormOnSubmit` — type for form submission handler functions
+- Platform-agnostic: used by React web and React Native frontends
 
 ## Installation
 
 ```bash
-npm install @owlmeans/client-panel react react-hook-form
+bun add @owlmeans/client-panel
 ```
 
-## Core Concepts
-
-### Panel Architecture
-The library follows a component-based architecture where panels are composed of reusable UI elements with consistent styling and behavior.
-
-### Form Management
-Built on React Hook Form with AJV schema validation, providing type-safe forms with automatic validation and error handling.
-
-### Internationalization
-Full integration with OwlMeans i18n system for translatable UI components with context-aware translations.
-
-### Authentication Integration
-Optional authentication components that integrate with the OwlMeans authentication system.
-
-## API Reference
-
-### Components
-
-#### Form Components
-
-The form system provides comprehensive form handling with validation, internationalization, and error management.
-
-##### `<Form />`
-
-Main form component with integrated validation and submission handling.
-
-```typescript
-interface FormProps extends PropsWithChildren<I18nProps> {
-  name?: string                           // Form identifier for i18n
-  formRef?: MutableRefObject<FormRef<any> | null>  // Form reference
-  defaults?: Record<string, any>          // Default form values
-  validation?: AnySchema                  // AJV validation schema
-  decorate?: boolean                      // Apply form decoration
-  horizontal?: BlockScaling               // Horizontal layout scaling
-  vertical?: BlockScaling                 // Vertical layout scaling
-  onSubmit?: FormOnSubmit<any>           // Submit handler
-}
+## Usage
 
-const Form: FC<FormProps>
-```
+A complete form with submit and cancel actions:
 
-**Usage:**
 ```typescript
-import { Form, useFormRef } from '@owlmeans/client-panel'
+import { ClientForm, InputCtrl, ActionCtrl, useFormRef } from '@owlmeans/client-panel'
+import type { FormOnSubmit } from '@owlmeans/client-panel'
 
-function UserForm() {
+function CreateProjectForm() {
   const formRef = useFormRef()
-  
-  const handleSubmit = async (data, update) => {
-    try {
-      await api.saveUser(data)
-      console.log('User saved successfully')
-    } catch (error) {
-      formRef.current?.error(error)
-    }
-  }
-  
-  return (
-    <Form
-      name="user-form"
-      formRef={formRef}
-      defaults={{ name: '', email: '' }}
-      validation={userSchema}
-      onSubmit={handleSubmit}
-    >
-      <input name="name" placeholder="Name" />
-      <input name="email" placeholder="Email" />
-      <button type="submit">Save User</button>
-    </Form>
-  )
-}
-```
-
-#### Layout Components
-
-Layout components provide structured panel layouts with responsive design.
-
-##### Layout Helper
-
-```typescript
-import { LayoutHelper } from '@owlmeans/client-panel'
 
-// Layout utilities and components
-```
-
-### Hooks and Utilities
-
-#### `useFormRef<T>(): MutableRefObject<FormRef<T> | null>`
-
-Creates a reference for form component interaction.
-
-```typescript
-import { useFormRef } from '@owlmeans/client-panel'
-
-function FormComponent() {
-  const formRef = useFormRef<UserData>()
-  
-  const resetForm = () => {
-    formRef.current?.form.reset()
+  const onSubmit: FormOnSubmit<CreateProject> = async (data) => {
+    await ctx.module<ClientModule<Project>>('project-create').call({ body: data })
   }
-  
-  const updateForm = (data: UserData) => {
-    formRef.current?.update(data)
-  }
-  
-  return (
-    <div>
-      <Form formRef={formRef}>
-        {/* form fields */}
-      </Form>
-      <button onClick={resetForm}>Reset</button>
-    </div>
-  )
-}
-```
-
-#### `useFormI18n(): I18nFunction`
-
-Provides internationalization for form components with contextual prefixes.
-
-```typescript
-import { useFormI18n } from '@owlmeans/client-panel'
-
-function FormField() {
-  const t = useFormI18n()
-  
-  return (
-    <div>
-      <label>{t('name.label')}</label>
-      <input placeholder={t('name.placeholder')} />
-    </div>
-  )
-}
-```
-
-#### `useFormError(name: string, error?: FieldError): string | undefined`
-
-Provides internationalized error messages for form fields.
-
-```typescript
-import { useFormError } from '@owlmeans/client-panel'
-import { useFormState } from 'react-hook-form'
 
-function FormField({ name }) {
-  const { errors } = useFormState()
-  const errorMessage = useFormError(name, errors[name])
-  
   return (
-    <div>
-      <input name={name} />
-      {errorMessage && <span className="error">{errorMessage}</span>}
-    </div>
+    <ClientForm schema={createProjectSchema} onSubmit={onSubmit} ref={formRef}>
+      <InputCtrl name="title" />
+      <InputCtrl name="description" />
+      <ActionCtrl i18nKey="project.create.submit" type="submit" />
+      <ActionCtrl i18nKey="project.create.cancel" onClick={() => navigate.go('project-list')} />
+    </ClientForm>
   )
 }
 ```
 
-#### `useClientFormContext(): TFormContext`
+## API
 
-Accesses the current form context for configuration and state.
+### `ClientForm`
 
-```typescript
-import { useClientFormContext } from '@owlmeans/client-panel'
-
-function CustomFormField() {
-  const formContext = useClientFormContext()
-  
-  return (
-    <div className={formContext.horizontal ? 'horizontal' : 'vertical'}>
-      {/* field content */}
-    </div>
-  )
-}
-```
-
-### Types and Interfaces
-
-#### `FormRef<T>`
-
-Reference interface for form component control.
-
-```typescript
-interface FormRef<T extends FieldValues = FieldValues> {
-  form: UseFormReturn<T>        // React Hook Form instance
-  update: (data: T) => void     // Update form data
-  loader: Toggleable            // Loading state control
-  error: (error: unknown, target?: string) => void  // Error handling
-}
-```
+React component. Props:
+- `schema: AJVSchema` — AJV schema used for validation and default values
+- `onSubmit: FormOnSubmit<T>` — called with validated form data
+- `ref?` — `useFormRef()` ref for programmatic reset/submit
 
-#### `FormOnSubmit<T>`
+### `ActionCtrl`
 
-Submit handler interface for form components.
+React component for buttons. Props:
+- `i18nKey: string` — translation key for button label
+- `type?: 'submit' | 'button' | 'reset'`
+- `onClick?: () => void`
+- `disabled?: boolean`
 
-```typescript
-interface FormOnSubmit<T> {
-  (data: T, update?: (data: T) => void): Promise<void> | void
-}
-```
-
-#### `TFormContext`
+### `InputCtrl`
 
-Form context interface for component communication.
+React component for labeled inputs. Props:
+- `name: string` — field name from the schema
+- `type?: string` — input type (text, email, password, etc.)
+- `i18nKey?: string` — translation key for label (defaults to field name)
 
-```typescript
-interface TFormContext extends Omit<FormProps, 'defaults' | 'children'> {
-  loader: Toggleable            // Loading state management
-}
-```
+### `useFormRef(): FormRef`
 
-#### `FormFieldProps`
+Returns a ref object for programmatic form control.
 
-Base properties for form field components.
+### `FormOnSubmit<T>`
 
 ```typescript
-interface FormFieldProps {
-  name: string                  // Field name
-  def?: any                     // Default value
-}
+type FormOnSubmit<T> = (data: T) => void | Promise<void>
 ```
 
-### Helper Functions
-
-#### `schemaToFormDefault(schema: AnySchema): Record<string, any>`
-
-Extracts default values from AJV schema for form initialization.
-
-```typescript
-import { schemaToFormDefault } from '@owlmeans/client-panel'
-
-const userSchema = {
-  type: 'object',
-  properties: {
-    name: { type: 'string', default: 'John Doe' },
-    email: { type: 'string', default: '' },
-    age: { type: 'number', default: 18 }
-  }
-}
-
-const defaults = schemaToFormDefault(userSchema)
-// Result: { name: 'John Doe', email: '', age: 18 }
-```
-
-### Constants
-
-#### `BlockScaling`
-
-Enumeration for layout scaling options.
-
-```typescript
-enum BlockScaling {
-  // Layout scaling values
-}
-```
-
-### Authentication Components
-
-The package includes optional authentication components accessible via the `/auth` export:
-
-```typescript
-import { AuthComponents } from '@owlmeans/client-panel/auth'
-import { AuthPlugins } from '@owlmeans/client-panel/auth/plugins'
-```
-
-These components provide:
-- Pre-built authentication forms
-- Login and registration components
-- Authentication plugins and extensions
-- Integration with OwlMeans authentication system
-
-## Usage Examples
-
-### Basic Form with Validation
-
-```typescript
-import React from 'react'
-import { Form, useFormRef, schemaToFormDefault } from '@owlmeans/client-panel'
-import { useFormState } from 'react-hook-form'
-
-interface UserData {
-  name: string
-  email: string
-  age: number
-}
-
-const userSchema = {
-  type: 'object',
-  properties: {
-    name: { type: 'string', minLength: 2, default: '' },
-    email: { type: 'string', format: 'email', default: '' },
-    age: { type: 'number', minimum: 18, default: 18 }
-  },
-  required: ['name', 'email']
-}
-
-function UserRegistrationForm() {
-  const formRef = useFormRef<UserData>()
-  const defaults = schemaToFormDefault(userSchema)
-  
-  const handleSubmit = async (data: UserData, update) => {
-    try {
-      // Show loading state
-      formRef.current?.loader.on()
-      
-      // Submit data
-      await api.createUser(data)
-      
-      // Success - reset form
-      formRef.current?.form.reset()
-      
-      console.log('User created successfully')
-    } catch (error) {
-      // Handle error
-      formRef.current?.error(error)
-    } finally {
-      // Hide loading state
-      formRef.current?.loader.off()
-    }
-  }
-  
-  return (
-    <Form
-      name="user-registration"
-      formRef={formRef}
-      defaults={defaults}
-      validation={userSchema}
-      onSubmit={handleSubmit}
-      decorate={true}
-    >
-      <UserFormFields />
-    </Form>
-  )
-}
-
-function UserFormFields() {
-  const { errors } = useFormState<UserData>()
-  const t = useFormI18n()
-  const nameError = useFormError('name', errors.name)
-  const emailError = useFormError('email', errors.email)
-  
-  return (
-    <div>
-      <div>
-        <label>{t('name.label')}</label>
-        <input
-          name="name"
-          placeholder={t('name.placeholder')}
-          className={errors.name ? 'error' : ''}
-        />
-        {nameError && <span className="error-text">{nameError}</span>}
-      </div>
-      
-      <div>
-        <label>{t('email.label')}</label>
-        <input
-          name="email"
-          type="email"
-          placeholder={t('email.placeholder')}
-          className={errors.email ? 'error' : ''}
-        />
-        {emailError && <span className="error-text">{emailError}</span>}
-      </div>
-      
-      <div>
-        <label>{t('age.label')}</label>
-        <input
-          name="age"
-          type="number"
-          min="18"
-        />
-      </div>
-      
-      <button type="submit">{t('submit')}</button>
-    </div>
-  )
-}
-```
-
-### Form with Dynamic Validation
-
-```typescript
-import { Form, useFormRef } from '@owlmeans/client-panel'
-import { useState } from 'react'
-
-function DynamicForm() {
-  const formRef = useFormRef()
-  const [formType, setFormType] = useState<'basic' | 'advanced'>('basic')
-  
-  const basicSchema = {
-    type: 'object',
-    properties: {
-      name: { type: 'string', minLength: 2 },
-      email: { type: 'string', format: 'email' }
-    },
-    required: ['name', 'email']
-  }
-  
-  const advancedSchema = {
-    type: 'object',
-    properties: {
-      ...basicSchema.properties,
-      phone: { type: 'string', pattern: '^\\+?[1-9]\\d{1,14}$' },
-      company: { type: 'string', minLength: 2 }
-    },
-    required: [...basicSchema.required, 'phone', 'company']
-  }
-  
-  const currentSchema = formType === 'basic' ? basicSchema : advancedSchema
-  
-  const handleSubmit = async (data) => {
-    console.log('Form data:', data)
-    console.log('Form type:', formType)
-  }
-  
-  return (
-    <div>
-      <div>
-        <button onClick={() => setFormType('basic')}>Basic Form</button>
-        <button onClick={() => setFormType('advanced')}>Advanced Form</button>
-      </div>
-      
-      <Form
-        name={`${formType}-form`}
-        formRef={formRef}
-        validation={currentSchema}
-        onSubmit={handleSubmit}
-      >
-        <input name="name" placeholder="Name" />
-        <input name="email" placeholder="Email" />
-        
-        {formType === 'advanced' && (
-          <>
-            <input name="phone" placeholder="Phone" />
-            <input name="company" placeholder="Company" />
-          </>
-        )}
-        
-        <button type="submit">Submit {formType} Form</button>
-      </Form>
-    </div>
-  )
-}
-```
-
-### Internationalized Form
-
-```typescript
-import { Form, useFormI18n, useFormError } from '@owlmeans/client-panel'
-import { addI18nApp } from '@owlmeans/i18n'
-
-// Add translations
-addI18nApp('en', 'user-form', {
-  'name.label': 'Full Name',
-  'name.placeholder': 'Enter your full name',
-  'email.label': 'Email Address',
-  'email.placeholder': 'Enter your email',
-  'submit': 'Create Account',
-  'name.errors.minLength': 'Name must be at least 2 characters',
-  'email.errors.format': 'Please enter a valid email address'
-})
-
-addI18nApp('es', 'user-form', {
-  'name.label': 'Nombre Completo',
-  'name.placeholder': 'Ingrese su nombre completo',
-  'email.label': 'Dirección de Correo',
-  'email.placeholder': 'Ingrese su correo',
-  'submit': 'Crear Cuenta',
-  'name.errors.minLength': 'El nombre debe tener al menos 2 caracteres',
-  'email.errors.format': 'Por favor ingrese un correo válido'
-})
-
-function InternationalizedForm() {
-  const formRef = useFormRef()
-  
-  const handleSubmit = async (data) => {
-    console.log('Localized form data:', data)
-  }
-  
-  return (
-    <Form
-      name="user-form"
-      formRef={formRef}
-      validation={userSchema}
-      onSubmit={handleSubmit}
-      i18n={{
-        resource: 'user-form',
-        ns: 'user-form'
-      }}
-    >
-      <LocalizedFormFields />
-    </Form>
-  )
-}
-
-function LocalizedFormFields() {
-  const { errors } = useFormState()
-  const t = useFormI18n()
-  const nameError = useFormError('name', errors.name)
-  const emailError = useFormError('email', errors.email)
-  
-  return (
-    <div>
-      <div>
-        <label>{t('name.label')}</label>
-        <input
-          name="name"
-          placeholder={t('name.placeholder')}
-        />
-        {nameError && <div className="error">{nameError}</div>}
-      </div>
-      
-      <div>
-        <label>{t('email.label')}</label>
-        <input
-          name="email"
-          placeholder={t('email.placeholder')}
-        />
-        {emailError && <div className="error">{emailError}</div>}
-      </div>
-      
-      <button type="submit">{t('submit')}</button>
-    </div>
-  )
-}
-```
-
-### Form with Custom Error Handling
-
-```typescript
-import { Form, useFormRef } from '@owlmeans/client-panel'
-import { OwlMeansError } from '@owlmeans/error'
-
-function FormWithErrorHandling() {
-  const formRef = useFormRef()
-  const [serverErrors, setServerErrors] = useState({})
-  
-  const handleSubmit = async (data) => {
-    try {
-      setServerErrors({})
-      formRef.current?.loader.on()
-      
-      await api.submitData(data)
-      
-      // Success
-      formRef.current?.form.reset()
-    } catch (error) {
-      if (error instanceof OwlMeansError) {
-        // Handle specific OwlMeans errors
-        if (error.code === 'VALIDATION_ERROR') {
-          setServerErrors(error.details || {})
-        } else {
-          formRef.current?.error(error, 'general')
-        }
-      } else {
-        // Handle generic errors
-        formRef.current?.error(error)
-      }
-    } finally {
-      formRef.current?.loader.off()
-    }
-  }
-  
-  return (
-    <Form
-      name="error-handling-form"
-      formRef={formRef}
-      onSubmit={handleSubmit}
-    >
-      <div>
-        <input name="email" />
-        {serverErrors.email && (
-          <div className="server-error">{serverErrors.email}</div>
-        )}
-      </div>
-      
-      <button type="submit">Submit</button>
-    </Form>
-  )
-}
-```
-
-### Layout Components Usage
-
-```typescript
-import { LayoutHelper } from '@owlmeans/client-panel'
-
-function PanelLayout() {
-  return (
-    <LayoutHelper>
-      <div className="panel-container">
-        <header className="panel-header">
-          <h1>Admin Panel</h1>
-        </header>
-        
-        <main className="panel-content">
-          <Form name="admin-form">
-            {/* form content */}
-          </Form>
-        </main>
-        
-        <footer className="panel-footer">
-          <p>© 2024 My Company</p>
-        </footer>
-      </div>
-    </LayoutHelper>
-  )
-}
-```
-
-### Authentication Panel Integration
-
-```typescript
-import { AuthComponents } from '@owlmeans/client-panel/auth'
-import { useContext } from '@owlmeans/client'
-
-function AuthPanel() {
-  const context = useContext()
-  const authService = context.service('auth')
-  
-  const [isAuthenticated, setIsAuthenticated] = useState(false)
-  
-  useEffect(() => {
-    const checkAuth = async () => {
-      const token = await authService.authenticated()
-      setIsAuthenticated(token != null)
-    }
-    
-    checkAuth()
-  }, [])
-  
-  if (!isAuthenticated) {
-    return <AuthComponents.LoginForm />
-  }
-  
-  return (
-    <div>
-      <h1>Authenticated Panel</h1>
-      {/* panel content */}
-    </div>
-  )
-}
-```
-
-### Responsive Panel Design
-
-```typescript
-import { Form } from '@owlmeans/client-panel'
-import { useState, useEffect } from 'react'
-
-function ResponsivePanel() {
-  const [isMobile, setIsMobile] = useState(false)
-  
-  useEffect(() => {
-    const checkMobile = () => {
-      setIsMobile(window.innerWidth < 768)
-    }
-    
-    checkMobile()
-    window.addEventListener('resize', checkMobile)
-    
-    return () => window.removeEventListener('resize', checkMobile)
-  }, [])
-  
-  return (
-    <Form
-      name="responsive-form"
-      horizontal={isMobile ? 'sm' : 'lg'}
-      vertical={isMobile ? 'sm' : 'md'}
-    >
-      <div className={isMobile ? 'mobile-layout' : 'desktop-layout'}>
-        {/* form fields */}
-      </div>
-    </Form>
-  )
-}
-```
-
-## Integration with Other Packages
-
-### Client Integration
-```typescript
-import { useContext } from '@owlmeans/client'
-import { Form } from '@owlmeans/client-panel'
-
-// Form components automatically integrate with client context
-```
-
-### Internationalization Integration
-```typescript
-import { useI18n } from '@owlmeans/client-i18n'
-import { Form, useFormI18n } from '@owlmeans/client-panel'
-
-// Automatic i18n integration for form components
-```
-
-### Authentication Integration
-```typescript
-import { AuthComponents } from '@owlmeans/client-panel/auth'
-import { useContext } from '@owlmeans/client'
-
-// Authentication panel components
-```
-
-### Module Integration
-```typescript
-import { modules } from '@owlmeans/client-module'
-import { Form } from '@owlmeans/client-panel'
-
-// Forms can be used within module-based routing
-```
-
-## Error Handling
-
-The package integrates with the OwlMeans error system:
-
-```typescript
-import { OwlMeansError } from '@owlmeans/error'
-import { Form, useFormRef } from '@owlmeans/client-panel'
-
-const handleFormError = (error: unknown) => {
-  if (error instanceof OwlMeansError) {
-    // Handle specific error types
-    switch (error.code) {
-      case 'VALIDATION_ERROR':
-        // Handle validation errors
-        break
-      case 'AUTHENTICATION_ERROR':
-        // Handle auth errors
-        break
-      default:
-        // Handle other errors
-        break
-    }
-  }
-}
-```
-
-## Best Practices
-
-1. **Form Validation**: Use AJV schemas for consistent validation
-2. **Internationalization**: Provide translations for all user-facing text
-3. **Error Handling**: Implement comprehensive error handling for forms
-4. **Responsive Design**: Use layout components for responsive interfaces
-5. **Accessibility**: Ensure forms are accessible with proper labels and ARIA attributes
-6. **Performance**: Use form refs to avoid unnecessary re-renders
-7. **Type Safety**: Use TypeScript interfaces for form data types
-
-## Dependencies
+### `schemaToFormDefault(schema): Record<string, any>`
 
-This package depends on:
-- `@owlmeans/client` - React client library
-- `@owlmeans/client-i18n` - Client internationalization
-- `@owlmeans/client-module` - Client module system
-- `@owlmeans/error` - Error handling system
-- `react` - React library (peer dependency)
-- `react-hook-form` - Form management (peer dependency)
+Derives default form values from an AJV schema's `default` fields.
 
 ## Related Packages
 
-- [`@owlmeans/client`](../client) - React client library
-- [`@owlmeans/web-panel`](../web-panel) - Web-specific panel components
-- [`@owlmeans/native-panel`](../native-panel) - React Native panel components
-- [`@owlmeans/client-i18n`](../client-i18n) - Client internationalization
-- [`@owlmeans/client-auth`](../client-auth) - Authentication integration
+- [`@owlmeans/client`](../client) — `useContext`, `useNavigate` used within form components
+- [`@owlmeans/client-i18n`](../client-i18n) — i18n provider required by `ActionCtrl`/`InputCtrl`

package/build/components/layout/helper.d.ts

@@ -1,6 +1,6 @@
-import type { ClientModule } from '@owlmeans/client-module';
-import type { AbstractRequest } from '@owlmeans/module';
-export declare const usePanelLayout: <T = {}, R extends AbstractRequest = AbstractRequest>() => ClientModule<T, R>;
+import type { ClientEntrypoint } from '@owlmeans/client-entrypoint';
+import type { AbstractRequest } from '@owlmeans/entrypoint';
+export declare const usePanelLayout: <T = {}, R extends AbstractRequest = AbstractRequest>() => ClientEntrypoint<T, R>;
 export declare const useLayoutTitle: (name?: string, alias?: string) => string;
 export declare const prepareLayoutTitle: (title: string) => string;
 //# sourceMappingURL=helper.d.ts.map

package/build/components/layout/helper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helper.d.ts","sourceRoot":"","sources":["../../../src/components/layout/helper.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAC3D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAOvD,eAAO,MAAM,cAAc,GAAI,CAAC,GAAG,EAAE,EAAE,CAAC,SAAS,eAAe,GAAG,eAAe,OAAK,YAAY,CAAC,CAAC,EAAE,CAAC,CAKvG,CAAA;AAED,eAAO,MAAM,cAAc,GAAI,OAAO,MAAM,EAAE,QAAQ,MAAM,KAAG,MAM9D,CAAA;AAED,eAAO,MAAM,kBAAkB,GAAI,OAAO,MAAM,WAA0C,CAAA"}
+{"version":3,"file":"helper.d.ts","sourceRoot":"","sources":["../../../src/components/layout/helper.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAA;AACnE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAA;AAO3D,eAAO,MAAM,cAAc,GAAI,CAAC,GAAG,EAAE,EAAE,CAAC,SAAS,eAAe,GAAG,eAAe,OAAK,gBAAgB,CAAC,CAAC,EAAE,CAAC,CAK3G,CAAA;AAED,eAAO,MAAM,cAAc,GAAI,OAAO,MAAM,EAAE,QAAQ,MAAM,KAAG,MAM9D,CAAA;AAED,eAAO,MAAM,kBAAkB,GAAI,OAAO,MAAM,WAA0C,CAAA"}

package/build/components/layout/helper.js

@@ -4,7 +4,7 @@ import { useMemo } from 'react';
 export const usePanelLayout = () => {
     const context = useContext();
     const location = context.router().useLocation();
-    return context.module(location.state.alias);
+    return context.entrypoint(location.state.alias);
 };
 export const useLayoutTitle = (name, alias) => {
     const layout = usePanelLayout();

package/build/components/layout/helper.js.map

@@ -1 +1 @@
-{"version":3,"file":"helper.js","sourceRoot":"","sources":["../../../src/components/layout/helper.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAE/B,MAAM,CAAC,MAAM,cAAc,GAAG,GAA4E,EAAE;IAC1G,MAAM,OAAO,GAAG,UAAU,EAAE,CAAA;IAC5B,MAAM,QAAQ,GAA0B,OAAO,CAAC,MAAM,EAAE,CAAC,WAAW,EAAE,CAAA;IAEtE,OAAO,OAAO,CAAC,MAAM,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;AAC7C,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,IAAa,EAAE,KAAc,EAAU,EAAE;IACtE,MAAM,MAAM,GAAG,cAAc,EAAE,CAAA;IAC/B,MAAM,CAAC,GAAG,YAAY,CAAC,IAAI,CAAC,CAAA;IAC5B,KAAK,GAAG,KAAK,IAAI,MAAM,CAAC,KAAK,CAAA;IAE7B,OAAO,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG,kBAAkB,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAA;AACxE,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,CAAA"}
+{"version":3,"file":"helper.js","sourceRoot":"","sources":["../../../src/components/layout/helper.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,eAAe,CAAA;AAC5C,OAAO,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAE/B,MAAM,CAAC,MAAM,cAAc,GAAG,GAAgF,EAAE;IAC9G,MAAM,OAAO,GAAG,UAAU,EAAE,CAAA;IAC5B,MAAM,QAAQ,GAA0B,OAAO,CAAC,MAAM,EAAE,CAAC,WAAW,EAAE,CAAA;IAEtE,OAAO,OAAO,CAAC,UAAU,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;AACjD,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,IAAa,EAAE,KAAc,EAAU,EAAE;IACtE,MAAM,MAAM,GAAG,cAAc,EAAE,CAAA;IAC/B,MAAM,CAAC,GAAG,YAAY,CAAC,IAAI,CAAC,CAAA;IAC5B,KAAK,GAAG,KAAK,IAAI,MAAM,CAAC,KAAK,CAAA;IAE7B,OAAO,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,GAAG,kBAAkB,CAAC,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,CAAC,CAAC,CAAA;AACxE,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,GAAG,KAAK,CAAC,OAAO,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@owlmeans/client-panel",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "license": "MIT",
   "type": "module",
   "scripts": {
@@ -36,18 +36,18 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.0",
-    "@owlmeans/client": "^0.1.2",
-    "@owlmeans/client-i18n": "^0.1.2",
-    "@owlmeans/client-module": "^0.1.2",
-    "@owlmeans/client-route": "^0.1.2",
-    "@owlmeans/error": "^0.1.2",
-    "@owlmeans/module": "^0.1.2"
+    "@owlmeans/client": "^0.1.4",
+    "@owlmeans/client-i18n": "^0.1.4",
+    "@owlmeans/client-entrypoint": "^0.1.4",
+    "@owlmeans/client-route": "^0.1.4",
+    "@owlmeans/error": "^0.1.4",
+    "@owlmeans/entrypoint": "^0.1.4"
   },
   "peerDependencies": {
-    "@owlmeans/auth": "*",
-    "@owlmeans/client-auth": "*",
-    "@owlmeans/i18n": "*",
-    "@owlmeans/router": "*",
+    "@owlmeans/auth": "^0.1.4",
+    "@owlmeans/client-auth": "^0.1.4",
+    "@owlmeans/i18n": "^0.1.4",
+    "@owlmeans/router": "^0.1.4",
     "ajv": "*",
     "react": "*",
     "react-hook-form": "*"
@@ -61,13 +61,14 @@
     }
   },
   "devDependencies": {
-    "@owlmeans/auth": "^0.1.2",
-    "@owlmeans/client-auth": "^0.1.2",
+    "@owlmeans/dep-config": "workspace:*",
+    "@owlmeans/auth": "^0.1.4",
+    "@owlmeans/client-auth": "^0.1.4",
     "@types/react": "^19.2.7",
     "nodemon": "^3.1.11",
     "npm-check": "^6.0.1",
     "react-hook-form": "^7.53.0",
-    "typescript": "^5.8.3"
+    "typescript": "^6.0.2"
   },
   "publishConfig": {
     "access": "public"

package/src/components/layout/helper.ts

@@ -1,17 +1,17 @@
 import type { ClientRoute } from '@owlmeans/client-route'
-import type { ClientModule } from '@owlmeans/client-module'
-import type { AbstractRequest } from '@owlmeans/module'
+import type { ClientEntrypoint } from '@owlmeans/client-entrypoint'
+import type { AbstractRequest } from '@owlmeans/entrypoint'
 import type { Location } from '@owlmeans/router'
 
 import { useContext } from '@owlmeans/client'
 import { usePanelI18n } from '../context.js'
 import { useMemo } from 'react'
 
-export const usePanelLayout = <T = {}, R extends AbstractRequest = AbstractRequest>(): ClientModule<T, R> => {
+export const usePanelLayout = <T = {}, R extends AbstractRequest = AbstractRequest>(): ClientEntrypoint<T, R> => {
   const context = useContext()
   const location: Location<ClientRoute> = context.router().useLocation()
 
-  return context.module(location.state.alias)
+  return context.entrypoint(location.state.alias)
 }
 
 export const useLayoutTitle = (name?: string, alias?: string): string => {

package/tsconfig.json

@@ -1,16 +1,11 @@
 {
   "extends": [
-    "../tsconfig.default.json",
-    "../tsconfig.react.json",
+    "@owlmeans/dep-config/tsconfig.base.json",
+    "@owlmeans/dep-config/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"
+    "rootDir": "./src/",
+    "outDir": "./build/"
   },
-  "exclude": [
-    "./dist/**/*",
-    "./build/**/*",
-    "./*.ts"
-  ]
-}
+  "exclude": ["./dist/**/*", "./build/**/*", "./*.ts"]
+}