aidos-ui 3.0.0 → 3.0.2

package/dist/Popover.d.ts

@@ -3,7 +3,7 @@ import { JSStyle } from "./jss";
 export declare function Popover({ children, close }: {
     children: any;
     close: any;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
 interface PopoverTriggerProps<Input> {
     PopoverComponent: (props: {
         close: () => void;
@@ -17,5 +17,5 @@ interface PopoverTriggerProps<Input> {
         toggle: (input: Input) => void;
     }) => JSX.Element;
 }
-export declare function PopoverTrigger<Input>({ PopoverComponent, jsStyle, grow, shrink, tag, children, }: PopoverTriggerProps<Input>): JSX.Element;
+export declare function PopoverTrigger<Input>({ PopoverComponent, jsStyle, grow, shrink, tag, children, }: PopoverTriggerProps<Input>): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/ProgressBar.d.ts

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { Color, Size, JSStyle } from "./jss";
 export declare function ProgressBar({ color, progress, size, jsStyle, }: {
     progress: number;
     color: Color;
     size: Size;
     jsStyle?: JSStyle;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/ProgressCircle.d.ts

@@ -1,6 +1,5 @@
-/// <reference types="react" />
 export declare function ProgressCircle({ progress, stroke, outerRadius, }: {
     progress: number;
     stroke?: number;
     outerRadius: number;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/Providers.d.ts

@@ -6,4 +6,4 @@ export declare function Providers({ children, themes, }: {
         light: Theme;
         dark: Theme;
     };
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/RootView.d.ts

@@ -2,4 +2,4 @@ import { ReactNode } from "react";
 export declare function RootView({ children, focusOnlyOnFirstMount, }: {
     children: ReactNode;
     focusOnlyOnFirstMount?: boolean;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/Router.d.ts

@@ -1,2 +1 @@
-/// <reference types="react" />
-export declare function Router(): JSX.Element;
+export declare function Router(): import("react/jsx-runtime").JSX.Element;

package/dist/RouterState.d.ts

@@ -23,7 +23,7 @@ type Route<Props, State extends RouteState> = {
 };
 export declare const Provider: ({ children }: {
     children: import("react").ReactNode;
-}) => JSX.Element, useStateMachine: () => {
+}) => import("react/jsx-runtime").JSX.Element, useStateMachine: () => {
     subscribe: import("./Emitter").Subscribe<{
         state: RouteState;
         context: Context;

package/dist/Row.d.ts

@@ -3,4 +3,4 @@ import { FlexLayoutProps } from "./FlexLayout";
 export interface RowProps extends FlexLayoutProps {
     direction?: "row";
 }
-export declare const Row: React.ForwardRefExoticComponent<Pick<RowProps, "padding" | "style" | "slot" | "title" | "children" | "hidden" | "color" | "relative" | "justify" | "direction" | "translate" | "gap" | "dangerouslySetInnerHTML" | "grow" | "shrink" | "jsStyle" | "tag" | "className" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "align"> & React.RefAttributes<HTMLElement>>;
+export declare const Row: React.ForwardRefExoticComponent<Omit<RowProps, "ref"> & React.RefAttributes<HTMLElement>>;

package/dist/StackContext.d.ts

@@ -3,6 +3,6 @@ type Props = {
     children: ReactNode;
     isTopOfStack: boolean;
 };
-export declare function StackContextProvider({ children, isTopOfStack }: Props): JSX.Element;
+export declare function StackContextProvider({ children, isTopOfStack }: Props): import("react/jsx-runtime").JSX.Element;
 export declare function useIsTopOfStack(): boolean;
 export {};

package/dist/StaticCheckbox.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { Size } from "./jss";
 import { IconType } from "./IconType";
 type StaticCheckboxProps = {
@@ -13,5 +12,5 @@ export declare const sizes: {
     large: number;
     xlarge: number;
 };
-export declare function StaticCheckbox({ checked, size, icon, }: StaticCheckboxProps): JSX.Element;
+export declare function StaticCheckbox({ checked, size, icon, }: StaticCheckboxProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Sublist.d.ts

@@ -1,12 +1,12 @@
 import React, { ReactNode } from "react";
 import { JSStyle } from "./jss";
-export declare function Sublist({ children, label, initialState, jsStyle, secondaryAddOn, bare, }: {
-    bare?: boolean;
+export declare function Sublist({ children, label, labelBold, initialState, jsStyle, secondaryAddOn, }: {
     children: React.ReactNode;
     label: string;
+    labelBold?: boolean;
     initialState?: {
         collapsed: boolean;
     };
     jsStyle?: JSStyle;
     secondaryAddOn?: ReactNode;
-}): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/Sublist.js

@@ -4,9 +4,9 @@ import { ListButtonItem } from "./ListButtonItem";
 import { Icon } from "./Icon";
 import { Box } from "./Box";
 import { Row } from "./Row";
-export function Sublist({ children, label, initialState = { collapsed: false }, jsStyle, secondaryAddOn, bare, }) {
+export function Sublist({ children, label, labelBold, initialState = { collapsed: false }, jsStyle, secondaryAddOn, }) {
     const [collapsed, setCollapsed] = React.useState(initialState.collapsed);
-    return (_jsxs(_Fragment, { children: [_jsx(ListButtonItem, { bare: bare, headline: label, onClick: () => setCollapsed((x) => !x), jsStyle: jsStyle, addOn: _jsxs(Row, { gap: "medium", align: "center", children: [secondaryAddOn, _jsx(Box, { padding: "medium", jsStyle: [
+    return (_jsxs(_Fragment, { children: [_jsx(ListButtonItem, { headline: label, headlineBold: labelBold, onClick: () => setCollapsed((x) => !x), jsStyle: jsStyle, addOn: _jsxs(Row, { gap: "medium", align: "center", children: [secondaryAddOn, _jsx(Box, { padding: "medium", jsStyle: [
                                 {
                                     transition: "transform 0.15s ease-in",
                                 },

package/dist/Sublist.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sublist.js","sourceRoot":"","sources":["../src/Sublist.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5B,MAAM,UAAU,OAAO,CAAC,EACtB,QAAQ,EACR,KAAK,EACL,YAAY,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,EACnC,OAAO,EACP,cAAc,EACd,IAAI,GAUL;IACC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IAEzE,OAAO,CACL,8BACE,KAAC,cAAc,IACb,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,KAAK,EACf,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EACtC,OAAO,EAAE,OAAO,EAChB,KAAK,EACH,MAAC,GAAG,IAAC,GAAG,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,aAC7B,cAAc,EACf,KAAC,GAAG,IACF,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE;gCACP;oCACE,UAAU,EAAE,yBAAyB;iCACtC;gCACD,CAAC,SAAS,IAAI;oCACZ,SAAS,EAAE,gBAAgB;iCAC5B;6BACF,YAED,KAAC,IAAI,IACH,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,wBAAwB,GAC7B,GACE,IACF,EAER,aAAa,EAAC,KAAK,EACnB,KAAK,EAAC,WAAW,GACjB,EACD,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,IAC3B,CACJ,CAAC;AACJ,CAAC"}
+{"version":3,"file":"Sublist.js","sourceRoot":"","sources":["../src/Sublist.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAoB,MAAM,OAAO,CAAC;AACzC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAI5B,MAAM,UAAU,OAAO,CAAC,EACtB,QAAQ,EACR,KAAK,EACL,SAAS,EACT,YAAY,GAAG,EAAE,SAAS,EAAE,KAAK,EAAE,EACnC,OAAO,EACP,cAAc,GAUf;IACC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,YAAY,CAAC,SAAS,CAAC,CAAC;IACzE,OAAO,CACL,8BACE,KAAC,cAAc,IACb,QAAQ,EAAE,KAAK,EACf,YAAY,EAAE,SAAS,EACvB,OAAO,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EACtC,OAAO,EAAE,OAAO,EAChB,KAAK,EACH,MAAC,GAAG,IAAC,GAAG,EAAC,QAAQ,EAAC,KAAK,EAAC,QAAQ,aAC7B,cAAc,EACf,KAAC,GAAG,IACF,OAAO,EAAC,QAAQ,EAChB,OAAO,EAAE;gCACP;oCACE,UAAU,EAAE,yBAAyB;iCACtC;gCACD,CAAC,SAAS,IAAI;oCACZ,SAAS,EAAE,gBAAgB;iCAC5B;6BACF,YAED,KAAC,IAAI,IACH,KAAK,EAAC,SAAS,EACf,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,wBAAwB,GAC7B,GACE,IACF,EAER,aAAa,EAAC,KAAK,EACnB,KAAK,EAAC,WAAW,GACjB,EACD,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,QAAQ,IAC3B,CACJ,CAAC;AACJ,CAAC"}

package/dist/SubmitIconInput.d.ts

@@ -1,9 +1,8 @@
-/// <reference types="react" />
 import { BaseInputProps } from "./BaseInput";
 import { IconType } from "./IconType";
 interface SubmitIconInputProps extends BaseInputProps {
     icon: IconType;
     type?: "submit";
 }
-export declare function SubmitIconInput({ icon, ...otherProps }: SubmitIconInputProps): JSX.Element;
+export declare function SubmitIconInput({ icon, ...otherProps }: SubmitIconInputProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Tabs.d.ts

@@ -17,4 +17,4 @@ export interface TabsProps extends RowProps {
     tabPadding?: Padding;
     tabJSStyle?: JSStyle;
 }
-export declare function Tabs({ tabs, gap, padding, tabPadding, labelSize, jsStyle, tabJSStyle, ["aria-controls"]: ariaControls, ...otherProps }: TabsProps): JSX.Element;
+export declare function Tabs({ tabs, gap, padding, tabPadding, labelSize, jsStyle, tabJSStyle, ["aria-controls"]: ariaControls, ...otherProps }: TabsProps): import("react/jsx-runtime").JSX.Element;

package/dist/Text.d.ts

@@ -15,11 +15,11 @@ export interface TextProps {
     htmlFor?: string;
 }
 export type TextType = "label" | "span" | "p" | "h1" | "h2" | "h3" | "h4" | "li";
-export declare function Text({ children, color, size, align, bold, ellipsis, grow, type: Type, jsStyle, id, htmlFor, }: TextProps): JSX.Element;
-export declare function Label({ size, type, ...rest }: TextProps): JSX.Element;
-export declare function Span({ size, type, ...rest }: TextProps): JSX.Element;
-export declare function P({ size, type, ...rest }: TextProps): JSX.Element;
-export declare function H1({ size, type, ...rest }: TextProps): JSX.Element;
-export declare function H2({ size, type, ...rest }: TextProps): JSX.Element;
-export declare function H3({ size, type, ...rest }: TextProps): JSX.Element;
-export declare function Li({ size, type, ...rest }: TextProps): JSX.Element;
+export declare function Text({ children, color, size, align, bold, ellipsis, grow, type: Type, jsStyle, id, htmlFor, }: TextProps): import("react/jsx-runtime").JSX.Element;
+export declare function Label({ size, type, ...rest }: TextProps): import("react/jsx-runtime").JSX.Element;
+export declare function Span({ size, type, ...rest }: TextProps): import("react/jsx-runtime").JSX.Element;
+export declare function P({ size, type, ...rest }: TextProps): import("react/jsx-runtime").JSX.Element;
+export declare function H1({ size, type, ...rest }: TextProps): import("react/jsx-runtime").JSX.Element;
+export declare function H2({ size, type, ...rest }: TextProps): import("react/jsx-runtime").JSX.Element;
+export declare function H3({ size, type, ...rest }: TextProps): import("react/jsx-runtime").JSX.Element;
+export declare function Li({ size, type, ...rest }: TextProps): import("react/jsx-runtime").JSX.Element;

package/dist/TextInputWithState.d.ts

@@ -7,4 +7,4 @@ export interface TextInputWithStateProps extends BaseInputProps {
     icon?: IconType;
     onChange?: undefined;
 }
-export declare function TextInputWithState({ valueRef, onValueChange: externalOnChange, icon, ...otherProps }: TextInputWithStateProps): JSX.Element;
+export declare function TextInputWithState({ valueRef, onValueChange: externalOnChange, icon, ...otherProps }: TextInputWithStateProps): import("react/jsx-runtime").JSX.Element;

package/dist/TextPairing.d.ts

@@ -18,4 +18,4 @@ export interface TextPairingProps {
     headlineBold?: boolean;
     jsStyle?: JSStyle;
 }
-export declare function TextPairing({ headline, body, headlineColor, headlineSize, headlineAddOn, bodyColor, bodySize, addOn, addOnPosition, gap, align, grow, shrink, headlineBold, padding, jsStyle, }: TextPairingProps): JSX.Element;
+export declare function TextPairing({ headline, body, headlineColor, headlineSize, headlineAddOn, bodyColor, bodySize, addOn, addOnPosition, gap, align, grow, shrink, headlineBold, padding, jsStyle, }: TextPairingProps): import("react/jsx-runtime").JSX.Element;

package/dist/Tooltip.d.ts

@@ -7,5 +7,5 @@ interface TooltipProps {
     tag?: keyof HTMLElementTagNameMap;
     children: JSX.Element;
 }
-export declare function Tooltip({ content, jsStyle, tag, children }: TooltipProps): JSX.Element;
+export declare function Tooltip({ content, jsStyle, tag, children }: TooltipProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/jss.d.ts

@@ -11,8 +11,8 @@ export declare function JSStylesProvider({ themes, children, }: {
         light: Theme;
     };
     children: JSX.Element;
-}): JSX.Element;
-export declare function JSServerStyles(): JSX.Element;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function JSServerStyles(): import("react/jsx-runtime").JSX.Element;
 export type Size = "xsmall" | "small" | "medium" | "large" | "xlarge";
 export type Spacing = "none" | Size;
 export type Gap = Spacing;

package/dist/stateMachineContextFactory.d.ts

@@ -30,7 +30,7 @@ type StateMachineContextType<State, Context> = {
 export declare function stateMachineContextFactory<State, Transition, Context>(stateMachineConfig: StateMachineConfig<State, Transition, Context>): {
     Provider: ({ children }: {
         children: ReactNode;
-    }) => JSX.Element;
+    }) => import("react/jsx-runtime").JSX.Element;
     useStateMachine: () => StateMachineContextType<State, Context>;
 };
 export {};

package/package.json

@@ -1,10 +1,11 @@
 {
   "name": "aidos-ui",
-  "version": "3.0.0",
+  "version": "3.0.2",
   "description": "A simple UI framework",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "scripts": {
+    "embeddings": "node ./scripts/embeddings.js",
     "dev": "next dev",
     "publish:patch": "node ./scripts/publish.js --patch",
     "build": "next build",
@@ -20,19 +21,25 @@
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
     "@next/mdx": "^13.4.9",
+    "@types/node": "^20.4.4",
     "@types/prismjs": "^1.26.0",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
+    "@xenova/transformers": "^2.4.2",
     "csstype": "^3.1.1",
+    "dotenv": "^16.3.1",
     "install": "^0.13.0",
     "next": "latest",
     "npm": "^9.8.0",
+    "openai": "^3.3.0",
     "prismjs": "^1.29.0",
     "process": "^0.11.10",
     "react-dom": "latest",
+    "remark-mdx": "^2.3.0",
+    "remark-parse": "^10.0.2",
     "rimraf": "^5.0.1",
-    "ts-node": "^10.9.1",
-    "typescript": "^4.9.4"
+    "typescript": "^4.9.4",
+    "unified": "^10.1.2"
   },
   "peerDependencies": {
     "react": "latest"

package/scripts/embeddings.js

@@ -0,0 +1,93 @@
+import { pipeline } from "@xenova/transformers";
+import fs from "fs/promises";
+import path from "path";
+import { fileURLToPath } from "url";
+import { unified } from "unified";
+import remarkParse from "remark-parse";
+import remarkMdx from "remark-mdx";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const __rootdir = path.join(__dirname, "..");
+const __pages = path.join(__rootdir, "src", "pages");
+const __target = path.join(__rootdir, "src", "docs");
+
+const generateEmbeddings = await pipeline(
+  "feature-extraction",
+  "Xenova/all-MiniLM-L6-v2"
+);
+
+const files = await fs.readdir(__pages);
+
+const index = [];
+
+for (const file of files) {
+  if (path.extname(file) !== ".mdx") {
+    continue;
+  }
+
+  const filepath = path.join(__pages, file);
+  const filename = path.parse(file).name;
+  const content = await fs.readFile(filepath, "utf-8");
+  const sections = parseContent(content);
+
+  const embeddings = await Promise.all(
+    sections.map(async ({ text, heading, headingDepth }) => {
+      const embedding = await generateEmbeddings(text, {
+        normalize: true,
+        pooling: "mean",
+      });
+      return {
+        heading,
+        headingDepth,
+        filename,
+        embedding: Array.from(embedding.data),
+      };
+    })
+  );
+
+  index.push(...embeddings);
+}
+
+await fs.writeFile(
+  path.join(__target, "searchIndex.ts"),
+  `export const index = ${JSON.stringify({ index })}`
+);
+
+function parseChildren(children) {
+  const result = [];
+
+  for (const node of children) {
+    if (node.type === "text") {
+      result.push(node.value);
+    } else if (node.type === "inlineCode") {
+      result.push(node.value);
+    } else if (node.type === "link") {
+      result.push(parseChildren(node.children));
+    }
+  }
+
+  return result.join(" ");
+}
+
+function parseContent(content) {
+  const ast = unified().use(remarkParse).use(remarkMdx).parse(content);
+  const result = [];
+  let headingDepth = 1;
+  let heading = "";
+
+  for (const node of ast.children) {
+    if (node.type === "paragraph") {
+      result.push({
+        text: heading + ": " + parseChildren(node.children),
+        heading,
+        headingDepth,
+      });
+    } else if (node.type === "heading") {
+      headingDepth = node.depth;
+      heading = parseChildren(node.children);
+    }
+  }
+
+  return result;
+}

package/scripts/openai_embeddings.js

@@ -0,0 +1,100 @@
+import fs from "fs/promises";
+import path from "path";
+import { fileURLToPath } from "url";
+import { unified } from "unified";
+import remarkParse from "remark-parse";
+import remarkMdx from "remark-mdx";
+import { Configuration, OpenAIApi } from "openai";
+import dotenv from "dotenv";
+
+dotenv.config();
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const __rootdir = path.join(__dirname, "..");
+const __pages = path.join(__rootdir, "src", "pages");
+const __target = path.join(__rootdir, "src", "docs");
+
+const configuration = new Configuration({
+  organization: "org-Q89d8tyY2MChQVFEbhp27pB3",
+  apiKey: process.env.OPENAI_API_KEY,
+});
+const openai = new OpenAIApi(configuration);
+
+const files = await fs.readdir(__pages);
+
+const index = [];
+
+for (const file of files) {
+  if (path.extname(file) !== ".mdx") {
+    continue;
+  }
+
+  const filepath = path.join(__pages, file);
+  const filename = path.parse(file).name;
+  const content = await fs.readFile(filepath, "utf-8");
+  const sections = parseContent(content);
+
+  const embeddings = await Promise.all(
+    sections.map(async ({ text, heading, headingDepth }) => {
+      const embedding = await openai
+        .createEmbedding({
+          model: "text-embedding-ada-002",
+          input: text,
+        })
+        .then((response) => response.data[0].embedding);
+
+      return {
+        heading,
+        headingDepth,
+        filename,
+        embedding: Array.from(embedding.data),
+      };
+    })
+  );
+
+  index.push(...embeddings);
+}
+
+await fs.writeFile(
+  path.join(__target, "searchIndex.ts"),
+  `export const index = ${JSON.stringify({ index })}`
+);
+
+function parseChildren(children) {
+  const result = [];
+
+  for (const node of children) {
+    if (node.type === "text") {
+      result.push(node.value);
+    } else if (node.type === "inlineCode") {
+      result.push(node.value);
+    } else if (node.type === "link") {
+      result.push(parseChildren(node.children));
+    }
+  }
+
+  return result.join(" ");
+}
+
+function parseContent(content) {
+  const ast = unified().use(remarkParse).use(remarkMdx).parse(content);
+  const result = [];
+  let headingDepth = 1;
+  let heading = "";
+
+  for (const node of ast.children) {
+    if (node.type === "paragraph") {
+      result.push({
+        text: heading + ": " + parseChildren(node.children),
+        heading,
+        headingDepth,
+      });
+    } else if (node.type === "heading") {
+      headingDepth = node.depth;
+      heading = parseChildren(node.children);
+    }
+  }
+
+  return result;
+}

package/scripts/publish.js

@@ -3,6 +3,7 @@ import { spawnSync } from "child_process";
 async function run() {
   const commands = [
     ["npm", ["run", "build:lib"]],
+    ["npm", ["run", "embeddings"]],
     ["git", ["add", "--all"]],
     ["git", ["commit", "-m", "build:lib"]],
     ["npm", ["version", "patch"]],

package/scripts/test_embeddings.js

@@ -0,0 +1,47 @@
+import { pipeline } from "@xenova/transformers";
+import fs from "fs/promises";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const __rootdir = path.join(__dirname, "..");
+const __public = path.join(__rootdir, "public");
+
+const index = await fs
+  .readFile(path.join(__public, "index.json"), "utf-8")
+  .then((data) => JSON.parse(data).index);
+
+const generateEmbeddings = await pipeline(
+  "feature-extraction",
+  "Xenova/all-MiniLM-L6-v2"
+);
+
+const query = "how to install";
+
+const queryEmbeddings = await generateEmbeddings(query, {
+  normalize: true,
+  pooling: "mean",
+}).then((embedding) => embedding.data);
+
+function dot(xs, ys) {
+  let sum = 0;
+
+  for (let i = 0; i < xs.length; i++) {
+    sum += xs[i] * ys[i];
+  }
+
+  return sum;
+}
+
+const results = index
+  .map((element) => {
+    return {
+      ...element,
+      dot: dot(queryEmbeddings, element.embedding),
+    };
+  })
+  .sort((a, b) => b.dot - a.dot)
+  .slice(0, 5);
+
+console.log({ results });

package/src/BaseListItem.tsx

@@ -6,6 +6,7 @@ import { JSStyle, Size, Position, Spacing, TextColor, cssVar } from "./jss";
 import { InteractableColor } from "./Interactable";
 import { TextPairing } from "./TextPairing";
 import { BaseView } from "./BaseView";
+import { useListContext } from "./List";
 
 // @ts-ignore
 export interface BaseListItemProps extends RowProps {
@@ -27,7 +28,6 @@ export interface BaseListItemProps extends RowProps {
   role?: undefined;
   gap?: Spacing;
   selected?: boolean;
-  bare?: boolean;
 }
 
 export const BaseListItem = React.forwardRef(
@@ -50,12 +50,13 @@ export const BaseListItem = React.forwardRef(
       padding = "medium",
       gap = "medium",
       selected,
-      bare,
       headlineBold,
       ...otherProps
     }: BaseListItemProps,
     ref?: React.Ref<HTMLElement>
   ) => {
+    const { bare } = useListContext();
+
     const content = (
       <TextPairing
         headlineBold={headlineBold}

package/src/List.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useContext, useMemo } from "react";
 import { BaseList, BaseListProps } from "./BaseList";
 import { useNavigation } from "./useNavigation";
 import { cssVar } from "./jss";
@@ -9,33 +9,50 @@ interface ListProps extends BaseListProps {
   autofocus?: boolean;
   role?: undefined;
   navigation?: boolean;
+  carded?: boolean;
 }
 
+const ListContext = React.createContext({ bare: false });
+
 export function List({
   ariaLabel,
   jsStyle,
   autofocus = false,
   navigation = true,
   bare,
+  carded = true,
   ...otherProps
 }: ListProps) {
   const rootRef = useNavigation({ autofocus, enabled: navigation });
+  const contextValue = useMemo(() => ({ bare }), [bare]);
 
   return (
-    <BaseList
-      role="grid"
-      aria-label={ariaLabel}
-      ref={rootRef}
-      jsStyle={[
-        { overflow: "hidden" },
-        !bare && {
-          border: `1px solid ${cssVar("--divider")}`,
-          borderRadius: cssVar("--border-radius-l"),
-          backgroundColor: cssVar("--overlay-background"),
-        },
-        jsStyle,
-      ]}
-      {...otherProps}
-    />
+    <ListContext.Provider value={contextValue}>
+      <BaseList
+        role="grid"
+        aria-label={ariaLabel}
+        ref={rootRef}
+        jsStyle={[
+          { overflow: "hidden" },
+          !bare && {
+            backgroundColor: cssVar("--overlay-background"),
+          },
+          !bare &&
+            !carded && {
+              borderBottom: `1px solid ${cssVar("--divider")}`,
+              borderTop: `1px solid ${cssVar("--divider")}`,
+            },
+          !bare &&
+            carded && {
+              border: `1px solid ${cssVar("--divider")}`,
+              borderRadius: cssVar("--border-radius-l"),
+            },
+          jsStyle,
+        ]}
+        {...otherProps}
+      />
+    </ListContext.Provider>
   );
 }
+
+export const useListContext = () => useContext(ListContext);