@acmekit/docs-ui 2.13.41

package/src/components/TypeList/index.tsx

@@ -0,0 +1,63 @@
+import clsx from "clsx"
+import React, { Suspense, lazy } from "react"
+import { Loading } from "../../components/Loading"
+
+export type CommonProps = {
+  expandUrl?: string
+  sectionTitle?: string
+  openedLevel?: number
+}
+
+export type Type = {
+  name: string
+  type: string
+  optional?: boolean
+  defaultValue?: string
+  example?: string
+  description?: string
+  featureFlag?: string
+  expandable: boolean
+  children?: Type[]
+  deprecated?: {
+    is_deprecated: boolean
+    description?: string
+  }
+  since?: string
+}
+
+type ParameterTypesType = {
+  types: Type[]
+  sectionTitle?: string
+} & CommonProps &
+  React.HTMLAttributes<HTMLDivElement>
+
+const TypeListItems = lazy(async () => import("./Items"))
+
+export const TypeList = ({
+  types,
+  className,
+  sectionTitle,
+  expandUrl,
+  openedLevel,
+  ...props
+}: ParameterTypesType) => {
+  return (
+    <div
+      className={clsx(
+        "bg-acmekit-bg-subtle rounded my-docs_1",
+        "shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark",
+        className
+      )}
+      {...props}
+    >
+      <Suspense fallback={<Loading />}>
+        <TypeListItems
+          types={types}
+          expandUrl={expandUrl}
+          sectionTitle={sectionTitle}
+          openedLevel={openedLevel}
+        />
+      </Suspense>
+    </div>
+  )
+}

package/src/components/WideSection/index.tsx

@@ -0,0 +1,25 @@
+import React from "react"
+import clsx from "clsx"
+
+type WideSectionProps = React.AllHTMLAttributes<HTMLElement> & {
+  as?: "div" | "main"
+}
+
+export const WideSection = ({
+  children,
+  className,
+  as = "div",
+}: WideSectionProps) => {
+  const Component = as
+  return (
+    <Component
+      className={clsx(
+        "max-w-inner-content-xs sm:max-w-inner-content-sm md:max-w-inner-content-md",
+        "lg:max-w-lg-wide-content xl:max-w-xl-wide-content px-1 lg:px-0 mx-auto",
+        className
+      )}
+    >
+      {children}
+    </Component>
+  )
+}

package/src/components/ZoomImg/index.tsx

@@ -0,0 +1,17 @@
+
+import React from "react"
+import Zoom from "react-medium-image-zoom"
+import "react-medium-image-zoom/dist/styles.css"
+
+type ZoomImgProps = React.DetailedHTMLProps<
+  React.ImgHTMLAttributes<HTMLImageElement>,
+  HTMLImageElement
+>
+
+export const ZoomImg = (props: ZoomImgProps) => {
+  return (
+    <Zoom wrapElement="span">
+      <img {...props} />
+    </Zoom>
+  )
+}

package/src/components/index.ts

@@ -0,0 +1,75 @@
+export * from "./Badge"
+export * from "./BadgesList"
+export * from "./BetaBadge"
+export * from "./Bordered"
+export * from "./BorderedIcon"
+export * from "./Breadcrumbs"
+export * from "./Button"
+export * from "./Card"
+export * from "./CardList"
+export * from "./ChildDocs"
+export * from "./CodeBlock"
+export * from "./CodeMdx"
+export * from "./CodeTabs"
+export * from "./CodeTabs/Item"
+export * from "./ContentMenu"
+export * from "./CopyButton"
+export * from "./Details"
+export * from "./Details/Summary"
+export * from "./DetailsList"
+export * from "./DottedSeparator"
+export * from "./EditButton"
+export * from "./EditDate"
+export * from "./ErrorPage"
+export * from "./Notices/ExpandableNotice"
+export * from "./Notices/FeatureFlagNotice"
+export * from "./Notices/DeprecatedNotice"
+export * from "./Notices/VersionNotice"
+export * from "./Feedback"
+export * from "./Feedback/Solutions"
+export * from "./Footer"
+export * from "./Heading"
+export * from "./IconHeadline"
+export * from "./Icons"
+export * from "./InlineIcon"
+export * from "./InlineThemeImage"
+export * from "./InlineCode"
+export * from "./Input/Text"
+export * from "./Input/Search"
+export * from "./Kbd"
+export * from "./Label"
+export * from "./Link"
+export * from "./LinkButton"
+export * from "./Loading"
+export * from "./Loading/Dots"
+export * from "./Loading/Spinner"
+export * from "./MainNav"
+export * from "./MarkdownContent"
+export * from "./MDXComponents"
+export * from "./Menu"
+export * from "./Modal"
+export * from "./Modal/Header"
+export * from "./Modal/Footer"
+export * from "./Note"
+export * from "./Notification"
+export * from "./Notification/Item"
+export * from "./Notification/Item/Layout/Default"
+export * from "./Pagination"
+export * from "./Prerequisites"
+export * from "./RadioItem"
+export * from "./Rating"
+export * from "./RootProviders"
+export * from "./Select"
+export * from "./Sidebar"
+export * from "./Sidebar/Item"
+export * from "./SourceCodeLink"
+export * from "./SplitLists"
+export * from "./Table"
+export * from "./Tabs"
+export * from "./TextArea"
+export * from "./ThemeImage"
+export * from "./Toggle"
+export * from "./Tooltip"
+export * from "./TypeList"
+export * from "./WideSection"
+export * from "./ZoomImg"

package/src/constants.tsx

@@ -0,0 +1,261 @@
+import { NavigationItem, Product } from "./types"
+
+export const GITHUB_ISSUES_LINK =
+  "https://github.com/acmekit/acmekit/issues/new/choose"
+
+export const navDropdownItems: NavigationItem[] = [
+  {
+    type: "link",
+    link: `/learn`,
+    title: "Get Started",
+    project: "book",
+  },
+  {
+    type: "dropdown",
+    title: "Product",
+    children: [
+      {
+        type: "sub-menu",
+        title: "Framework",
+        link: "/learn/fundamentals/framework",
+        items: [
+          {
+            type: "link",
+            title: "API Routes",
+            link: "/learn/fundamentals/api-routes",
+          },
+          {
+            type: "link",
+            title: "Data Models",
+            link: "/learn/fundamentals/data-models",
+          },
+          {
+            type: "link",
+            title: "Events and Subscribers",
+            link: "/learn/fundamentals/events-and-subscribers",
+          },
+          {
+            type: "link",
+            title: "Index Module",
+            link: "/learn/fundamentals/module-links/index-module",
+          },
+          {
+            type: "link",
+            title: "AcmeKit Container",
+            link: "/learn/fundamentals/acmekit-container",
+          },
+          {
+            type: "link",
+            title: "Modules",
+            link: "/learn/fundamentals/modules",
+          },
+          {
+            type: "link",
+            title: "Module Links",
+            link: "/learn/fundamentals/module-links",
+          },
+          {
+            type: "link",
+            title: "Plugins",
+            link: "/learn/fundamentals/plugins",
+          },
+          {
+            type: "link",
+            title: "Query",
+            link: "/learn/fundamentals/module-links/query",
+          },
+          {
+            type: "link",
+            title: "Scheduled Jobs",
+            link: "/learn/fundamentals/scheduled-jobs",
+          },
+          {
+            type: "link",
+            title: "Workflows",
+            link: "/learn/fundamentals/workflows",
+          },
+        ],
+      },
+      {
+        type: "link",
+        title: "Admin Extensions",
+        link: "/learn/fundamentals/admin",
+      },
+      {
+        type: "sub-menu",
+        title: "Infrastructure Modules",
+        link: "/resources/infrastructure-modules",
+        items: [
+          {
+            type: "link",
+            title: "Analytics",
+            link: "/resources/infrastructure-modules/analytics",
+          },
+          {
+            type: "link",
+            title: "Caching",
+            link: "/resources/infrastructure-modules/caching",
+          },
+          {
+            type: "link",
+            title: "Event",
+            link: "/resources/infrastructure-modules/event",
+          },
+          {
+            type: "link",
+            title: "File",
+            link: "/resources/infrastructure-modules/file",
+          },
+          {
+            type: "link",
+            title: "Locking",
+            link: "/resources/infrastructure-modules/locking",
+          },
+          {
+            type: "link",
+            title: "Notification",
+            link: "/resources/infrastructure-modules/notification",
+          },
+          {
+            type: "link",
+            title: "Workflow Engine",
+            link: "/resources/infrastructure-modules/workflow-engine",
+          },
+        ],
+      },
+    ],
+  },
+  {
+    type: "dropdown",
+    title: "Build",
+    project: "resources",
+    children: [
+      {
+        type: "link",
+        title: "How-to & Tutorials",
+        link: "/resources/how-to-tutorials",
+      },
+      {
+        type: "link",
+        title: "Integrations",
+        link: "/resources/integrations",
+      },
+    ],
+  },
+  {
+    type: "dropdown",
+    title: "Tools",
+    link: "/resources/tools",
+    project: "resources",
+    children: [
+      {
+        type: "sub-menu",
+        title: "CLI Tools",
+        items: [
+          {
+            type: "link",
+            title: "create-acmekit-app",
+            link: "/resources/create-acmekit-app",
+          },
+          {
+            type: "link",
+            title: "AcmeKit CLI",
+            link: "/resources/acmekit-cli",
+          },
+        ],
+      },
+      {
+        type: "link",
+        title: "JS SDK",
+        link: "/resources/js-sdk",
+      },
+      {
+        type: "link",
+        title: "AcmeKit UI",
+        link: "/ui",
+      },
+    ],
+  },
+  {
+    type: "dropdown",
+    title: "Reference",
+    project: "resources",
+    link: "/resources/references-overview",
+    children: [
+      {
+        type: "link",
+        title: "Admin API",
+        link: "/api/admin",
+      },
+      {
+        type: "divider",
+      },
+      {
+        type: "link",
+        title: "Admin Injection Zones",
+        link: "/resources/admin-widget-injection-zones",
+      },
+      {
+        type: "link",
+        title: "Container Resources",
+        link: "/resources/acmekit-container-resources",
+      },
+      {
+        type: "link",
+        title: "Core Workflows",
+        link: "/resources/acmekit-workflows-reference",
+      },
+      {
+        type: "link",
+        title: "Data Model Language",
+        link: "/resources/references/data-model",
+      },
+      {
+        type: "link",
+        title: "Data Model Repository",
+        link: "/resources/data-model-repository-reference",
+      },
+      {
+        type: "link",
+        title: "Events Reference",
+        link: "/resources/references/events",
+      },
+      {
+        type: "link",
+        title: "Helper Steps",
+        link: "/resources/references/helper-steps",
+      },
+      {
+        type: "link",
+        title: "Service Factory",
+        link: "/resources/service-factory-reference",
+      },
+      {
+        type: "link",
+        title: "Testing Framework",
+        link: "/resources/test-tools-reference",
+      },
+      {
+        type: "link",
+        title: "Workflows SDK",
+        link: "/resources/references/workflows",
+      },
+    ],
+  },
+  {
+    type: "link",
+    title: "User Guide",
+    link: "/user-guide",
+  },
+]
+
+export const products: Product[] = []
+
+export enum DocsTrackingEvents {
+  SURVEY = "survey",
+  SURVEY_API = "survey_api-ref",
+  CODE_BLOCK_COPY = "code_block_copy",
+  AI_ASSISTANT_START_CHAT = "ai_assistant_start_chat",
+  AI_ASSISTANT_CALLOUT_CLICK = "ai_assistant_callout_click",
+  SEARCH_CALLOUT_CLICK = "search_callout_click",
+}

package/src/global-config.ts

@@ -0,0 +1,11 @@
+/* eslint-disable comma-dangle */
+/* eslint-disable prettier/prettier */
+import { DocsConfig } from "./types"
+
+export const globalConfig: Pick<DocsConfig, "version"> = {
+  "version": {
+    "number": "2.13.1",
+    "releaseUrl": "https://github.com/acmekit/acmekit/releases/tag/v2.13.1",
+    "releaseDate": "2026-01-25T16:20:07Z"
+  }
+}

package/src/hooks/index.ts

@@ -0,0 +1,14 @@
+export * from "./use-active-on-scroll"
+export * from "./use-resize-observer"
+export * from "./use-click-outside"
+export * from "./use-collapsible"
+export * from "./use-collapsible-code-lines"
+export * from "./use-copy"
+export * from "./use-heading-url"
+export * from "./use-is-external-link"
+export * from "./use-mutation-observer"
+export * from "./use-keyboard-shortcut"
+export * from "./use-page-scroll-manager"
+export * from "./use-scroll-utils"
+export * from "./use-select"
+export * from "./use-tabs"

package/src/hooks/use-active-on-scroll/index.tsx

@@ -0,0 +1,223 @@
+
+import { useCallback, useEffect, useMemo, useState } from "react"
+import { isElmWindow, useIsBrowser, useScrollController } from "../.."
+import { useLocation } from "react-router-dom"
+import { useMutationObserver } from "../use-mutation-observer"
+
+export type ActiveOnScrollItem = {
+  heading: HTMLHeadingElement
+  children?: ActiveOnScrollItem[]
+}
+
+export type UseActiveOnScrollProps = {
+  rootElm?: Document | HTMLElement
+  enable?: boolean
+  useDefaultIfNoActive?: boolean
+  maxLevel?: number
+}
+
+export const useActiveOnScroll = ({
+  rootElm,
+  enable = true,
+  useDefaultIfNoActive = true,
+  maxLevel = 3,
+}: UseActiveOnScrollProps) => {
+  const [items, setItems] = useState<ActiveOnScrollItem[]>([])
+  const [activeItemId, setActiveItemId] = useState("")
+  const { scrollableElement } = useScrollController()
+  const { isBrowser } = useIsBrowser()
+  const { pathname } = useLocation()
+  const root = useMemo(() => {
+    if (!enable) {
+      return
+    }
+    if (rootElm) {
+      return rootElm
+    }
+
+    if (!isBrowser) {
+      return
+    }
+
+    return document
+  }, [rootElm, isBrowser, enable])
+  const querySelector = useMemo(() => {
+    let selector = ""
+    for (let i = 2; i <= maxLevel; i++) {
+      if (i > 2) {
+        selector += `,`
+      }
+      selector += `h${i}`
+    }
+
+    return selector
+  }, [maxLevel])
+  const getHeadingsInElm = useCallback(() => {
+    if (!isBrowser || !enable) {
+      return []
+    }
+
+    const filteredHeadings: Element[] = []
+    root?.querySelectorAll(querySelector).forEach((heading) => {
+      if (heading.id) {
+        filteredHeadings.push(heading)
+      }
+    })
+
+    return filteredHeadings
+  }, [isBrowser, pathname, root, enable])
+  const setHeadingItems = useCallback(() => {
+    if (!enable) {
+      return
+    }
+    const headings = getHeadingsInElm()
+    const itemsToSet: ActiveOnScrollItem[] = []
+    let lastLevel2HeadingIndex = -1
+
+    headings?.forEach((heading) => {
+      const level = parseInt(heading.tagName.replace("H", ""))
+      const isLevel2 = level === 2
+      const headingItem: ActiveOnScrollItem = {
+        heading: heading as HTMLHeadingElement,
+        children: [],
+      }
+
+      if (isLevel2 || lastLevel2HeadingIndex === -1) {
+        itemsToSet.push(headingItem)
+        if (isLevel2) {
+          lastLevel2HeadingIndex = itemsToSet.length - 1
+        }
+      } else if (lastLevel2HeadingIndex !== -1) {
+        itemsToSet[lastLevel2HeadingIndex].children?.push(headingItem)
+      }
+    })
+
+    setItems(itemsToSet)
+  }, [getHeadingsInElm, enable])
+
+  useMutationObserver({
+    elm: root,
+    callback: setHeadingItems,
+  })
+
+  const setActiveToClosest = useCallback(() => {
+    if (!enable) {
+      return
+    }
+    const rootBoundingRectElm =
+      root && "getBoundingClientRect" in root
+        ? root.getBoundingClientRect()
+        : root?.body.getBoundingClientRect()
+
+    if (
+      rootBoundingRectElm === undefined ||
+      (rootBoundingRectElm.top < 0 && rootBoundingRectElm.bottom < 0)
+    ) {
+      setActiveItemId("")
+      return
+    }
+    const headings = getHeadingsInElm()
+    let selectedHeadingByHash: HTMLHeadingElement | undefined = undefined
+    const hash = location.hash.replace("#", "")
+    let closestPositiveHeading: HTMLHeadingElement | undefined = undefined
+    let closestNegativeHeading: HTMLHeadingElement | undefined = undefined
+    let closestPositiveDistance = Infinity
+    let closestNegativeDistance = -Infinity
+    const halfway = isElmWindow(scrollableElement)
+      ? scrollableElement.innerHeight / 2
+      : scrollableElement
+        ? scrollableElement.scrollHeight / 2
+        : 0
+
+    const scrollEl = scrollableElement as HTMLElement | undefined
+    if (scrollEl?.scrollTop === 0) {
+      // set the first heading as active if the scrollable element is at the top
+      setActiveItemId(
+        items.length && useDefaultIfNoActive ? items[0].heading.id : ""
+      )
+
+      return
+    } else if (
+      (scrollEl?.scrollTop ?? 0) + (scrollEl?.clientHeight ?? 0) >=
+      (scrollEl?.scrollHeight ?? 0)
+    ) {
+      // set the last heading as active if the scrollable element is at the bottom
+      let lastHeading = items[items.length - 1]
+      while (lastHeading?.children?.length) {
+        lastHeading = lastHeading.children[lastHeading.children.length - 1]
+      }
+      setActiveItemId(
+        lastHeading && useDefaultIfNoActive ? lastHeading.heading.id : ""
+      )
+
+      return
+    }
+
+    headings?.forEach((heading) => {
+      if (heading.id === hash) {
+        selectedHeadingByHash = heading as HTMLHeadingElement
+      }
+      const headingDistance = heading.getBoundingClientRect().top
+
+      if (headingDistance > 0 && headingDistance < closestPositiveDistance) {
+        closestPositiveDistance = headingDistance
+        closestPositiveHeading = heading as HTMLHeadingElement
+      } else if (
+        headingDistance < 0 &&
+        headingDistance > closestNegativeDistance
+      ) {
+        closestNegativeDistance = headingDistance
+        closestNegativeHeading = heading as HTMLHeadingElement
+      }
+    })
+
+    const negativeDistanceToHalfway = closestNegativeDistance
+      ? Math.abs(halfway + closestNegativeDistance)
+      : 0
+    const positiveDistanceToHalfway = closestPositiveDistance
+      ? Math.abs(halfway - closestPositiveDistance)
+      : 0
+
+    const chosenClosest =
+      !negativeDistanceToHalfway && !positiveDistanceToHalfway
+        ? undefined
+        : negativeDistanceToHalfway > positiveDistanceToHalfway
+          ? closestNegativeHeading
+          : closestPositiveHeading
+
+    setActiveItemId(
+      chosenClosest
+        ? (chosenClosest as HTMLHeadingElement).id
+        : selectedHeadingByHash
+          ? (selectedHeadingByHash as HTMLHeadingElement).id
+          : items.length
+            ? useDefaultIfNoActive
+              ? items[0].heading.id
+              : ""
+            : ""
+    )
+  }, [getHeadingsInElm, items, enable, root])
+
+  useEffect(() => {
+    if (!scrollableElement || !enable) {
+      return
+    }
+
+    scrollableElement.addEventListener("scroll", setActiveToClosest)
+
+    return () => {
+      scrollableElement.removeEventListener("scroll", setActiveToClosest)
+    }
+  }, [scrollableElement, setActiveToClosest, enable])
+
+  useEffect(() => {
+    if (items.length && enable) {
+      setActiveToClosest()
+    }
+  }, [items, setActiveToClosest, enable])
+
+  return {
+    items,
+    activeItemId,
+  }
+}