/**
 * Recommended hit target sizes for controller-first UI.
 * Values are in pixels at 100% scale.
 * @type {{ minSize: number, minHeight: number, minWidth: number }}
 */
export const hitTarget = {
  minSize: 48,
  minHeight: 48,
  minWidth: 48
};

/**
 * Focus ring style tokens for UI libraries or CSS-in-JS.
 * @type {{ outlineWidth: number, outlineOffset: number, outlineColor: string }}
 */
export const focusRing = {
  outlineWidth: 3,
  outlineOffset: 3,
  outlineColor: "#8ddcff"
};

/**
 * Build a minimal set of focusable attributes for controller navigation.
 * Works with DOM, React, or any rendering layer that accepts plain props.
 * @param {{ role?: string, tabIndex?: number, focusKey?: string }} [options]
 * @returns {Record<string, string | number>}
 */
export function getFocusableAttributes(options = {}) {
  const role = options.role ?? "button";
  const tabIndex = options.tabIndex ?? 0;
  /** @type {Record<string, string | number>} */
  const attrs = {
    role,
    tabIndex,
    "data-nebula-focus": "true"
  };

  if (options.focusKey) {
    attrs["data-nebula-focus-key"] = options.focusKey;
  }

  return attrs;
}
