@redocly/theme 0.70.0-next.1 → 0.70.0-next.11

package/lib/ext/configure.js

@@ -15,7 +15,6 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.configure = configure;
-__exportStar(require("../ext/configure-helpers"), exports);
 __exportStar(require("../ext/helpers/is-direct-configure-request-values"), exports);
 function configure(_context) {
     // const exampleDefaultRequestValues: ConfigureRequestValues = {

package/lib/icons/ExpandCollapseIcon/ExpandCollapseIcon.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import type { IconProps } from '../../icons/types';
+declare const Icon: (props: IconProps) => React.JSX.Element;
+export declare const ExpandCollapseIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<{
+    color?: string;
+    size?: string;
+    className?: string;
+    'data-component-name'?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name" | "size" | keyof React.SVGProps<SVGSVGElement>> & {
+    color?: string;
+    size?: string;
+    className?: string;
+    'data-component-name'?: string;
+} & React.SVGProps<SVGSVGElement>, "$collapse"> & {
+    $collapse?: boolean;
+}, "data-component-name"> & Partial<Pick<import("styled-components").FastOmit<import("styled-components").FastOmit<{
+    color?: string;
+    size?: string;
+    className?: string;
+    'data-component-name'?: string;
+} & React.SVGProps<SVGSVGElement>, "data-component-name" | "size" | keyof React.SVGProps<SVGSVGElement>> & {
+    color?: string;
+    size?: string;
+    className?: string;
+    'data-component-name'?: string;
+} & React.SVGProps<SVGSVGElement>, "$collapse"> & {
+    $collapse?: boolean;
+}, "data-component-name">>> & string & Omit<typeof Icon, keyof React.Component<any, {}, any>>;
+export {};

package/lib/icons/ExpandCollapseIcon/ExpandCollapseIcon.js

@@ -0,0 +1,81 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExpandCollapseIcon = void 0;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const utils_1 = require("../../core/utils");
+const Icon = (props) => (react_1.default.createElement("svg", Object.assign({ viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props),
+    react_1.default.createElement("path", { className: "corner-top", d: "M12.2432 8.70703H11.2461L11.2422 4.75781L7.29297 4.75391V3.75781H12.2432V8.70703Z" }),
+    react_1.default.createElement("path", { className: "corner-bottom", d: "M4.75781 11.2422L8.70703 11.2461V12.2432H3.75781V7.29297H4.75391L4.75781 11.2422Z" })));
+exports.ExpandCollapseIcon = (0, styled_components_1.default)(Icon).attrs({
+    'data-component-name': 'icons/ExpandCollapseIcon/ExpandCollapseIcon',
+}) `
+  path {
+    fill: ${({ color }) => (0, utils_1.getCssColorVariable)(color)};
+    transform-box: view-box;
+    transition: transform 0.3s ease-in-out;
+
+    @media (prefers-reduced-motion: reduce) {
+      transition: none;
+    }
+  }
+
+  .corner-top {
+    transform-origin: 10.756px 5.244px;
+  }
+
+  .corner-bottom {
+    transform-origin: 5.244px 10.756px;
+  }
+
+  ${({ $collapse }) => $collapse &&
+    (0, styled_components_1.css) `
+      .corner-top {
+        transform: rotate(180deg);
+      }
+
+      .corner-bottom {
+        transform: rotate(-180deg);
+      }
+    `}
+
+  height: ${({ size }) => size || '16px'};
+  width: ${({ size }) => size || '16px'};
+`;
+//# sourceMappingURL=ExpandCollapseIcon.js.map

package/lib/icons/LinkIcon/LinkIconSymbol.d.ts

@@ -0,0 +1,12 @@
+import type { JSX } from 'react';
+import type { IconProps } from '../../icons/types';
+/**
+ * The link icon drawing as a hidden SVG symbol, which every `SharedLinkIcon` refers to. Render it
+ * once per page that shows a `SharedLinkIcon`; without it the icon is empty.
+ */
+export declare function LinkIconSymbol(): JSX.Element;
+/**
+ * `LinkIcon` drawn from the page's `LinkIconSymbol`, so a page with many of them carries one copy.
+ * `color` fills the glyph; `--link-icon-bg-color` overrides the background.
+ */
+export declare function SharedLinkIcon({ color, size, ...props }: IconProps): JSX.Element;

package/lib/icons/LinkIcon/LinkIconSymbol.js

@@ -0,0 +1,41 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkIconSymbol = LinkIconSymbol;
+exports.SharedLinkIcon = SharedLinkIcon;
+const react_1 = __importDefault(require("react"));
+const utils_1 = require("../../core/utils");
+const LINK_ICON_SYMBOL_ID = 'redocly-link-icon';
+/**
+ * The link icon drawing as a hidden SVG symbol, which every `SharedLinkIcon` refers to. Render it
+ * once per page that shows a `SharedLinkIcon`; without it the icon is empty.
+ */
+function LinkIconSymbol() {
+    return (react_1.default.createElement("svg", { "data-component-name": "icons/LinkIcon/LinkIconSymbol", display: "none", "aria-hidden": "true", focusable: "false" },
+        react_1.default.createElement("symbol", { id: LINK_ICON_SYMBOL_ID, viewBox: "0 0 20 20" },
+            react_1.default.createElement("path", { d: "M0 6C0 2.68629 2.68629 0 6 0H14C17.3137 0 20 2.68629 20 6V14C20 17.3137 17.3137 20 14 20H6C2.68629 20 0 17.3137 0 14V6Z", fill: "var(--link-icon-bg-color, var(--layer-color))" }),
+            react_1.default.createElement("path", { d: "M7.37318 9.56229H12.6232C12.7392 9.56229 12.8505 9.60838 12.9325 9.69043C13.0146 9.77247 13.0607 9.88375 13.0607 9.99979C13.0607 10.1158 13.0146 10.2271 12.9325 10.3091C12.8505 10.3912 12.7392 10.4373 12.6232 10.4373H7.37318C7.25714 10.4373 7.14586 10.3912 7.06382 10.3091C6.98177 10.2271 6.93568 10.1158 6.93568 9.99979C6.93568 9.88375 6.98177 9.77247 7.06382 9.69043C7.14586 9.60838 7.25714 9.56229 7.37318 9.56229ZM8.6853 12.1875H6.4978C5.91764 12.1875 5.36124 11.957 4.95101 11.5468C4.54077 11.1366 4.3103 10.5802 4.3103 10C4.3103 9.41984 4.54077 8.86344 4.95101 8.4532C5.36124 8.04297 5.91764 7.8125 6.4978 7.8125H8.6853C8.80133 7.8125 8.91262 7.76641 8.99466 7.68436C9.07671 7.60231 9.1228 7.49103 9.1228 7.375C9.1228 7.25897 9.07671 7.14769 8.99466 7.06564C8.91262 6.98359 8.80133 6.9375 8.6853 6.9375H6.4978C5.68558 6.9375 4.90662 7.26016 4.33229 7.83449C3.75796 8.40882 3.4353 9.18777 3.4353 10C3.4353 10.8122 3.75796 11.5912 4.33229 12.1655C4.90662 12.7398 5.68558 13.0625 6.4978 13.0625H8.6853C8.80133 13.0625 8.91262 13.0164 8.99466 12.9344C9.07671 12.8523 9.1228 12.741 9.1228 12.625C9.1228 12.509 9.07671 12.3977 8.99466 12.3156C8.91262 12.2336 8.80133 12.1875 8.6853 12.1875ZM13.4982 6.9375H11.3107C11.1946 6.9375 11.0834 6.98359 11.0013 7.06564C10.9193 7.14769 10.8732 7.25897 10.8732 7.375C10.8732 7.49103 10.9193 7.60231 11.0013 7.68436C11.0834 7.76641 11.1946 7.8125 11.3107 7.8125H13.4982C14.0783 7.8125 14.6347 8.04297 15.045 8.4532C15.4552 8.86344 15.6857 9.41984 15.6857 10C15.6857 10.5802 15.4552 11.1366 15.045 11.5468C14.6347 11.957 14.0783 12.1875 13.4982 12.1875H11.3107C11.1946 12.1875 11.0834 12.2336 11.0013 12.3156C10.9193 12.3977 10.8732 12.509 10.8732 12.625C10.8732 12.741 10.9193 12.8523 11.0013 12.9344C11.0834 13.0164 11.1946 13.0625 11.3107 13.0625H13.4982C14.3104 13.0625 15.0894 12.7398 15.6637 12.1655C16.238 11.5912 16.5607 10.8122 16.5607 10C16.5607 9.18777 16.238 8.40882 15.6637 7.83449C15.0894 7.26016 14.3104 6.9375 13.4982 6.9375Z" }))));
+}
+/**
+ * `LinkIcon` drawn from the page's `LinkIconSymbol`, so a page with many of them carries one copy.
+ * `color` fills the glyph; `--link-icon-bg-color` overrides the background.
+ */
+function SharedLinkIcon(_a) {
+    var { color, size = '20px' } = _a, props = __rest(_a, ["color", "size"]);
+    return (react_1.default.createElement("svg", Object.assign({ "data-component-name": "icons/LinkIcon/SharedLinkIcon", width: size, height: size, viewBox: "0 0 20 20", fill: (0, utils_1.getCssColorVariable)(color), xmlns: "http://www.w3.org/2000/svg" }, props),
+        react_1.default.createElement("use", { href: `#${LINK_ICON_SYMBOL_ID}` })));
+}
+//# sourceMappingURL=LinkIconSymbol.js.map

package/lib/index.d.ts

@@ -46,6 +46,11 @@ export * from './components/Navbar/Navbar';
 export * from './components/Navbar/NavbarItem';
 export * from './components/Navbar/NavbarLogo';
 export * from './components/Navbar/NavbarMenu';
+export * from './components/NavigationTabs/NavigationTabs';
+export { NavigationTab } from './components/NavigationTabs/NavigationTab';
+export type { NavigationTabProps } from './components/NavigationTabs/NavigationTab';
+export * from './components/NavigationTabs/NavigationTabMenu';
+export * from './components/NavigationTabs/NavigationTabContent';
 export * from './components/Footer/Footer';
 export * from './components/Footer/FooterColumn';
 export * from './components/Footer/FooterCopyright';
@@ -223,9 +228,11 @@ export * from './icons/MoonIcon/MoonIcon';
 export * from './icons/SunIcon/SunIcon';
 export * from './icons/ContrastIcon/ContrastIcon';
 export * from './icons/LinkIcon/LinkIcon';
+export * from './icons/LinkIcon/LinkIconSymbol';
 export * from './icons/LaunchIcon/LaunchIcon';
 export * from './icons/MinimizeIcon/MinimizeIcon';
 export * from './icons/MaximizeIcon/MaximizeIcon';
+export * from './icons/ExpandCollapseIcon/ExpandCollapseIcon';
 export * from './icons/MarkdownFullIcon/MarkdownFullIcon';
 export * from './icons/DocumentBlankIcon/DocumentBlankIcon';
 export * from './icons/WarningSquareIcon/WarningSquareIcon';

package/lib/index.js

@@ -36,7 +36,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.markdoc = void 0;
+exports.markdoc = exports.NavigationTab = void 0;
 __exportStar(require("./core"), exports);
 __exportStar(require("./ext/configure"), exports);
 /* Components */
@@ -90,6 +90,12 @@ __exportStar(require("./components/Navbar/Navbar"), exports);
 __exportStar(require("./components/Navbar/NavbarItem"), exports);
 __exportStar(require("./components/Navbar/NavbarLogo"), exports);
 __exportStar(require("./components/Navbar/NavbarMenu"), exports);
+/* NavigationTabs */
+__exportStar(require("./components/NavigationTabs/NavigationTabs"), exports);
+var NavigationTab_1 = require("./components/NavigationTabs/NavigationTab");
+Object.defineProperty(exports, "NavigationTab", { enumerable: true, get: function () { return NavigationTab_1.NavigationTab; } });
+__exportStar(require("./components/NavigationTabs/NavigationTabMenu"), exports);
+__exportStar(require("./components/NavigationTabs/NavigationTabContent"), exports);
 /* Footer */
 __exportStar(require("./components/Footer/Footer"), exports);
 __exportStar(require("./components/Footer/FooterColumn"), exports);
@@ -286,9 +292,11 @@ __exportStar(require("./icons/MoonIcon/MoonIcon"), exports);
 __exportStar(require("./icons/SunIcon/SunIcon"), exports);
 __exportStar(require("./icons/ContrastIcon/ContrastIcon"), exports);
 __exportStar(require("./icons/LinkIcon/LinkIcon"), exports);
+__exportStar(require("./icons/LinkIcon/LinkIconSymbol"), exports);
 __exportStar(require("./icons/LaunchIcon/LaunchIcon"), exports);
 __exportStar(require("./icons/MinimizeIcon/MinimizeIcon"), exports);
 __exportStar(require("./icons/MaximizeIcon/MaximizeIcon"), exports);
+__exportStar(require("./icons/ExpandCollapseIcon/ExpandCollapseIcon"), exports);
 __exportStar(require("./icons/MarkdownFullIcon/MarkdownFullIcon"), exports);
 __exportStar(require("./icons/DocumentBlankIcon/DocumentBlankIcon"), exports);
 __exportStar(require("./icons/WarningSquareIcon/WarningSquareIcon"), exports);

package/lib/layouts/PageLayout.js

@@ -16,7 +16,7 @@ function PageLayout({ sidebar, children, }) {
 const Container = styled_components_1.default.div `
   display: flex;
   flex-direction: row;
-  min-height: calc(100vh - var(--navbar-height) - var(--banner-height));
+  min-height: calc(100vh - var(--navbar-offset));
 
   @media screen and (min-width: ${utils_1.breakpoints.max}) {
     max-width: var(--container-max-width);

package/lib/layouts/RootLayout.js

@@ -11,8 +11,8 @@ const SkipContent_1 = require("../components/SkipContent/SkipContent");
 const AIAssistantButton_1 = require("../components/Buttons/AIAssistantButton");
 const hooks_1 = require("../core/hooks");
 function RootLayout({ children }) {
-    const { useSearch } = (0, hooks_1.useThemeHooks)();
-    const { askAi } = useSearch();
+    const { useSearchFeatures } = (0, hooks_1.useThemeHooks)();
+    const { askAi } = useSearchFeatures();
     return (react_1.default.createElement("div", { "data-component-name": "layouts/RootLayout" },
         react_1.default.createElement(SkipContent_1.SkipContent, null),
         react_1.default.createElement(Navbar_1.Navbar, null),

package/lib/markdoc/components/CodeWalkthrough/CodeFilters.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { CodeWalkthroughFilter } from '@redocly/config';
+import type { CodeWalkthroughFilter } from '../../../core/types';
 export type GetFilterState = (groupId: string) => {
     value: string;
     render: boolean;

package/lib/markdoc/components/CodeWalkthrough/CodeFilters.js

@@ -41,7 +41,7 @@ const FilterWrapper = styled_components_1.default.div `
   padding-right: var(--spacing-xl);
   padding-left: var(--spacing-xl);
   padding-bottom: var(--spacing-xs);
-  top: var(--navbar-height);
+  top: var(--navbar-stack-height);
   background-color: var(--bg-color);
   z-index: var(--z-index-raised);
   max-width: var(--md-content-max-width);

package/lib/markdoc/components/CodeWalkthrough/CodePanel.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { JSX } from 'react';
-import type { CodeWalkthroughFile } from '@redocly/config';
+import type { CodeWalkthroughFile } from '../../../core/types';
 export type CodePanelProps = {
     files: CodeWalkthroughFile[];
     downloadAssociatedFiles: CodeWalkthroughFile[];

package/lib/markdoc/components/CodeWalkthrough/CodePanel.js

@@ -68,9 +68,9 @@ const CodePanelWrapper = styled_components_1.default.div `
   border: 1px solid var(--code-panel-border-color);
   border-radius: var(--code-panel-border-radius);
   overflow: clip;
-  --code-block-max-height: calc(100vh - var(--navbar-height) - 2 * var(--spacing-xl));
-  height: calc(100vh - var(--navbar-height) - 2 * var(--spacing-xl));
+  --code-block-max-height: calc(100vh - var(--navbar-stack-height) - 2 * var(--spacing-xl));
+  height: calc(100vh - var(--navbar-stack-height) - 2 * var(--spacing-xl));
   position: sticky;
-  top: calc(var(--navbar-height) + var(--spacing-xl));
+  top: calc(var(--navbar-stack-height) + var(--spacing-xl));
 `;
 //# sourceMappingURL=CodePanel.js.map

package/lib/markdoc/components/CodeWalkthrough/CodePanelHeader.d.ts

@@ -1,5 +1,5 @@
 import type { JSX } from 'react';
-import type { CodeWalkthroughFile } from '@redocly/config';
+import type { CodeWalkthroughFile } from '../../../core/types';
 export type CodePanelHeaderProps = {
     files: CodeWalkthroughFile[];
     handleTabSwitch: (name: string) => void;

package/lib/markdoc/components/CodeWalkthrough/CodePanelToolbar.d.ts

@@ -1,5 +1,5 @@
 import type { JSX } from 'react';
-import type { CodeWalkthroughFile } from '@redocly/config';
+import type { CodeWalkthroughFile } from '../../../core/types';
 export type CodeToolbarProps = {
     file: CodeWalkthroughFile;
 };

package/lib/markdoc/components/CodeWalkthrough/CodeStep.d.ts

@@ -1,5 +1,5 @@
 import React, { type PropsWithChildren } from 'react';
-import type { WithConditions } from '@redocly/config';
+import type { WithConditions } from '../../../core/types';
 export type CodeStepProps = WithConditions<{
     id: string;
     heading?: string;

package/lib/markdoc/components/CodeWalkthrough/CodeWalkthrough.d.ts

@@ -1,4 +1,4 @@
 import React, { type PropsWithChildren } from 'react';
-import type { CodeWalkthroughAttr } from '@redocly/config';
+import type { CodeWalkthroughAttr } from '../../../core/types';
 export type CodeWalkthroughProps = PropsWithChildren<CodeWalkthroughAttr>;
 export declare function CodeWalkthrough({ children, steps, preview, ...attributes }: CodeWalkthroughProps): React.JSX.Element;

package/lib/markdoc/components/CodeWalkthrough/CodeWalkthrough.js

@@ -95,7 +95,7 @@ const DocsPanel = styled_components_1.default.div `
   flex-direction: column;
 
   min-height: 0;
-  min-height: calc(100vh - var(--navbar-height));
+  min-height: calc(100vh - var(--navbar-stack-height));
 
   padding-top: var(--spacing-xl);
   padding-right: var(--spacing-xs);

package/lib/markdoc/components/Prompt/Prompt.d.ts

@@ -0,0 +1,15 @@
+import type { JSX } from 'react';
+import type { AiPromptTarget } from '../../../core/types';
+export type PromptProps = {
+    /** Raw Markdown source of the prompt; rendered and copied as plain text. */
+    prompt: string;
+    title?: string;
+    icon?: string;
+    iconRawContent?: string;
+    actions?: AiPromptTarget[];
+    hidePrompt?: boolean;
+    singleLine?: boolean;
+    buttonOnly?: boolean;
+    className?: string;
+};
+export declare function Prompt(props: PromptProps): JSX.Element;

package/lib/markdoc/components/Prompt/Prompt.js

@@ -0,0 +1,163 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Prompt = Prompt;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const constants_1 = require("../../../core/constants");
+const hooks_1 = require("../../../core/hooks");
+const PromptActions_1 = require("../../../markdoc/components/Prompt/PromptActions");
+const PromptBody_1 = require("../../../markdoc/components/Prompt/PromptBody");
+const PromptShowHideButton_1 = require("../../../markdoc/components/Prompt/PromptShowHideButton");
+const PromptCopyButton_1 = require("../../../markdoc/components/Prompt/PromptCopyButton");
+const PromptHeader_1 = require("../../../markdoc/components/Prompt/PromptHeader");
+function Prompt(props) {
+    const { prompt, title, icon, iconRawContent, actions = [], hidePrompt = false, singleLine = false, buttonOnly = false, className, } = props;
+    const [isPromptVisible, setIsPromptVisible] = (0, react_1.useState)(!hidePrompt);
+    const { reportCopy, openIn } = (0, hooks_1.usePromptActions)(prompt);
+    const { textRef, textLimit, isExpanded, hasHiddenText, toggleExpanded } = (0, hooks_1.usePromptTextLimit)({
+        prompt,
+        singleLine,
+        isPromptVisible,
+    });
+    const borderHighlight = (0, hooks_1.usePointerBorderHighlight)();
+    if (buttonOnly) {
+        const copyButton = (react_1.default.createElement(PromptCopyButton_1.PromptCopyButton, { prompt: prompt, placement: "standalone", onCopy: reportCopy }));
+        return (react_1.default.createElement(PromptButtonOnlyWrapper, { "data-component-name": "Markdoc/Prompt/Prompt", className: className }, actions.length > 0 ? (react_1.default.createElement(PromptActions_1.PromptActions, { actions: actions, onOpen: openIn, button: copyButton, alignment: "start" })) : (copyButton)));
+    }
+    const hasHeader = Boolean(title) || Boolean(icon) || actions.length > 0 || hidePrompt;
+    const headerControls = (react_1.default.createElement(react_1.default.Fragment, null,
+        hidePrompt ? (react_1.default.createElement(PromptShowHideButton_1.PromptShowHideButton, { isPromptVisible: isPromptVisible, onToggle: () => setIsPromptVisible(!isPromptVisible) })) : null,
+        react_1.default.createElement(HeaderCopyWrapper, { $alwaysVisible: hidePrompt },
+            react_1.default.createElement(PromptCopyButton_1.PromptCopyButton, { prompt: prompt, placement: "header", onCopy: reportCopy }))));
+    return (react_1.default.createElement(PromptWrapper, { "data-component-name": "Markdoc/Prompt/Prompt", className: className },
+        react_1.default.createElement(PromptCardWrapper, { ref: borderHighlight.ref, onPointerMove: borderHighlight.onPointerMove, onPointerLeave: borderHighlight.onPointerLeave },
+            hasHeader ? (react_1.default.createElement(PromptHeader_1.PromptHeader, { title: title, icon: icon, iconRawContent: iconRawContent, controls: headerControls })) : null,
+            actions.length > 0 ? react_1.default.createElement(HeaderActionsWrapper, { actions: actions, onOpen: openIn }) : null,
+            isPromptVisible ? (react_1.default.createElement(PromptBody_1.PromptBody, { prompt: prompt, textRef: textRef, textLimit: textLimit, isExpanded: isExpanded, hasHiddenText: hasHiddenText, onToggleExpanded: toggleExpanded, controls: hidePrompt ? null : (react_1.default.createElement(BodyCopyWrapper, { $hiddenWhenNarrow: hasHeader },
+                    react_1.default.createElement(PromptCopyButton_1.PromptCopyButton, { prompt: prompt, placement: "body", onCopy: reportCopy }))) })) : null)));
+}
+/* The card cannot query its own width, so the container query sits on this wrapper. */
+const PromptWrapper = styled_components_1.default.div `
+  container: prompt / inline-size;
+  margin: var(--prompt-margin);
+`;
+/* Below 440px the block is a phone screen or a narrow column: the actions get their own
+   full-width row under the header, and the copy button moves from the prompt zone to the
+   header. The DOM order (header, actions, prompt) is the same in both layouts. */
+const NARROW_BLOCK = `@container prompt (width < ${constants_1.PROMPT_NARROW_BLOCK_MAX_WIDTH})`;
+const PromptCardWrapper = styled_components_1.default.div `
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  row-gap: var(--prompt-gap);
+  column-gap: var(--prompt-header-actions-gap);
+  padding: var(--prompt-padding-vertical) var(--prompt-padding-horizontal);
+
+  > [data-component-name='Markdoc/Prompt/PromptHeader'] {
+    flex: 1 1 0;
+    min-width: 0;
+  }
+
+  > [data-component-name='Markdoc/Prompt/PromptBody'] {
+    flex: 1 1 100%;
+  }
+  background-color: var(--prompt-bg-color);
+  border: var(--prompt-border-width) var(--border-style) var(--prompt-border-color);
+  border-radius: var(--prompt-border-radius);
+
+  /* A gradient ring over the border, lit around the pointer. The mask keeps only the
+     border-width frame of the gradient; --pointer-* come from usePointerBorderHighlight. */
+  &::before {
+    content: '';
+    position: absolute;
+    inset: calc(-1 * var(--prompt-border-width));
+    padding: var(--prompt-border-width);
+    border-radius: var(--prompt-border-radius);
+    background: radial-gradient(
+      var(--prompt-border-highlight-size) circle at var(--pointer-x, 50%) var(--pointer-y, 50%),
+      var(--prompt-border-highlight-color-start),
+      var(--prompt-border-highlight-color-end) 40%,
+      transparent 80%
+    );
+    mask:
+      linear-gradient(currentColor 0 0) content-box,
+      linear-gradient(currentColor 0 0);
+    mask-composite: exclude;
+    opacity: var(--pointer-edge-proximity, 0);
+    transition: var(--prompt-border-highlight-transition);
+    pointer-events: none;
+  }
+`;
+const HeaderActionsWrapper = (0, styled_components_1.default)(PromptActions_1.PromptActions) `
+  flex: 0 0 auto;
+
+  ${NARROW_BLOCK} {
+    flex-basis: 100%;
+    display: flex;
+
+    [data-component-name='SplitButton/SplitButton'],
+    [data-component-name='Button/ButtonGroup'] {
+      width: 100%;
+    }
+
+    [data-component-name='Button/ButtonGroup'] > .button:first-child {
+      flex: 1;
+    }
+  }
+`;
+const HeaderCopyWrapper = styled_components_1.default.div `
+  display: ${({ $alwaysVisible }) => ($alwaysVisible ? 'flex' : 'none')};
+
+  ${NARROW_BLOCK} {
+    display: flex;
+  }
+`;
+const BodyCopyWrapper = styled_components_1.default.div `
+  display: flex;
+
+  ${({ $hiddenWhenNarrow }) => $hiddenWhenNarrow &&
+    (0, styled_components_1.css) `
+      ${NARROW_BLOCK} {
+        display: none;
+      }
+    `}
+`;
+const PromptButtonOnlyWrapper = styled_components_1.default.div `
+  display: flex;
+  margin: var(--prompt-margin);
+`;
+//# sourceMappingURL=Prompt.js.map

package/lib/markdoc/components/Prompt/PromptActions.d.ts

@@ -0,0 +1,13 @@
+import type { JSX, ReactElement } from 'react';
+import type { ButtonProps } from '../../../components/Button/Button';
+import type { AiPromptTarget } from '../../../core/types';
+export type PromptActionsProps = {
+    actions: AiPromptTarget[];
+    onOpen: (target: AiPromptTarget) => void;
+    /** Main button of the split button; without it, the first action is the main button. */
+    button?: ReactElement<ButtonProps>;
+    /** Side of the split button the menu lines up with. */
+    alignment?: 'start' | 'end';
+    className?: string;
+};
+export declare function PromptActions({ actions, onOpen, button, alignment, className, }: PromptActionsProps): JSX.Element | null;

package/lib/markdoc/components/Prompt/PromptActions.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PromptActions = PromptActions;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Button_1 = require("../../../components/Button/Button");
+const SplitButton_1 = require("../../../components/SplitButton/SplitButton");
+const DropdownMenu_1 = require("../../../components/Dropdown/DropdownMenu");
+const DropdownMenuItem_1 = require("../../../components/Dropdown/DropdownMenuItem");
+const DropdownMenuItemContent_1 = require("../../../components/Dropdown/DropdownMenuItemContent");
+const ChatGptIcon_1 = require("../../../icons/ChatGptIcon/ChatGptIcon");
+const ClaudeIcon_1 = require("../../../icons/ClaudeIcon/ClaudeIcon");
+const CursorIcon_1 = require("../../../icons/CursorIcon/CursorIcon");
+const hooks_1 = require("../../../core/hooks");
+const constants_1 = require("../../../core/constants");
+const ACTION_ICONS = {
+    cursor: CursorIcon_1.CursorIcon,
+    claude: ClaudeIcon_1.ClaudeIcon,
+    chatgpt: ChatGptIcon_1.ChatGptIcon,
+};
+function PromptActions({ actions, onOpen, button, alignment = 'end', className, }) {
+    const { useTranslate } = (0, hooks_1.useThemeHooks)();
+    const { translate } = useTranslate();
+    const [firstAction, ...restActions] = actions;
+    if (!firstAction)
+        return null;
+    const menuActions = button ? actions : restActions;
+    const primaryButton = button !== null && button !== void 0 ? button : (react_1.default.createElement(Button_1.Button, { variant: "secondary", size: "small", icon: react_1.default.createElement(PromptActionIcon, { action: firstAction }), onClick: () => onOpen(firstAction) }, translate(constants_1.AI_PROMPT_ACTION_OPTIONS[firstAction].titleTranslationKey, constants_1.AI_PROMPT_ACTION_OPTIONS[firstAction].titleDefault)));
+    return (react_1.default.createElement(PromptActionsWrapper, { "data-component-name": "Markdoc/Prompt/PromptActions", className: className },
+        react_1.default.createElement(SplitButton_1.SplitButton, { variant: "secondary", size: "small", alignment: alignment, portalled: true, toggleAriaLabel: translate('page.actions.moreActions', 'More actions'), button: primaryButton }, menuActions.length > 0 ? (react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, menuActions.map((action) => (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, { key: action, onAction: () => onOpen(action) },
+            react_1.default.createElement(DropdownMenuItemContent_1.DropdownMenuItemContent, { icon: react_1.default.createElement(PromptActionIcon, { action: action }), title: translate(constants_1.AI_PROMPT_ACTION_OPTIONS[action].titleTranslationKey, constants_1.AI_PROMPT_ACTION_OPTIONS[action].titleDefault), description: translate(constants_1.AI_PROMPT_ACTION_OPTIONS[action].descriptionTranslationKey, constants_1.AI_PROMPT_ACTION_OPTIONS[action].descriptionDefault) })))))) : null)));
+}
+function PromptActionIcon({ action }) {
+    const Icon = ACTION_ICONS[action];
+    return react_1.default.createElement(Icon, null);
+}
+const PromptActionsWrapper = styled_components_1.default.div `
+  display: inline-flex;
+`;
+//# sourceMappingURL=PromptActions.js.map

package/lib/markdoc/components/Prompt/PromptBody.d.ts

@@ -0,0 +1,14 @@
+import type { JSX, ReactNode, RefObject } from 'react';
+import type { PromptTextLimit } from '../../../core/hooks';
+export type PromptBodyProps = {
+    prompt: string;
+    textRef: RefObject<HTMLDivElement | null>;
+    textLimit: PromptTextLimit;
+    isExpanded: boolean;
+    hasHiddenText: boolean;
+    onToggleExpanded: () => void;
+    /** Shown inside the prompt zone; omitted when the header owns the copy button. */
+    controls?: ReactNode;
+    className?: string;
+};
+export declare function PromptBody({ prompt, textRef, textLimit, isExpanded, hasHiddenText, onToggleExpanded, controls, className, }: PromptBodyProps): JSX.Element;