@tscircuit/copper-pour-solver 0.0.33 → 0.0.35

package/lib/circuit-json/buildSubcircuitConnectivityLookup.ts

@@ -0,0 +1,237 @@
+import type { AnyCircuitElement } from "circuit-json"
+import type { getFullConnectivityMapFromCircuitJson } from "circuit-json-to-connectivity-map"
+import { getElementId } from "@tscircuit/circuit-json-util"
+import { getElementSubcircuitConnectivityKey } from "./getElementSubcircuitConnectivityKey"
+
+const getElementSubcircuitId = (
+  element: AnyCircuitElement,
+): string | undefined => {
+  const subcircuitId = (element as any).subcircuit_id
+  return typeof subcircuitId === "string" && subcircuitId.length > 0
+    ? subcircuitId
+    : undefined
+}
+
+const getScopedSubcircuitConnectivityKey = (
+  subcircuitId: string | undefined,
+  subcircuitConnectivityMapKey: string,
+): string =>
+  subcircuitId
+    ? `subcircuit:${subcircuitId}:connectivity:${subcircuitConnectivityMapKey}`
+    : subcircuitConnectivityMapKey
+
+const getDescendantSubcircuitIds = (
+  circuitJson: AnyCircuitElement[],
+  rootSubcircuitId: string | undefined,
+): Set<string> | undefined => {
+  if (!rootSubcircuitId) return undefined
+
+  const sourceGroupIdToSubcircuitId: Record<string, string> = {}
+  for (const element of circuitJson) {
+    if (element.type !== "source_group") continue
+
+    const sourceGroupId = (element as any).source_group_id
+    const subcircuitId = getElementSubcircuitId(element)
+    if (typeof sourceGroupId === "string" && subcircuitId) {
+      sourceGroupIdToSubcircuitId[sourceGroupId] = subcircuitId
+    }
+  }
+
+  const descendantSubcircuitIds = new Set([rootSubcircuitId])
+  let changed = true
+  while (changed) {
+    changed = false
+    for (const element of circuitJson) {
+      if (element.type !== "source_group") continue
+
+      const subcircuitId = getElementSubcircuitId(element)
+      if (!subcircuitId || descendantSubcircuitIds.has(subcircuitId)) continue
+
+      const parentSubcircuitId = (element as any).parent_subcircuit_id
+      const parentSourceGroupId = (element as any).parent_source_group_id
+      const parentSourceGroupSubcircuitId =
+        typeof parentSourceGroupId === "string"
+          ? sourceGroupIdToSubcircuitId[parentSourceGroupId]
+          : undefined
+
+      if (
+        (typeof parentSubcircuitId === "string" &&
+          descendantSubcircuitIds.has(parentSubcircuitId)) ||
+        (parentSourceGroupSubcircuitId &&
+          descendantSubcircuitIds.has(parentSourceGroupSubcircuitId))
+      ) {
+        descendantSubcircuitIds.add(subcircuitId)
+        changed = true
+      }
+    }
+  }
+
+  return descendantSubcircuitIds
+}
+
+export const buildSubcircuitConnectivityLookup = (
+  circuitJson: AnyCircuitElement[],
+  globalConnectivityMap: ReturnType<
+    typeof getFullConnectivityMapFromCircuitJson
+  >,
+  rootSubcircuitId?: string,
+) => {
+  const descendantSubcircuitIds = getDescendantSubcircuitIds(
+    circuitJson,
+    rootSubcircuitId,
+  )
+  const idToSubcircuitConnectivityKey: Record<string, string> = {}
+  const idToSubcircuitId: Record<string, string | undefined> = {}
+  const scopedKeyToIds: Record<string, string[]> = {}
+  const localSubcircuitConnectivityKeys = new Set<string>()
+
+  for (const element of circuitJson) {
+    const id = getElementId(element)
+    const key = getElementSubcircuitConnectivityKey(element)
+    const subcircuitId = getElementSubcircuitId(element)
+    if (id) {
+      idToSubcircuitId[id] = subcircuitId
+    }
+    if (
+      descendantSubcircuitIds &&
+      (!subcircuitId || !descendantSubcircuitIds.has(subcircuitId))
+    ) {
+      continue
+    }
+
+    if (id && key) {
+      const scopedKey = getScopedSubcircuitConnectivityKey(subcircuitId, key)
+      idToSubcircuitConnectivityKey[id] = scopedKey
+      localSubcircuitConnectivityKeys.add(key)
+      scopedKeyToIds[scopedKey] ??= []
+      scopedKeyToIds[scopedKey].push(id)
+    }
+  }
+
+  const generatedNetIdToSubcircuitConnectivityKey: Record<string, string> = {}
+  for (const [generatedNetId, connectedIds] of Object.entries(
+    globalConnectivityMap.netMap,
+  )) {
+    const connectedSubcircuitKeys = new Set(
+      connectedIds
+        .map((id) => idToSubcircuitConnectivityKey[id])
+        .filter((key): key is string => Boolean(key)),
+    )
+    const subcircuitKey = Array.from(connectedSubcircuitKeys).sort()[0]
+    if (subcircuitKey) {
+      generatedNetIdToSubcircuitConnectivityKey[generatedNetId] = subcircuitKey
+    }
+  }
+
+  const subcircuitConnectivityMap: Record<string, string> = {}
+  for (const [scopedKey, ids] of Object.entries(scopedKeyToIds)) {
+    const resolvedKeys = new Set<string>()
+    for (const id of ids) {
+      const generatedNetId = globalConnectivityMap.getNetConnectedToId(id)
+      const resolvedKey = generatedNetId
+        ? generatedNetIdToSubcircuitConnectivityKey[generatedNetId]
+        : undefined
+      resolvedKeys.add(resolvedKey ?? scopedKey)
+    }
+
+    if (resolvedKeys.size > 1) {
+      throw new Error(
+        `subcircuit_connectivity_map_key "${scopedKey}" maps to multiple global connectivity keys: ${Array.from(resolvedKeys).join(", ")}`,
+      )
+    }
+
+    const resolvedKey = resolvedKeys.values().next().value
+    if (resolvedKey) {
+      subcircuitConnectivityMap[scopedKey] = resolvedKey
+    }
+  }
+
+  return {
+    knownSubcircuitConnectivityKeys: new Set([
+      ...Object.keys(scopedKeyToIds),
+      ...localSubcircuitConnectivityKeys,
+    ]),
+    descendantSubcircuitIds,
+    getScopedSubcircuitConnectivityKey,
+    getElementSubcircuitId,
+    resolveSubcircuitConnectivityKey(
+      subcircuitConnectivityMapKey: string,
+      subcircuitId?: string,
+    ): string {
+      const matchingScopedKeys = Object.keys(scopedKeyToIds).filter(
+        (scopedKey) =>
+          scopedKey ===
+          getScopedSubcircuitConnectivityKey(
+            subcircuitId,
+            subcircuitConnectivityMapKey,
+          ),
+      )
+
+      if (
+        subcircuitId &&
+        matchingScopedKeys.length === 0 &&
+        descendantSubcircuitIds
+      ) {
+        matchingScopedKeys.push(
+          ...Object.keys(scopedKeyToIds).filter((scopedKey) =>
+            scopedKey.endsWith(`:connectivity:${subcircuitConnectivityMapKey}`),
+          ),
+        )
+      }
+
+      if (!subcircuitId) {
+        matchingScopedKeys.push(
+          ...Object.keys(scopedKeyToIds).filter((scopedKey) =>
+            scopedKey.endsWith(`:connectivity:${subcircuitConnectivityMapKey}`),
+          ),
+        )
+      }
+
+      const uniqueMatchingScopedKeys = Array.from(new Set(matchingScopedKeys))
+      if (uniqueMatchingScopedKeys.length === 0) {
+        if (subcircuitId && descendantSubcircuitIds) {
+          throw new Error(
+            `No subcircuit_connectivity_map_key "${subcircuitConnectivityMapKey}" found in subcircuit "${subcircuitId}" or its child subcircuits.`,
+          )
+        }
+
+        return getScopedSubcircuitConnectivityKey(
+          subcircuitId,
+          subcircuitConnectivityMapKey,
+        )
+      }
+      if (uniqueMatchingScopedKeys.length > 1) {
+        throw new Error(
+          `subcircuit_connectivity_map_key "${subcircuitConnectivityMapKey}" exists in multiple subcircuits. Pass subcircuit_id to disambiguate.`,
+        )
+      }
+
+      return (
+        subcircuitConnectivityMap[uniqueMatchingScopedKeys[0]!] ??
+        uniqueMatchingScopedKeys[0]!
+      )
+    },
+    getSubcircuitConnectivityKeyForId(id: string): string | undefined {
+      if (descendantSubcircuitIds) {
+        const subcircuitId = idToSubcircuitId[id]
+        if (!subcircuitId || !descendantSubcircuitIds.has(subcircuitId)) {
+          return undefined
+        }
+      }
+
+      const directKey = idToSubcircuitConnectivityKey[id]
+      const generatedNetId = globalConnectivityMap.getNetConnectedToId(id)
+      if (!generatedNetId) {
+        return directKey
+          ? (subcircuitConnectivityMap[directKey] ?? directKey)
+          : undefined
+      }
+
+      return (
+        generatedNetIdToSubcircuitConnectivityKey[generatedNetId] ??
+        (directKey ? subcircuitConnectivityMap[directKey] : undefined) ??
+        directKey
+      )
+    },
+  }
+}

package/lib/circuit-json/convert-circuit-json-to-input-problem.ts

@@ -1,17 +1,12 @@
 import type {
   AnyCircuitElement,
-  LayerRef,
   PcbBoard,
   PcbHole,
   PcbPlatedHole,
-  PcbPort,
   PcbSmtPad,
   PcbTrace,
   PcbVia,
   Point,
-  SourceNet,
-  SourcePort,
-  SourceTrace,
 } from "circuit-json"
 import { getFullConnectivityMapFromCircuitJson } from "circuit-json-to-connectivity-map"
 import type {
@@ -23,18 +18,13 @@ import type {
   InputRectPad,
   InputTracePad,
 } from "lib/types"
+import type { ConvertCircuitJsonToInputProblemOptions } from "./ConvertCircuitJsonToInputProblemOptions"
+import { buildSubcircuitConnectivityLookup } from "./buildSubcircuitConnectivityLookup"
+import { resolvePourConnectivityKey } from "./resolvePourConnectivityKey"
 
 export const convertCircuitJsonToInputProblem = (
   circuitJson: AnyCircuitElement[],
-  options: {
-    layer: LayerRef
-    pour_connectivity_key: string
-    pad_margin: number
-    trace_margin: number
-    board_edge_margin?: number
-    cutout_margin?: number
-    outline?: Point[]
-  },
+  options: ConvertCircuitJsonToInputProblemOptions,
 ): InputProblem => {
   const pcb_board = circuitJson.find((e) => e.type === "pcb_board") as
     | PcbBoard
@@ -42,7 +32,19 @@ export const convertCircuitJsonToInputProblem = (
 
   if (!pcb_board) throw new Error("No pcb_board found in circuit json")
 
-  const connectivityMap = getFullConnectivityMapFromCircuitJson(circuitJson)
+  const globalConnectivityMap =
+    getFullConnectivityMapFromCircuitJson(circuitJson)
+  const subcircuitConnectivityMap = buildSubcircuitConnectivityLookup(
+    circuitJson,
+    globalConnectivityMap,
+    options.subcircuit_id,
+  )
+  const pourConnectivityKey = resolvePourConnectivityKey(
+    circuitJson,
+    options,
+    subcircuitConnectivityMap,
+  )
+  const { getSubcircuitConnectivityKeyForId } = subcircuitConnectivityMap
 
   const pads: InputPad[] = []
 
@@ -52,9 +54,7 @@ export const convertCircuitJsonToInputProblem = (
       if (smtpad.layer !== options.layer) continue
 
       let connectivityKey: string | undefined
-      connectivityKey = connectivityMap.getNetConnectedToId(
-        smtpad.pcb_smtpad_id,
-      )
+      connectivityKey = getSubcircuitConnectivityKeyForId(smtpad.pcb_smtpad_id)
       if (!connectivityKey) {
         connectivityKey = `unconnected:${smtpad.pcb_smtpad_id}`
       }
@@ -101,7 +101,7 @@ export const convertCircuitJsonToInputProblem = (
       const platedHole = elm as PcbPlatedHole
       if (!platedHole.layers.includes(options.layer)) continue
 
-      let connectivityKey = connectivityMap.getNetConnectedToId(
+      let connectivityKey = getSubcircuitConnectivityKeyForId(
         platedHole.pcb_plated_hole_id,
       )
       if (!connectivityKey) {
@@ -189,7 +189,7 @@ export const convertCircuitJsonToInputProblem = (
       if (!via.layers.includes(options.layer)) continue
 
       const connectivityKey: string =
-        connectivityMap.getNetConnectedToId(via.pcb_via_id) ??
+        getSubcircuitConnectivityKeyForId(via.pcb_via_id) ??
         `unconnected-via:${via.pcb_via_id}`
 
       pads.push({
@@ -203,7 +203,7 @@ export const convertCircuitJsonToInputProblem = (
       } as InputCircularPad)
     } else if (elm.type === "pcb_trace") {
       const trace = elm as PcbTrace
-      const connectivityKey = connectivityMap.getNetConnectedToId(
+      const connectivityKey = getSubcircuitConnectivityKeyForId(
         trace.pcb_trace_id,
       )
       if (!connectivityKey) continue
@@ -271,7 +271,7 @@ export const convertCircuitJsonToInputProblem = (
       layer: options.layer,
       bounds,
       outline,
-      connectivityKey: options.pour_connectivity_key,
+      connectivityKey: pourConnectivityKey,
       padMargin: options.pad_margin,
       traceMargin: options.trace_margin,
       board_edge_margin: options.board_edge_margin ?? 0,

package/lib/circuit-json/getElementSubcircuitConnectivityKey.ts

@@ -0,0 +1,8 @@
+import type { AnyCircuitElement } from "circuit-json"
+
+export const getElementSubcircuitConnectivityKey = (
+  element: AnyCircuitElement,
+): string | undefined => {
+  const key = (element as any).subcircuit_connectivity_map_key
+  return typeof key === "string" && key.length > 0 ? key : undefined
+}

package/lib/circuit-json/resolvePourConnectivityKey.ts

@@ -0,0 +1,88 @@
+import type { AnyCircuitElement, SourceNet } from "circuit-json"
+import type { buildSubcircuitConnectivityLookup } from "./buildSubcircuitConnectivityLookup"
+import type { ConvertCircuitJsonToInputProblemOptions } from "./ConvertCircuitJsonToInputProblemOptions"
+
+type SubcircuitConnectivityLookup = ReturnType<
+  typeof buildSubcircuitConnectivityLookup
+>
+
+export const resolvePourConnectivityKey = (
+  circuitJson: AnyCircuitElement[],
+  options: ConvertCircuitJsonToInputProblemOptions,
+  subcircuitConnectivityMap: SubcircuitConnectivityLookup,
+): string => {
+  if (options.subcircuit_connectivity_map_key) {
+    return subcircuitConnectivityMap.resolveSubcircuitConnectivityKey(
+      options.subcircuit_connectivity_map_key,
+      options.subcircuit_id,
+    )
+  }
+
+  if (options.source_net_id) {
+    const sourceNet = circuitJson.find(
+      (element): element is SourceNet =>
+        element.type === "source_net" &&
+        element.source_net_id === options.source_net_id,
+    )
+    if (!sourceNet) {
+      throw new Error(`No source_net found with id "${options.source_net_id}"`)
+    }
+    if (!sourceNet.subcircuit_connectivity_map_key) {
+      throw new Error(
+        `source_net "${options.source_net_id}" has no subcircuit_connectivity_map_key`,
+      )
+    }
+    return subcircuitConnectivityMap.resolveSubcircuitConnectivityKey(
+      sourceNet.subcircuit_connectivity_map_key,
+      sourceNet.subcircuit_id ?? options.subcircuit_id,
+    )
+  }
+
+  if (options.source_net_name) {
+    const sourceNet = circuitJson.find(
+      (element): element is SourceNet =>
+        element.type === "source_net" &&
+        element.name === options.source_net_name &&
+        (!options.subcircuit_id ||
+          Boolean(
+            subcircuitConnectivityMap.descendantSubcircuitIds?.has(
+              element.subcircuit_id ?? "",
+            ),
+          )),
+    )
+    if (!sourceNet) {
+      throw new Error(
+        `No source_net found with name "${options.source_net_name}"`,
+      )
+    }
+    if (!sourceNet.subcircuit_connectivity_map_key) {
+      throw new Error(
+        `source_net "${options.source_net_name}" has no subcircuit_connectivity_map_key`,
+      )
+    }
+    return subcircuitConnectivityMap.resolveSubcircuitConnectivityKey(
+      sourceNet.subcircuit_connectivity_map_key,
+      sourceNet.subcircuit_id ?? options.subcircuit_id,
+    )
+  }
+
+  if (options.pour_connectivity_key) {
+    if (
+      !subcircuitConnectivityMap.knownSubcircuitConnectivityKeys.has(
+        options.pour_connectivity_key,
+      )
+    ) {
+      throw new Error(
+        `pour_connectivity_key must be a subcircuit_connectivity_map_key. Use subcircuit_connectivity_map_key, source_net_id, or source_net_name instead of a generated connectivity-map id.`,
+      )
+    }
+    return subcircuitConnectivityMap.resolveSubcircuitConnectivityKey(
+      options.pour_connectivity_key,
+      options.subcircuit_id,
+    )
+  }
+
+  throw new Error(
+    "Copper pour requires source_net_id, source_net_name, or subcircuit_connectivity_map_key",
+  )
+}

package/lib/index.ts

@@ -1,4 +1,5 @@
 export * from "./solvers/CopperPourPipelineSolver"
 export { initializeManifoldGeometry } from "./solvers/copper-pour/manifold-runtime"
+export type { ConvertCircuitJsonToInputProblemOptions } from "./circuit-json/ConvertCircuitJsonToInputProblemOptions"
 export * from "./circuit-json/convert-circuit-json-to-input-problem"
 export * from "./types"

package/package.json

@@ -1,22 +1,27 @@
 {
   "name": "@tscircuit/copper-pour-solver",
   "main": "dist/index.js",
-  "version": "0.0.33",
+  "version": "0.0.35",
   "scripts": {
     "format": "biome format . --write",
     "format:check": "biome format .",
+    "start": "cosmos",
+    "cosmos": "react-cosmos",
+    "build:site": "cosmos-export",
     "build": "tsup-node lib/index.ts --dts --format esm"
   },
   "type": "module",
   "devDependencies": {
     "@biomejs/biome": "^2.2.4",
     "@flatten-js/core": "^1.6.2",
-    "@tscircuit/math-utils": "^0.0.25",
+    "@tscircuit/circuit-json-util": "^0.0.77",
+    "@tscircuit/core": "^0.0.988",
+    "@tscircuit/math-utils": "^0.0.29",
     "@tscircuit/solver-utils": "^0.0.14",
-    "circuit-json-to-connectivity-map": "^0.0.23",
     "@types/bun": "latest",
     "bun-match-svg": "^0.0.13",
     "circuit-json": "^0.0.432",
+    "circuit-json-to-connectivity-map": "^0.0.23",
     "circuit-to-svg": "^0.0.350",
     "react-cosmos": "^7.0.0",
     "react-cosmos-plugin-vite": "^7.0.0",

package/site/Welcome.page.tsx

@@ -0,0 +1,214 @@
+import type React from "react"
+
+const codeSample = `import {
+  CopperPourPipelineSolver,
+  convertCircuitJsonToInputProblem,
+  initializeManifoldGeometry,
+} from "@tscircuit/copper-pour-solver"
+
+await initializeManifoldGeometry()
+
+const inputProblem = convertCircuitJsonToInputProblem(circuitJson, {
+  layer: "top",
+  source_net_name: "GND",
+  pad_margin: 0.4,
+  trace_margin: 0.2,
+  board_edge_margin: 0.1,
+  cutout_margin: 0.2,
+})
+
+const solver = new CopperPourPipelineSolver(inputProblem)
+const { brep_shapes } = solver.getOutput()`
+
+const developmentSample = `bun install
+bun run build
+bun test
+bun start
+bun run build:site`
+
+export default function WelcomePage() {
+  return (
+    <main style={styles.main}>
+      <header style={styles.header}>
+        <p style={styles.eyebrow}>tscircuit geometry</p>
+        <h1 style={styles.title}>@tscircuit/copper-pour-solver</h1>
+        <p style={styles.lede}>
+          Generate PCB copper pour B-Rep polygons from Circuit JSON or from a
+          direct geometry input format.
+        </p>
+        <nav style={styles.actions} aria-label="Project links">
+          <a style={{ ...styles.button, ...styles.primaryButton }} href="/">
+            Cosmos docs
+          </a>
+          <a
+            style={styles.button}
+            href="https://github.com/tscircuit/copper-pour-solver"
+          >
+            GitHub
+          </a>
+          <a
+            style={styles.button}
+            href="https://www.npmjs.com/package/@tscircuit/copper-pour-solver"
+          >
+            npm
+          </a>
+        </nav>
+      </header>
+
+      <section style={styles.section}>
+        <h2 style={styles.heading}>Install</h2>
+        <pre style={styles.pre}>
+          <code>bun add @tscircuit/copper-pour-solver</code>
+        </pre>
+      </section>
+
+      <section style={styles.section}>
+        <h2 style={styles.heading}>Use With Circuit JSON</h2>
+        <p style={styles.copy}>
+          Initialize the Manifold geometry runtime once, convert Circuit JSON
+          into a solver input problem by source net name, then read the
+          generated B-Rep shapes.
+        </p>
+        <pre style={styles.pre}>
+          <code>{codeSample}</code>
+        </pre>
+      </section>
+
+      <section style={styles.section}>
+        <h2 style={styles.heading}>What The Converter Reads</h2>
+        <div style={styles.grid}>
+          <div style={styles.item}>
+            <strong>Board geometry</strong>
+            <span>
+              Board bounds, board outlines, and optional pour outlines.
+            </span>
+          </div>
+          <div style={styles.item}>
+            <strong>Obstacles</strong>
+            <span>
+              SMT pads, plated holes, mechanical holes, vias, traces, and
+              cutouts.
+            </span>
+          </div>
+          <div style={styles.item}>
+            <strong>Connectivity</strong>
+            <span>
+              Source net ids, source net names, or stable
+              subcircuit_connectivity_map_key values.
+            </span>
+          </div>
+          <div style={styles.item}>
+            <strong>Clearances</strong>
+            <span>Pad, trace, board edge, and cutout margin controls.</span>
+          </div>
+        </div>
+      </section>
+
+      <section style={styles.section}>
+        <h2 style={styles.heading}>Development</h2>
+        <pre style={styles.pre}>
+          <code>{developmentSample}</code>
+        </pre>
+      </section>
+    </main>
+  )
+}
+
+const styles: Record<string, React.CSSProperties> = {
+  main: {
+    width: "min(980px, calc(100% - 32px))",
+    margin: "0 auto",
+    padding: "48px 0 64px",
+    color: "#17202a",
+    fontFamily:
+      'Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    lineHeight: 1.55,
+  },
+  header: {
+    borderBottom: "1px solid #d7dee4",
+    paddingBottom: 28,
+    marginBottom: 32,
+  },
+  eyebrow: {
+    margin: "0 0 10px",
+    color: "#0b766e",
+    fontSize: 13,
+    fontWeight: 700,
+    textTransform: "uppercase",
+    letterSpacing: 0,
+  },
+  title: {
+    margin: "0 0 12px",
+    fontSize: "clamp(2rem, 7vw, 4rem)",
+    lineHeight: 1,
+    letterSpacing: 0,
+  },
+  lede: {
+    maxWidth: 760,
+    margin: "0 0 16px",
+    color: "#5f6f7a",
+    fontSize: "1.12rem",
+  },
+  actions: {
+    display: "flex",
+    flexWrap: "wrap",
+    gap: 10,
+    marginTop: 22,
+  },
+  button: {
+    display: "inline-flex",
+    alignItems: "center",
+    minHeight: 38,
+    padding: "7px 12px",
+    border: "1px solid #d7dee4",
+    borderRadius: 6,
+    textDecoration: "none",
+    color: "#17202a",
+    background: "#ffffff",
+    fontWeight: 650,
+  },
+  primaryButton: {
+    color: "#ffffff",
+    background: "#0b766e",
+    borderColor: "#0b766e",
+  },
+  section: {
+    marginTop: 34,
+  },
+  heading: {
+    margin: "0 0 12px",
+    fontSize: "1.35rem",
+    letterSpacing: 0,
+  },
+  copy: {
+    maxWidth: 760,
+    margin: "0 0 16px",
+    color: "#34444f",
+  },
+  pre: {
+    overflowX: "auto",
+    margin: "14px 0 24px",
+    padding: 16,
+    border: "1px solid #d7dee4",
+    borderRadius: 8,
+    background: "#f7f9fb",
+    color: "#10212d",
+    fontFamily:
+      '"SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace',
+    fontSize: 14,
+  },
+  grid: {
+    display: "grid",
+    gridTemplateColumns: "repeat(auto-fit, minmax(230px, 1fr))",
+    gap: 14,
+    margin: "18px 0 8px",
+  },
+  item: {
+    display: "grid",
+    gap: 4,
+    border: "1px solid #d7dee4",
+    borderRadius: 8,
+    padding: 14,
+    background: "#ffffff",
+  },
+}