`nx_kit2.nx` source

↩ module page · 336 lines · 35613 B
1// nx_kit2.nx -- ALTERNATE S-class design systems so archetypes stop looking alike. Two COMPLETE, distinct
2// visual languages (own stylesheet + own layout grammar + own components), NOT the nx_sclass_kit reskinned:
3//   ke_* = "The Dispatch" -- an editorial / newspaper design (warm paper, double-rule masthead, serif display,
4//          drop-cap two-column lead, ruled article list). Used for BLOG/magazine.
5//   kg_* = "Exposure" -- a dark, full-bleed gallery (near-black, thin huge type, edge-to-edge tile grid with
6//          per-tile generative gradients + hover captions). Used for GALLERY + PORTFOLIO.
7// Both ship ADA by construction (skip-link, lang, <main id=main>, viewport, AAA contrast, reduced-motion) and
8// zero JS / zero third-party CSS. Pure emit functions (no syscalls -> composable by any emitter). license_tier: ORIGINAL
9
10func k2_puts(buf: *u8, off: i64, s: *u8) -> i64 { var o: i64=off; var i: i64=0; while s[i]!=(0 as u8){buf[o]=s[i]; o=o+1; i=i+1} return o }
11func k2_catn(buf: *u8, off: i64, v: i64) -> i64 {
  var m: i64=v; var oo: i64=off
  if m<0 { buf[oo]=45 as u8; oo=oo+1; m=0-m }
  var nd: i64=1; var t: i64=m
  while t>=10 { nd=nd+1; t=t/10 }
  var i: i64=nd-1
  while i>=0 { buf[oo+i]=(48+(m%10)) as u8; m=m/10; i=i-1 }
  return oo+nd
19}
20
21// ============================ EDITORIAL ("The Dispatch") ============================
22func ke_open(buf: *u8, off: i64, title: *u8, brand: *u8) -> i64 {
  var o: i64 = k2_puts(buf, off, "<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><title>" as *u8)
  o = k2_puts(buf, o, title)
  o = k2_puts(buf, o, "</title><style>" as *u8)
  o = k2_puts(buf, o, "body{margin:0;background:#F7F3EA;color:#1A1712;font:18px/1.7 Georgia,'Times New Roman',serif}.wrap{max-width:1080px;margin:0 auto;padding:0 28px}a{color:inherit}" as *u8)
  o = k2_puts(buf, o, ".skip-link{position:absolute;left:-999px}.skip-link:focus{left:16px;top:16px;background:#9B3B26;color:#fff;padding:10px 14px}:focus-visible{outline:3px solid #9B3B26;outline-offset:2px}" as *u8)
  o = k2_puts(buf, o, ".mast{text-align:center;padding:40px 0 16px;border-bottom:3px double #C9BEA9}.mast .np{font-size:clamp(2.4rem,7vw,4.2rem);font-weight:700;font-variant:small-caps;letter-spacing:.03em;margin:0}.mast .dl{margin-top:8px;font:italic .82rem/1 Georgia,serif;color:#6E6455;letter-spacing:.24em;text-transform:uppercase}.mast nav{margin-top:14px;font:700 .74rem/1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase}.mast nav a{color:#9B3B26;text-decoration:none;margin:0 12px}" as *u8)
  o = k2_puts(buf, o, ".lead{padding:46px 0;border-bottom:1px solid #D8CFC0}.lead .kick{font:700 .78rem/1 system-ui,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#9B3B26}.lead h1{font-size:clamp(2.1rem,5.4vw,3.8rem);line-height:1.05;margin:.3em 0 .2em;font-weight:800}.lead .deck{font-size:1.3rem;color:#4A4235;font-style:italic;max-width:42ch}.lead .by{margin:16px 0 22px;font:700 .76rem/1 system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#6E6455}" as *u8)
  o = k2_puts(buf, o, ".body{columns:2;column-gap:40px;text-align:justify}.body p{margin:0 0 1em}.body p:first-of-type::first-letter{font-size:3.4em;float:left;line-height:.72;padding:.02em .1em 0 0;font-weight:800;color:#9B3B26}@media(max-width:720px){.body{columns:1}}" as *u8)
  o = k2_puts(buf, o, ".more{padding:44px 0}.more h2{font:700 1rem/1 system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;border-bottom:2px solid #1A1712;padding-bottom:8px;margin:0 0 26px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:34px}@media(max-width:720px){.grid{grid-template-columns:1fr}}.art{border-top:1px solid #D8CFC0;padding-top:16px}.art h3{font-size:1.5rem;margin:0 0 .3em;line-height:1.15}.art .dek{color:#4A4235;margin:0 0 .5em}.art .m{font:700 .72rem/1 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#9B3B26}" as *u8)
  o = k2_puts(buf, o, ".sub{background:#1A1712;color:#F7F3EA;text-align:center;padding:54px 28px}.sub h2{font-size:clamp(1.7rem,4vw,2.5rem);margin:0 0 .3em}.sub p{color:#C9BEA9;max-width:46ch;margin:0 auto 20px}.sub a{display:inline-block;border:1px solid #F7F3EA;padding:12px 26px;text-decoration:none;letter-spacing:.1em;text-transform:uppercase;font:700 .82rem system-ui,sans-serif}" as *u8)
  o = k2_puts(buf, o, "footer{padding:28px 0;border-top:3px double #C9BEA9;text-align:center;color:#6E6455;font:italic .9rem Georgia,serif}</style></head><body><a class=\"skip-link\" href=\"#main\">Skip to content</a>" as *u8)
  o = k2_puts(buf, o, "<header class=\"mast\"><div class=\"wrap\"><p class=\"np\">" as *u8)
  o = k2_puts(buf, o, brand)
  o = k2_puts(buf, o, "</p><p class=\"dl\">A Nishi Publication</p><nav><a href=\"/factory/\">The Gallery</a><a href=\"/\">nishifamily.com</a></nav></div></header><main id=\"main\">" as *u8)
  return o
38}
39func ke_lead(buf: *u8, off: i64, kick: *u8, headline: *u8, deck: *u8, byline: *u8, body: *u8) -> i64 {
  var o: i64 = k2_puts(buf, off, "<article class=\"lead\"><div class=\"wrap\"><p class=\"kick\">" as *u8)
  o = k2_puts(buf, o, kick); o = k2_puts(buf, o, "</p><h1>" as *u8); o = k2_puts(buf, o, headline)
  o = k2_puts(buf, o, "</h1><p class=\"deck\">" as *u8); o = k2_puts(buf, o, deck)
  o = k2_puts(buf, o, "</p><p class=\"by\">" as *u8); o = k2_puts(buf, o, byline)
  o = k2_puts(buf, o, "</p><div class=\"body\">" as *u8); o = k2_puts(buf, o, body)
  o = k2_puts(buf, o, "</div></div></article>" as *u8)
  return o
47}
48func ke_more_open(buf: *u8, off: i64, label: *u8) -> i64 {
  var o: i64 = k2_puts(buf, off, "<section class=\"more\"><div class=\"wrap\"><h2>" as *u8)
  o = k2_puts(buf, o, label); o = k2_puts(buf, o, "</h2><div class=\"grid\">" as *u8)
  return o
52}
53func ke_item(buf: *u8, off: i64, headline: *u8, dek: *u8, meta: *u8) -> i64 {
  var o: i64 = k2_puts(buf, off, "<article class=\"art\"><p class=\"m\">" as *u8)
  o = k2_puts(buf, o, meta); o = k2_puts(buf, o, "</p><h3>" as *u8); o = k2_puts(buf, o, headline)
  o = k2_puts(buf, o, "</h3><p class=\"dek\">" as *u8); o = k2_puts(buf, o, dek); o = k2_puts(buf, o, "</p></article>" as *u8)
  return o
58}
59func ke_more_close(buf: *u8, off: i64) -> i64 { return k2_puts(buf, off, "</div></div></section>" as *u8) }
60func ke_sub(buf: *u8, off: i64, h2: *u8, p: *u8, label: *u8, href: *u8) -> i64 {
  var o: i64 = k2_puts(buf, off, "<section class=\"sub\"><h2>" as *u8)
  o = k2_puts(buf, o, h2); o = k2_puts(buf, o, "</h2><p>" as *u8); o = k2_puts(buf, o, p)
  o = k2_puts(buf, o, "</p><a href=\"" as *u8); o = k2_puts(buf, o, href); o = k2_puts(buf, o, "\">" as *u8)
  o = k2_puts(buf, o, label); o = k2_puts(buf, o, "</a></section>" as *u8)
  return o
66}
67func ke_close(buf: *u8, off: i64, brand: *u8, note: *u8) -> i64 {
  var o: i64 = k2_puts(buf, off, "</main><footer><div class=\"wrap\">" as *u8)
  o = k2_puts(buf, o, brand); o = k2_puts(buf, o, " &middot; " as *u8); o = k2_puts(buf, o, note)
  o = k2_puts(buf, o, " &middot; Set sovereign on Nishi</div></footer></body></html>" as *u8)
  return o
72}
73
74// ============================ GALLERY ("Exposure") ============================
75func kg_open(buf: *u8, off: i64, title: *u8, brand: *u8) -> i64 {
  var o: i64 = k2_puts(buf, off, "<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><meta name=\"color-scheme\" content=\"dark\"><title>" as *u8)
  o = k2_puts(buf, o, title)
  o = k2_puts(buf, o, "</title><style>" as *u8)
  o = k2_puts(buf, o, "body{margin:0;background:#0B0B0D;color:#F5F5F7;font:16px/1.6 system-ui,-apple-system,'Segoe UI',sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit}" as *u8)
  o = k2_puts(buf, o, ".skip-link{position:absolute;left:-999px}.skip-link:focus{left:16px;top:16px;background:#E8B15A;color:#0B0B0D;padding:10px 14px}:focus-visible{outline:2px solid #E8B15A;outline-offset:3px}" as *u8)
  o = k2_puts(buf, o, ".bar{display:flex;justify-content:space-between;align-items:center;padding:20px 28px;position:sticky;top:0;background:rgba(11,11,13,.72);backdrop-filter:blur(8px);z-index:5;border-bottom:1px solid #17171C}.bar .b{font-weight:700;letter-spacing:.3em;text-transform:uppercase;font-size:.86rem}.bar a{color:#8A8A94;text-decoration:none;letter-spacing:.18em;text-transform:uppercase;font-size:.7rem}.bar a:hover{color:#E8B15A}" as *u8)
  o = k2_puts(buf, o, ".hd{padding:74px 28px 40px;max-width:1500px;margin:0 auto}.hd .k{color:#E8B15A;letter-spacing:.34em;text-transform:uppercase;font-size:.74rem;font-weight:600}.hd h1{font-size:clamp(2.6rem,9vw,7rem);font-weight:200;letter-spacing:-.02em;line-height:.96;margin:.16em 0}.hd .s{color:#8A8A94;max-width:54ch;font-size:1.1rem}" as *u8)
  o = k2_puts(buf, o, ".gr{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:4px;padding:0 4px 44px}.tile{position:relative;aspect-ratio:4/5;overflow:hidden;display:flex;align-items:flex-end;text-decoration:none;color:#fff}.tile::after{content:\"\";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.7),transparent 58%);z-index:1}.tile .cap{position:relative;z-index:2;padding:20px;transform:translateY(10px);opacity:.82;transition:transform .34s,opacity .34s}.tile:hover .cap{transform:none;opacity:1}.tile .cap b{display:block;font-size:1.18rem;font-weight:600}.tile .cap span{color:rgba(255,255,255,.72);font-size:.86rem}" as *u8)
  o = k2_puts(buf, o, ".cta{text-align:center;padding:82px 28px}.cta h2{font-size:clamp(2rem,5vw,3.2rem);font-weight:200;margin:0 0 .3em}.cta p{color:#8A8A94;max-width:48ch;margin:0 auto 26px}.cta a{color:#0B0B0D;background:#E8B15A;padding:14px 30px;text-decoration:none;font-weight:600;letter-spacing:.03em;border-radius:2px}footer{padding:32px 28px;color:#5A5A64;font-size:.8rem;border-top:1px solid #17171C;text-align:center}@media(prefers-reduced-motion:reduce){.tile .cap{transition:none}}" as *u8)
  o = k2_puts(buf, o, "</style></head><body><a class=\"skip-link\" href=\"#main\">Skip to content</a><header class=\"bar\"><span class=\"b\">" as *u8)
  o = k2_puts(buf, o, brand)
  o = k2_puts(buf, o, "</span><a href=\"/factory/\">All archetypes</a></header><main id=\"main\">" as *u8)
  return o
89}
90func kg_head(buf: *u8, off: i64, kick: *u8, big: *u8, sub: *u8) -> i64 {
  var o: i64 = k2_puts(buf, off, "<section class=\"hd\"><p class=\"k\">" as *u8)
  o = k2_puts(buf, o, kick); o = k2_puts(buf, o, "</p><h1>" as *u8); o = k2_puts(buf, o, big)
  o = k2_puts(buf, o, "</h1><p class=\"s\">" as *u8); o = k2_puts(buf, o, sub); o = k2_puts(buf, o, "</p></section>" as *u8)
  return o
95}
96func kg_grid_open(buf: *u8, off: i64) -> i64 { return k2_puts(buf, off, "<section class=\"gr\">" as *u8) }
97// one tile; generative gradient from idx so the grid reads as distinct works
98func kg_tile(buf: *u8, off: i64, idx: i64, cap: *u8, sub: *u8) -> i64 {
  let h1: i64 = (idx * 47) % 360
  let h2: i64 = (idx * 47 + 46) % 360
  var o: i64 = k2_puts(buf, off, "<a class=\"tile\" href=\"/factory/\" style=\"background:linear-gradient(135deg,hsl(" as *u8)
  o = k2_catn(buf, o, h1); o = k2_puts(buf, o, "deg 44% 32%),hsl(" as *u8)
  o = k2_catn(buf, o, h2); o = k2_puts(buf, o, "deg 58% 16%))\"><span class=\"cap\"><b>" as *u8)
  o = k2_puts(buf, o, cap); o = k2_puts(buf, o, "</b><span>" as *u8); o = k2_puts(buf, o, sub)
  o = k2_puts(buf, o, "</span></span></a>" as *u8)
  return o
107}
108func kg_grid_close(buf: *u8, off: i64) -> i64 { return k2_puts(buf, off, "</section>" as *u8) }
109func kg_cta(buf: *u8, off: i64, h2: *u8, p: *u8, label: *u8, href: *u8) -> i64 {
  var o: i64 = k2_puts(buf, off, "<section class=\"cta\"><h2>" as *u8)
  o = k2_puts(buf, o, h2); o = k2_puts(buf, o, "</h2><p>" as *u8); o = k2_puts(buf, o, p)
  o = k2_puts(buf, o, "</p><a href=\"" as *u8); o = k2_puts(buf, o, href); o = k2_puts(buf, o, "\">" as *u8)
  o = k2_puts(buf, o, label); o = k2_puts(buf, o, "</a></section>" as *u8)
  return o
115}
116func kg_close(buf: *u8, off: i64, brand: *u8, note: *u8) -> i64 {
  var o: i64 = k2_puts(buf, off, "</main><footer>" as *u8)
  o = k2_puts(buf, o, brand); o = k2_puts(buf, o, " &middot; " as *u8); o = k2_puts(buf, o, note)
  o = k2_puts(buf, o, " &middot; Sovereign on Nishi, 0 JS</footer></body></html>" as *u8)
  return o
121}
122
123// ============================ SHOP ("Market") ============================
124func ks_open(buf: *u8, off: i64, title: *u8, brand: *u8) -> i64 {
  var o: i64 = k2_puts(buf, off, "<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><title>" as *u8)
  o = k2_puts(buf, o, title)
  o = k2_puts(buf, o, "</title><style>" as *u8)
  o = k2_puts(buf, o, "body{margin:0;background:#F4F5F7;color:#14181F;font:15px/1.55 system-ui,-apple-system,'Segoe UI',sans-serif}a{color:inherit}.skip-link{position:absolute;left:-999px}.skip-link:focus{left:16px;top:16px;background:#12B886;color:#04120C;padding:10px 14px}:focus-visible{outline:3px solid #12B886;outline-offset:2px}" as *u8)
  o = k2_puts(buf, o, ".util{display:flex;align-items:center;gap:16px;background:#0E1116;color:#fff;padding:12px 24px;position:sticky;top:0;z-index:6}.util .b{font-weight:800;font-size:1.14rem;text-decoration:none}.util form{flex:1;display:flex;max-width:560px}.util input{flex:1;border:0;border-radius:8px 0 0 8px;padding:11px 14px;font:inherit}.util .go{border:0;background:#12B886;color:#04120C;font-weight:700;padding:0 18px;border-radius:0 8px 8px 0;cursor:pointer}.util .cart{background:#1C2230;padding:9px 15px;border-radius:999px;font-weight:600;text-decoration:none;white-space:nowrap}" as *u8)
  o = k2_puts(buf, o, ".chips{display:flex;gap:8px;flex-wrap:wrap;padding:13px 24px;background:#fff;border-bottom:1px solid #E6E8EC}.chips a{background:#F0F2F5;padding:7px 14px;border-radius:999px;font-size:.82rem;font-weight:600;text-decoration:none;color:#3A4250}.chips a:first-child{background:#14181F;color:#fff}" as *u8)
  o = k2_puts(buf, o, ".promo{background:linear-gradient(100deg,#0E7C5A,#12B886);color:#fff;margin:16px 24px;border-radius:16px;padding:24px 28px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}.promo h2{margin:0;font-size:1.5rem}.promo p{margin:0;opacity:.92}" as *u8)
  o = k2_puts(buf, o, ".pgh{padding:10px 24px 0;font-size:1.15rem;font-weight:800}.pg{display:grid;grid-template-columns:repeat(auto-fill,minmax(214px,1fr));gap:16px;padding:14px 24px 30px}.pc{background:#fff;border:1px solid #E6E8EC;border-radius:14px;overflow:hidden;display:flex;flex-direction:column}.pc .im{aspect-ratio:1/1;display:block}.pc .in{padding:14px;display:flex;flex-direction:column;gap:5px;flex:1}.pc h3{margin:0;font-size:1rem}.pc .d{color:#5A6273;font-size:.83rem;flex:1}.pc .row{display:flex;justify-content:space-between;align-items:center;margin-top:8px}.pc .pr{font-weight:800;font-size:1.06rem}.pc .add{border:0;background:#14181F;color:#fff;border-radius:8px;padding:8px 12px;font:600 .82rem system-ui,sans-serif;cursor:pointer}.pc .add:hover{background:#12B886;color:#04120C}" as *u8)
  o = k2_puts(buf, o, ".tr{display:flex;gap:26px;justify-content:center;flex-wrap:wrap;padding:26px;background:#fff;border-top:1px solid #E6E8EC;color:#3A4250;font-size:.9rem}.tr b{color:#14181F}footer{padding:24px;text-align:center;color:#7A8290;font-size:.82rem}</style></head><body><a class=\"skip-link\" href=\"#main\">Skip to content</a>" as *u8)
  o = k2_puts(buf, o, "<header class=\"util\"><a class=\"b\" href=\"/factory/\">" as *u8)
  o = k2_puts(buf, o, brand)
  o = k2_puts(buf, o, "</a><form role=\"search\" method=\"get\" action=\"/search\"><input type=\"search\" aria-label=\"Search products\" placeholder=\"Search the shop\"><button class=\"go\" type=\"submit\">Search</button></form><a class=\"cart\" href=\"/cart\">Cart &middot; 3</a></header><nav class=\"chips\"><a href=\"/\">All</a><a href=\"/\">New</a><a href=\"/\">Home</a><a href=\"/\">Kitchen</a><a href=\"/\">Apparel</a><a href=\"/\">Gifts</a></nav><main id=\"main\">" as *u8)
  return o
138}
139func ks_promo(buf: *u8, off: i64, h2: *u8, p: *u8) -> i64 {
  var o: i64 = k2_puts(buf, off, "<section class=\"promo\"><div><h2>" as *u8)
  o = k2_puts(buf, o, h2); o = k2_puts(buf, o, "</h2><p>" as *u8); o = k2_puts(buf, o, p)
  o = k2_puts(buf, o, "</p></div><a class=\"cart\" href=\"/\" style=\"background:#04120C\">Shop the sale</a></section>" as *u8)
  return o
144}
145func ks_grid_open(buf: *u8, off: i64, h2: *u8) -> i64 {
  var o: i64 = k2_puts(buf, off, "<h2 class=\"pgh\">" as *u8)
  o = k2_puts(buf, o, h2); o = k2_puts(buf, o, "</h2><section class=\"pg\" id=\"products\">" as *u8)
  return o
149}
150func ks_prod(buf: *u8, off: i64, idx: i64, name: *u8, desc: *u8, price: *u8) -> i64 {
  let h1: i64 = (idx * 53 + 20) % 360
  let h2: i64 = (idx * 53 + 60) % 360
  var o: i64 = k2_puts(buf, off, "<article class=\"pc\"><span class=\"im\" style=\"background:linear-gradient(135deg,hsl(" as *u8)
  o = k2_catn(buf, o, h1); o = k2_puts(buf, o, "deg 42% 80%),hsl(" as *u8)
  o = k2_catn(buf, o, h2); o = k2_puts(buf, o, "deg 46% 62%))\"></span><div class=\"in\"><h3>" as *u8)
  o = k2_puts(buf, o, name); o = k2_puts(buf, o, "</h3><p class=\"d\">" as *u8); o = k2_puts(buf, o, desc)
  o = k2_puts(buf, o, "</p><div class=\"row\"><span class=\"pr\">" as *u8); o = k2_puts(buf, o, price)
  o = k2_puts(buf, o, "</span><button class=\"add\">Add to cart</button></div></div></article>" as *u8)
  return o
160}
161func ks_grid_close(buf: *u8, off: i64) -> i64 { return k2_puts(buf, off, "</section>" as *u8) }
162func ks_trust(buf: *u8, off: i64, a: *u8, b: *u8, c: *u8) -> i64 {
  var o: i64 = k2_puts(buf, off, "<section class=\"tr\"><span><b>Free shipping</b> " as *u8)
  o = k2_puts(buf, o, a); o = k2_puts(buf, o, "</span><span><b>Easy returns</b> " as *u8)
  o = k2_puts(buf, o, b); o = k2_puts(buf, o, "</span><span><b>Secure checkout</b> " as *u8)
  o = k2_puts(buf, o, c); o = k2_puts(buf, o, "</span></section>" as *u8)
  return o
168}
169func ks_close(buf: *u8, off: i64, brand: *u8, note: *u8) -> i64 {
  var o: i64 = k2_puts(buf, off, "</main><footer>" as *u8)
  o = k2_puts(buf, o, brand); o = k2_puts(buf, o, " &middot; " as *u8); o = k2_puts(buf, o, note)
  o = k2_puts(buf, o, " &middot; Sovereign checkout on Nishi, 0 trackers</footer></body></html>" as *u8)
  return o
174}
175
176// ============================ SOCIAL FEED ("Circle") ============================
177func kf_open(buf: *u8, off: i64, title: *u8, brand: *u8) -> i64 {
  var o: i64 = k2_puts(buf, off, "<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><title>" as *u8)
  o = k2_puts(buf, o, title)
  o = k2_puts(buf, o, "</title><style>" as *u8)
  o = k2_puts(buf, o, "body{margin:0;background:#F0F2F5;color:#1B1F27;font:15px/1.5 system-ui,-apple-system,'Segoe UI',sans-serif}a{color:inherit}.skip-link{position:absolute;left:-999px}.skip-link:focus{left:16px;top:16px;background:#3B6FE0;color:#fff;padding:10px 14px}:focus-visible{outline:3px solid #3B6FE0;outline-offset:2px}" as *u8)
  o = k2_puts(buf, o, ".top{background:#fff;border-bottom:1px solid #E3E6EC;padding:12px 20px;display:flex;gap:14px;align-items:center;position:sticky;top:0;z-index:5}.top .b{font-weight:800;color:#3B6FE0;font-size:1.2rem;text-decoration:none}.top input{flex:1;max-width:340px;background:#F0F2F5;border:0;border-radius:999px;padding:10px 16px;font:inherit}.top a.n{color:#5A6273;text-decoration:none;font-weight:600;font-size:.88rem}" as *u8)
  o = k2_puts(buf, o, ".lay{display:grid;grid-template-columns:220px minmax(0,600px) 300px;gap:22px;max-width:1180px;margin:22px auto;padding:0 18px;align-items:start}@media(max-width:980px){.lay{grid-template-columns:minmax(0,1fr)}.rail,.aside{display:none}}" as *u8)
  o = k2_puts(buf, o, ".rail{position:sticky;top:76px}.rail a{display:flex;gap:12px;align-items:center;padding:11px 14px;border-radius:10px;text-decoration:none;font-weight:600;color:#3A4250}.rail a:hover{background:#E7EBF2}.rail a.on{background:#fff;color:#3B6FE0;box-shadow:0 1px 2px rgba(20,24,31,.08)}.dot2{width:10px;height:10px;border-radius:3px;background:linear-gradient(135deg,#3B6FE0,#7B4FE0);flex:none}" as *u8)
  o = k2_puts(buf, o, ".card{background:#fff;border-radius:14px;box-shadow:0 1px 2px rgba(20,24,31,.07);margin-bottom:16px}.comp{padding:14px 16px;display:flex;gap:12px;align-items:center}.comp input{flex:1;background:#F0F2F5;border:0;border-radius:999px;padding:12px 16px;font:inherit}.comp button{border:0;background:#3B6FE0;color:#fff;border-radius:999px;padding:11px 18px;font:600 .88rem system-ui,sans-serif;cursor:pointer}" as *u8)
  o = k2_puts(buf, o, ".av{width:42px;height:42px;border-radius:50%;flex:none}.post{padding:16px}.ph{display:flex;gap:11px;align-items:center;margin-bottom:10px}.ph b{display:block;font-size:.95rem}.ph span{color:#7A8290;font-size:.8rem}.pt{font-size:.98rem;margin:0 0 12px}.acts{display:flex;gap:6px;border-top:1px solid #EEF0F4;padding-top:8px}.acts button{flex:1;border:0;background:none;padding:9px;border-radius:8px;font:600 .85rem system-ui,sans-serif;color:#5A6273;cursor:pointer}.acts button:hover{background:#F0F2F5}" as *u8)
  o = k2_puts(buf, o, ".aside{position:sticky;top:76px}.aside .card{padding:16px}.aside h2{font-size:.95rem;margin:0 0 12px;color:#5A6273}.wrow{display:flex;gap:11px;align-items:center;padding:8px 0}.wrow b{flex:1;font-size:.9rem}.wrow button{border:1px solid #3B6FE0;background:#fff;color:#3B6FE0;border-radius:999px;padding:6px 14px;font:600 .8rem system-ui,sans-serif;cursor:pointer}footer{max-width:1180px;margin:0 auto;padding:18px;color:#8A92A0;font-size:.78rem;text-align:center}@media(prefers-reduced-motion:reduce){*{transition:none}}" as *u8)
  o = k2_puts(buf, o, "</style></head><body><a class=\"skip-link\" href=\"#main\">Skip to content</a><header class=\"top\"><a class=\"b\" href=\"/factory/\">" as *u8)
  o = k2_puts(buf, o, brand)
  o = k2_puts(buf, o, "</a><input type=\"search\" aria-label=\"Search\" placeholder=\"Search the community\"><a class=\"n\" href=\"/factory/\">All archetypes</a></header><div class=\"lay\"><nav class=\"rail\" aria-label=\"Primary\"><a class=\"on\" href=\"/\"><span class=\"dot2\"></span>Home</a><a href=\"/\"><span class=\"dot2\"></span>Explore</a><a href=\"/\"><span class=\"dot2\"></span>Groups</a><a href=\"/\"><span class=\"dot2\"></span>Messages</a><a href=\"/\"><span class=\"dot2\"></span>Profile</a></nav><main id=\"main\">" as *u8)
  return o
192}
193func kf_av(buf: *u8, off: i64, idx: i64) -> i64 {
  let h1: i64 = (idx * 71 + 10) % 360
  let h2: i64 = (idx * 71 + 70) % 360
  var o: i64 = k2_puts(buf, off, "<span class=\"av\" style=\"background:linear-gradient(135deg,hsl(" as *u8)
  o = k2_catn(buf, o, h1); o = k2_puts(buf, o, "deg 60% 62%),hsl(" as *u8)
  o = k2_catn(buf, o, h2); o = k2_puts(buf, o, "deg 55% 45%))\"></span>" as *u8)
  return o
200}
201func kf_composer(buf: *u8, off: i64, placeholder: *u8) -> i64 {
  var o: i64 = k2_puts(buf, off, "<div class=\"card comp\">" as *u8)
  o = kf_av(buf, o, 0)
  o = k2_puts(buf, o, "<input aria-label=\"Write a post\" placeholder=\"" as *u8)
  o = k2_puts(buf, o, placeholder)
  o = k2_puts(buf, o, "\"><button>Share</button></div>" as *u8)
  return o
208}
209func kf_post(buf: *u8, off: i64, idx: i64, author: *u8, meta: *u8, text: *u8) -> i64 {
  var o: i64 = k2_puts(buf, off, "<article class=\"card post\"><div class=\"ph\">" as *u8)
  o = kf_av(buf, o, idx)
  o = k2_puts(buf, o, "<div><b>" as *u8); o = k2_puts(buf, o, author)
  o = k2_puts(buf, o, "</b><span>" as *u8); o = k2_puts(buf, o, meta)
  o = k2_puts(buf, o, "</span></div></div><p class=\"pt\">" as *u8); o = k2_puts(buf, o, text)
  o = k2_puts(buf, o, "</p><div class=\"acts\"><button>Like</button><button>Reply</button><button>Share</button></div></article>" as *u8)
  return o
217}
218func kf_aside_open(buf: *u8, off: i64, about: *u8) -> i64 {
  var o: i64 = k2_puts(buf, off, "</main><aside class=\"aside\"><div class=\"card\"><h2>About this space</h2><p style=\"margin:0;font-size:.9rem;color:#3A4250\">" as *u8)
  o = k2_puts(buf, o, about)
  o = k2_puts(buf, o, "</p></div><div class=\"card\"><h2>Who to follow</h2>" as *u8)
  return o
223}
224func kf_follow(buf: *u8, off: i64, idx: i64, name: *u8) -> i64 {
  var o: i64 = k2_puts(buf, off, "<div class=\"wrow\">" as *u8)
  o = kf_av(buf, o, idx + 9)
  o = k2_puts(buf, o, "<b>" as *u8); o = k2_puts(buf, o, name)
  o = k2_puts(buf, o, "</b><button>Follow</button></div>" as *u8)
  return o
230}
231func kf_close(buf: *u8, off: i64, brand: *u8, note: *u8) -> i64 {
  var o: i64 = k2_puts(buf, off, "</div></aside></div><footer>" as *u8)
  o = k2_puts(buf, o, brand); o = k2_puts(buf, o, " &middot; " as *u8); o = k2_puts(buf, o, note)
  o = k2_puts(buf, o, " &middot; No ads, no tracking, you own your data</footer></body></html>" as *u8)
  return o
236}
237
238// ============================ MEDIA STREAMER ("Marquee") ============================
239func km_open(buf: *u8, off: i64, title: *u8, brand: *u8) -> i64 {
  var o: i64 = k2_puts(buf, off, "<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><meta name=\"color-scheme\" content=\"dark\"><title>" as *u8)
  o = k2_puts(buf, o, title)
  o = k2_puts(buf, o, "</title><style>" as *u8)
  o = k2_puts(buf, o, "body{margin:0;background:#101017;color:#F2F2F6;font:15px/1.5 system-ui,-apple-system,'Segoe UI',sans-serif}a{color:inherit}.skip-link{position:absolute;left:-999px}.skip-link:focus{left:16px;top:16px;background:#E33F5A;color:#fff;padding:10px 14px}:focus-visible{outline:3px solid #E33F5A;outline-offset:2px}" as *u8)
  o = k2_puts(buf, o, ".nav{display:flex;gap:20px;align-items:center;padding:16px 34px;position:absolute;inset:0 0 auto;z-index:4}.nav .b{font-weight:900;letter-spacing:.06em;color:#E33F5A;font-size:1.25rem;text-decoration:none}.nav a.l{color:#C9C9D4;text-decoration:none;font-size:.86rem;font-weight:600}" as *u8)
  o = k2_puts(buf, o, ".bill{position:relative;padding:130px 34px 60px;background:linear-gradient(115deg,#2A0F1E 0%,#101017 62%),linear-gradient(0deg,#101017,transparent 40%)}.bill .k{color:#E33F5A;font-weight:700;letter-spacing:.3em;text-transform:uppercase;font-size:.72rem}.bill h1{font-size:clamp(2.6rem,7vw,5.2rem);font-weight:900;margin:.12em 0;letter-spacing:-.02em;max-width:14ch;line-height:1}.bill .meta{color:#9A9AA8;font-size:.9rem;margin:0 0 14px}.bill .sub{color:#C9C9D4;max-width:52ch;margin:0 0 24px}.bill .row{display:flex;gap:12px;flex-wrap:wrap}.bill a.play{background:#fff;color:#101017;font-weight:800;padding:13px 30px;border-radius:6px;text-decoration:none}.bill a.info{background:rgba(255,255,255,.14);color:#fff;font-weight:600;padding:13px 24px;border-radius:6px;text-decoration:none}" as *u8)
  o = k2_puts(buf, o, ".shelf{padding:26px 0 8px 34px}.shelf h2{font-size:1.15rem;margin:0 0 14px;font-weight:700}.strip{display:flex;gap:12px;overflow-x:auto;padding:0 34px 22px 0;scroll-snap-type:x mandatory}.pc2{flex:0 0 172px;scroll-snap-align:start;text-decoration:none}.pc2 .po{aspect-ratio:2/3;border-radius:10px;display:block;box-shadow:0 10px 26px -14px rgba(0,0,0,.9)}.pc2 b{display:block;margin:9px 2px 1px;font-size:.9rem;font-weight:600}.pc2 span{color:#9A9AA8;font-size:.78rem;margin:0 2px}" as *u8)
  o = k2_puts(buf, o, "footer{padding:30px 34px;color:#6E6E7C;font-size:.8rem;border-top:1px solid #1D1D26;margin-top:26px}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}</style></head><body><a class=\"skip-link\" href=\"#main\">Skip to content</a><nav class=\"nav\"><a class=\"b\" href=\"/factory/\">" as *u8)
  o = k2_puts(buf, o, brand)
  o = k2_puts(buf, o, "</a><a class=\"l\" href=\"/\">Home</a><a class=\"l\" href=\"/\">Library</a><a class=\"l\" href=\"/factory/\">All archetypes</a></nav><main id=\"main\">" as *u8)
  return o
251}
252func km_billboard(buf: *u8, off: i64, kick: *u8, title: *u8, meta: *u8, sub: *u8, play: *u8) -> i64 {
  var o: i64 = k2_puts(buf, off, "<section class=\"bill\"><p class=\"k\">" as *u8)
  o = k2_puts(buf, o, kick); o = k2_puts(buf, o, "</p><h1>" as *u8); o = k2_puts(buf, o, title)
  o = k2_puts(buf, o, "</h1><p class=\"meta\">" as *u8); o = k2_puts(buf, o, meta)
  o = k2_puts(buf, o, "</p><p class=\"sub\">" as *u8); o = k2_puts(buf, o, sub)
  o = k2_puts(buf, o, "</p><div class=\"row\"><a class=\"play\" href=\"/\">" as *u8); o = k2_puts(buf, o, play)
  o = k2_puts(buf, o, "</a><a class=\"info\" href=\"/factory/\">More info</a></div></section>" as *u8)
  return o
260}
261func km_shelf_open(buf: *u8, off: i64, label: *u8) -> i64 {
  var o: i64 = k2_puts(buf, off, "<section class=\"shelf\"><h2>" as *u8)
  o = k2_puts(buf, o, label); o = k2_puts(buf, o, "</h2><div class=\"strip\">" as *u8)
  return o
265}
266func km_poster(buf: *u8, off: i64, idx: i64, name: *u8, sub: *u8) -> i64 {
  let h1: i64 = (idx * 59 + 210) % 360
  let h2: i64 = (idx * 59 + 275) % 360
  var o: i64 = k2_puts(buf, off, "<a class=\"pc2\" href=\"/\"><span class=\"po\" style=\"background:linear-gradient(160deg,hsl(" as *u8)
  o = k2_catn(buf, o, h1); o = k2_puts(buf, o, "deg 48% 34%),hsl(" as *u8)
  o = k2_catn(buf, o, h2); o = k2_puts(buf, o, "deg 60% 14%))\"></span><b>" as *u8)
  o = k2_puts(buf, o, name); o = k2_puts(buf, o, "</b><span>" as *u8); o = k2_puts(buf, o, sub)
  o = k2_puts(buf, o, "</span></a>" as *u8)
  return o
275}
276func km_shelf_close(buf: *u8, off: i64) -> i64 { return k2_puts(buf, off, "</div></section>" as *u8) }
277func km_close(buf: *u8, off: i64, brand: *u8, note: *u8) -> i64 {
  var o: i64 = k2_puts(buf, off, "</main><footer>" as *u8)
  o = k2_puts(buf, o, brand); o = k2_puts(buf, o, " &middot; " as *u8); o = k2_puts(buf, o, note)
  o = k2_puts(buf, o, " &middot; Your library, streamed sovereign -- zero ads</footer></body></html>" as *u8)
  return o
282}
283
284// ============================ HUB DASHBOARD ("Deck") ============================
285func kd_open(buf: *u8, off: i64, title: *u8, brand: *u8) -> i64 {
  var o: i64 = k2_puts(buf, off, "<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"><title>" as *u8)
  o = k2_puts(buf, o, title)
  o = k2_puts(buf, o, "</title><style>" as *u8)
  o = k2_puts(buf, o, "body{margin:0;background:linear-gradient(180deg,#E9EFF8,#F5F8FC 340px);min-height:100vh;color:#17202E;font:15px/1.55 system-ui,-apple-system,'Segoe UI',sans-serif}a{color:inherit}.skip-link{position:absolute;left:-999px}.skip-link:focus{left:16px;top:16px;background:#17202E;color:#fff;padding:10px 14px}:focus-visible{outline:3px solid #2E5AAC;outline-offset:2px}" as *u8)
  o = k2_puts(buf, o, ".wrap{max-width:1060px;margin:0 auto;padding:0 26px}.top{display:flex;justify-content:space-between;align-items:center;padding:20px 0}.top .b{font-weight:800;letter-spacing:.02em;text-decoration:none}.top a.l{color:#51607A;font-size:.86rem;text-decoration:none;font-weight:600}" as *u8)
  o = k2_puts(buf, o, ".greet{padding:34px 0 8px}.greet h1{font-size:clamp(1.9rem,4.6vw,3rem);margin:0;font-weight:800;letter-spacing:-.01em}.greet p{color:#51607A;margin:8px 0 0;max-width:56ch}.sr{margin:22px 0 30px}.sr form{display:flex;max-width:520px;background:#fff;border-radius:14px;box-shadow:0 6px 24px -12px rgba(23,32,46,.25);overflow:hidden}.sr input{flex:1;border:0;padding:15px 18px;font:inherit}.sr button{border:0;background:#17202E;color:#fff;padding:0 22px;font:600 .9rem system-ui,sans-serif;cursor:pointer}" as *u8)
  o = k2_puts(buf, o, ".deck{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;padding-bottom:26px}.tileD{background:#fff;border-radius:18px;padding:20px;text-decoration:none;box-shadow:0 2px 6px rgba(23,32,46,.06);transition:transform .16s,box-shadow .16s;display:block}.tileD:hover{transform:translateY(-3px);box-shadow:0 14px 30px -14px rgba(23,32,46,.35)}.ic2{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:1.15rem;margin-bottom:13px}.tileD b{display:block;font-size:1.02rem;margin-bottom:4px}.tileD span{color:#51607A;font-size:.84rem}" as *u8)
  o = k2_puts(buf, o, ".strip2{display:flex;gap:22px;flex-wrap:wrap;background:#17202E;color:#B9C6DC;border-radius:18px;padding:18px 24px;margin-bottom:30px;font-size:.86rem}.strip2 b{color:#fff}footer{padding:22px 0 30px;color:#7A879C;font-size:.8rem}@media(prefers-reduced-motion:reduce){.tileD{transition:none}.tileD:hover{transform:none}}" as *u8)
  o = k2_puts(buf, o, "</style></head><body><a class=\"skip-link\" href=\"#main\">Skip to content</a><div class=\"wrap\"><header class=\"top\"><a class=\"b\" href=\"/factory/\">" as *u8)
  o = k2_puts(buf, o, brand)
  o = k2_puts(buf, o, "</a><a class=\"l\" href=\"/factory/\">All archetypes</a></header><main id=\"main\">" as *u8)
  return o
298}
299func kd_greet(buf: *u8, off: i64, h1: *u8, sub: *u8) -> i64 {
  var o: i64 = k2_puts(buf, off, "<section class=\"greet\"><h1>" as *u8)
  o = k2_puts(buf, o, h1); o = k2_puts(buf, o, "</h1><p>" as *u8); o = k2_puts(buf, o, sub)
  o = k2_puts(buf, o, "</p></section><div class=\"sr\"><form role=\"search\" method=\"get\" action=\"/search\"><input type=\"search\" aria-label=\"Search everything\" placeholder=\"Search apps, wiki, media, everything\"><button type=\"submit\">Search</button></form></div>" as *u8)
  return o
304}
305func kd_deck_open(buf: *u8, off: i64) -> i64 { return k2_puts(buf, off, "<section class=\"deck\">" as *u8) }
306func kd_tile(buf: *u8, off: i64, idx: i64, name: *u8, blurb: *u8, href: *u8) -> i64 {
  let h1: i64 = (idx * 61 + 180) % 360
  let h2: i64 = (idx * 61 + 235) % 360
  var o: i64 = k2_puts(buf, off, "<a class=\"tileD\" href=\"" as *u8)
  o = k2_puts(buf, o, href)
  o = k2_puts(buf, o, "\"><span class=\"ic2\" style=\"background:linear-gradient(135deg,hsl(" as *u8)
  o = k2_catn(buf, o, h1); o = k2_puts(buf, o, "deg 55% 44%),hsl(" as *u8)
  o = k2_catn(buf, o, h2); o = k2_puts(buf, o, "deg 60% 30%))\">" as *u8)
  // icon letter = first char of the app name
  let fl: *u8 = sys_mmap(4)
  fl[0] = name[0]; fl[1] = 0 as u8
  o = k2_puts(buf, o, fl)
  o = k2_puts(buf, o, "</span><b>" as *u8); o = k2_puts(buf, o, name)
  o = k2_puts(buf, o, "</b><span>" as *u8); o = k2_puts(buf, o, blurb)
  o = k2_puts(buf, o, "</span></a>" as *u8)
  return o
322}
323func kd_deck_close(buf: *u8, off: i64) -> i64 { return k2_puts(buf, off, "</section>" as *u8) }
324func kd_strip(buf: *u8, off: i64, a: *u8, b: *u8, c: *u8) -> i64 {
  var o: i64 = k2_puts(buf, off, "<section class=\"strip2\"><span><b>Private by construction</b> &middot; " as *u8)
  o = k2_puts(buf, o, a); o = k2_puts(buf, o, "</span><span><b>Self-healing</b> &middot; " as *u8)
  o = k2_puts(buf, o, b); o = k2_puts(buf, o, "</span><span><b>Every screen</b> &middot; " as *u8)
  o = k2_puts(buf, o, c); o = k2_puts(buf, o, "</span></section>" as *u8)
  return o
330}
331func kd_close(buf: *u8, off: i64, brand: *u8, note: *u8) -> i64 {
  var o: i64 = k2_puts(buf, off, "</main><footer>" as *u8)
  o = k2_puts(buf, o, brand); o = k2_puts(buf, o, " &middot; " as *u8); o = k2_puts(buf, o, note)
  o = k2_puts(buf, o, "</footer></div></body></html>" as *u8)
  return o
336}
nx_kit2.nx source

`nx_kit2.nx` source
