FineTuneCard

A compact inspector card in which an agent (or a person) adjusts a design element's layout, scrubbable number fields and type.

When to use

• Show an agent tweaking design properties (width, height, radius, opacity) and flag the card "Edited" once anything changes.
• Offer a small, direct-manipulation property panel next to a canvas or a preview.
• Not for general form input — use NumberField, ScrubInput or Slider. Not for a full settings page — compose Input, Select and SegmentedControl.

Usage

import FineTuneCard from "@/components/iris/fine-tune-card/fine-tune-card";

h(FineTuneCard, {
  labels: { title: "Listing card" },
  options: ["Room", "Studio", "Apartment"],
  fields: [
    { key: "width", label: "W", value: 324, min: 40, max: 999 },
    { key: "height", label: "H", value: 96, min: 24, max: 999 },
    { key: "radius", label: "Radius", value: 12, min: 0, max: 64 },
    { key: "opacity", label: "Opacity", value: 100, min: 0, max: 100, suffix: "%" },
  ],
  onChange: (state) => applyStyles(state),
});

Props

Prop	Type	Default	Description
fields	{ key: string; label: string; value: number; min: number; max: number; step?: number; suffix?: string }[]	W, H, Radius, Opacity	Scrubbable number fields, laid out two per row. value is the initial value. A field is highlighted while it differs from value.
options	string[]	["Room", "Studio", "Apartment"]	Choices in the Type dropdown.
labels	Partial<{ title, layout, type, placeholder, adjust, edited }>	Listing card, Layout, Type, Select type, Adjust, Edited	Card copy. adjust is the shimmering header label before any edit, and edited replaces it after one.
onChange	(state: { segment: number; values: Record<string, number>; type: string }) => void	—	Called with the full state after every edit.
variant	string	—	Accepted for gallery parity. It has no effect.

Notes

• Each field label is a role="slider" handle. Drag it horizontally, use Arrow keys (±step, or ×10 with Shift), or type in the input. Values are clamped to min/max and rounded.
• The layout segmented control (row, column, grid) has aria-pressed buttons with aria-labels. Its value is reported as segment (0–2).
• The Type menu opens upward from the footer and uses GlideMenu for its hover highlight.
• The card is 240px wide at most. Reads --surface, --field, --inset, --accent, --accent-tint, --accent-ink, --green, --line and the ink tokens.