### HTML Example with CSS Classes

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/configuration.md

Provides an HTML example showcasing the usage of predefined CSS classes for text elements, buttons, and states. This demonstrates how to apply Knowledgeworker's styling directly in markup.

```html
<!-- Typography -->
<p class="kw-paragraph">Body text content</p>
<h2 class="kw-headline2">Main Heading</h2>
<a class="kw-link" href="/page">Link</a>

<!-- Buttons -->
<button class="kw-button-primary">Primary Action</button>
<button class="kw-button-secondary">Secondary Action</button>
<button class="kw-button-primary" disabled>Disabled</button>

<!-- Disabled interactive elements -->
<a class="kw-link" disabled>Disabled Link</a>
```

--------------------------------

### CSS Variables Usage Example

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/configuration.md

Demonstrates how to use the available CSS custom properties to style custom elements and buttons. This example shows applying text, background, font, and color variables.

```css
.custom-element {
    color: var(--kw-text-color);
    background: var(--kw-background-color);
    font-size: var(--kw-text-font-size);
    font-family: var(--kw-text-font-family);
}

.custom-button {
    background-color: var(--kw-action-color);
    color: var(--kw-action-text-color);
    border-radius: var(--kw-button-border-radius);
}

.custom-button:hover {
    background-color: var(--kw-action-hover-color);
}

.custom-button:disabled {
    background-color: var(--kw-action-disabled-color);
}
```

--------------------------------

### Complete Form Example with Knowledgeworker Classes

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/quick-reference.md

Illustrates a complete HTML form structure using Knowledgeworker CSS classes for headings, paragraphs, radio buttons, and buttons. This example shows how to integrate form elements with the UI's styling.

```html
<form>
    <h3 class="kw-headline3">Quiz Question</h3>
    
    <div class="kw-paragraph">
        <p>Which of these is correct?</p>
    </div>
    
    <label>
        <input type="radio" name="answer" value="a"> Option A
    </label>
    <label>
        <input type="radio" name="answer" value="b"> Option B
    </label>
    
    <div style="margin-top: 20px;">
        <button type="submit" class="kw-button-primary">Check Answer</button>
        <button type="reset" class="kw-button-secondary">Clear</button>
    </div>
</form>
```

--------------------------------

### Complete Standalone Embedded Asset Example

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/integration-guide.md

A minimal working embedded asset demonstrating initialization, style injection, content rendering, and event handling.

```typescript
// src/main.ts
import {
    getStyles,
    defaultDesign,
    type Design
} from 'knowledgeworker-embedded-asset-api-ui';

import {
    onInitialize,
    onDesignChanged
} from 'knowledgeworker-embedded-asset-api';

let styleTag: HTMLStyleElement;

function initializeUI(design: Design) {
    // Inject styles
    if (!styleTag) {
        styleTag = document.createElement('style');
        styleTag.id = 'kw-styles';
        document.head.appendChild(styleTag);
    }
    styleTag.textContent = getStyles(design);

    // Render content
    const container = document.getElementById('app');
    if (container) {
        container.innerHTML = `
            <h2 class="kw-headline2">Quiz Question</h2>
            <div class="kw-paragraph">
                <p>What is the capital of France?</p>
            </div>
            <button class="kw-button-primary" id="answer-btn">
                Submit Answer
            </button>
            <button class="kw-button-secondary" id="skip-btn">
                Skip
            </button>
        `;

        // Attach handlers
        document.getElementById('answer-btn')?.addEventListener('click', () => {
            console.log('Answer submitted');
        });
    }
}

// Initialize on load
onInitialize((configuration) => {
    initializeUI(configuration.design);
});

// Update on design change
onDesignChanged((newDesign) => {
    initializeUI(newDesign);
});

// Fallback for development (not in Knowledgeworker Create)
if (!window.__KW_ASSET__) {
    initializeUI(defaultDesign);
}
```

```html
<!-- src/index.html -->
<html>
<head>
    <meta charset="UTF-8">
    <title>Embedded Asset Quiz</title>
</head>
<body>
    <div id="app"></div>
    <script type="module" src="./main.ts"></script>
</body>
</html>
```

--------------------------------

### Install npm Package

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/module-structure.md

Commands to install the knowledgeworker-embedded-asset-api-ui package using different package managers like npm, pnpm, and yarn.

```bash
npm install knowledgeworker-embedded-asset-api-ui
pnpm add knowledgeworker-embedded-asset-api-ui
yarn add knowledgeworker-embedded-asset-api-ui
```

--------------------------------

### Basic Setup with Initialization and Design Changes

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/api-reference/index.md

Sets up the Knowledgeworker UI styles on initialization and provides a mechanism to update styles dynamically when the design configuration changes. This ensures the UI remains consistent with the latest design settings.

```typescript
import { onInitialize, onDesignChanged } from 'knowledgeworker-embedded-asset-api';
import { getStyles } from 'knowledgeworker-embedded-asset-api-ui';

onInitialize((configuration) => {
    const styleTag = document.createElement('style');
    styleTag.textContent = getStyles(configuration.design);
    document.head.appendChild(styleTag);
});

onDesignChanged((design) => {
    // Update styles when design changes
    const styleTag = document.getElementById('kw-styles');
    if (styleTag) {
        styleTag.textContent = getStyles(design);
    }
});
```

--------------------------------

### Example FontFaces Configuration

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/types.md

Illustrates how to define two FontFaces objects for the 'Hind' font, one for light weight and another for bold. This demonstrates specifying multiple source formats for broader browser support.

```typescript
const hindLightFont: FontFaces = {
    name: 'Hind',
    sources: [
        {
            src: 'https://example.com/hind-light.woff2',
            format: 'woff2'
        },
        {
            src: 'https://example.com/hind-light.woff',
            format: 'woff'
        }
    ],
    fontWeight: 300,
    fontStyle: 'normal'
};

const hindBoldFont: FontFaces = {
    name: 'Hind',
    sources: [
        {
            src: 'https://example.com/hind-bold.woff2',
            format: 'woff2'
        }
    ],
    fontWeight: 700,
    fontStyle: 'normal'
};
```

--------------------------------

### Primary Button HTML Examples

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/css-classes.md

Demonstrates basic, disabled, anchor tag, and event-handler usage of the primary button class.

```html
<!-- Basic primary button -->
<button class="kw-button-primary">Submit</button>

<!-- Disabled button -->
<button class="kw-button-primary" disabled>Submit</button>

<!-- As anchor tag (link styled as button) -->
<a class="kw-button-primary" href="/next-page" role="button">Next</a>

<!-- With event handler -->
<button class="kw-button-primary" onclick="handleClick()">
  Click me
</button>
```

--------------------------------

### Build Scripts for Compilation and Bundling

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/module-structure.md

Defines the npm scripts for building the project. 'build' first runs TypeScript checks and then bundles the code with Vite. 'prepare' ensures the build runs on package installation.

```json
{
  "scripts": {
    "build": "tsc && vite build",
    "prepare": "pnpm build"
  }
}
```

--------------------------------

### Initialize and Handle Design Changes

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/configuration.md

Integrates with Knowledgeworker Create to provide dynamic design configuration. Handles initial setup and updates when the design changes at runtime.

```typescript
import { onInitialize, onDesignChanged } from 'knowledgeworker-embedded-asset-api';
import { getStyles } from 'knowledgeworker-embedded-asset-api-ui';

onInitialize((configuration) => {
    // configuration.design is provided by Knowledgeworker Create
    const styleTag = document.createElement('style');
    styleTag.id = 'kw-styles';
    styleTag.textContent = getStyles(configuration.design);
    document.head.appendChild(styleTag);
});

// Handle design changes at runtime
onDesignChanged((design) => {
    const styleTag = document.getElementById('kw-styles');
    if (styleTag) {
        styleTag.textContent = getStyles(design);
    }
});
```

--------------------------------

### Custom Font Configuration Example

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/fonts.md

Demonstrates how to replace default fonts with custom ones by providing a new `FontFaces` array and updating design properties like `textFontFamily` and `headlineFontFamily`.

```typescript
import { Design, FontFaces, getStyles } from 'knowledgeworker-embedded-asset-api-ui';

const customFontFaces: FontFaces[] = [
    {
        name: 'MyCustomFont',
        sources: [
            {
                src: 'https://fonts.example.com/my-font-regular.woff2',
                format: 'woff2'
            },
            {
                src: 'https://fonts.example.com/my-font-regular.woff',
                format: 'woff'
            }
        ],
        fontWeight: 'normal',
        fontStyle: 'normal'
    },
    {
        name: 'MyCustomFont',
        sources: [
            {
                src: 'https://fonts.example.com/my-font-bold.woff2',
                format: 'woff2'
            },
            {
                src: 'https://fonts.example.com/my-font-bold.woff',
                format: 'woff'
            }
        ],
        fontWeight: 'bold',
        fontStyle: 'normal'
    }
];

const customDesign: Design = {
    // ... other design properties ...
    textFontFamily: 'MyCustomFont, Arial, sans-serif',
    headlineFontFamily: 'MyCustomFont, Arial, sans-serif',
    fontFaces: customFontFaces
};

const styles = getStyles(customDesign);
```

--------------------------------

### Host Fonts Locally

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/fonts.md

Host font files locally to improve loading speed and eliminate external dependencies. This example demonstrates importing a local WOFF2 font file.

```typescript
import fontUrl from './fonts/custom.woff2';
// fontUrl is now a resolved path
```

--------------------------------

### HTML Examples for Disabled States

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/quick-reference.md

Shows how to apply disabled states to links and buttons using the `disabled` attribute. This visually indicates that an element is not interactive.

```html
<a class="kw-link" disabled>Disabled link</a>
<button class="kw-button-primary" disabled>Disabled button</button>
```

--------------------------------

### Unit Tests for Styling Functions

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/integration-guide.md

Write unit tests to verify that styling functions generate valid CSS strings and correctly include CSS variables. This example demonstrates testing with default and custom design properties.

```typescript
// test/styles.test.ts
import { getStyles, getCssVariables, defaultDesign } from 'knowledgeworker-embedded-asset-api-ui';

describe('Design System Styling', () => {
    it('should generate valid CSS strings', () => {
        const result = getStyles(defaultDesign);
        expect(result).toContain(':root {');
        expect(result).toContain('@font-face');
        expect(result).toContain('.kw-paragraph');
        expect(result).toContain('.kw-button-primary');
    });

    it('should include CSS variables', () => {
        const result = getCssVariables(defaultDesign);
        expect(result).toContain('--kw-text-color');
        expect(result).toContain('--kw-action-color');
    });

    it('should handle custom design colors', () => {
        const customDesign = {
            ...defaultDesign,
            actionColor: '#FF0000'
        };
        const result = getCssVariables(customDesign);
        expect(result).toContain('--kw-action-color: #FF0000');
    });
});
```

--------------------------------

### Documentation Structure Overview

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/MANIFEST.md

This diagram illustrates the hierarchical organization of the Knowledgeworker Embedded Asset API UI documentation, showing the main README.md as the entry point and its relationship with supplementary guides and API reference files.

```markdown
README.md (entry point)
├── Quick links section
├── Feature overview
├── Basic usage
└── Index of all documents

api-reference/
└── index.md (complete API with examples)

Supplementary guides:
├── types.md (type definitions)
├── css-classes.md (styling details)
├── fonts.md (font customization)
├── configuration.md (design options)
├── integration-guide.md (framework patterns)
├── quick-reference.md (lookup guide)
├── module-structure.md (architecture)
└── MANIFEST.md (this file)
```

--------------------------------

### TypeScript: Define a Full Custom Design Object

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/quick-reference.md

Provides a comprehensive example of defining a `Design` object with all available properties. This is useful for setting a completely custom theme or understanding all configurable options.

```typescript
import { type Design } from 'knowledgeworker-embedded-asset-api-ui';

const fullDesign: Design = {
    textColor: '#333',
    headlineColor: '#000',
    actionColor: '#007bff',
    actionTextColor: '#fff',
    actionHoverColor: '#0056b3',
    actionDisabledColor: '#ccc',
    backgroundColor: '#fff',
    feedbackPositiveColor: '#28a745',
    feedbackPartialPositiveColor: '#ffc107',
    feedbackNegativeColor: '#dc3545',
    feedbackSolutionColor: '#17a2b8',
    focusColor: '#007bff',
    textFontSize: '16px',
    textFontFamily: 'System, sans-serif',
    headlineFontFamily: 'System, sans-serif',
    headlineFontWeight: '600',
    buttonBorderRadius: '4px',
    fontFaces: []
};
```

--------------------------------

### Change Background and Text Colors

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/quick-reference.md

Implement a dark mode by changing the background, text, and headline colors. This example sets a dark background with light text.

```typescript
const darkModeDesign = {
    ...defaultDesign,
    backgroundColor: '#1a1a1a',
    textColor: '#ffffff',
    headlineColor: '#f5f5f5'
};

const styleTag = document.createElement('style');
styleTag.textContent = getStyles(darkModeDesign);
document.head.appendChild(styleTag);
```

--------------------------------

### Migrate to Custom Fonts

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/fonts.md

Migrate from system fonts to custom fonts by updating the font family definition. This example shows how to use `getStyles` with `defaultDesign` to include custom fonts.

```typescript
import { defaultDesign, getStyles } from 'knowledgeworker-embedded-asset-api-ui';

// Before: No custom fonts
// const styles = getCssVariables({ textFontFamily: 'Arial, sans-serif' });

// After: With custom fonts
const styles = getStyles(defaultDesign);  // Includes Hind fonts
```

--------------------------------

### Secondary Button HTML Examples

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/css-classes.md

Shows basic and disabled usage of the secondary button class, as well as its use within a form alongside a primary button.

```html
<!-- Basic secondary button -->
<button class="kw-button-secondary">Cancel</button>

<!-- Disabled secondary button -->
<button class="kw-button-secondary" disabled>Cancel</button>

<!-- In a form with primary button -->
<form>
  <button class="kw-button-primary">Save</button>
  <button class="kw-button-secondary" type="reset">Clear</button>
</form>
```

--------------------------------

### Example: Italic Font Support

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/fonts.md

Provide separate FontFaces entries for both normal and italic styles of a font to enable italic rendering. This ensures that both upright and slanted versions are available.

```typescript
const fontWithItalic: FontFaces[] = [
    {
        name: 'Hind',
        sources: [{ src: 'hind-regular.woff2', format: 'woff2' }],
        fontWeight: 'normal',
        fontStyle: 'normal'
    },
    {
        name: 'Hind',
        sources: [{ src: 'hind-italic.woff2', format: 'woff2' }],
        fontWeight: 'normal',
        fontStyle: 'italic'
    },
    {
        name: 'Hind',
        sources: [{ src: 'hind-bold.woff2', format: 'woff2' }],
        fontWeight: 'bold',
        fontStyle: 'normal'
    },
    {
        name: 'Hind',
        sources: [{ src: 'hind-bold-italic.woff2', format: 'woff2' }],
        fontWeight: 'bold',
        fontStyle: 'italic'
    }
];
```

--------------------------------

### Get Stylesheet for Knowledgeworker UI

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/api-reference/index.md

Generates a complete, minified CSS stylesheet for all Knowledgeworker Create UI classes based on a provided design object. This includes font faces, theme variables, and style rules. It's useful for applying consistent styling across your application.

```typescript
import { getStyles, defaultDesign } from 'knowledgeworker-embedded-asset-api-ui';

const customDesign = {
    ...defaultDesign,
    actionColor: '#0066cc',
    textFontSize: '16px'
};

// Get the complete stylesheet
const allStyles = getStyles(customDesign);

// Inject into document
const styleTag = document.createElement('style');
styleTag.textContent = allStyles;
document.head.appendChild(styleTag);

// Now you can use the CSS classes:
// <p class="kw-paragraph">Text content</p>
// <button class="kw-button-primary">Click me</button>
// <h2 class="kw-headline2">Title</h2>
```

--------------------------------

### Get CSS Variables (Short Form)

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/README.md

A concise way to get CSS variables from a design object. This is a common task for applying styles.

```typescript
const vars = getCssVariables(defaultDesign);
```

--------------------------------

### Get CSS Variables

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/README.md

Retrieves CSS variables from a design object. Useful for integrating with custom CSS frameworks.

```typescript
import { getCssVariables, defaultDesign } from 'knowledgeworker-embedded-asset-api-ui';

const cssVars = getCssVariables(defaultDesign);
// Use with your own CSS framework
```

--------------------------------

### Basic HTML Structure with CSS Classes

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/quick-reference.md

Demonstrates the basic HTML structure using predefined Knowledgeworker CSS classes for headings, body text, links, and buttons. Apply these classes to achieve consistent styling.

```html
<h2 class="kw-headline2">Page Title</h2>

<div class="kw-paragraph">
    <p>This is body text with an <a href="/page" class="kw-link">link</a>.</p>
</div>

<button class="kw-button-primary">Submit</button>
<button class="kw-button-secondary">Cancel</button>
```

--------------------------------

### Change Text Size

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/quick-reference.md

Increase the default text font size. This example sets the text font size to '20px', overriding the default '18px'.

```typescript
const largerTextDesign = {
    ...defaultDesign,
    textFontSize: '20px'  // Increase from default 18px
};

const styleTag = document.createElement('style');
styleTag.textContent = getStyles(largerTextDesign);
document.head.appendChild(styleTag);
```

--------------------------------

### Function Call Graph for getStyles

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/module-structure.md

Illustrates the call hierarchy and return values for the main `getStyles` function and its internal dependencies.

```text
getStyles(design)
├── Calls: getFontFaces(design)
│   └── Returns: CSS @font-face rules
├── Calls: getCssVariables(design)
│   └── Returns: CSS :root variables
├── Calls: minifyStyleString() [internal]
│   └── Removes whitespace
└── Returns: Complete minified stylesheet

getCssVariables(design)
├── Destructures all Design properties
├── Returns: ":root { --kw-*: value; ... }"
└── No internal function calls

getFontFaces(design)
├── Maps over fontFaces array
├── Constructs @font-face rules
└── Returns: Concatenated CSS string
```

--------------------------------

### Use CSS Variables

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/README.md

Demonstrates how to use the library's CSS variables for custom styling. These variables provide access to theme colors and typography settings.

```css
.my-element {
    color: var(--kw-text-color);
    background: var(--kw-background-color);
    font-size: var(--kw-text-font-size);
}
```

--------------------------------

### Importing All Types

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/types.md

Demonstrates how to import all available type definitions from the 'knowledgeworker-embedded-asset-api-ui' package.

```typescript
// Import all types
import type {
    Design,
    FontFaces,
    FontType
} from 'knowledgeworker-embedded-asset-api-ui';
```

--------------------------------

### Initialize Styles on Load

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/integration-guide.md

Create and inject a style tag into the document's head when the asset is initialized, using the provided design configuration.

```typescript
let styleTag: HTMLStyleElement;

onInitialize((configuration) => {
    // Create and inject style tag
    styleTag = document.createElement('style');
    styleTag.id = 'kw-design-styles';
    styleTag.textContent = getStyles(configuration.design);
    document.head.appendChild(styleTag);
});
```

--------------------------------

### Build Configuration

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/configuration.md

Specifies the build-time configuration for the library, including the target ECMAScript version and module resolution strategy. This ensures compatibility with modern browsers and bundlers.

```json
{
  "target": "ES2020",
  "module": "ESNext",
  "moduleResolution": "bundler"
}
```

--------------------------------

### Extensibility Patterns

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/module-structure.md

Demonstrates common patterns for extending the library's functionality, including overriding design configurations, extending CSS in custom stylesheets, and utilizing CSS variables.

```typescript
// Pattern 1: Override via custom design
const customDesign = { ...defaultDesign, actionColor: '#fff' };
```

```html
// Pattern 2: Extend CSS in your own stylesheet
// <style>
//   .kw-button-primary {
//     /* your overrides */
//   }
// </style>
```

```css
// Pattern 3: Use CSS variables
// var(--kw-action-color)
```

--------------------------------

### Using Local Font Files

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/fonts.md

Integrate local font files by importing them as assets and referencing their URLs in the FontFaces configuration. This method is useful for self-hosting fonts.

```typescript
import { Design, FontFaces, getStyles } from 'knowledgeworker-embedded-asset-api-ui';
import customFontRegular from './fonts/custom-regular.woff2';
import customFontBold from './fonts/custom-bold.woff2';

const localFontFaces: FontFaces[] = [
    {
        name: 'CustomLocal',
        sources: [
            {
                src: customFontRegular,  // Imported asset URL
                format: 'woff2'
            }
        ],
        fontWeight: 'normal',
        fontStyle: 'normal'
    },
    {
        name: 'CustomLocal',
        sources: [
            {
                src: customFontBold,
                format: 'woff2'
            }
        ],
        fontWeight: 'bold',
        fontStyle: 'normal'
    }
];

const designWithLocal: Design = {
    // ... rest of design ...
    textFontFamily: 'CustomLocal, system-ui, sans-serif',
    headlineFontFamily: 'CustomLocal, system-ui, sans-serif',
    fontFaces: localFontFaces
};
```

--------------------------------

### Safe Design Initialization

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/integration-guide.md

Applies styles using a design object obtained from a trusted source like Knowledgeworker Create. This snippet demonstrates safe initialization.

```typescript
// ✓ Safe: Design from Knowledgeworker Create
onInitialize((configuration) => {
    applyStyles(configuration.design);
});
```

--------------------------------

### Basic JavaScript Integration

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/quick-reference.md

Integrate the UI by creating and appending a style tag to the document head. This snippet handles initialization and design changes.

```typescript
import { getStyles, defaultDesign } from 'knowledgeworker-embedded-asset-api-ui';
import { onInitialize, onDesignChanged } from 'knowledgeworker-embedded-asset-api';

let styleTag: HTMLStyleElement;

onInitialize((configuration) => {
    styleTag = document.createElement('style');
    styleTag.id = 'kw-styles';
    styleTag.textContent = getStyles(configuration.design);
    document.head.appendChild(styleTag);
});

onDesignChanged((design) => {
    if (styleTag) styleTag.textContent = getStyles(design);
});

// Fallback for development
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', () => {
        if (!styleTag) {
            styleTag = document.createElement('style');
            styleTag.textContent = getStyles(defaultDesign);
            document.head.appendChild(styleTag);
        }
    });
}
```

--------------------------------

### Package.json Export Configuration

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/module-structure.md

Configures the main entry point, types, and modern package exports for the library. It specifies a single export path for ES modules.

```json
{
  "main": "dist/index.js",
  "types": "dist/index.d.ts",
  "exports": {
    ".": "./dist/index.js"
  }
}
```

--------------------------------

### Design Configuration Flow

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/module-structure.md

Outlines how the design object is initialized and updated within the Knowledgeworker Create environment.

```text
Knowledgeworker Create Environment
    ↓
onInitialize(configuration)
    └─→ Receives Design object via configuration.design
        ↓
        getStyles(configuration.design)
        ↓
        Apply to document
        
On design change in Knowledgeworker Create:
    ↓
onDesignChanged(newDesign)
    └─→ Receives updated Design object
        ↓
        getStyles(newDesign)
        ↓
        Update existing style tag
```

--------------------------------

### Consumer App Integration Flow

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/module-structure.md

Illustrates the integration layer of the library within a consumer application's architecture, showing the flow from the app to the browser's CSS engine.

```text
Consumer App (React/Vue/etc.)
        ↓
knowledgeworker-embedded-asset-api (callbacks)
        ↓
knowledgeworker-embedded-asset-api-ui (styling)
        ↓
DOM (style tag injection)
        ↓
Browser CSS engine
```

--------------------------------

### Import Types and Values

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/quick-reference.md

Import necessary types and utility functions for styling and design from the UI library.

```typescript
import {
    defaultDesign,
    getStyles,
    getCssVariables,
    getFontFaces,
    type Design,
    type FontFaces,
    type FontType
} from 'knowledgeworker-embedded-asset-api-ui';

// Knowledgeworker Create integration
import {
    onInitialize,
    onDesignChanged
} from 'knowledgeworker-embedded-asset-api';
```

--------------------------------

### TypeScript: Create a Custom Design Object

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/quick-reference.md

Demonstrates how to create a custom design object by extending the `defaultDesign` object and overriding specific properties like `actionColor` and `backgroundColor`. This allows for easy theme customization.

```typescript
import { defaultDesign, type Design } from 'knowledgeworker-embedded-asset-api-ui';

const customDesign: Design = {
    ...defaultDesign,
    actionColor: '#0066cc',
    backgroundColor: '#f9f9f9'
};
```

--------------------------------

### Importing Types with Implementations

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/types.md

Shows how to import specific types along with their corresponding implementations (default values and utility functions) from the 'knowledgeworker-embedded-asset-api-ui' package.

```typescript
// Import with implementations
import {
    defaultDesign,
    getStyles,
    getCssVariables,
    getFontFaces,
    type Design,
    type FontFaces,
    type FontType
} from 'knowledgeworker-embedded-asset-api-ui';
```

--------------------------------

### Unsafe Design Initialization with User Input

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/integration-guide.md

Illustrates an unsafe practice of using user input directly for design configuration. Always validate user input before parsing and applying it to prevent security vulnerabilities.

```typescript
// ⚠ Unsafe: User input as design
const userInput = getUserInput();
const unsafeDesign = JSON.parse(userInput);  // Validate before use!
```

--------------------------------

### Main Library Import Path

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/module-structure.md

Demonstrates how to import all public API elements from the root of the 'knowledgeworker-embedded-asset-api-ui' package. No subpath exports are supported.

```typescript
import {
    defaultDesign,
    getStyles,
    getCssVariables,
    getFontFaces,
    type Design,
    type FontFaces,
    type FontType
} from 'knowledgeworker-embedded-asset-api-ui';
```

--------------------------------

### Initialize Styles in Knowledgeworker Create Integration

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/api-reference/index.md

Initializes the Knowledgeworker UI styles upon application startup by injecting the generated CSS into the document's head. This ensures that all UI components are correctly styled from the beginning.

```typescript
import { onInitialize } from 'knowledgeworker-embedded-asset-api';
import { getStyles } from 'knowledgeworker-embedded-asset-api-ui';

onInitialize((configuration) => {
    const styleTag = document.createElement('style');
    styleTag.textContent = getStyles(configuration.design);
    document.head.appendChild(styleTag);
});
```

--------------------------------

### getStyles Function

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/api-reference/index.md

Generates a complete, minified CSS stylesheet containing font faces, theme variables, and style rules for all Knowledgeworker Create UI classes. It accepts a `design` object and returns a CSS string.

```APIDOC
## `getStyles` Function

### Description
Generates a complete, minified CSS stylesheet containing font faces, theme variables, and style rules for all Knowledgeworker Create UI classes.

### Method
```typescript
export const getStyles = (design: Design) => string;
```

### Parameters
#### Path Parameters
- **design** (`Design`) - Required - The design object with all theme and font configuration

### Return type
`string`

Returns a minified CSS string containing:
1. Font face declarations (via `getFontFaces`)
2. Root CSS variables (via `getCssVariables`)
3. Complete style rules for all KW UI classes

### CSS Classes Styled
- `.kw-paragraph` — Body text styling
- `.kw-link` — Inline link styling with focus and hover states
- `.kw-headline2` through `.kw-headline6` — Headline sizing and styling
- `.kw-button-primary` — Primary button with fill background
- `.kw-button-secondary` — Secondary button with transparent background

### Features
- All text elements support `[disabled]` attribute for disabled state
- Buttons have hover, focus, and disabled state styling
- Focus indicators use 2px solid outline with configurable color
- All styles respect the design system variables
- Output is whitespace-minified for optimal delivery size

### Example
```typescript
import { getStyles, defaultDesign } from 'knowledgeworker-embedded-asset-api-ui';

const customDesign = {
    ...defaultDesign,
    actionColor: '#0066cc',
    textFontSize: '16px'
};

// Get the complete stylesheet
const allStyles = getStyles(customDesign);

// Inject into document
const styleTag = document.createElement('style');
styleTag.textContent = allStyles;
document.head.appendChild(styleTag);

// Now you can use the CSS classes:
// <p class="kw-paragraph">Text content</p>
// <button class="kw-button-primary">Click me</button>
// <h2 class="kw-headline2">Title</h2>
```

### In Knowledgeworker Create Integration
```typescript
import { onInitialize } from 'knowledgeworker-embedded-asset-api';
import { getStyles } from 'knowledgeworker-embedded-asset-api-ui';

onInitialize((configuration) => {
    const styleTag = document.createElement('style');
    styleTag.textContent = getStyles(configuration.design);
    document.head.appendChild(styleTag);
});
```
```

--------------------------------

### Load Dynamic Design from Environment

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/configuration.md

Dynamically load design configurations from environment variables, merging them with the default design. This is useful for theme variations or per-environment settings.

```typescript
import { defaultDesign, Design, getStyles } from 'knowledgeworker-embedded-asset-api-ui';

function loadDesign(designJson: string): Design {
    const parsed = JSON.parse(designJson);
    return {
        ...defaultDesign,
        ...parsed,  // Merge with environment values
    };
}

const envDesign = loadDesign(process.env.CUSTOM_DESIGN || '{}');
const styleTag = document.createElement('style');
styleTag.textContent = getStyles(envDesign);
document.head.appendChild(styleTag);
```

--------------------------------

### Integrate with Knowledgeworker Create

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/README.md

Integrates the library's styling with Knowledgeworker Create by applying styles on initialization and updating them when the design changes. This ensures the UI stays consistent with the application's design.

```typescript
import { getStyles } from 'knowledgeworker-embedded-asset-api-ui';
import { onInitialize, onDesignChanged } from 'knowledgeworker-embedded-asset-api';

let styleTag: HTMLStyleElement;

onInitialize((configuration) => {
    styleTag = document.createElement('style');
    styleTag.textContent = getStyles(configuration.design);
    document.head.appendChild(styleTag);
});

onDesignChanged((newDesign) => {
    if (styleTag) styleTag.textContent = getStyles(newDesign);
});
```

--------------------------------

### Custom Dark Mode Design Override

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/types.md

Demonstrates how to create a custom design by extending the default design and overriding specific properties for a dark mode theme. Requires importing `defaultDesign` and `Design` type.

```typescript
import { defaultDesign, Design } from 'knowledgeworker-embedded-asset-api-ui';

const darkModeDesign: Design = {
    ...defaultDesign,
    textColor: '#ffffff',
    headlineColor: '#f5f5f5',
    backgroundColor: '#1a1a1a',
    actionColor: '#ff6b9d',
    actionHoverColor: '#ff85b5',
};
```

--------------------------------

### Apply Default Styling

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/configuration.md

Use this snippet to apply the library's default styling to the document. Ensure the 'knowledgeworker-embedded-asset-api-ui' library is imported.

```typescript
import { getStyles, defaultDesign } from 'knowledgeworker-embedded-asset-api-ui';

// Apply default styling to document
const styleTag = document.createElement('style');
styleTag.textContent = getStyles(defaultDesign);
document.head.appendChild(styleTag);
```

--------------------------------

### Vite Build Configuration for Library

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/module-structure.md

Configures Vite to build the project as an ES module library, generating a single output file and type declarations. It uses `vite-plugin-dts` for type generation.

```typescript
export default defineConfig({
    plugins: [dts({ insertTypesEntry: true })],
    build: {
        lib: {
            entry: resolve(__dirname, 'src/index.ts'),
            formats: ['es']
        },
        rollupOptions: {
            output: { entryFileNames: 'index.js' }
        }
    }
});
```

--------------------------------

### Using Google Fonts

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/fonts.md

Configure your design to use fonts from Google Fonts by providing font names and source URLs. Ensure the correct font weights and styles are specified.

```typescript
import { Design, FontFaces, getStyles } from 'knowledgeworker-embedded-asset-api-ui';

const googleFontFaces: FontFaces[] = [
    {
        name: 'Roboto',
        sources: [
            {
                src: 'https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Me5Q6-VQ.woff2',
                format: 'woff2'
            }
        ],
        fontWeight: '400',
        fontStyle: 'normal'
    },
    {
        name: 'Roboto',
        sources: [
            {
                src: 'https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmEU9fBQ.woff2',
                format: 'woff2'
            }
        ],
        fontWeight: '700',
        fontStyle: 'normal'
    }
];

const designWithGoogle: Design = {
    // ... rest of design ...
    textFontFamily: 'Roboto, sans-serif',
    headlineFontFamily: 'Roboto, sans-serif',
    fontFaces: googleFontFaces
};
```

--------------------------------

### Style Generation Flow

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/module-structure.md

Details the step-by-step process of generating and applying CSS styles from a design object to the DOM.

```text
User Application
    ↓
getStyles(design: Design)
    ├─→ getFontFaces({fontFaces})
    │   └─→ For each font: generate @font-face CSS
    ├─→ getCssVariables({colors, typography})
    │   └─→ Generate :root CSS variables
    ├─→ Generate .kw-* class styles
    ├─→ minifyStyleString()
    │   └─→ Remove whitespace
    └─→ Return minified CSS string
        ↓
    document.createElement('style')
        ↓
    styleTag.textContent = cssString
        ↓
    document.head.appendChild(styleTag)
        ↓
    CSS applied to DOM
```

--------------------------------

### Default Design Configuration Object

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/api-reference/index.md

Provides a complete design configuration with sensible defaults. Used for fallback rendering when the Knowledgeworker Create environment is unavailable.

```typescript
export const defaultDesign: Design = {
    textColor: '#000',
    headlineColor: '#000',
    actionColor: '#E8398E',
    actionTextColor: '#fff',
    actionHoverColor: 'rgb(235,87,159)',
    actionDisabledColor: '#939393',
    backgroundColor: '#fff',
    feedbackPositiveColor: '#008c14',
    feedbackPartialPositiveColor: 'rgb(135, 135, 135)',
    feedbackNegativeColor: '#c80000',
    feedbackSolutionColor: '#ebaf0b',
    focusColor: '#E8398E',
    textFontSize: '18px',
    textFontFamily: 'Hind, Arial, sans-serif',
    headlineFontFamily: 'Hind, Arial, sans-serif',
    headlineFontWeight: '300',
    buttonBorderRadius: '0',
    fontFaces: [
        {
            name: 'Hind',
            sources: [{src: hindLight, format: 'woff2'}],
            fontWeight: 'normal',
            fontStyle: 'normal',
        },
        {
            name: 'Hind',
            sources: [{src: hindMedium, format: 'woff2'}],
            fontWeight: 'bold',
            fontStyle: 'normal',
        },
    ],
};
```

--------------------------------

### Create Custom Design by Extending Defaults

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/configuration.md

Extend the default design with your own custom colors and typography settings. This allows for easy customization while retaining a baseline configuration.

```typescript
import { defaultDesign, Design, getStyles } from 'knowledgeworker-embedded-asset-api-ui';

// Extend default with custom colors
const customDesign: Design = {
    ...defaultDesign,
    // Override specific colors
    actionColor: '#0066cc',        // Blue instead of pink
    backgroundColor: '#f5f5f5',     // Light gray instead of white
    textFontSize: '16px',          // Smaller base text
};

const styleTag = document.createElement('style');
styleTag.textContent = getStyles(customDesign);
document.head.appendChild(styleTag);
```

--------------------------------

### Customize Fonts

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/README.md

Demonstrates how to customize fonts by providing custom font families and font face definitions. This enables the use of custom fonts within the design system.

```typescript
const designWithCustomFonts = {
    ...defaultDesign,
    textFontFamily: 'MyFont, sans-serif',
    fontFaces: [
        {
            name: 'MyFont',
            sources: [{ src: 'myfont.woff2', format: 'woff2' }],
            fontWeight: 'normal',
            fontStyle: 'normal'
        }
    ]
};
```

--------------------------------

### Safe Initialization of Knowledgeworker API

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/integration-guide.md

Initializes the Knowledgeworker API and injects styles safely, with fallbacks for errors. Use this to ensure the UI is set up correctly on application load.

```typescript
import { getStyles, defaultDesign } from 'knowledgeworker-embedded-asset-api-ui';
import { onInitialize } from 'knowledgeworker-embedded-asset-api';

try {
    onInitialize((configuration) => {
        try {
            const styleTag = document.createElement('style');
            styleTag.textContent = getStyles(configuration.design);
            document.head.appendChild(styleTag);
        } catch (e) {
            console.error('Failed to inject styles:', e);
            // Fallback to default
            const fallbackTag = document.createElement('style');
            fallbackTag.textContent = getStyles(defaultDesign);
            document.head.appendChild(fallbackTag);
        }
    });
} catch (e) {
    console.error('Failed to initialize Knowledgeworker API:', e);
    // Still use default design
    const styleTag = document.createElement('style');
    styleTag.textContent = getStyles(defaultDesign);
    document.head.appendChild(styleTag);
}
```

--------------------------------

### Injecting Styles into the Document

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/css-classes.md

Demonstrates three methods for injecting styles: creating a new style tag with default or custom designs, and updating existing styles at runtime. Call on page load.

```typescript
import { getStyles, defaultDesign } from 'knowledgeworker-embedded-asset-api-ui';

// Option 1: Create style tag and inject
function injectStyles() {
    const styleTag = document.createElement('style');
    styleTag.id = 'kw-design-system';
    styleTag.textContent = getStyles(defaultDesign);
    document.head.appendChild(styleTag);
}

// Option 2: Inject with custom design
function injectCustomStyles(customDesign) {
    const styleTag = document.createElement('style');
    styleTag.id = 'kw-design-system';
    styleTag.textContent = getStyles(customDesign);
    document.head.appendChild(styleTag);
}

// Option 3: Update styles at runtime
function updateStyles(newDesign) {
    let styleTag = document.getElementById('kw-design-system');
    if (!styleTag) {
        styleTag = document.createElement('style');
        styleTag.id = 'kw-design-system';
        document.head.appendChild(styleTag);
    }
    styleTag.textContent = getStyles(newDesign);
}

// Call on page load
injectStyles();
```

--------------------------------

### Apply CSS Classes to HTML

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/integration-guide.md

Utilize Knowledgeworker Create's CSS classes for elements like paragraphs, headlines, and buttons to ensure consistent styling.

```html
<div class="kw-paragraph">
    <h2 class="kw-headline2">Welcome</h2>
    <p>This uses the Knowledgeworker Create design system.</p>
</div>

<button class="kw-button-primary">Submit Answer</button>
<button class="kw-button-secondary">Skip</button>
```

--------------------------------

### Apply Styles with Fallback Timer

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/fonts.md

Apply styles and use a timeout as a fallback mechanism for font loading if the Font Loading API is not available or fails. This ensures content is displayed within a reasonable time.

```typescript
function applyStylesWithFallback(design) {
    const styleTag = document.createElement('style');
    styleTag.textContent = getStyles(design);
    document.head.appendChild(styleTag);
    
    // Assume fonts load within 3 seconds
    setTimeout(() => {
        document.body.classList.add('fonts-loaded');
    }, 3000);
}
```

--------------------------------

### Published Files

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/module-structure.md

Configuration indicating that only compiled output files within the 'dist' directory are published to the npm package.

```json
{
  "files": ["dist/**/*"]
}
```

--------------------------------

### Import Library Components

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/integration-guide.md

Import necessary functions and types from the knowledgeworker-embedded-asset-api-ui and knowledgeworker-embedded-asset-api packages.

```typescript
import {
    getStyles,
    defaultDesign,
    type Design
} from 'knowledgeworker-embedded-asset-api-ui';

import {
    onInitialize,
    onDesignChanged
} from 'knowledgeworker-embedded-asset-api';
```

--------------------------------

### Focus-Visible State for Keyboard Navigation

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/css-classes.md

The `:focus-visible` pseudo-class ensures a clear outline is shown for keyboard navigation focus, distinct from click focus. This enhances accessibility for keyboard users.

```html
<a class="kw-link" href="/page" tabindex="0">Keyboard navigable</a>
<button class="kw-button-primary">Keyboard focus supported</button>
```

--------------------------------

### Apply Styles and Wait for Fonts with Font Loading API

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/fonts.md

Apply styles and use the Font Loading API to asynchronously wait for fonts to load before proceeding. This prevents rendering issues and ensures fonts are available.

```typescript
import { getStyles } from 'knowledgeworker-embedded-asset-api-ui';

async function applyStylesAndWaitForFonts(design) {
    const styleTag = document.createElement('style');
    styleTag.textContent = getStyles(design);
    document.head.appendChild(styleTag);
    
    // Wait for fonts to load
    if (document.fonts) {
        try {
            await document.fonts.ready;
            console.log('All fonts loaded');
        } catch (e) {
            console.warn('Font loading failed, using fallback');
        }
    }
}
```

--------------------------------

### Use System Fonts

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/quick-reference.md

Configure the UI to use system fonts for text and headlines. This also ensures no custom font files are loaded by clearing the 'fontFaces' array.

```typescript
const systemFontDesign = {
    ...defaultDesign,
    textFontFamily: 'system-ui, -apple-system, sans-serif',
    headlineFontFamily: 'system-ui, -apple-system, sans-serif',
    fontFaces: []  // No custom fonts
};

```

--------------------------------

### Customize Colors

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/README.md

Shows how to customize the design by overriding default colors. This allows for creating unique themes by extending the default design object.

```typescript
const customDesign = {
    ...defaultDesign,
    actionColor: '#0066cc',
    backgroundColor: '#f9f9f9',
};

const styles = getStyles(customDesign);
```

--------------------------------

### getStyles

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/README.md

Generates a CSS stylesheet from a Design configuration object. This function is useful for dynamically applying themes and styles to your content.

```APIDOC
## getStyles

### Description
Generates a CSS stylesheet from a Design configuration object.

### Method
`getStyles(design: Design) => string`

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```typescript
import { getStyles, defaultDesign } from 'knowledgeworker-embedded-asset-api-ui';

const styles = getStyles(defaultDesign);
console.log(styles);
```

### Response
#### Success Response
- **string**: A string containing the generated CSS rules.
```

--------------------------------

### Project File Structure

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/api-reference/index.md

This snippet displays the directory and file structure of the knowledgeworker-embedded-asset-api-ui project. It highlights key files such as the main export file, font assets, build outputs, and configuration files.

```plaintext
knowledgeworker-embedded-asset-api-ui/
├── src/
│   ├── index.ts              # Main export file
│   ├── hind-light-webfont.woff2
│   ├── hind-medium-webfont.woff2
│   └── vite.d.ts
├── dist/
│   ├── index.js              # ESM output
│   └── index.d.ts            # TypeScript declarations
├── package.json
├── tsconfig.json
└── vite.config.ts
```

--------------------------------

### Development/Fallback Usage with Default Design

Source: https://github.com/chemmedia/knowledgeworker-embedded-asset-api-ui/blob/main/_autodocs/api-reference/index.md

Applies the default design system styles for local development or fallback scenarios. This snippet ensures that the UI has a baseline styling when a custom design is not explicitly provided.

```typescript
import { getStyles, defaultDesign } from 'knowledgeworker-embedded-asset-api-ui';

// Use default design for local development
const styleTag = document.createElement('style');
styleTag.textContent = getStyles(defaultDesign);
document.head.appendChild(styleTag);
```