From c9c944928e353b2ba878805ea369773d1fbe3c8d Mon Sep 17 00:00:00 2001
From: fecapark <fecapark@gmail.com>
Date: Thu, 11 Dec 2025 18:03:35 +0900
Subject: [PATCH 1/4] refactor(demo): split globals.css as its style context

---
 apps/demo/src/app/layout.tsx                  |  2 +-
 apps/demo/src/styles/animations.css           | 15 ++++++
 .../{app/globals.css => styles/colors.css}    | 46 +------------------
 apps/demo/src/styles/fonts.css                |  6 +++
 apps/demo/src/styles/globals.css              | 35 ++++++++++++++
 5 files changed, 58 insertions(+), 46 deletions(-)
 create mode 100644 apps/demo/src/styles/animations.css
 rename apps/demo/src/{app/globals.css => styles/colors.css} (57%)
 create mode 100644 apps/demo/src/styles/fonts.css
 create mode 100644 apps/demo/src/styles/globals.css

diff --git a/apps/demo/src/app/layout.tsx b/apps/demo/src/app/layout.tsx
index ed3e52c..5b553be 100644
--- a/apps/demo/src/app/layout.tsx
+++ b/apps/demo/src/app/layout.tsx
@@ -3,7 +3,7 @@ import type { Metadata } from 'next';
 import { Noto_Sans_KR } from 'next/font/google';
 import localFont from 'next/font/local';
 
-import './globals.css';
+import '../styles/globals.css';
 
 const NotoSansKR = Noto_Sans_KR({
   subsets: ['latin'],
diff --git a/apps/demo/src/styles/animations.css b/apps/demo/src/styles/animations.css
new file mode 100644
index 0000000..8d031c3
--- /dev/null
+++ b/apps/demo/src/styles/animations.css
@@ -0,0 +1,15 @@
+@import 'tailwindcss';
+
+@keyframes fadeout {
+  to {
+    opacity: 0;
+  }
+}
+
+@theme {
+  /* Easings */
+  --ease-materialBase: cubic-bezier(0.2, 0, 0, 1);
+
+  /* Animations */
+  --animate-fadeout: fadeout 0.5s ease-in-out forwards 0.2s;
+}
diff --git a/apps/demo/src/app/globals.css b/apps/demo/src/styles/colors.css
similarity index 57%
rename from apps/demo/src/app/globals.css
rename to apps/demo/src/styles/colors.css
index 6a8a365..e06799d 100644
--- a/apps/demo/src/app/globals.css
+++ b/apps/demo/src/styles/colors.css
@@ -1,11 +1,5 @@
 @import 'tailwindcss';
 
-@keyframes fadeout {
-  to {
-    opacity: 0;
-  }
-}
-
 :root {
   --background: #141414;
   --layerBackground: #202020;
@@ -36,44 +30,6 @@
   --color-neutralSubtle: var(--neutralSubtle);
   --color-neutralPlaceholder: var(--neutralPlaceholder);
   --color-neutralInspector: var(--neutralInspector);
-  --color-blueAccent: var(--blueAccent);
-
-  --font-sans: var(--soehne), var(--noto-sans-kr), sans-serif;
-
-  --ease-materialBase: cubic-bezier(0.2, 0, 0, 1);
-}
-
-@theme {
-  --animate-fadeout: fadeout 0.5s ease-in-out forwards 0.2s;
-}
-
-@layer base {
-  a {
-    color: var(--blueAccent);
-    text-decoration: none;
-  }
-  a:hover {
-    text-decoration: underline;
-  }
 
-  input[type='number'] {
-    appearance: textfield;
-    -webkit-appearance: textfield;
-    -moz-appearance: textfield;
-  }
-
-  input::-webkit-outer-spin-button,
-  input::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
-  }
-}
-
-html,
-body {
-  width: 100%;
-  height: 100%;
-
-  background-color: var(--background);
-  color: var(--neutral);
+  --color-blueAccent: var(--blueAccent);
 }
diff --git a/apps/demo/src/styles/fonts.css b/apps/demo/src/styles/fonts.css
new file mode 100644
index 0000000..44adb1b
--- /dev/null
+++ b/apps/demo/src/styles/fonts.css
@@ -0,0 +1,6 @@
+@import 'tailwindcss';
+
+@theme inline {
+  /* Declare from app/layout.tsx, next/font */
+  --font-sans: var(--soehne), var(--noto-sans-kr), sans-serif;
+}
diff --git a/apps/demo/src/styles/globals.css b/apps/demo/src/styles/globals.css
new file mode 100644
index 0000000..4a5d65b
--- /dev/null
+++ b/apps/demo/src/styles/globals.css
@@ -0,0 +1,35 @@
+@import 'tailwindcss';
+@import './colors.css';
+@import './fonts.css';
+@import './animations.css';
+
+@layer base {
+  a {
+    color: var(--blueAccent);
+    text-decoration: none;
+  }
+  a:hover {
+    text-decoration: underline;
+  }
+
+  input[type='number'] {
+    appearance: textfield;
+    -webkit-appearance: textfield;
+    -moz-appearance: textfield;
+  }
+
+  input::-webkit-outer-spin-button,
+  input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  html,
+  body {
+    width: 100%;
+    height: 100%;
+
+    background-color: var(--background);
+    color: var(--neutral);
+  }
+}

From aa33b584ae155511195c47c42c2d015aa75f2362 Mon Sep 17 00:00:00 2001
From: fecapark <fecapark@gmail.com>
Date: Thu, 11 Dec 2025 18:36:19 +0900
Subject: [PATCH 2/4] feat(demo): add tailwindcss custom breakpoints

---
 apps/demo/src/styles/breakpoints.css | 9 +++++++++
 apps/demo/src/styles/globals.css     | 1 +
 2 files changed, 10 insertions(+)
 create mode 100644 apps/demo/src/styles/breakpoints.css

diff --git a/apps/demo/src/styles/breakpoints.css b/apps/demo/src/styles/breakpoints.css
new file mode 100644
index 0000000..cbda0bd
--- /dev/null
+++ b/apps/demo/src/styles/breakpoints.css
@@ -0,0 +1,9 @@
+@import 'tailwindcss';
+
+@theme {
+  --breakpoint-*: initial;
+
+  --breakpoint-md: 578px;
+  --breakpoint-lg: 900px;
+  --breakpoint-xl: 1350px;
+}
diff --git a/apps/demo/src/styles/globals.css b/apps/demo/src/styles/globals.css
index 4a5d65b..49dd8ca 100644
--- a/apps/demo/src/styles/globals.css
+++ b/apps/demo/src/styles/globals.css
@@ -2,6 +2,7 @@
 @import './colors.css';
 @import './fonts.css';
 @import './animations.css';
+@import './breakpoints.css';
 
 @layer base {
   a {

From 54666a3c780739e2b353fab5367d4552ab3e4bc4 Mon Sep 17 00:00:00 2001
From: fecapark <fecapark@gmail.com>
Date: Thu, 11 Dec 2025 18:36:41 +0900
Subject: [PATCH 3/4] feat(demo): add responsive layout into demo app

---
 apps/demo/src/app/page.tsx                    |  2 +-
 .../demo/src/components/Footer/ValueField.tsx | 65 ++++++++++---------
 apps/demo/src/components/Footer/index.tsx     |  2 +-
 .../src/components/Header/PackageHelper.tsx   |  4 +-
 apps/demo/src/components/Header/index.tsx     | 24 +++----
 apps/demo/src/components/Inspector/index.tsx  |  2 +-
 6 files changed, 54 insertions(+), 45 deletions(-)

diff --git a/apps/demo/src/app/page.tsx b/apps/demo/src/app/page.tsx
index 0ec1c64..0f6116f 100644
--- a/apps/demo/src/app/page.tsx
+++ b/apps/demo/src/app/page.tsx
@@ -11,7 +11,7 @@ import { Header } from '@/components/Header';
 import { Inspector } from '@/components/Inspector';
 
 const rollerContainer = tv({
-  base: 'relative w-full px-3 text-5xl leading-[1.1]',
+  base: 'relative w-full px-3 text-4xl leading-[1.1] md:text-5xl',
   variants: {
     align: {
       left: 'translate-x-[calc(50%-180px)]',
diff --git a/apps/demo/src/components/Footer/ValueField.tsx b/apps/demo/src/components/Footer/ValueField.tsx
index abb5c27..a709369 100644
--- a/apps/demo/src/components/Footer/ValueField.tsx
+++ b/apps/demo/src/components/Footer/ValueField.tsx
@@ -41,20 +41,43 @@ export const ValueField = ({ value, onValueChange }: Props) => {
   };
 
   return (
-    <div className="flex items-center gap-2">
-      <button className={stepButton({ icon: false })} onClick={() => onValueChange(0)}>
-        0
-      </button>
-      <button
-        className={stepButton({ icon: true })}
-        onClick={() => onValueChange((value ?? 0) * -1)}
-      >
-        <IconWrapper>
-          <PiPlusMinusBold />
-        </IconWrapper>
-      </button>
+    <div className="flex flex-col items-center gap-4 md:flex-row md:gap-2">
+      <div className="order-2 flex items-center gap-2 md:contents">
+        <div className="flex items-center gap-2 md:order-1">
+          <button className={stepButton({ icon: false })} onClick={() => onValueChange(0)}>
+            0
+          </button>
+          <button
+            className={stepButton({ icon: true })}
+            onClick={() => onValueChange((value ?? 0) * -1)}
+          >
+            <IconWrapper>
+              <PiPlusMinusBold />
+            </IconWrapper>
+          </button>
+        </div>
 
-      <div className="relative">
+        <div className="flex items-center gap-2 md:order-3">
+          <button
+            className={stepButton({ icon: true })}
+            onClick={() => onValueChange((value ?? 0) + 1)}
+          >
+            <IconWrapper>
+              <MdAdd />
+            </IconWrapper>
+          </button>
+          <button
+            className={stepButton({ icon: true })}
+            onClick={() => onValueChange((value ?? 0) - 1)}
+          >
+            <IconWrapper>
+              <LuMinus />
+            </IconWrapper>
+          </button>
+        </div>
+      </div>
+
+      <div className="relative order-1 md:order-2">
         <NumberInput
           className="bg-layerBackground min-w-[320px] rounded-full px-6 py-4 text-center text-lg font-medium tracking-widest"
           onChange={onValueChange}
@@ -67,22 +90,6 @@ export const ValueField = ({ value, onValueChange }: Props) => {
           <MdRefresh />
         </button>
       </div>
-      <button
-        className={stepButton({ icon: true })}
-        onClick={() => onValueChange((value ?? 0) + 1)}
-      >
-        <IconWrapper>
-          <MdAdd />
-        </IconWrapper>
-      </button>
-      <button
-        className={stepButton({ icon: true })}
-        onClick={() => onValueChange((value ?? 0) - 1)}
-      >
-        <IconWrapper>
-          <LuMinus />
-        </IconWrapper>
-      </button>
     </div>
   );
 };
diff --git a/apps/demo/src/components/Footer/index.tsx b/apps/demo/src/components/Footer/index.tsx
index 338b38d..b5d17fb 100644
--- a/apps/demo/src/components/Footer/index.tsx
+++ b/apps/demo/src/components/Footer/index.tsx
@@ -13,7 +13,7 @@ export const Footer = ({ value, onValueChange }: Props) => {
   return (
     <footer className="text-neutralSubtle flex flex-col items-center">
       <ValueField onValueChange={onValueChange} value={value} />
-      <div className="mt-5 text-[13px]">
+      <div className="mt-5 hidden text-[13px] lg:block">
         MIT License. {new Date().getFullYear()}{' '}
         <Link href="https://github.com/fecapark" rel="noopener noreferrer" target="_blank">
           Sanghyeok Park.
diff --git a/apps/demo/src/components/Header/PackageHelper.tsx b/apps/demo/src/components/Header/PackageHelper.tsx
index 6836f21..3956eff 100644
--- a/apps/demo/src/components/Header/PackageHelper.tsx
+++ b/apps/demo/src/components/Header/PackageHelper.tsx
@@ -22,7 +22,7 @@ export const PackageHelper = () => {
   };
 
   return (
-    <div className="flex items-center justify-center">
+    <div className="flex flex-col items-center justify-center gap-2 lg:flex-row lg:gap-0">
       <div className="bg-layerBackground text-neutralSubtle relative flex h-[42px] min-w-[320px] items-center justify-center rounded-md">
         <div className="text-sm font-medium">
           <span>{selectedManager.name} </span>
@@ -47,7 +47,7 @@ export const PackageHelper = () => {
         />
       </div>
 
-      <div className="bg-layerBackground ml-4 flex h-9 items-center overflow-hidden rounded-md">
+      <div className="bg-layerBackground flex h-9 items-center overflow-hidden rounded-md lg:ml-4">
         {packageManagers.map(({ name, color, icon, withBackground }) => {
           const selected = name === selectedManagerName;
 
diff --git a/apps/demo/src/components/Header/index.tsx b/apps/demo/src/components/Header/index.tsx
index a44675c..12a10c9 100644
--- a/apps/demo/src/components/Header/index.tsx
+++ b/apps/demo/src/components/Header/index.tsx
@@ -6,17 +6,19 @@ import { IconWrapper } from '@/components/IconWrapper';
 
 export const Header = () => {
   return (
-    <header className="items-cetner flex w-full justify-center">
-      <Link
-        className="text-neutralMuted hover:bg-hoverBackgroundAccent ease-materialBase mr-1.5 flex rounded-full px-4 py-1 text-2xl transition-colors duration-200"
-        href="https://github.com/fecapark/react-rolling-number"
-        rel="noopener noreferrer"
-        target="_blank"
-      >
-        <IconWrapper>
-          <FaGithub />
-        </IconWrapper>
-      </Link>
+    <header className="items-cetner flex w-full justify-center pt-4 xl:pt-0">
+      <div className="hidden items-center lg:flex">
+        <Link
+          className="text-neutralMuted hover:bg-hoverBackgroundAccent ease-materialBase mr-1.5 flex rounded-full px-4 py-1 text-2xl transition-colors duration-200"
+          href="https://github.com/fecapark/react-rolling-number"
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <IconWrapper>
+            <FaGithub />
+          </IconWrapper>
+        </Link>
+      </div>
       <PackageHelper />
     </header>
   );
diff --git a/apps/demo/src/components/Inspector/index.tsx b/apps/demo/src/components/Inspector/index.tsx
index d57fe50..263219b 100644
--- a/apps/demo/src/components/Inspector/index.tsx
+++ b/apps/demo/src/components/Inspector/index.tsx
@@ -27,7 +27,7 @@ export const Inspector = ({ option, setOption }: Props) => {
   const [open, setOpen] = useState(true);
 
   return (
-    <div className="bg-background fixed top-0 right-8 z-10 flex w-full max-w-[340px] flex-col items-center">
+    <div className="bg-background fixed top-0 right-1/2 z-10 flex w-full max-w-[340px] translate-x-1/2 flex-col items-center lg:right-8 lg:translate-x-0">
       <button
         className="bg-layerBackground hover:bg-hoverBackground w-full cursor-pointer py-2 text-sm"
         onClick={() => setOpen((prev) => !prev)}

From d324faba366585aa3dedc40b9b9e66ca828bb8ef Mon Sep 17 00:00:00 2001
From: fecapark <fecapark@gmail.com>
Date: Thu, 11 Dec 2025 19:03:08 +0900
Subject: [PATCH 4/4] feat(demo): close inspector when screen width smaller
 than breakpoint-lg

---
 apps/demo/src/components/Inspector/index.tsx | 306 ++++++++++---------
 1 file changed, 164 insertions(+), 142 deletions(-)

diff --git a/apps/demo/src/components/Inspector/index.tsx b/apps/demo/src/components/Inspector/index.tsx
index 263219b..f51b26e 100644
--- a/apps/demo/src/components/Inspector/index.tsx
+++ b/apps/demo/src/components/Inspector/index.tsx
@@ -1,5 +1,6 @@
 'use client';
 
+import clsx from 'clsx';
 import { type Dispatch, type SetStateAction, useState } from 'react';
 import { MdFormatAlignCenter, MdFormatAlignLeft, MdFormatAlignRight } from 'react-icons/md';
 import { tv } from 'tailwind-variants';
@@ -24,156 +25,177 @@ const inspector = tv({
 
 export const Inspector = ({ option, setOption }: Props) => {
   const { item, label } = inspector();
-  const [open, setOpen] = useState(true);
+  const [open, setOpen] = useState<boolean | null>(null);
 
   return (
     <div className="bg-background fixed top-0 right-1/2 z-10 flex w-full max-w-[340px] translate-x-1/2 flex-col items-center lg:right-8 lg:translate-x-0">
       <button
         className="bg-layerBackground hover:bg-hoverBackground w-full cursor-pointer py-2 text-sm"
-        onClick={() => setOpen((prev) => !prev)}
+        onClick={() => {
+          setOpen((prev) => {
+            if (prev === null) {
+              const lg = window.getComputedStyle(document.body).getPropertyValue('--breakpoint-lg');
+              return window.matchMedia(`(max-width: ${lg})`).matches;
+            }
+            return !prev;
+          });
+        }}
       >
-        {open ? 'Close' : 'Open'} Inspector
+        {open === null ? (
+          <>
+            <span className="lg:hidden">Open</span>
+            <span className="hidden lg:inline">Close</span>
+          </>
+        ) : open ? (
+          'Close'
+        ) : (
+          'Open'
+        )}{' '}
+        Inspector
       </button>
-      {open && (
-        <div className="flex w-full flex-col gap-5 p-4">
-          <div className={item()}>
-            <div className={label()}>ALIGN</div>
-            <SelectInspector
-              fields={[
-                {
-                  label: (
-                    <IconWrapper>
-                      <MdFormatAlignLeft />
-                    </IconWrapper>
-                  ),
-                  value: 'left',
-                },
-                {
-                  label: (
-                    <IconWrapper>
-                      <MdFormatAlignCenter />
-                    </IconWrapper>
-                  ),
-                  value: 'center',
-                },
-                {
-                  label: (
-                    <IconWrapper>
-                      <MdFormatAlignRight />
-                    </IconWrapper>
-                  ),
-                  value: 'right',
-                },
-              ]}
-              onChange={(v) => setOption((prev) => ({ ...prev, align: v }))}
-              value={option.align}
-            />
-          </div>
-          <div className={item()}>
-            <div className={label()}>ROLLWAY</div>
-            <SelectInspector
-              fields={[
-                {
-                  label: 'UP',
-                  value: 'up',
-                },
-                {
-                  label: 'DOWN',
-                  value: 'down',
-                },
-              ]}
-              onChange={(v) => setOption((prev) => ({ ...prev, rollWay: v }))}
-              value={option.rollWay}
-            />
-          </div>
-          <div className={item()}>
-            <div className={label()}>ROLL DURATION</div>
-            <NumberInspector
-              isFloat
-              onChange={(v) => setOption((prev) => ({ ...prev, rollDuration: v }))}
-              suffix="s"
-              value={option.rollDuration}
-            />
-          </div>
-          <div className={item()}>
-            <div className={label()}>SHIFT DURATION</div>
-            <NumberInspector
-              isFloat
-              onChange={(v) => setOption((prev) => ({ ...prev, shiftDuration: v }))}
-              suffix="s"
-              value={option.shiftDuration}
-            />
-          </div>
-          <div className={item()}>
-            <div className={label()}>STAGGER</div>
-            <SelectInspector
-              fields={[
-                {
-                  label: 'TRUE',
-                  value: true,
-                },
-                {
-                  label: 'FALSE',
-                  value: false,
-                },
-              ]}
-              onChange={(v) => setOption((prev) => ({ ...prev, stagger: v }))}
-              value={option.stagger}
-            />
-          </div>
-          <div className={item()}>
-            <div className={label()}>ANIMATE DIFF</div>
-            <SelectInspector
-              fields={[
-                {
-                  label: 'TRUE',
-                  value: true,
-                },
-                {
-                  label: 'FALSE',
-                  value: false,
-                },
-              ]}
-              onChange={(v) => setOption((prev) => ({ ...prev, animateDiff: v }))}
-              value={option.animateDiff}
-            />
-          </div>
-          <div className={item()}>
-            <div className={label()}>COMMAIZE</div>
-            <SelectInspector
-              fields={[
-                {
-                  label: 'TRUE',
-                  value: true,
-                },
-                {
-                  label: 'FALSE',
-                  value: false,
-                },
-              ]}
-              onChange={(v) => setOption((prev) => ({ ...prev, commaize: v }))}
-              value={option.commaize}
-            />
-          </div>
-          <div className={item()}>
-            <div className={label()}>SHOW PLUS SIGN</div>
-            <SelectInspector
-              fields={[
-                {
-                  label: 'TRUE',
-                  value: true,
-                },
-                {
-                  label: 'FALSE',
-                  value: false,
-                },
-              ]}
-              onChange={(v) => setOption((prev) => ({ ...prev, showPlusSign: v }))}
-              value={option.showPlusSign}
-            />
-          </div>
+      <div
+        className={clsx(
+          'w-full flex-col gap-5 p-4',
+          open === null ? 'hidden lg:flex' : open ? 'flex' : 'hidden',
+        )}
+      >
+        <div className={item()}>
+          <div className={label()}>ALIGN</div>
+          <SelectInspector
+            fields={[
+              {
+                label: (
+                  <IconWrapper>
+                    <MdFormatAlignLeft />
+                  </IconWrapper>
+                ),
+                value: 'left',
+              },
+              {
+                label: (
+                  <IconWrapper>
+                    <MdFormatAlignCenter />
+                  </IconWrapper>
+                ),
+                value: 'center',
+              },
+              {
+                label: (
+                  <IconWrapper>
+                    <MdFormatAlignRight />
+                  </IconWrapper>
+                ),
+                value: 'right',
+              },
+            ]}
+            onChange={(v) => setOption((prev) => ({ ...prev, align: v }))}
+            value={option.align}
+          />
+        </div>
+        <div className={item()}>
+          <div className={label()}>ROLLWAY</div>
+          <SelectInspector
+            fields={[
+              {
+                label: 'UP',
+                value: 'up',
+              },
+              {
+                label: 'DOWN',
+                value: 'down',
+              },
+            ]}
+            onChange={(v) => setOption((prev) => ({ ...prev, rollWay: v }))}
+            value={option.rollWay}
+          />
+        </div>
+        <div className={item()}>
+          <div className={label()}>ROLL DURATION</div>
+          <NumberInspector
+            isFloat
+            onChange={(v) => setOption((prev) => ({ ...prev, rollDuration: v }))}
+            suffix="s"
+            value={option.rollDuration}
+          />
+        </div>
+        <div className={item()}>
+          <div className={label()}>SHIFT DURATION</div>
+          <NumberInspector
+            isFloat
+            onChange={(v) => setOption((prev) => ({ ...prev, shiftDuration: v }))}
+            suffix="s"
+            value={option.shiftDuration}
+          />
+        </div>
+        <div className={item()}>
+          <div className={label()}>STAGGER</div>
+          <SelectInspector
+            fields={[
+              {
+                label: 'TRUE',
+                value: true,
+              },
+              {
+                label: 'FALSE',
+                value: false,
+              },
+            ]}
+            onChange={(v) => setOption((prev) => ({ ...prev, stagger: v }))}
+            value={option.stagger}
+          />
+        </div>
+        <div className={item()}>
+          <div className={label()}>ANIMATE DIFF</div>
+          <SelectInspector
+            fields={[
+              {
+                label: 'TRUE',
+                value: true,
+              },
+              {
+                label: 'FALSE',
+                value: false,
+              },
+            ]}
+            onChange={(v) => setOption((prev) => ({ ...prev, animateDiff: v }))}
+            value={option.animateDiff}
+          />
+        </div>
+        <div className={item()}>
+          <div className={label()}>COMMAIZE</div>
+          <SelectInspector
+            fields={[
+              {
+                label: 'TRUE',
+                value: true,
+              },
+              {
+                label: 'FALSE',
+                value: false,
+              },
+            ]}
+            onChange={(v) => setOption((prev) => ({ ...prev, commaize: v }))}
+            value={option.commaize}
+          />
+        </div>
+        <div className={item()}>
+          <div className={label()}>SHOW PLUS SIGN</div>
+          <SelectInspector
+            fields={[
+              {
+                label: 'TRUE',
+                value: true,
+              },
+              {
+                label: 'FALSE',
+                value: false,
+              },
+            ]}
+            onChange={(v) => setOption((prev) => ({ ...prev, showPlusSign: v }))}
+            value={option.showPlusSign}
+          />
         </div>
-      )}
+      </div>
     </div>
   );
 };