npm - custom-elements-ts - Versions diffs - 0.0.17 → 0.2.0 - Mend

custom-elements-ts 0.0.17 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (82) hide show

package/.eslintrc.json +47 -0
package/.github/workflows/ci.yml +49 -0
package/.prettierrc +7 -0
package/LICENSE +20 -0
package/README.md +279 -37
package/assets/readme-header.png +0 -0
package/assets/social-preview.jpg +0 -0
package/demos/counter/counter.element.html +1 -0
package/demos/counter/counter.element.scss +234 -0
package/demos/counter/counter.element.ts +68 -0
package/demos/counter/index.html +205 -0
package/demos/counter/index.ts +1 -0
package/demos/site/code-example/code-example.element.scss +168 -0
package/demos/site/code-example/code-example.element.ts +88 -0
package/demos/site/event-log/event-log.element.scss +179 -0
package/demos/site/event-log/event-log.element.ts +123 -0
package/demos/site/favicon.svg +14 -0
package/demos/site/index.html +368 -0
package/demos/site/index.ts +19 -0
package/demos/site/llms.txt +53 -0
package/demos/site/message/message.element.scss +75 -0
package/demos/site/message/message.element.ts +76 -0
package/demos/site/og-image.png +0 -0
package/demos/site/scroll-restoration.ts +28 -0
package/demos/site/source-toggle/source-toggle.ts +88 -0
package/demos/site/source-viewer/source-viewer.element.scss +292 -0
package/demos/site/source-viewer/source-viewer.element.ts +138 -0
package/demos/site/source-viewer/sources.generated.ts +11 -0
package/demos/site/styles/site.css +1135 -0
package/demos/site/styles/tokens.css +56 -0
package/demos/site/toast/toast.element.scss +110 -0
package/demos/site/toast/toast.element.ts +63 -0
package/demos/todo-dashboard/index.html +141 -0
package/demos/todo-dashboard/index.ts +4 -0
package/demos/todo-dashboard/todo-dashboard.element.scss +1150 -0
package/demos/todo-dashboard/todo-dashboard.element.ts +333 -0
package/demos/todo-dashboard/todo-filters.element.ts +54 -0
package/demos/todo-dashboard/todo-item.element.ts +127 -0
package/demos/todo-dashboard/todo-stats.element.ts +189 -0
package/package.json +73 -24
package/src/custom-element.ts +206 -0
package/src/index.ts +8 -0
package/src/listen.ts +70 -0
package/src/prop.ts +92 -0
package/src/signal.ts +66 -0
package/src/state.ts +141 -0
package/src/template-runtime.ts +783 -0
package/src/toggle.ts +66 -0
package/src/tsconfig.json +24 -0
package/src/util.ts +33 -0
package/src/watch.ts +14 -0
package/tests/basic.spec.ts +70 -0
package/tests/custom-element.spec.ts +77 -0
package/tests/dispatch.spec.ts +52 -0
package/tests/init.spec.ts +94 -0
package/tests/listen.spec.ts +118 -0
package/tests/map-shallow-state.spec.ts +184 -0
package/tests/prop.spec.ts +118 -0
package/tests/signal.spec.ts +117 -0
package/tests/templating-runtime.spec.ts +575 -0
package/tests/toggle.spec.ts +92 -0
package/tests/watch.spec.ts +183 -0
package/tools/build.js +128 -0
package/tools/bundle.js +167 -0
package/tools/generate-sources.js +76 -0
package/tools/rollup-config.js +70 -0
package/tools/start.js +194 -0
package/tsconfig.json +38 -0
package/vite.config.mts +30 -0
package/bundles/custom-elements-ts.umd.js +0 -359
package/bundles/custom-elements-ts.umd.js.map +0 -1
package/esm2015/custom-elements-ts.js +0 -283
package/esm2015/custom-elements-ts.js.map +0 -1
package/esm5/custom-element.d.ts +0 -12
package/esm5/custom-elements-ts.js +0 -344
package/esm5/custom-elements-ts.js.map +0 -1
package/esm5/index.d.ts +0 -5
package/esm5/listen.d.ts +0 -17
package/esm5/prop.d.ts +0 -2
package/esm5/toggle.d.ts +0 -1
package/esm5/util.d.ts +0 -4
package/esm5/watch.d.ts +0 -1

package/demos/site/index.html ADDED Viewed

@@ -0,0 +1,368 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="theme-color" content="#0a0c10">
+    <meta name="color-scheme" content="dark">
+    <title>custom-elements-ts — native Web Components in TypeScript</title>
+    <meta name="description" content="Author native Web Components in TypeScript with a tiny set of decorators — @CustomElement, @Prop, @State, @Watch, @Listen, @Dispatch — and a 3 kB runtime. Zero dependencies. Framework-free.">
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website">
+    <meta property="og:site_name" content="custom-elements-ts">
+    <meta property="og:url" content="https://geocine.github.io/custom-elements-ts/">
+    <meta property="og:title" content="custom-elements-ts — Native Web Components in TypeScript">
+    <meta property="og:description" content="A 3 kB decorator-based runtime for authoring standards-compliant custom elements in TypeScript. Zero dependencies. Framework-free.">
+    <meta property="og:image" content="https://geocine.github.io/custom-elements-ts/og-image.png">
+    <meta property="og:image:secure_url" content="https://geocine.github.io/custom-elements-ts/og-image.png">
+    <meta property="og:image:type" content="image/png">
+    <meta property="og:image:width" content="1200">
+    <meta property="og:image:height" content="630">
+    <meta property="og:image:alt" content="custom-elements-ts — Native Web Components, written in TypeScript. Sample code window showing a @CustomElement decorator.">
+    <!-- Twitter / X -->
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:title" content="custom-elements-ts — Native Web Components in TypeScript">
+    <meta name="twitter:description" content="A 3 kB decorator-based runtime for authoring standards-compliant custom elements in TypeScript. Zero dependencies. Framework-free.">
+    <meta name="twitter:image" content="https://geocine.github.io/custom-elements-ts/og-image.png">
+    <meta name="twitter:image:alt" content="custom-elements-ts — Native Web Components, written in TypeScript.">
+    <link rel="canonical" href="https://geocine.github.io/custom-elements-ts/">
+    <link rel="icon" type="image/svg+xml" href="favicon.svg">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&display=swap">
+    <link rel="stylesheet" href="styles/site.css">
+  </head>
+  <body>
+    <a class="skip-link" href="#main">Skip to content</a>
+    <!-- ─── Top navigation ──────────────────────────────────────── -->
+    <header class="nav">
+      <div class="container nav__inner">
+        <a class="brand" href="#">
+          <span class="brand__mark" aria-hidden="true">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.25" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M8.5 7.5 4 12l4.5 4.5"/>
+              <path d="M15.5 7.5 20 12l-4.5 4.5"/>
+              <path d="M14 5l-4 14"/>
+            </svg>
+          </span>
+          <span class="brand__name">custom-elements<span class="dim">-ts</span></span>
+        </a>
+        <nav class="nav__links" aria-label="Primary">
+          <a class="nav__link" href="#showcase">Example</a>
+          <a class="nav__link" href="#live">Live demos</a>
+          <a class="nav__link" href="#api">Decorators</a>
+          <a class="nav__link" href="https://github.com/geocine/custom-elements-ts#readme">Docs</a>
+          <a class="nav__link" href="https://www.npmjs.com/package/custom-elements-ts">npm</a>
+        </nav>
+        <a class="nav__cta" href="https://github.com/geocine/custom-elements-ts" aria-label="View source on GitHub">
+          <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M8 0C3.58 0 0 3.58 0 8a8 8 0 0 0 5.47 7.59c.4.07.55-.17.55-.38v-1.33c-2.23.49-2.7-1.07-2.7-1.07-.36-.92-.89-1.17-.89-1.17-.73-.5.05-.49.05-.49.81.06 1.24.83 1.24.83.72 1.23 1.88.88 2.34.67.07-.52.28-.88.51-1.08-1.78-.2-3.65-.89-3.65-3.96 0-.87.31-1.59.83-2.15-.08-.2-.36-1.02.08-2.13 0 0 .67-.21 2.2.82a7.6 7.6 0 0 1 4 0c1.53-1.04 2.2-.82 2.2-.82.44 1.11.16 1.93.08 2.13.52.56.83 1.28.83 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48v2.19c0 .21.15.46.55.38A8 8 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
+          <span>GitHub</span>
+        </a>
+      </div>
+    </header>
+    <main id="main">
+      <!-- ─── Hero ────────────────────────────────────────────── -->
+      <section class="hero">
+        <div class="container">
+          <div class="hero__pill" role="status">
+            <span class="badge">v0.2.0</span>
+            <span>TypeScript&nbsp;5</span>
+            <span class="sep">·</span>
+            <span>MIT</span>
+            <span class="sep">·</span>
+            <span>0 deps</span>
+          </div>
+          <h1 class="hero__title">
+            Native Web Components, written in <em class="em">TypeScript</em>.
+          </h1>
+          <p class="hero__lede">
+            <strong>custom-elements-ts</strong> is a tiny set of decorators —
+            <code>@CustomElement</code>, <code>@Prop</code>, <code>@State</code>,
+            <code>@Watch</code>, <code>@Listen</code>, <code>@Dispatch</code>,
+            <code>@Toggle</code> — plus a 3&nbsp;kB <code>html</code>/<code>render()</code>
+            runtime that lets you author standards-compliant custom elements
+            without a framework.
+          </p>
+          <div class="hero__actions">
+            <a class="btn btn--primary" href="#live">
+              See it in action
+              <svg class="arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
+            </a>
+            <a class="btn btn--ghost" href="https://github.com/geocine/custom-elements-ts">
+              <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" width="14" height="14"><path d="M8 0C3.58 0 0 3.58 0 8a8 8 0 0 0 5.47 7.59c.4.07.55-.17.55-.38v-1.33c-2.23.49-2.7-1.07-2.7-1.07-.36-.92-.89-1.17-.89-1.17-.73-.5.05-.49.05-.49.81.06 1.24.83 1.24.83.72 1.23 1.88.88 2.34.67.07-.52.28-.88.51-1.08-1.78-.2-3.65-.89-3.65-3.96 0-.87.31-1.59.83-2.15-.08-.2-.36-1.02.08-2.13 0 0 .67-.21 2.2.82a7.6 7.6 0 0 1 4 0c1.53-1.04 2.2-.82 2.2-.82.44 1.11.16 1.93.08 2.13.52.56.83 1.28.83 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48v2.19c0 .21.15.46.55.38A8 8 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
+              Source on GitHub
+            </a>
+          </div>
+          <div class="hero__meta">
+            <span><span class="ok">●</span>&nbsp; Works with any framework — or none</span>
+            <span><span class="ok">●</span>&nbsp; ~3 kB min+gzip runtime</span>
+            <span><span class="ok">●</span>&nbsp; Shadow DOM &amp; light DOM</span>
+          </div>
+        </div>
+      </section>
+      <!-- ─── Showcase: code preview + install ────────────────── -->
+      <section class="showcase" id="showcase">
+        <div class="container">
+          <div class="showcase__grid">
+            <article class="window" aria-label="message.element.ts source">
+              <header class="window__bar">
+                <span class="window__dots" aria-hidden="true">
+                  <span></span><span></span><span></span>
+                </span>
+                <span class="window__title">
+                  message.<span class="accent">element.ts</span>
+                </span>
+              </header>
+              <div class="window__body">
+                <cts-code-example></cts-code-example>
+              </div>
+            </article>
+            <aside class="side-card" aria-label="Install custom-elements-ts">
+              <div class="side-card__head">
+                <div class="side-card__kicker">Install · live</div>
+                <h2 class="side-card__title">Click the pill — see the source.</h2>
+                <p class="side-card__sub">
+                  The component on the left <em>is</em> the component below.
+                  Click to copy, watch <code>cts:toast</code> fire.
+                </p>
+              </div>
+              <cts-message message="npm install custom-elements-ts"></cts-message>
+              <ul class="checks">
+                <li>
+                  <span class="check" aria-hidden="true">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
+                  </span>
+                  <span><strong>Zero dependencies.</strong> Nothing hides under the hood.</span>
+                </li>
+                <li>
+                  <span class="check" aria-hidden="true">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
+                  </span>
+                  <span><strong>Framework-free.</strong> Drop the same element into React, Vue, Svelte, or plain HTML.</span>
+                </li>
+                <li>
+                  <span class="check" aria-hidden="true">
+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
+                  </span>
+                  <span><strong>Tiny surface area.</strong> Seven decorators is the whole API.</span>
+                </li>
+              </ul>
+              <div class="side-card__foot">
+                <a href="https://github.com/geocine/custom-elements-ts#readme">
+                  Read the full guide
+                  <svg class="arrow" viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 12h14M13 5l7 7-7 7"/></svg>
+                </a>
+              </div>
+            </aside>
+          </div>
+        </div>
+      </section>
+      <!-- ─── Live demos ─────────────────────────────────────── -->
+      <section class="live" id="live">
+        <div class="container">
+          <div class="live__head">
+            <div>
+              <span class="eyebrow"><span class="dot"></span> Live in your browser</span>
+              <h2 class="live__title">Two demos. Real components. Real events.</h2>
+            </div>
+            <p class="live__lede">
+              Each demo below is a custom element built with the same library you'd
+              <code>npm install</code>. The event log on the side is itself a
+              <code>render()</code> + <code>@State()</code> component — it subscribes
+              to the bubbling, composed <code>CustomEvent</code>s the demo dispatches.
+            </p>
+          </div>
+          <!-- Counter playground -->
+          <article class="playground playground--counter" aria-labelledby="demo-counter-title">
+            <header class="playground__head">
+              <div>
+                <span class="playground__kicker">Demo · 01</span>
+                <h3 id="demo-counter-title" class="playground__title">Counter — <code>@State()</code> + <code>@Dispatch()</code></h3>
+                <p class="playground__sub">
+                  A single-button card that owns an internal count, re-renders via the
+                  <code>html</code> tagged template, and fires <code>counter.change</code>
+                  whenever its <code>@State()</code> changes.
+                </p>
+              </div>
+              <div class="playground__actions">
+                <button class="playground__btn" type="button"
+                        data-source-toggle data-source-target="src-counter"
+                        aria-controls="src-counter" aria-expanded="false">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" width="14" height="14"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
+                  <span>Source</span>
+                  <svg class="playground__btn-caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" width="12" height="12"><polyline points="6 9 12 15 18 9"/></svg>
+                </button>
+                <a class="playground__btn playground__btn--ghost"
+                   href="https://github.com/geocine/custom-elements-ts/blob/master/demos/counter/counter.element.ts"
+                   target="_blank" rel="noopener" aria-label="View counter source on GitHub">
+                  <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" width="13" height="13"><path d="M8 0C3.58 0 0 3.58 0 8a8 8 0 0 0 5.47 7.59c.4.07.55-.17.55-.38v-1.33c-2.23.49-2.7-1.07-2.7-1.07-.36-.92-.89-1.17-.89-1.17-.73-.5.05-.49.05-.49.81.06 1.24.83 1.24.83.72 1.23 1.88.88 2.34.67.07-.52.28-.88.51-1.08-1.78-.2-3.65-.89-3.65-3.96 0-.87.31-1.59.83-2.15-.08-.2-.36-1.02.08-2.13 0 0 .67-.21 2.2.82a7.6 7.6 0 0 1 4 0c1.53-1.04 2.2-.82 2.2-.82.44 1.11.16 1.93.08 2.13.52.56.83 1.28.83 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48v2.19c0 .21.15.46.55.38A8 8 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
+                  <span>GitHub</span>
+                </a>
+              </div>
+            </header>
+            <div class="playground__body playground__body--split">
+              <div class="stage stage--counter">
+                <cts-counter></cts-counter>
+                <p class="stage__caption">
+                  Click the card. <code>@State() count</code> increments and
+                  re-renders the template; <code>@Watch('count')</code> emits
+                  the event picked up on the right.
+                </p>
+              </div>
+              <cts-event-log
+                class="playground__log"
+                label="counter.change"
+                events="counter.change"
+                empty="Click the counter to dispatch counter.change events."
+              ></cts-event-log>
+            </div>
+            <cts-source-viewer id="src-counter" slug="counter"></cts-source-viewer>
+          </article>
+          <!-- Todo dashboard playground -->
+          <article class="playground playground--todo" aria-labelledby="demo-todo-title">
+            <header class="playground__head">
+              <div>
+                <span class="playground__kicker">Demo · 02</span>
+                <h3 id="demo-todo-title" class="playground__title">Sprint board — composition, deep state, custom events</h3>
+                <p class="playground__sub">
+                  Four cooperating elements: a parent dashboard that owns the source
+                  of truth, plus child stats, filters, and item rows that talk back
+                  through bubbling, composed events. Mutate a nested array — the
+                  parent re-renders.
+                </p>
+              </div>
+              <div class="playground__actions">
+                <button class="playground__btn" type="button"
+                        data-source-toggle data-source-target="src-todo"
+                        aria-controls="src-todo" aria-expanded="false">
+                  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" width="14" height="14"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
+                  <span>Source</span>
+                  <svg class="playground__btn-caret" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" width="12" height="12"><polyline points="6 9 12 15 18 9"/></svg>
+                </button>
+                <a class="playground__btn playground__btn--ghost"
+                   href="https://github.com/geocine/custom-elements-ts/tree/master/demos/todo-dashboard"
+                   target="_blank" rel="noopener" aria-label="View todo dashboard source on GitHub">
+                  <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" width="13" height="13"><path d="M8 0C3.58 0 0 3.58 0 8a8 8 0 0 0 5.47 7.59c.4.07.55-.17.55-.38v-1.33c-2.23.49-2.7-1.07-2.7-1.07-.36-.92-.89-1.17-.89-1.17-.73-.5.05-.49.05-.49.81.06 1.24.83 1.24.83.72 1.23 1.88.88 2.34.67.07-.52.28-.88.51-1.08-1.78-.2-3.65-.89-3.65-3.96 0-.87.31-1.59.83-2.15-.08-.2-.36-1.02.08-2.13 0 0 .67-.21 2.2.82a7.6 7.6 0 0 1 4 0c1.53-1.04 2.2-.82 2.2-.82.44 1.11.16 1.93.08 2.13.52.56.83 1.28.83 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48v2.19c0 .21.15.46.55.38A8 8 0 0 0 16 8c0-4.42-3.58-8-8-8z"/></svg>
+                  <span>GitHub</span>
+                </a>
+              </div>
+            </header>
+            <div class="playground__body playground__body--split">
+              <div class="stage stage--todo">
+                <cts-todo-dashboard heading="Sprint board" compact></cts-todo-dashboard>
+              </div>
+              <cts-event-log
+                class="playground__log"
+                label="todo events"
+                events="todo.change,todo.toggle,todo.labelchange,todo.remove,filter.change,goal.change"
+                empty="Add, complete, edit, or remove a task to see events bubble up here."
+              ></cts-event-log>
+            </div>
+            <cts-source-viewer id="src-todo" slug="todo-dashboard"></cts-source-viewer>
+          </article>
+        </div>
+      </section>
+      <!-- ─── API at-a-glance ─────────────────────────────────── -->
+      <section class="api" id="api">
+        <div class="container">
+          <div class="api__head">
+            <div>
+              <span class="eyebrow"><span class="dot"></span> The API</span>
+              <h2 class="api__title">Seven decorators. That's the whole library.</h2>
+            </div>
+            <p class="api__lede">
+              Every decorator maps directly onto a built-in browser primitive —
+              attributes, properties, events, MutationObserver. No magic, no virtual DOM,
+              no compiler required.
+            </p>
+          </div>
+          <div class="api__grid">
+            <div class="api-card">
+              <div class="api-card__name">@CustomElement<span class="target">class</span></div>
+              <p class="api-card__desc">Registers the class as a native custom element with a tag, optional template, and styles.</p>
+            </div>
+            <div class="api-card">
+              <div class="api-card__name">@Prop<span class="target">property</span></div>
+              <p class="api-card__desc">Reflects a primitive between attribute and property; passes objects and arrays through untouched.</p>
+            </div>
+            <div class="api-card">
+              <div class="api-card__name">@State<span class="target">property</span></div>
+              <p class="api-card__desc">Internal reactive state for <code>render()</code> components. Deeply proxied — mutate nested arrays and objects.</p>
+            </div>
+            <div class="api-card">
+              <div class="api-card__name">@Toggle<span class="target">property</span></div>
+              <p class="api-card__desc">A boolean attribute that follows the W3C spec — present, "true", or "false".</p>
+            </div>
+            <div class="api-card">
+              <div class="api-card__name">@Watch<span class="target">method</span></div>
+              <p class="api-card__desc">Runs a method whenever a watched property changes — from either side of the bridge.</p>
+            </div>
+            <div class="api-card">
+              <div class="api-card__name">@Listen<span class="target">method</span></div>
+              <p class="api-card__desc">Wires up DOM events on the host or on any selector inside the shadow tree.</p>
+            </div>
+            <div class="api-card">
+              <div class="api-card__name">@Dispatch<span class="target">property</span></div>
+              <p class="api-card__desc">Declares a typed CustomEvent emitter — call <code>.emit()</code> to fire it with a payload.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </main>
+    <!-- ─── Footer ────────────────────────────────────────────── -->
+    <footer class="footer">
+      <div class="container footer__inner">
+        <span>MIT licensed · Maintained by Aivan Monceller &amp; contributors</span>
+        <span class="footer__links">
+          <a href="https://github.com/geocine/custom-elements-ts">GitHub</a>
+          <a href="https://www.npmjs.com/package/custom-elements-ts">npm</a>
+          <a href="https://github.com/geocine/custom-elements-ts/issues">Issues</a>
+          <a href="https://github.com/geocine/custom-elements-ts/blob/master/LICENSE">License</a>
+        </span>
+      </div>
+    </footer>
+    <!-- Toast notifications (the element subscribes to `cts:toast` document events) -->
+    <cts-toast></cts-toast>
+    <script src="//unpkg.com/prismjs@1.29.0/prism.js"></script>
+    <script src="//unpkg.com/prismjs@1.29.0/components/prism-typescript.min.js"></script>
+    <script src="//unpkg.com/@webcomponents/custom-elements/src/native-shim.js"></script>
+    <script src="//unpkg.com/@webcomponents/custom-elements/custom-elements.min.js"></script>
+    <script src="site.umd.js"></script>
+  </body>
+</html>

package/demos/site/index.ts ADDED Viewed

@@ -0,0 +1,19 @@
+// Site-only chrome / utility components.
+export * from './code-example/code-example.element';
+export * from './message/message.element';
+export * from './toast/toast.element';
+export * from './event-log/event-log.element';
+export * from './source-viewer/source-viewer.element';
+// Side-effect import: binds the [Source] toggle buttons to their viewers.
+import './source-toggle/source-toggle';
+// Side-effect import: prevents refresh from restoring a mid-page scroll.
+import './scroll-restoration';
+// Live demos hosted from sibling demo folders so visitors can interact
+// with the real components, not screenshots.
+export * from '../counter/counter.element';
+export * from '../todo-dashboard/todo-stats.element';
+export * from '../todo-dashboard/todo-filters.element';
+export * from '../todo-dashboard/todo-item.element';
+export * from '../todo-dashboard/todo-dashboard.element';

package/demos/site/llms.txt ADDED Viewed

@@ -0,0 +1,53 @@
+# custom-elements-ts
+> A tiny (~3 kB min+gzip), zero-dependency, framework-free TypeScript library for authoring native Web Components with a small set of decorators (`@CustomElement`, `@Prop`, `@State`, `@Watch`, `@Listen`, `@Dispatch`, `@Toggle`) and an optional `html` / `render()` runtime.
+Components built with custom-elements-ts are standards-compliant native Custom Elements: they work in plain HTML and inside any framework (React, Vue, Svelte, Angular, etc.). Two authoring styles compose freely:
+- **Plain HTML, imperative updates.** Declare a `template` (or `templateUrl`) and update the DOM yourself in `connectedCallback`, `@Watch()`, or `@Listen()` handlers. No `render()`, no reactive runtime, zero runtime cost beyond the decorators. Use this for mostly-static UI like buttons, badges, panels, copy pills.
+- **Reactive `render()` with the `html` helper.** Define `render()` returning an `html` tagged template. The runtime re-renders efficiently on `@Prop()` / `@State()` / `@Toggle()` changes, batching multiple synchronous mutations into one render. `render()` output is mounted into the shadow root by default; pass `shadow: false` to render into the host. State is deeply proxied — nested mutations (`this.user.name = '…'`, `this.items.push(…)`) schedule a render; only plain objects and arrays are proxied (functions, classes, DOM nodes, `Date`, `Map`, `Set`, `WeakMap`, `WeakSet` are left as-is).
+Install: `npm install custom-elements-ts`. License: MIT. Repository: https://github.com/geocine/custom-elements-ts. Live demo site: https://geocine.github.io/custom-elements-ts/.
+## Documentation
+- [README — full guide, decorators, examples](https://github.com/geocine/custom-elements-ts/blob/master/README.md): Quick start (plain HTML and reactive `render()`), template binding forms (`${expr}`, `${() => expr}`, `@event`, `.prop`, attribute, list rendering), every decorator (`@CustomElement`, `@Prop`, `@State`, `@Toggle`, `@Dispatch`, `@Watch`, `@Listen`), `@Toggle` boolean-attribute semantics table, project layout, and how to run / build the demos.
+- [DeepWiki — AI-powered docs and Q&A](https://deepwiki.com/geocine/custom-elements-ts): Searchable conceptual documentation generated from the source; useful for asking natural-language questions about the runtime.
+- [npm package page](https://www.npmjs.com/package/custom-elements-ts): Published artifacts (UMD + ESM with typings) and version history.
+- [MIT license](https://github.com/geocine/custom-elements-ts/blob/master/LICENSE): Full license text.
+## Decorators (cheat sheet)
+- `@CustomElement({ tag, template?, templateUrl?, style?, styleUrl?, shadow?: boolean })`: Registers the class as a native custom element. Defaults to shadow DOM.
+- `@Prop()`: Public attribute/property. Reflects primitives (string, number, boolean) between attribute and property; objects, arrays, functions, classes are property-only (not reflected to attributes).
+- `@State()`: Internal reactive state for `render()`-based components. Not reflected to attributes, not in `observedAttributes`. Plain objects and arrays are deeply proxied so nested mutations trigger a render.
+- `@Toggle()`: Boolean attribute/property following the W3C boolean-attribute spec, with the convention that the literal string `"false"` evaluates to `false` and an unrecognized non-empty string also evaluates to `false`.
+- `@Dispatch(eventName?)`: Declares a `DispatchEmitter` field. Call `.emit({ detail, bubbles?, composed?, cancelable? })` to fire a `CustomEvent`. Default event name is the property name with dots (`onChange` → `on.change`); pass an explicit name to override (e.g. `@Dispatch('counter.change')`). Use `bubbles: true, composed: true` to cross the shadow boundary.
+- `@Watch(propertyName)`: Method runs whenever `propertyName` changes (from either attribute or property side). Receives `{ old, new }`.
+- `@Listen(event, selector?)`: Wires up a DOM event on the host element, or on `selector` inside the shadow tree (any `querySelector`-compatible selector).
+## Source
+- [src/](https://github.com/geocine/custom-elements-ts/tree/master/src): Library source — decorators plus the `html` / `render()` runtime.
+- [src/index.ts](https://github.com/geocine/custom-elements-ts/blob/master/src/index.ts): Public entry point — every named export consumers can import.
+- [tests/](https://github.com/geocine/custom-elements-ts/tree/master/tests): Vitest specs covering the runtime and every decorator. Authoritative behavioural reference when the README is ambiguous.
+- [tests/templating-runtime.spec.ts](https://github.com/geocine/custom-elements-ts/blob/master/tests/templating-runtime.spec.ts): Most thorough spec for the `html` tagged template / `render()` runtime, covering binding forms, list rendering, attribute/property/event bindings, and disposal.
+## Demos
+- [demos/counter/counter.element.ts](https://github.com/geocine/custom-elements-ts/blob/master/demos/counter/counter.element.ts): Minimal `@State()` + `render()` + `@Watch()` + `@Dispatch()` example — single-button card that emits `counter.change` on increment.
+- [demos/todo-dashboard/todo-dashboard.element.ts](https://github.com/geocine/custom-elements-ts/blob/master/demos/todo-dashboard/todo-dashboard.element.ts): Parent dashboard owning the source of truth, composing child elements via bubbling `CustomEvent`s and deeply-proxied state.
+- [demos/todo-dashboard/todo-item.element.ts](https://github.com/geocine/custom-elements-ts/blob/master/demos/todo-dashboard/todo-item.element.ts): Child row component — `@Prop()` inputs, `@Listen()` handlers, `@Dispatch()` outputs.
+- [demos/todo-dashboard/todo-stats.element.ts](https://github.com/geocine/custom-elements-ts/blob/master/demos/todo-dashboard/todo-stats.element.ts): Sibling stats card driven entirely by `@Prop()` data passed down from the parent.
+- [demos/site/](https://github.com/geocine/custom-elements-ts/tree/master/demos/site): Source for the showcase landing page itself — `<cts-message>` (plain-HTML, imperative), `<cts-toast>`, `<cts-event-log>`, `<cts-code-example>`. Demonstrates that the same library is used to build its own marketing site.
+- [demos/site/message/message.element.ts](https://github.com/geocine/custom-elements-ts/blob/master/demos/site/message/message.element.ts): Canonical "no `render()` required" example — static `template` + imperative DOM updates in `connectedCallback`, `@Listen('click')`, and a bubbling+composed `@Dispatch('cts:toast')`.
+## Live site (this domain)
+- [Showcase landing page](https://geocine.github.io/custom-elements-ts/): Hero, install pill, live counter demo, live sprint-board demo, and an event-log panel that subscribes to bubbling `CustomEvent`s in real time. All demos on the page are the *real* compiled components, not screenshots.
+## Optional
+- [GitHub issues](https://github.com/geocine/custom-elements-ts/issues): Bug reports and feature requests.
+- [Coveralls — test coverage](https://coveralls.io/github/geocine/custom-elements-ts?branch=master): Current line coverage for the library.
+- [GitHub Actions — CI](https://github.com/geocine/custom-elements-ts/actions/workflows/ci.yml): Build, test, and GitHub Pages deploy pipeline.

package/demos/site/message/message.element.scss ADDED Viewed

@@ -0,0 +1,75 @@
+:host {
+  display: block;
+  margin: 18px 22px 6px;
+  --bg: rgba(255, 255, 255, 0.025);
+  --bg-hover: rgba(255, 255, 255, 0.05);
+  --line: rgba(255, 255, 255, 0.10);
+  --line-hover: rgba(49, 120, 198, 0.45);
+  --fg: #e6ecf3;
+  --fg-prompt: #9cc0eb;
+  --fg-icon: #5b6370;
+  --fg-icon-hover: #9cc0eb;
+}
+.row {
+  display: grid;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 10px;
+  padding: 13px 14px;
+  font-family: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular,
+               Menlo, Consolas, "Courier New", monospace;
+  font-size: 13.5px;
+  font-weight: 500;
+  color: var(--fg);
+  background: var(--bg);
+  border: 1px solid var(--line);
+  border-radius: 3px;
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  transition: background 220ms cubic-bezier(0.22, 1, 0.36, 1),
+              border-color 220ms cubic-bezier(0.22, 1, 0.36, 1),
+              transform 140ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+.row:hover {
+  background: var(--bg-hover);
+  border-color: var(--line-hover);
+}
+.row:active { transform: translateY(1px); }
+.row:focus-visible {
+  border-color: var(--line-hover);
+  box-shadow: 0 0 0 2px rgba(49, 120, 198, 0.45);
+}
+.prompt {
+  color: var(--fg-prompt);
+  font-weight: 600;
+  opacity: 0.95;
+}
+.cmd {
+  font-family: inherit;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0;
+}
+.icon {
+  display: grid;
+  place-items: center;
+  color: var(--fg-icon);
+  transition: color 220ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+.icon svg {
+  width: 14px;
+  height: 14px;
+  display: block;
+}
+.row:hover .icon { color: var(--fg-icon-hover); }

package/demos/site/message/message.element.ts ADDED Viewed

@@ -0,0 +1,76 @@
+import { CustomElement, Prop, Listen, Dispatch, DispatchEmitter } from 'custom-elements-ts';
+@CustomElement({
+  tag: 'cts-message',
+  template: `
+    <div class="row" role="button" tabindex="0" aria-label="Copy install command to clipboard">
+      <span class="prompt" aria-hidden="true">$</span>
+      <code class="cmd"></code>
+      <span class="icon" aria-hidden="true">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+          <rect x="9" y="9" width="13" height="13" rx="1"/>
+          <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/>
+        </svg>
+      </span>
+    </div>
+  `,
+  styleUrl: './message.element.scss',
+})
+export class MessageElement extends HTMLElement {
+  @Prop() message!: string;
+  @Dispatch('cts:toast') toast!: DispatchEmitter;
+  @Listen('click')
+  async handleClick() {
+    const text = this.message ?? '';
+    let ok = true;
+    try {
+      if (navigator.clipboard?.writeText) {
+        await navigator.clipboard.writeText(text);
+      } else {
+        ok = this.fallbackCopy(text);
+      }
+    } catch {
+      ok = false;
+    }
+    this.toast.emit({
+      bubbles: true,
+      composed: true,
+      detail: ok
+        ? { title: 'Copied to clipboard', message: text, kind: 'success' }
+        : { title: "Couldn't copy", message: 'Copy the command manually.', kind: 'error' },
+    });
+  }
+  @Listen('keydown')
+  handleKey(e: KeyboardEvent) {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      this.handleClick();
+    }
+  }
+  connectedCallback() {
+    const cmd = this.shadowRoot?.querySelector('.cmd');
+    if (cmd) cmd.textContent = this.message;
+  }
+  // Older browsers / non-secure contexts: fall back to the legacy copy path.
+  private fallbackCopy(text: string): boolean {
+    const ta = document.createElement('textarea');
+    ta.value = text;
+    ta.style.position = 'fixed';
+    ta.style.opacity = '0';
+    document.body.appendChild(ta);
+    ta.select();
+    let ok = false;
+    try {
+      ok = document.execCommand('copy');
+    } catch {
+      ok = false;
+    }
+    document.body.removeChild(ta);
+    return ok;
+  }
+}

package/demos/site/og-image.png ADDED Viewed

Binary file

package/demos/site/scroll-restoration.ts ADDED Viewed

@@ -0,0 +1,28 @@
+function scrollToHashTarget(): boolean {
+  const id = decodeURIComponent(window.location.hash.slice(1));
+  const target = id ? document.getElementById(id) : null;
+  if (!target) return false;
+  target.scrollIntoView();
+  return true;
+}
+function syncInitialScroll() {
+  if (typeof window === 'undefined') return;
+  if (window.location.hash) {
+    if ('scrollRestoration' in window.history) {
+      window.history.scrollRestoration = 'auto';
+    }
+    requestAnimationFrame(scrollToHashTarget);
+    return;
+  }
+  if ('scrollRestoration' in window.history) {
+    window.history.scrollRestoration = 'manual';
+  }
+  window.scrollTo({ top: 0, left: 0, behavior: 'auto' });
+}
+syncInitialScroll();
+window.addEventListener('pageshow', syncInitialScroll);