tkeron 5.3.0 → 6.0.1

package/examples/init_sample/websrc/components/ui/crypto-prices-card.com.html

@@ -0,0 +1,52 @@
+<style>
+  .crypto-prices-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
+    gap: 1rem;
+    margin-top: 1rem;
+  }
+  .crypto-card {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    padding: 1.25rem;
+    border-radius: 12px;
+    color: white;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    transition: transform 0.2s;
+  }
+  .crypto-card:hover {
+    transform: translateY(-4px);
+  }
+  .crypto-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.75rem;
+  }
+  .crypto-name {
+    font-weight: 600;
+    font-size: 1rem;
+  }
+  .crypto-symbol {
+    background: rgba(255, 255, 255, 0.2);
+    padding: 0.25rem 0.5rem;
+    border-radius: 4px;
+    font-size: 0.75rem;
+    font-weight: 700;
+  }
+  .crypto-price {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin-bottom: 0.5rem;
+  }
+  .crypto-change {
+    font-size: 0.9rem;
+    font-weight: 600;
+  }
+</style>
+<section style="grid-column: span 3">
+  <h2>💰 Asset Prices (Build Time)</h2>
+  <p style="font-size: 0.85rem; margin-bottom: 0.75rem">
+    Real cryptocurrency prices fetched from CoinGecko API at build time:
+  </p>
+  <div id="crypto-prices" class="crypto-prices-container"></div>
+</section>

package/examples/init_sample/websrc/components/ui/html-components-card.com.html

@@ -0,0 +1,10 @@
+<section>
+  <h2>🧩 HTML Components</h2>
+  <p style="margin-bottom: 0.75rem">
+    Reusable components with <code>.com.html</code>:
+  </p>
+  <info-card></info-card>
+  <p style="font-size: 0.85rem; color: #666; margin-top: 0.75rem">
+    ✓ Nested components support<br />✓ Build-time replacement
+  </p>
+</section>

package/examples/init_sample/websrc/{info-card.com.html → components/ui/info-card.com.html}

@@ -1,14 +1,18 @@
-<div
-  style="
+<style>
+  .info-card {
     padding: 1rem;
     background: #eff6ff;
     border-left: 4px solid #2563eb;
     border-radius: 4px;
-  "
->
+  }
+  .info-card p {
+    margin-top: 0.5rem;
+  }
+</style>
+<div class="info-card">
   <strong>This is an HTML component!</strong>
-  <p style="margin-top: 0.5rem">
+  <p>
     Defined in <code>info-card.com.html</code> and reused anywhere in your HTML
-    as <code>&amp;lt;info-card&amp;gt;&amp;lt;/info-card&amp;gt;</code>.
+    as <code>&lt;info-card&gt;&lt;/info-card&gt;</code>.
   </p>
 </div>

package/examples/init_sample/websrc/components/ui/markdown-card.com.html

@@ -0,0 +1,21 @@
+<style>
+  .markdown-card .md-body {
+    padding: 0.75rem 1rem;
+    background: #fffbea;
+    border-left: 4px solid #f59e0b;
+    border-radius: 4px;
+    font-size: 0.9rem;
+  }
+</style>
+<section class="markdown-card">
+  <h2>📄 Markdown Components</h2>
+  <p style="margin-bottom: 0.75rem">
+    Author content with <code>.com.md</code>:
+  </p>
+  <div class="md-body">
+    <about-intro></about-intro>
+  </div>
+  <p style="font-size: 0.85rem; color: #666; margin-top: 0.75rem">
+    ✓ Markdown rendered at build time<br />✓ Reusable like any component
+  </p>
+</section>

package/examples/init_sample/websrc/{pre-render-card.com.html → components/ui/pre-render-card.com.html}

@@ -1,10 +1,13 @@
 <section id="pre-render-card">
-  <h2>📝 Pre-rendering</h2>
-  <p>Generate HTML at build time using <code>.pre.ts</code>:</p>
+  <h2>📝 Pre / Post Rendering</h2>
+  <p>
+    Run code at build time with <code>.pre.ts</code> (before components) and
+    <code>.post.ts</code> (after components):
+  </p>
   <p
     id="build-time"
     style="font-weight: bold; color: #667eea; margin: 0.75rem 0"
-  ></p>
+  >·</p>
   <p style="font-size: 0.85rem; color: #666; margin-top: 0.75rem">
     ✓ Manipulate DOM before deployment<br />
     ✓ Import any TypeScript module<br />

package/examples/init_sample/websrc/components/ui/quote-card.com.html

@@ -0,0 +1,32 @@
+<style>
+  .quote-card #pre-rendered-quote {
+    margin: 1rem 0;
+    padding: 0.75rem;
+    background: #f8f9fa;
+    border-radius: 8px;
+    border-left: 4px solid #667eea;
+  }
+  .quote-card #build-metadata {
+    margin-top: 1rem;
+    padding-top: 0.75rem;
+    border-top: 1px solid #eee;
+    font-size: 0.75rem;
+    color: #999;
+  }
+  .quote-card blockquote p {
+    font-style: italic;
+  }
+  .quote-card blockquote footer {
+    margin-top: 0.5rem;
+    font-size: 0.85rem;
+    color: #666;
+  }
+</style>
+<section class="quote-card" style="grid-column: span 3">
+  <h2>💬 Quote of the Build</h2>
+  <p style="font-size: 0.85rem; margin-bottom: 0.75rem">
+    This content was fetched from an external API at build time:
+  </p>
+  <div id="pre-rendered-quote"></div>
+  <div id="build-metadata"></div>
+</section>

package/examples/init_sample/websrc/components/ui/styles-injector.com.ts

@@ -0,0 +1,5 @@
+import { join } from "path";
+
+const css = await Bun.file(join(__dirname, "../../styles/main.css")).text();
+
+com.innerHTML = `<style>${css}</style>`;

package/examples/init_sample/websrc/components/ui/ts-components-card.com.html

@@ -0,0 +1,11 @@
+<section>
+  <h2>⚡ TypeScript Components</h2>
+  <p style="margin-bottom: 0.75rem">
+    Dynamic generation with <code>.com.ts</code>:
+  </p>
+  <user-badge count="3"></user-badge>
+  <p style="font-size: 0.85rem; color: #666; margin-top: 0.75rem">
+    ✓ Loops &amp; conditionals<br />✓ Read attributes dynamically<br />✓
+    Build-time code execution
+  </p>
+</section>

package/examples/init_sample/websrc/components/ui/user-badge.com.ts

@@ -0,0 +1,30 @@
+const count = com.getAttribute("count") || "3";
+const numCount = parseInt(count, 10);
+
+const items: string[] = [];
+for (let i = 1; i <= numCount; i++) {
+  items.push(`<li>✓ Item ${i}</li>`);
+}
+
+com.innerHTML = `
+  <div class="user-badge">
+    <ul>
+      ${items.join("")}
+    </ul>
+  </div>
+  <style>
+    .user-badge {
+      background: #f0fdf4;
+      border-left: 3px solid #22c55e;
+      padding: 0.75rem;
+      border-radius: 4px;
+    }
+    .user-badge ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+      font-size: 0.9rem;
+      color: #166534;
+    }
+  </style>
+`;

package/examples/init_sample/websrc/docs.html

@@ -0,0 +1,33 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Docs — tkeron</title>
+    <styles-injector></styles-injector>
+  </head>
+  <body>
+    <site-header></site-header>
+    <main class="container">
+      <article class="page">
+        <h1>Docs</h1>
+        <p>Getting started with tkeron:</p>
+        <ul style="margin-left: 1.5rem; margin-top: 0.5rem">
+          <li><code>tk dev</code> — start the dev server on <code>:3000</code></li>
+          <li><code>tk build</code> — compile <code>websrc/</code> into <code>web/</code></li>
+          <li><code>tk init &lt;name&gt;</code> — scaffold a new project</li>
+        </ul>
+        <p style="margin-top: 1rem">
+          Components live under <code>websrc/components/</code> grouped by domain:
+          <code>layout/</code>, <code>ui/</code>, <code>content/</code>.
+        </p>
+        <p>
+          Pages at the root of <code>websrc/</code> map directly to URLs —
+          <code>about.html</code> → <code>/about</code>,
+          <code>docs.html</code> → <code>/docs</code>.
+        </p>
+      </article>
+    </main>
+    <site-footer></site-footer>
+  </body>
+</html>

package/examples/init_sample/websrc/index.html

@@ -3,227 +3,28 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" type="image/x-icon" href="favicon.ico" />
     <title>tkeron - Sample Project</title>
-    <style>
-      * {
-        margin: 0;
-        padding: 0;
-        box-sizing: border-box;
-      }
-      body {
-        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-        line-height: 1.6;
-        color: #1a1a1a;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        min-height: 100vh;
-        padding: 1rem;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-      }
-      .container {
-        max-width: 1200px;
-        margin: 0 auto;
-      }
-      .grid {
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-        grid-template-rows: repeat(2, 1fr);
-        gap: 1rem;
-      }
-      @media (max-width: 900px) {
-        .grid {
-          grid-template-columns: 1fr;
-          grid-template-rows: auto;
-        }
-      }
-      .hero {
-        text-align: center;
-        color: white;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-        background: rgba(255, 255, 255, 0.1);
-        backdrop-filter: blur(10px);
-        padding: 1.5rem;
-        border-radius: 12px;
-        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-        grid-row: span 2;
-      }
-      .hero .features {
-        margin-top: 1rem;
-        text-align: left;
-        width: 100%;
-      }
-      .hero .features li {
-        margin-bottom: 0.3rem;
-        padding-left: 0.5rem;
-        opacity: 0.9;
-        font-size: 0.85rem;
-      }
-      .logo {
-        width: 200px;
-        height: 200px;
-        margin-bottom: 1rem;
-        filter: drop-shadow(0 4px 6px rgba(0,0,0,0.2));
-        animation: float 3s ease-in-out infinite;
-      }
-      @keyframes float {
-        0%, 100% { transform: translateY(0); }
-        50% { transform: translateY(-10px); }
-      }
-      h1 {
-        font-size: 2rem;
-        margin-bottom: 0.25rem;
-        text-shadow: 0 2px 4px rgba(0,0,0,0.2);
-      }
-      .subtitle {
-        font-size: 0.9rem;
-        opacity: 0.95;
-      }
-      section {
-        background: white;
-        padding: 1.25rem;
-        border-radius: 12px;
-        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-        transition: transform 0.2s, box-shadow 0.2s;
-      }
-      section:hover {
-        transform: translateY(-4px);
-        box-shadow: 0 8px 12px rgba(0,0,0,0.15);
-      }
-      h2 {
-        color: #667eea;
-        margin-bottom: 0.75rem;
-        font-size: 1.2rem;
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-      }
-      section p {
-        font-size: 0.9rem;
-      }
-      .counter {
-        margin-top: 1rem;
-        text-align: center;
-      }
-      button {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        color: white;
-        border: none;
-        padding: 0.75rem 2rem;
-        border-radius: 8px;
-        cursor: pointer;
-        font-size: 1rem;
-        font-weight: 600;
-        transition: transform 0.1s, box-shadow 0.2s;
-        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
-      }
-      button:hover {
-        transform: scale(1.05);
-        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
-      }
-      button:active {
-        transform: scale(0.98);
-      }
-      .count {
-        font-size: 2rem;
-        font-weight: bold;
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
-        background-clip: text;
-        margin-top: 1rem;
-      }
-      code {
-        background: #f0f0f0;
-        padding: 0.2rem 0.4rem;
-        border-radius: 4px;
-        font-family: 'Courier New', monospace;
-        font-size: 0.9em;
-      }
-      p {
-        margin-bottom: 0.5rem;
-      }
-      a {
-        transition: transform 0.2s, box-shadow 0.2s;
-      }
-      a:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 4px 8px rgba(0,0,0,0.3);
-      }
-      .crypto-prices-container {
-        display: grid;
-        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-        gap: 1rem;
-        margin-top: 1rem;
-      }
-      .crypto-card {
-        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-        padding: 1.25rem;
-        border-radius: 12px;
-        color: white;
-        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-        transition: transform 0.2s;
-      }
-      .crypto-card:hover {
-        transform: translateY(-4px);
-      }
-      .crypto-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        margin-bottom: 0.75rem;
-      }
-      .crypto-name {
-        font-weight: 600;
-        font-size: 1rem;
-      }
-      .crypto-symbol {
-        background: rgba(255,255,255,0.2);
-        padding: 0.25rem 0.5rem;
-        border-radius: 4px;
-        font-size: 0.75rem;
-        font-weight: 700;
-      }
-      .crypto-price {
-        font-size: 1.5rem;
-        font-weight: 700;
-        margin-bottom: 0.5rem;
-      }
-      .crypto-change {
-        font-size: 0.9rem;
-        font-weight: 600;
-      }
-    </style>
+    <meta id="build-stamp" name="build-stamp" content="" />
+    <styles-injector></styles-injector>
   </head>
   <body>
+    <site-header></site-header>
     <div class="container">
       <div class="grid">
         <hero-section></hero-section>
         <pre-render-card></pre-render-card>
         <html-components-card></html-components-card>
         <ts-components-card></ts-components-card>
-        <counter-card></counter-card>
-        
-        <!-- Crypto Prices - fetched at build time -->
-        <section style="grid-column: span 3;">
-          <h2>💰 Asset Prices (Build Time)</h2>
-          <p style="font-size: 0.85rem; margin-bottom: 0.75rem;">Real cryptocurrency prices fetched from CoinGecko API at build time:</p>
-          <div id="crypto-prices" class="crypto-prices-container"></div>
-        </section>
-        
-        <!-- Pre-rendered content with external API data -->
-        <section style="grid-column: span 3;">
-          <h2>💬 Quote of the Build</h2>
-          <p style="font-size: 0.85rem; margin-bottom: 0.75rem;">This content was fetched from an external API at build time:</p>
-          <div id="pre-rendered-quote" style="margin: 1rem 0; padding: 0.75rem; background: #f8f9fa; border-radius: 8px; border-left: 4px solid #667eea;"></div>
-          <div id="build-metadata" style="margin-top: 1rem; padding-top: 0.75rem; border-top: 1px solid #eee; font-size: 0.75rem; color: #999;"></div>
+        <section class="counter-card-wrap">
+          <counter-button></counter-button>
         </section>
+        <markdown-card></markdown-card>
+        <crypto-prices-card></crypto-prices-card>
+        <quote-card></quote-card>
       </div>
+      <user-badge count="4"></user-badge>
     </div>
+    <site-footer></site-footer>
     <script type="module" src="./index.ts"></script>
   </body>
 </html>

package/examples/init_sample/websrc/index.post.ts

@@ -0,0 +1,70 @@
+// Post-render — runs at build time, AFTER components are resolved.
+// Perfect for filling nodes that live inside components, plus final DOM
+// rewrites such as rel="noopener" hardening.
+import {
+  getRandomQuote,
+  getBuildMetadata,
+  getCryptoPrices,
+  escapeHtml,
+} from "./utils/api-service";
+
+const externalLinks = document.querySelectorAll('a[target="_blank"]');
+externalLinks.forEach((link) => {
+  link.setAttribute("rel", "noopener noreferrer");
+});
+
+const buildTimeElement = document.getElementById("build-time");
+if (buildTimeElement) {
+  buildTimeElement.innerHTML = `<strong>${escapeHtml(new Date().toLocaleString())}</strong>`;
+}
+
+const [quote, metadata, prices] = await Promise.all([
+  getRandomQuote(),
+  Promise.resolve(getBuildMetadata()),
+  getCryptoPrices(),
+]);
+
+const quoteElement = document.getElementById("pre-rendered-quote");
+if (quoteElement) {
+  quoteElement.innerHTML = `
+    <blockquote>
+      <p>"${escapeHtml(quote.quote)}"</p>
+      <footer>— ${escapeHtml(quote.author)}</footer>
+    </blockquote>
+  `;
+}
+
+const metadataElement = document.getElementById("build-metadata");
+if (metadataElement) {
+  metadataElement.innerHTML = `
+    <small>
+      Built: ${escapeHtml(metadata.timestamp)} |
+      tkeron: ${escapeHtml(metadata.tkeron)} |
+      Runtime: ${escapeHtml(metadata.runtime)} |
+      Platform: ${escapeHtml(metadata.platform)}
+    </small>
+  `;
+}
+
+const cryptoPricesElement = document.getElementById("crypto-prices");
+if (cryptoPricesElement) {
+  cryptoPricesElement.innerHTML = prices
+    .map((crypto) => {
+      const positive = crypto.price_change_percentage_24h >= 0;
+      const changeColor = positive ? "#10b981" : "#ef4444";
+      const changeSymbol = positive ? "▲" : "▼";
+      return `
+        <div class="crypto-card">
+          <div class="crypto-header">
+            <span class="crypto-name">${escapeHtml(crypto.name)}</span>
+            <span class="crypto-symbol">${escapeHtml(crypto.symbol.toUpperCase())}</span>
+          </div>
+          <div class="crypto-price">$${crypto.current_price.toLocaleString()}</div>
+          <div class="crypto-change" style="color: ${changeColor}">
+            ${changeSymbol} ${Math.abs(crypto.price_change_percentage_24h).toFixed(2)}%
+          </div>
+        </div>
+      `;
+    })
+    .join("");
+}

package/examples/init_sample/websrc/index.pre.ts

@@ -1,66 +1,15 @@
-// Pre-rendering - runs at build time
-// Demonstrates importing any TypeScript module for pre-rendering
-import { getRandomQuote, getBuildMetadata, getCryptoPrices } from './api-service';
+// Pre-render — runs at build time, BEFORE components are inlined.
+// Use it for elements that exist directly in this page's HTML or for
+// injecting custom elements that the component loop will then process.
+import { getRandomQuote, escapeHtml } from "./utils/api-service";
 
-const buildTimeElement = document.getElementById('build-time');
-
-if (buildTimeElement) {
-  const now = new Date();
-  buildTimeElement.innerHTML = `<strong>${now.toLocaleString()}</strong>`;
+const stamp = document.getElementById("build-stamp");
+if (stamp) {
+  stamp.setAttribute("content", new Date().toISOString());
 }
 
-// Fetch data from external API at build time
-const quoteElement = document.getElementById('pre-rendered-quote');
-if (quoteElement) {
+const titleElement = document.querySelector("title");
+if (titleElement) {
   const quote = await getRandomQuote();
-  quoteElement.innerHTML = `
-    <blockquote class="quote">
-      <p>"${quote.quote}"</p>
-      <footer>— ${quote.author}</footer>
-    </blockquote>
-  `;
-}
-
-// Add build metadata
-const metadataElement = document.getElementById('build-metadata');
-if (metadataElement) {
-  const metadata = await getBuildMetadata();
-  metadataElement.innerHTML = `
-    <div class="metadata">
-      <small>
-        Built: ${metadata.timestamp} | 
-        tkeron: ${metadata.tkeron} | 
-        Runtime: ${metadata.runtime} | 
-        Platform: ${metadata.platform}
-      </small>
-    </div>
-  `;
+  titleElement.textContent = `tkeron — ${escapeHtml(quote.author)}`;
 }
-
-// Fetch crypto prices at build time
-const cryptoPricesElement = document.getElementById('crypto-prices');
-if (cryptoPricesElement) {
-  const prices = await getCryptoPrices();
-  
-  const pricesHtml = prices.map(crypto => {
-    const changeColor = crypto.price_change_percentage_24h >= 0 ? '#10b981' : '#ef4444';
-    const changeSymbol = crypto.price_change_percentage_24h >= 0 ? '▲' : '▼';
-    
-    return `
-      <div class="crypto-card">
-        <div class="crypto-header">
-          <span class="crypto-name">${crypto.name}</span>
-          <span class="crypto-symbol">${crypto.symbol.toUpperCase()}</span>
-        </div>
-        <div class="crypto-price">$${crypto.current_price.toLocaleString()}</div>
-        <div class="crypto-change" style="color: ${changeColor}">
-          ${changeSymbol} ${Math.abs(crypto.price_change_percentage_24h).toFixed(2)}%
-        </div>
-      </div>
-    `;
-  }).join('');
-  
-  cryptoPricesElement.innerHTML = pricesHtml;
-}
-
-

package/examples/init_sample/websrc/index.ts

@@ -1,10 +1,12 @@
-// Client-side TypeScript - runs in the browser
+// Client-side TypeScript — only fills data into already existing nodes.
 let clickCount = 0;
 
-const button = document.getElementById("increment") as HTMLButtonElement;
-const countDisplay = document.getElementById("count") as HTMLSpanElement;
+const button = document.getElementById("increment");
+const countDisplay = document.getElementById("count");
 
-button.addEventListener("click", () => {
-  clickCount++;
-  countDisplay.textContent = clickCount.toString();
-});
+if (button && countDisplay) {
+  button.addEventListener("click", () => {
+    clickCount++;
+    countDisplay.textContent = clickCount.toString();
+  });
+}

package/examples/init_sample/websrc/styles/global-styles.com.ts

@@ -0,0 +1,5 @@
+import { join } from "path";
+
+const css = await Bun.file(join(__dirname, "main.css")).text();
+
+com.innerHTML = `<style>${css}</style>`;