@littlepartytime/dev-kit 1.11.0 → 1.12.1

package/dist/webapp/App.tsx

@@ -14,15 +14,25 @@ export default function App() {
   });
 
   return (
-    <div className="min-h-screen flex flex-col">
+    <div style={{ minHeight: '100vh', display: 'flex', flexDirection: 'column' }}>
       {/* Nav */}
-      <nav className="bg-zinc-900 border-b border-zinc-800 px-4 py-2 flex gap-4">
-        <span className="text-amber-500 font-bold mr-4">LPT Dev Kit</span>
+      <nav style={{ background: '#18181b', borderBottom: '1px solid #27272a', padding: '8px 16px', display: 'flex', gap: 16, alignItems: 'center' }}>
+        <span style={{ color: '#f59e0b', fontWeight: 700, marginRight: 16 }}>LPT Dev Kit</span>
         {(['preview', 'play', 'debug'] as Page[]).map((p) => (
           <button
             key={p}
             onClick={() => { setPage(p); history.pushState(null, '', `/${p}`); }}
-            className={`px-3 py-1 rounded ${page === p ? 'bg-amber-600 text-white' : 'text-zinc-400 hover:text-white'}`}
+            className="dk-nav-btn"
+            style={{
+              padding: '4px 12px',
+              borderRadius: 4,
+              border: 'none',
+              cursor: 'pointer',
+              fontSize: 14,
+              ...(page === p
+                ? { background: '#d97706', color: '#fff' }
+                : { background: 'transparent', color: '#a1a1aa' }),
+            }}
           >
             {p.charAt(0).toUpperCase() + p.slice(1)}
           </button>
@@ -30,7 +40,7 @@ export default function App() {
       </nav>
 
       {/* Content */}
-      <main className="flex-1 p-4">
+      <main style={{ flex: 1, padding: 16 }}>
         {page === 'preview' && <Preview />}
         {page === 'play' && <Play />}
         {page === 'debug' && <Debug />}

package/dist/webapp/components/PhoneFrame.tsx

@@ -40,15 +40,14 @@ export default function PhoneFrame({ children }: { children: React.ReactNode })
   return (
     <div
       ref={containerRef}
-      className="flex items-center justify-center h-full overflow-hidden"
-      style={{ flex: 1, minWidth: 0, minHeight: 0 }}
+      style={{ flex: 1, minWidth: 0, minHeight: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', height: '100%', overflow: 'hidden' }}
     >
       {/* Wrapper sized to the scaled phone for correct layout flow */}
       <div style={{ width: BODY_W * scale, height: BODY_H * scale, flexShrink: 0 }}>
         {/* Phone body at original pixel size, visually scaled */}
         <div
-          className="relative"
           style={{
+            position: 'relative',
             width: BODY_W,
             height: BODY_H,
             transform: `scale(${scale})`,
@@ -57,8 +56,9 @@ export default function PhoneFrame({ children }: { children: React.ReactNode })
         >
           {/* Frame / bezel */}
           <div
-            className="absolute inset-0"
             style={{
+              position: 'absolute',
+              inset: 0,
               borderRadius: OUTER_R,
               background: '#1c1c1e',
               boxShadow:
@@ -68,8 +68,10 @@ export default function PhoneFrame({ children }: { children: React.ReactNode })
 
           {/* Screen */}
           <div
-            className="absolute overflow-hidden bg-black"
             style={{
+              position: 'absolute',
+              overflow: 'hidden',
+              background: '#000',
               top: BEZEL,
               left: BEZEL,
               width: SCREEN_W,
@@ -82,8 +84,9 @@ export default function PhoneFrame({ children }: { children: React.ReactNode })
                 contain:paint makes this the containing block for
                 position:fixed elements inside the game. */}
             <div
-              className="absolute overflow-hidden"
               style={{
+                position: 'absolute',
+                overflow: 'hidden',
                 top: SAFE_AREA_TOP,
                 left: 0,
                 right: 0,
@@ -97,14 +100,26 @@ export default function PhoneFrame({ children }: { children: React.ReactNode })
 
           {/* Dynamic Island */}
           <div
-            className="absolute left-1/2 -translate-x-1/2 bg-black rounded-full"
-            style={{ top: BEZEL + 11, width: 126, height: 37, zIndex: 10 }}
+            style={{
+              position: 'absolute',
+              left: '50%',
+              transform: 'translateX(-50%)',
+              background: '#000',
+              borderRadius: 9999,
+              top: BEZEL + 11,
+              width: 126,
+              height: 37,
+              zIndex: 10,
+            }}
           />
 
           {/* Home Indicator */}
           <div
-            className="absolute left-1/2 -translate-x-1/2 rounded-full"
             style={{
+              position: 'absolute',
+              left: '50%',
+              transform: 'translateX(-50%)',
+              borderRadius: 9999,
               bottom: BEZEL + 8,
               width: 134,
               height: 5,

package/dist/webapp/index.html

@@ -4,9 +4,22 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>LPT Dev Kit</title>
-  <script src="https://cdn.tailwindcss.com"></script>
   <style>
-    body { background: #0a0a0a; color: #e5e5e5; }
+    /* ── Dev-Kit UI base ── */
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    body { background: #0a0a0a; color: #e5e5e5; font-family: system-ui, -apple-system, sans-serif; }
+
+    /* ── Interactive states (can't be expressed as inline styles) ── */
+    .dk-nav-btn:hover { color: #fff; }
+    .dk-btn-amber:hover { background: #f59e0b; }
+    .dk-btn-zinc:hover  { background: #52525b; }
+    .dk-btn-green:hover { background: #16a34a; }
+    .dk-player-btn { transition: background 0.15s; }
+    .dk-player-btn:hover { background: #3f3f46; }
+    .dk-resize-bar .dk-resize-line { transition: background 0.15s; }
+    .dk-resize-bar:hover .dk-resize-line { background: #71717a; }
+    .dk-input:focus { outline: none; border-color: #71717a; }
+    .dk-btn-amber:disabled, .dk-btn-green:disabled { opacity: 0.5; }
   </style>
 </head>
 <body>

package/dist/webapp/pages/Debug.tsx

@@ -18,20 +18,22 @@ export default function Debug() {
     return () => { sock.disconnect(); };
   }, []);
 
+  const panelStyle: React.CSSProperties = { background: '#18181b', borderRadius: 8, padding: 16, overflow: 'auto' };
+
   return (
-    <div className="grid grid-cols-2 gap-4 h-[calc(100vh-80px)]">
+    <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, height: 'calc(100vh - 80px)' }}>
       {/* Room State */}
-      <div className="bg-zinc-900 rounded-lg p-4 overflow-auto">
-        <h2 className="text-lg font-bold mb-4 text-amber-400">Room State</h2>
-        <pre className="text-xs font-mono whitespace-pre-wrap">
+      <div style={panelStyle}>
+        <h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 16, color: '#fbbf24' }}>Room State</h2>
+        <pre style={{ fontSize: 11, fontFamily: 'monospace', whiteSpace: 'pre-wrap' }}>
           {JSON.stringify(room, null, 2)}
         </pre>
       </div>
 
       {/* Game State */}
-      <div className="bg-zinc-900 rounded-lg p-4 overflow-auto">
-        <h2 className="text-lg font-bold mb-4 text-amber-400">Full Game State</h2>
-        <pre className="text-xs font-mono whitespace-pre-wrap">
+      <div style={panelStyle}>
+        <h2 style={{ fontSize: 18, fontWeight: 700, marginBottom: 16, color: '#fbbf24' }}>Full Game State</h2>
+        <pre style={{ fontSize: 11, fontFamily: 'monospace', whiteSpace: 'pre-wrap' }}>
           {fullState ? JSON.stringify(fullState, null, 2) : 'No game in progress'}
         </pre>
       </div>

package/dist/webapp/pages/Play.tsx

@@ -2,6 +2,10 @@ import React, { useState, useEffect, useCallback } from 'react';
 import { io, Socket } from 'socket.io-client';
 import PhoneFrame from '../components/PhoneFrame';
 
+const card: React.CSSProperties = { background: '#18181b', borderRadius: 8, padding: 24 };
+const inputStyle: React.CSSProperties = { width: '100%', background: '#27272a', border: '1px solid #3f3f46', borderRadius: 4, padding: '8px 12px', marginBottom: 16, color: '#e5e5e5', fontSize: 14 };
+const btnAmber: React.CSSProperties = { width: '100%', background: '#d97706', color: '#fff', border: 'none', padding: '8px 0', borderRadius: 4, fontWeight: 600, cursor: 'pointer', fontSize: 14 };
+
 export default function Play() {
   const [socket, setSocket] = useState<Socket | null>(null);
   const [nickname, setNickname] = useState('');
@@ -61,20 +65,22 @@ export default function Play() {
 
   if (!joined) {
     return (
-      <div className="flex items-center justify-center h-[60vh]">
-        <div className="bg-zinc-900 rounded-lg p-6 w-80">
-          <h2 className="text-xl font-bold mb-4">Join Game</h2>
+      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', height: '60vh' }}>
+        <div style={{ ...card, width: 320 }}>
+          <h2 style={{ fontSize: 20, fontWeight: 700, marginBottom: 16 }}>Join Game</h2>
           <input
             type="text"
             placeholder="Your nickname"
             value={nickname}
             onChange={(e) => setNickname(e.target.value)}
             onKeyDown={(e) => e.key === 'Enter' && join()}
-            className="w-full bg-zinc-800 border border-zinc-700 rounded px-3 py-2 mb-4"
+            className="dk-input"
+            style={inputStyle}
           />
           <button
             onClick={join}
-            className="w-full bg-amber-600 hover:bg-amber-500 text-white py-2 rounded font-semibold"
+            className="dk-btn-amber"
+            style={btnAmber}
           >
             Join
           </button>
@@ -85,23 +91,35 @@ export default function Play() {
 
   if (room.phase === 'lobby' || room.phase === 'ready') {
     return (
-      <div className="max-w-md mx-auto mt-8">
-        <div className="bg-zinc-900 rounded-lg p-6">
-          <h2 className="text-xl font-bold mb-4">Lobby</h2>
-          <div className="space-y-2 mb-6">
+      <div style={{ maxWidth: 448, margin: '32px auto 0' }}>
+        <div style={card}>
+          <h2 style={{ fontSize: 20, fontWeight: 700, marginBottom: 16 }}>Lobby</h2>
+          <div style={{ display: 'flex', flexDirection: 'column', gap: 8, marginBottom: 24 }}>
             {room.players.map((p: any) => (
-              <div key={p.id} className="flex items-center justify-between bg-zinc-800 rounded px-3 py-2">
+              <div key={p.id} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', background: '#27272a', borderRadius: 4, padding: '8px 12px' }}>
                 <span>{p.nickname} {p.isHost && '(Host)'}</span>
-                <span className={p.ready ? 'text-green-400' : 'text-zinc-500'}>
+                <span style={{ color: p.ready ? '#4ade80' : '#71717a' }}>
                   {p.ready ? 'Ready' : 'Not Ready'}
                 </span>
               </div>
             ))}
           </div>
-          <div className="flex gap-2">
+          <div style={{ display: 'flex', gap: 8 }}>
             <button
               onClick={() => socket?.emit('player:ready', !isReady)}
-              className={`flex-1 py-2 rounded font-semibold ${isReady ? 'bg-zinc-700 text-zinc-300' : 'bg-green-600 text-white'}`}
+              className={isReady ? 'dk-btn-zinc' : 'dk-btn-green'}
+              style={{
+                flex: 1,
+                padding: '8px 0',
+                borderRadius: 4,
+                fontWeight: 600,
+                border: 'none',
+                cursor: 'pointer',
+                fontSize: 14,
+                ...(isReady
+                  ? { background: '#3f3f46', color: '#d4d4d8' }
+                  : { background: '#16a34a', color: '#fff' }),
+              }}
             >
               {isReady ? 'Cancel Ready' : 'Ready'}
             </button>
@@ -109,7 +127,8 @@ export default function Play() {
               <button
                 onClick={() => socket?.emit('game:start')}
                 disabled={!room.players.every((p: any) => p.ready) || room.players.length < 2}
-                className="flex-1 bg-amber-600 hover:bg-amber-500 disabled:opacity-50 text-white py-2 rounded font-semibold"
+                className="dk-btn-amber"
+                style={{ ...btnAmber, flex: 1, width: 'auto' }}
               >
                 Start Game
               </button>
@@ -122,19 +141,20 @@ export default function Play() {
 
   // Playing or ended
   return (
-    <div className="h-[calc(100vh-80px)] relative">
+    <div style={{ height: 'calc(100vh - 80px)', position: 'relative' }}>
       <PhoneFrame>
         {GameRenderer && platform && gameState ? (
           <GameRenderer platform={platform} state={gameState} />
         ) : (
-          <div className="p-4 text-zinc-500">Loading game...</div>
+          <div style={{ padding: 16, color: '#71717a' }}>Loading game...</div>
         )}
       </PhoneFrame>
       {room.phase === 'ended' && isHost && (
-        <div className="absolute bottom-4 left-1/2 -translate-x-1/2 z-[9999]">
+        <div style={{ position: 'absolute', bottom: 16, left: '50%', transform: 'translateX(-50%)', zIndex: 9999 }}>
           <button
             onClick={() => socket?.emit('game:playAgain')}
-            className="bg-amber-600 hover:bg-amber-500 text-white px-6 py-2 rounded-full font-semibold"
+            className="dk-btn-amber"
+            style={{ ...btnAmber, width: 'auto', padding: '8px 24px', borderRadius: 9999 }}
           >
             Play Again
           </button>

package/dist/webapp/pages/Preview.tsx

@@ -3,12 +3,20 @@ import PhoneFrame from '../components/PhoneFrame';
 
 const PLAYER_NAMES = ['Alice', 'Bob', 'Carol', 'Dave', 'Eve', 'Frank', 'Grace', 'Heidi'];
 
+/* ── shared inline-style helpers ── */
+const card: React.CSSProperties = { background: '#18181b', borderRadius: 8, padding: 12 };
+const label: React.CSSProperties = { fontSize: 13, fontWeight: 700, color: '#a1a1aa', marginBottom: 8 };
+const inputBase: React.CSSProperties = { width: '100%', background: '#27272a', border: '1px solid #3f3f46', borderRadius: 4, padding: '4px 8px', fontSize: 13, color: '#e5e5e5' };
+const btnAmber: React.CSSProperties = { background: '#d97706', color: '#fff', border: 'none', padding: '4px 12px', borderRadius: 4, fontSize: 13, cursor: 'pointer' };
+const btnZinc: React.CSSProperties = { background: '#3f3f46', color: '#fff', border: 'none', padding: '4px 12px', borderRadius: 4, fontSize: 13, cursor: 'pointer', width: '100%' };
+
 export default function Preview() {
-  const [playerCount, setPlayerCount] = useState(3);
+  const [playerCount, setPlayerCount] = useState<number | null>(null);
   const [playerIndex, setPlayerIndex] = useState(0);
   const [actions, setActions] = useState<any[]>([]);
   const [GameRenderer, setGameRenderer] = useState<React.ComponentType<any> | null>(null);
   const [engine, setEngine] = useState<any>(null);
+  const [config, setConfig] = useState<{ minPlayers?: number; maxPlayers?: number } | null>(null);
   const [fullState, setFullState] = useState<any>(null);
   const [viewState, setViewState] = useState<any>(null);
   const [gameOver, setGameOver] = useState(false);
@@ -24,6 +32,7 @@ export default function Preview() {
 
   // Generate mock players
   const mockPlayers = useMemo(() => {
+    if (playerCount === null) return [];
     return Array.from({ length: playerCount }, (_, i) => ({
       id: `player-${i + 1}`,
       nickname: PLAYER_NAMES[i] || `Player ${i + 1}`,
@@ -35,15 +44,25 @@ export default function Preview() {
   const mockPlayersRef = useRef(mockPlayers);
   mockPlayersRef.current = mockPlayers;
 
-  // Load renderer and engine dynamically
+  const minPlayers = config?.minPlayers ?? 2;
+  const maxPlayers = config?.maxPlayers ?? 32;
+
+  // Load renderer, engine, and config dynamically
   useEffect(() => {
     import('/src/index.ts').then((mod) => {
       setGameRenderer(() => mod.Renderer || mod.default);
       if (mod.engine) {
         setEngine(mod.engine);
       }
+      if (mod.config) {
+        setConfig(mod.config);
+        setPlayerCount(mod.config.minPlayers ?? 3);
+      } else {
+        setPlayerCount(3);
+      }
     }).catch((err) => {
       console.error('Failed to load game module:', err);
+      setPlayerCount(3);
       // Fallback: try loading renderer directly
       import('/src/renderer.tsx').then((mod) => {
         setGameRenderer(() => mod.default || mod.Renderer);
@@ -55,7 +74,7 @@ export default function Preview() {
 
   // Initialize game when engine loads or player count changes
   useEffect(() => {
-    if (!engine) return;
+    if (!engine || mockPlayers.length === 0) return;
     const initialState = engine.init(mockPlayers);
     setFullState(initialState);
     setGameOver(false);
@@ -159,7 +178,7 @@ export default function Preview() {
 
   // Clamp playerIndex when playerCount decreases
   useEffect(() => {
-    if (playerIndex >= playerCount) {
+    if (playerCount !== null && playerIndex >= playerCount) {
       setPlayerIndex(0);
     }
   }, [playerCount, playerIndex]);
@@ -183,14 +202,14 @@ export default function Preview() {
   }, []);
 
   return (
-    <div className="flex gap-4 h-[calc(100vh-80px)]">
+    <div style={{ display: 'flex', gap: 16, height: 'calc(100vh - 80px)' }}>
       {/* Renderer — half the screen width */}
-      <div className="h-full" style={{ width: '50%' }}>
+      <div style={{ width: '50%', height: '100%' }}>
         <PhoneFrame>
           {GameRenderer && platform && viewState ? (
             <GameRenderer platform={platform} state={viewState} />
           ) : (
-            <div className="p-4 text-zinc-500">
+            <div style={{ padding: 16, color: '#71717a' }}>
               {!engine ? 'Loading engine...' : 'Initializing game...'}
             </div>
           )}
@@ -198,26 +217,27 @@ export default function Preview() {
       </div>
 
       {/* Control Panel — fills remaining width, resizable two-column */}
-      <div ref={panelRef} className="flex-1 min-w-0 flex h-full">
+      <div ref={panelRef} style={{ flex: 1, minWidth: 0, display: 'flex', height: '100%' }}>
         {/* Left column: Players & Controls */}
-        <div className="flex flex-col gap-4 overflow-auto pr-1" style={{ width: `${splitRatio * 100}%` }}>
+        <div style={{ width: `${splitRatio * 100}%`, display: 'flex', flexDirection: 'column', gap: 16, overflow: 'auto', paddingRight: 4 }}>
           {/* Player Count */}
-          <div className="bg-zinc-900 rounded-lg p-3">
-            <h3 className="text-sm font-bold text-zinc-400 mb-2">Player Count</h3>
+          <div style={card}>
+            <h3 style={label}>Player Count</h3>
             <input
               type="number"
-              min={2}
-              max={32}
-              value={playerCount}
-              onChange={(e) => setPlayerCount(Math.max(2, Math.min(32, Number(e.target.value))))}
-              className="w-full bg-zinc-800 border border-zinc-700 rounded px-2 py-1 text-sm"
+              min={minPlayers}
+              max={maxPlayers}
+              value={playerCount ?? ''}
+              onChange={(e) => setPlayerCount(Math.max(minPlayers, Math.min(maxPlayers, Number(e.target.value))))}
+              className="dk-input"
+              style={inputBase}
             />
           </div>
 
           {/* Player Switcher */}
-          <div className="bg-zinc-900 rounded-lg p-3 flex-1 overflow-auto">
-            <h3 className="text-sm font-bold text-zinc-400 mb-2">Current Player</h3>
-            <div className="space-y-1">
+          <div style={{ ...card, flex: 1, overflow: 'auto' }}>
+            <h3 style={label}>Current Player</h3>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
               {mockPlayers.map((p, i) => {
                 const isActive = i === playerIndex;
                 const hue = (i * 137) % 360; // deterministic color per player
@@ -245,28 +265,49 @@ export default function Preview() {
                   <button
                     key={p.id}
                     onClick={() => setPlayerIndex(i)}
-                    className={`w-full flex items-center gap-2 px-2 py-1.5 rounded text-sm text-left transition-colors ${
-                      isActive
-                        ? 'bg-amber-600/20 ring-1 ring-amber-500 text-white'
-                        : 'bg-zinc-800 hover:bg-zinc-700 text-zinc-300'
-                    }`}
+                    className={isActive ? '' : 'dk-player-btn'}
+                    style={{
+                      width: '100%',
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: 8,
+                      padding: '6px 8px',
+                      borderRadius: 4,
+                      fontSize: 13,
+                      textAlign: 'left' as const,
+                      border: 'none',
+                      cursor: 'pointer',
+                      ...(isActive
+                        ? { background: 'rgba(217, 119, 6, 0.2)', boxShadow: 'inset 0 0 0 1px #f59e0b', color: '#fff' }
+                        : { background: '#27272a', color: '#d4d4d8' }),
+                    }}
                   >
                     {/* Avatar */}
                     <div
-                      className="w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold shrink-0"
-                      style={{ background: `hsl(${hue}, 55%, 45%)` }}
+                      style={{
+                        width: 24,
+                        height: 24,
+                        borderRadius: '50%',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center',
+                        fontSize: 11,
+                        fontWeight: 700,
+                        flexShrink: 0,
+                        background: `hsl(${hue}, 55%, 45%)`,
+                      }}
                     >
                       {p.nickname[0]}
                     </div>
-                    <div className="min-w-0 flex-1">
-                      <div className="flex items-center gap-1">
-                        <span className="truncate">{p.nickname}</span>
+                    <div style={{ minWidth: 0, flex: 1 }}>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+                        <span style={{ overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>{p.nickname}</span>
                         {p.isHost && (
-                          <span className="text-[10px] text-amber-400 shrink-0">HOST</span>
+                          <span style={{ fontSize: 10, color: '#fbbf24', flexShrink: 0 }}>HOST</span>
                         )}
                       </div>
                       {roleLabel && (
-                        <div className="text-[10px] text-zinc-500 truncate">
+                        <div style={{ fontSize: 10, color: '#71717a', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
                           {roleLabel}
                         </div>
                       )}
@@ -279,14 +320,15 @@ export default function Preview() {
 
           {/* Game Result */}
           {gameOver && gameResult && (
-            <div className="bg-zinc-900 rounded-lg p-3">
-              <h3 className="text-sm font-bold text-green-400 mb-2">Game Over</h3>
-              <pre className="text-xs font-mono bg-zinc-800 rounded p-2 overflow-auto max-h-32 whitespace-pre-wrap">
+            <div style={card}>
+              <h3 style={{ ...label, color: '#4ade80' }}>Game Over</h3>
+              <pre style={{ fontSize: 11, fontFamily: 'monospace', background: '#27272a', borderRadius: 4, padding: 8, overflow: 'auto', maxHeight: 128, whiteSpace: 'pre-wrap' }}>
                 {JSON.stringify(gameResult, null, 2)}
               </pre>
               <button
                 onClick={resetGame}
-                className="mt-2 w-full bg-amber-600 hover:bg-amber-500 text-white px-3 py-1 rounded text-sm"
+                className="dk-btn-amber"
+                style={{ ...btnAmber, marginTop: 8, width: '100%' }}
               >
                 Reset Game
               </button>
@@ -295,10 +337,11 @@ export default function Preview() {
 
           {/* Reset button (when game is not over) */}
           {!gameOver && engine && (
-            <div className="bg-zinc-900 rounded-lg p-3">
+            <div style={card}>
               <button
                 onClick={resetGame}
-                className="w-full bg-zinc-700 hover:bg-zinc-600 text-white px-3 py-1 rounded text-sm"
+                className="dk-btn-zinc"
+                style={btnZinc}
               >
                 Reset Game
               </button>
@@ -308,40 +351,43 @@ export default function Preview() {
 
         {/* Drag handle */}
         <div
-          className="shrink-0 w-2 cursor-col-resize flex items-center justify-center group"
+          className="dk-resize-bar"
+          style={{ flexShrink: 0, width: 8, cursor: 'col-resize', display: 'flex', alignItems: 'center', justifyContent: 'center' }}
           onMouseDown={() => { dragging.current = true; document.body.style.cursor = 'col-resize'; document.body.style.userSelect = 'none'; }}
         >
-          <div className="w-0.5 h-8 bg-zinc-700 rounded group-hover:bg-zinc-500 transition-colors" />
+          <div className="dk-resize-line" style={{ width: 2, height: 32, background: '#3f3f46', borderRadius: 2 }} />
         </div>
 
         {/* Right column: State & Logs */}
-        <div className="flex flex-col gap-4 overflow-auto pl-1" style={{ width: `${(1 - splitRatio) * 100}%` }}>
+        <div style={{ width: `${(1 - splitRatio) * 100}%`, display: 'flex', flexDirection: 'column', gap: 16, overflow: 'auto', paddingLeft: 4 }}>
           {/* State Editor */}
-          <div className="bg-zinc-900 rounded-lg p-3 flex-1 flex flex-col min-h-0">
-            <h3 className="text-sm font-bold text-zinc-400 mb-2">Game State (Full)</h3>
+          <div style={{ ...card, flex: 1, display: 'flex', flexDirection: 'column', minHeight: 0 }}>
+            <h3 style={label}>Game State (Full)</h3>
             <textarea
               value={stateJson}
               onChange={(e) => setStateJson(e.target.value)}
-              className="flex-1 bg-zinc-800 border border-zinc-700 rounded p-2 font-mono text-xs resize-none min-h-[120px]"
+              className="dk-input"
+              style={{ flex: 1, background: '#27272a', border: '1px solid #3f3f46', borderRadius: 4, padding: 8, fontFamily: 'monospace', fontSize: 11, resize: 'none', minHeight: 120, color: '#e5e5e5' }}
             />
             <button
               onClick={applyState}
-              className="mt-2 bg-amber-600 hover:bg-amber-500 text-white px-3 py-1 rounded text-sm"
+              className="dk-btn-amber"
+              style={{ ...btnAmber, marginTop: 8 }}
             >
               Apply State
             </button>
           </div>
 
           {/* Action Log */}
-          <div className="bg-zinc-900 rounded-lg p-3 h-48 overflow-auto">
-            <h3 className="text-sm font-bold text-zinc-400 mb-2">Action Log</h3>
+          <div style={{ ...card, height: 192, overflow: 'auto' }}>
+            <h3 style={label}>Action Log</h3>
             {actions.length === 0 ? (
-              <p className="text-zinc-500 text-xs">No actions yet</p>
+              <p style={{ color: '#71717a', fontSize: 11 }}>No actions yet</p>
             ) : (
-              <div className="space-y-1">
+              <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
                 {actions.map((a, i) => (
-                  <div key={i} className="text-xs font-mono bg-zinc-800 rounded p-1">
-                    <span className="text-amber-400">{a.player}</span>: {JSON.stringify(a.action)}
+                  <div key={i} style={{ fontSize: 11, fontFamily: 'monospace', background: '#27272a', borderRadius: 4, padding: 4 }}>
+                    <span style={{ color: '#fbbf24' }}>{a.player}</span>: {JSON.stringify(a.action)}
                   </div>
                 ))}
               </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@littlepartytime/dev-kit",
-  "version": "1.11.0",
+  "version": "1.12.1",
   "description": "Development toolkit CLI for Little Party Time game developers",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",