@rizom/site-rizom-ai 0.2.0-alpha.180 → 0.2.0-alpha.182

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rizom/site-rizom-ai",
-  "version": "0.2.0-alpha.180",
+  "version": "0.2.0-alpha.182",
   "description": "Rizom AI site package for hosted Rover deployments",
   "type": "module",
   "exports": {
@@ -18,9 +18,9 @@
     "prepack": "publish-manifest prepare"
   },
   "dependencies": {
-    "@rizom/site": "0.2.0-alpha.180",
-    "@rizom/site-rizom": "0.2.0-alpha.180",
-    "@rizom/site-sections": "0.2.0-alpha.180",
+    "@rizom/site": "0.2.0-alpha.182",
+    "@rizom/site-rizom": "0.2.0-alpha.182",
+    "@rizom/site-sections": "0.2.0-alpha.182",
     "preact": "^10.27.2"
   },
   "publishConfig": {

package/src/brain-screens.tsx

@@ -97,6 +97,15 @@ export const SCREEN_STYLES = `
 @keyframes brainScreenFlicker { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
 @media (prefers-reduced-motion: reduce) { .brain-screen .ifc-status i { animation: none; } }
 @media (max-width: 900px) { .brain-screen .dash-canvas { grid-template-columns: 1fr; } .brain-screen .dash-canvas .ifc-card { grid-column: auto !important; } }
+@media (max-width: 640px) {
+  .brain-screen .ifc-strip { flex-wrap: wrap; row-gap: 6px; }
+  .brain-screen .ifc-tabs { overflow-x: auto; }
+  /* The studio's library pane becomes a horizontal file strip above the
+     manuscript instead of a crushed side column. */
+  .brain-screen .cms-cols { grid-template-columns: 1fr; }
+  .brain-screen .cms-list { display: flex; gap: 2px; overflow-x: auto; padding: 8px 10px; border-right: 0; border-bottom: 1px solid rgba(241,234,221,.09); }
+  .brain-screen .cms-item { flex: none; gap: 6px; padding: 5px 10px; border-left: 0; border-radius: 6px; }
+}
 `;
 
 /** Emitted once per page; scopes all screen styles under `.brain-screen`. */

package/src/brain.tsx

@@ -237,7 +237,7 @@ function BrainRunSection({
         headline={headline}
         intro={intro}
       />
-      <div className="reveal reveal-delay-1 mt-7 max-w-[1120px]">
+      <div className="reveal reveal-delay-1 mt-7">
         <DashboardScreen />
       </div>
       <p className="reveal reveal-delay-2 mt-5 max-w-[52em] font-display text-[17px] font-normal italic text-theme-light [font-variation-settings:'SOFT'_85]">
@@ -334,7 +334,7 @@ function BrainQuickstartSection({
   return (
     <Section id="quickstart" className="py-14">
       <SectCap lead={cap} trail={capNote} />
-      <div className="mt-7 grid max-w-[1000px] items-start gap-12 md:grid-cols-[1.15fr_1fr]">
+      <div className="mt-7 grid items-start gap-12 md:grid-cols-[1.15fr_1fr]">
         <div className="reveal reveal-delay-1 border border-theme bg-theme-subtle/60 px-6 py-5 font-label text-[14px] leading-[1.9]">
           {lines.map((line, i) => (
             <div key={i} className={termLineClass(line.kind)}>

package/src/foundation.tsx

@@ -159,7 +159,7 @@ function FoundationSupportSection({
   return (
     <Section id="support" className="py-14">
       <SectCap lead={cap} trail={capNote} />
-      <div className="mt-[26px] grid max-w-[900px] gap-13 md:grid-cols-2">
+      <div className="mt-[26px] grid gap-13 md:grid-cols-2">
         {options.map((option, i) => (
           <div key={option.kicker} className={`reveal ${delayClass(i + 1)}`}>
             <span className="font-label text-label-xs uppercase tracking-[0.16em] text-accent">
@@ -168,7 +168,7 @@ function FoundationSupportSection({
             <div className="mt-2 font-display text-[30px] font-[480] text-theme [font-variation-settings:'SOFT'_40]">
               {option.amount}
             </div>
-            <p className="mt-2 font-body text-[15.5px] text-theme-light">
+            <p className="mt-2 max-w-[52ch] font-body text-[15.5px] text-theme-light">
               {option.text}
             </p>
           </div>

package/src/growth-diagram.tsx

@@ -8,7 +8,7 @@ import type { JSX } from "preact";
    The wrapper's `reveal` class lets boot.js trigger the sequence. */
 export function GrowthDiagram(): JSX.Element {
   return (
-    <div className="growth reveal reveal-delay-1 mt-5 max-w-[1020px]">
+    <div className="growth reveal reveal-delay-1 mt-5">
       <svg
         viewBox="0 0 980 290"
         role="img"

package/src/layout.tsx

@@ -67,13 +67,14 @@ const FACE_CHROME: Record<FaceKey, FaceChrome> = {
   },
 };
 
-// The umbrella page's own chrome: the plain wordmark, links into the room and
-// docs, and a get-started CTA that points at the product room.
+// The umbrella page's own chrome: the plain wordmark, the org-level indexes
+// (everything published, everyone in the network — the strip above already
+// offers the faces), and a get-started CTA that points at the product room.
 const HOME_CHROME: FaceChrome = {
   nameplate: null,
   links: [
-    { label: "Brain", href: "/brain" },
-    { label: "Docs ↗", href: "https://docs.rizom.ai", external: true },
+    { label: "Writing", href: "/writing" },
+    { label: "Network", href: "/network" },
   ],
   cta: { label: "Get Started", href: "/brain" },
 };
@@ -94,8 +95,9 @@ function activeFace(path: string): FaceKey {
 }
 
 // The org-level indexes: cross-room aggregations (everything published,
-// everyone in the network) that belong to no single face. They live
-// top-right on every face, and claim the current page on their own path.
+// everyone in the network) that belong to no single face. They live in the
+// home nav and the footer; the strip only needs their paths so no face
+// claims the current page there.
 const ORG_INDEXES: { label: string; href: string }[] = [
   { label: "Writing", href: "/writing" },
   { label: "Network", href: "/network" },
@@ -113,15 +115,20 @@ function FacesStrip({ path }: { path: string }): JSX.Element {
   const activeIndex = orgIndexActive(path);
   const home = isHome(path);
   return (
-    <div className="relative z-[2] flex items-baseline gap-6 border-b border-theme-light px-6 py-3 font-label text-label-xs uppercase tracking-[0.14em] md:px-10 xl:px-20">
-      <span className="text-theme-muted">rizom</span>
+    <div className="relative z-[2] flex flex-wrap items-baseline gap-x-4 gap-y-1.5 border-b border-theme-light px-4 py-3 font-label text-label-xs uppercase tracking-[0.12em] sm:gap-x-6 sm:px-6 sm:tracking-[0.14em] md:px-10 xl:px-20">
+      <a
+        href="/"
+        className="-my-2 inline-block py-2 text-theme-muted transition-colors hover:text-theme"
+      >
+        rizom
+      </a>
       {FACES.map((item) =>
         // No face is current on the umbrella home, nor on a cross-room index.
         item.key === face && !activeIndex && !home ? (
           <a
             key={item.key}
             href={item.href}
-            className="text-accent"
+            className="-my-2 inline-block py-2 text-accent"
             aria-current="page"
           >
             {item.label}
@@ -130,28 +137,23 @@ function FacesStrip({ path }: { path: string }): JSX.Element {
           <a
             key={item.key}
             href={item.href}
-            className="text-theme-light transition-colors hover:text-theme"
+            className="-my-2 inline-block py-2 text-theme-light transition-colors hover:text-theme"
           >
             {item.label}
           </a>
         ),
       )}
-      <div className="ml-auto flex items-baseline gap-6">
-        {ORG_INDEXES.map((index) => {
-          const active = activeIndex === index.href;
-          return (
-            <a
-              key={index.href}
-              href={index.href}
-              className={`transition-colors ${
-                active ? "text-accent" : "text-theme-light hover:text-theme"
-              }`}
-              {...(active ? { "aria-current": "page" } : {})}
-            >
-              {index.label}
-            </a>
-          );
-        })}
+      <div className="ml-auto flex items-baseline">
+        {/* boot.js binds by id and syncs the label; window.toggleTheme
+            (injected by site-engine) flips data-theme + persists it. */}
+        <button
+          id="themeToggle"
+          type="button"
+          aria-label="Toggle color theme"
+          className="-my-2 inline-block cursor-pointer py-2 uppercase text-theme-light transition-colors hover:text-theme"
+        >
+          ☀ Light
+        </button>
       </div>
     </div>
   );
@@ -161,13 +163,13 @@ function Wordmark({ nameplate }: { nameplate: string | null }): JSX.Element {
   return (
     <a
       href="/"
-      className="font-display text-[26px] font-semibold tracking-[-0.01em] [font-variation-settings:'SOFT'_100]"
+      className="font-display text-[clamp(22px,5.5vw,26px)] font-semibold tracking-[-0.01em] [font-variation-settings:'SOFT'_100]"
       aria-label="Rizom home"
     >
       <span className="text-theme">rizom</span>
       <span className="text-accent">.</span>
       {nameplate && (
-        <span className="text-[20px] font-normal text-theme-muted">
+        <span className="text-[clamp(17px,4.3vw,20px)] font-normal text-theme-muted">
           {nameplate}
         </span>
       )}
@@ -177,21 +179,25 @@ function Wordmark({ nameplate }: { nameplate: string | null }): JSX.Element {
 
 function FaceNav({
   face,
-  home,
+  umbrella,
 }: {
   face: FaceKey;
-  home: boolean;
+  umbrella: boolean;
 }): JSX.Element {
-  const chrome = home ? HOME_CHROME : FACE_CHROME[face];
+  // Home and the org indexes (/writing, /network) belong to no face —
+  // they wear the plain umbrella chrome, not a room nameplate.
+  const chrome = umbrella ? HOME_CHROME : FACE_CHROME[face];
   // Deliberately NOT merged with siteInfo.navigation: entity plugins
   // register slot-based nav entries for every list route (topics,
   // posts, …), which floods the bar. Each room owns its own links.
   const links: FaceLink[] = chrome.links;
 
   return (
-    <nav className="relative z-[2] flex items-baseline gap-8 px-6 py-5 md:px-10 xl:px-20">
+    <nav className="relative z-[2] flex items-baseline gap-4 px-4 py-5 sm:gap-8 sm:px-6 md:px-10 xl:px-20">
       <Wordmark nameplate={chrome.nameplate} />
-      <div className="hidden items-baseline gap-7 md:flex">
+      {/* Below sm the footer carries every chrome link; the row keeps
+          just the wordmark and the CTA so nothing overflows. */}
+      <div className="hidden items-baseline gap-7 sm:flex">
         {links.map((link) => (
           <a
             key={`${link.href}-${link.label}`}
@@ -205,7 +211,7 @@ function FaceNav({
       <div className="flex-1" />
       <a
         href={chrome.cta.href}
-        className="self-center rounded-[3px] bg-accent px-[18px] py-[9px] font-body text-[16px] font-medium text-theme-inverse transition-[filter,transform] hover:brightness-110 hover:-translate-y-px"
+        className="self-center whitespace-nowrap rounded-[3px] bg-accent px-3.5 py-2 font-body text-[15px] font-medium text-theme-inverse transition-[filter,transform] hover:brightness-110 hover:-translate-y-px sm:px-[18px] sm:py-[9px] sm:text-[16px]"
       >
         {chrome.cta.label}
       </a>
@@ -265,7 +271,7 @@ function SiteFooter({
   siteInfo: RizomLayoutProps["siteInfo"];
 }): JSX.Element {
   return (
-    <footer className="relative z-[1] grid gap-10 border-t border-theme px-6 pt-11 pb-[38px] md:grid-cols-2 md:px-10 xl:grid-cols-[1.3fr_1fr_1fr_1fr] xl:px-20">
+    <footer className="relative z-[1] grid gap-10 border-t border-theme px-4 pt-11 pb-[38px] sm:grid-cols-2 sm:px-6 md:px-10 lg:grid-cols-[1.3fr_1fr_1fr_1fr] xl:px-20">
       <div>
         <a
           href="/"
@@ -287,7 +293,7 @@ function SiteFooter({
             <a
               key={link.href + link.label}
               href={link.href}
-              className="block py-[3px] font-body text-[15.5px] text-theme-light no-underline transition-colors hover:text-theme"
+              className="block py-1.5 font-body text-[15.5px] text-theme-light no-underline transition-colors hover:text-theme"
             >
               {link.label}
             </a>
@@ -357,7 +363,7 @@ function RizomAiChrome({
   children: ComponentChildren;
 }): JSX.Element {
   const face = activeFace(path);
-  const home = isHome(path);
+  const umbrella = isHome(path) || orgIndexActive(path) !== null;
   return (
     <RizomFrame canvas={false}>
       {/* xl:pl matches the mockup's 148px left rail (68 + the 80px
@@ -366,7 +372,7 @@ function RizomAiChrome({
         <MyceliumRail />
         <header className="sticky top-0 z-[100] border-b border-theme-light bg-nav-fade backdrop-blur-[12px]">
           <FacesStrip path={path} />
-          <FaceNav face={face} home={home} />
+          <FaceNav face={face} umbrella={umbrella} />
         </header>
         <main>{children}</main>
         <SiteFooter siteInfo={siteInfo} />

package/src/shared.tsx

@@ -44,11 +44,15 @@ export function SectCap({
     <p
       className={`reveal flex flex-wrap items-baseline gap-3.5 font-label text-label-xs uppercase tracking-[0.2em] ${className}`}
     >
-      <span
-        aria-hidden="true"
-        className="h-px w-[26px] self-center bg-accent opacity-80"
-      />
-      <span className="font-medium text-accent">{lead}</span>
+      {/* Tick and lead wrap as one unit — a long trail may drop to its
+          own line, but the tick never orphans away from the lead. */}
+      <span className="flex items-baseline gap-3.5">
+        <span
+          aria-hidden="true"
+          className="h-px w-[26px] self-center bg-accent opacity-80"
+        />
+        <span className="font-medium text-accent">{lead}</span>
+      </span>
       {trail && (
         <span className="normal-case tracking-[0.1em] text-theme-light">
           {trail}
@@ -133,7 +137,10 @@ export function IndexRow({
       <span className="font-label text-label-xs uppercase tracking-[0.1em] text-theme-light">
         {row.kicker}
       </span>
-      <span className="block">
+      {/* Below md the two-column grid is folio|kicker on the first row;
+          title and meta take full-width rows of their own instead of
+          falling into the 44px folio column. */}
+      <span className="col-span-2 block md:col-span-1">
         <span className="block font-display text-[26px] font-[470] tracking-[-0.01em] text-theme transition-colors group-hover:text-accent [font-variation-settings:'SOFT'_75,'opsz'_60]">
           {row.title}
         </span>
@@ -141,7 +148,7 @@ export function IndexRow({
           {row.text}
         </span>
       </span>
-      <span className="text-right font-label text-[12px] text-theme-light">
+      <span className="col-span-2 text-right font-label text-[12px] text-theme-light md:col-span-1">
         {row.meta ?? "→"}
         {row.metaSub && (
           <small className="block text-theme-light opacity-70">
@@ -152,7 +159,7 @@ export function IndexRow({
     </>
   );
 
-  const rowClass = `reveal ${delayClass} group grid max-w-[1040px] grid-cols-[44px_1fr] items-baseline gap-6 border-t border-theme-light py-6 no-underline md:grid-cols-[64px_176px_1fr_auto]`;
+  const rowClass = `reveal ${delayClass} group grid grid-cols-[44px_1fr] items-baseline gap-x-6 gap-y-2 border-t border-theme-light py-6 no-underline md:grid-cols-[64px_176px_1fr_auto] md:gap-6`;
 
   return row.href ? (
     <a href={row.href} className={rowClass}>
@@ -181,7 +188,7 @@ export function AliveLine({
         <a
           key={link.href + link.label}
           href={link.href}
-          className={`reveal ${i > 0 ? "reveal-delay-1" : ""} border-b border-theme-light font-label text-[12px] text-theme-light no-underline transition-colors hover:text-accent-bright`}
+          className={`reveal ${i > 0 ? "reveal-delay-1" : ""} -mt-2 inline-block border-b border-theme-light pt-2 font-label text-[12px] text-theme-light no-underline transition-colors hover:text-accent-bright`}
         >
           {link.label}
         </a>
@@ -230,7 +237,7 @@ export function Trio({
   mono: boolean;
 }): JSX.Element {
   return (
-    <div className="mt-[30px] grid max-w-[1040px] gap-11 md:grid-cols-3">
+    <div className="mt-[30px] grid gap-11 md:grid-cols-3">
       {items.map((item, i) => (
         <div key={item.title} className={`reveal ${delayClass(i)}`}>
           {mono ? (

package/src/work.tsx

@@ -216,7 +216,7 @@ function WorkWorkshopSection({
   return (
     <Section id="workshop" className="py-14">
       <Statement {...statement} />
-      <div className="mt-7 max-w-[880px]">
+      <div className="mt-7">
         {steps.map((step, i) => (
           <div
             key={step.title}
@@ -228,7 +228,8 @@ function WorkWorkshopSection({
             <b className="font-display text-[21px] font-[520] text-theme [font-variation-settings:'SOFT'_60]">
               {step.title}
             </b>
-            <div>
+            {/* The row spans the column; the copy keeps a reading measure. */}
+            <div className="max-w-[60ch]">
               <p className="mb-[3px] font-body text-[16.5px] text-theme-muted">
                 {step.lead}
               </p>
@@ -263,7 +264,7 @@ function WorkPersonasSection({
   return (
     <Section id="personas" className="py-14">
       <SectCap lead={cap} />
-      <div className="mt-7 grid max-w-[980px] gap-11 md:grid-cols-2">
+      <div className="mt-7 grid gap-11 md:grid-cols-2">
         {personas.map((persona, i) => (
           <div key={persona.role} className={`reveal ${delayClass(i + 1)}`}>
             <span className="font-label text-label-xs uppercase tracking-[0.16em] text-accent">
@@ -272,7 +273,7 @@ function WorkPersonasSection({
             <blockquote className="mt-2.5 font-display text-[24px] font-[450] italic leading-[1.3] tracking-[-0.008em] text-theme [font-variation-settings:'SOFT'_85]">
               {persona.quote}
             </blockquote>
-            <p className="mt-2.5 font-body text-[16px] text-theme-light">
+            <p className="mt-2.5 max-w-[52ch] font-body text-[16px] text-theme-light">
               {persona.text}
             </p>
           </div>
@@ -303,7 +304,7 @@ function WorkQuotesSection({
   return (
     <Section id="proof" className="py-14">
       <SectCap lead={cap} trail={capNote} />
-      <div className="mt-7 max-w-[980px]">
+      <div className="mt-7">
         {quotes.map((quote, i) => (
           <div
             key={quote.by}
@@ -352,7 +353,7 @@ function WorkRosterSection({
   return (
     <Section id="people" className="py-14">
       <SectCap lead={cap} trail={capNote} />
-      <div className="reveal reveal-delay-1 mt-6 flex max-w-[900px] flex-wrap gap-x-[34px] gap-y-2.5">
+      <div className="reveal reveal-delay-1 mt-6 flex flex-wrap gap-x-[34px] gap-y-2.5">
         {people.map((person) => (
           <span
             key={person.name}