@thessor/widget 0.1.0

package/README.md

@@ -0,0 +1,94 @@
+# @thessor/widget
+
+Framework-agnostic verification badge web component for Thessor. A pill showing
+verification status that expands into an inline cryptographic proof panel —
+no React, Vue, or other framework required.
+
+## Install
+
+### Script tag (no build step)
+
+```html
+<script src="https://unpkg.com/@thessor/widget"></script>
+<thessor-badge decision-id="env_8f3a2c1d94e6"></thessor-badge>
+```
+
+### npm
+
+```bash
+npm install @thessor/widget
+```
+
+```js
+import '@thessor/widget';
+```
+
+```html
+<thessor-badge decision-id="env_8f3a2c1d94e6"></thessor-badge>
+```
+
+## Usage
+
+```html
+<thessor-badge decision-id="env_8f3a2c1d94e6"></thessor-badge>
+```
+
+On mount, the badge fetches `GET https://api.thessor.com/verify/{decision-id}`
+to populate its proof panel with the envelope ID, canonical hash, signature
+suite, and sealed timestamp. Clicking the badge expands the panel inline,
+directly below it.
+
+### Theme
+
+The Thessor mark auto-detects whether it's sitting on a light or dark
+background by walking up the DOM for the nearest ancestor with a
+non-transparent `background-color`. To force it instead of relying on
+detection, set `data-theme`:
+
+```html
+<thessor-badge decision-id="env_8f3a2c1d94e6" data-theme="dark"></thessor-badge>
+```
+
+The expanded proof panel is always dark (`#0B0B0E`), regardless of host theme.
+
+### States
+
+- **Loading** — badge renders immediately with a pulsing status dot; the proof
+  panel shows a skeleton until the fetch resolves.
+- **Success** — panel shows envelope ID, sealed timestamp, and signature suite,
+  plus the hashed → signed → Merkle checkpoint → Bitcoin stage chain.
+- **Error** — if the verify request fails, the badge switches to a muted
+  "Unable to verify" state. No exception is thrown.
+
+## Local development
+
+```bash
+npm install
+npm run build   # bundles src/ to dist/ (ESM + IIFE) and emits .d.ts files
+npm run demo    # serves the repo root at http://localhost:4173/demo.html
+```
+
+Open `demo.html` for visual QA: badges on light and dark hosts, a manual
+`data-theme` override, a loading skeleton, and an error state. The demo mocks
+`window.fetch` for requests to `api.thessor.com` since that API isn't reachable
+from a local checkout — swap in the real endpoint once it's deployed.
+
+`npm run dev` runs the same build in `--watch` mode.
+
+## Build output
+
+- `dist/thessor-widget.js` — ES module (`import '@thessor/widget'`)
+- `dist/thessor-widget.umd.js` — minified, self-executing bundle for
+  `<script src>` / unpkg / jsDelivr use. The element registers itself via
+  `customElements.define` as a side effect, so this is a plain IIFE rather
+  than a true CJS/AMD/global UMD wrapper — the practical equivalent for a
+  script-tag-loaded custom element.
+- `dist/index.d.ts` (+ per-module `.d.ts` files) — TypeScript types
+
+## Notes before publishing
+
+- `license` in `package.json` is currently set to `UNLICENSED` — pick a real
+  license before publishing publicly.
+- Confirm the production shape of the `GET /verify/{decision-id}` response
+  matches `ProofData` in `src/types.ts` (`envelope_id`, `canonical_hash`,
+  `signature_suite`, `created_at`).

package/dist/index.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Framework-agnostic verification badge. Renders a pill showing Thessor's
+ * verification status; clicking it expands an inline proof panel populated
+ * from `GET /verify/{decision-id}`.
+ *
+ * Usage: <thessor-badge decision-id="env_..."></thessor-badge>
+ * Theme override: <thessor-badge decision-id="..." data-theme="dark">
+ */
+export declare class ThessorBadge extends HTMLElement {
+    static observedAttributes: string[];
+    private shadow;
+    private state;
+    private proof;
+    private isOpen;
+    private abortController;
+    private hasRendered;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string): void;
+    private applyTheme;
+    private fetchProof;
+    private setState;
+    private togglePanel;
+    private render;
+    private renderBadgeContent;
+    private renderPanelContent;
+}

package/dist/logo.d.ts

@@ -0,0 +1,2 @@
+export declare const THESSOR_LOGO_LIGHT: string;
+export declare const THESSOR_LOGO_DARK: string;

package/dist/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles = "\n@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');\n\n:host {\n  all: initial;\n  display: inline-block;\n  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;\n  -webkit-font-smoothing: antialiased;\n}\n\n* {\n  box-sizing: border-box;\n}\n\n.root {\n  position: relative;\n  display: inline-block;\n}\n\n.badge {\n  display: inline-flex;\n  align-items: center;\n  gap: 11px;\n  padding: 10px 14px;\n  border-radius: 10px;\n  border: 1px solid var(--tw-border, rgba(0, 0, 0, 0.12));\n  background: var(--tw-bg, #ffffff);\n  color: var(--tw-fg, #16171a);\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  line-height: 1.2;\n  user-select: none;\n  transition: border-color 150ms ease, background 150ms ease;\n}\n\n.badge:hover {\n  border-color: var(--tw-border-hover, rgba(0, 0, 0, 0.22));\n}\n\n.badge:focus-visible {\n  outline: 2px solid #6c8cf5;\n  outline-offset: 2px;\n}\n\n:host([data-theme='dark']) .badge,\n.root.theme-dark .badge {\n  --tw-bg: #17181c;\n  --tw-fg: #f3f3f5;\n  --tw-border: rgba(255, 255, 255, 0.14);\n  --tw-border-hover: rgba(255, 255, 255, 0.26);\n}\n\n.dot {\n  width: 8px;\n  height: 8px;\n  border-radius: 50%;\n  background: #2fbf6c;\n  flex-shrink: 0;\n}\n\n.dot.dot-muted {\n  background: #9a9aa2;\n}\n\n.dot.dot-loading {\n  animation: pulse 1.4s ease-in-out infinite;\n}\n\n.logo {\n  display: inline-flex;\n  align-items: center;\n  flex-shrink: 0;\n  height: 16px;\n}\n\n.logo-img {\n  display: block;\n  height: 100%;\n  width: auto;\n}\n\n.logo-dark {\n  display: none;\n}\n\n:host([data-theme='dark']) .logo-light,\n.root.theme-dark .logo-light {\n  display: none;\n}\n\n:host([data-theme='dark']) .logo-dark,\n.root.theme-dark .logo-dark {\n  display: block;\n}\n\n.label {\n  white-space: nowrap;\n}\n\n.label .muted-text {\n  color: var(--tw-fg);\n  opacity: 0.6;\n}\n\n/* --- Proof panel --- */\n\n.panel-wrapper {\n  display: grid;\n  grid-template-rows: 0fr;\n  transition: grid-template-rows 220ms cubic-bezier(0.4, 0, 0.2, 1);\n  position: absolute;\n  top: calc(100% + 8px);\n  left: 0;\n  width: max-content;\n  min-width: 320px;\n  max-width: min(380px, 92vw);\n  z-index: 2147483000;\n}\n\n.panel-wrapper.open {\n  grid-template-rows: 1fr;\n}\n\n.panel-inner {\n  overflow: hidden;\n  min-height: 0;\n}\n\n.panel {\n  background: #0b0b0e;\n  color: #f3f3f5;\n  border-radius: 14px;\n  border: 1px solid rgba(255, 255, 255, 0.08);\n  padding: 16px;\n  opacity: 0;\n  transform: scale(0.96);\n  transform-origin: top left;\n  transition: opacity 220ms cubic-bezier(0.4, 0, 0.2, 1),\n    transform 220ms cubic-bezier(0.4, 0, 0.2, 1);\n  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);\n}\n\n.panel-wrapper.open .panel {\n  opacity: 1;\n  transform: scale(1);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .panel-wrapper,\n  .panel {\n    transition: none !important;\n  }\n}\n\n.panel-header {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 14px;\n}\n\n.panel-title {\n  font-size: 13px;\n  font-weight: 600;\n  letter-spacing: 0.01em;\n}\n\n.live-indicator {\n  display: inline-flex;\n  align-items: center;\n  gap: 6px;\n  font-size: 11px;\n  color: #6adf9a;\n  font-weight: 500;\n}\n\n.live-dot {\n  width: 6px;\n  height: 6px;\n  border-radius: 50%;\n  background: #2fbf6c;\n  box-shadow: 0 0 0 0 rgba(47, 191, 108, 0.5);\n  animation: live-pulse 2s ease-out infinite;\n}\n\n@keyframes live-pulse {\n  0% {\n    box-shadow: 0 0 0 0 rgba(47, 191, 108, 0.45);\n  }\n  70% {\n    box-shadow: 0 0 0 6px rgba(47, 191, 108, 0);\n  }\n  100% {\n    box-shadow: 0 0 0 0 rgba(47, 191, 108, 0);\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .live-dot {\n    animation: none;\n  }\n}\n\n/* stage chain */\n\n.stage-chain {\n  display: grid;\n  grid-template-columns: auto 1fr auto 1fr auto 1fr auto;\n  row-gap: 8px;\n  margin-bottom: 16px;\n}\n\n.stage-dot {\n  grid-row: 1;\n  align-self: center;\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  flex-shrink: 0;\n}\n\n.stage-track {\n  grid-row: 1;\n  align-self: center;\n  height: 2px;\n  min-width: 14px;\n}\n\n.stage-label {\n  grid-row: 2;\n  font-size: 10px;\n  text-align: center;\n  color: rgba(255, 255, 255, 0.6);\n  line-height: 1.3;\n  padding: 0 2px;\n}\n\n/* data rows */\n\n.rows {\n  display: flex;\n  flex-direction: column;\n  gap: 9px;\n  padding: 12px 0;\n  border-top: 1px solid rgba(255, 255, 255, 0.08);\n  border-bottom: 1px solid rgba(255, 255, 255, 0.08);\n}\n\n.row {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: 12px;\n}\n\n.row-label {\n  font-size: 11px;\n  color: rgba(255, 255, 255, 0.5);\n  flex-shrink: 0;\n}\n\n.row-value {\n  font-family: 'IBM Plex Mono', ui-monospace, monospace;\n  font-size: 11px;\n  color: #f3f3f5;\n  text-align: right;\n  overflow-wrap: anywhere;\n}\n\n/* footer */\n\n.panel-footer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-top: 12px;\n}\n\n.view-link {\n  font-size: 12px;\n  color: #a3b4f7;\n  text-decoration: none;\n  font-weight: 500;\n}\n\n.view-link:hover {\n  text-decoration: underline;\n}\n\n.watermark {\n  font-size: 10px;\n  color: rgba(255, 255, 255, 0.28);\n}\n\n/* skeleton */\n\n.skeleton-line {\n  height: 10px;\n  border-radius: 4px;\n  background: linear-gradient(\n    90deg,\n    rgba(255, 255, 255, 0.06) 25%,\n    rgba(255, 255, 255, 0.14) 37%,\n    rgba(255, 255, 255, 0.06) 63%\n  );\n  background-size: 400% 100%;\n  animation: shimmer 1.4s ease infinite;\n}\n\n@keyframes shimmer {\n  0% {\n    background-position: 100% 50%;\n  }\n  100% {\n    background-position: 0 50%;\n  }\n}\n\n@keyframes pulse {\n  0%, 100% {\n    opacity: 1;\n  }\n  50% {\n    opacity: 0.4;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .skeleton-line,\n  .dot-loading {\n    animation: none;\n  }\n}\n\n.error-message {\n  font-size: 12px;\n  color: rgba(255, 255, 255, 0.65);\n  padding: 8px 0 4px;\n  line-height: 1.5;\n}\n";

package/dist/theme.d.ts

@@ -0,0 +1,7 @@
+import type { ThemeMode } from './types';
+/**
+ * Walks up from the host element looking for the nearest ancestor with a
+ * non-transparent background-color to decide light vs. dark. A
+ * `data-theme` attribute on the badge itself always wins.
+ */
+export declare function detectHostTheme(el: HTMLElement): ThemeMode;