@cianfrani/ai-ui 0.1.0-alpha.0

package/src/visual/stack.ts

@@ -0,0 +1,115 @@
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+const GAP_MAP: Record<string, string> = {
+  none: "0",
+  "2xs": "0.125rem",
+  xs: "0.25rem",
+  sm: "0.5rem",
+  md: "0.75rem",
+  lg: "1rem",
+  xl: "1.5rem",
+  "2xl": "2rem",
+};
+
+const JUSTIFY_MAP: Record<string, string> = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  between: "space-between",
+  around: "space-around",
+  evenly: "space-evenly",
+};
+
+/**
+ * Flex layout primitive.
+ *
+ * @slot - Stack children.
+ *
+ * @cssprop --gap - Overrides computed gap.
+ * @cssprop --align-items - Overrides align-items.
+ * @cssprop --justify-content - Overrides justify-content.
+ */
+@customElement("ai-stack")
+export class AiStack extends LitElement {
+  /** Flex direction. */
+  @property({ reflect: true }) direction: "row" | "column" = "column";
+  /** Gap between children. */
+  @property({ reflect: true }) gap: "none" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" =
+    "none";
+  /** Cross-axis alignment. */
+  @property({ reflect: true }) align: "start" | "center" | "end" | "stretch" | "baseline" =
+    "stretch";
+  /** Main-axis justification. */
+  @property({ reflect: true }) justify:
+    | "start"
+    | "center"
+    | "end"
+    | "between"
+    | "around"
+    | "evenly" = "start";
+  /** Whether children wrap. */
+  @property({ reflect: true, type: Boolean }) wrap = false;
+  /** Whether to use inline-flex instead of flex. */
+  @property({ reflect: true, type: Boolean }) inline = false;
+
+  static override styles = css`
+    :host {
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      gap: var(--gap, 0);
+      align-items: var(--align-items, stretch);
+      justify-content: var(--justify-content, flex-start);
+      margin: 0;
+      padding: 0;
+    }
+
+    :host([inline]) {
+      display: inline-flex;
+    }
+
+    :host([direction="row"]) {
+      flex-direction: row;
+    }
+
+    :host([wrap]) {
+      flex-wrap: wrap;
+    }
+
+    *,
+    *::before,
+    *::after {
+      box-sizing: inherit;
+    }
+  `;
+
+  override render() {
+    return html`
+      <slot></slot>
+    `;
+  }
+
+  protected override updated(): void {
+    const gap = GAP_MAP[this.gap] ?? "0";
+    this.style.setProperty("--gap", `var(--gap, ${gap})`);
+
+    const alignItems = this.align;
+    this.style.setProperty("--align-items", `var(--align-items, ${alignItems})`);
+
+    const justifyContent = JUSTIFY_MAP[this.justify] ?? "flex-start";
+    this.style.setProperty("--justify-content", `var(--justify-content, ${justifyContent})`);
+
+    // force reflow — gap needs explicit value
+    void this.style.direction;
+    this.style.gap = `var(--gap, ${gap})`;
+    this.style.alignItems = `var(--align-items, ${alignItems})`;
+    this.style.justifyContent = `var(--justify-content, ${justifyContent})`;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ai-stack": AiStack;
+  }
+}

package/src/visual/status.ts

@@ -0,0 +1,170 @@
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+const SIZE_MAP: Record<string, string> = {
+  xs: "6px",
+  sm: "8px",
+  md: "12px",
+  lg: "16px",
+};
+
+/**
+ * Status dot/icon indicator.
+ *
+ * @slot - Optional custom icon/content.
+ *
+ * @cssprop --size - Indicator size.
+ * @cssprop --color - Indicator color.
+ * @cssprop --idle-color - Idle color.
+ * @cssprop --running-color - Running color.
+ * @cssprop --success-color - Success color.
+ * @cssprop --error-color - Error color.
+ * @cssprop --cancelled-color - Cancelled color.
+ * @cssprop --pulse-duration - Running pulse duration. Default: 1.5s
+ */
+@customElement("ai-status")
+export class AiStatus extends LitElement {
+  /** Current status state. */
+  @property({ reflect: true }) state:
+    | "idle"
+    | "running"
+    | "success"
+    | "error"
+    | "cancelled"
+    | "unknown" = "unknown";
+  /** Size preset. */
+  @property({ reflect: true }) size: "xs" | "sm" | "md" | "lg" = "md";
+  /** Display variant — dot or icon. */
+  @property({ reflect: true }) variant: "dot" | "icon" = "dot";
+
+  static override styles = css`
+    :host {
+      box-sizing: border-box;
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0;
+      padding: 0;
+      color: var(--color, var(--ai-color-text-muted, rgba(128, 128, 128, 0.7)));
+    }
+
+    .dot {
+      width: var(--size, 12px);
+      height: var(--size, 12px);
+      border-radius: 50%;
+      background: var(--color, var(--ai-color-text-muted, rgba(128, 128, 128, 0.7)));
+      flex-shrink: 0;
+    }
+
+    :host([state="running"]) .dot {
+      animation: pulse var(--pulse-duration, 1.5s) ease-in-out infinite;
+    }
+
+    @keyframes pulse {
+      0%,
+      100% {
+        transform: scale(1);
+        opacity: 1;
+      }
+      50% {
+        transform: scale(1.2);
+        opacity: 0.7;
+      }
+    }
+
+    .icon-wrapper {
+      width: var(--size, 12px);
+      height: var(--size, 12px);
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .fallback-icon {
+      width: 100%;
+      height: 100%;
+    }
+
+    *,
+    *::before,
+    *::after {
+      box-sizing: inherit;
+    }
+  `;
+
+  override render() {
+    if (this.variant === "icon") {
+      return html`
+        <span class="icon-wrapper" part="icon">
+          <slot>
+            <svg class="fallback-icon" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+              ${this.getFallbackIconPath()}
+            </svg>
+          </slot>
+        </span>
+      `;
+    }
+
+    return html`
+      <span class="dot" part="dot"></span>
+    `;
+  }
+
+  protected override updated(): void {
+    const size = SIZE_MAP[this.size] ?? "12px";
+    this.style.setProperty("--size", `var(--size, ${size})`);
+
+    const stateColor = this.getStateColor();
+    this.style.setProperty("--color", `var(--color, ${stateColor})`);
+  }
+
+  private getStateColor(): string {
+    switch (this.state) {
+      case "idle":
+        return "var(--idle-color, var(--ai-color-text-muted, rgba(128, 128, 128, 0.4)))";
+      case "running":
+        return "var(--running-color, var(--ai-color-accent, #4a90d9))";
+      case "success":
+        return "var(--success-color, var(--ai-color-success, #2ea043))";
+      case "error":
+        return "var(--error-color, var(--ai-color-error, #e33e33))";
+      case "cancelled":
+        return "var(--cancelled-color, var(--ai-color-text-muted, rgba(128, 128, 128, 0.5)))";
+      default:
+        return "var(--ai-color-text-muted, rgba(128, 128, 128, 0.7))";
+    }
+  }
+
+  private getFallbackIconPath(): string {
+    switch (this.state) {
+      case "success":
+        return html`
+          <path
+            d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"
+          />
+        `.strings.join("");
+      case "error":
+        return html`
+          <path
+            d="M3.72 3.72a.75.75 0 011.06 0L8 6.94l3.22-3.22a.75.75 0 111.06 1.06L9.06 8l3.22 3.22a.75.75 0 11-1.06 1.06L8 9.06l-3.22 3.22a.75.75 0 01-1.06-1.06L6.94 8 3.72 4.78a.75.75 0 010-1.06z"
+          />
+        `.strings.join("");
+      case "running":
+        return html`
+          <path
+            d="M8 1.5a6.5 6.5 0 100 13 6.5 6.5 0 000-13zM0 8a8 8 0 1116 0A8 8 0 010 8zm9-3.25v2.5h2.5a.75.75 0 010 1.5H9v2.5a.75.75 0 01-1.5 0v-2.5H5a.75.75 0 010-1.5h2.5v-2.5a.75.75 0 011.5 0z"
+          />
+        `.strings.join("");
+      default:
+        return html`
+          <circle cx="8" cy="8" r="4" />
+        `.strings.join("");
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ai-status": AiStatus;
+  }
+}

package/src/visual/surface.ts

@@ -0,0 +1,150 @@
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+const RADIUS_MAP: Record<string, string> = {
+  none: "0",
+  sm: "0.375rem",
+  md: "0.625rem",
+  lg: "0.875rem",
+  pill: "999px",
+};
+
+/**
+ * Themed container/surface.
+ *
+ * @slot - Surface content.
+ *
+ * @cssprop --background-color - Surface background.
+ * @cssprop --text-color - Surface text color.
+ * @cssprop --border-color - Border color.
+ * @cssprop --border-width - Border width.
+ * @cssprop --border-radius - Border radius.
+ * @cssprop --shadow - Box shadow.
+ * @cssprop --hover-background-color - Hover background when interactive.
+ * @cssprop --focus-ring - Focus ring for slotted/native focus styling.
+ */
+@customElement("ai-surface")
+export class AiSurface extends LitElement {
+  /** Visual variant. */
+  @property({ reflect: true }) variant: "flat" | "outlined" | "raised" | "sunken" = "flat";
+  /** Semantic color tone. */
+  @property({ reflect: true }) tone:
+    | "neutral"
+    | "accent"
+    | "success"
+    | "warning"
+    | "error"
+    | "info" = "neutral";
+  /** Border radius preset. */
+  @property({ reflect: true }) radius: "none" | "sm" | "md" | "lg" | "pill" = "md";
+  /** Whether the surface is clickable/hoverable. */
+  @property({ reflect: true, type: Boolean }) interactive = false;
+
+  static override styles = css`
+    :host {
+      box-sizing: border-box;
+      display: block;
+      margin: 0;
+      padding: 0;
+      border-radius: var(--border-radius, 0.625rem);
+      background: var(--background-color, transparent);
+      color: var(--text-color, inherit);
+    }
+
+    :host([variant="outlined"]) {
+      border: var(--border-width, 1px) solid
+        var(--border-color, var(--ai-color-border, rgba(128, 128, 128, 0.2)));
+    }
+
+    :host([variant="raised"]) {
+      box-shadow: var(--shadow, 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.08));
+    }
+
+    :host([variant="sunken"]) {
+      box-shadow: var(--shadow, inset 0 1px 3px rgba(0, 0, 0, 0.12));
+    }
+
+    :host([interactive]) {
+      cursor: pointer;
+      transition: background 0.15s ease;
+    }
+
+    :host([interactive]:hover) {
+      background: var(--hover-background-color, var(--background-color, rgba(128, 128, 128, 0.05)));
+    }
+
+    :host([interactive]:focus-visible) {
+      outline: var(--focus-ring, 2px solid var(--ai-color-accent, #4a90d9));
+      outline-offset: 2px;
+    }
+
+    *,
+    *::before,
+    *::after {
+      box-sizing: inherit;
+    }
+  `;
+
+  override render() {
+    return html`
+      <slot></slot>
+    `;
+  }
+
+  protected override updated(): void {
+    const radius = RADIUS_MAP[this.radius] ?? "0.625rem";
+    this.style.setProperty("--border-radius", `var(--border-radius, ${radius})`);
+
+    const toneColors = this.getToneColors();
+    this.style.setProperty("--background-color", `var(--background-color, ${toneColors.bg})`);
+    this.style.setProperty("--text-color", `var(--text-color, ${toneColors.text})`);
+    this.style.setProperty("--border-color", `var(--border-color, ${toneColors.border})`);
+  }
+
+  private getToneColors(): { bg: string; text: string; border: string } {
+    switch (this.tone) {
+      case "accent":
+        return {
+          bg: "rgba(74, 144, 217, 0.1)",
+          text: "var(--ai-color-accent, #4a90d9)",
+          border: "rgba(74, 144, 217, 0.3)",
+        };
+      case "success":
+        return {
+          bg: "rgba(46, 160, 67, 0.1)",
+          text: "var(--ai-color-success, #2ea043)",
+          border: "rgba(46, 160, 67, 0.3)",
+        };
+      case "warning":
+        return {
+          bg: "rgba(210, 153, 34, 0.1)",
+          text: "var(--ai-color-warning, #d29922)",
+          border: "rgba(210, 153, 34, 0.3)",
+        };
+      case "error":
+        return {
+          bg: "rgba(227, 62, 51, 0.1)",
+          text: "var(--ai-color-error, #e33e33)",
+          border: "rgba(227, 62, 51, 0.3)",
+        };
+      case "info":
+        return {
+          bg: "rgba(80, 160, 220, 0.1)",
+          text: "var(--ai-color-info, #50a0dc)",
+          border: "rgba(80, 160, 220, 0.3)",
+        };
+      default:
+        return {
+          bg: "transparent",
+          text: "inherit",
+          border: "var(--ai-color-border, rgba(128, 128, 128, 0.2))",
+        };
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ai-surface": AiSurface;
+  }
+}

package/src/visual/text.ts

@@ -0,0 +1,141 @@
+import { LitElement, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+
+const SIZE_MAP: Record<string, string> = {
+  caption: "0.75rem",
+  meta: "0.8125rem",
+  ui: "0.875rem",
+  body: "1rem",
+  title: "1.125rem",
+  display: "1.375rem",
+};
+
+const WEIGHT_MAP: Record<string, number> = {
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+};
+
+/**
+ * Typography primitive.
+ *
+ * @slot - Text/inline content.
+ *
+ * @cssprop --text-color - Text color.
+ * @cssprop --font-family - Font family.
+ * @cssprop --font-family-mono - Monospace font family.
+ * @cssprop --font-size - Font size.
+ * @cssprop --font-weight - Font weight.
+ * @cssprop --line-height - Line height.
+ * @cssprop --letter-spacing - Letter spacing.
+ */
+@customElement("ai-text")
+export class AiText extends LitElement {
+  /** Size preset. */
+  @property({ reflect: true }) size: "caption" | "meta" | "ui" | "body" | "title" | "display" =
+    "body";
+  /** Font weight preset. */
+  @property({ reflect: true }) weight: "normal" | "medium" | "semibold" | "bold" = "normal";
+  /** Semantic color tone. */
+  @property({ reflect: true }) tone:
+    | "default"
+    | "muted"
+    | "accent"
+    | "success"
+    | "warning"
+    | "error" = "default";
+  /** Whether to use monospace font. */
+  @property({ reflect: true, type: Boolean }) mono = false;
+  /** Whether to truncate with ellipsis. */
+  @property({ reflect: true, type: Boolean }) truncate = false;
+  /** Whether to use inline display. */
+  @property({ reflect: true, type: Boolean }) inline = false;
+
+  static override styles = css`
+    :host {
+      box-sizing: border-box;
+      display: block;
+      margin: 0;
+      padding: 0;
+      font-size: var(--font-size, 1rem);
+      font-weight: var(--font-weight, 400);
+      line-height: var(--line-height, 1.5);
+      letter-spacing: var(--letter-spacing, normal);
+      color: var(--text-color, inherit);
+    }
+
+    :host([inline]) {
+      display: inline-flex;
+    }
+
+    :host([mono]) {
+      font-family: var(
+        --font-family-mono,
+        ui-monospace,
+        "Cascadia Code",
+        "Source Code Pro",
+        Menlo,
+        Consolas,
+        "DejaVu Sans Mono",
+        monospace
+      );
+    }
+
+    :host(:not([mono])) {
+      font-family: var(--font-family, inherit);
+    }
+
+    :host([truncate]) {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap;
+    }
+
+    *,
+    *::before,
+    *::after {
+      box-sizing: inherit;
+    }
+  `;
+
+  override render() {
+    return html`
+      <slot></slot>
+    `;
+  }
+
+  protected override updated(): void {
+    const size = SIZE_MAP[this.size] ?? "1rem";
+    const weight = WEIGHT_MAP[this.weight] ?? 400;
+
+    this.style.setProperty("--font-size", `var(--font-size, ${size})`);
+    this.style.setProperty("--font-weight", `var(--font-weight, ${weight})`);
+
+    const toneColor = this.getToneColor();
+    this.style.setProperty("--text-color", `var(--text-color, ${toneColor})`);
+  }
+
+  private getToneColor(): string {
+    switch (this.tone) {
+      case "muted":
+        return "var(--ai-color-text-muted, rgba(128, 128, 128, 0.7))";
+      case "accent":
+        return "var(--ai-color-accent, #4a90d9)";
+      case "success":
+        return "var(--ai-color-success, #2ea043)";
+      case "warning":
+        return "var(--ai-color-warning, #d29922)";
+      case "error":
+        return "var(--ai-color-error, #e33e33)";
+      default:
+        return "inherit";
+    }
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "ai-text": AiText;
+  }
+}