npm - howone - Versions diffs - 0.1.19 → 0.1.22 - Mend

howone 0.1.19 → 0.1.22

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 (293) hide show

package/templates/vite/.howone/skills/hallmark/site/examples/bananastudio/tokens.css ADDED Viewed

@@ -0,0 +1,96 @@
+/* Hallmark · tokens · genre: atmospheric · theme: Bloom (dark)
+ * Paper band: dark  ·  Display style: italic-serif (Fraunces)  ·  Accent hue: warm amber-bloom 75°
+ */
+:root {
+  color-scheme: dark;
+  /* — Type ----------------------------------------------------------- */
+  --font-display:  "Fraunces", "Iowan Old Style", "Apple Garamond", Georgia, serif;
+  --font-body:     "Geist", ui-sans-serif, system-ui, sans-serif;
+  --font-outlier:  "Geist Mono", ui-monospace, "SFMono-Regular", monospace;
+  /* — Type scale (1.25 ratio · base 16px) ---------------------------- */
+  --text-xs:    0.75rem;
+  --text-sm:    0.875rem;
+  --text-base:  1rem;
+  --text-md:    1.125rem;
+  --text-lg:    1.375rem;
+  --text-xl:    1.75rem;
+  --text-2xl:   2.25rem;
+  --text-3xl:   3rem;
+  --text-4xl:   4rem;
+  --text-display: clamp(3rem, 8vw + 0.5rem, 8.5rem);
+  --text-marquee: clamp(2.5rem, 7vw, 6.5rem);
+  --text-figure:  clamp(4rem, 12vw + 0.5rem, 11rem);
+  /* — Colour (OKLCH; midnight-violet paper · amber-bloom accent) ----- */
+  --color-paper:      oklch(10.0% 0.018 285);          /* deep midnight violet */
+  --color-paper-2:    oklch(13.5% 0.020 285);
+  --color-paper-3:    oklch(17.5% 0.024 285);
+  --color-paper-tint: oklch(22.0% 0.028 285);
+  --color-rule:       oklch(24.0% 0.020 285);
+  --color-rule-2:     oklch(32.0% 0.022 285);
+  --color-ink:        oklch(98.0% 0.010 80);           /* warm bone */
+  --color-ink-2:      oklch(80.0% 0.012 80);
+  --color-muted:      oklch(60.0% 0.014 80);
+  --color-muted-2:    oklch(48.0% 0.014 75);
+  --color-accent:     oklch(80.0% 0.180 75);           /* amber bloom */
+  --color-accent-2:   oklch(86.0% 0.140 80);           /* lighter bloom */
+  --color-accent-deep: oklch(62.0% 0.180 50);          /* deep ember */
+  --color-accent-cool: oklch(70.0% 0.150 250);         /* studio cyan, single-use */
+  --color-glow:       oklch(78% 0.20 70 / 0.30);
+  --color-glow-soft:  oklch(80% 0.18 75 / 0.18);
+  --color-focus:      oklch(82% 0.180 75);
+  /* — Spacing (4 pt scale, role-named) ------------------------------- */
+  --space-3xs: 0.125rem;
+  --space-2xs: 0.25rem;
+  --space-xs:  0.5rem;
+  --space-sm:  0.75rem;
+  --space-md:  1rem;
+  --space-lg:  1.5rem;
+  --space-xl:  2.5rem;
+  --space-2xl: 4rem;
+  --space-3xl: 6rem;
+  --space-4xl: 9rem;
+  /* — Rules + radii -------------------------------------------------- */
+  --rule-hair:   1px;
+  --rule-thick:  2px;
+  --radius-sm:   6px;
+  --radius-md:   12px;
+  --radius-lg:   18px;
+  --radius-xl:   28px;
+  --radius-pill: 999px;
+  /* — Motion --------------------------------------------------------- */
+  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
+  --ease-in:     cubic-bezier(0.7,  0, 0.84, 0);
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+  --dur-micro:   120ms;
+  --dur-short:   240ms;
+  --dur-mid:     520ms;
+  --dur-long:    760ms;
+  --dur-marquee: 48s;
+  --dur-breath:  6.5s;
+  --dur-aperture: 9s;
+  /* — z-index (six-level scale) -------------------------------------- */
+  --z-base:     1;
+  --z-raised:   10;
+  --z-dropdown: 100;
+  --z-sticky:   200;
+  --z-modal:    400;
+  --z-toast:    500;
+  --z-tooltip:  600;
+  /* — Page layout ---------------------------------------------------- */
+  --page-gutter: clamp(1.25rem, 4vw, 4rem);
+  --page-max:    78rem;
+}

package/templates/vite/.howone/skills/hallmark/site/examples/hyperlane/index.html ADDED Viewed

@@ -0,0 +1,344 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+  <title>Hyperlane / 26 — A one-night developer summit · Brooklyn · Oct 17, 2026</title>
+  <meta name="description" content="Twelve hours. Eight talks. Four live product launches. Brooklyn, October 17, 2026. Public list opens September 9." />
+  <meta name="theme-color" content="#1a120c" />
+  <link rel="preconnect" href="https://fonts.googleapis.com" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+  <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@500;700;800;900&family=Inter:wght@400;500;600&family=Instrument+Serif:ital@0;1&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet" />
+  <link rel="stylesheet" href="tokens.css" />
+  <link rel="stylesheet" href="styles.css" />
+</head>
+<body>
+  <!-- ambient blooms (atmospheric backdrop) -->
+  <div class="ambient" aria-hidden="true">
+    <div class="bloom bloom--1"></div>
+    <div class="bloom bloom--2"></div>
+    <div class="grain"></div>
+  </div>
+  <!-- skip link for keyboard users -->
+  <a class="skip" href="#main">Skip to content</a>
+  <!-- ─── nav · N5 floating pill ────────────────────────────── -->
+  <header class="nav" data-state="rest">
+    <div class="nav__inner">
+      <a class="nav__brand" href="#top" aria-label="Hyperlane 2026 · home">
+        <span class="nav__brand-dot" aria-hidden="true"></span>
+        <span class="nav__brand-text">Hyperlane<span class="nav__brand-num">/26</span></span>
+      </a>
+      <nav class="nav__links" aria-label="Primary">
+        <a href="#format">Format</a>
+        <a href="#why">Why</a>
+        <a href="#program">Programme</a>
+        <a href="#faq">FAQ</a>
+      </nav>
+      <a class="nav__cta" href="#rsvp">
+        <span>Join the list</span>
+        <span class="nav__cta-arrow" aria-hidden="true">→</span>
+      </a>
+    </div>
+  </header>
+  <main id="main">
+    <!-- ─── hero · Marquee Hero + HP3 cursor-spotlight ──────── -->
+    <section class="hero" id="top" aria-labelledby="hero-h">
+      <div class="hero__spotlight" aria-hidden="true"></div>
+      <div class="hero__rail">
+        <span class="hero__rail-dot" aria-hidden="true"></span>
+        <span>HYPERLANE / 26 — a developer summit · public list opens 09 Sep</span>
+      </div>
+      <h1 class="hero__display" id="hero-h">
+        <span class="hero__line">For engineers</span>
+        <span class="hero__line">who ship</span>
+        <span class="hero__line"><em>after dark.</em></span>
+      </h1>
+      <div class="hero__meta">
+        <div class="hero__meta-cell">
+          <span class="hero__label">When</span>
+          <span class="hero__value">Sat 17 Oct 2026 · 7 PM</span>
+        </div>
+        <div class="hero__meta-cell hero__meta-cell--mid">
+          <span class="hero__label">To liftoff</span>
+          <span class="hero__value tnum" id="countdown" data-target="2026-10-17T19:00:00-04:00">— —</span>
+        </div>
+        <div class="hero__meta-cell hero__meta-cell--end">
+          <span class="hero__label">Where</span>
+          <span class="hero__value">Brooklyn · 480 cap</span>
+        </div>
+      </div>
+    </section>
+    <!-- ─── format band · spec sheet ────────────────────────── -->
+    <section class="format" id="format" aria-labelledby="format-h">
+      <header class="section-head">
+        <p class="section-eyebrow"><span class="num tnum">01</span> · Format</p>
+        <h2 class="section-h" id="format-h">A single night, end to end.</h2>
+      </header>
+      <ol class="format__schedule" aria-label="Schedule">
+        <li class="format__row">
+          <span class="format__time tnum">7:00 <small>PM</small></span>
+          <span class="format__label">Doors</span>
+          <span class="format__note">soft open · drinks · introductions in the foyer</span>
+        </li>
+        <li class="format__row">
+          <span class="format__time tnum">8:30 <small>PM</small></span>
+          <span class="format__label">Programme</span>
+          <span class="format__note">eight talks · four live launches · running until 1 AM</span>
+        </li>
+        <li class="format__row">
+          <span class="format__time tnum">11:00 <small>PM</small></span>
+          <span class="format__label">Workshop</span>
+          <span class="format__note">a hands-on session in the side room · 40 seats only</span>
+        </li>
+        <li class="format__row">
+          <span class="format__time tnum">1:00 <small>AM</small></span>
+          <span class="format__label">Late</span>
+          <span class="format__note">closing DJ · open until four · room is yours</span>
+        </li>
+        <li class="format__row format__row--reveal">
+          <span class="format__time tnum">— —</span>
+          <span class="format__label">Address</span>
+          <span class="format__note">released 48 hours before to ticketed guests · Williamsburg waterfront</span>
+        </li>
+      </ol>
+      <div class="format__cta">
+        <a class="cta cta--primary cta--lg" href="#rsvp">
+          <span>Save your spot</span>
+          <span aria-hidden="true">→</span>
+        </a>
+        <p class="format__cta-note tnum">— Wave 01 of 3 · 480 cap · public list opens 09 Sep 2026</p>
+      </div>
+    </section>
+    <!-- ─── why · pitch ────────────────────────────────────── -->
+    <section class="why" id="why" aria-labelledby="why-h">
+      <header class="section-head">
+        <p class="section-eyebrow"><span class="num tnum">02</span> · Why</p>
+        <h2 class="section-h" id="why-h">A room for the people still building things at 2 AM.</h2>
+      </header>
+      <div class="why__body">
+        <p class="why__lead">
+          Twelve hours. Eight talks. Four live launches. Four hundred and eighty engineers, designers, founders, infra people, ML people, the frontend people who keep telling you the framework isn't done yet. Show up at seven. Leave when the sun does.
+        </p>
+        <p>
+          The conference circuit is fine. But the launches that matter — the new database, the new compiler, the next thing you'll be writing against in March — those don't happen on big stages. They happen in small rooms, late, when the ten people who actually shipped the thing are still around to answer questions.
+        </p>
+        <p>
+          Hyperlane is a room for that. <em>No badges. No pitches. No panels.</em> Talks short enough to remember (twelve to eighteen minutes). Live demos you can interrupt. Closing DJ.
+        </p>
+        <p class="why__signoff">— Brooklyn. October. The list opens in September.</p>
+      </div>
+    </section>
+    <!-- ─── programme grid · Wave 01 ───────────────────────── -->
+    <section class="program" id="program" aria-labelledby="program-h">
+      <header class="section-head">
+        <p class="section-eyebrow"><span class="num tnum">03</span> · Programme · Wave 01</p>
+        <h2 class="section-h" id="program-h">Six of twelve slots announced.</h2>
+        <p class="section-note">Wave 02 reveals 09 Sep · final programme 30 Sep · launches stay sealed until the night.</p>
+      </header>
+      <ul class="program__grid">
+        <li class="card card--keynote">
+          <p class="card__time tnum">8:30 PM</p>
+          <p class="card__type">Opening keynote</p>
+          <h3 class="card__h">A short talk on shipping under constraint.</h3>
+          <p class="card__sub">Twelve minutes. From an engineer who's released compilers to production for the last decade.</p>
+          <p class="card__name">— announced soon</p>
+        </li>
+        <li class="card card--launch">
+          <p class="card__time tnum">9:00 PM</p>
+          <p class="card__type">Live launch · 01</p>
+          <h3 class="card__h">A new way to ship developer tools.</h3>
+          <p class="card__sub">First public demo. Press embargo lifts at the door.</p>
+          <p class="card__name">— sealed until the night</p>
+        </li>
+        <li class="card card--talk">
+          <p class="card__time tnum">9:45 PM</p>
+          <p class="card__type">Talk</p>
+          <h3 class="card__h">Live coding · forty-five minutes · no slides.</h3>
+          <p class="card__sub">A working session, in front of the room, on a real production codebase.</p>
+          <p class="card__name">— announced soon</p>
+        </li>
+        <li class="card card--tba">
+          <p class="card__time tnum">10:30 PM</p>
+          <p class="card__type">Wave 02</p>
+          <h3 class="card__h">Reveal · 09 Sep 2026.</h3>
+          <p class="card__sub">A speaker we're glad to have. The third name we're announcing first.</p>
+          <p class="card__name">TBA</p>
+        </li>
+        <li class="card card--launch">
+          <p class="card__time tnum">11:30 PM</p>
+          <p class="card__type">Live launch · 02</p>
+          <h3 class="card__h">Open-source. Day one. The repo opens during the demo.</h3>
+          <p class="card__sub">Bring a laptop if you'd like to follow along.</p>
+          <p class="card__name">— sealed until the night</p>
+        </li>
+        <li class="card card--closing">
+          <p class="card__time tnum">12:30 AM</p>
+          <p class="card__type">Closing</p>
+          <h3 class="card__h">Eight engineers · one sentence each.</h3>
+          <p class="card__sub">Then dancing. The DJ takes over at one.</p>
+          <p class="card__name">— announced soon</p>
+        </li>
+      </ul>
+    </section>
+    <!-- ─── rsvp · join the list ───────────────────────────── -->
+    <section class="rsvp" id="rsvp" aria-labelledby="rsvp-h">
+      <div class="rsvp__inner">
+        <p class="section-eyebrow"><span class="num tnum">04</span> · Tickets</p>
+        <h2 class="rsvp__h" id="rsvp-h">Two emails. One night.</h2>
+        <p class="rsvp__lead">
+          Join the public list and get early access to Wave 01 tickets when they open on 09 Sep. We send the address two days before doors and a final note 24 hours out — that's it.
+        </p>
+        <form class="rsvp__form" id="rsvp-form" novalidate>
+          <div class="rsvp__row">
+            <label class="rsvp__field">
+              <span class="rsvp__field-label">Email</span>
+              <input
+                type="email"
+                name="email"
+                id="rsvp-email"
+                autocomplete="email"
+                placeholder="you@studio.work"
+                required
+                aria-describedby="rsvp-help"
+              />
+            </label>
+            <button class="cta cta--primary cta--lg" type="submit" data-state="default">
+              <span class="cta__label">Get on the list</span>
+              <span class="cta__arrow" aria-hidden="true">→</span>
+            </button>
+          </div>
+          <p class="rsvp__help" id="rsvp-help">
+            <span class="tnum">Wave 01 · $140</span> · <span class="tnum">Wave 02 · $180</span> · <span class="tnum">Wave 03 · $220</span> at the door, capacity permitting.
+          </p>
+          <output class="rsvp__success" for="rsvp-email" aria-live="polite"></output>
+        </form>
+      </div>
+    </section>
+    <!-- ─── FAQ · conversational ───────────────────────────── -->
+    <section class="faq" id="faq" aria-labelledby="faq-h">
+      <header class="section-head">
+        <p class="section-eyebrow"><span class="num tnum">05</span> · Questions</p>
+        <h2 class="section-h" id="faq-h">A few honest answers.</h2>
+      </header>
+      <div class="faq__list">
+        <details class="faq__item">
+          <summary>
+            <span>What exactly is Hyperlane?</span>
+            <span class="faq__chev" aria-hidden="true">+</span>
+          </summary>
+          <div class="faq__a">
+            <p>One night, twelve hours, eight programmed slots. Four of those slots are live product launches — first public demos, with the team that built it taking questions afterward. Talks are short (twelve to eighteen minutes). No panels. No badges. The room itself is the after-show.</p>
+          </div>
+        </details>
+        <details class="faq__item">
+          <summary>
+            <span>Who comes?</span>
+            <span class="faq__chev" aria-hidden="true">+</span>
+          </summary>
+          <div class="faq__a">
+            <p>Roughly: half engineers, a quarter designers, a quarter everything adjacent — founders, ML researchers, devrel, technical writers. The list is public; the seats are not. Tickets are not transferable.</p>
+          </div>
+        </details>
+        <details class="faq__item">
+          <summary>
+            <span>Where is it, exactly?</span>
+            <span class="faq__chev" aria-hidden="true">+</span>
+          </summary>
+          <div class="faq__a">
+            <p>A warehouse on the Williamsburg waterfront. We release the address forty-eight hours before doors, to ticketed guests only. There are real reasons.</p>
+          </div>
+        </details>
+        <details class="faq__item">
+          <summary>
+            <span>How much?</span>
+            <span class="faq__chev" aria-hidden="true">+</span>
+          </summary>
+          <div class="faq__a">
+            <p>Three waves. Wave 01 (early list, you're reading this) opens at <span class="tnum">$140</span>. Wave 02 at <span class="tnum">$180</span>. Wave 03 at the door, capacity permitting, <span class="tnum">$220</span>. We don't do tiers, comp lists, or sponsorship seats.</p>
+          </div>
+        </details>
+        <details class="faq__item">
+          <summary>
+            <span>Is it recorded?</span>
+            <span class="faq__chev" aria-hidden="true">+</span>
+          </summary>
+          <div class="faq__a">
+            <p>Talks are recorded and released thirty days after the event. The launches and live demos are not streamed and not recorded — you have to be in the room.</p>
+          </div>
+        </details>
+        <details class="faq__item">
+          <summary>
+            <span>Refunds?</span>
+            <span class="faq__chev" aria-hidden="true">+</span>
+          </summary>
+          <div class="faq__a">
+            <p>Up to seven days before doors. After that we'll move your seat to the waitlist and credit you toward the next room.</p>
+          </div>
+        </details>
+        <details class="faq__item">
+          <summary>
+            <span>I'd like to launch something. Can I?</span>
+            <span class="faq__chev" aria-hidden="true">+</span>
+          </summary>
+          <div class="faq__a">
+            <p>Maybe. Two of the four launch slots are still open. Email <a href="mailto:launches@hyperlane.events">launches@hyperlane.events</a> with what you're shipping and we'll write back. We are not a sponsorship channel; the slot has to be a real launch.</p>
+          </div>
+        </details>
+      </div>
+    </section>
+  </main>
+  <!-- ─── footer · Ft5 statement ──────────────────────────── -->
+  <footer class="footer">
+    <div class="footer__inner">
+      <p class="footer__statement">
+        <em>Built late. Shipped live.</em> One room a year — for the people who'd be coding tonight anyway.
+      </p>
+      <div class="footer__meta">
+        <p class="footer__line tnum">Hyperlane / 26 · 17 Oct 2026 · Brooklyn · 7 PM</p>
+        <ul class="footer__links">
+          <li><a href="#main">Top</a></li>
+          <li><a href="#program">Programme</a></li>
+          <li><a href="#rsvp">List</a></li>
+          <li><a href="mailto:hello@hyperlane.events">hello@hyperlane.events</a></li>
+        </ul>
+      </div>
+    </div>
+  </footer>
+  <script src="script.js" defer></script>
+</body>
+</html>

package/templates/vite/.howone/skills/hallmark/site/examples/hyperlane/script.js ADDED Viewed

@@ -0,0 +1,103 @@
+/* Hallmark · script.js
+ * scoped behaviours: HP3 cursor-spotlight (hero only) · countdown · form silent-success
+ */
+(() => {
+  "use strict";
+  const reduced =
+    window.matchMedia &&
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  /* ── HP3 cursor spotlight · scoped to hero only ────────── */
+  const hero = document.querySelector(".hero");
+  if (hero && !reduced) {
+    let raf = 0;
+    let pendingX = 0;
+    let pendingY = 0;
+    const apply = () => {
+      raf = 0;
+      hero.style.setProperty("--mx", `${pendingX}px`);
+      hero.style.setProperty("--my", `${pendingY}px`);
+    };
+    hero.addEventListener("pointermove", (e) => {
+      const r = hero.getBoundingClientRect();
+      pendingX = e.clientX - r.left;
+      pendingY = e.clientY - r.top;
+      if (!raf) raf = requestAnimationFrame(apply);
+    });
+  }
+  /* ── live countdown to event start ─────────────────────── */
+  const cd = document.getElementById("countdown");
+  if (cd && cd.dataset.target) {
+    const target = new Date(cd.dataset.target).getTime();
+    if (!Number.isNaN(target)) {
+      const tick = () => {
+        let diff = target - Date.now();
+        if (diff <= 0) {
+          cd.textContent = "live";
+          return false;
+        }
+        const d = Math.floor(diff / 86_400_000); diff -= d * 86_400_000;
+        const h = Math.floor(diff / 3_600_000);  diff -= h * 3_600_000;
+        const m = Math.floor(diff / 60_000);     diff -= m * 60_000;
+        const s = Math.floor(diff / 1000);
+        cd.textContent =
+          `${d}d ${String(h).padStart(2, "0")}h ` +
+          `${String(m).padStart(2, "0")}m ${String(s).padStart(2, "0")}s`;
+        return true;
+      };
+      tick();
+      setInterval(() => { tick(); }, 1000);
+    }
+  }
+  /* ── nav state on scroll (sticky pill polish) ──────────── */
+  const nav = document.querySelector(".nav");
+  if (nav) {
+    let lastState = "rest";
+    const onScroll = () => {
+      const next = window.scrollY > 24 ? "scrolled" : "rest";
+      if (next !== lastState) {
+        nav.dataset.state = next;
+        lastState = next;
+      }
+    };
+    onScroll();
+    window.addEventListener("scroll", onScroll, { passive: true });
+  }
+  /* ── form silent-success (optimistic, no toast) ────────── */
+  const form = document.getElementById("rsvp-form");
+  if (form) {
+    const button = form.querySelector("button[type='submit']");
+    const success = form.querySelector(".rsvp__success");
+    const input = form.querySelector("input[type='email']");
+    form.addEventListener("submit", (e) => {
+      e.preventDefault();
+      if (!input || !input.value || !input.checkValidity()) {
+        input?.focus();
+        return;
+      }
+      if (button) {
+        button.dataset.state = "loading";
+        button.querySelector(".cta__label").textContent = "Joining…";
+      }
+      // simulated; wire to real endpoint when available
+      setTimeout(() => {
+        if (button) {
+          button.dataset.state = "success";
+          button.querySelector(".cta__label").textContent = "On the list";
+          button.querySelector(".cta__arrow").textContent = "✓";
+        }
+        if (success) {
+          success.dataset.state = "ok";
+          success.textContent = `You're on the list, ${input.value}. Wave 01 opens 09 Sep — we'll write first.`;
+        }
+        input.disabled = true;
+      }, 480);
+    });
+  }
+})();