COMPONENT
IntentCodeViewer
Viewer de code/data intent-first. Skin type SyntaxHighlighter, tokens colorés via l’intent.
datasince 0.2.0
DESIGN SYSTEM
mode
Intent
Variant
Glow
Intensity
State
PLAYGROUND
Content
highlighted utilise un HTML “Prism-like” (tokens) pour tester les couleurs intent sans brancher Prism/Shiki.
Language
Header
Body
Footer
PREVIEW
IntentCodeViewer
import React from "react";
type User = { id: string; name: string };
export function Example() {
const [users, setUsers] = React.useState<User[]>([]);
const [loading, setLoading] = React.useState(false);
async function load() {
setLoading(true);
try {
const res = await fetch("/api/users");
setUsers(await res.json());
} finally {
setLoading(false);
}
}
return (
<div>
<button onClick={load} disabled={loading}>
{loading ? "Loading…" : "Load users"}
</button>
<pre>{JSON.stringify(users, null, 2)}</pre>
</div>
);
}
Astuce: passe en highlighted pour voir les tokens réagir à l’intent (keyword/string/number/comment).
RESOLVED
{
"mode": "dark",
"intent": "informed",
"variant": "elevated",
"intensity": "medium",
"toneEffective": "informed",
"glowKey": null,
"glowBackground": null,
"style": {
"--intent-bg": "rgb(var(--ids-informed))",
"--intent-ring": "rgb(var(--ids-informed))",
"--intent-text": "var(--ids-color-blue-200)",
"--intent-bg-opacity": "0.16",
"--intent-ring-opacity": "0.3045",
"--intent-border": "rgb(var(--ids-informed))",
"--intent-glow-bg": "",
"--intent-glow-fill-opacity": "0",
"--intent-glow-border-opacity": "0",
"--intent-glow-filter": "none"
},
"classes": {
"base": "intent-surface inline-flex items-center gap-2",
"surface": "intent-bg",
"border": "intent-ring",
"text": "intent-text",
"ring": "",
"shadow": "intent-shadow-soft",
"glow": "",
"disabled": ""
},
"warnings": []
}PROPS
| Prop | Type | Default |
|---|---|---|
| PROPS SYSTÈME | ||
intent Intent sémantique (informed/empowered/warned/threatened/themed/toned/glowed). | IntentName | DEFAULT_INTENT |
variant Variant visuel (flat/outlined/elevated/ghost). | VariantName | DEFAULT_VARIANT |
tone Override de tone (n’a d’effet que si intent='toned'). | ToneName | DEFAULT_TONE (si toned) |
glow Glow normal (true/false) ou glow esthétique (uniquement si intent='glowed'). | boolean | GlowName | false (ou DEFAULT_GLOW_BY_INTENT) |
intensity Intensité (soft/medium/strong). | Intensity | medium |
mode Mode colorimétrique (dark/light). | ModeName | dark |
disabled Désactive l’état visuel (hooks + styles). | boolean | false |
| PROPS LOCALES | ||
title Titre optionnel (header). | React.ReactNode | — |
meta Meta à droite du header. | React.ReactNode | — |
code Code brut (texte). | string | — |
html HTML déjà highlighté (Prism/Shiki/hljs). | string | — |
language Langage (classe language-*). | string | text |
wrap Retour à la ligne. | boolean | false |
maxHeight Hauteur max (scroll). | number | string | auto |
showLineNumbers Affiche les numéros de ligne. | boolean | false |
startLineNumber Index de départ des lignes. | number | 1 |
copyable Affiche l’action Copier. | boolean | true |
copyLabel Label du bouton copier. | string | Copy |
copiedLabel Label après copie. | string | Copied |
onCopy Callback après copie. | (value: string) => void | — |
footer Footer slot. | React.ReactNode | — |
TYPES & CONSTANTES
| API | Valeur / Référence |
|---|---|
| TYPES | |
IntentNametype Type union des intents sémantiques. | "informed" | "empowered" | "warned" | "threatened" | "themed" | "toned" | "glowed" |
VariantNametype Type union des variants visuels. | "flat" | "outlined" | "elevated" | "ghost" |
ToneNametype Type union des tones (familles Tailwind + theme + black). | ("slate" | "gray" | ... | "theme" | "black") |
GlowNametype Type union des aesthetic glows (utilisable quand intent='glowed'). | "aurora" | "ember" | "cosmic" | "mythic" | "royal" | "mono" |
Intensitytype Intensité des effets (glow/contraste). | "soft" | "medium" | "strong" |
ModeNametype Mode colorimétrique. | "dark" | "light" |
| CONSTANTES | |
DEFAULT_INTENTconst Intent par défaut si aucun intent n’est fourni. | informed |
DEFAULT_VARIANTconst Variant par défaut si aucun variant n’est fourni. | elevated |
DEFAULT_GLOW_BY_INTENTconst Mapping intent → glow par défaut (quand glow est implicite). | DEFAULT_GLOW_BY_INTENT |