@pixelume/sdk 0.1.1 → 0.3.0

package/dist/ui/styles.js

@@ -0,0 +1,402 @@
+export const WIDGET_STYLES = `
+:host {
+  all: initial;
+  position: fixed;
+  z-index: var(--pixelume-z-index, 2147483000);
+  display: block;
+  color-scheme: dark;
+  contain: layout style;
+  pointer-events: none;
+}
+
+:host([hidden]) {
+  display: none;
+}
+
+:host([data-contained]) {
+  position: absolute;
+}
+
+:host([data-position="top-left"]) {
+  inset-block-start: calc(var(--pixelume-offset) + env(safe-area-inset-top, 0px));
+  inset-inline-start: calc(var(--pixelume-offset) + env(safe-area-inset-left, 0px));
+}
+
+:host([data-position="top-right"]) {
+  inset-block-start: calc(var(--pixelume-offset) + env(safe-area-inset-top, 0px));
+  inset-inline-end: calc(var(--pixelume-offset) + env(safe-area-inset-right, 0px));
+}
+
+:host([data-position="bottom-left"]) {
+  inset-block-end: calc(var(--pixelume-offset) + env(safe-area-inset-bottom, 0px));
+  inset-inline-start: calc(var(--pixelume-offset) + env(safe-area-inset-left, 0px));
+}
+
+:host([data-position="bottom-right"]) {
+  inset-block-end: calc(var(--pixelume-offset) + env(safe-area-inset-bottom, 0px));
+  inset-inline-end: calc(var(--pixelume-offset) + env(safe-area-inset-right, 0px));
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+button {
+  font: inherit;
+}
+
+.root {
+  --night: oklch(25% 0.035 263);
+  --night-deep: oklch(18% 0.03 263);
+  --surface: oklch(30% 0.04 263);
+  --surface-raised: oklch(35% 0.045 263);
+  --lume: oklch(79% 0.13 67);
+  --lume-bright: oklch(88% 0.1 76);
+  --lume-deep: oklch(63% 0.13 48);
+  --mint: oklch(81% 0.08 171);
+  --text: oklch(94% 0.02 78);
+  --muted: oklch(80% 0.02 78);
+  --danger: oklch(78% 0.12 24);
+  --line: oklch(92% 0.02 78 / 0.24);
+  --pixel: 3px;
+  display: flex;
+  gap: 0.75rem;
+  align-items: flex-end;
+  inline-size: max-content;
+  max-inline-size: calc(100vw - 2rem);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
+  font-size: 1rem;
+  line-height: 1.45;
+  color: var(--text);
+  pointer-events: auto;
+  -webkit-font-smoothing: antialiased;
+}
+
+:host([data-position^="bottom"]) .root {
+  flex-direction: column-reverse;
+}
+
+:host([data-position^="top"]) .root {
+  flex-direction: column;
+}
+
+:host([data-position$="left"]) .root {
+  align-items: flex-start;
+}
+
+.trigger,
+.panel,
+.action,
+.close {
+  border: 0;
+  border-radius: 0;
+}
+
+.trigger,
+.action {
+  box-shadow:
+    0 calc(-1 * var(--pixel)) 0 var(--edge),
+    0 var(--pixel) 0 var(--edge-bottom),
+    calc(-1 * var(--pixel)) 0 var(--edge),
+    var(--pixel) 0 var(--edge);
+}
+
+.trigger {
+  --edge: var(--lume);
+  --edge-bottom: var(--lume-deep);
+  display: inline-flex;
+  align-items: center;
+  gap: 0.625rem;
+  min-block-size: 2.75rem;
+  margin: var(--pixel);
+  padding: 0.625rem 0.875rem;
+  color: var(--night-deep);
+  background: var(--lume);
+  font-weight: 750;
+  cursor: pointer;
+  touch-action: manipulation;
+  transition:
+    transform 160ms cubic-bezier(0.16, 1, 0.3, 1),
+    background-color 160ms linear;
+}
+
+.trigger:hover {
+  background: var(--lume-bright);
+}
+
+.trigger:active {
+  transform: translateY(2px);
+}
+
+.trigger:focus-visible,
+.action:focus-visible,
+.close:focus-visible {
+  outline: 3px solid var(--mint);
+  outline-offset: 4px;
+}
+
+.mark {
+  position: relative;
+  flex: none;
+  inline-size: 1rem;
+  block-size: 1rem;
+  color: currentColor;
+}
+
+.mark::before,
+.mark::after {
+  content: "";
+  position: absolute;
+  background: currentColor;
+}
+
+.mark::before {
+  inset: 0.25rem;
+}
+
+.mark::after {
+  inset: 0;
+  clip-path: polygon(37.5% 0, 62.5% 0, 62.5% 37.5%, 100% 37.5%, 100% 62.5%, 62.5% 62.5%, 62.5% 100%, 37.5% 100%, 37.5% 62.5%, 0 62.5%, 0 37.5%, 37.5% 37.5%);
+  opacity: 0.72;
+}
+
+.presence {
+  inline-size: 0.5rem;
+  block-size: 0.5rem;
+  background: var(--night-deep);
+  opacity: 0.5;
+}
+
+.trigger[data-authenticated] .presence {
+  background: oklch(48% 0.12 168);
+  opacity: 1;
+}
+
+.panel {
+  inline-size: min(21.5rem, calc(100vw - 2rem));
+  margin: var(--pixel);
+  color: var(--text);
+  background: var(--night);
+  box-shadow:
+    0 calc(-1 * var(--pixel)) 0 var(--line),
+    0 var(--pixel) 0 var(--surface-raised),
+    calc(-1 * var(--pixel)) 0 var(--line),
+    var(--pixel) 0 var(--line),
+    0 1rem 2.5rem oklch(8% 0.03 263 / 0.42);
+  overflow: hidden;
+}
+
+.panel[hidden] {
+  display: none;
+}
+
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  min-block-size: 3rem;
+  padding: 0.625rem 0.75rem 0.625rem 1rem;
+  border-block-end: 1px solid var(--line);
+}
+
+.brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--lume-bright);
+  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
+  font-size: 0.8125rem;
+  font-weight: 750;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.brand .mark {
+  inline-size: 0.75rem;
+  block-size: 0.75rem;
+}
+
+.close {
+  display: grid;
+  place-items: center;
+  inline-size: 2.5rem;
+  block-size: 2.5rem;
+  padding: 0;
+  color: var(--muted);
+  background: transparent;
+  font-size: 1.5rem;
+  line-height: 1;
+  cursor: pointer;
+  touch-action: manipulation;
+}
+
+.close:hover {
+  color: var(--text);
+  background: var(--surface);
+}
+
+.content {
+  display: grid;
+  gap: 1rem;
+  padding: 1.25rem;
+}
+
+.identity {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr);
+  align-items: center;
+  gap: 0.875rem;
+}
+
+.avatar {
+  display: grid;
+  place-items: center;
+  inline-size: 2.75rem;
+  block-size: 2.75rem;
+  color: var(--night-deep);
+  background: var(--mint);
+  box-shadow:
+    0 -3px 0 var(--mint),
+    0 3px 0 oklch(62% 0.08 171),
+    -3px 0 0 var(--mint),
+    3px 0 0 var(--mint);
+  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
+  font-weight: 800;
+}
+
+.title,
+.message {
+  margin: 0;
+}
+
+.title {
+  color: var(--text);
+  font-size: 1.125rem;
+  font-weight: 760;
+  line-height: 1.25;
+  overflow-wrap: anywhere;
+}
+
+.message {
+  max-inline-size: 34ch;
+  color: var(--muted);
+  font-size: 0.875rem;
+}
+
+.state-copy {
+  display: grid;
+  gap: 0.375rem;
+}
+
+.notice {
+  margin: 0;
+  padding: 0.75rem;
+  color: var(--danger);
+  background: oklch(25% 0.055 24);
+  border: 1px solid oklch(78% 0.12 24 / 0.35);
+  font-size: 0.8125rem;
+}
+
+.action {
+  --edge: var(--lume);
+  --edge-bottom: var(--lume-deep);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-block-size: 2.75rem;
+  inline-size: calc(100% - 2 * var(--pixel));
+  margin: var(--pixel);
+  padding: 0.6875rem 1rem;
+  color: var(--night-deep);
+  background: var(--lume);
+  font-weight: 750;
+  cursor: pointer;
+  touch-action: manipulation;
+  transition:
+    transform 160ms cubic-bezier(0.16, 1, 0.3, 1),
+    background-color 160ms linear;
+}
+
+.action:hover:not(:disabled) {
+  background: var(--lume-bright);
+}
+
+.action:active:not(:disabled) {
+  transform: translateY(2px);
+}
+
+.action.secondary {
+  --edge: var(--line);
+  --edge-bottom: var(--surface-raised);
+  color: var(--text);
+  background: var(--surface);
+}
+
+.action.secondary:hover:not(:disabled) {
+  --edge: var(--mint);
+  color: var(--mint);
+  background: var(--surface-raised);
+}
+
+.action:disabled {
+  cursor: wait;
+  opacity: 0.68;
+}
+
+.loading {
+  display: grid;
+  gap: 0.625rem;
+  padding-block: 0.25rem;
+}
+
+.loading-line {
+  block-size: 0.75rem;
+  background: var(--surface-raised);
+  animation: pixel-pulse 1.2s steps(4, end) infinite;
+}
+
+.loading-line:first-child {
+  inline-size: 62%;
+}
+
+.loading-line:last-child {
+  inline-size: 88%;
+}
+
+.sr-only {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@keyframes pixel-pulse {
+  0%, 100% { opacity: 0.45; }
+  50% { opacity: 1; }
+}
+
+@media (max-width: 30rem) {
+  .trigger {
+    padding-inline: 0.75rem;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
+`;
+//# sourceMappingURL=styles.js.map

package/dist/ui/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/ui/styles.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,aAAa,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgZ5B,CAAC","sourcesContent":["export const WIDGET_STYLES = `\n:host {\n  all: initial;\n  position: fixed;\n  z-index: var(--pixelume-z-index, 2147483000);\n  display: block;\n  color-scheme: dark;\n  contain: layout style;\n  pointer-events: none;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n:host([data-contained]) {\n  position: absolute;\n}\n\n:host([data-position=\"top-left\"]) {\n  inset-block-start: calc(var(--pixelume-offset) + env(safe-area-inset-top, 0px));\n  inset-inline-start: calc(var(--pixelume-offset) + env(safe-area-inset-left, 0px));\n}\n\n:host([data-position=\"top-right\"]) {\n  inset-block-start: calc(var(--pixelume-offset) + env(safe-area-inset-top, 0px));\n  inset-inline-end: calc(var(--pixelume-offset) + env(safe-area-inset-right, 0px));\n}\n\n:host([data-position=\"bottom-left\"]) {\n  inset-block-end: calc(var(--pixelume-offset) + env(safe-area-inset-bottom, 0px));\n  inset-inline-start: calc(var(--pixelume-offset) + env(safe-area-inset-left, 0px));\n}\n\n:host([data-position=\"bottom-right\"]) {\n  inset-block-end: calc(var(--pixelume-offset) + env(safe-area-inset-bottom, 0px));\n  inset-inline-end: calc(var(--pixelume-offset) + env(safe-area-inset-right, 0px));\n}\n\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\nbutton {\n  font: inherit;\n}\n\n.root {\n  --night: oklch(25% 0.035 263);\n  --night-deep: oklch(18% 0.03 263);\n  --surface: oklch(30% 0.04 263);\n  --surface-raised: oklch(35% 0.045 263);\n  --lume: oklch(79% 0.13 67);\n  --lume-bright: oklch(88% 0.1 76);\n  --lume-deep: oklch(63% 0.13 48);\n  --mint: oklch(81% 0.08 171);\n  --text: oklch(94% 0.02 78);\n  --muted: oklch(80% 0.02 78);\n  --danger: oklch(78% 0.12 24);\n  --line: oklch(92% 0.02 78 / 0.24);\n  --pixel: 3px;\n  display: flex;\n  gap: 0.75rem;\n  align-items: flex-end;\n  inline-size: max-content;\n  max-inline-size: calc(100vw - 2rem);\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", system-ui, sans-serif;\n  font-size: 1rem;\n  line-height: 1.45;\n  color: var(--text);\n  pointer-events: auto;\n  -webkit-font-smoothing: antialiased;\n}\n\n:host([data-position^=\"bottom\"]) .root {\n  flex-direction: column-reverse;\n}\n\n:host([data-position^=\"top\"]) .root {\n  flex-direction: column;\n}\n\n:host([data-position$=\"left\"]) .root {\n  align-items: flex-start;\n}\n\n.trigger,\n.panel,\n.action,\n.close {\n  border: 0;\n  border-radius: 0;\n}\n\n.trigger,\n.action {\n  box-shadow:\n    0 calc(-1 * var(--pixel)) 0 var(--edge),\n    0 var(--pixel) 0 var(--edge-bottom),\n    calc(-1 * var(--pixel)) 0 var(--edge),\n    var(--pixel) 0 var(--edge);\n}\n\n.trigger {\n  --edge: var(--lume);\n  --edge-bottom: var(--lume-deep);\n  display: inline-flex;\n  align-items: center;\n  gap: 0.625rem;\n  min-block-size: 2.75rem;\n  margin: var(--pixel);\n  padding: 0.625rem 0.875rem;\n  color: var(--night-deep);\n  background: var(--lume);\n  font-weight: 750;\n  cursor: pointer;\n  touch-action: manipulation;\n  transition:\n    transform 160ms cubic-bezier(0.16, 1, 0.3, 1),\n    background-color 160ms linear;\n}\n\n.trigger:hover {\n  background: var(--lume-bright);\n}\n\n.trigger:active {\n  transform: translateY(2px);\n}\n\n.trigger:focus-visible,\n.action:focus-visible,\n.close:focus-visible {\n  outline: 3px solid var(--mint);\n  outline-offset: 4px;\n}\n\n.mark {\n  position: relative;\n  flex: none;\n  inline-size: 1rem;\n  block-size: 1rem;\n  color: currentColor;\n}\n\n.mark::before,\n.mark::after {\n  content: \"\";\n  position: absolute;\n  background: currentColor;\n}\n\n.mark::before {\n  inset: 0.25rem;\n}\n\n.mark::after {\n  inset: 0;\n  clip-path: polygon(37.5% 0, 62.5% 0, 62.5% 37.5%, 100% 37.5%, 100% 62.5%, 62.5% 62.5%, 62.5% 100%, 37.5% 100%, 37.5% 62.5%, 0 62.5%, 0 37.5%, 37.5% 37.5%);\n  opacity: 0.72;\n}\n\n.presence {\n  inline-size: 0.5rem;\n  block-size: 0.5rem;\n  background: var(--night-deep);\n  opacity: 0.5;\n}\n\n.trigger[data-authenticated] .presence {\n  background: oklch(48% 0.12 168);\n  opacity: 1;\n}\n\n.panel {\n  inline-size: min(21.5rem, calc(100vw - 2rem));\n  margin: var(--pixel);\n  color: var(--text);\n  background: var(--night);\n  box-shadow:\n    0 calc(-1 * var(--pixel)) 0 var(--line),\n    0 var(--pixel) 0 var(--surface-raised),\n    calc(-1 * var(--pixel)) 0 var(--line),\n    var(--pixel) 0 var(--line),\n    0 1rem 2.5rem oklch(8% 0.03 263 / 0.42);\n  overflow: hidden;\n}\n\n.panel[hidden] {\n  display: none;\n}\n\n.panel-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 1rem;\n  min-block-size: 3rem;\n  padding: 0.625rem 0.75rem 0.625rem 1rem;\n  border-block-end: 1px solid var(--line);\n}\n\n.brand {\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n  color: var(--lume-bright);\n  font-family: ui-monospace, \"SFMono-Regular\", Consolas, monospace;\n  font-size: 0.8125rem;\n  font-weight: 750;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n}\n\n.brand .mark {\n  inline-size: 0.75rem;\n  block-size: 0.75rem;\n}\n\n.close {\n  display: grid;\n  place-items: center;\n  inline-size: 2.5rem;\n  block-size: 2.5rem;\n  padding: 0;\n  color: var(--muted);\n  background: transparent;\n  font-size: 1.5rem;\n  line-height: 1;\n  cursor: pointer;\n  touch-action: manipulation;\n}\n\n.close:hover {\n  color: var(--text);\n  background: var(--surface);\n}\n\n.content {\n  display: grid;\n  gap: 1rem;\n  padding: 1.25rem;\n}\n\n.identity {\n  display: grid;\n  grid-template-columns: auto minmax(0, 1fr);\n  align-items: center;\n  gap: 0.875rem;\n}\n\n.avatar {\n  display: grid;\n  place-items: center;\n  inline-size: 2.75rem;\n  block-size: 2.75rem;\n  color: var(--night-deep);\n  background: var(--mint);\n  box-shadow:\n    0 -3px 0 var(--mint),\n    0 3px 0 oklch(62% 0.08 171),\n    -3px 0 0 var(--mint),\n    3px 0 0 var(--mint);\n  font-family: ui-monospace, \"SFMono-Regular\", Consolas, monospace;\n  font-weight: 800;\n}\n\n.title,\n.message {\n  margin: 0;\n}\n\n.title {\n  color: var(--text);\n  font-size: 1.125rem;\n  font-weight: 760;\n  line-height: 1.25;\n  overflow-wrap: anywhere;\n}\n\n.message {\n  max-inline-size: 34ch;\n  color: var(--muted);\n  font-size: 0.875rem;\n}\n\n.state-copy {\n  display: grid;\n  gap: 0.375rem;\n}\n\n.notice {\n  margin: 0;\n  padding: 0.75rem;\n  color: var(--danger);\n  background: oklch(25% 0.055 24);\n  border: 1px solid oklch(78% 0.12 24 / 0.35);\n  font-size: 0.8125rem;\n}\n\n.action {\n  --edge: var(--lume);\n  --edge-bottom: var(--lume-deep);\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-block-size: 2.75rem;\n  inline-size: calc(100% - 2 * var(--pixel));\n  margin: var(--pixel);\n  padding: 0.6875rem 1rem;\n  color: var(--night-deep);\n  background: var(--lume);\n  font-weight: 750;\n  cursor: pointer;\n  touch-action: manipulation;\n  transition:\n    transform 160ms cubic-bezier(0.16, 1, 0.3, 1),\n    background-color 160ms linear;\n}\n\n.action:hover:not(:disabled) {\n  background: var(--lume-bright);\n}\n\n.action:active:not(:disabled) {\n  transform: translateY(2px);\n}\n\n.action.secondary {\n  --edge: var(--line);\n  --edge-bottom: var(--surface-raised);\n  color: var(--text);\n  background: var(--surface);\n}\n\n.action.secondary:hover:not(:disabled) {\n  --edge: var(--mint);\n  color: var(--mint);\n  background: var(--surface-raised);\n}\n\n.action:disabled {\n  cursor: wait;\n  opacity: 0.68;\n}\n\n.loading {\n  display: grid;\n  gap: 0.625rem;\n  padding-block: 0.25rem;\n}\n\n.loading-line {\n  block-size: 0.75rem;\n  background: var(--surface-raised);\n  animation: pixel-pulse 1.2s steps(4, end) infinite;\n}\n\n.loading-line:first-child {\n  inline-size: 62%;\n}\n\n.loading-line:last-child {\n  inline-size: 88%;\n}\n\n.sr-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n\n@keyframes pixel-pulse {\n  0%, 100% { opacity: 0.45; }\n  50% { opacity: 1; }\n}\n\n@media (max-width: 30rem) {\n  .trigger {\n    padding-inline: 0.75rem;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  *,\n  *::before,\n  *::after {\n    animation-duration: 0.01ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.01ms !important;\n  }\n}\n`;\n"]}

package/dist/ui/widget.d.ts

@@ -0,0 +1,29 @@
+import type { PixelumeClient } from '../core/PixelumeClient.js';
+export type PixelumeWidgetPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+export interface PixelumeWidgetOptions {
+    /** Corner used by the widget. Defaults to `bottom-right`. */
+    readonly position?: PixelumeWidgetPosition;
+    /** Distance from the selected edges in CSS pixels. Defaults to `16`. */
+    readonly offset?: number;
+    /** Mount target. Defaults to `document.body`; custom targets should establish a containing block. */
+    readonly container?: HTMLElement;
+    /** Visual treatment. `pixel` is currently the only supported theme. */
+    readonly theme?: 'pixel';
+    /** Stacking order for the host. Defaults to `2147483000`. */
+    readonly zIndex?: number;
+}
+export interface PixelumeWidgetController {
+    /** The Shadow DOM host created by the widget. */
+    readonly element: HTMLElement;
+    /** Hides the widget and closes its panel without changing authentication state. */
+    hide(): void;
+    /** Shows a previously hidden widget. */
+    show(): void;
+    /** Removes DOM/listeners/subscriptions. Safe to call more than once. */
+    destroy(): void;
+}
+/**
+ * Mounts the optional Pixelume account widget. Importing this module alone has no DOM side effects.
+ * Repeating the call with the same client and container returns the existing controller.
+ */
+export declare function mountPixelumeWidget(pixelume: PixelumeClient, options?: PixelumeWidgetOptions): PixelumeWidgetController;