@arclux/arc-ui 1.0.0

package/src/content/markdown.js

@@ -0,0 +1,294 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+/**
+ * Sanitize an HTML string by stripping <script> tags and on* event attributes.
+ */
+function sanitizeHtml(raw) {
+  const doc = new DOMParser().parseFromString(raw, 'text/html');
+  for (const el of doc.querySelectorAll('script')) el.remove();
+  for (const el of doc.querySelectorAll('*')) {
+    for (const attr of [...el.attributes]) {
+      if (attr.name.startsWith('on')) el.removeAttribute(attr.name);
+    }
+  }
+  return doc.body.innerHTML;
+}
+
+/**
+ * Lightweight regex-based Markdown-to-HTML parser.
+ * Handles headings, bold, italic, inline code, code blocks, lists,
+ * blockquotes, links, images, horizontal rules, and paragraphs.
+ */
+function parseMarkdown(src) {
+  if (!src) return '';
+
+  let out = '';
+  // Normalize line endings
+  const text = src.replace(/\r\n?/g, '\n');
+
+  // Extract fenced code blocks first to protect them from further parsing
+  const codeBlocks = [];
+  const withPlaceholders = text.replace(/^```(\w*)\n([\s\S]*?)^```/gm, (_match, lang, code) => {
+    const idx = codeBlocks.length;
+    const escaped = code.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+    const langAttr = lang ? ` class="language-${lang}"` : '';
+    codeBlocks.push(`<pre><code${langAttr}>${escaped}</code></pre>`);
+    return `\x00CODEBLOCK_${idx}\x00`;
+  });
+
+  // Split into blocks by double newline
+  const blocks = withPlaceholders.split(/\n{2,}/);
+
+  for (const block of blocks) {
+    const trimmed = block.trim();
+    if (!trimmed) continue;
+
+    // Code block placeholder
+    const cbMatch = trimmed.match(/^\x00CODEBLOCK_(\d+)\x00$/);
+    if (cbMatch) {
+      out += codeBlocks[parseInt(cbMatch[1])];
+      continue;
+    }
+
+    // Heading
+    const headingMatch = trimmed.match(/^(#{1,6})\s+(.+)$/);
+    if (headingMatch) {
+      const level = headingMatch[1].length;
+      out += `<h${level}>${inlineMarkdown(headingMatch[2])}</h${level}>`;
+      continue;
+    }
+
+    // Horizontal rule
+    if (/^[-*_]{3,}\s*$/.test(trimmed)) {
+      out += '<hr>';
+      continue;
+    }
+
+    // Blockquote
+    if (/^>\s?/.test(trimmed)) {
+      const content = trimmed
+        .split('\n')
+        .map(l => l.replace(/^>\s?/, ''))
+        .join('\n');
+      out += `<blockquote>${parseMarkdown(content)}</blockquote>`;
+      continue;
+    }
+
+    // Unordered list
+    if (/^[\-*]\s/.test(trimmed)) {
+      const items = trimmed.split('\n').filter(l => /^[\-*]\s/.test(l.trim()));
+      out += '<ul>' + items.map(l => `<li>${inlineMarkdown(l.trim().replace(/^[\-*]\s+/, ''))}</li>`).join('') + '</ul>';
+      continue;
+    }
+
+    // Ordered list
+    if (/^\d+\.\s/.test(trimmed)) {
+      const items = trimmed.split('\n').filter(l => /^\d+\.\s/.test(l.trim()));
+      out += '<ol>' + items.map(l => `<li>${inlineMarkdown(l.trim().replace(/^\d+\.\s+/, ''))}</li>`).join('') + '</ol>';
+      continue;
+    }
+
+    // Paragraph (default)
+    out += `<p>${inlineMarkdown(trimmed.replace(/\n/g, ' '))}</p>`;
+  }
+
+  return out;
+}
+
+/**
+ * Parse inline markdown: images, links, bold, italic, inline code.
+ */
+function inlineMarkdown(text) {
+  let s = text;
+  // Escape HTML entities in source (but not our generated tags)
+  s = s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  // Inline code (before bold/italic so backticks are handled first)
+  s = s.replace(/`([^`]+)`/g, '<code>$1</code>');
+  // Images
+  s = s.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, '<img src="$2" alt="$1">');
+  // Links
+  s = s.replace(/\[([^\]]+)\]\(([^)]+)\)/g, '<a href="$2">$1</a>');
+  // Bold
+  s = s.replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>');
+  // Italic
+  s = s.replace(/\*(.+?)\*/g, '<em>$1</em>');
+  return s;
+}
+
+/**
+ * @arc-prism static — renders Markdown content as styled HTML
+ */
+export class ArcMarkdown extends LitElement {
+  static properties = {
+    content: { type: String },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: block; }
+
+      .markdown {
+        font-family: var(--font-body);
+        font-size: var(--body-size);
+        font-weight: var(--body-weight);
+        line-height: var(--body-lh);
+        color: var(--text-secondary);
+      }
+
+      .markdown h1,
+      .markdown h2,
+      .markdown h3,
+      .markdown h4,
+      .markdown h5,
+      .markdown h6 {
+        font-family: var(--font-body);
+        color: var(--text-primary);
+        line-height: 1.3;
+        margin-top: var(--space-xl);
+        margin-bottom: var(--space-md);
+      }
+
+      .markdown h1 { font-size: var(--text-3xl); font-weight: 600; }
+      .markdown h2 { font-size: var(--heading-size); font-weight: 600; }
+      .markdown h3 { font-size: var(--text-lg); font-weight: 600; }
+      .markdown h4 { font-size: var(--body-size); font-weight: 600; }
+      .markdown h5 { font-size: var(--body-size); font-weight: 500; }
+      .markdown h6 { font-size: var(--code-size); font-weight: 500; text-transform: uppercase; letter-spacing: 1px; }
+
+      .markdown h1:first-child,
+      .markdown h2:first-child,
+      .markdown h3:first-child,
+      .markdown h4:first-child,
+      .markdown h5:first-child,
+      .markdown h6:first-child { margin-top: 0; }
+
+      .markdown p {
+        margin: 0 0 var(--space-md) 0;
+      }
+
+      .markdown p:last-child { margin-bottom: 0; }
+
+      .markdown strong { color: var(--text-primary); font-weight: 600; }
+
+      .markdown em { font-style: italic; }
+
+      .markdown a {
+        color: var(--accent-primary);
+        text-decoration: none;
+        transition: color var(--transition-fast);
+      }
+
+      .markdown a:hover {
+        text-decoration: underline;
+      }
+
+      .markdown code {
+        font-family: var(--font-mono);
+        font-size: var(--code-size);
+        color: var(--accent-secondary);
+        background: var(--bg-surface);
+        padding: 2px calc(var(--space-xs) + 2px); /* cosmetic 2px vertical for inline code */
+        border-radius: var(--radius-sm);
+      }
+
+      .markdown pre {
+        background: var(--bg-surface);
+        border: 1px solid var(--border-subtle);
+        border-radius: var(--radius-md);
+        padding: var(--space-md);
+        overflow-x: auto;
+        margin: 0 0 var(--space-md) 0;
+      }
+
+      .markdown pre code {
+        background: none;
+        padding: 0;
+        border-radius: 0;
+        font-size: var(--code-size);
+        line-height: var(--code-lh);
+        color: var(--text-primary);
+      }
+
+      .markdown blockquote {
+        margin: 0 0 var(--space-md) 0;
+        padding: var(--space-sm) var(--space-md);
+        background: var(--bg-card);
+        border: 1px solid var(--border-subtle);
+        border-radius: var(--radius-md);
+      }
+
+      .markdown blockquote p:last-child { margin-bottom: 0; }
+
+      .markdown ul,
+      .markdown ol {
+        margin: 0 0 var(--space-md) 0;
+        padding-left: var(--space-lg);
+        color: var(--text-secondary);
+      }
+
+      .markdown li {
+        margin-bottom: var(--space-xs);
+      }
+
+      .markdown li:last-child { margin-bottom: 0; }
+
+      .markdown hr {
+        border: none;
+        height: 1px;
+        background: var(--border-subtle);
+        margin: var(--space-xl) 0;
+      }
+
+      .markdown img {
+        max-width: 100%;
+        height: auto;
+        border-radius: var(--radius-md);
+        margin: var(--space-sm) 0;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        :host *,
+        :host *::before,
+        :host *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.content = '';
+  }
+
+  _getSource() {
+    if (this.content) return this.content;
+    // Fall back to slotted text content
+    const slot = this.shadowRoot?.querySelector('slot');
+    if (slot) {
+      const nodes = slot.assignedNodes({ flatten: true });
+      return nodes.map(n => n.textContent).join('');
+    }
+    return this.textContent || '';
+  }
+
+  render() {
+    const source = this.content || this.textContent || '';
+    const parsed = sanitizeHtml(parseMarkdown(source));
+    return html`
+      <div class="markdown" part="markdown" .innerHTML=${parsed}></div>
+      <slot style="display:none" @slotchange=${this._onSlotChange}></slot>
+    `;
+  }
+
+  _onSlotChange() {
+    // Re-render when slot content changes and no content prop is set
+    if (!this.content) this.requestUpdate();
+  }
+}
+
+customElements.define('arc-markdown', ArcMarkdown);

package/src/content/marquee.js

@@ -0,0 +1,166 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcMarquee extends LitElement {
+  static properties = {
+    speed:            { type: Number },
+    direction:        { type: String, reflect: true },
+    'pause-on-hover': { type: Boolean, reflect: true, attribute: 'pause-on-hover' },
+    gap:              { type: String },
+    _animDuration:    { state: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host {
+        display: block;
+        overflow: hidden;
+      }
+
+      .marquee {
+        display: flex;
+        width: max-content;
+        will-change: transform;
+      }
+
+      .marquee--left {
+        animation: marquee-scroll-left var(--marquee-duration, 10s) linear infinite;
+      }
+
+      .marquee--right {
+        animation: marquee-scroll-right var(--marquee-duration, 10s) linear infinite;
+      }
+
+      :host([pause-on-hover]) .marquee:hover {
+        animation-play-state: paused;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .marquee {
+          animation-play-state: paused !important;
+        }
+      }
+
+      @keyframes marquee-scroll-left {
+        from { transform: translateX(0); }
+        to   { transform: translateX(-50%); }
+      }
+
+      @keyframes marquee-scroll-right {
+        from { transform: translateX(-50%); }
+        to   { transform: translateX(0); }
+      }
+
+      .marquee__group {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+      }
+
+      ::slotted(*) {
+        flex-shrink: 0;
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.speed = 40;
+    this.direction = 'left';
+    this['pause-on-hover'] = true;
+    this.gap = 'var(--space-xl)';
+    this._animDuration = '10s';
+    this._resizeObserver = null;
+  }
+
+  firstUpdated() {
+    this._updateDuplicate();
+    this._setupResizeObserver();
+  }
+
+  updated(changed) {
+    if (changed.has('speed') || changed.has('gap')) {
+      this._recalcDuration();
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    if (this._resizeObserver) {
+      this._resizeObserver.disconnect();
+      this._resizeObserver = null;
+    }
+  }
+
+  _setupResizeObserver() {
+    this._resizeObserver = new ResizeObserver(() => this._recalcDuration());
+    const group = this.shadowRoot.querySelector('.marquee__group--primary');
+    if (group) this._resizeObserver.observe(group);
+  }
+
+  _recalcDuration() {
+    requestAnimationFrame(() => {
+      const group = this.shadowRoot.querySelector('.marquee__group--primary');
+      if (!group) return;
+      const width = group.scrollWidth;
+      if (width > 0 && this.speed > 0) {
+        const seconds = width / this.speed;
+        this._animDuration = `${seconds.toFixed(2)}s`;
+      }
+    });
+  }
+
+  _onSlotChange() {
+    this._updateDuplicate();
+    this._recalcDuration();
+  }
+
+  /**
+   * Clone slotted light-DOM children into the shadow-DOM duplicate group
+   * for seamless looping. The duplicate is aria-hidden since it's decorative.
+   */
+  _updateDuplicate() {
+    const dupGroup = this.shadowRoot.querySelector('.marquee__group--duplicate');
+    if (!dupGroup) return;
+
+    // Clear previous clones
+    while (dupGroup.firstChild) dupGroup.removeChild(dupGroup.firstChild);
+
+    // Clone each assigned node from the primary slot
+    const slot = this.shadowRoot.querySelector('slot:not([name])');
+    if (!slot) return;
+    const nodes = slot.assignedNodes({ flatten: true });
+    for (const node of nodes) {
+      dupGroup.appendChild(node.cloneNode(true));
+    }
+  }
+
+  render() {
+    const dirClass = this.direction === 'right' ? 'marquee--right' : 'marquee--left';
+
+    return html`
+      <div
+        class="marquee ${dirClass}"
+        style="--marquee-duration: ${this._animDuration}; gap: ${this.gap}"
+        part="track"
+      >
+        <div
+          class="marquee__group marquee__group--primary"
+          style="gap: ${this.gap}"
+          part="group"
+        >
+          <slot @slotchange=${this._onSlotChange}></slot>
+        </div>
+        <div
+          class="marquee__group marquee__group--duplicate"
+          style="gap: ${this.gap}"
+          aria-hidden="true"
+          part="group-duplicate"
+        ></div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-marquee', ArcMarquee);

package/src/content/meter.js

@@ -0,0 +1,167 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcMeter extends LitElement {
+  static properties = {
+    value:   { type: Number, reflect: true },
+    min:     { type: Number },
+    max:     { type: Number },
+    low:     { type: Number },
+    high:    { type: Number },
+    optimum: { type: Number },
+    label:   { type: String },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: block; }
+
+      .meter {
+        display: flex;
+        flex-direction: column;
+        gap: var(--space-xs);
+      }
+
+      .meter__header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+      }
+
+      .meter__label {
+        font-family: var(--font-body);
+        font-size: var(--body-size);
+        color: var(--text-secondary);
+        user-select: none;
+      }
+
+      .meter__value {
+        font-family: var(--font-mono);
+        font-size: var(--code-size);
+        color: var(--text-muted);
+      }
+
+      .meter__track {
+        position: relative;
+        width: 100%;
+        height: 8px;
+        background: var(--bg-elevated);
+        border-radius: var(--radius-full);
+        overflow: hidden;
+      }
+
+      .meter__fill {
+        height: 100%;
+        border-radius: var(--radius-full);
+        transition: width var(--transition-base), background var(--transition-base);
+        min-width: 0;
+      }
+
+      .meter__fill--success { background: var(--color-success); }
+      .meter__fill--warning { background: var(--color-warning); }
+      .meter__fill--error   { background: var(--color-error); }
+
+      @media (prefers-reduced-motion: reduce) {
+        :host *,
+        :host *::before,
+        :host *::after {
+          animation-duration: 0.01ms !important;
+          animation-iteration-count: 1 !important;
+          transition-duration: 0.01ms !important;
+        }
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.value = 0;
+    this.min = 0;
+    this.max = 100;
+    this.low = undefined;
+    this.high = undefined;
+    this.optimum = undefined;
+    this.label = '';
+  }
+
+  /** Clamp and compute fill percentage. */
+  get _percent() {
+    const range = this.max - this.min;
+    if (range <= 0) return 0;
+    const clamped = Math.max(this.min, Math.min(this.max, this.value));
+    return ((clamped - this.min) / range) * 100;
+  }
+
+  /**
+   * Determine color zone based on low / high / optimum thresholds.
+   *
+   * Logic mirrors the HTML <meter> algorithm:
+   * - If optimum is in the "good" segment and value is there too  -> success
+   * - If value is in the middle segment (between low and high)    -> warning
+   * - If value is in the far-from-optimum segment                 -> error
+   * - Fallback when thresholds are not set: use simple thirds.
+   */
+  get _zone() {
+    const { value, min, max } = this;
+    const low = this.low ?? min + (max - min) * 0.33;
+    const high = this.high ?? min + (max - min) * 0.67;
+    const optimum = this.optimum ?? (low + high) / 2;
+
+    // Determine which segment the optimum lives in
+    const optimumInLow = optimum <= low;
+    const optimumInHigh = optimum >= high;
+
+    if (optimumInLow) {
+      // Lower is better (e.g. error count)
+      if (value <= low) return 'success';
+      if (value <= high) return 'warning';
+      return 'error';
+    }
+
+    if (optimumInHigh) {
+      // Higher is better (e.g. battery level)
+      if (value >= high) return 'success';
+      if (value >= low) return 'warning';
+      return 'error';
+    }
+
+    // Optimum is in the middle segment
+    if (value >= low && value <= high) return 'success';
+    if (value < low) return 'warning';
+    return 'warning';
+  }
+
+  render() {
+    const percent = this._percent;
+    const zone = this._zone;
+
+    return html`
+      <div
+        class="meter"
+        part="meter"
+        role="meter"
+        aria-valuemin=${this.min}
+        aria-valuemax=${this.max}
+        aria-valuenow=${this.value}
+        aria-label=${this.label || 'Meter'}
+      >
+        ${this.label ? html`
+          <div class="meter__header" part="header">
+            <span class="meter__label" part="label">${this.label}</span>
+            <span class="meter__value" part="value">${Math.round(percent)}%</span>
+          </div>
+        ` : ''}
+        <div class="meter__track" part="track">
+          <div
+            class="meter__fill meter__fill--${zone}"
+            style="width: ${percent}%"
+            part="fill"
+          ></div>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-meter', ArcMeter);