@semantic-components/ui-lab 0.63.0 → 0.65.0

package/src/lib/components/diff-viewer/diff-viewer.ts

@@ -1,369 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  signal,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-import {
-  computeDiff,
-  computeWordDiff,
-  DiffLine,
-  DiffResult,
-} from './diff-algorithm';
-
-export type DiffViewMode = 'split' | 'unified';
-
-export type { DiffLine, DiffResult } from './diff-algorithm';
-
-@Component({
-  selector: 'sc-diff-viewer',
-  template: `
-    <div [class]="containerClass()">
-      <!-- Header -->
-      @if (showHeader()) {
-        <div
-          class="flex items-center justify-between px-4 py-2 border-b bg-muted/30"
-        >
-          <div class="flex items-center gap-4">
-            @if (oldTitle() || newTitle()) {
-              <div class="flex items-center gap-2 text-sm">
-                @if (oldTitle()) {
-                  <span class="text-muted-foreground">{{ oldTitle() }}</span>
-                }
-                @if (oldTitle() && newTitle()) {
-                  <span class="text-muted-foreground">→</span>
-                }
-                @if (newTitle()) {
-                  <span class="text-muted-foreground">{{ newTitle() }}</span>
-                }
-              </div>
-            }
-          </div>
-          <div class="flex items-center gap-4">
-            <!-- Stats -->
-            <div class="flex items-center gap-3 text-sm">
-              <span class="text-green-600 dark:text-green-400">
-                +{{ diffResult().additions }}
-              </span>
-              <span class="text-red-600 dark:text-red-400">
-                -{{ diffResult().deletions }}
-              </span>
-            </div>
-            <!-- View mode toggle -->
-            @if (showViewModeToggle()) {
-              <div class="flex items-center border rounded-md overflow-hidden">
-                <button
-                  type="button"
-                  (click)="viewMode.set('split')"
-                  [class]="viewModeButtonClass(viewMode() === 'split')"
-                >
-                  Split
-                </button>
-                <button
-                  type="button"
-                  (click)="viewMode.set('unified')"
-                  [class]="viewModeButtonClass(viewMode() === 'unified')"
-                >
-                  Unified
-                </button>
-              </div>
-            }
-          </div>
-        </div>
-      }
-
-      <!-- Diff content -->
-      <div class="overflow-auto" [style.max-height]="maxHeight()">
-        @if (viewMode() === 'split') {
-          <!-- Split view -->
-          <div class="flex">
-            <!-- Old (left) side -->
-            <div class="flex-1 border-r min-w-0">
-              @if (showSideHeaders()) {
-                <div
-                  class="px-3 py-1.5 text-xs font-medium text-muted-foreground bg-red-500/5 border-b"
-                >
-                  {{ oldTitle() || 'Original' }}
-                </div>
-              }
-              <div class="font-mono text-sm">
-                @for (line of diffResult().lines; track $index) {
-                  @if (line.type !== 'added') {
-                    <div [class]="getLineClass(line.type, 'old')">
-                      <span
-                        class="inline-block w-12 px-2 text-right text-muted-foreground select-none border-r"
-                      >
-                        {{ line.oldLineNumber || '' }}
-                      </span>
-                      <span class="inline-block w-6 text-center select-none">
-                        {{ line.type === 'removed' ? '-' : '' }}
-                      </span>
-                      <span
-                        class="px-2"
-                        [innerHTML]="highlightLine(line, 'old')"
-                      ></span>
-                    </div>
-                  } @else {
-                    <div class="h-6 bg-muted/30"></div>
-                  }
-                }
-              </div>
-            </div>
-            <!-- New (right) side -->
-            <div class="flex-1 min-w-0">
-              @if (showSideHeaders()) {
-                <div
-                  class="px-3 py-1.5 text-xs font-medium text-muted-foreground bg-green-500/5 border-b"
-                >
-                  {{ newTitle() || 'Modified' }}
-                </div>
-              }
-              <div class="font-mono text-sm">
-                @for (line of diffResult().lines; track $index) {
-                  @if (line.type !== 'removed') {
-                    <div [class]="getLineClass(line.type, 'new')">
-                      <span
-                        class="inline-block w-12 px-2 text-right text-muted-foreground select-none border-r"
-                      >
-                        {{ line.newLineNumber || '' }}
-                      </span>
-                      <span class="inline-block w-6 text-center select-none">
-                        {{ line.type === 'added' ? '+' : '' }}
-                      </span>
-                      <span
-                        class="px-2"
-                        [innerHTML]="highlightLine(line, 'new')"
-                      ></span>
-                    </div>
-                  } @else {
-                    <div class="h-6 bg-muted/30"></div>
-                  }
-                }
-              </div>
-            </div>
-          </div>
-        } @else {
-          <!-- Unified view -->
-          <div class="font-mono text-sm">
-            @for (line of diffResult().lines; track $index) {
-              <div [class]="getLineClass(line.type, 'unified')">
-                <span
-                  class="inline-block w-12 px-2 text-right text-muted-foreground select-none border-r"
-                >
-                  {{ line.oldLineNumber || '' }}
-                </span>
-                <span
-                  class="inline-block w-12 px-2 text-right text-muted-foreground select-none border-r"
-                >
-                  {{ line.newLineNumber || '' }}
-                </span>
-                <span
-                  class="inline-block w-6 text-center select-none font-bold"
-                >
-                  @switch (line.type) {
-                    @case ('added') {
-                      <span class="text-green-600 dark:text-green-400">+</span>
-                    }
-                    @case ('removed') {
-                      <span class="text-red-600 dark:text-red-400">-</span>
-                    }
-                    @default {}
-                  }
-                </span>
-                <span
-                  class="px-2"
-                  [innerHTML]="
-                    highlightLine(line, line.type === 'removed' ? 'old' : 'new')
-                  "
-                ></span>
-              </div>
-            }
-          </div>
-        }
-
-        <!-- Empty state -->
-        @if (diffResult().lines.length === 0) {
-          <div
-            class="flex items-center justify-center py-12 text-muted-foreground"
-          >
-            No differences found
-          </div>
-        }
-
-        @if (!oldText() && !newText()) {
-          <div
-            class="flex items-center justify-center py-12 text-muted-foreground"
-          >
-            No content to compare
-          </div>
-        }
-      </div>
-
-      <!-- Footer stats -->
-      @if (showFooter()) {
-        <div
-          class="flex items-center justify-between px-4 py-2 border-t text-xs text-muted-foreground bg-muted/30"
-        >
-          <span>{{ diffResult().lines.length }} lines</span>
-          <span>
-            {{ diffResult().additions }} additions,
-            {{ diffResult().deletions }} deletions,
-            {{ diffResult().unchanged }} unchanged
-          </span>
-        </div>
-      }
-    </div>
-  `,
-  styles: `
-    :host {
-      display: block;
-    }
-
-    .word-added {
-      background-color: rgba(34, 197, 94, 0.3);
-      border-radius: 2px;
-    }
-
-    .word-removed {
-      background-color: rgba(239, 68, 68, 0.3);
-      border-radius: 2px;
-    }
-  `,
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScDiffViewer {
-  // Inputs
-  readonly oldText = input<string>('');
-  readonly newText = input<string>('');
-  readonly oldTitle = input<string>('');
-  readonly newTitle = input<string>('');
-  readonly defaultViewMode = input<DiffViewMode>('split');
-  readonly showHeader = input(true);
-  readonly showFooter = input(true);
-  readonly showViewModeToggle = input(true);
-  readonly showSideHeaders = input(true);
-  readonly showWordDiff = input(true);
-  readonly ignoreWhitespace = input(false);
-  readonly ignoreCase = input(false);
-  readonly maxHeight = input<string>('600px');
-  readonly class = input<string>('');
-
-  // Internal state
-  readonly viewMode = signal<DiffViewMode>('split');
-
-  constructor() {
-    // Set initial view mode from input
-    this.viewMode.set(this.defaultViewMode());
-  }
-
-  protected readonly diffResult = computed((): DiffResult => {
-    const oldText = this.oldText();
-    const newText = this.newText();
-
-    if (!oldText && !newText) {
-      return { lines: [], additions: 0, deletions: 0, unchanged: 0 };
-    }
-
-    return computeDiff(oldText, newText, {
-      ignoreWhitespace: this.ignoreWhitespace(),
-      ignoreCase: this.ignoreCase(),
-    });
-  });
-
-  protected readonly containerClass = computed(() =>
-    cn('border rounded-lg overflow-hidden bg-background', this.class()),
-  );
-
-  protected viewModeButtonClass(active: boolean): string {
-    return cn(
-      'px-3 py-1 text-xs transition-colors',
-      active
-        ? 'bg-primary text-primary-foreground'
-        : 'bg-background hover:bg-muted',
-    );
-  }
-
-  protected getLineClass(
-    type: string,
-    side: 'old' | 'new' | 'unified',
-  ): string {
-    const baseClass = 'flex items-start leading-6 min-h-6';
-
-    switch (type) {
-      case 'added':
-        return cn(
-          baseClass,
-          'bg-green-500/10 text-green-900 dark:text-green-100',
-        );
-      case 'removed':
-        return cn(baseClass, 'bg-red-500/10 text-red-900 dark:text-red-100');
-      case 'unchanged':
-        return cn(baseClass, 'bg-background');
-      default:
-        return baseClass;
-    }
-  }
-
-  protected highlightLine(line: DiffLine, side: 'old' | 'new'): string {
-    if (!this.showWordDiff()) {
-      const content =
-        side === 'old'
-          ? (line.oldContent ?? line.content ?? '')
-          : (line.newContent ?? line.content ?? '');
-      return this.escapeHtml(content);
-    }
-
-    // For unchanged lines, just return the content
-    if (line.type === 'unchanged') {
-      return this.escapeHtml(line.content ?? '');
-    }
-
-    // For added/removed lines, try to find a matching line for word diff
-    if (line.type === 'added' || line.type === 'removed') {
-      const content =
-        side === 'old' ? (line.oldContent ?? '') : (line.newContent ?? '');
-      return this.escapeHtml(content);
-    }
-
-    // For modified lines, compute word diff
-    if (line.oldContent !== undefined && line.newContent !== undefined) {
-      const { oldParts, newParts } = computeWordDiff(
-        line.oldContent,
-        line.newContent,
-      );
-      const parts = side === 'old' ? oldParts : newParts;
-
-      return parts
-        .map((part) => {
-          const escaped = this.escapeHtml(part.text);
-          if (part.changed) {
-            const className = side === 'old' ? 'word-removed' : 'word-added';
-            return `<span class="${className}">${escaped}</span>`;
-          }
-          return escaped;
-        })
-        .join('');
-    }
-
-    const content =
-      side === 'old'
-        ? (line.oldContent ?? line.content ?? '')
-        : (line.newContent ?? line.content ?? '');
-    return this.escapeHtml(content);
-  }
-
-  private escapeHtml(text: string): string {
-    return text
-      .replace(/&/g, '&amp;')
-      .replace(/</g, '&lt;')
-      .replace(/>/g, '&gt;')
-      .replace(/"/g, '&quot;')
-      .replace(/'/g, '&#039;')
-      .replace(/ /g, '&nbsp;')
-      .replace(/\t/g, '&nbsp;&nbsp;');
-  }
-}

package/src/lib/components/diff-viewer/index.ts

@@ -1,8 +0,0 @@
-export { ScDiffViewer } from './diff-viewer';
-export type { DiffViewMode, DiffLine, DiffResult } from './diff-viewer';
-export {
-  computeDiff,
-  computeWordDiff,
-  createUnifiedDiff,
-} from './diff-algorithm';
-export type { DiffOptions } from './diff-algorithm';

package/src/lib/components/dock/README.md

@@ -1,204 +0,0 @@
-# Dock
-
-A macOS-style icon dock with magnification effect on hover, perfect for application launchers or navigation.
-
-## Composable Architecture
-
-The dock component follows a composable architecture pattern, where functionality is split across multiple components that work together through dependency injection.
-
-### Components
-
-- **ScDock**: Root directive that manages dock state (hover effects, magnification)
-- **ScDockItems**: Wrapper component for dock items
-- **ScDockItem**: Individual dock item button
-- **ScDockBadge**: Optional badge indicator for items
-
-### State Management
-
-The `ScDock` directive provides state through an `InjectionToken`:
-
-- Manages hover state for magnification effects
-- Handles item registration and indexing
-- Computes transformations for magnification
-- Emits click events
-
-Child components inject `SC_DOCK` to access parent state and methods.
-
-## Installation
-
-```typescript
-import { ScDock, ScDockItems, ScDockItem, ScDockBadge } from '@/ui/dock';
-import type { DockItem, DockPosition, DockSize } from '@/ui/dock';
-```
-
-## Usage
-
-### Basic Usage
-
-```html
-<nav sc-dock (itemClick)="onItemClick($event)">
-  <div sc-dock-items>
-    @for (item of items; track item.id) {
-    <button sc-dock-item [item]="item"></button>
-    }
-  </div>
-</nav>
-```
-
-```typescript
-items: DockItem[] = [
-  { id: 'home', label: 'Home', icon: '<svg>...</svg>' },
-  { id: 'mail', label: 'Mail', icon: '<svg>...</svg>' },
-  { id: 'settings', label: 'Settings', icon: '<svg>...</svg>' },
-];
-
-onItemClick(item: DockItem): void {
-  console.log('Clicked:', item.label);
-}
-```
-
-### With Badges
-
-```html
-<nav sc-dock>
-  <div sc-dock-items>
-    @for (item of items; track item.id) {
-    <button sc-dock-item [item]="item">
-      @if (item.badge !== undefined) {
-      <span sc-dock-badge>{{ item.badge }}</span>
-      }
-    </button>
-    }
-  </div>
-</nav>
-```
-
-```typescript
-items: DockItem[] = [
-  { id: 'mail', label: 'Mail', icon: '...', badge: 5 },
-  { id: 'notifications', label: 'Notifications', icon: '...', badge: '!' },
-];
-```
-
-### Without Magnification
-
-```html
-<nav sc-dock [magnification]="false">
-  <div sc-dock-items>
-    @for (item of items; track item.id) {
-    <button sc-dock-item [item]="item"></button>
-    }
-  </div>
-</nav>
-```
-
-### Custom Magnification Scale
-
-```html
-<nav sc-dock [magnificationScale]="2">
-  <div sc-dock-items>
-    @for (item of items; track item.id) {
-    <button sc-dock-item [item]="item"></button>
-    }
-  </div>
-</nav>
-```
-
-### Size Variants
-
-```html
-<nav sc-dock size="sm">
-  <div sc-dock-items>
-    @for (item of items; track item.id) {
-    <button sc-dock-item [item]="item"></button>
-    }
-  </div>
-</nav>
-```
-
-## API Reference
-
-### ScDock (Directive)
-
-**Selector**: `[sc-dock]`
-
-#### Inputs
-
-| Input                | Type                            | Default              | Description             |
-| -------------------- | ------------------------------- | -------------------- | ----------------------- |
-| `position`           | `'bottom' \| 'left' \| 'right'` | `'bottom'`           | Dock position           |
-| `size`               | `'sm' \| 'md' \| 'lg'`          | `'md'`               | Icon size               |
-| `magnification`      | `boolean`                       | `true`               | Enable magnification    |
-| `magnificationScale` | `number`                        | `1.5`                | Max magnification scale |
-| `ariaLabel`          | `string`                        | `'Application dock'` | Accessible label        |
-
-#### Outputs
-
-| Output      | Type       | Description                  |
-| ----------- | ---------- | ---------------------------- |
-| `itemClick` | `DockItem` | Emitted when item is clicked |
-
-### ScDockItems (Component)
-
-**Selector**: `div[sc-dock-items]`
-
-Container for dock items. Automatically styled based on parent dock configuration.
-
-#### Inputs
-
-| Input   | Type     | Default | Description            |
-| ------- | -------- | ------- | ---------------------- |
-| `class` | `string` | `''`    | Additional CSS classes |
-
-### ScDockItem (Component)
-
-**Selector**: `button[sc-dock-item]`
-
-Individual dock item button.
-
-#### Inputs
-
-| Input   | Type       | Default | Description            |
-| ------- | ---------- | ------- | ---------------------- |
-| `item`  | `DockItem` | -       | Required. Item data    |
-| `class` | `string`   | `''`    | Additional CSS classes |
-
-### ScDockBadge (Component)
-
-**Selector**: `span[sc-dock-badge]`
-
-Badge indicator for dock items.
-
-#### Inputs
-
-| Input   | Type     | Default | Description            |
-| ------- | -------- | ------- | ---------------------- |
-| `class` | `string` | `''`    | Additional CSS classes |
-
-## Type Definitions
-
-```typescript
-interface DockItem {
-  id: string;
-  label: string;
-  icon: string;
-  href?: string;
-  badge?: number | string;
-  disabled?: boolean;
-}
-
-type DockPosition = 'bottom' | 'left' | 'right';
-type DockSize = 'sm' | 'md' | 'lg';
-```
-
-## Features
-
-- macOS-style magnification effect on hover
-- Smooth scale transitions
-- Badge support for notifications
-- Multiple size variants
-- Disabled state support
-- Glassmorphism styling
-- Keyboard accessible
-- Touch-friendly
-- Customizable magnification scale

package/src/lib/components/dock/dock-badge.ts

@@ -1,36 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { cn } from '@semantic-components/ui';
-
-@Component({
-  selector: 'span[sc-dock-badge]',
-  template: `
-    <ng-content />
-  `,
-  host: {
-    'data-slot': 'dock-badge',
-    '[class]': 'class()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScDockBadge {
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  protected readonly class = computed(() =>
-    cn(
-      'absolute -top-1 -right-1',
-      'min-w-[18px] h-[18px] px-1',
-      'flex items-center justify-center',
-      'text-[10px] font-medium',
-      'bg-destructive text-destructive-foreground',
-      'rounded-full',
-      this.classInput(),
-    ),
-  );
-}

package/src/lib/components/dock/dock-item.ts

@@ -1,76 +0,0 @@
-import {
-  ChangeDetectionStrategy,
-  Component,
-  computed,
-  inject,
-  input,
-  ViewEncapsulation,
-} from '@angular/core';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
-import { cn } from '@semantic-components/ui';
-import { SC_DOCK } from './dock';
-import type { DockItem } from './dock-types';
-
-@Component({
-  selector: 'button[sc-dock-item]',
-  template: `
-    <span
-      class="inline-flex items-center justify-center [&>svg]:w-full [&>svg]:h-full"
-      [innerHTML]="sanitizedIcon()"
-    ></span>
-    <ng-content />
-  `,
-  host: {
-    'data-slot': 'dock-item',
-    type: 'button',
-    '[class]': 'class()',
-    '[style.transform]': 'transform()',
-    '[disabled]': 'item().disabled',
-    '[attr.aria-label]': 'item().label',
-    '[title]': 'item().label',
-    '(click)': 'onClick()',
-    '(mouseenter)': 'onMouseEnter()',
-  },
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
-})
-export class ScDockItem {
-  readonly dock = inject(SC_DOCK);
-  private readonly sanitizer = inject(DomSanitizer);
-  readonly item = input.required<DockItem>();
-  readonly classInput = input<string>('', { alias: 'class' });
-
-  private readonly itemIndex = this.dock.registerItem();
-
-  protected readonly sanitizedIcon = computed<SafeHtml>(() =>
-    this.sanitizer.bypassSecurityTrustHtml(this.item().icon),
-  );
-
-  protected readonly class = computed(() => {
-    const size = this.dock.size();
-
-    return cn(
-      'relative flex items-center justify-center',
-      'rounded-xl transition-all duration-150 ease-out',
-      'bg-muted/50 hover:bg-muted',
-      'focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
-      'disabled:opacity-50 disabled:cursor-not-allowed',
-      size === 'sm' && 'w-10 h-10 p-2',
-      size === 'md' && 'w-12 h-12 p-2.5',
-      size === 'lg' && 'w-14 h-14 p-3',
-      this.classInput(),
-    );
-  });
-
-  protected readonly transform = computed(() =>
-    this.dock.getItemTransform(this.itemIndex),
-  );
-
-  protected onClick(): void {
-    this.dock.onItemClick(this.item());
-  }
-
-  protected onMouseEnter(): void {
-    this.dock.onMouseEnter(this.itemIndex);
-  }
-}