pattern-cta — the shell-prompt band

The shell-prompt CTA band: a lead block (eyebrow / heading / summary / optional outline escape) beside the install command on a CodeCard (copyable=false — the band owns exactly ONE copy affordance) with the copy PressButton in the card's footer: fill rung, copy → check flip, 1.4s copied surface. Press physics stay the button's own.

code-card command press-button copy CTA ONE copy affordance

pattern-cta

The closing band: a lead block beside the command card. The code-card's own copy control is retired (copyable=false) so the band owns exactly ONE copy affordance — the press-button in the card's footer, flipping to the copied surface for 1.4s. Hover grows only the shadow; active presses the body one pixel into the page: the press law, the button's own.

$ npx jixoai-ui add …

ship it from your terminal

One command pulls the theme, the tokens and every atom you name into your repo — the source stays yours.

browse the atoms

install bash

npx jixoai-ui add pattern-cta press-button code-card

press the copy CTA — the command hits the clipboard, the check glyph takes the leading lane and the surface flips to copied (tonal + success hue). The body never moves under press or hover — the press law is press-button's contract, verified by its own suite; THIS seat's variant carries no shadow poses (hover boxShadow stays none, measured) — the shadow-grows half of the law lives in press-button's own seats, not here.

pattern-cta-usage.svelte svelte

<script lang="ts">
  import PatternCta from '@ui/pattern-cta.svelte';
</script>

<PatternCta
  command="npx jixoai-ui add press-button code-card"
  heading="ship it from your terminal"
  secondaryLabel="browse the atoms"
  secondaryHref="/docs/components.html"
/>

usage

Usage

One band, one payload: the command. Everything else has a quiet default.

pattern-cta usage

<script lang="ts">
  import PatternCta from '@ui/pattern-cta.svelte';
</script>

<PatternCta
  command="npx jixoai-ui add press-button code-card"
  heading="ship it from your terminal"
  secondaryLabel="browse the atoms"
  secondaryHref="/docs/components.html"
/>

axes

Universal props

The eight-axis surface (explicit-props): size · shape · radius · density · color · theme · elevation · motion — each axis takes named steps, auto (inherit the ambient context; stamps nothing), an exact number (px · coefficient · dp · hue per axis), or query() for responsive/container-conditional values. FIRST-TIME contract, all no-own: a composition product over batch A-D1 children — the size axis scales the band root, the children ride the ambient chain (吃也供).

PatternCta · universal props

$ npx jixoai-ui add …

scale the band

One number moves the whole ensemble — the code card and the buttons reflow in em.

install bash

npx jixoai-ui init

$ npx jixoai-ui add …

named steps

size=medium · radius=large resolve through the alias-ladder vars.

install bash

npx jixoai-ui init

pattern-cta-universal.svelte svelte

<PatternCta size={18} density="small">…</PatternCta>

api

API

PatternCta props.

Properties

Property	Type	Default	Description
command	string	'npx jixoai-ui init'	The shell command the band sells (copy payload + card code).
heading	string	'ship it from your terminal'	The band heading (an h2 stamped as component chrome).
summary	string	the install story	Max-52ch support line under the heading.
actionLabel	string	'copy command'	The copy control's label (aria affordance when not copied).
secondaryLabel	string	''	An outline escape beside the heading block; renders when set.
secondaryHref	string	'#'	The outline escape target.
class	string	''	Class passthrough to the band root.

Universal props

Property	Type	Default	Description
size	'small' \| 'medium' \| 'large' \| 'auto' \| number	'auto' · ambient scope	the base scale — root font-size; parts size in em
shape	'round' \| 'scoop' \| 'bevel' \| 'notch' \| 'square' \| 'squircle' \| 'auto'	'auto' · ambient scope	corner geometry (CSS corner-shape; §14 degrade table)
radius	'small' \| 'medium' \| 'large' \| 'auto' \| number	'auto' · ambient scope	corner size; auto = the concentric broadcast (§3)
density	'small' \| 'medium' \| 'large' \| 'auto' \| number	'auto' · ambient scope	spacing/leading scale over the kernel channels (§4)
color	'primary' \| 'secondary' \| 'error' \| 'warn' \| 'success' \| 'info' \| 'auto' \| number \| string	'auto' · ambient scope	the hue axis of the fixed oklch primary system (§5)
theme	'light' \| 'dark' \| 'system' \| 'auto'	'auto' · ambient scope	light/dark profile; system = the JS-mutable global (§6)
elevation	'level-1' \| 'level0' \| 'level1' \| 'level2' \| 'level3' \| 'level4' \| 'level5' \| 'auto' \| number	'auto' · ambient scope	official M3 levels over the surface ladder (§7)
motion	'reduced' \| 'subtle' \| 'normal' \| 'expressive' \| 'auto' \| number	'auto' · ambient scope	intensity across the motion kernels (§8)