React component catalog and copy/paste kit

import type { ReactNode } from "react";

export interface BuildWithHQMenuItem {
  readonly id: string;
  readonly parentId?: string | null;
  readonly label: string;
  readonly iconKey?: string | null;
  readonly targetType: "Page" | "Group" | "Module" | "External";
  readonly pageKey?: string | null;
  readonly url?: string | null;
  readonly sortOrder: number;
}

export interface BuildWithHQMenuProps {
  readonly items: readonly BuildWithHQMenuItem[];
  readonly activePageKey?: string;
  readonly resolvePageHref: (pageKey: string) => string;
  readonly icon?: (iconKey: string) => ReactNode;
  readonly styled?: boolean;
}

const safeExternalUrl = (value: string | null | undefined): string | undefined => {
  if (!value || value.length > 2000) return undefined;
  try {
    const url = new URL(value);
    return url.protocol === "https:" && !url.username && !url.password ? url.toString() : undefined;
  } catch { return undefined; }
};

export const BuildWithHQMenu = ({ items, activePageKey, resolvePageHref, icon, styled = false }: BuildWithHQMenuProps) => {
  const roots = items.filter((item) => !item.parentId).sort((left, right) => left.sortOrder - right.sortOrder);
  const renderItem = (item: BuildWithHQMenuItem): ReactNode => {
    const children = items.filter((candidate) => candidate.parentId === item.id).sort((left, right) => left.sortOrder - right.sortOrder);
    if (item.targetType === "Group") return <li key={item.id}><span>{item.iconKey && icon?.(item.iconKey)}{item.label}</span>{children.length > 0 && <ul>{children.map(renderItem)}</ul>}</li>;
    const href = item.targetType === "Page" && item.pageKey ? resolvePageHref(item.pageKey)
      : item.targetType === "External" ? safeExternalUrl(item.url) : undefined;
    return <li key={item.id}>{href ? <a href={href} aria-current={item.pageKey === activePageKey ? "page" : undefined}>{item.iconKey && icon?.(item.iconKey)}{item.label}</a> : <span aria-disabled="true">{item.label}</span>}</li>;
  };
  return <nav aria-label="Application" className={styled ? "bwhq-app-menu" : undefined}><ul>{roots.map(renderItem)}</ul></nav>;
};

import type { ReactNode } from "react";

export interface TenantWorkspaceShellProps {
  readonly applicationName: string;
  readonly pageTitle: string;
  readonly menu: ReactNode;
  readonly children: ReactNode;
  readonly headerActions?: ReactNode;
  readonly contextPanel?: ReactNode;
  readonly styled?: boolean;
}

const TenantWorkspaceShellBody = ({ applicationName, pageTitle, menu, children, headerActions, contextPanel, styled = false }: TenantWorkspaceShellProps) => (
  <div className={styled ? "bwhq-workspace" : undefined}>
    <header className={styled ? "bwhq-workspace__header" : undefined}>
      <div><p>{applicationName}</p><h1>{pageTitle}</h1></div>
      {headerActions && <div aria-label="Page actions">{headerActions}</div>}
    </header>
    <div className={styled ? "bwhq-workspace__columns" : undefined}>
      <aside aria-label="Application menu" className={styled ? "bwhq-workspace__menu" : undefined}>{menu}</aside>
      <main className={styled ? "bwhq-workspace__main" : undefined}>{children}</main>
      {contextPanel && <aside aria-label="Page context" className={styled ? "bwhq-workspace__context" : undefined}>{contextPanel}</aside>}
    </div>
  </div>
);

export const UnstyledTenantWorkspaceShell = (props: Omit<TenantWorkspaceShellProps, "styled">) =>
  <TenantWorkspaceShellBody {...props} styled={false} />;

export const StyledTenantWorkspaceShell = (props: Omit<TenantWorkspaceShellProps, "styled">) =>
  <TenantWorkspaceShellBody {...props} styled />;

import { useEffect, useState } from "react";
import {
  GoClawApprovalQueue,
  UniversalInbox,
  type ApprovalQueueClient,
  type ApprovalQueueItem,
  type InboxQueueItem,
  type UniversalInboxClient,
} from "@buildwithhq/universal-inbox";

interface InboxStarterProps {
  readonly client: UniversalInboxClient;
  readonly ticketingOnly?: boolean;
  readonly assignedToMe?: boolean;
  readonly onOpen?: (inboxItemId: string) => void;
  readonly styled?: boolean;
}

export const HeadlessInboxQueueStarter = ({ client, ticketingOnly, assignedToMe, onOpen, styled = false }: InboxStarterProps) => {
  const [items, setItems] = useState<readonly InboxQueueItem[]>([]);
  const [error, setError] = useState<string>();
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    const controller = new AbortController();
    setLoading(true); setError(undefined);
    void client.list({ ticketingOnly, assignedToMe, topN: 100 }, controller.signal)
      .then(setItems)
      .catch((failure: unknown) => { if (!controller.signal.aborted) setError(failure instanceof Error ? failure.message : "Inbox unavailable."); })
      .finally(() => { if (!controller.signal.aborted) setLoading(false); });
    return () => controller.abort();
  }, [assignedToMe, client, ticketingOnly]);
  return <section aria-busy={loading} className={styled ? "bwhq-headless-list" : undefined}>
    <h2>{ticketingOnly ? "Support tickets" : "Universal Inbox"}</h2>
    {loading && <p role="status">Loading inbox…</p>}
    {error && <p role="alert">{error}</p>}
    {!loading && !error && items.length === 0 && <p>No visible work.</p>}
    <ul>{items.map((item) => <li key={item.inboxItemId}><button type="button" onClick={() => onOpen?.(item.inboxItemId)}><strong>{item.ticket?.key ? item.ticket.key + " · " : ""}{item.subject || item.source.sourceType}</strong><span>{item.status} · {item.previewText || "No preview"}</span></button></li>)}</ul>
  </section>;
};

interface ApprovalStarterProps {
  readonly client: ApprovalQueueClient;
  readonly onOpen?: (item: ApprovalQueueItem) => void;
  readonly styled?: boolean;
}

export const HeadlessApprovalQueueStarter = ({ client, onOpen, styled = false }: ApprovalStarterProps) => {
  const [items, setItems] = useState<readonly ApprovalQueueItem[]>([]);
  const [error, setError] = useState<string>();
  useEffect(() => {
    const controller = new AbortController();
    void client.list(100, controller.signal).then(setItems)
      .catch((failure: unknown) => { if (!controller.signal.aborted) setError(failure instanceof Error ? failure.message : "Approval queue unavailable."); });
    return () => controller.abort();
  }, [client]);
  return <section className={styled ? "bwhq-headless-list" : undefined}>
    <h2>GoClaw approval work</h2>{error && <p role="alert">{error}</p>}
    <ul>{items.map((item) => <li key={item.suggestionBatchId}><button type="button" onClick={() => onOpen?.(item)}><strong>{item.subject || item.summary || item.sourceType}</strong><span>{item.batchStatus}{item.isStale ? " · stale" : ""}</span></button></li>)}</ul>
  </section>;
};

/* These two exports preserve the complete native behaviors. The bare export adds
   no wrapper CSS, but the native package intentionally ships its own module CSS. */
export const BareNativeUniversalInbox = (props: { readonly client: UniversalInboxClient; readonly initialInboxItemId?: string }) =>
  <UniversalInbox {...props} />;
export const FramedNativeUniversalInbox = (props: { readonly client: UniversalInboxClient; readonly initialInboxItemId?: string }) =>
  <div className="bwhq-native-frame"><UniversalInbox {...props} /></div>;
export const BareNativeGoClawApprovalQueue = (props: { readonly client: ApprovalQueueClient }) =>
  <GoClawApprovalQueue {...props} />;
export const FramedNativeGoClawApprovalQueue = (props: { readonly client: ApprovalQueueClient }) =>
  <div className="bwhq-native-frame"><GoClawApprovalQueue {...props} /></div>;

import { useEffect, useState, type ReactNode } from "react";

export type JsonValue = string | number | boolean | null | JsonValue[] | { readonly [key: string]: JsonValue };
export type DataBindingLoader = (bindingKey: string, signal: AbortSignal) => Promise<{ readonly data: JsonValue }>;

export interface DataBoundListProps<T> {
  readonly bindingKey: string;
  readonly loadBinding: DataBindingLoader;
  readonly selectItems: (data: JsonValue) => readonly T[];
  readonly itemKey: (item: T) => string;
  readonly renderItem: (item: T) => ReactNode;
  readonly emptyMessage?: string;
  readonly styled?: boolean;
}

export function DataBoundList<T>({ bindingKey, loadBinding, selectItems, itemKey, renderItem, emptyMessage = "No visible records.", styled = false }: DataBoundListProps<T>) {
  const [items, setItems] = useState<readonly T[]>([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  useEffect(() => {
    const controller = new AbortController();
    setLoading(true); setError(null);
    void loadBinding(bindingKey, controller.signal)
      .then((result) => setItems(selectItems(result.data)))
      .catch((failure: unknown) => { if (!controller.signal.aborted) setError(failure instanceof Error ? failure.message : "Data source unavailable."); })
      .finally(() => { if (!controller.signal.aborted) setLoading(false); });
    return () => controller.abort();
  }, [bindingKey, loadBinding, selectItems]);
  return <section aria-busy={loading} className={styled ? "bwhq-data-list" : undefined}>
    {loading && <p role="status">Loading…</p>}
    {error && <p role="alert">{error}</p>}
    {!loading && !error && items.length === 0 && <p>{emptyMessage}</p>}
    {!loading && !error && items.length > 0 && <ul>{items.map((item) => <li key={itemKey(item)}>{renderItem(item)}</li>)}</ul>}
  </section>;
}

import { useMemo, useState } from "react";
import { buildWithHQCatalog, type CatalogModule } from "./catalog-data.generated";

export interface BuildWithHQComponentCatalogProps {
  readonly initialModuleKey?: string;
  readonly styled?: boolean;
}

const procedureNames = (module: CatalogModule): readonly string[] =>
  [...new Set(module.operations.flatMap((operation) =>
    operation.procedures.map((procedure) => procedure.procedure ?? procedure.key),
  ))];

const CatalogBody = ({ initialModuleKey, styled = false }: BuildWithHQComponentCatalogProps) => {
  const [query, setQuery] = useState("");
  const initial = buildWithHQCatalog.modules.find((module) =>
    module.module_key === initialModuleKey || module.component_key === initialModuleKey,
  ) ?? buildWithHQCatalog.modules[0];
  const [selectedKey, setSelectedKey] = useState(initial?.api_base_path ?? "");
  const filtered = useMemo(() => {
    const needle = query.trim().toLocaleLowerCase("en-US");
    if (!needle) return buildWithHQCatalog.modules;
    return buildWithHQCatalog.modules.filter((module) => [
      module.display_name,
      module.module_key,
      module.component_key,
      module.api_base_path,
      ...module.operations.map((operation) => operation.route),
      ...procedureNames(module),
    ].some((value) => value?.toLocaleLowerCase("en-US").includes(needle)));
  }, [query]);
  const selected = filtered.find((module) => module.api_base_path === selectedKey)
    ?? filtered[0]
    ?? buildWithHQCatalog.modules[0];

  return (
    <section className={styled ? "bwhq-catalog bwhq-catalog--styled" : undefined}>
      <header className={styled ? "bwhq-catalog__header" : undefined}>
        <div>
          <p>Generated component and contract evidence</p>
          <h1>BuildWithHQ component catalog</h1>
          <p>{buildWithHQCatalog.totals.modules} SDK surfaces, {buildWithHQCatalog.totals.components_bound} page renderers and {buildWithHQCatalog.totals.operations} server operations.</p>
        </div>
        <label>
          Search components, routes or procedures
          <input value={query} onChange={(event) => setQuery(event.target.value)} type="search" />
        </label>
      </header>

      <div className={styled ? "bwhq-catalog__layout" : undefined}>
        <nav aria-label="First-class modules" className={styled ? "bwhq-catalog__menu" : undefined}>
          <h2>Modules and API surfaces</h2>
          <ul>
            {filtered.map((module) => (
              <li key={module.api_base_path}>
                <button type="button" aria-current={selected === module ? "page" : undefined} onClick={() => setSelectedKey(module.api_base_path)}>
                  <span>{module.display_name}</span>
                  <small>{module.operations.length} operations</small>
                </button>
              </li>
            ))}
          </ul>
        </nav>

        <main className={styled ? "bwhq-catalog__main" : undefined}>
          {selected ? (
            <article>
              <header>
                <p>{selected.component_key ?? "Server API surface"}</p>
                <h2>{selected.display_name}</h2>
                <code>{selected.api_base_path}</code>
              </header>
              <dl className={styled ? "bwhq-catalog__facts" : undefined}>
                <div><dt>React renderer</dt><dd>{selected.component.name ?? "Not a page renderer"}</dd></div>
                <div><dt>SDK descriptor</dt><dd>{selected.descriptor.file}:{selected.descriptor.line}</dd></div>
                <div><dt>Runtime proof</dt><dd>{selected.operations.filter((operation) => operation.runtime_evidence.status === "observed").length}/{selected.operations.length} observed in supplied evidence</dd></div>
              </dl>
              <div className={styled ? "bwhq-catalog__table" : undefined}>
                <table>
                  <thead><tr><th>HTTP</th><th>Browser function</th><th>Service member</th><th>Stored procedure</th><th>Evidence</th></tr></thead>
                  <tbody>
                    {selected.operations.map((operation) => (
                      <tr key={operation.operation_id}>
                        <td><strong>{operation.method}</strong><br /><code>{operation.route}</code></td>
                        <td>{operation.browser_calls.length ? operation.browser_calls.map((call) => <code key={call.function}>{call.function}<br /></code>) : <span>Server API only</span>}</td>
                        <td><code>{operation.service.interface}.{operation.service.method}</code></td>
                        <td>{operation.procedures.map((procedure) => <code key={procedure.key}>{procedure.procedure ?? procedure.key}<br /></code>)}</td>
                        <td>{operation.join_evidence}<br /><small>{operation.runtime_evidence.status}</small></td>
                      </tr>
                    ))}
                  </tbody>
                </table>
              </div>
            </article>
          ) : <p>No catalog entry matches that search.</p>}
        </main>

        <aside className={styled ? "bwhq-catalog__aside" : undefined}>
          <h2>Authoring contracts</h2>
          <h3>Core blocks</h3>
          <ul>{buildWithHQCatalog.core_components.map((component) => <li key={component.component_key}><code>{component.component_key}</code></li>)}</ul>
          <h3>Safe data flow</h3>
          <ol>
            <li>Load the server-produced page bootstrap.</li>
            <li>Render only returned component contracts.</li>
            <li>Call the authenticated API or a reviewed binding key.</li>
            <li>Let SQL apply tenant, DataRole, record and location scope.</li>
          </ol>
          <p><strong>Never send a database name or tenant identifier as proof of access.</strong></p>
        </aside>
      </div>
    </section>
  );
};

export const UnstyledBuildWithHQComponentCatalog = (props: Omit<BuildWithHQComponentCatalogProps, "styled">) =>
  <CatalogBody {...props} styled={false} />;

export const StyledBuildWithHQComponentCatalog = (props: Omit<BuildWithHQComponentCatalogProps, "styled">) =>
  <CatalogBody {...props} styled />;

.bwhq-catalog--styled {
  --catalog-border: #dce2ea;
  --catalog-ink: #172033;
  --catalog-muted: #637087;
  --catalog-accent: #3659e3;
  color: var(--catalog-ink);
  font: 14px/1.5 Inter, ui-sans-serif, system-ui, sans-serif;
  width: 100%;
}
.bwhq-catalog--styled * { box-sizing: border-box; }
.bwhq-catalog__header { align-items: end; border-bottom: 1px solid var(--catalog-border); display: flex; gap: 32px; justify-content: space-between; padding: 24px; }
.bwhq-catalog__header h1 { font-size: clamp(1.8rem, 4vw, 3rem); margin: 0; }
.bwhq-catalog__header p { color: var(--catalog-muted); margin: 4px 0; }
.bwhq-catalog__header label { display: grid; font-weight: 700; gap: 6px; min-width: min(360px, 100%); }
.bwhq-catalog__header input { border: 1px solid var(--catalog-border); border-radius: 8px; font: inherit; padding: 10px 12px; }
.bwhq-catalog__layout { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(220px, 280px); min-height: 680px; width: 100%; }
.bwhq-catalog__menu, .bwhq-catalog__aside { padding: 20px; }
.bwhq-catalog__menu { border-right: 1px solid var(--catalog-border); }
.bwhq-catalog__aside { border-left: 1px solid var(--catalog-border); }
.bwhq-catalog__menu h2, .bwhq-catalog__aside h2 { font-size: 1rem; margin-top: 0; }
.bwhq-catalog__menu ul, .bwhq-catalog__aside ul { list-style: none; margin: 0; padding: 0; }
.bwhq-catalog__menu button { background: transparent; border: 0; border-radius: 7px; color: inherit; cursor: pointer; display: grid; font: inherit; padding: 9px 10px; text-align: left; width: 100%; }
.bwhq-catalog__menu button[aria-current="page"] { background: #eef2ff; color: #243da2; }
.bwhq-catalog__menu small { color: var(--catalog-muted); }
.bwhq-catalog__main { min-width: 0; padding: 28px; }
.bwhq-catalog__main article > header p { color: var(--catalog-accent); font-weight: 700; margin: 0; }
.bwhq-catalog__main article > header h2 { font-size: 2rem; margin: 2px 0 8px; }
.bwhq-catalog__facts { display: grid; gap: 10px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 24px 0; }
.bwhq-catalog__facts div { background: #f7f9fc; border-radius: 8px; padding: 12px; }
.bwhq-catalog__facts dt { color: var(--catalog-muted); font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.bwhq-catalog__facts dd { margin: 4px 0 0; overflow-wrap: anywhere; }
.bwhq-catalog__table { overflow-x: auto; }
.bwhq-catalog__table table { border-collapse: collapse; min-width: 900px; width: 100%; }
.bwhq-catalog__table th, .bwhq-catalog__table td { border-bottom: 1px solid var(--catalog-border); padding: 10px; text-align: left; vertical-align: top; }
.bwhq-catalog__table code { font: 12px/1.45 "JetBrains Mono", ui-monospace, monospace; overflow-wrap: anywhere; }
.bwhq-catalog__aside li { margin: 5px 0; }
@media (max-width: 1050px) { .bwhq-catalog__layout { grid-template-columns: 240px minmax(0, 1fr); } .bwhq-catalog__aside { border-left: 0; border-top: 1px solid var(--catalog-border); grid-column: 1 / -1; } }
@media (max-width: 720px) { .bwhq-catalog__header { align-items: stretch; flex-direction: column; } .bwhq-catalog__layout { display: block; } .bwhq-catalog__menu { border-bottom: 1px solid var(--catalog-border); border-right: 0; } .bwhq-catalog__facts { grid-template-columns: 1fr; } }
.bwhq-capability { border: 1px solid var(--catalog-border, #dce2ea); border-radius: 12px; color: var(--catalog-ink, #172033); display: grid; gap: 12px; padding: 20px; }
.bwhq-capability header p, .bwhq-capability header h2 { margin: 0; }
.bwhq-capability header p { color: var(--catalog-accent, #3659e3); font-weight: 700; }
.bwhq-capability header span { background: #eef2ff; border-radius: 999px; display: inline-block; margin-top: 8px; padding: 3px 9px; }
.bwhq-capability h3, .bwhq-capability p, .bwhq-capability ul, .bwhq-capability dl { margin: 0; }
.bwhq-capability dl { display: grid; gap: 8px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bwhq-capability dl div { background: #f7f9fc; border-radius: 8px; padding: 10px; }
.bwhq-capability dt { color: #637087; font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.bwhq-capability dd { margin: 3px 0 0; overflow-wrap: anywhere; }
.bwhq-workspace { color: var(--catalog-ink, #172033); width: 100%; }
.bwhq-workspace__header { align-items: center; border-bottom: 1px solid var(--catalog-border, #dce2ea); display: flex; justify-content: space-between; padding: 16px 24px; }
.bwhq-workspace__header p, .bwhq-workspace__header h1 { margin: 0; }
.bwhq-workspace__columns { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(220px, 280px); min-height: 640px; }
.bwhq-workspace__menu, .bwhq-workspace__main, .bwhq-workspace__context { padding: 20px; }
.bwhq-workspace__menu { border-right: 1px solid var(--catalog-border, #dce2ea); }
.bwhq-workspace__context { border-left: 1px solid var(--catalog-border, #dce2ea); }
.bwhq-app-menu ul { list-style: none; margin: 0; padding: 0; }
.bwhq-app-menu li { margin: 4px 0; }
.bwhq-app-menu a, .bwhq-app-menu span { border-radius: 7px; color: inherit; display: block; padding: 8px 10px; text-decoration: none; }
.bwhq-app-menu a[aria-current="page"] { background: #eef2ff; color: #243da2; font-weight: 700; }
.bwhq-data-list, .bwhq-headless-list, .bwhq-native-frame { border: 1px solid var(--catalog-border, #dce2ea); border-radius: 10px; padding: 16px; }
.bwhq-data-list ul, .bwhq-headless-list ul { list-style: none; margin: 0; padding: 0; }
.bwhq-headless-list button { align-items: start; background: transparent; border: 0; border-bottom: 1px solid var(--catalog-border, #dce2ea); cursor: pointer; display: grid; gap: 3px; padding: 10px 0; text-align: left; width: 100%; }
.bwhq-headless-list button span { color: #637087; }
.bwhq-runtime-page { min-width: 0; width: 100%; }
.bwhq-headless-resource, .bwhq-headless-directory { color: var(--catalog-ink, #172033); display: grid; gap: 16px; width: 100%; }
.bwhq-headless-resource > header, .bwhq-headless-directory > header { align-items: end; display: flex; gap: 20px; justify-content: space-between; }
.bwhq-headless-resource header p, .bwhq-headless-resource header h2, .bwhq-headless-directory h1 { margin: 0; }
.bwhq-headless-resource label, .bwhq-headless-directory label { display: grid; gap: 4px; }
.bwhq-headless-resource input, .bwhq-headless-directory input { border: 1px solid var(--catalog-border, #dce2ea); border-radius: 7px; font: inherit; padding: 8px 10px; }
.bwhq-headless-resource > ul { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; }
.bwhq-headless-resource > ul li { border-bottom: 1px solid var(--catalog-border, #dce2ea); display: grid; padding: 10px 0; }
.bwhq-headless-resource > ul li span { color: #637087; }
.bwhq-headless-resource > nav { align-items: center; display: flex; gap: 10px; justify-content: center; }
.bwhq-headless-resource form { border: 1px solid var(--catalog-border, #dce2ea); border-radius: 10px; display: grid; gap: 10px; padding: 16px; }
.bwhq-headless-resource form h3 { margin: 0; }
.bwhq-headless-directory details { border: 1px solid var(--catalog-border, #dce2ea); border-radius: 8px; padding: 12px; }
.bwhq-headless-directory summary { cursor: pointer; display: flex; justify-content: space-between; }
.bwhq-headless-directory table { border-collapse: collapse; margin-top: 10px; width: 100%; }
.bwhq-headless-directory th, .bwhq-headless-directory td { border-bottom: 1px solid var(--catalog-border, #dce2ea); padding: 8px; text-align: left; vertical-align: top; }
@media (max-width: 1050px) { .bwhq-workspace__columns { grid-template-columns: 240px minmax(0, 1fr); } .bwhq-workspace__context { border-left: 0; border-top: 1px solid var(--catalog-border, #dce2ea); grid-column: 1 / -1; } }
@media (max-width: 720px) { .bwhq-capability dl { grid-template-columns: 1fr; } .bwhq-workspace__columns { display: block; } .bwhq-workspace__menu { border-bottom: 1px solid var(--catalog-border, #dce2ea); border-right: 0; } .bwhq-headless-resource > header, .bwhq-headless-directory > header { align-items: stretch; flex-direction: column; } .bwhq-headless-directory { overflow-x: auto; } }

import { buildWithHQCatalog, type CatalogCapability } from "./catalog-data.generated";

export interface FirstClassCapabilityProps {
  readonly capability: CatalogCapability;
  readonly styled?: boolean;
  readonly showSecurity?: boolean;
}

const implementationLabel = (capability: CatalogCapability): string => {
  if (capability.implementation.kind === "page-module") return "Native page module";
  if (capability.implementation.kind === "shell-component") return "Tenant shell component";
  return "Background platform capability";
};

export const FirstClassCapability = ({ capability, styled = false, showSecurity = true }: FirstClassCapabilityProps) => (
  <article className={styled ? "bwhq-capability" : undefined} data-capability={capability.slug}>
    <header>
      <p>{capability.experience}</p>
      <h2>{capability.title}</h2>
      <span>{implementationLabel(capability)}</span>
    </header>
    <p>{capability.summary}</p>
    <h3>What developers can build</h3>
    <ul>{capability.capabilities.map((item) => <li key={item}>{item}</li>)}</ul>
    <h3>Common uses</h3>
    <ul>{capability.common_uses.map((item) => <li key={item}>{item}</li>)}</ul>
    <dl>
      <div><dt>Page block</dt><dd>{capability.implementation.native_component_key ?? "Not a page block"}</dd></div>
      <div><dt>React</dt><dd>{capability.implementation.react_components.map((item) => item.component).join(", ") || "No interactive renderer is currently exposed"}</dd></div>
      <div><dt>API roots</dt><dd>{capability.implementation.api_base_paths.join(", ") || "Background service contracts"}</dd></div>
    </dl>
    {showSecurity && <details><summary>Security boundary</summary><p>{capability.security}</p></details>}
    <p><a href={capability.documentation_path}>Implementation guide for {capability.title}</a></p>
  </article>
);

export const UnstyledFirstClassCapability = (props: Omit<FirstClassCapabilityProps, "styled">) =>
  <FirstClassCapability {...props} styled={false} />;

export const StyledFirstClassCapability = (props: Omit<FirstClassCapabilityProps, "styled">) =>
  <FirstClassCapability {...props} styled />;

export const firstClassCapabilities = buildWithHQCatalog.first_class_capabilities;

export const UnstyledUniversalInboxCapability = () => <UnstyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "universal-inbox")!} />;
export const StyledUniversalInboxCapability = () => <StyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "universal-inbox")!} />;
export const UnstyledChecklistsSignoffsCapability = () => <UnstyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "checklists-signoffs")!} />;
export const StyledChecklistsSignoffsCapability = () => <StyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "checklists-signoffs")!} />;
export const UnstyledGoclawCapability = () => <UnstyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "goclaw")!} />;
export const StyledGoclawCapability = () => <StyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "goclaw")!} />;
export const UnstyledAiInsightsCapability = () => <UnstyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "ai-insights")!} />;
export const StyledAiInsightsCapability = () => <StyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "ai-insights")!} />;
export const UnstyledContactsCapability = () => <UnstyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "contacts")!} />;
export const StyledContactsCapability = () => <StyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "contacts")!} />;
export const UnstyledWorkOrdersCapability = () => <UnstyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "work-orders")!} />;
export const StyledWorkOrdersCapability = () => <StyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "work-orders")!} />;
export const UnstyledReservationsCapability = () => <UnstyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "reservations")!} />;
export const StyledReservationsCapability = () => <StyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "reservations")!} />;
export const UnstyledCalendarCapability = () => <UnstyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "calendar")!} />;
export const StyledCalendarCapability = () => <StyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "calendar")!} />;
export const UnstyledFilesCapability = () => <UnstyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "files")!} />;
export const StyledFilesCapability = () => <StyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "files")!} />;
export const UnstyledConversationsCapability = () => <UnstyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "conversations")!} />;
export const StyledConversationsCapability = () => <StyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "conversations")!} />;
export const UnstyledCompanyNewsCapability = () => <UnstyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "company-news")!} />;
export const StyledCompanyNewsCapability = () => <StyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "company-news")!} />;
export const UnstyledKnowledgeCoreCapability = () => <UnstyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "knowledge-core")!} />;
export const StyledKnowledgeCoreCapability = () => <StyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "knowledge-core")!} />;
export const UnstyledWebLinksCapability = () => <UnstyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "web-links")!} />;
export const StyledWebLinksCapability = () => <StyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "web-links")!} />;
export const UnstyledChatRoomsCapability = () => <UnstyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "chat-rooms")!} />;
export const StyledChatRoomsCapability = () => <StyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "chat-rooms")!} />;
export const UnstyledDiscussionBoardsCapability = () => <UnstyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "discussion-boards")!} />;
export const StyledDiscussionBoardsCapability = () => <StyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "discussion-boards")!} />;
export const UnstyledMailReaderCapability = () => <UnstyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "mail-reader")!} />;
export const StyledMailReaderCapability = () => <StyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "mail-reader")!} />;
export const UnstyledFavoritesCapability = () => <UnstyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "favorites")!} />;
export const StyledFavoritesCapability = () => <StyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "favorites")!} />;
export const UnstyledNotificationsCapability = () => <UnstyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "notifications")!} />;
export const StyledNotificationsCapability = () => <StyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "notifications")!} />;
export const UnstyledDynamicRecordsCapability = () => <UnstyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "dynamic-records")!} />;
export const StyledDynamicRecordsCapability = () => <StyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "dynamic-records")!} />;
export const UnstyledActiveWorkplaceCapability = () => <UnstyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "active-workplace")!} />;
export const StyledActiveWorkplaceCapability = () => <StyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "active-workplace")!} />;
export const UnstyledRecordRelationsCapability = () => <UnstyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "record-relations")!} />;
export const StyledRecordRelationsCapability = () => <StyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "record-relations")!} />;
export const UnstyledRecordActivityCapability = () => <UnstyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "record-activity")!} />;
export const StyledRecordActivityCapability = () => <StyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "record-activity")!} />;
export const UnstyledGlobalSearchCapability = () => <UnstyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "global-search")!} />;
export const StyledGlobalSearchCapability = () => <StyledFirstClassCapability capability={firstClassCapabilities.find((item) => item.slug === "global-search")!} />;

import type { RuntimePageBlock } from "@buildwithhq/page-runtime";

export interface NativeModuleRecipe {
  readonly moduleKey: string | null;
  readonly componentKey: string;
  readonly rendererKey: string;
  readonly displayName: string;
  readonly apiBasePath: string;
  readonly unstyledBlock: RuntimePageBlock;
  readonly styledComposition: RuntimePageBlock;
}

export const nativeModuleRecipes = [
  {
    "moduleKey": "active-workplace",
    "componentKey": "module.active-workplace",
    "rendererKey": "module.active-workplace",
    "displayName": "Active Workplace",
    "apiBasePath": "/api/modules/active-workplace",
    "unstyledBlock": {
      "_id": "active-workplace-module",
      "_type": "module.active-workplace",
      "props": {
        "title": "Active Workplace"
      },
      "children": []
    },
    "styledComposition": {
      "_id": "active-workplace-section",
      "_type": "core.container",
      "props": {
        "layout": "stack"
      },
      "children": [
        {
          "_id": "active-workplace-heading",
          "_type": "core.text",
          "_parent": "active-workplace-section",
          "props": {
            "text": "Active Workplace",
            "variant": "heading",
            "align": "left"
          },
          "children": []
        },
        {
          "_id": "active-workplace-module",
          "_type": "module.active-workplace",
          "_parent": "active-workplace-section",
          "props": {
            "title": "Active Workplace"
          },
          "children": []
        }
      ]
    }
  },
  {
    "moduleKey": "ai_insights",
    "componentKey": "module.ai-insights",
    "rendererKey": "module.ai-insights",
    "displayName": "Ai Insights",
    "apiBasePath": "/api/modules/ai-insights",
    "unstyledBlock": {
      "_id": "ai-insights-module",
      "_type": "module.ai-insights",
      "props": {
        "title": "Ai Insights"
      },
      "children": []
    },
    "styledComposition": {
      "_id": "ai-insights-section",
      "_type": "core.container",
      "props": {
        "layout": "stack"
      },
      "children": [
        {
          "_id": "ai-insights-heading",
          "_type": "core.text",
          "_parent": "ai-insights-section",
          "props": {
            "text": "Ai Insights",
            "variant": "heading",
            "align": "left"
          },
          "children": []
        },
        {
          "_id": "ai-insights-module",
          "_type": "module.ai-insights",
          "_parent": "ai-insights-section",
          "props": {
            "title": "Ai Insights"
          },
          "children": []
        }
      ]
    }
  },
  {
    "moduleKey": "calendar",
    "componentKey": "module.calendar",
    "rendererKey": "module.calendar",
    "displayName": "Calendar",
    "apiBasePath": "/api/modules/calendar",
    "unstyledBlock": {
      "_id": "calendar-module",
      "_type": "module.calendar",
      "props": {
        "title": "Calendar"
      },
      "children": []
    },
    "styledComposition": {
      "_id": "calendar-section",
      "_type": "core.container",
      "props": {
        "layout": "stack"
      },
      "children": [
        {
          "_id": "calendar-heading",
          "_type": "core.text",
          "_parent": "calendar-section",
          "props": {
            "text": "Calendar",
            "variant": "heading",
            "align": "left"
          },
          "children": []
        },
        {
          "_id": "calendar-module",
          "_type": "module.calendar",
          "_parent": "calendar-section",
          "props": {
            "title": "Calendar"
          },
          "children": []
        }
      ]
    }
  },
  {
    "moduleKey": "chat-rooms",
    "componentKey": "module.chat-rooms",
    "rendererKey": "module.chat-rooms",
    "displayName": "Chat Rooms",
    "apiBasePath": "/api/modules/chat-rooms",
    "unstyledBlock": {
      "_id": "chat-rooms-module",
      "_type": "module.chat-rooms",
      "props": {
        "title": "Chat Rooms"
      },
      "children": []
    },
    "styledComposition": {
      "_id": "chat-rooms-section",
      "_type": "core.container",
      "props": {
        "layout": "stack"
      },
      "children": [
        {
          "_id": "chat-rooms-heading",
          "_type": "core.text",
          "_parent": "chat-rooms-section",
          "props": {
            "text": "Chat Rooms",
            "variant": "heading",
            "align": "left"
          },
          "children": []
        },
        {
          "_id": "chat-rooms-module",
          "_type": "module.chat-rooms",
          "_parent": "chat-rooms-section",
          "props": {
            "title": "Chat Rooms"
          },
          "children": []
        }
      ]
    }
  },
  {
    "moduleKey": "checklists_signoffs",
    "componentKey": "module.checklists-signoffs",
    "rendererKey": "module.checklists-signoffs",
    "displayName": "Checklists Signoffs",
    "apiBasePath": "/api/modules/checklists-signoffs",
    "unstyledBlock": {
      "_id": "checklists-signoffs-module",
      "_type": "module.checklists-signoffs",
      "props": {
        "title": "Checklists Signoffs"
      },
      "children": []
    },
    "styledComposition": {
      "_id": "checklists-signoffs-section",
      "_type": "core.container",
      "props": {
        "layout": "stack"
      },
      "children": [
        {
          "_id": "checklists-signoffs-heading",
          "_type": "core.text",
          "_parent": "checklists-signoffs-section",
          "props": {
            "text": "Checklists Signoffs",
            "variant": "heading",
            "align": "left"
          },
          "children": []
        },
        {
          "_id": "checklists-signoffs-module",
          "_type": "module.checklists-signoffs",
          "_parent": "checklists-signoffs-section",
          "props": {
            "title": "Checklists Signoffs"
          },
          "children": []
        }
      ]
    }
  },
  {
    "moduleKey": "company-news",
    "componentKey": "module.company-news",
    "rendererKey": "module.company-news",
    "displayName": "Company News",
    "apiBasePath": "/api/modules/company-news",
    "unstyledBlock": {
      "_id": "company-news-module",
      "_type": "module.company-news",
      "props": {
        "title": "Company News"
      },
      "children": []
    },
    "styledComposition": {
      "_id": "company-news-section",
      "_type": "core.container",
      "props": {
        "layout": "stack"
      },
      "children": [
        {
          "_id": "company-news-heading",
          "_type": "core.text",
          "_parent": "company-news-section",
          "props": {
            "text": "Company News",
            "variant": "heading",
            "align": "left"
          },
          "children": []
        },
        {
          "_id": "company-news-module",
          "_type": "module.company-news",
          "_parent": "company-news-section",
          "props": {
            "title": "Company News"
          },
          "children": []
        }
      ]
    }
  },
  {
    "moduleKey": "contacts",
    "componentKey": "module.contacts",
    "rendererKey": "module.contacts",
    "displayName": "Contacts",
    "apiBasePath": "/api/modules/contacts",
    "unstyledBlock": {
      "_id": "contacts-module",
      "_type": "module.contacts",
      "props": {
        "title": "Contacts"
      },
      "children": []
    },
    "styledComposition": {
      "_id": "contacts-section",
      "_type": "core.container",
      "props": {
        "layout": "stack"
      },
      "children": [
        {
          "_id": "contacts-heading",
          "_type": "core.text",
          "_parent": "contacts-section",
          "props": {
            "text": "Contacts",
            "variant": "heading",
            "align": "left"
          },
          "children": []
        },
        {
          "_id": "contacts-module",
          "_type": "module.contacts",
          "_parent": "contacts-section",
          "props": {
            "title": "Contacts"
          },
          "children": []
        }
      ]
    }
  },
  {
    "moduleKey": "conversations",
    "componentKey": "module.conversations",
    "rendererKey": "module.conversations",
    "displayName": "Conversations",
    "apiBasePath": "/api/modules/conversations",
    "unstyledBlock": {
      "_id": "conversations-module",
      "_type": "module.conversations",
      "props": {
        "title": "Conversations"
      },
      "children": []
    },
    "styledComposition": {
      "_id": "conversations-section",
      "_type": "core.container",
      "props": {
        "layout": "stack"
      },
      "children": [
        {
          "_id": "conversations-heading",
          "_type": "core.text",
          "_parent": "conversations-section",
          "props": {
            "text": "Conversations",
            "variant": "heading",
            "align": "left"
          },
          "children": []
        },
        {
          "_id": "conversations-module",
          "_type": "module.conversations",
          "_parent": "conversations-section",
          "props": {
            "title": "Conversations"
          },
          "children": []
        }
      ]
    }
  },
  {
    "moduleKey": "discussion-boards",
    "componentKey": "module.discussion-boards",
    "rendererKey": "module.discussion-boards",
    "displayName": "Discussion Boards",
    "apiBasePath": "/api/modules/discussion-boards",
    "unstyledBlock": {
      "_id": "discussion-boards-module",
      "_type": "module.discussion-boards",
      "props": {
        "title": "Discussion Boards"
      },
      "children": []
    },
    "styledComposition": {
      "_id": "discussion-boards-section",
      "_type": "core.container",
      "props": {
        "layout": "stack"
      },
      "children": [
        {
          "_id": "discussion-boards-heading",
          "_type": "core.text",
          "_parent": "discussion-boards-section",
          "props": {
            "text": "Discussion Boards",
            "variant": "heading",
            "align": "left"
          },
          "children": []
        },
        {
          "_id": "discussion-boards-module",
          "_type": "module.discussion-boards",
          "_parent": "discussion-boards-section",
          "props": {
            "title": "Discussion Boards"
          },
          "children": []
        }
      ]
    }
  },
  {
    "moduleKey": null,
    "componentKey": "module.dynamic-records",
    "rendererKey": "module.dynamic-records",
    "displayName": "Dynamic Records",
    "apiBasePath": "/api/modules/dynamic",
    "unstyledBlock": {
      "_id": "dynamic-records-module",
      "_type": "module.dynamic-records",
      "props": {
        "title": "Dynamic Records"
      },
      "children": []
    },
    "styledComposition": {
      "_id": "dynamic-records-section",
      "_type": "core.container",
      "props": {
        "layout": "stack"
      },
      "children": [
        {
          "_id": "dynamic-records-heading",
          "_type": "core.text",
          "_parent": "dynamic-records-section",
          "props": {
            "text": "Dynamic Records",
            "variant": "heading",
            "align": "left"
          },
          "children": []
        },
        {
          "_id": "dynamic-records-module",
          "_type": "module.dynamic-records",
          "_parent": "dynamic-records-section",
          "props": {
            "title": "Dynamic Records"
          },
          "children": []
        }
      ]
    }
  },
  {
    "moduleKey": "favorites",
    "componentKey": "module.favorites",
    "rendererKey": "module.favorites",
    "displayName": "Favorites",
    "apiBasePath": "/api/modules/favorites",
    "unstyledBlock": {
      "_id": "favorites-module",
      "_type": "module.favorites",
      "props": {
        "title": "Favorites"
      },
      "children": []
    },
    "styledComposition": {
      "_id": "favorites-section",
      "_type": "core.container",
      "props": {
        "layout": "stack"
      },
      "children": [
        {
          "_id": "favorites-heading",
          "_type": "core.text",
          "_parent": "favorites-section",
          "props": {
            "text": "Favorites",
            "variant": "heading",
            "align": "left"
          },
          "children": []
        },
        {
          "_id": "favorites-module",
          "_type": "module.favorites",
          "_parent": "favorites-section",
          "props": {
            "title": "Favorites"
          },
          "children": []
        }
      ]
    }
  },
  {
    "moduleKey": "files",
    "componentKey": "module.files",
    "rendererKey": "module.files",
    "displayName": "Files",
    "apiBasePath": "/api/modules/files",
    "unstyledBlock": {
      "_id": "files-module",
      "_type": "module.files",
      "props": {
        "title": "Files"
      },
      "children": []
    },
    "styledComposition": {
      "_id": "files-section",
      "_type": "core.container",
      "props": {
        "layout": "stack"
      },
      "children": [
        {
          "_id": "files-heading",
          "_type": "core.text",
          "_parent": "files-section",
          "props": {
            "text": "Files",
            "variant": "heading",
            "align": "left"
          },
          "children": []
        },
        {
          "_id": "files-module",
          "_type": "module.files",
          "_parent": "files-section",
          "props": {
            "title": "Files"
          },
          "children": []
        }
      ]
    }
  },
  {
    "moduleKey": "global-search",
    "componentKey": "module.global-search",
    "rendererKey": "module.global-search",
    "displayName": "Global Search",
    "apiBasePath": "/api/modules/global-search",
    "unstyledBlock": {
      "_id": "global-search-module",
      "_type": "module.global-search",
      "props": {
        "title": "Global Search"
      },
      "children": []
    },
    "styledComposition": {
      "_id": "global-search-section",
      "_type": "core.container",
      "props": {
        "layout": "stack"
      },
      "children": [
        {
          "_id": "global-search-heading",
          "_type": "core.text",
          "_parent": "global-search-section",
          "props": {
            "text": "Global Search",
            "variant": "heading",
            "align": "left"
          },
          "children": []
        },
        {
          "_id": "global-search-module",
          "_type": "module.global-search",
          "_parent": "global-search-section",
          "props": {
            "title": "Global Search"
          },
          "children": []
        }
      ]
    }
  },
  {
    "moduleKey": "knowledge-articles",
    "componentKey": "module.knowledge-articles",
    "rendererKey": "module.knowledge-articles",
    "displayName": "Knowledge Articles",
    "apiBasePath": "/api/modules/knowledge-articles",
    "unstyledBlock": {
      "_id": "knowledge-articles-module",
      "_type": "module.knowledge-articles",
      "props": {
        "title": "Knowledge Articles"
      },
      "children": []
    },
    "styledComposition": {
      "_id": "knowledge-articles-section",
      "_type": "core.container",
      "props": {
        "layout": "stack"
      },
      "children": [
        {
          "_id": "knowledge-articles-heading",
          "_type": "core.text",
          "_parent": "knowledge-articles-section",
          "props": {
            "text": "Knowledge Articles",
            "variant": "heading",
            "align": "left"
          },
          "children": []
        },
        {
          "_id": "knowledge-articles-module",
          "_type": "module.knowledge-articles",
          "_parent": "knowledge-articles-section",
          "props": {
            "title": "Knowledge Articles"
          },
          "children": []
        }
      ]
    }
  },
  {
    "moduleKey": "mail-reader",
    "componentKey": "module.mail-reader",
    "rendererKey": "module.mail-reader",
    "displayName": "Mail Reader",
    "apiBasePath": "/api/modules/mail-reader",
    "unstyledBlock": {
      "_id": "mail-reader-module",
      "_type": "module.mail-reader",
      "props": {
        "title": "Mail Reader"
      },
      "children": []
    },
    "styledComposition": {
      "_id": "mail-reader-section",
      "_type": "core.container",
      "props": {
        "layout": "stack"
      },
      "children": [
        {
          "_id": "mail-reader-heading",
          "_type": "core.text",
          "_parent": "mail-reader-section",
          "props": {
            "text": "Mail Reader",
            "variant": "heading",
            "align": "left"
          },
          "children": []
        },
        {
          "_id": "mail-reader-module",
          "_type": "module.mail-reader",
          "_parent": "mail-reader-section",
          "props": {
            "title": "Mail Reader"
          },
          "children": []
        }
      ]
    }
  },
  {
    "moduleKey": "notifications",
    "componentKey": "module.notifications",
    "rendererKey": "module.notifications",
    "displayName": "Notifications",
    "apiBasePath": "/api/modules/notifications",
    "unstyledBlock": {
      "_id": "notifications-module",
      "_type": "module.notifications",
      "props": {
        "title": "Notifications"
      },
      "children": []
    },
    "styledComposition": {
      "_id": "notifications-section",
      "_type": "core.container",
      "props": {
        "layout": "stack"
      },
      "children": [
        {
          "_id": "notifications-heading",
          "_type": "core.text",
          "_parent": "notifications-section",
          "props": {
            "text": "Notifications",
            "variant": "heading",
            "align": "left"
          },
          "children": []
        },
        {
          "_id": "notifications-module",
          "_type": "module.notifications",
          "_parent": "notifications-section",
          "props": {
            "title": "Notifications"
          },
          "children": []
        }
      ]
    }
  },
  {
    "moduleKey": "record-activity",
    "componentKey": "module.record-activity",
    "rendererKey": "module.record-activity",
    "displayName": "Record Activity",
    "apiBasePath": "/api/modules/record-activity",
    "unstyledBlock": {
      "_id": "record-activity-module",
      "_type": "module.record-activity",
      "props": {
        "title": "Record Activity"
      },
      "children": []
    },
    "styledComposition": {
      "_id": "record-activity-section",
      "_type": "core.container",
      "props": {
        "layout": "stack"
      },
      "children": [
        {
          "_id": "record-activity-heading",
          "_type": "core.text",
          "_parent": "record-activity-section",
          "props": {
            "text": "Record Activity",
            "variant": "heading",
            "align": "left"
          },
          "children": []
        },
        {
          "_id": "record-activity-module",
          "_type": "module.record-activity",
          "_parent": "record-activity-section",
          "props": {
            "title": "Record Activity"
          },
          "children": []
        }
      ]
    }
  },
  {
    "moduleKey": "record-graph",
    "componentKey": "module.record-graph",
    "rendererKey": "module.record-graph",
    "displayName": "Record Graph",
    "apiBasePath": "/api/modules/record-graph",
    "unstyledBlock": {
      "_id": "record-graph-module",
      "_type": "module.record-graph",
      "props": {
        "title": "Record Graph"
      },
      "children": []
    },
    "styledComposition": {
      "_id": "record-graph-section",
      "_type": "core.container",
      "props": {
        "layout": "stack"
      },
      "children": [
        {
          "_id": "record-graph-heading",
          "_type": "core.text",
          "_parent": "record-graph-section",
          "props": {
            "text": "Record Graph",
            "variant": "heading",
            "align": "left"
          },
          "children": []
        },
        {
          "_id": "record-graph-module",
          "_type": "module.record-graph",
          "_parent": "record-graph-section",
          "props": {
            "title": "Record Graph"
          },
          "children": []
        }
      ]
    }
  },
  {
    "moduleKey": "reservations",
    "componentKey": "module.reservations",
    "rendererKey": "module.reservations",
    "displayName": "Reservations",
    "apiBasePath": "/api/modules/reservations",
    "unstyledBlock": {
      "_id": "reservations-module",
      "_type": "module.reservations",
      "props": {
        "title": "Reservations"
      },
      "children": []
    },
    "styledComposition": {
      "_id": "reservations-section",
      "_type": "core.container",
      "props": {
        "layout": "stack"
      },
      "children": [
        {
          "_id": "reservations-heading",
          "_type": "core.text",
          "_parent": "reservations-section",
          "props": {
            "text": "Reservations",
            "variant": "heading",
            "align": "left"
          },
          "children": []
        },
        {
          "_id": "reservations-module",
          "_type": "module.reservations",
          "_parent": "reservations-section",
          "props": {
            "title": "Reservations"
          },
          "children": []
        }
      ]
    }
  },
  {
    "moduleKey": "web-links",
    "componentKey": "module.web-links",
    "rendererKey": "module.web-links",
    "displayName": "Web Links",
    "apiBasePath": "/api/modules/web-links",
    "unstyledBlock": {
      "_id": "web-links-module",
      "_type": "module.web-links",
      "props": {
        "title": "Web Links"
      },
      "children": []
    },
    "styledComposition": {
      "_id": "web-links-section",
      "_type": "core.container",
      "props": {
        "layout": "stack"
      },
      "children": [
        {
          "_id": "web-links-heading",
          "_type": "core.text",
          "_parent": "web-links-section",
          "props": {
            "text": "Web Links",
            "variant": "heading",
            "align": "left"
          },
          "children": []
        },
        {
          "_id": "web-links-module",
          "_type": "module.web-links",
          "_parent": "web-links-section",
          "props": {
            "title": "Web Links"
          },
          "children": []
        }
      ]
    }
  },
  {
    "moduleKey": "work_orders",
    "componentKey": "module.work-orders",
    "rendererKey": "module.work-orders",
    "displayName": "Work Orders",
    "apiBasePath": "/api/modules/work-orders",
    "unstyledBlock": {
      "_id": "work-orders-module",
      "_type": "module.work-orders",
      "props": {
        "title": "Work Orders"
      },
      "children": []
    },
    "styledComposition": {
      "_id": "work-orders-section",
      "_type": "core.container",
      "props": {
        "layout": "stack"
      },
      "children": [
        {
          "_id": "work-orders-heading",
          "_type": "core.text",
          "_parent": "work-orders-section",
          "props": {
            "text": "Work Orders",
            "variant": "heading",
            "align": "left"
          },
          "children": []
        },
        {
          "_id": "work-orders-module",
          "_type": "module.work-orders",
          "_parent": "work-orders-section",
          "props": {
            "title": "Work Orders"
          },
          "children": []
        }
      ]
    }
  }
] as const satisfies readonly NativeModuleRecipe[];

export const ActiveWorkplaceUnstyledBlock = nativeModuleRecipes.find((recipe) => recipe.componentKey === "module.active-workplace")!.unstyledBlock;
export const ActiveWorkplaceStyledComposition = nativeModuleRecipes.find((recipe) => recipe.componentKey === "module.active-workplace")!.styledComposition;
export const AiInsightsUnstyledBlock = nativeModuleRecipes.find((recipe) => recipe.componentKey === "module.ai-insights")!.unstyledBlock;
export const AiInsightsStyledComposition = nativeModuleRecipes.find((recipe) => recipe.componentKey === "module.ai-insights")!.styledComposition;
export const CalendarUnstyledBlock = nativeModuleRecipes.find((recipe) => recipe.componentKey === "module.calendar")!.unstyledBlock;
export const CalendarStyledComposition = nativeModuleRecipes.find((recipe) => recipe.componentKey === "module.calendar")!.styledComposition;
export const ChatRoomsUnstyledBlock = nativeModuleRecipes.find((recipe) => recipe.componentKey === "module.chat-rooms")!.unstyledBlock;
export const ChatRoomsStyledComposition = nativeModuleRecipes.find((recipe) => recipe.componentKey === "module.chat-rooms")!.styledComposition;
export const ChecklistsSignoffsUnstyledBlock = nativeModuleRecipes.find((recipe) => recipe.componentKey === "module.checklists-signoffs")!.unstyledBlock;
export const ChecklistsSignoffsStyledComposition = nativeModuleRecipes.find((recipe) => recipe.componentKey === "module.checklists-signoffs")!.styledComposition;
export const CompanyNewsUnstyledBlock = nativeModuleRecipes.find((recipe) => recipe.componentKey === "module.company-news")!.unstyledBlock;
export const CompanyNewsStyledComposition = nativeModuleRecipes.find((recipe) => recipe.componentKey === "module.company-news")!.styledComposition;
export const ContactsUnstyledBlock = nativeModuleRecipes.find((recipe) => recipe.componentKey === "module.contacts")!.unstyledBlock;
export const ContactsStyledComposition = nativeModuleRecipes.find((recipe) => recipe.componentKey === "module.contacts")!.styledComposition;
export const ConversationsUnstyledBlock = nativeModuleRecipes.find((recipe) => recipe.componentKey === "module.conversations")!.unstyledBlock;
export const ConversationsStyledComposition = nativeModuleRecipes.find((recipe) => recipe.componentKey === "module.conversations")!.styledComposition;
export const DiscussionBoardsUnstyledBlock = nativeModuleRecipes.find((recipe) => recipe.componentKey === "module.discussion-boards")!.unstyledBlock;
export const DiscussionBoardsStyledComposition = nativeModuleRecipes.find((recipe) => recipe.componentKey === "module.discussion-boards")!.styledComposition;
export const DynamicRecordsUnstyledBlock = nativeModuleRecipes.find((recipe) => recipe.componentKey === "module.dynamic-records")!.unstyledBlock;
export const DynamicRecordsStyledComposition = nativeModuleRecipes.find((recipe) => recipe.componentKey === "module.dynamic-records")!.styledComposition;
export const FavoritesUnstyledBlock = nativeModuleRecipes.find((recipe) => recipe.componentKey === "module.favorites")!.unstyledBlock;
export const FavoritesStyledComposition = nativeModuleRecipes.find((recipe) => recipe.componentKey === "module.favorites")!.styledComposition;
export const FilesUnstyledBlock = nativeModuleRecipes.find((recipe) => recipe.componentKey === "module.files")!.unstyledBlock;
export const FilesStyledComposition = nativeModuleRecipes.find((recipe) => recipe.componentKey === "module.files")!.styledComposition;
export const GlobalSearchUnstyledBlock = nativeModuleRecipes.find((recipe) => recipe.componentKey === "module.global-search")!.unstyledBlock;
export const GlobalSearchStyledComposition = nativeModuleRecipes.find((recipe) => recipe.componentKey === "module.global-search")!.styledComposition;
export const KnowledgeArticlesUnstyledBlock = nativeModuleRecipes.find((recipe) => recipe.componentKey === "module.knowledge-articles")!.unstyledBlock;
export const KnowledgeArticlesStyledComposition = nativeModuleRecipes.find((recipe) => recipe.componentKey === "module.knowledge-articles")!.styledComposition;
export const MailReaderUnstyledBlock = nativeModuleRecipes.find((recipe) => recipe.componentKey === "module.mail-reader")!.unstyledBlock;
export const MailReaderStyledComposition = nativeModuleRecipes.find((recipe) => recipe.componentKey === "module.mail-reader")!.styledComposition;
export const NotificationsUnstyledBlock = nativeModuleRecipes.find((recipe) => recipe.componentKey === "module.notifications")!.unstyledBlock;
export const NotificationsStyledComposition = nativeModuleRecipes.find((recipe) => recipe.componentKey === "module.notifications")!.styledComposition;
export const RecordActivityUnstyledBlock = nativeModuleRecipes.find((recipe) => recipe.componentKey === "module.record-activity")!.unstyledBlock;
export const RecordActivityStyledComposition = nativeModuleRecipes.find((recipe) => recipe.componentKey === "module.record-activity")!.styledComposition;
export const RecordGraphUnstyledBlock = nativeModuleRecipes.find((recipe) => recipe.componentKey === "module.record-graph")!.unstyledBlock;
export const RecordGraphStyledComposition = nativeModuleRecipes.find((recipe) => recipe.componentKey === "module.record-graph")!.styledComposition;
export const ReservationsUnstyledBlock = nativeModuleRecipes.find((recipe) => recipe.componentKey === "module.reservations")!.unstyledBlock;
export const ReservationsStyledComposition = nativeModuleRecipes.find((recipe) => recipe.componentKey === "module.reservations")!.styledComposition;
export const WebLinksUnstyledBlock = nativeModuleRecipes.find((recipe) => recipe.componentKey === "module.web-links")!.unstyledBlock;
export const WebLinksStyledComposition = nativeModuleRecipes.find((recipe) => recipe.componentKey === "module.web-links")!.styledComposition;
export const WorkOrdersUnstyledBlock = nativeModuleRecipes.find((recipe) => recipe.componentKey === "module.work-orders")!.unstyledBlock;
export const WorkOrdersStyledComposition = nativeModuleRecipes.find((recipe) => recipe.componentKey === "module.work-orders")!.styledComposition;