Image Generator Base

<section
  class="mx-auto max-w-3xl overflow-hidden rounded-2xl border shadow-md"
  style="
    --ws-image-generator-bg: oklch(0.985 0.002 75);
    --ws-image-generator-text: oklch(0.205 0.015 75);
    --ws-image-generator-text-soft: oklch(0.556 0.01 75);
    --ws-image-generator-border: oklch(0.885 0.008 75);
    --ws-image-generator-accent: oklch(0.588 0.16 250);
    --ws-image-generator-action-bg: oklch(0.588 0.16 250);
    --ws-image-generator-action-text: oklch(0.985 0.002 75);
    background: var(--ws-image-generator-bg);
    color: var(--ws-image-generator-text);
    border-color: var(--ws-image-generator-border);
  "
>
  <!-- Prompt input -->
  <div class="p-6">
    <label for="img-gen-prompt" class="sr-only">Describe your image</label>
    <div class="flex items-center gap-3">
      <input
        id="img-gen-prompt"
        type="text"
        placeholder="Describe your image..."
        class="flex-1 rounded-xl border px-4 py-3 text-sm outline-none transition focus:ring-2"
        style="border-color: var(--ws-image-generator-border); background: var(--ws-image-generator-bg); color: var(--ws-image-generator-text)"
      />
      <button
        type="button"
        class="shrink-0 rounded-xl px-5 py-3 text-sm font-medium transition hover:opacity-90"
        style="background: var(--ws-image-generator-action-bg); color: var(--ws-image-generator-action-text)"
      >
        Generate
      </button>
    </div>
  </div>

  <!-- Image output area -->
  <div class="px-6 pb-6">
    <div
      class="flex aspect-[4/3] flex-col items-center justify-center rounded-xl"
      style="background: linear-gradient(135deg, oklch(0.75 0.1 250), oklch(0.65 0.15 300), oklch(0.7 0.12 200))"
      role="img"
      aria-label="Generated image placeholder"
    >
      <svg xmlns="http://www.w3.org/2000/svg" class="h-16 w-16 text-white/40" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1">
        <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 15.75l5.159-5.159a2.25 2.25 0 013.182 0l5.159 5.159m-1.5-1.5l1.409-1.409a2.25 2.25 0 013.182 0l2.909 2.909M3.75 21h16.5A2.25 2.25 0 0022.5 18.75V5.25A2.25 2.25 0 0020.25 3H3.75A2.25 2.25 0 001.5 5.25v13.5A2.25 2.25 0 003.75 21z" />
      </svg>
      <p class="mt-3 text-sm font-medium text-white/60">Ready to generate</p>
    </div>
  </div>

  <!-- Status bar -->
  <div
    class="flex items-center justify-between border-t px-6 py-3"
    style="border-color: var(--ws-image-generator-border)"
  >
    <p class="text-xs" style="color: var(--ws-image-generator-text-soft)">Status: Ready</p>
    <p class="text-xs" style="color: var(--ws-image-generator-text-soft)">1024 &times; 768</p>
  </div>
</section>