@raylang/elements 0.0.0-stage → 0.4.0

package/components/split/split.js

@@ -0,0 +1,221 @@
+// <ray-split>: two panes (slot="start", slot="end") with a draggable divider
+// (ray-sublime's sidebar and docks). The start pane has the size; the end
+// pane takes the rest.
+//
+// The divider is a focusable separator (WAI-ARIA window splitter): arrows
+// move it (Shift: faster), Home/End go to min/max, Enter collapses the start
+// pane. With `autosave="key"` the size survives reloads (localStorage).
+
+import { RayElement, css, define } from "../../core/core.js";
+
+const styles = css`
+  :host {
+    display: grid;
+    grid-template-columns: var(--_size) 0.375rem minmax(0, 1fr);
+    min-width: 0;
+    min-height: 0;
+    --_size: 50%;
+  }
+  :host([orientation="vertical"]) { grid-template-columns: none; grid-template-rows: var(--_size) 0.375rem minmax(0, 1fr); }
+  .pane { min-width: 0; min-height: 0; overflow: auto; }
+  :host([collapsed]) .start { visibility: hidden; }
+  .divider {
+    position: relative;
+    z-index: 1;
+    margin: 0 -0.25rem;
+    cursor: col-resize;
+    touch-action: none;
+    outline: none;
+  }
+  :host([orientation="vertical"]) .divider { margin: -0.25rem 0; cursor: row-resize; }
+  :host([disabled]) .divider { cursor: default; }
+  .divider::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    width: 1px;
+    background: var(--ray-border);
+    transform: translateX(-50%);
+    transition: background-color var(--ray-duration-fast) var(--ray-easing-standard), width var(--ray-duration-fast) var(--ray-easing-standard);
+  }
+  :host([orientation="vertical"]) .divider::before { top: 50%; bottom: auto; left: 0; right: 0; width: auto; height: 1px; transform: translateY(-50%); }
+  :host(:not([disabled])) .divider:hover::before,
+  .divider:focus-visible::before,
+  :host([data-dragging]) .divider::before { width: 3px; background: var(--ray-primary); }
+  :host([orientation="vertical"]:not([disabled])) .divider:hover::before,
+  :host([orientation="vertical"]) .divider:focus-visible::before,
+  :host([orientation="vertical"][data-dragging]) .divider::before { width: auto; height: 3px; }
+  :host([data-dragging]) { user-select: none; cursor: col-resize; }
+  :host([data-dragging][orientation="vertical"]) { cursor: row-resize; }
+`;
+
+const STEP = 10;
+const BIG_STEP = 50;
+
+export class RaySplit extends RayElement {
+  static properties = {
+    orientation: { type: String, reflect: true, default: "horizontal" },
+    position: { type: String, default: "50%" },
+    min: { type: Number, default: 0 },
+    max: { type: Number },
+    collapsed: { type: Boolean, reflect: true },
+    disabled: { type: Boolean, reflect: true },
+    autosave: { type: String },
+  };
+  static styles = [styles];
+  static template = `
+    <div class="pane start" part="start" id="start"><slot name="start"></slot></div>
+    <div class="divider" part="divider" role="separator" tabindex="0" aria-controls="start"></div>
+    <div class="pane end" part="end"><slot name="end"></slot></div>`;
+
+  constructor() {
+    super();
+    this._px = null;
+    this.divider = this.$(".divider");
+    this.divider.addEventListener("pointerdown", (e) => this._down(e));
+    this.divider.addEventListener("keydown", (e) => this._key(e));
+    this.divider.addEventListener("dblclick", () => this.toggle());
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    if (this._restored) return;
+    this._restored = true;
+    if (this.autosave) {
+      try {
+        const saved = Number(localStorage.getItem(`ray-split:${this.autosave}`));
+        if (saved > 0) this._px = saved;
+      } catch {
+        // No storage: the default position is fine.
+      }
+    }
+  }
+
+  /** The start pane's current size in px. */
+  get size() {
+    return this.$(".start").getBoundingClientRect()[this._vertical() ? "height" : "width"];
+  }
+
+  /** Collapses or restores the start pane. */
+  toggle() {
+    this.collapsed = !this.collapsed;
+    this.emit("ray-resize", { size: this.collapsed ? 0 : this.size, collapsed: this.collapsed });
+  }
+
+  update(changed) {
+    // A later change of `position` wins over a dragged/restored size; the
+    // first update (position from the markup) does not.
+    if (changed.has("position") && this._updated) this._px = null;
+    this._updated = true;
+    const min = Math.max(0, this.min ?? 0);
+    const max = this.max ?? null;
+    let value;
+    if (this._px !== null) {
+      value = `${this._clamp(this._px)}px`;
+    } else {
+      // A bare number is px; anything else (30%, 20rem) is CSS, clamped by min/max in CSS.
+      const pos = /^\d+(\.\d+)?$/.test(this.position ?? "") ? `${this.position}px` : (this.position || "50%");
+      value = `clamp(${min}px, ${pos}, ${max === null ? "100%" : `${max}px`})`;
+    }
+    // Inline on the host (it beats any :host rule): collapsed is decided here too.
+    this.style.setProperty("--_size", this.collapsed ? "0px" : value);
+    const vertical = this._vertical();
+    // The separator line is perpendicular to the split direction.
+    this.divider.setAttribute("aria-orientation", vertical ? "horizontal" : "vertical");
+    this.divider.setAttribute("aria-label", this.getAttribute("aria-label") ?? "Resize");
+    this.divider.tabIndex = this.disabled ? -1 : 0;
+    if (this.disabled) this.divider.setAttribute("aria-disabled", "true");
+    else this.divider.removeAttribute("aria-disabled");
+    queueMicrotask(() => this._aria());
+  }
+
+  _vertical() {
+    return this.orientation === "vertical";
+  }
+
+  _total() {
+    const r = this.getBoundingClientRect();
+    return this._vertical() ? r.height : r.width;
+  }
+
+  _clamp(px) {
+    const total = this._total();
+    const max = Math.min(this.max ?? Infinity, total > 0 ? total : Infinity);
+    return Math.round(Math.max(this.min ?? 0, Math.min(px, max)));
+  }
+
+  _aria() {
+    const total = this._total();
+    const now = total > 0 ? Math.round((this.collapsed ? 0 : this.size) / total * 100) : 0;
+    this.divider.setAttribute("aria-valuemin", "0");
+    this.divider.setAttribute("aria-valuemax", "100");
+    this.divider.setAttribute("aria-valuenow", String(now));
+  }
+
+  _resizeTo(px, commit) {
+    this._px = this._clamp(px);
+    if (this.collapsed) this.collapsed = false;
+    this.requestUpdate();
+    if (commit) {
+      if (this.autosave) {
+        try {
+          localStorage.setItem(`ray-split:${this.autosave}`, String(this._px));
+        } catch {
+          // Not persisted: fine.
+        }
+      }
+      this.emit("ray-resize", { size: this._px, collapsed: false });
+    }
+  }
+
+  _down(e) {
+    if (this.disabled || e.button !== 0) return;
+    e.preventDefault();
+    this.divider.focus();
+    try {
+      this.divider.setPointerCapture(e.pointerId);
+    } catch {
+      // The pointer is already gone (e.g. a canceled touch): drag without capture.
+    }
+    this.setAttribute("data-dragging", "");
+    const rect = this.getBoundingClientRect();
+    const vertical = this._vertical();
+    const move = (ev) => this._resizeTo(vertical ? ev.clientY - rect.top : ev.clientX - rect.left, false);
+    const up = (ev) => {
+      this.divider.removeEventListener("pointermove", move);
+      this.divider.removeEventListener("pointerup", up);
+      this.divider.removeEventListener("pointercancel", up);
+      this.removeAttribute("data-dragging");
+      this._resizeTo(vertical ? ev.clientY - rect.top : ev.clientX - rect.left, true);
+    };
+    this.divider.addEventListener("pointermove", move);
+    this.divider.addEventListener("pointerup", up);
+    this.divider.addEventListener("pointercancel", up);
+  }
+
+  _key(e) {
+    if (this.disabled) return;
+    const vertical = this._vertical();
+    const step = e.shiftKey ? BIG_STEP : STEP;
+    const current = this.collapsed ? 0 : this.size;
+    const less = vertical ? "ArrowUp" : "ArrowLeft";
+    const more = vertical ? "ArrowDown" : "ArrowRight";
+    let next = null;
+    if (e.key === less) next = current - step;
+    else if (e.key === more) next = current + step;
+    else if (e.key === "Home") next = this.min ?? 0;
+    else if (e.key === "End") next = this.max ?? this._total();
+    else if (e.key === "Enter") {
+      e.preventDefault();
+      this.toggle();
+      return;
+    }
+    if (next === null) return;
+    e.preventDefault();
+    this._resizeTo(next, true);
+  }
+}
+
+define("ray-split", RaySplit);

package/components/stack/stack.js

@@ -0,0 +1,46 @@
+// <ray-stack>: its children in a column, spaced by the space scale
+// (Mantine's Stack). <ray-group>: the same in a row.
+
+import { RayElement, css, define } from "../../core/core.js";
+import { spaceValue } from "../../core/styles.js";
+
+const ALIGN = { start: "flex-start", center: "center", end: "flex-end", stretch: "stretch", baseline: "baseline" };
+const JUSTIFY = { start: "flex-start", center: "center", end: "flex-end", "space-between": "space-between", "space-around": "space-around", "space-evenly": "space-evenly" };
+
+const styles = css`
+  :host {
+    --_gap: var(--ray-space-md);
+    display: flex;
+    flex-direction: column;
+    gap: var(--_gap);
+    align-items: var(--_align, stretch);
+    justify-content: var(--_justify, flex-start);
+    min-width: 0;
+  }
+  :host([hidden]) { display: none; }
+`;
+
+/** Gap, align and justify onto the host's custom properties. */
+export function applyFlex(el, { gap, align, justify }, alignDefault) {
+  const g = spaceValue(gap);
+  if (g) el.style.setProperty("--_gap", g);
+  else el.style.removeProperty("--_gap");
+  el.style.setProperty("--_align", ALIGN[align] ?? alignDefault);
+  el.style.setProperty("--_justify", JUSTIFY[justify] ?? "flex-start");
+}
+
+export class RayStack extends RayElement {
+  static properties = {
+    gap: { type: String, reflect: true, default: "md" },
+    align: { type: String, reflect: true, default: "stretch" },
+    justify: { type: String, reflect: true, default: "start" },
+  };
+  static styles = [styles];
+  static template = `<slot></slot>`;
+
+  update() {
+    applyFlex(this, this, "stretch");
+  }
+}
+
+define("ray-stack", RayStack);

package/components/stat/stat.js

@@ -0,0 +1,79 @@
+// <ray-stat>: a metric tile — label, big value, change against a previous
+// period and a note (the tiles of rayauth's dashboard).
+
+import { RayElement, css, define } from "../../core/core.js";
+
+const styles = css`
+  :host { display: block; }
+  .root {
+    display: grid;
+    gap: var(--ray-space-1);
+    padding: var(--ray-space-md);
+    color: var(--ray-card-foreground);
+    background: var(--ray-card);
+    border: 1px solid var(--ray-border);
+    border-radius: var(--ray-radius-default);
+  }
+  :host([plain]) .root { padding: 0; border: 0; background: transparent; }
+  .head { display: flex; align-items: center; justify-content: space-between; gap: var(--ray-space-2); }
+  .label { font-size: var(--ray-font-size-xs); font-weight: var(--ray-font-weight-semibold); text-transform: uppercase; letter-spacing: 0.04em; color: var(--ray-muted-foreground); }
+  .icon { display: inline-flex; color: var(--ray-muted-foreground); }
+  ::slotted(svg) { width: 1.25rem; height: 1.25rem; }
+  .line { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--ray-space-2); }
+  .value { font-size: var(--ray-font-size-2xl); font-weight: var(--ray-font-weight-bold); line-height: var(--ray-line-height-tight); font-variant-numeric: tabular-nums; }
+  .diff { display: inline-flex; align-items: center; gap: 0.125rem; font-size: var(--ray-font-size-sm); font-weight: var(--ray-font-weight-semibold); }
+  .diff[data-trend="up"] { color: var(--ray-success); }
+  .diff[data-trend="down"] { color: var(--ray-destructive); }
+  .diff[data-trend="flat"] { color: var(--ray-muted-foreground); }
+  :host([inverse]) .diff[data-trend="up"] { color: var(--ray-destructive); }
+  :host([inverse]) .diff[data-trend="down"] { color: var(--ray-success); }
+  .diff { --ray-icon-stroke: 2.5; }
+  .diff svg { width: 0.875rem; height: 0.875rem; }
+  .note { font-size: var(--ray-font-size-xs); color: var(--ray-muted-foreground); }
+  [hidden] { display: none !important; }
+`;
+
+// Icon of each trend (from the icon registry).
+const ARROWS = { up: "arrow-up-right", down: "arrow-down-right", flat: "minus" };
+
+export class RayStat extends RayElement {
+  static properties = {
+    label: { type: String },
+    value: { type: String },
+    diff: { type: Number },
+    diffUnit: { type: String, default: "%" },
+    note: { type: String },
+    inverse: { type: Boolean, reflect: true },
+    plain: { type: Boolean, reflect: true },
+  };
+  static styles = [styles];
+  static template = `
+    <div class="root" part="root">
+      <div class="head"><span class="label" part="label"></span><span class="icon" part="icon"><slot name="icon"></slot></span></div>
+      <div class="line"><span class="value" part="value"></span><span class="diff" part="diff" hidden></span></div>
+      <div class="note" part="note" hidden></div>
+      <slot></slot>
+    </div>`;
+
+  update() {
+    this.$(".label").textContent = this.label ?? "";
+    this.$(".value").textContent = this.value ?? "";
+    const diff = this.$(".diff");
+    const has = typeof this.diff === "number" && !Number.isNaN(this.diff);
+    diff.hidden = !has;
+    if (has) {
+      const trend = this.diff > 0 ? "up" : this.diff < 0 ? "down" : "flat";
+      diff.dataset.trend = trend;
+      const sign = this.diff > 0 ? "+" : "";
+      diff.innerHTML = `<span data-ray-icon="${ARROWS[trend]}" aria-hidden="true"></span>`;
+      this.paintIcons(diff);
+      diff.append(`${sign}${this.diff}${this.diffUnit ?? ""}`);
+      diff.setAttribute("aria-label", `${trend === "up" ? "Up" : trend === "down" ? "Down" : "No change"} ${Math.abs(this.diff)}${this.diffUnit ?? ""}`);
+    }
+    const note = this.$(".note");
+    note.hidden = !this.note;
+    note.textContent = this.note ?? "";
+  }
+}
+
+define("ray-stat", RayStat);

package/components/statusbar/statusbar.js

@@ -0,0 +1,110 @@
+// <ray-statusbar> + <ray-statusbar-item>: the bar at the bottom of an editor
+// window (ray-sublime): items on the left, items on the right (slot="right").
+// An item with `action` is a button; the others are plain text.
+
+import { RayElement, css, define } from "../../core/core.js";
+import { applyColor } from "../../core/styles.js";
+
+const barStyles = css`
+  :host {
+    display: flex;
+    align-items: stretch;
+    justify-content: space-between;
+    gap: var(--ray-space-4);
+    min-height: 1.5rem;
+    padding: 0 var(--ray-space-2);
+    font-size: var(--ray-font-size-xs);
+    color: var(--ray-muted-foreground);
+    background: var(--ray-muted);
+    border-top: 1px solid var(--ray-border);
+    user-select: none;
+  }
+  :host([variant="accent"]) {
+    color: var(--ray-primary-foreground);
+    background: var(--ray-primary);
+    border-top-color: transparent;
+    /* Inherited by the items (no :host-context() in WebKit/Firefox). */
+    --_item-hover: rgb(255 255 255 / 0.15);
+    --_item-hover-color: var(--ray-primary-foreground);
+  }
+  .side { display: flex; align-items: stretch; gap: 0.125rem; min-width: 0; }
+`;
+
+export class RayStatusbar extends RayElement {
+  static properties = {
+    variant: { type: String, reflect: true, default: "default" },
+  };
+  static styles = [barStyles];
+  static template = `<div class="side" part="left"><slot></slot></div><div class="side" part="right"><slot name="right"></slot></div>`;
+
+  constructor() {
+    super();
+    this.attachInternals().role = "group";
+  }
+
+  update() {
+    if (!this.hasAttribute("aria-label")) this.setAttribute("aria-label", "Status bar");
+  }
+}
+
+const itemStyles = css`
+  :host { display: inline-flex; min-width: 0; }
+  .item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--ray-space-1);
+    min-width: 0;
+    padding: 0 var(--ray-space-2);
+    font: inherit;
+    color: inherit;
+    white-space: nowrap;
+    background: transparent;
+    border: 0;
+    border-radius: var(--ray-radius-sm);
+  }
+  .label { overflow: hidden; text-overflow: ellipsis; }
+  button.item { cursor: pointer; }
+  button.item:hover { color: var(--_item-hover-color, var(--ray-foreground)); background: var(--_item-hover, var(--ray-accent)); }
+  :host([color]) .item { color: var(--_light-color); }
+  .icon { display: inline-flex; }
+  .icon:not([data-filled]) { display: none; }
+  ::slotted(svg) { width: 0.875rem; height: 0.875rem; }
+`;
+
+export class RayStatusbarItem extends RayElement {
+  static delegatesFocus = true;
+  static properties = {
+    action: { type: Boolean, reflect: true },
+    color: { type: String, reflect: true },
+    label: { type: String },
+  };
+  static styles = [itemStyles];
+
+  update() {
+    const tag = this.action ? "button" : "span";
+    if (!this._el || this._el.localName !== tag) {
+      this._el?.remove();
+      const el = document.createElement(tag);
+      el.className = "item focus-ring";
+      el.setAttribute("part", "item");
+      if (tag === "button") el.type = "button";
+      el.innerHTML = `<span class="icon"><slot name="icon"></slot></span><span class="label"><slot></slot></span>`;
+      const slot = el.querySelector('slot[name="icon"]');
+      slot.addEventListener("slotchange", () => slot.parentElement.toggleAttribute("data-filled", slot.assignedNodes().length > 0));
+      this.shadowRoot.append(el);
+      this._el = el;
+    }
+    if (this.color) applyColor(this, this.color);
+    // The label names a button whose content is only an icon or a short count.
+    if (this.label) {
+      this._el.setAttribute("aria-label", this.label);
+      this._el.title = this.label;
+    } else {
+      this._el.removeAttribute("aria-label");
+      this._el.removeAttribute("title");
+    }
+  }
+}
+
+define("ray-statusbar", RayStatusbar);
+define("ray-statusbar-item", RayStatusbarItem);