@unterberg/nivel 0.0.3 → 0.0.5

package/README.md

@@ -1,70 +1,33 @@
 # nivel engine
 
-docs builder proof of concept for generating vike-based documentation sites with a single docs graph as the source of truth.
+`@unterberg/nivel` is the docs runtime for this repo's Vike-based documentation sites.
 
-monorepo structure:
-
-- `packages/engine`: the reusable `@unterberg/nivel` package
-- `packages/consumer-test`: the reference consumer used to exercise the engine against real docs content, currently based on the [Telefunc docs](https://telefunc.com)
-
-## Alpha Status
-
-This project is an early proof of concept and should be expected to have rough edges. The main goal is to validate the core engine ideas and architecture, not to provide a polished general-purpose doc builder right now. Some specific things to keep in mind:
-
-- Expect breaking changes.
-- The public API is not stable yet. (blackbox)
-- The supported stack fixed currently to Vike + Vite + React.
-- `basePath` is currently fixed to `/docs`.
-- The consumer app in this repo is still the main integration example.
-
-If you need a polished general-purpose docpress replacement today, this is not that yet.
-
-## What It Does
-
-The engine currently owns the core docs runtime:
+It currently owns:
 
 - docs graph validation and resolution
 - generated Vike routes from MDX content
-- shared docs layout pieces such as navbar, sidebar, table of contents, pagination, and meta head wiring
+- docs layout primitives such as navbar, sidebar, table of contents, pagination, and meta head wiring
 - MDX setup with built-in docs components and code-block transforms
-- asset handling for engine-owned fonts and shared static assets
+- optional Algolia search wiring
+- engine-owned fonts and shared assets
 
-The intended split is:
+The supported stack is currently Vike + Vite + React. Expect breaking changes while the package is still alpha.
 
-- the engine owns behavior, runtime wiring, and reusable UI primitives
-- the consumer owns docs content, `docs/docs.graph.ts`, `pages/+docs.ts`, and brand/theme assets
-
-## Minimal Shape
-
-At the moment, a consumer looks roughly like this:
+## Public Helpers
 
 ```ts
-// pages/+docs.ts
-import { defineDocsConfig } from '@unterberg/nivel'
-import { docsGraph } from '../docs/docs.graph'
-
-export default defineDocsConfig({
-  siteTitle: 'My Docs',
-  basePath: '/docs',
-  graph: docsGraph,
-  algolia: {
-    appId: 'YOUR_APP_ID',
-    apiKey: 'YOUR_SEARCH_ONLY_API_KEY',
-    indexName: 'YOUR_INDEX_NAME',
-  },
-})
+import { defineDocsConfig, defineDocsGraph } from '@unterberg/nivel/config'
 ```
 
-```ts
-// docs/docs.graph.ts
-import { defineDocsGraph } from '@unterberg/nivel'
+Both helpers are identity functions. They are also re-exported from `@unterberg/nivel`, but the dedicated config entry keeps `pages/+docs.ts` and `docs/docs.graph.ts` on a lean config-time import path.
 
-export const docsGraph = defineDocsGraph({
+```ts
+const docsGraph = defineDocsGraph({
   items: [
     {
       kind: 'section',
       id: 'docs',
-      title: 'Documentation',
+      title: 'Docs',
       items: [
         {
           kind: 'page',
@@ -77,31 +40,91 @@ export const docsGraph = defineDocsGraph({
     },
   ],
 })
+
+export default defineDocsConfig({
+  siteTitle: 'My Docs',
+  siteDescription: 'Documentation site powered by @unterberg/nivel.',
+  basePath: '/docs',
+  graph: docsGraph,
+})
 ```
 
-Then the consumer wires:
+## Recommended Consumer Files
 
-- `@unterberg/nivel/vike` into Vike config
-- `MetaHead` in global `+Head`
-- `AppLayout` in global `+Layout`
-- `nivel prepare` before dev/build/typecheck
-- `@import '@unterberg/nivel/tailwind-sources.css'` in the consumer Tailwind entry
+A consumer should keep these files explicit and local:
 
-Algolia search is optional. When configured, `apiKey` must be a search-only public key because requests are made from the browser.
+- hand-authored: `pages/+docs.ts`, `docs/docs.graph.ts`, docs content, brand assets, and consumer CSS/Tailwind/theme files
+- scaffolded once but still editable: `pages/+config.ts`, `pages/+Head.tsx`, `pages/+Layout.tsx`, `pages/+onCreateGlobalContext.ts`, `pages/+Wrapper.tsx`, and `global.d.ts`
 
-## Current Limitations
+Only `(nivel-generated)` stays engine-generated.
 
-- The package is still alpha and should be expected to change.
-- The supported stack is currently narrow: Vike + Vite + React.
-- `basePath` is currently fixed to `/docs`.
-- The package is still validated mainly through one real consumer, not a broad set of independent adopters.
-- The setup and examples are still catching up with the implementation, so the integration story is not fully polished yet.
+## Standard Vike Config
 
-## Future Plans
+Keep `pages/+config.ts` looking like normal Vike config and spread in the engine-owned config from `@unterberg/nivel/vike`:
+
+```ts
+// pages/+docs.ts
+import { defineDocsConfig } from '@unterberg/nivel/config'
+import { docsGraph } from '../docs/docs.graph'
+
+export default defineDocsConfig({
+  siteTitle: 'My Docs',
+  siteDescription: 'Documentation site powered by @unterberg/nivel.',
+  basePath: '/docs',
+  graph: docsGraph,
+})
+```
+
+```ts
+// pages/+config.ts
+import nivel from '@unterberg/nivel/vike'
+import type { Config } from 'vike/types'
+import vikeReact from 'vike-react/config'
+import docsConfig from './+docs'
+
+export { config }
+
+const themePreference = docsConfig.theme?.defaultPreference ?? 'light'
+const dataTheme =
+  themePreference === 'dark'
+    ? (docsConfig.theme?.dark ?? 'consumer-dark')
+    : (docsConfig.theme?.light ?? 'consumer-light')
+
+const config: Config = {
+  ...nivel,
+  extends: [vikeReact],
+  title: docsConfig.siteTitle,
+  description: docsConfig.siteDescription ?? `${docsConfig.siteTitle} documentation`,
+  htmlAttributes: { 'data-theme': dataTheme },
+  passToClient: ['docs'],
+
+  // User-facing Vike levers stay visible here.
+  prerender: true,
+  // ssr: true,
+  // prefetchStaticAssets: 'viewport',
+}
+```
+
+The engine still owns the MDX, Vite, route-generation, and runtime wiring. The consumer keeps the normal Vike entry file and can adjust visible levers such as `prerender`, `ssr`, and prefetch-related settings directly in `+config.ts`.
+
+## CLI
+
+`nivel prepare` generates docs pages from `pages/+docs.ts`.
+
+`nivel init` scaffolds the visible consumer shell files and updates the standard docs scripts in `package.json`.
+
+```bash
+nivel init
+nivel prepare
+```
+
+`nivel init` does not create or overwrite consumer CSS/Tailwind/theme files. Keep those hand-authored. Add the engine Tailwind helper manually in your stylesheet:
+
+```css
+@import '@unterberg/nivel/tailwind-sources.css';
+```
 
-- Continue hardening the engine/consumer split so docs behavior stays in `@unterberg/nivel` and the consumer remains thin.
-- Improve the package-level docs and examples so setup is easier to understand without reading the consumer app in detail.
-- Reduce hard-coded assumptions where it makes sense, starting with the areas that currently make the engine feel too tied to its first consumer.
+If you use Algolia, `apiKey` must be a search-only public key because requests are made from the browser.
 
 ## Commands
 

package/dist/{chunk-UDOIFPCZ.js → chunk-2EDJWL3U.js}

@@ -1,7 +1,3 @@
-import {
-  UniversalMdxProvider,
-  renderInlineMarkdown
-} from "./chunk-L6ZVB6XH.js";
 import {
   createHeadingSlugger,
   getActiveSectionByPathname,
@@ -10,6 +6,10 @@ import {
   isSamePagePathname,
   normalizeHeadingTitle
 } from "./chunk-D7IAGT53.js";
+import {
+  UniversalMdxProvider,
+  renderInlineMarkdown
+} from "./chunk-L6ZVB6XH.js";
 import {
   withSiteBaseUrl
 } from "./chunk-PYYPYIBD.js";
@@ -1535,4 +1535,4 @@ export {
   ProseContainer,
   DocsPage
 };
-//# sourceMappingURL=chunk-UDOIFPCZ.js.map
+//# sourceMappingURL=chunk-2EDJWL3U.js.map

package/dist/{chunk-FARXFRHG.js → chunk-4RLPVGMZ.js}

@@ -6,87 +6,22 @@ import {
   withSiteBaseUrl
 } from "./chunk-PYYPYIBD.js";
 
-// src/mdx/components/Alert.tsx
-import cm, { cmMerge } from "@classmatejs/react";
-import { Check, CircleX, Info, TriangleAlert } from "lucide-react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-var alertIconMap = {
-  info: Info,
-  warning: TriangleAlert,
-  error: CircleX,
-  success: Check
-};
-var Alert = ({
-  type = "info",
-  heading,
-  children,
-  icon = true
-}) => {
-  const AlertIcon = icon === true ? alertIconMap[type] : typeof icon === "object" ? () => /* @__PURE__ */ jsx(Fragment, { children: icon }) : null;
-  const alertIconTextColorClass = {
-    info: "text-info",
-    warning: "text-warning",
-    error: "text-error",
-    success: "text-success"
-  }[type];
-  return /* @__PURE__ */ jsxs(AlertOuter, { $variant: type, children: [
-    !!heading && AlertIcon && /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx(AlertIcon, { className: cmMerge(alertIconTextColorClass, "float-left h-5 w-5") }),
-      /* @__PURE__ */ jsx(AlertHeading, { children: heading })
-    ] }),
-    !(!!heading && AlertIcon) && !!heading && /* @__PURE__ */ jsx(AlertHeading, { children: heading }),
-    !(!!heading && AlertIcon) && AlertIcon && /* @__PURE__ */ jsx("div", { className: cmMerge(alertIconTextColorClass, "float-left mr-2"), children: /* @__PURE__ */ jsx(AlertIcon, { className: "mt-1 h-5 w-5" }) }),
-    children
-  ] });
-};
-var AlertOuter = cm.section.variants({
-  base: `
-    p-4
-    mt-5
-    mb-5
-    border
-    rounded-lg
-    prose-p:last:mb-0
-    prose-p:mt-0
-    prose-headings:first:mt-0
-    prose-headings:last:mb-0
-    prose-ul:first:mt-0
-    prose-ul:last:mb-0
-    text-sm
-  `,
-  variants: {
-    $variant: {
-      info: "bg-info/10 border-info/30",
-      warning: "bg-warning/10 border-warning/30",
-      error: "bg-error/10 border-error/25",
-      success: "bg-success/10 border-success/35"
-    }
-  },
-  defaultVariants: {
-    $variant: "info"
-  }
-});
-var AlertHeading = cm.header`
-  font-bold
-  text-base
-`;
-
 // src/mdx/code-blocks/ChoiceGroup.tsx
 import { Children, isValidElement, useRef as useRef2 } from "react";
 
 // src/mdx/code-blocks/CodeBlockHeaderMeta.tsx
-import cm2 from "@classmatejs/react";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import cm from "@classmatejs/react";
+import { jsx, jsxs } from "react/jsx-runtime";
 var CodeBlockHeaderMeta = ({ env, label }) => {
   const effectiveEnv = env === "server" || env === "client" ? env : void 0;
-  return /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 items-center gap-2", children: [
-    env && /* @__PURE__ */ jsx2(StyledDivider, { $env: env === "server" || env === "client" ? env : void 0 }),
-    env && /* @__PURE__ */ jsx2(StyledBgShade, { $env: env === "server" || env === "client" ? env : void 0 }),
-    /* @__PURE__ */ jsx2("div", { className: "font-mono text-xs font-semibold text-base-muted", children: label }),
-    env && /* @__PURE__ */ jsx2(StyledBadge, { $env: effectiveEnv, children: env })
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+    env && /* @__PURE__ */ jsx(StyledDivider, { $env: env === "server" || env === "client" ? env : void 0 }),
+    env && /* @__PURE__ */ jsx(StyledBgShade, { $env: env === "server" || env === "client" ? env : void 0 }),
+    /* @__PURE__ */ jsx("div", { className: "font-mono text-xs font-semibold text-base-muted", children: label }),
+    env && /* @__PURE__ */ jsx(StyledBadge, { $env: effectiveEnv, children: env })
   ] });
 };
-var StyledDivider = cm2.div.variants({
+var StyledDivider = cm.div.variants({
   base: "absolute h-1 -bottom-px left-0 w-full pointer-events-none",
   variants: {
     $env: {
@@ -96,7 +31,7 @@ var StyledDivider = cm2.div.variants({
   },
   defaultVariants: { $env: "server" }
 });
-var StyledBadge = cm2.div.variants({
+var StyledBadge = cm.div.variants({
   base: "shrink-0 badge badge-sm rounded-field badge-soft border pointer-events-none",
   variants: {
     $env: {
@@ -106,7 +41,7 @@ var StyledBadge = cm2.div.variants({
   },
   defaultVariants: { $env: "server" }
 });
-var StyledBgShade = cm2.div.variants({
+var StyledBgShade = cm.div.variants({
   base: "absolute inset-0 opacity-5 bg-linear-to-t via-40% via-transparent pointer-events-none",
   variants: {
     $env: {
@@ -118,10 +53,10 @@ var StyledBgShade = cm2.div.variants({
 });
 
 // src/mdx/code-blocks/CopyButton.tsx
-import { cmMerge as cmMerge2 } from "@classmatejs/react";
-import { Check as Check2, Copy } from "lucide-react";
+import { cmMerge } from "@classmatejs/react";
+import { Check, Copy } from "lucide-react";
 import { useState } from "react";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 var trimTrailingWhitespace = (text) => {
   return text.split("\n").map((line) => line.trimEnd()).join("\n");
 };
@@ -130,18 +65,18 @@ var CodeBlockCopyButton = ({
   className = ""
 }) => {
   const [copyState, setCopyState] = useState("idle");
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     "button",
     {
       type: "button",
-      className: cmMerge2("btn btn-ghost btn-xs h-8 min-h-8 px-2 text-base-muted hover:text-base-content", className),
+      className: cmMerge("btn btn-ghost btn-xs h-8 min-h-8 px-2 text-base-muted hover:text-base-content", className),
       onClick: async () => {
         const success = await onCopy();
         setCopyState(success ? "success" : "error");
         window.setTimeout(() => setCopyState("idle"), 900);
       },
       "aria-label": copyState === "idle" ? "Copy to clipboard" : copyState === "success" ? "Copied" : "Copy failed",
-      children: copyState === "success" ? /* @__PURE__ */ jsx3(Check2, { size: 14 }) : /* @__PURE__ */ jsx3(Copy, { size: 14 })
+      children: copyState === "success" ? /* @__PURE__ */ jsx2(Check, { size: 14 }) : /* @__PURE__ */ jsx2(Copy, { size: 14 })
     }
   );
 };
@@ -200,7 +135,7 @@ var useSelectedChoice = (choiceGroupName, defaultValue) => {
 };
 
 // src/mdx/code-blocks/ChoiceGroup.tsx
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 var isChoiceElement = (node) => {
   return isValidElement(node) && typeof node.props?.["data-choice-value"] === "string";
 };
@@ -237,28 +172,28 @@ var ChoiceGroup = ({
   const choiceElements = Children.toArray(children).filter(isChoiceElement);
   const activeChoiceElement = choiceElements.find((choiceElement) => choiceElement.props["data-choice-value"] === selectedChoice) ?? choiceElements[0];
   if (!activeChoiceElement) {
-    return /* @__PURE__ */ jsx4(Fragment2, { children });
+    return /* @__PURE__ */ jsx3(Fragment, { children });
   }
   const activeCodeBlockMeta = getActiveCodeBlockMeta(activeChoiceElement.props.children);
   const headerLabel = activeCodeBlockMeta.title ?? activeChoiceElement.props["data-choice-value"] ?? "";
   if (hide) {
-    return /* @__PURE__ */ jsx4(Fragment2, { children: activeChoiceElement.props.children });
+    return /* @__PURE__ */ jsx3(Fragment, { children: activeChoiceElement.props.children });
   }
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs2(
     "div",
     {
       "data-choice-group-outer": true,
       className: "mt-5 mb-5 flex h-full flex-col overflow-hidden rounded-box border border-base-muted-light",
       children: [
-        /* @__PURE__ */ jsxs3(
+        /* @__PURE__ */ jsxs2(
           "div",
           {
             className: "not-prose flex min-h-10 items-center relative justify-between gap-3 border-b border-base-muted-light bg-base-muted-superlight px-4",
             "data-choice-group-header": true,
             children: [
-              /* @__PURE__ */ jsx4(CodeBlockHeaderMeta, { label: headerLabel, env: activeCodeBlockMeta.env }),
-              /* @__PURE__ */ jsxs3("div", { className: "flex items-center gap-1", children: [
-                /* @__PURE__ */ jsx4("label", { className: "select select-xs min-w-28 w-fit", children: /* @__PURE__ */ jsx4(
+              /* @__PURE__ */ jsx3(CodeBlockHeaderMeta, { label: headerLabel, env: activeCodeBlockMeta.env }),
+              /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-1", children: [
+                /* @__PURE__ */ jsx3("label", { className: "select select-xs min-w-28 w-fit", children: /* @__PURE__ */ jsx3(
                   "select",
                   {
                     name: `choicesFor-${choiceGroup.name}`,
@@ -270,10 +205,10 @@ var ChoiceGroup = ({
                       };
                       setSelectedChoice(event.currentTarget.value);
                     },
-                    children: choiceGroup.choices.map((choice) => /* @__PURE__ */ jsx4("option", { value: choice, disabled: choiceGroup.disabled.includes(choice), children: choice }, choice))
+                    children: choiceGroup.choices.map((choice) => /* @__PURE__ */ jsx3("option", { value: choice, disabled: choiceGroup.disabled.includes(choice), children: choice }, choice))
                   }
                 ) }),
-                !activeCodeBlockMeta.hideCopy && /* @__PURE__ */ jsx4(
+                !activeCodeBlockMeta.hideCopy && /* @__PURE__ */ jsx3(
                   CodeBlockCopyButton,
                   {
                     onCopy: async () => {
@@ -291,36 +226,36 @@ var ChoiceGroup = ({
             ]
           }
         ),
-        /* @__PURE__ */ jsx4("div", { ref: bodyRef, className: "h-full flex-1 bg-base-200! [&>*:first-child]:mt-0 [&>*:last-child]:mb-0", children: /* @__PURE__ */ jsx4(CodeBlockGroupProvider, { value: true, children: activeChoiceElement.props.children }) })
+        /* @__PURE__ */ jsx3("div", { ref: bodyRef, className: "h-full flex-1 bg-base-200! [&>*:first-child]:mt-0 [&>*:last-child]:mb-0", children: /* @__PURE__ */ jsx3(CodeBlockGroupProvider, { value: true, children: activeChoiceElement.props.children }) })
       ]
     }
   );
 };
 
 // src/mdx/code-blocks/CodeBlockTransformer.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 var CodeBlockTransformer = ({ children, lineBreak }) => {
   const className = `with-line-break_${lineBreak}`;
-  return /* @__PURE__ */ jsx5("div", { className, children });
+  return /* @__PURE__ */ jsx4("div", { className, children });
 };
 
 // src/mdx/code-blocks/FileState.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var FileAdded = ({ children }) => {
-  return /* @__PURE__ */ jsx6("div", { className: "doc-code-file-state doc-code-file-added", children });
+  return /* @__PURE__ */ jsx5("div", { className: "doc-code-file-state doc-code-file-added", children });
 };
 var FileRemoved = ({ children }) => {
-  return /* @__PURE__ */ jsx6("div", { className: "doc-code-file-state doc-code-file-removed", children });
+  return /* @__PURE__ */ jsx5("div", { className: "doc-code-file-state doc-code-file-removed", children });
 };
 
 // src/mdx/code-blocks/Pre.tsx
-import { cmMerge as cmMerge3 } from "@classmatejs/react";
+import { cmMerge as cmMerge2 } from "@classmatejs/react";
 import {
   Children as Children2,
   isValidElement as isValidElement2,
   useRef as useRef3
 } from "react";
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 var asTrimmedString2 = (value) => {
   return typeof value === "string" && value.trim() ? value.trim() : null;
 };
@@ -353,7 +288,7 @@ var Pre = ({ children, className, ...props }) => {
   const env = asTrimmedString2(props["data-code-env"]);
   const fileState = props["file-added"] ? "added" : props["file-removed"] ? "removed" : null;
   const hideMenu = props["hide-menu"] === "true";
-  const copyButton = hideMenu || isInChoiceGroup ? null : /* @__PURE__ */ jsx7(
+  const copyButton = hideMenu || isInChoiceGroup ? null : /* @__PURE__ */ jsx6(
     CodeBlockCopyButton,
     {
       onCopy: async () => {
@@ -367,10 +302,10 @@ var Pre = ({ children, className, ...props }) => {
       }
     }
   );
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs3(
     "div",
     {
-      className: cmMerge3(
+      className: cmMerge2(
         "group relative h-full not-prose overflow-hidden",
         isInChoiceGroup ? "" : "mb-6 rounded-box border border-base-muted-light",
         className
@@ -378,23 +313,23 @@ var Pre = ({ children, className, ...props }) => {
       "data-code-block-frame": "",
       "data-file-state": fileState ?? void 0,
       children: [
-        !isInChoiceGroup && /* @__PURE__ */ jsxs4(
+        !isInChoiceGroup && /* @__PURE__ */ jsxs3(
           "div",
           {
             className: "flex min-h-10 relative items-center justify-between gap-3 border-b border-base-muted-light bg-base-muted-superlight! px-4",
             "data-code-block-header": "",
             children: [
-              /* @__PURE__ */ jsx7(CodeBlockHeaderMeta, { label, env }),
+              /* @__PURE__ */ jsx6(CodeBlockHeaderMeta, { label, env }),
               copyButton
             ]
           }
         ),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx6(
           "pre",
           {
             ...props,
             ref: preRef,
-            className: cmMerge3("doc-code-pre m-0 h-full overflow-x-auto bg-base-200! p-4 text-sm", className),
+            className: cmMerge2("doc-code-pre m-0 h-full overflow-x-auto bg-base-200! p-4 text-sm", className),
             "data-code-block-content": "",
             children
           }
@@ -404,6 +339,71 @@ var Pre = ({ children, className, ...props }) => {
   );
 };
 
+// src/mdx/components/Alert.tsx
+import cm2, { cmMerge as cmMerge3 } from "@classmatejs/react";
+import { Check as Check2, CircleX, Info, TriangleAlert } from "lucide-react";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+var alertIconMap = {
+  info: Info,
+  warning: TriangleAlert,
+  error: CircleX,
+  success: Check2
+};
+var Alert = ({
+  type = "info",
+  heading,
+  children,
+  icon = true
+}) => {
+  const AlertIcon = icon === true ? alertIconMap[type] : typeof icon === "object" ? () => /* @__PURE__ */ jsx7(Fragment2, { children: icon }) : null;
+  const alertIconTextColorClass = {
+    info: "text-info",
+    warning: "text-warning",
+    error: "text-error",
+    success: "text-success"
+  }[type];
+  return /* @__PURE__ */ jsxs4(AlertOuter, { $variant: type, children: [
+    !!heading && AlertIcon && /* @__PURE__ */ jsxs4("div", { className: "mb-3 flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx7(AlertIcon, { className: cmMerge3(alertIconTextColorClass, "float-left h-5 w-5") }),
+      /* @__PURE__ */ jsx7(AlertHeading, { children: heading })
+    ] }),
+    !(!!heading && AlertIcon) && !!heading && /* @__PURE__ */ jsx7(AlertHeading, { children: heading }),
+    !(!!heading && AlertIcon) && AlertIcon && /* @__PURE__ */ jsx7("div", { className: cmMerge3(alertIconTextColorClass, "float-left mr-2"), children: /* @__PURE__ */ jsx7(AlertIcon, { className: "mt-1 h-5 w-5" }) }),
+    children
+  ] });
+};
+var AlertOuter = cm2.section.variants({
+  base: `
+    p-4
+    mt-5
+    mb-5
+    border
+    rounded-lg
+    prose-p:last:mb-0
+    prose-p:mt-0
+    prose-headings:first:mt-0
+    prose-headings:last:mb-0
+    prose-ul:first:mt-0
+    prose-ul:last:mb-0
+    text-sm
+  `,
+  variants: {
+    $variant: {
+      info: "bg-info/10 border-info/30",
+      warning: "bg-warning/10 border-warning/30",
+      error: "bg-error/10 border-error/25",
+      success: "bg-success/10 border-success/35"
+    }
+  },
+  defaultVariants: {
+    $variant: "info"
+  }
+});
+var AlertHeading = cm2.header`
+  font-bold
+  text-base
+`;
+
 // src/mdx/components/Link.tsx
 import { cmMerge as cmMerge4 } from "@classmatejs/react";
 import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
@@ -637,15 +637,15 @@ var StyledTable = cm3.table.variants({
 });
 
 export {
-  Alert,
   ChoiceGroup,
   CodeBlockTransformer,
   FileAdded,
   FileRemoved,
   Pre,
+  Alert,
   Link,
   Overview,
   RepoLink,
   Table
 };
-//# sourceMappingURL=chunk-FARXFRHG.js.map
+//# sourceMappingURL=chunk-4RLPVGMZ.js.map