kbd

Keyboard shortcut chord

Install

docsloth component add @docsloth/kbd@1.0.0

Live package: sha256:e8a75f9817fa29cbf8e308381c4563f74c74fbbb87c27ab99b98af053bcac83f with 2 file digest(s); the catalog entry is generated from the built package, not a placeholder.

Props

The prop schema is normative in packages/contracts/component-props/kbd.schema.json.

Example props generated from this schema:

{
  "keys": [
    "Ctrl",
    "K"
  ],
  "text": "example-text"
}

This schema requires no props beyond the component envelope.

Example

Example document IR (the block the renderer consumes):

{
  "type": "kbd",
  "props": {
    "keys": [
      "Ctrl",
      "K"
    ]
  }
}

Renderer HTML (entities decoded and wrapped for display):

<kbd class="ds-kbd" data-component="kbd">Ctrl+K</kbd>

Preview (interface-only; the markup above is the same output):

The renderer resolves this component as a native block; the preview above is its real HTML output, and Markdown parity for native blocks is covered by the renderer test suite.

Specification

Generated from packages/contracts/component-specs/kbd.md.

Contract

Packaged: this block ships as @docsloth/kbd@1.0.0 — an installable component package (kind block, capability render.html, Apache-2.0) whose production props schema is packages/contracts/component-props/kbd.schema.json and whose catalog entry is in packages/contracts/component-catalog.json. No protocol manifest fixture is published (manifest_fixture: null): the fixture models a packaged protocol runtime this block does not have.

Intended behavior

Keyboard shortcut: renders a semantic <kbd> element whose text is the chord. keys accepts a string ("Ctrl+K") or an array of keys joined with + (["Ctrl","K"]). Markdown renders the same chord in backticks (` Ctrl+K `), and JSON keeps the raw props.

Failure and fallback

Missing keys, an empty key array, or non-string entries in the array degrade to the labelled fallback block instead of rendering an empty or half-rendered key cap. No prop shape throws.

Required acceptance cases

Assert <kbd> semantics, + joining for key arrays, backtick Markdown, escaping of hostile key text, and HTML/Markdown visible-text parity. Also test a missing keys prop, an empty array, unknown extra props, mobile 360px, dark mode and an explicit constrained agent tool call. The server independently authorizes capability requests; a package manifest cannot grant authority.

Data and maintenance

Data bindings resolve from a specific publication/release vector and permitted fact/evidence graph. Configuration edits create versioned component patches. Update invalidation uses dependency IDs, never indiscriminate whole-page regeneration. Human-owned props survive automatic updates unless invalidated with an explicit conflict. Missing optional resources leave an honest inert/readable fallback, not a broken page or fake success.

Cost and tools

Pure/local interaction must never invoke a model by accident. Any model, remote query or executor call must reserve approved budget before dispatch. Public visitors do not inherit owner resources. The component may call only named tools in its signed manifest with valid typed inputs. A cancelled job stops polling and closes resources. No component gets platform administration, raw credentials or an unlimited execution loop.

Native renderer block

Block type: kbd. Renderer: packages/renderer/src/index.ts (native, no permission surface).

Native block props

Example

{ "type": "kbd", "props": { "keys": ["Ctrl", "K"] } }

HTML: <kbd class="ds-kbd">Ctrl+K</kbd>. Markdown: ` Ctrl+K `.

Package manifest

No protocol fixture is published for this renderer-native block.

Sources