@xemahq/ui-kernel 0.11.1 → 0.11.2

package/src/offline/types.ts

@@ -1,77 +0,0 @@
-// ═══════════════════════════════════════════════════════════════════════════
-// @xemahq/ui-kernel/offline — types
-//
-// A generic offline field-capture kit: an IndexedDB-backed outbox that queues
-// mutations while disconnected and drains them (with retry + idempotency) on
-// reconnect. Provider-agnostic — any mutation (an app-forge record submit, a
-// status change, …) is enqueued by a stable `kind` whose executor is registered
-// once. The motivating case is field/trade-fair capture with no signal.
-// ═══════════════════════════════════════════════════════════════════════════
-
-/** Lifecycle of a queued mutation. */
-export enum OutboxEntryStatus {
-  /** Waiting to be sent (offline, or not yet attempted). */
-  Pending = 'pending',
-  /** Currently being sent. */
-  Inflight = 'inflight',
-  /** Failed transiently; will be retried (attempts < maxAttempts). */
-  Retrying = 'retrying',
-  /** Exhausted retries — needs manual retry or discard (dead-letter). */
-  Failed = 'failed',
-}
-
-/** One queued mutation. `payload` is opaque to the outbox; the executor for
- *  `kind` interprets it. */
-export interface OutboxEntry<TPayload = unknown> {
-  /** Stable entry id (also the default idempotency key). */
-  id: string;
-  /** Registered executor key (e.g. "app-forge:create-record"). */
-  kind: string;
-  payload: TPayload;
-  /** Sent to the backend so a redelivered mutation is not double-applied. */
-  idempotencyKey: string;
-  status: OutboxEntryStatus;
-  attempts: number;
-  createdAt: number;
-  updatedAt: number;
-  /** Last error message (for the dead-letter UI). */
-  lastError?: string;
-  /** Optional human label for the pending-items UI. */
-  label?: string;
-}
-
-/** Persistence backend for the outbox. IndexedDB in the browser; in-memory for
- *  SSR / tests. */
-export interface OutboxStorage {
-  getAll(): Promise<OutboxEntry[]>;
-  put(entry: OutboxEntry): Promise<void>;
-  delete(id: string): Promise<void>;
-  clear(): Promise<void>;
-}
-
-/** Context passed to an executor when a queued mutation is sent. */
-export interface OutboxExecuteContext {
-  /** Pass to the backend (e.g. as an `Idempotency-Key` header). */
-  idempotencyKey: string;
-  /** How many times this entry has now been attempted (1-based). */
-  attempt: number;
-  entryId: string;
-}
-
-/** Sends one queued mutation. Throwing schedules a retry (see
- *  {@link OutboxOptions.isRetriable}). */
-export type OutboxExecutor<TPayload = unknown> = (
-  payload: TPayload,
-  ctx: OutboxExecuteContext,
-) => Promise<void>;
-
-/** Snapshot of outbox state for UI (offline badge, pending count, dead-letter). */
-export interface OutboxSnapshot {
-  entries: OutboxEntry[];
-  pendingCount: number;
-  failedCount: number;
-  /** True while a drain is in progress. */
-  draining: boolean;
-  /** Current connectivity (from the outbox's online controller). */
-  online: boolean;
-}

package/src/org-db/components/DbResultTable.tsx

@@ -1,176 +0,0 @@
-import { useMemo } from 'react';
-
-export interface DbResultTableProps {
-  columns: Array<{ name: string; type?: string }>;
-  rows: unknown[][];
-  rowCount: number;
-  truncated: boolean;
-  durationMs?: number;
-  statement?: string;
-}
-
-function toDisplayValue(value: unknown): string {
-  if (value === null || value === undefined) {
-    return '';
-  }
-  if (typeof value === 'string') {
-    return value;
-  }
-  if (
-    typeof value === 'number' ||
-    typeof value === 'boolean' ||
-    typeof value === 'bigint'
-  ) {
-    return String(value);
-  }
-  if (value instanceof Date) {
-    return value.toISOString();
-  }
-  try {
-    return JSON.stringify(value);
-  } catch {
-    return String(value);
-  }
-}
-
-function escapeCsvValue(value: string): string {
-  if (value.includes('"') || value.includes(',') || value.includes('\n')) {
-    return `"${value.replace(/"/g, '""')}"`;
-  }
-  return value;
-}
-
-export function DbResultTable(props: DbResultTableProps) {
-  const { columns, rows, rowCount, truncated, durationMs, statement } = props;
-
-  const csvContent = useMemo(() => {
-    const header = columns
-      .map((column) => escapeCsvValue(column.name))
-      .join(',');
-    const dataLines = rows.map((row) =>
-      row
-        .map((cell) => {
-          const printable =
-            cell === null || cell === undefined ? '' : toDisplayValue(cell);
-          return escapeCsvValue(printable);
-        })
-        .join(','),
-    );
-    return [header, ...dataLines].join('\n');
-  }, [columns, rows]);
-
-  const displayedCount = rows.length;
-
-  const handleDownloadCsv = () => {
-    const blob = new Blob([csvContent], { type: 'text/csv;charset=utf-8;' });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement('a');
-    link.href = url;
-    link.download = 'query-results.csv';
-    document.body.appendChild(link);
-    link.click();
-    document.body.removeChild(link);
-    URL.revokeObjectURL(url);
-  };
-
-  return (
-    <section className="rounded-lg border border-border bg-card text-card-foreground">
-      {statement ? (
-        <details className="border-b border-border px-4 py-3">
-          <summary className="cursor-pointer text-sm font-medium text-foreground">
-            SQL statement
-          </summary>
-          <pre className="mt-3 overflow-x-auto rounded-md bg-muted p-3 text-xs leading-6 text-muted-foreground">
-            <code>{statement}</code>
-          </pre>
-        </details>
-      ) : null}
-
-      {truncated ? (
-        <div className="border-b border-amber-300/60 bg-amber-100/60 px-4 py-3 text-sm text-amber-900">
-          Showing first {displayedCount} rows of {rowCount} total - download CSV
-          for full results.
-        </div>
-      ) : null}
-
-      <div className="flex items-center justify-between gap-3 border-b border-border px-4 py-3">
-        <div className="text-sm text-muted-foreground">
-          {rowCount === 0
-            ? 'No rows returned'
-            : `${displayedCount} row${displayedCount === 1 ? '' : 's'} shown`}
-        </div>
-        <button
-          type="button"
-          className="inline-flex items-center rounded-md border border-input bg-background px-3 py-1.5 text-xs font-medium text-foreground hover:bg-accent"
-          onClick={handleDownloadCsv}
-        >
-          Download CSV
-        </button>
-      </div>
-
-      {rowCount === 0 ? (
-        <div className="px-4 py-8 text-center text-sm text-muted-foreground">
-          No rows returned
-        </div>
-      ) : (
-        <div className="overflow-x-auto">
-          <table className="min-w-full border-collapse text-sm">
-            <thead>
-              <tr className="border-b border-border bg-muted/40">
-                {columns.map((column) => (
-                  <th
-                    key={column.name}
-                    className="px-4 py-3 text-left font-medium text-foreground"
-                  >
-                    <div className="flex flex-wrap items-center gap-2">
-                      <span>{column.name}</span>
-                      {column.type ? (
-                        <span className="rounded-full border border-border bg-background px-2 py-0.5 text-[11px] font-normal uppercase tracking-wide text-muted-foreground">
-                          {column.type}
-                        </span>
-                      ) : null}
-                    </div>
-                  </th>
-                ))}
-              </tr>
-            </thead>
-            <tbody>
-              {rows.map((row, rowIndex) => (
-                <tr
-                  key={`row-${rowIndex}`}
-                  className="border-b border-border/70 align-top"
-                >
-                  {columns.map((column, colIndex) => {
-                    const cell = row[colIndex];
-                    return (
-                      <td
-                        key={`${column.name}-${rowIndex}`}
-                        className="px-4 py-2 text-muted-foreground"
-                      >
-                        {cell === null || cell === undefined ? (
-                          <span className="italic text-muted-foreground">
-                            null
-                          </span>
-                        ) : (
-                          <span className="break-all text-foreground">
-                            {toDisplayValue(cell)}
-                          </span>
-                        )}
-                      </td>
-                    );
-                  })}
-                </tr>
-              ))}
-            </tbody>
-          </table>
-        </div>
-      )}
-
-      {typeof durationMs === 'number' ? (
-        <footer className="border-t border-border px-4 py-2 text-xs text-muted-foreground">
-          Query ran in {Math.max(0, Math.round(durationMs))} ms
-        </footer>
-      ) : null}
-    </section>
-  );
-}

package/src/org-db/index.ts

@@ -1 +0,0 @@
-export { DbResultTable, type DbResultTableProps } from './components/DbResultTable';

package/src/pdf/index.ts

@@ -1,11 +0,0 @@
-// ═══════════════════════════════════════════════════════════════════════════
-// @xemahq/ui-kernel/pdf — canvas-rendered PDF preview surface
-//
-// Split into a DEDICATED subpath (out of the `/ui` barrel) because it pulls in
-// `react-pdf` → `pdfjs-dist` (~1.9 MB). Keeping it here lets `@xemahq/ui-kernel/ui`
-// (and therefore `@xemahq/app-ui`'s AppShell) stay tree-shakeable: a consumer
-// that never renders a PDF never bundles pdf.js. Import from this subpath only
-// when you actually need the viewer.
-// ═══════════════════════════════════════════════════════════════════════════
-
-export { PdfPreview, type PdfPreviewProps } from '../ui/pdf/pdf-preview';

package/src/registry/index.ts

@@ -1,9 +0,0 @@
-export * from './lib/extension-points';
-export * from './lib/agent-validation-host';
-export * from './lib/biome-slot';
-export * from './lib/biomes-enabled-context';
-export * from './lib/session-selectors';
-export * from './lib/session-context-builder';
-export * from './lib/session-context';
-export * from './lib/session-context-provider';
-export * from './lib/primitives';

package/src/registry/lib/agent-validation-host.ts

@@ -1,36 +0,0 @@
-/**
- * Host-slot-aware composition validation.
- *
- * The kernel's `validateBiomeComposition` is host-agnostic: it takes the
- * set of known slot ids as input. This thin wrapper binds it to the host
- * shell's actual slot catalog (`HostExtensionSlots`) so callers don't have
- * to assemble the set themselves. It is the function the host bootstrap
- * calls after every enabled biome has registered.
- */
-
-import { HostExtensionSlots } from './extension-points';
-import {
-  type CompositionDiagnostic,
-  type FrontendBiome,
-  validateBiomeComposition,
-} from '../../index';
-
-/**
- * Every slot id the host shell renders a `<BiomeSlot>` for. A panel
- * targeting anything outside this set (and not a `<owner>/<name>`
- * biome-owned slot) is flagged as unknown.
- */
-const HOST_SLOT_IDS: ReadonlySet<string> = new Set(
-  Object.values(HostExtensionSlots),
-);
-
-/**
- * Validate the merged composition of the given biomes against the host
- * slot catalog. Returns structured diagnostics; never throws, never logs
- * (the caller owns the fail-fast / surface policy).
- */
-export function validateHostBiomeComposition(
-  biomes: readonly FrontendBiome[],
-): readonly CompositionDiagnostic[] {
-  return validateBiomeComposition(biomes, { knownSlots: HOST_SLOT_IDS });
-}

package/src/registry/lib/biome-slot.tsx

@@ -1,50 +0,0 @@
-import { Fragment, type ReactElement } from 'react';
-
-import { useBiomesEnabled } from './biomes-enabled-context';
-import { biomeRegistry, useBiomeRegistryRevision } from '../../index';
-
-export interface BiomeSlotProps {
-  /** Slot name biomes target via `PanelContribution.slot`. */
-  readonly name: string;
-  /** Optional fallback rendered when no biome contributes to this slot. */
-  readonly fallback?: ReactElement | null;
-}
-
-/**
- * Renders every biome-contributed panel registered for `name`, sorted
- * by `weight`. When no biome contributes, renders `fallback` (or null).
- *
- * Reactive: subscribes to the biome registry's revision counter via
- * `useBiomeRegistryRevision()`, so the slot re-renders automatically
- * when a biome registers or unregisters (i.e. when `bootstrapBiomes()`
- * finishes after the host shell has already painted, or when the admin
- * UI disables a biome at runtime).
- *
- * Master-disable: if the surrounding host wraps the tree in
- * `<BiomeHostProvider biomes="disabled">`, this slot short-circuits
- * to its fallback regardless of registry state.
- *
- * Bridge access: biome panels reach host services via `useHostBridge()`,
- * which reads from `HostBridgeContext`. The host shell mounts the
- * provider above the route tree once; `<BiomeSlot>` does not own the
- * provider so a host can place slots anywhere without nesting providers.
- */
-export function BiomeSlot(props: BiomeSlotProps): ReactElement | null {
-  // Subscribe so this slot re-renders when biomes register/change.
-  useBiomeRegistryRevision();
-  const enabled = useBiomesEnabled();
-  if (!enabled) {
-    return props.fallback ?? null;
-  }
-  const panels = biomeRegistry.panelsForSlot(props.name);
-  if (panels.length === 0) {
-    return props.fallback ?? null;
-  }
-  return (
-    <Fragment>
-      {panels.map((panel) => (
-        <Fragment key={panel.id}>{panel.render()}</Fragment>
-      ))}
-    </Fragment>
-  );
-}

package/src/registry/lib/biomes-enabled-context.ts

@@ -1,20 +0,0 @@
-import { createContext, useContext } from 'react';
-
-/**
- * React-side mirror of `biomeRegistry.isEnabled()`. Hosts that embed
- * `@xemahq/ui-kernel/registry` without participating in Xema's biome
- * ecosystem flip this to `false` via
- * `<BiomeHostProvider biomes="disabled">`. `BiomeSlot` and
- * `useBiomeRoutes` consult this context for cheap render-time
- * short-circuit; the singleton registry's `isEnabled()` flag covers the
- * imperative paths (`bootstrapBiomes`, `register`, `unregister`).
- *
- * Default is `true` — a host that mounts no provider gets the standard
- * biome-enabled surface. Embedding hosts opt out explicitly.
- */
-export const BiomesEnabledContext = createContext<boolean>(true);
-BiomesEnabledContext.displayName = 'BiomesEnabledContext';
-
-export function useBiomesEnabled(): boolean {
-  return useContext(BiomesEnabledContext);
-}

package/src/registry/lib/extension-points.ts

@@ -1,134 +0,0 @@
-/**
- * Catalog of frontend extension points the host shell exposes to biomes.
- *
- * The host renders `<BiomeSlot name="…">` boundaries at the call sites
- * below; biomes register `panels` against the same slot id in their
- * `FrontendBiome` contribution, and the registry stitches the two
- * together at runtime. The host itself is biome-agnostic — it knows
- * nothing about which biome (if any) fills a given slot.
- *
- * Routes work the same way: biomes push `RouteContribution`s and the
- * host calls `useBiomeRoutes()` to mount them. Nav items merge into
- * `getNavSections()` likewise.
- *
- * ── Adding a new host extension point ────────────────────────────────
- *   1. Add a new entry to `HostExtensionSlots` below with a JSDoc that
- *      describes WHERE the slot is rendered, WHAT biomes should put in
- *      it, and any in-scope CONTEXT (e.g., "run-detail page — runId is
- *      readable via the host bridge's location").
- *   2. Mount `<BiomeSlot name={HostExtensionSlots.X} />` in the host
- *      page.
- *   3. Document the slot in the xema-docs repo (`content/biomes/04-frontend-extensions.md`).
- *
- * Removing a host slot is a breaking change — bump the kernel package
- * major version.
- *
- * ── Biome-owned extension points (cross-biome extension) ────────────
- * Biomes can ALSO expose their own slots so OTHER biomes can extend
- * THEM. The convention is to namespace biome-owned slot ids as
- * `<biome-id>/<slot-name>` (e.g., `software-dev/page-actions`)
- * and to publish the typed catalog from the biome's own package
- * alongside its `FrontendBiomeFactory`. Other biomes import the
- * exported constants directly. Result: the host doesn't see biome
- * internals, biomes don't import each other's source — they meet at
- * the slot-id strings, which are typed by the publishing biome.
- *
- * Slot-name collisions are caught at runtime by the registry's
- * fail-fast duplicate-key guard, so two biomes can't shadow each
- * other accidentally.
- */
-export const HostExtensionSlots = {
-  // ── Org-level shell ────────────────────────────────────────────────
-  /**
-   * Top-bar actions to the right of the org switcher. Visible on every
-   * authenticated page. Use for org-wide quick actions or status
-   * indicators (e.g., catalog instance health, Slack-notifier badge).
-   */
-  OrgHeaderActions: 'org-header-actions',
-
-  /**
-   * Cards on the public Biomes-overview page. Use for biome authors
-   * to advertise capabilities outside the authenticated app shell.
-   * (Reserved — host wiring may land later; safe to register today.)
-   */
-  BiomesOverviewCards: 'biomes-overview-cards',
-
-  // ── Project home ───────────────────────────────────────────────────
-  /**
-   * Cards on the project home dashboard, between the SetupChecklist
-   * and the ActivityTimeline. Use for biome-shipped status cards or
-   * quick-launch tiles. `bridge.auth.getProjectId()` is in scope.
-   */
-  ProjectOverviewCards: 'project-overview-cards',
-
-  /**
-   * Secondary cards on the project home, rendered below the activity
-   * timeline. Use for less prominent biome surfaces (recent runs,
-   * insights, recommendations).
-   */
-  ProjectOverviewSecondary: 'project-overview-secondary',
-
-  /**
-   * CTAs rendered into the dashboard's empty-state row when the project
-   * has no recent activity. Biomes can suggest "first run" actions.
-   */
-  DashboardEmptyState: 'dashboard-empty-state',
-
-  // ── Run detail ─────────────────────────────────────────────────────
-  /**
-   * Header chip row on the workflow run-detail page, alongside the
-   * status badge. Use for biome-shipped meta-actions (open in
-   * external system, copy entity ref, …).
-   */
-  RunDetailActions: 'run-detail-actions',
-
-  /**
-   * Side-panel cards on the workflow run-detail page, under the
-   * `ActivitySidebar`. Use for run-context biome surfaces (extracted
-   * entity refs, diff stats, biome-side telemetry). The current
-   * `runId` is readable from `bridge.navigation.useLocation()`.
-   */
-  RunDetailSidePanel: 'run-detail-side-panel',
-
-  // ── Interactive sessions ───────────────────────────────────────────
-  /**
-   * Action chips in the session detail page, alongside session controls.
-   * Use for biome shortcuts that are meaningful inside a session
-   * (open repo, open catalog entity, post to Slack, …).
-   */
-  SessionActions: 'session-actions',
-
-  /**
-   * Side-panel cards on the session detail page. Use for biome-driven
-   * context (related catalog entities, recent commits, …).
-   */
-  SessionSidePanel: 'session-side-panel',
-
-  /**
-   * Right-pane header strip in the session workspace (sessions +
-   * design-system-builder sessions). Sits to the LEFT of the host's hardcoded
-   * KB · Attachments · More · ActionsMenu icons. Use for compact
-   * icon-button actions tied to the preview surface — e.g.
-   * software-dev-web's Git commit/push/PR icons, a Slack "share
-   * preview" button, a catalog "open entity" link.
-   */
-  SessionRightHeader: 'session-right-header',
-
-  // ── Settings ───────────────────────────────────────────────────────
-  /**
-   * Tabs on the project Settings page. Each biome that contributes a
-   * panel here is rendered as a tab section under "Biomes". Use for
-   * per-project biome configuration (catalog instance URL +
-   * credentials ref, Slack channel mapping, …).
-   */
-  SettingsTabs: 'settings-tabs',
-} as const;
-
-/**
- * Union of every host-defined slot id. Biome authors can use this in
- * their `panels[].slot` field for compile-time spell-checking — but
- * the runtime accepts any string, so biome-owned slots (`<biome-id>/x`)
- * stay valid without modifying this catalog.
- */
-export type HostExtensionSlot =
-  (typeof HostExtensionSlots)[keyof typeof HostExtensionSlots];

package/src/registry/lib/primitives/SessionEventCard.tsx

@@ -1,164 +0,0 @@
-/**
- * Generic event-row primitive a biome can use as the rendered form of
- * a `SessionActivityEvent` it owns. Matches the host's built-in
- * console row visually (time gutter + icon chip + title + detail) so
- * biome-rendered events sit inside the host timeline without looking
- * grafted on.
- *
- * Biomes compose this when they register an `ActivityRendererContribution`:
- *
- *   render: ({ event }) => (
- *     <SessionEventCard
- *       time={event.createdAt}
- *       icon={<JiraIcon />}
- *       title={event.title}
- *       detail={event.detail}
- *       tone={event.status === 'error' ? 'error' : 'default'}
- *     />
- *   )
- *
- * Inline-styled with CSS-variable tokens for the same portability
- * reasons as `SessionMutationBar`.
- */
-import { type CSSProperties, type ReactNode, type ReactElement } from 'react';
-
-export type SessionEventCardTone =
-  | 'default'
-  | 'pending'
-  | 'success'
-  | 'error'
-  | 'info';
-
-const TONE_DOT: Record<SessionEventCardTone, string> = {
-  default: 'hsl(var(--ink-4, 228 6% 58%))',
-  pending: 'hsl(var(--info, 220 70% 50%))',
-  success: 'hsl(var(--success, 152 50% 35%))',
-  error: 'hsl(var(--destructive, 8 70% 50%))',
-  info: 'hsl(var(--info, 220 70% 50%))',
-};
-
-const TONE_BG: Record<SessionEventCardTone, string> = {
-  default: 'hsl(var(--paper-elev, 0 0% 100%))',
-  pending: 'hsl(var(--info, 220 70% 50%) / 0.08)',
-  success: 'hsl(var(--success, 152 50% 35%) / 0.08)',
-  error: 'hsl(var(--destructive, 8 70% 50%) / 0.10)',
-  info: 'hsl(var(--info, 220 70% 50%) / 0.08)',
-};
-
-export interface SessionEventCardProps {
-  /** ISO timestamp; the primitive renders HH:MM:SS in the gutter. */
-  readonly time: string;
-  readonly icon?: ReactNode;
-  readonly title: ReactNode;
-  readonly detail?: ReactNode;
-  /** Optional inline body (collapsible content, code block, …). */
-  readonly children?: ReactNode;
-  readonly tone?: SessionEventCardTone;
-  readonly style?: CSSProperties;
-  readonly className?: string;
-}
-
-function formatTime(iso: string): string {
-  const date = new Date(iso);
-  if (Number.isNaN(date.getTime())) {
-    return '—';
-  }
-  return date.toLocaleTimeString([], {
-    hour: '2-digit',
-    minute: '2-digit',
-    second: '2-digit',
-  });
-}
-
-export function SessionEventCard({
-  time,
-  icon,
-  title,
-  detail,
-  children,
-  tone = 'default',
-  style,
-  className,
-}: SessionEventCardProps): ReactElement {
-  return (
-    <div
-      className={className}
-      style={{
-        display: 'flex',
-        gap: 10,
-        padding: '4px 8px',
-        borderRadius: 6,
-        fontSize: 12,
-        ...style,
-      }}
-    >
-      <span
-        style={{
-          width: 56,
-          flexShrink: 0,
-          fontFamily: 'var(--font-mono, ui-monospace, monospace)',
-          fontSize: 11,
-          color: 'hsl(var(--ink-4, 228 6% 58%))',
-          fontVariantNumeric: 'tabular-nums',
-        }}
-      >
-        {formatTime(time)}
-      </span>
-      <div
-        style={{
-          width: 20,
-          height: 20,
-          flexShrink: 0,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          borderRadius: 4,
-          background: TONE_BG[tone],
-        }}
-      >
-        {icon ?? (
-          <span
-            style={{
-              width: 6,
-              height: 6,
-              borderRadius: '50%',
-              background: TONE_DOT[tone],
-            }}
-          />
-        )}
-      </div>
-      <div style={{ minWidth: 0, flex: 1 }}>
-        <div
-          style={{
-            display: 'flex',
-            gap: 6,
-            alignItems: 'baseline',
-            flexWrap: 'wrap',
-          }}
-        >
-          <span
-            style={{
-              color: 'hsl(var(--ink, 228 14% 11%))',
-              wordBreak: 'break-word',
-            }}
-          >
-            {title}
-          </span>
-          {detail !== null && detail !== undefined && (
-            <span
-              style={{
-                color: 'hsl(var(--ink-3, 228 6% 40%))',
-                wordBreak: 'break-word',
-              }}
-            >
-              {detail}
-            </span>
-          )}
-        </div>
-        {children !== null && children !== undefined && (
-          <div style={{ marginTop: 4 }}>{children}</div>
-        )}
-      </div>
-    </div>
-  );
-}