@sondor-technology/sondor-components 1.0.0 → 1.0.1-develop.2

package/src/components/code-block/code-block.ts

@@ -1,257 +1,257 @@
-import { LitElement, html, css } from 'lit';
-import { customElement, property, state, query } from 'lit/decorators.js';
-import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import { resetStyles } from '../../styles/reset.js';
-
-import Prism from 'prismjs';
-import 'prismjs/components/prism-typescript.js';
-import 'prismjs/components/prism-javascript.js';
-import 'prismjs/components/prism-css.js';
-import 'prismjs/components/prism-json.js';
-import 'prismjs/components/prism-bash.js';
-import 'prismjs/components/prism-csharp.js';
-
-interface CodeSnippet {
-  lang: string;
-  label: string;
-  rawCode: string;
-  highlightedCode: string;
-}
-
-@customElement('st-code-block')
-export class StCodeBlock extends LitElement {
-  // Fallback language if a template doesn't provide one
-  @property({ type: String }) language = 'typescript';
-  
-  @state() private _snippets: CodeSnippet[] = [];
-  @state() private _activeIndex = 0;
-  @state() private _copied = false;
-
-  @query('slot[name="raw"]') private _slot!: HTMLSlotElement;
-
-  static styles = [
-    resetStyles,
-    css`
-      :host {
-        display: block;
-        margin: var(--st-spacing-md) 0;
-        border-radius: 8px;
-        background-color: var(--st-color-surface);
-        border: 1px solid var(--st-color-border);
-        overflow: hidden;
-      }
-
-      .header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        background-color: rgba(0, 0, 0, 0.2);
-        border-bottom: 1px solid var(--st-color-border);
-        padding: 0 var(--st-spacing-md);
-        min-height: 2.5rem; /* 40px */
-      }
-
-      /* Single language label */
-      .language-label {
-        font-size: var(--st-font-size-xs);
-        color: var(--st-color-text-muted);
-        text-transform: uppercase;
-        letter-spacing: 0.05em;
-        font-weight: var(--st-font-weight-bold);
-      }
-
-      /* Multi-language Tabs */
-      .tabs {
-        display: flex;
-        gap: var(--st-spacing-md);
-        height: 100%;
-      }
-
-      .tab {
-        background: transparent;
-        border: none;
-        border-bottom: 2px solid transparent;
-        color: var(--st-color-text-muted);
-        font-size: var(--st-font-size-xs);
-        font-weight: var(--st-font-weight-medium);
-        padding: var(--st-spacing-xs) 0;
-        cursor: pointer;
-        transition: all 0.2s ease;
-      }
-
-      .tab:hover {
-        color: var(--st-color-text);
-      }
-
-      .tab.active {
-        color: var(--st-color-primary);
-        border-bottom-color: var(--st-color-primary);
-      }
-
-      /* Copy Button */
-      .copy-button {
-        background: transparent;
-        border: 1px solid transparent;
-        color: var(--st-color-text-muted);
-        cursor: pointer;
-        display: flex;
-        align-items: center;
-        gap: var(--st-spacing-xs);
-        padding: 4px 8px;
-        border-radius: 4px;
-        font-size: var(--st-font-size-xs);
-        transition: all 0.2s ease;
-        margin-left: auto; /* Pushes it to the right */
-      }
-
-      .copy-button:hover {
-        color: var(--st-color-text);
-        background-color: rgba(255, 255, 255, 0.05);
-      }
-
-      .copy-button svg {
-        width: 14px;
-        height: 14px;
-        fill: none;
-        stroke: currentColor;
-        stroke-width: 2;
-        stroke-linecap: round;
-        stroke-linejoin: round;
-      }
-
-      .copy-button.copied {
-        color: var(--st-color-success);
-      }
-
-      pre {
-        margin: 0;
-        padding: var(--st-spacing-md);
-        overflow-x: auto;
-        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
-        font-size: 0.875rem;
-        line-height: 1.5;
-        color: var(--st-color-text);
-      }
-
-      .raw-content {
-        display: none;
-      }
-
-      /* ==========================================================
-         Prism.js Theme Mapping (Space Grey / Purple Aesthetic)
-         ========================================================== */
-      .token.comment, .token.prolog, .token.doctype, .token.cdata { color: var(--st-color-text-muted); font-style: italic; }
-      .token.punctuation { color: #8b949e; }
-      .token.namespace { opacity: .7; }
-      .token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted { color: #79c0ff; }
-      .token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: #a5d6ff; }
-      .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string { color: var(--st-color-text); }
-      .token.atrule, .token.attr-value, .token.keyword { color: var(--st-color-primary); }
-      .token.function, .token.class-name { color: #d2a8ff; }
-      .token.regex, .token.important, .token.variable { color: #ffa657; }
-    `
-  ];
-
-  private _handleSlotChange() {
-    const nodes = this._slot.assignedNodes({ flatten: true });
-    
-    // Find ALL template tags passed into the slot
-    const templates = nodes.filter(n => n instanceof HTMLTemplateElement) as HTMLTemplateElement[];
-    
-    if (templates.length > 0) {
-      // Map over every template and parse its code and attributes
-      this._snippets = templates.map(template => {
-        const lang = template.getAttribute('data-lang') || this.language;
-        const label = template.getAttribute('data-label') || lang; // Fallback to lang if no label provided
-        const rawCode = this._dedent(template.innerHTML);
-        
-        const grammar = Prism.languages[lang] || Prism.languages.javascript;
-        const highlightedCode = Prism.highlight(rawCode, grammar, lang);
-        
-        return { lang, label, rawCode, highlightedCode };
-      });
-    } else {
-      // Fallback: If no template is used, process raw text just like before
-      const rawText = nodes.map(n => n.textContent).join('');
-      const rawCode = this._dedent(rawText);
-      
-      if (rawCode) {
-        const grammar = Prism.languages[this.language] || Prism.languages.javascript;
-        const highlightedCode = Prism.highlight(rawCode, grammar, this.language);
-        this._snippets = [{ lang: this.language, label: this.language, rawCode, highlightedCode }];
-      }
-    }
-    
-    // Reset to the first tab whenever new code is injected
-    this._activeIndex = 0;
-  }
-
-  private _dedent(text: string): string {
-    const lines = text.split('\n');
-    const minIndent = lines
-      .filter(line => line.trim().length > 0)
-      .reduce((min, line) => {
-        const indent = line.match(/^\s*/)?.[0].length || 0;
-        return Math.min(min, indent);
-      }, Infinity);
-
-    if (minIndent === Infinity || minIndent === 0) return text.trim();
-    return lines.map(line => line.slice(minIndent)).join('\n').trim();
-  }
-
-  private async _copyToClipboard() {
-    // Copy the code from the currently active tab
-    const activeSnippet = this._snippets[this._activeIndex];
-    if (!activeSnippet) return;
-    
-    try {
-      await navigator.clipboard.writeText(activeSnippet.rawCode);
-      this._copied = true;
-      setTimeout(() => { this._copied = false; }, 2000);
-    } catch (err) {
-      console.error('Failed to copy text: ', err);
-    }
-  }
-
-  render() {
-    const activeSnippet = this._snippets[this._activeIndex];
-
-    return html`
-      <div class="header">
-        ${this._snippets.length > 1 
-          ? html`
-              <div class="tabs">
-                ${this._snippets.map((snippet, index) => html`
-                  <button 
-                    class="tab ${index === this._activeIndex ? 'active' : ''}" 
-                    @click=${() => this._activeIndex = index}
-                  >
-                    ${snippet.label}
-                  </button>
-                `)}
-              </div>
-            ` 
-          : html`
-              <span class="language-label">${activeSnippet?.label || this.language}</span>
-            `
-        }
-        
-        <button class="copy-button ${this._copied ? 'copied' : ''}" @click=${this._copyToClipboard}>
-          ${this._copied 
-            ? html`<svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg> Copied!`
-            : html`<svg viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg> Copy`
-          }
-        </button>
-      </div>
-      
-      <!-- Render the currently active snippet -->
-      ${activeSnippet ? html`
-        <pre><code class="language-${activeSnippet.lang}">${unsafeHTML(activeSnippet.highlightedCode)}</code></pre>
-      ` : ''}
-      
-      <div class="raw-content">
-        <slot name="raw" @slotchange=${this._handleSlotChange}></slot>
-      </div>
-    `;
-  }
+import { LitElement, html, css } from 'lit';
+import { customElement, property, state, query } from 'lit/decorators.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { resetStyles } from '../../styles/reset.js';
+
+import Prism from 'prismjs';
+import 'prismjs/components/prism-typescript.js';
+import 'prismjs/components/prism-javascript.js';
+import 'prismjs/components/prism-css.js';
+import 'prismjs/components/prism-json.js';
+import 'prismjs/components/prism-bash.js';
+import 'prismjs/components/prism-csharp.js';
+
+interface CodeSnippet {
+  lang: string;
+  label: string;
+  rawCode: string;
+  highlightedCode: string;
+}
+
+@customElement('st-code-block')
+export class StCodeBlock extends LitElement {
+  // Fallback language if a template doesn't provide one
+  @property({ type: String }) language = 'typescript';
+  
+  @state() private _snippets: CodeSnippet[] = [];
+  @state() private _activeIndex = 0;
+  @state() private _copied = false;
+
+  @query('slot[name="raw"]') private _slot!: HTMLSlotElement;
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+        margin: var(--st-spacing-md) 0;
+        border-radius: 8px;
+        background-color: var(--st-color-surface);
+        border: 1px solid var(--st-color-border);
+        overflow: hidden;
+      }
+
+      .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        background-color: rgba(0, 0, 0, 0.2);
+        border-bottom: 1px solid var(--st-color-border);
+        padding: 0 var(--st-spacing-md);
+        min-height: 2.5rem; /* 40px */
+      }
+
+      /* Single language label */
+      .language-label {
+        font-size: var(--st-font-size-xs);
+        color: var(--st-color-text-muted);
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+        font-weight: var(--st-font-weight-bold);
+      }
+
+      /* Multi-language Tabs */
+      .tabs {
+        display: flex;
+        gap: var(--st-spacing-md);
+        height: 100%;
+      }
+
+      .tab {
+        background: transparent;
+        border: none;
+        border-bottom: 2px solid transparent;
+        color: var(--st-color-text-muted);
+        font-size: var(--st-font-size-xs);
+        font-weight: var(--st-font-weight-medium);
+        padding: var(--st-spacing-xs) 0;
+        cursor: pointer;
+        transition: all 0.2s ease;
+      }
+
+      .tab:hover {
+        color: var(--st-color-text);
+      }
+
+      .tab.active {
+        color: var(--st-color-primary);
+        border-bottom-color: var(--st-color-primary);
+      }
+
+      /* Copy Button */
+      .copy-button {
+        background: transparent;
+        border: 1px solid transparent;
+        color: var(--st-color-text-muted);
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        gap: var(--st-spacing-xs);
+        padding: 4px 8px;
+        border-radius: 4px;
+        font-size: var(--st-font-size-xs);
+        transition: all 0.2s ease;
+        margin-left: auto; /* Pushes it to the right */
+      }
+
+      .copy-button:hover {
+        color: var(--st-color-text);
+        background-color: rgba(255, 255, 255, 0.05);
+      }
+
+      .copy-button svg {
+        width: 14px;
+        height: 14px;
+        fill: none;
+        stroke: currentColor;
+        stroke-width: 2;
+        stroke-linecap: round;
+        stroke-linejoin: round;
+      }
+
+      .copy-button.copied {
+        color: var(--st-color-success);
+      }
+
+      pre {
+        margin: 0;
+        padding: var(--st-spacing-md);
+        overflow-x: auto;
+        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+        font-size: 0.875rem;
+        line-height: 1.5;
+        color: var(--st-color-text);
+      }
+
+      .raw-content {
+        display: none;
+      }
+
+      /* ==========================================================
+         Prism.js Theme Mapping (Space Grey / Purple Aesthetic)
+         ========================================================== */
+      .token.comment, .token.prolog, .token.doctype, .token.cdata { color: var(--st-color-text-muted); font-style: italic; }
+      .token.punctuation { color: #8b949e; }
+      .token.namespace { opacity: .7; }
+      .token.property, .token.tag, .token.boolean, .token.number, .token.constant, .token.symbol, .token.deleted { color: #79c0ff; }
+      .token.selector, .token.attr-name, .token.string, .token.char, .token.builtin, .token.inserted { color: #a5d6ff; }
+      .token.operator, .token.entity, .token.url, .language-css .token.string, .style .token.string { color: var(--st-color-text); }
+      .token.atrule, .token.attr-value, .token.keyword { color: var(--st-color-primary); }
+      .token.function, .token.class-name { color: #d2a8ff; }
+      .token.regex, .token.important, .token.variable { color: #ffa657; }
+    `
+  ];
+
+  private _handleSlotChange() {
+    const nodes = this._slot.assignedNodes({ flatten: true });
+    
+    // Find ALL template tags passed into the slot
+    const templates = nodes.filter(n => n instanceof HTMLTemplateElement) as HTMLTemplateElement[];
+    
+    if (templates.length > 0) {
+      // Map over every template and parse its code and attributes
+      this._snippets = templates.map(template => {
+        const lang = template.getAttribute('data-lang') || this.language;
+        const label = template.getAttribute('data-label') || lang; // Fallback to lang if no label provided
+        const rawCode = this._dedent(template.innerHTML);
+        
+        const grammar = Prism.languages[lang] || Prism.languages.javascript;
+        const highlightedCode = Prism.highlight(rawCode, grammar, lang);
+        
+        return { lang, label, rawCode, highlightedCode };
+      });
+    } else {
+      // Fallback: If no template is used, process raw text just like before
+      const rawText = nodes.map(n => n.textContent).join('');
+      const rawCode = this._dedent(rawText);
+      
+      if (rawCode) {
+        const grammar = Prism.languages[this.language] || Prism.languages.javascript;
+        const highlightedCode = Prism.highlight(rawCode, grammar, this.language);
+        this._snippets = [{ lang: this.language, label: this.language, rawCode, highlightedCode }];
+      }
+    }
+    
+    // Reset to the first tab whenever new code is injected
+    this._activeIndex = 0;
+  }
+
+  private _dedent(text: string): string {
+    const lines = text.split('\n');
+    const minIndent = lines
+      .filter(line => line.trim().length > 0)
+      .reduce((min, line) => {
+        const indent = line.match(/^\s*/)?.[0].length || 0;
+        return Math.min(min, indent);
+      }, Infinity);
+
+    if (minIndent === Infinity || minIndent === 0) return text.trim();
+    return lines.map(line => line.slice(minIndent)).join('\n').trim();
+  }
+
+  private async _copyToClipboard() {
+    // Copy the code from the currently active tab
+    const activeSnippet = this._snippets[this._activeIndex];
+    if (!activeSnippet) return;
+    
+    try {
+      await navigator.clipboard.writeText(activeSnippet.rawCode);
+      this._copied = true;
+      setTimeout(() => { this._copied = false; }, 2000);
+    } catch (err) {
+      console.error('Failed to copy text: ', err);
+    }
+  }
+
+  render() {
+    const activeSnippet = this._snippets[this._activeIndex];
+
+    return html`
+      <div class="header">
+        ${this._snippets.length > 1 
+          ? html`
+              <div class="tabs">
+                ${this._snippets.map((snippet, index) => html`
+                  <button 
+                    class="tab ${index === this._activeIndex ? 'active' : ''}" 
+                    @click=${() => this._activeIndex = index}
+                  >
+                    ${snippet.label}
+                  </button>
+                `)}
+              </div>
+            ` 
+          : html`
+              <span class="language-label">${activeSnippet?.label || this.language}</span>
+            `
+        }
+        
+        <button class="copy-button ${this._copied ? 'copied' : ''}" @click=${this._copyToClipboard}>
+          ${this._copied 
+            ? html`<svg viewBox="0 0 24 24"><polyline points="20 6 9 17 4 12"></polyline></svg> Copied!`
+            : html`<svg viewBox="0 0 24 24"><rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path></svg> Copy`
+          }
+        </button>
+      </div>
+      
+      <!-- Render the currently active snippet -->
+      ${activeSnippet ? html`
+        <pre><code class="language-${activeSnippet.lang}">${unsafeHTML(activeSnippet.highlightedCode)}</code></pre>
+      ` : ''}
+      
+      <div class="raw-content">
+        <slot name="raw" @slotchange=${this._handleSlotChange}></slot>
+      </div>
+    `;
+  }
 }