Feat/migrate keys in framer motion app

.gitignore

@@ -35,3 +35,9 @@ yarn-error.log*
 # generated files
 _dist-content/
 old-src/
+
+.open-next/
+.wrangler/
+.pnpm-store/
+
+.tsconfig.tsbuildinfo

app/(main)/(article-grid)/article-title.tsx

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+
+export function ArticleTitle({
+  title,
+  description,
+}: { title: ReactNode; description: ReactNode }) {
+  return (
+    <header className="full-width text-left md:text-center space-y-4 mb-16">
+      <h1 className="text-[52px] md:text-[72px] font-serif leading-[1] text-balance">
+        {title}
+      </h1>
+      <p className="text-gray11">{description}</p>
+    </header>
+  );
+}

app/(main)/(content)/database/_components/balanced-tree/controls.tsx → app/(main)/(article-grid)/database/_components/balanced-tree/controls.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { atom, useAtom } from "jotai";
-import { ResetButton, ToggleButton } from "../toggle-button";
+import { ResetButton, Button } from "~/components/Button";
 import produce from "immer";
 import { pick, randomUnique } from "../utils";
 import { CommandList } from "../mutable-database";
@@ -146,7 +146,7 @@ export function TreeControls({
     <div className="space-y-3">
       <div className="flex gap-2">
         {mode === "add" && (
-          <ToggleButton
+          <Button
             onClick={() => {
               const key = randomUnique(0, 20, Array.from(values));
               const snapshots = [];
@@ -164,10 +164,10 @@ export function TreeControls({
             disabled={values.size >= 10}
           >
             Add key
-          </ToggleButton>
+          </Button>
         )}
         {mode === "find" && (
-          <ToggleButton
+          <Button
             onClick={() => {
               const key = pick(
                 Array.from(values),
@@ -188,7 +188,7 @@ export function TreeControls({
             disabled={values.size >= 10}
           >
             Find key
-          </ToggleButton>
+          </Button>
         )}
 
         <ResetButton

app/(main)/(content)/database/_components/build-index.tsx → app/(main)/(article-grid)/database/_components/build-index.tsx

@@ -1,11 +1,12 @@
 "use client";
 
-import { FullWidth } from "~/components/mdx/full-width";
-import { ToggleButton } from "./toggle-button";
+import { motion, useAnimate, useMotionValue, useTransform } from "motion/react";
 import { useMemo, useState } from "react";
-import { useAnimate, motion, useTransform, useMotionValue } from "motion/react";
-import { DotAnimation } from "./dot-animation";
+import { Figure } from "~/components/mdx/figure";
+import { FullWidth } from "~/components/mdx/full-width";
 import { TRANSITIONS } from "~/lib/transitions";
+import { DotAnimation } from "./dot-animation";
+import { Button } from "~/components/Button";
 
 const records = [
   { uuid: "1", id: 1, value: "Lorem ipsum" },
@@ -52,9 +53,9 @@ export function BuildIndex() {
   }, [activeRecords]);
 
   return (
-    <>
+    <Figure>
       <div className="w-fit">
-        <ToggleButton
+        <Button
           onClick={async () => {
             if (index === records.length) {
               await animate("[data-record-cover]", {
@@ -89,14 +90,14 @@ export function BuildIndex() {
           }}
         >
           {index === records.length ? "Reset" : "Add record"}
-        </ToggleButton>
+        </Button>
       </div>
       <FullWidth>
         <div
-          className="border-y border-gray8 md:rounded-lg grid grid-rows-[repeat(2,250px)] md:grid-rows-[250px] md:grid-cols-2 lg:grid-cols-[3fr_2fr] overflow-hidden font-mono text-sm divide-y md:divide-y-0 md:divide-x divide-gray8 -mx-6 md:mx-0 md:border-x"
+          className="border-y border-gray8 md:rounded-lg grid grid-rows-[repeat(2,250px)] md:grid-rows-[250px] md:grid-cols-2 lg:grid-cols-[3fr_2fr] overflow-hidden font-mono text-sm divide-y md:divide-y-0 md:divide-x divide-gray8 md:border-x"
           ref={scope}
         >
-          <div className="flex flex-col">
+          <div className="flex flex-col bg-gray2">
             <p className="text-gray10 text-sm font-medium font-sans p-3 pb-0">
               file.txt
             </p>
@@ -130,10 +131,10 @@ export function BuildIndex() {
                 <div className="absolute text-gray8 italic">
                   <DotAnimation>Waiting</DotAnimation>
                 </div>
-                <motion.div className="bg-gray4 grow overflow-hidden">
+                <motion.div className="bg-gray2 grow overflow-hidden">
                   {nextRecord && (
                     <motion.p
-                      className="border-r border-gray9 h-12 flex items-center overflow-hidden -translate-x-px bg-gray4"
+                      className="border-r border-gray9 h-12 flex items-center overflow-hidden -translate-x-px bg-gray2"
                       data-name="next-record"
                       data-file
                       initial={{ width: 0 }}
@@ -154,7 +155,7 @@ export function BuildIndex() {
               <p className="text-gray10 text-sm font-medium font-sans py-3">
                 Index
               </p>
-              <ul className="px-5 py-4 bg-gray3 shadow rounded-md rounded-b-none ring-1 ring-neutral-950/15 grow relative">
+              <ul className="px-5 py-4 bg-gray2 shadow rounded-md rounded-b-none ring-1 ring-neutral-950/15 grow relative">
                 {activeRecords.map((record, index) => {
                   const offset = getOffsetAtIndex(index);
                   return (
@@ -174,7 +175,7 @@ export function BuildIndex() {
               <p className="text-gray10 text-sm font-medium font-sans py-3">
                 Database
               </p>
-              <ul className="px-5 py-4 bg-gray3 shadow rounded-md rounded-b-none ring-1 ring-neutral-950/15 grow relative">
+              <ul className="px-5 py-4 bg-gray2 shadow rounded-md rounded-b-none ring-1 ring-neutral-950/15 grow relative">
                 {activeRecords.map((record, index) => (
                   <RecordItem
                     record={record}
@@ -187,7 +188,7 @@ export function BuildIndex() {
           </div>
         </div>
       </FullWidth>
-    </>
+    </Figure>
   );
 }
 
@@ -199,7 +200,7 @@ function RecordItem({ record, isNext }: { record: Record; isNext?: boolean }) {
         <p>{record.value}</p>
       </div>
       <div
-        className="absolute inset-0 bg-gray3 origin-right"
+        className="absolute inset-0 bg-gray2 origin-right"
         data-record-cover
         data-name={isNext ? "next-record-cover" : undefined}
       />

app/(main)/(content)/database/_components/compaction.tsx → app/(main)/(article-grid)/database/_components/compaction.tsx

@@ -1,14 +1,15 @@
 "use client";
 
-import { ToggleButton } from "./toggle-button";
-import { FileDatabase } from "./file-database";
-import { useCallback, useEffect, useState } from "react";
-import { motion } from "framer-motion";
-import { cn } from "~/lib/cn";
 import useInterval from "@use-it/interval";
-import { DotAnimation } from "./dot-animation";
+import { motion } from "framer-motion";
+import { useCallback, useEffect, useState } from "react";
 import { match } from "ts-pattern";
 import { Wide } from "~/components/mdx/Wide";
+import { Figure } from "~/components/mdx/figure";
+import { cn } from "~/lib/cn";
+import { DotAnimation } from "./dot-animation";
+import { FileDatabase } from "./file-database";
+import { Button } from "~/components/Button";
 
 const records = [
   { uuid: "1", id: 1, value: "Lorem ipsum", isStale: true },
@@ -66,9 +67,9 @@ export const useCompactionAnimation = () => {
 export function Compaction({ className }: { className?: string }) {
   const { step, index, play } = useCompactionAnimation();
   return (
-    <>
-      <div className="w-fit -mb-2">
-        <ToggleButton onClick={play}>Add</ToggleButton>
+    <Figure>
+      <div className="w-fit">
+        <Button onClick={play}>Add</Button>
       </div>
       <Wide
         className={cn(
@@ -78,7 +79,7 @@ export function Compaction({ className }: { className?: string }) {
       >
         <CompactionInner step={step} index={index} />
       </Wide>
-    </>
+    </Figure>
   );
 }
 
@@ -111,7 +112,7 @@ export function CompactionInner({
         <motion.ul
           layout="position"
           className={cn(
-            "row-start-1 font-mono text-sm px-5 py-4 w-[var(--card-width,300px)] h-[250px] bg-gray3 rounded-lg relative ring-1 ring-neutral-950/15 shadow-sm",
+            "row-start-1 font-mono text-sm px-5 py-4 w-[var(--card-width,300px)] h-[250px] bg-gray2 rounded-lg relative ring-1 ring-neutral-950/15 shadow-sm",
             state === "record-added" &&
               "max-md:absolute max-md:left-[calc(100%-24px)]",
             state === "record-added" || state === "compacted"
@@ -164,7 +165,7 @@ export function CompactionInner({
         />
       </div>
       {showConsole && (
-        <div className="bg-gray4 py-2.5 text-center font-mono text-sm text-gray11 border-t border-gray8 italic relative z-10">
+        <div className="bg-gray3 py-2.5 text-center font-mono text-sm text-gray11 border-t border-gray8 italic relative z-10">
           {match(state)
             .with("initial", () => <DotAnimation>waiting</DotAnimation>)
             .with("record-added", () => (

app/(main)/(content)/database/_components/file-resizing.tsx → app/(main)/(article-grid)/database/_components/file-resizing.tsx

@@ -1,14 +1,14 @@
 "use client";
 
 import { useState } from "react";
-import { ResetButton, ToggleButton } from "./toggle-button";
+import { ResetButton, Button } from "~/components/Button";
 
 export function FileResizing() {
   const [updated, setUpdated] = useState(false);
   return (
     <>
       <div className="flex gap-1">
-        <ToggleButton onClick={() => setUpdated(true)}>Update</ToggleButton>
+        <Button onClick={() => setUpdated(true)}>Update</Button>
         <ResetButton onClick={() => setUpdated(false)} />
       </div>
       <p className="rounded-lg bg-gray3 border border-gray8 p-5 font-mono text-sm">

app/(main)/(content)/database/_components/file-sequence.tsx → app/(main)/(article-grid)/database/_components/file-sequence.tsx

@@ -1,26 +1,27 @@
 "use client";
 
-import { useState } from "react";
 import { motion } from "framer-motion";
-import { ToggleButton } from "./toggle-button";
-import { cn } from "~/lib/cn";
+import { useState } from "react";
+import { Figure } from "~/components/mdx/figure";
 import { FullWidth } from "~/components/mdx/full-width";
+import { cn } from "~/lib/cn";
+import { Button } from "~/components/Button";
 
 const NEW_CONTENT_WIDTH = 106;
 
 export function FileSequence({ updateable = false }: { updateable?: boolean }) {
   const [updated, setUpdated] = useState(false);
   const [animating, setAnimating] = useState(false);
   return (
-    <>
+    <Figure>
       {updateable && (
-        <div className="w-fit -mb-2">
-          <ToggleButton onClick={() => setUpdated(!updated)}>
+        <div className="w-fit">
+          <Button onClick={() => setUpdated(!updated)}>
             Update
-          </ToggleButton>
+          </Button>
         </div>
       )}
-      <FullWidth className="-mx-6 md:mx-0 !max-w-[initial]">
+      <FullWidth>
         <div className="p-4 bg-gray5 md:rounded-lg overflow-hidden border-y md:border-x border-borderStrong">
           <p
             className={cn(
@@ -74,6 +75,6 @@ export function FileSequence({ updateable = false }: { updateable?: boolean }) {
           </p>
         </div>
       </FullWidth>
-    </>
+    </Figure>
   );
 }