kward 0.70.0 → 0.72.0

data/templates/default/fulldoc/html/css/kward.css

@@ -10,6 +10,13 @@
   --kward-accent: #9caf35;
   --kward-accent-bright: #d2df62;
   --kward-code: #030604;
+  --kward-syntax-comment: #7f8b67;
+  --kward-syntax-constant: #f0bf6a;
+  --kward-syntax-keyword: #d2df62;
+  --kward-syntax-method: #b8d852;
+  --kward-syntax-string: #8fd15b;
+  --kward-syntax-symbol: #ff7f6f;
+  --kward-syntax-variable: #a7c884;
 }
 
 html {
@@ -131,12 +138,31 @@ body.kward-docs::before {
   width: 1px;
 }
 
-.kward-guide-search {
+.kward-guide-search,
+.kward-api-index-link {
   justify-self: end;
+}
+
+.kward-guide-search {
   position: relative;
   width: min(280px, 24vw);
 }
 
+.kward-api-index-link {
+  border: 1px solid rgba(156, 175, 53, 0.42);
+  border-radius: 999px;
+  color: var(--kward-ink);
+  padding: 10px 14px;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.kward-api-index-link:hover,
+.kward-api-index-link:focus {
+  background: rgba(156, 175, 53, 0.13);
+  color: var(--kward-accent-bright);
+}
+
 .kward-guide-search input {
   background: rgba(3, 6, 4, 0.72);
   border: 1px solid rgba(156, 175, 53, 0.42);
@@ -315,7 +341,41 @@ body.kward-docs a {
   color: var(--kward-accent-bright);
 }
 
-body.kward-docs pre {
+body.kward-docs #content quote,
+body.kward-docs #filecontents quote {
+  border-left: 3px solid var(--kward-accent);
+  color: var(--kward-ink);
+  display: block;
+  font-style: italic;
+  font-size: 18px;
+  line-height: 1.8;
+  margin: 28px 0;
+  padding: 8px 0 8px 46px;
+  position: relative;
+}
+
+body.kward-docs #content quote::before,
+body.kward-docs #filecontents quote::before {
+  color: var(--kward-accent);
+  content: "\201C";
+  font-family: Georgia, "Times New Roman", serif;
+  font-size: 80px;
+  font-style: normal;
+  left: 4px;
+  line-height: 1;
+  opacity: 0.55;
+  position: absolute;
+  top: -10px;
+}
+
+body.kward-docs #content quote br,
+body.kward-docs #filecontents quote br {
+  content: "";
+  display: block;
+  margin-bottom: 4px;
+}
+
+body.kward-docs #content pre {
   background: var(--kward-code);
   border: 1px solid rgba(149, 169, 52, 0.22);
   border-radius: 10px;
@@ -328,6 +388,90 @@ body.kward-docs code {
   border-radius: 6px;
 }
 
+body.kward-docs pre.code .comment {
+  color: var(--kward-syntax-comment);
+  font-style: italic;
+}
+
+body.kward-docs pre.code .const,
+body.kward-docs pre.code .constant,
+body.kward-docs #content .summary_desc pre.code .const > .object_link a,
+body.kward-docs #content .docstring pre.code .const > .object_link a {
+  color: var(--kward-syntax-constant);
+}
+
+body.kward-docs pre.code .kw,
+body.kward-docs pre.code .rubyid_require,
+body.kward-docs pre.code .rubyid_extend,
+body.kward-docs pre.code .rubyid_include {
+  color: var(--kward-syntax-keyword);
+  font-weight: 700;
+}
+
+body.kward-docs pre.code .id,
+body.kward-docs #content .summary_desc pre.code .id > .object_link a,
+body.kward-docs #content .docstring pre.code .id > .object_link a {
+  color: var(--kward-syntax-method);
+}
+
+body.kward-docs pre.code .tstring_content,
+body.kward-docs pre.code .heredoc_beg,
+body.kward-docs pre.code .heredoc_end,
+body.kward-docs pre.code .qwords_beg,
+body.kward-docs pre.code .qwords_end,
+body.kward-docs pre.code .qwords_sep,
+body.kward-docs pre.code .words_beg,
+body.kward-docs pre.code .words_end,
+body.kward-docs pre.code .words_sep,
+body.kward-docs pre.code .qsymbols_beg,
+body.kward-docs pre.code .qsymbols_end,
+body.kward-docs pre.code .qsymbols_sep,
+body.kward-docs pre.code .symbols_beg,
+body.kward-docs pre.code .symbols_end,
+body.kward-docs pre.code .symbols_sep,
+body.kward-docs pre.code .tstring,
+body.kward-docs pre.code .dstring,
+body.kward-docs pre.code .regexp,
+body.kward-docs .dregexp {
+  color: var(--kward-syntax-string);
+}
+
+body.kward-docs pre.code .label,
+body.kward-docs pre.code .symbol {
+  color: var(--kward-syntax-symbol);
+}
+
+body.kward-docs pre.code .ivar,
+body.kward-docs pre.code .gvar,
+body.kward-docs pre.code .rubyid_backref,
+body.kward-docs pre.code .rubyid_nth_ref {
+  color: var(--kward-syntax-variable);
+}
+
+body.kward-docs pre.code .op,
+body.kward-docs pre.code .period,
+body.kward-docs pre.code .comma,
+body.kward-docs pre.code .lparen,
+body.kward-docs pre.code .rparen,
+body.kward-docs pre.code .lbrace,
+body.kward-docs pre.code .rbrace,
+body.kward-docs pre.code .lbracket,
+body.kward-docs pre.code .rbracket {
+  color: rgba(239, 232, 208, 0.74);
+}
+
+body.kward-docs pre.code a,
+body.kward-docs pre.code a:visited {
+  text-decoration-color: rgba(210, 223, 98, 0.45);
+  text-decoration-thickness: 1px;
+  text-underline-offset: 2px;
+}
+
+body.kward-docs pre.code a:hover {
+  background: rgba(156, 175, 53, 0.16);
+  color: var(--kward-accent-bright);
+}
+
 body.kward-docs .copy-code-button {
   background: transparent;
   border: 1px solid rgba(156, 175, 53, 0.48);
@@ -364,7 +508,8 @@ body.kward-docs #footer {
   }
 
   .kward-topnav,
-  .kward-guide-search {
+  .kward-guide-search,
+  .kward-api-index-link {
     display: none;
   }
 
@@ -426,11 +571,10 @@ body.kward-docs #footer {
 }
 
 /*
-  Hero tagline "swosh": "Your terminal." flies out to the left and is
-  replaced by "Your RPC frontend." flying in from the right, then cycles
-  back. The second line mirrors it from the opposite side — "Your agent."
-  flies out to the right and is replaced by "Your engine." flying in from
-  the left — both lines swap in sync. Pure CSS — no JS. The global
+  Hero tagline "swosh": cycles each line through three phrases. The first
+  line moves right-to-left: "Your terminal.", "Your RPC frontend.", then
+  "Your workflow." The second line mirrors it left-to-right: "Your agent.",
+  "Your LLM engine.", then "Your harness." Pure CSS — no JS. The global
   @media (prefers-reduced-motion) rule above collapses the animation to
   the static original copy ("Your terminal. Your agent.") so it remains
   accessible and calm.
@@ -455,68 +599,95 @@ body.kward-docs #footer {
   will-change: transform, opacity;
 }
 
-/* The longer text ("Your RPC frontend.") stays in flow to size the box;
-   the shorter "Your terminal." overlays it absolutely. */
-.kward-swosh-text-a {
+/* The longest text ("Your RPC frontend.") stays in flow to size the box;
+   the shorter phrases overlay it absolutely. */
+.kward-swosh-text-a,
+.kward-swosh-text-e {
   left: 0.08em;
   position: absolute;
   top: 0.16em;
 }
 
 .kward-swosh-text-a {
-  animation: kward-swosh-a 12s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
+  animation: kward-swosh-a 18s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
 }
 
 .kward-swosh-text-b {
-  animation: kward-swosh-b 12s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
+  animation: kward-swosh-b 18s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
   position: relative;
 }
 
+.kward-swosh-text-e {
+  animation: kward-swosh-e 18s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
+}
+
 @keyframes kward-swosh-a {
-  0%, 40%   { transform: translateX(0);     opacity: 1; filter: none; }
-  50%       { transform: translateX(-140%); opacity: 0; filter: blur(3px); }
-  51%, 88%  { transform: translateX(140%);  opacity: 0; filter: none; }
+  0%, 25%   { transform: translateX(0);     opacity: 1; filter: none; }
+  33%       { transform: translateX(-140%); opacity: 0; filter: blur(3px); }
+  34%, 92%  { transform: translateX(140%);  opacity: 0; filter: none; }
   100%      { transform: translateX(0);     opacity: 1; filter: none; }
 }
 
 @keyframes kward-swosh-b {
-  0%, 40%   { transform: translateX(140%);  opacity: 0; filter: none; }
-  50%       { transform: translateX(0);     opacity: 1; filter: none; }
-  88%       { transform: translateX(0);     opacity: 1; filter: none; }
+  0%, 25%   { transform: translateX(140%);  opacity: 0; filter: none; }
+  33%       { transform: translateX(0);     opacity: 1; filter: none; }
+  58%       { transform: translateX(0);     opacity: 1; filter: none; }
+  66%       { transform: translateX(-140%); opacity: 0; filter: blur(3px); }
+  67%, 100% { transform: translateX(140%);  opacity: 0; filter: none; }
+}
+
+@keyframes kward-swosh-e {
+  0%, 58%   { transform: translateX(140%);  opacity: 0; filter: none; }
+  66%       { transform: translateX(0);     opacity: 1; filter: none; }
+  92%       { transform: translateX(0);     opacity: 1; filter: none; }
   100%      { transform: translateX(-140%); opacity: 0; filter: blur(3px); }
 }
 
 /*
-  Second line, mirrored: "Your agent." exits to the right while
-  "Your LLM engine." enters from the left (left-to-right), in sync with
-  the first swosh. Both texts keep the accent-bright color of the
-  original "Your agent." span.
+  Second line, mirrored left-to-right. All texts keep the accent-bright
+  color of the original "Your agent." span.
 */
-.kward-hero h1 .kward-swosh-text-c {
-  animation: kward-swosh-c 12s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
+.kward-hero h1 .kward-swosh-text-c,
+.kward-hero h1 .kward-swosh-text-f {
   color: var(--kward-accent-bright);
   left: 0.08em;
   position: absolute;
   top: 0.16em;
 }
 
+.kward-hero h1 .kward-swosh-text-c {
+  animation: kward-swosh-c 18s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
+}
+
 .kward-hero h1 .kward-swosh-text-d {
-  animation: kward-swosh-d 12s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
+  animation: kward-swosh-d 18s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
   color: var(--kward-accent-bright);
   position: relative;
 }
 
+.kward-hero h1 .kward-swosh-text-f {
+  animation: kward-swosh-f 18s cubic-bezier(0.22, 0.61, 0.36, 1) infinite;
+}
+
 @keyframes kward-swosh-c {
-  0%, 40%  { transform: translateX(0);     opacity: 1; filter: none; }
-  50%       { transform: translateX(140%);  opacity: 0; filter: blur(3px); }
-  51%, 88%  { transform: translateX(-140%); opacity: 0; filter: none; }
+  0%, 25%   { transform: translateX(0);     opacity: 1; filter: none; }
+  33%       { transform: translateX(140%);  opacity: 0; filter: blur(3px); }
+  34%, 92%  { transform: translateX(-140%); opacity: 0; filter: none; }
   100%      { transform: translateX(0);     opacity: 1; filter: none; }
 }
 
 @keyframes kward-swosh-d {
-  0%, 40%  { transform: translateX(-140%); opacity: 0; filter: none; }
-  50%       { transform: translateX(0);     opacity: 1; filter: none; }
-  88%       { transform: translateX(0);     opacity: 1; filter: none; }
+  0%, 25%   { transform: translateX(-140%); opacity: 0; filter: none; }
+  33%       { transform: translateX(0);     opacity: 1; filter: none; }
+  58%       { transform: translateX(0);     opacity: 1; filter: none; }
+  66%       { transform: translateX(140%);  opacity: 0; filter: blur(3px); }
+  67%, 100% { transform: translateX(-140%); opacity: 0; filter: none; }
+}
+
+@keyframes kward-swosh-f {
+  0%, 58%   { transform: translateX(-140%); opacity: 0; filter: none; }
+  66%       { transform: translateX(0);     opacity: 1; filter: none; }
+  92%       { transform: translateX(0);     opacity: 1; filter: none; }
   100%      { transform: translateX(140%);  opacity: 0; filter: blur(3px); }
 }
 
@@ -1081,17 +1252,26 @@ body.kward-docs .kward-home #footer {
   border-radius: 12px;
   box-shadow: 0 24px 70px rgba(0, 0, 0, 0.48);
   display: none;
-  gap: 22px;
-  grid-template-columns: repeat(4, minmax(170px, 1fr));
+  gap: 16px;
+  grid-template-columns: repeat(3, minmax(160px, 220px));
   left: 50%;
+  max-width: calc(100vw - 48px);
   opacity: 0;
-  padding: 28px 22px 22px;
+  padding: 20px;
   pointer-events: none;
   position: absolute;
   top: 100%;
   transform: translate(-50%, -8px);
   transition: opacity 140ms ease, transform 140ms ease;
-  width: min(920px, calc(100vw - 48px));
+  width: max-content;
+}
+
+.kward-advanced-nav-dropdown {
+  grid-template-columns: repeat(3, minmax(150px, 200px));
+}
+
+.kward-api-nav-dropdown {
+  grid-template-columns: repeat(2, minmax(170px, 210px));
 }
 
 .kward-nav-dropdown::before {
@@ -1257,6 +1437,134 @@ body.kward-docs .kward-home #footer {
   }
 }
 
+/* YARD's class/method/file list pages use a separate full_list template. */
+.kward-full-list-body .kward-topbar {
+  position: relative;
+}
+
+.kward-full-list-body .kward-page {
+  padding-top: 40px;
+}
+
+.kward-full-list-body #content {
+  background: var(--kward-panel-strong);
+  border: 1px solid var(--kward-border);
+  border-radius: 14px;
+  box-shadow: 0 26px 70px rgba(0, 0, 0, 0.28);
+  padding: 38px;
+}
+
+.kward-full-list-body .fixed_header {
+  background: transparent;
+  height: auto;
+  margin: 0 0 24px;
+  padding: 0;
+  position: static;
+  width: auto;
+}
+
+.kward-full-list-body #full_list_header {
+  color: var(--kward-ink);
+  font-size: clamp(36px, 5vw, 62px);
+  letter-spacing: -0.04em;
+  line-height: 0.98;
+  margin: 0 0 18px;
+  padding: 0;
+}
+
+.kward-full-list-body #full_list_nav {
+  color: var(--kward-muted);
+  font-size: 14px;
+  margin: 0 0 18px;
+}
+
+.kward-full-list-body #full_list_nav a,
+.kward-full-list-body #full_list_nav a:visited {
+  color: var(--kward-accent-bright);
+}
+
+.kward-full-list-body #full_list_nav a:hover {
+  color: #f0f7a0;
+}
+
+.kward-full-list-body #search {
+  color: var(--kward-muted);
+  font-size: 14px;
+  margin: 0;
+  padding: 0;
+  width: auto;
+}
+
+.kward-full-list-body #search input {
+  background: rgba(3, 6, 4, 0.72);
+  border: 1px solid rgba(156, 175, 53, 0.42);
+  border-radius: 999px;
+  color: var(--kward-ink);
+  font: inherit;
+  margin-left: 8px;
+  outline: none;
+  padding: 8px 12px;
+  width: min(260px, 60vw);
+}
+
+.kward-full-list-body #search input:focus {
+  border-color: var(--kward-accent-bright);
+  box-shadow: 0 0 0 3px rgba(156, 175, 53, 0.18);
+}
+
+.kward-full-list-body #full_list {
+  background: rgba(3, 6, 4, 0.42);
+  border: 1px solid rgba(156, 175, 53, 0.22);
+  border-radius: 12px;
+  font-size: 15px;
+  margin: 0;
+  overflow: auto;
+  padding: 8px;
+}
+
+.kward-full-list-body #full_list li {
+  color: var(--kward-muted);
+}
+
+.kward-full-list-body #full_list li.odd,
+.kward-full-list-body #full_list li.even {
+  background: transparent;
+}
+
+.kward-full-list-body #full_list li .item {
+  border-radius: 8px;
+  padding-bottom: 7px;
+  padding-top: 7px;
+}
+
+.kward-full-list-body #full_list .item:hover {
+  background: rgba(156, 175, 53, 0.13);
+}
+
+.kward-full-list-body #full_list a,
+.kward-full-list-body #full_list a:visited {
+  color: var(--kward-ink);
+}
+
+.kward-full-list-body #full_list a:hover {
+  color: var(--kward-accent-bright);
+}
+
+.kward-full-list-body #full_list li.clicked > .item {
+  background: rgba(156, 175, 53, 0.22);
+  color: var(--kward-ink);
+}
+
+.kward-full-list-body #full_list li.clicked > .item a,
+.kward-full-list-body #full_list li.clicked > .item a:visited {
+  color: var(--kward-accent-bright);
+}
+
+.kward-full-list-body #noresults {
+  background: transparent;
+  color: var(--kward-muted);
+}
+
 /* Pages no longer use YARD's iframe/sidebar layout. */
 .kward-page {
   box-sizing: border-box;
@@ -1301,17 +1609,14 @@ body.kward-docs #main.kward-home {
   justify-content: center;
 }
 
-/* The generated YARD TOC is useful for API pages but too noisy on guide pages. */
-.kward-guide-page #toc {
-  display: none;
-}
+/* The generated YARD TOC is shown on all docs pages. Use the `kward-no-toc` marker to suppress it per page. */
 
 
 /* Code blocks own their copy action. */
 body.kward-docs .code-copy-wrapper {
+  display: flow-root;
   margin: 16px 0 24px;
   position: relative;
-  width: 100%;
 }
 
 body.kward-docs .code-copy-wrapper pre,
@@ -1323,11 +1628,14 @@ body.kward-docs .code-copy-wrapper pre.code {
 }
 
 body.kward-docs .code-copy-wrapper .copy-code-button {
+  background: #020503;
+  box-shadow: 0 0 0 4px #020503;
   float: none;
   margin: 0;
   position: absolute;
   right: 12px;
   top: 12px;
+  z-index: 2;
 }
 
 
@@ -1588,8 +1896,9 @@ body.kward-docs #filecontents table {
   border-collapse: collapse;
   color: var(--kward-ink);
   display: block;
+  max-width: 100%;
   overflow-x: auto;
-  width: 100%;
+  width: fit-content;
 }
 
 body.kward-docs #content th,
@@ -1737,6 +2046,17 @@ body.kward-docs ul.toplevel a:active {
     color: #000;
   }
 
+  body.kward-docs #content quote,
+  body.kward-docs #filecontents quote {
+    border-left-color: #999;
+    color: #000;
+  }
+
+  body.kward-docs #content quote::before,
+  body.kward-docs #filecontents quote::before {
+    color: #999;
+  }
+
   .kward-page {
     padding: 0;
     max-width: none;

data/templates/default/fulldoc/html/full_list.erb

@@ -0,0 +1,107 @@
+<!DOCTYPE html>
+<html <%= "lang=\"#{html_lang}\"" unless html_lang.nil? %>>
+  <head>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta charset="<%= charset %>">
+    <% stylesheets_full_list.each do |stylesheet| %>
+      <link rel="stylesheet" href="<%= mtime_url(stylesheet) %>" type="text/css" media="screen">
+    <% end %>
+
+    <% javascripts_full_list.each do |javascript| %>
+      <script type="text/javascript" charset="utf-8" src="<%= mtime_url(javascript) %>"></script>
+    <% end %>
+
+    <title><%= @list_title %></title>
+    <base id="base_target" target="_parent">
+  </head>
+  <body class="kward-docs kward-content-body kward-full-list-body">
+    <a href="#content" class="kward-skip-link">Skip to content</a>
+
+    <header class="kward-topbar">
+      <a class="kward-brand" href="index.html">
+        <img class="kward-brand-logo" src="images/kward_logo.png" alt="" aria-hidden="true">
+        <span>
+          <strong>Kward</strong>
+        </span>
+      </a>
+      <button class="kward-nav-toggle" type="button" aria-expanded="false" aria-controls="kward-primary-nav" aria-label="Toggle navigation menu" onclick="document.body.classList.toggle('kward-nav-open'); this.setAttribute('aria-expanded', document.body.classList.contains('kward-nav-open'))">
+        <span class="kward-nav-toggle-bar"></span>
+        <span class="kward-nav-toggle-bar"></span>
+        <span class="kward-nav-toggle-bar"></span>
+        <span class="kward-sr-only">Menu</span>
+      </button>
+      <nav id="kward-primary-nav" class="kward-topnav" aria-label="Primary navigation">
+        <a href="index.html">Home</a>
+        <div class="kward-nav-menu">
+          <a class="kward-nav-menu-link" href="file.README.html">Guides</a>
+          <button class="kward-nav-menu-button" type="button" aria-label="Expand guides" aria-expanded="false">⌄</button>
+          <div class="kward-nav-dropdown">
+            <% guide_groups.each do |title, items| %>
+              <section>
+                <h2><%= h title %></h2>
+                <% items.each do |label, link| %>
+                  <a href="<%= url_for(link) %>"><%= h label %></a>
+                <% end %>
+              </section>
+            <% end %>
+          </div>
+        </div>
+        <div class="kward-nav-menu">
+          <a class="kward-nav-menu-link" href="file.extensibility.html">Advanced</a>
+          <button class="kward-nav-menu-button" type="button" aria-label="Expand advanced guides" aria-expanded="false">⌄</button>
+          <div class="kward-nav-dropdown kward-advanced-nav-dropdown">
+            <% extension_groups.each do |title, items| %>
+              <section>
+                <h2><%= h title %></h2>
+                <% items.each do |label, link| %>
+                  <a href="<%= url_for(link) %>"><%= h label %></a>
+                <% end %>
+              </section>
+            <% end %>
+          </div>
+        </div>
+        <div class="kward-nav-menu active">
+          <a class="kward-nav-menu-link" href="file.api.html">API Docs</a>
+          <button class="kward-nav-menu-button" type="button" aria-label="Expand API docs" aria-expanded="false">⌄</button>
+          <div class="kward-nav-dropdown kward-api-nav-dropdown">
+            <% api_groups.each do |title, items| %>
+              <section>
+                <h2><%= h title %></h2>
+                <% items.each do |label, link| %>
+                  <a href="<%= url_for(link) %>"><%= h label %></a>
+                <% end %>
+              </section>
+            <% end %>
+          </div>
+        </div>
+      </nav>
+      <a class="kward-api-index-link" href="class_list.html">Search API index</a>
+    </header>
+
+    <main class="kward-page">
+      <div id="content" class="kward-content-page kward-api-page">
+        <div class="fixed_header">
+          <h1 id="full_list_header"><%= @list_title %></h1>
+          <div id="full_list_nav">
+            <% menu_lists.each do |list| %>
+              <span><a target="_self" href="<%= url_for_list list[:type] %>">
+                <%= list[:title] %>
+              </a></span>
+            <% end %>
+          </div>
+
+          <div id="search">
+            <label for="search-class">Search:</label>
+            <input id="search-class" type="text">
+          </div>
+        </div>
+
+        <ul id="full_list" class="<%= @list_class || @list_type %>">
+          <%= erb "full_list_#{@list_type}" %>
+        </ul>
+      </div>
+    </main>
+
+    <script type="text/javascript" charset="utf-8" src="js/kward.js"></script>
+  </body>
+</html>