@wippy-fe/loading 0.0.20

package/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@wippy-fe/loading",
+  "version": "0.0.20",
+  "description": "Zero-dependency loading and error screen web components for the Wippy platform",
+  "license": "UNLICENSED",
+  "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "src/",
+    "package.json"
+  ]
+}

package/src/index.ts

@@ -0,0 +1,14 @@
+import { WippyErrorElement } from './wippy-error'
+import { WippyLoadingElement } from './wippy-loading'
+
+export { WippyErrorElement, WippyLoadingElement }
+
+export function register() {
+  if (!customElements.get('wippy-loading'))
+    customElements.define('wippy-loading', WippyLoadingElement)
+  if (!customElements.get('wippy-error'))
+    customElements.define('wippy-error', WippyErrorElement)
+}
+
+// Auto-register when loaded as a script
+register()

package/src/wippy-error.ts

@@ -0,0 +1,158 @@
+const ICON_CIRCLE = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><circle cx="18" cy="26.06" r="1.33" fill="currentColor"/><path fill="currentColor" d="M18 22.61a1 1 0 0 1-1-1v-12a1 1 0 1 1 2 0v12a1 1 0 0 1-1 1"/><path fill="currentColor" d="M18 34a16 16 0 1 1 16-16a16 16 0 0 1-16 16m0-30a14 14 0 1 0 14 14A14 14 0 0 0 18 4"/></svg>'
+
+const ICON_TRIANGLE = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><circle cx="18" cy="26.06" r="1.33" fill="currentColor"/><path fill="currentColor" d="M18 22.61a1 1 0 0 1-1-1v-12a1 1 0 1 1 2 0v12a1 1 0 0 1-1 1"/><path fill="currentColor" d="M15.062 1.681a3.221 3.221 0 0 1 5.647.002l13.89 25.56A3.22 3.22 0 0 1 31.77 32H4.022a3.22 3.22 0 0 1-2.9-4.759zM2.88 28.198A1.22 1.22 0 0 0 4 30h27.77a1.22 1.22 0 0 0 1.071-1.803L18.954 2.642a1.22 1.22 0 0 0-2.137-.001z"/></svg>'
+
+const ICON_SAD = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36"><path fill="currentColor" d="M18 2a16 16 0 1 0 16 16A16 16 0 0 0 18 2m0 30a14 14 0 1 1 14-14a14 14 0 0 1-14 14"/><circle cx="25.16" cy="14.28" r="1.8" fill="currentColor"/><circle cx="11.41" cy="14.28" r="1.8" fill="currentColor"/><path fill="currentColor" d="M18.16 20a9 9 0 0 0-7.33 3.78a1 1 0 1 0 1.63 1.16a7 7 0 0 1 11.31-.13a1 1 0 0 0 1.6-1.2A9 9 0 0 0 18.16 20"/></svg>'
+
+const ICONS: Record<string, string> = {
+  circle: ICON_CIRCLE,
+  triangle: ICON_TRIANGLE,
+  sad: ICON_SAD,
+}
+
+const STYLES = `
+  *, *::before, *::after { box-sizing: border-box; }
+
+  :host {
+    display: block;
+    width: 100%;
+    height: 100%;
+    min-height: 120px;
+    overflow: hidden;
+  }
+
+  :host(:only-child) {
+    height: 100vh;
+    height: 100dvh;
+  }
+
+  :host([no-bg]) .container { background: transparent; }
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    background: var(--p-surface-0, #fff);
+    font-family: system-ui, -apple-system, sans-serif;
+  }
+
+  .icon {
+    width: 48px;
+    height: 48px;
+    margin-bottom: 16px;
+  }
+
+  .icon svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  :host([severity="warning"]) .icon,
+  :host([severity="warning"]) .title {
+    color: var(--p-warn-500, rgb(249, 115, 22));
+  }
+
+  :host(:not([severity="warning"])) .icon,
+  :host(:not([severity="warning"])) .title {
+    color: var(--p-danger-500, rgb(239, 68, 68));
+  }
+
+  .title {
+    font-size: 16px;
+    font-weight: 600;
+    text-align: center;
+    padding: 0 16px;
+  }
+
+  .title:empty { display: none; }
+
+  .message {
+    font-size: 13px;
+    color: var(--p-text-muted-color, #71717a);
+    margin-top: 6px;
+    text-align: center;
+    padding: 0 16px;
+    max-width: 480px;
+    line-height: 1.4;
+  }
+
+  .message:empty { display: none; }
+
+  @media (prefers-color-scheme: dark) {
+    .container {
+      background: var(--p-surface-900, #1c1a19);
+    }
+    :host([severity="warning"]) .icon,
+    :host([severity="warning"]) .title {
+      color: var(--p-warn-400, color-mix(in srgb, rgb(249, 115, 22) 40%, white));
+    }
+    :host(:not([severity="warning"])) .icon,
+    :host(:not([severity="warning"])) .title {
+      color: var(--p-danger-400, color-mix(in srgb, rgb(239, 68, 68) 40%, white));
+    }
+    .message {
+      color: var(--p-text-muted-color, #a1a1aa);
+    }
+  }
+`
+
+export class WippyErrorElement extends HTMLElement {
+  static observedAttributes = ['title', 'message', 'icon', 'severity']
+
+  private _iconEl: HTMLElement | null = null
+  private _titleEl: HTMLElement | null = null
+  private _messageEl: HTMLElement | null = null
+
+  connectedCallback() {
+    const shadow = this.shadowRoot ?? this.attachShadow({ mode: 'open' })
+    shadow.textContent = ''
+
+    const style = document.createElement('style')
+    style.textContent = STYLES
+    shadow.appendChild(style)
+
+    const container = document.createElement('div')
+    container.className = 'container'
+
+    this._iconEl = document.createElement('div')
+    this._iconEl.className = 'icon'
+    this._iconEl.setAttribute('part', 'icon')
+
+    this._titleEl = document.createElement('div')
+    this._titleEl.className = 'title'
+    this._titleEl.setAttribute('part', 'title')
+
+    this._messageEl = document.createElement('div')
+    this._messageEl.className = 'message'
+    this._messageEl.setAttribute('part', 'message')
+
+    this._update()
+
+    container.append(this._iconEl, this._titleEl, this._messageEl)
+    shadow.appendChild(container)
+  }
+
+  disconnectedCallback() {
+    this._iconEl = null
+    this._titleEl = null
+    this._messageEl = null
+  }
+
+  attributeChangedCallback() {
+    this._update()
+  }
+
+  private _update() {
+    if (this._iconEl) {
+      const iconKey = this.getAttribute('icon') ?? 'circle'
+      this._iconEl.innerHTML = ICONS[iconKey] ?? ICONS.circle
+    }
+    if (this._titleEl)
+      this._titleEl.textContent = this.getAttribute('title') ?? 'Something went wrong'
+    if (this._messageEl)
+      this._messageEl.textContent = this.getAttribute('message') ?? ''
+  }
+}

package/src/wippy-loading.ts

@@ -0,0 +1,176 @@
+const OUTER_DURATION = 3000
+const INNER_DURATION = 2000
+
+const STYLES = `
+  *, *::before, *::after { box-sizing: border-box; }
+
+  :host {
+    display: block;
+    width: 100%;
+    height: 100%;
+    min-height: 120px;
+    overflow: hidden;
+  }
+
+  :host(:only-child) {
+    height: 100vh;
+    height: 100dvh;
+  }
+
+  :host([no-bg]) .container { background: transparent; }
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    width: 100%;
+    height: 100%;
+    background: var(--p-surface-0, #fff);
+    font-family: system-ui, -apple-system, sans-serif;
+  }
+
+  .spinner {
+    position: relative;
+    width: 48px;
+    height: 48px;
+    margin-bottom: 16px;
+  }
+
+  .ring {
+    position: absolute;
+    border-radius: 50%;
+    box-sizing: border-box;
+  }
+
+  .ring.outer {
+    width: 48px;
+    height: 48px;
+    border: 3px solid var(--p-surface-300, #d4d4d8);
+    animation: spin-outer ${OUTER_DURATION}ms linear infinite;
+  }
+
+  .ring.inner {
+    width: 56px;
+    height: 56px;
+    top: 50%;
+    left: 50%;
+    border: 3px solid transparent;
+    border-top-color: var(--p-primary, rgb(0, 95, 178));
+    border-bottom-color: var(--p-primary, rgb(0, 95, 178));
+    animation: spin-inner ${INNER_DURATION}ms linear infinite;
+  }
+
+  .title {
+    font-size: 14px;
+    font-weight: 500;
+    color: var(--p-text-color, #3f3f46);
+    text-align: center;
+    padding: 0 16px;
+  }
+
+  .title:empty { display: none; }
+
+  .subtitle {
+    font-size: 12px;
+    color: var(--p-text-muted-color, #71717a);
+    margin-top: 4px;
+    text-align: center;
+    padding: 0 16px;
+  }
+
+  .subtitle:empty { display: none; }
+
+  @media (prefers-color-scheme: dark) {
+    .container {
+      background: var(--p-surface-900, #1c1a19);
+    }
+    .ring.outer {
+      border-color: var(--p-surface-500, #71717a);
+    }
+    .ring.inner {
+      border-top-color: var(--p-primary, rgb(0, 125, 178));
+      border-bottom-color: var(--p-primary, rgb(0, 125, 178));
+    }
+    .title {
+      color: var(--p-text-color, #fff);
+    }
+    .subtitle {
+      color: var(--p-text-muted-color, #a1a1aa);
+    }
+  }
+
+  @keyframes spin-outer {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+
+  @keyframes spin-inner {
+    from { transform: translate(-50%, -50%) rotate(0deg); }
+    to { transform: translate(-50%, -50%) rotate(-360deg); }
+  }
+`
+
+export class WippyLoadingElement extends HTMLElement {
+  static observedAttributes = ['title', 'subtitle']
+
+  private _titleEl: HTMLElement | null = null
+  private _subtitleEl: HTMLElement | null = null
+
+  connectedCallback() {
+    const shadow = this.shadowRoot ?? this.attachShadow({ mode: 'open' })
+    shadow.textContent = ''
+
+    const style = document.createElement('style')
+    style.textContent = STYLES
+    shadow.appendChild(style)
+
+    const container = document.createElement('div')
+    container.className = 'container'
+
+    const spinner = document.createElement('div')
+    spinner.className = 'spinner'
+
+    const outer = document.createElement('div')
+    outer.className = 'ring outer'
+
+    const inner = document.createElement('div')
+    inner.className = 'ring inner'
+
+    spinner.append(outer, inner)
+
+    this._titleEl = document.createElement('div')
+    this._titleEl.className = 'title'
+    this._titleEl.setAttribute('part', 'title')
+
+    this._subtitleEl = document.createElement('div')
+    this._subtitleEl.className = 'subtitle'
+    this._subtitleEl.setAttribute('part', 'subtitle')
+
+    this._updateText()
+
+    container.append(spinner, this._titleEl, this._subtitleEl)
+    shadow.appendChild(container)
+
+    // Time-synced animation — phase matches wall-clock time
+    const now = Date.now()
+    outer.style.animationDelay = `-${now % OUTER_DURATION}ms`
+    inner.style.animationDelay = `-${now % INNER_DURATION}ms`
+  }
+
+  disconnectedCallback() {
+    this._titleEl = null
+    this._subtitleEl = null
+  }
+
+  attributeChangedCallback() {
+    this._updateText()
+  }
+
+  private _updateText() {
+    if (this._titleEl)
+      this._titleEl.textContent = this.getAttribute('title') ?? ''
+    if (this._subtitleEl)
+      this._subtitleEl.textContent = this.getAttribute('subtitle') ?? ''
+  }
+}