@rizom/ui 0.2.0-alpha.36

package/README.md

@@ -0,0 +1,26 @@
+# @rizom/ui
+
+Shared Rizom UI primitives for app-owned Rizom site variants.
+
+## Purpose
+
+This package holds the app-facing Rizom UI layer used by extracted or app-local Rizom sites.
+It is intentionally narrower than `@brains/site-rizom` and excludes site/runtime composition concerns.
+
+## Includes
+
+- layout primitives such as `RizomFrame`, `Section`, `Header`, `Footer`, and `SideNav`
+- content UI such as `Badge`, `Button`, `Divider`, and `ProductCard`
+- shared text rendering helper `renderHighlightedText`
+- lightweight shared presentational types
+
+## Does not include
+
+- Rizom site/runtime composition
+- site-builder or `SiteInfo` contracts
+- app-specific layout helpers
+- `createRizomSite(...)`
+
+## Consumer contract
+
+Consumers should install `preact` alongside this package.

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@rizom/ui",
+  "version": "0.2.0-alpha.36",
+  "description": "Shared Rizom UI primitives for app-owned Rizom site variants.",
+  "type": "module",
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "exports": {
+    ".": "./src/index.ts"
+  },
+  "files": [
+    "src",
+    "README.md"
+  ],
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint . --ext .ts,.tsx",
+    "lint:fix": "eslint . --ext .ts,.tsx --fix"
+  },
+  "dependencies": {
+    "clsx": "^2.1.0",
+    "tailwind-merge": "^2.2.0"
+  },
+  "peerDependencies": {
+    "preact": "^10.27.2"
+  },
+  "devDependencies": {
+    "@brains/eslint-config": "workspace:*",
+    "@brains/typescript-config": "workspace:*",
+    "@types/bun": "latest",
+    "eslint": "^8.56.0",
+    "preact": "^10.27.2",
+    "typescript": "^5.3.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/rizom-ai/brains.git",
+    "directory": "shared/rizom-ui"
+  },
+  "license": "Apache-2.0",
+  "author": "Yeehaa <yeehaa@rizom.ai> (https://rizom.ai)",
+  "homepage": "https://github.com/rizom-ai/brains/tree/main/shared/rizom-ui#readme",
+  "bugs": "https://github.com/rizom-ai/brains/issues",
+  "engines": {
+    "bun": ">=1.3.3"
+  }
+}

package/src/Badge.tsx

@@ -0,0 +1,14 @@
+import type { JSX, ComponentChildren } from "preact";
+import { cn } from "./cn";
+
+export interface BadgeProps {
+  children?: ComponentChildren;
+  className?: string;
+}
+
+const BASE =
+  "inline-flex items-center px-5 py-2 border border-accent text-accent rounded-[20px] font-label text-label-md font-semibold tracking-[0.09375em] uppercase";
+
+export const Badge = ({ children, className }: BadgeProps): JSX.Element => (
+  <span className={cn(BASE, className)}>{children}</span>
+);

package/src/Button.tsx

@@ -0,0 +1,56 @@
+import type { JSX, ComponentChildren } from "preact";
+import { cn } from "./cn";
+
+export type ButtonVariant = "primary" | "primary-strong" | "secondary";
+export type ButtonSize = "md" | "lg";
+
+export interface ButtonProps {
+  href: string;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  block?: boolean;
+  className?: string;
+  children?: ComponentChildren;
+}
+
+const BASE =
+  "inline-flex items-center justify-center cursor-pointer border border-solid transition-all [gap:var(--rizom-btn-gap)] [border-radius:var(--rizom-btn-radius)] [font-family:var(--rizom-btn-font-family)] [font-style:var(--rizom-btn-font-style)] [letter-spacing:var(--rizom-btn-letter-spacing)] [text-transform:var(--rizom-btn-text-transform)]";
+const VARIANT: Record<ButtonVariant, string> = {
+  primary:
+    "[font-weight:var(--rizom-btn-primary-font-weight)] [color:var(--rizom-btn-primary-color)] [background:var(--rizom-btn-primary-bg)] [border-color:var(--rizom-btn-primary-border-color)] [border-width:var(--rizom-btn-primary-border-width)] [box-shadow:var(--rizom-btn-primary-shadow)] hover:[color:var(--rizom-btn-primary-hover-color)] hover:[background:var(--rizom-btn-primary-hover-bg)] hover:[border-color:var(--rizom-btn-primary-hover-border-color)] hover:[border-width:var(--rizom-btn-primary-hover-border-width)] hover:[box-shadow:var(--rizom-btn-primary-hover-shadow)] hover:[transform:var(--rizom-btn-primary-hover-transform)]",
+  "primary-strong":
+    "duration-400 ease-[cubic-bezier(0.2,0.8,0.2,1)] [font-weight:var(--rizom-btn-primary-strong-font-weight)] [color:var(--rizom-btn-primary-strong-color)] [background:var(--rizom-btn-primary-strong-bg)] [border-color:var(--rizom-btn-primary-strong-border-color)] [border-width:var(--rizom-btn-primary-strong-border-width)] [box-shadow:var(--rizom-btn-primary-strong-shadow)] hover:[color:var(--rizom-btn-primary-strong-hover-color)] hover:[background:var(--rizom-btn-primary-strong-hover-bg)] hover:[border-color:var(--rizom-btn-primary-strong-hover-border-color)] hover:[border-width:var(--rizom-btn-primary-strong-hover-border-width)] hover:[box-shadow:var(--rizom-btn-primary-strong-hover-shadow)] hover:[transform:var(--rizom-btn-primary-strong-hover-transform)]",
+  secondary:
+    "[font-weight:var(--rizom-btn-secondary-font-weight)] [color:var(--rizom-btn-secondary-color)] [background:var(--rizom-btn-secondary-bg)] [border-color:var(--rizom-btn-secondary-border-color)] [border-width:var(--rizom-btn-secondary-border-width)] [box-shadow:var(--rizom-btn-secondary-shadow)] hover:[color:var(--rizom-btn-secondary-hover-color)] hover:[background:var(--rizom-btn-secondary-hover-bg)] hover:[border-color:var(--rizom-btn-secondary-hover-border-color)] hover:[border-width:var(--rizom-btn-secondary-hover-border-width)] hover:[box-shadow:var(--rizom-btn-secondary-hover-shadow)] hover:[transform:var(--rizom-btn-secondary-hover-transform)]",
+};
+const SIZE: Record<ButtonSize, string> = {
+  md: "text-base [padding:var(--rizom-btn-md-padding)]",
+  lg: "text-body-md md:text-body-lg [padding:var(--rizom-btn-lg-padding-mobile)] md:[padding:var(--rizom-btn-lg-padding-desktop)]",
+};
+const BLOCK = "w-full md:w-auto";
+
+export const Button = ({
+  href,
+  variant = "primary",
+  size = "md",
+  block = false,
+  className,
+  children,
+}: ButtonProps): JSX.Element => (
+  <a
+    href={href}
+    className={cn(
+      "rizom-btn",
+      `rizom-btn-${variant}`,
+      `rizom-btn-${size}`,
+      block && "rizom-btn-block",
+      BASE,
+      VARIANT[variant],
+      SIZE[size],
+      block && BLOCK,
+      className,
+    )}
+  >
+    {children}
+  </a>
+);

package/src/Divider.tsx

@@ -0,0 +1,12 @@
+import type { JSX } from "preact";
+import { cn } from "./cn";
+
+export interface DividerProps {
+  className?: string;
+}
+
+const BASE = "w-[60px] h-px bg-[var(--color-divider)] mx-auto";
+
+export const Divider = ({ className }: DividerProps): JSX.Element => (
+  <div className={cn(BASE, className)} />
+);

package/src/Footer.tsx

@@ -0,0 +1,70 @@
+import type { JSX } from "preact";
+import { cn } from "./cn";
+import type { RizomBrandSuffix, RizomFooterTagline, RizomLink } from "./types";
+import { GUTTER } from "./Section";
+
+const LINK_CLS =
+  "text-label-md text-theme-light hover:text-theme transition-colors";
+
+const TOGGLE_CLS =
+  "bg-transparent border border-theme-light rounded-md px-2.5 py-1.5 cursor-pointer text-theme-light text-label-md font-body transition-colors hover:text-theme hover:border-theme";
+
+interface FooterProps {
+  brandSuffix: RizomBrandSuffix;
+  metaLabel: string;
+  tagline?: RizomFooterTagline;
+  links: RizomLink[];
+  className?: string;
+}
+
+export const Footer = ({
+  brandSuffix,
+  metaLabel,
+  tagline,
+  links,
+  className,
+}: FooterProps): JSX.Element => (
+  <footer
+    className={cn(
+      `flex flex-col gap-4 ${GUTTER} py-8 md:flex-row md:items-center md:justify-between md:gap-6 md:py-6 border-t border-theme-light text-center md:text-left`,
+      className,
+    )}
+  >
+    <div className="flex flex-col items-center gap-1.5 md:items-start max-w-[560px]">
+      <div className="flex flex-col items-center gap-1.5 md:flex-row md:items-center md:gap-3">
+        <span className="font-nav text-[15px]">
+          <span className="font-bold">rizom</span>
+          <span className="font-bold text-accent">.</span>
+          <span className="text-theme-muted">{brandSuffix}</span>
+        </span>
+        <span className="text-label-md text-theme-light">{metaLabel}</span>
+      </div>
+      {tagline ? (
+        <p className="text-label-md leading-[1.6] text-theme-light">
+          {tagline.prefix ?? ""}
+          <a
+            href={tagline.link.href}
+            className="text-accent hover:opacity-75 transition-opacity"
+          >
+            {tagline.link.label}
+          </a>
+          {tagline.suffix ?? ""}
+        </p>
+      ) : null}
+    </div>
+    <div className="flex flex-wrap items-center justify-center gap-4 md:justify-end md:gap-6">
+      {links.map((link) => (
+        <a key={link.href + link.label} href={link.href} className={LINK_CLS}>
+          {link.label}
+        </a>
+      ))}
+      <button
+        id="themeToggle"
+        aria-label="Toggle light mode"
+        className={TOGGLE_CLS}
+      >
+        ☀ Light
+      </button>
+    </div>
+  </footer>
+);

package/src/Header.tsx

@@ -0,0 +1,38 @@
+import type { JSX } from "preact";
+import type { RizomBrandSuffix, RizomLink } from "./types";
+
+const LINK_CLS =
+  "hidden md:inline-block font-body text-[15px] text-theme-muted hover:text-theme transition-colors relative py-1 after:content-[''] after:absolute after:left-0 after:bottom-0 after:h-px after:w-0 after:bg-accent after:transition-all after:duration-300 hover:after:w-full";
+
+interface HeaderProps {
+  brandSuffix: RizomBrandSuffix;
+  navLinks: RizomLink[];
+  primaryCta: RizomLink;
+}
+
+export const Header = ({
+  brandSuffix,
+  navLinks,
+  primaryCta,
+}: HeaderProps): JSX.Element => (
+  <nav className="fixed top-0 left-0 right-0 z-[100] flex items-center justify-between bg-nav-fade px-6 py-4 backdrop-blur-[8px] md:px-10 md:py-5 xl:px-20">
+    <div className="flex items-center gap-0 font-nav text-[20px]">
+      <span className="font-bold text-theme">rizom</span>
+      <span className="font-bold text-accent">.</span>
+      <span className="text-theme-muted">{brandSuffix}</span>
+    </div>
+    <div className="flex items-center gap-3 md:gap-8">
+      {navLinks.map((link) => (
+        <a key={link.href} href={link.href} className={LINK_CLS}>
+          {link.label}
+        </a>
+      ))}
+      <a
+        href={primaryCta.href}
+        className="font-body text-[13px] font-semibold text-theme border border-theme rounded-[8px] px-4 py-2 transition-colors hover:border-accent hover:text-accent md:px-6 md:py-2.5 md:text-[15px]"
+      >
+        {primaryCta.label}
+      </a>
+    </div>
+  </nav>
+);

package/src/ProductCard.tsx

@@ -0,0 +1,170 @@
+import type { ComponentChildren, JSX } from "preact";
+import { ProductIllustration } from "./ProductIllustration";
+import { Section } from "./Section";
+import type { ProductCardContent, ProductVariant } from "./types";
+
+const INNER_BASE =
+  "group relative overflow-hidden grid gap-8 md:gap-14 rounded-[20px] border px-6 py-8 md:px-12 md:py-11 transition-all duration-500 ease-[cubic-bezier(0.2,0.8,0.2,1)] hover:-translate-y-1 [background-image:var(--rizom-product-card-bg)] [border-color:var(--rizom-product-card-border)] hover:[border-color:var(--rizom-product-card-hover-border)] hover:[box-shadow:var(--rizom-product-card-hover-shadow)] before:content-[''] before:absolute before:left-0 before:right-0 before:top-0 before:h-[2px] before:opacity-70 hover:before:opacity-100 before:[background-image:var(--rizom-product-card-bar)] after:content-[''] after:absolute after:inset-0 after:pointer-events-none after:bg-[radial-gradient(circle_at_1px_1px,var(--color-card-grid-dot)_1px,transparent_0)] after:bg-[length:22px_22px] after:bg-[position:14px_14px] after:[mask-image:linear-gradient(180deg,#000_0%,#000_55%,transparent_100%)]";
+const INNER_LAYOUT_CLASS: Record<ProductVariant, string> = {
+  rover: "md:[grid-template-columns:minmax(0,1fr)_minmax(0,1.05fr)]",
+  relay: "md:[grid-template-columns:minmax(0,1.05fr)_minmax(0,1fr)]",
+  ranger: "md:[grid-template-columns:minmax(0,1fr)_minmax(0,1.05fr)]",
+};
+const INNER_THEME_CLASS: Record<ProductVariant, string> = {
+  rover:
+    "[--rizom-product-card-bg:var(--color-card-rover-bg)] [--rizom-product-card-border:var(--color-card-rover-border)] [--rizom-product-card-hover-border:var(--color-card-rover-border-hover)] [--rizom-product-card-hover-shadow:0_30px_80px_-30px_var(--color-glow-rover)] [--rizom-product-card-bar:linear-gradient(90deg,transparent,var(--color-accent)_30%,var(--color-accent)_70%,transparent)]",
+  relay:
+    "[--rizom-product-card-bg:var(--color-card-relay-bg)] [--rizom-product-card-border:var(--color-card-relay-border)] [--rizom-product-card-hover-border:var(--color-card-relay-border-hover)] [--rizom-product-card-hover-shadow:0_30px_80px_-30px_var(--color-glow-relay)] [--rizom-product-card-bar:linear-gradient(90deg,transparent,var(--color-secondary)_30%,var(--color-secondary)_70%,transparent)]",
+  ranger:
+    "[--rizom-product-card-bg:var(--color-card-ranger-bg)] [--rizom-product-card-border:var(--color-card-ranger-border)] [--rizom-product-card-hover-border:var(--color-card-ranger-border-hover)] [--rizom-product-card-hover-shadow:0_30px_80px_-30px_var(--color-glow-ranger)] [--rizom-product-card-bar:linear-gradient(90deg,transparent,var(--palette-amber-light)_18%,var(--color-secondary)_82%,transparent)]",
+};
+const ILLUSTRATION_BASE =
+  "relative z-[1] order-first h-[220px] w-full overflow-hidden rounded-xl border md:h-[320px] [border-color:var(--color-card-illust-border)] [background-image:linear-gradient(var(--color-card-illust-grid)_1px,transparent_1px),linear-gradient(90deg,var(--color-card-illust-grid)_1px,transparent_1px),var(--color-card-illust-overlay)] [background-size:28px_28px,28px_28px,auto]";
+
+const CORNER_BASE =
+  "pointer-events-none absolute h-[14px] w-[14px] opacity-85 before:content-[''] before:absolute before:left-0 before:top-0 before:h-[1.5px] before:w-full before:bg-current after:content-[''] after:absolute after:left-0 after:top-0 after:h-full after:w-[1.5px] after:bg-current";
+const ILLUSTRATION_CORNER_BASE = `${CORNER_BASE} z-[2]`;
+
+const CORNER_CLASS: Record<ProductVariant, string> = {
+  rover: "text-accent",
+  relay: "text-secondary",
+  ranger: "text-secondary",
+};
+
+const TAGLINE_ARROW_CLASS: Record<ProductVariant, string> = {
+  rover: "text-accent",
+  relay: "text-secondary",
+  ranger: "text-secondary",
+};
+
+const DEFAULT_TAGLINES: Record<ProductVariant, string[]> = {
+  rover: ["Ingest", "Synthesize", "Publish"],
+  relay: ["Map", "Track", "Retain"],
+  ranger: ["Scan", "Score", "Assemble"],
+};
+
+export const ProductCard = ({
+  variant,
+  label,
+  badge,
+  headline,
+  description,
+  tagline,
+  tags,
+  backgroundWatermark,
+}: ProductCardContent & {
+  backgroundWatermark?: ComponentChildren;
+}): JSX.Element => {
+  const amber = variant === "rover";
+  const isRelay = variant === "relay";
+  const accentText = amber ? "text-accent" : "text-secondary";
+  const badgeClasses = amber
+    ? "border border-accent/45 text-accent bg-accent/10"
+    : "border border-secondary/45 text-secondary bg-secondary/10";
+  const tagClasses = amber ? "text-accent/90" : "text-secondary/90";
+  const taglineParts =
+    tagline && tagline.length > 0 ? tagline : DEFAULT_TAGLINES[variant];
+
+  return (
+    <Section className="reveal py-9">
+      <div
+        className={`${INNER_BASE} ${INNER_LAYOUT_CLASS[variant]} ${INNER_THEME_CLASS[variant]}`}
+      >
+        <span
+          className={`${CORNER_BASE} ${CORNER_CLASS[variant]} left-3 top-3`}
+        />
+        <span
+          className={`${CORNER_BASE} ${CORNER_CLASS[variant]} right-3 top-3 scale-x-[-1]`}
+        />
+        <span
+          className={`${CORNER_BASE} ${CORNER_CLASS[variant]} bottom-3 left-3 scale-y-[-1]`}
+        />
+        <span
+          className={`${CORNER_BASE} ${CORNER_CLASS[variant]} bottom-3 right-3 scale-[-1]`}
+        />
+
+        <div
+          className={`relative z-[1] min-w-0 pt-1 ${isRelay ? "md:order-2" : ""}`}
+        >
+          {backgroundWatermark ? (
+            <div className="pointer-events-none absolute left-1/2 top-1/2 z-0 w-[320px] -translate-x-1/2 -translate-y-1/2 md:w-[400px] lg:w-[460px] opacity-[0.18]">
+              {backgroundWatermark}
+            </div>
+          ) : null}
+
+          <div className="relative z-[1] flex flex-col gap-[18px]">
+            <div className="flex flex-wrap items-baseline gap-3.5 border-b border-dashed border-[var(--color-card-divider)] pb-3.5">
+              <span
+                className={`font-display text-[38px] font-bold leading-none tracking-[-1.2px] md:text-[52px] ${accentText}`}
+              >
+                {label}
+              </span>
+              <span
+                className={`ml-auto inline-flex items-center gap-1.5 rounded-[2px] px-2.5 py-[5px] font-mono text-[10px] font-semibold uppercase tracking-[0.2em] ${badgeClasses}`}
+              >
+                <span className="text-[9px] leading-none">▸</span>
+                {badge}
+              </span>
+            </div>
+
+            <div className="flex flex-wrap items-center gap-2.5 font-mono text-[11.5px] uppercase tracking-[0.22em] text-theme-muted">
+              {taglineParts.map((part, index) => (
+                <span key={`${variant}-${part}`} className="contents">
+                  {index > 0 ? (
+                    <span
+                      className={`opacity-55 ${TAGLINE_ARROW_CLASS[variant]}`}
+                    >
+                      →
+                    </span>
+                  ) : null}
+                  <span>{part}</span>
+                </span>
+              ))}
+            </div>
+
+            <h3 className="font-display text-[26px] font-bold leading-[1.18] tracking-[-0.6px] md:text-[36px]">
+              {headline}
+            </h3>
+            <p className="max-w-[54ch] text-body-md leading-[1.7] text-theme-muted">
+              {description}
+            </p>
+
+            <div className="mt-auto flex flex-wrap items-center gap-x-0 gap-y-1.5 border-t border-dashed border-[var(--color-card-divider)] pt-[18px]">
+              {tags.map((tag, index) => (
+                <span
+                  key={tag}
+                  className={`font-mono text-[10px] font-medium uppercase tracking-[0.16em] ${tagClasses}`}
+                >
+                  {index > 0 ? (
+                    <span className="pr-2.5 text-[var(--color-card-tag-separator)]">
+                      /
+                    </span>
+                  ) : null}
+                  <span className="pr-2.5">{tag}</span>
+                </span>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <div
+          className={`${ILLUSTRATION_BASE} ${isRelay ? "md:order-1" : "md:order-none"}`}
+        >
+          <span
+            className={`${ILLUSTRATION_CORNER_BASE} ${CORNER_CLASS[variant]} left-[10px] top-[10px]`}
+          />
+          <span
+            className={`${ILLUSTRATION_CORNER_BASE} ${CORNER_CLASS[variant]} right-[10px] top-[10px] scale-x-[-1]`}
+          />
+          <span
+            className={`${ILLUSTRATION_CORNER_BASE} ${CORNER_CLASS[variant]} bottom-[10px] left-[10px] scale-y-[-1]`}
+          />
+          <span
+            className={`${ILLUSTRATION_CORNER_BASE} ${CORNER_CLASS[variant]} bottom-[10px] right-[10px] scale-[-1]`}
+          />
+          <ProductIllustration variant={variant} />
+        </div>
+      </div>
+    </Section>
+  );
+};