refactor: extract custom utility classes for text and bg css properties

frontend/src/components/SplashScreen.tsx

@@ -15,7 +15,7 @@ export default function SplashScreen() {
           />
           <span className="loading loading-ring loading-xl text-primary"></span>
           ...
-          <p className="text-xs uppercase font-sans tracking-[1em] opacity-40">
+          <p className="text-xs uppercase font-sans tracking-widester opacity-40">
             Unsealing
           </p>
         </div>

frontend/src/components/drawer/DrawerSection.tsx

@@ -39,7 +39,7 @@ export function DrawerSection({
       >
         <div className="flex-1">
           <div
-            className={`font-sans text-xs tracking-[0.2em] uppercase transition-colors duration-800 ${
+            className={`font-sans text-xs tracking-widester uppercase transition-colors duration-800 ${
               isOpen
                 ? "text-base-content"
                 : "text-base-content/40 group-hover:text-base-content/80"

frontend/src/components/editor/ComposeCanvas.tsx

@@ -128,6 +128,8 @@ export function ComposeCanvas({
       logicalSizeRef.current.width,
       logicalSizeRef.current.height,
     );
+
+    fabricRef.current.requestRenderAll();
   }, [initialData]);
 
   // auto focus the cursor into the main textbox no matter the latest element added
@@ -182,8 +184,8 @@ export function ComposeCanvas({
           fill: DEFAULT_FONT_COLOR,
           lineHeight: 1.5,
           // NOTE: splitByGrapheme is required for word wrap and re-low
-          // but fabric asks to disable this for clear font??
-          splitByGrapheme: true,
+          // but fabric asks to disable this for clear font?? So we disable it for read view
+          splitByGrapheme: !readOnly,
           lockMovementX: true,
           lockMovementY: true,
           lockScalingX: true,
@@ -192,6 +194,7 @@ export function ComposeCanvas({
           hasControls: false,
           hasBorders: false,
           objectCaching: false,
+          noScaleCache: false,
         });
         canvas.add(textbox);
       }
@@ -202,6 +205,7 @@ export function ComposeCanvas({
       textbox.selectable = !readOnly;
       textbox.evented = !readOnly;
       textbox.editable = !readOnly;
+      textbox.hasBorders = false;
 
       textboxRef.current = textbox;
 
@@ -306,6 +310,7 @@ export function ComposeCanvas({
           originY: "top",
           left: PAD,
           top: PAD,
+          noScaleCache: false,
           objectCaching: false,
           // WHY?: after image object clean-up, its src becomes local blob://
           // but browser won't let us parse this blob:// into file afterwards. so we hold a local copy

frontend/src/components/editor/ToolBar.tsx

@@ -134,7 +134,7 @@ export function ToolBar({
       <div className="flex items-center gap-2">
         <button
           type="button"
-          className="btn btn-ghost btn-sm text-[10px] group tracking-[0.2em] uppercase font-bold text-base-content/60 hover:text-base-content"
+          className="btn btn-ghost btn-sm text-xxs group tracking-widester uppercase font-bold text-base-content/60 hover:text-base-content"
           title="Store in your private drawer"
           onClick={() => onSave("DRAFT")}
         >
@@ -223,7 +223,7 @@ export function LetterHead() {
     <div className="flex items-center justify-center mb-8 h-14">
       <div className="badge badge-outline border-primary/20 bg-primary/5 text-primary gap-2 p-4 rounded-full">
         <LockIcon size={14} weight="fill" />
-        <span className="text-[10px] uppercase tracking-widest font-bold">
+        <span className="text-xxs uppercase tracking-widest font-bold">
           Sealed & View Only
         </span>
       </div>

frontend/src/components/ui/DateDisplay.tsx

@@ -31,7 +31,7 @@ export default function DateDisplay({
 
   return (
     <div className={`text-right flex flex-col gap-2 min-w-35 ${className}`}>
-      <span className="text-[10px] uppercase tracking-[0.4em] text-accent font-bold">
+      <span className="text-xxs uppercase tracking-widester text-accent font-bold">
         Date
       </span>
       <span className="text-sm font-serif text-secondary-content italic whitespace-nowrap">

frontend/src/components/ui/Navbar.tsx

@@ -21,7 +21,7 @@ export const Navbar = ({ child }: { child?: React.ReactNode }) => {
               className="text-base-content/40 group-hover:text-primary transition-colors"
             />
           </div>
-          <span className="font-sans text-[10px] tracking-[0.3em] uppercase font-bold text-base-content/30 group-hover:text-base-content transition-colors">
+          <span className="font-sans text-xxs tracking-widester uppercase font-bold text-base-content/30 group-hover:text-base-content transition-colors">
             Drawer
           </span>
         </button>

frontend/src/index.css

@@ -51,6 +51,13 @@
   --shadow-warm: 0 20px 50px -12px rgba(30, 20, 12, 0.6);
   --radius-xl: 1.5rem;
   --color-paper: oklch(97% 0.008 80);
+  --text-xxs: 10px;
+  --tracking-widester: 0.5em;
+  --background-image-vig: radial-gradient(
+    circle at center,
+    transparent 0%,
+    rgba(0, 0, 0, 0.4) 100%
+  );
 }
 
 .glass-card {

frontend/src/pages/Drawer.tsx

@@ -28,12 +28,12 @@ export default function Drawer() {
 
   return (
     <div className="min-h-screen w-full bg-base-100 text-base-content flex flex-col items-center py-12 px-5 pb-32 font-serif transition-colors">
-      <div className="fixed inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,rgba(0,0,0,0.5)_100%)] pointer-events-none z-0" />
+      <div className="fixed inset-0 bg-vig pointer-events-none z-0" />
 
       {isAuthRequired && <PasskeyModal onUnlock={unlock} />}
       <header className="text-center mb-12 z-10 animate-in fade-in slide-in-from-top-4 duration-500">
         <Logo />
-        <div className="font-sans text-xs tracking-[0.3em] uppercase text-base-content/40 mt-2">
+        <div className="font-sans text-xs tracking-widester uppercase text-base-content/40 mt-2">
           Personal Archive
         </div>
         <div className="mt-6 font-sans text-sm text-base-content flex items-center justify-center gap-2 opacity-60 hover:opacity-100 transition-opacity">
@@ -53,7 +53,7 @@ export default function Drawer() {
         {loading ? (
           <div className="flex-1 flex flex-col items-center justify-center p-12 gap-4">
             <span className="loading loading-ring loading-lg text-primary opacity-20"></span>
-            <span className="text-[10px] uppercase tracking-[0.3em] font-sans text-base-content/20 animate-pulse">
+            <span className="text-xxs uppercase tracking-widester font-sans text-base-content/20 animate-pulse">
               Opening your cabinet...
             </span>
           </div>
@@ -163,7 +163,7 @@ export default function Drawer() {
         </span>
       </button>
 
-      <footer className="mt-25 font-sans text-[0.6rem] tracking-[0.2em] uppercase text-base-content/10 z-10">
+      <footer className="mt-25 font-sans text-[0.6rem] tracking-widester uppercase text-base-content/10 z-10">
         For your unsaid.
       </footer>
       <div className="absolute bottom-0 z-50 font-sans">

frontend/src/pages/Editor.tsx

@@ -339,8 +339,8 @@ export default function Editor() {
               isSaveDatePulsing ? "animate-pulse" : ""
             }`}
           >
-            <div className="text-sm text-neutral-content/30 flex-col justify-end leading-none text-right">
-              <span className="text-[10px] uppercase tracking-widest font-bold">
+            <div className="text-xxs text-neutral-content/30 flex-col justify-end leading-none text-right">
+              <span className="uppercase tracking-widest font-bold">
                 Last Save
               </span>
               <br />
@@ -374,7 +374,7 @@ export default function Editor() {
                 weight="bold"
                 className="animate-spin text-primary"
               />
-              <p className="text-[10px] uppercase tracking-[0.4em] font-bold text-base-content/40">
+              <p className="text-xxs uppercase tracking-widester font-bold text-base-content/40">
                 Opening your draft...
               </p>
             </div>
@@ -451,7 +451,7 @@ export default function Editor() {
             <div className="flex flex-col gap-2 flex-1">
               <label
                 htmlFor="recipient"
-                className="text-xs uppercase tracking-[0.4em] text-secondary-content font-bold"
+                className="text-xxs uppercase tracking-widester text-secondary-content font-bold"
               >
                 Recipient
               </label>

frontend/src/pages/Reader.tsx

@@ -192,12 +192,10 @@ export default function Reader() {
           log: err instanceof Error ? err.message : "Unknown error",
           type: "ERROR",
         });
-      } finally {
-        setIsDecrypting(false);
       }
     };
 
-    loadAndDecrypt();
+    loadAndDecrypt().then(() => setIsDecrypting(false));
   }, [public_id, sharingKey, masterKey]);
 
   useEffect(() => {
@@ -214,7 +212,7 @@ export default function Reader() {
   if (isDecrypting) {
     return (
       <div className="flex items-center h-screen w-screen justify-center bg-base-100 font-sans">
-        <div className="fixed inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,rgba(0,0,0,0.4)_100%)] pointer-events-none z-0" />
+        <div className="fixed inset-0 bg-vig pointer-events-none" />
         <div className="text-center space-y-6 z-10">
           <Logo />
           <div className="flex flex-col items-center gap-2">
@@ -245,7 +243,7 @@ export default function Reader() {
 
   return (
     <section className="min-h-fit w-full bg-base-100 px-4 py-8 md:py-16 font-serif relative overflow-hidden">
-      <div className="fixed inset-0 bg-[radial-gradient(circle_at_center,transparent_0%,rgba(0,0,0,0.5)_100%)] pointer-events-none z-0" />
+      <div className="fixed inset-0 bg-vig pointer-events-none z-0" />
       <div
         className={`transition-all delay-300 duration-1000 relative ${
           revealState === "REVEALED"
@@ -274,7 +272,7 @@ export default function Reader() {
       {ignite && <PostActionOverlay revealState={revealState} />}
 
       {revealState === "REVEALED" && (
-        <div className="max-w-4xl m-8 mx-auto space-y-8 h-full relative inset-0 z-100">
+        <div className="max-w-180 m-8 mx-auto space-y-8 h-full relative inset-0 z-100">
           <div className="relative group perspective-1000">
             <div className="absolute inset-0 bg-primary/5 blur-3xl rounded-full scale-75 opacity-0 group-hover:opacity-100 transition-opacity duration-1000 pointer-events-none" />
 
@@ -284,7 +282,7 @@ export default function Reader() {
             </div>
 
             {metadata?.recipient && (
-              <p className="text-center sm:hidden text-[10px] uppercase tracking-[0.3em] text-base-content/20 mt-8">
+              <p className="text-center sm:hidden text-xxs uppercase tracking-widester text-base-content/20 mt-8">
                 For {metadata.recipient}
               </p>
             )}
@@ -332,7 +330,7 @@ export default function Reader() {
       )}
 
       <footer className="mt-16 text-center z-10 opacity-10 pointer-events-none">
-        <p className="text-xs font-sans uppercase tracking-[0.5em]">
+        <p className="text-xs font-sans uppercase tracking-widester">
           Read. Remember. Release.
         </p>
       </footer>