AppKit IntelliSense

Smart autocomplete & informative hovers for AppKit v4 utility classes and icon names. Speeds up authoring with design‑token driven suggestions directly in HTML / JSX / TSX.

Highlights

• Color utility classes – ap-text-color-*, ap-border-color-*, ap-bg-color-* from background & text token sets.
• Semantic color families – primary, states (error / success / warning), neutral tiers in text / border / background variants.
• Structural helpers – spacing, typography, font weight, border radius, elevation level, opacity, background blur.
• Icon name completion – thousands of icon-* names with hover tooltips (short name, unicode, usage snippet).
• Rich hovers – show SCSS variable, CSS variable (where available) and resolved token value plus example CSS.
• Safe activation – only runs if your workspace depends on an @appkit4 package.

Activation & Requirements

The extension remains idle until a workspace folder contains a package.json that lists at least one dependency beginning with @appkit4. Once found, it activates automatically for:

• html
• javascriptreact (JSX)
• typescriptreact (TSX)

Usage

Inside a class or className attribute start typing ap- or icon- and let IntelliSense suggest completions. Use standard trigger keys if suggestions do not appear automatically:

• Windows/Linux: Ctrl+Space
• macOS: Cmd+Space

Examples:

<div class="ap-text-color-background-default ap-bg-primary-red-05"></div>
<span class="Appkit4-icon icon-alert-outline"></span>

Class Families Provided

From internal token data & curated class tables:

• Utility color tokens → ap-text-color-*, ap-border-color-*, ap-bg-color-*
• Primary colors → ap-text-primary-<family>-<01..09> etc.
• Status colors → ap-text-states-<state>-<01..09> etc.
• Neutral colors → ap-text-neutral-<01..23> etc.
• Spacing shorthands → ap-m-spacing-1, ap-px-spacing-3, ap-my-spacing-2, etc.
• Typography → ap-typography-body(-xs|-s), headings, data variants
• Font weight → ap-font-weight-1..3
• Border radius → ap-border-radius-1..3
• Elevation → ap-level-1..3
• Opacity → ap-opacity-1..7
• Background blur → ap-background-blur-1..2

Icon Support

Type icon- within a class/className attribute to see all available icon names. Hover an icon class for:

• Short name
• Unicode codepoint
• Example markup

<span class="Appkit4-icon icon-accessibility-outline"></span>

Hover Details

Color classes (ap-text-*, ap-border-*, ap-bg-*, plus utility ap-*-color-*) display:

• SCSS variable mapping (e.g. $primary-red-05)
• CSS variable (utility colors)
• Resolved token value
• Minimal usage snippet

Configuration

Troubleshooting

Privacy

This extension does not collect telemetry or send code content externally. All lookups are local JSON reads.

Accelerate your AppKit UI development with accurate, token‑aware class suggestions.