Code Snippet Deck

5.3 KB gzip for the class module

Variants

Recorded states

• active recorded state; no setter
• collapsed recorded state; no setter
• expanded recorded state; no setter
• copied recorded state; no setter
• empty recorded state; no setter
• reduced motion recorded state; no setter

Usage

Import

import '/components/code-snippet-deck/define.js';

// or register it yourself
import { DetentCodeSnippetDeck } from '/components/code-snippet-deck/code-snippet-deck.js';

Attributes

• default-language
• show-line-numbers
• show-window-bar

Properties

• parameters
• snippets

Slots

No slots are recorded for this component.

Events

No events are recorded for this component.

Example

Runnable example: site/examples/code-snippet-deck.ts. The snippet below is generated from the catalogued attributes.

<detent-code-snippet-deck
  default-language
  show-line-numbers
  show-window-bar
></detent-code-snippet-deck>

Property-only values

const element = document.querySelector('detent-code-snippet-deck');
if (element !== null) {
  // snippets: SnippetItem[]
  element.snippets = [];
  // parameters: SnippetParameter[]
  element.parameters = [];
}

Source

The pinned upstream source for this row:

• src/components/ui/CodeSnippetDeck.tsx sha256 5d61698b8e20…

Native files

The native module and its artifacts:

• src/components/code-snippet-deck/code-snippet-deck.ts
• src/components/code-snippet-deck/styles.css
• src/components/code-snippet-deck/define.ts
• docs/components/code-snippet-deck.md
• site/examples/code-snippet-deck.ts
• tests/browser/code-snippet-deck.spec.ts
• evidence/components/code-snippet-deck.md

API

Boolean attributes follow HTML presence semantics: present means true, absent means false, and disabled="false" still means disabled.

Attributes

Properties

Events

No custom events are recorded for this component.

Slots

No slots are recorded for this component.

CSS customisation

• `className` prop is replaced by documented CSS parts/custom properties; no Tailwind in consumers.
• Framer Motion springs/AnimatePresence ported to CSS transitions, WAAPI or the shared rAF spring helper.
• `lucide-react` icon components replaced with local SVG assets (ISC notice retained).
• React state/hooks replaced by element-owned state with pre-upgrade property preservation.
• Upstream's code field may be a (params) => string function; the native component keeps that form as a property-only hook (PC-3.1) and calls it with a plain snapshot of the tuned values. A throwing function renders an empty snippet with a development warning instead of breaking the element.
• The deck is not dark-only: the upstream hard-coded #0E0E0E/#FAFAFA palette is replaced by --detent-color-* tokens, so light and dark both work (PC-9.5). The macOS traffic dots keep the neutral tint rather than three colours so they stay legible in both schemes.
• Framer Motion's layoutId tab pill (springSnappy) becomes a CSS transition on tab background/colour/border; there is no shared spring helper, because the animated properties are colours, not values the helper can drive. Under reduced motion the transition duration is 0s (PC-10.5).
• showLineNumbers / showWindowBar default to true and are reflected as attributes with the property as the opt-out (PC-3.2), instead of React-only boolean props.
• Copy uses navigator.clipboard.writeText with a rejected promise swallowed; upstream calls copyToClipboard from src/lib/utils.ts. No dependency is added.
• The row records states: []; the state vocabulary was derived from the pinned source and is documented here: active (selected runtime), collapsed/expanded (parameter drawer), copied (copy acknowledgement), empty (no snippets) and reduced motion.
• className is replaced by the documented parts and custom properties; there is no Tailwind in consumers.