# Dev tools and tool components

> Plainkit 0.28.0. Generated by scripts/build-skills.mjs from Components/*.razor and the C# sources. Do not edit: change the source and run the generator.

In the Development environment, `/_plainkit` serves the toolkit's own tools: the Gallery, Files and Scorecard workspaces, and the SDK's dev tools dock (`PkDevTools`: Console, Logs, Logging, Performance, Quality, Inspector, Theme, plus the Blazor and Components tabs of PlainKit.Blazor). Serve it elsewhere with `AddPlainKit(o => o.DevTools = true)`. The Files tab reads a folder on the server (`PkOptions.SourceRoot`), so it does not work in a browser-only app. `PkDevTools` is built on the same generic shell (`mountToolDock`) that `PkToolDock`/`PkToolDockPanel` wrap for an app's own tool-type panels (properties, history, an outline, a console, a chat) - see `PkToolDock` below. Each tool is also a component you can place on a page of your own:

## `PkGallery`

| Parameter | Type | Description |
|---|---|---|
| `Kind` | `PkGalleryKind` | Values: All, Foundations, Controls, Elements, Layouts, Templates. What to show: foundations, controls, elements, layouts or templates. Empty shows the controls when a group or control is named, otherwise everything. |
| `Group` | `string?` | One control group by name ("Forms & inputs") or slug (forms-inputs); with kind layouts or templates, that samples group. |
| `Control` | `string?` | One control, element or sample id, or a comma separated list ("button,input"); elements also match by tag (pk-tabs). |
| `Theme` | `PkTheme` | Values: Auto, Dark, Light. The theme of the gallery and its samples. auto keeps the gallery's own default (dark). |
| `Width` | `PkWidth` | Values: Desktop, Phone. Render the samples at desktop width or in a 375px phone frame. |
| `Filter` | `string?` | Search text: only controls whose name (or group) contains it are shown. |
| `Chrome` | `PkChrome` | Values: None, Full. none shows only the content, sized to fit it; full keeps the contents nav, the viewport and text size toolbar and the element inspector (Details: an element's API and live markup). |
| `Height` | `int?` | A fixed height in pixels. 0 fits the content when chrome is none and uses the default height when chrome is full. |
| `Src` | `string?` | Address of the gallery's embed.html when it is not next to the element module (the npm package leaves dist/gallery out), for example the Pages site or a CDN prefix; without it a frame that never answers shows a notice that says so. A relative address resolves against the document's base URI (the base URI), so it works on a routed page. |
| `Sections` | `IReadOnlyList<PkGallerySection>?` | Sections to add to the gallery's Details drawer (chrome full), as JSON text: a list of { tag?, title, open?, lines?, columns?, rows?, code? }, all text. The element sends them to its frame by message once the gallery is ready and whenever the text changes; tag limits one to an element (pk-button), none shows it for every element. Text only, cut to limits; see js/gallery-sections.js. Sent as JSON text ([{ tag, title, open, lines, columns, rows, code }]); the gallery frame draws it in the Details drawer as text. PkGallerySection.ForBlazor() is the Blazor section, computed from the package's mappings. |

## `PkCodeExplorer`

| Parameter | Type | Description |
|---|---|---|
| `SnapshotUrl` | `string?` | The URL of a snapshot JSON file. |
| `Snapshot` | `PkSnapshot?` | A snapshot built in memory (FromDirectory). Wins over SnapshotUrl. |
| `File` | `string?` | The file to open first. |
| `Line` | `int` | The line to focus in File. |
| `Search` | `string?` | A query to run: text or /regex/. |
| `Theme` | `PkTheme` | Values: Auto, Dark, Light. The theme of the explorer. |
| `Height` | `string?` | Any CSS length, or "fill". Defaults to 32rem. |
| `Patterns` | `IReadOnlyList<PkCodePattern>` | Host-defined patterns for the Reports tab's pattern report. Empty (the default) hides that tab. |

## `PkScorecard`

| Parameter | Type | Description |
|---|---|---|
| `Targets` | `IReadOnlyList<PkScoreTarget>` | What to score: same-origin pages, or markup rendered with the toolkit's stylesheets. |
| `Checks` | `IReadOnlyList<string>?` | Keep only findings whose check or category is listed (for example "accessibility", "touch-target"). Empty keeps all. |
| `HistoryKey` | `string?` | A localStorage key: keeps the runs and shows the change since the last one. |
| `AutoRun` | `bool` | Run as soon as it is mounted. |
| `Theme` | `PkTheme` | Values: Auto, Dark, Light. The theme of the scorecard itself. |
| `Height` | `string?` | Any CSS length, or "fill". |

## `PkPerformance`

| Parameter | Type | Description |
|---|---|---|
| `Interval` | `int` | Milliseconds between updates. |
| `History` | `int` | Samples kept for the sparklines. |
| `AutoStart` | `bool` | Start watching as soon as it is mounted. |
| `Theme` | `PkTheme` | Values: Auto, Dark, Light. The theme of the monitor itself. |
| `Height` | `string?` | Any CSS length, or "fill". |

## `PkConsole`

| Parameter | Type | Description |
|---|---|---|
| `Tab` | `string` | The tab shown first: console, events, network, elements or environment. |
| `Max` | `int` | Entries kept. |
| `Capture` | `IReadOnlyList<string>?` | The feeds to record: console, errors, events, network. Null records all. |
| `Theme` | `PkTheme` | Values: Auto, Dark, Light. The theme of the console itself. |
| `Height` | `string?` | Any CSS length, or "fill". |

## `PkLogs`

| Parameter | Type | Description |
|---|---|---|
| `Level` | `string` | The minimum level shown first: debug, info, warn or error. |
| `Scopes` | `IReadOnlyList<string>?` | Scopes selected first. Null shows every scope. |
| `Max` | `int` | Entries kept. |
| `Order` | `string` | "newest" (newest entry first) or "oldest". |
| `Theme` | `PkTheme` | Values: Auto, Dark, Light. The theme of the viewer itself. |
| `Height` | `string?` | Any CSS length, or "fill". |

## `PkLogSettings`

| Parameter | Type | Description |
|---|---|---|
| `Theme` | `PkTheme` | Values: Auto, Dark, Light. The theme of the panel itself. |
| `Height` | `string?` | Any CSS length, or "fill". |

## `PkQuality`

| Parameter | Type | Description |
|---|---|---|
| `Phone` | `bool?` | Force the phone checks on or off. Null checks them when the window is 640px wide or less. |
| `AutoRun` | `bool` | Run as soon as it is mounted. |
| `Theme` | `PkTheme` | Values: Auto, Dark, Light. The theme of the module itself. |
| `Height` | `string?` | Any CSS length, or "fill". |

## `PkThemeEditor`

| Parameter | Type | Description |
|---|---|---|
| `StorageKey` | `string?` | A localStorage key that keeps the edits between visits. Null keeps none. |
| `Preview` | `bool` | Show the Preview tab with sample controls. |
| `Theme` | `PkTheme` | Values: Auto, Dark, Light. The theme the editor starts on (the page's theme); Auto takes the page's current one. |
| `Height` | `string?` | Any CSS length: the token list scrolls inside it. |
| `InitialTheme` | `string?` | The theme to start from: the override block CSS the editor exports, or its JSON `{ "shared": {}, "dark": {}, "light": {} }`. Used when nothing was kept for the viewer under StorageKey; the edits are ordinary ones the user can change and undo. Text that holds no usable token is logged and ignored. |
| `Presets` | `IReadOnlyList<PkThemePreset>?` | Presets of your own, listed after the built-in ones (default, high contrast, compact and roomy) in the Presets tab. A bad entry is logged and left out. |
| `OnThemeChanged` | `EventCallback<string>` | Raised after every change (a moment after typing stops) with the override block CSS for the edits made so far: the text to save as the app's theme file and load after the SDK stylesheets (see the package README, "Shipping an exported theme"). |

## `PkDevTools`

| Parameter | Type | Description |
|---|---|---|
| `Mode` | `PkDevToolsMode` | Values: Dock, Inline. Dock (the default) floats over the page; Inline fills this component's element. |
| `Tab` | `string?` | The tab shown first (console, logs, logging, performance, quality, inspector, theme, blazor or blazor-components), and the one selected when this changes. |
| `Open` | `bool` | Dock only: start open, and open or close it when this changes. |
| `Hotkey` | `string?` | Dock only: the key that toggles the dock. Null is Ctrl+`; an empty string turns the hotkey off. |
| `Size` | `PkDevToolsSize` | Values: Medium, Small, Large. Dock only: the dock's height at first. |
| `Theme` | `PkTheme` | Values: Auto, Dark, Light. The theme of the tools themselves. |
| `BlazorPanels` | `bool` | Add the Blazor tab (circuit, JS interop, SDK log) and the Components tab (each element's component, parameters and Razor). |

## `PkStyles`

| Parameter | Type | Description |
|---|---|---|
| `Minified` | `bool` | The minified stylesheet (CssMin) instead of Css. Same rules. |
| `Versioned` | `bool` | Links a versioned URL, so a browser fetches the file again exactly when it changed: the host's fingerprinted static asset URL (`Assets[...]`, from `Microsoft.AspNetCore.Components.Web`) when the app calls `app.MapStaticAssets()` (the default since ASP.NET Core 9; served with a year-long, immutable `Cache-Control`), or a content-hash `?v=` query (Versioned, still revalidated every visit) otherwise. On by default. |
| `InHead` | `bool` | Render the link through `HeadContent` (into `HeadOutlet`) instead of in place. That puts it after the app's own stylesheets in the standard `App.razor`, so the toolkit's base layer overrides app rules of equal specificity: leave it off unless you know you want that. |
| `Preload` | `bool` | Also emit a `<link rel="modulepreload">` for each of PreloadPaths (the loader, its logger and the base every element shares): the browser fetches them in parallel with the entry module instead of one round trip at a time as each is discovered. Off by default; worth turning on for a page that uses `pk-*` elements. |

## `PkScripts`

No parameters.

## `PkReconnect`

| Parameter | Type | Description |
|---|---|---|
| `Reconnect` | `PkReconnectOptions?` | How it behaves; null uses Reconnect, else the defaults. |

## `PkDevToolsWorkspace`

Routable page: `/_plainkit`, `/_plainkit/{Tab}`.

| Parameter | Type | Description |
|---|---|---|
| `Tab` | `string?` | A workspace (gallery, files or scorecard), or the id of a dock tab to open (console, logs, logging, performance, quality, inspector, theme, blazor, blazor-components). |
| `Theme` | `PkTheme` | Values: Auto, Dark, Light. The theme of the tools themselves. |
| `OnWorkspace` | `EventCallback<string>` | The reader chose a workspace tab (gallery, files or scorecard). |

## `PkToolDock`

| Parameter | Type | Description |
|---|---|---|
| `Mode` | `PkToolDockMode` | Values: Dock, Inline. Dock (the default) floats over the page; Inline fills this component's element. |
| `Tab` | `string?` | The tab shown first (a PkToolDockPanel's Id), and the one selected when this changes. |
| `Open` | `bool` | Dock only: start open, and open or close it when this changes. |
| `Hotkey` | `string?` | Dock only: the key that toggles the dock. Null is Ctrl+`; an empty string turns the hotkey off. |
| `Size` | `PkToolDockSize` | Values: Medium, Small, Large. Dock only: the dock's height at first. |
| `Theme` | `PkTheme` | Values: Auto, Dark, Light. The theme of the tools themselves. |
| `Label` | `string` | The surface's accessible name (required). |
| `LauncherLabel` | `string` | The floating launcher button's text (dock mode; required). |
| `ChildContent` | `RenderFragment?` | The panels, as PkToolDockPanel children. |

## `PkToolDockPanel`

| Parameter | Type | Description |
|---|---|---|
| `Id` | `string` | The tab's id (unique among the dock's panels): the value pk-tabs uses, and what PkToolDock.Tab and SelectAsync select by. |
| `Title` | `string` | The tab's label. |
| `ChildContent` | `RenderFragment?` | The panel's content. |

## PkScoreTarget

| Member | Description |
|---|---|
| `public string? Name` | The name shown in the ranked table. |
| `public string? Url` | A same-origin URL. A page on another origin cannot be read and scores as one "unreadable" error. |
| `public string? Html` | Markup rendered inside a frame carrying the toolkit's stylesheets. |
| `public static PkScoreTarget Page(string url, string? name = null)` | A page of the same origin. |
| `public static PkScoreTarget Markup(string name, string html)` | A fragment of markup. |

## PkSnapshot

| Member | Description |
|---|---|
| `public static PkSnapshot FromDirectory(string folder, Func<string, bool>? exclude = null)` | The snapshot format version. When the snapshot was taken (ISO 8601). The files, ordered by path. Text files under folder up to 512 KB, without build output, dependencies or VCS folders. exclude gets each folder as a relative path with forward slashes and returns true to skip it. |