frontend: add WarnBanner Preact component, compose ApiErrorPanel from it

mara, on review: "i want each component to import its own css file
itself[;] if you need a bunch of extra css externally, its not a proper
component ... you may need to migrate other components that you would
want to use first".

WarnBanner is the Preact-component successor to the shadow-DOM
<hive-warn> custom element (same three-tier info/warning/error visual
language, colours copied faithfully from hive-warn.css). ApiErrorPanel
now composes it instead of owning a copy of the border/colour/pulse
rules itself — its own CSS is back down to just the layout that's
actually specific to it (heading, copy button, detail text).

Re-verified with a fresh mock-server screenshot: same rendered output as
before, now via composition instead of a duplicated banner shape.

frontend/packages/shared/src/warn-banner/WarnBanner.tsx

@@ -0,0 +1,38 @@
+// WarnBanner.tsx — <WarnBanner>, the Preact-component successor to the
+// shadow-DOM <hive-warn> custom element (../hive-warn/hive-warn.js).
+// Same three-tier visual language (mara, on `hive-warn`'s own review:
+// "there should be distinction between info, warning, error — all
+// warnings should be styled identically") — built as a plain Preact
+// component instead so it composes cleanly wherever this package's other
+// shared components do (JobqRollup, JobqGraph, ApiErrorPanel), rather
+// than needing a shadow root + CSS-as-text build step that only resolves
+// under one of the two consuming packages' esbuild configs. `ApiErrorPanel`
+// is the first consumer — compose from this instead of duplicating the
+// banner's own border/colour/pulse rules locally.
+//
+// `level` defaults to 'warning', matching `hive-warn.js`'s own default.
+// Only `error` pulses — an active incident, not a standing caveat, same
+// rule `hive-warn.css`'s own comment states.
+import type { ComponentChildren } from 'preact';
+import './WarnBanner.css';
+
+export type WarnLevel = 'info' | 'warning' | 'error';
+
+export interface WarnBannerProps {
+  level?: WarnLevel;
+  // Passed straight through to the root element's `class` list —
+  // for a caller-specific concern the banner itself has no opinion on
+  // (e.g. `ApiErrorPanel` adding a top margin for the context it usually
+  // sits in), not for re-styling the banner's own look.
+  class?: string;
+  children?: ComponentChildren;
+}
+
+export function WarnBanner({ level = 'warning', class: extraClass, children }: WarnBannerProps) {
+  const classes = ['warn-banner', `warn-banner-${level}`, extraClass].filter(Boolean).join(' ');
+  return (
+    <div class={classes} role={level === 'error' ? 'alert' : undefined}>
+      {children}
+    </div>
+  );
+}