@arclux/arc-ui 1.0.0

package/src/layout/auth-shell.js

@@ -0,0 +1,153 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcAuthShell extends LitElement {
+  static properties = {
+    variant: { type: String, reflect: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host {
+        display: block;
+        box-sizing: border-box;
+      }
+
+      /* Centered variant */
+      .auth-shell--centered {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        min-height: 100vh;
+        background: var(--bg-surface);
+        padding: var(--space-xl) var(--space-lg);
+        box-sizing: border-box;
+      }
+
+      .auth-shell--centered .logo {
+        margin-bottom: var(--space-xl);
+        text-align: center;
+      }
+
+      .auth-shell--centered .card {
+        background: var(--bg-card);
+        border: 1px solid var(--border-default);
+        border-radius: var(--radius-lg);
+        padding: var(--space-xl);
+        width: 100%;
+        max-width: 420px;
+        box-sizing: border-box;
+      }
+
+      .auth-shell--centered .footer {
+        margin-top: var(--space-lg);
+        color: var(--text-muted);
+        font-size: var(--text-sm);
+        text-align: center;
+      }
+
+      /* Split variant */
+      .auth-shell--split {
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        min-height: 100vh;
+        box-sizing: border-box;
+      }
+
+      .auth-shell--split .form-side {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        background: var(--bg-surface);
+        padding: var(--space-xl) var(--space-lg);
+      }
+
+      .auth-shell--split .logo {
+        margin-bottom: var(--space-xl);
+        text-align: center;
+      }
+
+      .auth-shell--split .card {
+        background: var(--bg-card);
+        border: 1px solid var(--border-default);
+        border-radius: var(--radius-lg);
+        padding: var(--space-xl);
+        width: 100%;
+        max-width: 420px;
+        box-sizing: border-box;
+      }
+
+      .auth-shell--split .footer {
+        margin-top: var(--space-lg);
+        color: var(--text-muted);
+        font-size: var(--text-sm);
+        text-align: center;
+      }
+
+      .auth-shell--split .aside-side {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: var(--bg-deep);
+        padding: var(--space-xl);
+      }
+
+      @media (max-width: 768px) {
+        .auth-shell--split {
+          grid-template-columns: 1fr;
+        }
+
+        .auth-shell--split .aside-side {
+          display: none;
+        }
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.variant = 'centered';
+  }
+
+  render() {
+    if (this.variant === 'split') {
+      return html`
+        <div class="auth-shell--split" part="shell">
+          <div class="form-side" part="form-side">
+            <div class="logo" part="logo">
+              <slot name="logo"></slot>
+            </div>
+            <div class="card" part="card">
+              <slot></slot>
+            </div>
+            <div class="footer" part="footer">
+              <slot name="footer"></slot>
+            </div>
+          </div>
+          <div class="aside-side" part="aside">
+            <slot name="aside"></slot>
+          </div>
+        </div>
+      `;
+    }
+
+    return html`
+      <div class="auth-shell--centered" part="shell">
+        <div class="logo" part="logo">
+          <slot name="logo"></slot>
+        </div>
+        <div class="card" part="card">
+          <slot></slot>
+        </div>
+        <div class="footer" part="footer">
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-auth-shell', ArcAuthShell);

package/src/layout/container.js

@@ -0,0 +1,37 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcContainer extends LitElement {
+  static properties = {
+    narrow: { type: Boolean, reflect: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host { display: block; }
+
+      .container {
+        width: 100%;
+        max-width: var(--max-width);
+        margin-inline: auto;
+        padding-inline: var(--space-lg);
+      }
+
+      :host([narrow]) .container {
+        max-width: var(--max-width-sm);
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.narrow = false;
+  }
+
+  render() {
+    return html`<div class="container" part="container"><slot></slot></div>`;
+  }
+}
+
+customElements.define('arc-container', ArcContainer);

package/src/layout/dashboard-grid.js

@@ -0,0 +1,62 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcDashboardGrid extends LitElement {
+  static properties = {
+    columns: { type: Number },
+    gap: { type: String },
+    minColumnWidth: { type: String, attribute: 'min-column-width' },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host {
+        display: block;
+        box-sizing: border-box;
+      }
+
+      .dashboard-grid {
+        display: grid;
+        grid-template-columns: repeat(
+          auto-fill,
+          minmax(var(--min-col, 280px), 1fr)
+        );
+        gap: var(--gap, var(--space-lg));
+        padding: var(--space-lg);
+      }
+
+      :host([data-explicit-columns]) .dashboard-grid {
+        grid-template-columns: repeat(var(--columns, 3), 1fr);
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.columns = 3;
+    this.gap = 'var(--space-lg)';
+    this.minColumnWidth = '280px';
+    this._explicitColumns = false;
+  }
+
+  updated(changedProperties) {
+    this.style.setProperty('--min-col', this.minColumnWidth);
+    this.style.setProperty('--columns', this.columns);
+    this.style.setProperty('--gap', this.gap);
+
+    if (changedProperties.has('columns') && this.hasAttribute('columns')) {
+      this.setAttribute('data-explicit-columns', '');
+    }
+  }
+
+  render() {
+    return html`
+      <div class="dashboard-grid" part="grid">
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-dashboard-grid', ArcDashboardGrid);

package/src/layout/index.js

@@ -0,0 +1,15 @@
+// ARC UI — Layout tier
+// Application structure and page layout components
+
+export { ArcAppShell } from './app-shell.js';
+export { ArcAuthShell } from './auth-shell.js';
+export { ArcContainer } from './container.js';
+export { ArcDashboardGrid } from './dashboard-grid.js';
+export { ArcPageHeader } from './page-header.js';
+export { ArcPageLayout } from './page-layout.js';
+export { ArcResizable } from './resizable.js';
+export { ArcSection } from './section.js';
+export { ArcSettingsLayout } from './settings-layout.js';
+export { ArcSplitPane } from './split-pane.js';
+export { ArcStatusBar } from './status-bar.js';
+export { ArcToolbar } from './toolbar.js';

package/src/layout/page-header.js

@@ -0,0 +1,100 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcPageHeader extends LitElement {
+  static properties = {
+    heading: { type: String },
+    description: { type: String },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host {
+        display: block;
+        font-family: var(--font-body);
+      }
+
+      .page-header {
+        padding: var(--space-lg) 0 var(--space-md);
+        border-bottom: 1px solid var(--border-subtle);
+      }
+
+      .page-header__breadcrumb {
+        margin-bottom: var(--space-sm);
+      }
+
+      .page-header__title-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--space-md);
+        flex-wrap: wrap;
+      }
+
+      .page-header__heading {
+        margin: 0;
+        font-family: var(--font-body);
+        font-size: 28px; /* size-variant, keep hardcoded */
+        font-weight: 700;
+        color: var(--text-primary);
+        line-height: 1.2;
+      }
+
+      .page-header__actions {
+        display: flex;
+        align-items: center;
+        gap: var(--space-sm);
+        flex-shrink: 0;
+      }
+
+      .page-header__description {
+        margin-top: var(--space-sm);
+        color: var(--text-secondary);
+        font-size: var(--body-size);
+        line-height: 1.5;
+      }
+
+      .page-header__tabs {
+        margin-top: var(--space-md);
+      }
+
+      .page-header__content {
+        margin-top: var(--space-md);
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.heading = '';
+    this.description = '';
+  }
+
+  render() {
+    return html`
+      <div class="page-header" part="base">
+        <div class="page-header__breadcrumb" part="breadcrumb">
+          <slot name="breadcrumb"></slot>
+        </div>
+        <div class="page-header__title-row" part="title-row">
+          <h1 class="page-header__heading" part="heading">${this.heading}</h1>
+          <div class="page-header__actions" part="actions">
+            <slot name="actions"></slot>
+          </div>
+        </div>
+        ${this.description
+          ? html`<p class="page-header__description" part="description">${this.description}</p>`
+          : ''}
+        <div class="page-header__tabs" part="tabs">
+          <slot name="tabs"></slot>
+        </div>
+        <div class="page-header__content" part="content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-page-header', ArcPageHeader);

package/src/layout/page-layout.js

@@ -0,0 +1,112 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcPageLayout extends LitElement {
+  static properties = {
+    layout: { type: String, reflect: true },
+    maxWidth: { type: String, attribute: 'max-width' },
+    gap: { type: String },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host {
+        display: block;
+        box-sizing: border-box;
+      }
+
+      .page-layout {
+        padding: var(--space-xl) var(--space-lg);
+        gap: var(--gap);
+        min-height: 100%;
+        box-sizing: border-box;
+      }
+
+      /* Centered layout */
+      :host([layout='centered']) .page-layout {
+        display: block;
+        max-width: var(--max-width);
+        margin: 0 auto;
+      }
+
+      /* Wide layout */
+      :host([layout='wide']) .page-layout {
+        display: block;
+      }
+
+      /* Sidebar left layout */
+      :host([layout='sidebar-left']) .page-layout {
+        display: grid;
+        grid-template-columns: 240px 1fr;
+      }
+
+      /* Sidebar right layout */
+      :host([layout='sidebar-right']) .page-layout {
+        display: grid;
+        grid-template-columns: 1fr 300px;
+      }
+
+      .sidebar {
+        display: none;
+      }
+
+      :host([layout='sidebar-left']) .sidebar {
+        display: block;
+      }
+
+      .aside {
+        display: none;
+      }
+
+      :host([layout='sidebar-right']) .aside {
+        display: block;
+      }
+
+      .main {
+        min-width: 0;
+      }
+
+      @media (max-width: 768px) {
+        :host([layout='sidebar-left']) .page-layout,
+        :host([layout='sidebar-right']) .page-layout {
+          grid-template-columns: 1fr;
+        }
+      }
+    `,
+  ];
+
+  constructor() {
+    super();
+    this.layout = 'centered';
+    this.maxWidth = '1120px';
+    this.gap = 'var(--space-xl)';
+  }
+
+  updated(changed) {
+    if (changed.has('maxWidth')) {
+      this.style.setProperty('--max-width', this.maxWidth);
+    }
+    if (changed.has('gap')) {
+      this.style.setProperty('--gap', this.gap);
+    }
+  }
+
+  render() {
+    return html`
+      <div class="page-layout" part="layout">
+        <div class="sidebar" part="sidebar">
+          <slot name="sidebar"></slot>
+        </div>
+        <div class="main" part="main">
+          <slot></slot>
+        </div>
+        <div class="aside" part="aside">
+          <slot name="aside"></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('arc-page-layout', ArcPageLayout);

package/src/layout/resizable.js

@@ -0,0 +1,221 @@
+import { LitElement, html, css } from 'lit';
+import { tokenStyles } from '../shared-styles.js';
+
+export class ArcResizable extends LitElement {
+  static properties = {
+    direction: { type: String, reflect: true },
+    minSize:   { type: Number, attribute: 'min-size' },
+    maxSize:   { type: Number, attribute: 'max-size' },
+    size:      { type: Number },
+    _dragging: { state: true },
+  };
+
+  static styles = [
+    tokenStyles,
+    css`
+      :host {
+        display: block;
+        position: relative;
+        overflow: hidden;
+      }
+
+      .container {
+        width: 100%;
+        height: 100%;
+        overflow: auto;
+      }
+
+      :host([direction="horizontal"]) .container {
+        width: var(--panel-size);
+      }
+
+      :host([direction="vertical"]) .container {
+        height: var(--panel-size);
+      }
+
+      .handle {
+        position: absolute;
+        z-index: 10;
+        flex-shrink: 0;
+        background: var(--border-default);
+        transition: background var(--transition-fast);
+        touch-action: none;
+      }
+
+      /* Horizontal: handle on right edge */
+      :host([direction="horizontal"]) .handle {
+        top: 0;
+        right: 0;
+        width: 4px;
+        height: 100%;
+        cursor: col-resize;
+      }
+
+      /* Vertical: handle on bottom edge */
+      :host([direction="vertical"]) .handle {
+        bottom: 0;
+        left: 0;
+        height: 4px;
+        width: 100%;
+        cursor: row-resize;
+      }
+
+      .handle:hover,
+      .handle.active {
+        background: var(--accent-primary);
+      }
+
+      .handle:focus-visible {
+        outline: none;
+        background: var(--accent-primary);
+        box-shadow: var(--focus-glow);
+      }
+
+      /* Expand hit area for easier grabbing */
+      .handle::before {
+        content: '';
+        position: absolute;
+      }
+
+      :host([direction="horizontal"]) .handle::before {
+        top: 0;
+        left: -4px;
+        right: -4px;
+        bottom: 0;
+      }
+
+      :host([direction="vertical"]) .handle::before {
+        left: 0;
+        top: -4px;
+        bottom: -4px;
+        right: 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.direction = 'horizontal';
+    this.minSize = 100;
+    this.maxSize = Infinity;
+    this.size = 300;
+    this._dragging = false;
+    this._startPos = 0;
+    this._startSize = 0;
+  }
+
+  updated(changed) {
+    if (changed.has('size') || changed.has('direction')) {
+      this.style.setProperty('--panel-size', `${this.size}px`);
+    }
+  }
+
+  firstUpdated() {
+    this.style.setProperty('--panel-size', `${this.size}px`);
+  }
+
+  _clamp(val) {
+    return Math.min(this.maxSize, Math.max(this.minSize, val));
+  }
+
+  _onPointerDown(e) {
+    e.preventDefault();
+    this._dragging = true;
+    this._startPos = this.direction === 'horizontal' ? e.clientX : e.clientY;
+    this._startSize = this.size;
+
+    const handle = e.currentTarget;
+    handle.setPointerCapture(e.pointerId);
+
+    const onMove = (ev) => {
+      const current = this.direction === 'horizontal' ? ev.clientX : ev.clientY;
+      const delta = current - this._startPos;
+      const newSize = this._clamp(this._startSize + delta);
+
+      if (newSize !== this.size) {
+        this.size = newSize;
+        this.style.setProperty('--panel-size', `${this.size}px`);
+
+        this.dispatchEvent(new CustomEvent('arc-resize', {
+          detail: { size: this.size },
+          bubbles: true,
+          composed: true,
+        }));
+      }
+    };
+
+    const onUp = (ev) => {
+      this._dragging = false;
+      handle.releasePointerCapture(ev.pointerId);
+      handle.removeEventListener('pointermove', onMove);
+      handle.removeEventListener('pointerup', onUp);
+      handle.removeEventListener('pointercancel', onUp);
+    };
+
+    handle.addEventListener('pointermove', onMove);
+    handle.addEventListener('pointerup', onUp);
+    handle.addEventListener('pointercancel', onUp);
+  }
+
+  _onKeydown(e) {
+    const step = e.shiftKey ? 20 : 5;
+    let newSize = this.size;
+
+    if (this.direction === 'horizontal') {
+      if (e.key === 'ArrowRight') newSize += step;
+      else if (e.key === 'ArrowLeft') newSize -= step;
+      else return;
+    } else {
+      if (e.key === 'ArrowDown') newSize += step;
+      else if (e.key === 'ArrowUp') newSize -= step;
+      else return;
+    }
+
+    e.preventDefault();
+    newSize = this._clamp(newSize);
+
+    if (newSize !== this.size) {
+      this.size = newSize;
+      this.style.setProperty('--panel-size', `${this.size}px`);
+
+      this.dispatchEvent(new CustomEvent('arc-resize', {
+        detail: { size: this.size },
+        bubbles: true,
+        composed: true,
+      }));
+    }
+  }
+
+  render() {
+    return html`
+      <div class="container" part="container">
+        <slot></slot>
+      </div>
+      <div
+        class="handle ${this._dragging ? 'active' : ''}"
+        part="handle"
+        role="separator"
+        tabindex="0"
+        aria-orientation=${this.direction}
+        aria-valuenow=${this.size}
+        aria-valuemin=${this.minSize}
+        aria-valuemax=${isFinite(this.maxSize) ? this.maxSize : undefined}
+        aria-label="Resize handle"
+        @pointerdown=${this._onPointerDown}
+        @keydown=${this._onKeydown}
+      ></div>
+    `;
+  }
+}
+
+customElements.define('arc-resizable', ArcResizable);