noecosystem-design 0.1.0

package/packages/ui/src/cinematic/kinetic-experience.tsx

@@ -0,0 +1,207 @@
+'use client';
+
+// Token exception — cinematic accent values for timeline (--timeline-accent)
+// Owner: @noe/design-tokens, Reason: timeline accent is canvas/timeline signal, uses primitive mint/cyan hex because CSS var is set via inline style for JS-driven active index; values track primitive palette (mint-100 #98e8cf, cyan-400 #55d6ff)
+// Review: 2027-08-28, Affected: cinematic/kinetic-experience.tsx, Test: visual regression
+
+import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
+import { useEffect, useState } from 'react';
+import './cinematic.css';
+
+export type KineticSection = { id: string; label: string };
+
+export function KineticExperience({ sections }: { sections: KineticSection[] }) {
+  const [active, setActive] = useState(sections[0]?.id || 'top');
+  const activeIndex = Math.max(
+    0,
+    sections.findIndex((section) => section.id === active),
+  );
+
+  useEffect(() => {
+    const root = document.documentElement;
+    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+    const revealTargets = Array.from(document.querySelectorAll<HTMLElement>('[data-motion]'));
+    const sectionTargets = sections
+      .map((section) => document.getElementById(section.id))
+      .filter((section): section is HTMLElement => Boolean(section));
+
+    let pointerFrame = 0;
+    let scrollFrame = 0;
+    let hashFrame = 0;
+    let hashTimer = 0 as unknown as number;
+    let heroObserver: IntersectionObserver | null = null;
+    root.classList.add('kinetic-enhanced');
+
+    const revealObserver = new IntersectionObserver(
+      (entries, observer) => {
+        entries.forEach((entry) => {
+          if (!entry.isIntersecting) return;
+          entry.target.classList.add('is-motion-visible');
+          observer.unobserve(entry.target);
+        });
+      },
+      { rootMargin: '0px 0px -10%', threshold: 0.08 },
+    );
+
+    revealTargets.forEach((target) => {
+      if (reducedMotion.matches || target.getBoundingClientRect().top < window.innerHeight * 0.92)
+        target.classList.add('is-motion-visible');
+      else revealObserver.observe(target);
+    });
+
+    const sectionObserver = new IntersectionObserver(
+      (entries) => {
+        const visible = entries
+          .filter((e) => e.isIntersecting)
+          .sort((a, b) => b.intersectionRatio - a.intersectionRatio)[0];
+        if (visible && (visible.target as HTMLElement).id)
+          setActive((visible.target as HTMLElement).id);
+      },
+      { rootMargin: '-32% 0px -52%', threshold: [0, 0.15, 0.45] },
+    );
+    sectionTargets.forEach((target) => sectionObserver.observe(target));
+
+    const updateScroll = () => {
+      scrollFrame = 0;
+      const range = Math.max(1, document.documentElement.scrollHeight - window.innerHeight);
+      root.style.setProperty(
+        '--kinetic-scroll',
+        String(Math.min(1, Math.max(0, window.scrollY / range))),
+      );
+      const hero = document.getElementById('top');
+      if (hero) {
+        const heroRect = hero.getBoundingClientRect();
+        const heroRange = Math.max(1, hero.offsetHeight - window.innerHeight);
+        const heroProgress = reducedMotion.matches
+          ? 0
+          : Math.min(1, Math.max(0, -heroRect.top / heroRange));
+        const heroPhase = Math.min(2, Math.floor(Math.min(0.9999, heroProgress) * 3));
+        root.style.setProperty('--hero-progress', heroProgress.toFixed(4));
+        hero.dataset.heroPhase = String(heroPhase);
+      }
+    };
+    const onScroll = () => {
+      if (!scrollFrame) scrollFrame = window.requestAnimationFrame(updateScroll);
+    };
+
+    const finePointer = window.matchMedia('(pointer: fine)').matches;
+    const onPointerMove = (event: PointerEvent) => {
+      if (!finePointer || reducedMotion.matches || pointerFrame) return;
+      pointerFrame = window.requestAnimationFrame(() => {
+        pointerFrame = 0;
+        root.style.setProperty('--kinetic-x', `${event.clientX}px`);
+        root.style.setProperty('--kinetic-y', `${event.clientY}px`);
+        root.style.setProperty(
+          '--kinetic-shift-x',
+          `${(event.clientX / window.innerWidth - 0.5) * 14}px`,
+        );
+        root.style.setProperty(
+          '--kinetic-shift-y',
+          `${(event.clientY / window.innerHeight - 0.5) * 14}px`,
+        );
+      });
+    };
+
+    updateScroll();
+    const hero = document.getElementById('top');
+    if (hero) {
+      heroObserver = new IntersectionObserver(
+        (entries) => {
+          const entry = entries[0];
+          hero.dataset.heroMotion = entry?.isIntersecting ? 'active' : 'paused';
+        },
+        { rootMargin: '12% 0px' },
+      );
+      heroObserver.observe(hero);
+    }
+    const alignHashTarget = () => {
+      const targetId = decodeURIComponent(window.location.hash.slice(1));
+      if (!sections.some((section) => section.id === targetId)) return;
+      if (hashTimer) window.clearTimeout(hashTimer);
+      if (hashFrame) window.cancelAnimationFrame(hashFrame);
+      hashTimer = window.setTimeout(() => {
+        const target = document.getElementById(targetId);
+        if (!target) return;
+        hashFrame = window.requestAnimationFrame(() => {
+          window.scrollTo({ top: target.offsetTop + 2, behavior: 'auto' });
+        });
+      }, 80) as unknown as number;
+    };
+    alignHashTarget();
+    window.addEventListener('scroll', onScroll, { passive: true });
+    window.addEventListener('pointermove', onPointerMove, { passive: true });
+    window.addEventListener('hashchange', alignHashTarget);
+    reducedMotion.addEventListener('change', updateScroll);
+
+    return () => {
+      root.classList.remove('kinetic-enhanced');
+      revealObserver.disconnect();
+      sectionObserver.disconnect();
+      heroObserver?.disconnect();
+      window.removeEventListener('scroll', onScroll);
+      window.removeEventListener('pointermove', onPointerMove);
+      window.removeEventListener('hashchange', alignHashTarget);
+      reducedMotion.removeEventListener('change', updateScroll);
+      if (pointerFrame) window.cancelAnimationFrame(pointerFrame);
+      if (scrollFrame) window.cancelAnimationFrame(scrollFrame);
+      if (hashFrame) window.cancelAnimationFrame(hashFrame);
+      if (hashTimer) window.clearTimeout(hashTimer);
+    };
+  }, [sections]);
+
+  const goToSection = (event: ReactMouseEvent<HTMLAnchorElement>, id: string) => {
+    const target = document.getElementById(id);
+    if (!target) return;
+    event.preventDefault();
+    window.history.pushState(null, '', `#${id}`);
+    window.scrollTo({
+      top: target.offsetTop + 2,
+      behavior: window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth',
+    });
+  };
+
+  return (
+    <>
+      <aside
+        className="kinetic-timeline"
+        aria-label="Page sections"
+        style={
+          {
+            '--active-index': activeIndex,
+            '--section-count': Math.max(1, sections.length),
+            '--timeline-accent':
+              ['#98e8cf', '#55d6ff', '#98e8cf', '#98e8cf'][activeIndex] || '#98e8cf',
+          } as CSSProperties
+        }
+      >
+        <div className="kinetic-timeline-readout" aria-hidden="true">
+          <span>{String(activeIndex + 1).padStart(2, '0')}</span>
+          <strong>{sections[activeIndex]?.label || 'System'}</strong>
+        </div>
+        <nav>
+          {sections.map((section) => (
+            <a
+              key={section.id}
+              className={active === section.id ? 'is-active' : ''}
+              href={`#${section.id}`}
+              onClick={(event) => goToSection(event, section.id)}
+              aria-label={`Go to ${section.label}`}
+              aria-current={active === section.id ? 'location' : undefined}
+            >
+              <i aria-hidden="true" />
+              <em>{section.label}</em>
+            </a>
+          ))}
+        </nav>
+        <div className="kinetic-timeline-progress" aria-hidden="true">
+          <i />
+        </div>
+      </aside>
+      <div className="kinetic-signal" aria-hidden="true">
+        <i /> Scroll-directed system
+      </div>
+    </>
+  );
+}
+
+export default KineticExperience;

package/packages/ui/src/cinematic/portfolio.ts

@@ -0,0 +1,132 @@
+export type PortfolioNodeStatus = 'live' | 'capability';
+
+export type PortfolioNode = {
+  id: string;
+  name: string;
+  layer: string;
+  summary: string;
+  status: PortfolioNodeStatus;
+  href?: string;
+  visible?: boolean;
+  order?: number;
+};
+
+export const PUBLIC_PORTFOLIO_CORE = {
+  name: 'NOEcosystem',
+  layer: 'Operating Ecosystem',
+} as const;
+
+export const PUBLIC_PORTFOLIO_NODES: readonly PortfolioNode[] = [
+  {
+    id: 'nocloud',
+    name: 'NOCloud',
+    layer: 'Cloud Engineering',
+    summary: 'Cloud engineering capabilities for shared digital foundations.',
+    status: 'capability',
+  },
+  {
+    id: 'noassure',
+    name: 'NOAssure',
+    layer: 'Trust & Assurance',
+    summary: 'Trust and assurance capabilities across the operating ecosystem.',
+    status: 'capability',
+  },
+  {
+    id: 'nodata',
+    name: 'NOData',
+    layer: 'Data & Integration',
+    summary: 'Shared data and integration capabilities for connected services.',
+    status: 'capability',
+  },
+  {
+    id: 'nochain',
+    name: 'NOChain',
+    layer: 'Ledger & Blockchain',
+    summary: 'Ledger and blockchain capabilities for verifiable coordination.',
+    status: 'capability',
+  },
+  {
+    id: 'norchestration',
+    name: 'NOrchestration',
+    layer: 'Enterprise Orchestration',
+    summary: 'Enterprise orchestration for connected capabilities and workflows.',
+    status: 'capability',
+  },
+  {
+    id: 'nosist',
+    name: 'NOsist',
+    layer: 'AI Foundation',
+    summary: 'A shared AI foundation for products, teams, and experiences.',
+    status: 'capability',
+  },
+  {
+    id: 'nopartner',
+    name: 'NOPartner',
+    layer: 'Partner Ecosystem',
+    summary: 'Partner ecosystem capabilities for coordinated participation.',
+    status: 'capability',
+  },
+  {
+    id: 'norbit',
+    name: 'NOrbit',
+    layer: 'Unified Superapp',
+    summary: 'A unified superapp experience built on shared foundations.',
+    status: 'capability',
+  },
+  {
+    id: 'norganization',
+    name: 'NOrganization',
+    layer: 'HR & Organization',
+    summary: 'Connected people, structure, and organizational operations.',
+    status: 'capability',
+  },
+  {
+    id: 'nofinix',
+    name: 'NOFinix',
+    layer: 'Finance & Control',
+    summary: 'Financial visibility, governance, and control across the ecosystem.',
+    status: 'capability',
+  },
+  {
+    id: 'nobank',
+    name: 'NOBank',
+    layer: 'Digital Banking',
+    summary: 'Digital banking capabilities for connected financial experiences.',
+    status: 'capability',
+  },
+  {
+    id: 'noceo',
+    name: 'NOCEO',
+    layer: 'Executive Intelligence',
+    summary: 'Decision intelligence for connected executive workflows.',
+    status: 'capability',
+  },
+  {
+    id: 'notradex',
+    name: 'NOTradex',
+    layer: 'Advisory & Trading',
+    summary: 'Connected advisory and trading capabilities.',
+    status: 'capability',
+  },
+  {
+    id: 'nocvc',
+    name: 'NOCVC',
+    layer: 'Venture Studio',
+    summary: 'A venture studio for shaping and accelerating new businesses.',
+    status: 'capability',
+  },
+  {
+    id: 'nobazi',
+    name: 'NOBazi',
+    layer: 'Loyalty & Gamification',
+    summary: 'Loyalty and gamification capabilities for sustained engagement.',
+    status: 'capability',
+  },
+  {
+    id: 'nofit',
+    name: 'NOFit',
+    layer: 'Health & Fitness',
+    summary: 'Connected health and fitness experiences.',
+    status: 'capability',
+  },
+] as const;

package/packages/ui/src/cinematic/system-anatomy.tsx

@@ -0,0 +1,173 @@
+'use client';
+
+import type { CSSProperties } from 'react';
+import { useEffect, useRef, useState } from 'react';
+import './cinematic.css';
+
+const chapters = [
+  {
+    number: '01',
+    label: 'Foundation',
+    title: 'Shared by design.',
+    body: 'Identity, trust, data, and reusable capabilities form one dependable foundation beneath every experience.',
+  },
+  {
+    number: '02',
+    label: 'Orchestration',
+    title: 'Connected with intent.',
+    body: 'Each capability stays focused while orchestration moves signals and services only where they are needed.',
+  },
+  {
+    number: '03',
+    label: 'Experience',
+    title: 'Clear at the surface.',
+    body: 'A sophisticated system meets people through calm, coherent, and distinctly useful experiences.',
+  },
+] as const;
+
+export interface SystemAnatomyProps {
+  id?: string;
+  className?: string;
+}
+
+export function SystemAnatomy({ id = 'idea', className }: SystemAnatomyProps) {
+  const rootRef = useRef<HTMLElement>(null);
+  const frameRef = useRef(0);
+  const [chapter, setChapter] = useState(0);
+  const [showAllChapters, setShowAllChapters] = useState(false);
+
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root) return;
+    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+    const syncMotionPreference = () => setShowAllChapters(reducedMotion.matches);
+    syncMotionPreference();
+    reducedMotion.addEventListener('change', syncMotionPreference);
+
+    const update = () => {
+      frameRef.current = 0;
+      if (reducedMotion.matches) {
+        root.style.setProperty('--anatomy-progress', '1');
+        setChapter(chapters.length - 1);
+        return;
+      }
+      const rect = root.getBoundingClientRect();
+      const scrollable = Math.max(1, root.offsetHeight - window.innerHeight);
+      const progress = Math.max(0, Math.min(1, -rect.top / scrollable));
+      root.style.setProperty('--anatomy-progress', progress.toFixed(4));
+      setChapter(Math.min(chapters.length - 1, Math.floor(progress * chapters.length)));
+    };
+    const onScroll = () => {
+      if (!frameRef.current) frameRef.current = window.requestAnimationFrame(update);
+    };
+    update();
+    window.addEventListener('scroll', onScroll, { passive: true });
+    window.addEventListener('resize', onScroll, { passive: true });
+    return () => {
+      window.removeEventListener('scroll', onScroll);
+      window.removeEventListener('resize', onScroll);
+      reducedMotion.removeEventListener('change', syncMotionPreference);
+      if (frameRef.current) window.cancelAnimationFrame(frameRef.current);
+    };
+  }, []);
+
+  return (
+    <section
+      className={className ? `system-anatomy ${className}` : 'system-anatomy'}
+      id={id}
+      ref={rootRef}
+      data-anatomy-chapter={chapter}
+    >
+      <div className="anatomy-sticky">
+        <div className="anatomy-copy">
+          <div
+            aria-hidden="true"
+            style={{
+              width: 'clamp(160px, 16vw, 230px)',
+              height: 'auto',
+              marginBottom: '2.5rem',
+              fontWeight: 800,
+              letterSpacing: '-0.05em',
+              fontSize: '1.25rem',
+              color: 'var(--noe-canvas-copy)',
+            }}
+          >
+            NOECOSYSTEM
+          </div>
+          <p>One system. Built deliberately.</p>
+          <h2>A shared core. Distinct experiences.</h2>
+          <div className="anatomy-chapters" aria-live="polite">
+            {chapters.map((item, index) => (
+              <article
+                className={chapter === index ? 'is-active' : ''}
+                aria-hidden={!showAllChapters && chapter !== index}
+                key={item.number}
+              >
+                <span>
+                  {item.number} / {item.label}
+                </span>
+                <h3>{item.title}</h3>
+                <p>{item.body}</p>
+              </article>
+            ))}
+          </div>
+        </div>
+
+        <div className="anatomy-machine" aria-hidden="true">
+          <div className="anatomy-ruler ruler-top">
+            {Array.from({ length: 32 }, (_, i) => (
+              <i key={i} />
+            ))}
+          </div>
+          <div className="anatomy-ruler ruler-side">
+            {Array.from({ length: 22 }, (_, i) => (
+              <i key={i} />
+            ))}
+          </div>
+          <div className="machine-halo halo-one" />
+          <div className="machine-halo halo-two" />
+          <div className="machine-layer layer-foundation">
+            <span>FOUNDATION</span>
+            <i>01</i>
+          </div>
+          <div className="machine-layer layer-connection">
+            <span>ORCHESTRATION</span>
+            <i>02</i>
+          </div>
+          <div className="machine-layer layer-experience">
+            <span>EXPERIENCE</span>
+            <i>03</i>
+          </div>
+          <div className="machine-core">
+            <span aria-hidden="true" style={{ fontWeight: 800, fontSize: '1rem' }}>
+              NO
+            </span>
+          </div>
+          <div className="machine-leader leader-a">
+            <span>SHARED CORE</span>
+          </div>
+          <div className="machine-leader leader-b">
+            <span>LIVE SIGNAL</span>
+          </div>
+          <div className="machine-leader leader-c">
+            <span>CONNECTED OUTPUT</span>
+          </div>
+          <i className="machine-packet packet-one" />
+          <i className="machine-packet packet-two" />
+        </div>
+
+        <div className="anatomy-footer">
+          <span>EXPLODED VIEW / NO–001</span>
+          <div className="anatomy-progress">
+            <i style={{ '--anatomy-step': chapter + 1 } as CSSProperties} />
+          </div>
+          <span>
+            {String(Math.round(((chapter + 1) / chapters.length) * 100)).padStart(3, '0')}%
+          </span>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default SystemAnatomy;

package/packages/ui/src/code.tsx

@@ -0,0 +1,119 @@
+import type * as React from 'react';
+
+import { cn } from './lib/cn';
+
+export function InlineCode({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <code
+      className={cn(
+        'rounded-sm border border-border bg-muted px-1.5 py-0.5 font-mono text-[0.85em] text-foreground',
+        className,
+      )}
+      data-slot="inline-code"
+      dir="ltr"
+    >
+      {children}
+    </code>
+  );
+}
+
+export function CodeBlock({
+  code,
+  language,
+  label,
+  className,
+}: {
+  code: string;
+  language?: string;
+  label?: React.ReactNode;
+  className?: string;
+}) {
+  const caption = label ?? language;
+  return (
+    <figure
+      className={cn(
+        'overflow-hidden rounded-lg border border-border bg-surface-sunken text-sm',
+        className,
+      )}
+      data-slot="code-block"
+      dir="ltr"
+    >
+      {caption ? (
+        <figcaption className="flex items-center justify-between gap-2 border-b border-border bg-surface-raised px-4 py-2 font-mono text-xs text-muted-foreground">
+          {caption}
+        </figcaption>
+      ) : null}
+      <pre className="overflow-x-auto p-4 leading-relaxed">
+        <code className="font-mono text-foreground" data-language={language}>
+          {code}
+        </code>
+      </pre>
+    </figure>
+  );
+}
+
+export interface TerminalLine {
+  id?: React.Key;
+  stream?: 'stdout' | 'stderr';
+  value: string;
+}
+
+export function Terminal({
+  lines,
+  label,
+  className,
+}: {
+  lines: readonly TerminalLine[];
+  label: string;
+  className?: string;
+}) {
+  const occurrences = new Map<string, number>();
+  const keyedLines = lines.map((line) => {
+    const contentKey = `${line.stream ?? 'stdout'}:${line.value}`;
+    const occurrence = (occurrences.get(contentKey) ?? 0) + 1;
+    occurrences.set(contentKey, occurrence);
+    return { ...line, key: line.id ?? `${contentKey}:${occurrence}` };
+  });
+
+  return (
+    <section
+      aria-label={label}
+      className={cn(
+        'overflow-hidden rounded-lg border border-border-strong bg-foreground text-background',
+        className,
+      )}
+      data-slot="terminal"
+      dir="ltr"
+    >
+      <div
+        aria-hidden="true"
+        className="flex items-center gap-1.5 border-b border-background/10 px-4 py-2.5"
+        data-slot="terminal-bar"
+      >
+        <span className="size-2.5 rounded-pill bg-destructive/70" />
+        <span className="size-2.5 rounded-pill bg-warning/70" />
+        <span className="size-2.5 rounded-pill bg-success/70" />
+      </div>
+      <pre className="overflow-x-auto p-4 font-mono text-xs leading-relaxed">
+        {keyedLines.map((line) => (
+          <span
+            className={cn(
+              'block',
+              line.stream === 'stderr' ? 'text-destructive' : 'text-background/90',
+            )}
+            data-stream={line.stream ?? 'stdout'}
+            key={line.key}
+          >
+            {line.value}
+          </span>
+        ))}
+      </pre>
+    </section>
+  );
+}

package/packages/ui/src/color-picker.tsx

@@ -0,0 +1,22 @@
+import type * as React from 'react';
+import { cn } from './lib/cn';
+
+// Default example value uses the semantic accent token (mint-500) — not a raw product color.
+// Input type=color requires a hex for the native picker; the displayed hex is derived from the token.
+const DEFAULT_ACCENT_HEX = '#0b6f6b'; // primitive mint-500 / semantic accent — keep in sync with tokens.json
+
+export function ColorPicker({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div className={cn('flex items-center gap-2', className)} data-slot="color-picker" {...props}>
+      <input
+        type="color"
+        aria-label="Color picker"
+        className="size-8 rounded-md border border-border"
+        defaultValue={DEFAULT_ACCENT_HEX}
+      />
+      <span className="text-sm text-muted-foreground" style={{ color: 'var(--noe-color-accent)' }}>
+        {DEFAULT_ACCENT_HEX}
+      </span>
+    </div>
+  );
+}

package/packages/ui/src/command-menu.tsx

@@ -0,0 +1,19 @@
+import type * as React from 'react';
+import { cn } from './lib/cn';
+export interface CommandMenuProps extends React.ComponentProps<'div'> {
+  children?: React.ReactNode;
+}
+export function CommandMenu({ className, children, ...props }: CommandMenuProps) {
+  return (
+    <div
+      className={cn(
+        'rounded-md border border-border bg-surface-raised p-4 text-sm text-foreground',
+        className,
+      )}
+      data-slot="command-menu"
+      {...props}
+    >
+      {children ?? 'Command Menu'}
+    </div>
+  );
+}

package/packages/ui/src/contact-page.tsx

@@ -0,0 +1,19 @@
+import type * as React from 'react';
+import { cn } from './lib/cn';
+export interface ContactPageProps extends React.ComponentProps<'div'> {
+  children?: React.ReactNode;
+}
+export function ContactPage({ className, children, ...props }: ContactPageProps) {
+  return (
+    <div
+      className={cn(
+        'rounded-md border border-border bg-surface-raised p-4 text-sm text-foreground',
+        className,
+      )}
+      data-slot="contact-page"
+      {...props}
+    >
+      {children ?? 'Contact Page'}
+    </div>
+  );
+}