custom-elements-ts 0.0.17 → 0.2.0

package/demos/site/source-toggle/source-toggle.ts

@@ -0,0 +1,88 @@
+/**
+ * Delegates [Source] button clicks to matching <cts-source-viewer> panels.
+ */
+
+const TOGGLE_ATTR = 'data-source-toggle';
+const TARGET_ATTR = 'data-source-target';
+const OPEN_ATTR = 'open';
+const ACTIVE_CLASS = 'is-active';
+
+// Sticky-nav height plus breathing room.
+const SCROLL_OFFSET = 88;
+
+function prefersReducedMotion(): boolean {
+  return (
+    typeof window !== 'undefined' &&
+    typeof window.matchMedia === 'function' &&
+    window.matchMedia('(prefers-reduced-motion: reduce)').matches
+  );
+}
+
+function scrollPanelIntoView(panel: HTMLElement) {
+  // Wait for [open] to land before measuring the panel.
+  requestAnimationFrame(() => {
+    const top = panel.getBoundingClientRect().top + window.scrollY - SCROLL_OFFSET;
+    if (top <= window.scrollY) return;
+    window.scrollTo({
+      top,
+      behavior: prefersReducedMotion() ? 'auto' : 'smooth',
+    });
+  });
+}
+
+function findToggle(target: EventTarget | null): HTMLElement | null {
+  if (!(target instanceof Element)) return null;
+  return target.closest(`[${TOGGLE_ATTR}]`) as HTMLElement | null;
+}
+
+function syncTrigger(trigger: HTMLElement, isOpen: boolean) {
+  trigger.setAttribute('aria-expanded', isOpen ? 'true' : 'false');
+  trigger.classList.toggle(ACTIVE_CLASS, isOpen);
+}
+
+function handleClick(event: MouseEvent) {
+  const trigger = findToggle(event.target);
+  if (!trigger) return;
+
+  const targetId = trigger.getAttribute(TARGET_ATTR);
+  if (!targetId) return;
+
+  const panel = document.getElementById(targetId);
+  if (!panel) return;
+
+  event.preventDefault();
+
+  const willOpen = !panel.hasAttribute(OPEN_ATTR);
+  if (willOpen) {
+    panel.setAttribute(OPEN_ATTR, '');
+  } else {
+    panel.removeAttribute(OPEN_ATTR);
+  }
+  syncTrigger(trigger, willOpen);
+
+  // Closing should leave the user where they are.
+  if (willOpen) {
+    scrollPanelIntoView(panel);
+  }
+}
+
+function init() {
+  // Reflect any initially open panels.
+  document.querySelectorAll<HTMLElement>(`[${TOGGLE_ATTR}]`).forEach((trigger) => {
+    const targetId = trigger.getAttribute(TARGET_ATTR);
+    if (!targetId) return;
+    const panel = document.getElementById(targetId);
+    if (!panel) return;
+    syncTrigger(trigger, panel.hasAttribute(OPEN_ATTR));
+  });
+
+  document.addEventListener('click', handleClick);
+}
+
+if (typeof document !== 'undefined') {
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', init, { once: true });
+  } else {
+    init();
+  }
+}

package/demos/site/source-viewer/source-viewer.element.scss

@@ -0,0 +1,292 @@
+/* ─────────────────────────────────────────────────────────────
+   cts-source-viewer
+   Collapsible inline source panel for playground examples.
+   ───────────────────────────────────────────────────────────── */
+
+:host {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 360ms cubic-bezier(0.22, 1, 0.36, 1);
+  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular,
+               Menlo, Consolas, "Courier New", monospace;
+}
+
+:host([open]) {
+  grid-template-rows: 1fr;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.viewer {
+  overflow: hidden;
+  min-height: 0;
+  visibility: hidden;
+  pointer-events: none;
+  border-top: 1px solid rgba(255, 255, 255, 0.06);
+  background:
+    radial-gradient(420px 200px at 0% 0%,
+                    rgba(49, 120, 198, 0.06) 0%,
+                    transparent 70%),
+    linear-gradient(180deg, #0d1118 0%, #0a0d13 100%);
+  transition: visibility 0s linear 360ms;
+}
+
+:host([open]) .viewer {
+  visibility: visible;
+  pointer-events: auto;
+  transition-delay: 0s;
+}
+
+/* ── Top bar: kicker + file tabs ─────────────────────────── */
+
+.bar {
+  display: flex;
+  align-items: stretch;
+  gap: 4px;
+  padding: 0 14px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
+  background: linear-gradient(180deg,
+              rgba(255, 255, 255, 0.02) 0%,
+              rgba(255, 255, 255, 0)    100%);
+  overflow-x: auto;
+  scrollbar-width: none;
+
+  &::-webkit-scrollbar { display: none; }
+}
+
+.kicker {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 14px 0 4px;
+  margin-right: 4px;
+  border-right: 1px solid rgba(255, 255, 255, 0.05);
+  font-size: 11px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: rgba(255, 255, 255, 0.4);
+  white-space: nowrap;
+  align-self: center;
+  height: 30px;
+}
+.kicker-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 1px;
+  background: #4189d6;
+  box-shadow: 0 0 8px rgba(65, 137, 214, 0.6);
+}
+
+.tabs {
+  display: inline-flex;
+  align-items: stretch;
+  gap: 0;
+}
+
+.tab {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  padding: 10px 12px;
+  background: transparent;
+  border: 0;
+  border-bottom: 2px solid transparent;
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.45);
+  cursor: pointer;
+  white-space: nowrap;
+  transition: color 150ms ease, border-color 150ms ease, background 150ms ease;
+
+  &:hover {
+    color: rgba(255, 255, 255, 0.82);
+    background: rgba(255, 255, 255, 0.02);
+  }
+
+  &:focus-visible {
+    outline: 2px solid #4189d6;
+    outline-offset: -2px;
+    border-radius: 2px;
+  }
+
+  &.is-active {
+    color: #9cc0eb;
+    border-bottom-color: #4189d6;
+    background: rgba(65, 137, 214, 0.04);
+  }
+}
+
+.single {
+  display: inline-flex;
+  align-items: center;
+  padding: 10px 12px;
+  font-size: 12px;
+  font-weight: 500;
+  color: #9cc0eb;
+  white-space: nowrap;
+}
+
+.empty {
+  margin: 0;
+  padding: 16px 22px;
+  font-size: 12.5px;
+  color: rgba(255, 255, 255, 0.5);
+}
+.empty code {
+  padding: 1px 6px;
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: 2px;
+  background: rgba(255, 255, 255, 0.025);
+  color: #9cc0eb;
+}
+
+/* ── Code body ───────────────────────────────────────────── */
+
+.body {
+  margin: 0;
+  padding: 22px 26px 26px;
+  background: transparent;
+  color: #d6dce5;
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 1.65;
+  overflow: auto;
+  max-height: 460px;
+  white-space: pre;
+  -webkit-font-smoothing: antialiased;
+
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.10) transparent;
+
+  &::-webkit-scrollbar { width: 8px; height: 8px; }
+  &::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.10);
+    border-radius: 2px;
+  }
+  &::-webkit-scrollbar-track { background: transparent; }
+
+  &:focus { outline: none; }
+  &:focus-visible {
+    outline: 2px solid #4189d6;
+    outline-offset: -2px;
+  }
+}
+
+.body code {
+  background: transparent;
+  font-family: inherit;
+  color: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+@media (min-width: 980px) {
+  .body {
+    font-size: 13.5px;
+    padding: 26px 32px 30px;
+    max-height: 540px;
+  }
+}
+
+/* Narrow viewports: preserve tab space and hint at overflow. */
+@media (max-width: 640px) {
+  .bar {
+    padding: 0 10px;
+    mask-image: linear-gradient(to right,
+                                black calc(100% - 22px),
+                                transparent 100%);
+    -webkit-mask-image: linear-gradient(to right,
+                                        black calc(100% - 22px),
+                                        transparent 100%);
+  }
+  .kicker {
+    padding: 0 10px 0 4px;
+    margin-right: 2px;
+    font-size: 0; /* collapse text, keep the dot */
+  }
+  .tab,
+  .single {
+    padding: 10px 10px;
+    font-size: 11.5px;
+  }
+  .body {
+    padding: 18px 18px 22px;
+    font-size: 12.5px;
+    max-height: 380px;
+  }
+}
+
+/* ── Prism token theme — kept in sync with cts-code-example ── */
+
+.token {
+  &.comment,
+  &.prolog,
+  &.doctype,
+  &.cdata {
+    color: #6e7681;
+    font-style: italic;
+  }
+
+  &.punctuation { color: #c9d1d9; }
+
+  &.property,
+  &.tag,
+  &.attr-name { color: #9cdcfe; }
+
+  &.keyword,
+  &.boolean { color: #4189d6; }
+
+  &.class-name { color: #4ec9b0; }
+
+  &.constant,
+  &.symbol { color: #4189d6; }
+
+  &.number { color: #b5cea8; }
+
+  &.string,
+  &.char,
+  &.attr-value,
+  &.builtin,
+  &.inserted { color: #ce9178; }
+
+  &.selector { color: #d7ba7d; }
+
+  &.variable { color: #d6dce5; }
+
+  &.operator,
+  &.entity { color: #d6dce5; }
+
+  &.url {
+    color: #4189d6;
+    text-decoration: underline;
+  }
+
+  &.atrule { color: #c586c0; }
+
+  &.function { color: #dcdcaa; }
+
+  &.regex { color: #d16969; }
+
+  &.important {
+    color: #f47067;
+    font-weight: 600;
+  }
+
+  &.bold { font-weight: 600; }
+  &.italic { font-style: italic; }
+  &.deleted { color: #f47067; }
+}
+
+.namespace { opacity: .65; }
+
+.language-css .token.string,
+.style .token.string {
+  color: #ce9178;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :host { transition: none; }
+}

package/demos/site/source-viewer/source-viewer.element.ts

@@ -0,0 +1,138 @@
+import { CustomElement, Prop, State, TemplateResult, html } from 'custom-elements-ts';
+
+import { SOURCES, SourceFile } from './sources.generated';
+
+declare const Prism: {
+  highlight(code: string, grammar: unknown): string;
+  languages: {
+    typescript: unknown;
+    javascript: unknown;
+  };
+};
+
+/**
+ * Inline source viewer for site playgrounds.
+ */
+@CustomElement({
+  tag: 'cts-source-viewer',
+  styleUrl: './source-viewer.element.scss',
+})
+export class SourceViewerElement extends HTMLElement {
+  /** Key into the `SOURCES` map. e.g. `counter`, `todo-dashboard`. */
+  @Prop() slug = '';
+
+  /** Index of the file shown in the body. Reset whenever `slug` changes. */
+  @State() activeIndex = 0;
+
+  // Avoid re-tokenizing unchanged source.
+  private files: SourceFile[] = [];
+  private highlighted: string[] = [];
+  private cachedFor = '\0';
+
+  // Raw node insertion avoids lowercasing `.innerHTML` in parsed templates.
+  private bodyNode: HTMLPreElement | null = null;
+  private codeNode: HTMLElement | null = null;
+  private renderedHtml = '';
+
+  render(): TemplateResult {
+    if (this.cachedFor !== this.slug) {
+      this.recompute();
+      this.cachedFor = this.slug;
+    }
+
+    if (!this.files.length) {
+      return html`
+        <div class="viewer">
+          <p class="empty">Source unavailable for <code>${this.slug}</code>.</p>
+        </div>
+      `;
+    }
+
+    const showTabs = this.files.length > 1;
+    const active = this.highlighted[this.activeIndex] ?? '';
+
+    if (!this.bodyNode || !this.codeNode) {
+      this.codeNode = document.createElement('code');
+      this.bodyNode = document.createElement('pre');
+      this.bodyNode.className = 'body';
+      this.bodyNode.tabIndex = 0;
+      this.bodyNode.appendChild(this.codeNode);
+    }
+    if (this.renderedHtml !== active) {
+      this.codeNode.innerHTML = active;
+      this.renderedHtml = active;
+    }
+
+    return html`
+      <div class="viewer">
+        <div class="bar">
+          <span class="kicker">
+            <span class="kicker-dot" aria-hidden="true"></span>
+            inline source
+          </span>
+
+          ${showTabs
+            ? html`
+                <div class="tabs" role="tablist" aria-label="Source files">
+                  ${this.files.map((file, index) => {
+                    const isActive = index === this.activeIndex;
+                    return html`
+                      <button
+                        class=${isActive ? 'tab is-active' : 'tab'}
+                        role="tab"
+                        type="button"
+                        aria-selected=${isActive ? 'true' : 'false'}
+                        @click=${() => this.selectTab(index)}
+                      >
+                        ${file.name}
+                      </button>
+                    `;
+                  })}
+                </div>
+              `
+            : html`<span class="single">${this.files[0]?.name ?? ''}</span>`}
+        </div>
+
+        ${this.bodyNode}
+      </div>
+    `;
+  }
+
+  private selectTab(index: number) {
+    if (index === this.activeIndex) return;
+    this.activeIndex = index;
+    // Center the active tab when the bar is overflowing on narrow widths.
+    requestAnimationFrame(() => {
+      const tab = this.shadowRoot?.querySelectorAll<HTMLElement>('.tab')[index];
+      tab?.scrollIntoView({ inline: 'center', block: 'nearest', behavior: 'smooth' });
+    });
+  }
+
+  private recompute() {
+    const files = SOURCES[this.slug] ?? [];
+    this.files = files;
+
+    const grammar =
+      typeof Prism !== 'undefined'
+        ? (Prism.languages.typescript ?? Prism.languages.javascript)
+        : null;
+
+    this.highlighted = files.map((file) =>
+      grammar ? Prism.highlight(file.source, grammar) : escapeHtml(file.source)
+    );
+
+    if (this.activeIndex >= files.length) {
+      this.activeIndex = 0;
+    }
+  }
+}
+
+const ENTITY_MAP: Record<string, string> = {
+  '&': '&amp;',
+  '<': '&lt;',
+  '>': '&gt;',
+};
+
+function escapeHtml(value: string): string {
+  return value.replace(/[&<>]/g, (char) => ENTITY_MAP[char] ?? char);
+}

package/demos/site/source-viewer/sources.generated.ts

@@ -0,0 +1,11 @@
+// Stub committed so the IDE / type checker has something to resolve.
+// The real, populated module is emitted by `tools/generate-sources.js`
+// into `.tmp/site/source-viewer/sources.generated.ts` at build/dev time
+// and is what the bundler actually picks up.
+
+export interface SourceFile {
+  name: string;
+  source: string;
+}
+
+export const SOURCES: Record<string, SourceFile[]> = {};