@mhmo91/schmancy 0.8.6 → 0.9.3

package/dist/ai/code-highlight.md

@@ -1,240 +1,47 @@
-# Schmancy Code Highlight - AI Reference
+# schmancy-code
 
-## Quick Start
+> Syntax-highlighted code block with line numbers, copy button, and collapsible display.
 
-```typescript
-import '@schmancy/index'  // For all Schmancy components
-// Or specific import: import '@schmancy/code-highlight'
+## Usage
+```html
+<schmancy-code language="typescript" .code=${'const x = 42'}></schmancy-code>
 ```
 
-## Component Overview
+## Properties
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| code | string | `''` | Code content to highlight |
+| language | string | `'javascript'` | Language for syntax highlighting |
+| filename | string | `undefined` | Filename shown in header |
+| lineNumbers | boolean | `false` | Show line numbers |
+| copyButton | boolean | `true` | Show copy-to-clipboard button |
+| highlightLines | string | `undefined` | Lines to highlight (e.g., `'1-3,5,7-9'`) |
+| maxHeight | string | `undefined` | Max height before scrolling |
 
-Code highlighting and preview components for displaying syntax-highlighted code with optional live preview.
-
-## API
-
-### Code Component
-
-```typescript
-// Code highlighting component
-<schmancy-code
-  language="javascript|typescript|html|xml|markdown|bash"  // Language for syntax highlighting
-  code="string"                                           // Code to highlight
-  copyButton?="boolean"                                   // Show copy button (default: false)
-  wrap?="boolean"                                         // Wrap long lines (default: false)
->
-</schmancy-code>
-
-// Component properties
-language: string     // Programming language for highlighting
-code: string        // Code content to display
-copyButton: boolean // Show copy to clipboard button
-wrap: boolean       // Enable line wrapping
-```
-
-### Code Preview Component
-
-```typescript
-// Code preview with source and rendered output
-<schmancy-code-preview
-  language="html|javascript|typescript|etc"              // Language for syntax highlighting
-  layout?="vertical|horizontal"                          // Layout direction (default: "vertical")
-  preview?="boolean"                                     // Show preview pane (default: true)
->
-  <!-- Place code here as content -->
-  <div>This content will be shown as code and rendered</div>
-</schmancy-code-preview>
-
-// Component properties
-language: string    // Programming language for highlighting
-layout: string      // Layout direction for code/preview
-preview: boolean    // Whether to show preview (HTML only)
-```
+## Supported Languages
+javascript, typescript, html, xml, markdown, bash
 
 ## Examples
-
-### Basic Usage
-
-```typescript
-// Simple code highlighting
-<schmancy-code language="javascript" code="console.log('Hello World')">
+```html
+<!-- TypeScript with line numbers and highlighted lines -->
+<schmancy-code
+  language="typescript"
+  lineNumbers
+  highlightLines="2-3"
+  .code=${`import { html } from 'lit'
+const greeting = 'Hello'
+console.log(greeting)`}>
 </schmancy-code>
 
-// With copy button
-<schmancy-code 
-  language="typescript" 
-  code="const greeting: string = 'Hello TypeScript'" 
-  copyButton="true">
+<!-- Bash with filename -->
+<schmancy-code language="bash" filename="install.sh"
+  .code=${'npm install @mhmo91/schmancy'}>
 </schmancy-code>
-```
-
-### Code Preview
-
-```typescript
-// HTML with live preview
-<schmancy-code-preview language="html">
-  <schmancy-button variant="filled">
-    Click Me
-  </schmancy-button>
-</schmancy-code-preview>
-
-// Horizontal layout
-<schmancy-code-preview language="html" layout="horizontal">
-  <div class="p-4 bg-primary-container rounded">
-    <schmancy-typography type="headline" token="sm">
-      Preview Example
-    </schmancy-typography>
-  </div>
-</schmancy-code-preview>
-
-// Code only (no preview)
-<schmancy-code-preview language="javascript" preview="false">
-  function calculateSum(a, b) {
-    return a + b;
-  }
-</schmancy-code-preview>
-```
 
-### Multi-line Code
-
-```typescript
-// Long code with wrapping
-<schmancy-code 
-  language="typescript" 
-  wrap="true"
-  copyButton="true"
-  code="${`
-interface User {
-  id: string;
-  name: string;
-  email: string;
-  preferences: {
-    theme: 'light' | 'dark';
-    notifications: boolean;
-  };
-}
-
-class UserService {
-  async getUser(id: string): Promise<User> {
-    const response = await fetch(\`/api/users/\${id}\`);
-    return response.json();
-  }
-}
-  `.trim()}">
+<!-- With max height -->
+<schmancy-code language="javascript" maxHeight="300px"
+  .code=${longCodeString}>
 </schmancy-code>
 ```
 
-### Real-World Examples
-
-```typescript
-// Documentation example
-<schmancy-surface class="p-6">
-  <schmancy-typography type="title" token="lg" class="mb-4 block">
-    API Example
-  </schmancy-typography>
-  
-  <schmancy-code-preview language="html">
-    <schmancy-form @submit="${handleSubmit}">
-      <schmancy-input 
-        label="Email" 
-        type="email" 
-        required>
-      </schmancy-input>
-      <schmancy-button type="submit" variant="filled">
-        Submit
-      </schmancy-button>
-    </schmancy-form>
-  </schmancy-code-preview>
-</schmancy-surface>
-
-// Component showcase
-<schmancy-tabs>
-  <schmancy-tab slot="tab" active>Preview</schmancy-tab>
-  <schmancy-tab slot="tab">Code</schmancy-tab>
-  
-  <div slot="content">
-    <schmancy-code-preview language="html" preview="true">
-      <schmancy-card>
-        <schmancy-card-content>
-          <div slot="headline">Card Title</div>
-          <div>Card content goes here</div>
-        </schmancy-card-content>
-      </schmancy-card>
-    </schmancy-code-preview>
-  </div>
-  
-  <div slot="content">
-    <schmancy-code language="html" copyButton="true" code="${`
-<schmancy-card>
-  <schmancy-card-content>
-    <div slot="headline">Card Title</div>
-    <div>Card content goes here</div>
-  </schmancy-card-content>
-</schmancy-card>
-    `.trim()}">
-    </schmancy-code>
-  </div>
-</schmancy-tabs>
-```
-
-## Supported Languages
-
-- `javascript` - JavaScript syntax
-- `typescript` - TypeScript syntax
-- `html` / `xml` - HTML/XML markup
-- `markdown` - Markdown syntax
-- `bash` - Shell scripts
-
-## Implementation Details
-
-- Uses **highlight.js** for syntax highlighting
-- Automatic indentation detection and normalization
-- Dark theme optimized for readability
-- Shadow DOM encapsulation
-- Responsive layout support
-- Copy button uses clipboard API
-
-## Accessibility
-
-- Proper ARIA labels for copy button
-- Keyboard navigation support
-- Screen reader friendly code blocks
-- High contrast syntax colors
-
-## Best Practices
-
-1. **Language Selection**: Always specify the correct language for accurate highlighting
-2. **Code Formatting**: Pre-format code with proper indentation
-3. **Preview Usage**: Only use preview for HTML content
-4. **Long Code**: Enable wrapping for long lines to prevent horizontal scrolling
-5. **Copy Button**: Include for code snippets users might want to reuse
-
-## Common Pitfalls
-
-- **Escaping**: HTML entities in code strings need proper escaping
-- **Indentation**: Code preview component auto-detects minimum indentation
-- **Performance**: Very large code blocks may impact rendering
-
-## Related Components
-
-- **[Surface](./surface.md)**: Often used as container for code examples
-- **[Card](./card.md)**: Code blocks in documentation cards
-- **[Typography](./typography.md)**: For code captions and descriptions
-- **[Tabs](./tabs.md)**: Switching between code and preview
-
-## TypeScript Interface
-
-```typescript
-interface SchmancyCodeElement extends HTMLElement {
-  language: string;
-  code: string;
-  copyButton: boolean;
-  wrap: boolean;
-}
-
-interface SchmancyCodePreviewElement extends HTMLElement {
-  language: string;
-  layout: 'vertical' | 'horizontal';
-  preview: boolean;
-}
-```
+Renders inside a collapsible `schmancy-details` with a macOS-style header (colored dots + language label). Uses highlight.js with schmancy color tokens.

package/dist/ai/connectivity.md

@@ -0,0 +1,36 @@
+# schmancy-connectivity-status
+
+> App-wide online/offline banner. Mount once near the root and forget it.
+
+## Usage
+```html
+<!-- In your app shell -->
+<schmancy-connectivity-status></schmancy-connectivity-status>
+```
+
+## Properties
+None — it's entirely self-driven from `window` online/offline events.
+
+## Behavior
+- Listens to `window` `online` / `offline` events via RxJS `merge`.
+- `distinctUntilChanged` prevents duplicate banners.
+- Animated slide-down banner with spring-style easing when state changes.
+- Offline: error-colored banner with pulsing icon.
+- Online (after offline): success-colored banner with bouncing icon, auto-dismisses after a short timer.
+- Plays matching sounds from the `$sounds` audio service (skipped on initial load).
+- Respects `prefers-reduced-motion` implicitly via CSS.
+
+## Setup
+Place it once at the root — typically just inside your main `schmancy-theme` or app shell:
+
+```html
+<schmancy-theme>
+  <schmancy-connectivity-status></schmancy-connectivity-status>
+  <schmancy-page>
+    <!-- rest of app -->
+  </schmancy-page>
+</schmancy-theme>
+```
+
+## See Also
+- [audio.md](./audio.md) — the `$sounds` service used for feedback tones.

package/dist/ai/content-drawer.md

@@ -1,232 +1,65 @@
-# Content Drawer
-
-Responsive master-detail layout that automatically switches between **push mode** (desktop side panel) and **overlay mode** (mobile bottom sheet).
-
-## Quick Start
-
-```typescript
-import { schmancyContentDrawer } from '@schmancy/content-drawer'
-
-// Push content to drawer - ALWAYS use props pattern
-schmancyContentDrawer.push({
-  component: ItemDetail,
-  props: { itemId: '123' }
-})
-```
-
-## Service API
-
-```typescript
-import { schmancyContentDrawer } from '@schmancy/content-drawer'
-```
-
-### `push(options)` - Recommended
-
-Push a component to the drawer. Creates a fresh instance each time.
-
-```typescript
-interface DrawerPushOptions {
-  component: ComponentType      // Component class, tag name, or lazy import
-  props?: Record<string, unknown>    // Properties to set on component
-  state?: Record<string, unknown>    // Router state (push mode only)
-  params?: Record<string, unknown>   // Router params (push mode only)
-}
-```
-
-**Usage:**
-
-```typescript
-// Component class with props (RECOMMENDED)
-schmancyContentDrawer.push({
-  component: UserDetails,
-  props: { userId: '123' }
-})
-
-// String tag name
-schmancyContentDrawer.push({
-  component: 'user-details',
-  props: { userId: '123' }
-})
-
-// Lazy import
-import { lazy } from '@schmancy/area'
-schmancyContentDrawer.push({
-  component: lazy(() => import('./user-details')),
-  props: { userId: '123' }
-})
-```
-
-### `dimiss(ref)` - Close Drawer
-
-Closes the drawer panel. Note: typo in actual API (`dimiss` not `dismiss`).
-
-```typescript
-schmancyContentDrawer.dimiss(window)
-```
-
-### `render(ref, component, title?)` - Low-level API
-
-Lower-level API for manual control. Prefer `push()` for most cases.
-
-```typescript
-schmancyContentDrawer.render(window, new UserDetail(), 'User Details')
-```
-
-## Component Structure
-
-```html
-<schmancy-content-drawer>
-  <!-- Main content (list/master view) -->
-  <schmancy-content-drawer-main>
-    <schmancy-list>
-      ${items.map(item => html`
-        <schmancy-list-item @click=${() => this.selectItem(item)}>
-          ${item.name}
-        </schmancy-list-item>
-      `)}
-    </schmancy-list>
-  </schmancy-content-drawer-main>
-
-  <!-- Detail panel (sheet view) -->
-  <schmancy-content-drawer-sheet>
-    <section slot="placeholder">
-      <!-- Empty state when nothing selected -->
-      <p>Select an item to view details</p>
-    </section>
-  </schmancy-content-drawer-sheet>
-</schmancy-content-drawer>
-```
-
-## Properties
-
-### `<schmancy-content-drawer>`
-
-| Property | Type | Default | Description |
-|----------|------|---------|-------------|
-| `minWidth` | `{main: number, sheet: number}` | `{main: 360, sheet: 576}` | Minimum widths for panels |
-| `open` | `'open' \| 'close'` | Auto | Panel state (auto-managed) |
-| `mode` | `'push' \| 'overlay'` | Auto | Display mode (auto-switches at breakpoint) |
-
-### `<schmancy-content-drawer-sheet>`
-
-| Property | Type | Description |
-|----------|------|-------------|
-| `minWidth` | `number` | Override sheet minimum width |
-
-## How It Works
-
-The drawer automatically switches modes based on available width:
-
-| Mode | Breakpoint | Behavior |
-|------|------------|----------|
-| **Push** | >= 936px (main + sheet) | Side panel slides in, main content shrinks |
-| **Overlay** | < 936px | Bottom sheet modal overlays content |
-
-**Internal routing:**
-
-- **Push mode**: Uses `area.push()` with `historyStrategy: 'silent'`
-- **Overlay mode**: Uses `sheet.open()` as a modal
-
-## Common Patterns
-
-### Master-Detail List
-
-```typescript
-@customElement('my-list-page')
-class MyListPage extends LitElement {
-  @state() items: Item[] = []
-
-  private selectItem(item: Item) {
-    schmancyContentDrawer.push({
-      component: ItemDetail,
-      props: { itemId: item.id }
-    })
-  }
-
-  render() {
-    return html`
-      <schmancy-content-drawer>
-        <schmancy-content-drawer-main>
-          <schmancy-list>
-            ${repeat(this.items, i => i.id, item => html`
-              <schmancy-list-item @click=${() => this.selectItem(item)}>
-                ${item.name}
-              </schmancy-list-item>
-            `)}
-          </schmancy-list>
-        </schmancy-content-drawer-main>
-
-        <schmancy-content-drawer-sheet>
-          <section slot="placeholder" class="h-full flex items-center justify-center">
-            <div class="text-center">
-              <schmancy-icon class="text-6xl text-surface-300">list</schmancy-icon>
-              <schmancy-typography>Select an item</schmancy-typography>
-            </div>
-          </section>
-        </schmancy-content-drawer-sheet>
-      </schmancy-content-drawer>
-    `
-  }
-}
-```
-
-### With Custom Min Widths
-
-```typescript
-html`
-  <schmancy-content-drawer .minWidth=${{ main: 400, sheet: 600 }}>
-    <schmancy-content-drawer-main>...</schmancy-content-drawer-main>
-    <schmancy-content-drawer-sheet .minWidth=${600}>...</schmancy-content-drawer-sheet>
-  </schmancy-content-drawer>
-`
-```
-
-## Important Notes
-
-### Always Use `props` Pattern
-
-**DO NOT** create component instances manually - use the `props` pattern:
-
-```typescript
-// WRONG - instance won't update on subsequent pushes
-const viewer = new ItemDetail()
-viewer.itemId = '123'
-schmancyContentDrawer.push({ component: viewer })
-
-// CORRECT - fresh instance created each time
-schmancyContentDrawer.push({
-  component: ItemDetail,
-  props: { itemId: '123' }
-})
-```
-
-### Subsequent Pushes
-
-Each `push()` call replaces the current sheet content. The drawer creates a fresh component instance with the provided props.
-
-### Placeholder Slot
-
-The `placeholder` slot in `<schmancy-content-drawer-sheet>` shows when no content has been pushed. Use it for empty states.
-
-### Layout Integration
-
-The content drawer works best as a flex child:
-
-```typescript
-html`
-  <section class="grid grid-rows-[auto_1fr]" ${fullHeight()}>
-    <schmancy-nav-drawer-appbar>Header</schmancy-nav-drawer-appbar>
-    <schmancy-content-drawer class="flex-1">
-      ...
-    </schmancy-content-drawer>
-  </section>
-`
-```
-
-## Events
-
-| Event | Detail | Description |
-|-------|--------|-------------|
-| `schmancy-content-drawer-toggle` | `{ state: 'open' \| 'close' }` | Drawer open/close |
-| `schmancy-content-drawer-render` | `{ component, props, state, params }` | Content render request |
-| `schmancy-content-drawer-resize` | - | Triggers recalculation |
+# schmancy-content-drawer
+
+> Responsive content drawer that switches between side panel (push) and bottom sheet (overlay) based on viewport.
+
+## Usage
+```html
+<schmancy-content-drawer>
+  <schmancy-content-drawer-main>
+    <!-- Primary content -->
+  </schmancy-content-drawer-main>
+  <schmancy-content-drawer-sheet>
+    <div slot="placeholder">Select an item</div>
+  </schmancy-content-drawer-sheet>
+</schmancy-content-drawer>
+```
+
+## Properties (schmancy-content-drawer)
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| open | `'open'\|'close'` | auto | Sheet state |
+
+## Properties (schmancy-content-drawer-main)
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| minWidth | number | `360` | Minimum width in pixels |
+
+## Properties (schmancy-content-drawer-sheet)
+| Property | Type | Default | Description |
+|----------|------|---------|-------------|
+| minWidth | number | `576` | Minimum width in pixels |
+
+## Rendering Content to Sheet
+```typescript
+// Dispatch event to render component in the sheet
+window.dispatchEvent(new CustomEvent('schmancy-content-drawer-render', {
+  detail: {
+    component: myElement,
+    state: {},
+    params: {},
+    props: {}
+  }
+}))
+```
+
+## Behavior
+- When `main.minWidth + sheet.minWidth <= viewport`: push mode (side-by-side)
+- When viewport is smaller: overlay mode (bottom sheet)
+- Sheet content is routed via an internal `schmancy-area`
+
+## Examples
+```html
+<schmancy-content-drawer>
+  <schmancy-content-drawer-main minWidth="400">
+    <div class="p-4">
+      <h2>List View</h2>
+      <!-- List items that open detail in sheet -->
+    </div>
+  </schmancy-content-drawer-main>
+  <schmancy-content-drawer-sheet minWidth="500">
+    <div slot="placeholder">
+      <p>Select an item to view details</p>
+    </div>
+  </schmancy-content-drawer-sheet>
+</schmancy-content-drawer>
+```