// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import {  useEffect,  useEffectEvent,  useRef,  useState,  useSyncExternalStore,  type CSSProperties,  type KeyboardEvent,  type ReactNode,} from 'react';import {  ASSETS,  POSITIONS,  VENUES,  collateralValue,  dollars,  healthAfterCollateral,  isAtRisk,  isOpen,  liftRepay,

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useEffect, useRef, useState, type CSSProperties } from 'react';import {  ASSETS,  ZONES,  ZONE_NAME,  collateralValue,  compact,  cents,  dollars,  liftRepay,  liquidationPrice,  scale,  units,  zoneOf,  type Position,} from './data';import { AssetMark } from './icons';import styles from './loans-dashboard.module.css';/*

// Copyright (c) 2026 Bruno Delorence. MIT License.'use client';import { useEffect, useEffectEvent, useRef, useState, type KeyboardEvent } from 'react';import {  ASSETS,  WALLET,  ZONES,  ZONE_NAME,  cents,  dollars,  healthAfterCollateral,  healthAfterRepay,  healthText,  liftCollateral,  liftRepay,  scale,  units,  zoneOf,  type Position,} from './data';import { AssetMark, Icon } from './icons';import styles from './loans-dashboard.module.css';

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The loans dashboard's data: invented venues, chains, assets and twelve borrow positions, and the * arithmetic of a health factor. * * A position's health factor is its collateral, valued at the venue's liquidation threshold, * over its debt. So `health × debt` is a constant of the collateral (its "cover"): repaying lowers * the debt and lifts the health in proportion, adding collateral lifts the cover. The collateral * is liquidated once the health falls under 1.0, that is once its price falls by 1 − 1/health. */export type AssetId = 'dolr' | 'talr' | 'orb' | 'flint' | 'lume' | 'peak' | 'comb';export type Asset = {  symbol: string;  /** The price in dollars. Stable assets are worth 1. */  price: number;  /** Decimals shown for an amount of it. */  decimals: number;};export const ASSETS: Record<AssetId, Asset> = {  dolr: { symbol: 'DOLR', price: 1, decimals: 2 },

// Copyright (c) 2026 Bruno Delorence. MIT License./* * The dashboard's drawings, all decorative (aria-hidden): line icons on a 24-unit grid, stroked * in the current colour, and the invented assets' marks on a 20-unit grid, in their own colours. * The stylesheet sizes every SVG; nothing here sets a width or height. */import type { ReactNode } from 'react';import type { AssetId } from './data';const LINE: Record<string, string> = {  overview: 'M4 4h6v6H4zM14 4h6v6h-6zM4 14h6v6H4zM14 14h6v6h-6z',  portfolio:    'M4 7.5A2.5 2.5 0 0 1 6.5 5h11A2.5 2.5 0 0 1 20 7.5v9a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 4 16.5zM4 9.5h16',  loans: 'M3.5 9.5 12 4.5l8.5 5M5 20h14M6.5 11v6.5M10 11v6.5M14 11v6.5M17.5 11v6.5M4 9.5h16',  swap: 'M8 20V5M4.5 8.5 8 5l3.5 3.5M16 4v15M12.5 15.5 16 19l3.5-3.5',  activity: 'M3 12h4l2.5-6 5 12 2.5-6h4',  explore: 'M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM15.5 8.5l-2 5-5 2 2-5z',  settings: 'M4 8h9M17 8h3M4 16h3M11 16h9M15 6v4M9 14v4',  help: 'M7 17 17 7M8.5 7H17v8.5',  bell: 'M6.5 16.5V11a5.5 5.5 0 0 1 11 0v5.5l1.5 1.5H5zM10 20.5a2.2 2.2 0 0 0 4 0',  chevronDown: 'm7 10 5 5 5-5',  chevronLeft: 'm14.5 6.5-5.5 5.5 5.5 5.5',

'use client';import type { CSSProperties, Ref } from 'react';/* * The demo's pointer, and the steps that move it. A demo is a script of awaited steps: wait, or * glide the pointer somewhere. Stopping the demo (the reader takes over, or it scrolls away) ends * the step in progress at once: its promise rejects, which ends the script right there, and the * pointer fades out. * * Each glide is a curved flight played by the Web Animations API, so nothing runs frame by frame. * The points of the flight are handed to whoever wants to move along with it (the eye of the * badge, which plays its own animation on the same clock). The arrow and the hand are HTML boxes * that swap by their visibility: a change of style inside an SVG would lay the SVG out again. */export type Point = { x: number; y: number };/** A glide's path and timing, for an animation that plays along with it. */export type Flight = { points: Point[]; timing: KeyframeAnimationOptions };export type Demo = {  /** Resolves after `ms`. */  wait: (ms: number) => Promise<void>;

'use client';import { useCallback, useEffect, useRef, useState } from 'react';/* * When a demo may play on its own: while part of it is on screen and the tab is visible, never * under reduced motion, and not while the reader is using it. `take()` hands it to the reader; it * takes back over `idle` ms after their last input. */export function useAutoplay<T extends HTMLElement>(idle = 6000) {  const ref = useRef<T>(null);  const [visible, setVisible] = useState(false);  const [reduced, setReduced] = useState(true);  const [taken, setTaken] = useState(false);  const timer = useRef(0);  useEffect(() => {    const element = ref.current;    if (!element) return;    let onScreen = false;    const update = () => setVisible(onScreen && !document.hidden);    const observer = new IntersectionObserver(      ([entry]) => {        onScreen = entry.isIntersecting;

/* Loans dashboard (loans-dashboard.tsx): a white app screen with a pale sidebar and a pale card of   figures, lavender for the actions and the repaid bars, red to green for the four zones of the   health factor; at night near-black, with the zones' tracks dimmed and their dots lit.   Colours are the tokens below, light-dark(light, dark) where the two differ: the dashboard takes   the color-scheme it inherits from the page, or the one its colorScheme prop or its account   menu sets (data-color-scheme).   Layout is by container queries on the root: a full sidebar from 1100 px, an icon rail from   760 px, and below that a drawer behind a menu button; the overview stacks under 980 px, and the   table scrolls inside its own box when it does not fit.   Memory. Only transforms and opacity animate (the repaid bars scale, the markers slide, menus   and the dialog fade in); the debt counts in text. The skeleton does not shimmer. */.root {  --bg: #fff;  --side: #fafafa;  --panel: #f8f8f9;  --ink: #1b1b1f;  --ink-2: #36363c;  --muted: #7c7c84;  --muted-2: #96969d;  --nav-icon: #5f5f66;