@shortlink-org/portolan 0.1.0 → 0.2.0

package/src/index.css

@@ -32,6 +32,12 @@
   --accent-lo: #1a5ec9;
   --accent-hi: #3d86f5;
 
+  /* Product action, deliberately separate from event amber. In the light
+     theme it gives onboarding and AI entry points a warmer invitation without
+     teaching readers that an event/status colour means “click me”. */
+  --product-action: #c76a1b;
+  --product-action-ink: #6f350a;
+
   /* Source preview syntax. These are semantic roles rather than one imported
      editor theme, so code follows Portolan's light and dark palettes. */
   --syntax-comment: #6a737d;
@@ -149,6 +155,8 @@
   --accent: #5b9dff;
   --accent-lo: #3d7fe0;
   --accent-hi: #7ab2ff;
+  --product-action: #5b9dff;
+  --product-action-ink: #e3e8ee;
 
   --syntax-comment: #8b97a4;
   --syntax-keyword: #c6a0f6;
@@ -574,23 +582,147 @@
   .btn-accent:hover {
     filter: brightness(1.06);
   }
+
+  /* The landing's primary action should feel like a control from the map,
+     not a bright rectangle pasted over it. The depth is always present; the
+     brief chart-line sweep only appears when a reader points at the action. */
+  .landing-primary,
+  .product-primary {
+    @apply mono flex items-center gap-1.5 rounded-control px-3 py-1.5;
+    position: relative;
+    isolation: isolate;
+    overflow: hidden;
+    color: var(--fg);
+    border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--border));
+    background:
+      radial-gradient(
+        circle at 18% 0%,
+        rgb(255 255 255 / 0.1),
+        transparent 42%
+      ),
+      linear-gradient(
+        to bottom,
+        color-mix(in srgb, var(--surface-2) 76%, var(--accent)),
+        color-mix(in srgb, var(--surface) 84%, var(--accent))
+      );
+    box-shadow:
+      inset 0 1px 0 rgb(255 255 255 / 0.18),
+      inset 0 -1px 0 rgb(0 0 0 / 0.2),
+      0 1px 2px rgb(0 0 0 / 0.2),
+      0 12px 28px -18px color-mix(in srgb, var(--accent) 82%, transparent);
+    text-shadow: 0 1px 0 color-mix(in srgb, var(--bg) 55%, transparent);
+    transition:
+      transform var(--dur-micro) var(--ease-out),
+      border-color var(--dur-micro) var(--ease-out),
+      box-shadow var(--dur-panel) var(--ease-out);
+  }
+  :root:not(.dark) :is(.landing-primary, .product-primary) {
+    color: var(--product-action-ink);
+    border-color: color-mix(in srgb, var(--product-action) 52%, var(--border));
+    background:
+      radial-gradient(
+        circle at 18% 0%,
+        rgb(255 255 255 / 0.68),
+        transparent 44%
+      ),
+      linear-gradient(
+        to bottom,
+        color-mix(in srgb, var(--product-action) 13%, white),
+        color-mix(in srgb, var(--product-action) 28%, white)
+      );
+    box-shadow:
+      inset 0 1px 0 rgb(255 255 255 / 0.82),
+      inset 0 -1px 0 color-mix(in srgb, var(--product-action) 22%, transparent),
+      0 1px 2px rgb(91 45 8 / 0.1),
+      0 12px 28px -18px color-mix(in srgb, var(--product-action) 70%, transparent);
+    text-shadow: 0 1px 0 rgb(255 255 255 / 0.55);
+  }
+  :is(.landing-primary, .product-primary)::before {
+    position: absolute;
+    inset: -1px;
+    z-index: 0;
+    pointer-events: none;
+    content: "";
+    background: linear-gradient(
+      112deg,
+      transparent 28%,
+      rgb(255 255 255 / 0.03) 39%,
+      rgb(255 255 255 / 0.3) 48%,
+      rgb(255 255 255 / 0.05) 57%,
+      transparent 70%
+    );
+    transform: translateX(-135%);
+    transition: transform 600ms var(--ease-out);
+  }
+  :is(.landing-primary, .product-primary):hover {
+    filter: none;
+    border-color: color-mix(in srgb, var(--accent) 82%, white);
+    box-shadow:
+      inset 0 1px 0 rgb(255 255 255 / 0.24),
+      inset 0 -1px 0 rgb(0 0 0 / 0.2),
+      0 2px 4px rgb(0 0 0 / 0.22),
+      0 16px 34px -17px color-mix(in srgb, var(--accent) 95%, transparent);
+    transform: translateY(-1px);
+  }
+  :root:not(.dark) :is(.landing-primary, .product-primary):hover {
+    border-color: color-mix(in srgb, var(--product-action) 78%, white);
+    box-shadow:
+      inset 0 1px 0 rgb(255 255 255 / 0.9),
+      inset 0 -1px 0 color-mix(in srgb, var(--product-action) 25%, transparent),
+      0 2px 4px rgb(91 45 8 / 0.12),
+      0 16px 34px -17px color-mix(in srgb, var(--product-action) 76%, transparent);
+  }
+  :is(.landing-primary, .product-primary):hover::before {
+    transform: translateX(135%);
+  }
+  .landing-primary svg:last-child {
+    transition: transform var(--dur-micro) var(--ease-out);
+  }
+  .landing-primary:hover svg:last-child {
+    transform: translateX(2px);
+  }
+  :is(.landing-primary, .product-primary):active {
+    transform: translateY(0);
+  }
+  :is(.landing-primary, .product-primary):focus-visible {
+    outline: 2px solid color-mix(in srgb, var(--accent) 55%, white);
+    outline-offset: 3px;
+  }
   .btn-accent:disabled,
+  .product-primary:disabled,
   .tbtn:disabled {
     cursor: not-allowed;
     opacity: 0.55;
   }
 
+  @media (prefers-reduced-motion: reduce) {
+    .landing-primary,
+    .product-primary,
+    .landing-primary::before,
+    .product-primary::before,
+    .landing-primary svg:last-child {
+      transition: none;
+    }
+    .landing-primary:hover,
+    .product-primary:hover,
+    .landing-primary:hover svg:last-child {
+      transform: none;
+    }
+  }
+
   /* A group of related controls reads as one object: a single border around
      the set, hairlines only between its members. */
   .seg {
-    @apply flex items-center overflow-hidden rounded-control border border-line;
+    @apply flex shrink-0 items-center overflow-hidden rounded-control border border-line;
   }
   .seg > * + * {
     border-left: 1px solid var(--border);
   }
+  /* A member never breaks its line: a toolbar that runs out of room wraps
+     whole segments, not the word inside one. */
   .seg > button,
   .seg > a {
-    @apply mono px-2 py-1 text-muted;
+    @apply mono px-2 py-1 whitespace-nowrap text-muted;
     transition:
       background-color var(--dur-micro) var(--ease-out),
       color var(--dur-micro) var(--ease-out);
@@ -654,6 +786,68 @@
     background: color-mix(in srgb, currentColor 12%, transparent);
   }
 
+  /* Landing-only presentation surfaces. They reuse the application's canvas
+     and status tokens, but carry no catalog data or diagram runtime. */
+  .landing-grid {
+    background-color: var(--flow-pane);
+    background-image: radial-gradient(var(--flow-dot) 1px, transparent 1px);
+    background-size: 18px 18px;
+  }
+  .landing-product-shadow {
+    box-shadow:
+      0 0 0 1px color-mix(in srgb, var(--accent) 8%, transparent),
+      0 28px 80px -34px color-mix(in srgb, var(--accent) 42%, transparent),
+      var(--shadow-md);
+  }
+  .landing-hero {
+    background-image: radial-gradient(
+      70% 85% at 72% 22%,
+      color-mix(in srgb, var(--accent) 9%, transparent),
+      transparent 70%
+    );
+  }
+  .landing-final {
+    background-image: radial-gradient(
+      55% 100% at 50% 100%,
+      color-mix(in srgb, var(--accent) 10%, transparent),
+      transparent 72%
+    );
+  }
+  .landing-orbit {
+    position: absolute;
+    border: 1px solid color-mix(in srgb, var(--accent) 10%, transparent);
+    border-radius: 9999px;
+    pointer-events: none;
+  }
+  .landing-orbit-one {
+    width: 700px;
+    height: 700px;
+    top: -430px;
+    right: -140px;
+  }
+  .landing-orbit-two {
+    width: 980px;
+    height: 980px;
+    top: -570px;
+    right: -280px;
+  }
+  .landing-hero .landing-canvas .react-flow__edge-path {
+    stroke-width: 1.75 !important;
+  }
+  .landing-hero-title {
+    line-height: 0.96 !important;
+  }
+  @media (min-width: 1024px) and (max-height: 760px) {
+    .landing-hero-grid {
+      padding-top: 2rem !important;
+      padding-bottom: 2rem !important;
+    }
+    .landing-hero-title {
+      font-size: clamp(3.5rem, 4.8vw, 3.9rem) !important;
+      line-height: 0.94 !important;
+    }
+  }
+
   /* Non-navigable header for a group of leaves inside an aggregate. */
   .group-row {
     @apply mono flex w-full items-center gap-1.5 py-[3px] pr-2 text-left text-muted hover:bg-surface;
@@ -1525,6 +1719,30 @@ h3 {
   font-family: var(--font-sans);
 }
 
+/* How a canvas of this app arrives and changes. The boxes rise in as elk
+   places them and the lines follow a beat later, so the picture is drawn
+   rather than dropped in over the skeleton; anything a selection, a focus or
+   a playback dims fades rather than snaps. The node's own transform is its
+   position, so what rises is the card inside it, never the node. Opt-in by
+   class: LikeC4 draws its canvases with the same library and its own motion,
+   and must not inherit this. */
+.canvas-motion .react-flow__node {
+  animation: fade-in var(--dur-narrative) var(--ease-out) both;
+  transition: opacity var(--dur-narrative) var(--ease-in-out);
+}
+.canvas-motion .react-flow__node > * {
+  animation: row-in var(--dur-narrative) var(--ease-out) both;
+}
+.canvas-motion .react-flow__edge {
+  animation: fade-in var(--dur-narrative) var(--ease-out) both;
+  animation-delay: 180ms;
+}
+.canvas-motion .react-flow__edge-path {
+  transition:
+    opacity var(--dur-narrative) var(--ease-in-out),
+    stroke-width var(--dur-micro) var(--ease-out);
+}
+
 /* Selection is the ring, on the node's own box. The event pill is the one
    node that is not the shape of its box - it is a capsule, and at fit zooms
    it shrinks to an icon inside the box - so it draws the ring itself. */

package/src/landing/DraggableReveal.tsx

@@ -0,0 +1,168 @@
+import { useId, useState } from "react";
+import type { KeyboardEvent, ReactNode } from "react";
+import { animate, useDragControls, useMotionValue } from "motion/react";
+import type { PanInfo } from "motion/react";
+import { m } from "../lib/motion";
+
+const cats = [
+  "thread-tangle.webp",
+  "map-inspector.webp",
+  "laptop.webp",
+  "diagrammer.webp",
+  "compass-nap.webp",
+  "docs-reader.webp",
+  "bug-hunter.webp",
+  "system-builder.webp",
+  "server-break.webp",
+  "star-mapper.webp",
+].map((file) => `${import.meta.env.BASE_URL}landing/cats/${file}`);
+
+const X_LIMIT = 300;
+const Y_LIMIT = 190;
+const KEYBOARD_STEP = 24;
+
+type RevealEdge = "top" | "right" | "bottom" | "left";
+
+const catPlacement: Record<RevealEdge, string> = {
+  top: "items-start justify-center",
+  right: "items-center justify-end",
+  bottom: "items-end justify-center",
+  left: "items-center justify-start",
+};
+
+function clamp(value: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, value));
+}
+
+export function DraggableReveal({
+  children,
+  handleClassName = "inset-x-0",
+  label = "Movable product preview",
+}: {
+  children: ReactNode;
+  handleClassName?: string;
+  label?: string;
+}) {
+  const controls = useDragControls();
+  const descriptionId = useId();
+  const x = useMotionValue(0);
+  const y = useMotionValue(0);
+  const [dragging, setDragging] = useState(false);
+  const [revealEdge, setRevealEdge] = useState<RevealEdge>("right");
+  const [cat] = useState(
+    () => cats[Math.floor(Math.random() * cats.length)] ?? cats[0],
+  );
+  const [mirrored] = useState(() => Math.random() < 0.5);
+
+  const returnToOrigin = () => {
+    const transition = {
+      duration: 0.78,
+      ease: [0.22, 1, 0.36, 1] as const,
+    };
+    animate(x, 0, transition);
+    animate(y, 0, transition);
+  };
+
+  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    const moves: Partial<Record<string, [number, number]>> = {
+      ArrowLeft: [-KEYBOARD_STEP, 0],
+      ArrowRight: [KEYBOARD_STEP, 0],
+      ArrowUp: [0, -KEYBOARD_STEP],
+      ArrowDown: [0, KEYBOARD_STEP],
+    };
+    const move = moves[event.key];
+    if (move) {
+      event.preventDefault();
+      if (Math.abs(move[0]) > Math.abs(move[1])) {
+        setRevealEdge(move[0] < 0 ? "right" : "left");
+      } else {
+        setRevealEdge(move[1] < 0 ? "bottom" : "top");
+      }
+      x.set(clamp(x.get() + move[0], -X_LIMIT, X_LIMIT));
+      y.set(clamp(y.get() + move[1], -Y_LIMIT, Y_LIMIT));
+    } else if (event.key === "Escape") {
+      x.set(0);
+      y.set(0);
+    }
+  };
+
+  const onDrag = (
+    _event: MouseEvent | TouchEvent | PointerEvent,
+    info: PanInfo,
+  ) => {
+    if (Math.hypot(info.offset.x, info.offset.y) < 16) return;
+    if (Math.abs(info.offset.x) >= Math.abs(info.offset.y)) {
+      setRevealEdge(info.offset.x < 0 ? "right" : "left");
+    } else {
+      setRevealEdge(info.offset.y < 0 ? "bottom" : "top");
+    }
+  };
+
+  return (
+    <div className="relative isolate">
+      <div
+        aria-hidden
+        className={`pointer-events-none absolute inset-0 z-0 flex ${catPlacement[revealEdge]}`}
+      >
+        <m.img
+          layout="position"
+          src={cat}
+          alt=""
+          width={800}
+          height={800}
+          decoding="async"
+          style={{ scaleX: mirrored ? -1 : 1 }}
+          animate={{
+            opacity: dragging ? 1 : 0.84,
+            scale: dragging ? 1 : 0.96,
+            y: dragging ? -3 : 0,
+          }}
+          transition={{
+            layout: { type: "spring", stiffness: 260, damping: 28 },
+            opacity: { duration: 0.22 },
+            scale: { duration: 0.28 },
+            y: { duration: 0.28 },
+          }}
+          className="max-h-[72%] w-[36%] object-contain drop-shadow-[0_18px_26px_rgba(0,0,0,0.14)]"
+        />
+      </div>
+      <span id={descriptionId} className="sr-only">
+        Move this preview with the arrow keys. Press Escape to return it to its
+        starting position.
+      </span>
+      <m.div
+        drag
+        dragControls={controls}
+        dragListener={false}
+        dragConstraints={{
+          left: -X_LIMIT,
+          right: X_LIMIT,
+          top: -Y_LIMIT,
+          bottom: Y_LIMIT,
+        }}
+        dragElastic={0.08}
+        dragMomentum={false}
+        style={{ x, y }}
+        whileDrag={{ scale: 0.985 }}
+        tabIndex={0}
+        aria-label={label}
+        aria-describedby={descriptionId}
+        onKeyDown={onKeyDown}
+        onDragStart={() => setDragging(true)}
+        onDrag={onDrag}
+        onDragEnd={() => {
+          setDragging(false);
+          window.requestAnimationFrame(returnToOrigin);
+        }}
+        className="relative z-10 rounded-[18px] focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-accent"
+      >
+        {children}
+        <div
+          aria-hidden
+          className={`absolute top-0 z-20 h-11 cursor-grab touch-none rounded-t-[18px] active:cursor-grabbing ${handleClassName}`}
+          onPointerDown={(event) => controls.start(event)}
+        />
+      </m.div>
+    </div>
+  );
+}

package/src/landing/EstateGraph.tsx

@@ -0,0 +1,28 @@
+// The tour's first stop: the dependency graph, the real one. Its toolbar,
+// its two modes, its focus and export, on the example estate. Nothing here
+// is a mock-up of the product; it is the product, in a smaller box.
+
+import { useMemo, useState } from "react";
+import { catalog } from "../data";
+import { DependencyGraphPane } from "../graph/DependencyGraph";
+import type { GraphMode } from "../graph/dependency-layout";
+import { eventGraph } from "../lib/event-graph";
+import { useSelectionCleared } from "./catalog";
+
+export function EstateGraph() {
+  const graph = useMemo(() => eventGraph(catalog), []);
+  const [mode, setMode] = useState<GraphMode>("compact");
+  useSelectionCleared();
+
+  return (
+    <div className="h-[470px]">
+      <DependencyGraphPane
+        graph={graph}
+        mode={mode}
+        onMode={setMode}
+        fitKey={mode}
+        zoomOnScroll={false}
+      />
+    </div>
+  );
+}