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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rizom/site-rizom-ai",
-  "version": "0.2.0-alpha.180",
+  "version": "0.2.0-alpha.181",
   "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.181",
+    "@rizom/site-rizom": "0.2.0-alpha.181",
+    "@rizom/site-sections": "0.2.0-alpha.181",
     "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/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,7 +115,7 @@ 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">
+    <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">
       <span className="text-theme-muted">rizom</span>
       {FACES.map((item) =>
         // No face is current on the umbrella home, nor on a cross-room index.
@@ -121,7 +123,7 @@ function FacesStrip({ path }: { path: string }): JSX.Element {
           <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 +132,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 +158,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>
       )}
@@ -189,9 +186,11 @@ function FaceNav({
   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 +204,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 +264,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 +286,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>

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 max-w-[1040px] 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>