@semantic-components/code 0.61.0

package/src/lib/components/code-editor/index.ts

@@ -0,0 +1,7 @@
+export { ScCodeEditor } from './code-editor';
+export { ScCodeEditorHeader } from './code-editor-header';
+export { ScCodeEditorLabel } from './code-editor-label';
+export { ScCodeEditorFooter } from './code-editor-footer';
+export { ScCodeEditorContent, detectLanguage } from './code-editor-content';
+export { ScCodeEditorCopyButton } from './code-editor-copy-button';
+export type { ScCodeEditorLanguage } from './code-editor-content';

package/src/lib/components/code-viewer/README.md

@@ -0,0 +1,178 @@
+# Code Viewer Components
+
+A read-only code display component with syntax highlighting powered by [Shiki](https://shiki.style/) and shadcn/ui styling. Automatically follows the app's light/dark theme.
+
+## Import
+
+```typescript
+import { ScCodeViewer, ScCodeViewerHeader, ScCodeViewerLabel, ScCodeViewerContent, ScCodeViewerLanguage } from '@semantic-components/ui-lab';
+```
+
+## Architecture
+
+The component uses Shiki's dual-theme feature (`github-light` + `github-dark`) with `defaultColor: false` to generate CSS variable-based output. The CSS switches between `--shiki-light` and `--shiki-dark` variables based on the `.dark` class on the document root.
+
+```
+ScCodeViewer (Root - div[sc-code-viewer])
+├── ScCodeViewerHeader (Header - div[sc-code-viewer-header])
+│   ├── ScCodeViewerLabel (Label - span[sc-code-viewer-label])
+│   └── ScCopyButton (Copy button)
+└── ScCodeViewerContent (Content - div[sc-code-viewer-content])
+```
+
+## Components
+
+| Component             | Selector                      | Description                      |
+| --------------------- | ----------------------------- | -------------------------------- |
+| `ScCodeViewer`        | `div[sc-code-viewer]`         | Root container with border       |
+| `ScCodeViewerHeader`  | `div[sc-code-viewer-header]`  | Header bar with border           |
+| `ScCodeViewerLabel`   | `span[sc-code-viewer-label]`  | Label for filename or language   |
+| `ScCodeViewerContent` | `div[sc-code-viewer-content]` | Content with syntax highlighting |
+
+## Inputs
+
+### ScCodeViewer (Root)
+
+| Input   | Type     | Default | Description            |
+| ------- | -------- | ------- | ---------------------- |
+| `class` | `string` | `''`    | Additional CSS classes |
+
+The root container with border and rounded corners.
+
+### ScCodeViewerHeader
+
+| Input   | Type     | Default | Description            |
+| ------- | -------- | ------- | ---------------------- |
+| `class` | `string` | `''`    | Additional CSS classes |
+
+Header bar with bottom border for filename/language label and copy button.
+
+### ScCodeViewerLabel
+
+| Input   | Type     | Default | Description            |
+| ------- | -------- | ------- | ---------------------- |
+| `class` | `string` | `''`    | Additional CSS classes |
+
+Label for displaying filename or language with muted foreground styling.
+
+### ScCodeViewerContent
+
+| Input             | Type                   | Default       | Description                      |
+| ----------------- | ---------------------- | ------------- | -------------------------------- |
+| `code`            | `string`               | **required**  | The source code to display       |
+| `language`        | `ScCodeViewerLanguage` | `'plaintext'` | Language for syntax highlighting |
+| `showLineNumbers` | `boolean`              | `false`       | Whether to show line numbers     |
+| `class`           | `string`               | `''`          | Additional CSS classes           |
+
+The content component with Shiki syntax highlighting.
+
+## Supported Languages
+
+`angular-ts` | `typescript` | `javascript` | `html` | `css` | `json` | `python` | `bash` | `shell` | `markdown` | `yaml` | `sql` | `go` | `rust` | `java` | `plaintext`
+
+## Usage
+
+### Basic Usage
+
+```html
+<div sc-code-viewer>
+  <div sc-code-viewer-header>
+    <span sc-code-viewer-label>TypeScript</span>
+    <button sc-copy-button [value]="code"></button>
+  </div>
+  <div sc-code-viewer-content [code]="code" language="typescript"></div>
+</div>
+```
+
+### With Filename
+
+```html
+<div sc-code-viewer>
+  <div sc-code-viewer-header>
+    <span sc-code-viewer-label>app.component.ts</span>
+    <button sc-copy-button [value]="code"></button>
+  </div>
+  <div sc-code-viewer-content [code]="code" language="angular-ts"></div>
+</div>
+```
+
+### With Line Numbers
+
+```html
+<div sc-code-viewer>
+  <div sc-code-viewer-header>
+    <span sc-code-viewer-label>{{ filename }}</span>
+    <button sc-copy-button [value]="code"></button>
+  </div>
+  <div sc-code-viewer-content [code]="code" language="typescript" [showLineNumbers]="true"></div>
+</div>
+```
+
+### Without Header
+
+```html
+<div sc-code-viewer>
+  <div sc-code-viewer-content [code]="code" language="json"></div>
+</div>
+```
+
+### With Max Height
+
+```html
+<div sc-code-viewer>
+  <div sc-code-viewer-header>
+    <span sc-code-viewer-label>{{ language }}</span>
+    <button sc-copy-button [value]="code"></button>
+  </div>
+  <div sc-code-viewer-content [code]="longCode" language="typescript" maxHeight="300px"></div>
+</div>
+```
+
+### Custom Header Content
+
+```html
+<div sc-code-viewer>
+  <div sc-code-viewer-header>
+    <div class="flex items-center gap-2">
+      <svg class="size-4"><!-- icon --></svg>
+      <span sc-code-viewer-label>{{ filename }}</span>
+      <span class="text-xs text-muted-foreground">({{ lines }} lines)</span>
+    </div>
+    <div class="flex gap-2">
+      <button>Download</button>
+      <button sc-copy-button [value]="code"></button>
+    </div>
+  </div>
+  <div sc-code-viewer-content [code]="code" [language]="language"></div>
+</div>
+```
+
+## Theming
+
+The component automatically follows the app's theme:
+
+- **Light mode**: Uses `github-light` Shiki theme
+- **Dark mode**: Uses `github-dark` Shiki theme (activated by `.dark` class on `<html>`)
+
+No manual theme configuration is needed. The component renders both theme colors as CSS variables and switches between them with CSS.
+
+## Features
+
+- **Composable Architecture**: Build custom layouts with separate header and content components
+- **Syntax Highlighting**: Powered by Shiki with 30+ languages supported
+- **Automatic Theming**: Follows app's light/dark mode automatically
+- **Line Numbers**: Optional line number display
+- **Copy Button**: Built-in copy-to-clipboard functionality with ScCopyButton
+- **Customizable**: All components accept custom classes
+- **Accessible**: Proper semantic HTML and ARIA attributes
+
+## Styling
+
+The components use Tailwind CSS with shadcn/ui design tokens:
+
+- **Container** (`ScCodeViewer`): `rounded-lg border border-border overflow-hidden`
+- **Header** (`ScCodeViewerHeader`): `flex items-center justify-between border-b border-border px-4 py-2`
+- **Label** (`ScCodeViewerLabel`): `text-xs font-medium text-muted-foreground`
+- **Content** (`ScCodeViewerContent`): `overflow-auto` with configurable max-height
+- **Code font**: System monospace stack (`ui-monospace, SFMono-Regular, ...`)
+- **Line numbers**: Muted foreground at 50% opacity, non-selectable

package/src/lib/components/code-viewer/code-viewer-content.ts

@@ -0,0 +1,96 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  effect,
+  inject,
+  input,
+  signal,
+  ViewEncapsulation,
+} from '@angular/core';
+import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
+import { codeToHtml } from 'shiki';
+import { cn } from '@semantic-components/ui';
+
+export type ScCodeViewerLanguage =
+  | 'angular-ts'
+  | 'typescript'
+  | 'javascript'
+  | 'html'
+  | 'css'
+  | 'json'
+  | 'python'
+  | 'bash'
+  | 'shell'
+  | 'markdown'
+  | 'yaml'
+  | 'sql'
+  | 'go'
+  | 'rust'
+  | 'java'
+  | 'plaintext';
+
+@Component({
+  selector: 'div[sc-code-viewer-content]',
+  template: `
+    @if (highlightedHtml()) {
+      <div [class]="contentClass()" [innerHTML]="highlightedHtml()"></div>
+    } @else {
+      <pre
+        class="m-0 p-4 text-sm leading-relaxed font-mono text-foreground"
+      ><code>{{ code() }}</code></pre>
+    }
+  `,
+  host: {
+    'data-slot': 'code-viewer-content',
+    '[class]': 'wrapperClass()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScCodeViewerContent {
+  readonly code = input.required<string>();
+  readonly language = input<ScCodeViewerLanguage>('plaintext');
+  readonly showLineNumbers = input(false);
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  private readonly sanitizer = inject(DomSanitizer);
+
+  protected readonly highlightedHtml = signal<SafeHtml | null>(null);
+
+  protected readonly wrapperClass = computed(() =>
+    cn('overflow-auto', this.classInput()),
+  );
+
+  protected readonly contentClass = computed(() =>
+    cn(this.showLineNumbers() && 'shiki-line-numbers'),
+  );
+
+  constructor() {
+    effect(() => {
+      const code = this.code();
+      const lang = this.language();
+
+      this.highlight(code, lang);
+    });
+  }
+
+  private async highlight(
+    code: string,
+    lang: ScCodeViewerLanguage,
+  ): Promise<void> {
+    try {
+      const html = await codeToHtml(code, {
+        lang,
+        themes: {
+          light: 'github-light',
+          dark: 'github-dark',
+        },
+        defaultColor: false,
+      });
+      this.highlightedHtml.set(this.sanitizer.bypassSecurityTrustHtml(html));
+    } catch {
+      this.highlightedHtml.set(null);
+    }
+  }
+}

package/src/lib/components/code-viewer/code-viewer-header.ts

@@ -0,0 +1,31 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Component({
+  selector: 'div[sc-code-viewer-header]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'code-viewer-header',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScCodeViewerHeader {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn(
+      'flex items-center justify-between border-b border-border px-4 py-2',
+      this.classInput(),
+    ),
+  );
+}

package/src/lib/components/code-viewer/code-viewer-label.ts

@@ -0,0 +1,28 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Component({
+  selector: 'span[sc-code-viewer-label]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'code-viewer-label',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScCodeViewerLabel {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn('text-xs font-medium text-muted-foreground', this.classInput()),
+  );
+}

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

@@ -0,0 +1,28 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+  ViewEncapsulation,
+} from '@angular/core';
+import { cn } from '@semantic-components/ui';
+
+@Component({
+  selector: 'div[sc-code-viewer]',
+  template: `
+    <ng-content />
+  `,
+  host: {
+    'data-slot': 'code-viewer',
+    '[class]': 'class()',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ScCodeViewer {
+  readonly classInput = input<string>('', { alias: 'class' });
+
+  protected readonly class = computed(() =>
+    cn('overflow-hidden rounded-lg border border-border', this.classInput()),
+  );
+}

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

@@ -0,0 +1,5 @@
+export type { ScCodeViewerLanguage } from './code-viewer-content';
+export { ScCodeViewer } from './code-viewer';
+export { ScCodeViewerHeader } from './code-viewer-header';
+export { ScCodeViewerLabel } from './code-viewer-label';
+export { ScCodeViewerContent } from './code-viewer-content';

package/src/lib/components/index.ts

@@ -0,0 +1,2 @@
+export * from './code-editor';
+export * from './code-viewer';

package/src/lib/styles/index.css

@@ -0,0 +1 @@
+@import './shiki.css';

package/src/lib/styles/shiki.css

@@ -0,0 +1,48 @@
+/* Shiki syntax highlighting styles - generic and reusable */
+
+pre.shiki {
+  margin: 0;
+  padding: 1rem;
+  overflow-x: auto;
+  font-size: 0.875rem;
+  line-height: 1.625;
+}
+
+pre.shiki,
+pre.shiki span {
+  color: var(--shiki-light);
+  background-color: var(--shiki-light-bg);
+}
+
+.dark pre.shiki,
+.dark pre.shiki span {
+  color: var(--shiki-dark);
+  background-color: var(--shiki-dark-bg);
+}
+
+pre.shiki code {
+  font-family:
+    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono',
+    monospace;
+}
+
+/* Line numbers support */
+.shiki-line-numbers pre.shiki code {
+  counter-reset: line;
+}
+
+.shiki-line-numbers pre.shiki code .line {
+  display: inline-block;
+  width: 100%;
+}
+
+.shiki-line-numbers pre.shiki code .line::before {
+  counter-increment: line;
+  content: counter(line);
+  display: inline-block;
+  width: 2rem;
+  margin-right: 1rem;
+  text-align: right;
+  color: oklch(from var(--muted-foreground) l c h / 0.5);
+  user-select: none;
+}

package/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "isolatedModules": true,
+    "target": "es2022",
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noImplicitOverride": true,
+    "noPropertyAccessFromIndexSignature": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "emitDecoratorMetadata": false,
+    "module": "preserve"
+  },
+  "angularCompilerOptions": {
+    "enableI18nLegacyMessageIdFormat": false,
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": true,
+    "strictTemplates": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ]
+}

package/tsconfig.lib.json

@@ -0,0 +1,12 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "declaration": true,
+    "declarationMap": true,
+    "inlineSources": true,
+    "types": []
+  },
+  "include": ["src/**/*.ts"],
+  "exclude": ["src/**/*.spec.ts", "src/**/*.test.ts"]
+}

package/tsconfig.lib.prod.json

@@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
+  "angularCompilerOptions": {}
+}