Toaster

<div style={{ ...col, gap: '0.75rem', maxWidth: '720px' }}>
      <Toaster
        tone="info"
        message="Info message goes here."
        onDismiss={() => {}}
      />
      <Toaster
        tone="success"
        message="Success message goes here."
        action={{ label: 'View', onClick: () => {} }}
        onDismiss={() => {}}
      />
      <Toaster
        tone="warning"
        message="Warning message goes here."
        action={{ label: 'Action', onClick: () => {} }}
        onDismiss={() => {}}
      />
      <Toaster
        tone="error"
        message="Error message goes here."
        action={{ label: 'Retry', onClick: () => {} }}
        onDismiss={() => {}}
      />
    </div>

<div style={{ ...col, gap: '1.25rem' }}>
      {SIZES.map((size) => (
        <section key={size} style={col}>
          <h3 style={heading}>size=&quot;{size}&quot;</h3>
          <div style={{ ...col, gap: '0.5rem' }}>
            {TONES.map((tone) => (
              <Toaster
                key={tone}
                size={size}
                tone={tone}
                message="Message goes here."
                action={{ label: 'Action', onClick: () => {} }}
                onDismiss={() => {}}
              />
            ))}
          </div>
        </section>
      ))}
    </div>

<div style={{ ...col, gap: '2rem' }}>
      <section style={col}>
        <h3 style={heading}>Desktop horizontal pill (max-w 600px)</h3>
        <div style={{ ...col, gap: '0.75rem' }}>
          {TONES.map((tone) => (
            <Toaster
              key={tone}
              tone={tone}
              layout="desktop"
              message="Message goes here."
              action={{ label: 'Action', onClick: () => {} }}
              onDismiss={() => {}}
            />
          ))}
        </div>
      </section>
      <section style={col}>
        <h3 style={heading}>Mobile vertical card (304 × 159 Figma frame)</h3>
        <div style={row}>
          {TONES.map((tone) => (
            <Toaster
              key={tone}
              tone={tone}
              layout="mobile"
              message={`${tone.charAt(0).toUpperCase()}${tone.slice(1)} message goes here. Use this when the action needs more breathing room.`}
              action={{ label: 'Stay', onClick: () => {} }}
              onDismiss={() => {}}
            />
          ))}
        </div>
      </section>
    </div>

<div style={{ ...col, gap: '1rem', maxWidth: '720px' }}>
      <section style={col}>
        <div style={caption}>Message + dismiss (× only)</div>
        <Toaster
          tone="info"
          message="Message goes here."
          onDismiss={() => {}}
        />
      </section>
      <section style={col}>
        <div style={caption}>Message + action + dismiss (Figma full surface)</div>
        <Toaster
          tone="success"
          message="Message goes here."
          action={{ label: 'View', onClick: () => {} }}
          onDismiss={() => {}}
        />
      </section>
      <section style={col}>
        <div style={caption}>Message-only (provider-managed)</div>
        <Toaster tone="warning" message="Message goes here." />
      </section>
      <section style={col}>
        <div style={caption}>Custom icon override</div>
        <Toaster
          tone="info"
          message="Message goes here."
          icon={<StarIcon />}
          onDismiss={() => {}}
        />
      </section>
      <section style={col}>
        <div style={caption}>icon=&#123;null&#125; — drops the icon entirely</div>
        <Toaster
          tone="info"
          message="Message goes here."
          icon={null}
          onDismiss={() => {}}
        />
      </section>
      <section style={col}>
        <div style={caption}>Disabled action</div>
        <Toaster
          tone="info"
          message="Message goes here."
          action={{ label: 'Action', onClick: () => {}, disabled: true }}
          onDismiss={() => {}}
        />
      </section>
    </div>

<ToasterProvider placement="bottom-right" maxVisible={3}>
      <div style={{ ...col, gap: '1rem', minHeight: 360 }}>
        <h3 style={heading}>useToaster() hook — imperative .show / .dismiss</h3>
        <div style={{ ...caption, maxWidth: 540 }}>
          Click any button to enqueue a dark toaster. The provider keeps a
          FIFO queue with a <code>maxVisible</code> cap of 3 (Sonner /
          Carbon convention). Click &quot;Burst 5&quot; to see two toasts
          wait while the first three age out via the 5-second timer.
          Hover any visible toaster to pause its auto-dismiss timer.
        </div>
        <QueueDemoButtons />
      </div>
    </ToasterProvider>

<ToasterProvider placement="bottom-right">
      <div style={{ ...col, minHeight: 320 }}>
        <h3 style={heading}>Hover the toaster to pause its timer</h3>
        <CountdownInner />
      </div>
    </ToasterProvider>

<ToasterProvider placement="bottom-right">
      <div style={{ ...col, minHeight: 280 }}>
        <h3 style={heading}>Persistent error — never auto-dismisses</h3>
        <PersistentErrorInner />
      </div>
    </ToasterProvider>

{
    const [placement, setPlacement] = useState<ToasterPlacement>('bottom-right');
    return (
      <div style={{ ...col, minHeight: 320 }}>
        <h3 style={heading}>Pick a placement, then trigger</h3>
        <div style={row}>
          {PLACEMENTS.map((p) => (
            <button
              key={p}
              type="button"
              style={{
                ...demoButton,
                background:
                  p === placement
                    ? 'var(--oshon-color-primary-100, #e0fafa)'
                    : (demoButton.background as string),
                borderColor:
                  p === placement
                    ? 'var(--oshon-color-primary-500, #00afb3)'
                    : (demoButton.border as string),
              }}
              onClick={() => setPlacement(p)}
            >
              {p}
            </button>
          ))}
        </div>
        <ToasterProvider key={placement} placement={placement} offset={24}>
          <PlacementInner placement={placement} />
        </ToasterProvider>
      </div>
    );
  }