@burdenoff/microfe-bigconsole 2026.805.3 → 2026.812.2

package/dist/bigconsole/components/builder/inspector/GeneralSection.js

@@ -1,50 +1,64 @@
-import { memo as e } from "react";
-import { Input as t, Textarea as n } from "@burdenoff/fe-libs/ui";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { Section as e } from "../../common/Section.js";
+import "../../common/index.js";
+import { memo as t } from "react";
+import { Input as n, Textarea as r } from "@burdenoff/fe-libs/ui";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/bigconsole/components/builder/inspector/GeneralSection.tsx
-var a = e(function({ title: e, description: a, refreshInterval: o, onTitleChange: s, onDescriptionChange: c, onRefreshIntervalChange: l }) {
-	let u = "mb-1 block text-sm font-semibold text-text-primary";
-	return /* @__PURE__ */ i("div", {
-		className: "flex flex-col gap-4",
-		children: [
-			/* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r("label", {
-				htmlFor: "widget-inspector-title",
-				className: u,
-				children: "Title"
-			}), /* @__PURE__ */ r(t, {
-				id: "widget-inspector-title",
-				value: e,
-				onChange: (e) => s(e.target.value),
-				className: "h-9 text-sm"
-			})] }),
-			/* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r("label", {
-				htmlFor: "widget-inspector-description",
-				className: u,
-				children: "Description"
-			}), /* @__PURE__ */ r(n, {
-				id: "widget-inspector-description",
-				value: a,
-				onChange: (e) => c(e.target.value),
-				rows: 3,
-				className: "resize-none text-sm"
-			})] }),
-			/* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r("label", {
-				htmlFor: "widget-inspector-refresh",
-				className: u,
-				children: "Auto-Refresh (seconds)"
-			}), /* @__PURE__ */ r(t, {
-				id: "widget-inspector-refresh",
-				type: "number",
-				value: o ?? "",
-				onChange: (e) => l(e.target.value === "" ? void 0 : Number(e.target.value)),
-				min: 0,
-				placeholder: "No auto-refresh",
-				className: "h-9 text-sm"
-			})] })
-		]
+var o = t(function({ title: t, description: o, refreshInterval: s, onTitleChange: c, onDescriptionChange: l, onRefreshIntervalChange: u }) {
+	let d = "mb-1 block text-sm font-medium text-text-primary";
+	return /* @__PURE__ */ i(e, {
+		title: "Identity",
+		description: "How this widget names itself on the dashboard, and how often it reloads.",
+		"data-testid": "widget-inspector-general",
+		children: /* @__PURE__ */ a("div", {
+			className: "flex flex-col gap-form-gap",
+			children: [
+				/* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("label", {
+					htmlFor: "widget-inspector-title",
+					className: d,
+					children: "Title"
+				}), /* @__PURE__ */ i(n, {
+					id: "widget-inspector-title",
+					value: t,
+					onChange: (e) => c(e.target.value),
+					className: "h-control-md text-sm"
+				})] }),
+				/* @__PURE__ */ a("div", { children: [/* @__PURE__ */ i("label", {
+					htmlFor: "widget-inspector-description",
+					className: d,
+					children: "Description"
+				}), /* @__PURE__ */ i(r, {
+					id: "widget-inspector-description",
+					value: o,
+					onChange: (e) => l(e.target.value),
+					rows: 3,
+					className: "resize-none text-sm"
+				})] }),
+				/* @__PURE__ */ a("div", { children: [
+					/* @__PURE__ */ i("label", {
+						htmlFor: "widget-inspector-refresh",
+						className: d,
+						children: "Auto-refresh (seconds)"
+					}),
+					/* @__PURE__ */ i(n, {
+						id: "widget-inspector-refresh",
+						type: "number",
+						value: s ?? "",
+						onChange: (e) => u(e.target.value === "" ? void 0 : Number(e.target.value)),
+						min: 0,
+						placeholder: "No auto-refresh",
+						className: "h-control-md text-sm"
+					}),
+					/* @__PURE__ */ i("p", {
+						className: "mt-1 text-xs text-text-secondary",
+						children: "Leave empty to refresh only on demand."
+					})
+				] })
+			]
+		})
 	});
 });
 //#endregion
-export { a as GeneralSection };
+export { o as GeneralSection };
 
 //# sourceMappingURL=GeneralSection.js.map

package/dist/bigconsole/components/builder/inspector/GeneralSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"GeneralSection.js","names":[],"sources":["../../../../../src/bigconsole/components/builder/inspector/GeneralSection.tsx"],"sourcesContent":["import { type FC, memo } from 'react';\nimport { Input, Textarea } from '@burdenoff/fe-libs/ui';\n\nexport interface GeneralSectionProps {\n  title: string;\n  description: string;\n  refreshInterval?: number;\n  onTitleChange: (title: string) => void;\n  onDescriptionChange: (description: string) => void;\n  onRefreshIntervalChange: (refreshInterval: number | undefined) => void;\n}\n\n/** Widget identity and refresh settings shared by every widget type. */\nexport const GeneralSection: FC<GeneralSectionProps> = memo(function GeneralSection({\n  title,\n  description,\n  refreshInterval,\n  onTitleChange,\n  onDescriptionChange,\n  onRefreshIntervalChange,\n}) {\n  const labelClassName = 'mb-1 block text-sm font-semibold text-text-primary';\n\n  return (\n    <div className=\"flex flex-col gap-4\">\n      <div>\n        <label htmlFor=\"widget-inspector-title\" className={labelClassName}>\n          Title\n        </label>\n        <Input\n          id=\"widget-inspector-title\"\n          value={title}\n          onChange={(event) => onTitleChange(event.target.value)}\n          className=\"h-9 text-sm\"\n        />\n      </div>\n\n      <div>\n        <label htmlFor=\"widget-inspector-description\" className={labelClassName}>\n          Description\n        </label>\n        <Textarea\n          id=\"widget-inspector-description\"\n          value={description}\n          onChange={(event) => onDescriptionChange(event.target.value)}\n          rows={3}\n          className=\"resize-none text-sm\"\n        />\n      </div>\n\n      <div>\n        <label htmlFor=\"widget-inspector-refresh\" className={labelClassName}>\n          Auto-Refresh (seconds)\n        </label>\n        <Input\n          id=\"widget-inspector-refresh\"\n          type=\"number\"\n          value={refreshInterval ?? ''}\n          onChange={(event) =>\n            onRefreshIntervalChange(event.target.value === '' ? undefined : Number(event.target.value))\n          }\n          min={0}\n          placeholder=\"No auto-refresh\"\n          className=\"h-9 text-sm\"\n        />\n      </div>\n    </div>\n  );\n});\n"],"mappings":";;;;AAaA,IAAa,IAA0C,EAAK,SAAwB,EAClF,UACA,gBACA,oBACA,kBACA,wBACA,8BACC;CACD,IAAM,IAAiB;AAEvB,QACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;IAAO,SAAQ;IAAyB,WAAW;cAAgB;IAE3D,CAAA,EACR,kBAAC,GAAD;IACE,IAAG;IACH,OAAO;IACP,WAAW,MAAU,EAAc,EAAM,OAAO,MAAM;IACtD,WAAU;IACV,CAAA,CACE,EAAA,CAAA;GAEN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;IAAO,SAAQ;IAA+B,WAAW;cAAgB;IAEjE,CAAA,EACR,kBAAC,GAAD;IACE,IAAG;IACH,OAAO;IACP,WAAW,MAAU,EAAoB,EAAM,OAAO,MAAM;IAC5D,MAAM;IACN,WAAU;IACV,CAAA,CACE,EAAA,CAAA;GAEN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;IAAO,SAAQ;IAA2B,WAAW;cAAgB;IAE7D,CAAA,EACR,kBAAC,GAAD;IACE,IAAG;IACH,MAAK;IACL,OAAO,KAAmB;IAC1B,WAAW,MACT,EAAwB,EAAM,OAAO,UAAU,KAAK,KAAA,IAAY,OAAO,EAAM,OAAO,MAAM,CAAC;IAE7F,KAAK;IACL,aAAY;IACZ,WAAU;IACV,CAAA,CACE,EAAA,CAAA;GACF;;EAER"}
+{"version":3,"file":"GeneralSection.js","names":[],"sources":["../../../../../src/bigconsole/components/builder/inspector/GeneralSection.tsx"],"sourcesContent":["import { type FC, memo } from 'react';\nimport { Input, Textarea } from '@burdenoff/fe-libs/ui';\nimport { Section } from '../../common';\n\nexport interface GeneralSectionProps {\n  title: string;\n  description: string;\n  refreshInterval?: number;\n  onTitleChange: (title: string) => void;\n  onDescriptionChange: (description: string) => void;\n  onRefreshIntervalChange: (refreshInterval: number | undefined) => void;\n}\n\n/**\n * Widget identity and refresh settings shared by every widget type.\n *\n * Field labels are `font-medium`: the section heading owns `font-semibold`, so a\n * label can never be mistaken for the heading that groups it (BOFF-5636).\n */\nexport const GeneralSection: FC<GeneralSectionProps> = memo(function GeneralSection({\n  title,\n  description,\n  refreshInterval,\n  onTitleChange,\n  onDescriptionChange,\n  onRefreshIntervalChange,\n}) {\n  const labelClassName = 'mb-1 block text-sm font-medium text-text-primary';\n\n  return (\n    <Section\n      title=\"Identity\"\n      description=\"How this widget names itself on the dashboard, and how often it reloads.\"\n      data-testid=\"widget-inspector-general\"\n    >\n      <div className=\"flex flex-col gap-form-gap\">\n        <div>\n          <label htmlFor=\"widget-inspector-title\" className={labelClassName}>\n            Title\n          </label>\n          <Input\n            id=\"widget-inspector-title\"\n            value={title}\n            onChange={(event) => onTitleChange(event.target.value)}\n            className=\"h-control-md text-sm\"\n          />\n        </div>\n\n        <div>\n          <label htmlFor=\"widget-inspector-description\" className={labelClassName}>\n            Description\n          </label>\n          <Textarea\n            id=\"widget-inspector-description\"\n            value={description}\n            onChange={(event) => onDescriptionChange(event.target.value)}\n            rows={3}\n            className=\"resize-none text-sm\"\n          />\n        </div>\n\n        <div>\n          <label htmlFor=\"widget-inspector-refresh\" className={labelClassName}>\n            Auto-refresh (seconds)\n          </label>\n          <Input\n            id=\"widget-inspector-refresh\"\n            type=\"number\"\n            value={refreshInterval ?? ''}\n            onChange={(event) =>\n              onRefreshIntervalChange(event.target.value === '' ? undefined : Number(event.target.value))\n            }\n            min={0}\n            placeholder=\"No auto-refresh\"\n            className=\"h-control-md text-sm\"\n          />\n          <p className=\"mt-1 text-xs text-text-secondary\">Leave empty to refresh only on demand.</p>\n        </div>\n      </div>\n    </Section>\n  );\n});\n"],"mappings":";;;;;;AAmBA,IAAa,IAA0C,EAAK,SAAwB,EAClF,UACA,gBACA,oBACA,kBACA,wBACA,8BACC;CACD,IAAM,IAAiB;AAEvB,QACE,kBAAC,GAAD;EACE,OAAM;EACN,aAAY;EACZ,eAAY;YAEZ,kBAAC,OAAD;GAAK,WAAU;aAAf;IACE,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;KAAO,SAAQ;KAAyB,WAAW;eAAgB;KAE3D,CAAA,EACR,kBAAC,GAAD;KACE,IAAG;KACH,OAAO;KACP,WAAW,MAAU,EAAc,EAAM,OAAO,MAAM;KACtD,WAAU;KACV,CAAA,CACE,EAAA,CAAA;IAEN,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,SAAD;KAAO,SAAQ;KAA+B,WAAW;eAAgB;KAEjE,CAAA,EACR,kBAAC,GAAD;KACE,IAAG;KACH,OAAO;KACP,WAAW,MAAU,EAAoB,EAAM,OAAO,MAAM;KAC5D,MAAM;KACN,WAAU;KACV,CAAA,CACE,EAAA,CAAA;IAEN,kBAAC,OAAD,EAAA,UAAA;KACE,kBAAC,SAAD;MAAO,SAAQ;MAA2B,WAAW;gBAAgB;MAE7D,CAAA;KACR,kBAAC,GAAD;MACE,IAAG;MACH,MAAK;MACL,OAAO,KAAmB;MAC1B,WAAW,MACT,EAAwB,EAAM,OAAO,UAAU,KAAK,KAAA,IAAY,OAAO,EAAM,OAAO,MAAM,CAAC;MAE7F,KAAK;MACL,aAAY;MACZ,WAAU;MACV,CAAA;KACF,kBAAC,KAAD;MAAG,WAAU;gBAAmC;MAA0C,CAAA;KACtF,EAAA,CAAA;IACF;;EACE,CAAA;EAEZ"}

package/dist/bigconsole/components/common/Section.js

@@ -0,0 +1,70 @@
+import { SECTION_STACK as e, sectionSurfaceClasses as t, sectionTitleClasses as n } from "./sectionStyles.js";
+import { memo as r, useId as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/bigconsole/components/common/Section.tsx
+var s = r(function({ title: e, description: t, icon: r, actions: i, meta: s, headingLevel: c = 3, tone: l = "neutral", headingId: u, className: d }) {
+	let f = `h${c}`;
+	return /* @__PURE__ */ o("div", {
+		className: `flex flex-col gap-control-gap sm:flex-row sm:items-start sm:justify-between ${d ?? ""}`.trim(),
+		children: [/* @__PURE__ */ o("div", {
+			className: "flex min-w-0 items-start gap-icon-gap",
+			children: [r ? /* @__PURE__ */ a("span", {
+				"aria-hidden": "true",
+				className: "mt-0.5 flex shrink-0 items-center justify-center text-text-secondary",
+				children: r
+			}) : null, /* @__PURE__ */ o("div", {
+				className: "min-w-0",
+				children: [/* @__PURE__ */ o("div", {
+					className: "flex flex-wrap items-center gap-icon-gap",
+					children: [/* @__PURE__ */ a(f, {
+						id: u,
+						className: n(l),
+						children: e
+					}), s]
+				}), t ? /* @__PURE__ */ a("p", {
+					className: "mt-1 text-sm leading-relaxed text-text-secondary",
+					children: t
+				}) : null]
+			})]
+		}), i ? /* @__PURE__ */ a("div", {
+			className: "flex shrink-0 flex-wrap items-center gap-control-gap",
+			children: i
+		}) : null]
+	});
+}), c = r(function({ title: e, description: n, icon: r, actions: c, meta: l, headingLevel: u = 3, emphasis: d = "standard", tone: f = "neutral", padding: p = "default", className: m, bodyClassName: h, headerClassName: g, header: _, children: v, id: y, "aria-label": b, "data-testid": x }) {
+	let S = i(), C = e ? `${y ?? S}-title` : void 0, w = !!(e || _);
+	return /* @__PURE__ */ o("section", {
+		id: y,
+		"data-testid": x,
+		"data-section-emphasis": d,
+		"data-section-tone": f,
+		"aria-labelledby": C,
+		"aria-label": C ? void 0 : b,
+		className: `${t(d, f, p)} ${m ?? ""}`.trim(),
+		children: [w ? /* @__PURE__ */ a("div", {
+			className: g ?? (v ? "mb-form-gap" : void 0),
+			children: e ? /* @__PURE__ */ a(s, {
+				title: e,
+				description: n,
+				icon: r,
+				actions: c,
+				meta: l,
+				headingLevel: u,
+				tone: f,
+				headingId: C
+			}) : _
+		}) : null, v ? /* @__PURE__ */ a("div", {
+			className: `min-w-0 ${h ?? ""}`.trim(),
+			children: v
+		}) : null]
+	});
+}), l = r(function({ children: t, className: n }) {
+	return /* @__PURE__ */ a("div", {
+		className: `${e} ${n ?? ""}`.trim(),
+		children: t
+	});
+});
+//#endregion
+export { c as Section, s as SectionHeader, l as SectionStack };
+
+//# sourceMappingURL=Section.js.map

package/dist/bigconsole/components/common/Section.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Section.js","names":[],"sources":["../../../../src/bigconsole/components/common/Section.tsx"],"sourcesContent":["/**\n * Section / SectionHeader / SectionStack — BigConsole's section-emphasis\n * components (BOFF-5632).\n *\n * A `Section` is a labelled region of a screen. It renders a real `<section>`\n * tied to its heading with `aria-labelledby`, so screen-reader users get the\n * same \"where am I\" landmarks that the visual treatment gives sighted users.\n *\n * ```tsx\n * <SectionStack>\n *   <Section title=\"Configuration\" description=\"How this parser reads input.\" >\n *     …fields…\n *   </Section>\n *   <Section title=\"Output\" emphasis=\"primary\" actions={<Button>Run</Button>}>\n *     …result…\n *   </Section>\n *   <Section title=\"Last run failed\" emphasis=\"standard\" tone=\"danger\">\n *     …error detail…\n *   </Section>\n * </SectionStack>\n * ```\n *\n * The class vocabulary lives in `./sectionStyles.ts` — see the notes there on which\n * design tokens actually emit CSS in the BigConsole shell.\n */\n\nimport { memo, useId, type ReactNode } from 'react';\nimport {\n  SECTION_STACK,\n  sectionSurfaceClasses,\n  sectionTitleClasses,\n  type SectionEmphasis,\n  type SectionPadding,\n  type SectionTone,\n} from './sectionStyles';\n\nexport type { SectionEmphasis, SectionPadding, SectionTone } from './sectionStyles';\n\n/** Heading level the section title renders as. Keep the page outline ordered. */\nexport type SectionHeadingLevel = 2 | 3 | 4;\n\nexport interface SectionHeaderProps {\n  /** Short, scannable label. Sentence case — this is a UI label, not a title. */\n  title: ReactNode;\n  /** One line of context. Keep it under ~120 characters. */\n  description?: ReactNode;\n  /** Leading icon, already sized by the caller (`h-icon-sm w-icon-sm`). */\n  icon?: ReactNode;\n  /** Buttons/toggles for this section. They wrap under the title on mobile. */\n  actions?: ReactNode;\n  /** Status chip or count rendered right after the title. */\n  meta?: ReactNode;\n  headingLevel?: SectionHeadingLevel;\n  tone?: SectionTone;\n  /** id applied to the heading so the owning `<section>` can reference it. */\n  headingId?: string;\n  className?: string;\n}\n\n/**\n * The header row of a section: icon + title + meta on the left, actions on the\n * right. Stacks vertically below `sm` so a two-button action cluster never\n * squeezes the title into a one-word-per-line column on mobile.\n */\nexport const SectionHeader = memo(function SectionHeader({\n  title,\n  description,\n  icon,\n  actions,\n  meta,\n  headingLevel = 3,\n  tone = 'neutral',\n  headingId,\n  className,\n}: SectionHeaderProps) {\n  const Heading = `h${headingLevel}` as 'h2' | 'h3' | 'h4';\n\n  return (\n    <div\n      className={`flex flex-col gap-control-gap sm:flex-row sm:items-start sm:justify-between ${className ?? ''}`.trim()}\n    >\n      <div className=\"flex min-w-0 items-start gap-icon-gap\">\n        {icon ? (\n          <span aria-hidden=\"true\" className=\"mt-0.5 flex shrink-0 items-center justify-center text-text-secondary\">\n            {icon}\n          </span>\n        ) : null}\n        <div className=\"min-w-0\">\n          <div className=\"flex flex-wrap items-center gap-icon-gap\">\n            <Heading id={headingId} className={sectionTitleClasses(tone)}>\n              {title}\n            </Heading>\n            {meta}\n          </div>\n          {description ? <p className=\"mt-1 text-sm leading-relaxed text-text-secondary\">{description}</p> : null}\n        </div>\n      </div>\n      {actions ? <div className=\"flex shrink-0 flex-wrap items-center gap-control-gap\">{actions}</div> : null}\n    </div>\n  );\n});\n\nexport interface SectionProps extends Omit<SectionHeaderProps, 'headingId' | 'className' | 'title'> {\n  /**\n   * Visible section label. Optional: a `bare` strip or a section whose heading\n   * is supplied through `header` can go without one, but it must then carry an\n   * `aria-label` so the region is still announced.\n   */\n  title?: ReactNode;\n  /** Visual weight relative to sibling sections. @default 'standard' */\n  emphasis?: SectionEmphasis;\n  /** Inner padding step. Use `none` when the child owns its own scroll area. */\n  padding?: SectionPadding;\n  /** Extra classes for the `<section>` element itself. */\n  className?: string;\n  /** Extra classes for the body wrapper (below the header). */\n  bodyClassName?: string;\n  /** Classes for the header block (e.g. `mb-form-gap` overrides). */\n  headerClassName?: string;\n  /**\n   * Renders the header without a title element — for sections whose heading is\n   * supplied by a caller-provided node. Prefer passing `title` when possible.\n   */\n  header?: ReactNode;\n  children?: ReactNode;\n  id?: string;\n  /** Accessible name when the section has no visible title. */\n  'aria-label'?: string;\n  'data-testid'?: string;\n}\n\n/**\n * A labelled region with a consistent emphasis treatment.\n *\n * Layout rules that hold at every breakpoint:\n * - the section never forces horizontal page scroll (`min-w-0`);\n * - the header collapses to a column below `sm` (640px);\n * - padding and inter-section gaps follow the density tokens, so a compact\n *   workspace stays compact and a spacious one stays readable.\n */\nexport const Section = memo(function Section({\n  title,\n  description,\n  icon,\n  actions,\n  meta,\n  headingLevel = 3,\n  emphasis = 'standard',\n  tone = 'neutral',\n  padding = 'default',\n  className,\n  bodyClassName,\n  headerClassName,\n  header,\n  children,\n  id,\n  'aria-label': ariaLabel,\n  'data-testid': dataTestId,\n}: SectionProps) {\n  const generatedId = useId();\n  const headingId = title ? `${id ?? generatedId}-title` : undefined;\n  const hasHeader = Boolean(title || header);\n\n  // `title` and `aria-label` are independently optional, so nothing in the type\n  // system stops a caller from rendering a `<section>` landmark that screen\n  // readers announce as just \"section\". Fail loudly in development rather than\n  // shipping a silent a11y regression.\n  if (import.meta.env.DEV && !title && !ariaLabel) {\n    console.warn(\n      '[BigConsole] Section: pass `title` or `aria-label` — a section landmark without an accessible name is announced with no context.'\n    );\n  }\n\n  return (\n    <section\n      id={id}\n      data-testid={dataTestId}\n      data-section-emphasis={emphasis}\n      data-section-tone={tone}\n      aria-labelledby={headingId}\n      aria-label={headingId ? undefined : ariaLabel}\n      className={`${sectionSurfaceClasses(emphasis, tone, padding)} ${className ?? ''}`.trim()}\n    >\n      {hasHeader ? (\n        <div className={headerClassName ?? (children ? 'mb-form-gap' : undefined)}>\n          {title ? (\n            <SectionHeader\n              title={title}\n              description={description}\n              icon={icon}\n              actions={actions}\n              meta={meta}\n              headingLevel={headingLevel}\n              tone={tone}\n              headingId={headingId}\n            />\n          ) : (\n            header\n          )}\n        </div>\n      ) : null}\n      {children ? <div className={`min-w-0 ${bodyClassName ?? ''}`.trim()}>{children}</div> : null}\n    </section>\n  );\n});\n\nexport interface SectionStackProps {\n  children: ReactNode;\n  className?: string;\n}\n\n/**\n * Vertical rhythm container for sibling sections. Use it instead of ad-hoc\n * `space-y-6`, so section spacing tracks the workspace density setting.\n */\nexport const SectionStack = memo(function SectionStack({ children, className }: SectionStackProps) {\n  return <div className={`${SECTION_STACK} ${className ?? ''}`.trim()}>{children}</div>;\n});\n"],"mappings":";;;;AAgEA,IAAa,IAAgB,EAAK,SAAuB,EACvD,UACA,gBACA,SACA,YACA,SACA,kBAAe,GACf,UAAO,WACP,cACA,gBACqB;CACrB,IAAM,IAAU,IAAI;AAEpB,QACE,kBAAC,OAAD;EACE,WAAW,+EAA+E,KAAa,KAAK,MAAM;YADpH,CAGE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACG,IACC,kBAAC,QAAD;IAAM,eAAY;IAAO,WAAU;cAChC;IACI,CAAA,GACL,MACJ,kBAAC,OAAD;IAAK,WAAU;cAAf,CACE,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,GAAD;MAAS,IAAI;MAAW,WAAW,EAAoB,EAAK;gBACzD;MACO,CAAA,EACT,EACG;QACL,IAAc,kBAAC,KAAD;KAAG,WAAU;eAAoD;KAAgB,CAAA,GAAG,KAC/F;MACF;MACL,IAAU,kBAAC,OAAD;GAAK,WAAU;aAAwD;GAAc,CAAA,GAAG,KAC/F;;EAER,EAwCW,IAAU,EAAK,SAAiB,EAC3C,UACA,gBACA,SACA,YACA,SACA,kBAAe,GACf,cAAW,YACX,UAAO,WACP,aAAU,WACV,cACA,kBACA,oBACA,WACA,aACA,OACA,cAAc,GACd,eAAe,KACA;CACf,IAAM,IAAc,GAAO,EACrB,IAAY,IAAQ,GAAG,KAAM,EAAY,UAAU,KAAA,GACnD,IAAY,GAAQ,KAAS;AAYnC,QACE,kBAAC,WAAD;EACM;EACJ,eAAa;EACb,yBAAuB;EACvB,qBAAmB;EACnB,mBAAiB;EACjB,cAAY,IAAY,KAAA,IAAY;EACpC,WAAW,GAAG,EAAsB,GAAU,GAAM,EAAQ,CAAC,GAAG,KAAa,KAAK,MAAM;YAP1F,CASG,IACC,kBAAC,OAAD;GAAK,WAAW,MAAoB,IAAW,gBAAgB,KAAA;aAC5D,IACC,kBAAC,GAAD;IACS;IACM;IACP;IACG;IACH;IACQ;IACR;IACK;IACX,CAAA,GAEF;GAEE,CAAA,GACJ,MACH,IAAW,kBAAC,OAAD;GAAK,WAAW,WAAW,KAAiB,KAAK,MAAM;GAAG;GAAe,CAAA,GAAG,KAChF;;EAEZ,EAWW,IAAe,EAAK,SAAsB,EAAE,aAAU,gBAAgC;AACjG,QAAO,kBAAC,OAAD;EAAK,WAAW,GAAG,EAAc,GAAG,KAAa,KAAK,MAAM;EAAG;EAAe,CAAA;EACrF"}

package/dist/bigconsole/components/common/index.js

@@ -0,0 +1,2 @@
+import "./sectionStyles.js";
+import "./Section.js";

package/dist/bigconsole/components/common/sectionStyles.js

@@ -0,0 +1,42 @@
+//#region src/bigconsole/components/common/sectionStyles.ts
+var e = {
+	primary: "rounded-card border shadow-[var(--shadow-elevation-1)]",
+	standard: "rounded-card border",
+	muted: "rounded-card border",
+	bare: ""
+}, t = {
+	primary: "border-[var(--color-border-subtle)] bg-bg-surface",
+	standard: "border-[var(--color-border-subtle)] bg-bg-surface",
+	muted: "border-transparent bg-bg-sunken"
+}, n = {
+	info: "border-[var(--color-status-info-border)] bg-[var(--color-status-info-bgSubtle)]",
+	success: "border-[var(--color-status-success-border)] bg-[var(--color-status-success-bgSubtle)]",
+	warning: "border-[var(--color-status-warning-border)] bg-[var(--color-status-warning-bgSubtle)]",
+	danger: "border-[var(--color-status-error-border)] bg-[var(--color-status-error-bgSubtle)]"
+}, r = {
+	neutral: "text-text-primary",
+	info: "text-[var(--color-status-info-text)]",
+	success: "text-[var(--color-status-success-text)]",
+	warning: "text-[var(--color-status-warning-text)]",
+	danger: "text-[var(--color-status-error-text)]"
+}, i = {
+	none: "",
+	compact: "p-control-gap",
+	default: "p-card-padding"
+}, a = "motion-safe:transition-[box-shadow,border-color,background-color] motion-safe:duration-[var(--motion-duration-fast)] motion-safe:ease-[var(--motion-easing-out)]", o = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface", s = "flex flex-col gap-section-gap";
+function c(r = "standard", o = "neutral", s = "default") {
+	let c = ["min-w-0"];
+	if (r === "bare") s !== "default" && c.push(i[s]);
+	else {
+		let l = o === "neutral" ? t[r] : n[o];
+		c.push(e[r], l, i[s], a);
+	}
+	return c.filter(Boolean).join(" ");
+}
+function l(e = "neutral") {
+	return `text-sm font-semibold leading-tight tracking-tight ${r[e]}`;
+}
+//#endregion
+export { o as SECTION_FOCUS_RING, a as SECTION_MOTION, s as SECTION_STACK, c as sectionSurfaceClasses, l as sectionTitleClasses };
+
+//# sourceMappingURL=sectionStyles.js.map

package/dist/bigconsole/components/common/sectionStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sectionStyles.js","names":[],"sources":["../../../../src/bigconsole/components/common/sectionStyles.ts"],"sourcesContent":["/**\n * Section emphasis — shared visual-hierarchy vocabulary for BigConsole (BOFF-5632).\n *\n * BigConsole screens are dense: a builder can stack a toolbar, a palette, a\n * canvas, an inspector, a preview and a status strip on one route. Before this\n * module every one of those blocks was drawn with the same weight, so nothing\n * told the eye where a section started or which one mattered. This file is the\n * single source of truth for that answer; `Section.tsx` renders it and every\n * module imports from there.\n *\n * ## Why the class recipes look the way they do\n *\n * The host shells (`bigconsole-app`, `admin-app`) register a *narrower*\n * `@theme` than `fe-libs/shared/styles/app-shell.css`. A Tailwind utility only\n * exists if its token key is in that shell registry, which makes three\n * otherwise reasonable choices silently emit **no CSS** (the same failure mode\n * as BOFF-5660's `state-*` classes):\n *\n *   - `shadow-elevation-1` … `shadow-elevation-5` are not registered — the\n *     elevation scale has to be reached through `shadow-[var(--shadow-…)]`.\n *   - `--color-border-*` are registered as *hard-coded light hex*, so\n *     `border-border-subtle` keeps a light border in dark mode. The arbitrary\n *     form `border-[var(--color-border-subtle)]` re-resolves per theme.\n *   - `status-{warning,info}-text` are not registered even though the CSS\n *     variables exist per theme, so tones read their text colour through\n *     `text-[var(--color-status-…-text)]`.\n *\n * Everything below therefore uses registered utilities where they exist and\n * `var()` arbitrary values where they do not. Both forms are theme-aware, so a\n * section keeps its meaning in light, dark and high-contrast themes.\n */\n\n/**\n * How much visual weight a section carries relative to its siblings.\n *\n * - `primary` — the one block the route exists for (the canvas, the generated\n *   result, the test output). Raised surface + border + elevation shadow.\n * - `standard` — a normal grouped block: configuration, lists, forms.\n * - `muted` — supporting context that must stay readable but never compete:\n *   metadata, raw payloads, help, secondary summaries. Recessed surface.\n * - `bare` — structural grouping only (header strips, toolbars, filter rows).\n *   Contributes rhythm and a11y semantics, no surface of its own.\n */\nexport type SectionEmphasis = 'primary' | 'standard' | 'muted' | 'bare';\n\n/** Semantic colouring for state-carrying sections (banners, results, errors). */\nexport type SectionTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';\n\n/** Padding step. `none` is for sections that own their inner scroll/canvas. */\nexport type SectionPadding = 'none' | 'compact' | 'default';\n\n/**\n * Emphasis is split into STRUCTURE (geometry) and FILL (colour) so that a\n * section never carries two competing `bg-*` or `border-*` utilities.\n *\n * The obvious implementation — emit the emphasis surface, then append the tone\n * surface to override it — relies on the tone's utility winning the cascade.\n * Tailwind v4 orders utilities by their position in the generated stylesheet,\n * not by their order in the `class` attribute, so that override is an accident\n * of build output rather than a guarantee: it can invert silently on a Tailwind\n * upgrade and leave a danger banner painted like a neutral card. Composing\n * exactly one fill instead makes the outcome independent of stylesheet order.\n */\nconst EMPHASIS_STRUCTURE: Record<SectionEmphasis, string> = {\n  primary: 'rounded-card border shadow-[var(--shadow-elevation-1)]',\n  standard: 'rounded-card border',\n  muted: 'rounded-card border',\n  bare: '',\n};\n\n/** Neutral fill per emphasis level — used when no tone is set. */\nconst EMPHASIS_FILL: Record<Exclude<SectionEmphasis, 'bare'>, string> = {\n  primary: 'border-[var(--color-border-subtle)] bg-bg-surface',\n  standard: 'border-[var(--color-border-subtle)] bg-bg-surface',\n  muted: 'border-transparent bg-bg-sunken',\n};\n\n/**\n * Tone fills replace the emphasis fill (they are alternatives, never additions)\n * so a status section reads as status first while keeping its emphasis\n * geometry. `bare` has no surface at all, so a tone on `bare` colours nothing —\n * callers wanting a coloured banner use `muted`/`standard`.\n */\nconst TONE_SURFACE: Record<Exclude<SectionTone, 'neutral'>, string> = {\n  info: 'border-[var(--color-status-info-border)] bg-[var(--color-status-info-bgSubtle)]',\n  success: 'border-[var(--color-status-success-border)] bg-[var(--color-status-success-bgSubtle)]',\n  warning: 'border-[var(--color-status-warning-border)] bg-[var(--color-status-warning-bgSubtle)]',\n  danger: 'border-[var(--color-status-error-border)] bg-[var(--color-status-error-bgSubtle)]',\n};\n\n/** Title colour per tone — the neutral case inherits the normal heading colour. */\nconst TONE_TITLE: Record<SectionTone, string> = {\n  neutral: 'text-text-primary',\n  info: 'text-[var(--color-status-info-text)]',\n  success: 'text-[var(--color-status-success-text)]',\n  warning: 'text-[var(--color-status-warning-text)]',\n  danger: 'text-[var(--color-status-error-text)]',\n};\n\nconst PADDING: Record<SectionPadding, string> = {\n  none: '',\n  // `--spacing-control-gap` and `--spacing-card-padding` both track\n  // `data-density`, so compact/comfortable/spacious users keep their rhythm.\n  compact: 'p-control-gap',\n  default: 'p-card-padding',\n};\n\n/**\n * Transitions are opt-in through `motion-safe:` so the OS \"reduce motion\"\n * setting removes them; the shell's `data-reduce-motion` attribute neutralises\n * whatever survives. Only colour/shadow animate — never layout.\n */\nexport const SECTION_MOTION =\n  'motion-safe:transition-[box-shadow,border-color,background-color] motion-safe:duration-[var(--motion-duration-fast)] motion-safe:ease-[var(--motion-easing-out)]';\n\n/** Focus ring used when a section itself is focusable (collapsible headers). */\nexport const SECTION_FOCUS_RING =\n  'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-bg-surface';\n\n/** Vertical rhythm between sibling sections. Density-reactive. */\nexport const SECTION_STACK = 'flex flex-col gap-section-gap';\n\n/**\n * Composes the container classes for a section.\n *\n * `min-w-0` is always applied: BigConsole sections routinely host tables, JSON\n * previews and node canvases, and without it a flex/grid child refuses to\n * shrink and pushes the page into horizontal scroll on tablet and mobile.\n */\nexport function sectionSurfaceClasses(\n  emphasis: SectionEmphasis = 'standard',\n  tone: SectionTone = 'neutral',\n  padding: SectionPadding = 'default'\n): string {\n  const parts = ['min-w-0'];\n\n  if (emphasis === 'bare') {\n    // A tone is a fill, and `bare` has no surface to fill — asking for\n    // `emphasis=\"bare\" tone=\"danger\"` silently produces an uncoloured section,\n    // which reads as a styling bug rather than a deliberate choice. Say so.\n    if (import.meta.env.DEV && tone !== 'neutral') {\n      console.warn(\n        `[BigConsole] Section: tone=\"${tone}\" is ignored on emphasis=\"bare\" — a tone needs a surface. Use \"muted\" or \"standard\" for a coloured banner.`\n      );\n    }\n    if (padding !== 'default') parts.push(PADDING[padding]);\n  } else {\n    const fill = tone === 'neutral' ? EMPHASIS_FILL[emphasis] : TONE_SURFACE[tone];\n    parts.push(EMPHASIS_STRUCTURE[emphasis], fill, PADDING[padding], SECTION_MOTION);\n  }\n\n  return parts.filter(Boolean).join(' ');\n}\n\n/** Title classes for a section header at the given tone. */\nexport function sectionTitleClasses(tone: SectionTone = 'neutral'): string {\n  return `text-sm font-semibold leading-tight tracking-tight ${TONE_TITLE[tone]}`;\n}\n"],"mappings":";AA+DA,IAAM,IAAsD;CAC1D,SAAS;CACT,UAAU;CACV,OAAO;CACP,MAAM;CACP,EAGK,IAAkE;CACtE,SAAS;CACT,UAAU;CACV,OAAO;CACR,EAQK,IAAgE;CACpE,MAAM;CACN,SAAS;CACT,SAAS;CACT,QAAQ;CACT,EAGK,IAA0C;CAC9C,SAAS;CACT,MAAM;CACN,SAAS;CACT,SAAS;CACT,QAAQ;CACT,EAEK,IAA0C;CAC9C,MAAM;CAGN,SAAS;CACT,SAAS;CACV,EAOY,IACX,oKAGW,IACX,4IAGW,IAAgB;AAS7B,SAAgB,EACd,IAA4B,YAC5B,IAAoB,WACpB,IAA0B,WAClB;CACR,IAAM,IAAQ,CAAC,UAAU;AAEzB,KAAI,MAAa,QASX,MAAY,aAAW,EAAM,KAAK,EAAQ,GAAS;MAClD;EACL,IAAM,IAAO,MAAS,YAAY,EAAc,KAAY,EAAa;AACzE,IAAM,KAAK,EAAmB,IAAW,GAAM,EAAQ,IAAU,EAAe;;AAGlF,QAAO,EAAM,OAAO,QAAQ,CAAC,KAAK,IAAI;;AAIxC,SAAgB,EAAoB,IAAoB,WAAmB;AACzE,QAAO,sDAAsD,EAAW"}