@3dsource/source-ui 0.0.25 → 0.0.28

package/README.md

@@ -1,26 +1,43 @@
 # @3dsource/source-ui
 
-### A bunch of ui elements using angular
+A comprehensive library of Angular UI components designed specifically for 3D visualization applications. This library extends Angular Material with specialized components for 3D content interaction.
+
+## Overview
+
+The Source UI library provides Angular components that are optimized for 3D applications, offering:
+
+- Specialized UI controls for 3D scene manipulation
+- Integration with Angular Material design system
+- Responsive and accessible components
+- Consistent styling across 3dsource applications
 
 ## Installation
 
-### add peer dependencies
+### Prerequisites
+
+- Angular 19+
+- Angular Material
+
+### Peer Dependencies
 
-_List of peer dependencies_
+This library requires the following peer dependencies:
 
 ```json
 {
   "@angular/common": "^19.2.0",
   "@angular/core": "^19.2.0",
-  "@angular/material": "19.2.11"
+  "@angular/material": "19.2.11",
+  "@3dsource/source-ui-native": "^1.0.17"
 }
 ```
 
+Install peer dependencies:
+
 ```shell
   npx install-peerdeps @3dsource/source-ui
 ```
 
-### add a library
+### Library Installation
 
 ```shell
   npm i @3dsource/source-ui
@@ -28,4 +45,79 @@ _List of peer dependencies_
 
 ## Usage
 
-todo
+### Module Import
+
+Import the SourceUiModule in your Angular application:
+
+```typescript
+import { SourceUiModule } from '@3dsource/source-ui';
+
+@NgModule({
+  imports: [SourceUiModule],
+})
+export class AppModule {}
+```
+
+### Using Components
+
+After importing the module, you can use the components in your templates:
+
+```html
+<source-3d-viewer [model]="modelUrl"></source-3d-viewer>
+```
+
+## Available Components
+
+- **3D Viewers** - Components for displaying 3D models
+- **Control Panels** - UI controls for manipulating 3D scenes
+- **Property Editors** - Components for editing 3D object properties
+- **Navigation Controls** - Components for navigating 3D spaces
+- **Material Pickers** - Components for selecting materials and textures
+
+## Component Examples
+
+### 3D Viewer
+
+```html
+<source-3d-viewer [model]="'assets/models/example.glb'" [autoRotate]="true" [controls]="true"> </source-3d-viewer>
+```
+
+### Control Panel
+
+```html
+<source-control-panel>
+  <source-slider label="Zoom" [min]="0.1" [max]="10" [(value)]="zoomLevel"> </source-slider>
+</source-control-panel>
+```
+
+## Theming
+
+The library supports Angular Material theming:
+
+```scss
+@use '@angular/material' as mat;
+@use '@3dsource/source-ui/theming' as source-ui;
+
+$my-primary: mat.define-palette(mat.$indigo-palette);
+$my-accent: mat.define-palette(mat.$pink-palette);
+
+$my-theme: mat.define-light-theme(
+  (
+    color: (
+      primary: $my-primary,
+      accent: $my-accent,
+    ),
+  )
+);
+
+@include mat.all-component-themes($my-theme);
+@include source-ui.theme($my-theme);
+```
+
+## Examples
+
+Check the demo application for complete usage examples:
+
+```shell
+  npm run demo:start
+```