/**
 * Shared layout for design-system component doc pages — one skeleton for every slug.
 */

/** Centered article column — content and examples align start (left) */
export const DESIGN_SYSTEM_DOC_ARTICLE =
  "mx-auto flex w-full max-w-3xl flex-col gap-8 items-stretch";

/** Live example well — full width; top spacing comes from section gap */
export const DESIGN_SYSTEM_EXAMPLE_CANVAS = "w-full pb-4";

/** Default example width — form controls, buttons, compact widgets */
export const DESIGN_SYSTEM_EXAMPLE_INNER = "w-full max-w-md";

/** Hub / data tables — full article width (no max-w-md cap) */
export const DESIGN_SYSTEM_EXAMPLE_INNER_WIDE = "w-full min-w-0";

/** Live example canvas uses the wide inner column for these slugs. */
export const WIDE_PREVIEW_SLUGS = new Set([
  "marketing-banner",
  "table",
  "data-table",
  "hub-table",
  "table-cells",
  "wizard",
  "date-picker",
  "message",
  "leo-assist-bar",
  "coach-mark",
  "tokens-colors",
  "tokens-gradients",
  "tokens-aliases",
  "mode-switch-search",
  "dedicated-search",
  "ask-leo-composer",
  "floating-window",
  "fab",
  "page-header",
  "utility-bar",
  "primary-page-template",
]);

export function designSystemPreviewIsWide(slug: string): boolean {
  return WIDE_PREVIEW_SLUGS.has(slug) || slug.startsWith("tokens-");
}