print test

src/app/globals.css

@@ -25,3 +25,9 @@ body {
     )
     rgb(var(--background-start-rgb));
 }
+
+
+/* this is the trick to bypass the style={{}} attribute when printing */
+@media print {
+  .comic-page[style] { width: 100vw !important; }
+}

src/app/interface/bottom-bar/index.tsx

@@ -3,26 +3,32 @@ import { Button } from "@/components/ui/button"
 import { cn } from "@/lib/utils"
 
 export function BottomBar() {
-  const download = useStore(state => state.download)
+  // const download = useStore(state => state.download)
   const isGeneratingStory = useStore(state => state.isGeneratingStory)
   const prompt = useStore(state => state.prompt)
   const panelGenerationStatus = useStore(state => state.panelGenerationStatus)
 
-  const remainingImages = Object.values(panelGenerationStatus).reduce((acc, s) => (acc + (s ? 1 : 0)), 0)
+  const allStatus = Object.values(panelGenerationStatus)
+  const remainingImages = allStatus.reduce((acc, s) => (acc + (s ? 1 : 0)), 0)
     
+
+  const handlePrint = () => {
+    window.print()
+  }
   return (
     <div className={cn(
-      `fixed bottom-8 right-8`,
+      `print:hidden`,
+      `fixed bottom-6 right-6`,
       `flex flex-row`,
       `animation-all duration-300 ease-in-out`,
       isGeneratingStory ? `scale-0 opacity-0` : ``,
     )}>
       <div>
-        <Button onClick={download} 
-          //disabled={!prompt?.length}
-          disabled
+        <Button
+          onClick={handlePrint}
+          disabled={!prompt?.length}
         >{
-          remainingImages ? `${remainingImages} remaining..` : `Download`
+          remainingImages ? `Print (${allStatus.length - remainingImages}/4 in HD ⌛)` : `Print (in HD)`
         }</Button>
       </div>
     </div>

src/app/interface/panel/index.tsx

@@ -170,6 +170,7 @@ export function Panel({
     `shadow-sm`,
     `rounded-sm`,
     `overflow-hidden`,
+    `print:shadow-none`,
   )
 
   if (prompt && !rendered.assetUrl) {

src/app/interface/top-menu/index.tsx

@@ -34,6 +34,7 @@ export function TopMenu() {
   const [draft, setDraft] = useState("")
   return (
     <div className={cn(
+      `print:hidden`,
       `z-10 fixed top-0 left-0 right-0`,
       `flex flex-col md:flex-row w-full justify-between items-center`,
       `backdrop-blur-xl`,

src/app/interface/zoom/index.tsx

@@ -9,6 +9,7 @@ export function Zoom() {
 
   return (
     <div className={cn(
+      `print:hidden`,
       // `fixed flex items-center justify-center bottom-8 top-32 right-8 z-10 h-screen`,
       `fixed flex flex-col items-center bottom-8 top-32 md:top-20 right-6 z-10`,
       `animation-all duration-300 ease-in-out`,

src/app/main.tsx

@@ -108,6 +108,7 @@ export default function Main() {
       <div className={cn(
         `flex items-start w-screen h-screen pt-[120px] px-16 md:pt-[72px] overflow-y-scroll`,
         `transition-all duration-200 ease-in-out`,
+        `print:pt-2 print:px-2`,
 
         fonts.actionman.className
       )}>
@@ -115,6 +116,7 @@ export default function Main() {
           <div
             ref={pageRef}
             className={cn(
+              `comic-page`,
               `flex flex-col items-center justify-start`,
 
               // we are trying to reach a "book" look
@@ -124,7 +126,9 @@ export default function Main() {
 
               `transition-all duration-100 ease-in-out`,
               `border border-stone-200`,
-              `shadow-2xl`
+              `shadow-2xl`,
+              `print:shadow-none`,
+              `print:width-screen`
             )}
             style={{
               width: `${zoomLevel}%`,
@@ -138,6 +142,7 @@ export default function Main() {
       <Zoom />
       <BottomBar />
       <div className={cn(
+        `print:hidden`,
         `z-20 fixed inset-0`,
         `flex flex-row items-center justify-center`,
         `transition-all duration-300 ease-in-out`,

tailwind.config.js

@@ -47,6 +47,9 @@ module.exports = {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
       },
+      screens: {
+        'print': { 'raw': 'print' },
+      }
     },
   },
   plugins: [require("tailwindcss-animate")],