# Plugin Card

> A plugin in a catalogue or admin grid. Icon, name, version, kind, enabled state and last activity, a description, a headline count with a sparkline, and Page and Details actions; selectable as a checkbox card for bulk actions.

Source: https://docs.nasaqui.com/components/plugin-card

## Install

```bash
npx shadcn@latest add https://docs.nasaqui.com/r/plugin-card.json
```

One installed plugin, as a card: its icon on its own colour, name and version, what kind of plugin it is, whether it is
enabled and when it last did something. Below that a short description, a headline count (records, tokens,
invocations) with a sparkline of recent activity, and links to the plugin's page and its details.

With `selectable` it is a checkbox card: the checkbox, a click anywhere on the card, or a long press on touch selects
it, so an admin can enable, disable or remove many plugins at once.

## When to use

- The plugins page of an admin console; a grid of connected sources or AI providers; any list of add-ons with live
  activity.

## When not to use

- A store where people browse and install: use `Marketplace`.
- One integration's connect / disconnect flow: use `IntegrationConnector`.
- An engine's health in depth: use `EngineCard`.

## Import

```tsx
import { PluginCard, PluginCardGrid } from "@fadymondy/nasaq";
```

## Quick start

```tsx
<PluginCardGrid>
  {plugins.map((p) => (
    <PluginCard
      key={p.id}
      plugin={p}
      selectable
      selected={selected.includes(p.id)}
      onSelectedChange={(next) => setSelected((s) => toggleSelected(s, p.id, next))}
      detailHref={`/admin/plugins/${p.slug}`}
      pageHref={p.route}
    />
  ))}
</PluginCardGrid>
```

## Anatomy

- `data-slot="plugin-card"` (`data-selected`, `data-activity`): an `article` named by its heading.
- Top: checkbox (selectable), `plugin-card-icon` tile, name, version, `plugin-card-activity` badge, kind and
  enabled badges, your `badges`.
- Description, two lines at most.
- `plugin-card-metric`: count label, compact count, sparkline.
- Footer: slug, your `actions`, Page, Details.

## API

### `PluginCardItem`

| Field | Type | Notes |
| --- | --- | --- |
| `id`, `name` | `string` | |
| `description`, `version`, `slug` | `string` | `slug` defaults to `id`. |
| `kind` | `string` | `source`, `capability`, `ai_provider`, `pipeline`, `enrichment`, `copilot`, `tool`, `skill`, `agent`, `mcp`, `memory`, `persona`, `core`, `system` are translated; others are spelled out. |
| `icon` | `ReactNode \| string` | A string goes through `IconByName` (names, `bx-` names, image URLs). Default a puzzle piece. |
| `hue` | `TagHue` | The icon tile and sparkline colour. Default `"gray"`. |
| `enabled` | `boolean` | Shows Enabled or Disabled; leave it out to show neither. |
| `lastActiveAt` | `number \| string \| Date \| null` | Green within the hour, amber within the day, grey after that or never. |
| `count`, `countLabel` | `number`, `string` | The headline figure, shown compact (12.4K) with the full number in the title. |
| `series` | `number[]` | Recent activity, oldest first. |

### `<PluginCard>`

| Prop | Type | Notes |
| --- | --- | --- |
| `plugin` | `PluginCardItem` | |
| `selectable`, `selected`, `onSelectedChange` | | A checkbox card. Clicks on links and buttons inside do not toggle it. |
| `detailHref` / `onOpen` | | Details as a link or a button. |
| `pageHref` / `onOpenPage` | | The plugin's own page. |
| `badges`, `actions` | `ReactNode` | More badges; more footer actions. |
| `headingAs` | `ElementType` | Default `h3`. |
| `now` | `number` | Fixes "now" for the activity colour (tests, stories). |
| `labels` | `Partial<PluginCardLabels>` | Strings; `kinds` merges with the built-in kind names. |

`PluginCardGrid` is a responsive grid (`minmax(18rem, 1fr)` columns).

### Helpers

Exported from `plugin-card-logic.ts`, all pure: `pluginActivity(lastActiveAt, now?, { liveMinutes, recentHours })`
gives `"live" | "recent" | "idle" | "never"`; `humanizeKind(kind)`; `toggleSelected(selected, id, next)` keeps the
order ids were picked in; `selectionState(selected, ids)` gives `"all" | "some" | "none"` for a select-all checkbox.

## Examples

**Bulk actions.** Keep the selected ids in state, show a bar with the count when any are selected, and a select-all
`Checkbox` with `checked={state === "all"}` and `indeterminate={state === "some"}`.

## Accessibility

- Each card is an `article` named by the plugin's name. The checkbox has its own name ("Select Postgres").
- Activity is a word ("5 minutes ago", "No activity") with a hidden "Last active:" prefix, not only a coloured dot.
- Page and Details are real links or buttons named with the plugin ("Open Postgres details").
- The sparkline is an image with a label; the count's full value is in its title.

## RTL & i18n

English and Arabic strings and kind names are built in. Versions, slugs and the count stay left to right; names and
descriptions follow their own direction. The sparkline runs right to left in Arabic.

## Styling & tokens

`bg-card`, `border-border`, `rounded-card`; a selected card uses `border-primary` and `bg-nq-selected`. The icon tile
and sparkline use the `--nq-tag-*` hue tokens.

## Do / Don't

- Do pass `series` with the same number of buckets for every plugin so the sparklines compare.
- Don't use the plugin's hue for its status: enabled and activity have their own badges.

## Related

`marketplace`, `integration-connector`, `engine-card`, `source-badge`, `checkbox`, `chart`.

## Lab

Integrations › Plugin Card: Default, Selectable, States, Arabic.

## Code

### React

```tsx
<PluginCardGrid>
  {plugins.map((p) => (
    <PluginCard
      key={p.id}
      plugin={p}
      selectable
      selected={selected.includes(p.id)}
      onSelectedChange={(next) => setSelected((s) => toggleSelected(s, p.id, next))}
      detailHref={`/admin/plugins/${p.slug}`}
      pageHref={p.route}
    />
  ))}
</PluginCardGrid>
```

### shadcn

```tsx
<PluginCardGrid>
  {plugins.map((p) => (
    <PluginCard
      key={p.id}
      plugin={p}
      selectable
      selected={selected.includes(p.id)}
      onSelectedChange={(next) => setSelected((s) => toggleSelected(s, p.id, next))}
      detailHref={`/admin/plugins/${p.slug}`}
      pageHref={p.route}
    />
  ))}
</PluginCardGrid>
```

### Vue

```vue
<script setup lang="ts">
import { NqPluginCard, NqPluginCardGrid, togglePluginSelected, type PluginCardItem } from "@fadymondy/nasaq/vue";
import { ref } from "vue";

const NOW = Date.parse("2026-09-29T09:00:00");
const plugins: PluginCardItem[] = [
  {
    id: "postgres",
    name: "Postgres",
    version: "2.4.1",
    kind: "source",
    icon: "database",
    hue: "blue",
    enabled: true,
    description: "Streams rows from a Postgres database into the workspace.",
    lastActiveAt: NOW - 12 * 60_000,
    count: 128430,
    countLabel: "records",
    series: [4, 6, 5, 9, 12, 10, 14, 18],
  },
  {
    id: "summarizer",
    name: "Summarizer",
    version: "0.9.0",
    kind: "ai_provider",
    icon: "bot",
    hue: "purple",
    enabled: false,
    description: "Condenses long threads into a short brief.",
    lastActiveAt: NOW - 5 * 3_600_000,
  },
  { id: "legacy-export", name: "Legacy export", kind: "tool", enabled: true },
];
const selected = ref<string[]>(["postgres"]);
</script>

<template>
  <NqPluginCardGrid>
    <NqPluginCard
      v-for="p in plugins"
      :key="p.id"
      :plugin="p"
      selectable
      :selected="selected.includes(p.id)"
      :now="NOW"
      :detail-href="`/admin/plugins/${p.id}`"
      page-href="/plugins"
      @update:selected="(next: boolean) => (selected = togglePluginSelected(selected, p.id, next))"
    />
  </NqPluginCardGrid>
</template>
```

### Blade

```blade
@php($now = \Carbon\Carbon::now())
<x-nq::plugin-card.grid>
    <x-nq::plugin-card
        :plugin="['id' => 'postgres', 'name' => 'Postgres', 'version' => '2.4.1', 'kind' => 'source', 'icon' => 'database', 'hue' => 'blue', 'enabled' => true, 'description' => 'Streams rows from a Postgres database into the workspace.', 'lastActiveAt' => $now->copy()->subMinutes(12), 'count' => 128430, 'countLabel' => 'records', 'series' => [4, 6, 5, 9, 12, 10, 14, 18]]"
        selectable selected detail-href="/admin/plugins/postgres" page-href="/plugins" />
    <x-nq::plugin-card
        :plugin="['id' => 'summarizer', 'name' => 'Summarizer', 'version' => '0.9.0', 'kind' => 'ai_provider', 'icon' => 'bot', 'hue' => 'violet', 'enabled' => false, 'description' => 'Condenses long threads into a short brief.', 'lastActiveAt' => $now->copy()->subHours(5)]"
        selectable detail-href="/admin/plugins/summarizer" />
    <x-nq::plugin-card :plugin="['id' => 'legacy-export', 'name' => 'Legacy export', 'kind' => 'tool', 'enabled' => true]" selectable />
</x-nq::plugin-card.grid>
```

### HTML + Alpine

```html
<div data-slot="plugin-card-grid" class="grid grid-cols-[repeat(auto-fill,minmax(18rem,1fr))] gap-4"><article data-slot="plugin-card" aria-labelledby="nq-plugin-2824b001" data-activity="live"
     x-data="nqPluginCard(true)" x-modelable="selected" x-bind="root"      data-selected="true"     class="flex h-full flex-col rounded-card border transition-colors duration-150 ease-nq border-primary bg-nq-selected cursor-pointer select-none hover:border-nq-line-strong">
    <div class="flex flex-1 flex-col gap-3 p-4">
        <div class="flex items-start gap-3">
            <button type="button" role="checkbox" data-slot="checkbox" x-data="nqCheckbox(true, false)" x-modelable="checked" x-bind="root"
    aria-checked="true"
     data-checked                 x-model="selected" aria-label="Select Postgres" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1 mt-0.5">
    <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="checked || indeterminate" >
        <svg aria-hidden="true" x-show="indeterminate" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>        <svg aria-hidden="true" x-show="! indeterminate" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>    </span>
    </button>
            <span aria-hidden="true" data-slot="plugin-card-icon" class="flex size-11 shrink-0 items-center justify-center rounded-control bg-[var(--tile-soft)] text-[var(--tile-solid)]" style="--tile-solid: var(--nq-tag-blue); --tile-soft: var(--nq-tag-blue-soft)">
                <svg data-slot="icon" aria-hidden="true" class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <ellipse cx="12" cy="5" rx="9" ry="3"/>
  <path d="M3 5V19A9 3 0 0 0 21 19V5"/>
  <path d="M3 12A9 3 0 0 0 21 12"/>
</svg>                            </span>
            <div class="flex min-w-0 flex-1 flex-col gap-1.5">
                <div class="flex items-start justify-between gap-2">
                    <div class="flex min-w-0 items-baseline gap-2">
                        <h3 id="nq-plugin-2824b001" dir="auto" class="truncate text-label text-foreground" title="Postgres">Postgres</h3>
                        <bdi dir="ltr" class="shrink-0 font-mono text-caption text-muted-foreground">2.4.1</bdi>                    </div>
                    <span data-slot="plugin-card-activity"     class="inline-flex h-5 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-success/40 bg-nq-success-soft text-nq-success-text shrink-0"><span aria-hidden="true" class="size-1.5 rounded-full bg-nq-success"></span>
                        <span class="sr-only">Last active: </span>
                        <time data-slot="date-time" datetime="2026-09-29T08:48:00+00:00" dir="auto"  title="Sep 29, 2026"     class="tabular-nums [unicode-bidi:isolate]">12 minutes ago</time></span>
                </div>
                <div class="flex flex-wrap items-center gap-1.5">
                    <span data-slot="badge"     class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-border bg-secondary text-foreground">Source</span>
                    <span data-slot="badge"     class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-success/40 bg-nq-success-soft text-nq-success-text">Enabled</span>
                                                        </div>
            </div>
        </div>
        <p dir="auto" class="line-clamp-2 text-body-sm text-muted-foreground">Streams rows from a Postgres database into the workspace.</p>
    </div>
            <div data-slot="plugin-card-metric" class="flex items-end justify-between gap-3 border-t border-border bg-secondary/40 px-4 py-3">
            <div class="flex min-w-0 flex-col">
                <span class="truncate text-caption text-muted-foreground">records</span>                <bdi data-slot="num" data-numeric="" title="128,430" class="tabular-nums text-h3">128.4K</bdi>
            </div>
            <div data-slot="sparkline"  role="img" aria-label="Postgres activity"  class="shrink-0 h-10 w-28">
    <svg viewBox="0 0 128 32" preserveAspectRatio="none" class="size-full overflow-visible rtl:-scale-x-100" aria-hidden="true" focusable="false">
        <defs>
            <linearGradient id="nq-spark-18adf670" x1="0" y1="0" x2="0" y2="1">
                <stop offset="0%" stop-color="var(--nq-tag-blue)" stop-opacity="0.3" />
                <stop offset="100%" stop-color="var(--nq-tag-blue)" stop-opacity="0" />
            </linearGradient>
        </defs>
        <path d="M2,23.78C7.9,22.74,13.81,20.67,19.71,20.67C25.62,20.67,31.52,22.22,37.43,22.22C43.33,22.22,49.24,17.81,55.14,16C61.05,14.19,66.95,11.33,72.86,11.33C78.76,11.33,84.67,14.44,90.57,14.44C96.48,14.44,102.38,10.3,108.29,8.22C114.19,6.15,120.1,4.07,126,2L126.00,30.00L2.00,30.00Z" fill="url(#nq-spark-18adf670)" stroke="none" />        <path d="M2,23.78C7.9,22.74,13.81,20.67,19.71,20.67C25.62,20.67,31.52,22.22,37.43,22.22C43.33,22.22,49.24,17.81,55.14,16C61.05,14.19,66.95,11.33,72.86,11.33C78.76,11.33,84.67,14.44,90.57,14.44C96.48,14.44,102.38,10.3,108.29,8.22C114.19,6.15,120.1,4.07,126,2" fill="none" stroke="var(--nq-tag-blue)" stroke-width="1.5" vector-effect="non-scaling-stroke" stroke-linejoin="round" stroke-linecap="round" />
    </svg>
</div>
        </div>
        <footer class="flex items-center justify-between gap-2 border-t border-border px-3 py-2">
        <bdi dir="ltr" class="min-w-0 truncate font-mono text-caption text-muted-foreground" title="postgres">postgres</bdi>
        <div class="flex shrink-0 items-center gap-1">
                                        <a data-slot="button"
     href="/plugins"                         aria-label="Open Postgres page" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M15 3h6v6"/>
  <path d="M10 14 21 3"/>
  <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
</svg>Page</a>
                                        <a data-slot="button"
     href="/admin/plugins/postgres"                         aria-label="Open Postgres details" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M14 17H5"/>
  <path d="M19 7h-9"/>
  <circle cx="17" cy="17" r="3"/>
  <circle cx="7" cy="7" r="3"/>
</svg>Details</a>
                    </div>
    </footer>
</article>
    <article data-slot="plugin-card" aria-labelledby="nq-plugin-79a5f402" data-activity="recent"
     x-data="nqPluginCard(false)" x-modelable="selected" x-bind="root"         class="flex h-full flex-col rounded-card border bg-card transition-colors duration-150 ease-nq border-border cursor-pointer select-none hover:border-nq-line-strong">
    <div class="flex flex-1 flex-col gap-3 p-4">
        <div class="flex items-start gap-3">
            <button type="button" role="checkbox" data-slot="checkbox" x-data="nqCheckbox(false, false)" x-modelable="checked" x-bind="root"
    aria-checked="false"
     data-unchecked                 x-model="selected" aria-label="Select Summarizer" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1 mt-0.5">
    <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="checked || indeterminate"  style="display: none" >
        <svg aria-hidden="true" x-show="indeterminate" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>        <svg aria-hidden="true" x-show="! indeterminate" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>    </span>
    </button>
            <span aria-hidden="true" data-slot="plugin-card-icon" class="flex size-11 shrink-0 items-center justify-center rounded-control bg-[var(--tile-soft)] text-[var(--tile-solid)]" style="--tile-solid: var(--nq-tag-violet); --tile-soft: var(--nq-tag-violet-soft)">
                <svg data-slot="icon" aria-hidden="true" class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M12 8V4H8"/>
  <rect width="16" height="12" x="4" y="8" rx="2"/>
  <path d="M2 14h2"/>
  <path d="M20 14h2"/>
  <path d="M15 13v2"/>
  <path d="M9 13v2"/>
</svg>                            </span>
            <div class="flex min-w-0 flex-1 flex-col gap-1.5">
                <div class="flex items-start justify-between gap-2">
                    <div class="flex min-w-0 items-baseline gap-2">
                        <h3 id="nq-plugin-79a5f402" dir="auto" class="truncate text-label text-foreground" title="Summarizer">Summarizer</h3>
                        <bdi dir="ltr" class="shrink-0 font-mono text-caption text-muted-foreground">0.9.0</bdi>                    </div>
                    <span data-slot="plugin-card-activity"     class="inline-flex h-5 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-warning/40 bg-nq-warning-soft text-nq-warning-text shrink-0"><span aria-hidden="true" class="size-1.5 rounded-full bg-nq-warning"></span>
                        <span class="sr-only">Last active: </span>
                        <time data-slot="date-time" datetime="2026-09-29T04:00:00+00:00" dir="auto"  title="Sep 29, 2026"     class="tabular-nums [unicode-bidi:isolate]">5 hours ago</time></span>
                </div>
                <div class="flex flex-wrap items-center gap-1.5">
                    <span data-slot="badge"     class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-border bg-secondary text-foreground">AI provider</span>
                    <span data-slot="badge"     class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-border text-muted-foreground">Disabled</span>
                                    </div>
            </div>
        </div>
        <p dir="auto" class="line-clamp-2 text-body-sm text-muted-foreground">Condenses long threads into a short brief.</p>
    </div>
        <footer class="flex items-center justify-between gap-2 border-t border-border px-3 py-2">
        <bdi dir="ltr" class="min-w-0 truncate font-mono text-caption text-muted-foreground" title="summarizer">summarizer</bdi>
        <div class="flex shrink-0 items-center gap-1">
                                                    <a data-slot="button"
     href="/admin/plugins/summarizer"                         aria-label="Open Summarizer details" class="inline-flex shrink-0 select-none items-center justify-center gap-2 whitespace-nowrap rounded-control border border-transparent font-sans text-label transition-colors duration-150 ease-nq min-h-[var(--nq-touch-min,0px)] outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus disabled:pointer-events-none disabled:opacity-50 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 text-foreground hover:bg-nq-hover h-control-sm px-2.5">
        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M14 17H5"/>
  <path d="M19 7h-9"/>
  <circle cx="17" cy="17" r="3"/>
  <circle cx="7" cy="7" r="3"/>
</svg>Details</a>
                    </div>
    </footer>
</article>
    <article data-slot="plugin-card" aria-labelledby="nq-plugin-9722458b" data-activity="never"
     x-data="nqPluginCard(false)" x-modelable="selected" x-bind="root"         class="flex h-full flex-col rounded-card border bg-card transition-colors duration-150 ease-nq border-border cursor-pointer select-none hover:border-nq-line-strong">
    <div class="flex flex-1 flex-col gap-3 p-4">
        <div class="flex items-start gap-3">
            <button type="button" role="checkbox" data-slot="checkbox" x-data="nqCheckbox(false, false)" x-modelable="checked" x-bind="root"
    aria-checked="false"
     data-unchecked                 x-model="selected" aria-label="Select Legacy export" class="relative inline-flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-nq-line-strong bg-card text-primary-foreground outline-none transition-colors duration-150 ease-nq data-checked:border-primary data-checked:bg-primary data-indeterminate:border-primary data-indeterminate:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-nq-focus data-disabled:cursor-not-allowed data-disabled:opacity-50 after:absolute after:-inset-1 mt-0.5">
    <span data-slot="checkbox-indicator" class="flex items-center justify-center [&_svg]:size-3 [&_svg]:stroke-3" x-show="checked || indeterminate"  style="display: none" >
        <svg aria-hidden="true" x-show="indeterminate" style="display: none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M5 12h14"/>
</svg>        <svg aria-hidden="true" x-show="! indeterminate" style="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M20 6 9 17l-5-5"/>
</svg>    </span>
    </button>
            <span aria-hidden="true" data-slot="plugin-card-icon" class="flex size-11 shrink-0 items-center justify-center rounded-control bg-[var(--tile-soft)] text-[var(--tile-solid)]" style="--tile-solid: var(--nq-tag-gray); --tile-soft: var(--nq-tag-gray-soft)">
                <svg data-slot="icon" aria-hidden="true" class="size-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <path d="M15.39 4.39a1 1 0 0 0 1.68-.474 2.5 2.5 0 1 1 3.014 3.015 1 1 0 0 0-.474 1.68l1.683 1.682a2.414 2.414 0 0 1 0 3.414L19.61 15.39a1 1 0 0 1-1.68-.474 2.5 2.5 0 1 0-3.014 3.015 1 1 0 0 1 .474 1.68l-1.683 1.682a2.414 2.414 0 0 1-3.414 0L8.61 19.61a1 1 0 0 0-1.68.474 2.5 2.5 0 1 1-3.014-3.015 1 1 0 0 0 .474-1.68l-1.683-1.682a2.414 2.414 0 0 1 0-3.414L4.39 8.61a1 1 0 0 1 1.68.474 2.5 2.5 0 1 0 3.014-3.015 1 1 0 0 1-.474-1.68l1.683-1.682a2.414 2.414 0 0 1 3.414 0z"/>
</svg>            </span>
            <div class="flex min-w-0 flex-1 flex-col gap-1.5">
                <div class="flex items-start justify-between gap-2">
                    <div class="flex min-w-0 items-baseline gap-2">
                        <h3 id="nq-plugin-9722458b" dir="auto" class="truncate text-label text-foreground" title="Legacy export">Legacy export</h3>
                                            </div>
                    <span data-slot="plugin-card-activity"     class="inline-flex h-5 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-border text-muted-foreground shrink-0"><span aria-hidden="true" class="size-1.5 rounded-full bg-muted-foreground"></span>
                        <span class="sr-only">Last active: </span>
                        No activity</span>
                </div>
                <div class="flex flex-wrap items-center gap-1.5">
                    <span data-slot="badge"     class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-border bg-secondary text-foreground">Tool</span>
                    <span data-slot="badge"     class="inline-flex h-5 shrink-0 items-center gap-1 whitespace-nowrap rounded-[4px] border px-1.5 text-caption font-medium [&_svg]:size-3 border-nq-success/40 bg-nq-success-soft text-nq-success-text">Enabled</span>
                                                        </div>
            </div>
        </div>
        <p dir="auto" class="line-clamp-2 text-body-sm text-muted-foreground/70 italic">No description.</p>
    </div>
        <footer class="flex items-center justify-between gap-2 border-t border-border px-3 py-2">
        <bdi dir="ltr" class="min-w-0 truncate font-mono text-caption text-muted-foreground" title="legacy-export">legacy-export</bdi>
        <div class="flex shrink-0 items-center gap-1">
                                            </div>
    </footer>
</article></div>
```