@woodsportal/hubspot-kit 1.0.4 → 1.0.26

package/src/dev-module-config/ui/module-config-toolbar-theme.ts

@@ -0,0 +1,35 @@
+export type ModuleConfigToolbarTheme = 'light' | 'dark'
+
+const STORAGE_KEY = 'woodsportal:module-config-toolbar-theme'
+
+export function detectPortalTheme(): ModuleConfigToolbarTheme {
+  if (typeof document === 'undefined') return 'light'
+  return document.documentElement.classList.contains('dark') ? 'dark' : 'light'
+}
+
+export function loadModuleConfigToolbarTheme(): ModuleConfigToolbarTheme {
+  if (typeof window === 'undefined') return 'light'
+  try {
+    const stored = window.localStorage.getItem(STORAGE_KEY)
+    if (stored === 'dark' || stored === 'light') return stored
+  } catch {
+    // ignore
+  }
+  return detectPortalTheme()
+}
+
+export function saveModuleConfigToolbarTheme(theme: ModuleConfigToolbarTheme): void {
+  try {
+    window.localStorage.setItem(STORAGE_KEY, theme)
+  } catch {
+    // ignore
+  }
+}
+
+export function toggleModuleConfigToolbarTheme(
+  theme: ModuleConfigToolbarTheme,
+): ModuleConfigToolbarTheme {
+  const next: ModuleConfigToolbarTheme = theme === 'dark' ? 'light' : 'dark'
+  saveModuleConfigToolbarTheme(next)
+  return next
+}

package/src/dev-module-config/ui/navigation/ModuleConfigNavContext.tsx

@@ -0,0 +1,194 @@
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+  type ReactNode,
+} from 'react'
+
+import { devModuleDisplayName } from '../../dev-module-display-name'
+
+export type BreadcrumbSegment = {
+  id: string
+  label: string
+  onClick?: () => void
+}
+
+type ModuleConfigNavContextValue = {
+  segments: Array<BreadcrumbSegment>
+  drillDownPanel: ReactNode | null
+  pushSegment: (segment: Omit<BreadcrumbSegment, 'onClick'> & { onPop?: () => void }) => void
+  popTo: (id: string) => void
+  resetNav: () => void
+  registerPopHandler: (id: string, handler: () => void) => void
+  /** @deprecated use registerDrillDownPanel */
+  setDrillDownPanel: (panel: ReactNode | null) => void
+  registerDrillDownPanel: (id: string, panel: ReactNode | null) => void
+}
+
+const ROOT_SEGMENT: BreadcrumbSegment = { id: 'contents', label: 'Contents' }
+
+function moduleTitleSegment(stackLength: number, popTo: (id: string) => void): BreadcrumbSegment {
+  return {
+    id: 'module',
+    label: devModuleDisplayName(),
+    onClick: stackLength > 1 ? () => popTo('module') : undefined,
+  }
+}
+
+const ModuleConfigNavContext = createContext<ModuleConfigNavContextValue | null>(null)
+
+export function ModuleConfigNavProvider({ children }: { children: ReactNode }) {
+  const [stack, setStack] = useState<Array<BreadcrumbSegment>>([ROOT_SEGMENT])
+  const [popHandlers, setPopHandlers] = useState<Record<string, () => void>>({})
+  const [drillDownPanels, setDrillDownPanels] = useState<Record<string, ReactNode>>({})
+  const [drillDownOrder, setDrillDownOrder] = useState<string[]>([])
+
+  const registerDrillDownPanel = useCallback((id: string, panel: ReactNode | null) => {
+    if (panel === null) {
+      setDrillDownPanels((prev) => {
+        if (!(id in prev)) return prev
+        const next = { ...prev }
+        delete next[id]
+        return next
+      })
+      setDrillDownOrder((order) => order.filter((entry) => entry !== id))
+      return
+    }
+
+    setDrillDownPanels((prev) => ({ ...prev, [id]: panel }))
+    setDrillDownOrder((order) => (order.includes(id) ? order : [...order, id]))
+  }, [])
+
+  const clearAllDrillDownPanels = useCallback(() => {
+    setDrillDownPanels({})
+    setDrillDownOrder([])
+  }, [])
+
+  const drillDownPanel = useMemo(() => {
+    const topId = drillDownOrder[drillDownOrder.length - 1]
+    return topId ? (drillDownPanels[topId] ?? null) : null
+  }, [drillDownOrder, drillDownPanels])
+
+  const setDrillDownPanel = useCallback(
+    (panel: ReactNode | null) => {
+      if (panel === null) {
+        clearAllDrillDownPanels()
+        return
+      }
+      registerDrillDownPanel('__legacy__', panel)
+    },
+    [clearAllDrillDownPanels, registerDrillDownPanel],
+  )
+
+  const registerPopHandler = useCallback((id: string, handler: () => void) => {
+    setPopHandlers((prev) => ({ ...prev, [id]: handler }))
+  }, [])
+
+  const popTo = useCallback(
+    (id: string) => {
+      if (id === 'module' || id === 'contents') {
+        for (const segment of stack.slice(1)) {
+          popHandlers[segment.id]?.()
+        }
+        setStack([ROOT_SEGMENT])
+        clearAllDrillDownPanels()
+        return
+      }
+
+      setStack((prev) => {
+        const index = prev.findIndex((segment) => segment.id === id)
+        if (index < 0) return prev
+
+        const removed = prev.slice(index + 1)
+        for (const segment of removed) {
+          popHandlers[segment.id]?.()
+        }
+
+        return prev.slice(0, index + 1)
+      })
+    },
+    [clearAllDrillDownPanels, popHandlers, stack],
+  )
+
+  const pushSegment = useCallback(
+    (segment: Omit<BreadcrumbSegment, 'onClick'> & { onPop?: () => void }) => {
+      if (segment.onPop) {
+        setPopHandlers((prev) => ({ ...prev, [segment.id]: segment.onPop! }))
+      }
+      setStack((prev) => {
+        const existing = prev.findIndex((item) => item.id === segment.id)
+        if (existing >= 0) {
+          return [...prev.slice(0, existing + 1), { id: segment.id, label: segment.label }]
+        }
+        return [...prev, { id: segment.id, label: segment.label }]
+      })
+    },
+    [],
+  )
+
+  const resetNav = useCallback(() => {
+    setStack([ROOT_SEGMENT])
+    clearAllDrillDownPanels()
+  }, [clearAllDrillDownPanels])
+
+  const segments = useMemo(() => {
+    const moduleTitle = moduleTitleSegment(stack.length, popTo)
+
+    if (stack.length <= 1) {
+      return [ROOT_SEGMENT, moduleTitle]
+    }
+
+    const middle = stack.slice(1).map((segment) => ({
+      ...segment,
+      onClick: () => popTo(segment.id),
+    }))
+
+    if (middle.length > 2) {
+      const collapsed: Array<BreadcrumbSegment> = [
+        middle[0]!,
+        { id: 'ellipsis', label: '…' },
+        middle[middle.length - 1]!,
+      ]
+      return [ROOT_SEGMENT, moduleTitle, ...collapsed]
+    }
+
+    return [ROOT_SEGMENT, moduleTitle, ...middle]
+  }, [popTo, stack])
+
+  const value = useMemo(
+    () => ({
+      segments,
+      drillDownPanel,
+      pushSegment,
+      popTo,
+      resetNav,
+      registerPopHandler,
+      setDrillDownPanel,
+      registerDrillDownPanel,
+    }),
+    [
+      segments,
+      drillDownPanel,
+      pushSegment,
+      popTo,
+      resetNav,
+      registerPopHandler,
+      setDrillDownPanel,
+      registerDrillDownPanel,
+    ],
+  )
+
+  return (
+    <ModuleConfigNavContext.Provider value={value}>{children}</ModuleConfigNavContext.Provider>
+  )
+}
+
+export function useModuleConfigNav() {
+  const ctx = useContext(ModuleConfigNavContext)
+  if (!ctx) {
+    throw new Error('useModuleConfigNav must be used within ModuleConfigNavProvider')
+  }
+  return ctx
+}

package/src/dev-module-config/ui/use-dev-module-config-live-revision.ts

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react'
+import { MODULE_CONFIG_CHANGED } from '../schema/types'
+
+/**
+ * DEV-only: bump when module config is applied so the portal can re-read hubSpotData exports.
+ */
+export function useDevModuleConfigLiveRevision(): number {
+  const [revision, setRevision] = useState(0)
+
+  useEffect(() => {
+    if (!import.meta.env.DEV) return
+
+    const onApplied = () => {
+      setRevision((value) => value + 1)
+    }
+
+    window.addEventListener(MODULE_CONFIG_CHANGED, onApplied)
+    return () => window.removeEventListener(MODULE_CONFIG_CHANGED, onApplied)
+  }, [])
+
+  return revision
+}

package/src/dev-module-config/ui/use-hubspot-live-exports.ts

@@ -0,0 +1,27 @@
+import { useMemo } from 'react'
+import { getDevHubSpotLiveExports, type DevHubSpotLiveExports } from '@/data/dev-hubspot-sync'
+import { refreshHubSpotUserDetails } from '@/data/hubSpotData'
+import { useDevModuleConfigLiveRevision } from './use-dev-module-config-live-revision'
+
+/**
+ * DEV-only: re-read hubSpotData exports after module config Apply.
+ * Production callers receive revision 0 and should keep using module-level imports.
+ */
+export function useHubSpotLiveExports(): {
+  revision: number
+  live: DevHubSpotLiveExports | null
+} {
+  const revision = useDevModuleConfigLiveRevision()
+
+  return useMemo(() => {
+    if (!import.meta.env.DEV) {
+      return { revision: 0, live: null }
+    }
+
+    refreshHubSpotUserDetails()
+    return {
+      revision,
+      live: getDevHubSpotLiveExports(),
+    }
+  }, [revision])
+}

package/src/dev-module-config/ui/use-module-config.ts

@@ -0,0 +1,124 @@
+import { useCallback, useEffect, useState } from 'react'
+import {
+  getModuleConfigState,
+  getModuleFieldValues,
+  initModuleConfigRuntime,
+  updateModuleFieldValues,
+} from '../runtime/module-config-runtime'
+import { validateModuleConfig, type ValidationError } from '../schema/validate-module-config'
+import { loadWorkspaceMeta } from '../storage/workspace-store'
+import { MODULE_CONFIG_CHANGED } from '../schema/types'
+import type { ModuleConfigState } from '../runtime/module-config-runtime'
+import type { ModuleFieldValues } from '../schema/types'
+
+export function useModuleConfig() {
+  const [state, setState] = useState<ModuleConfigState | null>(() => getModuleConfigState())
+  const [draftValues, setDraftValues] = useState<ModuleFieldValues>(() => getModuleFieldValues())
+  const [appliedValues, setAppliedValues] = useState<ModuleFieldValues>(() => getModuleFieldValues())
+  const [validationErrors, setValidationErrors] = useState<Array<ValidationError>>([])
+  const [persistenceSource, setPersistenceSource] = useState<'local' | 'example' | 'empty'>('empty')
+  const [isApplying, setIsApplying] = useState(false)
+
+  const isDirty =
+    JSON.stringify(draftValues) !== JSON.stringify(appliedValues)
+
+  useEffect(() => {
+    void loadWorkspaceMeta().then((source) => setPersistenceSource(source ?? 'empty'))
+  }, [appliedValues])
+
+  useEffect(() => {
+    const onChange = (event: Event) => {
+      const detail = (event as CustomEvent<ModuleConfigState>).detail
+      setState(detail)
+      setDraftValues(detail.moduleValues)
+      setAppliedValues(detail.moduleValues)
+      setValidationErrors([])
+    }
+    window.addEventListener(MODULE_CONFIG_CHANGED, onChange)
+    return () => window.removeEventListener(MODULE_CONFIG_CHANGED, onChange)
+  }, [])
+
+  const setFieldValue = useCallback((path: string, value: unknown) => {
+    setDraftValues((current) => {
+      const next = structuredClone(current)
+      const parts = path.split('.')
+      let cursor: Record<string, unknown> = next
+      for (let i = 0; i < parts.length - 1; i++) {
+        const key = parts[i]!
+        if (cursor[key] === undefined || cursor[key] === null) cursor[key] = {}
+        cursor = cursor[key] as Record<string, unknown>
+      }
+      cursor[parts[parts.length - 1]!] = value
+      return next
+    })
+    setValidationErrors((errors) => errors.filter((error) => !error.path.startsWith(path)))
+  }, [])
+
+  const applyChanges = useCallback(async (): Promise<boolean> => {
+    const currentState = getModuleConfigState()
+    if (!currentState) return false
+
+    const errors = validateModuleConfig(currentState.schema, draftValues)
+    if (errors.length > 0) {
+      setValidationErrors(errors)
+      return false
+    }
+
+    setIsApplying(true)
+    try {
+      const updated = await updateModuleFieldValues(draftValues)
+      setState(updated)
+      setDraftValues(updated.moduleValues)
+      setAppliedValues(updated.moduleValues)
+      setValidationErrors([])
+      const source = await loadWorkspaceMeta()
+      setPersistenceSource(source ?? 'local')
+      return true
+    } catch (error) {
+      console.error('[module-config] Apply failed', error)
+      setValidationErrors([
+        {
+          path: '_apply',
+          label: 'Apply',
+          message:
+            error instanceof Error
+              ? error.message
+              : 'Failed to save config. Restart yarn local if the dev server was started before the module-config plugin was added.',
+        },
+      ])
+      return false
+    } finally {
+      setIsApplying(false)
+    }
+  }, [draftValues])
+
+  const discardDraft = useCallback(() => {
+    setDraftValues(appliedValues)
+    setValidationErrors([])
+  }, [appliedValues])
+
+  const confirmDiscardIfDirty = useCallback((): boolean => {
+    if (!isDirty) return true
+    return window.confirm('You have unsaved changes. Discard them?')
+  }, [isDirty])
+
+  return {
+    state,
+    moduleValues: draftValues,
+    appliedValues,
+    isDirty,
+    isApplying,
+    validationErrors,
+    persistenceSource,
+    setFieldValue,
+    applyChanges,
+    discardDraft,
+    confirmDiscardIfDirty,
+  }
+}
+
+export async function ensureModuleConfigReady() {
+  if (!getModuleConfigState()) {
+    await initModuleConfigRuntime()
+  }
+}

package/src/routing/build-api-routes.ts

@@ -0,0 +1,37 @@
+import { formatCustomObjectLabel, formatPath } from './route-format'
+
+export const makeLink = (menuItem: Record<string, unknown>) => {
+  let link = menuItem?.hubspotObjectTypeId as string | undefined
+
+  if (menuItem?.companyAsMediator) {
+    link = `${link}-c`
+  }
+
+  if (menuItem?.specPipeLine && menuItem?.pipeLineId) {
+    link = `${link}-${menuItem?.pipeLineId}`
+  }
+
+  if (!link) {
+    return `/${formatPath((menuItem.tabName || menuItem.label) as string)}`
+  }
+
+  return `/${link}`
+}
+
+export function buildApiRoutes(sidebarMenuOptions: Array<Record<string, unknown>>) {
+  return sidebarMenuOptions.map((menuItem) => ({
+    hubspotObjectTypeId: `${menuItem.hubspotObjectTypeId ?? ''}`,
+    path: makeLink(menuItem),
+    title: formatCustomObjectLabel((menuItem.tabName || menuItem.label) as string),
+    icon: menuItem.icon,
+    isRequiredAuth: true,
+    isHeader: true,
+    companyAsMediator: menuItem.companyAsMediator,
+    pipeLineId: menuItem.pipeLineId,
+    specPipeLine: menuItem.specPipeLine,
+    objectDescription: menuItem.objectDescription,
+    objectUserProperties: menuItem.objectUserProperties,
+    homeCardsView: menuItem.homeCardsView,
+    objectUserPropertiesView: menuItem.objectUserPropertiesView,
+  }))
+}

package/src/routing/route-format.ts

@@ -0,0 +1,19 @@
+/** Route path / label helpers — runtime-safe, no consumer path aliases. */
+
+export const formatPath = (key: unknown) => {
+  if (!key || typeof key !== 'string') return ''
+
+  return key
+    .replace(/\s+/g, '-')
+    .replace(/#/g, '%23')
+    .replace(/\b\w/g, (l: string) => l.toLowerCase())
+}
+
+export function formatCustomObjectLabel(key = '') {
+  if (!key || typeof key !== 'string') return ''
+
+  return key
+    .replace(/-/g, ' ')
+    .replace(/%23/g, '#')
+    .replace(/\b[a-z]/g, (l: string) => l.toUpperCase())
+}

package/templates/module-hybrid-cdn/README.md

@@ -1,9 +1,59 @@
-# HubSpot portal module (hybrid CDN)
+# Getting started
 
-Scaffolded by `wp init --template module-hybrid-cdn`.
+This project was scaffolded with **WoodsCLI** (`@woodsportal/hubspot-kit`).
+
+## Daily dev
 
 ```bash
-npm install
+yarn install
 wp doctor
 wp dev
 ```
+
+Open the local URL, then **Ctrl+Shift+Z** (Mac **⌃⇧Z**) to edit module fields. Click **Apply changes** to refresh the starter preview.
+
+## Routing (`wp init`)
+
+Default is **hash history** — same as `woodsportal-client-frontend` (`#/guide` URLs work in HubSpot CMS).
+
+| `wp init --router` | Behavior |
+|--------------------|----------|
+| `hash` (default) | `createHashHistory()` — production-safe in HubSpot embeds |
+| `browser` | Clean `/guide` URLs for local dev only |
+| `none` | Single-page starter, no TanStack Router |
+
+Recorded in `woodscli.json` → `scaffold.router`.
+
+## `src/` layout
+
+| Path | Purpose |
+|------|---------|
+| `main.tsx` | Dev entry — loads styles and `mountDevPreview()` |
+| `app.tsx` | `RouterProvider` shell (client-frontend pattern) |
+| `config/router.ts` | Hash vs browser history |
+| `portal/` | Dev vs production mount (`mount-dev-preview`, `mount-portal`) |
+| `routes/` | TanStack file routes — keep thin; import from `features/` |
+| `features/starter/` | Demo home + developer guide (replace with your app) |
+| `components/` | Shared layout and UI |
+| `integrations/` | Router and third-party wiring |
+| `hubspot/` | HubSpot types and dev fixtures |
+| `config/` | Route constants and app config |
+| `assets/css/` | Tailwind entry for local dev |
+
+Kit runtime expects `src/defaultData.ts` (re-exports `hubspot/default-data.ts`).
+
+## Docs (in the kit package)
+
+After `npm install`, see:
+
+- `node_modules/@woodsportal/hubspot-kit/docs/CLI-REFERENCE.md`
+- `node_modules/@woodsportal/hubspot-kit/docs/MODULES.md`
+- `node_modules/@woodsportal/hubspot-kit/docs/HUBSPOT-CLI-SETUP.md`
+
+## HubSpot upload
+
+```bash
+cp hubspot.config.yml.example hubspot.config.yml
+# add portal + personal access key
+wp upload
+```

package/templates/module-hybrid-cdn/index.html

@@ -1 +1,12 @@
-<!doctype html><html><head><meta charset="UTF-8"/><title>WoodsCLI dev</title></head><body><div id="app"></div><script type="module" src="/src/main.tsx"></script></body></html>
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>WoodsCLI dev</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/templates/module-hybrid-cdn/package.json

@@ -9,11 +9,15 @@
     "deploy:prod": "wp deploy --tier prod"
   },
   "devDependencies": {
-    "@woodsportal/hubspot-kit": "^1.0.4",
+    "@woodsportal/hubspot-kit": "^1.0.11",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@tailwindcss/vite": "^4.0.6",
+    "@tanstack/react-router": "^1.121.2",
     "@tanstack/router-plugin": "^1.121.2",
     "@vitejs/plugin-react": "^4.3.4",
-    "babel-plugin-react-compiler": "^1.0.0",
+    "babel-plugin-react-compiler": "^1.0.11",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "tailwindcss": "^4.0.6",

package/templates/module-hybrid-cdn/public/fields.json

@@ -1 +1,44 @@
-[{"name":"title","label":"Title","type":"text","default":"WoodsCLI module"}]
+[
+  {
+    "name": "title",
+    "label": "Portal title",
+    "type": "text",
+    "tab": "CONTENT",
+    "default": "My HubSpot Portal"
+  },
+  {
+    "name": "tagline",
+    "label": "Tagline",
+    "type": "text",
+    "tab": "CONTENT",
+    "help_text": "Subtitle shown under the hero title in the local dev preview.",
+    "default": "Customize this preview with Ctrl+Shift+Z, then replace StarterPage with your portal app."
+  },
+  {
+    "name": "show_feature_cards",
+    "label": "Show feature cards",
+    "type": "boolean",
+    "display": "toggle",
+    "tab": "CONTENT",
+    "default": true
+  },
+  {
+    "name": "accent_color",
+    "label": "Accent color",
+    "type": "color",
+    "tab": "STYLE",
+    "default": { "color": "#0091ae", "opacity": 100 }
+  },
+  {
+    "name": "hero_style",
+    "label": "Hero style",
+    "type": "choice",
+    "tab": "STYLE",
+    "choices": [
+      ["gradient", "Gradient"],
+      ["minimal", "Minimal"],
+      ["bold", "Bold"]
+    ],
+    "default": "gradient"
+  }
+]

package/templates/module-hybrid-cdn/src/app.tsx

@@ -0,0 +1,8 @@
+import { RouterProvider } from '@tanstack/react-router'
+
+import { router } from '@/integrations/tanstack-router/router'
+
+/** Root app shell — same pattern as woodsportal-client-frontend `App`. */
+export function App() {
+  return <RouterProvider router={router} />
+}

package/templates/module-hybrid-cdn/src/assets/css/main.dev.css

@@ -1,3 +1,8 @@
 @import 'tailwindcss';
 
-@source '../../.wphs/**/*.{js,jsx,ts,tsx}';
+/* Kit dev-module-config — paths relative to this file (src/assets/css/) */
+@source '../../../.wphs/.kit-module-config/**/*.{ts,tsx}';
+@source '../../../.wphs/.kit-bootstrap.tsx';
+@source '../../../.wphs/.kit-bootstrap-greenfield.tsx';
+@source '../../../src/**/*.{ts,tsx}';
+@source '../../../node_modules/@woodsportal/hubspot-kit/src/dev-module-config/**/*.{ts,tsx}';

package/templates/module-hybrid-cdn/src/cdn/app-entry.ts

@@ -0,0 +1,32 @@
+/**
+ * CDN application chunk — mounts after vendor.js (HubSpot require_js order).
+ */
+import { mountPortal } from '@/portal/mount-portal'
+
+declare const __PORTAL_BUILD_ID__: string | undefined
+
+declare global {
+  interface Window {
+    WoodsPortal?: {
+      mount: typeof mountPortal
+      version: string
+    }
+  }
+}
+
+const buildId =
+  typeof __PORTAL_BUILD_ID__ !== 'undefined' ? String(__PORTAL_BUILD_ID__) : 'dev'
+
+window.WoodsPortal = {
+  mount: mountPortal,
+  version: buildId,
+}
+
+async function autoMount() {
+  if (!document.getElementById('app')) {
+    return
+  }
+  await mountPortal()
+}
+
+void autoMount()

package/templates/module-hybrid-cdn/src/cdn/vendor-entry.ts

@@ -0,0 +1,28 @@
+/**
+ * CDN vendor chunk — React + ReactDOM on `window` for the app IIFE externals.
+ */
+import React from 'react'
+import * as ReactDOM from 'react-dom'
+import * as ReactDOMClient from 'react-dom/client'
+import * as jsxRuntime from 'react/jsx-runtime'
+import * as jsxDevRuntime from 'react/jsx-dev-runtime'
+
+declare global {
+  interface Window {
+    WoodsPortalVendor?: {
+      React: typeof React
+      ReactDOM: typeof ReactDOM
+      ReactDOMClient: typeof ReactDOMClient
+      jsxRuntime: typeof jsxRuntime
+      jsxDevRuntime: typeof jsxDevRuntime
+    }
+  }
+}
+
+window.WoodsPortalVendor = {
+  React,
+  ReactDOM,
+  ReactDOMClient,
+  jsxRuntime,
+  jsxDevRuntime,
+}