feat(studio): add support for host and port flags (#1573)

.changeset/few-ducks-press.md

@@ -0,0 +1,6 @@
+---
+'@pandacss/studio': patch
+'@pandacss/dev': patch
+---
+
+Add `--host` and `--port` flags to studio.

packages/cli/src/cli-main.ts

@@ -278,11 +278,13 @@ export async function main() {
     .command('studio', 'Realtime documentation for your design tokens')
     .option('--build', 'Build')
     .option('--preview', 'Preview')
+    .option('--port <port>', 'Port')
+    .option('--host', 'Host')
     .option('-c, --config <path>', 'Path to panda config file')
     .option('--cwd <cwd>', 'Current working directory', { default: cwd })
     .option('--outdir', 'Output directory for static files')
     .action(async (flags: StudioCommandFlags) => {
-      const { build, preview, outdir, config } = flags
+      const { build, preview, port, host, outdir, config } = flags
 
       const cwd = resolve(flags.cwd ?? '')
 
@@ -294,6 +296,8 @@ export async function main() {
       const buildOpts = {
         configPath: findConfigFile({ cwd, file: config })!,
         outDir: resolve(outdir || ctx.studio.outdir),
+        port,
+        host,
       }
 
       if (preview) {
@@ -304,7 +308,9 @@ export async function main() {
         await serveStudio(buildOpts)
 
         const note = `use ${colors.reset(colors.bold('--build'))} to build`
+        const port = `use ${colors.reset(colors.bold('--port'))} for a different port`
         logger.log(colors.dim(`  ${colors.green('➜')}  ${colors.bold('Build')}: ${note}`))
+        logger.log(colors.dim(`  ${colors.green('➜')}  ${colors.bold('Port')}: ${port}`))
       }
     })
 

packages/cli/src/types.ts

@@ -26,6 +26,8 @@ export interface StudioCommandFlags extends Pick<Config, 'cwd'> {
   preview?: boolean
   config?: string
   outdir?: string
+  port?: string
+  host?: boolean
 }
 
 export interface AnalyzeCommandFlags {

packages/studio/scripts/studio.ts

@@ -6,6 +6,8 @@ import { createRequire } from 'node:module'
 export type BuildOpts = {
   outDir: string
   configPath: string
+  port?: string
+  host?: boolean
 }
 
 const require = createRequire(import.meta.url)
@@ -23,8 +25,8 @@ export async function buildStudio({ outDir, configPath }: BuildOpts) {
   logger.log(stdout)
 }
 
-export async function serveStudio({ configPath }: BuildOpts) {
-  const result = execa(astroBin, ['dev', '--root', appPath], {
+export async function serveStudio({ configPath, port, host }: BuildOpts) {
+  const result = execa(astroBin, ['dev', '--root', appPath, '--port', port ?? '', host ? '--host' : ''], {
     stdio: 'inherit',
     cwd: appPath,
     env: {