custom-elements-ts 0.0.17 → 0.2.0

package/demos/site/code-example/code-example.element.ts

@@ -0,0 +1,88 @@
+import { CustomElement } from 'custom-elements-ts';
+
+declare const Prism: {
+  highlight(code: string, grammar: unknown): string;
+  languages: {
+    typescript: unknown;
+    javascript: unknown;
+  };
+};
+
+@CustomElement({
+  tag: 'cts-code-example',
+  template: '<div id="code"></div>',
+  styleUrl: './code-example.element.scss',
+})
+export class CodeExampleElement extends HTMLElement {
+  // Mirrors the real cts-message element rendered in the install card on this
+  // page. Keeping these in sync is intentional: the source you see is the
+  // source that runs the toast you triggered.
+  private readonly source = `import {
+  CustomElement,
+  Prop,
+  Listen,
+  Dispatch,
+  DispatchEmitter,
+} from 'custom-elements-ts';
+
+@CustomElement({
+  tag: 'cts-message',
+  template: \`
+    <div class="row" role="button" tabindex="0">
+      <span class="prompt" aria-hidden="true">$</span>
+      <code class="cmd"></code>
+    </div>
+  \`,
+  styleUrl: './message.element.scss',
+})
+export class MessageElement extends HTMLElement {
+  @Prop() message!: string;
+
+  // Bubbling, composed CustomEvent — the host page can listen on
+  // any ancestor (including <cts-toast>) without piercing shadow DOM.
+  @Dispatch('cts:toast') toast!: DispatchEmitter;
+
+  @Listen('click')
+  async handleClick() {
+    const ok = await this.copy(this.message);
+    this.toast.emit({
+      bubbles: true,
+      composed: true,
+      detail: ok
+        ? { title: 'Copied to clipboard', message: this.message, kind: 'success' }
+        : { title: "Couldn't copy", message: 'Copy manually.', kind: 'error' },
+    });
+  }
+
+  connectedCallback() {
+    this.shadowRoot!.querySelector('.cmd')!.textContent = this.message;
+  }
+
+  private async copy(text: string): Promise<boolean> {
+    try {
+      await navigator.clipboard.writeText(text);
+      return true;
+    } catch {
+      return false;
+    }
+  }
+}
+
+// Drop it anywhere — React, Vue, Svelte, plain HTML — it just works:
+<cts-message message="npm install custom-elements-ts"></cts-message>`;
+
+  private code = '';
+
+  constructor() {
+    super();
+    const grammar = Prism.languages.typescript ?? Prism.languages.javascript;
+    this.code = Prism.highlight(this.source, grammar);
+  }
+
+  connectedCallback() {
+    const code = this.shadowRoot?.querySelector('#code');
+    if (code) {
+      code.innerHTML = `<pre><code>${this.code}</code></pre>`;
+    }
+  }
+}

package/demos/site/event-log/event-log.element.scss

@@ -0,0 +1,179 @@
+/* ─────────────────────────────────────────────────────────────
+   <cts-event-log>
+   Sits beside live demos on the showcase page; renders the most
+   recent CustomEvents the demo has dispatched. Tokens mirror the
+   site's design system (TS-blue accent, sharp 2–4px radii).
+   ───────────────────────────────────────────────────────────── */
+
+:host {
+  /* Mirror the site tokens so we don't rely on inheritance through
+     the shadow boundary. */
+  --bg: #0a0c10;
+  --bg-elev-1: #11141a;
+  --bg-elev-2: #161a22;
+  --line: rgba(255, 255, 255, 0.06);
+  --line-strong: rgba(255, 255, 255, 0.10);
+  --fg: #e6ecf3;
+  --fg-muted: #97a1ad;
+  --fg-subtle: #5b6370;
+  --accent: #3178c6;
+  --accent-bright: #4189d6;
+  --accent-fg: #9cc0eb;
+  --accent-soft: rgba(49, 120, 198, 0.14);
+  --accent-line: rgba(49, 120, 198, 0.42);
+
+  --radius-xs: 2px;
+  --radius-sm: 2px;
+  --radius-md: 3px;
+
+  --ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --dur-fast: 140ms;
+  --dur: 220ms;
+
+  display: flex;
+  flex-direction: column;
+  min-height: 240px;
+  padding: 14px 16px 16px;
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-md);
+  background:
+    radial-gradient(140% 100% at 0% 0%, rgba(49, 120, 198, 0.05) 0%, transparent 60%),
+    linear-gradient(180deg, var(--bg-elev-1) 0%, #0f131b 100%);
+  color: var(--fg);
+  font-family: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system,
+               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+* { box-sizing: border-box; }
+
+/* ── Header ─────────────────────────────────────────────── */
+
+.head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 10px;
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--line);
+}
+
+.dot {
+  width: 6px;
+  height: 6px;
+  background: var(--accent);
+  box-shadow: 0 0 10px var(--accent-line);
+}
+
+.label {
+  flex: 1 1 auto;
+  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular,
+               Menlo, Consolas, "Courier New", monospace;
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--fg-muted);
+}
+
+.count {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 22px;
+  height: 18px;
+  padding: 0 6px;
+  border: 1px solid var(--line-strong);
+  border-radius: var(--radius-xs);
+  background: rgba(255, 255, 255, 0.02);
+  color: var(--accent-fg);
+  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular,
+               Menlo, Consolas, "Courier New", monospace;
+  font-size: 10px;
+  font-weight: 600;
+  font-variant-numeric: tabular-nums;
+}
+
+/* ── Empty ───────────────────────────────────────────── */
+
+.empty {
+  margin: auto 0;
+  padding: 12px 4px;
+  color: var(--fg-subtle);
+  font-size: 12.5px;
+  line-height: 1.55;
+  text-wrap: balance;
+}
+
+/* ── List ───────────────────────────────────────────── */
+
+.list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.entry {
+  position: relative;
+  display: grid;
+  grid-template-columns: auto auto 1fr;
+  align-items: center;
+  gap: 10px;
+  padding: 7px 8px;
+  border: 1px solid var(--line);
+  border-radius: var(--radius-xs);
+  background: rgba(255, 255, 255, 0.015);
+  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular,
+               Menlo, Consolas, "Courier New", monospace;
+  font-size: 11.5px;
+  font-variant-numeric: tabular-nums;
+  animation: entry-in 220ms var(--ease) both;
+}
+
+.entry::before {
+  content: "";
+  position: absolute;
+  left: -1px;
+  top: -1px;
+  bottom: -1px;
+  width: 2px;
+  background: var(--accent);
+  opacity: 0.85;
+}
+
+.entry-time {
+  color: var(--fg-subtle);
+  letter-spacing: 0.02em;
+}
+
+.entry-name {
+  color: var(--accent-fg);
+  font-weight: 500;
+  white-space: nowrap;
+}
+
+.entry-detail {
+  min-width: 0;
+  color: var(--fg-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+@keyframes entry-in {
+  from {
+    opacity: 0;
+    transform: translateY(-3px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .entry { animation: none; }
+}

package/demos/site/event-log/event-log.element.ts

@@ -0,0 +1,123 @@
+import { CustomElement, Prop, State, TemplateResult, Watch, html } from 'custom-elements-ts';
+
+interface LogEntry {
+  id: number;
+  name: string;
+  detail: string;
+  time: string;
+}
+
+const MAX_ENTRIES = 6;
+
+/**
+ * Live event log for bubbling CustomEvents on the showcase page.
+ */
+@CustomElement({
+  tag: 'cts-event-log',
+  styleUrl: './event-log.element.scss',
+})
+export class EventLogElement extends HTMLElement {
+  /** Comma-separated list of event names to subscribe to on `document`. */
+  @Prop() events = '';
+  /** Optional human label rendered above the list. */
+  @Prop() label = 'Event log';
+  /** Optional empty-state copy. */
+  @Prop() empty = 'Interact with the component above to see events stream in.';
+
+  @State() entries: LogEntry[] = [];
+
+  private subscriptions: Array<{ name: string; handler: EventListener }> = [];
+  private nextId = 1;
+
+  connectedCallback() {
+    this.bind();
+  }
+
+  disconnectedCallback() {
+    this.unbind();
+  }
+
+  @Watch('events')
+  rebind() {
+    this.unbind();
+    this.bind();
+  }
+
+  render(): TemplateResult {
+    const entries = this.entries;
+    return html`
+      <header class="head">
+        <span class="dot" aria-hidden="true"></span>
+        <span class="label">${this.label}</span>
+        <span class="count" aria-hidden="true">${entries.length}</span>
+      </header>
+
+      ${entries.length === 0
+        ? html`<p class="empty">${this.empty}</p>`
+        : html`<ol class="list" aria-live="polite">
+            ${entries.map(
+              (entry) => html`
+                <li class="entry" data-id=${entry.id}>
+                  <span class="entry-time">${entry.time}</span>
+                  <span class="entry-name">${entry.name}</span>
+                  <span class="entry-detail">${entry.detail}</span>
+                </li>
+              `
+            )}
+          </ol>`}
+    `;
+  }
+
+  private bind() {
+    const names = this.events
+      .split(',')
+      .map((name) => name.trim())
+      .filter(Boolean);
+
+    for (const name of names) {
+      const handler: EventListener = (event) => this.record(name, event as CustomEvent);
+      document.addEventListener(name, handler);
+      this.subscriptions.push({ name, handler });
+    }
+  }
+
+  private unbind() {
+    for (const { name, handler } of this.subscriptions) {
+      document.removeEventListener(name, handler);
+    }
+    this.subscriptions = [];
+  }
+
+  private record(name: string, event: CustomEvent) {
+    const entry: LogEntry = {
+      id: this.nextId++,
+      name,
+      detail: this.formatDetail(event.detail),
+      time: this.timestamp(),
+    };
+    // Newest first, capped to MAX_ENTRIES so the panel never grows unbounded.
+    this.entries = [entry, ...this.entries].slice(0, MAX_ENTRIES);
+  }
+
+  private formatDetail(detail: unknown): string {
+    if (detail === null || detail === undefined) return '—';
+    if (typeof detail === 'string') return detail;
+    if (typeof detail === 'number' || typeof detail === 'boolean') {
+      return String(detail);
+    }
+    try {
+      return JSON.stringify(detail);
+    } catch {
+      return String(detail);
+    }
+  }
+
+  private timestamp(): string {
+    const now = new Date();
+    const pad = (value: number, size = 2) => String(value).padStart(size, '0');
+    return `${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}.${pad(
+      now.getMilliseconds(),
+      3
+    )}`;
+  }
+}

package/demos/site/favicon.svg

@@ -0,0 +1,14 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">
+  <defs>
+    <linearGradient id="bg" x1="0" y1="0" x2="0" y2="32" gradientUnits="userSpaceOnUse">
+      <stop offset="0" stop-color="#1c2230"/>
+      <stop offset="1" stop-color="#0c0f15"/>
+    </linearGradient>
+  </defs>
+  <rect width="32" height="32" rx="5" fill="url(#bg)"/>
+  <g fill="none" stroke="#9cc0eb" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
+    <path d="M12 11l-5 5 5 5"/>
+    <path d="M20 11l5 5-5 5"/>
+    <path d="M19 8l-6 16"/>
+  </g>
+</svg>