@raycast/api 1.35.2 → 1.36.0

package/types/index.d.ts

@@ -343,7 +343,7 @@ export declare interface ActionPanelSubmenuProps extends ActionPanel.Submenu.Pro
 declare interface ActionProps {
     /**
      * ID of the item.
-     * @deprecated - This is an internal prop which not not have been exposed. You can safely remove it.
+     * @deprecated - This is an internal prop which should not have been exposed. You can safely remove it.
      */
     id?: string;
     /**
@@ -1468,6 +1468,11 @@ declare const Dropdown: ForwardRefExoticComponent<DropdownProps & RefAttributes<
  */
 declare const Dropdown_2: FunctionComponent<DropdownProps_2> & DropdownMembers_2;
 
+/**
+ * See {@link Grid.Dropdown}
+ */
+declare const Dropdown_3: FunctionComponent<DropdownProps_3> & DropdownMembers_3;
+
 /**
  * See {@link Form.Dropdown.Item}
  */
@@ -1478,6 +1483,11 @@ declare const DropdownItem: FunctionComponent<DropdownItemProps>;
  */
 declare const DropdownItem_2: FunctionComponent<DropdownItemProps_2>;
 
+/**
+ * See {@link Grid.Dropdown.Item}
+ */
+declare const DropdownItem_3: FunctionComponent<DropdownItemProps_3>;
+
 /**
  * See {@link Form.Dropdown.Item.Props}
  */
@@ -1513,6 +1523,22 @@ declare interface DropdownItemProps_2 {
     icon?: Image.ImageLike | undefined | null;
 }
 
+declare interface DropdownItemProps_3 {
+    /**
+     * Value of the dropdown item.
+     * Make sure to assign each unique value for each item.
+     */
+    value: string;
+    /**
+     * The title displayed for the item.
+     */
+    title: string;
+    /**
+     * An optional icon displayed for the item.
+     */
+    icon?: Image.ImageLike | undefined | null;
+}
+
 declare interface DropdownMembers {
     /**
      * Visually separated group of dropdown items.
@@ -1631,6 +1657,61 @@ declare interface DropdownMembers_2 {
     Item: typeof DropdownItem_2;
 }
 
+declare interface DropdownMembers_3 {
+    /**
+     * Visually separated group of dropdown items in a {@link Grid.Dropdown}.
+     *
+     * @remarks
+     * Use sections to group related dropdown items together.
+     *
+     * @example
+     * ```typescript
+     * import { Grid } from "@raycast/api";
+     *
+     * export default function Command() {
+     *   return (
+     *     <Grid searchBarAccessory={
+     *       <Grid.Dropdown tooltip="Dropdown With Sections">
+     *         <Grid.Dropdown.Section title="First Section">
+     *           <Grid.Dropdown.Item title="One" value="one" />
+     *         </Grid.Dropdown.Section>
+     *         <Grid.Dropdown.Section title="Second Section">
+     *           <Grid.Dropdown.Item title="Two" value="two" />
+     *         </Grid.Dropdown.Section>
+     *       </Grid.Dropdown>
+     *     }>
+     *       <Grid.Item title="Item in the Main Grid">
+     *     </Grid>
+     *   );
+     * }
+     * ```
+     */
+    Section: typeof DropdownSection_3;
+    /**
+     * A dropdown item in a {@link Grid.Dropdown}
+     *
+     * @example
+     * ```typescript
+     * import { Grid } from "@raycast/api";
+     *
+     * export default function Command() {
+     *     return (
+     *       <Grid searchBarAccessory={
+     *         <Grid.Dropdown tooltip="Dropdown With Items">
+     *           <Grid.Dropdown.Item title="One" value="one" />
+     *           <Grid.Dropdown.Item title="Two" value="two" />
+     *           <Grid.Dropdown.Item title="Three" value="three" />
+     *         </Grid.Dropdown>
+     *       }>
+     *         <Grid.Item title="Item in the Main Grid">
+     *       </Grid>
+     *   );
+     * }
+     * ```
+     */
+    Item: typeof DropdownItem_3;
+}
+
 /**
  * See {@link Form.Dropdown.Props}
  */
@@ -1683,6 +1764,48 @@ declare interface DropdownProps_2 {
     onChange?: (newValue: string) => void;
 }
 
+declare interface DropdownProps_3 {
+    /**
+     * ID of the dropdown.
+     */
+    id?: string;
+    /**
+     * Tooltip displayed when hovering the dropdown.
+     */
+    tooltip: string;
+    /**
+     * Placeholder text that will be shown in the dropdown search field.
+     *
+     * @defaultValue `"Search..."`
+     */
+    placeholder?: string;
+    /**
+     * Indicates whether the value of the dropdown should be persisted after selection, and restored next time the dropdown is rendered.
+     */
+    storeValue?: boolean | undefined;
+    /**
+     * The currently value of the dropdown.
+     */
+    value?: string;
+    /**
+     * The default value of the dropdown.
+     * Keep in mind that `defaultValue` will be configured once per component lifecycle. This means that if a user changes the value, `defaultValue` won't be configured on re-rendering.
+     *
+     * **If you're using `storeValue` and configured it as `true` _and_ a {@link Grid.Dropdown.Item} with the same value exists, then it will be selected.**
+     *
+     * **If you configure `value` at the same time as `defaultValue`, the `value` will have precedence over `defaultValue`.**
+     */
+    defaultValue?: string;
+    /**
+     * Grid sections or items. If {@link Grid.Dropdown.Item} elements are specified, a default section is automatically created.
+     */
+    children?: ReactNode;
+    /**
+     * Callback triggered when the grid item selection changes.
+     */
+    onChange?: (newValue: string) => void;
+}
+
 /**
  * Form.Dropdown Ref type.
  */
@@ -1698,6 +1821,11 @@ declare const DropdownSection: FunctionComponent<DropdownSectionProps>;
  */
 declare const DropdownSection_2: FunctionComponent<DropdownSectionProps_2>;
 
+/**
+ * See {@link Grid.Dropdown.Section}
+ */
+declare const DropdownSection_3: FunctionComponent<DropdownSectionProps_3>;
+
 /**
  * See {@link Form.Dropdown.Section.Props}
  */
@@ -1723,6 +1851,17 @@ declare interface DropdownSectionProps_2 {
     title?: string;
 }
 
+declare interface DropdownSectionProps_3 {
+    /**
+     * The item elements of the section.
+     */
+    children?: ReactNode;
+    /**
+     * Title displayed above the section
+     */
+    title?: string;
+}
+
 /**
  * @deprecated Use {@link Color.Dynamic} instead
  */
@@ -1730,6 +1869,8 @@ export declare type DynamicColor = Color.Dynamic;
 
 declare const EmptyView: FunctionComponent<EmptyViewProps>;
 
+declare const EmptyView_2: FunctionComponent<EmptyViewProps_2>;
+
 declare interface EmptyViewProps extends ActionsInterface {
     /**
      * An icon displayed in the center of the EmptyView.
@@ -1749,6 +1890,25 @@ declare interface EmptyViewProps extends ActionsInterface {
     description?: string;
 }
 
+declare interface EmptyViewProps_2 extends ActionsInterface {
+    /**
+     * An icon displayed in the center of the EmptyView.
+     *
+     * @remarks
+     * If an SVG is used, its longest side will be 128 pixels. Other images will be up/downscaled proportionally so that the longest side is between 64 and 256 pixels.
+     * If not specified, Raycast's default `EmptyView` icon will be used.
+     */
+    icon?: Image.ImageLike | undefined | null;
+    /**
+     * The main title displayed for the Empty View.
+     */
+    title?: string;
+    /**
+     * An optional description for why the empty view is shown.
+     */
+    description?: string;
+}
+
 /**
  * Holds data about the environment the command is running in. Use the global {@link environment} object to retrieve values.
  */
@@ -2523,6 +2683,7 @@ declare interface FormItemProps_2<T extends FormValue_2> {
      * The callback which will be triggered when the `value` of the item changes.
      */
     onChange?: (newValue: T) => void;
+
 }
 
 /**
@@ -3284,6 +3445,330 @@ export declare function getSelectedFinderItems(): Promise<FileSystemItem[]>;
  */
 export declare function getSelectedText(): Promise<string>;
 
+/**
+ * Displays {@link Grid.Section} or {@link Grid.Item}, optionally {@link Grid.Dropdown}.
+ *
+ * @remarks
+ * The grid uses built-in filtering by indexing the title of grid items and additionally keywords.
+ *
+ * @example
+ * ```typescript
+ * import { Grid } from "@raycast/api";
+ *
+ * function DrinkDropdown(props: DrinkDropdownProps) {
+ *   const { isLoading = false, drinkTypes, onDrinkTypeChange } = props;
+ *   return (
+ *     <Grid.Dropdown
+ *       tooltip="Select Drink Type"
+ *       storeValue={true}
+ *       onChange={(newValue) => {
+ *         onDrinkTypeChange(newValue);
+ *       }}
+ *     >
+ *       <Grid.Dropdown.Section title="Alcoholic Beverages">
+ *         {drinkTypes.map((drinkType) => (
+ *           <Grid.Dropdown.Item key={drinkType.id} title={{ value: drinkType.name, tooltip: drinkType.definition }} value={drinkType.id} />
+ *         ))}
+ *       </Grid.Dropdown.Section>
+ *     </Grid.Dropdown>
+ *   );
+ * }
+ *
+ * export default function Command() {
+ *   const drinkTypes = [
+ *     { id: 1, name: 'Beer', definition: "an alcoholic drink made from yeast-fermented malt flavoured with hops" },
+ *     { id: 2, name: 'Wine', definition: "an alcoholic drink made from fermented grape juice" }];
+ *   const onDrinkTypeChange = (newValue) => {
+ *     console.log(newValue);
+ *   }
+ *   return (
+ *     <Grid
+ *       navigationTitle="Search Beers"
+ *       searchBarPlaceholder="Search your favorite drink"
+ *       searchBarAccessory={<DrinkDropdown drinkTypes={drinkTypes} onDrinkTypeChange={onDrinkTypeChange} />}
+ *     >
+ *       <Grid.Item title="Augustiner Helles" />
+ *       <Grid.Item title="Camden Hells" />
+ *       <Grid.Item title="Leffe Blonde" />
+ *       <Grid.Item title="Sierra Nevada IPA" />
+ *     </Grid>
+ *   );
+ * }
+ * ```
+ */
+export declare const Grid: FunctionComponent<GridProps> & GridMembers;
+
+export declare namespace Grid {
+    /**
+     * Props of the {@link Grid} React component.
+     */
+    export type Props = GridProps;
+    /**
+     * Enum representing the amount of space there should be between a {@link Grid.Item}'s content and its borders.
+     */
+    export type Inset = GridInset;
+    /**
+     * Enum representing the number of items that should be displayed on a single row.
+     */
+    export type ItemSize = GridItemSize;
+    export namespace EmptyView {
+        export type Props = EmptyViewProps_2;
+    }
+    export namespace Dropdown {
+        /**
+         * Props of the {@link Grid.Dropdown} React component.
+         */
+        export type Props = DropdownProps_3;
+        export namespace Item {
+            /**
+             * Props of the {@link Grid.Dropdown.Item} React component.
+             */
+            export type Props = DropdownItemProps_3;
+        }
+        export namespace Section {
+            /**
+             * Props of the {@link Grid.Dropdown.Section} React component.
+             */
+            export type Props = DropdownSectionProps_3;
+        }
+    }
+    export namespace Item {
+        /**
+         * Props of the {@link Grid.Item} React component.
+         */
+        export type Props = ItemProps_2;
+    }
+    export namespace Section {
+        /**
+         * Props of the {@link Grid.Section} React component.
+         */
+        export type Props = SectionProps_3;
+    }
+}
+
+declare enum GridInset {
+    Small = "sm",
+    Medium = "md",
+    Large = "lg"
+}
+
+declare enum GridItemSize {
+    Small = "small",
+    Medium = "medium",
+    Large = "large"
+}
+
+declare interface GridMembers {
+    /**
+     * Enum representing the amount of space there should be between a {@link Grid.Item}'s content and its borders.
+     */
+    Inset: typeof GridInset;
+    /**
+     * Enum representing the size of the Grid's child {@link Grid.Item}s.
+     */
+    ItemSize: typeof GridItemSize;
+    /**
+     * A view to display when there aren't any items available. Use to greet users with a friendly message if the
+     * extension requires user input before it can show any grid items e.g. when searching for a package, an article etc.
+     *
+     * @remarks
+     * Raycast provides a default `EmptyView` that will be displayed if the {@link Grid} component either has no children,
+     * or if it has children, but none of them match the query in the search bar. This too can be overridden by passing
+     * an empty view alongside the other `Grid.Item`s.
+     *
+     * @example
+     * ```typescript
+     * import { useState } from "react";
+     * import { Grid } from "@raycast/api";
+     *
+     * export default function CommandWithCustomEmptyState() {
+     *   const [state, setState] = useState({ searchText: "", items: [] });
+     *
+     *   useEffect(() => {
+     *     // perform an API call that eventually populates `items`.
+     *   }, [state.searchText])
+     *
+     *   return (
+     *     <Grid
+     *       onSearchTextChange={(newValue) =>
+     *         setState((previous) => ({ ...previous, searchText: newValue }))
+     *       }
+     *     >
+     *       {state.searchText === "" && state.items.length === 0 ? (
+     *         <Grid.EmptyView
+     *           icon={{ source: "https://placekitten.com/500/500" }}
+     *           title="Type something to get started"
+     *         />
+     *       ) : (
+     *         state.items.map((item) => <Grid.Item key={item} title={item} />)
+     *       )}
+     *     </Grid>
+     *   );
+     * }
+     * ```
+     */
+    EmptyView: typeof EmptyView_2;
+    /**
+     * A item in the {@link Grid}.
+     *
+     * @remarks
+     * This is one of the foundational UI components of Raycast. A grid item represents a single entity. It can be a
+     * GitHub pull request, a file, or anything else. You most likely want to perform actions on this item, so make it clear
+     * to the user what this grid item is about.
+     *
+     * @example
+     * ```typescript
+     * import { Icon, Grid } from "@raycast/api";
+     *
+     * export default function Command() {
+     *   return (
+     *     <Grid>
+     *       <Grid.Item icon={Icon.Star} title="Augustiner Helles" subtitle="0,5 Liter" accessories={[{ text: "Germany" }]} />
+     *     </Grid>
+     *   );
+     * }
+     * ```
+     */
+    Item: typeof Item_2;
+    /**
+     * A group of related {@link Grid.Item}.
+     *
+     * @remarks
+     * Sections are a great way to structure your grid. For example, group GitHub issues with the same status and order them by priority.
+     * This way, users can quickly access what is most relevant.
+     *
+     * @example
+     * ```typescript
+     * import { Grid } from "@raycast/api";
+     *
+     * export default function Command() {
+     *   return (
+     *     <Grid>
+     *       <Grid.Section title="Lager">
+     *         <Grid.Item title="Camden Hells" />
+     *       </Grid.Section>
+     *       <Grid.Section title="IPA">
+     *         <Grid.Item title="Sierra Nevada IPA" />
+     *       </Grid.Section>
+     *     </Grid>
+     *   );
+     * }
+     * ```
+     */
+    Section: typeof Section_3;
+    /**
+     * A dropdown menu that will be shown in the right-hand-side of the search bar.
+     *
+     * @example
+     * ```typescript
+     * import { Grid } from "@raycast/api";
+     *
+     * function DrinkDropdown(props: DrinkDropdownProps) {
+     *   const { isLoading = false, drinkTypes, onDrinkTypeChange } = props;
+     *   return (
+     *     <Grid.Dropdown
+     *       tooltip="Select Drink Type"
+     *       disabled={isLoading}
+     *       storeValue={true}
+     *       onChange={(newValue) => {
+     *         onDrinkTypeChange(newValue);
+     *       }}
+     *     >
+     *       <Grid.Dropdown.Section title="Alcoholic Beverages">
+     *         {drinkTypes.map((drinkType) => (
+     *           <Grid.Dropdown.Item key={drinkType.id} title={drinkType.name} value={drinkType.id} />
+     *         ))}
+     *       </Grid.Dropdown.Section>
+     *     </Grid.Dropdown>
+     *   );
+     * }
+     *
+     * export default function Command() {
+     *   const drinkTypes = [{ id: 1, name: 'Beer' }, { id: 2, name: 'Wine' }];
+     *   const onDrinkTypeChange = (newValue) => {
+     *     console.log(newValue);
+     *   }
+     *   return (
+     *     <Grid
+     *       navigationTitle="Search Beers"
+     *       searchBarPlaceholder="Search your favorite drink"
+     *       searchBarAccessory={<DrinkDropdown drinkTypes={drinkTypes} onDrinkTypeChange={onDrinkTypeChange} />}
+     *     >
+     *       <Grid.Item title="Augustiner Helles" />
+     *       <Grid.Item title="Camden Hells" />
+     *       <Grid.Item title="Leffe Blonde" />
+     *       <Grid.Item title="Sierra Nevada IPA" />
+     *     </Grid>
+     *   );
+     * }
+     * ```
+     */
+    Dropdown: typeof Dropdown_3;
+}
+
+declare interface GridProps extends ActionsInterface, NavigationChildInterface {
+    /**
+     * Grid sections or items. If {@link Grid.Item} elements are specified, a default section is automatically created.
+     */
+    children?: ReactNode;
+    /**
+     * The number of items that should be displayed on a single row.
+     *
+     * @defaultValue {@link Grid.ItemSize.Medium}
+     */
+    itemSize?: Grid.ItemSize;
+    /**
+     * Indicates how much space there should be between a {@link Grid.Item}s' content and its borders.
+     * The absolute value depends on the value of the `itemSize` prop.
+     */
+    inset?: Grid.Inset;
+    /**
+     * Callback triggered when the item selection in the grid changes.
+     */
+    onSelectionChange?: (id?: string) => void;
+    /**
+     * {@link Grid.Dropdown} that will be shown in the right-hand-side of the search bar.
+     */
+    searchBarAccessory?: ReactElement<DropdownProps_3> | undefined | null;
+    /**
+     * The text that will be displayed in the search bar.
+     */
+    searchText?: string;
+    /**
+     * Toggles Raycast filtering. When `true`, Raycast will use the query in the search bar to filter grid
+     * items. When `false`, the extension needs to take care of the filtering.
+     *
+     * @remarks
+     * Having this enabled when filtering items in the extension is unspecified behaviour.
+     *
+     * @defaultValue `false` when `onSearchTextChange` is specified, `true` otherwise.
+     */
+    enableFiltering?: boolean;
+    /**
+     * Placeholder text that will be shown in the search bar.
+     *
+     * @defaultValue `"Search value..."`
+     */
+    searchBarPlaceholder?: string;
+    /**
+     * Selects the item with the specified id.
+     */
+    selectedItemId?: string;
+    /**
+     * Defines whether the {@link Grid.Props.onSearchTextChange} will be triggered on every keyboard press or with a delay for throttling the events.
+     * Recommended to set to `true` when using custom filtering logic with asynchronous operations (e.g. network requests).
+     * @defaultValue `false`
+     */
+    throttle?: boolean;
+    /**
+     * Callback triggered when the search bar text changes.
+     *
+     * @remarks
+     * Specifying this implicitly toggles `enableFiltering` to false. To enable native filtering when using `onSearchTextChange`, explicitly set `enableFiltering` to true.
+     */
+    onSearchTextChange?: (text: string) => void;
+}
+
 /**
  * List of built-in icons that can be used for actions or list items.
  *
@@ -3538,6 +4023,11 @@ export declare type ImageSource = Image.Source;
  */
 declare const Item: FunctionComponent<ItemProps> & ItemMembers;
 
+/**
+ * See {@link Grid.Item}
+ */
+declare const Item_2: FunctionComponent<ItemProps_2>;
+
 declare interface ItemAccessory {
     /**
      * An optional text that will be used as the label.
@@ -3633,6 +4123,41 @@ declare interface ItemProps extends ActionsInterface {
     detail?: ReactNode;
 }
 
+declare interface ItemProps_2 extends ActionsInterface {
+    /**
+     * ID of the item. This string is passed to the `onSelectionChange` handler of the {@link Grid} when the item is selected.
+     * Make sure to assign each item a unique ID or a UUID will be auto generated.
+     */
+    id?: string;
+    /**
+     * An image, optionally with a tooltip, representing the content of the grid item.
+     */
+    content: Image.ImageLike | {
+        value: Image.ImageLike;
+        tooltip: string;
+    };
+    /**
+     * The main title displayed for that item, optionally with a tooltip.
+     */
+    title?: string | {
+        value: string;
+        tooltip: string;
+    };
+    /**
+     * An optional subtitle displayed next to the main title, optionally with a tooltip.
+     */
+    subtitle?: string | {
+        value: string;
+        tooltip: string;
+    };
+    /**
+     * An optional property used for providing additional indexable strings for search.
+     * When filtering the list in Raycast through the search bar, the keywords will be searched in addition to the title.
+     */
+    keywords?: string[];
+    actions?: ReactNode | null;
+}
+
 export declare namespace Keyboard {
     /**
      * A keyboard shortcut is defined by one or more modifier keys (command, control, etc.) and a single key equivalent (a character or special key).
@@ -4383,12 +4908,12 @@ declare interface NavigationChildInterface {
 export declare namespace OAuth {
     export namespace PKCEClient {
         /**
-         * The options for creating a new {@link PKCEClient}.
+         * The options for creating a new {@link OAuth.PKCEClient}.
          */
         export interface Options {
             /**
              * The redirect method for the OAuth flow.
-             * Make sure to set this to the correct method for the provider, see {@link RedirectMethod} for more information.
+             * Make sure to set this to the correct method for the provider, see {@link OAuth.RedirectMethod} for more information.
              */
             redirectMethod: RedirectMethod;
             /**
@@ -4438,37 +4963,37 @@ export declare namespace OAuth {
         constructor(options: PKCEClient.Options);
         /**
          * Creates an authorization request for the provided authorization endpoint, client ID, and scopes.
-         * You need to first create the authorization request before calling {@link authorize}.
+         * You need to first create the authorization request before calling {@link OAuth.PKCEClient.authorize}.
          *
          * @remarks The generated code challenge for the PKCE request uses the S256 method.
          *
-         * @returns A promise for an {@link AuthorizationRequest} that you can use as input for {@link authorize}.
+         * @returns A promise for an {@link OAuth.AuthorizationRequest} that you can use as input for {@link OAuth.PKCEClient.authorize}.
          */
         authorizationRequest(options: AuthorizationRequestOptions): Promise<AuthorizationRequest>;
         /**
          * Starts the authorization and shows the OAuth overlay in Raycast.
-         * As parameter you can either directly use the returned request from {@link authorizationRequest},
-         * or customize the URL by extracting parameters from {@link AuthorizationRequest} and providing your own URL via {@link AuthorizationOptions}.
+         * As parameter you can either directly use the returned request from {@link OAuth.PKCEClient.authorizationRequest},
+         * or customize the URL by extracting parameters from {@link OAuth.AuthorizationRequest} and providing your own URL via {@link AuthorizationOptions}.
          * Eventually the URL will be used to open the authorization page of the provider in the web browser.
          *
-         * @returns A promise for an {@link AuthorizationResponse}, which contains the authorization code needed for the token exchange.
+         * @returns A promise for an {@link OAuth.AuthorizationResponse}, which contains the authorization code needed for the token exchange.
          * The promise is resolved when the user was redirected back from the provider's authorization page to the Raycast extension.
          */
         authorize(options: AuthorizationRequest | AuthorizationOptions): Promise<AuthorizationResponse>;
         private authorizationURL;
         /**
-         * Securely stores a {@link TokenSet} for the provider. Use this after fetching the access token from the provider.
-         * If the provider returns a a standard OAuth JSON token response, you can directly pass the {@link TokenResponse}.
-         * At a minimum, you need to set the {@link TokenSet.accessToken}, and typically you also set {@link TokenSet.refreshToken} and {@link TokenSet.isExpired}.
+         * Securely stores a {@link OAuth.TokenSet} for the provider. Use this after fetching the access token from the provider.
+         * If the provider returns a a standard OAuth JSON token response, you can directly pass the {@link OAuth.TokenResponse}.
+         * At a minimum, you need to set the {@link OAuth.TokenSet.accessToken}, and typically you also set {@link OAuth.TokenSet.refreshToken} and {@link OAuth.TokenSet.isExpired}.
          * Raycast automatically shows a logout preference for the extension when a token set was saved.
          *
-         * @remarks If you want to make use of the convenience {@link TokenSet.isExpired} method, the property {@link TokenSet.expiresIn} must be configured.
+         * @remarks If you want to make use of the convenience {@link OAuth.TokenSet.isExpired} method, the property {@link OAuth.TokenSet.expiresIn} must be configured.
          *
          * @returns A promise that resolves when the token set has been stored.
          */
         setTokens(options: TokenSetOptions | TokenResponse): Promise<void>;
         /**
-         * Retrieves the stored {@link TokenSet} for the client.
+         * Retrieves the stored {@link OAuth.TokenSet} for the client.
          * You can use this to initially check whether the authorization flow should be initiated or
          * the user is already logged in and you might have to refresh the access token.
          *
@@ -4476,7 +5001,7 @@ export declare namespace OAuth {
          */
         getTokens(): Promise<TokenSet | undefined>;
         /**
-         * Removes the stored {@link TokenSet} for the client.
+         * Removes the stored {@link OAuth.TokenSet} for the client.
          *
          * @remarks Raycast automatically shows a logout preference that removes the token set.
          * Use this method only if you need to provide an additional logout option in your extension or you want to remove the token set because of a migration.
@@ -4509,7 +5034,7 @@ export declare namespace OAuth {
         AppURI = "appURI"
     }
     /**
-     * The options for an authorization request via {@link PKCEClient.authorizationRequest}.
+     * The options for an authorization request via {@link OAuth.PKCEClient.authorizationRequest}.
      */
     export interface AuthorizationRequestOptions {
         /**
@@ -4533,8 +5058,8 @@ export declare namespace OAuth {
         extraParameters?: Record<string, string>;
     }
     /**
-     * Values of {@link AuthorizationRequest}.
-     * The PKCE client automatically generates the values for you and returns them for {@link PKCEClient.authorizationRequest}.
+     * Values of {@link OAuth.AuthorizationRequest}.
+     * The PKCE client automatically generates the values for you and returns them for {@link OAuth.PKCEClient.authorizationRequest}.
      */
     export interface AuthorizationRequestURLParams {
         /**
@@ -4555,9 +5080,9 @@ export declare namespace OAuth {
         redirectURI: string;
     }
     /**
-     * The request returned by {@link PKCEClient.authorizationRequest}.
-     * Can be used as direct input to {@link PKCEClient.authorize}, or
-     * to extract parameters for constructing a custom URL in {@link AuthorizationOptions}.
+     * The request returned by {@link OAuth.PKCEClient.authorizationRequest}.
+     * Can be used as direct input to {@link OAuth.PKCEClient.authorize}, or
+     * to extract parameters for constructing a custom URL in {@link OAuth.AuthorizationOptions}.
      */
     export interface AuthorizationRequest extends AuthorizationRequestURLParams {
         /**
@@ -4566,8 +5091,8 @@ export declare namespace OAuth {
         toURL(): string;
     }
     /**
-     * Options for customizing {@link PKCEClient.authorize}.
-     * You can use values from {@link AuthorizationRequest} to build your own URL.
+     * Options for customizing {@link OAuth.PKCEClient.authorize}.
+     * You can use values from {@link OAuth.AuthorizationRequest} to build your own URL.
      */
     export interface AuthorizationOptions {
         /**
@@ -4576,7 +5101,7 @@ export declare namespace OAuth {
         url: string;
     }
     /**
-     * The response returned by {@link PKCEClient.authorize}, containing the authorization code after the provider redirect.
+     * The response returned by {@link OAuth.PKCEClient.authorize}, containing the authorization code after the provider redirect.
      * You can then exchange the authorization code for an access token using the provider's token endpoint.
      */
     export interface AuthorizationResponse {
@@ -4588,7 +5113,7 @@ export declare namespace OAuth {
     /**
      * Describes the TokenSet created from an OAuth provider's token response.
      * The `accessToken` is the only required parameter but typically OAuth providers also return a refresh token, an expires value, and the scope.
-     * Securely store a token set via {@link PKCEClient.setTokens} and retrieve it via {@link PKCEClient.getTokens}.
+     * Securely store a token set via {@link OAuth.PKCEClient.setTokens} and retrieve it via {@link OAuth.PKCEClient.getTokens}.
      */
     export interface TokenSet {
         /**
@@ -4614,7 +5139,7 @@ export declare namespace OAuth {
          */
         scope?: string;
         /**
-         * The date when the token set was stored via {@link PKCEClient.setTokens}.
+         * The date when the token set was stored via {@link OAuth.PKCEClient.setTokens}.
          */
         updatedAt: Date;
         /**
@@ -4625,7 +5150,7 @@ export declare namespace OAuth {
         isExpired(): boolean;
     }
     /**
-     * Options for a {@link TokenSet} to store via {@link PKCEClient.setTokens}.
+     * Options for a {@link OAuth.TokenSet} to store via {@link OAuth.PKCEClient.setTokens}.
      */
     export interface TokenSetOptions {
         /**
@@ -4651,7 +5176,7 @@ export declare namespace OAuth {
     }
     /**
      * Defines the standard JSON response for an OAuth token request.
-     * The response can be directly used to store a {@link TokenSet} via {@link PKCEClient.setTokens}.
+     * The response can be directly used to store a {@link OAuth.TokenSet} via {@link OAuth.PKCEClient.setTokens}.
      */
     export interface TokenResponse {
         /**
@@ -5132,6 +5657,11 @@ declare const Section: FunctionComponent<SectionProps>;
  */
 declare const Section_2: FunctionComponent<SectionProps_2>;
 
+/**
+ * See {@link Grid.Section}
+ */
+declare const Section_3: FunctionComponent<SectionProps_3>;
+
 declare type SectionChildren = ReactElement<ActionProps> | ReactElement<ActionProps>[] | ReactElement<SubmenuProps> | Array<ReactElement<SubmenuProps>> | Array<ReactElement<SubmenuProps> | ReactElement<ActionProps>> | null;
 
 /**
@@ -5155,7 +5685,7 @@ declare interface SectionProps_2 {
     children?: ReactNode;
     /**
      * ID of the section.
-     * @deprecated - This is an internal prop which not not have been exposed. You can safely remove it.
+     * @deprecated - This is an internal prop which should not have been exposed. You can safely remove it.
      */
     id?: string;
     /**
@@ -5168,6 +5698,21 @@ declare interface SectionProps_2 {
     subtitle?: string;
 }
 
+declare interface SectionProps_3 {
+    /**
+     * The {@link Grid.Item} elements of the section.
+     */
+    children?: ReactNode;
+    /**
+     * Title displayed above the section.
+     */
+    title?: string;
+    /**
+     * An optional subtitle displayed next to the title of the section.
+     */
+    subtitle?: string;
+}
+
 /**
  * See {@link Form.Separator}
  */
@@ -5364,7 +5909,7 @@ declare type SubmenuChildren = ReactElement<SectionProps> | ReactElement<Section
 declare interface SubmenuProps {
     /**
      * ID of the submenu.
-     * @deprecated - This is an internal prop which not not have been exposed. You can safely remove it.
+     * @deprecated - This is an internal prop which should not have been exposed. You can safely remove it.
      */
     id?: string;
     /**