@owlmeans/create-app 0.1.18-rc.7 → 0.1.18

package/template/sources/api/src/models/session.ts

@@ -0,0 +1,43 @@
+import { randomUUID } from 'node:crypto'
+import type { SessionItem } from '__APP_SLUG__-common'
+import { SESSION_ITEMS } from '../consts.js'
+import type { Context } from '../types.js'
+import type { SessionModel } from './session/types.js'
+
+/**
+ * The session domain, bound to the context that holds its resource and to the session it serves.
+ * Built where it is used — `makeSessionModel(context, sid).list()` — never stored.
+ */
+export const makeSessionModel = (context: Context, sid: string): SessionModel => {
+  const resource = context.getStaticResource<SessionItem>(SESSION_ITEMS)
+
+  const list: SessionModel['list'] = async () => {
+    // The resource answers the whole question — this session's items, newest first.
+    const { items } = await resource.list(
+      { sessionId: sid },
+      { sort: [{ field: 'createdAt', order: 'desc' }] }
+    )
+
+    return items
+  }
+
+  const add: SessionModel['add'] = async text => await resource.create({
+    id: randomUUID(),
+    sessionId: sid,
+    text,
+    createdAt: new Date().toISOString(),
+  })
+
+  const remove: SessionModel['remove'] = async id => {
+    const existing = await resource.load(id)
+    // Only remove the item if it belongs to this session.
+    if (existing == null || existing.sessionId !== sid) {
+      return { removed: false }
+    }
+
+    await resource.delete(id)
+    return { removed: true }
+  }
+
+  return { list, add, remove }
+}

package/template/sources/api/src/types.bare.ts

@@ -0,0 +1,5 @@
+import type { AppConfig, AppContext } from '@owlmeans/server-app'
+
+export interface Config extends AppConfig {}
+
+export interface Context<C extends Config = Config> extends AppContext<C> {}

package/template/sources/common/package.json

@@ -19,16 +19,16 @@
     "typecheck": "tsc -b"
   },
   "dependencies": {
-    "@owlmeans/config": "^0.1.18-rc.0",
-    "@owlmeans/entrypoint": "^0.1.18-rc.0",
-    "@owlmeans/error": "^0.1.18-rc.0",
-    "@owlmeans/resource": "^0.1.18-rc.0",
-    "@owlmeans/route": "^0.1.18-rc.0",
-    "ajv": "^8.17.1"
+    "@owlmeans/config": "^0.1.18",
+    "@owlmeans/entrypoint": "^0.1.18",
+    "@owlmeans/error": "^0.1.18",
+    "@owlmeans/resource": "^0.1.18",
+    "@owlmeans/route": "^0.1.18",
+    "ajv": "^8.20.0"
   },
   "devDependencies": {
-    "@owlmeans/dep-config": "^0.1.18-rc.0",
-    "@types/node": "^24.10.1",
+    "@owlmeans/dep-config": "^0.1.18",
+    "@types/node": "^26.6.4",
     "typescript": "^7.0.2"
   }
 }

package/template/sources/common/src/config.ts

@@ -18,7 +18,8 @@ service({
   base: 'api',
 }, cfg)
 
-cfg.debug = { all: true }
+// No log level here: this file runs in Bun AND in the browser, so each runtime's own config.ts
+// sets `cfg.log` from its environment (api: LOG_LEVEL / LOG_DEBUG, web: VITE_LOG_LEVEL / VITE_LOG_DEBUG).
 cfg.alias = APP
 // Local dev serves the API over plain HTTP. Without this the web client builds https:// URLs
 // and every call fails. In production put the API behind TLS and remove this line.

package/template/sources/common/src/consts.bare.ts

@@ -0,0 +1,8 @@
+/** Service aliases shared between web and api. */
+export const APP = '__APP_SLUG__'
+export const APP_WEB = '__APP_SLUG__-web'
+export const APP_API = '__APP_SLUG__-api'
+
+/** Local development ports. */
+export const WEB_PORT = 3001
+export const API_PORT = 3000

package/template/sources/common/src/consts.ts

@@ -6,16 +6,3 @@ export const APP_API = '__APP_SLUG__-api'
 /** Local development ports. */
 export const WEB_PORT = 3001
 export const API_PORT = 3000
-
-/** Backend (API) entrypoint identifiers. */
-export const session = {
-  base: '__APP_SLUG__:api:session',
-  list: '__APP_SLUG__:api:session:list',
-  add: '__APP_SLUG__:api:session:add',
-  remove: '__APP_SLUG__:api:session:remove',
-}
-
-/** Frontend (web) entrypoint identifiers. */
-export const web = {
-  session: '__APP_SLUG__:web:session',
-}

package/template/sources/common/src/entrypoints.bare.ts

@@ -0,0 +1,14 @@
+import { openProtocol } from '@owlmeans/entrypoint'
+import { BASE, HOME } from '@owlmeans/context'
+import { frontend, route } from '@owlmeans/route'
+
+const webBase = openProtocol(route(BASE, '/', frontend()))
+
+/** The shared immutable protocol tree. Add API declarations below `api` as the shell grows. */
+export const appProtocols = {
+  api: {},
+  web: {
+    base: webBase,
+    home: openProtocol(route(HOME, '/', frontend({ default: true, parent: webBase }))),
+  },
+}

package/template/sources/common/src/entrypoints.ts

@@ -0,0 +1,60 @@
+import { contract, openProtocol, protocol, typed } from '@owlmeans/entrypoint'
+import { route, RouteMethod, frontend } from '@owlmeans/route'
+import { AddItemSchema, ItemParamsSchema, SessionParamsSchema } from './schemas.js'
+import type { SessionItem } from './types.js'
+
+const aliases = {
+  session: {
+    base: '__APP_SLUG__:api:session',
+    list: '__APP_SLUG__:api:session:list',
+    add: '__APP_SLUG__:api:session:add',
+    remove: '__APP_SLUG__:api:session:remove',
+  },
+  web: {
+    base: '__APP_SLUG__:web:base',
+    home: '__APP_SLUG__:web:home',
+    session: '__APP_SLUG__:web:session',
+    about: '__APP_SLUG__:web:about',
+  },
+}
+
+const sessionBase = protocol(route(aliases.session.base, '/session'), contract())
+const webBase = openProtocol(route(aliases.web.base, '/', frontend()))
+
+/**
+ * Shared entrypoint declarations. The api materializes these with handlers; the web
+ * materializes them with screen components and calls them. Routes resolve under the
+ * api service `base` (`/api`), so e.g. `session.list` → `GET /api/session/:sid/items`.
+ */
+export const session = {
+  base: sessionBase,
+  list: protocol(
+    route(aliases.session.list, '/:sid/items', { parent: sessionBase, method: RouteMethod.GET }),
+    contract.request({ params: SessionParamsSchema }, typed<SessionItem[]>()),
+  ),
+  add: protocol(
+    route(aliases.session.add, '/:sid/items', { parent: sessionBase, method: RouteMethod.POST }),
+    contract.request({
+      params: SessionParamsSchema,
+      body: AddItemSchema,
+    }, typed<SessionItem>()),
+  ),
+  remove: protocol(
+    route(aliases.session.remove, '/:sid/items/:id', { parent: sessionBase, method: RouteMethod.DELETE }),
+    contract.request({ params: ItemParamsSchema }, typed<{ removed: boolean }>()),
+  ),
+}
+
+/** Frontend routes are protocol declarations too; their renderer is bound by the web project. */
+export const web = {
+  base: webBase,
+  home: openProtocol(route(aliases.web.home, '/', frontend({ default: true, parent: webBase }))),
+  session: openProtocol(route(aliases.web.session, '/session', frontend({ parent: webBase }))),
+  about: openProtocol(route(aliases.web.about, '/about', frontend({ parent: webBase }))),
+}
+
+/** The shared immutable protocol tree. Runtime packages bind their own local handlers and screens. */
+export const appProtocols = Object.freeze({
+  api: Object.freeze({ session }),
+  web: Object.freeze(web),
+})

package/template/sources/common/src/index.bare.ts

@@ -0,0 +1,3 @@
+export * from './consts.js'
+export * from './config.js'
+export * from './entrypoints.js'

package/template/sources/common/src/index.ts

@@ -2,4 +2,4 @@ export * from './consts.js'
 export * from './types.js'
 export * from './schemas.js'
 export * from './config.js'
-export * from './modules.js'
+export * from './entrypoints.js'

package/template/sources/common/src/schemas.ts

@@ -1,25 +1,25 @@
-import type { JSONSchemaType } from 'ajv'
+import { schema } from '@owlmeans/entrypoint'
 import type { AddItemPayload, ItemParams, SessionParams } from './types.js'
 
-export const AddItemSchema: JSONSchemaType<AddItemPayload> = {
+export const AddItemSchema = schema<AddItemPayload>({
   type: 'object',
   properties: {
     text: { type: 'string', minLength: 1, maxLength: 280 },
   },
   required: ['text'],
   additionalProperties: false,
-}
+})
 
-export const SessionParamsSchema: JSONSchemaType<SessionParams> = {
+export const SessionParamsSchema = schema<SessionParams>({
   type: 'object',
   properties: {
     sid: { type: 'string', minLength: 1 },
   },
   required: ['sid'],
   additionalProperties: false,
-}
+})
 
-export const ItemParamsSchema: JSONSchemaType<ItemParams> = {
+export const ItemParamsSchema = schema<ItemParams>({
   type: 'object',
   properties: {
     sid: { type: 'string', minLength: 1 },
@@ -27,4 +27,4 @@ export const ItemParamsSchema: JSONSchemaType<ItemParams> = {
   },
   required: ['sid', 'id'],
   additionalProperties: false,
-}
+})

package/template/sources/web/THIRD-PARTY-NOTICES.txt

@@ -0,0 +1,24 @@
+shadcn/ui — copied UI components
+Source: https://github.com/shadcn-ui/ui
+
+MIT License
+
+Copyright (c) 2023 shadcn
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/template/sources/web/index.html

@@ -1,9 +1,11 @@
 <!doctype html>
-<html lang="en">
+<html lang="__APP_LANG__">
 
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="application-name" content="__APP_NAME__" />
+  <meta name="description" content="__APP_DESCRIPTION__" />
   <title>__APP_NAME__</title>
 </head>
 

package/template/sources/web/package.json

@@ -11,40 +11,42 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@owlmeans/client": "^0.1.18-rc.0",
-    "@owlmeans/client-config": "^0.1.18-rc.0",
-    "@owlmeans/client-context": "^0.1.18-rc.0",
-    "@owlmeans/client-entrypoint": "^0.1.18-rc.0",
-    "@owlmeans/client-i18n": "^0.1.18-rc.0",
-    "@owlmeans/entrypoint": "^0.1.18-rc.0",
-    "@owlmeans/route": "^0.1.18-rc.0",
-    "@owlmeans/state": "^0.1.18-rc.0",
-    "@owlmeans/web-client": "^0.1.18-rc.0",
-    "@owlmeans/web-panel": "^0.1.18-rc.0",
-    "@radix-ui/react-label": "^2.1.0",
-    "@radix-ui/react-progress": "^1.1.0",
-    "@radix-ui/react-slot": "^1.1.0",
+    "@owlmeans/client": "^0.1.18",
+    "@owlmeans/client-config": "^0.1.18",
+    "@owlmeans/client-context": "^0.1.18",
+    "@owlmeans/client-entrypoint": "^0.1.18",
+    "@owlmeans/client-i18n": "^0.1.18",
+    "@owlmeans/entrypoint": "^0.1.18",
+    "@owlmeans/log": "^0.1.18",
+    "@owlmeans/route": "^0.1.18",
+    "@owlmeans/state": "^0.1.18",
+    "@owlmeans/web-client": "^0.1.18",
+    "@owlmeans/web-panel": "^0.1.18",
+    "@radix-ui/react-dropdown-menu": "^2.1.24",
+    "@radix-ui/react-label": "^2.1.15",
+    "@radix-ui/react-navigation-menu": "^1.2.22",
+    "@radix-ui/react-progress": "^1.1.16",
+    "@radix-ui/react-slot": "^1.3.3",
     "__APP_SLUG__-common": "workspace:^",
-    "ajv": "^8.17.1",
-    "class-variance-authority": "^0.7.0",
-    "clsx": "^2.1.0",
-    "i18next": "^26.2.0",
-    "lucide-react": "^1.31.0",
-    "react": "^19.2.8",
-    "react-dom": "^19.2.8",
-    "react-hook-form": "^7.62.0",
-    "react-i18next": "^17.0.11",
-    "tailwind-merge": "^3.6.0",
-    "tailwindcss": "^4.1.13"
+    "ajv": "^8.20.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "i18next": "^26.4.2",
+    "lucide-react": "^1.52.0",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "react-hook-form": "^7.89.0",
+    "react-i18next": "^17.0.15",
+    "tailwind-merge": "^3.7.0",
+    "tailwindcss": "^4.3.3"
   },
   "devDependencies": {
-    "@owlmeans/dep-config": "^0.1.18-rc.0",
-    "@tailwindcss/vite": "^4.1.13",
-    "@types/react": "^19.2.17",
-    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^6.0.3",
+    "@owlmeans/dep-config": "^0.1.18",
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@vitejs/plugin-react": "^6.1.1",
     "typescript": "^7.0.2",
-    "vite": "^8.1.2",
-    "vite-tsconfig-paths": "^5.1.4"
+    "vite": "^8.3.2"
   }
 }

package/template/sources/web/src/components/ui/dropdown-menu.tsx

@@ -0,0 +1,257 @@
+"use client"
+
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}