project-iris 0.0.1

package/src/iris_bundle/frameworks/iris-core/vs-code-extension/src/webview/components/shared/empty-state.ts

@@ -0,0 +1,82 @@
+/**
+ * EmptyState - Consistent empty state display.
+ */
+
+import { html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { BaseElement } from './base-element.js';
+
+/**
+ * Empty state component for displaying when no data is available.
+ *
+ * @example
+ * ```html
+ * <empty-state icon="📭" message="No items found"></empty-state>
+ * ```
+ */
+@customElement('empty-state')
+export class EmptyState extends BaseElement {
+    /**
+     * Icon to display (emoji or text).
+     */
+    @property({ type: String })
+    icon = '📭';
+
+    /**
+     * Primary message.
+     */
+    @property({ type: String })
+    message = 'No items found';
+
+    /**
+     * Optional hint or secondary text.
+     */
+    @property({ type: String })
+    hint = '';
+
+    static styles = [
+        ...BaseElement.baseStyles,
+        css`
+            :host {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                padding: 32px 16px;
+                text-align: center;
+            }
+
+            .icon {
+                font-size: 32px;
+                margin-bottom: 12px;
+                opacity: 0.7;
+            }
+
+            .message {
+                font-size: 13px;
+                font-weight: 500;
+                color: var(--foreground);
+                margin-bottom: 4px;
+            }
+
+            .hint {
+                font-size: 11px;
+                color: var(--description-foreground);
+            }
+        `
+    ];
+
+    render() {
+        return html`
+            <div class="icon">${this.icon}</div>
+            <div class="message">${this.message}</div>
+            ${this.hint ? html`<div class="hint">${this.hint}</div>` : ''}
+        `;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'empty-state': EmptyState;
+    }
+}

package/src/iris_bundle/frameworks/iris-core/vs-code-extension/src/webview/components/shared/progress-bar.ts

@@ -0,0 +1,120 @@
+/**
+ * ProgressBar - Linear progress indicator.
+ */
+
+import { html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { BaseElement } from './base-element.js';
+
+/**
+ * Linear progress bar component.
+ *
+ * @example
+ * ```html
+ * <progress-bar percent="75" label="Complete"></progress-bar>
+ * ```
+ */
+@customElement('progress-bar')
+export class ProgressBar extends BaseElement {
+    /**
+     * Progress percentage (0-100).
+     */
+    @property({ type: Number })
+    percent = 0;
+
+    /**
+     * Optional label to display.
+     */
+    @property({ type: String })
+    label = '';
+
+    /**
+     * Whether to show percentage text.
+     */
+    @property({ type: Boolean })
+    showPercent = true;
+
+    /**
+     * Bar height in pixels.
+     */
+    @property({ type: Number })
+    height = 8;
+
+    static styles = [
+        ...BaseElement.baseStyles,
+        css`
+            :host {
+                display: block;
+            }
+
+            .container {
+                display: flex;
+                flex-direction: column;
+                gap: 6px;
+            }
+
+            .header {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+            }
+
+            .label {
+                font-size: 11px;
+                color: var(--description-foreground);
+            }
+
+            .percent {
+                font-size: 12px;
+                font-weight: 600;
+                color: var(--foreground);
+            }
+
+            .track {
+                width: 100%;
+                background: var(--border-color);
+                border-radius: 4px;
+                overflow: hidden;
+            }
+
+            .fill {
+                height: 100%;
+                background: var(--accent-primary);
+                border-radius: 4px;
+                transition: width 0.3s ease;
+            }
+
+            .fill.complete {
+                background: var(--status-complete);
+            }
+        `
+    ];
+
+    render() {
+        const clampedPercent = Math.max(0, Math.min(100, this.percent));
+        const isComplete = clampedPercent === 100;
+
+        return html`
+            <div class="container">
+                ${this.label || this.showPercent ? html`
+                    <div class="header">
+                        ${this.label ? html`<span class="label">${this.label}</span>` : ''}
+                        ${this.showPercent ? html`<span class="percent">${clampedPercent}%</span>` : ''}
+                    </div>
+                ` : ''}
+                <div class="track" style="height: ${this.height}px;">
+                    <div
+                        class="fill ${isComplete ? 'complete' : ''}"
+                        style="width: ${clampedPercent}%;">
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'progress-bar': ProgressBar;
+    }
+}

package/src/iris_bundle/frameworks/iris-core/vs-code-extension/src/webview/components/shared/progress-ring.ts

@@ -0,0 +1,100 @@
+/**
+ * ProgressRing - SVG circular progress indicator.
+ */
+
+import { html, css, svg } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { BaseElement } from './base-element.js';
+
+/**
+ * Circular progress ring component.
+ *
+ * @example
+ * ```html
+ * <progress-ring percent="75"></progress-ring>
+ * ```
+ */
+@customElement('progress-ring')
+export class ProgressRing extends BaseElement {
+    /**
+     * Progress percentage (0-100).
+     */
+    @property({ type: Number })
+    percent = 0;
+
+    /**
+     * Size of the ring in pixels.
+     */
+    @property({ type: Number })
+    size = 64;
+
+    static styles = [
+        ...BaseElement.baseStyles,
+        css`
+            :host {
+                display: inline-block;
+            }
+
+            .ring-container {
+                position: relative;
+                display: inline-flex;
+                align-items: center;
+                justify-content: center;
+            }
+
+            svg {
+                transform: rotate(-90deg);
+            }
+
+            .ring-bg {
+                fill: none;
+                stroke: var(--border-color);
+                stroke-width: 4;
+            }
+
+            .ring-fill {
+                fill: none;
+                stroke: var(--accent-primary);
+                stroke-width: 4;
+                stroke-linecap: round;
+                stroke-dasharray: 157;
+                transition: stroke-dashoffset 0.3s ease;
+            }
+
+            .ring-text {
+                position: absolute;
+                font-size: 14px;
+                font-weight: 600;
+                color: var(--foreground);
+            }
+        `
+    ];
+
+    render() {
+        const radius = 25;
+        const circumference = 2 * Math.PI * radius; // ~157
+        const dashOffset = circumference - (circumference * this.percent / 100);
+
+        return html`
+            <div class="ring-container" style="width: ${this.size}px; height: ${this.size}px;">
+                <svg width="${this.size}" height="${this.size}" viewBox="0 0 64 64">
+                    <circle class="ring-bg" cx="32" cy="32" r="${radius}"></circle>
+                    <circle
+                        class="ring-fill"
+                        cx="32"
+                        cy="32"
+                        r="${radius}"
+                        style="stroke-dasharray: ${circumference}; stroke-dashoffset: ${dashOffset}">
+                    </circle>
+                </svg>
+                <span class="ring-text">${this.percent}%</span>
+            </div>
+        `;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'progress-ring': ProgressRing;
+    }
+}

package/src/iris_bundle/frameworks/iris-core/vs-code-extension/src/webview/components/shared/stage-pipeline.ts

@@ -0,0 +1,133 @@
+/**
+ * StagePipeline - Stage status indicator row.
+ */
+
+import { html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { BaseElement } from './base-element.js';
+
+/**
+ * Stage data structure.
+ */
+export interface StageData {
+    name: string;
+    status: 'complete' | 'active' | 'pending';
+}
+
+
+/**
+ * Stage pipeline component showing stage progression.
+ *
+ * @example
+ * ```html
+ * <stage-pipeline .stages=${stages}></stage-pipeline>
+ * ```
+ */
+@customElement('stage-pipeline')
+export class StagePipeline extends BaseElement {
+    /**
+     * Array of stage data.
+     */
+    @property({ type: Array })
+    stages: StageData[] = [];
+
+    static styles = [
+        ...BaseElement.baseStyles,
+        css`
+            :host {
+                display: flex;
+                align-items: center;
+                gap: 4px;
+                padding: 8px 0;
+            }
+
+            .stage {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                gap: 4px;
+            }
+
+            .node {
+                width: 24px;
+                height: 24px;
+                border-radius: 50%;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                font-size: 10px;
+                font-weight: 600;
+                border: 2px solid var(--border-color);
+                background: var(--editor-background);
+                color: var(--description-foreground);
+            }
+
+            .node.complete {
+                background: var(--status-complete);
+                border-color: var(--status-complete);
+                color: white;
+            }
+
+            .node.active {
+                background: var(--status-active);
+                border-color: var(--status-active);
+                color: white;
+            }
+
+            .label {
+                font-size: 9px;
+                color: var(--description-foreground);
+                text-align: center;
+            }
+
+            .connector {
+                width: 16px;
+                height: 2px;
+                background: var(--border-color);
+                margin-bottom: 16px;
+            }
+
+            .connector.complete {
+                background: var(--status-complete);
+            }
+        `
+    ];
+
+    render() {
+        return html`
+            ${this.stages.map((stage, idx) => html`
+                <div class="stage">
+                    <div class="node ${stage.status}">
+                        ${stage.status === 'complete'
+                            ? html`&#10003;`
+                            : this._getInitial(stage.name)}
+                    </div>
+                    <span class="label">${this._formatName(stage.name)}</span>
+                </div>
+                ${idx < this.stages.length - 1 ? html`
+                    <div class="connector ${stage.status === 'complete' ? 'complete' : ''}"></div>
+                ` : ''}
+            `)}
+        `;
+    }
+
+    /**
+     * Capitalize the first letter of the stage name.
+     */
+    private _formatName(name: string): string {
+        return name.charAt(0).toUpperCase() + name.slice(1).toLowerCase();
+    }
+
+    /**
+     * Get first letter of stage name for node display.
+     */
+    private _getInitial(name: string): string {
+        return name.charAt(0).toUpperCase();
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'stage-pipeline': StagePipeline;
+    }
+}

package/src/iris_bundle/frameworks/iris-core/vs-code-extension/src/webview/components/tabs/view-tabs.ts

@@ -0,0 +1,127 @@
+/**
+ * ViewTabs Component - Tab navigation for SpecsMD views.
+ */
+
+import { html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { BaseElement } from '../shared/base-element.js';
+
+/**
+ * Valid tab identifiers.
+ */
+export type TabId = 'bolts' | 'specs' | 'overview';
+
+/**
+ * Tab definition with icon and label.
+ */
+interface TabDef {
+    id: TabId;
+    icon: string;
+    label: string;
+}
+
+/**
+ * Available tabs configuration.
+ */
+const TABS: TabDef[] = [
+    { id: 'bolts', icon: '\u26A1', label: 'Bolts' },     // Lightning bolt
+    { id: 'specs', icon: '\uD83D\uDCCB', label: 'Specs' },  // Clipboard
+    { id: 'overview', icon: '\uD83D\uDCCA', label: 'Overview' }  // Chart
+];
+
+/**
+ * Tab change event detail.
+ */
+export interface TabChangeDetail {
+    tab: TabId;
+}
+
+/**
+ * ViewTabs component for switching between Bolts, Specs, and Overview views.
+ *
+ * @fires tab-change - Dispatched when a tab is clicked
+ *
+ * @example
+ * ```html
+ * <view-tabs activeTab="bolts" @tab-change=${this._onTabChange}></view-tabs>
+ * ```
+ */
+@customElement('view-tabs')
+export class ViewTabs extends BaseElement {
+    /**
+     * The currently active tab.
+     */
+    @property({ type: String })
+    activeTab: TabId = 'bolts';
+
+    static styles = [
+        ...BaseElement.baseStyles,
+        css`
+            :host {
+                display: flex;
+                background: var(--editor-background);
+                border-bottom: 1px solid var(--border-color);
+            }
+
+            button {
+                flex: 1;
+                padding: 10px 8px;
+                font-size: 11px;
+                font-weight: 600;
+                text-align: center;
+                color: var(--description-foreground);
+                border-bottom: 2px solid transparent;
+                transition: color 0.15s, border-color 0.15s;
+            }
+
+            button:hover {
+                color: var(--foreground);
+            }
+
+            button.active {
+                color: var(--accent-primary);
+                border-bottom-color: var(--accent-primary);
+            }
+
+            .tab-icon {
+                margin-right: 4px;
+            }
+        `
+    ];
+
+    render() {
+        return html`
+            ${TABS.map(tab => html`
+                <button
+                    class=${this.activeTab === tab.id ? 'active' : ''}
+                    @click=${() => this._selectTab(tab.id)}
+                    aria-selected=${this.activeTab === tab.id}
+                    role="tab"
+                >
+                    <span class="tab-icon">${tab.icon}</span>${tab.label}
+                </button>
+            `)}
+        `;
+    }
+
+    /**
+     * Handle tab selection.
+     */
+    private _selectTab(tab: TabId): void {
+        if (tab === this.activeTab) {
+            return;
+        }
+
+        this.dispatchEvent(new CustomEvent<TabChangeDetail>('tab-change', {
+            detail: { tab },
+            bubbles: true,
+            composed: true
+        }));
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'view-tabs': ViewTabs;
+    }
+}