@arclux/arc-ui 1.0.0

package/src/layout/section.js

@@ -0,0 +1,54 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcSection extends LitElement {
+  static properties = {
+    label: { type: String },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: block; }
+
+      .section {
+        width: 100%;
+        max-width: var(--max-width);
+        margin-inline: auto;
+        padding: var(--space-3xl) var(--space-lg);
+        scroll-margin-top: var(--space-md);
+      }
+
+      @media (max-width: 768px) {
+        .section { padding: var(--space-2xl) var(--space-md); }
+      }
+
+      .section__label {
+        display: block;
+        font-family: var(--font-accent);
+        font-weight: var(--section-title-weight);
+        font-size: var(--section-title-size);
+        letter-spacing: var(--section-title-spacing);
+        text-transform: uppercase;
+        color: var(--text-muted);
+        margin-bottom: var(--space-lg);
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.label = '';
+  }
+
+  render() {
+    return html`
+      <section class="section" part="section">
+        ${this.label ? html`<span class="section__label" part="label">${this.label}</span>` : ''}
+        <slot></slot>
+      </section>
+    `;
+  }
+}
+
+customElements.define('arc-section', ArcSection);

package/src/layout/settings-layout.js

@@ -0,0 +1,91 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcSettingsLayout extends LitElement {
+  static properties = {
+    navPosition: { type: String, reflect: true, attribute: 'nav-position' },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host {
+        display: block;
+        box-sizing: border-box;
+      }
+
+      /* Left nav layout */
+      .settings-layout--left {
+        display: grid;
+        grid-template-columns: 220px 1fr;
+        min-height: 100%;
+      }
+
+      .settings-layout--left .nav {
+        padding: var(--space-lg);
+        background: var(--bg-card);
+        border-right: 1px solid var(--border-subtle);
+      }
+
+      .settings-layout--left .content {
+        padding: var(--space-xl);
+        flex: 1;
+      }
+
+      /* Top nav layout */
+      .settings-layout--top {
+        display: flex;
+        flex-direction: column;
+        min-height: 100%;
+      }
+
+      .settings-layout--top .nav {
+        padding: var(--space-lg);
+        background: var(--bg-card);
+        border-bottom: 1px solid var(--border-subtle);
+      }
+
+      .settings-layout--top .content {
+        padding: var(--space-xl);
+        flex: 1;
+      }
+
+      @media (max-width: 768px) {
+        .settings-layout--left {
+          display: flex;
+          flex-direction: column;
+        }
+
+        .settings-layout--left .nav {
+          border-right: none;
+          border-bottom: 1px solid var(--border-subtle);
+        }
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.navPosition = 'left';
+  }
+
+  render() {
+    const layoutClass =
+      this.navPosition === 'top'
+        ? 'settings-layout--top'
+        : 'settings-layout--left';
+
+    return html`
+      <div class="${layoutClass}" part="layout">
+        <div class="nav" part="nav">
+          <slot name="nav"></slot>
+        </div>
+        <div class="content" part="content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-settings-layout', ArcSettingsLayout);

package/src/layout/split-pane.js

@@ -0,0 +1,172 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcSplitPane extends LitElement {
+  static properties = {
+    orientation: { type: String, reflect: true },
+    ratio: { type: Number },
+    minRatio: { type: Number, attribute: 'min-ratio' },
+    maxRatio: { type: Number, attribute: 'max-ratio' },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host {
+        display: block;
+        height: 100%;
+      }
+
+      .split-pane {
+        display: flex;
+        height: 100%;
+        width: 100%;
+        overflow: hidden;
+      }
+
+      :host([orientation='vertical']) .split-pane {
+        flex-direction: column;
+      }
+
+      .split-pane__primary,
+      .split-pane__secondary {
+        overflow: auto;
+        min-width: 0;
+        min-height: 0;
+      }
+
+      .split-pane__secondary {
+        flex: 1;
+      }
+
+      .split-pane__handle {
+        flex-shrink: 0;
+        background: var(--border-subtle);
+        transition: background 0.15s ease;
+        user-select: none;
+        touch-action: none;
+      }
+
+      .split-pane__handle:hover,
+      .split-pane__handle--dragging {
+        background: var(--border-bright);
+      }
+
+      :host([orientation='horizontal']) .split-pane__handle {
+        width: 4px;
+        cursor: col-resize;
+      }
+
+      :host([orientation='vertical']) .split-pane__handle {
+        height: 4px;
+        cursor: row-resize;
+      }
+
+      :host .split-pane--dragging {
+        user-select: none;
+      }
+
+      @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.orientation = 'horizontal';
+    this.ratio = 0.5;
+    this.minRatio = 0.15;
+    this.maxRatio = 0.85;
+    this._dragging = false;
+    this._containerEl = null;
+    this._onMouseMove = this._onMouseMove.bind(this);
+    this._onMouseUp = this._onMouseUp.bind(this);
+  }
+
+  _onMouseDown(e) {
+    e.preventDefault();
+    this._dragging = true;
+    this._containerEl = this.shadowRoot.querySelector('.split-pane');
+    window.addEventListener('mousemove', this._onMouseMove);
+    window.addEventListener('mouseup', this._onMouseUp);
+    this.requestUpdate();
+  }
+
+  _onMouseMove(e) {
+    if (!this._dragging) return;
+
+    const container = this._containerEl;
+    if (!container) return;
+    const rect = container.getBoundingClientRect();
+    let newRatio;
+
+    if (this.orientation === 'horizontal') {
+      newRatio = (e.clientX - rect.left) / rect.width;
+    } else {
+      newRatio = (e.clientY - rect.top) / rect.height;
+    }
+
+    newRatio = Math.max(this.minRatio, Math.min(this.maxRatio, newRatio));
+    this.ratio = newRatio;
+  }
+
+  _onMouseUp() {
+    if (!this._dragging) return;
+    this._dragging = false;
+    this._containerEl = null;
+    window.removeEventListener('mousemove', this._onMouseMove);
+    window.removeEventListener('mouseup', this._onMouseUp);
+    this.requestUpdate();
+
+    this.dispatchEvent(
+      new CustomEvent('arc-resize', {
+        detail: { ratio: this.ratio },
+        bubbles: true,
+        composed: true,
+      })
+    );
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener('mousemove', this._onMouseMove);
+    window.removeEventListener('mouseup', this._onMouseUp);
+  }
+
+  render() {
+    const primarySize = `${this.ratio * 100}%`;
+    const draggingClass = this._dragging ? 'split-pane--dragging' : '';
+    const handleDragging = this._dragging ? 'split-pane__handle--dragging' : '';
+
+    return html`
+      <div class="split-pane ${draggingClass}" part="base">
+        <div
+          class="split-pane__primary"
+          part="primary"
+          style="${this.orientation === 'horizontal'
+            ? `width: ${primarySize}`
+            : `height: ${primarySize}`}"
+        >
+          <slot name="primary"></slot>
+        </div>
+        <div
+          class="split-pane__handle ${handleDragging}"
+          part="handle"
+          @mousedown=${this._onMouseDown}
+        ></div>
+        <div class="split-pane__secondary" part="secondary">
+          <slot name="secondary"></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-split-pane', ArcSplitPane);

package/src/layout/status-bar.js

@@ -0,0 +1,84 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcStatusBar extends LitElement {
+  static properties = {
+    position: { type: String, reflect: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host {
+        display: block;
+        font-family: var(--font-mono);
+        font-size: var(--text-sm);
+        color: var(--text-muted);
+      }
+
+      :host([position='fixed']) {
+        position: fixed;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        z-index: 100;
+      }
+
+      .status-bar {
+        display: flex;
+        align-items: center;
+        height: 28px;
+        padding: 0 var(--space-sm);
+        background: var(--bg-deep);
+        border-top: 1px solid var(--border-subtle);
+        gap: var(--space-sm);
+      }
+
+      .status-bar__left {
+        display: flex;
+        align-items: center;
+        gap: var(--space-sm);
+        flex-shrink: 0;
+      }
+
+      .status-bar__center {
+        display: flex;
+        align-items: center;
+        gap: var(--space-sm);
+        flex: 1;
+        justify-content: center;
+      }
+
+      .status-bar__right {
+        display: flex;
+        align-items: center;
+        gap: var(--space-sm);
+        flex-shrink: 0;
+        margin-left: auto;
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.position = 'static';
+  }
+
+  render() {
+    return html`
+      <div class="status-bar" part="base" role="status">
+        <div class="status-bar__left" part="left">
+          <slot name="left"></slot>
+        </div>
+        <div class="status-bar__center" part="center">
+          <slot></slot>
+        </div>
+        <div class="status-bar__right" part="right">
+          <slot name="right"></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-status-bar', ArcStatusBar);

package/src/layout/toolbar.js

@@ -0,0 +1,92 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcToolbar extends LitElement {
+  static properties = {
+    sticky: { type: Boolean, reflect: true },
+    size: { type: String, reflect: true },
+    border: { type: Boolean, reflect: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host {
+        display: block;
+        font-family: var(--font-body);
+      }
+
+      :host([sticky]) {
+        position: sticky;
+        top: 0;
+        z-index: 50;
+      }
+
+      .toolbar {
+        display: flex;
+        align-items: center;
+        height: 48px;
+        padding: 0 var(--space-md);
+        background: var(--bg-card);
+        gap: var(--space-sm);
+      }
+
+      :host([size='sm']) .toolbar {
+        height: 36px;
+        padding: 0 var(--space-sm);
+      }
+
+      :host([border]) .toolbar {
+        border-bottom: 1px solid var(--border-subtle);
+      }
+
+      .toolbar__start {
+        display: flex;
+        align-items: center;
+        gap: var(--space-sm);
+        flex-shrink: 0;
+      }
+
+      .toolbar__center {
+        display: flex;
+        align-items: center;
+        gap: var(--space-sm);
+        flex: 1;
+        justify-content: center;
+      }
+
+      .toolbar__end {
+        display: flex;
+        align-items: center;
+        gap: var(--space-sm);
+        flex-shrink: 0;
+        margin-left: auto;
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.sticky = false;
+    this.size = 'md';
+    this.border = true;
+  }
+
+  render() {
+    return html`
+      <div class="toolbar" part="base" role="toolbar">
+        <div class="toolbar__start" part="start">
+          <slot name="start"></slot>
+        </div>
+        <div class="toolbar__center" part="center">
+          <slot></slot>
+        </div>
+        <div class="toolbar__end" part="end">
+          <slot name="end"></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-toolbar', ArcToolbar);

package/src/navigation/breadcrumb-item.js

@@ -0,0 +1,26 @@
+import { LitElement, html, css } from 'lit';
+
+export class ArcBreadcrumbItem extends LitElement {
+  static properties = {
+    href: { type: String, reflect: true },
+  };
+
+  static styles = css`
+    :host { display: none; }
+  `;
+
+  constructor() {
+    super();
+    this.href = '';
+  }
+
+  get label() {
+    return this.textContent.trim();
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+}
+
+customElements.define('arc-breadcrumb-item', ArcBreadcrumbItem);

package/src/navigation/breadcrumb.js

@@ -0,0 +1,129 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+import './breadcrumb-item.js';
+
+export class ArcBreadcrumb extends LitElement {
+  static properties = {
+    _items: { state: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: block; }
+
+      .breadcrumb {
+        display: flex;
+        align-items: center;
+        gap: var(--space-xs);
+        font-family: var(--font-accent);
+        font-size: var(--text-xs);
+        font-weight: 600;
+        letter-spacing: 2px;
+        text-transform: uppercase;
+        flex-wrap: wrap;
+      }
+
+      .breadcrumb__item {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--space-xs);
+      }
+
+      .breadcrumb__link {
+        color: var(--text-muted);
+        text-decoration: none;
+        transition: color var(--transition-fast);
+        background: none;
+        border: none;
+        padding: var(--touch-pad) var(--space-xs);
+        cursor: pointer;
+        font: inherit;
+        font-size: inherit;
+        min-height: var(--touch-min);
+        display: inline-flex;
+        align-items: center;
+      }
+
+      .breadcrumb__link:hover {
+        color: var(--text-primary);
+      }
+
+      .breadcrumb__link:focus-visible {
+        outline: none;
+        box-shadow: var(--focus-ring);
+        border-radius: var(--radius-xs);
+      }
+
+      .breadcrumb__current {
+        color: var(--text-primary);
+        font-weight: 500;
+      }
+
+      .breadcrumb__separator {
+        color: var(--text-ghost);
+        font-size: var(--text-sm);
+        user-select: none;
+      }
+
+      .breadcrumb__slot-host { display: none; }
+
+      @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._items = [];
+  }
+
+  _onSlotChange(e) {
+    this._items = e.target.assignedElements({ flatten: true })
+      .filter(el => el.tagName === 'ARC-BREADCRUMB-ITEM');
+  }
+
+  _handleClick(href) {
+    this.dispatchEvent(new CustomEvent('arc-navigate', {
+      detail: { href },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  render() {
+    return html`
+      <div class="breadcrumb__slot-host">
+        <slot @slotchange=${this._onSlotChange}></slot>
+      </div>
+      <nav class="breadcrumb" aria-label="Breadcrumb" part="breadcrumb">
+        ${this._items.map((item, i) => {
+          const isLast = i === this._items.length - 1;
+          return html`
+            <span class="breadcrumb__item">
+              ${isLast
+                ? html`<span class="breadcrumb__current" aria-current="page" part="current">${item.label}</span>`
+                : html`
+                    ${item.href
+                      ? html`<a class="breadcrumb__link" href=${item.href} part="link">${item.label}</a>`
+                      : html`<button class="breadcrumb__link" @click=${() => this._handleClick(item.href)} part="link">${item.label}</button>`
+                    }
+                    <span class="breadcrumb__separator" aria-hidden="true" part="separator">/</span>
+                  `
+              }
+            </span>
+          `;
+        })}
+      </nav>
+    `;
+  }
+}
+
+customElements.define('arc-breadcrumb', ArcBreadcrumb);