Previewing Changes

// From import-export/+page.svelte
<div class="preview">
  <div class="row p2"># You can preview the config here</div>
  <div class="row">&nbsp;</div>

  {#each Object.entries(diff()) as [key, value], i (i)}
    {#if Array.isArray(value)}
      {#each value as val, v (v)}
      <div class="row"><span class="p4">{key}</span> = <span class="p5">{val}</span></div>
      {/each}
    {:else}
      <div class="row"><span class="p4">{key}</span> = <span class="p5">{value}</span></div>
    {/if}
  {/each}
</div>

// From settings.ts
id: "base",
name: "Base Colors",
note: "The preview here shows selected text in the second line of the command output."

// From settings.ts
id: "cursor",
name: "Cursor",
note: "The cursor in this preview blinks on and off at 1 second intervals for emphasis, it may not match what you see in Ghostty!"

// From Palette.svelte
<div class="color-grid">
  {#each value as _, i (i)}
    <Color 
      defaultValue={defaultValue[i]} 
      bind:value={value[i]} 
      size={40} 
      label={(i + 1).toString()} 
    />
  {/each}
</div>

// From FontPreview.svelte
<div class="preview" style="
  font-family: {fontFamily}; 
  font-size: {fontSize + 'px'}; 
  font-style: {italic ? 'italic' : 'normal'}; 
  font-weight: {bold ? 700 : 400};
">
  <div class="row prompt">
    <span style="color: var(--config-palette-2);">john</span>
    <span style="color: var(--config-palette-6);">@</span>
    <span style="color: var(--config-palette-4);">doe-pc</span>
    <span style="color: var(--config-palette-1); font-weight: 700;">$</span>
    ls
  </div>
  <div class="row">-rwxr-xr-x 1 root <span style="color: var(--config-palette-3); font-weight: 700;">Documents</span></div>
</div>

// From FontPreview.svelte
<Item name="Font family"><Text bind:value={fontFamily} /></Item>
<Item name="Font size"><Number bind:value={fontSize} range={true} min={4} max={60} step={0.5} /></Item>
<Item name="Bold"><Switch bind:checked={bold} /></Item>
<Item name="Italic"><Switch bind:checked={italic} /></Item>

// From settings.ts
id: "icon",
name: "App Icon",
note: "If you choose the \"custom-style\" option, you can use any of the other icon settings to customize your icon with a live preview."

// Reactive config values
const config = $state(Object.assign({}, defaults));

// CSS variables bound to config
<style>
  :root {
    --config-bg: {config.background};
    --config-fg: {config.foreground};
    --config-palette-0: {config.palette[0]};
    /* ... etc */
  }
</style>

// Components reference these variables
.preview {
  background: var(--config-bg);
  color: var(--config-fg);
}

// CSS variables are set based on config state
--config-bg: #282c34;
--config-fg: #ffffff;
--config-palette-0: #1d1f21;
--config-palette-1: #cc6666;
// ... all 256 palette colors

// From Keybinds.svelte
let scroller: HTMLDivElement | undefined = $state();
let scrollPosition = $state(0);

function onScroll(event: Event) {
  scrollPosition = (event.target as HTMLDivElement).scrollTop;
}

$effect(() => {
  if (!showEditor && scroller) {
    scroller.scrollTop = scrollPosition;
  }
});